@vadem/ui 0.1.0 → 0.2.0

package/fesm2022/vadem-ui-kanban.mjs

@@ -0,0 +1,1021 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, effect, inject, input, output, signal } from "@angular/core";
+import { VdButton } from "@vadem/ui/button";
+import { vdUniqueId } from "@vadem/ui/field";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+import * as i1 from "@vadem/ui/menu";
+import { VD_MENU } from "@vadem/ui/menu";
+function vdKanbanValid(columns) {
+	const columnIds = /* @__PURE__ */ new Set();
+	const cardIds = /* @__PURE__ */ new Set();
+	for (const column of columns) {
+		if (!isId(column.id) || columnIds.has(column.id)) return false;
+		columnIds.add(column.id);
+		for (const card of column.cards) {
+			if (!isId(card.id) || cardIds.has(card.id)) return false;
+			cardIds.add(card.id);
+		}
+	}
+	return true;
+}
+function vdKanbanFind(columns, cardId) {
+	for (const column of columns) {
+		const index = column.cards.findIndex((card) => card.id === cardId);
+		if (index >= 0) return {
+			columnId: column.id,
+			index
+		};
+	}
+	return null;
+}
+function vdKanbanMoveRequest(columns, cardId, to, method) {
+	const from = vdKanbanFind(columns, cardId);
+	const target = columns.find((column) => column.id === to.columnId);
+	if (!from || !target || !Number.isInteger(to.index)) return null;
+	const size = target.cards.length - (target.id === from.columnId ? 1 : 0);
+	const index = Math.max(0, Math.min(to.index, size));
+	if (target.id === from.columnId && index === from.index) return null;
+	return {
+		cardId,
+		fromColumnId: from.columnId,
+		toColumnId: target.id,
+		fromIndex: from.index,
+		toIndex: index,
+		method
+	};
+}
+function vdKanbanApplyMove(columns, move) {
+	const from = vdKanbanFind(columns, move.cardId);
+	if (!from || !columns.some((column) => column.id === move.toColumnId)) return columns;
+	const card = columns.find((column) => column.id === from.columnId).cards[from.index];
+	return columns.map((column) => {
+		if (column.id !== from.columnId && column.id !== move.toColumnId) return column;
+		const cards = column.cards.filter((c) => c.id !== move.cardId);
+		if (column.id === move.toColumnId) cards.splice(Math.max(0, Math.min(move.toIndex, cards.length)), 0, card);
+		return {
+			...column,
+			cards
+		};
+	});
+}
+function vdKanbanInsertIndex(y, cards) {
+	if (!Number.isFinite(y)) return 0;
+	let index = 0;
+	for (const rect of cards) if (y > (rect.top + rect.bottom) / 2) index++;
+	return index;
+}
+function vdKanbanColumnAt(x, columns) {
+	if (!Number.isFinite(x)) return -1;
+	return columns.findIndex((rect) => x >= rect.left && x <= rect.right);
+}
+function isId(id) {
+	return typeof id === "string" && id.trim().length > 0;
+}
+var VdKanbanCard = class VdKanbanCard {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdKanbanCard,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdKanbanCard,
+		isStandalone: true,
+		selector: "ng-template[vdKanbanCard]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdKanbanCard,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[vdKanbanCard]" }]
+	}]
+});
+var VdKanbanColumnHeader = class VdKanbanColumnHeader {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdKanbanColumnHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdKanbanColumnHeader,
+		isStandalone: true,
+		selector: "ng-template[vdKanbanColumnHeader]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdKanbanColumnHeader,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[vdKanbanColumnHeader]" }]
+	}]
+});
+const INTERACTIVE = "a, button, input, select, textarea, label, [contenteditable], [tabindex]";
+const INTERACTIVE_TOUCH = "button, input, select, textarea, label, [contenteditable]";
+const LONG_PRESS_MS = 400;
+const TOUCH_SLOP = 8;
+const EDGE = 48;
+const EDGE_STEP = 14;
+var VdKanban = class VdKanban {
+	columns = input([], ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	instructions = input(...ngDevMode ? [void 0, { debugName: "instructions" }] : /* istanbul ignore next */ []);
+	emptyText = input(...ngDevMode ? [void 0, { debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	invalidText = input(...ngDevMode ? [void 0, { debugName: "invalidText" }] : /* istanbul ignore next */ []);
+	countText = input(...ngDevMode ? [void 0, { debugName: "countText" }] : /* istanbul ignore next */ []);
+	moveLabel = input(...ngDevMode ? [void 0, { debugName: "moveLabel" }] : /* istanbul ignore next */ []);
+	upText = input(...ngDevMode ? [void 0, { debugName: "upText" }] : /* istanbul ignore next */ []);
+	downText = input(...ngDevMode ? [void 0, { debugName: "downText" }] : /* istanbul ignore next */ []);
+	moveToText = input(...ngDevMode ? [void 0, { debugName: "moveToText" }] : /* istanbul ignore next */ []);
+	movedText = input(...ngDevMode ? [void 0, { debugName: "movedText" }] : /* istanbul ignore next */ []);
+	canceledText = input(...ngDevMode ? [void 0, { debugName: "canceledText" }] : /* istanbul ignore next */ []);
+	cardMove = output();
+	t = vdTexts("kanban", {
+		label: this.label,
+		instructions: this.instructions,
+		emptyText: this.emptyText,
+		invalidText: this.invalidText,
+		countText: this.countText,
+		moveLabel: this.moveLabel,
+		upText: this.upText,
+		downText: this.downText,
+		moveToText: this.moveToText,
+		movedText: this.movedText,
+		canceledText: this.canceledText
+	});
+	cardTemplate = contentChild(VdKanbanCard, ...ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []);
+	columnHeader = contentChild(VdKanbanColumnHeader, ...ngDevMode ? [{ debugName: "columnHeader" }] : /* istanbul ignore next */ []);
+	valid = computed(() => vdKanbanValid(this.columns()), ...ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []);
+	baseId = vdUniqueId("vd-kanban");
+	instructionsId = this.baseId + "-instructions";
+	draggingId = signal(null, ...ngDevMode ? [{ debugName: "draggingId" }] : /* istanbul ignore next */ []);
+	drop = signal(null, ...ngDevMode ? [{ debugName: "drop" }] : /* istanbul ignore next */ []);
+	messages = signal([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef).nativeElement;
+	drag = null;
+	pendingFocus = null;
+	suppressClick = false;
+	serial = 0;
+	constructor() {
+		effect(() => {
+			const columns = this.columns(), disabled = this.disabled();
+			if (this.drag && (disabled || columns !== this.drag.columns)) this.finish(true);
+		});
+		afterRenderEffect(() => {
+			this.columns();
+			const id = this.pendingFocus;
+			if (!id) return;
+			const card = this.cardElement(id);
+			if (!card) return;
+			this.pendingFocus = null;
+			const active = this.host.ownerDocument.activeElement;
+			if (!(!active || active === this.host.ownerDocument.body || !active.isConnected) && !this.host.contains(active)) return;
+			if (card.contains(active)) return;
+			const target = card.querySelector(".vd-kanban__move:not(:disabled)") ?? card;
+			target.focus({ preventScroll: true });
+			target.scrollIntoView({
+				block: "nearest",
+				inline: "nearest",
+				behavior: "instant"
+			});
+		});
+		const destroyRef = inject(DestroyRef);
+		destroyRef.onDestroy(() => this.finish(false));
+		afterNextRender(() => {
+			const touchMove = (event) => {
+				if (this.drag?.touch && this.drag.active) event.preventDefault();
+			};
+			const contextMenu = (event) => {
+				if (this.drag?.touch) event.preventDefault();
+			};
+			const click = (event) => {
+				if (!this.suppressClick) return;
+				this.suppressClick = false;
+				event.preventDefault();
+				event.stopPropagation();
+			};
+			this.host.addEventListener("touchmove", touchMove, { passive: false });
+			this.host.addEventListener("contextmenu", contextMenu);
+			this.host.addEventListener("click", click, true);
+			destroyRef.onDestroy(() => {
+				this.host.removeEventListener("touchmove", touchMove);
+				this.host.removeEventListener("contextmenu", contextMenu);
+				this.host.removeEventListener("click", click, true);
+			});
+		});
+	}
+	moveTo(cardId, columnId, index) {
+		if (this.disabled() || !this.valid() || this.drag) return;
+		this.request(vdKanbanMoveRequest(this.columns(), cardId, {
+			columnId,
+			index
+		}, "menu"));
+	}
+	request(move) {
+		if (!move) return;
+		const columns = this.columns();
+		const target = columns.find((column) => column.id === move.toColumnId);
+		const card = columns.find((c) => c.id === move.fromColumnId).cards[move.fromIndex];
+		const total = target.cards.length + (move.fromColumnId === move.toColumnId ? 0 : 1);
+		this.pendingFocus = move.cardId;
+		this.announce(this.t().movedText(card.label, target.title, move.toIndex + 1, total));
+		this.cardMove.emit(move);
+	}
+	start(event, card) {
+		this.suppressClick = false;
+		if (!event.isPrimary || event.button !== 0 || this.disabled() || !this.valid() || this.drag) return;
+		const element = event.currentTarget;
+		const touch = event.pointerType === "touch";
+		const hit = event.target?.closest(touch ? INTERACTIVE_TOUCH : INTERACTIVE);
+		if (hit && hit !== element && element.contains(hit)) return;
+		if (typeof element.setPointerCapture !== "function") return;
+		this.drag = {
+			pointer: event.pointerId,
+			element,
+			columns: this.columns(),
+			cardId: card.id,
+			label: card.label,
+			touch,
+			x: event.clientX,
+			y: event.clientY,
+			lastX: event.clientX,
+			lastY: event.clientY,
+			active: false,
+			timer: null,
+			ghost: null,
+			offsetX: 0,
+			offsetY: 0,
+			scroll: 0,
+			frame: null
+		};
+		if (touch) {
+			const drag = this.drag;
+			drag.timer = setTimeout(() => {
+				drag.timer = null;
+				if (this.drag !== drag) return;
+				try {
+					element.setPointerCapture(drag.pointer);
+				} catch {
+					this.finish(false);
+					return;
+				}
+				this.activate(drag);
+			}, LONG_PRESS_MS);
+			return;
+		}
+		try {
+			element.setPointerCapture(event.pointerId);
+		} catch {
+			this.drag = null;
+			return;
+		}
+		event.preventDefault();
+	}
+	pointerMove(event) {
+		const drag = this.drag;
+		if (!drag || drag.pointer !== event.pointerId) return;
+		drag.lastX = event.clientX;
+		drag.lastY = event.clientY;
+		const distance = Math.hypot(event.clientX - drag.x, event.clientY - drag.y);
+		if (!drag.active) {
+			if (drag.touch) {
+				if (distance > TOUCH_SLOP) this.finish(false);
+				return;
+			}
+			if (event.buttons === 0) {
+				this.finish(false);
+				return;
+			}
+			if (distance < 4) return;
+			this.activate(drag);
+		}
+		this.track(drag);
+	}
+	end(event) {
+		const drag = this.drag;
+		if (!drag || drag.pointer !== event.pointerId) return;
+		const drop = drag.active ? this.target(event.clientX, event.clientY) : null;
+		this.suppressClick = drag.active;
+		this.finish(drag.active && !drop);
+		if (drop) this.request(vdKanbanMoveRequest(this.columns(), drag.cardId, drop, "pointer"));
+	}
+	pointerCancel(event) {
+		if (event.pointerId === this.drag?.pointer) this.finish(!!this.drag?.active);
+	}
+	key(event) {
+		if (!this.drag || event.isComposing) return;
+		if (event.key === "Escape" || event.key === "Tab") {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			this.finish(true);
+		}
+	}
+	activate(drag) {
+		drag.active = true;
+		const { element } = drag;
+		if (!element.contains(this.host.ownerDocument.activeElement)) element.focus({ preventScroll: true });
+		const rect = element.getBoundingClientRect();
+		drag.offsetX = drag.x - rect.left;
+		drag.offsetY = drag.y - rect.top;
+		const ghost = element.cloneNode(true);
+		ghost.querySelectorAll("[popover]").forEach((node) => node.remove());
+		ghost.querySelectorAll("[id]").forEach((node) => node.removeAttribute("id"));
+		for (const name of [
+			"data-card-id",
+			"data-dragging",
+			"data-drop",
+			"tabindex"
+		]) ghost.removeAttribute(name);
+		ghost.className = "vd-kanban__card vd-kanban__ghost";
+		ghost.setAttribute("aria-hidden", "true");
+		ghost.inert = true;
+		ghost.style.setProperty("inline-size", `${rect.width}px`);
+		ghost.setAttribute("popover", "manual");
+		this.host.append(ghost);
+		ghost.showPopover?.();
+		drag.ghost = ghost;
+		this.draggingId.set(drag.cardId);
+		this.track(drag);
+	}
+	track(drag) {
+		const ghost = drag.ghost;
+		if (ghost) {
+			const rtl = this.host.ownerDocument.defaultView?.getComputedStyle(this.host).direction === "rtl";
+			const left = drag.lastX - drag.offsetX;
+			const x = rtl ? left + ghost.offsetWidth - this.host.ownerDocument.documentElement.clientWidth : left;
+			ghost.style.setProperty("--vd-kanban-ghost-x", `${x}px`);
+			ghost.style.setProperty("--vd-kanban-ghost-y", `${drag.lastY - drag.offsetY}px`);
+		}
+		this.drop.set(this.target(drag.lastX, drag.lastY));
+		const scroller = this.host.querySelector(".vd-kanban__columns");
+		if (!scroller) return;
+		const rect = scroller.getBoundingClientRect();
+		drag.scroll = drag.lastX < rect.left + EDGE ? -1 : drag.lastX > rect.right - EDGE ? 1 : 0;
+		if (drag.scroll && drag.frame === null) {
+			const view = this.host.ownerDocument.defaultView;
+			const step = () => {
+				if (this.drag !== drag || !drag.scroll || !view) {
+					drag.frame = null;
+					return;
+				}
+				scroller.scrollBy({
+					left: drag.scroll * EDGE_STEP,
+					behavior: "instant"
+				});
+				this.drop.set(this.target(drag.lastX, drag.lastY));
+				drag.frame = view.requestAnimationFrame(step);
+			};
+			drag.frame = view?.requestAnimationFrame(step) ?? null;
+		}
+	}
+	target(x, y) {
+		const drag = this.drag;
+		if (!drag) return null;
+		const sections = Array.from(this.host.querySelectorAll(".vd-kanban__column[data-column-id]"));
+		const index = vdKanbanColumnAt(x, sections.map((s) => s.getBoundingClientRect()));
+		if (index < 0) return null;
+		const section = sections[index];
+		const rect = section.getBoundingClientRect();
+		if (y < rect.top || y > rect.bottom) return null;
+		const others = Array.from(section.querySelectorAll(".vd-kanban__card[data-card-id]")).filter((el) => el.dataset["cardId"] !== drag.cardId);
+		const at = vdKanbanInsertIndex(y, others.map((el) => el.getBoundingClientRect()));
+		const columnId = section.dataset["columnId"];
+		const from = vdKanbanFind(this.columns(), drag.cardId);
+		if (from && from.columnId === columnId && from.index === at) return null;
+		const marker = others[at] ?? others[others.length - 1] ?? null;
+		return {
+			columnId,
+			index: at,
+			cardId: marker?.dataset["cardId"] ?? null,
+			edge: marker ? others[at] ? "before" : "after" : null
+		};
+	}
+	finish(announce) {
+		const drag = this.drag;
+		this.drag = null;
+		this.draggingId.set(null);
+		this.drop.set(null);
+		if (!drag) return;
+		if (drag.timer !== null) clearTimeout(drag.timer);
+		if (drag.frame !== null) this.host.ownerDocument.defaultView?.cancelAnimationFrame(drag.frame);
+		drag.ghost?.remove();
+		if (drag.element.hasPointerCapture?.(drag.pointer)) drag.element.releasePointerCapture(drag.pointer);
+		if (announce && drag.active) this.announce(this.t().canceledText(drag.label));
+	}
+	announce(text) {
+		this.messages.set([{
+			serial: ++this.serial,
+			text
+		}]);
+	}
+	cardElement(id) {
+		return Array.from(this.host.querySelectorAll(".vd-kanban__card[data-card-id]")).find((el) => el.dataset["cardId"] === id) ?? null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdKanban,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdKanban,
+		isStandalone: true,
+		selector: "vd-kanban",
+		inputs: {
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			instructions: {
+				classPropertyName: "instructions",
+				publicName: "instructions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalidText: {
+				classPropertyName: "invalidText",
+				publicName: "invalidText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			countText: {
+				classPropertyName: "countText",
+				publicName: "countText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moveLabel: {
+				classPropertyName: "moveLabel",
+				publicName: "moveLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			upText: {
+				classPropertyName: "upText",
+				publicName: "upText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			downText: {
+				classPropertyName: "downText",
+				publicName: "downText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moveToText: {
+				classPropertyName: "moveToText",
+				publicName: "moveToText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			movedText: {
+				classPropertyName: "movedText",
+				publicName: "movedText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			canceledText: {
+				classPropertyName: "canceledText",
+				publicName: "canceledText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { cardMove: "cardMove" },
+		host: {
+			listeners: { "keydown": "key($event)" },
+			properties: { "attr.data-state": "!valid() ? \"invalid\" : disabled() ? \"disabled\" : draggingId() ? \"dragging\" : \"idle\"" },
+			classAttribute: "vd-kanban"
+		},
+		queries: [{
+			propertyName: "cardTemplate",
+			first: true,
+			predicate: VdKanbanCard,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "columnHeader",
+			first: true,
+			predicate: VdKanbanColumnHeader,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <p class="vd-visually-hidden" [id]="instructionsId">{{ t().instructions }}</p>
+    @if (!valid()) {
+      <p class="vd-kanban__invalid">{{ t().invalidText }}</p>
+    } @else {
+      <div
+        class="vd-kanban__columns"
+        role="group"
+        [attr.aria-label]="t().label"
+        [attr.aria-describedby]="instructionsId"
+      >
+        @for (column of columns(); track column.id; let c = $index) {
+          <section
+            class="vd-kanban__column"
+            [attr.aria-labelledby]="baseId + '-title-' + c"
+            [attr.data-column-id]="column.id"
+            [attr.data-drop-target]="drop()?.columnId === column.id ? '' : null"
+          >
+            <header class="vd-kanban__header">
+              <p class="vd-kanban__title" [id]="baseId + '-title-' + c">
+                <bdi>{{ column.title }}</bdi>
+                <span class="vd-kanban__count" aria-hidden="true">{{ column.cards.length }}</span>
+                <span class="vd-visually-hidden">, {{ t().countText(column.cards.length) }}</span>
+              </p>
+              @if (columnHeader(); as header) {
+                <div class="vd-kanban__header-extra">
+                  <ng-container
+                    [ngTemplateOutlet]="header.template"
+                    [ngTemplateOutletContext]="{ $implicit: column }"
+                  />
+                </div>
+              }
+            </header>
+            <ul
+              class="vd-kanban__cards"
+              role="list"
+              [attr.aria-labelledby]="baseId + '-title-' + c"
+            >
+              @for (card of column.cards; track card.id; let i = $index, last = $last) {
+                <li
+                  class="vd-kanban__card"
+                  tabindex="-1"
+                  [attr.data-card-id]="card.id"
+                  [attr.data-dragging]="draggingId() === card.id ? '' : null"
+                  [attr.data-drop]="drop()?.cardId === card.id ? drop()?.edge : null"
+                  (pointerdown)="start($event, card)"
+                  (pointermove)="pointerMove($event)"
+                  (pointerup)="end($event)"
+                  (pointercancel)="pointerCancel($event)"
+                  (lostpointercapture)="pointerCancel($event)"
+                >
+                  <div class="vd-kanban__content">
+                    @if (cardTemplate(); as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl.template"
+                        [ngTemplateOutletContext]="{ $implicit: card, column, index: i }"
+                      />
+                    } @else {
+                      <bdi>{{ card.label }}</bdi>
+                    }
+                  </div>
+                  <button
+                    vdButton
+                    class="vd-kanban__move"
+                    variant="ghost"
+                    size="sm"
+                    iconOnly
+                    type="button"
+                    [disabled]="disabled()"
+                    [attr.aria-label]="t().moveLabel(card.label)"
+                    [vdMenuTrigger]="menu"
+                  >
+                    <vd-icon name="more-horizontal" />
+                  </button>
+                  <div vdMenu #menu="vdMenu">
+                    <button
+                      vdMenuItem
+                      [disabled]="i === 0"
+                      (click)="moveTo(card.id, column.id, i - 1)"
+                    >
+                      <vd-icon name="arrow-up" />{{ t().upText }}
+                    </button>
+                    <button
+                      vdMenuItem
+                      [disabled]="last"
+                      (click)="moveTo(card.id, column.id, i + 1)"
+                    >
+                      <vd-icon name="arrow-down" />{{ t().downText }}
+                    </button>
+                    @if (columns().length > 1) {
+                      <div vdMenuSeparator></div>
+                      <p vdMenuLabel>{{ t().moveToText }}</p>
+                      @for (target of columns(); track target.id) {
+                        @if (target.id !== column.id) {
+                          <button
+                            vdMenuItem
+                            (click)="moveTo(card.id, target.id, target.cards.length)"
+                          >
+                            <bdi>{{ target.title }}</bdi>
+                          </button>
+                        }
+                      }
+                    }
+                  </div>
+                </li>
+              } @empty {
+                <li class="vd-kanban__empty">{{ t().emptyText }}</li>
+              }
+            </ul>
+          </section>
+        }
+      </div>
+    }
+    <p class="vd-visually-hidden" role="status" aria-atomic="true">
+      @for (message of messages(); track message.serial) {
+        <span>{{ message.text }}</span>
+      }
+    </p>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: VdButton,
+				selector: "button[vdButton], a[vdButton]",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"type"
+				]
+			},
+			{
+				kind: "component",
+				type: VdIcon,
+				selector: "vd-icon",
+				inputs: ["name", "label"]
+			},
+			{
+				kind: "directive",
+				type: i1.VdMenu,
+				selector: "[vdMenu]",
+				exportAs: ["vdMenu"]
+			},
+			{
+				kind: "directive",
+				type: i1.VdMenuTrigger,
+				selector: "button[vdMenuTrigger]",
+				inputs: ["vdMenuTrigger"]
+			},
+			{
+				kind: "directive",
+				type: i1.VdMenuItem,
+				selector: "button[vdMenuItem], a[vdMenuItem]",
+				inputs: ["variant", "disabled"]
+			},
+			{
+				kind: "directive",
+				type: i1.VdMenuSeparator,
+				selector: "[vdMenuSeparator]"
+			},
+			{
+				kind: "directive",
+				type: i1.VdMenuLabel,
+				selector: "[vdMenuLabel]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdKanban,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-kanban",
+			imports: [
+				NgTemplateOutlet,
+				VdButton,
+				VdIcon,
+				VD_MENU
+			],
+			template: `
+    <p class="vd-visually-hidden" [id]="instructionsId">{{ t().instructions }}</p>
+    @if (!valid()) {
+      <p class="vd-kanban__invalid">{{ t().invalidText }}</p>
+    } @else {
+      <div
+        class="vd-kanban__columns"
+        role="group"
+        [attr.aria-label]="t().label"
+        [attr.aria-describedby]="instructionsId"
+      >
+        @for (column of columns(); track column.id; let c = $index) {
+          <section
+            class="vd-kanban__column"
+            [attr.aria-labelledby]="baseId + '-title-' + c"
+            [attr.data-column-id]="column.id"
+            [attr.data-drop-target]="drop()?.columnId === column.id ? '' : null"
+          >
+            <header class="vd-kanban__header">
+              <p class="vd-kanban__title" [id]="baseId + '-title-' + c">
+                <bdi>{{ column.title }}</bdi>
+                <span class="vd-kanban__count" aria-hidden="true">{{ column.cards.length }}</span>
+                <span class="vd-visually-hidden">, {{ t().countText(column.cards.length) }}</span>
+              </p>
+              @if (columnHeader(); as header) {
+                <div class="vd-kanban__header-extra">
+                  <ng-container
+                    [ngTemplateOutlet]="header.template"
+                    [ngTemplateOutletContext]="{ $implicit: column }"
+                  />
+                </div>
+              }
+            </header>
+            <ul
+              class="vd-kanban__cards"
+              role="list"
+              [attr.aria-labelledby]="baseId + '-title-' + c"
+            >
+              @for (card of column.cards; track card.id; let i = $index, last = $last) {
+                <li
+                  class="vd-kanban__card"
+                  tabindex="-1"
+                  [attr.data-card-id]="card.id"
+                  [attr.data-dragging]="draggingId() === card.id ? '' : null"
+                  [attr.data-drop]="drop()?.cardId === card.id ? drop()?.edge : null"
+                  (pointerdown)="start($event, card)"
+                  (pointermove)="pointerMove($event)"
+                  (pointerup)="end($event)"
+                  (pointercancel)="pointerCancel($event)"
+                  (lostpointercapture)="pointerCancel($event)"
+                >
+                  <div class="vd-kanban__content">
+                    @if (cardTemplate(); as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl.template"
+                        [ngTemplateOutletContext]="{ $implicit: card, column, index: i }"
+                      />
+                    } @else {
+                      <bdi>{{ card.label }}</bdi>
+                    }
+                  </div>
+                  <button
+                    vdButton
+                    class="vd-kanban__move"
+                    variant="ghost"
+                    size="sm"
+                    iconOnly
+                    type="button"
+                    [disabled]="disabled()"
+                    [attr.aria-label]="t().moveLabel(card.label)"
+                    [vdMenuTrigger]="menu"
+                  >
+                    <vd-icon name="more-horizontal" />
+                  </button>
+                  <div vdMenu #menu="vdMenu">
+                    <button
+                      vdMenuItem
+                      [disabled]="i === 0"
+                      (click)="moveTo(card.id, column.id, i - 1)"
+                    >
+                      <vd-icon name="arrow-up" />{{ t().upText }}
+                    </button>
+                    <button
+                      vdMenuItem
+                      [disabled]="last"
+                      (click)="moveTo(card.id, column.id, i + 1)"
+                    >
+                      <vd-icon name="arrow-down" />{{ t().downText }}
+                    </button>
+                    @if (columns().length > 1) {
+                      <div vdMenuSeparator></div>
+                      <p vdMenuLabel>{{ t().moveToText }}</p>
+                      @for (target of columns(); track target.id) {
+                        @if (target.id !== column.id) {
+                          <button
+                            vdMenuItem
+                            (click)="moveTo(card.id, target.id, target.cards.length)"
+                          >
+                            <bdi>{{ target.title }}</bdi>
+                          </button>
+                        }
+                      }
+                    }
+                  </div>
+                </li>
+              } @empty {
+                <li class="vd-kanban__empty">{{ t().emptyText }}</li>
+              }
+            </ul>
+          </section>
+        }
+      </div>
+    }
+    <p class="vd-visually-hidden" role="status" aria-atomic="true">
+      @for (message of messages(); track message.serial) {
+        <span>{{ message.text }}</span>
+      }
+    </p>
+  `,
+			host: {
+				class: "vd-kanban",
+				"[attr.data-state]": "!valid() ? \"invalid\" : disabled() ? \"disabled\" : draggingId() ? \"dragging\" : \"idle\"",
+				"(keydown)": "key($event)"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		instructions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "instructions",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		invalidText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalidText",
+				required: false
+			}]
+		}],
+		countText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countText",
+				required: false
+			}]
+		}],
+		moveLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveLabel",
+				required: false
+			}]
+		}],
+		upText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "upText",
+				required: false
+			}]
+		}],
+		downText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "downText",
+				required: false
+			}]
+		}],
+		moveToText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveToText",
+				required: false
+			}]
+		}],
+		movedText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "movedText",
+				required: false
+			}]
+		}],
+		canceledText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canceledText",
+				required: false
+			}]
+		}],
+		cardMove: [{
+			type: i0.Output,
+			args: ["cardMove"]
+		}],
+		cardTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => VdKanbanCard), { isSignal: true }]
+		}],
+		columnHeader: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => VdKanbanColumnHeader), { isSignal: true }]
+		}]
+	}
+});
+const VD_KANBAN = [
+	VdKanban,
+	VdKanbanCard,
+	VdKanbanColumnHeader
+];
+export { VD_KANBAN, VdKanban, VdKanbanCard, VdKanbanColumnHeader, vdKanbanApplyMove };
+
+//# sourceMappingURL=vadem-ui-kanban.mjs.map