@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-gantt.mjs

@@ -0,0 +1,1094 @@
+import * as i0 from '@angular/core';
+import { afterNextRender, inject, Injector, ElementRef, model, input, booleanAttribute, output, signal, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { cbFormat, injectCbTranslation } from '@caribeng/ui';
+import { CbIcon } from '@caribeng/ui/icon';
+
+/**
+ * Modelo del diagrama de Gantt: fechas, árbol de tareas, grupos calculados,
+ * dependencias (fin → inicio) y planificación automática. Funciones puras: el
+ * componente las usa y los tests las prueban sin DOM.
+ */
+// --- Fechas -------------------------------------------------------------------------------
+function toDay(value) {
+    if (value instanceof Date)
+        return isNaN(value.getTime()) ? null : new Date(value.getFullYear(), value.getMonth(), value.getDate());
+    if (typeof value !== 'string' || !value)
+        return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+    const date = m ? new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])) : new Date(value);
+    return isNaN(date.getTime()) ? null : new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function isoDay(date) {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function addDays(date, days) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+/** Días de calendario entre `a` y `b` (`b` − `a`). */
+function dayDiff(a, b) {
+    return Math.round((Date.UTC(b.getFullYear(), b.getMonth(), b.getDate()) - Date.UTC(a.getFullYear(), a.getMonth(), a.getDate())) / 86_400_000);
+}
+/** Lunes de la semana de `date` (semana ISO). */
+function startOfWeek(date) {
+    return addDays(date, -((date.getDay() + 6) % 7));
+}
+/** Número de semana ISO. */
+function isoWeek(date) {
+    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    const day = d.getUTCDay() || 7;
+    d.setUTCDate(d.getUTCDate() + 4 - day);
+    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+    return Math.ceil(((d.getTime() - yearStart.getTime()) / 86_400_000 + 1) / 7);
+}
+/** Resuelve fechas y avance (los grupos abarcan a sus tareas y promedian su avance por duración). */
+function resolveTasks(tasks) {
+    const byId = new Map(tasks.map((t) => [t.id, t]));
+    const children = new Map();
+    for (const t of tasks) {
+        if (t.parent && byId.has(t.parent) && t.parent !== t.id) {
+            const list = children.get(t.parent) ?? [];
+            list.push(t.id);
+            children.set(t.parent, list);
+        }
+    }
+    const out = new Map();
+    const visiting = new Set();
+    const level = (t) => {
+        let n = 0;
+        const seen = new Set();
+        for (let p = t.parent; p && byId.has(p) && !seen.has(p); p = byId.get(p).parent) {
+            seen.add(p);
+            n++;
+        }
+        return n;
+    };
+    const resolve = (id) => {
+        const done = out.get(id);
+        if (done)
+            return done;
+        const task = byId.get(id);
+        if (!task || visiting.has(id))
+            return null;
+        visiting.add(id);
+        const kids = children.get(id) ?? [];
+        const isGroup = task.type === 'group' || kids.length > 0;
+        let start = toDay(task.start);
+        let end = toDay(task.end) ?? start;
+        let progress = clampProgress(task.progress ?? 0);
+        if (isGroup && kids.length) {
+            const resolved = kids.map(resolve).filter((r) => !!r);
+            if (resolved.length) {
+                start = new Date(Math.min(...resolved.map((r) => r.start.getTime())));
+                end = new Date(Math.max(...resolved.map((r) => r.end.getTime())));
+                const weights = resolved.map((r) => Math.max(1, dayDiff(r.start, r.end) + 1));
+                const total = weights.reduce((a, b) => a + b, 0);
+                progress = Math.round(resolved.reduce((sum, r, i) => sum + r.progress * weights[i], 0) / total);
+            }
+        }
+        visiting.delete(id);
+        if (!start)
+            return null;
+        if (!end || end < start)
+            end = start;
+        const isMilestone = task.type === 'milestone' && !isGroup;
+        if (isMilestone)
+            end = start;
+        const result = { task, start, end, progress, level: level(task), isGroup, isMilestone, children: kids };
+        out.set(id, result);
+        return result;
+    };
+    for (const t of tasks)
+        resolve(t.id);
+    return out;
+}
+function clampProgress(value) {
+    return Math.max(0, Math.min(100, Math.round(Number(value) || 0)));
+}
+/** Filas visibles: el árbol en orden, sin los hijos de los grupos plegados. */
+function visibleRows(tasks, resolved, collapsed) {
+    const rows = [];
+    const ids = new Set(tasks.map((t) => t.id));
+    const walk = (parent) => {
+        for (const t of tasks) {
+            const p = t.parent && ids.has(t.parent) && t.parent !== t.id ? t.parent : null;
+            if (p !== parent)
+                continue;
+            const r = resolved.get(t.id);
+            if (!r)
+                continue;
+            rows.push(r);
+            if (r.children.length && !collapsed.has(t.id))
+                walk(t.id);
+        }
+    };
+    walk(null);
+    return rows;
+}
+/** Ids de todas las tareas dentro de un grupo (a cualquier nivel). */
+function descendants(tasks, id) {
+    const out = [];
+    const queue = [id];
+    while (queue.length) {
+        const current = queue.shift();
+        for (const t of tasks) {
+            if (t.parent === current && !out.includes(t.id)) {
+                out.push(t.id);
+                queue.push(t.id);
+            }
+        }
+    }
+    return out;
+}
+// --- Dependencias ---------------------------------------------------------------------------
+/** ¿`to` depende (directa o indirectamente) de `from`? Evita crear ciclos. */
+function dependsOn(tasks, to, from) {
+    const byId = new Map(tasks.map((t) => [t.id, t]));
+    const seen = new Set();
+    const stack = [to];
+    while (stack.length) {
+        const id = stack.pop();
+        if (id === from)
+            return true;
+        if (seen.has(id))
+            continue;
+        seen.add(id);
+        stack.push(...(byId.get(id)?.dependencies ?? []));
+    }
+    return false;
+}
+/** ¿Se puede crear la dependencia `from` → `to`? (sin repetir, sin ciclos ni grupos que se contienen). */
+function canLink(tasks, from, to) {
+    if (from === to)
+        return false;
+    const target = tasks.find((t) => t.id === to);
+    if (!target || !tasks.some((t) => t.id === from))
+        return false;
+    if (target.dependencies?.includes(from))
+        return false;
+    if (descendants(tasks, from).includes(to) || descendants(tasks, to).includes(from))
+        return false;
+    return !dependsOn(tasks, from, to);
+}
+/**
+ * Planificación automática: cada tarea empieza como pronto el día siguiente al
+ * fin de sus predecesoras; si no, se desplaza conservando su duración. Devuelve
+ * las tareas cambiadas (las de grupos se resuelven con sus hijas).
+ */
+function autoSchedule(tasks) {
+    let current = [...tasks];
+    for (let pass = 0; pass < tasks.length + 1; pass++) {
+        const resolved = resolveTasks(current);
+        let changed = false;
+        current = current.map((t) => {
+            if (!t.dependencies?.length)
+                return t;
+            const self = resolved.get(t.id);
+            if (!self || self.isGroup)
+                return t;
+            const ends = t.dependencies.map((d) => resolved.get(d)?.end).filter((d) => !!d);
+            if (!ends.length)
+                return t;
+            const earliest = addDays(new Date(Math.max(...ends.map((d) => d.getTime()))), 1);
+            if (self.start >= earliest)
+                return t;
+            const shift = dayDiff(self.start, earliest);
+            changed = true;
+            return { ...t, start: isoDay(addDays(self.start, shift)), end: isoDay(addDays(self.end, shift)) };
+        });
+        if (!changed)
+            break;
+    }
+    return current;
+}
+
+/** Alto de cada fila (px), igual que en el CSS. */
+const ROW = 40;
+/** Píxeles por día según la escala. */
+const DAY_WIDTH = { day: 36, week: 14, month: 4 };
+let nextUid = 0;
+/**
+ * Diagrama de Gantt de CaribeNG: tabla de tareas en árbol (grupos plegables) y
+ * barras en el tiempo, con escalas de día, semana y mes.
+ *
+ * - Arrastra una barra para moverla, sus bordes para cambiar inicio o fin, el
+ *   tirador inferior para el avance y el punto de la derecha hasta otra tarea
+ *   para crear una dependencia (fin → inicio).
+ * - Con `autoSchedule`, al retrasar una tarea se desplazan las que dependen de ella.
+ * - Los grupos abarcan a sus tareas y promedian su avance; los hitos son rombos.
+ * - Con el teclado, cada barra es un botón: flechas mueven, Mayús + flechas cambian
+ *   el fin, Alt + flechas el inicio, + / − el avance, Supr quita sus dependencias
+ *   y Enter abre la tarea. Cada cambio se anuncia.
+ *
+ * @example
+ * ```html
+ * <cb-gantt [(tasks)]="tareas" [(scale)]="escala" (taskChange)="guardar($event)" />
+ * ```
+ */
+class CbGantt {
+    x(date) {
+        return dayDiff(this.range().start, date) * this.dayWidth();
+    }
+    // --- Textos ---------------------------------------------------------------------------
+    scaleLabel(s) {
+        const t = this.t();
+        return s === 'day' ? t.ganttDay : s === 'week' ? t.ganttWeek : t.ganttMonth;
+    }
+    columnLabel(col) {
+        const t = this.t();
+        return { name: t.ganttTask, start: t.ganttStart, end: t.ganttEnd, duration: t.ganttDuration, progress: t.ganttProgress, assignee: t.ganttAssignee }[col];
+    }
+    dateText(d) {
+        return new Intl.DateTimeFormat(this.t().intlLocale, { day: 'numeric', month: 'short' }).format(d);
+    }
+    cellText(r, col) {
+        switch (col) {
+            case 'start':
+                return this.dateText(r.start);
+            case 'end':
+                return this.dateText(r.end);
+            case 'duration':
+                return r.isMilestone ? '—' : cbFormat(this.t().ganttDays, dayDiff(r.start, r.end) + 1);
+            case 'progress':
+                return r.isMilestone ? '—' : `${r.progress} %`;
+            case 'assignee':
+                return r.task.assignee ?? '';
+            default:
+                return r.task.name;
+        }
+    }
+    barLabel(b) {
+        const t = this.t();
+        const deps = (b.row.task.dependencies ?? []).map((id) => this.resolved().get(id)?.task.name).filter(Boolean);
+        const after = deps.length ? `. ${cbFormat(t.ganttDependsOn, deps.join(', '))}` : '';
+        if (b.row.isMilestone)
+            return cbFormat(t.ganttMilestoneLabel, b.row.task.name, this.dateText(b.start)) + after;
+        const range = `${this.dateText(b.start)} – ${this.dateText(b.end)}`;
+        return cbFormat(b.row.isGroup ? t.ganttGroupLabel : t.ganttBarLabel, b.row.task.name, range, b.progress) + after;
+    }
+    // --- Árbol ---------------------------------------------------------------------------------
+    toggle(id) {
+        this.collapsed.update((set) => {
+            const next = new Set(set);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }
+    /** Selecciona la tarea, lleva su barra a la vista y le da el foco. */
+    focusBar(id) {
+        this.selected.set(id);
+        afterNextRender(() => {
+            const bar = this.barEl(id);
+            const scroller = this.scroller()?.nativeElement;
+            if (!bar || !scroller)
+                return;
+            const grid = scroller.querySelector('.cb-gantt__grid')?.offsetWidth ?? 0;
+            const left = bar.offsetLeft + grid;
+            if (left < scroller.scrollLeft + grid || left + bar.offsetWidth > scroller.scrollLeft + scroller.clientWidth) {
+                scroller.scrollLeft = Math.max(0, left - grid - 48);
+            }
+            bar.focus({ preventScroll: true });
+        }, { injector: this.injector });
+    }
+    /** Desplaza el diagrama hasta hoy (centrado en la parte visible). */
+    scrollToToday(smooth = true) {
+        const x = this.todayX();
+        const scroller = this.scroller()?.nativeElement;
+        if (x === null || !scroller)
+            return;
+        const grid = scroller.querySelector('.cb-gantt__grid')?.offsetWidth ?? 0;
+        scroller.scrollTo?.({ left: Math.max(0, x - (scroller.clientWidth - grid) / 3), behavior: smooth ? 'smooth' : 'auto' });
+    }
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.injector = inject(Injector);
+        this.host = inject(ElementRef);
+        this.uid = `cb-gantt-${++nextUid}`;
+        this.row = ROW;
+        this.scales = ['day', 'week', 'month'];
+        /** Tareas (bidireccional: se actualiza al arrastrar, con el teclado y al planificar). */
+        this.tasks = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tasks" }] : /* istanbul ignore next */ []));
+        /** Escala: un día, una semana o un mes por columna. */
+        this.scale = model('day', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+        /** Columnas de la tabla de la izquierda y su orden. */
+        this.columns = input(['name', 'start', 'end', 'duration', 'progress'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Ancho de la tabla de la izquierda; por defecto, el de sus columnas (como mucho, el 60 % del componente). */
+        this.gridWidth = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridWidth" }] : /* istanbul ignore next */ []));
+        /** Alto del componente (con scroll). */
+        this.height = input('28rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Al retrasar una tarea, desplaza las que dependen de ella (fin → inicio). */
+        this.autoSchedule = input(true, { ...(ngDevMode ? { debugName: "autoSchedule" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Sin edición: no se arrastra ni se crean dependencias. */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Barra con la escala y el botón Hoy. */
+        this.showToolbar = input(true, { ...(ngDevMode ? { debugName: "showToolbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Texto sin tareas. Por defecto, "Sin datos". */
+        this.emptyMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Una tarea cambió de fechas o de avance (también las desplazadas por la planificación). */
+        this.taskChange = output();
+        /** Doble clic o Enter sobre una tarea. */
+        this.taskOpen = output();
+        /** Dependencia creada (`to` depende de `from`). */
+        this.linkAdd = output();
+        /** Dependencia quitada. */
+        this.linkRemove = output();
+        this.collapsed = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        this.selected = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.selectedLink = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedLink" }] : /* istanbul ignore next */ []));
+        this.preview = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.drag = null;
+        this.scroller = viewChild('scroller', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+        this.chart = viewChild('chart', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []));
+        this.resolved = computed(() => resolveTasks(this.tasks()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+        /** Ancho de la tabla: el indicado o el nombre (14rem) más el de cada columna. */
+        this.gridSize = computed(() => {
+            if (this.gridWidth())
+                return this.gridWidth();
+            const widths = { name: 14, start: 4.5, end: 4.5, duration: 4.5, progress: 4, assignee: 6.5 };
+            return `${this.columns().reduce((sum, c) => sum + widths[c], 0)}rem`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridSize" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => visibleRows(this.tasks(), this.resolved(), this.collapsed()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.dayWidth = computed(() => DAY_WIDTH[this.scale()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dayWidth" }] : /* istanbul ignore next */ []));
+        /** Primer y último día del diagrama (con margen, alineados a la unidad de la escala). */
+        this.range = computed(() => {
+            const all = [...this.resolved().values()];
+            const today = toDay(new Date());
+            let min = all.length ? new Date(Math.min(...all.map((r) => r.start.getTime()))) : today;
+            let max = all.length ? new Date(Math.max(...all.map((r) => r.end.getTime()))) : addDays(today, 30);
+            const scale = this.scale();
+            if (scale === 'day') {
+                min = addDays(min, -3);
+                max = addDays(max, 10);
+            }
+            else if (scale === 'week') {
+                min = startOfWeek(addDays(min, -7));
+                max = addDays(startOfWeek(addDays(max, 14)), 6);
+            }
+            else {
+                min = new Date(min.getFullYear(), min.getMonth() - 1, 1);
+                max = new Date(max.getFullYear(), max.getMonth() + 2, 0);
+            }
+            return { start: min, end: max, days: dayDiff(min, max) + 1 };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+        this.chartWidth = computed(() => this.range().days * this.dayWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chartWidth" }] : /* istanbul ignore next */ []));
+        /** Unidades de la escala (fila inferior de la cabecera y columnas del fondo). */
+        this.units = computed(() => {
+            const { start, days } = this.range();
+            const locale = this.t().intlLocale;
+            const scale = this.scale();
+            const w = this.dayWidth();
+            const units = [];
+            if (scale === 'day') {
+                const weekday = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
+                for (let i = 0; i < days; i++) {
+                    const d = addDays(start, i);
+                    units.push({ key: isoDay(d), label: `${weekday.format(d)} ${d.getDate()}`, x: i * w, width: w, weekend: d.getDay() === 0 || d.getDay() === 6 });
+                }
+            }
+            else if (scale === 'week') {
+                const day = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' });
+                for (let i = 0; i < days; i += 7) {
+                    const d = addDays(start, i);
+                    units.push({ key: isoDay(d), label: `${cbFormat(this.t().ganttWeekShort, isoWeek(d))} · ${day.format(d)}`, x: i * w, width: 7 * w });
+                }
+            }
+            else {
+                const month = new Intl.DateTimeFormat(locale, { month: 'short' });
+                for (let d = new Date(start); d <= this.range().end; d = new Date(d.getFullYear(), d.getMonth() + 1, 1)) {
+                    const next = new Date(d.getFullYear(), d.getMonth() + 1, 1);
+                    units.push({ key: isoDay(d), label: month.format(d), x: this.x(d), width: dayDiff(d, next) * w });
+                }
+            }
+            return units;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "units" }] : /* istanbul ignore next */ []));
+        /** Fila superior de la cabecera: meses (día y semana) o años (mes). */
+        this.topUnits = computed(() => {
+            const { start, end } = this.range();
+            const locale = this.t().intlLocale;
+            const units = [];
+            if (this.scale() === 'month') {
+                for (let y = start.getFullYear(); y <= end.getFullYear(); y++) {
+                    const from = new Date(Math.max(start.getTime(), new Date(y, 0, 1).getTime()));
+                    const to = new Date(Math.min(addDays(end, 1).getTime(), new Date(y + 1, 0, 1).getTime()));
+                    units.push({ key: String(y), label: String(y), x: this.x(from), width: dayDiff(from, to) * this.dayWidth() });
+                }
+                return units;
+            }
+            const format = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' });
+            for (let d = new Date(start.getFullYear(), start.getMonth(), 1); d <= end; d = new Date(d.getFullYear(), d.getMonth() + 1, 1)) {
+                const from = d < start ? start : d;
+                const next = new Date(d.getFullYear(), d.getMonth() + 1, 1);
+                const to = next > addDays(end, 1) ? addDays(end, 1) : next;
+                const label = format.format(d);
+                // Solo la primera letra en mayúscula ("Noviembre de 2026", no "Noviembre De 2026").
+                units.push({ key: isoDay(d), label: label.charAt(0).toUpperCase() + label.slice(1), x: this.x(from), width: dayDiff(from, to) * this.dayWidth() });
+            }
+            return units;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "topUnits" }] : /* istanbul ignore next */ []));
+        this.todayX = computed(() => {
+            const today = toDay(new Date());
+            const { start, end } = this.range();
+            return today < start || today > end ? null : this.x(today) + this.dayWidth() / 2;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayX" }] : /* istanbul ignore next */ []));
+        /** Geometría de las barras (con la vista previa del arrastre). */
+        this.bars = computed(() => {
+            const preview = this.preview();
+            const moving = preview && preview.mode === 'move' ? new Set([preview.id, ...descendants(this.tasks(), preview.id)]) : null;
+            const w = this.dayWidth();
+            return this.rows().map((r, index) => {
+                let start = r.start;
+                let end = r.end;
+                let progress = r.progress;
+                if (preview && moving?.has(r.task.id)) {
+                    start = addDays(start, preview.delta);
+                    end = addDays(end, preview.delta);
+                }
+                else if (preview?.id === r.task.id) {
+                    if (preview.mode === 'start')
+                        start = addDays(start, Math.min(preview.delta, dayDiff(start, end)));
+                    if (preview.mode === 'end')
+                        end = addDays(end, Math.max(preview.delta, -dayDiff(start, end)));
+                    if (preview.mode === 'progress')
+                        progress = preview.progress;
+                }
+                if (moving && r.isGroup && !moving.has(r.task.id)) {
+                    // Un grupo que contiene la tarea movida se recalcula en la vista previa.
+                    const kids = descendants(this.tasks(), r.task.id).filter((id) => moving.has(id));
+                    if (kids.length) {
+                        const resolved = this.resolved();
+                        const spans = descendants(this.tasks(), r.task.id)
+                            .map((id) => resolved.get(id))
+                            .filter((k) => !!k && !k.isGroup)
+                            .map((k) => (moving.has(k.task.id) ? [addDays(k.start, preview.delta), addDays(k.end, preview.delta)] : [k.start, k.end]));
+                        if (spans.length) {
+                            start = new Date(Math.min(...spans.map((s) => s[0].getTime())));
+                            end = new Date(Math.max(...spans.map((s) => s[1].getTime())));
+                        }
+                    }
+                }
+                const x = this.x(start);
+                const width = r.isMilestone ? Math.max(18, w) : (dayDiff(start, end) + 1) * w;
+                return { row: r, index, x: r.isMilestone ? x + w / 2 - 9 : x, width: r.isMilestone ? 18 : width, y: index * ROW, start, end, progress };
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+        /** Flechas de dependencias entre barras visibles. */
+        this.links = computed(() => {
+            const bars = new Map(this.bars().map((b) => [b.row.task.id, b]));
+            const out = [];
+            for (const b of this.bars()) {
+                for (const dep of b.row.task.dependencies ?? []) {
+                    const from = bars.get(dep);
+                    if (!from)
+                        continue;
+                    const x1 = from.x + from.width;
+                    const y1 = from.y + ROW / 2;
+                    const x2 = b.x;
+                    const y2 = b.y + ROW / 2;
+                    let path;
+                    if (x2 - x1 >= 16) {
+                        const mx = x1 + 8;
+                        path = `M${x1} ${y1} H${mx} V${y2} H${x2 - 1}`;
+                    }
+                    else {
+                        const midY = y2 > y1 ? b.y : b.y + ROW;
+                        path = `M${x1} ${y1} H${x1 + 8} V${midY} H${x2 - 10} V${y2} H${x2 - 1}`;
+                    }
+                    out.push({ key: `${dep}>${b.row.task.id}`, from: dep, to: b.row.task.id, fromName: from.row.task.name, toName: b.row.task.name, path, mid: { x: x1 + 8, y: (y1 + y2) / 2 } });
+                }
+            }
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+        /** Línea provisional al crear una dependencia. */
+        this.linkLine = computed(() => {
+            const p = this.preview();
+            if (p?.mode !== 'link' || !p.point)
+                return null;
+            const from = this.bars().find((b) => b.row.task.id === p.id);
+            if (!from)
+                return null;
+            return `M${from.x + from.width} ${from.y + ROW / 2} L${p.point.x} ${p.point.y}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkLine" }] : /* istanbul ignore next */ []));
+        // Al abrir, el diagrama empieza cerca de hoy.
+        afterNextRender(() => this.scrollToToday(false));
+    }
+    barEl(id) {
+        return Array.from(this.host.nativeElement.querySelectorAll('.cb-gantt__bar')).find((b) => b.dataset['ganttId'] === id) ?? null;
+    }
+    // --- Cambios ---------------------------------------------------------------------------------
+    /** Aplica un cambio a una tarea (y a las desplazadas por la planificación) y lo emite. */
+    apply(id, mode, delta, progress) {
+        const tasks = this.tasks();
+        const resolved = this.resolved();
+        const target = resolved.get(id);
+        if (!target)
+            return;
+        const shift = (t, d) => {
+            const r = resolved.get(t.id);
+            return { ...t, start: isoDay(addDays(r.start, d)), end: isoDay(addDays(r.end, d)) };
+        };
+        let next;
+        if (mode === 'move') {
+            if (!delta)
+                return;
+            const moved = new Set([id, ...descendants(tasks, id)]);
+            next = tasks.map((t) => (moved.has(t.id) && !resolved.get(t.id)?.isGroup ? shift(t, delta) : t));
+        }
+        else if (mode === 'progress') {
+            const value = clampProgress(progress ?? 0);
+            if (value === target.progress || target.isGroup)
+                return;
+            next = tasks.map((t) => (t.id === id ? { ...t, progress: value } : t));
+        }
+        else {
+            if (!delta || target.isGroup || target.isMilestone)
+                return;
+            const length = dayDiff(target.start, target.end);
+            next = tasks.map((t) => {
+                if (t.id !== id)
+                    return t;
+                return mode === 'start'
+                    ? { ...t, start: isoDay(addDays(target.start, Math.min(delta, length))) }
+                    : { ...t, end: isoDay(addDays(target.end, Math.max(delta, -length))) };
+            });
+        }
+        if (this.autoSchedule())
+            next = autoSchedule(next);
+        this.commit(tasks, next, id, mode === 'progress' ? 'progress' : mode === 'move' ? 'move' : 'resize');
+    }
+    commit(before, after, id, reason) {
+        const prev = new Map(before.map((t) => [t.id, t]));
+        this.tasks.set(after);
+        const own = new Set([id, ...descendants(before, id)]);
+        const changes = [];
+        for (const t of after) {
+            const p = prev.get(t.id);
+            if (!p || p === t)
+                continue;
+            if (p.start === t.start && p.end === t.end && p.progress === t.progress && p.dependencies === t.dependencies)
+                continue;
+            changes.push({ task: t, previous: p, reason: own.has(t.id) ? reason : 'schedule' });
+        }
+        // Primero las replanificadas; al final, la tarea que cambió el usuario.
+        changes.sort((a, b) => Number(a.reason !== 'schedule') - Number(b.reason !== 'schedule'));
+        for (const change of changes)
+            this.taskChange.emit(change);
+        const r = this.resolveFresh(id);
+        if (r) {
+            const text = reason === 'progress'
+                ? cbFormat(this.t().ganttProgressChanged, r.task.name, r.progress)
+                : cbFormat(this.t().ganttMoved, r.task.name, `${this.dateText(r.start)} – ${this.dateText(r.end)}`);
+            this.announcement.set(text);
+        }
+    }
+    resolveFresh(id) {
+        return this.resolved().get(id);
+    }
+    /** Crea la dependencia `from` → `to` (si no forma un ciclo). */
+    addLink(from, to) {
+        const tasks = this.tasks();
+        if (!canLink(tasks, from, to))
+            return false;
+        let next = tasks.map((t) => (t.id === to ? { ...t, dependencies: [...(t.dependencies ?? []), from] } : t));
+        if (this.autoSchedule())
+            next = autoSchedule(next);
+        this.commit(tasks, next, to, 'schedule');
+        this.linkAdd.emit({ from, to });
+        const names = [from, to].map((id) => this.resolved().get(id)?.task.name ?? id);
+        this.announcement.set(cbFormat(this.t().ganttLinkAdded, names[0], names[1]));
+        return true;
+    }
+    /** Quita la dependencia `from` → `to`. */
+    removeLink(from, to) {
+        const tasks = this.tasks();
+        const target = tasks.find((t) => t.id === to);
+        if (!target?.dependencies?.includes(from))
+            return;
+        this.tasks.set(tasks.map((t) => (t.id === to ? { ...t, dependencies: t.dependencies.filter((d) => d !== from) } : t)));
+        this.selectedLink.set(null);
+        this.linkRemove.emit({ from, to });
+        this.announcement.set(this.t().ganttLinkRemoved);
+    }
+    selectLink(link) {
+        if (this.readonly())
+            return;
+        this.selectedLink.set(this.selectedLink()?.key === link.key ? null : link);
+    }
+    // --- Arrastre --------------------------------------------------------------------------------
+    onPointerDown(event, bar) {
+        this.selected.set(bar.row.task.id);
+        this.selectedLink.set(null);
+        if (this.readonly() || event.button !== 0)
+            return;
+        const target = event.target;
+        let mode = target.dataset['mode'] ?? 'move';
+        if (bar.row.isMilestone && mode !== 'link')
+            mode = 'move';
+        if (bar.row.isGroup && mode !== 'move' && mode !== 'link')
+            return;
+        event.preventDefault();
+        this.drag = { id: bar.row.task.id, mode, x: event.clientX, y: event.clientY, startProgress: bar.progress, width: bar.width, moved: false };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+    }
+    onPointerMove(event) {
+        const drag = this.drag;
+        if (!drag)
+            return;
+        const dx = event.clientX - drag.x;
+        if (!drag.moved && Math.abs(dx) < 3 && Math.abs(event.clientY - drag.y) < 3)
+            return;
+        drag.moved = true;
+        if (drag.mode === 'link') {
+            const rect = this.chart()?.nativeElement.getBoundingClientRect();
+            this.preview.set({ id: drag.id, mode: 'link', delta: 0, progress: 0, point: rect ? { x: event.clientX - rect.left, y: event.clientY - rect.top } : null });
+            return;
+        }
+        if (drag.mode === 'progress') {
+            const value = clampProgress(drag.startProgress + (dx / Math.max(1, drag.width)) * 100);
+            this.preview.set({ id: drag.id, mode: 'progress', delta: 0, progress: value, point: null });
+            return;
+        }
+        this.preview.set({ id: drag.id, mode: drag.mode, delta: Math.round(dx / this.dayWidth()), progress: 0, point: null });
+    }
+    onPointerUp(event) {
+        const drag = this.drag;
+        const preview = this.preview();
+        this.drag = null;
+        this.preview.set(null);
+        if (!drag?.moved || !preview)
+            return;
+        if (drag.mode === 'link') {
+            const doc = this.host.nativeElement.ownerDocument;
+            const under = doc.elementFromPoint?.(event.clientX, event.clientY);
+            const to = under?.closest('.cb-gantt__bar')?.dataset['ganttId'];
+            if (to)
+                this.addLink(drag.id, to);
+            return;
+        }
+        this.apply(drag.id, drag.mode, preview.delta, preview.progress);
+    }
+    cancelDrag() {
+        this.drag = null;
+        this.preview.set(null);
+    }
+    // --- Teclado ---------------------------------------------------------------------------------
+    onBarKeydown(event, r) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.taskOpen.emit(r.task);
+            return;
+        }
+        if (event.key === 'Escape' && this.drag) {
+            this.cancelDrag();
+            return;
+        }
+        if (this.readonly())
+            return;
+        const id = r.task.id;
+        const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+        if (step) {
+            event.preventDefault();
+            const mode = event.shiftKey ? 'end' : event.altKey ? 'start' : 'move';
+            if (mode !== 'move' && (r.isGroup || r.isMilestone))
+                return;
+            this.apply(id, mode, step);
+            this.focusBar(id);
+        }
+        else if (['+', '=', '-', 'PageUp', 'PageDown'].includes(event.key) && !r.isGroup && !r.isMilestone) {
+            event.preventDefault();
+            const up = event.key === '+' || event.key === '=' || event.key === 'PageUp';
+            this.apply(id, 'progress', 0, r.progress + (up ? 10 : -10));
+            this.focusBar(id);
+        }
+        else if ((event.key === 'Delete' || event.key === 'Backspace') && r.task.dependencies?.length) {
+            event.preventDefault();
+            for (const from of [...r.task.dependencies])
+                this.removeLink(from, id);
+            this.focusBar(id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbGantt, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbGantt, isStandalone: true, selector: "cb-gantt", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, gridWidth: { classPropertyName: "gridWidth", publicName: "gridWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, autoSchedule: { classPropertyName: "autoSchedule", publicName: "autoSchedule", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tasks: "tasksChange", scale: "scaleChange", taskChange: "taskChange", taskOpen: "taskOpen", linkAdd: "linkAdd", linkRemove: "linkRemove" }, host: { properties: { "class.cb-gantt--readonly": "readonly()" }, classAttribute: "cb-gantt" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (showToolbar()) {
+      <div class="cb-gantt__toolbar">
+        <div class="cb-gantt__scales" role="group" [attr.aria-label]="t().ganttScale">
+          @for (s of scales; track s) {
+            <button type="button" class="cb-gantt__scale" [attr.aria-pressed]="scale() === s" (click)="scale.set(s)">{{ scaleLabel(s) }}</button>
+          }
+        </div>
+        <button type="button" class="cb-gantt__btn" (click)="scrollToToday()">{{ t().today }}</button>
+      </div>
+    }
+
+    <div #scroller class="cb-gantt__scroller" [style.height]="height()" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)" (pointercancel)="cancelDrag()">
+      <div class="cb-gantt__inner" [style.--cb-gantt-grid]="gridSize()">
+        <!-- Cabecera: columnas de la tabla y escala de tiempo -->
+        <div class="cb-gantt__head">
+          <div class="cb-gantt__head-grid" aria-hidden="true">
+            @for (col of columns(); track col) {
+              <span class="cb-gantt__head-cell" [class]="'cb-gantt__head-cell cb-gantt__col-' + col">{{ columnLabel(col) }}</span>
+            }
+          </div>
+          <div class="cb-gantt__head-scale" [style.width.px]="chartWidth()" aria-hidden="true">
+            <div class="cb-gantt__head-row">
+              @for (u of topUnits(); track u.key) {
+                <span class="cb-gantt__unit cb-gantt__unit--top" [style.left.px]="u.x" [style.width.px]="u.width">{{ u.label }}</span>
+              }
+            </div>
+            <div class="cb-gantt__head-row">
+              @for (u of units(); track u.key) {
+                <span class="cb-gantt__unit" [class.cb-gantt__unit--weekend]="u.weekend" [style.left.px]="u.x" [style.width.px]="u.width">{{ u.label }}</span>
+              }
+            </div>
+          </div>
+        </div>
+
+        <div class="cb-gantt__body" [style.height.px]="rows().length * row">
+          <!-- Tabla de tareas (árbol) -->
+          <div class="cb-gantt__grid" role="treegrid" [attr.aria-label]="ariaLabel() || t().ganttChart" [attr.aria-rowcount]="rows().length">
+            @for (r of rows(); track r.task.id; let i = $index) {
+              <div
+                class="cb-gantt__row"
+                role="row"
+                [class.cb-is-selected]="selected() === r.task.id"
+                [attr.aria-level]="r.level + 1"
+                [attr.aria-expanded]="r.children.length ? !collapsed().has(r.task.id) : null"
+                [attr.aria-rowindex]="i + 1"
+                [attr.aria-selected]="selected() === r.task.id"
+              >
+                @for (col of columns(); track col) {
+                  @if (col === 'name') {
+                    <span class="cb-gantt__cell cb-gantt__col-name" role="gridcell" [style.padding-left]="0.5 + r.level * 1.1 + 'rem'">
+                      @if (r.children.length) {
+                        <button
+                          type="button"
+                          class="cb-gantt__toggle"
+                          [attr.aria-label]="fmt(collapsed().has(r.task.id) ? t().ganttExpand : t().ganttCollapse, r.task.name)"
+                          [attr.aria-expanded]="!collapsed().has(r.task.id)"
+                          (click)="toggle(r.task.id)"
+                        >
+                          <cb-icon [name]="collapsed().has(r.task.id) ? 'chevron-right' : 'chevron-down'" [size]="14" aria-hidden="true" />
+                        </button>
+                      } @else {
+                        <span class="cb-gantt__toggle-space" aria-hidden="true"></span>
+                      }
+                      <button type="button" class="cb-gantt__name" [class.cb-gantt__name--group]="r.isGroup" (click)="focusBar(r.task.id)" (dblclick)="taskOpen.emit(r.task)">
+                        @if (r.isMilestone) {
+                          <span class="cb-gantt__diamond-mini" aria-hidden="true"></span>
+                        }
+                        {{ r.task.name }}
+                      </button>
+                    </span>
+                  } @else {
+                    <span [class]="'cb-gantt__cell cb-gantt__col-' + col" role="gridcell">{{ cellText(r, col) }}</span>
+                  }
+                }
+              </div>
+            }
+          </div>
+
+          <!-- Diagrama -->
+          <div #chart class="cb-gantt__chart" [style.width.px]="chartWidth()">
+            @for (u of units(); track u.key) {
+              <span class="cb-gantt__col" [class.cb-gantt__col--weekend]="u.weekend" [style.left.px]="u.x" [style.width.px]="u.width" aria-hidden="true"></span>
+            }
+            @for (r of rows(); track r.task.id; let i = $index) {
+              <span class="cb-gantt__stripe" [class.cb-is-selected]="selected() === r.task.id" [style.top.px]="i * row" aria-hidden="true"></span>
+            }
+            @if (todayX() !== null) {
+              <span class="cb-gantt__today" [style.left.px]="todayX()" aria-hidden="true"></span>
+            }
+
+            <svg class="cb-gantt__links" [attr.width]="chartWidth()" [attr.height]="rows().length * row" aria-hidden="true">
+              <defs>
+                <marker [attr.id]="uid + '-arrow'" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+                  <path d="M0 0 L8 4 L0 8 z" />
+                </marker>
+              </defs>
+              @for (l of links(); track l.key) {
+                <path class="cb-gantt__link-hit" [attr.d]="l.path" (click)="selectLink(l)" />
+                <path class="cb-gantt__link" [class.cb-is-selected]="selectedLink()?.key === l.key" [attr.d]="l.path" [attr.marker-end]="'url(#' + uid + '-arrow)'" />
+              }
+              @if (linkLine(); as line) {
+                <path class="cb-gantt__link cb-gantt__link--draft" [attr.d]="line" />
+              }
+            </svg>
+
+            @if (selectedLink(); as sl) {
+              <button
+                type="button"
+                class="cb-gantt__unlink"
+                [style.left.px]="sl.mid.x"
+                [style.top.px]="sl.mid.y"
+                [attr.aria-label]="fmt(t().ganttRemoveLink, sl.fromName, sl.toName)"
+                [attr.title]="fmt(t().ganttRemoveLink, sl.fromName, sl.toName)"
+                (click)="removeLink(sl.from, sl.to)"
+              >
+                <cb-icon name="x" [size]="12" aria-hidden="true" />
+              </button>
+            }
+
+            @for (b of bars(); track b.row.task.id) {
+              <div
+                class="cb-gantt__bar"
+                role="button"
+                tabindex="0"
+                [attr.data-gantt-id]="b.row.task.id"
+                [class.cb-gantt__bar--group]="b.row.isGroup"
+                [class.cb-gantt__bar--milestone]="b.row.isMilestone"
+                [class.cb-gantt__bar--short]="!b.row.isMilestone && !b.row.isGroup && b.width < 72"
+                [class.cb-is-selected]="selected() === b.row.task.id"
+                [class.cb-is-dragging]="preview()?.id === b.row.task.id"
+                [style.left.px]="b.x"
+                [style.top.px]="b.y"
+                [style.width.px]="b.width"
+                [style.--cb-gantt-color]="b.row.task.color || null"
+                [attr.aria-label]="barLabel(b)"
+                [attr.aria-describedby]="readonly() ? null : uid + '-help'"
+                (pointerdown)="onPointerDown($event, b)"
+                (keydown)="onBarKeydown($event, b.row)"
+                (click)="selected.set(b.row.task.id)"
+                (dblclick)="taskOpen.emit(b.row.task)"
+              >
+                @if (!b.row.isMilestone) {
+                  <span class="cb-gantt__progress" [style.width.%]="b.progress" aria-hidden="true"></span>
+                  <span class="cb-gantt__bar-label" aria-hidden="true">{{ b.row.task.name }}</span>
+                  @if (!readonly() && !b.row.isGroup) {
+                    <span class="cb-gantt__handle cb-gantt__handle--start" data-mode="start" aria-hidden="true"></span>
+                    <span class="cb-gantt__handle cb-gantt__handle--end" data-mode="end" aria-hidden="true"></span>
+                    <span class="cb-gantt__progress-handle" data-mode="progress" [style.left.%]="b.progress" aria-hidden="true"></span>
+                  }
+                } @else {
+                  <span class="cb-gantt__diamond" aria-hidden="true"></span>
+                  <span class="cb-gantt__milestone-label" aria-hidden="true">{{ b.row.task.name }}</span>
+                }
+                @if (!readonly()) {
+                  <span class="cb-gantt__connector" data-mode="link" aria-hidden="true"></span>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+      @if (!rows().length) {
+        <p class="cb-gantt__empty">{{ emptyMessage() ?? t().noData }}</p>
+      }
+    </div>
+    <p class="cb-gantt__sr" [id]="uid + '-help'">{{ t().ganttInstructions }}</p>
+    <div class="cb-gantt__sr" role="status">{{ announcement() }}</div>
+  `, isInline: true, styles: [":host{--cb-gantt-row: 40px;--cb-gantt-bar: var(--cb-color-primary-500);--cb-gantt-bar-bg: color-mix(in srgb, var(--cb-gantt-bar) 28%, var(--cb-color-surface));display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-gantt__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-gantt__scales{display:inline-flex;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-hover)}.cb-gantt__scale,.cb-gantt__btn{padding:.3rem .75rem;border:0;border-radius:calc(var(--cb-radius-md) - 2px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-gantt__scale[aria-pressed=true]{background:var(--cb-color-surface-raised);color:var(--cb-color-text-strong, var(--cb-color-text));box-shadow:0 1px 2px #0f172a1f}.cb-gantt__btn{border:1px solid var(--cb-color-border-strong);color:var(--cb-color-text)}.cb-gantt__btn:hover{background:var(--cb-color-surface-hover)}:is(.cb-gantt__scale,.cb-gantt__btn,.cb-gantt__toggle,.cb-gantt__name,.cb-gantt__unlink):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-gantt__scroller{position:relative;overflow:auto;container-type:inline-size;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface)}.cb-gantt__inner{--cb-gantt-grid-w: min(var(--cb-gantt-grid, 30rem), 60cqi);position:relative;width:max-content;min-width:100%}.cb-gantt__head{position:sticky;top:0;z-index:4;display:flex;height:52px;border-bottom:1px solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-gantt__head-grid{position:sticky;left:0;z-index:5;display:flex;flex:none;align-items:flex-end;width:var(--cb-gantt-grid-w);padding-bottom:.45rem;border-right:1px solid var(--cb-color-border);background:inherit}.cb-gantt__head-cell{flex:0 0 auto;box-sizing:border-box;padding:0 .5rem;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}.cb-gantt__head-cell.cb-gantt__col-name{padding-left:.75rem}.cb-gantt__col-name{flex:1 1 auto!important;min-width:6rem}.cb-gantt__col-start,.cb-gantt__col-end,.cb-gantt__col-duration{width:4.5rem}.cb-gantt__col-progress{width:4rem}.cb-gantt__col-assignee{width:6.5rem}.cb-gantt__head-scale{position:relative;flex:none}.cb-gantt__head-row{position:relative;height:26px}.cb-gantt__unit{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-left:1px solid var(--cb-color-border);color:var(--cb-color-text-muted);font-size:.6875rem;white-space:nowrap}.cb-gantt__unit--top{justify-content:flex-start;padding-left:.5rem;color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-gantt__unit--weekend{background:var(--cb-color-surface-hover)}@container (max-width: 40rem){.cb-gantt__col-start,.cb-gantt__col-end,.cb-gantt__col-duration,.cb-gantt__col-progress,.cb-gantt__col-assignee{display:none}.cb-gantt__head-grid,.cb-gantt__row{overflow:hidden}}.cb-gantt__body{position:relative;display:flex}.cb-gantt__grid{position:sticky;left:0;z-index:3;flex:none;width:var(--cb-gantt-grid-w);border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-gantt__row{display:flex;align-items:center;height:var(--cb-gantt-row);border-bottom:1px solid var(--cb-color-border)}.cb-gantt__row.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 9%,var(--cb-color-surface))}.cb-gantt__cell{flex:0 0 auto;box-sizing:border-box;padding:0 .5rem;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.cb-gantt__cell.cb-gantt__col-name{display:flex;align-items:center;gap:.25rem;min-width:0;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-gantt__toggle,.cb-gantt__toggle-space{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.4rem;height:1.4rem}.cb-gantt__toggle{padding:0;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-gantt__toggle:hover{background:var(--cb-color-surface-hover)}.cb-gantt__name{display:inline-flex;align-items:center;gap:.4rem;min-width:0;padding:.15rem .25rem;overflow:hidden;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:start;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.cb-gantt__name--group{font-weight:var(--cb-font-weight-semibold, 600)}.cb-gantt__diamond-mini{flex:none;width:.55rem;height:.55rem;background:var(--cb-color-warning-500, #f59e0b);transform:rotate(45deg)}.cb-gantt__chart{position:relative;flex:none}.cb-gantt__col{position:absolute;top:0;bottom:0;border-left:1px solid color-mix(in srgb,var(--cb-color-border) 60%,transparent)}.cb-gantt__col--weekend{background:color-mix(in srgb,var(--cb-color-surface-hover) 70%,transparent)}.cb-gantt__stripe{position:absolute;left:0;right:0;height:var(--cb-gantt-row);border-bottom:1px solid var(--cb-color-border)}.cb-gantt__stripe.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 7%,transparent)}.cb-gantt__today{position:absolute;top:0;bottom:0;z-index:1;width:2px;margin-left:-1px;background:var(--cb-color-danger-500, #ef4444)}.cb-gantt__links{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}.cb-gantt__links marker path{fill:var(--cb-color-text-muted)}.cb-gantt__link{fill:none;stroke:var(--cb-color-text-muted);stroke-width:1.5}.cb-gantt__link.cb-is-selected{stroke:var(--cb-color-primary-600, var(--cb-color-primary-500));stroke-width:2.5}.cb-gantt__link--draft{stroke:var(--cb-color-primary-500);stroke-dasharray:4 3}.cb-gantt__link-hit{fill:none;stroke:transparent;stroke-width:10;pointer-events:stroke;cursor:pointer}:host(.cb-gantt--readonly) .cb-gantt__link-hit{cursor:default}.cb-gantt__unlink{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin:-.625rem 0 0 -.625rem;padding:0;border:1px solid var(--cb-color-border-strong);border-radius:50%;background:var(--cb-color-surface-raised);color:var(--cb-color-danger-600, var(--cb-color-danger));cursor:pointer}.cb-gantt__bar{position:absolute;z-index:2;box-sizing:border-box;height:24px;margin-top:8px;border-radius:6px;background:color-mix(in srgb,var(--cb-gantt-color, var(--cb-gantt-bar)) 28%,var(--cb-color-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cb-gantt-color, var(--cb-gantt-bar)) 55%,transparent);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}:host(.cb-gantt--readonly) .cb-gantt__bar{cursor:pointer}.cb-gantt__bar:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-gantt__bar.cb-is-selected{box-shadow:inset 0 0 0 2px var(--cb-gantt-color, var(--cb-gantt-bar))}.cb-gantt__bar.cb-is-dragging{cursor:grabbing;opacity:.85}.cb-gantt__progress{position:absolute;inset:0 auto 0 0;border-radius:6px 0 0 6px;background:var(--cb-gantt-color, var(--cb-gantt-bar))}.cb-gantt__bar-label{position:relative;display:block;padding:0 .5rem;overflow:hidden;color:var(--cb-color-text);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);line-height:24px;text-overflow:ellipsis;white-space:nowrap;mix-blend-mode:normal}.cb-gantt__bar--short .cb-gantt__bar-label{position:absolute;top:0;left:calc(100% + 18px);padding:0;overflow:visible}.cb-gantt__handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize}.cb-gantt__handle--start{left:0}.cb-gantt__handle--end{right:0}.cb-gantt__progress-handle{position:absolute;bottom:-6px;width:10px;height:10px;margin-left:-5px;border:2px solid var(--cb-color-surface);border-radius:50%;background:var(--cb-gantt-color, var(--cb-gantt-bar));cursor:col-resize;opacity:0}.cb-gantt__connector{position:absolute;top:50%;right:-14px;width:10px;height:10px;margin-top:-5px;border:2px solid var(--cb-gantt-color, var(--cb-gantt-bar));border-radius:50%;background:var(--cb-color-surface);cursor:crosshair;opacity:0}.cb-gantt__bar:hover :is(.cb-gantt__progress-handle,.cb-gantt__connector),.cb-gantt__bar.cb-is-selected :is(.cb-gantt__progress-handle,.cb-gantt__connector){opacity:1}@media(hover:none){.cb-gantt__progress-handle,.cb-gantt__connector{opacity:1}}.cb-gantt__bar--group{height:12px;margin-top:14px;border-radius:2px;background:var(--cb-color-text-muted);box-shadow:none}.cb-gantt__bar--group .cb-gantt__progress{border-radius:2px 0 0 2px;background:var(--cb-color-text)}.cb-gantt__bar--group .cb-gantt__bar-label{position:absolute;bottom:12px;left:0;padding:0;line-height:1.2}.cb-gantt__bar--milestone{width:18px;height:18px;margin-top:11px;background:transparent;box-shadow:none}.cb-gantt__bar--milestone.cb-is-selected{box-shadow:none}.cb-gantt__diamond{position:absolute;inset:2px;border-radius:3px;background:var(--cb-gantt-color, var(--cb-color-warning-500, #f59e0b));transform:rotate(45deg)}.cb-gantt__bar--milestone.cb-is-selected .cb-gantt__diamond{outline:2px solid var(--cb-color-text);outline-offset:1px}.cb-gantt__milestone-label{position:absolute;top:0;left:26px;color:var(--cb-color-text);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);line-height:18px;white-space:nowrap}.cb-gantt__bar--milestone .cb-gantt__connector{right:-16px}.cb-gantt__empty{margin:0;padding:2rem;color:var(--cb-color-text-muted);text-align:center}.cb-gantt__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.cb-gantt__bar:not(.cb-is-dragging){transition:left .12s ease,width .12s ease}}@media(forced-colors:active){.cb-gantt__bar,.cb-gantt__progress{forced-color-adjust:none;border:1px solid CanvasText}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbGantt, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-gantt', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-gantt', '[class.cb-gantt--readonly]': 'readonly()' }, template: `
+    @if (showToolbar()) {
+      <div class="cb-gantt__toolbar">
+        <div class="cb-gantt__scales" role="group" [attr.aria-label]="t().ganttScale">
+          @for (s of scales; track s) {
+            <button type="button" class="cb-gantt__scale" [attr.aria-pressed]="scale() === s" (click)="scale.set(s)">{{ scaleLabel(s) }}</button>
+          }
+        </div>
+        <button type="button" class="cb-gantt__btn" (click)="scrollToToday()">{{ t().today }}</button>
+      </div>
+    }
+
+    <div #scroller class="cb-gantt__scroller" [style.height]="height()" (pointermove)="onPointerMove($event)" (pointerup)="onPointerUp($event)" (pointercancel)="cancelDrag()">
+      <div class="cb-gantt__inner" [style.--cb-gantt-grid]="gridSize()">
+        <!-- Cabecera: columnas de la tabla y escala de tiempo -->
+        <div class="cb-gantt__head">
+          <div class="cb-gantt__head-grid" aria-hidden="true">
+            @for (col of columns(); track col) {
+              <span class="cb-gantt__head-cell" [class]="'cb-gantt__head-cell cb-gantt__col-' + col">{{ columnLabel(col) }}</span>
+            }
+          </div>
+          <div class="cb-gantt__head-scale" [style.width.px]="chartWidth()" aria-hidden="true">
+            <div class="cb-gantt__head-row">
+              @for (u of topUnits(); track u.key) {
+                <span class="cb-gantt__unit cb-gantt__unit--top" [style.left.px]="u.x" [style.width.px]="u.width">{{ u.label }}</span>
+              }
+            </div>
+            <div class="cb-gantt__head-row">
+              @for (u of units(); track u.key) {
+                <span class="cb-gantt__unit" [class.cb-gantt__unit--weekend]="u.weekend" [style.left.px]="u.x" [style.width.px]="u.width">{{ u.label }}</span>
+              }
+            </div>
+          </div>
+        </div>
+
+        <div class="cb-gantt__body" [style.height.px]="rows().length * row">
+          <!-- Tabla de tareas (árbol) -->
+          <div class="cb-gantt__grid" role="treegrid" [attr.aria-label]="ariaLabel() || t().ganttChart" [attr.aria-rowcount]="rows().length">
+            @for (r of rows(); track r.task.id; let i = $index) {
+              <div
+                class="cb-gantt__row"
+                role="row"
+                [class.cb-is-selected]="selected() === r.task.id"
+                [attr.aria-level]="r.level + 1"
+                [attr.aria-expanded]="r.children.length ? !collapsed().has(r.task.id) : null"
+                [attr.aria-rowindex]="i + 1"
+                [attr.aria-selected]="selected() === r.task.id"
+              >
+                @for (col of columns(); track col) {
+                  @if (col === 'name') {
+                    <span class="cb-gantt__cell cb-gantt__col-name" role="gridcell" [style.padding-left]="0.5 + r.level * 1.1 + 'rem'">
+                      @if (r.children.length) {
+                        <button
+                          type="button"
+                          class="cb-gantt__toggle"
+                          [attr.aria-label]="fmt(collapsed().has(r.task.id) ? t().ganttExpand : t().ganttCollapse, r.task.name)"
+                          [attr.aria-expanded]="!collapsed().has(r.task.id)"
+                          (click)="toggle(r.task.id)"
+                        >
+                          <cb-icon [name]="collapsed().has(r.task.id) ? 'chevron-right' : 'chevron-down'" [size]="14" aria-hidden="true" />
+                        </button>
+                      } @else {
+                        <span class="cb-gantt__toggle-space" aria-hidden="true"></span>
+                      }
+                      <button type="button" class="cb-gantt__name" [class.cb-gantt__name--group]="r.isGroup" (click)="focusBar(r.task.id)" (dblclick)="taskOpen.emit(r.task)">
+                        @if (r.isMilestone) {
+                          <span class="cb-gantt__diamond-mini" aria-hidden="true"></span>
+                        }
+                        {{ r.task.name }}
+                      </button>
+                    </span>
+                  } @else {
+                    <span [class]="'cb-gantt__cell cb-gantt__col-' + col" role="gridcell">{{ cellText(r, col) }}</span>
+                  }
+                }
+              </div>
+            }
+          </div>
+
+          <!-- Diagrama -->
+          <div #chart class="cb-gantt__chart" [style.width.px]="chartWidth()">
+            @for (u of units(); track u.key) {
+              <span class="cb-gantt__col" [class.cb-gantt__col--weekend]="u.weekend" [style.left.px]="u.x" [style.width.px]="u.width" aria-hidden="true"></span>
+            }
+            @for (r of rows(); track r.task.id; let i = $index) {
+              <span class="cb-gantt__stripe" [class.cb-is-selected]="selected() === r.task.id" [style.top.px]="i * row" aria-hidden="true"></span>
+            }
+            @if (todayX() !== null) {
+              <span class="cb-gantt__today" [style.left.px]="todayX()" aria-hidden="true"></span>
+            }
+
+            <svg class="cb-gantt__links" [attr.width]="chartWidth()" [attr.height]="rows().length * row" aria-hidden="true">
+              <defs>
+                <marker [attr.id]="uid + '-arrow'" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+                  <path d="M0 0 L8 4 L0 8 z" />
+                </marker>
+              </defs>
+              @for (l of links(); track l.key) {
+                <path class="cb-gantt__link-hit" [attr.d]="l.path" (click)="selectLink(l)" />
+                <path class="cb-gantt__link" [class.cb-is-selected]="selectedLink()?.key === l.key" [attr.d]="l.path" [attr.marker-end]="'url(#' + uid + '-arrow)'" />
+              }
+              @if (linkLine(); as line) {
+                <path class="cb-gantt__link cb-gantt__link--draft" [attr.d]="line" />
+              }
+            </svg>
+
+            @if (selectedLink(); as sl) {
+              <button
+                type="button"
+                class="cb-gantt__unlink"
+                [style.left.px]="sl.mid.x"
+                [style.top.px]="sl.mid.y"
+                [attr.aria-label]="fmt(t().ganttRemoveLink, sl.fromName, sl.toName)"
+                [attr.title]="fmt(t().ganttRemoveLink, sl.fromName, sl.toName)"
+                (click)="removeLink(sl.from, sl.to)"
+              >
+                <cb-icon name="x" [size]="12" aria-hidden="true" />
+              </button>
+            }
+
+            @for (b of bars(); track b.row.task.id) {
+              <div
+                class="cb-gantt__bar"
+                role="button"
+                tabindex="0"
+                [attr.data-gantt-id]="b.row.task.id"
+                [class.cb-gantt__bar--group]="b.row.isGroup"
+                [class.cb-gantt__bar--milestone]="b.row.isMilestone"
+                [class.cb-gantt__bar--short]="!b.row.isMilestone && !b.row.isGroup && b.width < 72"
+                [class.cb-is-selected]="selected() === b.row.task.id"
+                [class.cb-is-dragging]="preview()?.id === b.row.task.id"
+                [style.left.px]="b.x"
+                [style.top.px]="b.y"
+                [style.width.px]="b.width"
+                [style.--cb-gantt-color]="b.row.task.color || null"
+                [attr.aria-label]="barLabel(b)"
+                [attr.aria-describedby]="readonly() ? null : uid + '-help'"
+                (pointerdown)="onPointerDown($event, b)"
+                (keydown)="onBarKeydown($event, b.row)"
+                (click)="selected.set(b.row.task.id)"
+                (dblclick)="taskOpen.emit(b.row.task)"
+              >
+                @if (!b.row.isMilestone) {
+                  <span class="cb-gantt__progress" [style.width.%]="b.progress" aria-hidden="true"></span>
+                  <span class="cb-gantt__bar-label" aria-hidden="true">{{ b.row.task.name }}</span>
+                  @if (!readonly() && !b.row.isGroup) {
+                    <span class="cb-gantt__handle cb-gantt__handle--start" data-mode="start" aria-hidden="true"></span>
+                    <span class="cb-gantt__handle cb-gantt__handle--end" data-mode="end" aria-hidden="true"></span>
+                    <span class="cb-gantt__progress-handle" data-mode="progress" [style.left.%]="b.progress" aria-hidden="true"></span>
+                  }
+                } @else {
+                  <span class="cb-gantt__diamond" aria-hidden="true"></span>
+                  <span class="cb-gantt__milestone-label" aria-hidden="true">{{ b.row.task.name }}</span>
+                }
+                @if (!readonly()) {
+                  <span class="cb-gantt__connector" data-mode="link" aria-hidden="true"></span>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+      @if (!rows().length) {
+        <p class="cb-gantt__empty">{{ emptyMessage() ?? t().noData }}</p>
+      }
+    </div>
+    <p class="cb-gantt__sr" [id]="uid + '-help'">{{ t().ganttInstructions }}</p>
+    <div class="cb-gantt__sr" role="status">{{ announcement() }}</div>
+  `, styles: [":host{--cb-gantt-row: 40px;--cb-gantt-bar: var(--cb-color-primary-500);--cb-gantt-bar-bg: color-mix(in srgb, var(--cb-gantt-bar) 28%, var(--cb-color-surface));display:flex;flex-direction:column;gap:var(--cb-space-2, .5rem);width:100%;min-width:0;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-gantt__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.cb-gantt__scales{display:inline-flex;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-hover)}.cb-gantt__scale,.cb-gantt__btn{padding:.3rem .75rem;border:0;border-radius:calc(var(--cb-radius-md) - 2px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-gantt__scale[aria-pressed=true]{background:var(--cb-color-surface-raised);color:var(--cb-color-text-strong, var(--cb-color-text));box-shadow:0 1px 2px #0f172a1f}.cb-gantt__btn{border:1px solid var(--cb-color-border-strong);color:var(--cb-color-text)}.cb-gantt__btn:hover{background:var(--cb-color-surface-hover)}:is(.cb-gantt__scale,.cb-gantt__btn,.cb-gantt__toggle,.cb-gantt__name,.cb-gantt__unlink):focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-gantt__scroller{position:relative;overflow:auto;container-type:inline-size;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 12px);background:var(--cb-color-surface)}.cb-gantt__inner{--cb-gantt-grid-w: min(var(--cb-gantt-grid, 30rem), 60cqi);position:relative;width:max-content;min-width:100%}.cb-gantt__head{position:sticky;top:0;z-index:4;display:flex;height:52px;border-bottom:1px solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-gantt__head-grid{position:sticky;left:0;z-index:5;display:flex;flex:none;align-items:flex-end;width:var(--cb-gantt-grid-w);padding-bottom:.45rem;border-right:1px solid var(--cb-color-border);background:inherit}.cb-gantt__head-cell{flex:0 0 auto;box-sizing:border-box;padding:0 .5rem;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-overflow:ellipsis;white-space:nowrap}.cb-gantt__head-cell.cb-gantt__col-name{padding-left:.75rem}.cb-gantt__col-name{flex:1 1 auto!important;min-width:6rem}.cb-gantt__col-start,.cb-gantt__col-end,.cb-gantt__col-duration{width:4.5rem}.cb-gantt__col-progress{width:4rem}.cb-gantt__col-assignee{width:6.5rem}.cb-gantt__head-scale{position:relative;flex:none}.cb-gantt__head-row{position:relative;height:26px}.cb-gantt__unit{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-left:1px solid var(--cb-color-border);color:var(--cb-color-text-muted);font-size:.6875rem;white-space:nowrap}.cb-gantt__unit--top{justify-content:flex-start;padding-left:.5rem;color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-gantt__unit--weekend{background:var(--cb-color-surface-hover)}@container (max-width: 40rem){.cb-gantt__col-start,.cb-gantt__col-end,.cb-gantt__col-duration,.cb-gantt__col-progress,.cb-gantt__col-assignee{display:none}.cb-gantt__head-grid,.cb-gantt__row{overflow:hidden}}.cb-gantt__body{position:relative;display:flex}.cb-gantt__grid{position:sticky;left:0;z-index:3;flex:none;width:var(--cb-gantt-grid-w);border-right:1px solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-gantt__row{display:flex;align-items:center;height:var(--cb-gantt-row);border-bottom:1px solid var(--cb-color-border)}.cb-gantt__row.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 9%,var(--cb-color-surface))}.cb-gantt__cell{flex:0 0 auto;box-sizing:border-box;padding:0 .5rem;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}.cb-gantt__cell.cb-gantt__col-name{display:flex;align-items:center;gap:.25rem;min-width:0;color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem)}.cb-gantt__toggle,.cb-gantt__toggle-space{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.4rem;height:1.4rem}.cb-gantt__toggle{padding:0;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-gantt__toggle:hover{background:var(--cb-color-surface-hover)}.cb-gantt__name{display:inline-flex;align-items:center;gap:.4rem;min-width:0;padding:.15rem .25rem;overflow:hidden;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:inherit;font:inherit;text-align:start;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.cb-gantt__name--group{font-weight:var(--cb-font-weight-semibold, 600)}.cb-gantt__diamond-mini{flex:none;width:.55rem;height:.55rem;background:var(--cb-color-warning-500, #f59e0b);transform:rotate(45deg)}.cb-gantt__chart{position:relative;flex:none}.cb-gantt__col{position:absolute;top:0;bottom:0;border-left:1px solid color-mix(in srgb,var(--cb-color-border) 60%,transparent)}.cb-gantt__col--weekend{background:color-mix(in srgb,var(--cb-color-surface-hover) 70%,transparent)}.cb-gantt__stripe{position:absolute;left:0;right:0;height:var(--cb-gantt-row);border-bottom:1px solid var(--cb-color-border)}.cb-gantt__stripe.cb-is-selected{background:color-mix(in srgb,var(--cb-color-primary-500) 7%,transparent)}.cb-gantt__today{position:absolute;top:0;bottom:0;z-index:1;width:2px;margin-left:-1px;background:var(--cb-color-danger-500, #ef4444)}.cb-gantt__links{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}.cb-gantt__links marker path{fill:var(--cb-color-text-muted)}.cb-gantt__link{fill:none;stroke:var(--cb-color-text-muted);stroke-width:1.5}.cb-gantt__link.cb-is-selected{stroke:var(--cb-color-primary-600, var(--cb-color-primary-500));stroke-width:2.5}.cb-gantt__link--draft{stroke:var(--cb-color-primary-500);stroke-dasharray:4 3}.cb-gantt__link-hit{fill:none;stroke:transparent;stroke-width:10;pointer-events:stroke;cursor:pointer}:host(.cb-gantt--readonly) .cb-gantt__link-hit{cursor:default}.cb-gantt__unlink{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin:-.625rem 0 0 -.625rem;padding:0;border:1px solid var(--cb-color-border-strong);border-radius:50%;background:var(--cb-color-surface-raised);color:var(--cb-color-danger-600, var(--cb-color-danger));cursor:pointer}.cb-gantt__bar{position:absolute;z-index:2;box-sizing:border-box;height:24px;margin-top:8px;border-radius:6px;background:color-mix(in srgb,var(--cb-gantt-color, var(--cb-gantt-bar)) 28%,var(--cb-color-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cb-gantt-color, var(--cb-gantt-bar)) 55%,transparent);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}:host(.cb-gantt--readonly) .cb-gantt__bar{cursor:pointer}.cb-gantt__bar:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-gantt__bar.cb-is-selected{box-shadow:inset 0 0 0 2px var(--cb-gantt-color, var(--cb-gantt-bar))}.cb-gantt__bar.cb-is-dragging{cursor:grabbing;opacity:.85}.cb-gantt__progress{position:absolute;inset:0 auto 0 0;border-radius:6px 0 0 6px;background:var(--cb-gantt-color, var(--cb-gantt-bar))}.cb-gantt__bar-label{position:relative;display:block;padding:0 .5rem;overflow:hidden;color:var(--cb-color-text);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);line-height:24px;text-overflow:ellipsis;white-space:nowrap;mix-blend-mode:normal}.cb-gantt__bar--short .cb-gantt__bar-label{position:absolute;top:0;left:calc(100% + 18px);padding:0;overflow:visible}.cb-gantt__handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize}.cb-gantt__handle--start{left:0}.cb-gantt__handle--end{right:0}.cb-gantt__progress-handle{position:absolute;bottom:-6px;width:10px;height:10px;margin-left:-5px;border:2px solid var(--cb-color-surface);border-radius:50%;background:var(--cb-gantt-color, var(--cb-gantt-bar));cursor:col-resize;opacity:0}.cb-gantt__connector{position:absolute;top:50%;right:-14px;width:10px;height:10px;margin-top:-5px;border:2px solid var(--cb-gantt-color, var(--cb-gantt-bar));border-radius:50%;background:var(--cb-color-surface);cursor:crosshair;opacity:0}.cb-gantt__bar:hover :is(.cb-gantt__progress-handle,.cb-gantt__connector),.cb-gantt__bar.cb-is-selected :is(.cb-gantt__progress-handle,.cb-gantt__connector){opacity:1}@media(hover:none){.cb-gantt__progress-handle,.cb-gantt__connector{opacity:1}}.cb-gantt__bar--group{height:12px;margin-top:14px;border-radius:2px;background:var(--cb-color-text-muted);box-shadow:none}.cb-gantt__bar--group .cb-gantt__progress{border-radius:2px 0 0 2px;background:var(--cb-color-text)}.cb-gantt__bar--group .cb-gantt__bar-label{position:absolute;bottom:12px;left:0;padding:0;line-height:1.2}.cb-gantt__bar--milestone{width:18px;height:18px;margin-top:11px;background:transparent;box-shadow:none}.cb-gantt__bar--milestone.cb-is-selected{box-shadow:none}.cb-gantt__diamond{position:absolute;inset:2px;border-radius:3px;background:var(--cb-gantt-color, var(--cb-color-warning-500, #f59e0b));transform:rotate(45deg)}.cb-gantt__bar--milestone.cb-is-selected .cb-gantt__diamond{outline:2px solid var(--cb-color-text);outline-offset:1px}.cb-gantt__milestone-label{position:absolute;top:0;left:26px;color:var(--cb-color-text);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);line-height:18px;white-space:nowrap}.cb-gantt__bar--milestone .cb-gantt__connector{right:-16px}.cb-gantt__empty{margin:0;padding:2rem;color:var(--cb-color-text-muted);text-align:center}.cb-gantt__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.cb-gantt__bar:not(.cb-is-dragging){transition:left .12s ease,width .12s ease}}@media(forced-colors:active){.cb-gantt__bar,.cb-gantt__progress{forced-color-adjust:none;border:1px solid CanvasText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: false }] }, { type: i0.Output, args: ["tasksChange"] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }, { type: i0.Output, args: ["scaleChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], gridWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], autoSchedule: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSchedule", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], taskChange: [{ type: i0.Output, args: ["taskChange"] }], taskOpen: [{ type: i0.Output, args: ["taskOpen"] }], linkAdd: [{ type: i0.Output, args: ["linkAdd"] }], linkRemove: [{ type: i0.Output, args: ["linkRemove"] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], chart: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/gantt
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbGantt, autoSchedule as cbGanttAutoSchedule, canLink as cbGanttCanLink };