@acorex/modules 20.2.4-next.0 → 20.2.4-next.1

package/fesm2022/{acorex-modules-task-management-task-board.page-DbpqZaC7.mjs → acorex-modules-task-management-task-board.page-BBbHu2jz.mjs}

@@ -19,24 +19,26 @@ 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 i7 from '@angular/common';
+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, viewChild, input, output, model, untracked } from '@angular/core';
-import * as i1$2 from '@angular/forms';
+import { computed, inject, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, output, viewChild, input, 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';
 import { filter, startWith } from 'rxjs';
 import { AXPTaskBoardService, RootConfig } from './acorex-modules-task-management.mjs';
 import { AXFormatPipe } from '@acorex/core/format';
 import * as i1 from '@acorex/platform/layout/builder';
-import { AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { AXPLayoutBuilderModule, AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
 import { AXPSettingService } from '@acorex/platform/common';
 import { AXPPlatformScope } from '@acorex/platform/core';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { AXFormFieldComponent, AXFormComponent } from '@acorex/components/form';
+import { AXLabelComponent } from '@acorex/components/label';
 import { AXSchedulerComponent } from '@acorex/components/scheduler';
 import { AXDataSource } from '@acorex/cdk/common';
-import * as i1$1 from '@acorex/components/data-table';
+import * as i1$2 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
 import { AXKanbanComponent } from '@acorex/components/kanban';
 import { isEqual } from 'lodash-es';
@@ -47,7 +49,9 @@ var AXMTaskBoardSettings;
     AXMTaskBoardSettings["ViewCategory"] = "taskboard.viewCategory";
     AXMTaskBoardSettings["DaysCount"] = "taskboard.calendar.daysCount";
     AXMTaskBoardSettings["CurrentDate"] = "taskboard.calendar.currentDate";
-    AXMTaskBoardSettings["SelectedTaskTypeFilter"] = "taskboard.filter.selectedTaskType";
+    AXMTaskBoardSettings["SelectedTaskTypeNames"] = "taskboard.filter.selectedTaskTypeNames";
+    AXMTaskBoardSettings["SelectedAssigneeIds"] = "taskboard.filter.selectedAssigneeIds";
+    AXMTaskBoardSettings["SelectedPriorities"] = "taskboard.filter.selectedPriorities";
 })(AXMTaskBoardSettings || (AXMTaskBoardSettings = {}));
 
 const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() => ({
@@ -59,17 +63,18 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
     rangeStartDate: null,
     currentDate: new Date(),
     currentViewMode: 'month',
-    selectedTaskTypeName: null,
+    selectedTaskTypeNames: [],
     currentViewCategory: 'calendar',
+    selectedAssigneeIds: [],
+    selectedPriorities: [],
 })), withComputed((store) => ({
-    selectedTaskType: computed(() => {
-        const name = store.selectedTaskTypeName();
-        if (!name) {
-            return null;
+    selectedTaskTypes: computed(() => {
+        const names = store.selectedTaskTypeNames();
+        if (!names || names.length === 0) {
+            return [];
         }
-        return store.taskTypes().find((tt) => tt.name === name) || null;
+        return store.taskTypes().filter((tt) => names.includes(tt.name));
     }),
-    // (Optional but recommended) Add a computed signal to easily check if a task is selected
     isTaskSelected: computed(() => store.selectedTask() !== null),
     isDetailPanelOpen: computed(() => store.detailPanel()),
     endDate: computed(() => {
@@ -77,28 +82,46 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
         const daysCount = store.daysCount();
         return new Date(currentDate.getTime() + daysCount * 24 * 60 * 60 * 1000);
     }),
+    activeFilterCount: computed(() => {
+        let count = 0;
+        if (store.currentViewMode() !== 'kanban' &&
+            store.currentViewMode() !== 'status-grouped-grid' &&
+            store.selectedTaskTypeNames().length > 0) {
+            count++;
+        }
+        if (store.selectedAssigneeIds().length > 0) {
+            count++;
+        }
+        if (store.selectedPriorities().length > 0) {
+            count++;
+        }
+        return count;
+    }),
 })), withMethods((store, settingService = inject(AXPSettingService), taskBoardService = inject(AXPTaskBoardService)) => {
-    // Create a private method for getting the user-scoped settings to avoid repetition
     const userScopedSettings = () => settingService.scope(AXPPlatformScope.User);
     return {
         async initialize() {
             patchState(store, { isLoading: true });
             try {
-                // 1. Load Task Types first
                 const taskTypes = await taskBoardService.getTaskTypes();
                 patchState(store, { taskTypes });
-                // 2. Load Persisted Settings individually
-                const [savedDateString, savedViewMode, savedViewCategory, savedTaskTypeName] = await Promise.all([
+                const [savedDaysCount, savedDateString, savedViewMode, savedViewCategory, 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.SelectedTaskTypeFilter),
+                    userScopedSettings().get(AXMTaskBoardSettings.SelectedTaskTypeNames),
+                    userScopedSettings().get(AXMTaskBoardSettings.SelectedAssigneeIds),
+                    userScopedSettings().get(AXMTaskBoardSettings.SelectedPriorities),
                 ]);
                 patchState(store, {
+                    daysCount: savedDaysCount || 7,
                     currentViewMode: savedViewMode || 'month',
                     currentViewCategory: savedViewCategory || 'calendar',
                     currentDate: savedDateString ? new Date(savedDateString) : new Date(),
-                    selectedTaskTypeName: savedTaskTypeName || null,
+                    selectedTaskTypeNames: savedTaskTypeNames || [],
+                    selectedAssigneeIds: savedAssigneeIds || [],
+                    selectedPriorities: savedPriorities || [],
                     isLoading: false,
                 });
             }
@@ -107,7 +130,9 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 patchState(store, {
                     currentViewMode: 'month',
                     currentDate: new Date(),
-                    selectedTaskTypeName: null,
+                    selectedTaskTypeNames: [],
+                    selectedAssigneeIds: [],
+                    selectedPriorities: [],
                     taskTypes: store.taskTypes(),
                     isLoading: false,
                 });
@@ -134,15 +159,15 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 .catch((error) => console.error('Error saving calendar view category:', error));
         },
         setViewMode(mode) {
-            if ((mode === 'kanban' || mode === 'status-grouped-grid') && store.selectedTaskTypeName() === null) {
-                const taskTypeName = store.taskTypes()[0]?.name;
-                if (taskTypeName) {
-                    patchState(store, { selectedTaskTypeName: taskTypeName });
-                    userScopedSettings()
-                        .set(AXMTaskBoardSettings.SelectedTaskTypeFilter, taskTypeName)
-                        .catch((error) => console.error('Error saving selected task type filter:', error));
+            if ((mode === 'kanban' || mode === 'status-grouped-grid') && store.selectedTaskTypeNames().length === 0) {
+                const firstTaskType = store.taskTypes()[0];
+                if (firstTaskType) {
+                    this.setSelectedTaskTypeNames([firstTaskType.name]);
                 }
             }
+            if ((mode === 'kanban' || mode === 'status-grouped-grid') && store.selectedTaskTypeNames().length > 1) {
+                this.setSelectedTaskTypeNames([store.selectedTaskTypeNames()[0]]);
+            }
             patchState(store, { currentViewMode: mode });
             userScopedSettings()
                 .set(AXMTaskBoardSettings.ViewMode, mode)
@@ -154,13 +179,24 @@ const AXMTaskBoardViewModel = signalStore({ providedIn: 'root' }, withState(() =
                 .set(AXMTaskBoardSettings.CurrentDate, date.toISOString())
                 .catch((error) => console.error('Error saving current date:', error));
         },
-        setSelectedTaskTypeProvider(taskType) {
-            const taskTypeName = taskType ? taskType.name : null;
-            patchState(store, { selectedTaskTypeName: taskTypeName });
+        setSelectedTaskTypeNames(taskTypeNames) {
+            patchState(store, { selectedTaskTypeNames: taskTypeNames });
             userScopedSettings()
-                .set(AXMTaskBoardSettings.SelectedTaskTypeFilter, taskTypeName)
+                .set(AXMTaskBoardSettings.SelectedTaskTypeNames, taskTypeNames)
                 .catch((error) => console.error('Error saving selected task type filter:', error));
         },
+        setSelectedAssigneeIds(assigneeIds) {
+            patchState(store, { selectedAssigneeIds: assigneeIds });
+            userScopedSettings()
+                .set(AXMTaskBoardSettings.SelectedAssigneeIds, assigneeIds)
+                .catch((error) => console.error('Error saving selected assignee filter:', error));
+        },
+        setSelectedPriorities(priorities) {
+            patchState(store, { selectedPriorities: priorities });
+            userScopedSettings()
+                .set(AXMTaskBoardSettings.SelectedPriorities, priorities)
+                .catch((error) => console.error('Error saving selected priority filter:', error));
+        },
         /**
          * Sets the currently selected task. Pass `null` to clear the selection.
          * @param task The task to select, or null.
@@ -239,7 +275,7 @@ class AXMTaskBoardDetailPanel {
         return String(text).charAt(0).toUpperCase() + String(text).slice(1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardDetailPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", 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        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.reporter' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.reporter\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        @if (nodeInfo?.assignee) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.assignee' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.assignee }}</div>\n          </div>\n        }\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        @if (extraFields() && extraFields().length) {\n          <div class=\"__row\">\n            <axp-widgets-container [context]=\"nodeInfo\">\n              @for (extraField of extraFields(); track extraField) {\n                <div class=\"__title\">\n                  <span>\n                    {{ extraField.title | translate: { scope: rootConfig.config.i18n } | async }}\n                  </span>\n                </div>\n                <div class=\"__content\">\n                  <ng-container axp-widget-renderer [node]=\"extraField.widget\" [mode]=\"'view'\"> </ng-container>\n                </div>\n              }\n            </axp-widgets-container>\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: "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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { 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: 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        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.reporter' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{ nodeInfo?.reporter?.fullName }}\n          </div>\n        </div>\n        @if (nodeInfo?.assignee) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.assignee' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.assignee?.fullName }}</div>\n          </div>\n        }\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        @if (extraFields() && extraFields().length) {\n          <div class=\"__row\">\n            <axp-widgets-container [context]=\"nodeInfo\">\n              @for (extraField of extraFields(); track extraField) {\n                <div class=\"__title\">\n                  <span>\n                    {{ extraField.title | translate: { scope: rootConfig.config.i18n } | async }}\n                  </span>\n                </div>\n                <div class=\"__content\">\n                  <ng-container axp-widget-renderer [node]=\"extraField.widget\" [mode]=\"'view'\"> </ng-container>\n                </div>\n              }\n            </axp-widgets-container>\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.title' | 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  <div class=\"__content ax-flex ax-items-center\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <div class=\"__row\">\n          <div class=\"__title\">\n            {{ 'task-board.detail-panel.no-task-selected' | translate: { scope: rootConfig.config.i18n } | async }}\n          </div>\n        </div>\n      </div>\n    </div>\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: "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: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { 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: AXMTaskBoardDetailPanel, decorators: [{
             type: Component,
@@ -250,7 +286,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         AXButtonComponent,
                         AXPLayoutBuilderModule,
                         AXDecoratorIconComponent,
-                    ], 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        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.reporter' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{\n              nodeInfo?.reporter\n                | format: 'datetime' : { format: 'short', calendar: localeService.activeProfile().calendar.system }\n                | async\n            }}\n          </div>\n        </div>\n        @if (nodeInfo?.assignee) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.assignee' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.assignee }}</div>\n          </div>\n        }\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        @if (extraFields() && extraFields().length) {\n          <div class=\"__row\">\n            <axp-widgets-container [context]=\"nodeInfo\">\n              @for (extraField of extraFields(); track extraField) {\n                <div class=\"__title\">\n                  <span>\n                    {{ extraField.title | translate: { scope: rootConfig.config.i18n } | async }}\n                  </span>\n                </div>\n                <div class=\"__content\">\n                  <ng-container axp-widget-renderer [node]=\"extraField.widget\" [mode]=\"'view'\"> </ng-container>\n                </div>\n              }\n            </axp-widgets-container>\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"] }]
+                    ], 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        <div class=\"__row\">\n          <div class=\"__title\">\n            <span>{{ 'task-board.detail-panel.reporter' | translate: { scope: rootConfig.config.i18n } | async }}</span>\n          </div>\n          <div class=\"__content\">\n            {{ nodeInfo?.reporter?.fullName }}\n          </div>\n        </div>\n        @if (nodeInfo?.assignee) {\n          <div class=\"__row\">\n            <div class=\"__title\">\n              <span>{{\n                'task-board.detail-panel.assignee' | translate: { scope: rootConfig.config.i18n } | async\n              }}</span>\n            </div>\n            <div class=\"__content\">{{ nodeInfo?.assignee?.fullName }}</div>\n          </div>\n        }\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        @if (extraFields() && extraFields().length) {\n          <div class=\"__row\">\n            <axp-widgets-container [context]=\"nodeInfo\">\n              @for (extraField of extraFields(); track extraField) {\n                <div class=\"__title\">\n                  <span>\n                    {{ extraField.title | translate: { scope: rootConfig.config.i18n } | async }}\n                  </span>\n                </div>\n                <div class=\"__content\">\n                  <ng-container axp-widget-renderer [node]=\"extraField.widget\" [mode]=\"'view'\"> </ng-container>\n                </div>\n              }\n            </axp-widgets-container>\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.title' | 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  <div class=\"__content ax-flex ax-items-center\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <div class=\"__row\">\n          <div class=\"__title\">\n            {{ 'task-board.detail-panel.no-task-selected' | translate: { scope: rootConfig.config.i18n } | async }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["axm-task-board-detail-panel{display:flex;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1024px){axm-task-board-detail-panel{width:24rem}}axm-task-board-detail-panel>.__header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}@media (min-width: 1024px){axm-task-board-detail-panel>.__header{width:20rem}}axm-task-board-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__header>.__title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axm-task-board-detail-panel>.__content{display:flex;flex-direction:column}axm-task-board-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axm-task-board-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axm-task-board-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axm-task-board-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axm-task-board-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"] }]
+        }] });
+
+class AXMTaskBoardFiltersComponent {
+    constructor() {
+        this.rootConfig = RootConfig;
+        this.vm = inject(AXMTaskBoardViewModel);
+        this.applyClicked = output();
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        this.isInitialized = false;
+        this.#init = effect(() => {
+            const isLoading = this.vm.isLoading();
+            if (!isLoading && !this.isInitialized) {
+                this.resetContextToViewModel();
+                this.isInitialized = true;
+            }
+        }, ...(ngDevMode ? [{ debugName: "#init" }] : []));
+        this.VALID_PRIORITIES = [
+            { title: 'Highest', name: 'highest' },
+            { title: 'High', name: 'high' },
+            { title: 'Medium', name: 'medium' },
+            { title: 'Low', name: 'low' },
+            { title: 'Lowest', name: 'lowest' },
+            { title: 'No Priority', name: 'no_priority' },
+        ];
+        this.isMultiSelectEnabled = computed(() => {
+            const viewMode = this.vm.currentViewMode();
+            return viewMode !== 'kanban' && viewMode !== 'status-grouped-grid';
+        }, ...(ngDevMode ? [{ debugName: "isMultiSelectEnabled" }] : []));
+        this.nodes = computed(() => [
+            {
+                name: 'taskType',
+                path: 'options.taskType',
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    valueField: 'name',
+                    textField: 'title',
+                    dataSource: this.vm.taskTypes().map((t) => ({ name: t.name, title: t.title })),
+                    multiple: this.isMultiSelectEnabled(),
+                    allowClear: this.isMultiSelectEnabled(),
+                    placeholder: 'Select Task Type',
+                },
+                meta: {
+                    title: 'task-board.filter.task-type',
+                },
+            },
+            {
+                name: 'assignee',
+                path: 'options.assignee',
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    valueField: 'id',
+                    textField: 'displayName',
+                    dataSource: 'users',
+                    allowSearch: true,
+                    multiple: true,
+                    placeholder: 'Select Assignee',
+                },
+                meta: {
+                    title: 'task-board.filter.assignee',
+                },
+            },
+            {
+                name: 'priority',
+                path: 'options.priority',
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    valueField: 'name',
+                    textField: 'title',
+                    dataSource: this.VALID_PRIORITIES,
+                    direction: 'horizontal',
+                    multiple: true,
+                    placeholder: 'Select Priority',
+                },
+                meta: {
+                    title: 'task-board.filter.priority',
+                },
+            },
+        ], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    }
+    #init;
+    resetContextToViewModel() {
+        const vmTaskTypeNames = this.vm.selectedTaskTypeNames();
+        const vmAssigneeIds = this.vm.selectedAssigneeIds();
+        const vmPriorities = this.vm.selectedPriorities();
+        const currentViewIsMulti = this.isMultiSelectEnabled();
+        const taskTypeContextValue = currentViewIsMulti
+            ? vmTaskTypeNames
+            : vmTaskTypeNames.length > 0
+                ? vmTaskTypeNames[0]
+                : null;
+        this.context.set({
+            options: {
+                taskType: taskTypeContextValue,
+                assignee: vmAssigneeIds,
+                priority: vmPriorities,
+            },
+        });
+    }
+    handleContextChanged(e) {
+        this.context.set(e.data);
+    }
+    handleApply() {
+        this.syncTaskTypesToViewModel(this.context()?.options?.taskType);
+        this.syncAssigneesToViewModel(this.context()?.options?.assignee);
+        this.syncPrioritiesToViewModel(this.context()?.options?.priority);
+        this.applyClicked.emit();
+    }
+    syncTaskTypesToViewModel(selectedValue) {
+        let newNames = [];
+        if (Array.isArray(selectedValue)) {
+            newNames = selectedValue.filter((v) => v != null).map((t) => (typeof t === 'string' ? t : t.name));
+        }
+        else if (selectedValue) {
+            newNames = [typeof selectedValue === 'string' ? selectedValue : selectedValue.name];
+        }
+        const currentNames = this.vm.selectedTaskTypeNames();
+        if (JSON.stringify(currentNames) !== JSON.stringify(newNames)) {
+            this.vm.setSelectedTaskTypeNames(newNames);
+        }
+    }
+    syncAssigneesToViewModel(selectedAssignees) {
+        let newIds = [];
+        if (Array.isArray(selectedAssignees)) {
+            newIds = selectedAssignees
+                .filter((v) => v != null)
+                .map((t) => (typeof t === 'string' || typeof t === 'number' ? t : t.id));
+        }
+        const currentIds = this.vm.selectedAssigneeIds();
+        if (JSON.stringify(currentIds) !== JSON.stringify(newIds)) {
+            this.vm.setSelectedAssigneeIds(newIds);
+        }
+    }
+    syncPrioritiesToViewModel(selectedPriorities) {
+        let newNames = [];
+        if (Array.isArray(selectedPriorities)) {
+            newNames = selectedPriorities
+                .filter((v) => v != null)
+                .map((t) => (typeof t === 'string' ? t : t.name));
+        }
+        const currentNames = this.vm.selectedPriorities();
+        if (JSON.stringify(currentNames) !== JSON.stringify(newNames)) {
+            this.vm.setSelectedPriorities(newNames);
+        }
+    }
+    handleReset() {
+        if (this.vm.currentViewMode() === 'kanban' || this.vm.currentViewMode() === 'status-grouped-grid') {
+            const currentOptions = this.context();
+            this.context.set({
+                options: {
+                    taskType: currentOptions?.options?.taskType,
+                },
+            });
+            return;
+        }
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-task-board-filters', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        AXFormFieldComponent,
+                        AXPLayoutBuilderModule,
+                        AXFormComponent,
+                        AXLabelComponent,
+                        AXButtonComponent,
+                        AXTranslatorPipe,
+                        AsyncPipe,
+                    ], template: "<div class=\"ax-px-4 ax-py-3 ax-flex ax-flex-col ax-gap-2 ax-sm ax-w-[20rem]\">\n  <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChanged($event)\">\n    <ax-form>\n      <div class=\"ax-flex ax-flex-col ax-gap-4\">\n        @for (node of nodes(); track $index) {\n          <ax-form-field>\n            @if (node.meta?.['title']) {\n              <ax-label>\n                {{ node.meta?.['title'] | translate: { scope: rootConfig.config.i18n } | async }}\n              </ax-label>\n            }\n            <ng-container axp-widget-renderer [node]=\"node\" [mode]=\"'edit'\"></ng-container>\n          </ax-form-field>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-2 ax-mt-6 ax-mb-1\">\n        <ax-button (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" }]
         }] });
 
 class AXMTaskBoardCalendarViewComponent {
@@ -386,12 +593,12 @@ class AXMTaskBoardGridViewComponent {
             this.tasksDataSource().refresh();
         }, ...(ngDevMode ? [{ debugName: "#dataSourceChanged" }] : []));
         this.#providerChanged = effect(async () => {
-            const provider = this.vm.selectedTaskType();
-            if (!provider) {
+            const taskType = this.vm.selectedTaskTypes()[0];
+            if (!taskType) {
                 this.columns.set([]);
                 return;
             }
-            provider.getExtraFields().then((extraFields) => {
+            taskType.getExtraFields().then((extraFields) => {
                 if (extraFields) {
                     this.columns.set(extraFields);
                 }
@@ -412,7 +619,7 @@ class AXMTaskBoardGridViewComponent {
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMTaskBoardGridViewComponent, isStandalone: true, selector: "axm-task-board-grid-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onActionClick: "onActionClick" }, 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]=\"'500px'\"></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=\"reporter\" caption=\"Reporter\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"assignee\" caption=\"Assignee\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"statusTitle\" caption=\"status\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"type\" caption=\"type\" [width]=\"'150px'\"></ax-text-column>\n\n  @if (columns().length) {\n    <ng-container>\n      @for (column of columns(); track column) {\n        <axp-widget-column-renderer\n          [node]=\"column.widget\"\n          [caption]=\"(column.title | translate | async)!\"\n        ></axp-widget-column-renderer>\n      }\n    </ng-container>\n  }\n\n  <ax-command-column\n    fixed=\"end\"\n    [width]=\"'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$1.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$1.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$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMTaskBoardGridViewComponent, isStandalone: true, selector: "axm-task-board-grid-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onTaskClick: "onTaskClick", onActionClick: "onActionClick" }, 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]=\"'500px'\"></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=\"reporter\" caption=\"Reporter\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"assignee\" caption=\"Assignee\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"statusTitle\" caption=\"status\" [width]=\"'125px'\"></ax-text-column>\n  <ax-text-column dataField=\"type\" caption=\"type\" [width]=\"'150px'\"></ax-text-column>\n\n  @if (columns().length) {\n    <ng-container>\n      @for (column of columns(); track column) {\n        <axp-widget-column-renderer\n          [node]=\"column.widget\"\n          [caption]=\"(column.title | translate | async)!\"\n        ></axp-widget-column-renderer>\n      }\n    </ng-container>\n  }\n\n  <ax-command-column\n    fixed=\"end\"\n    [width]=\"'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$2.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$2.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardGridViewComponent, decorators: [{
             type: Component,
@@ -443,10 +650,16 @@ class AXMTaskBoardKanbanViewComponent {
             }));
         }, ...(ngDevMode ? [{ debugName: "kanbanTasks" }] : []));
         this.#providerChanged = effect(async () => {
-            const statuses = await this.vm.selectedTaskType()?.getStatuses();
-            if (statuses) {
-                this.statuses.set(statuses);
+            const taskType = this.vm.selectedTaskTypes()[0];
+            if (!taskType) {
+                this.statuses.set([]);
+                return;
             }
+            taskType.getStatuses().then((statuses) => {
+                if (statuses) {
+                    this.statuses.set(statuses);
+                }
+            });
         }, ...(ngDevMode ? [{ debugName: "#providerChanged" }] : []));
     }
     ngAfterViewInit() {
@@ -459,7 +672,8 @@ class AXMTaskBoardKanbanViewComponent {
         const tasks = this.tasks().map((item) => {
             const task = event.allItems.find((t) => t.id === item.id);
             if (task) {
-                return { ...item, index: task.index, statusKey: task.statusKey };
+                const status = this.statuses().find((s) => s.key === task.statusKey);
+                return { ...item, index: task.index, status: { id: status.key, title: status.title } };
             }
             return item;
         });
@@ -480,11 +694,11 @@ class AXMTaskBoardKanbanViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardKanbanViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: AXMTaskBoardKanbanViewComponent, isStandalone: true, selector: "axm-task-board-kanban-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.6", type: AXMTaskBoardKanbanViewComponent, isStandalone: true, selector: "axm-task-board-kanban-view", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", 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-height: 100%;--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.1.6", 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"] }]
+            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-height: 100%;--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
         }] });
 
 class AXMTaskBoardStatusGroupedGridViewComponent {
@@ -527,7 +741,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
             });
         }, ...(ngDevMode ? [{ debugName: "#dataChanged" }] : []));
         this.#providerChanged = effect(async () => {
-            const provider = this.vm.selectedTaskType();
+            const provider = this.vm.selectedTaskTypes()[0];
             provider?.getExtraFields().then((extraFields) => {
                 if (extraFields) {
                     this.columns.set(extraFields);
@@ -579,7 +793,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMTaskBoardStatusGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-status-grouped-grid-view", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onActionClick: "onActionClick" }, 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-[300px]\"\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]=\"'500px'\"></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=\"reporter\" caption=\"Reporter\" [width]=\"'125px'\"></ax-text-column>\n    <ax-text-column dataField=\"assignee\" caption=\"Assignee\" [width]=\"'125px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n\n    @for (column of columns(); track column) {\n      <axp-widget-column-renderer\n        [node]=\"column.widget\"\n        [caption]=\"(column.title | translate | async)!\"\n      ></axp-widget-column-renderer>\n    }\n\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$1.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$1.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$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMTaskBoardStatusGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-status-grouped-grid-view", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onActionClick: "onActionClick" }, 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-[300px]\"\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]=\"'500px'\"></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=\"reporter\" caption=\"Reporter\" [width]=\"'125px'\"></ax-text-column>\n    <ax-text-column dataField=\"assignee\" caption=\"Assignee\" [width]=\"'125px'\"></ax-text-column>\n    <ax-text-column dataField=\"priority\" caption=\"priority\" [width]=\"'125px'\"></ax-text-column>\n\n    @for (column of columns(); track column) {\n      <axp-widget-column-renderer\n        [node]=\"column.widget\"\n        [caption]=\"(column.title | translate | async)!\"\n      ></axp-widget-column-renderer>\n    }\n\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$2.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$2.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, decorators: [{
             type: Component,
@@ -682,8 +896,10 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 : { 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;
+            const taskTypeNames = this.vm.selectedTaskTypeNames();
+            const types = taskTypeNames.length > 0 ? taskTypeNames : undefined;
+            const assigneeIds = this.vm.selectedAssigneeIds();
+            const priorities = this.vm.selectedPriorities();
             let from = this.calendarService.create(this.vm.currentDate(), this.localeService.activeProfile().calendar.system);
             let end;
             const currentView = this.vm.currentViewMode();
@@ -702,26 +918,38 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             }
             return {
                 ...(types && { types }),
+                ...(assigneeIds.length > 0 && { assigneeIds }),
+                ...(priorities.length > 0 && { priorities }),
                 range: { from: from.date, end: end.date },
             };
         }, ...(ngDevMode ? [{ debugName: "filter" }] : []));
         this.contextMenu = viewChild('rootContextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
         this.schedulerDataSource = (filter) => {
-            const taskTypeProvider = this.vm.selectedTaskType();
-            const types = taskTypeProvider ? [taskTypeProvider.name] : undefined;
-            const finalFilter = { ...this.filter(), ...filter, types: types };
-            return this.taskBoardService.getTasks(finalFilter).then((result) => result.items);
+            const finalFilter = { ...this.filter(), ...filter };
+            return this.taskBoardService.getTasks(finalFilter).then((result) => {
+                this.validateSelectedTask(result.items);
+                return result.items;
+            });
         };
         this.gridDataSource = (filter) => {
-            const taskTypeProvider = this.vm.selectedTaskType();
-            const types = taskTypeProvider ? [taskTypeProvider.name] : undefined;
-            const finalFilter = { ...this.filter(), ...filter, types: types };
-            return this.taskBoardService.getTasks(finalFilter);
+            const finalFilter = { ...this.filter(), ...filter };
+            return this.taskBoardService.getTasks(finalFilter).then((result) => {
+                this.validateSelectedTask(result.items);
+                return result;
+            });
         };
         this.resolvedTasks = signal([], ...(ngDevMode ? [{ debugName: "resolvedTasks" }] : []));
         this.eff = effect(async () => {
-            await this.taskResolveHandler();
+            const viewMode = this.vm.currentViewMode();
+            const filter = this.filter();
+            if (viewMode === 'kanban') {
+                await this.taskResolveHandler(filter);
+            }
         }, ...(ngDevMode ? [{ debugName: "eff" }] : []));
+        this.refreshEffect = effect(() => {
+            this.vm.selectedTaskTypeNames();
+            this.schedulerComponent()?.refresh();
+        }, ...(ngDevMode ? [{ debugName: "refreshEffect" }] : []));
         this.rangeBasedViews = [
             'grid',
             'kanban',
@@ -791,12 +1019,10 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             },
         ];
     }
-    async taskResolveHandler() {
-        const viewMode = this.vm.currentViewMode();
-        if (viewMode === 'kanban') {
-            const result = await this.taskBoardService.getTasks(this.filter());
-            this.resolvedTasks.set(result.items);
-        }
+    async taskResolveHandler(filter = this.filter()) {
+        const result = await this.taskBoardService.getTasks(filter);
+        this.validateSelectedTask(result.items);
+        this.resolvedTasks.set(result.items);
     }
     schedulerComponentChanged(component) {
         this.schedulerComponent.set(component);
@@ -839,10 +1065,6 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.popover()?.close();
         dropdownPanel.close();
     }
-    handleSelectedTaskTypeChange(taskType) {
-        this.vm.setSelectedTaskTypeProvider(taskType);
-        this.schedulerComponent()?.refresh();
-    }
     handleContextMenuItemClick(event) {
         this.taskBoardService.executeCommand(event.item.data?.command, this.currentTask()?.provider ?? '');
     }
@@ -957,17 +1179,34 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
     setActiveTask(task) {
         this.vm.selectTask(task);
     }
+    /**
+     * Checks if the currently selected task is still present in the list of visible tasks.
+     * If not, it clears the selection to prevent showing details for a hidden task.
+     * @param visibleTasks The new array of tasks that will be displayed.
+     */
+    validateSelectedTask(visibleTasks) {
+        const currentSelectedTask = this.vm.selectedTask();
+        // Proceed only if a task is actually selected
+        if (currentSelectedTask) {
+            // Check if any task in the new list has the same ID as the selected one
+            const isSelectedTaskVisible = visibleTasks.some((task) => task.id === currentSelectedTask.id);
+            // If the selected task is NOT in the new list, clear the selection.
+            if (!isSelectedTaskVisible) {
+                this.vm.selectTask(null);
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMTaskBoardPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMTaskBoardPage, isStandalone: true, selector: "ng-component", providers: [
             {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMTaskBoardPage,
             },
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\n          <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n            @for (category of menuItems(); track category.key) {\n            <ng-container>\n              @if (category.children && category.children.length > 0) {\n              <ax-menu-item>\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n              </ax-menu-item>\n              }\n            </ng-container>\n            }\n          </ax-menu>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover>\n      </div>\n    </axp-layout-prefix>\n    <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()!=='status-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      <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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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            (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: "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: 
+                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: "pipe", type: i7.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", 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,
@@ -995,13 +1234,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         AXDropdownPanelComponent,
                         AXPopoverModule,
                         AXCalendarComponent,
+                        AXMTaskBoardFiltersComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: AXPPageLayoutBase,
                             useExisting: AXMTaskBoardPage,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <ax-button [text]=\"(t('task-board.view.' + selectedViewMode().text, { scope: rootConfig.config.i18n}) | async)!\">\n        <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n        <ax-dropdown-panel #dropdownPanel>\n          <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n            @for (category of menuItems(); track category.key) {\n            <ng-container>\n              @if (category.children && category.children.length > 0) {\n              <ax-menu-item>\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n                @for (child of category.children; track child.key) {\n                <ax-menu-item (onClick)=\"handleViewChange(child.key,dropdownPanel)\">\n                  <ax-prefix>\n                    <ax-icon [icon]=\"child.icon\"></ax-icon>\n                  </ax-prefix>\n                  <ax-text\n                    >{{ (t('task-board.view.' + child.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text\n                  >\n                </ax-menu-item>\n                }\n              </ax-menu-item>\n              } @else {\n              <ax-menu-item (onClick)=\"handleViewChange(category.key,dropdownPanel)\">\n                <ax-prefix>\n                  <ax-icon [icon]=\"category.icon\"></ax-icon>\n                </ax-prefix>\n                <ax-text>{{ (t('task-board.' + category.text, { scope: rootConfig.config.i18n}) | async)! }}</ax-text>\n              </ax-menu-item>\n              }\n            </ng-container>\n            }\n          </ax-menu>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover>\n      </div>\n    </axp-layout-prefix>\n    <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()!=='status-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      <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            (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-DbpqZaC7.mjs.map
+//# sourceMappingURL=acorex-modules-task-management-task-board.page-BBbHu2jz.mjs.map