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

package/fesm2022/{acorex-modules-task-management-task-board.page-DA2563QE.mjs → acorex-modules-task-management-task-board.page-DF4XWz_0.mjs}

@@ -26,7 +26,7 @@ import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXLocaleService } from '@acorex/core/locale';
 import * as i6 from '@acorex/core/translation';
-import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
+import { AXTranslatorPipe, AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPPlatformScope, AXPDeviceService } from '@acorex/platform/core';
 import { AXPStateMessageComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent } from '@acorex/platform/layout/components';
@@ -34,38 +34,27 @@ import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase }
 import * as i1$1 from '@angular/common';
 import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, inject, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, viewChild, untracked, afterNextRender, model, viewChildren } from '@angular/core';
+import { computed, inject, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, DestroyRef, viewChild, untracked, afterNextRender, model, viewChildren } from '@angular/core';
 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 { AXPTaskBoardService, RootConfig } from './acorex-modules-task-management.mjs';
+import { A as AXM_TASK_BOARD_ALL_VIEW_MODE_IDS, a as AXMTaskBoardSettings, n as normalizeVisibleTaskBoardModesByParts, b as AXPTaskBoardService, R as RootConfig } from './acorex-modules-task-management-acorex-modules-task-management-it-Lf0L_.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';
+import { AXPSessionService } from '@acorex/platform/auth';
 import { AXPSettingsService } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 import { isEqual, sortBy } from 'lodash-es';
 import { AXSchedulerService, AXSchedulerComponent } from '@acorex/components/scheduler';
 import { AXPCommandService } from '@acorex/platform/runtime';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AXDataSource } from '@acorex/cdk/common';
 import * as i1$2 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXKanbanComponent } from '@acorex/components/kanban';
 
-var AXMTaskBoardSettings;
-(function (AXMTaskBoardSettings) {
-    AXMTaskBoardSettings["ViewMode"] = "taskboard.viewMode";
-    AXMTaskBoardSettings["DetailPanel"] = "taskboard.DetailPanel";
-    AXMTaskBoardSettings["DaysCount"] = "taskboard.calendar.daysCount";
-    AXMTaskBoardSettings["CurrentDate"] = "taskboard.calendar.currentDate";
-    AXMTaskBoardSettings["SelectedPriorities"] = "taskboard.filter.selectedPriorities";
-    AXMTaskBoardSettings["SelectedAssigneeIds"] = "taskboard.filter.selectedAssigneeIds";
-    AXMTaskBoardSettings["SelectedReporterIds"] = "taskboard.filter.selectedReporterIds";
-    AXMTaskBoardSettings["SelectedTaskTypeNames"] = "taskboard.filter.selectedTaskTypeNames";
-    AXMTaskBoardSettings["SelectedCalendarEventTypeIds"] = "taskboard.filter.selectedCalendarEventTypeIds";
-})(AXMTaskBoardSettings || (AXMTaskBoardSettings = {}));
-
 const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() => ({
     daysCount: 7,
     taskTypes: [],
@@ -75,6 +64,7 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
     rangeStartDate: null,
     currentDate: new Date(),
     currentViewMode: 'month',
+    visibleViewModes: [...AXM_TASK_BOARD_ALL_VIEW_MODE_IDS],
     selectedTaskTypeNames: [],
     selectedAssigneeIds: [],
     selectedPriorities: [],
@@ -117,7 +107,7 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
         }
         return count;
     }),
-})), withMethods((store, settingsService = inject(AXPSettingsService), taskBoardService = inject(AXPTaskBoardService)) => {
+})), withMethods((store, settingsService = inject(AXPSettingsService), taskBoardService = inject(AXPTaskBoardService), sessionService = inject(AXPSessionService)) => {
     const userScopedSettings = () => settingsService.scope(AXPPlatformScope.User);
     return {
         async initialize() {
@@ -125,17 +115,27 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
             try {
                 const taskTypes = await taskBoardService.getTaskTypes();
                 patchState(store, { taskTypes });
-                const [savedDaysCount, savedDateString, savedDetailPanel, savedViewMode, savedTaskTypeNames, savedAssigneeIds, savedReporterIds, savedPriorities, savedCalendarEventTypeIds,] = await Promise.all([
+                const [savedDaysCount, savedDateString, savedDetailPanel, savedViewMode, savedVisibleCalendarModes, savedVisibleTimelineModes, savedVisibleTableModes, savedVisibleKanbanModes, savedTaskTypeNames, savedAssigneeIds, savedReporterIds, savedPriorities, savedCalendarEventTypeIds,] = await Promise.all([
                     userScopedSettings().get(AXMTaskBoardSettings.DaysCount),
                     userScopedSettings().get(AXMTaskBoardSettings.CurrentDate),
                     userScopedSettings().get(AXMTaskBoardSettings.DetailPanel),
                     userScopedSettings().get(AXMTaskBoardSettings.ViewMode),
+                    userScopedSettings().get(AXMTaskBoardSettings.VisibleCalendarModes),
+                    userScopedSettings().get(AXMTaskBoardSettings.VisibleTimelineModes),
+                    userScopedSettings().get(AXMTaskBoardSettings.VisibleTableModes),
+                    userScopedSettings().get(AXMTaskBoardSettings.VisibleKanbanModes),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedTaskTypeNames),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedAssigneeIds),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedReporterIds),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedPriorities),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedCalendarEventTypeIds),
                 ]);
+                const visibleViewModes = normalizeVisibleTaskBoardModesByParts({
+                    calendar: savedVisibleCalendarModes,
+                    timeline: savedVisibleTimelineModes,
+                    table: savedVisibleTableModes,
+                    kanban: savedVisibleKanbanModes,
+                });
                 // Ensure currentDate is always a valid Date
                 let currentDate;
                 if (savedDateString) {
@@ -145,13 +145,25 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 else {
                     currentDate = new Date();
                 }
+                const currentUserId = sessionService.user?.id;
+                const defaultAssigneeIds = savedAssigneeIds === undefined && currentUserId != null ? [currentUserId] : (savedAssigneeIds ?? []);
+                let effectiveViewMode = savedViewMode || 'month';
+                if (!visibleViewModes.includes(effectiveViewMode)) {
+                    effectiveViewMode = visibleViewModes[0] ?? 'month';
+                }
+                if (savedViewMode != null && !visibleViewModes.includes(savedViewMode)) {
+                    userScopedSettings()
+                        .set(AXMTaskBoardSettings.ViewMode, effectiveViewMode)
+                        .catch((error) => console.error('Error aligning task board view mode with visible views:', error));
+                }
                 patchState(store, {
                     daysCount: savedDaysCount || 7,
                     detailPanel: savedDetailPanel || false,
-                    currentViewMode: savedViewMode || 'month',
+                    currentViewMode: effectiveViewMode,
+                    visibleViewModes,
                     currentDate,
                     selectedTaskTypeNames: savedTaskTypeNames || [],
-                    selectedAssigneeIds: savedAssigneeIds || [],
+                    selectedAssigneeIds: defaultAssigneeIds,
                     selectedReporterIds: savedReporterIds || [],
                     selectedPriorities: savedPriorities || [],
                     selectedCalendarEventTypeIds: savedCalendarEventTypeIds || [],
@@ -163,6 +175,7 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 patchState(store, {
                     detailPanel: false,
                     currentViewMode: 'month',
+                    visibleViewModes: [...AXM_TASK_BOARD_ALL_VIEW_MODE_IDS],
                     currentDate: new Date(),
                     selectedTaskTypeNames: [],
                     selectedAssigneeIds: [],
@@ -175,18 +188,22 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
             }
         },
         setViewMode(mode) {
-            if ((mode === 'kanban' || mode === 'status-grouped-grid') && store.selectedTaskTypeNames().length === 0) {
+            const allowed = store.visibleViewModes();
+            const effectiveMode = allowed.includes(mode) ? mode : (allowed[0] ?? mode);
+            if ((effectiveMode === 'kanban' || effectiveMode === 'status-grouped-grid') &&
+                store.selectedTaskTypeNames().length === 0) {
                 const firstTaskType = store.taskTypes()[0];
                 if (firstTaskType) {
                     this.setSelectedTaskTypeNames([firstTaskType.name]);
                 }
             }
-            if ((mode === 'kanban' || mode === 'status-grouped-grid') && store.selectedTaskTypeNames().length > 1) {
+            if ((effectiveMode === 'kanban' || effectiveMode === 'status-grouped-grid') &&
+                store.selectedTaskTypeNames().length > 1) {
                 this.setSelectedTaskTypeNames([store.selectedTaskTypeNames()[0]]);
             }
-            patchState(store, { currentViewMode: mode });
+            patchState(store, { currentViewMode: effectiveMode });
             userScopedSettings()
-                .set(AXMTaskBoardSettings.ViewMode, mode)
+                .set(AXMTaskBoardSettings.ViewMode, effectiveMode)
                 .catch((error) => console.error('Error saving calendar view mode:', error));
         },
         setCurrentDate(date) {
@@ -540,6 +557,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], template: "<div class=\"ax-px-4 ax-py-3 ax-flex ax-flex-col ax-gap-2 ax-sm ax-w-[20rem]\">\n  <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <ax-form>\n      <div class=\"ax-flex ax-flex-col ax-gap-4\">\n        <!-- @if (taskTypeItems()) {\n          <ax-form-field>\n            <ax-label> </ax-label>\n            <ax-selection-list\n              [items]=\"taskTypeItems()!\"\n              [ngModel]=\"selectedTaskTypeValues()!\"\n              (onValueChanged)=\"handleTaskTypeSelectionChange.emit($event.value)\"\n              direction=\"vertical\"\n              [multiple]=\"multiple()\"\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            <ax-select-box\n              [dataSource]=\"taskTypeItems()!\"\n              [ngModel]=\"selectedTaskTypeValues()!\"\n              (onValueChanged)=\"handleTaskTypeSelectionChange.emit($event.value)\"\n              [multiple]=\"multiple()\"\n              valueField=\"id\"\n              textField=\"text\"\n            >\n            </ax-select-box>\n          </ax-form-field>\n          <hr />\n        } -->\n        @for (node of nodes(); track $index) {\n          <ax-form-field>\n            @if (node.meta?.['title']) {\n              <ax-label>\n                {{ node.meta?.['title'] | translate: { scope: rootConfig.config.i18n } | async }}\n              </ax-label>\n            }\n            <ng-container axp-widget-renderer [node]=\"node\" [mode]=\"'edit'\"></ng-container>\n          </ax-form-field>\n        }\n      </div>\n      <!-- <div class=\"ax-flex ax-gap-2 ax-mt-6 ax-mb-1\">\n        <ax-button\n          (onClick)=\"handleReset()\"\n          class=\"ax-w-full\"\n          [text]=\"'@general:actions.clear.title' | translate | async\"\n        ></ax-button>\n        <ax-button\n          color=\"primary\"\n          [type]=\"'submit'\"\n          (onClick)=\"handleApply()\"\n          class=\"ax-w-full\"\n          [text]=\"'@general:actions.apply.title' | translate | async\"\n        ></ax-button>\n      </div> -->\n    </ax-form>\n  </axp-widgets-container>\n</div>\n" }]
         }], propDecorators: { isQueryParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "isQueryParam", required: false }] }], applyClicked: [{ type: i0.Output, args: ["applyClicked"] }] } });
 
+//#region ---- Imports ----
+//#endregion
+//#region ---- Menu Definition ----
+/** Default task board view selector structure (filtered by user preference for visible modes). */
+const AXM_TASK_BOARD_MENU_ITEMS = [
+    {
+        key: 'calendar',
+        text: 'calendar',
+        icon: 'fa-light fa-calendar-day',
+        children: [
+            { key: 'day', text: 'daily', icon: 'fa-light fa-calendar-day' },
+            { key: 'week', text: 'weekly', icon: 'fa-light fa-calendar-week' },
+            { key: 'month', text: 'monthly', icon: 'fa-light fa-calendar-alt' },
+            { key: 'agenda', text: 'agenda', icon: 'fa-light fa-calendar-range' },
+        ],
+    },
+    {
+        key: 'timeline',
+        text: 'timeline',
+        icon: 'fa-light fa-list-timeline',
+        children: [
+            { key: 'timeline-day', text: 'daily-timeline', icon: 'fa-light fa-calendar-day' },
+            { key: 'timeline-weekly', text: 'weekly-timeline', icon: 'fa-light fa-calendar-week' },
+            { key: 'timeline-month', text: 'monthly-timeline', icon: 'fa-light fa-calendar-alt' },
+            { key: 'timeline-year', text: 'yearly-timeline', icon: 'fa-light fa-calendar-range' },
+        ],
+    },
+    {
+        key: 'table',
+        text: 'table',
+        icon: 'fa-light fa-table',
+        children: [
+            { key: 'grid', text: 'grid', icon: 'fa-light fa-table' },
+            { key: 'status-grouped-grid', text: 'status-grouped-grid', icon: 'fa-light fa-table' },
+        ],
+    },
+    { key: 'kanban', text: 'kanban', icon: 'fa-light fa-chart-kanban' },
+];
+/**
+ * Returns menu branches that contain at least one allowed leaf mode.
+ */
+function filterTaskBoardMenuByAllowedModes(items, allowed) {
+    const result = [];
+    for (const category of items) {
+        if (!category.children) {
+            if (allowed.has(category.key)) {
+                result.push(category);
+            }
+            continue;
+        }
+        const children = category.children.filter((child) => allowed.has(child.key));
+        if (children.length > 0) {
+            result.push({ ...category, children });
+        }
+    }
+    return result;
+}
+//#endregion
+
 class AXMTaskBoardCalendarViewComponent {
     constructor() {
         this.vm = inject(AXMTaskBoardViewModel);
@@ -548,6 +624,7 @@ class AXMTaskBoardCalendarViewComponent {
         this.settingService = inject(AXPSettingsService);
         this.commandService = inject(AXPCommandService);
         this.schedulerService = inject(AXSchedulerService);
+        this.destroyRef = inject(DestroyRef);
         this.schedulerComponent = viewChild(AXSchedulerComponent, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : /* istanbul ignore next */ []));
         this.taskPopover = viewChild.required('taskPopover');
         this.selectedTask = signal(null, ...(ngDevMode ? [{ debugName: "selectedTask" }] : /* istanbul ignore next */ []));
@@ -568,6 +645,7 @@ class AXMTaskBoardCalendarViewComponent {
             return { task };
         }, ...(ngDevMode ? [{ debugName: "customComponentInputs" }] : /* istanbul ignore next */ []));
         this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
+        this.refreshNonce = input(0, ...(ngDevMode ? [{ debugName: "refreshNonce" }] : /* istanbul ignore next */ []));
         this.startingDate = input(new Date(), ...(ngDevMode ? [{ debugName: "startingDate" }] : /* istanbul ignore next */ []));
         this.selectedView = input('month', ...(ngDevMode ? [{ debugName: "selectedView" }] : /* istanbul ignore next */ []));
         this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
@@ -588,6 +666,10 @@ class AXMTaskBoardCalendarViewComponent {
         this.component = output();
         this.onTaskRightClick = output();
         this.onRangeChanged = output();
+        this.refreshNonceEffect = effect(() => {
+            this.refreshNonce();
+            this.schedulerComponent()?.refresh();
+        }, ...(ngDevMode ? [{ debugName: "refreshNonceEffect" }] : /* istanbul ignore next */ []));
     }
     // async ngOnInit(): Promise<void> {
     //   const firstDayOfWeek = await this.settingsService.get(AXPRegionalSetting.FirstDayOfWeek) as unknown as number;
@@ -596,6 +678,26 @@ class AXMTaskBoardCalendarViewComponent {
     //   this.weekendDays.set((await this.settingsService.get(AXPRegionalSetting.WeekendDays)) as unknown as number[]);
     // }
     async ngAfterViewInit() {
+        this.taskBoardService.refresh$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(async (data) => {
+            const selected = this.selectedTask();
+            if (!selected?.provider)
+                return;
+            if (data.provider && data.provider !== selected.provider)
+                return;
+            await this.refreshPopoverData();
+        });
+        this.taskBoardService.close$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((data) => {
+            const selected = this.selectedTask();
+            if (!selected?.provider)
+                return;
+            if (data.provider && data.provider !== selected.provider)
+                return;
+            this.closePopover();
+        });
         if (this.schedulerComponent()) {
             this.component.emit(this.schedulerComponent());
         }
@@ -734,6 +836,14 @@ class AXMTaskBoardCalendarViewComponent {
             console.error('Failed to execute action:', error);
         }
     }
+    async refreshPopoverData() {
+        const task = this.selectedTask();
+        if (!task) {
+            return;
+        }
+        await this.loadTaskActions(task);
+        this.schedulerComponent()?.refresh();
+    }
     async openTaskDetails() {
         const task = this.selectedTask();
         if (!task)
@@ -882,7 +992,7 @@ class AXMTaskBoardCalendarViewComponent {
         return `${dateFormatted} ${timeRange}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMTaskBoardCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMTaskBoardCalendarViewComponent, isStandalone: true, selector: "axm-task-board-calendar-view", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onTaskChanged: "onTaskChanged", onMonthSlotDblClicked: "onMonthSlotDblClicked", onActionClick: "onActionClick", component: "component", onTaskRightClick: "onTaskRightClick", onRangeChanged: "onRangeChanged" }, viewQueries: [{ propertyName: "schedulerComponent", first: true, predicate: AXSchedulerComponent, descendants: true, isSignal: true }, { propertyName: "taskPopover", first: true, predicate: ["taskPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-scheduler\n  [hasHeader]=\"false\"\n  [holidays]=\"holidays\"\n  [resources]=\"resources()\"\n  [dataSource]=\"dataSource()\"\n  [startingDate]=\"startingDate()\"\n  [selectedView]=\"currentSchedulerView()\"\n  [multiDayViewDaysCount]=\"vm.daysCount()\"\n  (onAppointmentDrop)=\"onTaskDrop($event)\"\n  (onActionClick)=\"handleActionClick($event)\"\n  (onRangeChanged)=\"handleRangeChanged($event)\"\n  (onSlotDblClicked)=\"onSlotDblClicked($event)\"\n  (onAppointmentClicked)=\"onTaskClickHandler($event)\"\n  [weekend]=\"weekendDays()\"\n  [firstDayOfWeek]=\"firstDayOfWeek()\"\n></ax-scheduler>\n\n<!-- Task Detail Popover (Modern Google Calendar Style) -->\n<ax-popover\n  #taskPopover\n  [openOn]=\"'manual'\"\n  [closeOn]=\"'clickOut'\"\n  [offsetY]=\"12\"\n  [offsetX]=\"12\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div>\n    @if (selectedTask()) {\n      <div class=\"task-popover ax-shadow-md ax-border\">\n        <!-- Header Section -->\n        <div class=\"task-popover__header\">\n          <div class=\"task-popover__title-section\">\n            <div class=\"task-popover__title-row\">\n              <h3 class=\"task-popover__title\" [title]=\"selectedTask()!.title\">{{ selectedTask()!.title }}</h3>\n              <button type=\"button\" class=\"task-popover__close-btn\" (click)=\"closePopover()\" aria-label=\"Close\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            </div>\n            @if (selectedTask()!.description && !customComponentType()) {\n              <p class=\"task-popover__description\">{{ selectedTask()!.description }}</p>\n            }\n          </div>\n        </div>\n\n        <!-- Custom Component or Default Content -->\n        @if (customComponentType()) {\n          <!-- Custom Component from Provider -->\n          <div class=\"task-popover__custom-content\">\n            <ng-container *ngComponentOutlet=\"customComponentType()!; inputs: customComponentInputs()!\"></ng-container>\n          </div>\n        } @else {\n          <!-- Default Content Section -->\n          <div class=\"task-popover__content\">\n            <!-- Time -->\n            <div class=\"task-popover__info-item\">\n              <div class=\"task-popover__icon\">\n                <i class=\"fa-light fa-clock\"></i>\n              </div>\n              <div class=\"task-popover__info-content\">\n                <span class=\"task-popover__info-text\">{{ formatDateRange(selectedTask()!) }}</span>\n              </div>\n            </div>\n\n            <!-- Status -->\n            @if (selectedTask()!.status) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-flag\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{ selectedTask()!.status.title }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Assignee -->\n            @if (selectedTask()!.assignee) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-user\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{\n                    selectedTask()!.assignee?.fullName || selectedTask()!.assignee?.username || 'Unassigned'\n                  }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Priority -->\n            @if (selectedTask()!.priority) {\n              <div class=\"task-popover__info-item\">\n                <div\n                  class=\"task-popover__icon task-popover__icon--priority\"\n                  [attr.data-priority]=\"selectedTask()!.priority\"\n                >\n                  <i class=\"fa-light fa-exclamation-circle\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span\n                    class=\"task-popover__info-text task-popover__priority\"\n                    [attr.data-priority]=\"selectedTask()!.priority\"\n                  >\n                    {{ selectedTask()!.priority }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Actions Section -->\n          <div class=\"task-popover__actions\">\n            <!-- Task Actions from Provider -->\n            @if (taskActions().length > 0) {\n              <div class=\"task-popover__actions-group\">\n                <!-- Primary Actions: Icon-only buttons -->\n                @if (primaryActions().length > 0) {\n                  @for (action of primaryActions(); track action.name || action.title) {\n                    <ax-button\n                      [look]=\"'solid'\"\n                      [color]=\"getActionColor(action)\"\n                      (onClick)=\"executeAction(action)\"\n                      [disabled]=\"action.disabled === true\"\n                      [text]=\"(action.title | translate | async)!\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button>\n                  }\n                }\n\n                <!-- Secondary Actions: Dropdown with \"...\" button -->\n                @if (secondaryActions().length > 0) {\n                  <ax-button [look]=\"'blank'\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n                    </ax-prefix>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of secondaryActions(); track action.name || action.title) {\n                          <ax-button-item\n                            [text]=\"(action.title | translate | async)!\"\n                            [disabled]=\"action.disabled === true\"\n                            (onClick)=\"executeAction(action)\"\n                          >\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon>\n                                  <i [class]=\"action.icon\"></i>\n                                </ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ax-popover>\n", styles: ["ax-scheduler{line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}.task-popover{background:rgba(var(--ax-sys-color-lightest-surface));border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.task-popover__header{padding:20px 20px 16px;border-bottom:1px solid var(--ax-sys-color-border);background:linear-gradient(to bottom,var(--ax-sys-color-lightest-surface),var(--ax-sys-color-lighter-surface))}.task-popover__title-section{display:flex;flex-direction:column;gap:8px}.task-popover__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.task-popover__title{font-size:18px;font-weight:600;line-height:1.4;color:var(--ax-sys-color-text-primary);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-popover__close-btn{flex-shrink:0;background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ax-sys-color-text-neutral-600);transition:color .2s ease;border-radius:4px}.task-popover__close-btn:hover{color:var(--ax-sys-color-text-primary);background:var(--ax-sys-color-lighter-surface)}.task-popover__close-btn:active{background:var(--ax-sys-color-light-surface)}.task-popover__close-btn ax-icon{display:block;width:16px;height:16px}.task-popover__description{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.task-popover__content{padding:16px 20px;display:flex;flex-direction:column;gap:12px;flex:1}.task-popover__info-item{display:flex;align-items:flex-start;gap:12px;min-height:24px}.task-popover__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;color:var(--ax-sys-color-text-neutral-600);font-size:14px}.task-popover__icon i{display:block}.task-popover__icon--priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__icon--priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__icon--priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__icon--priority[data-priority=low],.task-popover__icon--priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-500)}.task-popover__info-content{flex:1;min-width:0;display:flex;align-items:center}.task-popover__info-text{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-primary);word-wrap:break-word}.task-popover__time{font-weight:500;color:var(--ax-sys-color-text-primary);margin-left:4px}.task-popover__priority{text-transform:capitalize;font-weight:500}.task-popover__priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__priority[data-priority=low],.task-popover__priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-600)}.task-popover__actions{padding:12px 20px 16px;border-top:1px solid var(--ax-sys-color-border);display:flex;flex-direction:column;gap:8px;background:var(--ax-sys-color-lighter-surface)}.task-popover__actions-group{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.task-popover__actions-group--default{margin-top:4px;padding-top:8px;border-top:1px solid var(--ax-sys-color-border)}.task-popover__action-divider{width:100%;height:1px;background:var(--ax-sys-color-border);margin:4px 0}.task-popover__action-btn{min-width:100px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMTaskBoardCalendarViewComponent, isStandalone: true, selector: "axm-task-board-calendar-view", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, refreshNonce: { classPropertyName: "refreshNonce", publicName: "refreshNonce", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onTaskChanged: "onTaskChanged", onMonthSlotDblClicked: "onMonthSlotDblClicked", onActionClick: "onActionClick", component: "component", onTaskRightClick: "onTaskRightClick", onRangeChanged: "onRangeChanged" }, viewQueries: [{ propertyName: "schedulerComponent", first: true, predicate: AXSchedulerComponent, descendants: true, isSignal: true }, { propertyName: "taskPopover", first: true, predicate: ["taskPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-scheduler\n  [hasHeader]=\"false\"\n  [holidays]=\"holidays\"\n  [resources]=\"resources()\"\n  [dataSource]=\"dataSource()\"\n  [startingDate]=\"startingDate()\"\n  [selectedView]=\"currentSchedulerView()\"\n  [multiDayViewDaysCount]=\"vm.daysCount()\"\n  (onAppointmentDrop)=\"onTaskDrop($event)\"\n  (onActionClick)=\"handleActionClick($event)\"\n  (onRangeChanged)=\"handleRangeChanged($event)\"\n  (onSlotDblClicked)=\"onSlotDblClicked($event)\"\n  (onAppointmentClicked)=\"onTaskClickHandler($event)\"\n  [weekend]=\"weekendDays()\"\n  [firstDayOfWeek]=\"firstDayOfWeek()\"\n></ax-scheduler>\n\n<!-- Task Detail Popover (Modern Google Calendar Style) -->\n<ax-popover\n  #taskPopover\n  [openOn]=\"'manual'\"\n  [closeOn]=\"'clickOut'\"\n  [offsetY]=\"12\"\n  [offsetX]=\"12\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div>\n    @if (selectedTask()) {\n      <div class=\"task-popover ax-shadow-md ax-border\">\n        <!-- Header Section -->\n        <div class=\"task-popover__header\">\n          <div class=\"task-popover__title-section\">\n            <div class=\"task-popover__title-row\">\n              <h3 class=\"task-popover__title\" [title]=\"selectedTask()!.title\">{{ selectedTask()!.title }}</h3>\n              <button type=\"button\" class=\"task-popover__close-btn\" (click)=\"closePopover()\" aria-label=\"Close\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            </div>\n            @if (selectedTask()!.description && !customComponentType()) {\n              <p class=\"task-popover__description\">{{ selectedTask()!.description }}</p>\n            }\n          </div>\n        </div>\n\n        <!-- Custom Component or Default Content -->\n        @if (customComponentType()) {\n          <!-- Custom Component from Provider -->\n          <div class=\"task-popover__custom-content\">\n            <ng-container *ngComponentOutlet=\"customComponentType()!; inputs: customComponentInputs()!\"></ng-container>\n          </div>\n        } @else {\n          <!-- Default Content Section -->\n          <div class=\"task-popover__content\">\n            <!-- Time -->\n            <div class=\"task-popover__info-item\">\n              <div class=\"task-popover__icon\">\n                <i class=\"fa-light fa-clock\"></i>\n              </div>\n              <div class=\"task-popover__info-content\">\n                <span class=\"task-popover__info-text\">{{ formatDateRange(selectedTask()!) }}</span>\n              </div>\n            </div>\n\n            <!-- Status -->\n            @if (selectedTask()!.status) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-flag\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{ selectedTask()!.status.title }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Assignee -->\n            @if (selectedTask()!.assignee) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-user\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{\n                    selectedTask()!.assignee?.fullName || selectedTask()!.assignee?.username || 'Unassigned'\n                  }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Priority -->\n            @if (selectedTask()!.priority) {\n              <div class=\"task-popover__info-item\">\n                <div\n                  class=\"task-popover__icon task-popover__icon--priority\"\n                  [attr.data-priority]=\"selectedTask()!.priority\"\n                >\n                  <i class=\"fa-light fa-exclamation-circle\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span\n                    class=\"task-popover__info-text task-popover__priority\"\n                    [attr.data-priority]=\"selectedTask()!.priority\"\n                  >\n                    {{ selectedTask()!.priority }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Actions Section -->\n          <div class=\"task-popover__actions\">\n            <!-- Task Actions from Provider -->\n            @if (taskActions().length > 0) {\n              <div class=\"task-popover__actions-group\">\n                <!-- Primary Actions: Icon-only buttons -->\n                @if (primaryActions().length > 0) {\n                  @for (action of primaryActions(); track action.name || action.title) {\n                    <ax-button\n                      [look]=\"'solid'\"\n                      [color]=\"getActionColor(action)\"\n                      (onClick)=\"executeAction(action)\"\n                      [disabled]=\"action.disabled === true\"\n                      [text]=\"(action.title | translate | async)!\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button>\n                  }\n                }\n\n                <!-- Secondary Actions: Dropdown with \"...\" button -->\n                @if (secondaryActions().length > 0) {\n                  <ax-button [look]=\"'blank'\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n                    </ax-prefix>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of secondaryActions(); track action.name || action.title) {\n                          <ax-button-item\n                            [text]=\"(action.title | translate | async)!\"\n                            [disabled]=\"action.disabled === true\"\n                            (onClick)=\"executeAction(action)\"\n                          >\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon>\n                                  <i [class]=\"action.icon\"></i>\n                                </ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ax-popover>\n", styles: ["ax-scheduler{line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}.task-popover{background:rgba(var(--ax-sys-color-lightest-surface));border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.task-popover__header{padding:20px 20px 16px;border-bottom:1px solid var(--ax-sys-color-border);background:linear-gradient(to bottom,var(--ax-sys-color-lightest-surface),var(--ax-sys-color-lighter-surface))}.task-popover__title-section{display:flex;flex-direction:column;gap:8px}.task-popover__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.task-popover__title{font-size:18px;font-weight:600;line-height:1.4;color:var(--ax-sys-color-text-primary);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-popover__close-btn{flex-shrink:0;background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ax-sys-color-text-neutral-600);transition:color .2s ease;border-radius:4px}.task-popover__close-btn:hover{color:var(--ax-sys-color-text-primary);background:var(--ax-sys-color-lighter-surface)}.task-popover__close-btn:active{background:var(--ax-sys-color-light-surface)}.task-popover__close-btn ax-icon{display:block;width:16px;height:16px}.task-popover__description{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.task-popover__content{padding:16px 20px;display:flex;flex-direction:column;gap:12px;flex:1}.task-popover__info-item{display:flex;align-items:flex-start;gap:12px;min-height:24px}.task-popover__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;color:var(--ax-sys-color-text-neutral-600);font-size:14px}.task-popover__icon i{display:block}.task-popover__icon--priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__icon--priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__icon--priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__icon--priority[data-priority=low],.task-popover__icon--priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-500)}.task-popover__info-content{flex:1;min-width:0;display:flex;align-items:center}.task-popover__info-text{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-primary);word-wrap:break-word}.task-popover__time{font-weight:500;color:var(--ax-sys-color-text-primary);margin-left:4px}.task-popover__priority{text-transform:capitalize;font-weight:500}.task-popover__priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__priority[data-priority=low],.task-popover__priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-600)}.task-popover__actions{padding:12px 20px 16px;border-top:1px solid var(--ax-sys-color-border);display:flex;flex-direction:column;gap:8px;background:var(--ax-sys-color-lighter-surface)}.task-popover__actions-group{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.task-popover__actions-group--default{margin-top:4px;padding-top:8px;border-top:1px solid var(--ax-sys-color-border)}.task-popover__action-divider{width:100%;height:1px;background:var(--ax-sys-color-border);margin:4px 0}.task-popover__action-btn{min-width:100px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: AXTranslationModule }, { 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: AXMTaskBoardCalendarViewComponent, decorators: [{
             type: Component,
@@ -895,7 +1005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule,
                     ], template: "<ax-scheduler\n  [hasHeader]=\"false\"\n  [holidays]=\"holidays\"\n  [resources]=\"resources()\"\n  [dataSource]=\"dataSource()\"\n  [startingDate]=\"startingDate()\"\n  [selectedView]=\"currentSchedulerView()\"\n  [multiDayViewDaysCount]=\"vm.daysCount()\"\n  (onAppointmentDrop)=\"onTaskDrop($event)\"\n  (onActionClick)=\"handleActionClick($event)\"\n  (onRangeChanged)=\"handleRangeChanged($event)\"\n  (onSlotDblClicked)=\"onSlotDblClicked($event)\"\n  (onAppointmentClicked)=\"onTaskClickHandler($event)\"\n  [weekend]=\"weekendDays()\"\n  [firstDayOfWeek]=\"firstDayOfWeek()\"\n></ax-scheduler>\n\n<!-- Task Detail Popover (Modern Google Calendar Style) -->\n<ax-popover\n  #taskPopover\n  [openOn]=\"'manual'\"\n  [closeOn]=\"'clickOut'\"\n  [offsetY]=\"12\"\n  [offsetX]=\"12\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div>\n    @if (selectedTask()) {\n      <div class=\"task-popover ax-shadow-md ax-border\">\n        <!-- Header Section -->\n        <div class=\"task-popover__header\">\n          <div class=\"task-popover__title-section\">\n            <div class=\"task-popover__title-row\">\n              <h3 class=\"task-popover__title\" [title]=\"selectedTask()!.title\">{{ selectedTask()!.title }}</h3>\n              <button type=\"button\" class=\"task-popover__close-btn\" (click)=\"closePopover()\" aria-label=\"Close\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            </div>\n            @if (selectedTask()!.description && !customComponentType()) {\n              <p class=\"task-popover__description\">{{ selectedTask()!.description }}</p>\n            }\n          </div>\n        </div>\n\n        <!-- Custom Component or Default Content -->\n        @if (customComponentType()) {\n          <!-- Custom Component from Provider -->\n          <div class=\"task-popover__custom-content\">\n            <ng-container *ngComponentOutlet=\"customComponentType()!; inputs: customComponentInputs()!\"></ng-container>\n          </div>\n        } @else {\n          <!-- Default Content Section -->\n          <div class=\"task-popover__content\">\n            <!-- Time -->\n            <div class=\"task-popover__info-item\">\n              <div class=\"task-popover__icon\">\n                <i class=\"fa-light fa-clock\"></i>\n              </div>\n              <div class=\"task-popover__info-content\">\n                <span class=\"task-popover__info-text\">{{ formatDateRange(selectedTask()!) }}</span>\n              </div>\n            </div>\n\n            <!-- Status -->\n            @if (selectedTask()!.status) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-flag\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{ selectedTask()!.status.title }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Assignee -->\n            @if (selectedTask()!.assignee) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-user\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{\n                    selectedTask()!.assignee?.fullName || selectedTask()!.assignee?.username || 'Unassigned'\n                  }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Priority -->\n            @if (selectedTask()!.priority) {\n              <div class=\"task-popover__info-item\">\n                <div\n                  class=\"task-popover__icon task-popover__icon--priority\"\n                  [attr.data-priority]=\"selectedTask()!.priority\"\n                >\n                  <i class=\"fa-light fa-exclamation-circle\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span\n                    class=\"task-popover__info-text task-popover__priority\"\n                    [attr.data-priority]=\"selectedTask()!.priority\"\n                  >\n                    {{ selectedTask()!.priority }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Actions Section -->\n          <div class=\"task-popover__actions\">\n            <!-- Task Actions from Provider -->\n            @if (taskActions().length > 0) {\n              <div class=\"task-popover__actions-group\">\n                <!-- Primary Actions: Icon-only buttons -->\n                @if (primaryActions().length > 0) {\n                  @for (action of primaryActions(); track action.name || action.title) {\n                    <ax-button\n                      [look]=\"'solid'\"\n                      [color]=\"getActionColor(action)\"\n                      (onClick)=\"executeAction(action)\"\n                      [disabled]=\"action.disabled === true\"\n                      [text]=\"(action.title | translate | async)!\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button>\n                  }\n                }\n\n                <!-- Secondary Actions: Dropdown with \"...\" button -->\n                @if (secondaryActions().length > 0) {\n                  <ax-button [look]=\"'blank'\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n                    </ax-prefix>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of secondaryActions(); track action.name || action.title) {\n                          <ax-button-item\n                            [text]=\"(action.title | translate | async)!\"\n                            [disabled]=\"action.disabled === true\"\n                            (onClick)=\"executeAction(action)\"\n                          >\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon>\n                                  <i [class]=\"action.icon\"></i>\n                                </ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ax-popover>\n", styles: ["ax-scheduler{line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}.task-popover{background:rgba(var(--ax-sys-color-lightest-surface));border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.task-popover__header{padding:20px 20px 16px;border-bottom:1px solid var(--ax-sys-color-border);background:linear-gradient(to bottom,var(--ax-sys-color-lightest-surface),var(--ax-sys-color-lighter-surface))}.task-popover__title-section{display:flex;flex-direction:column;gap:8px}.task-popover__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.task-popover__title{font-size:18px;font-weight:600;line-height:1.4;color:var(--ax-sys-color-text-primary);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-popover__close-btn{flex-shrink:0;background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ax-sys-color-text-neutral-600);transition:color .2s ease;border-radius:4px}.task-popover__close-btn:hover{color:var(--ax-sys-color-text-primary);background:var(--ax-sys-color-lighter-surface)}.task-popover__close-btn:active{background:var(--ax-sys-color-light-surface)}.task-popover__close-btn ax-icon{display:block;width:16px;height:16px}.task-popover__description{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.task-popover__content{padding:16px 20px;display:flex;flex-direction:column;gap:12px;flex:1}.task-popover__info-item{display:flex;align-items:flex-start;gap:12px;min-height:24px}.task-popover__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;color:var(--ax-sys-color-text-neutral-600);font-size:14px}.task-popover__icon i{display:block}.task-popover__icon--priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__icon--priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__icon--priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__icon--priority[data-priority=low],.task-popover__icon--priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-500)}.task-popover__info-content{flex:1;min-width:0;display:flex;align-items:center}.task-popover__info-text{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-primary);word-wrap:break-word}.task-popover__time{font-weight:500;color:var(--ax-sys-color-text-primary);margin-left:4px}.task-popover__priority{text-transform:capitalize;font-weight:500}.task-popover__priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__priority[data-priority=low],.task-popover__priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-600)}.task-popover__actions{padding:12px 20px 16px;border-top:1px solid var(--ax-sys-color-border);display:flex;flex-direction:column;gap:8px;background:var(--ax-sys-color-lighter-surface)}.task-popover__actions-group{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.task-popover__actions-group--default{margin-top:4px;padding-top:8px;border-top:1px solid var(--ax-sys-color-border)}.task-popover__action-divider{width:100%;height:1px;background:var(--ax-sys-color-border);margin:4px 0}.task-popover__action-btn{min-width:100px;white-space:nowrap}\n"] }]
-        }], propDecorators: { schedulerComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXSchedulerComponent), { isSignal: true }] }], taskPopover: [{ type: i0.ViewChild, args: ['taskPopover', { isSignal: true }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], startingDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startingDate", required: false }] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], onTaskClick: [{ type: i0.Output, args: ["onTaskClick"] }], onTaskChanged: [{ type: i0.Output, args: ["onTaskChanged"] }], onMonthSlotDblClicked: [{ type: i0.Output, args: ["onMonthSlotDblClicked"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], component: [{ type: i0.Output, args: ["component"] }], onTaskRightClick: [{ type: i0.Output, args: ["onTaskRightClick"] }], onRangeChanged: [{ type: i0.Output, args: ["onRangeChanged"] }] } });
+        }], propDecorators: { schedulerComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXSchedulerComponent), { isSignal: true }] }], taskPopover: [{ type: i0.ViewChild, args: ['taskPopover', { isSignal: true }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], refreshNonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshNonce", required: false }] }], startingDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startingDate", required: false }] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], onTaskClick: [{ type: i0.Output, args: ["onTaskClick"] }], onTaskChanged: [{ type: i0.Output, args: ["onTaskChanged"] }], onMonthSlotDblClicked: [{ type: i0.Output, args: ["onMonthSlotDblClicked"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], component: [{ type: i0.Output, args: ["component"] }], onTaskRightClick: [{ type: i0.Output, args: ["onTaskRightClick"] }], onRangeChanged: [{ type: i0.Output, args: ["onRangeChanged"] }] } });
 
 class AXMTaskBoardGridViewComponent {
     #dataSourceChanged;
@@ -904,14 +1014,28 @@ class AXMTaskBoardGridViewComponent {
         this.localeService = inject(AXLocaleService);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
+        this.translationService = inject(AXTranslationService);
         this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.refreshNonce = input(0, ...(ngDevMode ? [{ debugName: "refreshNonce" }] : /* istanbul ignore next */ []));
         this.onTaskClick = output();
         this.onActionClick = output();
         this.fetchedTasks = signal([], ...(ngDevMode ? [{ debugName: "fetchedTasks" }] : /* istanbul ignore next */ []));
         this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
         this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        this.commandItems = signal([
+            {
+                name: 'view',
+                text: this.translationService.translateSync('@task-management:task-board.grid-headers.action-view') ?? 'View',
+                icon: 'ax-icon ax-icon-more-horizontal',
+                look: 'blank',
+            },
+        ], ...(ngDevMode ? [{ debugName: "commandItems" }] : /* istanbul ignore next */ []));
+        /** Remount keys so `ax-data-table` is recreated on board refresh (manual fetch mode can keep stale rows otherwise). */
+        this.gridRemountKeys = computed(() => [this.refreshNonce()], ...(ngDevMode ? [{ debugName: "gridRemountKeys" }] : /* istanbul ignore next */ []));
         this.tasksDataSource = computed(() => {
             const parentDataSource = this.dataSource();
+            // Bumps when the task board refreshes so we get a new data source instance (grid refresh alone can keep cached pages).
+            void this.refreshNonce();
             return new AXDataSource({
                 load: async (e) => {
                     const result = await parentDataSource({ skip: e.skip, take: e.take });
@@ -955,11 +1079,12 @@ class AXMTaskBoardGridViewComponent {
             this.vm.currentDate();
             this.vm.daysCount();
             this.vm.currentViewMode();
+            this.refreshNonce();
             // Use untracked to refresh the grid without tracking it
             untracked(() => {
                 // Schedule refresh in next tick to avoid issues during effect execution
                 setTimeout(() => {
-                    this.grid()?.refresh();
+                    this.grid()?.refresh({ reset: true });
                 }, 0);
             });
         }, ...(ngDevMode ? [{ debugName: "#dataSourceChanged" }] : /* istanbul ignore next */ []));
@@ -978,7 +1103,7 @@ class AXMTaskBoardGridViewComponent {
         // Ensure data source is refreshed after initial render
         afterNextRender(() => {
             untracked(() => {
-                this.grid()?.refresh();
+                this.grid()?.refresh({ reset: true });
             });
         });
     }
@@ -1000,12 +1125,12 @@ class AXMTaskBoardGridViewComponent {
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMTaskBoardGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMTaskBoardGridViewComponent, isStandalone: true, selector: "axm-task-board-grid-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-data-table\n  #grid\n  [fetchDataMode]=\"'manual'\"\n  [dataSource]=\"tasksDataSource()\"\n  (onRowClick)=\"handleRowClick($event)\"\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    [allowResizing]=\"true\"\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  <ax-text-column\n    dataField=\"statusTitle\"\n    [caption]=\"('@task-management:task-board.grid-headers.status' | translate | async)!\"\n    [width]=\"'125px'\"\n  ></ax-text-column>\n  <ax-text-column\n    dataField=\"type\"\n    [caption]=\"('@task-management:task-board.grid-headers.type' | translate | async)!\"\n    [width]=\"'150px'\"\n  ></ax-text-column>\n\n  @if (columns().length) {\n    <ng-container>\n      @for (column of columns(); track column) {\n        <axp-widget-column-renderer\n          [node]=\"column.widget\"\n          [caption]=\"(column.title | translate | async)!\"\n        ></axp-widget-column-renderer>\n      }\n    </ng-container>\n  }\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", 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: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { 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: AXMTaskBoardGridViewComponent, isStandalone: true, selector: "axm-task-board-grid-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, refreshNonce: { classPropertyName: "refreshNonce", publicName: "refreshNonce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (remountKey of gridRemountKeys(); track remountKey) {\n  <ax-data-table\n    #grid\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"tasksDataSource()\"\n    (onRowClick)=\"handleRowClick($event)\"\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=\"assignee\"\n      [caption]=\"('@task-management:task-board.grid-headers.assignee' | translate | async)!\"\n      [width]=\"'125px'\"\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      [allowResizing]=\"true\"\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=\"statusTitle\"\n      [caption]=\"('@task-management:task-board.grid-headers.status' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"type\"\n      [caption]=\"('@task-management:task-board.grid-headers.type' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n\n    @if (columns().length) {\n      <ng-container>\n        @for (column of columns(); track column) {\n          <axp-widget-column-renderer\n            [node]=\"column.widget\"\n            [caption]=\"(column.title | translate | async)!\"\n          ></axp-widget-column-renderer>\n        }\n      </ng-container>\n    }\n\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'75px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"commandItems()\"\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: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { 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: AXMTaskBoardGridViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-task-board-grid-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDataTableModule, AXTranslatorPipe, AsyncPipe, AXPWidgetCoreModule], template: "<ax-data-table\n  #grid\n  [fetchDataMode]=\"'manual'\"\n  [dataSource]=\"tasksDataSource()\"\n  (onRowClick)=\"handleRowClick($event)\"\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    [allowResizing]=\"true\"\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  <ax-text-column\n    dataField=\"statusTitle\"\n    [caption]=\"('@task-management:task-board.grid-headers.status' | translate | async)!\"\n    [width]=\"'125px'\"\n  ></ax-text-column>\n  <ax-text-column\n    dataField=\"type\"\n    [caption]=\"('@task-management:task-board.grid-headers.type' | translate | async)!\"\n    [width]=\"'150px'\"\n  ></ax-text-column>\n\n  @if (columns().length) {\n    <ng-container>\n      @for (column of columns(); track column) {\n        <axp-widget-column-renderer\n          [node]=\"column.widget\"\n          [caption]=\"(column.title | translate | async)!\"\n        ></axp-widget-column-renderer>\n      }\n    </ng-container>\n  }\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", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], onTaskClick: [{ type: i0.Output, args: ["onTaskClick"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+            args: [{ selector: 'axm-task-board-grid-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDataTableModule, AXTranslatorPipe, AsyncPipe, AXPWidgetCoreModule], template: "@for (remountKey of gridRemountKeys(); track remountKey) {\n  <ax-data-table\n    #grid\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"tasksDataSource()\"\n    (onRowClick)=\"handleRowClick($event)\"\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=\"assignee\"\n      [caption]=\"('@task-management:task-board.grid-headers.assignee' | translate | async)!\"\n      [width]=\"'125px'\"\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      [allowResizing]=\"true\"\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=\"statusTitle\"\n      [caption]=\"('@task-management:task-board.grid-headers.status' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"type\"\n      [caption]=\"('@task-management:task-board.grid-headers.type' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n\n    @if (columns().length) {\n      <ng-container>\n        @for (column of columns(); track column) {\n          <axp-widget-column-renderer\n            [node]=\"column.widget\"\n            [caption]=\"(column.title | translate | async)!\"\n          ></axp-widget-column-renderer>\n        }\n      </ng-container>\n    }\n\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'75px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"commandItems()\"\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: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], refreshNonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshNonce", required: false }] }], onTaskClick: [{ type: i0.Output, args: ["onTaskClick"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
 
 class AXMTaskBoardKanbanViewComponent {
     constructor() {
@@ -1014,6 +1139,7 @@ class AXMTaskBoardKanbanViewComponent {
         this.calendarService = inject(AXCalendarService);
         this.settingService = inject(AXPSettingsService);
         this.commandService = inject(AXPCommandService);
+        this.destroyRef = inject(DestroyRef);
         this.kanbanComponent = viewChild(AXKanbanComponent, ...(ngDevMode ? [{ debugName: "kanbanComponent" }] : /* istanbul ignore next */ []));
         this.taskPopover = viewChild.required('taskPopover');
         this.selectedTask = signal(null, ...(ngDevMode ? [{ debugName: "selectedTask" }] : /* istanbul ignore next */ []));
@@ -1065,6 +1191,26 @@ class AXMTaskBoardKanbanViewComponent {
         }, ...(ngDevMode ? [{ debugName: "#providerChanged" }] : /* istanbul ignore next */ []));
     }
     ngAfterViewInit() {
+        this.taskBoardService.refresh$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(async (data) => {
+            const selected = this.selectedTask();
+            if (!selected?.provider)
+                return;
+            if (data.provider && data.provider !== selected.provider)
+                return;
+            await this.refreshPopoverData();
+        });
+        this.taskBoardService.close$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((data) => {
+            const selected = this.selectedTask();
+            if (!selected?.provider)
+                return;
+            if (data.provider && data.provider !== selected.provider)
+                return;
+            this.closePopover();
+        });
         if (this.kanbanComponent()) {
             this.component.emit(this.kanbanComponent());
         }
@@ -1412,6 +1558,34 @@ class AXMTaskBoardKanbanViewComponent {
         this.popoverTarget.set(null);
         this.taskActions.set([]);
     }
+    async refreshPopoverData() {
+        const selected = this.selectedTask();
+        if (!selected?.provider) {
+            return;
+        }
+        const provider = this.taskBoardService.getProvider(selected.provider);
+        if (!provider) {
+            return;
+        }
+        try {
+            const result = await provider.getTasks();
+            const updatedTasks = result.items.map((t) => ({ ...t, provider: selected.provider }));
+            const updatedMap = new Map(updatedTasks.map((t) => [t.id, t]));
+            const currentTasks = this.tasks();
+            const mergedTasks = currentTasks.map((t) => updatedMap.get(t.id) ?? t);
+            const existingIds = new Set(currentTasks.map((t) => t.id));
+            const newTasks = updatedTasks.filter((t) => !existingIds.has(t.id));
+            this.tasks.set([...mergedTasks, ...newTasks]);
+            const updatedSelectedTask = updatedMap.get(selected.id);
+            if (updatedSelectedTask) {
+                this.selectedTask.set(updatedSelectedTask);
+                await this.loadTaskActions(updatedSelectedTask);
+            }
+        }
+        catch (error) {
+            console.error('[TaskPopover] Failed to refresh popover data:', error);
+        }
+    }
     formatTime(date) {
         return this.calendarService.create(date).format('HH:mm');
     }
@@ -1479,6 +1653,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], template: "<ax-kanban\n  [statuses]=\"statuses()\"\n  [dataSource]=\"kanbanTasks()\"\n  (onItemClick)=\"handleItemClick($event)\"\n  (onBeforeDrop)=\"onBeforeDrop($event)\"\n  (onSortChanged)=\"onSortChanged($event)\"\n></ax-kanban>\n\n<!-- Task Detail Popover (Modern Google Calendar Style) -->\n<ax-popover\n  #taskPopover\n  [openOn]=\"'manual'\"\n  [closeOn]=\"'clickOut'\"\n  [offsetY]=\"12\"\n  [offsetX]=\"12\"\n  [adaptivityEnabled]=\"true\"\n>\n  <div>\n    @if (selectedTask()) {\n      <div class=\"task-popover ax-shadow-md ax-border\">\n        <!-- Header Section -->\n        <div class=\"task-popover__header\">\n          <div class=\"task-popover__title-section\">\n            <div class=\"task-popover__title-row\">\n              <h3 class=\"task-popover__title\" [title]=\"selectedTask()!.title\">{{ selectedTask()!.title }}</h3>\n              <button type=\"button\" class=\"task-popover__close-btn\" (click)=\"closePopover()\" aria-label=\"Close\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            </div>\n            @if (selectedTask()!.description && !customComponentType()) {\n              <p class=\"task-popover__description\">{{ selectedTask()!.description }}</p>\n            }\n          </div>\n        </div>\n\n        <!-- Custom Component or Default Content -->\n        @if (customComponentType()) {\n          <!-- Custom Component from Provider -->\n          <div class=\"task-popover__custom-content\">\n            <ng-container *ngComponentOutlet=\"customComponentType()!; inputs: customComponentInputs()!\"></ng-container>\n          </div>\n        } @else {\n          <!-- Default Content Section -->\n          <div class=\"task-popover__content\">\n            <!-- Time -->\n            <div class=\"task-popover__info-item\">\n              <div class=\"task-popover__icon\">\n                <i class=\"fa-light fa-clock\"></i>\n              </div>\n              <div class=\"task-popover__info-content\">\n                <span class=\"task-popover__info-text\">{{ formatDateRange(selectedTask()!) }}</span>\n              </div>\n            </div>\n\n            <!-- Status -->\n            @if (selectedTask()!.status) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-flag\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{ selectedTask()!.status.title }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Assignee -->\n            @if (selectedTask()!.assignee) {\n              <div class=\"task-popover__info-item\">\n                <div class=\"task-popover__icon\">\n                  <i class=\"fa-light fa-user\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span class=\"task-popover__info-text\">{{\n                    selectedTask()!.assignee?.fullName || selectedTask()!.assignee?.username || 'Unassigned'\n                  }}</span>\n                </div>\n              </div>\n            }\n\n            <!-- Priority -->\n            @if (selectedTask()!.priority) {\n              <div class=\"task-popover__info-item\">\n                <div\n                  class=\"task-popover__icon task-popover__icon--priority\"\n                  [attr.data-priority]=\"selectedTask()!.priority\"\n                >\n                  <i class=\"fa-light fa-exclamation-circle\"></i>\n                </div>\n                <div class=\"task-popover__info-content\">\n                  <span\n                    class=\"task-popover__info-text task-popover__priority\"\n                    [attr.data-priority]=\"selectedTask()!.priority\"\n                  >\n                    {{ selectedTask()!.priority }}\n                  </span>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Actions Section -->\n          <div class=\"task-popover__actions\">\n            <!-- Task Actions from Provider -->\n            @if (taskActions().length > 0) {\n              <div class=\"task-popover__actions-group\">\n                <!-- Primary Actions: Icon-only buttons -->\n                @if (primaryActions().length > 0) {\n                  @for (action of primaryActions(); track action.name || action.title) {\n                    <ax-button\n                      [look]=\"'solid'\"\n                      [color]=\"getActionColor(action)\"\n                      (onClick)=\"executeAction(action)\"\n                      [disabled]=\"action.disabled === true\"\n                      [text]=\"(action.title | translate | async)!\"\n                    >\n                      @if (action.icon) {\n                        <ax-prefix>\n                          <ax-icon>\n                            <i [class]=\"action.icon\"></i>\n                          </ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button>\n                  }\n                }\n\n                <!-- Secondary Actions: Dropdown with \"...\" button -->\n                @if (secondaryActions().length > 0) {\n                  <ax-button [look]=\"'blank'\">\n                    <ax-prefix>\n                      <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n                    </ax-prefix>\n                    <ax-dropdown-panel>\n                      <ax-button-item-list>\n                        @for (action of secondaryActions(); track action.name || action.title) {\n                          <ax-button-item\n                            [text]=\"(action.title | translate | async)!\"\n                            [disabled]=\"action.disabled === true\"\n                            (onClick)=\"executeAction(action)\"\n                          >\n                            @if (action.icon) {\n                              <ax-prefix>\n                                <ax-icon>\n                                  <i [class]=\"action.icon\"></i>\n                                </ax-icon>\n                              </ax-prefix>\n                            }\n                          </ax-button-item>\n                        }\n                      </ax-button-item-list>\n                    </ax-dropdown-panel>\n                  </ax-button>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ax-popover>\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-height: 100%;--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}.task-popover{background:rgba(var(--ax-sys-color-lightest-surface));border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.task-popover__header{padding:20px 20px 16px;border-bottom:1px solid var(--ax-sys-color-border);background:linear-gradient(to bottom,var(--ax-sys-color-lightest-surface),var(--ax-sys-color-lighter-surface))}.task-popover__title-section{display:flex;flex-direction:column;gap:8px}.task-popover__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.task-popover__title{font-size:18px;font-weight:600;line-height:1.4;color:var(--ax-sys-color-text-primary);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-popover__close-btn{flex-shrink:0;background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ax-sys-color-text-neutral-600);transition:color .2s ease;border-radius:4px}.task-popover__close-btn:hover{color:var(--ax-sys-color-text-primary);background:var(--ax-sys-color-lighter-surface)}.task-popover__close-btn:active{background:var(--ax-sys-color-light-surface)}.task-popover__close-btn ax-icon{display:block;width:16px;height:16px}.task-popover__description{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.task-popover__content{padding:16px 20px;display:flex;flex-direction:column;gap:12px;flex:1}.task-popover__info-item{display:flex;align-items:flex-start;gap:12px;min-height:24px}.task-popover__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;color:var(--ax-sys-color-text-neutral-600);font-size:14px}.task-popover__icon i{display:block}.task-popover__icon--priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__icon--priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__icon--priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__icon--priority[data-priority=low],.task-popover__icon--priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-500)}.task-popover__info-content{flex:1;min-width:0;display:flex;align-items:center}.task-popover__info-text{font-size:14px;line-height:1.5;color:var(--ax-sys-color-text-primary);word-wrap:break-word}.task-popover__time{font-weight:500;color:var(--ax-sys-color-text-primary);margin-left:4px}.task-popover__priority{text-transform:capitalize;font-weight:500}.task-popover__priority[data-priority=highest]{color:var(--ax-sys-color-danger)}.task-popover__priority[data-priority=high]{color:var(--ax-sys-color-warning)}.task-popover__priority[data-priority=medium]{color:var(--ax-sys-color-info)}.task-popover__priority[data-priority=low],.task-popover__priority[data-priority=lowest]{color:var(--ax-sys-color-text-neutral-600)}.task-popover__actions{padding:12px 20px 16px;border-top:1px solid var(--ax-sys-color-border);display:flex;flex-direction:column;gap:8px;background:var(--ax-sys-color-lighter-surface)}.task-popover__actions-group{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.task-popover__actions-group--default{margin-top:4px;padding-top:8px;border-top:1px solid var(--ax-sys-color-border)}.task-popover__action-divider{width:100%;height:1px;background:var(--ax-sys-color-border);margin:4px 0}.task-popover__action-btn{min-width:100px;white-space:nowrap}\n"] }]
         }], propDecorators: { kanbanComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXKanbanComponent), { isSignal: true }] }], taskPopover: [{ type: i0.ViewChild, args: ['taskPopover', { isSignal: true }] }], tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: true }] }, { type: i0.Output, args: ["tasksChange"] }], onTaskClick: [{ type: i0.Output, args: ["onTaskClick"] }], onTaskChanged: [{ type: i0.Output, args: ["onTaskChanged"] }], component: [{ type: i0.Output, args: ["component"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }] } });
 
+/** Stable row identity for @for; includes refresh nonce so tables remount after board refresh. */
+function statusGroupTrackKey(nonce, group) {
+    return `${nonce}:${String(group.statusInfo.key)}`;
+}
 class AXMTaskBoardStatusGroupedGridViewComponent {
     #dataChanged;
     #providerChanged;
@@ -1489,12 +1667,15 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
         this.calendarService = inject(AXCalendarService);
         this.provider = input(...(ngDevMode ? [undefined, { debugName: "provider" }] : /* istanbul ignore next */ []));
         this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.refreshNonce = input(0, ...(ngDevMode ? [{ debugName: "refreshNonce" }] : /* istanbul ignore next */ []));
         this.onActionClick = 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 */ []));
         this.statuses = signal([], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
         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 () => {
             // Track filter-related signals that affect the data source
             // When these change, the parent's filter() computed signal changes,
@@ -1506,6 +1687,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
             this.vm.currentDate();
             this.vm.daysCount();
             this.vm.currentViewMode();
+            this.refreshNonce();
             const parentDataSource = this.dataSource();
             const allStatuses = this.statuses();
             if (!parentDataSource || allStatuses.length === 0) {
@@ -1533,7 +1715,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
                     });
                     // Refresh data table components
                     this.grids().forEach((grid) => {
-                        grid.refresh();
+                        grid.refresh({ reset: true });
                     });
                 }, 0);
             });
@@ -1558,7 +1740,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
                 // Wait for grids to be rendered
                 setTimeout(() => {
                     this.grids().forEach((grid) => {
-                        grid.refresh();
+                        grid.refresh({ reset: true });
                     });
                 }, 100);
             });
@@ -1574,7 +1756,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
                     });
                     // Refresh data table components
                     this.grids().forEach((grid) => {
-                        grid.refresh();
+                        grid.refresh({ reset: true });
                     });
                 }, 200);
             });
@@ -1617,12 +1799,12 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
     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 } }, outputs: { onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "grids", predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (group of groupedTasks(); track 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" }, 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 }); }
 }
 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 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 }] }], 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 (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 }] }] } });
 
 class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
     constructor() {
@@ -1644,6 +1826,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.calendarEventTypes = signal([], ...(ngDevMode ? [{ debugName: "calendarEventTypes" }] : /* istanbul ignore next */ []));
         this.resources = signal([], ...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
         this.isQueryParam = signal(false, ...(ngDevMode ? [{ debugName: "isQueryParam" }] : /* istanbul ignore next */ []));
+        this.refreshNonce = signal(0, ...(ngDevMode ? [{ debugName: "refreshNonce" }] : /* istanbul ignore next */ []));
         this.taskTypeAccordionCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "taskTypeAccordionCollapsed" }] : /* istanbul ignore next */ []));
         this.calendarEventTypeAccordionCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "calendarEventTypeAccordionCollapsed" }] : /* istanbul ignore next */ []));
         this.sidebarCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : /* istanbul ignore next */ []));
@@ -1651,40 +1834,11 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.currentViewMode = signal('calendar', ...(ngDevMode ? [{ debugName: "currentViewMode" }] : /* istanbul ignore next */ []));
         this.schedulerComponent = signal(null, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : /* istanbul ignore next */ []));
         this.dayDataCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "dayDataCache" }] : /* istanbul ignore next */ []));
-        this.menuItems = signal([
-            {
-                key: 'calendar',
-                text: 'calendar',
-                icon: 'fa-light fa-calendar-day',
-                children: [
-                    { key: 'day', text: 'daily', icon: 'fa-light fa-calendar-day' },
-                    { key: 'week', text: 'weekly', icon: 'fa-light fa-calendar-week' },
-                    { key: 'month', text: 'monthly', icon: 'fa-light fa-calendar-alt' },
-                    { key: 'agenda', text: 'agenda', icon: 'fa-light fa-calendar-range' },
-                ],
-            },
-            {
-                key: 'timeline',
-                text: 'timeline',
-                icon: 'fa-light fa-list-timeline',
-                children: [
-                    { key: 'timeline-day', text: 'daily-timeline', icon: 'fa-light fa-calendar-day' },
-                    { key: 'timeline-weekly', text: 'weekly-timeline', icon: 'fa-light fa-calendar-week' },
-                    { key: 'timeline-month', text: 'monthly-timeline', icon: 'fa-light fa-calendar-alt' },
-                    { key: 'timeline-year', text: 'yearly-timeline', icon: 'fa-light fa-calendar-range' },
-                ],
-            },
-            {
-                key: 'table',
-                text: 'table',
-                icon: 'fa-light fa-table',
-                children: [
-                    { key: 'grid', text: 'grid', icon: 'fa-light fa-table' },
-                    { key: 'status-grouped-grid', text: 'status-grouped-grid', icon: 'fa-light fa-table' },
-                ],
-            },
-            { key: 'kanban', text: 'kanban', icon: 'fa-light fa-chart-kanban' },
-        ], ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        /** View switcher entries filtered by user visibility settings parts. */
+        this.menuItems = computed(() => {
+            const allowed = new Set(this.vm.visibleViewModes());
+            return filterTaskBoardMenuByAllowedModes(AXM_TASK_BOARD_MENU_ITEMS, allowed);
+        }, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
         this.calendarType = computed(() => this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendarType" }] : /* istanbul ignore next */ []));
         this.todayButtonText = computed(() => {
             switch (this.vm.currentViewMode()) {
@@ -1737,7 +1891,8 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         }, ...(ngDevMode ? [{ debugName: "currentDateForCalendar" }] : /* istanbul ignore next */ []));
         this.selectedViewMode = computed(() => {
             const currentMode = this.vm.currentViewMode();
-            for (const category of this.menuItems()) {
+            const items = this.menuItems();
+            for (const category of items) {
                 if (category.key === currentMode) {
                     return { key: category.key, text: category.text, icon: category.icon };
                 }
@@ -1748,18 +1903,20 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                     }
                 }
             }
-            const firstCategory = this.menuItems()[0];
+            const firstCategory = items[0];
+            if (!firstCategory) {
+                return {
+                    key: currentMode,
+                    text: 'view',
+                    icon: 'fa-light fa-table',
+                };
+            }
             return firstCategory.children
                 ? firstCategory.children[0]
                 : { key: firstCategory.key, text: firstCategory.text, icon: firstCategory.icon };
         }, ...(ngDevMode ? [{ debugName: "selectedViewMode" }] : /* istanbul ignore next */ []));
         this.filter = computed(() => {
             const taskTypeNames = this.vm.selectedTaskTypeNames();
-            // When nothing is selected (empty array), we want to show NO types
-            // The service treats empty/undefined types as "show all providers"
-            // To show none when nothing is selected, we pass a non-existent type name
-            // This ensures filteredProviders.length === 0, resulting in empty results
-            const types = taskTypeNames.length > 0 ? taskTypeNames : ['__NONE__'];
             const assigneeIds = this.vm.selectedAssigneeIds();
             const reporterIds = this.vm.selectedReporterIds();
             const priorities = this.vm.selectedPriorities();
@@ -1782,8 +1939,8 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 end = from.endOf('day');
             }
             return {
-                // Always include types - empty array means show no types, non-empty means show only selected types
-                types,
+                // Empty filter means "all items" for task type/provider.
+                ...(taskTypeNames.length > 0 && { types: taskTypeNames }),
                 ...(assigneeIds.length > 0 && { assigneeIds }),
                 ...(reporterIds.length > 0 && { reporterIds }),
                 ...(priorities.length > 0 && { priorities }),
@@ -1934,6 +2091,8 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.taskBoardService.refresh$.subscribe(async () => {
             await this.taskResolveHandler();
             await this.getResources();
+            this.refreshNonce.update((value) => value + 1);
+            this.schedulerComponent()?.refresh();
         });
     }
     async getPageTitle() {
@@ -2100,8 +2259,22 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             return 0;
         }
     }
-    handleContextMenuItemClick(event) {
-        this.taskBoardService.executeCommand(event.item.data?.command, this.currentTask()?.provider ?? '');
+    async handleContextMenuItemClick(event) {
+        const command = event.item.data?.command;
+        const provider = this.currentTask()?.provider ?? '';
+        try {
+            if (command) {
+                await this.taskBoardService.executeCommand(command, provider);
+            }
+        }
+        catch (error) {
+            console.error('[TaskBoard] Context menu command failed:', error);
+        }
+        finally {
+            if (command) {
+                this.taskBoardService.requestRefresh(provider || undefined);
+            }
+        }
     }
     changeDate(forward) {
         const date = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
@@ -2210,7 +2383,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
     handleTaskTypeSelectionChange(selectedValues) {
         // Convert single value to array if needed (for radio mode)
         const values = Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : [];
-        // If nothing is selected, pass empty array to show no types
+        // If nothing is selected, pass empty array to mean "all task types".
         this.vm.setSelectedTaskTypeNames(values, this.isQueryParam());
     }
     handleCalendarEventTypeSelectionChange(selectedValues) {
@@ -2298,11 +2471,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      (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      (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      (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      (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", "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"], outputs: ["onTaskClick", "onActionClick"] }, { kind: "component", type: AXMTaskBoardStatusGroupedGridViewComponent, selector: "axm-task-board-status-grouped-grid-view", inputs: ["provider", "dataSource"], 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"] }, { 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,
@@ -2344,8 +2517,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      (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      (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      (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      (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-DA2563QE.mjs.map
+//# sourceMappingURL=acorex-modules-task-management-task-board.page-DF4XWz_0.mjs.map