import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
import * as i0 from '@angular/core';
import { inject, output, input, model, viewChild, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { TranslatePipe } from '@ngx-translate/core';
import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
import { ZCalendarComponent } from '@shival99/z-ui/components/z-calendar';
import { ZCheckboxComponent } from '@shival99/z-ui/components/z-checkbox';
import { ZEditorComponent } from '@shival99/z-ui/components/z-editor';
import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
import { ZInputComponent } from '@shival99/z-ui/components/z-input';
import { ZModalComponent } from '@shival99/z-ui/components/z-modal';
import { ZSelectComponent } from '@shival99/z-ui/components/z-select';
import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
import { ZUploadComponent } from '@shival99/z-ui/components/z-upload';
import { ZTranslateService } from '@shival99/z-ui/services';
import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
import { cva } from 'class-variance-authority';

const Z_KANBAN_PRIORITY_OPTIONS = [
    { value: 'risk', labelKey: 'i18n_z_ui_kanban_priority_risk' },
    { value: 'high', labelKey: 'i18n_z_ui_kanban_priority_high' },
    { value: 'medium', labelKey: 'i18n_z_ui_kanban_priority_medium' },
    { value: 'low', labelKey: 'i18n_z_ui_kanban_priority_low' },
];

const zKanbanColumnVariants = cva([
    'bg-muted/25 border-border/70 flex h-full min-h-[23rem] w-[20rem] shrink-0 flex-col rounded-2xl border',
    'backdrop-blur-[1px] transition-shadow duration-200',
], {
    variants: {
        zDensity: {
            compact: 'p-2.5',
            comfortable: 'p-3',
        },
    },
    defaultVariants: {
        zDensity: 'comfortable',
    },
});
const zKanbanTaskCardVariants = cva([
    'bg-card text-card-foreground border-border shadow-sm ring-0 ring-transparent',
    'group relative w-full overflow-hidden rounded-lg border',
    'transition-[border-color,box-shadow,transform,opacity] duration-150 ease-out',
    'hover:shadow-sm',
], {
    variants: {
        zDensity: {
            compact: 'space-y-2 p-2.5',
            comfortable: 'space-y-2.5 p-3',
        },
        zPriority: {
            risk: '',
            high: '',
            medium: '',
            low: '',
        },
    },
    defaultVariants: {
        zDensity: 'comfortable',
        zPriority: 'medium',
    },
});
const zKanbanPriorityBadgeVariants = cva('inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide', {
    variants: {
        zPriority: {
            risk: 'bg-red-500/15 text-red-600 dark:text-red-400',
            high: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
            medium: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
            low: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
        },
        zActive: {
            true: 'ring-2 ring-primary/30 ring-offset-2 ring-offset-background',
            false: '',
        },
    },
    defaultVariants: {
        zPriority: 'medium',
        zActive: false,
    },
});
const zKanbanChecklistRowVariants = cva('flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-sm', {
    variants: {
        zDone: {
            true: 'text-muted-foreground bg-muted/35',
            false: 'text-foreground hover:bg-muted/25',
        },
    },
    defaultVariants: {
        zDone: false,
    },
});

class ZKanbanComponent {
    _zTranslate = inject(ZTranslateService);
    _priorityLabelByValue = {
        risk: 'i18n_z_ui_kanban_priority_risk',
        high: 'i18n_z_ui_kanban_priority_high',
        medium: 'i18n_z_ui_kanban_priority_medium',
        low: 'i18n_z_ui_kanban_priority_low',
    };
    _priorityIconByValue = {
        risk: 'lucideCircleAlert',
        high: 'lucideFlag',
        medium: 'lucideTimer',
        low: 'lucideCircleDot',
    };
    _priorityIconClassByValue = {
        risk: 'text-red-500',
        high: 'text-orange-500',
        medium: 'text-blue-500',
        low: 'text-emerald-500',
    };
    zTaskDrop = output();
    zTaskSave = output();
    zTaskClick = output();
    zTaskCreate = output();
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zColumns = model([], ...(ngDevMode ? [{ debugName: "zColumns" }] : []));
    zTitle = input('i18n_z_ui_kanban_board_title', ...(ngDevMode ? [{ debugName: "zTitle" }] : []));
    zSubtitle = input('i18n_z_ui_kanban_board_subtitle', ...(ngDevMode ? [{ debugName: "zSubtitle" }] : []));
    zSearch = model('', ...(ngDevMode ? [{ debugName: "zSearch" }] : []));
    zShowToolbar = input(true, { ...(ngDevMode ? { debugName: "zShowToolbar" } : {}), transform: zTransform });
    zAllowCreateTask = input(true, { ...(ngDevMode ? { debugName: "zAllowCreateTask" } : {}), transform: zTransform });
    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
    zDensity = input('comfortable', ...(ngDevMode ? [{ debugName: "zDensity" }] : []));
    boardViewportRef = viewChild('boardViewport', ...(ngDevMode ? [{ debugName: "boardViewportRef" }] : []));
    editorVisible = signal(false, ...(ngDevMode ? [{ debugName: "editorVisible" }] : []));
    editingColumnId = signal(null, ...(ngDevMode ? [{ debugName: "editingColumnId" }] : []));
    editingTaskId = signal(null, ...(ngDevMode ? [{ debugName: "editingTaskId" }] : []));
    draftTitle = signal('', ...(ngDevMode ? [{ debugName: "draftTitle" }] : []));
    draftDescription = signal('', ...(ngDevMode ? [{ debugName: "draftDescription" }] : []));
    draftStatus = signal('', ...(ngDevMode ? [{ debugName: "draftStatus" }] : []));
    draftPriority = signal('medium', ...(ngDevMode ? [{ debugName: "draftPriority" }] : []));
    draftAssignees = signal([], ...(ngDevMode ? [{ debugName: "draftAssignees" }] : []));
    draftStartDate = signal(null, ...(ngDevMode ? [{ debugName: "draftStartDate" }] : []));
    draftEndDate = signal(null, ...(ngDevMode ? [{ debugName: "draftEndDate" }] : []));
    draftChecklist = signal([], ...(ngDevMode ? [{ debugName: "draftChecklist" }] : []));
    draftChecklistItemLabel = signal('', ...(ngDevMode ? [{ debugName: "draftChecklistItemLabel" }] : []));
    draftAttachments = signal([], ...(ngDevMode ? [{ debugName: "draftAttachments" }] : []));
    draftComment = signal('', ...(ngDevMode ? [{ debugName: "draftComment" }] : []));
    isDraggingTask = signal(false, ...(ngDevMode ? [{ debugName: "isDraggingTask" }] : []));
    _dragAutoScrollRafId = null;
    _dragAutoScrollVelocity = 0;
    _lastDragFinishedAt = 0;
    hostClasses = computed(() => zMergeClasses('z-kanban block w-full min-w-0', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    connectedDropListIds = computed(() => this.zColumns().map(column => column.id), ...(ngDevMode ? [{ debugName: "connectedDropListIds" }] : []));
    isSearchActive = computed(() => this.zSearch().trim().length > 0, ...(ngDevMode ? [{ debugName: "isSearchActive" }] : []));
    filteredColumns = computed(() => {
        const query = this.zSearch().trim().toLowerCase();
        if (!query) {
            return this.zColumns();
        }
        return this.zColumns().map(column => ({
            ...column,
            tasks: column.tasks.filter(task => this._taskMatchesQuery(task, query)),
        }));
    }, ...(ngDevMode ? [{ debugName: "filteredColumns" }] : []));
    activeTask = computed(() => {
        const columnId = this.editingColumnId();
        const taskId = this.editingTaskId();
        if (!columnId || !taskId) {
            return null;
        }
        return this._findTask(columnId, taskId);
    }, ...(ngDevMode ? [{ debugName: "activeTask" }] : []));
    editorMeta = computed(() => {
        const task = this.activeTask();
        if (!task) {
            return '';
        }
        if (task.code) {
            return task.code;
        }
        return task.id;
    }, ...(ngDevMode ? [{ debugName: "editorMeta" }] : []));
    checklistProgress = computed(() => {
        const checklist = this.draftChecklist();
        if (checklist.length === 0) {
            return 0;
        }
        const doneCount = checklist.filter(item => item.done).length;
        return Math.round((doneCount / checklist.length) * 100);
    }, ...(ngDevMode ? [{ debugName: "checklistProgress" }] : []));
    checklistDoneCount = computed(() => this.draftChecklist().filter(item => item.done).length, ...(ngDevMode ? [{ debugName: "checklistDoneCount" }] : []));
    isEditorSaveDisabled = computed(() => !this.draftTitle().trim(), ...(ngDevMode ? [{ debugName: "isEditorSaveDisabled" }] : []));
    isCommentSubmitDisabled = computed(() => !this.draftComment().trim(), ...(ngDevMode ? [{ debugName: "isCommentSubmitDisabled" }] : []));
    checklistDoneRowClass = `${zKanbanChecklistRowVariants({ zDone: true })}`;
    checklistPendingRowClass = `${zKanbanChecklistRowVariants({ zDone: false })}`;
    statusOptions = computed(() => {
        this._zTranslate.currentLang();
        return this.zColumns().map(column => ({
            value: column.id,
            label: this._zTranslate.instant(column.title),
            icon: this._getStatusIcon(column.id),
        }));
    }, ...(ngDevMode ? [{ debugName: "statusOptions" }] : []));
    priorityOptions = Z_KANBAN_PRIORITY_OPTIONS;
    prioritySelectOptions = computed(() => {
        this._zTranslate.currentLang();
        return this.priorityOptions.map(option => ({
            value: option.value,
            label: this._zTranslate.instant(option.labelKey),
            icon: this._priorityIconByValue[option.value],
        }));
    }, ...(ngDevMode ? [{ debugName: "prioritySelectOptions" }] : []));
    assigneeOptions = computed(() => {
        const assignees = new Set();
        for (const column of this.zColumns()) {
            for (const task of column.tasks) {
                for (const assignee of task.assignees ?? []) {
                    if (!assignee.trim()) {
                        continue;
                    }
                    assignees.add(assignee.trim());
                }
            }
        }
        return Array.from(assignees)
            .sort((a, b) => a.localeCompare(b))
            .map(name => ({
            label: name,
            value: name,
        }));
    }, ...(ngDevMode ? [{ debugName: "assigneeOptions" }] : []));
    columnClass = computed(() => zKanbanColumnVariants({ zDensity: this.zDensity() }), ...(ngDevMode ? [{ debugName: "columnClass" }] : []));
    taskCardClassByPriority = computed(() => {
        const density = this.zDensity();
        return {
            risk: zKanbanTaskCardVariants({ zDensity: density, zPriority: 'risk' }),
            high: zKanbanTaskCardVariants({ zDensity: density, zPriority: 'high' }),
            medium: zKanbanTaskCardVariants({ zDensity: density, zPriority: 'medium' }),
            low: zKanbanTaskCardVariants({ zDensity: density, zPriority: 'low' }),
        };
    }, ...(ngDevMode ? [{ debugName: "taskCardClassByPriority" }] : []));
    priorityBadgeClassByPriority = computed(() => ({
        risk: zKanbanPriorityBadgeVariants({ zPriority: 'risk', zActive: false }),
        high: zKanbanPriorityBadgeVariants({ zPriority: 'high', zActive: false }),
        medium: zKanbanPriorityBadgeVariants({ zPriority: 'medium', zActive: false }),
        low: zKanbanPriorityBadgeVariants({ zPriority: 'low', zActive: false }),
    }), ...(ngDevMode ? [{ debugName: "priorityBadgeClassByPriority" }] : []));
    statusIconClassByValue = computed(() => {
        const map = {};
        for (const option of this.statusOptions()) {
            map[option.value] = this._getStatusIconClass(option.value);
        }
        return map;
    }, ...(ngDevMode ? [{ debugName: "statusIconClassByValue" }] : []));
    priorityIconClassByValue = this._priorityIconClassByValue;
    boardColumnsView = computed(() => {
        const taskCardClassByPriority = this.taskCardClassByPriority();
        const priorityBadgeClassByPriority = this.priorityBadgeClassByPriority();
        return this.filteredColumns().map(column => ({
            id: column.id,
            title: column.title,
            taskCount: column.tasks.length,
            rawTasks: column.tasks,
            tasks: column.tasks.map(task => {
                const assigneeViews = (task.assignees ?? []).map((assignee, index) => ({
                    name: assignee,
                    initials: this._getAssigneeInitials(assignee),
                    className: this._getAssigneeAvatarClasses(assignee),
                    zIndex: 30 - index,
                }));
                const visibleAssignees = assigneeViews.slice(0, 3);
                const hiddenAssignees = assigneeViews.slice(3);
                const checklistDoneCount = task.checklist?.filter(item => item.done).length ?? 0;
                const attachmentCount = task.attachments?.length ?? task.attachmentsCount ?? 0;
                const descriptionPreview = this._stripHtml(task.description ?? '').trim();
                return {
                    id: task.id,
                    columnId: column.id,
                    code: task.code,
                    title: task.title,
                    descriptionPreview,
                    priority: task.priority,
                    priorityLabelKey: this._priorityLabelByValue[task.priority],
                    priorityBadgeClass: priorityBadgeClassByPriority[task.priority],
                    taskCardClass: taskCardClassByPriority[task.priority],
                    dueDateLabel: this._formatDueDate(task.endDate ?? task.dueDate),
                    commentsCount: task.commentsCount ?? 0,
                    attachmentCount,
                    checklistCount: task.checklist?.length ?? 0,
                    checklistDoneCount,
                    completed: !!task.completed,
                    visibleAssignees,
                    hiddenAssigneesCount: hiddenAssignees.length,
                    hiddenAssigneesLabel: hiddenAssignees.map(item => item.name).join(', '),
                };
            }),
        }));
    }, ...(ngDevMode ? [{ debugName: "boardColumnsView" }] : []));
    activeTaskActivityView = computed(() => (this.activeTask()?.activity ?? []).map(entry => ({
        id: entry.id,
        actor: entry.actor,
        action: entry.action,
        createdAtLabel: this._formatDateTime(entry.createdAt),
    })), ...(ngDevMode ? [{ debugName: "activeTaskActivityView" }] : []));
    createTaskInFirstColumn() {
        const firstColumnId = this.zColumns()[0]?.id;
        if (!firstColumnId) {
            return;
        }
        this.createTask(firstColumnId);
    }
    onBoardSearchChange(value) {
        this.zSearch.set(`${value ?? ''}`);
    }
    onTaskHandleClick(event) {
        event.stopPropagation();
    }
    onTaskCardClick(columnId, taskId) {
        if (Date.now() - this._lastDragFinishedAt < 140) {
            return;
        }
        this.openTaskEditor(columnId, taskId);
    }
    onTaskDragStarted() {
        if (this.zDisabled() || this.isSearchActive()) {
            return;
        }
        this.isDraggingTask.set(true);
    }
    onTaskDragMoved(event) {
        if (!this.isDraggingTask()) {
            return;
        }
        this._updateHorizontalAutoScroll(event.pointerPosition.x);
    }
    onTaskDragEnded(event) {
        this.isDraggingTask.set(false);
        const dragDistanceX = Math.abs(event.distance.x);
        const dragDistanceY = Math.abs(event.distance.y);
        if (dragDistanceX > 3 || dragDistanceY > 3) {
            this._lastDragFinishedAt = Date.now();
        }
        this._stopHorizontalAutoScroll();
    }
    onTaskDrop(event, toColumnId) {
        if (this.zDisabled() || this.isSearchActive()) {
            return;
        }
        const fromColumnId = event.previousContainer.id;
        if (!fromColumnId) {
            return;
        }
        const sourceTask = this._findTaskByIndex(fromColumnId, event.previousIndex);
        if (!sourceTask) {
            return;
        }
        if (fromColumnId === toColumnId) {
            if (event.previousIndex === event.currentIndex) {
                return;
            }
            this._reorderTasksWithinColumn(toColumnId, event.previousIndex, event.currentIndex);
            this.zTaskDrop.emit({
                taskId: sourceTask.id,
                fromColumnId,
                toColumnId,
                previousIndex: event.previousIndex,
                currentIndex: event.currentIndex,
            });
            return;
        }
        const movedTask = {
            ...sourceTask,
            status: toColumnId,
            completed: toColumnId === 'done' ? true : sourceTask.completed,
        };
        this._moveTaskAcrossColumns(fromColumnId, toColumnId, event.previousIndex, event.currentIndex, movedTask);
        this.zTaskDrop.emit({
            taskId: sourceTask.id,
            fromColumnId,
            toColumnId,
            previousIndex: event.previousIndex,
            currentIndex: event.currentIndex,
        });
    }
    createTask(columnId) {
        if (!this.zAllowCreateTask() || this.zDisabled()) {
            return;
        }
        if (!columnId || !this._hasColumnId(columnId)) {
            return;
        }
        const newTask = {
            id: this._createId('task'),
            title: this._zTranslate.instant('i18n_z_ui_kanban_new_task_title'),
            status: columnId,
            priority: 'medium',
            assignees: [],
            checklist: [],
            attachments: [],
            activity: [],
        };
        this.zColumns.update(columns => columns.map(column => {
            if (column.id !== columnId) {
                return column;
            }
            return {
                ...column,
                tasks: [newTask, ...column.tasks],
            };
        }));
        this.zTaskCreate.emit({
            task: newTask,
            columnId,
        });
        this.openTaskEditor(columnId, newTask.id);
    }
    openTaskEditor(columnId, taskId) {
        const task = this._findTask(columnId, taskId);
        if (!task) {
            return;
        }
        this.editingColumnId.set(columnId);
        this.editingTaskId.set(taskId);
        this.draftTitle.set(task.title);
        this.draftDescription.set(task.description ?? '');
        this.draftStatus.set(task.status || columnId);
        this.draftPriority.set(task.priority);
        this.draftAssignees.set([...(task.assignees ?? [])]);
        this.draftStartDate.set(this._toDate(task.startDate));
        this.draftEndDate.set(this._toDate(task.endDate ?? task.dueDate));
        this.draftChecklist.set((task.checklist ?? []).map(item => ({ ...item })));
        this.draftChecklistItemLabel.set('');
        this.draftAttachments.set((task.attachments ?? []).map(item => ({ ...item })));
        this.draftComment.set('');
        this.editorVisible.set(true);
        this.zTaskClick.emit(task);
    }
    closeEditor() {
        this.editorVisible.set(false);
    }
    saveTaskChanges() {
        const sourceColumnId = this.editingColumnId();
        const taskId = this.editingTaskId();
        if (!sourceColumnId || !taskId) {
            return;
        }
        const previousTask = this._findTask(sourceColumnId, taskId);
        if (!previousTask) {
            return;
        }
        const trimmedTitle = this.draftTitle().trim();
        if (!trimmedTitle) {
            return;
        }
        const status = this._hasColumnId(this.draftStatus()) ? this.draftStatus() : sourceColumnId;
        const description = this._normalizeEditorContent(this.draftDescription());
        const normalizedRange = this._normalizeDateRange(this.draftStartDate(), this.draftEndDate());
        const startDate = this._toDateOnlyString(normalizedRange.startDate);
        const endDate = this._toDateOnlyString(normalizedRange.endDate);
        const dueDate = endDate;
        const assignees = this._sanitizeAssignees(this.draftAssignees());
        const attachments = this.draftAttachments().map(item => ({ ...item }));
        const updatedTask = {
            ...previousTask,
            title: trimmedTitle,
            description,
            status,
            priority: this.draftPriority(),
            assignees,
            startDate,
            endDate,
            dueDate,
            checklist: this.draftChecklist().map(item => ({ ...item })),
            attachments,
            attachmentsCount: attachments.length,
            completed: status === 'done',
        };
        this._replaceTaskAcrossColumns(sourceColumnId, status, updatedTask);
        this.zTaskSave.emit({
            task: updatedTask,
            columnId: status,
            previousTask,
        });
        this.closeEditor();
    }
    addChecklistItem() {
        const label = this.draftChecklistItemLabel().trim();
        if (!label) {
            return;
        }
        const item = {
            id: this._createId('check'),
            label,
            done: false,
        };
        this.draftChecklist.update(items => [...items, item]);
        this.draftChecklistItemLabel.set('');
    }
    toggleChecklistItem(itemId, checked) {
        this.draftChecklist.update(items => items.map(item => {
            if (item.id !== itemId) {
                return item;
            }
            return {
                ...item,
                done: checked,
            };
        }));
    }
    removeChecklistItem(itemId) {
        this.draftChecklist.update(items => items.filter(item => item.id !== itemId));
    }
    onEditorStatusChange(value) {
        if (!value) {
            return;
        }
        this.draftStatus.set(value);
    }
    onEditorPriorityChange(value) {
        if (!value) {
            return;
        }
        this.draftPriority.set(value);
    }
    onEditorAssigneesChange(value) {
        if (!value) {
            this.draftAssignees.set([]);
            return;
        }
        this.draftAssignees.set(this._sanitizeAssignees(value));
    }
    onEditorStartDateChange(value) {
        this.draftStartDate.set(value);
    }
    onEditorEndDateChange(value) {
        this.draftEndDate.set(value);
    }
    onDraftAttachmentsChange(files) {
        this.draftAttachments.set([...(files ?? [])]);
    }
    submitTaskComment() {
        const sourceColumnId = this.editingColumnId();
        const taskId = this.editingTaskId();
        if (!sourceColumnId || !taskId) {
            return;
        }
        const comment = this.draftComment().trim();
        if (!comment) {
            return;
        }
        const previousTask = this._findTask(sourceColumnId, taskId);
        if (!previousTask) {
            return;
        }
        const targetColumnId = this._hasColumnId(previousTask.status) ? previousTask.status : sourceColumnId;
        const updatedTask = {
            ...previousTask,
            activity: this._appendCommentActivity(previousTask.activity ?? [], comment),
            commentsCount: (previousTask.commentsCount ?? previousTask.activity?.length ?? 0) + 1,
        };
        this._replaceTaskAcrossColumns(sourceColumnId, targetColumnId, updatedTask);
        this.zTaskSave.emit({
            task: updatedTask,
            columnId: targetColumnId,
            previousTask,
        });
        this.draftComment.set('');
    }
    onEditorVisibleChange(visible) {
        this.editorVisible.set(visible);
    }
    onEditorAfterClose() {
        if (this.editorVisible()) {
            return;
        }
        this._resetEditorState();
    }
    ngOnDestroy() {
        this._stopHorizontalAutoScroll();
    }
    _getStatusIcon(status) {
        const normalized = status.trim().toLowerCase();
        if (normalized === 'done') {
            return 'lucideCheckCircle';
        }
        if (normalized === 'in-progress' || normalized === 'inprogress' || normalized === 'doing') {
            return 'lucideTimer';
        }
        if (normalized === 'review' || normalized === 'qa') {
            return 'lucideListChecks';
        }
        if (normalized === 'blocked') {
            return 'lucideBan';
        }
        return 'lucideCircleDot';
    }
    _getStatusIconClass(status) {
        const normalized = status.trim().toLowerCase();
        if (normalized === 'done') {
            return 'text-emerald-500';
        }
        if (normalized === 'in-progress' || normalized === 'inprogress' || normalized === 'doing') {
            return 'text-primary';
        }
        if (normalized === 'review' || normalized === 'qa') {
            return 'text-indigo-500';
        }
        if (normalized === 'blocked') {
            return 'text-red-500';
        }
        return 'text-muted-foreground';
    }
    _getAssigneeInitials(name) {
        const normalized = name.trim();
        if (!normalized) {
            return '--';
        }
        const parts = normalized.split(/\s+/);
        const first = parts[0]?.charAt(0) ?? '';
        const second = parts.length > 1 ? (parts[parts.length - 1]?.charAt(0) ?? '') : '';
        return `${first}${second}`.toUpperCase();
    }
    _getAssigneeAvatarClasses(name) {
        const palette = [
            'bg-emerald-100 text-emerald-700',
            'bg-sky-100 text-sky-700',
            'bg-amber-100 text-amber-700',
            'bg-violet-100 text-violet-700',
            'bg-rose-100 text-rose-700',
            'bg-cyan-100 text-cyan-700',
        ];
        let hash = 0;
        for (let index = 0; index < name.length; index += 1) {
            hash = (hash * 31 + name.charCodeAt(index)) | 0;
        }
        const paletteIndex = Math.abs(hash) % palette.length;
        return `${palette[paletteIndex]} border-background shadow-xs border`;
    }
    _formatDueDate(value) {
        if (!value) {
            return '';
        }
        const parsed = new Date(value);
        if (Number.isNaN(parsed.getTime())) {
            return value;
        }
        return parsed.toLocaleDateString(undefined, {
            month: 'short',
            day: 'numeric',
        });
    }
    _formatDateTime(value) {
        const parsed = new Date(value);
        if (Number.isNaN(parsed.getTime())) {
            return value;
        }
        return parsed.toLocaleString(undefined, {
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
        });
    }
    _resetEditorState() {
        this.editingColumnId.set(null);
        this.editingTaskId.set(null);
        this.draftTitle.set('');
        this.draftDescription.set('');
        this.draftStatus.set('');
        this.draftPriority.set('medium');
        this.draftAssignees.set([]);
        this.draftStartDate.set(null);
        this.draftEndDate.set(null);
        this.draftChecklist.set([]);
        this.draftChecklistItemLabel.set('');
        this.draftAttachments.set([]);
        this.draftComment.set('');
    }
    _taskMatchesQuery(task, query) {
        const haystack = [
            task.code ?? '',
            task.title,
            this._stripHtml(task.description ?? ''),
            ...(task.assignees ?? []),
            task.startDate ?? '',
            task.endDate ?? '',
            task.dueDate ?? '',
        ]
            .join(' ')
            .toLowerCase();
        return haystack.includes(query);
    }
    _findTask(columnId, taskId) {
        const column = this.zColumns().find(item => item.id === columnId);
        if (!column) {
            return null;
        }
        const task = column.tasks.find(item => item.id === taskId);
        if (!task) {
            return null;
        }
        return task;
    }
    _findTaskByIndex(columnId, index) {
        const column = this.zColumns().find(item => item.id === columnId);
        if (!column) {
            return null;
        }
        if (index < 0 || index >= column.tasks.length) {
            return null;
        }
        return column.tasks[index] ?? null;
    }
    _reorderTasksWithinColumn(columnId, fromIndex, toIndex) {
        this.zColumns.update(columns => columns.map(column => {
            if (column.id !== columnId) {
                return column;
            }
            if (fromIndex < 0 || fromIndex >= column.tasks.length) {
                return column;
            }
            if (toIndex < 0) {
                return column;
            }
            const tasks = [...column.tasks];
            const lastIndex = tasks.length - 1;
            const clampedIndex = Math.max(0, Math.min(toIndex, lastIndex));
            moveItemInArray(tasks, fromIndex, clampedIndex);
            return {
                ...column,
                tasks,
            };
        }));
    }
    _moveTaskAcrossColumns(fromColumnId, toColumnId, fromIndex, toIndex, movedTask) {
        this.zColumns.update(columns => {
            const sourceColumn = columns.find(column => column.id === fromColumnId);
            const targetColumn = columns.find(column => column.id === toColumnId);
            if (!sourceColumn || !targetColumn) {
                return columns;
            }
            if (fromIndex < 0 || fromIndex >= sourceColumn.tasks.length) {
                return columns;
            }
            const sourceTasks = [...sourceColumn.tasks];
            sourceTasks.splice(fromIndex, 1);
            const targetTasks = [...targetColumn.tasks];
            const clampedIndex = Math.max(0, Math.min(toIndex, targetTasks.length));
            targetTasks.splice(clampedIndex, 0, movedTask);
            return columns.map(column => {
                if (column.id === fromColumnId) {
                    return {
                        ...column,
                        tasks: sourceTasks,
                    };
                }
                if (column.id === toColumnId) {
                    return {
                        ...column,
                        tasks: targetTasks,
                    };
                }
                return column;
            });
        });
    }
    _replaceTaskAcrossColumns(sourceColumnId, targetColumnId, task) {
        this.zColumns.update(columns => {
            if (sourceColumnId === targetColumnId) {
                return columns.map(column => {
                    if (column.id !== sourceColumnId) {
                        return column;
                    }
                    return {
                        ...column,
                        tasks: column.tasks.map(currentTask => {
                            if (currentTask.id !== task.id) {
                                return currentTask;
                            }
                            return task;
                        }),
                    };
                });
            }
            return columns.map(column => {
                if (column.id === sourceColumnId) {
                    return {
                        ...column,
                        tasks: column.tasks.filter(currentTask => currentTask.id !== task.id),
                    };
                }
                if (column.id === targetColumnId) {
                    return {
                        ...column,
                        tasks: [task, ...column.tasks.filter(currentTask => currentTask.id !== task.id)],
                    };
                }
                return column;
            });
        });
    }
    _hasColumnId(columnId) {
        return this.zColumns().some(column => column.id === columnId);
    }
    _sanitizeAssignees(value) {
        const normalized = value.map(item => item.trim()).filter(item => item.length > 0);
        return Array.from(new Set(normalized));
    }
    _appendCommentActivity(existing, comment) {
        if (!comment) {
            return [...(existing ?? [])];
        }
        return [
            {
                id: this._createId('activity'),
                actor: this._zTranslate.instant('i18n_z_ui_kanban_activity_you'),
                action: comment,
                createdAt: new Date().toISOString(),
            },
            ...(existing ?? []),
        ];
    }
    _normalizeEditorContent(value) {
        const normalized = value.trim();
        if (!normalized) {
            return undefined;
        }
        const text = this._stripHtml(normalized).trim();
        if (!text) {
            return undefined;
        }
        return normalized;
    }
    _stripHtml(value) {
        if (!value) {
            return '';
        }
        return value
            .replace(/<[^>]+>/g, ' ')
            .replace(/&nbsp;/g, ' ')
            .replace(/\s+/g, ' ')
            .trim();
    }
    _toDate(value) {
        if (!value) {
            return null;
        }
        const parsed = new Date(`${value}T00:00:00`);
        if (Number.isNaN(parsed.getTime())) {
            return null;
        }
        return parsed;
    }
    _toDateOnlyString(value) {
        if (!value) {
            return undefined;
        }
        const year = value.getFullYear();
        const month = `${value.getMonth() + 1}`.padStart(2, '0');
        const day = `${value.getDate()}`.padStart(2, '0');
        return `${year}-${month}-${day}`;
    }
    _normalizeDateRange(startDate, endDate) {
        if (!startDate || !endDate) {
            return {
                startDate,
                endDate,
            };
        }
        if (startDate.getTime() <= endDate.getTime()) {
            return {
                startDate,
                endDate,
            };
        }
        return {
            startDate: endDate,
            endDate: startDate,
        };
    }
    _updateHorizontalAutoScroll(pointerX) {
        const viewport = this.boardViewportRef()?.nativeElement;
        if (!viewport) {
            this._stopHorizontalAutoScroll();
            return;
        }
        const rect = viewport.getBoundingClientRect();
        const threshold = Math.min(120, rect.width * 0.2);
        if (threshold <= 0) {
            this._stopHorizontalAutoScroll();
            return;
        }
        const maxSpeed = 18;
        const leftEdge = rect.left + threshold;
        if (pointerX < leftEdge) {
            const ratio = Math.min(1, (leftEdge - pointerX) / threshold);
            this._startHorizontalAutoScroll(-maxSpeed * ratio);
            return;
        }
        const rightEdge = rect.right - threshold;
        if (pointerX > rightEdge) {
            const ratio = Math.min(1, (pointerX - rightEdge) / threshold);
            this._startHorizontalAutoScroll(maxSpeed * ratio);
            return;
        }
        this._stopHorizontalAutoScroll();
    }
    _startHorizontalAutoScroll(velocity) {
        if (typeof window === 'undefined') {
            return;
        }
        if (!Number.isFinite(velocity) || Math.abs(velocity) < 0.8) {
            this._stopHorizontalAutoScroll();
            return;
        }
        this._dragAutoScrollVelocity = velocity;
        if (this._dragAutoScrollRafId !== null) {
            return;
        }
        const tick = () => {
            if (!this.isDraggingTask()) {
                this._stopHorizontalAutoScroll();
                return;
            }
            const viewport = this.boardViewportRef()?.nativeElement;
            if (!viewport) {
                this._stopHorizontalAutoScroll();
                return;
            }
            const currentScrollLeft = viewport.scrollLeft;
            const maxScrollLeft = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
            const nextScrollLeft = Math.min(maxScrollLeft, Math.max(0, currentScrollLeft + this._dragAutoScrollVelocity));
            if (nextScrollLeft === currentScrollLeft) {
                this._stopHorizontalAutoScroll();
                return;
            }
            viewport.scrollLeft = nextScrollLeft;
            this._dragAutoScrollRafId = window.requestAnimationFrame(tick);
        };
        this._dragAutoScrollRafId = window.requestAnimationFrame(tick);
    }
    _stopHorizontalAutoScroll() {
        if (typeof window !== 'undefined' && this._dragAutoScrollRafId !== null) {
            window.cancelAnimationFrame(this._dragAutoScrollRafId);
        }
        this._dragAutoScrollRafId = null;
        this._dragAutoScrollVelocity = 0;
    }
    _createId(prefix) {
        if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
            return `${prefix}-${crypto.randomUUID()}`;
        }
        return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZKanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZKanbanComponent, isStandalone: true, selector: "z-kanban", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zSubtitle: { classPropertyName: "zSubtitle", publicName: "zSubtitle", isSignal: true, isRequired: false, transformFunction: null }, zSearch: { classPropertyName: "zSearch", publicName: "zSearch", isSignal: true, isRequired: false, transformFunction: null }, zShowToolbar: { classPropertyName: "zShowToolbar", publicName: "zShowToolbar", isSignal: true, isRequired: false, transformFunction: null }, zAllowCreateTask: { classPropertyName: "zAllowCreateTask", publicName: "zAllowCreateTask", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zDensity: { classPropertyName: "zDensity", publicName: "zDensity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zTaskDrop: "zTaskDrop", zTaskSave: "zTaskSave", zTaskClick: "zTaskClick", zTaskCreate: "zTaskCreate", zColumns: "zColumnsChange", zSearch: "zSearchChange" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "boardViewportRef", first: true, predicate: ["boardViewport"], descendants: true, isSignal: true }], exportAs: ["zKanban"], ngImport: i0, template: "<div class=\"flex h-full min-h-0 min-w-0 flex-col gap-5\">\n  @if (zShowToolbar()) {\n    <header class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n      <div class=\"min-w-0\">\n        <h2 class=\"text-foreground truncate text-xl font-bold\">{{ zTitle() | translate }}</h2>\n        <p class=\"text-muted-foreground text-sm\">{{ zSubtitle() | translate }}</p>\n      </div>\n\n      <div class=\"flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center\">\n        <z-input\n          class=\"w-full sm:w-80\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"200\"\n          [zPlaceholder]=\"'i18n_z_ui_kanban_search_placeholder' | translate\"\n          [ngModel]=\"zSearch()\"\n          (zOnSearch)=\"onBoardSearchChange($event)\" />\n\n        @if (zAllowCreateTask()) {\n          <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucidePlus\" (click)=\"createTaskInFirstColumn()\">\n            {{ 'i18n_z_ui_common_add' | translate }}\n          </z-button>\n        }\n      </div>\n    </header>\n  }\n\n  @if (isSearchActive()) {\n    <p class=\"text-muted-foreground text-xs\">\n      {{ 'i18n_z_ui_kanban_drag_disabled_while_search' | translate }}\n    </p>\n  }\n\n  <div #boardViewport class=\"z-kanban-board min-h-0 flex-1 overflow-x-auto pb-2\">\n    <div class=\"flex h-full min-h-[25rem] min-w-max items-stretch gap-4\">\n      @for (column of boardColumnsView(); track column.id) {\n        <section [class]=\"columnClass()\">\n          <header class=\"mb-2 flex items-center justify-between gap-2 px-0.5\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <h3 class=\"text-foreground truncate text-xs font-bold tracking-wide uppercase\">\n                {{ column.title | translate }}\n              </h3>\n              <span\n                class=\"bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-bold\">\n                {{ column.taskCount }}\n              </span>\n            </div>\n\n            @if (zAllowCreateTask()) {\n              <button\n                type=\"button\"\n                class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 cursor-pointer items-center justify-center rounded-md transition-colors\"\n                (click)=\"createTask(column.id)\">\n                <z-icon zType=\"lucidePlus\" zSize=\"16\" />\n              </button>\n            }\n          </header>\n\n          <div\n            cdkDropList\n            [id]=\"column.id\"\n            [cdkDropListData]=\"column.rawTasks\"\n            [cdkDropListConnectedTo]=\"connectedDropListIds()\"\n            [cdkDropListDisabled]=\"zDisabled() || isSearchActive()\"\n            class=\"kanban-drop-list -mr-1 flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-0.5 pr-1\"\n            (cdkDropListDropped)=\"onTaskDrop($event, column.id)\">\n            @if (column.taskCount === 0) {\n              <div\n                class=\"border-border/70 text-muted-foreground flex h-24 items-center justify-center rounded-lg border border-dashed px-3 text-center text-xs\">\n                @if (isSearchActive()) {\n                  {{ 'i18n_z_ui_kanban_no_matches' | translate }}\n                } @else {\n                  {{ 'i18n_z_ui_kanban_drop_here' | translate }}\n                }\n              </div>\n            }\n\n            @for (task of column.tasks; track task.id) {\n              <article\n                cdkDrag\n                cdkDragPreviewClass=\"z-kanban-drag-preview\"\n                cdkDragPlaceholderClass=\"z-kanban-drag-placeholder\"\n                [cdkDragData]=\"{ columnId: column.id, taskId: task.id }\"\n                [cdkDragDisabled]=\"zDisabled() || isSearchActive()\"\n                [class]=\"'kanban-card shrink-0 ' + task.taskCardClass\"\n                (cdkDragStarted)=\"onTaskDragStarted()\"\n                (cdkDragMoved)=\"onTaskDragMoved($event)\"\n                (cdkDragEnded)=\"onTaskDragEnded($event)\"\n                (click)=\"onTaskCardClick(column.id, task.id)\">\n                <div class=\"flex items-start justify-between gap-2\">\n                  <div class=\"min-w-0 space-y-1\">\n                    @if (task.code) {\n                      <p class=\"text-muted-foreground text-[10px] font-semibold tracking-wide uppercase\">\n                        {{ task.code }}\n                      </p>\n                    }\n                    <h4 class=\"line-clamp-2 text-sm leading-5 font-semibold\">{{ task.title }}</h4>\n                  </div>\n\n                  <button\n                    cdkDragHandle\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-6 shrink-0 cursor-grab items-center justify-center rounded-md transition-colors\"\n                    (click)=\"onTaskHandleClick($event)\">\n                    <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                  </button>\n                </div>\n\n                <div class=\"flex items-center gap-2\">\n                  <span [class]=\"task.priorityBadgeClass\">\n                    {{ task.priorityLabelKey | translate }}\n                  </span>\n                  @if (task.completed) {\n                    <span class=\"inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-500\">\n                      <z-icon zType=\"lucideCircleCheck\" zSize=\"12\" />\n                      {{ 'i18n_z_ui_kanban_done' | translate }}\n                    </span>\n                  }\n                </div>\n\n                @if (task.descriptionPreview) {\n                  <p class=\"text-muted-foreground line-clamp-3 text-xs leading-4\">{{ task.descriptionPreview }}</p>\n                }\n\n                <div class=\"text-muted-foreground flex flex-wrap items-center gap-3 text-[11px]\">\n                  @if (task.dueDateLabel) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucideCalendar\" zSize=\"12\" />\n                      {{ task.dueDateLabel }}\n                    </span>\n                  }\n\n                  @if (task.commentsCount > 0) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucideMessageSquare\" zSize=\"12\" />\n                      {{ task.commentsCount }}\n                    </span>\n                  }\n\n                  @if (task.attachmentCount > 0) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucidePaperclip\" zSize=\"12\" />\n                      {{ task.attachmentCount }}\n                    </span>\n                  }\n\n                  @if (task.checklistCount > 0) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucideListChecks\" zSize=\"12\" />\n                      {{ task.checklistDoneCount }}/{{ task.checklistCount }}\n                    </span>\n                  }\n                </div>\n\n                <footer class=\"flex items-center justify-between gap-2\">\n                  <div class=\"flex -space-x-2\">\n                    @for (assignee of task.visibleAssignees; track assignee.name) {\n                      <span\n                        z-tooltip\n                        zAlwaysShow\n                        zPosition=\"top\"\n                        [zContent]=\"assignee.name\"\n                        class=\"relative inline-flex size-6 items-center justify-center rounded-full text-[10px] font-bold\"\n                        [class]=\"assignee.className\"\n                        [style.zIndex]=\"assignee.zIndex\">\n                        {{ assignee.initials }}\n                      </span>\n                    }\n                    @if (task.hiddenAssigneesCount > 0) {\n                      <span\n                        z-tooltip\n                        zAlwaysShow\n                        zPosition=\"top\"\n                        [zContent]=\"task.hiddenAssigneesLabel\"\n                        class=\"bg-muted text-muted-foreground border-background relative inline-flex size-6 items-center justify-center rounded-full border text-[10px] font-bold shadow-xs\"\n                        [style.zIndex]=\"20\">\n                        +{{ task.hiddenAssigneesCount }}\n                      </span>\n                    }\n                  </div>\n\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground\" />\n                </footer>\n              </article>\n            }\n          </div>\n        </section>\n      }\n    </div>\n  </div>\n</div>\n\n<z-modal\n  [zVisible]=\"editorVisible()\"\n  zTitle=\"i18n_z_ui_kanban_editor_title\"\n  [zDescription]=\"editorMeta()\"\n  [zOkText]=\"'i18n_z_ui_common_save' | translate\"\n  [zCancelText]=\"'i18n_z_ui_common_cancel' | translate\"\n  zWidth=\"min(96vw, 72rem)\"\n  zOverlay=\"blur\"\n  [zOkDisabled]=\"isEditorSaveDisabled()\"\n  (zVisibleChange)=\"onEditorVisibleChange($event)\"\n  (zAfterClose)=\"onEditorAfterClose()\"\n  (zOk)=\"saveTaskChanges()\"\n  (zCancel)=\"closeEditor()\">\n  @if (activeTask()) {\n    <div class=\"grid gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]\">\n      <div class=\"space-y-5\">\n        <section class=\"space-y-2\">\n          <z-input\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_title' | translate\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_title_placeholder' | translate\"\n            [zRequired]=\"true\"\n            [ngModel]=\"draftTitle()\"\n            (ngModelChange)=\"draftTitle.set($event)\" />\n        </section>\n\n        <section class=\"space-y-2\">\n          <z-editor\n            zSize=\"sm\"\n            [zLabel]=\"'i18n_z_ui_kanban_description' | translate\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_description_placeholder' | translate\"\n            [ngModel]=\"draftDescription()\"\n            (ngModelChange)=\"draftDescription.set($event)\" />\n        </section>\n\n        <section class=\"grid gap-3 md:grid-cols-2\">\n          <ng-template #statusSelectedTpl let-option>\n            <span class=\"inline-flex min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"statusIconClassByValue()[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <ng-template #statusOptionTpl let-option let-selected=\"selected\">\n            <span class=\"inline-flex w-full min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"statusIconClassByValue()[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\" [class.font-medium]=\"selected\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <ng-template #prioritySelectedTpl let-option>\n            <span class=\"inline-flex min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"priorityIconClassByValue[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <ng-template #priorityOptionTpl let-option let-selected=\"selected\">\n            <span class=\"inline-flex w-full min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"priorityIconClassByValue[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\" [class.font-medium]=\"selected\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <z-select\n            class=\"w-full\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_status' | translate\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"statusOptions()\"\n            [zSelectedTemplate]=\"statusSelectedTpl\"\n            [zOptionTemplate]=\"statusOptionTpl\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_status_placeholder' | translate\"\n            [ngModel]=\"draftStatus()\"\n            (ngModelChange)=\"onEditorStatusChange($event)\" />\n\n          <z-select\n            class=\"w-full\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_priority' | translate\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"prioritySelectOptions()\"\n            [zSelectedTemplate]=\"prioritySelectedTpl\"\n            [zOptionTemplate]=\"priorityOptionTpl\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_priority_placeholder' | translate\"\n            [ngModel]=\"draftPriority()\"\n            (ngModelChange)=\"onEditorPriorityChange($event)\" />\n\n          <z-select\n            class=\"w-full md:col-span-2\"\n            zMode=\"tags\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_assignees' | translate\"\n            [zAllowClear]=\"true\"\n            [zOptions]=\"assigneeOptions()\"\n            [zMaxTagCount]=\"5\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_assignees_select_placeholder' | translate\"\n            [ngModel]=\"draftAssignees()\"\n            (ngModelChange)=\"onEditorAssigneesChange($event)\" />\n\n          <z-calendar\n            zMode=\"single\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_start_date' | translate\"\n            zAllowClear\n            zValueType=\"date\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_start_date' | translate\"\n            [ngModel]=\"draftStartDate()\"\n            (ngModelChange)=\"onEditorStartDateChange($event)\" />\n\n          <z-calendar\n            zMode=\"single\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_end_date' | translate\"\n            zAllowClear\n            zValueType=\"date\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_end_date' | translate\"\n            [ngModel]=\"draftEndDate()\"\n            (ngModelChange)=\"onEditorEndDateChange($event)\" />\n        </section>\n\n        <section class=\"space-y-3\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <h4 class=\"text-sm font-semibold\">\n              {{ 'i18n_z_ui_kanban_checklist' | translate }} ({{ checklistDoneCount() }}/{{ draftChecklist().length }})\n            </h4>\n            <span class=\"text-muted-foreground text-xs font-semibold\">{{ checklistProgress() }}%</span>\n          </div>\n\n          <div class=\"bg-muted h-2 w-full rounded-full\">\n            <div class=\"bg-primary h-2 rounded-full transition-all\" [style.width.%]=\"checklistProgress()\"></div>\n          </div>\n\n          <div class=\"max-h-44 space-y-1 overflow-y-auto\">\n            @for (item of draftChecklist(); track item.id) {\n              <div [class]=\"item.done ? checklistDoneRowClass : checklistPendingRowClass\">\n                <z-checkbox\n                  [class]=\"item.done ? 'min-w-0 flex-1 line-through' : 'min-w-0 flex-1'\"\n                  [zChecked]=\"item.done\"\n                  [zText]=\"item.label\"\n                  (zChange)=\"toggleChecklistItem(item.id, $event)\" />\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 ml-auto inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n                  (click)=\"removeChecklistItem(item.id)\">\n                  <z-icon zType=\"lucideTrash2\" zSize=\"12\" />\n                </button>\n              </div>\n            } @empty {\n              <p class=\"text-muted-foreground bg-muted/35 rounded-md px-3 py-2 text-xs\">\n                {{ 'i18n_z_ui_kanban_no_checklist_items' | translate }}\n              </p>\n            }\n          </div>\n\n          <div class=\"flex items-end gap-2\">\n            <z-input\n              class=\"flex-1\"\n              zSize=\"lg\"\n              [zPlaceholder]=\"'i18n_z_ui_kanban_checklist_add_placeholder' | translate\"\n              [ngModel]=\"draftChecklistItemLabel()\"\n              (ngModelChange)=\"draftChecklistItemLabel.set($event)\"\n              (zOnEnter)=\"addChecklistItem()\" />\n            <button\n              type=\"button\"\n              zSize=\"lg\"\n              z-button\n              zType=\"outline\"\n              zTypeIcon=\"lucidePlus\"\n              (click)=\"addChecklistItem()\">\n              {{ 'i18n_z_ui_common_add' | translate }}\n            </button>\n          </div>\n        </section>\n\n        <section class=\"space-y-2\">\n          <z-upload\n            [zLabel]=\"'i18n_z_ui_kanban_attachments' | translate\"\n            [zNote]=\"'i18n_z_ui_kanban_attachments_note' | translate\"\n            [zMultipleFile]=\"true\"\n            [zShowProgress]=\"true\"\n            [ngModel]=\"draftAttachments()\"\n            (ngModelChange)=\"onDraftAttachmentsChange($event)\" />\n        </section>\n      </div>\n\n      <aside\n        class=\"bg-muted/25 border-border/70 flex h-[34rem] min-h-0 flex-col overflow-hidden rounded-lg border p-4 shadow-xs xl:h-[38rem]\">\n        <section class=\"flex min-h-0 flex-1 flex-col gap-1.5\">\n          <label class=\"text-muted-foreground text-[11px] font-semibold tracking-widest uppercase\">\n            {{ 'i18n_z_ui_kanban_activity' | translate }}\n          </label>\n          <div class=\"-mr-3 min-h-0 flex-1 space-y-2 overflow-y-auto pr-3 pb-2\">\n            @for (entry of activeTaskActivityView(); track entry.id) {\n              <div class=\"border-border/70 bg-background/60 rounded-md border px-3 py-2\">\n                <p class=\"text-xs font-semibold\">{{ entry.actor }}</p>\n                <p class=\"text-muted-foreground mt-1 text-xs leading-4\">{{ entry.action }}</p>\n                <p class=\"text-muted-foreground mt-1 text-[10px]\">{{ entry.createdAtLabel }}</p>\n              </div>\n            } @empty {\n              <p class=\"text-muted-foreground bg-muted/40 rounded-md px-3 py-2 text-xs\">\n                {{ 'i18n_z_ui_kanban_no_activity' | translate }}\n              </p>\n            }\n          </div>\n        </section>\n\n        <section class=\"border-border/70 mt-3 shrink-0 space-y-2 border-t pt-3\">\n          <z-input\n            zType=\"textarea\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_add_comment' | translate\"\n            [zRows]=\"3\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_comment_placeholder' | translate\"\n            [ngModel]=\"draftComment()\"\n            (ngModelChange)=\"draftComment.set($event)\" />\n\n          <div class=\"flex justify-end pt-2\">\n            <button\n              type=\"button\"\n              zTypeIcon=\"lucideSend\"\n              z-button\n              [disabled]=\"isCommentSubmitDisabled()\"\n              (click)=\"submitTaskComment()\">\n              {{ 'i18n_z_ui_kanban_comment_submit' | translate }}\n            </button>\n          </div>\n        </section>\n      </aside>\n    </div>\n  }\n</z-modal>\n", styles: [":host{display:block;height:100%;min-height:0}.z-kanban-board{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--muted-foreground) 45%,transparent) transparent}.z-kanban-board::-webkit-scrollbar{height:8px}.z-kanban-board::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--muted-foreground) 38%,transparent);border-radius:9999px}.z-kanban-board::-webkit-scrollbar-track{background:transparent}.kanban-drop-list{scrollbar-width:thin}.kanban-card{cursor:pointer}.kanban-card.cdk-drag-dragging{cursor:grabbing;transform:rotate(.35deg)}.kanban-drop-list.cdk-drop-list-dragging .kanban-card:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(.2,0,0,1)}:host ::ng-deep .z-kanban-drag-preview{border:1px solid color-mix(in oklab,var(--primary) 35%,var(--border));box-shadow:0 14px 32px color-mix(in oklab,var(--foreground) 15%,transparent);transform:rotate(-.2deg)}:host ::ng-deep .z-kanban-drag-placeholder{opacity:.2;border:1px dashed color-mix(in oklab,var(--primary) 38%,var(--border));background:color-mix(in oklab,var(--primary) 8%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCalendarComponent, selector: "z-calendar", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zShowTime", "zTimeFormat", "zShowHour", "zShowMinute", "zShowSecond", "zQuickSelect", "zAllowEdit", "zShortTime", "zAllowClear", "zFormat", "zMinDate", "zMaxDate", "zValueType", "zValidators", "zShowOk", "zOkText", "zShowCancel", "zCancelText", "zDisabledDate", "zScrollClose", "zDefaultTime", "zRangeDefaultTime"], outputs: ["zControl", "zChange", "zOnBlur", "zOnFocus", "zEvent"], exportAs: ["zCalendar"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZEditorComponent, selector: "z-editor", inputs: ["class", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zContentType", "zToolbar", "zTipTap", "zValidators"], outputs: ["zOnChange", "zOnFocus", "zOnBlur", "zControl", "zEvent"], exportAs: ["zEditor"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: ZModalComponent, selector: "z-modal", inputs: ["class", "zBodyClass", "zVisible", "zTitle", "zDescription", "zWidth", "zClosable", "zMaskClosable", "zDisableShadow", "zHeaderBorder", "zFooterBorder", "zHideHeader", "zHideFooter", "zOkText", "zCancelText", "zOkDestructive", "zOkDisabled", "zLoading", "zContentLoading", "zSkeletonRows", "zOverlay"], outputs: ["zOk", "zCancel", "zAfterClose", "zScrollbar", "zVisibleChange"], exportAs: ["zModal"] }, { kind: "component", type: ZSelectComponent, selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZUploadComponent, selector: "z-upload", inputs: ["class", "zLabel", "zLabelClass", "zNote", "zSize", "zAcceptFile", "zMultipleFile", "zMaxSize", "zMaxFiles", "zRequired", "zDisabled", "zReadonly", "zLoading", "zShowProgress", "zValidators"], outputs: ["zOnUpload", "zOnRemove", "zOnDownload", "zOnError", "zOnFileChange", "zOnDragover", "zOnDragleave", "zOnDrop", "zControl", "zEvent"], exportAs: ["zUpload"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZKanbanComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-kanban', imports: [
                        FormsModule,
                        CdkDropList,
                        CdkDrag,
                        CdkDragHandle,
                        ZButtonComponent,
                        ZCalendarComponent,
                        ZCheckboxComponent,
                        ZEditorComponent,
                        ZIconComponent,
                        ZInputComponent,
                        ZModalComponent,
                        ZSelectComponent,
                        ZTooltipDirective,
                        ZUploadComponent,
                        TranslatePipe,
                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class]': 'hostClasses()',
                    }, exportAs: 'zKanban', template: "<div class=\"flex h-full min-h-0 min-w-0 flex-col gap-5\">\n  @if (zShowToolbar()) {\n    <header class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n      <div class=\"min-w-0\">\n        <h2 class=\"text-foreground truncate text-xl font-bold\">{{ zTitle() | translate }}</h2>\n        <p class=\"text-muted-foreground text-sm\">{{ zSubtitle() | translate }}</p>\n      </div>\n\n      <div class=\"flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center\">\n        <z-input\n          class=\"w-full sm:w-80\"\n          zSize=\"sm\"\n          [zSearch]=\"true\"\n          [zDebounce]=\"200\"\n          [zPlaceholder]=\"'i18n_z_ui_kanban_search_placeholder' | translate\"\n          [ngModel]=\"zSearch()\"\n          (zOnSearch)=\"onBoardSearchChange($event)\" />\n\n        @if (zAllowCreateTask()) {\n          <z-button zType=\"outline\" zSize=\"sm\" zTypeIcon=\"lucidePlus\" (click)=\"createTaskInFirstColumn()\">\n            {{ 'i18n_z_ui_common_add' | translate }}\n          </z-button>\n        }\n      </div>\n    </header>\n  }\n\n  @if (isSearchActive()) {\n    <p class=\"text-muted-foreground text-xs\">\n      {{ 'i18n_z_ui_kanban_drag_disabled_while_search' | translate }}\n    </p>\n  }\n\n  <div #boardViewport class=\"z-kanban-board min-h-0 flex-1 overflow-x-auto pb-2\">\n    <div class=\"flex h-full min-h-[25rem] min-w-max items-stretch gap-4\">\n      @for (column of boardColumnsView(); track column.id) {\n        <section [class]=\"columnClass()\">\n          <header class=\"mb-2 flex items-center justify-between gap-2 px-0.5\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <h3 class=\"text-foreground truncate text-xs font-bold tracking-wide uppercase\">\n                {{ column.title | translate }}\n              </h3>\n              <span\n                class=\"bg-muted text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-bold\">\n                {{ column.taskCount }}\n              </span>\n            </div>\n\n            @if (zAllowCreateTask()) {\n              <button\n                type=\"button\"\n                class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 cursor-pointer items-center justify-center rounded-md transition-colors\"\n                (click)=\"createTask(column.id)\">\n                <z-icon zType=\"lucidePlus\" zSize=\"16\" />\n              </button>\n            }\n          </header>\n\n          <div\n            cdkDropList\n            [id]=\"column.id\"\n            [cdkDropListData]=\"column.rawTasks\"\n            [cdkDropListConnectedTo]=\"connectedDropListIds()\"\n            [cdkDropListDisabled]=\"zDisabled() || isSearchActive()\"\n            class=\"kanban-drop-list -mr-1 flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-0.5 pr-1\"\n            (cdkDropListDropped)=\"onTaskDrop($event, column.id)\">\n            @if (column.taskCount === 0) {\n              <div\n                class=\"border-border/70 text-muted-foreground flex h-24 items-center justify-center rounded-lg border border-dashed px-3 text-center text-xs\">\n                @if (isSearchActive()) {\n                  {{ 'i18n_z_ui_kanban_no_matches' | translate }}\n                } @else {\n                  {{ 'i18n_z_ui_kanban_drop_here' | translate }}\n                }\n              </div>\n            }\n\n            @for (task of column.tasks; track task.id) {\n              <article\n                cdkDrag\n                cdkDragPreviewClass=\"z-kanban-drag-preview\"\n                cdkDragPlaceholderClass=\"z-kanban-drag-placeholder\"\n                [cdkDragData]=\"{ columnId: column.id, taskId: task.id }\"\n                [cdkDragDisabled]=\"zDisabled() || isSearchActive()\"\n                [class]=\"'kanban-card shrink-0 ' + task.taskCardClass\"\n                (cdkDragStarted)=\"onTaskDragStarted()\"\n                (cdkDragMoved)=\"onTaskDragMoved($event)\"\n                (cdkDragEnded)=\"onTaskDragEnded($event)\"\n                (click)=\"onTaskCardClick(column.id, task.id)\">\n                <div class=\"flex items-start justify-between gap-2\">\n                  <div class=\"min-w-0 space-y-1\">\n                    @if (task.code) {\n                      <p class=\"text-muted-foreground text-[10px] font-semibold tracking-wide uppercase\">\n                        {{ task.code }}\n                      </p>\n                    }\n                    <h4 class=\"line-clamp-2 text-sm leading-5 font-semibold\">{{ task.title }}</h4>\n                  </div>\n\n                  <button\n                    cdkDragHandle\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-6 shrink-0 cursor-grab items-center justify-center rounded-md transition-colors\"\n                    (click)=\"onTaskHandleClick($event)\">\n                    <z-icon zType=\"lucideGripVertical\" zSize=\"14\" />\n                  </button>\n                </div>\n\n                <div class=\"flex items-center gap-2\">\n                  <span [class]=\"task.priorityBadgeClass\">\n                    {{ task.priorityLabelKey | translate }}\n                  </span>\n                  @if (task.completed) {\n                    <span class=\"inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-500\">\n                      <z-icon zType=\"lucideCircleCheck\" zSize=\"12\" />\n                      {{ 'i18n_z_ui_kanban_done' | translate }}\n                    </span>\n                  }\n                </div>\n\n                @if (task.descriptionPreview) {\n                  <p class=\"text-muted-foreground line-clamp-3 text-xs leading-4\">{{ task.descriptionPreview }}</p>\n                }\n\n                <div class=\"text-muted-foreground flex flex-wrap items-center gap-3 text-[11px]\">\n                  @if (task.dueDateLabel) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucideCalendar\" zSize=\"12\" />\n                      {{ task.dueDateLabel }}\n                    </span>\n                  }\n\n                  @if (task.commentsCount > 0) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucideMessageSquare\" zSize=\"12\" />\n                      {{ task.commentsCount }}\n                    </span>\n                  }\n\n                  @if (task.attachmentCount > 0) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucidePaperclip\" zSize=\"12\" />\n                      {{ task.attachmentCount }}\n                    </span>\n                  }\n\n                  @if (task.checklistCount > 0) {\n                    <span class=\"inline-flex items-center gap-1\">\n                      <z-icon zType=\"lucideListChecks\" zSize=\"12\" />\n                      {{ task.checklistDoneCount }}/{{ task.checklistCount }}\n                    </span>\n                  }\n                </div>\n\n                <footer class=\"flex items-center justify-between gap-2\">\n                  <div class=\"flex -space-x-2\">\n                    @for (assignee of task.visibleAssignees; track assignee.name) {\n                      <span\n                        z-tooltip\n                        zAlwaysShow\n                        zPosition=\"top\"\n                        [zContent]=\"assignee.name\"\n                        class=\"relative inline-flex size-6 items-center justify-center rounded-full text-[10px] font-bold\"\n                        [class]=\"assignee.className\"\n                        [style.zIndex]=\"assignee.zIndex\">\n                        {{ assignee.initials }}\n                      </span>\n                    }\n                    @if (task.hiddenAssigneesCount > 0) {\n                      <span\n                        z-tooltip\n                        zAlwaysShow\n                        zPosition=\"top\"\n                        [zContent]=\"task.hiddenAssigneesLabel\"\n                        class=\"bg-muted text-muted-foreground border-background relative inline-flex size-6 items-center justify-center rounded-full border text-[10px] font-bold shadow-xs\"\n                        [style.zIndex]=\"20\">\n                        +{{ task.hiddenAssigneesCount }}\n                      </span>\n                    }\n                  </div>\n\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"text-muted-foreground\" />\n                </footer>\n              </article>\n            }\n          </div>\n        </section>\n      }\n    </div>\n  </div>\n</div>\n\n<z-modal\n  [zVisible]=\"editorVisible()\"\n  zTitle=\"i18n_z_ui_kanban_editor_title\"\n  [zDescription]=\"editorMeta()\"\n  [zOkText]=\"'i18n_z_ui_common_save' | translate\"\n  [zCancelText]=\"'i18n_z_ui_common_cancel' | translate\"\n  zWidth=\"min(96vw, 72rem)\"\n  zOverlay=\"blur\"\n  [zOkDisabled]=\"isEditorSaveDisabled()\"\n  (zVisibleChange)=\"onEditorVisibleChange($event)\"\n  (zAfterClose)=\"onEditorAfterClose()\"\n  (zOk)=\"saveTaskChanges()\"\n  (zCancel)=\"closeEditor()\">\n  @if (activeTask()) {\n    <div class=\"grid gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]\">\n      <div class=\"space-y-5\">\n        <section class=\"space-y-2\">\n          <z-input\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_title' | translate\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_title_placeholder' | translate\"\n            [zRequired]=\"true\"\n            [ngModel]=\"draftTitle()\"\n            (ngModelChange)=\"draftTitle.set($event)\" />\n        </section>\n\n        <section class=\"space-y-2\">\n          <z-editor\n            zSize=\"sm\"\n            [zLabel]=\"'i18n_z_ui_kanban_description' | translate\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_description_placeholder' | translate\"\n            [ngModel]=\"draftDescription()\"\n            (ngModelChange)=\"draftDescription.set($event)\" />\n        </section>\n\n        <section class=\"grid gap-3 md:grid-cols-2\">\n          <ng-template #statusSelectedTpl let-option>\n            <span class=\"inline-flex min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"statusIconClassByValue()[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <ng-template #statusOptionTpl let-option let-selected=\"selected\">\n            <span class=\"inline-flex w-full min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"statusIconClassByValue()[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\" [class.font-medium]=\"selected\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <ng-template #prioritySelectedTpl let-option>\n            <span class=\"inline-flex min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"priorityIconClassByValue[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <ng-template #priorityOptionTpl let-option let-selected=\"selected\">\n            <span class=\"inline-flex w-full min-w-0 items-center gap-2\">\n              <z-icon\n                [zType]=\"option.icon || 'lucideCircleDot'\"\n                zSize=\"14\"\n                [class]=\"priorityIconClassByValue[option.value] + ' shrink-0'\" />\n              <span class=\"truncate\" [class.font-medium]=\"selected\">{{ option.label }}</span>\n            </span>\n          </ng-template>\n\n          <z-select\n            class=\"w-full\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_status' | translate\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"statusOptions()\"\n            [zSelectedTemplate]=\"statusSelectedTpl\"\n            [zOptionTemplate]=\"statusOptionTpl\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_status_placeholder' | translate\"\n            [ngModel]=\"draftStatus()\"\n            (ngModelChange)=\"onEditorStatusChange($event)\" />\n\n          <z-select\n            class=\"w-full\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_priority' | translate\"\n            [zAllowClear]=\"false\"\n            [zOptions]=\"prioritySelectOptions()\"\n            [zSelectedTemplate]=\"prioritySelectedTpl\"\n            [zOptionTemplate]=\"priorityOptionTpl\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_priority_placeholder' | translate\"\n            [ngModel]=\"draftPriority()\"\n            (ngModelChange)=\"onEditorPriorityChange($event)\" />\n\n          <z-select\n            class=\"w-full md:col-span-2\"\n            zMode=\"tags\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_assignees' | translate\"\n            [zAllowClear]=\"true\"\n            [zOptions]=\"assigneeOptions()\"\n            [zMaxTagCount]=\"5\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_assignees_select_placeholder' | translate\"\n            [ngModel]=\"draftAssignees()\"\n            (ngModelChange)=\"onEditorAssigneesChange($event)\" />\n\n          <z-calendar\n            zMode=\"single\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_start_date' | translate\"\n            zAllowClear\n            zValueType=\"date\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_start_date' | translate\"\n            [ngModel]=\"draftStartDate()\"\n            (ngModelChange)=\"onEditorStartDateChange($event)\" />\n\n          <z-calendar\n            zMode=\"single\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_end_date' | translate\"\n            zAllowClear\n            zValueType=\"date\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_end_date' | translate\"\n            [ngModel]=\"draftEndDate()\"\n            (ngModelChange)=\"onEditorEndDateChange($event)\" />\n        </section>\n\n        <section class=\"space-y-3\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <h4 class=\"text-sm font-semibold\">\n              {{ 'i18n_z_ui_kanban_checklist' | translate }} ({{ checklistDoneCount() }}/{{ draftChecklist().length }})\n            </h4>\n            <span class=\"text-muted-foreground text-xs font-semibold\">{{ checklistProgress() }}%</span>\n          </div>\n\n          <div class=\"bg-muted h-2 w-full rounded-full\">\n            <div class=\"bg-primary h-2 rounded-full transition-all\" [style.width.%]=\"checklistProgress()\"></div>\n          </div>\n\n          <div class=\"max-h-44 space-y-1 overflow-y-auto\">\n            @for (item of draftChecklist(); track item.id) {\n              <div [class]=\"item.done ? checklistDoneRowClass : checklistPendingRowClass\">\n                <z-checkbox\n                  [class]=\"item.done ? 'min-w-0 flex-1 line-through' : 'min-w-0 flex-1'\"\n                  [zChecked]=\"item.done\"\n                  [zText]=\"item.label\"\n                  (zChange)=\"toggleChecklistItem(item.id, $event)\" />\n                <button\n                  type=\"button\"\n                  class=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 ml-auto inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n                  (click)=\"removeChecklistItem(item.id)\">\n                  <z-icon zType=\"lucideTrash2\" zSize=\"12\" />\n                </button>\n              </div>\n            } @empty {\n              <p class=\"text-muted-foreground bg-muted/35 rounded-md px-3 py-2 text-xs\">\n                {{ 'i18n_z_ui_kanban_no_checklist_items' | translate }}\n              </p>\n            }\n          </div>\n\n          <div class=\"flex items-end gap-2\">\n            <z-input\n              class=\"flex-1\"\n              zSize=\"lg\"\n              [zPlaceholder]=\"'i18n_z_ui_kanban_checklist_add_placeholder' | translate\"\n              [ngModel]=\"draftChecklistItemLabel()\"\n              (ngModelChange)=\"draftChecklistItemLabel.set($event)\"\n              (zOnEnter)=\"addChecklistItem()\" />\n            <button\n              type=\"button\"\n              zSize=\"lg\"\n              z-button\n              zType=\"outline\"\n              zTypeIcon=\"lucidePlus\"\n              (click)=\"addChecklistItem()\">\n              {{ 'i18n_z_ui_common_add' | translate }}\n            </button>\n          </div>\n        </section>\n\n        <section class=\"space-y-2\">\n          <z-upload\n            [zLabel]=\"'i18n_z_ui_kanban_attachments' | translate\"\n            [zNote]=\"'i18n_z_ui_kanban_attachments_note' | translate\"\n            [zMultipleFile]=\"true\"\n            [zShowProgress]=\"true\"\n            [ngModel]=\"draftAttachments()\"\n            (ngModelChange)=\"onDraftAttachmentsChange($event)\" />\n        </section>\n      </div>\n\n      <aside\n        class=\"bg-muted/25 border-border/70 flex h-[34rem] min-h-0 flex-col overflow-hidden rounded-lg border p-4 shadow-xs xl:h-[38rem]\">\n        <section class=\"flex min-h-0 flex-1 flex-col gap-1.5\">\n          <label class=\"text-muted-foreground text-[11px] font-semibold tracking-widest uppercase\">\n            {{ 'i18n_z_ui_kanban_activity' | translate }}\n          </label>\n          <div class=\"-mr-3 min-h-0 flex-1 space-y-2 overflow-y-auto pr-3 pb-2\">\n            @for (entry of activeTaskActivityView(); track entry.id) {\n              <div class=\"border-border/70 bg-background/60 rounded-md border px-3 py-2\">\n                <p class=\"text-xs font-semibold\">{{ entry.actor }}</p>\n                <p class=\"text-muted-foreground mt-1 text-xs leading-4\">{{ entry.action }}</p>\n                <p class=\"text-muted-foreground mt-1 text-[10px]\">{{ entry.createdAtLabel }}</p>\n              </div>\n            } @empty {\n              <p class=\"text-muted-foreground bg-muted/40 rounded-md px-3 py-2 text-xs\">\n                {{ 'i18n_z_ui_kanban_no_activity' | translate }}\n              </p>\n            }\n          </div>\n        </section>\n\n        <section class=\"border-border/70 mt-3 shrink-0 space-y-2 border-t pt-3\">\n          <z-input\n            zType=\"textarea\"\n            zSize=\"lg\"\n            [zLabel]=\"'i18n_z_ui_kanban_add_comment' | translate\"\n            [zRows]=\"3\"\n            [zPlaceholder]=\"'i18n_z_ui_kanban_comment_placeholder' | translate\"\n            [ngModel]=\"draftComment()\"\n            (ngModelChange)=\"draftComment.set($event)\" />\n\n          <div class=\"flex justify-end pt-2\">\n            <button\n              type=\"button\"\n              zTypeIcon=\"lucideSend\"\n              z-button\n              [disabled]=\"isCommentSubmitDisabled()\"\n              (click)=\"submitTaskComment()\">\n              {{ 'i18n_z_ui_kanban_comment_submit' | translate }}\n            </button>\n          </div>\n        </section>\n      </aside>\n    </div>\n  }\n</z-modal>\n", styles: [":host{display:block;height:100%;min-height:0}.z-kanban-board{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--muted-foreground) 45%,transparent) transparent}.z-kanban-board::-webkit-scrollbar{height:8px}.z-kanban-board::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--muted-foreground) 38%,transparent);border-radius:9999px}.z-kanban-board::-webkit-scrollbar-track{background:transparent}.kanban-drop-list{scrollbar-width:thin}.kanban-card{cursor:pointer}.kanban-card.cdk-drag-dragging{cursor:grabbing;transform:rotate(.35deg)}.kanban-drop-list.cdk-drop-list-dragging .kanban-card:not(.cdk-drag-placeholder){transition:transform .16s cubic-bezier(.2,0,0,1)}:host ::ng-deep .z-kanban-drag-preview{border:1px solid color-mix(in oklab,var(--primary) 35%,var(--border));box-shadow:0 14px 32px color-mix(in oklab,var(--foreground) 15%,transparent);transform:rotate(-.2deg)}:host ::ng-deep .z-kanban-drag-placeholder{opacity:.2;border:1px dashed color-mix(in oklab,var(--primary) 38%,var(--border));background:color-mix(in oklab,var(--primary) 8%,transparent)}\n"] }]
        }], propDecorators: { zTaskDrop: [{ type: i0.Output, args: ["zTaskDrop"] }], zTaskSave: [{ type: i0.Output, args: ["zTaskSave"] }], zTaskClick: [{ type: i0.Output, args: ["zTaskClick"] }], zTaskCreate: [{ type: i0.Output, args: ["zTaskCreate"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumns", required: false }] }, { type: i0.Output, args: ["zColumnsChange"] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSubtitle", required: false }] }], zSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearch", required: false }] }, { type: i0.Output, args: ["zSearchChange"] }], zShowToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowToolbar", required: false }] }], zAllowCreateTask: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowCreateTask", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDensity", required: false }] }], boardViewportRef: [{ type: i0.ViewChild, args: ['boardViewport', { isSignal: true }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { ZKanbanComponent, Z_KANBAN_PRIORITY_OPTIONS, zKanbanChecklistRowVariants, zKanbanColumnVariants, zKanbanPriorityBadgeVariants, zKanbanTaskCardVariants };
//# sourceMappingURL=shival99-z-ui-components-z-kanban.mjs.map
