@sme.up/ketchup 10.1.1 → 10.1.5

package/dist/collection/assets/planner-example-7.js

@@ -0,0 +1,370 @@
+// Example 7 - Planner demo for stacked/grouped dependencies
+// Minimal demo that maps client column names, includes phases with OPEDIP,
+// injects extra tasks and structured dependencies to stress the renderer.
+
+const comp = document.getElementById('planner');
+if (!comp) throw new Error('No #planner element found on page');
+
+comp.addEventListener('kup-planner-click', onclick);
+
+const props = {
+    data: {
+        columns: [
+            { name: 'CODCOM' },
+            { name: 'CODSEQ' },
+            { name: 'CODFAS' },
+            { name: 'DESFAS' },
+            { name: 'COLFAS' },
+            { name: 'INISIM' },
+            { name: 'FINSIM' },
+            { name: 'INICON' },
+            { name: 'FINCON' },
+            { name: 'OPEDIP' },
+        ],
+        rows: [
+            {
+                id: 'cm1',
+                cells: {
+                    CODCOM: { value: 'CM1' },
+                    CODSEQ: { value: '001' },
+                    DESFAS: { value: 'COMMESSA 1' },
+                    INICON: {
+                        value: '2025-03-01',
+                        obj: { k: '', p: '*YYMD', t: 'D8' },
+                    },
+                    FINCON: {
+                        value: '2025-07-04',
+                        obj: { k: '', p: '*YYMD', t: 'D8' },
+                    },
+                    INISIM: {
+                        value: '2025-09-01',
+                        obj: { k: '', p: '*YYMD', t: 'D8' },
+                    },
+                    FINSIM: {
+                        value: '2025-12-05',
+                        obj: { k: '', p: '*YYMD', t: 'D8' },
+                    },
+                    OPEDIP: { value: '' },
+                },
+                cssClass: 'clickable',
+                readOnly: true,
+            },
+        ],
+    },
+    taskIdCol: 'CODCOM',
+    taskNameCol: 'CODCOM',
+    taskDates: ['INICON', 'FINCON'],
+    taskPrevDates: ['INISIM', 'FINSIM'],
+    phaseIdCol: 'CODFAS',
+    phaseNameCol: 'DESFAS',
+    phaseDates: ['INICON', 'FINCON'],
+    phasePrevDates: ['INISIM', 'FINSIM'],
+    phaseColorCol: 'COLFAS',
+    dependencyCol: 'OPEDIP',
+    dependencies: [],
+};
+
+const phases = {
+    columns: [
+        { name: 'CODCOM' },
+        { name: 'CODSEQ' },
+        { name: 'CODFAS' },
+        { name: 'DESFAS' },
+        { name: 'COLFAS' },
+        { name: 'INISIM' },
+        { name: 'FINSIM' },
+        { name: 'INICON' },
+        { name: 'FINCON' },
+        { name: 'OPEDIP' },
+    ],
+    rows: [
+        {
+            id: '1',
+            cells: {
+                CODCOM: { value: 'CM1' },
+                CODSEQ: { value: '110' },
+                CODFAS: { value: '010' },
+                DESFAS: { value: 'MONTAGGIO' },
+                COLFAS: { value: '#000000' },
+                INISIM: {
+                    value: '2025-09-01',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINSIM: {
+                    value: '2025-12-05',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                INICON: {
+                    value: '2025-03-01',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINCON: {
+                    value: '2025-07-04',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                OPEDIP: { value: '' },
+            },
+            readOnly: true,
+        },
+        {
+            id: '2',
+            cells: {
+                CODCOM: { value: 'CM1' },
+                CODSEQ: { value: '120' },
+                CODFAS: { value: '020' },
+                DESFAS: { value: 'COLLAUDO' },
+                COLFAS: { value: '#05E808' },
+                INISIM: {
+                    value: '2025-12-08',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINSIM: {
+                    value: '2026-04-08',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                INICON: {
+                    value: '2025-07-07',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINCON: {
+                    value: '2025-09-29',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                OPEDIP: { value: '010' },
+            },
+            readOnly: true,
+        },
+        {
+            id: '3',
+            cells: {
+                CODCOM: { value: 'CM1' },
+                CODSEQ: { value: '130' },
+                CODFAS: { value: '030' },
+                DESFAS: { value: 'SPEDIZIONE' },
+                COLFAS: { value: '#05CAE8' },
+                INISIM: {
+                    value: '2026-05-13',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINSIM: {
+                    value: '2026-07-08',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                INICON: {
+                    value: '2025-09-30',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINCON: {
+                    value: '2025-12-09',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                OPEDIP: { value: '010,020' },
+            },
+            readOnly: true,
+        },
+        {
+            id: '4',
+            cells: {
+                CODCOM: { value: 'CM1' },
+                CODSEQ: { value: '140' },
+                CODFAS: { value: '040' },
+                DESFAS: { value: 'INSTALLAZIONE' },
+                COLFAS: { value: '#3605E8' },
+                INISIM: {
+                    value: '2026-07-09',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINSIM: {
+                    value: '2026-11-05',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                INICON: {
+                    value: '2025-12-10',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINCON: {
+                    value: '2026-03-04',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                OPEDIP: { value: '030' },
+            },
+            readOnly: true,
+        },
+        {
+            id: '5',
+            cells: {
+                CODCOM: { value: 'CM1' },
+                CODSEQ: { value: '150' },
+                CODFAS: { value: '050' },
+                DESFAS: { value: 'FORMAZIONE' },
+                COLFAS: { value: '#BB05E8' },
+                INISIM: {
+                    value: '2026-11-19',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINSIM: {
+                    value: '2028-02-02',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                INICON: {
+                    value: '2026-03-05',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                FINCON: {
+                    value: '2026-07-23',
+                    obj: { k: '', p: '*YYMD', t: 'D8' },
+                },
+                OPEDIP: { value: '040' },
+            },
+            readOnly: true,
+        },
+    ],
+};
+
+// Inject extra mock tasks and structured dependencies for stress testing
+const extras = { tasks: [], deps: [] };
+if (
+    props &&
+    props.data &&
+    Array.isArray(props.data.rows) &&
+    props.data.rows[0]
+) {
+    const sampleRow = props.data.rows[0];
+    ['G419', 'G420', 'G421'].forEach((gid, idx) => {
+        const clone = JSON.parse(JSON.stringify(sampleRow));
+        clone.id = 'x-' + gid;
+        if (!clone.cells) clone.cells = {};
+        clone.cells[props.taskIdCol] = { value: gid };
+        // ensure visible dates (ISO format with date metadata so planner accepts them)
+        clone.cells[props.taskDates[0]] = {
+            value: '2025-01-01',
+            obj: { k: '', p: '*YYMD', t: 'D8' },
+        };
+        clone.cells[props.taskDates[1]] = {
+            value: '2025-02-01',
+            obj: { k: '', p: '*YYMD', t: 'D8' },
+        };
+        extras.tasks.push(clone);
+    });
+    if (extras.tasks.length) props.data.rows.splice(1, 0, ...extras.tasks);
+    /*
+    extras.deps.push(
+        { id: 'gd1', sourceId: 'G419', targetId: 'G419_P100', type: 'FS' },
+        { id: 'gd2', sourceId: 'G419', targetId: 'G419_P100', type: 'FS' },
+        { id: 'gd3', sourceId: 'G419', targetId: 'G419_P100', type: 'FS' },
+        { id: 'gd4', sourceId: 'G418', targetId: 'G419', type: 'FS' },
+        { id: 'gd5', sourceId: 'G420', targetId: 'G421', type: 'FS' },
+        { id: 'gd6', sourceId: 'G420', targetId: 'G418_P750', type: 'FS' },
+        { id: 'gd7', sourceId: 'G420', targetId: 'G418_P750', type: 'FS' }
+    );
+*/
+    props.dependencies.push(...extras.deps);
+}
+
+// assign props to the component (deep-clone data to ensure watchers trigger)
+for (const key in props) {
+    if (key === 'data') comp.data = JSON.parse(JSON.stringify(props.data));
+    else comp[key] = props[key];
+}
+
+try {
+    if (typeof comp.refresh === 'function') comp.refresh();
+} catch (e) {
+    // ignore
+}
+
+function onclick(event) {
+    const clickedId =
+        event.detail && event.detail.value && event.detail.value.id;
+    console.log('planner-example-7 onclick', {
+        clickedId,
+        event: event.detail,
+    });
+    if (clickedId) comp.addPhases(clickedId, phases);
+}
+
+// (Extra dependencies already injected above in `extras.deps` and props.dependencies)
+
+// Re-assign props to the component so changes apply at runtime when example loads.
+// Use deep clones for `data` and `dependencies` so the kup-planner prop watchers
+// detect new object references and update internal state.
+try {
+    if (comp && props) {
+        for (const key in props) {
+            if (key === 'data' && props.data) {
+                // deep clone to ensure a new reference
+                try {
+                    comp.data = JSON.parse(JSON.stringify(props.data));
+                    continue;
+                } catch (e) {
+                    // fallback to direct assign if cloning fails
+                    comp.data = props.data;
+                    continue;
+                }
+            }
+
+            if (key === 'dependencies' && props.dependencies) {
+                try {
+                    comp.dependencies = JSON.parse(
+                        JSON.stringify(props.dependencies)
+                    );
+                    continue;
+                } catch (e) {
+                    comp.dependencies = props.dependencies;
+                    continue;
+                }
+            }
+
+            comp[key] = props[key];
+        }
+        // Trigger a refresh so the component rebuilds its internal items from the
+        // newly assigned `data` and `dependencies` (some implementations rely on
+        // prop watchers which fire on reference changes; calling refresh ensures
+        // the UI syncs immediately).
+        try {
+            if (typeof comp.refresh === 'function') comp.refresh();
+        } catch (e) {
+            // ignore
+        }
+    }
+} catch (e) {
+    // ignore assignment failures
+}
+
+// Expose phases for manual inspection and auto-invoke addPhases for a quick smoke test.
+try {
+    // store phases globally so it's easy to call from the browser console
+    window.__planner_example_7_phases = phases;
+    // try to auto-invoke addPhases when the component is ready
+    const tryInvoke = () => {
+        const c = document.getElementById('planner');
+        if (c && typeof c.addPhases === 'function') {
+            try {
+                console.log(
+                    'planner-example-7: auto-invoking addPhases for CM1'
+                );
+                c.addPhases('CM1', phases);
+                // also print plannerProps deps if available after a short delay
+                setTimeout(() => {
+                    try {
+                        // eslint-disable-next-line no-console
+                        console.log(
+                            'planner-example-7: plannerProps deps',
+                            c.plannerProps && c.plannerProps.mainGantt
+                                ? c.plannerProps.mainGantt.dependencies
+                                : undefined
+                        );
+                    } catch (e) {}
+                }, 300);
+            } catch (e) {
+                // ignore invocation errors
+            }
+        } else {
+            // retry a few times
+            setTimeout(tryInvoke, 200);
+        }
+    };
+    tryInvoke();
+} catch (e) {
+    // ignore global attach errors
+}

package/dist/collection/components/kup-calendar/kup-calendar.css

@@ -316,10 +316,14 @@
   border-color: var(--kup_calendar_event_background_color);
   color: var(--kup_calendar_event_color);
 }
+#kup-component .fc-event {
+  padding: 0.5rem;
+}
 #kup-component .fc-event-main {
   color: inherit;
+  display: flex;
 }
-#kup-component .fc-event-title {
+#kup-component .fc-event-title .fc-event-time {
   padding: 0.25em;
 }
 #kup-component .fc-event-time {
@@ -346,6 +350,19 @@
   .calendar .fc-view-harness {
     min-height: 450px;
   }
+  .fc-event {
+    display: flex;
+    flex-direction: column;
+    padding: 0.2rem;
+    gap: var(--kup-space-03);
+  }
+  .fc-event .fc-event-main {
+    display: flex;
+    flex-direction: column;
+  }
+  .fc-event .fc-daygrid-event-dot {
+    display: none;
+  }
   .navigation .navigation__left {
     font-size: 20px;
     gap: 8px;

package/dist/collection/components/kup-planner/kup-planner-declarations.js

@@ -83,7 +83,7 @@ export const defaultStylingOptions = {
     barProgressSelectedColor: '#A2A415',
     barBackgroundColor: '#A2A415',
     barBackgroundSelectedColor: '#A2A415',
-    barDropZoneColor: '#4d9f0240'
+    barDropZoneColor: '#4d9f0240',
 };
 export const KUP_PLANNER_MAIN_GANTT_ID = 'main';
 export const KUP_PLANNER_SECONDARY_GANTT_ID = 'secondary';

package/dist/collection/components/kup-planner/kup-planner.js

@@ -65,6 +65,7 @@ export class KupPlanner {
         this.listCellWidth = '300px';
         this.maxWidth = '90vw';
         this.phaseColorCol = undefined;
+        this.dependencyCol = undefined;
         this.phaseColumns = undefined;
         this.phaseColParDep = undefined;
         this.phaseDates = undefined;
@@ -74,6 +75,7 @@ export class KupPlanner {
         this.phaseNameCol = undefined;
         this.phasePrevHours = [];
         this.phasePrevDates = undefined;
+        this.dependencies = [];
         this.readOnly = false;
         this.showSecondaryDates = false;
         this.taskColumns = undefined;
@@ -192,11 +194,12 @@ export class KupPlanner {
      * @param data - Matrix which contains project phases
      */
     async addPhases(taskId, data) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g;
         const task = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getTask).call(this, taskId);
         if (task) {
             __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
             task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
+                var _a, _b;
                 const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]], row.cells[this.phaseHours[0]], row.cells[this.phaseHours[1]], row.cells[this.phasePrevHours[0]], row.cells[this.phasePrevHours[1]]);
                 const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
                     ? '#START#'
@@ -205,10 +208,12 @@ export class KupPlanner {
                         : getCellValueForDisplay(data.columns.find((kCol) => kCol.name == col), row.cells[col])));
                 let iconUrl = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconUrl).call(this, row, this.phaseIconCol);
                 let iconColor = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getIconColor).call(this, row, this.phaseIconCol);
+                const _phaseIdRaw = ((_b = (_a = row.cells[this.phaseIdCol]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '') + '';
                 let phase = {
                     taskRow: task.taskRow,
                     phaseRow: row,
-                    id: task.id + '_' + row.cells[this.phaseIdCol].value,
+                    // trim the phase id value to avoid padded/trailing spaces
+                    id: `${task.id}_${_phaseIdRaw.trim()}`,
                     phaseRowId: row.id,
                     taskRowId: task.taskRowId,
                     name: row.cells[this.phaseNameCol].value,
@@ -231,6 +236,92 @@ export class KupPlanner {
                 };
                 return phase;
             });
+            // Diagnostic: log created phase ids for the task
+            try {
+                // eslint-disable-next-line no-console
+                console.log('kup-planner: addPhases created phases for', taskId, task.phases ? task.phases.map((p) => p.id) : []);
+            }
+            catch (e) {
+                /* ignore */
+            }
+            // If the phases dataset includes a dependency column, parse it and
+            // create structured dependencies. The column may contain a single
+            // dependency id or multiple comma-separated ids. The values can be
+            // either phase codes (e.g. 'P410') or full runtime ids
+            // ('G418_P410'). We'll normalize to runtime ids using the current
+            // task id when necessary.
+            try {
+                if (this.dependencyCol &&
+                    data.columns.find((c) => c.name == this.dependencyCol)) {
+                    const parsedDeps = [];
+                    for (const row of data.rows || []) {
+                        const raw = ((_d = (_c = (_b = row.cells) === null || _b === void 0 ? void 0 : _b[this.dependencyCol]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '') + '';
+                        if (!raw)
+                            continue;
+                        const parts = raw
+                            .split(',')
+                            .map((s) => s.trim())
+                            .filter(Boolean);
+                        // compute current phase runtime id (target of dependencies)
+                        const phaseCode = ((_g = (_f = (_e = row.cells) === null || _e === void 0 ? void 0 : _e[this.phaseIdCol]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '') + '';
+                        const currentPhaseId = `${task.id}_${phaseCode.trim()}`;
+                        for (const part of parts) {
+                            // normalize referenced (source) phase id
+                            let sourcePhaseId = part;
+                            if (!sourcePhaseId.includes('_')) {
+                                // assume phase code in the same task -> make runtime id
+                                sourcePhaseId = `${task.id}_${sourcePhaseId}`;
+                            }
+                            // dependency goes from the referenced phase (source) to the current phase (target)
+                            const depId = `${sourcePhaseId}__${currentPhaseId}`;
+                            parsedDeps.push({
+                                id: depId,
+                                sourceId: sourcePhaseId,
+                                targetId: currentPhaseId,
+                                type: 'FS',
+                            });
+                        }
+                    }
+                    if (parsedDeps.length) {
+                        // ensure plannerProps.mainGantt.dependencies exists
+                        try {
+                            if (!this.plannerProps.mainGantt.dependencies) {
+                                this.plannerProps.mainGantt.dependencies = [];
+                            }
+                        }
+                        catch (e) {
+                            // ensure plannerProps in general exists
+                            if (!this.plannerProps)
+                                this.plannerProps = {};
+                            if (!this.plannerProps.mainGantt)
+                                this.plannerProps.mainGantt = {};
+                            this.plannerProps.mainGantt.dependencies = [];
+                        }
+                        // merge while avoiding duplicates by id
+                        const existing = new Map((this.plannerProps.mainGantt.dependencies || []).map((d) => [d.id, d]));
+                        for (const pd of parsedDeps) {
+                            if (!existing.has(pd.id)) {
+                                existing.set(pd.id, pd);
+                            }
+                        }
+                        this.plannerProps.mainGantt.dependencies = Array.from(existing.values());
+                        // also forward to secondary if present
+                        if (this.plannerProps.secondaryGantt) {
+                            this.plannerProps.secondaryGantt.dependencies =
+                                this.plannerProps.mainGantt.dependencies;
+                        }
+                        // Diagnostic
+                        try {
+                            // eslint-disable-next-line no-console
+                            console.log('kup-planner: addPhases - injected dependencies', parsedDeps);
+                        }
+                        catch (e) { }
+                    }
+                }
+            }
+            catch (e) {
+                // ignore parsing errors
+            }
         }
         this.plannerProps.mainGantt.initialScrollX =
             __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX;
@@ -263,6 +354,7 @@ export class KupPlanner {
         }, "f");
     }
     componentDidLoad() {
+        var _a, _b;
         let details = __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailFilter, true));
         const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
         FTextFieldMDC(mainFilter);
@@ -296,6 +388,8 @@ export class KupPlanner {
                     taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
                 },
                 onPhaseDrop: (nativeEvent) => this.handleOnPhaseDrop(nativeEvent),
+                // forward structured dependencies provided at planner level
+                dependencies: this.dependencies,
             },
             secondaryGantt: details
                 ? {
@@ -311,6 +405,8 @@ export class KupPlanner {
                     initialScrollX: this.detailInitialScrollX,
                     initialScrollY: this.detailInitialScrollY,
                     readOnly: this.readOnly,
+                    // forward structured dependencies to secondary gantt as well
+                    dependencies: this.dependencies,
                     onScrollY: (y) => {
                         window.clearTimeout(detailScrollYTimeout);
                         detailScrollYTimeout = window.setTimeout(() => this.handleDetailGanttScrollY(y), scrollDelay);
@@ -326,6 +422,12 @@ export class KupPlanner {
                 scrollXTimeout = window.setTimeout(() => this.handleOnScrollX(x), scrollDelay);
             },
         };
+        // Diagnostic: log what was forwarded into plannerProps.mainGantt.dependencies
+        try {
+            // eslint-disable-next-line no-console
+            console.log('kup-planner: componentDidLoad - plannerProps.mainGantt.dependencies', (_b = (_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) === null || _b === void 0 ? void 0 : _b.dependencies);
+        }
+        catch (e) { }
         this.kupReady.emit({
             comp: this,
             id: this.rootElement.id,
@@ -523,7 +625,7 @@ export class KupPlanner {
         if ((_b = this.plannerProps) === null || _b === void 0 ? void 0 : _b.secondaryGantt) {
             plannerProps.secondaryGantt = Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { onScrollY: this.handleDetailGanttScrollY.bind(this) });
         }
-        return (h(Host, { key: 'b52aea66cafe0bdaaf314087e43f1b7dca63f154' }, h("style", { key: '3ca539838d1025757f092fc0a18e3b7264520f25' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '94527d16797e8f4262cc369cc66b9eed008b4ec6', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: '6845e11fb230fbe0a72c04d5ad1c890820fdb01f', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '6d911aaab4c3ab12a3022ee890ed449a1404ce44', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: 'fa72076cc7117e0f68396625dc4e2ec3f94fd6a6', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        return (h(Host, { key: '2be4622d126df65c075552acb7af8c953cef9712' }, h("style", { key: '6ec8c1df4bd0429bfac86ca5cfba8b8eabf012e3' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '1b242d8489b6f0a95d86fb2e088839557cf9ef0d', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { key: '31f5594e6f34012eabb69ee578ba6a71c3ac3415', props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '83cc5a397427da1a09a662936f03f14d5f0eecbf', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: '39c000f13fb6614f1a4196a57a6bbc36581af4a9', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value);
                 }
@@ -981,6 +1083,26 @@ export class KupPlanner {
                 "attribute": "phase-color-col",
                 "reflect": false
             },
+            "dependencyCol": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Optional column name inside the phases dataset containing a reference\r\nto a dependent phase (for example: 'OPEDIP'). When set, `addPhases`\r\nwill read that column and create structured dependencies (FS) from the\r\nreferenced phase to the current phase (source -> target).\r\nMultiple references can be separated by commas in the cell."
+                },
+                "attribute": "dependency-col",
+                "reflect": false
+            },
             "phaseColumns": {
                 "type": "unknown",
                 "mutable": false,
@@ -1153,6 +1275,28 @@ export class KupPlanner {
                     "text": "Columns containing forecast phase duration, from (firstDate) to (secondDate)"
                 }
             },
+            "dependencies": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerDependency[]",
+                    "resolved": "KupPlannerDependency[]",
+                    "references": {
+                        "KupPlannerDependency": {
+                            "location": "import",
+                            "path": "./kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerDependency"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Structured dependencies to render as arrows"
+                },
+                "defaultValue": "[]"
+            },
             "readOnly": {
                 "type": "boolean",
                 "mutable": false,
@@ -1970,6 +2114,12 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
         : {
             mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_getFilteredRows).call(this, value, isDetail)) }),
         };
+    // Diagnostic: inspect whether planner-level `dependencies` prop is set
+    try {
+        // eslint-disable-next-line no-console
+        console.log('kup-planner: componentDidLoad - this.dependencies', this.dependencies);
+    }
+    catch (e) { }
     this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
     this.persistState();
 }, _KupPlanner_getFilteredRows = function _KupPlanner_getFilteredRows(value, isDetail) {