@acorex/modules 20.0.23 → 20.1.0

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

@@ -1,25 +1,25 @@
 import { AXBadgeModule } from '@acorex/components/badge';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import * as i4 from '@acorex/components/button';
+import * as i3 from '@acorex/components/button';
 import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
 import { AXCalendarComponent } from '@acorex/components/calendar';
-import * as i6 from '@acorex/components/decorators';
+import * as i5 from '@acorex/components/decorators';
 import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXDropdownPanelComponent } from '@acorex/components/dropdown';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i3 from '@acorex/components/menu';
+import * as i2 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
-import * as i7 from '@acorex/components/popover';
+import * as i6 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXLocaleService } from '@acorex/core/locale';
-import * as i5 from '@acorex/core/translation';
+import * as i4 from '@acorex/core/translation';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
-import * as i2 from '@angular/common';
+import * as i7 from '@angular/common';
 import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { computed, inject, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, input, output, effect, untracked, model, signal, viewChildren } from '@angular/core';
@@ -230,10 +230,10 @@ class AXMTaskBoardDetailPanel {
             return null;
         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{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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardDetailPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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{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"] }]
         }] });
@@ -243,13 +243,13 @@ class AXMTaskBoardCalendarViewComponent {
         this.vm = inject(AXMTaskBoardViewModel);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
-        this.schedulerComponent = viewChild(AXSchedulerComponent);
-        this.startingDate = input(new Date());
-        this.selectedView = input('month');
-        this.dataSource = input.required();
+        this.schedulerComponent = viewChild(AXSchedulerComponent, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : []));
+        this.startingDate = input(new Date(), ...(ngDevMode ? [{ debugName: "startingDate" }] : []));
+        this.selectedView = input('month', ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
         this.currentSchedulerView = computed(() => this.selectedView() === 'kanban' || this.selectedView() === 'grid'
             ? 'month'
-            : this.selectedView());
+            : this.selectedView(), ...(ngDevMode ? [{ debugName: "currentSchedulerView" }] : []));
         this.onTaskClick = output();
         this.onTaskChanged = output();
         this.onMonthSlotDblClicked = output();
@@ -313,10 +313,10 @@ class AXMTaskBoardCalendarViewComponent {
     onTaskClickHandler(event) {
         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  [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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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  [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"] }]
         }] });
@@ -326,11 +326,11 @@ class AXMTaskBoardGridViewComponent {
         this.localeService = inject(AXLocaleService);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
-        this.tasks = input.required();
-        this.statuses = input.required();
+        this.tasks = input.required(...(ngDevMode ? [{ debugName: "tasks" }] : []));
+        this.statuses = input.required(...(ngDevMode ? [{ debugName: "statuses" }] : []));
         this.onTaskClick = output();
         this.onActionClick = output();
-        this.stableTasks = computed(() => this.tasks(), { equal: isEqual });
+        this.stableTasks = computed(() => this.tasks(), ...(ngDevMode ? [{ debugName: "stableTasks", equal: isEqual }] : [{ equal: isEqual }]));
         this.tasksDataSource = computed(() => {
             return new AXDataSource({
                 load: async (e) => {
@@ -358,13 +358,13 @@ class AXMTaskBoardGridViewComponent {
                     return this.stableTasks().find((task) => task.id === key);
                 },
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "tasksDataSource" }] : []));
         this.#tasksChanged = effect(() => {
             this.stableTasks();
             untracked(() => {
                 this.tasksDataSource().refresh();
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#tasksChanged" }] : []));
     }
     #tasksChanged;
     handleRowClick(event) {
@@ -379,10 +379,10 @@ class AXMTaskBoardGridViewComponent {
             return;
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.7", type: AXMTaskBoardGridViewComponent, isStandalone: true, selector: "axm-task-board-grid-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onActionClick: "onActionClick" }, ngImport: i0, template: "<ax-data-table\n  [fetchDataMode]=\"'manual'\"\n  [dataSource]=\"tasksDataSource()\"\n  (onRowClick)=\"handleRowClick($event)\"\n  [loading]=\"{ enabled: true, animation: true }\"\n>\n  <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n  <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n  <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n  <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n  <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"statusTitle\" caption=\"status\" [width]=\"'125px'\"></ax-text-column>\n  <ax-command-column\n    fixed=\"end\"\n    [width]=\"'60px'\"\n    (onItemClick)=\"onActionClickHandler($event)\"\n    [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n  ></ax-command-column>\n</ax-data-table>\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: AXMTaskBoardGridViewComponent, isStandalone: true, selector: "axm-task-board-grid-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onActionClick: "onActionClick" }, ngImport: i0, template: "<ax-data-table\n  [fetchDataMode]=\"'manual'\"\n  [dataSource]=\"tasksDataSource()\"\n  (onRowClick)=\"handleRowClick($event)\"\n  [loading]=\"{ enabled: true, animation: true }\"\n>\n  <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n  <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n  <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n  <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n  <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"statusTitle\" caption=\"status\" [width]=\"'125px'\"></ax-text-column>\n  <ax-command-column\n    fixed=\"end\"\n    [width]=\"'60px'\"\n    (onItemClick)=\"onActionClickHandler($event)\"\n    [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n  ></ax-command-column>\n</ax-data-table>\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardGridViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardGridViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-task-board-grid-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDataTableModule], template: "<ax-data-table\n  [fetchDataMode]=\"'manual'\"\n  [dataSource]=\"tasksDataSource()\"\n  (onRowClick)=\"handleRowClick($event)\"\n  [loading]=\"{ enabled: true, animation: true }\"\n>\n  <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n  <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n  <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n  <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n  <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"statusTitle\" caption=\"status\" [width]=\"'125px'\"></ax-text-column>\n  <ax-command-column\n    fixed=\"end\"\n    [width]=\"'60px'\"\n    (onItemClick)=\"onActionClickHandler($event)\"\n    [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n  ></ax-command-column>\n</ax-data-table>\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
         }] });
@@ -390,14 +390,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 class AXMTaskBoardKanbanViewComponent {
     constructor() {
         this.taskBoardService = inject(AXPTaskBoardService);
-        this.kanbanComponent = viewChild(AXKanbanComponent);
-        this.tasks = model.required();
-        this.statuses = input.required();
+        this.kanbanComponent = viewChild(AXKanbanComponent, ...(ngDevMode ? [{ debugName: "kanbanComponent" }] : []));
+        this.tasks = model.required(...(ngDevMode ? [{ debugName: "tasks" }] : []));
+        this.statuses = input.required(...(ngDevMode ? [{ debugName: "statuses" }] : []));
         this.onTaskClick = output();
         this.onTaskChanged = output();
         this.component = output();
         this.onActionClick = output();
-        this.stableTasks = computed(() => this.tasks(), { equal: isEqual });
+        this.stableTasks = computed(() => this.tasks(), ...(ngDevMode ? [{ debugName: "stableTasks", equal: isEqual }] : [{ equal: isEqual }]));
         this.kanbanTasks = computed(() => {
             return this.stableTasks().map((task) => ({
                 id: task.id,
@@ -408,7 +408,7 @@ class AXMTaskBoardKanbanViewComponent {
                 statusKey: task.statusKey,
                 description: task.description,
             }));
-        });
+        }, ...(ngDevMode ? [{ debugName: "kanbanTasks" }] : []));
     }
     ngAfterViewInit() {
         if (this.kanbanComponent()) {
@@ -439,10 +439,10 @@ class AXMTaskBoardKanbanViewComponent {
             this.onActionClick.emit({ nativeEvent: event.nativeEvent, task: task });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardKanbanViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.7", type: AXMTaskBoardKanbanViewComponent, isStandalone: true, selector: "axm-task-board-kanban-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tasks: "tasksChange", onTaskClick: "onTaskClick", onTaskChanged: "onTaskChanged", component: "component", onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "kanbanComponent", first: true, predicate: AXKanbanComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-kanban\n  [hasActions]=\"true\"\n  [statuses]=\"statuses()\"\n  [dataSource]=\"kanbanTasks()\"\n  (onItemClick)=\"handleItemClick($event)\"\n  (onSortChanged)=\"onSortChanged($event)\"\n  (onActionClick)=\"handleActionClick($event)\"\n></ax-kanban>\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "component", type: AXKanbanComponent, selector: "ax-kanban", inputs: ["hasActions", "dragStartDelay", "statuses", "itemTemplate", "dataSource", "keyField", "indexField", "titleField", "cssClassField", "priorityField", "statusKeyField", "descriptionField", "emptyTemplate", "headerTemplate", "footerTemplate", "contentFooterTemplate", "tooltipTemplate"], outputs: ["onSortChanged", "onItemClick", "onActionClick", "onItemDblClick", "onItemRightClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardKanbanViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: AXMTaskBoardKanbanViewComponent, isStandalone: true, selector: "axm-task-board-kanban-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tasks: "tasksChange", onTaskClick: "onTaskClick", onTaskChanged: "onTaskChanged", component: "component", onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "kanbanComponent", first: true, predicate: AXKanbanComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-kanban\n  [hasActions]=\"true\"\n  [statuses]=\"statuses()\"\n  [dataSource]=\"kanbanTasks()\"\n  (onItemClick)=\"handleItemClick($event)\"\n  (onSortChanged)=\"onSortChanged($event)\"\n  (onActionClick)=\"handleActionClick($event)\"\n></ax-kanban>\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "component", type: AXKanbanComponent, selector: "ax-kanban", inputs: ["hasActions", "dragStartDelay", "statuses", "itemTemplate", "dataSource", "keyField", "indexField", "titleField", "cssClassField", "priorityField", "statusKeyField", "descriptionField", "emptyTemplate", "headerTemplate", "footerTemplate", "contentFooterTemplate", "tooltipTemplate"], outputs: ["onSortChanged", "onItemClick", "onActionClick", "onItemDblClick", "onItemRightClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardKanbanViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardKanbanViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-task-board-kanban-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXKanbanComponent], template: "<ax-kanban\n  [hasActions]=\"true\"\n  [statuses]=\"statuses()\"\n  [dataSource]=\"kanbanTasks()\"\n  (onItemClick)=\"handleItemClick($event)\"\n  (onSortChanged)=\"onSortChanged($event)\"\n  (onActionClick)=\"handleActionClick($event)\"\n></ax-kanban>\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
         }] });
@@ -452,12 +452,12 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
         this.localeService = inject(AXLocaleService);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
-        this.tasks = input.required();
-        this.statuses = input.required();
+        this.tasks = input.required(...(ngDevMode ? [{ debugName: "tasks" }] : []));
+        this.statuses = input.required(...(ngDevMode ? [{ debugName: "statuses" }] : []));
         this.onTaskChanged = output();
         this.onActionClick = output();
-        this.groupedTasks = signal([]);
-        this.stableTasks = computed(() => this.tasks(), { equal: isEqual });
+        this.groupedTasks = signal([], ...(ngDevMode ? [{ debugName: "groupedTasks" }] : []));
+        this.stableTasks = computed(() => this.tasks(), ...(ngDevMode ? [{ debugName: "stableTasks", equal: isEqual }] : [{ equal: isEqual }]));
         this.#tasksChanged = effect(() => {
             const allTasks = this.stableTasks();
             const allStatuses = this.statuses();
@@ -475,7 +475,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
                     group.tasks.refresh();
                 });
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#tasksChanged" }] : []));
     }
     #tasksChanged;
     createTaskDataSource(tasks) {
@@ -512,10 +512,10 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
             return;
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMTaskBoardStatusGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-status-grouped-grid-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskChanged: "onTaskChanged", onActionClick: "onActionClick" }, ngImport: i0, template: "@for (group of groupedTasks(); track group) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    class=\"ax-h-[291px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n    <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n    <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMTaskBoardStatusGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-status-grouped-grid-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskChanged: "onTaskChanged", onActionClick: "onActionClick" }, ngImport: i0, template: "@for (group of groupedTasks(); track group) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    class=\"ax-h-[291px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n    <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n    <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-task-board-status-grouped-grid-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDataTableModule], template: "@for (group of groupedTasks(); track group) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    class=\"ax-h-[291px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n    <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n    <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
         }] });
@@ -525,13 +525,13 @@ class AXMTaskBoardTimeGroupedGridViewComponent {
         this.localeService = inject(AXLocaleService);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
-        this.tables = viewChildren(AXDataTableComponent);
-        this.tasks = input.required();
-        this.statuses = input.required();
+        this.tables = viewChildren(AXDataTableComponent, ...(ngDevMode ? [{ debugName: "tables" }] : []));
+        this.tasks = input.required(...(ngDevMode ? [{ debugName: "tasks" }] : []));
+        this.statuses = input.required(...(ngDevMode ? [{ debugName: "statuses" }] : []));
         this.onTaskChanged = output();
         this.onActionClick = output();
-        this.groupedTasks = signal([]);
-        this.stableTasks = computed(() => this.tasks(), { equal: isEqual });
+        this.groupedTasks = signal([], ...(ngDevMode ? [{ debugName: "groupedTasks" }] : []));
+        this.stableTasks = computed(() => this.tasks(), ...(ngDevMode ? [{ debugName: "stableTasks", equal: isEqual }] : [{ equal: isEqual }]));
         this.#tasksChanged = effect(() => {
             const allTasks = this.stableTasks();
             const allStatuses = this.statuses();
@@ -549,7 +549,7 @@ class AXMTaskBoardTimeGroupedGridViewComponent {
                     group.tasks.refresh();
                 });
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "#tasksChanged" }] : []));
     }
     #tasksChanged;
     createTaskDataSource(tasks) {
@@ -586,10 +586,10 @@ class AXMTaskBoardTimeGroupedGridViewComponent {
             return;
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardTimeGroupedGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMTaskBoardTimeGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-time-grouped-grid-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskChanged: "onTaskChanged", onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "tables", predicate: AXDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (group of groupedTasks(); track group) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    class=\"ax-h-[291px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n    <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n    <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardTimeGroupedGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMTaskBoardTimeGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-time-grouped-grid-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskChanged: "onTaskChanged", onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "tables", predicate: AXDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (group of groupedTasks(); track group) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    class=\"ax-h-[291px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n    <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n    <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardTimeGroupedGridViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardTimeGroupedGridViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-task-board-time-grouped-grid-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDataTableModule], template: "@for (group of groupedTasks(); track group) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    class=\"ax-h-[291px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column dataField=\"title\" caption=\"title\" [width]=\"'350px'\"></ax-text-column>\n    <ax-text-column dataField=\"description\" caption=\"description\" [width]=\"'100%'\"></ax-text-column>\n    <ax-text-column dataField=\"startDate\" caption=\"Start Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"endDate\" caption=\"Due Date\" [width]=\"'150px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[{ name: 'view', text: 'View', icon: 'ax-icon ax-icon-more-horizontal' }]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
         }] });
@@ -605,26 +605,35 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.localeService = inject(AXLocaleService);
         this.calendarService = inject(AXCalendarService);
         this.taskBoardService = inject(AXPTaskBoardService);
-        this.popover = viewChild('popover');
-        this.calendar = viewChild('calendar');
-        this.currentTask = signal(null);
-        this.currentViewMode = signal('calendar');
-        this.schedulerComponent = signal(null);
-        this.viewsItems = signal([
-            { 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' },
+        this.popover = viewChild('popover', ...(ngDevMode ? [{ debugName: "popover" }] : []));
+        this.calendar = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendar" }] : []));
+        this.currentTask = signal(null, ...(ngDevMode ? [{ debugName: "currentTask" }] : []));
+        this.currentViewMode = signal('calendar', ...(ngDevMode ? [{ debugName: "currentViewMode" }] : []));
+        this.schedulerComponent = signal(null, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : []));
+        this.menuItems = signal([
+            {
+                key: 'calendar',
+                text: 'calendar',
+                icon: 'fa-light fa-calendar-day',
+                children: [
+                    { key: 'day', text: 'daily', icon: 'fa-light fa-calendar-day' },
+                    { key: 'week', text: 'weekly', icon: 'fa-light fa-calendar-week' },
+                    { key: 'month', text: 'monthly', icon: 'fa-light fa-calendar-alt' },
+                    { key: 'agenda', text: 'agenda', icon: 'fa-light fa-calendar-range' },
+                ],
+            },
+            {
+                key: 'table',
+                text: 'table',
+                icon: 'fa-light fa-table',
+                children: [
+                    { key: 'grid', text: 'grid', icon: 'fa-light fa-table' },
+                    { key: 'status-grouped-grid', text: 'status-grouped-grid', icon: 'fa-light fa-table' },
+                ],
+            },
             { key: 'kanban', text: 'kanban', icon: 'fa-light fa-chart-kanban' },
-        ]);
-        this.calendarType = computed(() => this.localeService.activeProfile().calendar.system);
+        ], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+        this.calendarType = computed(() => this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendarType" }] : []));
         this.todayButtonText = computed(() => {
             switch (this.vm.currentViewMode()) {
                 case 'day':
@@ -642,7 +651,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 case 'timeline-month':
                     return 'Current month';
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "todayButtonText" }] : []));
         this.timeText = computed(() => {
             if (this.vm.currentViewMode() === 'grid' ||
                 this.vm.currentViewMode() === 'kanban' ||
@@ -655,7 +664,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 return `${startText} - ${endText}`;
             }
             return this.schedulerComponent()?.currentDateText();
-        });
+        }, ...(ngDevMode ? [{ debugName: "timeText" }] : []));
         this.calendarDepth = computed(() => {
             if (this.vm.currentViewMode() === 'grid' ||
                 this.vm.currentViewMode() === 'kanban' ||
@@ -664,10 +673,27 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 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()));
+        }, ...(ngDevMode ? [{ debugName: "calendarDepth" }] : []));
+        this.selectedViewMode = computed(() => {
+            const currentMode = this.vm.currentViewMode();
+            for (const category of this.menuItems()) {
+                // Check if it's a top-level item like 'kanban'
+                if (category.key === currentMode) {
+                    return { key: category.key, text: category.text, icon: category.icon };
+                }
+                // Check if it's in the children
+                if (category.children) {
+                    const foundChild = category.children.find((child) => child.key === currentMode);
+                    if (foundChild) {
+                        return foundChild;
+                    }
+                }
+            }
+            const firstCategory = this.menuItems()[0];
+            return firstCategory.children
+                ? firstCategory.children[0]
+                : { key: firstCategory.key, text: firstCategory.text, icon: firstCategory.icon };
+        }, ...(ngDevMode ? [{ debugName: "selectedViewMode" }] : []));
         this.filter = computed(() => {
             const taskTypeProvider = this.vm.selectedTaskType();
             const types = taskTypeProvider ? [taskTypeProvider.name] : undefined;
@@ -689,12 +715,12 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 ...(types && { types }),
                 range: { from: from.date, end: end.date },
             };
-        });
-        this.resolvedTasks = signal([]);
+        }, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+        this.resolvedTasks = signal([], ...(ngDevMode ? [{ debugName: "resolvedTasks" }] : []));
         this.eff = effect(async () => {
             this.resolvedTasks.set(await this.dataSource(this.filter()));
-        });
-        this.contextMenu = viewChild('rootContextMenu');
+        }, ...(ngDevMode ? [{ debugName: "eff" }] : []));
+        this.contextMenu = viewChild('rootContextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
         this.dataSource = (filter) => {
             const taskTypeProvider = this.vm.selectedTaskType();
             const types = taskTypeProvider ? [taskTypeProvider.name] : undefined;
@@ -702,7 +728,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         };
         this.statuses = computed(() => {
             return this.vm.selectedTaskType()?.statuses || [];
-        });
+        }, ...(ngDevMode ? [{ debugName: "statuses" }] : []));
         this.rangeBasedViews = [
             'kanban',
             'agenda',
@@ -795,33 +821,11 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.vm.setCurrentDate(date);
         this.vm.setViewMode('day');
     }
-    handleCalendarViewChange(view) {
+    handleViewChange(view, dropdownPanel) {
         this.router.navigate([], { queryParams: { view } });
         this.vm.setViewMode(view);
-        const schedulerComponent = this.schedulerComponent();
-        if (schedulerComponent) {
-            setTimeout(() => {
-                this.vm.setCurrentDate(schedulerComponent.currentDate().date);
-                this.popover()?.close();
-                this.calendar()?.render();
-            });
-        }
-    }
-    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 } });
+        this.popover()?.close();
+        dropdownPanel.close();
     }
     handleSelectedTaskTypeChange(taskType) {
         this.vm.setSelectedTaskTypeProvider(taskType);
@@ -914,51 +918,37 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
     }
     async loadFromRoute() {
         const snapshot = this.activatedRoute.snapshot;
-        const views = [
-            'day',
-            'week',
-            'grid',
-            'month',
-            'agenda',
-            'kanban',
-            'timeline-day',
-            'timeline-month',
-            'time-grouped-grid',
-            'timeline-multi-day',
-            'status-grouped-grid',
-        ];
         const view = snapshot.queryParamMap.get('view') ?? null;
-        if (view && views.includes(view)) {
+        const allValidViews = this.menuItems().flatMap((c) => (c.children ? c.children.map((child) => child.key) : c.key));
+        if (view && allValidViews.includes(view)) {
             this.vm.setViewMode(view);
-            if (view === 'kanban') {
-                this.vm.setCategory('kanban');
-                return;
-            }
-            const category = this.viewsItems().find((item) => item.key === view)?.category;
+            const category = this.menuItems().find((c) => c.key === view || c.children?.some((child) => child.key === view));
             if (category) {
-                this.vm.setCategory(category);
+                this.vm.setCategory(category.key);
             }
         }
         else if (!this.vm.currentViewMode()) {
+            // Set a default view if none is provided or valid
             this.vm.setViewMode('day');
+            this.vm.setCategory('calendar');
         }
     }
     setActiveTask(task) {
         this.vm.selectTask(task);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMTaskBoardPage, isStandalone: true, selector: "ng-component", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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\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: 
+        ], 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: 'workflow-management' }) | 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: 'workflow-management' }) | 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: 'workflow-management' }) | 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: 'workflow-management' }) | 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    <axp-layout-suffix>\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      @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: "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: 
+                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: "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"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.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: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { 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: ["startingDate", "selectedView", "dataSource"], outputs: ["onTaskClick", "onTaskChanged", "onMonthSlotDblClicked", "onActionClick", "component", "onTaskRightClick", "onRangeChanged"] }, { kind: "component", type: AXMTaskBoardKanbanViewComponent, selector: "axm-task-board-kanban-view", inputs: ["tasks", "statuses"], outputs: ["tasksChange", "onTaskClick", "onTaskChanged", "component", "onActionClick"] }, { kind: "component", type: AXMTaskBoardGridViewComponent, selector: "axm-task-board-grid-view", inputs: ["tasks", "statuses"], outputs: ["onTaskClick", "onActionClick"] }, { kind: "component", type: AXMTaskBoardTimeGroupedGridViewComponent, selector: "axm-task-board-time-grouped-grid-view", inputs: ["tasks", "statuses"], outputs: ["onTaskChanged", "onActionClick"] }, { kind: "component", type: AXMTaskBoardStatusGroupedGridViewComponent, selector: "axm-task-board-status-grouped-grid-view", inputs: ["tasks", "statuses"], outputs: ["onTaskChanged", "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", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], 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: ["startingDate", "selectedView", "dataSource"], outputs: ["onTaskClick", "onTaskChanged", "onMonthSlotDblClicked", "onActionClick", "component", "onTaskRightClick", "onRangeChanged"] }, { kind: "component", type: AXMTaskBoardKanbanViewComponent, selector: "axm-task-board-kanban-view", inputs: ["tasks", "statuses"], outputs: ["tasksChange", "onTaskClick", "onTaskChanged", "component", "onActionClick"] }, { kind: "component", type: AXMTaskBoardGridViewComponent, selector: "axm-task-board-grid-view", inputs: ["tasks", "statuses"], outputs: ["onTaskClick", "onActionClick"] }, { kind: "component", type: AXMTaskBoardTimeGroupedGridViewComponent, selector: "axm-task-board-time-grouped-grid-view", inputs: ["tasks", "statuses"], outputs: ["onTaskChanged", "onActionClick"] }, { kind: "component", type: AXMTaskBoardStatusGroupedGridViewComponent, selector: "axm-task-board-status-grouped-grid-view", inputs: ["tasks", "statuses"], outputs: ["onTaskChanged", "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: i6.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", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMTaskBoardPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMTaskBoardPage, decorators: [{
             type: Component,
             args: [{ imports: [
                         FormsModule,
@@ -990,8 +980,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 [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"] }]
+                    ], 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: 'workflow-management' }) | 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: 'workflow-management' }) | 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: 'workflow-management' }) | 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: 'workflow-management' }) | 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    <axp-layout-suffix>\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      @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-zaSchG-u.mjs.map
+//# sourceMappingURL=acorex-modules-workflow-management-task-board.page-BoG_tFGn.mjs.map