@acorex/components 21.0.1-next.3 → 21.0.1-next.31

package/fesm2022/acorex-components-kanban.mjs

@@ -1,6 +1,6 @@
 import { NXComponent } from '@acorex/cdk/common';
 import { AXDragDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
-import { AXDecoratorGenericComponent, AXDecoratorHeadingComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
+import { AXDecoratorGenericComponent, AXDecoratorHeadingComponent } from '@acorex/components/decorators';
 import { AXTooltipDirective } from '@acorex/components/tooltip';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -26,6 +26,7 @@ class AXKanbanComponent extends NXComponent {
         this.footerTemplate = input(...(ngDevMode ? [undefined, { debugName: "footerTemplate" }] : []));
         this.contentFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "contentFooterTemplate" }] : []));
         this.tooltipTemplate = input(...(ngDevMode ? [undefined, { debugName: "tooltipTemplate" }] : []));
+        this.onBeforeDrop = output();
         this.onSortChanged = output();
         this.onItemClick = output();
         this.onActionClick = output();
@@ -88,9 +89,9 @@ class AXKanbanComponent extends NXComponent {
      * the updated data source.
      *
      * @param event AXDropListDroppedEvent - The drag-and-drop event including indices and container information.
-     * @returns void
+     * @returns Promise<void>
      */
-    drop(event) {
+    async drop(event) {
         const { item: droppedItemDirective, currentIndex, previousIndex, container, previousContainer } = event;
         // --- 1. Get identifiers and the item's original data ---
         const currentStatusKey = JSON.parse(container.element.id);
@@ -100,6 +101,94 @@ class AXKanbanComponent extends NXComponent {
             console.warn('AXKanban: Dragged item has no [dragData]. Sort event cannot be emitted.');
             return;
         }
+        // --- 2. Get the original item from dataSource ---
+        const originalItemFromDataSource = this.dataSource().find((item) => item[this.keyField()] === movedItemOriginalData.id);
+        if (!originalItemFromDataSource) {
+            console.warn('AXKanban: Item not found in dataSource.');
+            return;
+        }
+        // --- 3. Perform the move operation ---
+        await this.performMove(originalItemFromDataSource, previousStatusKey, currentStatusKey, previousIndex, currentIndex, event.nativeEvent);
+    }
+    /**
+     * Programmatically move an item to a different status or reorder within the same status.
+     * @param itemId The ID of the item to move (using keyField)
+     * @param targetStatusKey The target status key to move the item to
+     * @param targetIndex Optional target index within the target status. If not provided, item will be appended to the end.
+     * @returns Promise<boolean> - true if the move was successful, false otherwise
+     */
+    async moveItem(itemId, targetStatusKey, targetIndex) {
+        const keyField = this.keyField();
+        const originalItem = this.dataSource().find((item) => item[keyField] === itemId);
+        if (!originalItem) {
+            console.warn(`AXKanban: Item with id "${itemId}" not found in dataSource.`);
+            return false;
+        }
+        // Get current status from dataSource
+        const statusKeyField = this.statusKeyField();
+        const previousStatusKey = originalItem[statusKeyField];
+        // Get current index from the computed items state (more accurate than dataSource field)
+        const currentItem = this.items().find((i) => i.id === itemId);
+        const previousIndex = currentItem?.index ?? 0;
+        // If target index is not provided, append to the end
+        let currentIndex = targetIndex;
+        if (currentIndex === undefined) {
+            const targetStatusItems = this.items().filter((i) => i.statusKey === targetStatusKey);
+            currentIndex = targetStatusItems.length;
+        }
+        // Perform the move
+        return await this.performMove(originalItem, previousStatusKey, targetStatusKey, previousIndex, currentIndex, null);
+    }
+    /**
+     * Programmatically reorder an item within the same status.
+     * @param itemId The ID of the item to reorder (using keyField)
+     * @param newIndex The new index position within the same status
+     * @returns Promise<boolean> - true if the reorder was successful, false otherwise
+     */
+    async reorderItem(itemId, newIndex) {
+        const keyField = this.keyField();
+        const originalItem = this.dataSource().find((item) => item[keyField] === itemId);
+        if (!originalItem) {
+            console.warn(`AXKanban: Item with id "${itemId}" not found in dataSource.`);
+            return false;
+        }
+        // Get current status from dataSource
+        const statusKeyField = this.statusKeyField();
+        const statusKey = originalItem[statusKeyField];
+        // Get current index from the computed items state (more accurate than dataSource field)
+        const currentItem = this.items().find((i) => i.id === itemId);
+        const previousIndex = currentItem?.index ?? 0;
+        // Perform the move (same status, different index)
+        return await this.performMove(originalItem, statusKey, statusKey, previousIndex, newIndex, null);
+    }
+    /**
+     * Programmatically move an item to a different status.
+     * @param itemId The ID of the item to move (using keyField)
+     * @param targetStatusKey The target status key to move the item to
+     * @param targetIndex Optional target index within the target status. If not provided, item will be appended to the end.
+     * @returns Promise<boolean> - true if the move was successful, false otherwise
+     */
+    async moveItemToStatus(itemId, targetStatusKey, targetIndex) {
+        return await this.moveItem(itemId, targetStatusKey, targetIndex);
+    }
+    /**
+     * Core method that performs the move operation, handles re-indexing, and emits events.
+     * This is used by both drag-and-drop operations and programmatic moves.
+     *
+     * @param originalItem The original item from dataSource that is being moved
+     * @param previousStatusKey The status key the item is moving from
+     * @param currentStatusKey The status key the item is moving to
+     * @param previousIndex The index the item is moving from
+     * @param currentIndex The index the item is moving to
+     * @param nativeEvent The native mouse event (null for programmatic moves)
+     * @returns Promise<boolean> - true if the move was successful, false otherwise
+     */
+    async performMove(originalItem, previousStatusKey, currentStatusKey, previousIndex, currentIndex, nativeEvent) {
+        // --- 1. Emit beforeDrop event and check if drop should be canceled ---
+        const shouldProceed = await this.emitBeforeDropEvent(originalItem, previousStatusKey, currentStatusKey, previousIndex, currentIndex, nativeEvent);
+        if (!shouldProceed) {
+            return false;
+        }
         // --- 2. Use the `items` computed property as the source of truth for the operation ---
         // This is the CRUCIAL FIX. We operate on the data as it was rendered.
         const currentItemsState = structuredClone(this.items());
@@ -140,14 +229,14 @@ class AXKanbanComponent extends NXComponent {
                 originalItem[statusKeyField] = updatedItem.statusKey;
             }
         });
-        const movedItemId = movedItemOriginalData.id;
-        const originalItemFromDataSource = finalDataSource.find((item) => item[keyField] === movedItemId);
+        const movedItemId = originalItem[keyField];
+        const finalOriginalItemFromDataSource = finalDataSource.find((item) => item[keyField] === movedItemId);
         // --- 5. Emit the final, comprehensive event ---
         this.onSortChanged.emit({
             sender: this,
-            nativeEvent: event.nativeEvent,
+            nativeEvent: nativeEvent,
             // The original data object that was moved
-            item: originalItemFromDataSource,
+            item: finalOriginalItemFromDataSource,
             // The complete, precisely re-indexed data source, ready for state update
             allItems: finalDataSource,
             currentIndex,
@@ -155,6 +244,42 @@ class AXKanbanComponent extends NXComponent {
             currentStatusKey,
             previousStatusKey,
         });
+        return true;
+    }
+    /**
+     * Emit beforeDrop event and return whether to continue with the drop operation.
+     * Supports both synchronous and asynchronous event handlers via the `wait()` method.
+     * @param item The original item from dataSource that is being moved
+     * @param previousStatusKey The status key the item is moving from
+     * @param currentStatusKey The status key the item is moving to
+     * @param previousIndex The index the item is moving from
+     * @param currentIndex The index the item is moving to
+     * @param nativeEvent The native mouse event (null for programmatic moves)
+     * @returns Promise<boolean> - true if the drop should proceed, false if it should be canceled
+     */
+    async emitBeforeDropEvent(item, previousStatusKey, currentStatusKey, previousIndex, currentIndex, nativeEvent) {
+        const pendingPromises = [];
+        const beforeDropEvent = {
+            sender: this,
+            nativeEvent,
+            item,
+            previousStatusKey,
+            currentStatusKey,
+            previousIndex,
+            currentIndex,
+            canceled: false,
+            wait: (promise) => {
+                pendingPromises.push(promise);
+            },
+        };
+        // Emit the event - handlers can call event.wait() to register async operations
+        this.onBeforeDrop.emit(beforeDropEvent);
+        // Wait for all registered async operations to complete
+        if (pendingPromises.length > 0) {
+            await Promise.all(pendingPromises);
+        }
+        // After all async operations complete, check if the drop was canceled
+        return !beforeDropEvent.canceled;
     }
     getItemsById(key) {
         return this.items().filter((e) => e.statusKey === key);
@@ -181,10 +306,12 @@ class AXKanbanComponent extends NXComponent {
         const originalItemFromDataSource = this.dataSource().find((originalItem) => originalItem[this.keyField()] === item.id);
         this.onItemRightClick.emit({ item: originalItemFromDataSource, nativeEvent: event, sender: this });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXKanbanComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXKanbanComponent, isStandalone: true, selector: "ax-kanban", inputs: { hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, indexField: { classPropertyName: "indexField", publicName: "indexField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, cssClassField: { classPropertyName: "cssClassField", publicName: "cssClassField", isSignal: true, isRequired: false, transformFunction: null }, priorityField: { classPropertyName: "priorityField", publicName: "priorityField", isSignal: true, isRequired: false, transformFunction: null }, statusKeyField: { classPropertyName: "statusKeyField", publicName: "statusKeyField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentFooterTemplate: { classPropertyName: "contentFooterTemplate", publicName: "contentFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSortChanged: "onSortChanged", onItemClick: "onItemClick", onActionClick: "onActionClick", onItemDblClick: "onItemDblClick", onItemRightClick: "onItemRightClick" }, usesInheritance: true, ngImport: i0, template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon>\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: [".ax-dark ax-kanban{--ax-comp-kanban-item-bg-color: var(--ax-sys-color-surface);--ax-comp-kanban-item-text-color: var(--ax-sys-color-on-surface)}:root{--ax-comp-kanban-gap: 1rem;--ax-comp-kanban-status-gap: .5rem;--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-status-padding-block: .5rem;--ax-comp-kanban-status-padding-inline: .5rem;--ax-comp-kanban-item-padding-block: .25rem;--ax-comp-kanban-item-padding-inline: .5rem;--ax-comp-kanban-item-indicator-size: .125rem;--ax-comp-kanban-status-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-kanban-status-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-kanban-item-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-kanban-item-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-kanban-primary-periority-color: var(--ax-sys-color-primary-surface);--ax-comp-kanban-highest-periority-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-kanban-high-periority-color: var(--ax-sys-color-danger-surface);--ax-comp-kanban-medium-periority-color: var(--ax-sys-color-warning-surface);--ax-comp-kanban-low-periority-color: var(--ax-sys-color-success-light-surface);--ax-comp-kanban-lowest-periority-color: var(--ax-sys-color-success-lightest-surface)}ax-kanban{display:grid;overflow-x:auto;grid-auto-flow:column;gap:var(--ax-comp-kanban-gap);grid-auto-columns:var(--ax-comp-kanban-status-min-width)}ax-kanban .ax-kanban-status{display:flex;overflow-y:auto;flex-direction:column;gap:var(--ax-comp-kanban-status-gap);border-radius:var(--ax-sys-border-radius);height:var(--ax-comp-kanban-status-min-height);color:rgba(var(--ax-comp-kanban-status-text-color));clip-path:inset(0 round var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kanban-status-bg-color))}ax-kanban .ax-kanban-status>ax-header{top:0;z-index:2;position:sticky;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{width:100%;display:block;font-weight:600;font-size:1.25rem;text-align:center;padding-block-start:var(--ax-comp-kanban-status-padding-block)}ax-kanban .ax-kanban-status ax-content{flex:1;display:flex;flex-direction:column;gap:var(--ax-comp-kanban-status-gap);padding-inline:var(--ax-comp-kanban-status-padding-inline)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{width:100%;position:relative;box-shadow:0 1px 2px #0000000d;color:rgba(var(--ax-comp-kanban-item-text-color));border-radius:calc(var(--ax-sys-border-radius) / 2);padding-block:var(--ax-comp-kanban-item-padding-block);padding-inline:var(--ax-comp-kanban-item-padding-inline);background-color:rgba(var(--ax-comp-kanban-item-bg-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:\"\";position:absolute;border-radius:9999px;inset-inline-start:.125rem;width:var(--ax-comp-kanban-item-indicator-size);height:calc(100% - var(--ax-comp-kanban-item-padding-inline))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-comp-kanban-primary-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-comp-kanban-highest-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-comp-kanban-high-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-comp-kanban-medium-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-comp-kanban-low-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-comp-kanban-lowest-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;font-size:1rem;font-weight:500;align-items:center;justify-content:space-between}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{bottom:0;z-index:2;position:sticky;background-color:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: 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: "component", type: AXDecoratorHeadingComponent, selector: "ax-heading", inputs: ["darkMode", "color", "weight"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXKanbanComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXKanbanComponent, isStandalone: true, selector: "ax-kanban", inputs: { hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, indexField: { classPropertyName: "indexField", publicName: "indexField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, cssClassField: { classPropertyName: "cssClassField", publicName: "cssClassField", isSignal: true, isRequired: false, transformFunction: null }, priorityField: { classPropertyName: "priorityField", publicName: "priorityField", isSignal: true, isRequired: false, transformFunction: null }, statusKeyField: { classPropertyName: "statusKeyField", publicName: "statusKeyField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentFooterTemplate: { classPropertyName: "contentFooterTemplate", publicName: "contentFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeDrop: "onBeforeDrop", onSortChanged: "onSortChanged", onItemClick: "onItemClick", onActionClick: "onActionClick", onItemDblClick: "onItemDblClick", onItemRightClick: "onItemRightClick" }, usesInheritance: true, ngImport: i0, template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{:root{--ax-comp-kanban-status-min-width:20rem;--ax-comp-kanban-status-min-height:30rem;--ax-comp-kanban-item-indicator-size:.125rem}}@layer components{ax-kanban{grid-auto-columns:var(--ax-comp-kanban-status-min-width);gap:calc(var(--spacing,.25rem)*2);grid-auto-flow:column;display:grid;overflow-x:auto}ax-kanban .ax-kanban-status{height:var(--ax-comp-kanban-status-min-height);gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-default);border-radius:var(--radius-default,var(--ax-sys-border-radius));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));clip-path:inset(0 round var(--ax-sys-border-radius));flex-direction:column;display:flex;overflow-y:auto}ax-kanban .ax-kanban-status>ax-header{top:calc(var(--spacing,.25rem)*0);z-index:2;background-color:inherit;position:sticky}ax-kanban .ax-kanban-status>ax-header>ax-title{width:100%;padding-top:calc(var(--spacing,.25rem)*2);text-align:center;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);display:block}ax-kanban .ax-kanban-status ax-content{gap:calc(var(--spacing,.25rem)*2);padding-inline:calc(var(--spacing,.25rem)*2);flex-direction:column;flex:1;display:flex}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{border-radius:calc(var(--ax-sys-border-radius)/2);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:100%;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-darkest,rgba(var(--ax-sys-color-on-darkest-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{height:calc(100% - (var(--spacing,.25rem)*2));width:var(--ax-comp-kanban-item-indicator-size);--tw-content:\"\";content:var(--tw-content);border-radius:3.40282e38px;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*.5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:var(--color-danger-dark,rgba(var(--ax-sys-color-danger-dark-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:var(--color-warning,rgba(var(--ax-sys-color-warning-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:var(--color-success-light,rgba(var(--ax-sys-color-success-light-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:var(--color-success-lightest,rgba(var(--ax-sys-color-success-lightest-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:space-between;align-items:center;display:flex}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{bottom:calc(var(--spacing,.25rem)*0);z-index:2;background-color:inherit;position:sticky}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: 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: "component", type: AXDecoratorHeadingComponent, selector: "ax-heading", inputs: ["darkMode", "color", "weight"] }, { kind: "directive", type: 
+                // AXDecoratorIconComponent,
+                AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXKanbanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXKanbanComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-kanban', encapsulation: ViewEncapsulation.None, imports: [
                         NgClass,
@@ -193,10 +320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXDropListDirective,
                         AXDecoratorGenericComponent,
                         AXDecoratorHeadingComponent,
-                        AXDecoratorIconComponent,
+                        // AXDecoratorIconComponent,
                         AXTooltipDirective,
-                    ], template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon>\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: [".ax-dark ax-kanban{--ax-comp-kanban-item-bg-color: var(--ax-sys-color-surface);--ax-comp-kanban-item-text-color: var(--ax-sys-color-on-surface)}:root{--ax-comp-kanban-gap: 1rem;--ax-comp-kanban-status-gap: .5rem;--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-status-padding-block: .5rem;--ax-comp-kanban-status-padding-inline: .5rem;--ax-comp-kanban-item-padding-block: .25rem;--ax-comp-kanban-item-padding-inline: .5rem;--ax-comp-kanban-item-indicator-size: .125rem;--ax-comp-kanban-status-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-kanban-status-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-kanban-item-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-kanban-item-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-kanban-primary-periority-color: var(--ax-sys-color-primary-surface);--ax-comp-kanban-highest-periority-color: var(--ax-sys-color-danger-dark-surface);--ax-comp-kanban-high-periority-color: var(--ax-sys-color-danger-surface);--ax-comp-kanban-medium-periority-color: var(--ax-sys-color-warning-surface);--ax-comp-kanban-low-periority-color: var(--ax-sys-color-success-light-surface);--ax-comp-kanban-lowest-periority-color: var(--ax-sys-color-success-lightest-surface)}ax-kanban{display:grid;overflow-x:auto;grid-auto-flow:column;gap:var(--ax-comp-kanban-gap);grid-auto-columns:var(--ax-comp-kanban-status-min-width)}ax-kanban .ax-kanban-status{display:flex;overflow-y:auto;flex-direction:column;gap:var(--ax-comp-kanban-status-gap);border-radius:var(--ax-sys-border-radius);height:var(--ax-comp-kanban-status-min-height);color:rgba(var(--ax-comp-kanban-status-text-color));clip-path:inset(0 round var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kanban-status-bg-color))}ax-kanban .ax-kanban-status>ax-header{top:0;z-index:2;position:sticky;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{width:100%;display:block;font-weight:600;font-size:1.25rem;text-align:center;padding-block-start:var(--ax-comp-kanban-status-padding-block)}ax-kanban .ax-kanban-status ax-content{flex:1;display:flex;flex-direction:column;gap:var(--ax-comp-kanban-status-gap);padding-inline:var(--ax-comp-kanban-status-padding-inline)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{width:100%;position:relative;box-shadow:0 1px 2px #0000000d;color:rgba(var(--ax-comp-kanban-item-text-color));border-radius:calc(var(--ax-sys-border-radius) / 2);padding-block:var(--ax-comp-kanban-item-padding-block);padding-inline:var(--ax-comp-kanban-item-padding-inline);background-color:rgba(var(--ax-comp-kanban-item-bg-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:\"\";position:absolute;border-radius:9999px;inset-inline-start:.125rem;width:var(--ax-comp-kanban-item-indicator-size);height:calc(100% - var(--ax-comp-kanban-item-padding-inline))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-comp-kanban-primary-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-comp-kanban-highest-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-comp-kanban-high-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-comp-kanban-medium-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-comp-kanban-low-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-comp-kanban-lowest-periority-color))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;font-size:1rem;font-weight:500;align-items:center;justify-content:space-between}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{bottom:0;z-index:2;position:sticky;background-color:inherit}\n"] }]
-        }], propDecorators: { hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], indexField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indexField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], cssClassField: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClassField", required: false }] }], priorityField: [{ type: i0.Input, args: [{ isSignal: true, alias: "priorityField", required: false }] }], statusKeyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusKeyField", required: false }] }], descriptionField: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionField", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], contentFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFooterTemplate", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], onSortChanged: [{ type: i0.Output, args: ["onSortChanged"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], onItemDblClick: [{ type: i0.Output, args: ["onItemDblClick"] }], onItemRightClick: [{ type: i0.Output, args: ["onItemRightClick"] }] } });
+                    ], template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:\"\"}}}@layer base{:root{--ax-comp-kanban-status-min-width:20rem;--ax-comp-kanban-status-min-height:30rem;--ax-comp-kanban-item-indicator-size:.125rem}}@layer components{ax-kanban{grid-auto-columns:var(--ax-comp-kanban-status-min-width);gap:calc(var(--spacing,.25rem)*2);grid-auto-flow:column;display:grid;overflow-x:auto}ax-kanban .ax-kanban-status{height:var(--ax-comp-kanban-status-min-height);gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-default);border-radius:var(--radius-default,var(--ax-sys-border-radius));background-color:var(--color-lighter,rgba(var(--ax-sys-color-lighter-surface)));color:var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)));clip-path:inset(0 round var(--ax-sys-border-radius));flex-direction:column;display:flex;overflow-y:auto}ax-kanban .ax-kanban-status>ax-header{top:calc(var(--spacing,.25rem)*0);z-index:2;background-color:inherit;position:sticky}ax-kanban .ax-kanban-status>ax-header>ax-title{width:100%;padding-top:calc(var(--spacing,.25rem)*2);text-align:center;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);display:block}ax-kanban .ax-kanban-status ax-content{gap:calc(var(--spacing,.25rem)*2);padding-inline:calc(var(--spacing,.25rem)*2);flex-direction:column;flex:1;display:flex}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{border-radius:calc(var(--ax-sys-border-radius)/2);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:100%;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*1);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:relative}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.dark,.dark *){background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));color:var(--color-on-darkest,rgba(var(--ax-sys-color-on-darkest-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{height:calc(100% - (var(--spacing,.25rem)*2));width:var(--ax-comp-kanban-item-indicator-size);--tw-content:\"\";content:var(--tw-content);border-radius:3.40282e38px;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*.5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:var(--color-primary,rgba(var(--ax-sys-color-primary-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:var(--color-danger-dark,rgba(var(--ax-sys-color-danger-dark-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:var(--color-danger-600,rgba(var(--ax-sys-color-danger-600)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:var(--color-warning,rgba(var(--ax-sys-color-warning-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:var(--color-success-light,rgba(var(--ax-sys-color-success-light-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:var(--color-success-lightest,rgba(var(--ax-sys-color-success-lightest-surface)))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);justify-content:space-between;align-items:center;display:flex}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{bottom:calc(var(--spacing,.25rem)*0);z-index:2;background-color:inherit;position:sticky}}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], dragStartDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragStartDelay", required: false }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], indexField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indexField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], cssClassField: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClassField", required: false }] }], priorityField: [{ type: i0.Input, args: [{ isSignal: true, alias: "priorityField", required: false }] }], statusKeyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusKeyField", required: false }] }], descriptionField: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionField", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], contentFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFooterTemplate", required: false }] }], tooltipTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipTemplate", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onSortChanged: [{ type: i0.Output, args: ["onSortChanged"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], onItemDblClick: [{ type: i0.Output, args: ["onItemDblClick"] }], onItemRightClick: [{ type: i0.Output, args: ["onItemRightClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.