pptx-angular-viewer 1.31.3 → 1.31.4

package/CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project are documented here.
 This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
 by [git-cliff](https://git-cliff.org); do not edit it by hand.
 
+## [1.31.3](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.31.3) - 2026-07-19
+
 ## [1.31.2](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.31.2) - 2026-07-19
 
 ## [1.31.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.31.1) - 2026-07-18

package/fesm2022/pptx-angular-viewer.mjs

@@ -6333,6 +6333,16 @@ function resolveDataPointFill(series, pointIndex, fallbackColor) {
     const point = findDataPoint(series, pointIndex);
     return point?.spPr?.fillColor ?? series.color ?? fallbackColor;
 }
+/**
+ * Resolve the fill for a data point in a "vary colours" context, where every
+ * point in a single series is drawn with a distinct palette colour (pie /
+ * doughnut slices, or a bar/column series with `c:varyColors=1`). A per-point
+ * `c:dPt` fill still wins; otherwise the supplied per-point `paletteColor` is
+ * used (NOT the single series colour, which would make every point identical).
+ */
+function resolveVaryColorFill(series, pointIndex, paletteColor) {
+    return findDataPoint(series, pointIndex)?.spPr?.fillColor ?? paletteColor;
+}
 /**
  * Resolve the slice explosion (pull-out distance, 0-100) for a pie/doughnut
  * data point: the per-point `c:dPt` explosion when present, otherwise the
@@ -7030,7 +7040,8 @@ function buildBars(chartData, catCount, layout, primaryRange, secondaryRange, se
                     y,
                     w: singleBarWidth,
                     h,
-                    fill: seriesColor(series[si], si, palette),
+                    fill: resolveDataPointFill(series[si], sourceIndex, paletteColor(si, palette)) ??
+                        seriesColor(series[si], si, palette),
                     rx: 1,
                     part: { role: 'dataPoint', seriesIndex: si, pointIndex: sourceIndex },
                 });
@@ -7060,22 +7071,14 @@ function buildBars(chartData, catCount, layout, primaryRange, secondaryRange, se
         }));
         const rects = computeStackedBarRects(displaySeries, catCount, layout, primaryRange, palette);
         for (const r of rects) {
-            primitives.push({
-                kind: 'rect',
-                x: r.x,
-                y: r.y,
-                w: r.w,
-                h: r.h,
-                fill: r.fill,
-                rx: 1,
-                part: r.seriesIndex !== undefined && r.pointIndex !== undefined
-                    ? {
-                        role: 'dataPoint',
-                        seriesIndex: r.seriesIndex,
-                        pointIndex: sourceIndices[r.pointIndex] ?? r.pointIndex,
-                    }
-                    : undefined,
-            });
+            let fill = r.fill;
+            let part;
+            if (r.seriesIndex !== undefined && r.pointIndex !== undefined) {
+                const sourcePointIndex = sourceIndices[r.pointIndex] ?? r.pointIndex;
+                fill = resolveDataPointFill(series[r.seriesIndex], sourcePointIndex, r.fill) ?? r.fill;
+                part = { role: 'dataPoint', seriesIndex: r.seriesIndex, pointIndex: sourcePointIndex };
+            }
+            primitives.push({ kind: 'rect', x: r.x, y: r.y, w: r.w, h: r.h, fill, rx: 1, part });
         }
         if (showLabels) {
             pushClusteredStackedLabels(series, sourceIndices, catCount, layout, primaryRange, dataLabels);
@@ -7113,7 +7116,8 @@ function buildBars(chartData, catCount, layout, primaryRange, secondaryRange, se
                 y,
                 w: barW,
                 h,
-                fill: seriesColor(series[si], si, palette),
+                fill: resolveDataPointFill(series[si], sourceIndex, paletteColor(si, palette)) ??
+                    seriesColor(series[si], si, palette),
                 part: { role: 'dataPoint', seriesIndex: si, pointIndex: sourceIndex },
             });
             if (showLabels && Math.abs(val) > 0) {
@@ -7206,7 +7210,7 @@ function buildLines(chartData, catCount, layout, primaryRange, secondaryRange, s
                 cx: pt.x,
                 cy: pt.y,
                 r: 2.5,
-                fill: c,
+                fill: resolveDataPointFill(series, sourceIndex, c) ?? c,
                 part: { role: 'dataPoint', seriesIndex: si, pointIndex: sourceIndex },
             });
         });
@@ -7270,16 +7274,17 @@ function buildAreas(chartData, catCount, layout, range, sourceIndices, xPosition
             part: { role: 'series', seriesIndex: si },
         });
         pts.forEach((pt, displayIndex) => {
+            const sourceIndex = sourceIndices[displayIndex] ?? displayIndex;
             primitives.push({
                 kind: 'circle',
                 cx: pt.x,
                 cy: pt.y,
                 r: 2,
-                fill: c,
+                fill: resolveDataPointFill(series, sourceIndex, c) ?? c,
                 part: {
                     role: 'dataPoint',
                     seriesIndex: si,
-                    pointIndex: sourceIndices[displayIndex] ?? displayIndex,
+                    pointIndex: sourceIndex,
                 },
             });
         });
@@ -7321,7 +7326,7 @@ function buildScatter(chartData, layout, range) {
                 cx: dot.cx,
                 cy: dot.cy,
                 r: 4,
-                fill: c,
+                fill: resolveDataPointFill(series, vi, c) ?? c,
                 opacity: 0.85,
                 part: { role: 'dataPoint', seriesIndex: si, pointIndex: vi },
             });
@@ -7369,7 +7374,7 @@ function buildBubbles(chartData, layout, range) {
                 cx: dot.cx,
                 cy: dot.cy,
                 r,
-                fill: c,
+                fill: resolveDataPointFill(series, vi, c) ?? c,
                 opacity: 0.6,
                 part: { role: 'dataPoint', seriesIndex: si, pointIndex: vi },
             });
@@ -11534,12 +11539,17 @@ function buildPieViewModel(element, chartData, categoryLabels, isDoughnut) {
     const { cx, cy, outerR, innerR, size } = computePieLayout(element.width, element.height, chartData, isDoughnut);
     const svgWidth = Math.max(size, 100);
     const svgHeight = Math.max(size, 60);
-    const values = chartData.series[0]?.values ?? [];
+    const pieSeries = chartData.series[0];
+    const values = pieSeries?.values ?? [];
     const slices = computePieSlices(values, cx, cy, outerR, innerR);
     const primitives = slices.map(({ d }, i) => ({
         kind: 'path',
         d,
-        fill: chartData.series[0]?.color ?? paletteColor(i, chartData.colorPalette),
+        // Pie/doughnut vary colours per slice (c:varyColors defaults on), so each
+        // slice takes its palette colour, with a per-point c:dPt fill overriding.
+        fill: pieSeries
+            ? resolveVaryColorFill(pieSeries, i, paletteColor(i, chartData.colorPalette))
+            : paletteColor(i, chartData.colorPalette),
         stroke: '#ffffff',
         strokeWidth: 1.5,
         part: { role: 'dataPoint', seriesIndex: 0, pointIndex: i },
@@ -12893,6 +12903,25 @@ const PRESET_ID_TO_EFFECT = {
         26: 'pulse',
     },
 };
+/**
+ * Map an OOXML `p:cTn/@presetSubtype` code to a {@link FlyEdge} for Fly In and
+ * Fly Out effects. PowerPoint encodes the direction as a bitmask on the object
+ * origin edge: 1=top, 2=right, 4=bottom, 8=left. Corners combine two bits
+ * (e.g. 12 = 8|4 = bottom-left) and fall back to their horizontal edge, which
+ * is the more visually distinct component. Unknown/absent codes are left to the
+ * caller (which keeps the preset default of bottom).
+ */
+const FLY_SUBTYPE_TO_EDGE = {
+    1: 'top',
+    2: 'right',
+    4: 'bottom',
+    8: 'left',
+    // Corners -> nearest (horizontal) edge.
+    3: 'right', // top-right (1|2)
+    6: 'right', // bottom-right (4|2)
+    9: 'left', // top-left (8|1)
+    12: 'left', // bottom-left (8|4)
+};
 
 /**
  * `animation-keyframes` — CSS `@keyframes` definitions for every static
@@ -13354,10 +13383,10 @@ function resolveEffect(anim) {
         return undefined;
     }
     if (cls === 'entr') {
-        return PRESET_ID_TO_EFFECT.entr[id];
+        return applyFlyDirection(PRESET_ID_TO_EFFECT.entr[id], anim.presetSubtype);
     }
     if (cls === 'exit') {
-        return PRESET_ID_TO_EFFECT.exit[id];
+        return applyFlyDirection(PRESET_ID_TO_EFFECT.exit[id], anim.presetSubtype);
     }
     if (cls === 'emph') {
         return PRESET_ID_TO_EFFECT.emph[id];
@@ -13365,6 +13394,28 @@ function resolveEffect(anim) {
     // For path/motion/rotation/scale, return undefined — handled dynamically.
     return undefined;
 }
+/**
+ * Redirect a Fly In / Fly Out effect according to its `presetSubtype` code.
+ * The preset tables default the fly family to the bottom edge; when a subtype
+ * is present and maps to a known edge, swap in the matching directional effect.
+ * A missing or unrecognised subtype preserves the bottom default so existing
+ * decks are unaffected.
+ */
+function applyFlyDirection(effect, subtype) {
+    if (effect !== 'flyInBottom' && effect !== 'flyOutBottom') {
+        return effect;
+    }
+    if (subtype === undefined) {
+        return effect;
+    }
+    const edge = FLY_SUBTYPE_TO_EDGE[subtype];
+    if (!edge) {
+        return effect;
+    }
+    const prefix = effect === 'flyInBottom' ? 'flyIn' : 'flyOut';
+    const suffix = `${edge.charAt(0).toUpperCase()}${edge.slice(1)}`;
+    return `${prefix}${suffix}`;
+}
 // ==========================================================================
 // Dynamic keyframe generation (motion path / rotation / scale / colour)
 // ==========================================================================
@@ -16097,6 +16148,122 @@ function getComputed3dStyle(el) {
     return result;
 }
 
+/**
+ * Map a section's border set onto a cell's four edges given the cell's
+ * position relative to that section's region. Outer region edges use the
+ * `top/bottom/left/right` sides; interior edges use `insideH`/`insideV`.
+ */
+function edgesFromSection(borders, regionTop, regionBottom, regionLeft, regionRight) {
+    if (!borders) {
+        return undefined;
+    }
+    return {
+        top: regionTop ? (borders.top ?? borders.insideH) : borders.insideH,
+        bottom: regionBottom ? (borders.bottom ?? borders.insideH) : borders.insideH,
+        left: regionLeft ? (borders.left ?? borders.insideV) : borders.insideV,
+        right: regionRight ? (borders.right ?? borders.insideV) : borders.insideV,
+    };
+}
+/** Convert a resolved border side to a CSS `border-*` shorthand value. */
+function borderToCss(border, resolve) {
+    if (!border) {
+        return undefined;
+    }
+    if (border.noFill) {
+        return 'none';
+    }
+    const width = border.width ?? 1;
+    const dash = ooxmlDashToCssBorderStyle(border.dash);
+    const color = border.color ?? resolve(border.fill) ?? '#000000';
+    return `${width}px ${dash} ${color}`;
+}
+/**
+ * Build the ordered (low -> high precedence) list of edge candidates from the
+ * sections that apply to this cell.
+ */
+function collectLayers(entry, tableData, pos) {
+    const { rowIndex, cellIndex, rowCount, columnCount } = pos;
+    const isTop = rowIndex === 0;
+    const isBottom = rowIndex === rowCount - 1;
+    const isLeft = cellIndex === 0;
+    const isRight = cellIndex === columnCount - 1;
+    const layers = [];
+    // Whole table: region spans the entire table.
+    layers.push(edgesFromSection(entry.wholeTblBorders, isTop, isBottom, isLeft, isRight));
+    // Banded rows: treat each banded row as its own single-row region.
+    if (tableData.bandedRows) {
+        const bandStartRow = tableData.firstRowHeader ? 1 : 0;
+        const bandEndRow = tableData.lastRow ? rowCount - 1 : rowCount;
+        if (rowIndex >= bandStartRow && rowIndex < bandEndRow) {
+            const rowCycle = Math.max(tableData.bandRowCycle ?? 1, 1);
+            const bandGroup = Math.floor((rowIndex - bandStartRow) / rowCycle) % 2;
+            const bands = bandGroup === 0 ? entry.band1HBorders : entry.band2HBorders;
+            layers.push(edgesFromSection(bands, true, true, isLeft, isRight));
+        }
+    }
+    // Banded columns: treat each banded column as its own single-column region.
+    if (tableData.bandedColumns) {
+        const colStart = tableData.firstCol ? 1 : 0;
+        const colEnd = tableData.lastCol ? columnCount - 1 : columnCount;
+        if (cellIndex >= colStart && cellIndex < colEnd) {
+            const colCycle = Math.max(tableData.bandColCycle ?? 1, 1);
+            const colGroup = Math.floor((cellIndex - colStart) / colCycle) % 2;
+            const bands = colGroup === 0 ? entry.band1VBorders : entry.band2VBorders;
+            layers.push(edgesFromSection(bands, isTop, isBottom, true, true));
+        }
+    }
+    // First/last row: single-row region spanning all columns.
+    if (tableData.firstRowHeader && isTop) {
+        layers.push(edgesFromSection(entry.firstRowBorders, true, true, isLeft, isRight));
+    }
+    if (tableData.lastRow && isBottom) {
+        layers.push(edgesFromSection(entry.lastRowBorders, true, true, isLeft, isRight));
+    }
+    // First/last column: single-column region spanning all rows.
+    if (tableData.firstCol && isLeft) {
+        layers.push(edgesFromSection(entry.firstColBorders, isTop, isBottom, true, true));
+    }
+    if (tableData.lastCol && isRight) {
+        layers.push(edgesFromSection(entry.lastColBorders, isTop, isBottom, true, true));
+    }
+    return layers.filter((layer) => layer !== undefined);
+}
+/**
+ * Resolve the CSS borders a cell inherits from its table style. Returns
+ * `undefined` when the style defines no applicable borders (so the caller can
+ * keep its own fallback border, e.g. the hardcoded total-row line).
+ */
+function resolveCellBorderCss(entry, tableData, pos, resolve) {
+    if (!entry) {
+        return undefined;
+    }
+    const layers = collectLayers(entry, tableData, pos);
+    if (layers.length === 0) {
+        return undefined;
+    }
+    const pick = (edge) => {
+        let winner;
+        for (const layer of layers) {
+            if (layer[edge]) {
+                winner = layer[edge];
+            }
+        }
+        return winner;
+    };
+    const css = {};
+    let applied = false;
+    const edges = ['top', 'bottom', 'left', 'right'];
+    for (const edge of edges) {
+        const value = borderToCss(pick(edge), resolve);
+        if (value) {
+            const key = `border${edge[0].toUpperCase()}${edge.slice(1)}`;
+            css[key] = value;
+            applied = true;
+        }
+    }
+    return applied ? css : undefined;
+}
+
 /**
  * Convert a {@link CellTextRun}'s per-run formatting to an inline CSS style
  * object suitable for a `<span>` element.
@@ -16581,6 +16748,16 @@ function getTableCellBandStyle(tableData, rowIndex, cellIndex, rowCount, columnC
         applyStyleText(styleEntry?.lastColText, colorScheme, style);
         applied = true;
     }
+    // ── Table-style borders (issue #71). ──
+    // Resolve gridlines/edges the cell inherits from the table style and let
+    // them supersede the hardcoded total-row line above. Per-cell explicit
+    // `a:lnX` borders (parsed into the cell style) are applied on top of this
+    // layer by the renderer, so they still win.
+    const borderCss = resolveCellBorderCss(styleEntry, tableData, { rowIndex, cellIndex, rowCount, columnCount }, (fill) => resolveStyleFillColor(fill, colorScheme));
+    if (borderCss) {
+        Object.assign(style, borderCss);
+        applied = true;
+    }
     return applied ? style : undefined;
 }
 
@@ -73953,7 +74130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], propDecorators: { canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: false }] }] } });
 
 // Generated by scripts/inline-shared.mjs from package.json. Do not edit.
-const PPTX_ANGULAR_VIEWER_VERSION = "1.31.2";
+const PPTX_ANGULAR_VIEWER_VERSION = "1.31.3";
 
 /**
  * account-page.component.ts: File > Account content.