import { NXComponent } from '@acorex/cdk/common';
import { AXDragDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
import { AXDecoratorGenericComponent, AXDecoratorHeadingComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
import { AXTooltipDirective } from '@acorex/components/tooltip';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, output, computed, ViewEncapsulation, Component } from '@angular/core';

class AXKanbanComponent extends NXComponent {
    constructor() {
        super(...arguments);
        this.hasActions = input(false, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
        this.dragStartDelay = input(0, ...(ngDevMode ? [{ debugName: "dragStartDelay" }] : []));
        this.statuses = input([], ...(ngDevMode ? [{ debugName: "statuses" }] : []));
        this.itemTemplate = input(...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : []));
        this.dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
        this.keyField = input('id', ...(ngDevMode ? [{ debugName: "keyField" }] : []));
        this.indexField = input('index', ...(ngDevMode ? [{ debugName: "indexField" }] : []));
        this.titleField = input('title', ...(ngDevMode ? [{ debugName: "titleField" }] : []));
        this.cssClassField = input('cssClass', ...(ngDevMode ? [{ debugName: "cssClassField" }] : []));
        this.priorityField = input('priority', ...(ngDevMode ? [{ debugName: "priorityField" }] : []));
        this.statusKeyField = input('statusKey', ...(ngDevMode ? [{ debugName: "statusKeyField" }] : []));
        this.descriptionField = input('description', ...(ngDevMode ? [{ debugName: "descriptionField" }] : []));
        this.emptyTemplate = input(...(ngDevMode ? [undefined, { debugName: "emptyTemplate" }] : []));
        this.headerTemplate = input(...(ngDevMode ? [undefined, { debugName: "headerTemplate" }] : []));
        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();
        this.onItemDblClick = output();
        this.onItemRightClick = output();
        this.items = computed(() => {
            // ... your excellent gap-filling index logic remains the same ...
            const dataSource = this.dataSource() || [];
            const mappedItems = dataSource.map((item) => ({
                id: item[this.keyField()],
                index: item[this.indexField()],
                title: item[this.titleField()],
                cssClass: item[this.cssClassField()],
                priority: item[this.priorityField()],
                statusKey: item[this.statusKeyField()],
                description: item[this.descriptionField()],
            }));
            const itemsByStatus = new Map();
            for (const item of mappedItems) {
                if (!itemsByStatus.has(item.statusKey)) {
                    itemsByStatus.set(item.statusKey, []);
                }
                itemsByStatus.get(item.statusKey).push(item);
            }
            const finalProcessedItems = [];
            for (const group of itemsByStatus.values()) {
                const correctlyIndexedItems = [];
                const itemsToBeIndexed = [];
                const takenIndices = new Set();
                for (const item of group) {
                    const hasValidIndex = item.index != null && typeof item.index === 'number' && !takenIndices.has(item.index);
                    if (hasValidIndex) {
                        takenIndices.add(item.index);
                        correctlyIndexedItems.push(item);
                    }
                    else {
                        itemsToBeIndexed.push(item);
                    }
                }
                let currentIndex = 0;
                for (const item of itemsToBeIndexed) {
                    while (takenIndices.has(currentIndex)) {
                        currentIndex++;
                    }
                    item.index = currentIndex;
                    currentIndex++;
                }
                const processedGroup = [...correctlyIndexedItems, ...itemsToBeIndexed];
                processedGroup.sort((a, b) => a.index - b.index);
                finalProcessedItems.push(...processedGroup);
            }
            return finalProcessedItems;
        }, ...(ngDevMode ? [{ debugName: "items" }] : []));
        this.filteredStatuses = computed(() => this.statuses().sort((a, b) => a.index - b.index), ...(ngDevMode ? [{ debugName: "filteredStatuses" }] : []));
    }
    /**
     * Handles a drop operation to reorder items or move them between statuses.
     * It uses the component's current rendered state (`this.items`) as the source
     * of truth, performs precise re-indexing, and emits a comprehensive event with
     * the updated data source.
     *
     * @param event AXDropListDroppedEvent - The drag-and-drop event including indices and container information.
     * @returns Promise<void>
     */
    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);
        const previousStatusKey = JSON.parse(previousContainer.element.id);
        const movedItemOriginalData = droppedItemDirective.dragData();
        if (!movedItemOriginalData) {
            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());
        // --- 3. Perform the move operation based on the scenario ---
        if (previousStatusKey === currentStatusKey) {
            // --- Scenario A: Reordering within the same list ---
            const list = currentItemsState.filter((i) => i.statusKey === currentStatusKey);
            // Remove from the old position and insert into the new position
            const [movedItem] = list.splice(previousIndex, 1);
            list.splice(currentIndex, 0, movedItem);
            // Re-index only this modified list
            list.forEach((item, idx) => (item.index = idx));
        }
        else {
            // --- Scenario B: Moving to a different list ---
            const sourceList = currentItemsState.filter((i) => i.statusKey === previousStatusKey);
            const destList = currentItemsState.filter((i) => i.statusKey === currentStatusKey);
            // Remove from source list
            const [movedItem] = sourceList.splice(previousIndex, 1);
            // Update its status and add to destination list
            movedItem.statusKey = currentStatusKey;
            destList.splice(currentIndex, 0, movedItem);
            // Re-index both affected lists
            sourceList.forEach((item, idx) => (item.index = idx));
            destList.forEach((item, idx) => (item.index = idx));
        }
        // --- 4. Map the changes back to a new version of the original dataSource ---
        // This preserves any extra properties the user might have on their data objects.
        const keyField = this.keyField();
        const statusKeyField = this.statusKeyField();
        const indexField = this.indexField();
        const updatedItemsMap = new Map(currentItemsState.map((i) => [i.id, i]));
        const finalDataSource = structuredClone(this.dataSource());
        finalDataSource.forEach((originalItem) => {
            const updatedItem = updatedItemsMap.get(originalItem[keyField]);
            if (updatedItem) {
                originalItem[indexField] = updatedItem.index;
                originalItem[statusKeyField] = updatedItem.statusKey;
            }
        });
        const movedItemId = originalItem[keyField];
        const finalOriginalItemFromDataSource = finalDataSource.find((item) => item[keyField] === movedItemId);
        // --- 5. Emit the final, comprehensive event ---
        this.onSortChanged.emit({
            sender: this,
            nativeEvent: nativeEvent,
            // The original data object that was moved
            item: finalOriginalItemFromDataSource,
            // The complete, precisely re-indexed data source, ready for state update
            allItems: finalDataSource,
            currentIndex,
            previousIndex,
            currentStatusKey,
            previousStatusKey,
        });
        return true;
    }
    /**
     * Emit beforeDrop event and return whether to continue with the drop operation.
     * Supports both synchronous and asynchronous event handlers.
     * @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 beforeDropEvent = {
            sender: this,
            nativeEvent,
            item,
            previousStatusKey,
            currentStatusKey,
            previousIndex,
            currentIndex,
            canceled: false,
        };
        // Manually invoke handlers to collect and await promises from async handlers
        const outputRef = this.onBeforeDrop;
        const emitter = outputRef._emitRef?.() || outputRef.emitRef?.();
        const promises = [];
        if (emitter?.observers || emitter?._observers) {
            const observers = emitter.observers || emitter._observers || [];
            observers.forEach((observer) => {
                try {
                    const result = observer.next?.(beforeDropEvent) || observer(beforeDropEvent);
                    if (result instanceof Promise) {
                        promises.push(result);
                    }
                }
                catch (error) {
                    console.error('Error in onBeforeDrop handler:', error);
                }
            });
        }
        else {
            // Fallback: emit normally
            this.onBeforeDrop.emit(beforeDropEvent);
        }
        // Wait for all async handlers to complete
        if (promises.length > 0) {
            await Promise.all(promises);
        }
        return !beforeDropEvent.canceled;
    }
    getItemsById(key) {
        return this.items().filter((e) => e.statusKey === key);
    }
    getOriginalItemsById(key) {
        return this.dataSource().filter((e) => e[this.statusKeyField()] === key);
    }
    stringify(value) {
        return JSON.stringify(value);
    }
    handleActionClick(event, item) {
        const originalItemFromDataSource = this.dataSource().find((originalItem) => originalItem[this.keyField()] === item.id);
        this.onActionClick.emit({ item: originalItemFromDataSource, nativeEvent: event, sender: this });
    }
    handleClick(event, item) {
        const originalItemFromDataSource = this.dataSource().find((originalItem) => originalItem[this.keyField()] === item.id);
        this.onItemClick.emit({ item: originalItemFromDataSource, nativeEvent: event, sender: this });
    }
    handleDblClick(event, item) {
        const originalItemFromDataSource = this.dataSource().find((originalItem) => originalItem[this.keyField()] === item.id);
        this.onItemDblClick.emit({ item: originalItemFromDataSource, nativeEvent: event, sender: this });
    }
    handleRightClick(event, item) {
        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: { 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: [".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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXKanbanComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-kanban', encapsulation: ViewEncapsulation.None, imports: [
                        NgClass,
                        NgTemplateOutlet,
                        AXDragDirective,
                        AXDropListDirective,
                        AXDecoratorGenericComponent,
                        AXDecoratorHeadingComponent,
                        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 }] }], 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.
 */

export { AXKanbanComponent };
//# sourceMappingURL=acorex-components-kanban.mjs.map
