pptx-angular-viewer 1.31.2 → 1.31.4

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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
 
 ## [1.31.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.31.0) - 2026-07-18

package/fesm2022/pptx-angular-viewer.mjs

@@ -450,22 +450,96 @@ function getResolvedShapeClipPathFor(shapeType, width, height, adjustments) {
     // 4. Final fallback: core's static preset clip-path table.
     return getShapeClipPath(shapeType);
 }
+/**
+ * Build a CSS `clip-path: path('…')` value from a custom-geometry (`a:custGeom`)
+ * SVG path string, rescaling its path-space coordinates (`pathWidth` x
+ * `pathHeight`) into the element's pixel box.
+ *
+ * CSS `path()` coordinates live in the element's own border-box pixel space
+ * (there is no viewBox), so freeform coordinates authored against the OOXML path
+ * extent must be scaled by `elemW / pathWidth` and `elemH / pathHeight`. Every
+ * binding already clips its shape container's background fill with the resolved
+ * clip-path, so returning one here lets a themed freeform (e.g. the "Balloons"
+ * background) render as its true outline instead of flooding its bounding box.
+ *
+ * Supports the absolute command set produced by the core geometry engine
+ * (M/L/C/Q/Z) plus elliptical arcs (A); unknown commands are passed through
+ * unscaled rather than dropped.
+ */
+function buildCustomGeometryClipPath(pathData, pathWidth, pathHeight, elemWidth, elemHeight) {
+    if (!pathData ||
+        !Number.isFinite(pathWidth) ||
+        !Number.isFinite(pathHeight) ||
+        pathWidth <= 0 ||
+        pathHeight <= 0 ||
+        !Number.isFinite(elemWidth) ||
+        !Number.isFinite(elemHeight) ||
+        elemWidth <= 0 ||
+        elemHeight <= 0) {
+        return undefined;
+    }
+    const sx = elemWidth / pathWidth;
+    const sy = elemHeight / pathHeight;
+    const round = (n) => {
+        const r = Math.round(n * 100) / 100;
+        return Object.is(r, -0) ? '0' : String(r);
+    };
+    const tokens = pathData.match(/[MLCQZAHVmlcqzahv][^MLCQZAHVmlcqzahv]*/g) ?? [];
+    const out = [];
+    for (const token of tokens) {
+        const cmd = token[0];
+        const upper = cmd.toUpperCase();
+        if (upper === 'Z') {
+            out.push('Z');
+            continue;
+        }
+        const nums = (token.slice(1).match(/-?[\d.]+(?:e-?\d+)?/gi) ?? []).map(Number);
+        if (upper === 'A') {
+            // rx ry x-axis-rotation large-arc-flag sweep-flag x y (per 7-number group)
+            const parts = [];
+            for (let i = 0; i + 6 < nums.length; i += 7) {
+                parts.push(round(nums[i] * sx), round(nums[i + 1] * sy), String(nums[i + 2]), String(nums[i + 3]), String(nums[i + 4]), round(nums[i + 5] * sx), round(nums[i + 6] * sy));
+            }
+            out.push(`A ${parts.join(' ')}`);
+            continue;
+        }
+        // M/L/C/Q (and H/V) carry (x, y) pairs; scale x by sx and y by sy.
+        const scaled = nums.map((n, i) => round(n * (i % 2 === 0 ? sx : sy)));
+        out.push(`${upper} ${scaled.join(' ')}`);
+    }
+    if (out.length === 0) {
+        return undefined;
+    }
+    return `path('${out.join(' ')}')`;
+}
 /**
  * Element-level convenience wrapper. Pulls `shapeType`, `width`, `height`, and
  * `shapeAdjustments` off a {@link PptxElement} and delegates to
  * {@link getResolvedShapeClipPathFor}.
  *
+ * Custom-geometry freeforms (which carry `pathData`/`pathWidth`/`pathHeight`
+ * rather than a preset `shapeType`) take priority: their outline is rescaled
+ * into the element box via {@link buildCustomGeometryClipPath} so the fill clips
+ * to the real shape instead of its bounding rectangle.
+ *
  * @param element The PPTX element to resolve a clip-path for.
  * @param width   Optional width override (pixels). Defaults to `element.width`.
  * @param height  Optional height override (pixels). Defaults to `element.height`.
  */
 function getResolvedShapeClipPath(element, width, height) {
+    const w = typeof width === 'number' ? width : element.width;
+    const h = typeof height === 'number' ? height : element.height;
+    const custom = element;
+    if (custom.pathData && custom.pathWidth && custom.pathHeight) {
+        const customClip = buildCustomGeometryClipPath(custom.pathData, custom.pathWidth, custom.pathHeight, w, h);
+        if (customClip) {
+            return customClip;
+        }
+    }
     const shapeType = element.shapeType;
     if (!shapeType) {
         return undefined;
     }
-    const w = typeof width === 'number' ? width : element.width;
-    const h = typeof height === 'number' ? height : element.height;
     const adjustments = element.shapeAdjustments;
     return getResolvedShapeClipPathFor(shapeType, w, h, adjustments);
 }
@@ -1450,20 +1524,29 @@ function getSvgStrokeDasharray(dashType, strokeWidth, customDashSegments) {
 /**
  * Builds a CSS `transform` string combining flip and rotation transforms for an element.
  * Flips are expressed as `scaleX(-1)` / `scaleY(-1)`, rotation as `rotate(Ndeg)`.
+ *
+ * Order matters: OOXML `a:xfrm` mirrors the shape *within* its bounding box
+ * (`flipH`/`flipV`) and *then* rotates the box by `rot`. With CSS
+ * `transform-origin: center`, transforms apply right-to-left, so the flips must
+ * come AFTER the rotation in the string (`rotate(θ) scaleX(-1)`) to be applied
+ * first. Emitting `scaleX(-1) rotate(θ)` instead reflects the rotation direction
+ * for any shape that is both flipped and rotated (e.g. the "Balloons" freeforms
+ * render mirrored/tilted the wrong way). This matches the Angular binding's
+ * `getContainerStyle`, which already emits `rotate() scaleX() scaleY()`.
  * @param element - The element whose transforms are read.
  * @returns A CSS transform string, or `undefined` if no transforms apply.
  */
 function getElementTransform(element) {
     const transforms = [];
+    if (element.rotation) {
+        transforms.push(`rotate(${element.rotation}deg)`);
+    }
     if (element.flipHorizontal) {
         transforms.push('scaleX(-1)');
     }
     if (element.flipVertical) {
         transforms.push('scaleY(-1)');
     }
-    if (element.rotation) {
-        transforms.push(`rotate(${element.rotation}deg)`);
-    }
     if (element.skewX) {
         transforms.push(`skewX(${element.skewX}deg)`);
     }
@@ -6250,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
@@ -6947,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 },
                 });
@@ -6977,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);
@@ -7030,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) {
@@ -7123,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 },
             });
         });
@@ -7187,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,
                 },
             });
         });
@@ -7238,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 },
             });
@@ -7286,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 },
             });
@@ -11451,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 },
@@ -12810,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
@@ -13271,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];
@@ -13282,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)
 // ==========================================================================
@@ -16014,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.
@@ -16498,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;
 }
 
@@ -73870,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.1";
+const PPTX_ANGULAR_VIEWER_VERSION = "1.31.3";
 
 /**
  * account-page.component.ts: File > Account content.