@shival99/z-ui 2.1.27 → 2.1.29

package/fesm2022/shival99-z-ui-components-z-kanban.mjs

@@ -1,981 +0,0 @@
-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", "zLoading", "zLoadingOutline", "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", "zLoading", "zLoadingOutline", "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", "zClassSelect", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zAllowClear", "zShowCheck", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zDynamicSize", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zSticky", "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