@acorex/modules 20.0.22 → 20.0.25

package/fesm2022/{acorex-modules-workflow-management-task-board.page-Dp7SJ3NA.mjs → acorex-modules-workflow-management-task-board.page-zaSchG-u.mjs}

@@ -54,19 +54,24 @@ const RootConfig = {
 
 var AXMTaskBoardSettings;
 (function (AXMTaskBoardSettings) {
-    AXMTaskBoardSettings["CalendarViewMode"] = "taskboard.calendar.viewMode";
+    AXMTaskBoardSettings["ViewMode"] = "taskboard.viewMode";
+    AXMTaskBoardSettings["ViewCategory"] = "taskboard.viewCategory";
+    AXMTaskBoardSettings["DaysCount"] = "taskboard.calendar.daysCount";
     AXMTaskBoardSettings["CurrentDate"] = "taskboard.calendar.currentDate";
     AXMTaskBoardSettings["SelectedTaskTypeFilter"] = "taskboard.filter.selectedTaskType";
 })(AXMTaskBoardSettings || (AXMTaskBoardSettings = {}));
 
 const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() => ({
+    daysCount: 7,
+    taskTypes: [],
     isLoading: true,
-    currentViewMode: 'month',
+    detailPanel: false,
+    selectedTask: null,
+    rangeStartDate: null,
     currentDate: new Date(),
+    currentViewMode: 'month',
     selectedTaskTypeName: null,
-    taskTypes: [],
-    selectedTask: null,
-    detailPanel: false,
+    currentViewCategory: 'calendar',
 })), withComputed((store) => ({
     selectedTaskType: computed(() => {
         const name = store.selectedTaskTypeName();
@@ -78,6 +83,11 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
     // (Optional but recommended) Add a computed signal to easily check if a task is selected
     isTaskSelected: computed(() => store.selectedTask() !== null),
     isDetailPanelOpen: computed(() => store.detailPanel()),
+    endDate: computed(() => {
+        const currentDate = store.currentDate();
+        const daysCount = store.daysCount();
+        return new Date(currentDate.getTime() + daysCount * 24 * 60 * 60 * 1000);
+    }),
 })), withMethods((store, settingService = inject(AXPSettingService), taskBoardService = inject(AXPTaskBoardService)) => {
     // Create a private method for getting the user-scoped settings to avoid repetition
     const userScopedSettings = () => settingService.scope(AXPPlatformScope.User);
@@ -89,13 +99,15 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 const taskTypes = await taskBoardService.getTaskTypes();
                 patchState(store, { taskTypes });
                 // 2. Load Persisted Settings individually
-                const [savedViewMode, savedDateString, savedTaskTypeName] = await Promise.all([
-                    userScopedSettings().get(AXMTaskBoardSettings.CalendarViewMode),
+                const [savedDateString, savedViewMode, savedViewCategory, savedTaskTypeName] = await Promise.all([
                     userScopedSettings().get(AXMTaskBoardSettings.CurrentDate),
+                    userScopedSettings().get(AXMTaskBoardSettings.ViewMode),
+                    userScopedSettings().get(AXMTaskBoardSettings.ViewCategory),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedTaskTypeFilter),
                 ]);
                 patchState(store, {
                     currentViewMode: savedViewMode || 'month',
+                    currentViewCategory: savedViewCategory || 'calendar',
                     currentDate: savedDateString ? new Date(savedDateString) : new Date(),
                     selectedTaskTypeName: savedTaskTypeName || null,
                     isLoading: false,
@@ -112,6 +124,26 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 });
             }
         },
+        setViewCategory(mode) {
+            switch (mode) {
+                case 'calendar':
+                    this.setViewMode('month');
+                    break;
+                case 'table':
+                    this.setViewMode('grid');
+                    break;
+                case 'kanban':
+                    this.setViewMode('kanban');
+                    break;
+            }
+            this.setCategory(mode);
+        },
+        setCategory(mode) {
+            patchState(store, { currentViewCategory: mode });
+            userScopedSettings()
+                .set(AXMTaskBoardSettings.ViewCategory, mode)
+                .catch((error) => console.error('Error saving calendar view category:', error));
+        },
         setViewMode(mode) {
             if ((mode === 'kanban' || mode === 'grid' || mode === 'status-grouped-grid' || mode === 'time-grouped-grid') &&
                 store.selectedTaskTypeName() === null) {
@@ -125,7 +157,7 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
             }
             patchState(store, { currentViewMode: mode });
             userScopedSettings()
-                .set(AXMTaskBoardSettings.CalendarViewMode, mode)
+                .set(AXMTaskBoardSettings.ViewMode, mode)
                 .catch((error) => console.error('Error saving calendar view mode:', error));
         },
         setCurrentDate(date) {
@@ -166,6 +198,21 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
         getStatusName(key, provider) {
             return taskBoardService.getStatusName(key, provider);
         },
+        /**
+         * Sets the start date for a new range selection.
+         * Pass `null` to clear the selection.
+         * @param date The start date of the range.
+         */
+        setRangeStartDate(date) {
+            patchState(store, { rangeStartDate: date });
+        },
+        setDaysCount(days) {
+            const count = Math.max(1, days);
+            patchState(store, { daysCount: count });
+            userScopedSettings()
+                .set(AXMTaskBoardSettings.DaysCount, count)
+                .catch((error) => console.error('Error saving days count:', error));
+        },
     };
 }));
 
@@ -184,15 +231,16 @@ class AXMTaskBoardDetailPanel {
         return this.vm.getStatusName(key, provider);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardDetailPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMTaskBoardDetailPanel, isStandalone: true, selector: "axm-task-board-detail-panel", ngImport: i0, template: "@if (vm.isTaskSelected()) {\n  @let nodeInfo = vm.selectedTask();\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>{{ nodeInfo?.title }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__title\">\n        <span>{{ 'task-board.detail-panel.title' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n      </div>\n      <div class=\"__content\">\n        @if (nodeInfo?.description) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.description' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.description }}</div>\n          </div>\n        }\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{\n              'task-board.detail-panel.start-date' | translate: { scope: rootConfig.config.i18n } | async\n            }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.startDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.end-date' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.endDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        @let statusName = getStatusName(nodeInfo?.statusKey, nodeInfo?.data?.provider);\n        @if (statusName) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{ 'task-board.detail-panel.status' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n            </div>\n            <div class=\"__content\">{{ statusName }}</div>\n          </div>\n        }\n        @if (nodeInfo?.priority) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.priority' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ capitalizeFirstLetter(nodeInfo?.priority ?? '') }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>{{\n        'task-board.detail-panel.no-task-selected' | translate: { scope: rootConfig.config.i18n } | async\n      }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n}\n", styles: ["axm-task-board-detail-panel{display:flex;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1024px){axm-task-board-detail-panel{min-width:20rem}}axm-task-board-detail-panel>.__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axm-task-board-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__header>.__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axm-task-board-detail-panel>.__content{display:flex;flex-direction:column}axm-task-board-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axm-task-board-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axm-task-board-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axm-task-board-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"], dependencies: [{ 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: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: 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.0.7", type: AXMTaskBoardDetailPanel, isStandalone: true, selector: "axm-task-board-detail-panel", ngImport: i0, template: "@if (vm.isTaskSelected()) {\n  @let nodeInfo = vm.selectedTask();\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>{{ nodeInfo?.title }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__title\">\n        <span>{{ 'task-board.detail-panel.title' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n      </div>\n      <div class=\"__content\">\n        @if (nodeInfo?.description) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>\n                {{ 'task-board.detail-panel.description' | translate: { scope: rootConfig.config.i18n } | async }}\n              </span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.description }}</div>\n          </div>\n        }\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>\n              {{ 'task-board.detail-panel.start-date' | translate: { scope: rootConfig.config.i18n } | async }}\n            </span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.startDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.end-date' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.endDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        @let statusName = getStatusName(nodeInfo?.statusKey, nodeInfo?.data?.provider);\n        @if (statusName) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{ 'task-board.detail-panel.status' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n            </div>\n            <div class=\"__content\">{{ statusName }}</div>\n          </div>\n        }\n        @if (nodeInfo?.priority) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>\n                {{ 'task-board.detail-panel.priority' | translate: { scope: rootConfig.config.i18n } | async }}\n              </span>\n            </div>\n            <div class=\"__content\">{{ capitalizeFirstLetter(nodeInfo?.priority ?? '') }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>\n        {{ 'task-board.detail-panel.no-task-selected' | translate: { scope: rootConfig.config.i18n } | async }}\n      </span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n}\n", styles: ["axm-task-board-detail-panel{display:flex;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1024px){axm-task-board-detail-panel{width:24rem}}axm-task-board-detail-panel>.__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}@media (min-width: 1024px){axm-task-board-detail-panel>.__header{width:20rem}}axm-task-board-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__header>.__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axm-task-board-detail-panel>.__content{display:flex;flex-direction:column}axm-task-board-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axm-task-board-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axm-task-board-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axm-task-board-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"], dependencies: [{ 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: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: 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.0.7", ngImport: i0, type: AXMTaskBoardDetailPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-task-board-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorIconComponent, AXFormatPipe, AsyncPipe, AXTranslatorPipe], template: "@if (vm.isTaskSelected()) {\n  @let nodeInfo = vm.selectedTask();\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>{{ nodeInfo?.title }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__title\">\n        <span>{{ 'task-board.detail-panel.title' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n      </div>\n      <div class=\"__content\">\n        @if (nodeInfo?.description) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.description' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.description }}</div>\n          </div>\n        }\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{\n              'task-board.detail-panel.start-date' | translate: { scope: rootConfig.config.i18n } | async\n            }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.startDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.end-date' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.endDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        @let statusName = getStatusName(nodeInfo?.statusKey, nodeInfo?.data?.provider);\n        @if (statusName) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{ 'task-board.detail-panel.status' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n            </div>\n            <div class=\"__content\">{{ statusName }}</div>\n          </div>\n        }\n        @if (nodeInfo?.priority) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.priority' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ capitalizeFirstLetter(nodeInfo?.priority ?? '') }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>{{\n        'task-board.detail-panel.no-task-selected' | translate: { scope: rootConfig.config.i18n } | async\n      }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n}\n", styles: ["axm-task-board-detail-panel{display:flex;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1024px){axm-task-board-detail-panel{min-width:20rem}}axm-task-board-detail-panel>.__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axm-task-board-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__header>.__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axm-task-board-detail-panel>.__content{display:flex;flex-direction:column}axm-task-board-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axm-task-board-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axm-task-board-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axm-task-board-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"] }]
+            args: [{ selector: 'axm-task-board-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorIconComponent, AXFormatPipe, AsyncPipe, AXTranslatorPipe], template: "@if (vm.isTaskSelected()) {\n  @let nodeInfo = vm.selectedTask();\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>{{ nodeInfo?.title }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__title\">\n        <span>{{ 'task-board.detail-panel.title' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n      </div>\n      <div class=\"__content\">\n        @if (nodeInfo?.description) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>\n                {{ 'task-board.detail-panel.description' | translate: { scope: rootConfig.config.i18n } | async }}\n              </span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.description }}</div>\n          </div>\n        }\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>\n              {{ 'task-board.detail-panel.start-date' | translate: { scope: rootConfig.config.i18n } | async }}\n            </span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.startDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.end-date' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.endDate\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        @let statusName = getStatusName(nodeInfo?.statusKey, nodeInfo?.data?.provider);\n        @if (statusName) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{ 'task-board.detail-panel.status' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n            </div>\n            <div class=\"__content\">{{ statusName }}</div>\n          </div>\n        }\n        @if (nodeInfo?.priority) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>\n                {{ 'task-board.detail-panel.priority' | translate: { scope: rootConfig.config.i18n } | async }}\n              </span>\n            </div>\n            <div class=\"__content\">{{ capitalizeFirstLetter(nodeInfo?.priority ?? '') }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n} @else {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span>\n        {{ 'task-board.detail-panel.no-task-selected' | translate: { scope: rootConfig.config.i18n } | async }}\n      </span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"vm.closeDetailPanel()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n}\n", styles: ["axm-task-board-detail-panel{display:flex;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1024px){axm-task-board-detail-panel{width:24rem}}axm-task-board-detail-panel>.__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}@media (min-width: 1024px){axm-task-board-detail-panel>.__header{width:20rem}}axm-task-board-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__header>.__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axm-task-board-detail-panel>.__content{display:flex;flex-direction:column}axm-task-board-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axm-task-board-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axm-task-board-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axm-task-board-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"] }]
         }] });
 
 class AXMTaskBoardCalendarViewComponent {
     constructor() {
+        this.vm = inject(AXMTaskBoardViewModel);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
         this.schedulerComponent = viewChild(AXSchedulerComponent);
@@ -266,11 +314,11 @@ class AXMTaskBoardCalendarViewComponent {
         this.onTaskClick.emit(event.appointment);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.7", type: AXMTaskBoardCalendarViewComponent, isStandalone: true, selector: "axm-task-board-calendar-view", inputs: { 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  [dataSource]=\"dataSource()\"\n  [startingDate]=\"startingDate()\"\n  [selectedView]=\"currentSchedulerView()\"\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></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", "allowFullScreen", "multiDayViewDaysCount", "tooltipTemplate", "dataSource", "firstDayOfWeek", "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.2.0", version: "20.0.7", type: AXMTaskBoardCalendarViewComponent, isStandalone: true, selector: "axm-task-board-calendar-view", inputs: { 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  [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></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", "allowFullScreen", "multiDayViewDaysCount", "tooltipTemplate", "dataSource", "firstDayOfWeek", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", 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  [dataSource]=\"dataSource()\"\n  [startingDate]=\"startingDate()\"\n  [selectedView]=\"currentSchedulerView()\"\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></ax-scheduler>\n", styles: ["ax-scheduler{line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}\n"] }]
+            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  [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></ax-scheduler>\n", styles: ["ax-scheduler{line-height:1.5;background-color:rgba(var(--ax-sys-color-lightest-surface))!important}\n"] }]
         }] });
 
 class AXMTaskBoardGridViewComponent {
@@ -549,7 +597,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
     constructor() {
         super(...arguments);
-        this.MULTI_DAYS_COUNT = 7;
         this.router = inject(Router);
         this.rootConfig = RootConfig;
         this.vm = inject(AXMTaskBoardViewModel);
@@ -564,70 +611,70 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.currentViewMode = signal('calendar');
         this.schedulerComponent = signal(null);
         this.viewsItems = signal([
-            { key: 'day', text: 'daily', icon: 'fa-light fa-calendar-day', title: 'calendar' },
-            { key: 'week', text: 'weekly', icon: 'fa-light fa-calendar-week' },
-            { key: 'month', text: 'monthly', icon: 'fa-light fa-calendar-alt' },
-            { key: 'agenda', text: 'agenda', icon: 'fa-light fa-calendar-range', break: true },
-            { key: 'grid', text: 'grid', icon: 'fa-light fa-table', title: 'table' },
-            // { key: 'time-grouped-grid', text: 'time-grouped-grid', icon: 'fa-light fa-table' },
-            { key: 'status-grouped-grid', text: 'status-grouped-grid', icon: 'fa-light fa-table', break: true },
+            { key: 'day', text: 'daily', icon: 'fa-light fa-calendar-day', category: 'calendar' },
+            { key: 'week', text: 'weekly', icon: 'fa-light fa-calendar-week', category: 'calendar' },
+            { key: 'month', text: 'monthly', icon: 'fa-light fa-calendar-alt', category: 'calendar' },
+            { key: 'agenda', text: 'agenda', icon: 'fa-light fa-calendar-range', category: 'calendar' },
+            { key: 'grid', text: 'grid', icon: 'fa-light fa-table', category: 'table' },
+            // { key: 'time-grouped-grid', text: 'time-grouped-grid', icon: 'fa-light fa-table' ,category: 'table'},
+            { key: 'status-grouped-grid', text: 'status-grouped-grid', icon: 'fa-light fa-table', category: 'table' },
+        ]);
+        this.categoryItems = signal([
+            { key: 'calendar', text: 'calendar', icon: 'fa-light fa-calendar-day' },
+            { key: 'table', text: 'table', icon: 'fa-light fa-table' },
             { key: 'kanban', text: 'kanban', icon: 'fa-light fa-chart-kanban' },
         ]);
         this.calendarType = computed(() => this.localeService.activeProfile().calendar.system);
         this.todayButtonText = computed(() => {
             switch (this.vm.currentViewMode()) {
                 case 'day':
+                case 'grid':
                 case 'agenda':
                 case 'kanban':
                 case 'timeline-day':
+                case 'time-grouped-grid':
                 case 'timeline-multi-day':
+                case 'status-grouped-grid':
                     return 'Today';
                 case 'week':
                     return 'Current week';
-                case 'grid':
                 case 'month':
                 case 'timeline-month':
-                case 'time-grouped-grid':
-                case 'status-grouped-grid':
                     return 'Current month';
             }
         });
         this.timeText = computed(() => {
-            if (this.vm.currentViewMode() === 'kanban') {
-                const start = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
-                const end = start.add('day', this.MULTI_DAYS_COUNT - 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}`;
-            }
             if (this.vm.currentViewMode() === 'grid' ||
+                this.vm.currentViewMode() === 'kanban' ||
                 this.vm.currentViewMode() === 'time-grouped-grid' ||
                 this.vm.currentViewMode() === 'status-grouped-grid') {
                 const start = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
-                const startText = start.format('MMMM yyyy', { locale: this.localeService.activeProfile().calendar.system });
-                return startText;
+                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();
         });
         this.calendarDepth = computed(() => {
-            if (this.vm.currentViewMode() === 'kanban') {
-                return 'day';
-            }
             if (this.vm.currentViewMode() === 'grid' ||
+                this.vm.currentViewMode() === 'kanban' ||
                 this.vm.currentViewMode() === 'time-grouped-grid' ||
                 this.vm.currentViewMode() === 'status-grouped-grid') {
-                return 'month';
+                return 'day';
             }
             return this.schedulerComponent()?.calendarDepth();
         });
         this.selectedViewMode = computed(() => this.viewsItems().find((item) => item.key === this.vm.currentViewMode()) || this.viewsItems()[0]);
+        this.selectedViewCategory = computed(() => this.categoryItems().find((item) => item.key === this.vm.currentViewCategory()) || this.categoryItems()[0]);
+        this.currentViewModes = computed(() => this.viewsItems().filter((item) => item.category === this.vm.currentViewCategory()));
         this.filter = computed(() => {
             const taskTypeProvider = this.vm.selectedTaskType();
             const types = taskTypeProvider ? [taskTypeProvider.name] : undefined;
             let from = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
             let end;
             if (this.vm.currentViewMode() === 'kanban') {
-                end = from.add('day', this.MULTI_DAYS_COUNT - 1);
+                end = from.add('day', this.vm.daysCount() - 1);
             }
             else if (this.vm.currentViewMode() === 'grid' ||
                 this.vm.currentViewMode() === 'time-grouped-grid' ||
@@ -656,30 +703,50 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.statuses = computed(() => {
             return this.vm.selectedTaskType()?.statuses || [];
         });
+        this.rangeBasedViews = [
+            'kanban',
+            'agenda',
+            'grid',
+            'time-grouped-grid',
+            'status-grouped-grid',
+            'timeline-multi-day',
+        ];
         this.getCellClass = (date) => {
-            // check from value
-            const rangedDates = [
-                'week',
-                'grid',
-                'kanban',
-                'agenda',
-                'time-grouped-grid',
-                'status-grouped-grid',
-                'timeline-multi-day',
-            ];
-            if (!rangedDates.includes(this.vm.currentViewMode())) {
+            const currentView = this.vm.currentViewMode();
+            const selectionStartDate = this.vm.rangeStartDate();
+            if (this.rangeBasedViews.includes(currentView)) {
+                if (selectionStartDate) {
+                    const axSelectionStartDate = this.calendarService.create(selectionStartDate);
+                    if (date.equal(axSelectionStartDate, 'day')) {
+                        return 'ax-range-start ax-range-end';
+                    }
+                    return null;
+                }
+                const fromRange = this.calendarService.create(this.vm.currentDate());
+                const endRange = fromRange.add('day', this.vm.daysCount() - 1);
+                const isStart = date.equal(fromRange, 'day');
+                const isEnd = date.equal(endRange, 'day');
+                if (isStart && isEnd)
+                    return 'ax-range-start ax-range-end';
+                if (isStart)
+                    return 'ax-range-start';
+                if (isEnd)
+                    return 'ax-range-end';
+                if (date.compare(fromRange, 'day') > 0 && date.compare(endRange, 'day') < 0) {
+                    return 'ax-range-between';
+                }
                 return null;
             }
-            const from = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
-            const end = from.add('day', this.MULTI_DAYS_COUNT - 1);
-            if (from && date.equal(from, 'day')) {
-                return 'ax-range-start';
-            }
-            if (end && date.equal(end, 'day')) {
-                return 'ax-range-end';
-            }
-            if (from && end && date.compare(from, 'day') > 0 && date.compare(end, 'day') < 0) {
-                return 'ax-range-between';
+            if (currentView === 'week') {
+                const from = this.calendarService.create(this.vm.currentDate());
+                const end = from.add('day', 6);
+                if (date.equal(from, 'day'))
+                    return 'ax-range-start';
+                if (date.equal(end, 'day'))
+                    return 'ax-range-end';
+                if (date.compare(from, 'day') > 0 && date.compare(end, 'day') < 0) {
+                    return 'ax-range-between';
+                }
             }
             return null;
         };
@@ -740,33 +807,26 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             });
         }
     }
+    handleViewCategoryChange(category) {
+        let view;
+        switch (category) {
+            case 'calendar':
+                view = 'month';
+                break;
+            case 'table':
+                view = 'grid';
+                break;
+            case 'kanban':
+                view = 'kanban';
+                break;
+        }
+        this.vm.setViewCategory(category);
+        this.router.navigate([], { queryParams: { view } });
+    }
     handleSelectedTaskTypeChange(taskType) {
         this.vm.setSelectedTaskTypeProvider(taskType);
         this.schedulerComponent()?.refresh();
     }
-    handleSchedulerDateChanged(event) {
-        if (this.vm.isLoading()) {
-            return;
-        }
-        const newDate = event.value;
-        const currentDateInVm = this.vm.currentDate();
-        let dateToSet = newDate || new Date();
-        if (!currentDateInVm || currentDateInVm.getTime() !== dateToSet.getTime()) {
-            if (this.vm.currentViewMode() === 'week') {
-                const day = dateToSet.getDay();
-                const weekStart = this.localeService.activeProfile().calendar.week.startsOn;
-                let daysToSubtract = day - weekStart;
-                if (daysToSubtract < 0) {
-                    daysToSubtract += 7;
-                }
-                dateToSet = new Date(dateToSet);
-                dateToSet.setDate(dateToSet.getDate() - daysToSubtract);
-            }
-            this.vm.setCurrentDate(dateToSet);
-            this.popover()?.close();
-            this.calendar()?.render();
-        }
-    }
     handleContextMenuItemClick(event) {
         this.taskBoardService.executeCommand(event.item.data?.command, this.currentTask()?.data?.provider ?? '');
     }
@@ -783,7 +843,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             case 'agenda':
             case 'kanban':
             case 'timeline-multi-day':
-                this.vm.setCurrentDate(date.add('day', forward ? this.MULTI_DAYS_COUNT - 1 : 1 - this.MULTI_DAYS_COUNT).date);
+                this.vm.setCurrentDate(date.add('day', forward ? this.vm.daysCount() - 1 : 1 - this.vm.daysCount()).date);
                 break;
             case 'grid':
             case 'month':
@@ -796,8 +856,61 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.popover()?.close();
         this.calendar()?.render();
     }
+    handleCalendarSlotClick(event) {
+        const clickedDate = event.item;
+        const currentView = this.vm.currentViewMode();
+        if (this.rangeBasedViews.includes(currentView)) {
+            const selectionStartDate = this.vm.rangeStartDate();
+            if (!selectionStartDate) {
+                this.vm.setRangeStartDate(clickedDate);
+                this.calendar()?.render();
+                return;
+            }
+            const date1 = selectionStartDate.getTime();
+            const date2 = clickedDate.getTime();
+            const newStartDate = new Date(Math.min(date1, date2));
+            const newEndDate = new Date(Math.max(date1, date2));
+            const differenceInDays = this.calculateDifferenceInDays(newStartDate, newEndDate);
+            this.vm.setCurrentDate(newStartDate);
+            this.vm.setDaysCount(differenceInDays);
+            this.vm.setRangeStartDate(null);
+            this.calendar()?.render();
+            this.popover()?.close();
+            return;
+        }
+        let dateToSet = new Date(clickedDate);
+        if (currentView === 'week') {
+            const day = dateToSet.getDay();
+            const weekStart = this.localeService.activeProfile().calendar.week.startsOn;
+            let daysToSubtract = day - weekStart;
+            if (daysToSubtract < 0) {
+                daysToSubtract += 7;
+            }
+            dateToSet.setDate(dateToSet.getDate() - daysToSubtract);
+        }
+        this.vm.setCurrentDate(dateToSet);
+        this.popover()?.close();
+        this.calendar()?.render();
+    }
+    /**
+     * Helper function to calculate the difference in whole days between two dates.
+     * The result is inclusive (e.g., May 5 to May 6 is a 2-day range).
+     */
+    calculateDifferenceInDays(start, end) {
+        if (!start || !end) {
+            return 1;
+        }
+        const startDate = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+        const endDate = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+        const timeDifference = endDate.getTime() - startDate.getTime();
+        const daysDifference = Math.round(timeDifference / (1000 * 3600 * 24));
+        return daysDifference + 1;
+    }
     handleTodayClick() {
-        this.handleSchedulerDateChanged({ value: new Date(), component: this.schedulerComponent() });
+        this.vm.setRangeStartDate(null);
+        this.vm.setCurrentDate(new Date());
+        this.popover()?.close();
+        this.calendar()?.render();
     }
     async loadFromRoute() {
         const snapshot = this.activatedRoute.snapshot;
@@ -817,6 +930,14 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         const view = snapshot.queryParamMap.get('view') ?? null;
         if (view && views.includes(view)) {
             this.vm.setViewMode(view);
+            if (view === 'kanban') {
+                this.vm.setCategory('kanban');
+                return;
+            }
+            const category = this.viewsItems().find((item) => item.key === view)?.category;
+            if (category) {
+                this.vm.setCategory(category);
+            }
         }
         else if (!this.vm.currentViewMode()) {
             this.vm.setViewMode('day');
@@ -831,7 +952,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMTaskBoardPage,
             },
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "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\n        [text]=\"t(vm.selectedTaskType()?.title || 'task-board.all', { scope: rootConfig.config.i18n }) | async\"\n      >\n        <ax-prefix><ax-icon icon=\"fa-light {{vm.selectedTaskType()?.icon || 'fa-tasks'}}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list class=\"ax-p-2\">\n            @if(vm.currentViewMode()!=='kanban' && vm.currentViewMode()!=='grid' &&\n            vm.currentViewMode()!=='status-grouped-grid' && vm.currentViewMode()!=='time-grouped-grid') {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(null)\"\n              [text]=\"(t('task-board.all', { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light fa-tasks\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            } @for(item of vm.taskTypes(); track item.name) {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(item)\"\n              [text]=\"(t(item.title, { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\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>\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              (onValueChanged)=\"handleSchedulerDateChanged($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    <axp-layout-suffix>\n      <ax-button>\n        <ax-icon icon=\"fa-light {{ selectedViewMode().icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of viewsItems(); track item.key) { @if(item.title) {\n            <ax-title>{{(t('task-board.'+item.title, { scope: rootConfig.config.i18n }) | async)}}</ax-title>\n            }\n            <ax-button-item\n              [text]=\"(t('task-board.view.' + item.text, { scope: 'workflow-management' }) | async)!\"\n              [selected]=\"vm.currentViewMode() === item.key\"\n              (onClick)=\"handleCalendarViewChange(item.key)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            @if(item.break) {\n            <ax-divider></ax-divider>\n            } }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <!-- Detail Panel Toggle -->\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    >@switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"axp-kanban-container ax-h-full ax-w-full\"\n    ></axm-task-board-kanban-view>\n    }@case('grid') {\n    <axm-task-board-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      class=\"ax-h-full ax-w-full\"\n      (onTaskClick)=\"setActiveTask($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      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-status-grouped-grid-view>\n    }@case('time-grouped-grid') {\n    <axm-task-board-time-grouped-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-time-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full\"\n      [dataSource]=\"dataSource\"\n      [startingDate]=\"vm.currentDate()\"\n      (onTaskClick)=\"setActiveTask($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() && layoutService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { 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: "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\n        [text]=\"t(vm.selectedTaskType()?.title || 'task-board.all', { scope: rootConfig.config.i18n }) | async\"\n      >\n        <ax-prefix><ax-icon icon=\"fa-light {{vm.selectedTaskType()?.icon || 'fa-tasks'}}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list class=\"ax-p-2\">\n            @if(vm.currentViewMode()!=='kanban' && vm.currentViewMode()!=='grid' &&\n            vm.currentViewMode()!=='status-grouped-grid' && vm.currentViewMode()!=='time-grouped-grid') {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(null)\"\n              [text]=\"(t('task-board.all', { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light fa-tasks\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            } @for(item of vm.taskTypes(); track item.name) {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(item)\"\n              [text]=\"(t(item.title, { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\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    <axp-layout-suffix>\n      <ax-button [text]=\"(t('task-board.' + selectedViewCategory().text, { scope: 'workflow-management' }) | async)!\">\n        <ax-prefix><ax-icon icon=\"fa-light {{ selectedViewCategory().icon }}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of categoryItems(); track item.key) {\n            <ax-button-item\n              [text]=\"(t('task-board.' + item.text, { scope: 'workflow-management' }) | async)!\"\n              [selected]=\"vm.currentViewCategory() === item.key\"\n              (onClick)=\"handleViewCategoryChange(item.key)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            @if(item.break) {\n            <ax-divider></ax-divider>\n            } }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n      @if(currentViewModes().length){\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: 'workflow-management' }) | async)!\">\n        <ax-prefix><ax-icon icon=\"fa-light {{ selectedViewMode().icon }}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of currentViewModes(); track item.key) {\n            <ax-button-item\n              [text]=\"(t('task-board.view.' + item.text, { scope: 'workflow-management' }) | async)!\"\n              [selected]=\"vm.currentViewMode() === item.key\"\n              (onClick)=\"handleCalendarViewChange(item.key)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n      } @if(layoutService.isLarge()) {\n      <!-- Detail Panel Toggle -->\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    >@switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"axp-kanban-container ax-h-full ax-w-full\"\n    ></axm-task-board-kanban-view>\n    }@case('grid') {\n    <axm-task-board-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      class=\"ax-h-full ax-w-full\"\n      (onTaskClick)=\"setActiveTask($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      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-status-grouped-grid-view>\n    }@case('time-grouped-grid') {\n    <axm-task-board-time-grouped-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-time-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full\"\n      [dataSource]=\"dataSource\"\n      [startingDate]=\"vm.currentDate()\"\n      (onTaskClick)=\"setActiveTask($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() && layoutService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
                 //
                 AXMenuModule }, { kind: "component", type: i3.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.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: i4.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i4.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i6.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i6.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: 
                 //
@@ -869,8 +990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             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\n        [text]=\"t(vm.selectedTaskType()?.title || 'task-board.all', { scope: rootConfig.config.i18n }) | async\"\n      >\n        <ax-prefix><ax-icon icon=\"fa-light {{vm.selectedTaskType()?.icon || 'fa-tasks'}}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list class=\"ax-p-2\">\n            @if(vm.currentViewMode()!=='kanban' && vm.currentViewMode()!=='grid' &&\n            vm.currentViewMode()!=='status-grouped-grid' && vm.currentViewMode()!=='time-grouped-grid') {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(null)\"\n              [text]=\"(t('task-board.all', { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light fa-tasks\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            } @for(item of vm.taskTypes(); track item.name) {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(item)\"\n              [text]=\"(t(item.title, { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\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>\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              (onValueChanged)=\"handleSchedulerDateChanged($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    <axp-layout-suffix>\n      <ax-button>\n        <ax-icon icon=\"fa-light {{ selectedViewMode().icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of viewsItems(); track item.key) { @if(item.title) {\n            <ax-title>{{(t('task-board.'+item.title, { scope: rootConfig.config.i18n }) | async)}}</ax-title>\n            }\n            <ax-button-item\n              [text]=\"(t('task-board.view.' + item.text, { scope: 'workflow-management' }) | async)!\"\n              [selected]=\"vm.currentViewMode() === item.key\"\n              (onClick)=\"handleCalendarViewChange(item.key)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            @if(item.break) {\n            <ax-divider></ax-divider>\n            } }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <!-- Detail Panel Toggle -->\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    >@switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"axp-kanban-container ax-h-full ax-w-full\"\n    ></axm-task-board-kanban-view>\n    }@case('grid') {\n    <axm-task-board-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      class=\"ax-h-full ax-w-full\"\n      (onTaskClick)=\"setActiveTask($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      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-status-grouped-grid-view>\n    }@case('time-grouped-grid') {\n    <axm-task-board-time-grouped-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-time-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full\"\n      [dataSource]=\"dataSource\"\n      [startingDate]=\"vm.currentDate()\"\n      (onTaskClick)=\"setActiveTask($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() && layoutService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\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"] }]
+                    ], 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\n        [text]=\"t(vm.selectedTaskType()?.title || 'task-board.all', { scope: rootConfig.config.i18n }) | async\"\n      >\n        <ax-prefix><ax-icon icon=\"fa-light {{vm.selectedTaskType()?.icon || 'fa-tasks'}}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list class=\"ax-p-2\">\n            @if(vm.currentViewMode()!=='kanban' && vm.currentViewMode()!=='grid' &&\n            vm.currentViewMode()!=='status-grouped-grid' && vm.currentViewMode()!=='time-grouped-grid') {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(null)\"\n              [text]=\"(t('task-board.all', { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light fa-tasks\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            } @for(item of vm.taskTypes(); track item.name) {\n            <ax-button-item\n              (onClick)=\"handleSelectedTaskTypeChange(item)\"\n              [text]=\"(t(item.title, { scope: rootConfig.config.i18n }) | async)!\"\n            >\n              <ax-prefix><ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon></ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\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    <axp-layout-suffix>\n      <ax-button [text]=\"(t('task-board.' + selectedViewCategory().text, { scope: 'workflow-management' }) | async)!\">\n        <ax-prefix><ax-icon icon=\"fa-light {{ selectedViewCategory().icon }}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of categoryItems(); track item.key) {\n            <ax-button-item\n              [text]=\"(t('task-board.' + item.text, { scope: 'workflow-management' }) | async)!\"\n              [selected]=\"vm.currentViewCategory() === item.key\"\n              (onClick)=\"handleViewCategoryChange(item.key)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            @if(item.break) {\n            <ax-divider></ax-divider>\n            } }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n      @if(currentViewModes().length){\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: 'workflow-management' }) | async)!\">\n        <ax-prefix><ax-icon icon=\"fa-light {{ selectedViewMode().icon }}\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel>\n          <ax-button-item-list>\n            @for(item of currentViewModes(); track item.key) {\n            <ax-button-item\n              [text]=\"(t('task-board.view.' + item.text, { scope: 'workflow-management' }) | async)!\"\n              [selected]=\"vm.currentViewMode() === item.key\"\n              (onClick)=\"handleCalendarViewChange(item.key)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-panel>\n      </ax-button>\n      } @if(layoutService.isLarge()) {\n      <!-- Detail Panel Toggle -->\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    >@switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"axp-kanban-container ax-h-full ax-w-full\"\n    ></axm-task-board-kanban-view>\n    }@case('grid') {\n    <axm-task-board-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      class=\"ax-h-full ax-w-full\"\n      (onTaskClick)=\"setActiveTask($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      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-status-grouped-grid-view>\n    }@case('time-grouped-grid') {\n    <axm-task-board-time-grouped-grid-view\n      [statuses]=\"statuses()\"\n      [tasks]=\"resolvedTasks()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full\"\n    ></axm-task-board-time-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full\"\n      [dataSource]=\"dataSource\"\n      [startingDate]=\"vm.currentDate()\"\n      (onTaskClick)=\"setActiveTask($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() && layoutService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\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"] }]
         }] });
 
 export { AXMTaskBoardPage };
-//# sourceMappingURL=acorex-modules-workflow-management-task-board.page-Dp7SJ3NA.mjs.map
+//# sourceMappingURL=acorex-modules-workflow-management-task-board.page-zaSchG-u.mjs.map