@acorex/modules 20.2.4-next.3 → 20.2.4-next.5

package/fesm2022/{acorex-modules-task-management-task-board.page-DsaCXemI.mjs → acorex-modules-task-management-task-board.page-zbl3g-sI.mjs}

@@ -22,7 +22,7 @@ import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase }
 import * as i1$1 from '@angular/common';
 import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, inject, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, output, viewChild, input, model, untracked } from '@angular/core';
+import { computed, inject, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, viewChild, model, untracked } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
@@ -46,12 +46,11 @@ import { AXKanbanComponent } from '@acorex/components/kanban';
 var AXMTaskBoardSettings;
 (function (AXMTaskBoardSettings) {
     AXMTaskBoardSettings["ViewMode"] = "taskboard.viewMode";
-    AXMTaskBoardSettings["ViewCategory"] = "taskboard.viewCategory";
     AXMTaskBoardSettings["DaysCount"] = "taskboard.calendar.daysCount";
     AXMTaskBoardSettings["CurrentDate"] = "taskboard.calendar.currentDate";
-    AXMTaskBoardSettings["SelectedTaskTypeNames"] = "taskboard.filter.selectedTaskTypeNames";
-    AXMTaskBoardSettings["SelectedAssigneeIds"] = "taskboard.filter.selectedAssigneeIds";
     AXMTaskBoardSettings["SelectedPriorities"] = "taskboard.filter.selectedPriorities";
+    AXMTaskBoardSettings["SelectedAssigneeIds"] = "taskboard.filter.selectedAssigneeIds";
+    AXMTaskBoardSettings["SelectedTaskTypeNames"] = "taskboard.filter.selectedTaskTypeNames";
 })(AXMTaskBoardSettings || (AXMTaskBoardSettings = {}));
 
 const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() => ({
@@ -64,7 +63,6 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
     currentDate: new Date(),
     currentViewMode: 'month',
     selectedTaskTypeNames: [],
-    currentViewCategory: 'calendar',
     selectedAssigneeIds: [],
     selectedPriorities: [],
 })), withComputed((store) => ({
@@ -105,11 +103,10 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
             try {
                 const taskTypes = await taskBoardService.getTaskTypes();
                 patchState(store, { taskTypes });
-                const [savedDaysCount, savedDateString, savedViewMode, savedViewCategory, savedTaskTypeNames, savedAssigneeIds, savedPriorities,] = await Promise.all([
+                const [savedDaysCount, savedDateString, savedViewMode, savedTaskTypeNames, savedAssigneeIds, savedPriorities,] = await Promise.all([
                     userScopedSettings().get(AXMTaskBoardSettings.DaysCount),
                     userScopedSettings().get(AXMTaskBoardSettings.CurrentDate),
                     userScopedSettings().get(AXMTaskBoardSettings.ViewMode),
-                    userScopedSettings().get(AXMTaskBoardSettings.ViewCategory),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedTaskTypeNames),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedAssigneeIds),
                     userScopedSettings().get(AXMTaskBoardSettings.SelectedPriorities),
@@ -117,7 +114,6 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 patchState(store, {
                     daysCount: savedDaysCount || 7,
                     currentViewMode: savedViewMode || 'month',
-                    currentViewCategory: savedViewCategory || 'calendar',
                     currentDate: savedDateString ? new Date(savedDateString) : new Date(),
                     selectedTaskTypeNames: savedTaskTypeNames || [],
                     selectedAssigneeIds: savedAssigneeIds || [],
@@ -138,26 +134,6 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 });
             }
         },
-        setViewCategory(mode) {
-            switch (mode) {
-                case 'calendar':
-                    this.setViewMode('month');
-                    break;
-                case 'table':
-                    this.setViewMode('grid');
-                    break;
-                case 'kanban':
-                    this.setViewMode('kanban');
-                    break;
-            }
-            this.setCategory(mode);
-        },
-        setCategory(mode) {
-            patchState(store, { currentViewCategory: mode });
-            userScopedSettings()
-                .set(AXMTaskBoardSettings.ViewCategory, mode)
-                .catch((error) => console.error('Error saving calendar view category:', error));
-        },
         setViewMode(mode) {
             if ((mode === 'kanban' || mode === 'status-grouped-grid') && store.selectedTaskTypeNames().length === 0) {
                 const firstTaskType = store.taskTypes()[0];
@@ -179,20 +155,26 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 .set(AXMTaskBoardSettings.CurrentDate, date.toISOString())
                 .catch((error) => console.error('Error saving current date:', error));
         },
-        setSelectedTaskTypeNames(taskTypeNames) {
+        setSelectedTaskTypeNames(taskTypeNames, isQueryParam = false) {
             patchState(store, { selectedTaskTypeNames: taskTypeNames });
+            if (isQueryParam)
+                return;
             userScopedSettings()
                 .set(AXMTaskBoardSettings.SelectedTaskTypeNames, taskTypeNames)
                 .catch((error) => console.error('Error saving selected task type filter:', error));
         },
-        setSelectedAssigneeIds(assigneeIds) {
+        setSelectedAssigneeIds(assigneeIds, isQueryParam = false) {
             patchState(store, { selectedAssigneeIds: assigneeIds });
+            if (isQueryParam)
+                return;
             userScopedSettings()
                 .set(AXMTaskBoardSettings.SelectedAssigneeIds, assigneeIds)
                 .catch((error) => console.error('Error saving selected assignee filter:', error));
         },
-        setSelectedPriorities(priorities) {
+        setSelectedPriorities(priorities, isQueryParam = false) {
             patchState(store, { selectedPriorities: priorities });
+            if (isQueryParam)
+                return;
             userScopedSettings()
                 .set(AXMTaskBoardSettings.SelectedPriorities, priorities)
                 .catch((error) => console.error('Error saving selected priority filter:', error));
@@ -293,6 +275,7 @@ class AXMTaskBoardFiltersComponent {
     constructor() {
         this.rootConfig = RootConfig;
         this.vm = inject(AXMTaskBoardViewModel);
+        this.isQueryParam = input(false, ...(ngDevMode ? [{ debugName: "isQueryParam" }] : []));
         this.applyClicked = output();
         this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
         this.isInitialized = false;
@@ -323,10 +306,10 @@ class AXMTaskBoardFiltersComponent {
                 options: {
                     valueField: 'name',
                     textField: 'title',
-                    dataSource: this.vm.taskTypes().map((t) => ({ name: t.name, title: t.title })),
+                    dataSource: 'task-types',
+                    placeholder: 'Select Task Type',
                     multiple: this.isMultiSelectEnabled(),
                     allowClear: this.isMultiSelectEnabled(),
-                    placeholder: 'Select Task Type',
                 },
                 meta: {
                     title: 'task-board.filter.task-type',
@@ -337,11 +320,11 @@ class AXMTaskBoardFiltersComponent {
                 path: 'options.assignee',
                 type: AXPWidgetsCatalog.select,
                 options: {
+                    multiple: true,
                     valueField: 'id',
-                    textField: 'displayName',
-                    dataSource: 'users',
                     allowSearch: true,
-                    multiple: true,
+                    dataSource: 'users',
+                    textField: 'displayName',
                     placeholder: 'Select Assignee',
                 },
                 meta: {
@@ -353,12 +336,12 @@ class AXMTaskBoardFiltersComponent {
                 path: 'options.priority',
                 type: AXPWidgetsCatalog.select,
                 options: {
+                    multiple: true,
                     valueField: 'name',
                     textField: 'title',
-                    dataSource: this.VALID_PRIORITIES,
                     direction: 'horizontal',
-                    multiple: true,
                     placeholder: 'Select Priority',
+                    dataSource: this.VALID_PRIORITIES,
                 },
                 meta: {
                     title: 'task-board.filter.priority',
@@ -379,9 +362,9 @@ class AXMTaskBoardFiltersComponent {
                 : null;
         this.context.set({
             options: {
-                taskType: taskTypeContextValue,
-                assignee: vmAssigneeIds,
                 priority: vmPriorities,
+                assignee: vmAssigneeIds,
+                taskType: taskTypeContextValue,
             },
         });
     }
@@ -404,7 +387,7 @@ class AXMTaskBoardFiltersComponent {
         }
         const currentNames = this.vm.selectedTaskTypeNames();
         if (!isEqual(sortBy(currentNames), sortBy(newNames))) {
-            this.vm.setSelectedTaskTypeNames(newNames);
+            this.vm.setSelectedTaskTypeNames(newNames, this.isQueryParam());
         }
     }
     syncAssigneesToViewModel(selectedAssignees) {
@@ -416,7 +399,7 @@ class AXMTaskBoardFiltersComponent {
         }
         const currentIds = this.vm.selectedAssigneeIds();
         if (!isEqual(sortBy(currentIds), sortBy(newIds))) {
-            this.vm.setSelectedAssigneeIds(newIds);
+            this.vm.setSelectedAssigneeIds(newIds, this.isQueryParam());
         }
     }
     syncPrioritiesToViewModel(selectedPriorities) {
@@ -428,7 +411,7 @@ class AXMTaskBoardFiltersComponent {
         }
         const currentNames = this.vm.selectedPriorities();
         if (!isEqual(sortBy(currentNames), sortBy(newNames))) {
-            this.vm.setSelectedPriorities(newNames);
+            this.vm.setSelectedPriorities(newNames, this.isQueryParam());
         }
     }
     handleReset() {
@@ -444,7 +427,7 @@ class AXMTaskBoardFiltersComponent {
         this.context.set({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMTaskBoardFiltersComponent, isStandalone: true, selector: "axm-task-board-filters", outputs: { applyClicked: "applyClicked" }, ngImport: i0, template: "<div class=\"ax-px-4 ax-py-3 ax-flex ax-flex-col ax-gap-2 ax-sm ax-w-[20rem]\">\n  <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <ax-form>\n      <div class=\"ax-flex ax-flex-col ax-gap-4\">\n        @for (node of nodes(); track $index) {\n          <ax-form-field>\n            @if (node.meta?.['title']) {\n              <ax-label>\n                {{ node.meta?.['title'] | translate: { scope: rootConfig.config.i18n } | async }}\n              </ax-label>\n            }\n            <ng-container axp-widget-renderer [node]=\"node\" [mode]=\"'edit'\"></ng-container>\n          </ax-form-field>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-2 ax-mt-6 ax-mb-1\">\n        <ax-button (onClick)=\"handleReset()\" class=\"ax-w-full\" [text]=\"'clear' | translate | async\"></ax-button>\n        <ax-button\n          color=\"primary\"\n          [type]=\"'submit'\"\n          (onClick)=\"handleApply()\"\n          class=\"ax-w-full\"\n          [text]=\"'apply' | translate | async\"\n        ></ax-button>\n      </div>\n    </ax-form>\n  </axp-widgets-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMTaskBoardFiltersComponent, isStandalone: true, selector: "axm-task-board-filters", inputs: { isQueryParam: { classPropertyName: "isQueryParam", publicName: "isQueryParam", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applyClicked: "applyClicked" }, ngImport: i0, template: "<div class=\"ax-px-4 ax-py-3 ax-flex ax-flex-col ax-gap-2 ax-sm ax-w-[20rem]\">\n  <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <ax-form>\n      <div class=\"ax-flex ax-flex-col ax-gap-4\">\n        @for (node of nodes(); track $index) {\n          <ax-form-field>\n            @if (node.meta?.['title']) {\n              <ax-label>\n                {{ node.meta?.['title'] | translate: { scope: rootConfig.config.i18n } | async }}\n              </ax-label>\n            }\n            <ng-container axp-widget-renderer [node]=\"node\" [mode]=\"'edit'\"></ng-container>\n          </ax-form-field>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-2 ax-mt-6 ax-mb-1\">\n        <ax-button (onClick)=\"handleReset()\" class=\"ax-w-full\" [text]=\"'clear' | translate | async\"></ax-button>\n        <ax-button\n          color=\"primary\"\n          [type]=\"'submit'\"\n          (onClick)=\"handleApply()\"\n          class=\"ax-w-full\"\n          [text]=\"'apply' | translate | async\"\n        ></ax-button>\n      </div>\n    </ax-form>\n  </axp-widgets-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "component", type: AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardFiltersComponent, decorators: [{
             type: Component,
@@ -813,6 +796,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.taskBoardService = inject(AXPTaskBoardService);
         this.popover = viewChild('popover', ...(ngDevMode ? [{ debugName: "popover" }] : []));
         this.calendar = viewChild('calendar', ...(ngDevMode ? [{ debugName: "calendar" }] : []));
+        this.isQueryParam = signal(false, ...(ngDevMode ? [{ debugName: "isQueryParam" }] : []));
         this.currentTask = signal(null, ...(ngDevMode ? [{ debugName: "currentTask" }] : []));
         this.currentViewMode = signal('calendar', ...(ngDevMode ? [{ debugName: "currentViewMode" }] : []));
         this.schedulerComponent = signal(null, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : []));
@@ -1161,19 +1145,43 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.calendar()?.render();
     }
     async loadFromRoute() {
-        const snapshot = this.activatedRoute.snapshot;
-        const view = snapshot.queryParamMap.get('view') ?? null;
+        const snapshot = this.activatedRoute.snapshot.queryParamMap;
+        const view = snapshot.get('view') ?? null;
         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);
-            const category = this.menuItems().find((c) => c.key === view || c.children?.some((child) => child.key === view));
-            if (category) {
-                this.vm.setCategory(category.key);
-            }
         }
         else if (!this.vm.currentViewMode()) {
             this.vm.setViewMode('day');
-            this.vm.setCategory('calendar');
+        }
+        const type = snapshot.getAll('type');
+        const assignee = snapshot.getAll('assignee');
+        const priority = snapshot.getAll('priority');
+        if (type.length || assignee.length || priority.length) {
+            this.isQueryParam.set(true);
+            this.vm.setSelectedTaskTypeNames(type, true);
+            this.vm.setSelectedAssigneeIds(assignee, true);
+            this.vm.setSelectedPriorities(priority, true);
+        }
+        const dateRange = snapshot.get('dateRange');
+        if (dateRange) {
+            const range = this.taskBoardService.rangeCalculator(dateRange);
+            if (range) {
+                this.vm.setCurrentDate(range.from);
+                this.vm.setDaysCount(this.calculateDifferenceInDays(range.from, range.end));
+                switch (dateRange) {
+                    case 'today':
+                        this.vm.setViewMode('day');
+                        break;
+                    case 'this-week':
+                        this.vm.setViewMode('week');
+                        this.vm.setRangeStartDate(range.from);
+                        break;
+                    case 'this-month':
+                        this.vm.setViewMode('month');
+                        break;
+                }
+            }
         }
     }
     setActiveTask(task) {
@@ -1202,11 +1210,11 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMTaskBoardPage,
             },
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\n          <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n            @for (category of menuItems(); track category.key) {\n            <ng-container>\n              @if (category.children && category.children.length > 0) {\n              <ax-menu-item>\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n              </ax-menu-item>\n              }\n            </ng-container>\n            }\n          </ax-menu>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover>\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters\n            #filtersComponent\n            (applyClicked)=\"filterDropdownPanel.close()\"\n          ></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onTaskClick)=\"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      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"schedulerDataSource\"\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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\n          <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n            @for (category of menuItems(); track category.key) {\n            <ng-container>\n              @if (category.children && category.children.length > 0) {\n              <ax-menu-item>\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n              </ax-menu-item>\n              }\n            </ng-container>\n            }\n          </ax-menu>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover>\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters\n            #filtersComponent\n            [isQueryParam]=\"isQueryParam()\"\n            (applyClicked)=\"filterDropdownPanel.close()\"\n          ></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onTaskClick)=\"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      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"schedulerDataSource\"\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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
                 //
                 AXMenuModule }, { kind: "component", type: i2.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i2.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "component", type: i2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: 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"], outputs: ["tasksChange", "onTaskClick", "onTaskChanged", "component", "onActionClick"] }, { kind: "component", type: AXMTaskBoardGridViewComponent, selector: "axm-task-board-grid-view", inputs: ["dataSource"], outputs: ["onTaskClick", "onActionClick"] }, { kind: "component", type: AXMTaskBoardStatusGroupedGridViewComponent, selector: "axm-task-board-status-grouped-grid-view", inputs: ["provider", "dataSource"], outputs: ["onActionClick"] }, { kind: "component", type: AXMTaskBoardDetailPanel, selector: "axm-task-board-detail-panel" }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: 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: "component", type: AXMTaskBoardFiltersComponent, selector: "axm-task-board-filters", outputs: ["applyClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXMTaskBoardCalendarViewComponent, selector: "axm-task-board-calendar-view", inputs: ["startingDate", "selectedView", "dataSource"], outputs: ["onTaskClick", "onTaskChanged", "onMonthSlotDblClicked", "onActionClick", "component", "onTaskRightClick", "onRangeChanged"] }, { kind: "component", type: AXMTaskBoardKanbanViewComponent, selector: "axm-task-board-kanban-view", inputs: ["tasks"], outputs: ["tasksChange", "onTaskClick", "onTaskChanged", "component", "onActionClick"] }, { kind: "component", type: AXMTaskBoardGridViewComponent, selector: "axm-task-board-grid-view", inputs: ["dataSource"], outputs: ["onTaskClick", "onActionClick"] }, { kind: "component", type: AXMTaskBoardStatusGroupedGridViewComponent, selector: "axm-task-board-status-grouped-grid-view", inputs: ["provider", "dataSource"], outputs: ["onActionClick"] }, { kind: "component", type: AXMTaskBoardDetailPanel, selector: "axm-task-board-detail-panel" }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: 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: "component", type: AXMTaskBoardFiltersComponent, selector: "axm-task-board-filters", inputs: ["isQueryParam"], outputs: ["applyClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardPage, decorators: [{
             type: Component,
@@ -1240,8 +1248,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", 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 [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\n          <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n            @for (category of menuItems(); track category.key) {\n            <ng-container>\n              @if (category.children && category.children.length > 0) {\n              <ax-menu-item>\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n              </ax-menu-item>\n              }\n            </ng-container>\n            }\n          </ax-menu>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover>\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters\n            #filtersComponent\n            (applyClicked)=\"filterDropdownPanel.close()\"\n          ></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onTaskClick)=\"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      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"schedulerDataSource\"\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: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\n          <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n            @for (category of menuItems(); track category.key) {\n            <ng-container>\n              @if (category.children && category.children.length > 0) {\n              <ax-menu-item>\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n              </ax-menu-item>\n              }\n            </ng-container>\n            }\n          </ax-menu>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover>\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      <ax-button [text]=\"t('task-board.filter.title', { scope: rootConfig.config.i18n }) | async\">\n        <ax-prefix><ax-icon icon=\"fa-{{vm.activeFilterCount()?'solid':'light'}} fa-filter\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #filterDropdownPanel (onOpened)=\"filtersComponent.resetContextToViewModel()\">\n          <axm-task-board-filters\n            #filtersComponent\n            [isQueryParam]=\"isQueryParam()\"\n            (applyClicked)=\"filterDropdownPanel.close()\"\n          ></axm-task-board-filters>\n        </ax-dropdown-panel>\n      </ax-button>\n\n      @if(layoutService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"setActiveTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onTaskClick)=\"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      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"schedulerDataSource\"\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-task-management-task-board.page-DsaCXemI.mjs.map
+//# sourceMappingURL=acorex-modules-task-management-task-board.page-zbl3g-sI.mjs.map