@shival99/z-ui 2.1.32 → 2.2.0

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

@@ -116,37 +116,62 @@ class ZKanbanComponent {
     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" }] : []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zColumns = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zColumns" }] : /* istanbul ignore next */ []));
+    zTitle = input('i18n_z_ui_kanban_board_title', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTitle" }] : /* istanbul ignore next */ []));
+    zSubtitle = input('i18n_z_ui_kanban_board_subtitle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSubtitle" }] : /* istanbul ignore next */ []));
+    zSearch = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSearch" }] : /* istanbul ignore next */ []));
+    zShowToolbar = input(true, { ...(ngDevMode ? { debugName: "zShowToolbar" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zAllowCreateTask = input(true, { ...(ngDevMode ? { debugName: "zAllowCreateTask" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zDensity = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDensity" }] : /* istanbul ignore next */ []));
+    boardViewportRef = viewChild('boardViewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boardViewportRef" }] : /* istanbul ignore next */ []));
+    editorVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorVisible" }] : /* istanbul ignore next */ []));
+    editingColumnId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingColumnId" }] : /* istanbul ignore next */ []));
+    editingTaskId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editingTaskId" }] : /* istanbul ignore next */ []));
+    draftTitle = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftTitle" }] : /* istanbul ignore next */ []));
+    draftDescription = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftDescription" }] : /* istanbul ignore next */ []));
+    draftStatus = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftStatus" }] : /* istanbul ignore next */ []));
+    draftPriority = signal('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftPriority" }] : /* istanbul ignore next */ []));
+    draftAssignees = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftAssignees" }] : /* istanbul ignore next */ []));
+    draftStartDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftStartDate" }] : /* istanbul ignore next */ []));
+    draftEndDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftEndDate" }] : /* istanbul ignore next */ []));
+    draftChecklist = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftChecklist" }] : /* istanbul ignore next */ []));
+    draftChecklistItemLabel = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftChecklistItemLabel" }] : /* istanbul ignore next */ []));
+    draftAttachments = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftAttachments" }] : /* istanbul ignore next */ []));
+    draftComment = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftComment" }] : /* istanbul ignore next */ []));
+    isDraggingTask = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDraggingTask" }] : /* istanbul ignore next */ []));
     _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" }] : []));
+    hostClasses = computed(() => zMergeClasses('z-kanban block w-full min-w-0', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    connectedDropListIds = computed(() => this.zColumns().map(column => column.id), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectedDropListIds" }] : /* istanbul ignore next */ []));
+    isSearchActive = computed(() => this.zSearch().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSearchActive" }] : /* istanbul ignore next */ []));
     filteredColumns = computed(() => {
         const query = this.zSearch().trim().toLowerCase();
         if (!query) {
@@ -156,7 +181,8 @@ class ZKanbanComponent {
             ...column,
             tasks: column.tasks.filter(task => this._taskMatchesQuery(task, query)),
         }));
-    }, ...(ngDevMode ? [{ debugName: "filteredColumns" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredColumns" }] : /* istanbul ignore next */ []));
     activeTask = computed(() => {
         const columnId = this.editingColumnId();
         const taskId = this.editingTaskId();
@@ -164,7 +190,8 @@ class ZKanbanComponent {
             return null;
         }
         return this._findTask(columnId, taskId);
-    }, ...(ngDevMode ? [{ debugName: "activeTask" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTask" }] : /* istanbul ignore next */ []));
     editorMeta = computed(() => {
         const task = this.activeTask();
         if (!task) {
@@ -174,7 +201,8 @@ class ZKanbanComponent {
             return task.code;
         }
         return task.id;
-    }, ...(ngDevMode ? [{ debugName: "editorMeta" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorMeta" }] : /* istanbul ignore next */ []));
     checklistProgress = computed(() => {
         const checklist = this.draftChecklist();
         if (checklist.length === 0) {
@@ -182,10 +210,14 @@ class ZKanbanComponent {
         }
         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" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checklistProgress" }] : /* istanbul ignore next */ []));
+    checklistDoneCount = computed(() => this.draftChecklist().filter(item => item.done).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checklistDoneCount" }] : /* istanbul ignore next */ []));
+    isEditorSaveDisabled = computed(() => !this.draftTitle().trim(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditorSaveDisabled" }] : /* istanbul ignore next */ []));
+    isCommentSubmitDisabled = computed(() => !this.draftComment().trim(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCommentSubmitDisabled" }] : /* istanbul ignore next */ []));
     checklistDoneRowClass = `${zKanbanChecklistRowVariants({ zDone: true })}`;
     checklistPendingRowClass = `${zKanbanChecklistRowVariants({ zDone: false })}`;
     statusOptions = computed(() => {
@@ -195,7 +227,8 @@ class ZKanbanComponent {
             label: this._zTranslate.instant(column.title),
             icon: this._getStatusIcon(column.id),
         }));
-    }, ...(ngDevMode ? [{ debugName: "statusOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusOptions" }] : /* istanbul ignore next */ []));
     priorityOptions = Z_KANBAN_PRIORITY_OPTIONS;
     prioritySelectOptions = computed(() => {
         this._zTranslate.currentLang();
@@ -204,7 +237,8 @@ class ZKanbanComponent {
             label: this._zTranslate.instant(option.labelKey),
             icon: this._priorityIconByValue[option.value],
         }));
-    }, ...(ngDevMode ? [{ debugName: "prioritySelectOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prioritySelectOptions" }] : /* istanbul ignore next */ []));
     assigneeOptions = computed(() => {
         const assignees = new Set();
         for (const column of this.zColumns()) {
@@ -223,8 +257,10 @@ class ZKanbanComponent {
             label: name,
             value: name,
         }));
-    }, ...(ngDevMode ? [{ debugName: "assigneeOptions" }] : []));
-    columnClass = computed(() => zKanbanColumnVariants({ zDensity: this.zDensity() }), ...(ngDevMode ? [{ debugName: "columnClass" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "assigneeOptions" }] : /* istanbul ignore next */ []));
+    columnClass = computed(() => zKanbanColumnVariants({ zDensity: this.zDensity() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnClass" }] : /* istanbul ignore next */ []));
     taskCardClassByPriority = computed(() => {
         const density = this.zDensity();
         return {
@@ -233,20 +269,23 @@ class ZKanbanComponent {
             medium: zKanbanTaskCardVariants({ zDensity: density, zPriority: 'medium' }),
             low: zKanbanTaskCardVariants({ zDensity: density, zPriority: 'low' }),
         };
-    }, ...(ngDevMode ? [{ debugName: "taskCardClassByPriority" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "taskCardClassByPriority" }] : /* istanbul ignore next */ []));
     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" }] : []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "priorityBadgeClassByPriority" }] : /* istanbul ignore next */ []));
     statusIconClassByValue = computed(() => {
         const map = {};
         for (const option of this.statusOptions()) {
             map[option.value] = this._getStatusIconClass(option.value);
         }
         return map;
-    }, ...(ngDevMode ? [{ debugName: "statusIconClassByValue" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusIconClassByValue" }] : /* istanbul ignore next */ []));
     priorityIconClassByValue = this._priorityIconClassByValue;
     boardColumnsView = computed(() => {
         const taskCardClassByPriority = this.taskCardClassByPriority();
@@ -290,13 +329,15 @@ class ZKanbanComponent {
                 };
             }),
         }));
-    }, ...(ngDevMode ? [{ debugName: "boardColumnsView" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boardColumnsView" }] : /* istanbul ignore next */ []));
     activeTaskActivityView = computed(() => (this.activeTask()?.activity ?? []).map(entry => ({
         id: entry.id,
         actor: entry.actor,
         action: entry.action,
         createdAtLabel: this._formatDateTime(entry.createdAt),
-    })), ...(ngDevMode ? [{ debugName: "activeTaskActivityView" }] : []));
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTaskActivityView" }] : /* istanbul ignore next */ []));
     createTaskInFirstColumn() {
         const firstColumnId = this.zColumns()[0]?.id;
         if (!firstColumnId) {
@@ -947,10 +988,10 @@ class ZKanbanComponent {
         }
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZKanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZKanbanComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-kanban', imports: [
                         FormsModule,