@acorex/modules 21.0.0-next.5 → 21.0.0-next.7

package/fesm2022/{acorex-modules-task-management-task-board.page-CKgZoOGI.mjs → acorex-modules-task-management-task-board.page-Cm8wJD-y.mjs}

@@ -1,25 +1,35 @@
+import * as i9 from '@acorex/cdk/accordion';
+import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
+import { AXAccordionModule } from '@acorex/components/accordion';
+import * as i8 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import * as i3 from '@acorex/components/button';
 import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
 import { AXCalendarComponent } from '@acorex/components/calendar';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i5 from '@acorex/components/decorators';
 import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
-import { AXDropdownPanelComponent } from '@acorex/components/dropdown';
+import * as i4 from '@acorex/components/dropdown';
+import { AXDropdownModule, AXDropdownPanelComponent } from '@acorex/components/dropdown';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import * as i6 from '@acorex/components/loading';
+import { AXFormFieldComponent, AXFormComponent, AXFormModule } from '@acorex/components/form';
+import { AXLabelComponent, AXLabelModule } from '@acorex/components/label';
+import * as i7 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i2 from '@acorex/components/menu';
+import * as i3$1 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
-import * as i7 from '@acorex/components/popover';
+import * as i2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
+import * as i10 from '@acorex/components/selection-list';
+import { AXSelectionListModule } from '@acorex/components/selection-list';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXLocaleService } from '@acorex/core/locale';
-import * as i2$1 from '@acorex/core/translation';
+import * as i5$1 from '@acorex/core/translation';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPPlatformScope, AXPDeviceService } from '@acorex/platform/core';
-import { AXPStateMessageComponent, AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
+import { AXPStateMessageComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import * as i1$1 from '@angular/common';
 import { AsyncPipe, CommonModule } from '@angular/common';
@@ -35,10 +45,9 @@ import * as i1 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetCoreModule, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
 import { AXPSettingsService } from '@acorex/platform/common';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
-import { AXFormFieldComponent, AXFormComponent } from '@acorex/components/form';
-import { AXLabelComponent } from '@acorex/components/label';
 import { isEqual, sortBy } from 'lodash-es';
 import { AXSchedulerComponent } from '@acorex/components/scheduler';
+import { AXPCommandService } from '@acorex/platform/runtime';
 import { AXDataSource } from '@acorex/cdk/common';
 import * as i1$2 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
@@ -46,14 +55,15 @@ import { AXKanbanComponent } from '@acorex/components/kanban';
 
 var AXMTaskBoardSettings;
 (function (AXMTaskBoardSettings) {
-    AXMTaskBoardSettings["ViewMode"] = "TaskManagement:Setting:TaskBoard.ViewMode";
-    AXMTaskBoardSettings["DetailPanel"] = "TaskManagement:Setting:TaskBoard.DetailPanel";
-    AXMTaskBoardSettings["DaysCount"] = "TaskManagement:Setting:TaskBoard.Calendar.DaysCount";
-    AXMTaskBoardSettings["CurrentDate"] = "TaskManagement:Setting:TaskBoard.Calendar.CurrentDate";
-    AXMTaskBoardSettings["SelectedPriorities"] = "TaskManagement:Setting:TaskBoard.Filter.SelectedPriorities";
-    AXMTaskBoardSettings["SelectedAssigneeIds"] = "TaskManagement:Setting:TaskBoard.Filter.SelectedAssigneeIds";
-    AXMTaskBoardSettings["SelectedReporterIds"] = "TaskManagement:Setting:TaskBoard.Filter.SelectedReporterIds";
-    AXMTaskBoardSettings["SelectedTaskTypeNames"] = "TaskManagement:Setting:TaskBoard.Filter.SelectedTaskTypeNames";
+    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(() => ({
@@ -69,6 +79,7 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
     selectedAssigneeIds: [],
     selectedPriorities: [],
     selectedReporterIds: [],
+    selectedCalendarEventTypeIds: [],
 })), withComputed((store) => ({
     selectedTaskTypes: computed(() => {
         const names = store.selectedTaskTypeNames();
@@ -110,7 +121,7 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
             try {
                 const taskTypes = await taskBoardService.getTaskTypes();
                 patchState(store, { taskTypes });
-                const [savedDaysCount, savedDateString, savedDetailPanel, savedViewMode, savedTaskTypeNames, savedAssigneeIds, savedReporterIds, savedPriorities,] = await Promise.all([
+                const [savedDaysCount, savedDateString, savedDetailPanel, savedViewMode, savedTaskTypeNames, savedAssigneeIds, savedReporterIds, savedPriorities, savedCalendarEventTypeIds,] = await Promise.all([
                     userScopedSettings().get(AXMTaskBoardSettings.DaysCount),
                     userScopedSettings().get(AXMTaskBoardSettings.CurrentDate),
                     userScopedSettings().get(AXMTaskBoardSettings.DetailPanel),
@@ -119,16 +130,27 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedAssigneeIds),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedReporterIds),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedPriorities),
+                    userScopedSettings().get(AXMTaskBoardSettings.SelectedCalendarEventTypeIds),
                 ]);
+                // Ensure currentDate is always a valid Date
+                let currentDate;
+                if (savedDateString) {
+                    const parsedDate = new Date(savedDateString);
+                    currentDate = isNaN(parsedDate.getTime()) ? new Date() : parsedDate;
+                }
+                else {
+                    currentDate = new Date();
+                }
                 patchState(store, {
                     daysCount: savedDaysCount || 7,
                     detailPanel: savedDetailPanel || false,
                     currentViewMode: savedViewMode || 'month',
-                    currentDate: savedDateString ? new Date(savedDateString) : new Date(),
+                    currentDate,
                     selectedTaskTypeNames: savedTaskTypeNames || [],
                     selectedAssigneeIds: savedAssigneeIds || [],
                     selectedReporterIds: savedReporterIds || [],
                     selectedPriorities: savedPriorities || [],
+                    selectedCalendarEventTypeIds: savedCalendarEventTypeIds || [],
                     isLoading: false,
                 });
             }
@@ -142,6 +164,7 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                     selectedAssigneeIds: [],
                     selectedPriorities: [],
                     selectedReporterIds: [],
+                    selectedCalendarEventTypeIds: [],
                     taskTypes: store.taskTypes(),
                     isLoading: false,
                 });
@@ -200,6 +223,14 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 .set(AXMTaskBoardSettings.SelectedPriorities, priorities)
                 .catch((error) => console.error('Error saving selected priority filter:', error));
         },
+        setSelectedCalendarEventTypeIds(eventTypeIds, isQueryParam = false) {
+            patchState(store, { selectedCalendarEventTypeIds: eventTypeIds });
+            if (isQueryParam)
+                return;
+            userScopedSettings()
+                .set(AXMTaskBoardSettings.SelectedCalendarEventTypeIds, eventTypeIds)
+                .catch((error) => console.error('Error saving selected calendar event type filter:', error));
+        },
         /**
          * Sets the currently selected task. Pass `null` to clear the selection.
          * @param task The task to select, or null.
@@ -308,6 +339,7 @@ class AXMTaskBoardFiltersComponent {
         this.rootConfig = RootConfig;
         this.vm = inject(AXMTaskBoardViewModel);
         this.isQueryParam = input(false, ...(ngDevMode ? [{ debugName: "isQueryParam" }] : []));
+        this.excludeTaskType = input(false, ...(ngDevMode ? [{ debugName: "excludeTaskType" }] : []));
         this.applyClicked = output();
         this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
         this.isInitialized = false;
@@ -330,24 +362,27 @@ class AXMTaskBoardFiltersComponent {
             const viewMode = this.vm.currentViewMode();
             return viewMode !== 'kanban' && viewMode !== 'status-grouped-grid';
         }, ...(ngDevMode ? [{ debugName: "isMultiSelectEnabled" }] : []));
-        this.nodes = computed(() => [
-            {
-                name: 'taskType',
-                path: 'options.taskType',
-                type: AXPWidgetsCatalog.select,
-                options: {
-                    valueField: 'name',
-                    textField: 'title',
-                    dataSource: 'task-types',
-                    placeholder: 'Select Task Type',
-                    multiple: this.isMultiSelectEnabled(),
-                    allowClear: this.isMultiSelectEnabled(),
-                },
-                meta: {
-                    title: 'task-board.filter.task-type',
-                },
-            },
-            {
+        this.nodes = computed(() => {
+            const allNodes = [];
+            if (!this.excludeTaskType()) {
+                allNodes.push({
+                    name: 'taskType',
+                    path: 'options.taskType',
+                    type: AXPWidgetsCatalog.select,
+                    options: {
+                        valueField: 'name',
+                        textField: 'title',
+                        dataSource: 'task-types',
+                        placeholder: 'Select Task Type',
+                        multiple: this.isMultiSelectEnabled(),
+                        allowClear: this.isMultiSelectEnabled(),
+                    },
+                    meta: {
+                        title: 'task-board.filter.task-type',
+                    },
+                });
+            }
+            allNodes.push({
                 name: 'assignee',
                 path: 'options.assignee',
                 type: AXPWidgetsCatalog.select,
@@ -362,8 +397,7 @@ class AXMTaskBoardFiltersComponent {
                 meta: {
                     title: 'task-board.filter.assignee',
                 },
-            },
-            {
+            }, {
                 name: 'reporter',
                 path: 'options.reporter',
                 type: AXPWidgetsCatalog.select,
@@ -378,8 +412,7 @@ class AXMTaskBoardFiltersComponent {
                 meta: {
                     title: 'task-board.filter.reporter',
                 },
-            },
-            {
+            }, {
                 name: 'priority',
                 path: 'options.priority',
                 type: AXPWidgetsCatalog.select,
@@ -394,8 +427,9 @@ class AXMTaskBoardFiltersComponent {
                 meta: {
                     title: 'task-board.filter.priority',
                 },
-            },
-        ], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+            });
+            return allNodes;
+        }, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
     }
     #init;
     resetContextToViewModel() {
@@ -409,20 +443,25 @@ class AXMTaskBoardFiltersComponent {
             : vmTaskTypeNames.length > 0
                 ? vmTaskTypeNames[0]
                 : null;
+        const contextOptions = {
+            priority: vmPriorities,
+            assignee: vmAssigneeIds,
+            reporter: vmReporterIds,
+        };
+        if (!this.excludeTaskType()) {
+            contextOptions.taskType = taskTypeContextValue;
+        }
         this.context.set({
-            options: {
-                priority: vmPriorities,
-                assignee: vmAssigneeIds,
-                reporter: vmReporterIds,
-                taskType: taskTypeContextValue,
-            },
+            options: contextOptions,
         });
     }
     handleContextChanged(e) {
         this.context.set(e.data);
     }
     handleApply() {
-        this.syncTaskTypesToViewModel(this.context()?.options?.taskType);
+        if (!this.excludeTaskType()) {
+            this.syncTaskTypesToViewModel(this.context()?.options?.taskType);
+        }
         this.syncAssigneesToViewModel(this.context()?.options?.assignee);
         this.syncReportersToViewModel(this.context()?.options?.reporter);
         this.syncPrioritiesToViewModel(this.context()?.options?.priority);
@@ -480,17 +519,19 @@ class AXMTaskBoardFiltersComponent {
     handleReset() {
         if (this.vm.currentViewMode() === 'kanban' || this.vm.currentViewMode() === 'status-grouped-grid') {
             const currentOptions = this.context();
+            const contextOptions = {};
+            if (!this.excludeTaskType()) {
+                contextOptions.taskType = currentOptions?.options?.taskType;
+            }
             this.context.set({
-                options: {
-                    taskType: currentOptions?.options?.taskType,
-                },
+                options: contextOptions,
             });
             return;
         }
         this.context.set({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMTaskBoardFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMTaskBoardFiltersComponent, isStandalone: true, selector: "axm-task-board-filters", inputs: { isQueryParam: { classPropertyName: "isQueryParam", publicName: "isQueryParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applyClicked: "applyClicked" }, ngImport: i0, 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        @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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMTaskBoardFiltersComponent, isStandalone: true, selector: "axm-task-board-filters", inputs: { isQueryParam: { classPropertyName: "isQueryParam", publicName: "isQueryParam", isSignal: true, isRequired: false, transformFunction: null }, excludeTaskType: { classPropertyName: "excludeTaskType", publicName: "excludeTaskType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applyClicked: "applyClicked" }, ngImport: i0, 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        @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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMTaskBoardFiltersComponent, decorators: [{
             type: Component,
@@ -504,15 +545,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXTranslatorPipe,
                         AsyncPipe,
                     ], 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        @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"] }] } });
+        }], propDecorators: { isQueryParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "isQueryParam", required: false }] }], excludeTaskType: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeTaskType", required: false }] }], applyClicked: [{ type: i0.Output, args: ["applyClicked"] }] } });
 
 class AXMTaskBoardCalendarViewComponent {
     constructor() {
         this.vm = inject(AXMTaskBoardViewModel);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
-        this.settingsService = inject(AXPSettingsService);
+        this.settingService = inject(AXPSettingsService);
+        this.commandService = inject(AXPCommandService);
         this.schedulerComponent = viewChild(AXSchedulerComponent, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : []));
+        this.taskPopover = viewChild('taskPopover', ...(ngDevMode ? [{ debugName: "taskPopover" }] : []));
+        this.selectedTask = signal(null, ...(ngDevMode ? [{ debugName: "selectedTask" }] : []));
+        this.popoverTarget = signal(null, ...(ngDevMode ? [{ debugName: "popoverTarget" }] : []));
+        this.taskActions = signal([], ...(ngDevMode ? [{ debugName: "taskActions" }] : []));
+        this.customComponentType = signal(null, ...(ngDevMode ? [{ debugName: "customComponentType" }] : []));
+        // Separate primary and secondary actions
+        this.primaryActions = computed(() => {
+            return this.taskActions().filter((action) => (action.priority ?? 'secondary') === 'primary');
+        }, ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
+        this.secondaryActions = computed(() => {
+            return this.taskActions().filter((action) => (action.priority ?? 'secondary') === 'secondary');
+        }, ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+        this.customComponentInputs = computed(() => {
+            const task = this.selectedTask();
+            if (!task)
+                return null;
+            return { task };
+        }, ...(ngDevMode ? [{ debugName: "customComponentInputs" }] : []));
         this.resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
         this.startingDate = input(new Date(), ...(ngDevMode ? [{ debugName: "startingDate" }] : []));
         this.selectedView = input('month', ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
@@ -520,7 +580,9 @@ class AXMTaskBoardCalendarViewComponent {
         this.firstDayOfWeek = signal('monday', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
         this.weekendDays = signal([0, 6], ...(ngDevMode ? [{ debugName: "weekendDays" }] : []));
         this.holidays = (range) => {
-            return this.taskBoardService.getEvents(range);
+            const selectedEventTypeIds = this.vm.selectedCalendarEventTypeIds();
+            // Pass selected calendar IDs (can be empty array to show no events)
+            return this.taskBoardService.getEvents(range, selectedEventTypeIds);
         };
         this.currentSchedulerView = computed(() => this.selectedView() === 'kanban' || this.selectedView() === 'grid'
             ? 'month'
@@ -591,16 +653,256 @@ class AXMTaskBoardCalendarViewComponent {
     handleActionClick(event) {
         this.onActionClick.emit({ nativeEvent: event.nativeEvent, task: event.appointment });
     }
-    onTaskClickHandler(event) {
-        this.onTaskClick.emit(event.appointment);
+    async onTaskClickHandler(event) {
+        const task = event.appointment;
+        // Find the appointment container element
+        let targetElement = event.nativeEvent.currentTarget || event.nativeEvent.target;
+        // Traverse up to find the appointment container
+        let element = targetElement;
+        const maxDepth = 10;
+        let depth = 0;
+        while (element && element !== document.body && depth < maxDepth) {
+            depth++;
+            const isAppointment = element.classList?.contains('dx-scheduler-appointment') ||
+                element.classList?.contains('ax-scheduler-appointment') ||
+                element.hasAttribute('data-appointment-id');
+            if (isAppointment) {
+                targetElement = element;
+                break;
+            }
+            const parent = element.parentElement;
+            if (parent) {
+                const isParentAppointment = parent.classList?.contains('dx-scheduler-appointment') ||
+                    parent.classList?.contains('ax-scheduler-appointment');
+                if (isParentAppointment) {
+                    targetElement = parent;
+                    break;
+                }
+            }
+            element = element.parentElement;
+        }
+        // Set the selected task and target element
+        this.selectedTask.set(task);
+        this.popoverTarget.set(targetElement);
+        // Check if provider has a custom component
+        await this.loadCustomComponent(task);
+        // Load actions for the task
+        await this.loadTaskActions(task);
+        // Open the popover
+        setTimeout(() => {
+            if (this.taskPopover() && targetElement) {
+                this.taskPopover().target = targetElement;
+                this.taskPopover().open();
+            }
+        }, 0);
+        // Still emit the event for backward compatibility
+        this.onTaskClick.emit(task);
+    }
+    async loadTaskActions(task) {
+        try {
+            const providerName = task.provider;
+            if (!providerName) {
+                this.taskActions.set([]);
+                return;
+            }
+            const provider = this.taskBoardService.getProvider(providerName);
+            if (!provider) {
+                this.taskActions.set([]);
+                return;
+            }
+            const actions = await provider.getActions(task);
+            // Ensure all actions have a priority (default to 'secondary' if not specified)
+            const actionsWithPriority = (actions || []).map((action) => ({
+                ...action,
+                priority: action.priority ?? 'secondary',
+            }));
+            this.taskActions.set(actionsWithPriority);
+        }
+        catch (error) {
+            console.error('Failed to load task actions:', error);
+            this.taskActions.set([]);
+        }
+    }
+    getActionColor(action) {
+        return action.color;
+    }
+    async executeAction(action) {
+        const task = this.selectedTask();
+        if (!task || !action.command)
+            return;
+        try {
+            const providerName = task.provider;
+            if (!providerName)
+                return;
+            await this.taskBoardService.executeCommand(action.command, providerName);
+            this.closePopover();
+        }
+        catch (error) {
+            console.error('Failed to execute action:', error);
+        }
+    }
+    async openTaskDetails() {
+        const task = this.selectedTask();
+        if (!task)
+            return;
+        try {
+            await this.commandService.execute('Entity:OpenDetails', {
+                entity: `${RootConfig.module.name}.${RootConfig.entities.task.name}`,
+                data: { id: task.id },
+            });
+            this.closePopover();
+        }
+        catch (error) {
+            console.error('Failed to open task details:', error);
+        }
+    }
+    async loadCustomComponent(task) {
+        if (!task.provider) {
+            console.log('[TaskPopover] No provider on task:', task);
+            this.customComponentType.set(null);
+            return;
+        }
+        const provider = this.taskBoardService.getProvider(task.provider);
+        if (!provider) {
+            console.log('[TaskPopover] Provider not found:', task.provider);
+            this.customComponentType.set(null);
+            return;
+        }
+        const componentGetter = provider.getComponent?.();
+        if (!componentGetter) {
+            console.log('[TaskPopover] No component getter on provider:', task.provider);
+            this.customComponentType.set(null);
+            return;
+        }
+        console.log('[TaskPopover] Component getter found:', componentGetter, 'Type:', typeof componentGetter);
+        try {
+            let componentType;
+            // Check if it's a lazy loading function or direct component type
+            // A lazy loader is a function that returns a Promise
+            // A component type is a class constructor (also a function, but used differently)
+            if (typeof componentGetter === 'function') {
+                // Try calling it to see if it returns a Promise (lazy loader)
+                const testCall = componentGetter;
+                let result;
+                try {
+                    result = testCall();
+                }
+                catch (e) {
+                    // If calling throws (e.g., class constructor without 'new'), use it directly
+                    console.log('[TaskPopover] Component getter is a class constructor, using directly');
+                    componentType = componentGetter;
+                    this.customComponentType.set(componentType);
+                    return;
+                }
+                if (result instanceof Promise) {
+                    // It's a lazy loading function
+                    console.log('[TaskPopover] Component getter is a lazy loader');
+                    componentType = await result;
+                }
+                else if (result) {
+                    // It returned a component type directly
+                    console.log('[TaskPopover] Component getter returned component type directly');
+                    componentType = result;
+                }
+                else {
+                    // Result is undefined, use the original as component type
+                    console.log('[TaskPopover] Component getter returned undefined, using original as component type');
+                    componentType = componentGetter;
+                }
+            }
+            else {
+                console.log('[TaskPopover] Component getter is not a function');
+                this.customComponentType.set(null);
+                return;
+            }
+            console.log('[TaskPopover] Component type loaded successfully:', componentType?.name);
+            this.customComponentType.set(componentType);
+        }
+        catch (error) {
+            console.error('[TaskPopover] Failed to load custom task popover component:', error);
+            this.customComponentType.set(null);
+        }
+    }
+    closePopover() {
+        this.taskPopover()?.close();
+        this.customComponentType.set(null);
+        this.selectedTask.set(null);
+        this.popoverTarget.set(null);
+        this.taskActions.set([]);
+    }
+    formatTime(date) {
+        return this.calendarService.create(date).format('HH:mm');
+    }
+    formatDate(date) {
+        return this.calendarService.create(date).format('MMM DD, YYYY');
+    }
+    formatDateTime(date) {
+        return this.calendarService.create(date).format('MMM DD, YYYY HH:mm');
+    }
+    isMultiDay(task) {
+        if (task.allDay) {
+            const start = this.calendarService.create(task.startDate);
+            const end = this.calendarService.create(task.endDate);
+            return start.date.getTime() !== end.date.getTime();
+        }
+        // Check if start and end are on different days
+        const start = this.calendarService.create(task.startDate);
+        const end = this.calendarService.create(task.endDate);
+        const startDay = start.date.getDate();
+        const endDay = end.date.getDate();
+        const startMonth = start.date.getMonth();
+        const endMonth = end.date.getMonth();
+        const startYear = start.date.getFullYear();
+        const endYear = end.date.getFullYear();
+        return startDay !== endDay || startMonth !== endMonth || startYear !== endYear;
+    }
+    formatDateRange(task) {
+        if (task.allDay) {
+            const start = this.calendarService.create(task.startDate);
+            const end = this.calendarService.create(task.endDate);
+            // Same day
+            if (start.date.getTime() === end.date.getTime()) {
+                return this.formatDate(task.startDate);
+            }
+            // Different days - show range
+            const startFormatted = this.formatDate(task.startDate);
+            const endFormatted = this.formatDate(task.endDate);
+            // Same month and year
+            if (start.date.getMonth() === end.date.getMonth() && start.date.getFullYear() === end.date.getFullYear()) {
+                const startDay = start.date.getDate();
+                const endDay = end.date.getDate();
+                const monthYear = start.format('MMM YYYY');
+                return `${startDay} - ${endDay}, ${monthYear}`;
+            }
+            // Different months or years
+            return `${startFormatted} - ${endFormatted}`;
+        }
+        // Not all-day
+        if (this.isMultiDay(task)) {
+            const startFormatted = this.formatDateTime(task.startDate);
+            const endFormatted = this.formatDateTime(task.endDate);
+            return `${startFormatted} - ${endFormatted}`;
+        }
+        // Same day, show date with time range
+        const dateFormatted = this.formatDate(task.startDate);
+        const timeRange = `${this.formatTime(task.startDate)} - ${this.formatTime(task.endDate)}`;
+        return `${dateFormatted} ${timeRange}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMTaskBoardCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", 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 }], ngImport: i0, template: "<ax-scheduler\n  [hasHeader]=\"false\"\n  [hasActions]=\"true\"\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  (onAppointmentRightClick)=\"onTaskRightClickHandler($event)\"\n  [weekend]=\"weekendDays()\"\n  [firstDayOfWeek]=\"firstDayOfWeek()\"\n></ax-scheduler>\n", styles: ["ax-scheduler{line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}\n"], dependencies: [{ kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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  @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\"\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\"\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</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", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "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", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMTaskBoardCalendarViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-task-board-calendar-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerComponent], template: "<ax-scheduler\n  [hasHeader]=\"false\"\n  [hasActions]=\"true\"\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  (onAppointmentRightClick)=\"onTaskRightClickHandler($event)\"\n  [weekend]=\"weekendDays()\"\n  [firstDayOfWeek]=\"firstDayOfWeek()\"\n></ax-scheduler>\n", styles: ["ax-scheduler{line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}\n"] }]
-        }], propDecorators: { schedulerComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXSchedulerComponent), { 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"] }] } });
+            args: [{ selector: 'axm-task-board-calendar-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        AXSchedulerComponent,
+                        AXPopoverModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        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  @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\"\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\"\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</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"] }] } });
 
 class AXMTaskBoardGridViewComponent {
     constructor() {
@@ -870,12 +1172,20 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.taskBoardService = inject(AXPTaskBoardService);
         this.popover = viewChild('popover', ...(ngDevMode ? [{ debugName: "popover" }] : []));
         this.calendar = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendar" }] : []));
+        this.sidebarCalendar = viewChild('sidebarCalendar', ...(ngDevMode ? [{ debugName: "sidebarCalendar" }] : []));
         this.isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
+        this.taskTypes = signal([], ...(ngDevMode ? [{ debugName: "taskTypes" }] : []));
+        this.calendarEventTypes = signal([], ...(ngDevMode ? [{ debugName: "calendarEventTypes" }] : []));
         this.resources = signal([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
         this.isQueryParam = signal(false, ...(ngDevMode ? [{ debugName: "isQueryParam" }] : []));
+        this.taskTypeAccordionCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "taskTypeAccordionCollapsed" }] : []));
+        this.calendarEventTypeAccordionCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "calendarEventTypeAccordionCollapsed" }] : []));
         this.currentTask = signal(null, ...(ngDevMode ? [{ debugName: "currentTask" }] : []));
         this.currentViewMode = signal('calendar', ...(ngDevMode ? [{ debugName: "currentViewMode" }] : []));
         this.schedulerComponent = signal(null, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : []));
+        this.dayCellTemplateRef = viewChild('dayCellTemplate', ...(ngDevMode ? [{ debugName: "dayCellTemplateRef" }] : []));
+        this.dayCellTemplate = computed(() => this.dayCellTemplateRef(), ...(ngDevMode ? [{ debugName: "dayCellTemplate" }] : []));
+        this.dayDataCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "dayDataCache" }] : []));
         this.menuItems = signal([
             {
                 key: 'calendar',
@@ -934,13 +1244,17 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             if (this.vm.currentViewMode() === 'grid' ||
                 this.vm.currentViewMode() === 'kanban' ||
                 this.vm.currentViewMode() === 'status-grouped-grid') {
-                const start = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
+                const currentDate = this.vm.currentDate();
+                if (!currentDate) {
+                    return '';
+                }
+                const start = this.calendarService.create(currentDate, this.localeService.activeProfile().calendar.system);
                 const end = start.add('day', this.vm.daysCount() - 1);
                 const startText = start.format('DD MMMM yyyy', { locale: this.localeService.activeProfile().calendar.system });
                 const endText = end.format('DD MMMM yyyy', { locale: this.localeService.activeProfile().calendar.system });
                 return `${startText} - ${endText}`;
             }
-            return this.schedulerComponent()?.currentDateText();
+            return this.schedulerComponent()?.currentDateText() || '';
         }, ...(ngDevMode ? [{ debugName: "timeText" }] : []));
         this.calendarDepth = computed(() => {
             if (this.vm.currentViewMode() === 'grid' ||
@@ -948,8 +1262,12 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 this.vm.currentViewMode() === 'status-grouped-grid') {
                 return 'day';
             }
-            return this.schedulerComponent()?.calendarDepth();
+            return this.schedulerComponent()?.calendarDepth() || 'day';
         }, ...(ngDevMode ? [{ debugName: "calendarDepth" }] : []));
+        this.currentDateForCalendar = computed(() => {
+            const date = this.vm.currentDate();
+            return date || new Date();
+        }, ...(ngDevMode ? [{ debugName: "currentDateForCalendar" }] : []));
         this.selectedViewMode = computed(() => {
             const currentMode = this.vm.currentViewMode();
             for (const category of this.menuItems()) {
@@ -970,11 +1288,16 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         }, ...(ngDevMode ? [{ debugName: "selectedViewMode" }] : []));
         this.filter = computed(() => {
             const taskTypeNames = this.vm.selectedTaskTypeNames();
-            const types = taskTypeNames.length > 0 ? taskTypeNames : undefined;
+            // 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();
-            let from = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
+            const currentDate = this.vm.currentDate() || new Date();
+            let from = this.calendarService.create(currentDate, this.localeService.activeProfile().calendar.system);
             let end;
             const currentView = this.vm.currentViewMode();
             if (currentView === 'grid' ||
@@ -992,7 +1315,8 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 end = from.endOf('day');
             }
             return {
-                ...(types && { types }),
+                // Always include types - empty array means show no types, non-empty means show only selected types
+                types,
                 ...(assigneeIds.length > 0 && { assigneeIds }),
                 ...(reporterIds.length > 0 && { reporterIds }),
                 ...(priorities.length > 0 && { priorities }),
@@ -1027,6 +1351,18 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             this.getResources();
             this.schedulerComponent()?.refresh();
         }, ...(ngDevMode ? [{ debugName: "refreshEffect" }] : []));
+        this.calendarEventTypeRefreshEffect = effect(() => {
+            this.vm.selectedCalendarEventTypeIds();
+            // Refresh calendar view to update holidays when event types change
+            this.schedulerComponent()?.refresh();
+        }, ...(ngDevMode ? [{ debugName: "calendarEventTypeRefreshEffect" }] : []));
+        this.dayDataCacheEffect = effect(async () => {
+            // Update cache when filters or date change
+            this.vm.currentDate();
+            this.vm.selectedTaskTypeNames();
+            this.vm.selectedCalendarEventTypeIds();
+            await this.updateDayDataCache();
+        }, ...(ngDevMode ? [{ debugName: "dayDataCacheEffect" }] : []));
         this.rangeBasedViews = [
             'grid',
             'kanban',
@@ -1073,10 +1409,42 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             }
             return null;
         };
+        this.taskTypeItems = computed(() => {
+            return this.taskTypes().map((taskType) => ({
+                id: taskType.name,
+                text: taskType.title,
+                icon: taskType.icon,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "taskTypeItems" }] : []));
+        this.selectedTaskTypeValues = computed(() => {
+            return this.vm.selectedTaskTypeNames();
+        }, ...(ngDevMode ? [{ debugName: "selectedTaskTypeValues" }] : []));
+        this.calendarEventTypeItems = computed(() => {
+            return this.calendarEventTypes().map((eventType) => ({
+                id: eventType.id,
+                text: eventType.title,
+                icon: eventType.icon,
+                color: eventType.color,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "calendarEventTypeItems" }] : []));
+        this.selectedCalendarEventTypeValues = computed(() => {
+            return this.vm.selectedCalendarEventTypeIds();
+        }, ...(ngDevMode ? [{ debugName: "selectedCalendarEventTypeValues" }] : []));
     }
     async ngOnInit() {
         await super.ngOnInit();
         await this.vm.initialize();
+        // Load task types for checkbox filter
+        const types = await this.taskBoardService.getTaskTypes();
+        this.taskTypes.set(types);
+        // Load calendar event types for checkbox filter
+        const eventTypes = await this.taskBoardService.getCalendarEventTypes();
+        this.calendarEventTypes.set(eventTypes.map((et) => ({
+            id: et.id,
+            title: et.title,
+        })));
+        // Initialize day data cache
+        await this.updateDayDataCache();
         this.router.events
             .pipe(this.unsubscribe.takeUntilDestroy, filter((event) => event instanceof NavigationEnd), startWith(null))
             .subscribe(async () => {
@@ -1148,6 +1516,64 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.popover()?.close();
         dropdownPanel.close();
     }
+    async updateDayDataCache() {
+        const currentDate = this.vm.currentDate();
+        const monthStart = this.calendarService.create(currentDate).startOf('month').date;
+        const monthEnd = this.calendarService.create(currentDate).endOf('month').date;
+        // Get tasks for the month
+        const tasks = await this.taskBoardService.getTasks({
+            ...this.filter(),
+            range: { from: monthStart, end: monthEnd },
+        });
+        // Get events for the month
+        const selectedEventTypeIds = this.vm.selectedCalendarEventTypeIds();
+        // Pass selected calendar IDs (can be empty array to show no events)
+        const events = await this.taskBoardService.getEvents({ from: monthStart, end: monthEnd }, selectedEventTypeIds);
+        // Create a map of day -> count
+        const dayCountMap = new Map();
+        // Count tasks per day
+        tasks.items.forEach((task) => {
+            const taskStart = new Date(task.startDate);
+            const taskEnd = new Date(task.endDate);
+            const startDay = this.calendarService.create(taskStart).startOf('day');
+            const endDay = this.calendarService.create(taskEnd).startOf('day');
+            let currentDay = startDay;
+            while (currentDay.compare(endDay, 'day') <= 0) {
+                const dayKey = currentDay.format('YYYY-MM-DD');
+                dayCountMap.set(dayKey, (dayCountMap.get(dayKey) || 0) + 1);
+                currentDay = currentDay.add('day', 1);
+            }
+        });
+        // Count events per day
+        events.forEach((event) => {
+            const eventDate = new Date(event.date);
+            const dayKey = this.calendarService.create(eventDate).format('YYYY-MM-DD');
+            dayCountMap.set(dayKey, (dayCountMap.get(dayKey) || 0) + 1);
+        });
+        this.dayDataCache.set(dayCountMap);
+        this.sidebarCalendar()?.render();
+    }
+    getDayDataCount(date) {
+        if (!date) {
+            return 0;
+        }
+        try {
+            // Get the native Date object from AXDateTime
+            const dateObj = date.date || date._date;
+            if (!dateObj) {
+                return 0;
+            }
+            // Create a new AXDateTime from the date object for consistent formatting
+            const nativeDate = dateObj instanceof Date ? dateObj : new Date(dateObj);
+            const axDate = this.calendarService.create(nativeDate);
+            const dayKey = axDate.format('YYYY-MM-DD');
+            return this.dayDataCache().get(dayKey) || 0;
+        }
+        catch (error) {
+            console.warn('Error getting day data count:', error);
+            return 0;
+        }
+    }
     handleContextMenuItemClick(event) {
         this.taskBoardService.executeCommand(event.item.data?.command, this.currentTask()?.provider ?? '');
     }
@@ -1178,6 +1604,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         }
         this.popover()?.close();
         this.calendar()?.render();
+        this.sidebarCalendar()?.render();
     }
     handleCalendarSlotClick(event) {
         if (event.component.activeView !== event.component.depth)
@@ -1189,6 +1616,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             if (!selectionStartDate) {
                 this.vm.setRangeStartDate(clickedDate);
                 this.calendar()?.render();
+                this.sidebarCalendar()?.render();
                 return;
             }
             const date1 = selectionStartDate.getTime();
@@ -1200,6 +1628,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             this.vm.setDaysCount(differenceInDays);
             this.vm.setRangeStartDate(null);
             this.calendar()?.render();
+            this.sidebarCalendar()?.render();
             this.popover()?.close();
             return;
         }
@@ -1216,6 +1645,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.vm.setCurrentDate(dateToSet);
         this.popover()?.close();
         this.calendar()?.render();
+        this.sidebarCalendar()?.render();
     }
     /**
      * Helper function to calculate the difference in whole days between two dates.
@@ -1245,6 +1675,17 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.vm.setCurrentDate(currentDate);
         this.popover()?.close();
         this.calendar()?.render();
+        this.sidebarCalendar()?.render();
+    }
+    handleTaskTypeSelectionChange(selectedValues) {
+        // If nothing is selected, pass empty array to show no types
+        this.vm.setSelectedTaskTypeNames(selectedValues || [], this.isQueryParam());
+    }
+    handleCalendarEventTypeSelectionChange(selectedValues) {
+        // If nothing is selected, pass empty array to show no types
+        this.vm.setSelectedCalendarEventTypeIds(selectedValues || [], this.isQueryParam());
+        // Refresh calendar view to update holidays
+        this.schedulerComponent()?.refresh();
     }
     async loadFromRoute() {
         const snapshot = this.activatedRoute.snapshot.queryParamMap;
@@ -1313,17 +1754,24 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         const resources = await this.taskBoardService.getResources(this.vm.selectedTaskTypeNames()[0] ?? '');
         this.resources.set(resources);
     }
+    log(message) {
+        console.log(message);
+    }
+    // protected layout = viewChild(AXPPageLayoutComponent);
+    toggleStartSide() {
+        this.layout()?.toggleStartSide();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMTaskBoardPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXMTaskBoardPage, isStandalone: true, selector: "ng-component", providers: [
             {
                 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: "contextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\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>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | 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      <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      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters\n            #filtersComponent\n            [isQueryParam]=\"isQueryParam()\"\n            (applyClicked)=\"filterDropdownPanel.close()\"\n          ></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\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", 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: "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: "dayCellTemplateRef", first: true, predicate: ["dayCellTemplate"], 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 class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header class=\"ax-p-4 ax-border-b\">\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'sidebar' }\"></ng-container>\n    </axp-layout-header>\n\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          <!-- <h3 class=\"ax-text-sm ax-font-semibold ax-text-neutral-800 ax-uppercase ax-tracking-wide\">\n            {{ (t('task-board.terms.calendar', { scope: rootConfig.config.i18n}) | async) }}\n          </h3> -->\n          <ax-calendar #sidebarCalendar [type]=\"calendarType()\" [depth]=\"calendarDepth()\" [cellClass]=\"getCellClass\"\n            [ngModel]=\"currentDateForCalendar()\" [dayCellTemplate]=\"dayCellTemplate\"\n            class=\"ax-single-range-calendar ax-border ax-rounded-lg\" (onSlotClick)=\"handleCalendarSlotClick($event)\">\n          </ax-calendar>\n        </div>\n\n        <div axAccordionGroup [accordion]=\"false\">\n          <div class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\" axAccordionItem\n            #taskTypeAccordion=\"axAccordionItem\">\n            <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader>\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ (t('task-board.filter.task-type', { scope: rootConfig.config.i18n}) | async)! }}\n              </h3>\n              <ax-icon [icon]=\"taskTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list [items]=\"taskTypeItems()\" [ngModel]=\"selectedTaskTypeValues()\"\n                  (onValueChanged)=\"handleTaskTypeSelectionChange($event.value)\" direction=\"vertical\" [multiple]=\"true\"\n                  [showControl]=\"true\" valueField=\"id\" textField=\"text\">\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          </div>\n\n          <div class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\" axAccordionItem\n            #calendarEventTypeAccordion=\"axAccordionItem\">\n            <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader>\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\"></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list [items]=\"calendarEventTypeItems()\" [ngModel]=\"selectedCalendarEventTypeValues()\"\n                  (onValueChanged)=\"handleCalendarEventTypeSelectionChange($event.value)\" direction=\"vertical\"\n                  [multiple]=\"true\" [showControl]=\"true\" valueField=\"id\" textField=\"text\">\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          </div>\n        </div>\n      </div>\n    </axp-layout-content>\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      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters #filtersComponent [isQueryParam]=\"isQueryParam()\" [excludeTaskType]=\"true\"\n            (applyClicked)=\"filterDropdownPanel.close()\"></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\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 class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\" [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"vm.selectTask($event)\" (onActionClick)=\"handleContextMenu($event)\"></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view class=\"ax-h-full ax-w-full ax-min-w-0\" [dataSource]=\"gridDataSource\"\n      (onTaskClick)=\"vm.selectTask($event)\" (onActionClick)=\"handleContextMenu($event)\"></axm-task-board-grid-view>\n    } @case('status-grouped-grid') {\n    <axm-task-board-status-grouped-grid-view class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onActionClick)=\"handleContextMenu($event)\"></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [resources]=\"resources()\" [startingDate]=\"vm.currentDate()\" [dataSource]=\"schedulerDataSource\"\n      (onTaskClick)=\"vm.selectTask($event)\" [selectedView]=\"vm.currentViewMode()\"\n      (onActionClick)=\"handleContextMenu($event)\" (onTaskRightClick)=\"handleContextMenu($event)\"\n      (component)=\"schedulerComponentChanged($event)\"\n      (onMonthSlotDblClicked)=\"handleMonthSlotDblClicked($event)\"></axm-task-board-calendar-view>\n    } }\n    <ax-context-menu #rootContextMenu [closeOn]=\"'leave'\" [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\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 [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\"\n    class=\"ax-w-full\">\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 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    <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>", 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: i2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { 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: i2$1.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: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", 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"] }, { 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: i5$1.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: i7.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }], 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", "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", "excludeTaskType"], 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: i5$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXMTaskBoardPage, decorators: [{
             type: Component,
@@ -1340,6 +1788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXLoadingModule,
                         AXBreadcrumbsModule,
                         AXBadgeModule,
+                        AXAccordionModule,
+                        AXAccordionCdkModule,
                         //
                         AXPThemeLayoutBlockComponent,
                         AXPPageLayoutComponent,
@@ -1352,13 +1802,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXPopoverModule,
                         AXCalendarComponent,
                         AXMTaskBoardFiltersComponent,
+                        AXCheckBoxModule,
+                        AXFormModule,
+                        AXLabelModule,
+                        AXSelectionListModule,
+                        AXPThemeLayoutStartSideComponent,
+                        AXPThemeLayoutHeaderComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: AXPPageLayoutBase,
                             useExisting: AXMTaskBoardPage,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\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>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | 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      <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      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters\n            #filtersComponent\n            [isQueryParam]=\"isQueryParam()\"\n            (applyClicked)=\"filterDropdownPanel.close()\"\n          ></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\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", 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 }] }], contextMenu: [{ type: i0.ViewChild, args: ['rootContextMenu', { isSignal: true }] }] } });
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header class=\"ax-p-4 ax-border-b\">\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'sidebar' }\"></ng-container>\n    </axp-layout-header>\n\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          <!-- <h3 class=\"ax-text-sm ax-font-semibold ax-text-neutral-800 ax-uppercase ax-tracking-wide\">\n            {{ (t('task-board.terms.calendar', { scope: rootConfig.config.i18n}) | async) }}\n          </h3> -->\n          <ax-calendar #sidebarCalendar [type]=\"calendarType()\" [depth]=\"calendarDepth()\" [cellClass]=\"getCellClass\"\n            [ngModel]=\"currentDateForCalendar()\" [dayCellTemplate]=\"dayCellTemplate\"\n            class=\"ax-single-range-calendar ax-border ax-rounded-lg\" (onSlotClick)=\"handleCalendarSlotClick($event)\">\n          </ax-calendar>\n        </div>\n\n        <div axAccordionGroup [accordion]=\"false\">\n          <div class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\" axAccordionItem\n            #taskTypeAccordion=\"axAccordionItem\">\n            <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader>\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ (t('task-board.filter.task-type', { scope: rootConfig.config.i18n}) | async)! }}\n              </h3>\n              <ax-icon [icon]=\"taskTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list [items]=\"taskTypeItems()\" [ngModel]=\"selectedTaskTypeValues()\"\n                  (onValueChanged)=\"handleTaskTypeSelectionChange($event.value)\" direction=\"vertical\" [multiple]=\"true\"\n                  [showControl]=\"true\" valueField=\"id\" textField=\"text\">\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          </div>\n\n          <div class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\" axAccordionItem\n            #calendarEventTypeAccordion=\"axAccordionItem\">\n            <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader>\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\"></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list [items]=\"calendarEventTypeItems()\" [ngModel]=\"selectedCalendarEventTypeValues()\"\n                  (onValueChanged)=\"handleCalendarEventTypeSelectionChange($event.value)\" direction=\"vertical\"\n                  [multiple]=\"true\" [showControl]=\"true\" valueField=\"id\" textField=\"text\">\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          </div>\n        </div>\n      </div>\n    </axp-layout-content>\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      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters #filtersComponent [isQueryParam]=\"isQueryParam()\" [excludeTaskType]=\"true\"\n            (applyClicked)=\"filterDropdownPanel.close()\"></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\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 class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\" [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"vm.selectTask($event)\" (onActionClick)=\"handleContextMenu($event)\"></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view class=\"ax-h-full ax-w-full ax-min-w-0\" [dataSource]=\"gridDataSource\"\n      (onTaskClick)=\"vm.selectTask($event)\" (onActionClick)=\"handleContextMenu($event)\"></axm-task-board-grid-view>\n    } @case('status-grouped-grid') {\n    <axm-task-board-status-grouped-grid-view class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onActionClick)=\"handleContextMenu($event)\"></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [resources]=\"resources()\" [startingDate]=\"vm.currentDate()\" [dataSource]=\"schedulerDataSource\"\n      (onTaskClick)=\"vm.selectTask($event)\" [selectedView]=\"vm.currentViewMode()\"\n      (onActionClick)=\"handleContextMenu($event)\" (onTaskRightClick)=\"handleContextMenu($event)\"\n      (component)=\"schedulerComponentChanged($event)\"\n      (onMonthSlotDblClicked)=\"handleMonthSlotDblClicked($event)\"></axm-task-board-calendar-view>\n    } }\n    <ax-context-menu #rootContextMenu [closeOn]=\"'leave'\" [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\" (onItemClick)=\"handleContextMenuItemClick($event)\">\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 [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\"\n    class=\"ax-w-full\">\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 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    <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>", 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 }] }], dayCellTemplateRef: [{ type: i0.ViewChild, args: ['dayCellTemplate', { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: ['rootContextMenu', { isSignal: true }] }] } });
 
 export { AXMTaskBoardPage };
-//# sourceMappingURL=acorex-modules-task-management-task-board.page-CKgZoOGI.mjs.map
+//# sourceMappingURL=acorex-modules-task-management-task-board.page-Cm8wJD-y.mjs.map