pptx-angular-viewer 4.24.2 → 4.24.3

package/CHANGELOG.md

@@ -7,6 +7,14 @@ A release listed with no entries carried no Conventional Commit in this package'
 scope: scripts/release-plan.mjs re-releases a package whenever any of its files
 change, not only on conventional ones.
 
+## [4.24.2](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@4.24.2) - 2026-10-05
+
+### Bug Fixes
+
+- **shared:** Draw zero-height and zero-width line shapes ([#404](https://github.com/ChristopherVR/pptx-viewer/issues/404)) (by @IHAGI-c) ([8366e0c](https://github.com/ChristopherVR/pptx-viewer/commit/8366e0c672c0838dfc2a5ab894797774d37860d6))
+- **shared:** Skip defining the 3D view element without HTMLElement (by @ChristopherVR) ([8a08d33](https://github.com/ChristopherVR/pptx-viewer/commit/8a08d33560c06c555bf137465022d1a30fdc402a))
+- **vanilla:** Follow the ooxml-ui 0.28 gallery and select contracts (by @ChristopherVR) ([2dd5a64](https://github.com/ChristopherVR/pptx-viewer/commit/2dd5a646ff526a1065fea853e29d25b056e231dc))
+
 ## [4.24.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@4.24.1) - 2026-10-05
 
 ### Testing

package/fesm2022/pptx-angular-viewer.mjs

@@ -40120,19 +40120,152 @@ function buildSmartArt3DSpecForElement(element, options = {}) {
 	});
 	return model.meshes.length > 0 ? model : null;
 }
+const GEOMETRY_SELECTOR = "path, rect, polygon, polyline, ellipse, circle";
+function nodeShapeContainsPoint(node, x, y) {
+	let tested = false;
+	for (const shape of node.querySelectorAll(GEOMETRY_SELECTOR)) {
+		const geometry = shape;
+		const matrix = geometry.getScreenCTM?.();
+		if (!matrix || typeof geometry.isPointInFill !== "function") continue;
+		const det = matrix.a * matrix.d - matrix.b * matrix.c;
+		if (!det) continue;
+		tested = true;
+		const dx = x - matrix.e;
+		const dy = y - matrix.f;
+		const local = {
+			x: (matrix.d * dx - matrix.c * dy) / det,
+			y: (matrix.a * dy - matrix.b * dx) / det
+		};
+		if (geometry.isPointInFill(local) || geometry.isPointInStroke?.(local)) return true;
+	}
+	return tested ? false : null;
+}
 function smartArtNodeAtPoint(root, x, y) {
 	let best = null;
 	let bestArea = Number.POSITIVE_INFINITY;
 	for (const node of root.querySelectorAll("[data-smartart-node-id]")) {
 		const box = node.getBoundingClientRect();
 		const area = box.width * box.height;
-		if (area > 0 && x >= box.left && x <= box.right && y >= box.top && y <= box.bottom && area < bestArea) {
+		if (area <= 0 || area >= bestArea) continue;
+		if (nodeShapeContainsPoint(node, x, y) ?? (x >= box.left && x <= box.right && y >= box.top && y <= box.bottom)) {
 			best = node;
 			bestArea = area;
 		}
 	}
 	return best;
 }
+function polygonBounds(points) {
+	const pairs = points.trim().split(/\s+/u);
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const pair of pairs) {
+		const comma = pair.indexOf(",");
+		if (comma < 0) continue;
+		const x = parseFloat(pair.slice(0, comma));
+		const y = parseFloat(pair.slice(comma + 1));
+		if (!isFinite(x) || !isFinite(y)) continue;
+		if (x < minX) minX = x;
+		if (x > maxX) maxX = x;
+		if (y < minY) minY = y;
+		if (y > maxY) maxY = y;
+	}
+	if (!isFinite(minX)) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+function renderedNodeToShape(rn, nodeId, family) {
+	const id = `reflow-${family}-${nodeId}`;
+	const text = rn.text || void 0;
+	if (rn.kind === "rect") return {
+		id,
+		shapeType: rn.rx > 0 ? "roundRect" : "rect",
+		x: rn.x,
+		y: rn.y,
+		width: rn.width,
+		height: rn.height,
+		rotation: 0,
+		fillColor: rn.fill,
+		strokeColor: rn.stroke,
+		strokeWidth: rn.strokeWidth,
+		text,
+		fontSize: rn.fontSize
+	};
+	if (rn.kind === "circle") return {
+		id,
+		shapeType: "ellipse",
+		x: rn.cx - rn.r,
+		y: rn.cy - rn.r,
+		width: rn.r * 2,
+		height: rn.r * 2,
+		rotation: 0,
+		fillColor: rn.fill,
+		strokeColor: rn.stroke,
+		strokeWidth: rn.strokeWidth,
+		text,
+		fontSize: rn.fontSize
+	};
+	const bounds = polygonBounds(rn.points);
+	return {
+		id,
+		shapeType: "chevron",
+		x: bounds.x,
+		y: bounds.y,
+		width: bounds.width,
+		height: bounds.height,
+		rotation: 0,
+		fillColor: rn.fill,
+		strokeColor: rn.stroke,
+		strokeWidth: rn.strokeWidth,
+		text,
+		fontSize: rn.fontSize
+	};
+}
+function reflowToDrawingShapes(layoutResult, nodes) {
+	const flat = flattenNodes$1([...nodes]);
+	const family = layoutResult.family;
+	const shapes = [];
+	for (let i = 0; i < layoutResult.nodes.length; i++) {
+		const rn = layoutResult.nodes[i];
+		const nodeId = flat[i]?.id ?? rn.key;
+		shapes.push(renderedNodeToShape(rn, nodeId, family));
+	}
+	return shapes;
+}
+function rebuildDrawingShapesIfCleared(smartArtData, layout, palette, style, elementId, box) {
+	const shapes = smartArtData.drawingShapes;
+	if (shapes === void 0 || shapes.length > 0 || smartArtData.nodes.length === 0) return smartArtData;
+	const layoutResult = computeSmartArtElementLayout({
+		...smartArtData,
+		layout
+	}, smartArtData.nodes, box, palette, style, elementId);
+	return {
+		...smartArtData,
+		drawingShapes: reflowToDrawingShapes(layoutResult, smartArtData.nodes)
+	};
+}
+function reflowed(element, next) {
+	return rebuildDrawingShapesIfCleared(next, next.layout, resolvePalette(next), next.style ?? "flat", element.id, {
+		width: element.width,
+		height: element.height
+	});
+}
+function commitSmartArtNodeFill(element, nodeId, fill) {
+	if (element.type !== "smartArt" || !element.smartArtData) return null;
+	const data = element.smartArtData;
+	const next = setSmartArtNodeStyle(data, nodeId, { fillColor: fill });
+	return next === data ? null : reflowed(element, next);
+}
 const OBLIQUE_CATEGORY_LABEL_GAP = 14 * (4 / 3);
 const VALUE_GAP$1 = 18;
 const CATEGORY_GAP = OBLIQUE_CATEGORY_LABEL_GAP;
@@ -48186,106 +48319,6 @@ function createDefaultChartElement(chartKind = DEFAULT_INSERT_CHART_KIND, positi
 		height: position?.height ?? DEFAULT_CHART_POSITION.height
 	});
 }
-function polygonBounds(points) {
-	const pairs = points.trim().split(/\s+/u);
-	let minX = Infinity;
-	let minY = Infinity;
-	let maxX = -Infinity;
-	let maxY = -Infinity;
-	for (const pair of pairs) {
-		const comma = pair.indexOf(",");
-		if (comma < 0) continue;
-		const x = parseFloat(pair.slice(0, comma));
-		const y = parseFloat(pair.slice(comma + 1));
-		if (!isFinite(x) || !isFinite(y)) continue;
-		if (x < minX) minX = x;
-		if (x > maxX) maxX = x;
-		if (y < minY) minY = y;
-		if (y > maxY) maxY = y;
-	}
-	if (!isFinite(minX)) return {
-		x: 0,
-		y: 0,
-		width: 0,
-		height: 0
-	};
-	return {
-		x: minX,
-		y: minY,
-		width: maxX - minX,
-		height: maxY - minY
-	};
-}
-function renderedNodeToShape(rn, nodeId, family) {
-	const id = `reflow-${family}-${nodeId}`;
-	const text = rn.text || void 0;
-	if (rn.kind === "rect") return {
-		id,
-		shapeType: rn.rx > 0 ? "roundRect" : "rect",
-		x: rn.x,
-		y: rn.y,
-		width: rn.width,
-		height: rn.height,
-		rotation: 0,
-		fillColor: rn.fill,
-		strokeColor: rn.stroke,
-		strokeWidth: rn.strokeWidth,
-		text,
-		fontSize: rn.fontSize
-	};
-	if (rn.kind === "circle") return {
-		id,
-		shapeType: "ellipse",
-		x: rn.cx - rn.r,
-		y: rn.cy - rn.r,
-		width: rn.r * 2,
-		height: rn.r * 2,
-		rotation: 0,
-		fillColor: rn.fill,
-		strokeColor: rn.stroke,
-		strokeWidth: rn.strokeWidth,
-		text,
-		fontSize: rn.fontSize
-	};
-	const bounds = polygonBounds(rn.points);
-	return {
-		id,
-		shapeType: "chevron",
-		x: bounds.x,
-		y: bounds.y,
-		width: bounds.width,
-		height: bounds.height,
-		rotation: 0,
-		fillColor: rn.fill,
-		strokeColor: rn.stroke,
-		strokeWidth: rn.strokeWidth,
-		text,
-		fontSize: rn.fontSize
-	};
-}
-function reflowToDrawingShapes(layoutResult, nodes) {
-	const flat = flattenNodes$1([...nodes]);
-	const family = layoutResult.family;
-	const shapes = [];
-	for (let i = 0; i < layoutResult.nodes.length; i++) {
-		const rn = layoutResult.nodes[i];
-		const nodeId = flat[i]?.id ?? rn.key;
-		shapes.push(renderedNodeToShape(rn, nodeId, family));
-	}
-	return shapes;
-}
-function rebuildDrawingShapesIfCleared(smartArtData, layout, palette, style, elementId, box) {
-	const shapes = smartArtData.drawingShapes;
-	if (shapes === void 0 || shapes.length > 0 || smartArtData.nodes.length === 0) return smartArtData;
-	const layoutResult = computeSmartArtElementLayout({
-		...smartArtData,
-		layout
-	}, smartArtData.nodes, box, palette, style, elementId);
-	return {
-		...smartArtData,
-		drawingShapes: reflowToDrawingShapes(layoutResult, smartArtData.nodes)
-	};
-}
 function startMediaAutoplay(el, options) {
 	const trimStartMs = options?.trimStartMs;
 	if (trimStartMs !== void 0 && trimStartMs > 0) try {
@@ -61795,10 +61828,89 @@ function computeThreeViewSize(layoutWidth, layoutHeight, screenWidth, screenHeig
 		pixelHeight: clamp(onScreenH * dpr)
 	};
 }
+const IDENTITY = {
+	a: 1,
+	b: 0,
+	c: 0,
+	d: 1
+};
+function compose(outer, inner) {
+	return {
+		a: outer.a * inner.a + outer.c * inner.b,
+		b: outer.b * inner.a + outer.d * inner.b,
+		c: outer.a * inner.c + outer.c * inner.d,
+		d: outer.b * inner.c + outer.d * inner.d
+	};
+}
+function parseComputedTransform(value) {
+	const match = /^(matrix3d|matrix)\(([^)]*)\)$/u.exec((value ?? "").trim());
+	if (!match) return null;
+	const n = (match[2] ?? "").split(",").map((part) => Number.parseFloat(part));
+	const [a, b, c, d] = (match[1] === "matrix3d" ? [
+		0,
+		1,
+		4,
+		5
+	] : [
+		0,
+		1,
+		2,
+		3
+	]).map((i) => n[i]);
+	return [
+		a,
+		b,
+		c,
+		d
+	].every((v) => v !== void 0 && Number.isFinite(v)) ? {
+		a,
+		b,
+		c,
+		d
+	} : null;
+}
+function matrixScale(m) {
+	return {
+		x: Math.hypot(m.a, m.b),
+		y: Math.hypot(m.c, m.d)
+	};
+}
+function parentOf(node) {
+	if (node.parentElement) return node.parentElement;
+	const root = node.getRootNode?.();
+	return root && "host" in root ? root.host ?? null : null;
+}
+function measureTransformScale(element) {
+	const win = element.ownerDocument?.defaultView;
+	if (!win) return {
+		x: 1,
+		y: 1
+	};
+	let total = IDENTITY;
+	for (let node = element; node; node = parentOf(node)) {
+		const style = win.getComputedStyle(node);
+		if (style.scale && style.scale !== "none") {
+			const [sx = "1", sy = sx] = style.scale.split(/\s+/u);
+			const x = Number.parseFloat(sx);
+			const y = Number.parseFloat(sy);
+			if (Number.isFinite(x) && Number.isFinite(y)) total = compose({
+				a: x,
+				b: 0,
+				c: 0,
+				d: y
+			}, total);
+		}
+		const transform = parseComputedTransform(style.transform);
+		if (transform) total = compose(transform, total);
+	}
+	return matrixScale(total);
+}
 function measureThreeViewSize(element) {
-	const rect = element.getBoundingClientRect();
 	const win = element.ownerDocument?.defaultView;
-	return computeThreeViewSize(element.clientWidth, element.clientHeight, rect.width, rect.height, win?.devicePixelRatio ?? 1);
+	const layoutWidth = element.clientWidth;
+	const layoutHeight = element.clientHeight;
+	const scale = measureTransformScale(element);
+	return computeThreeViewSize(layoutWidth, layoutHeight, layoutWidth * scale.x, layoutHeight * scale.y, win?.devicePixelRatio ?? 1);
 }
 const THREE_VIEW_TAG = "pptx-three-view";
 const THREE_VIEW_MARKER_ATTR = "data-pptx-three-view";
@@ -93861,12 +93973,25 @@ i0.ɵɵngDeclareClassMetadata({
 function getSmartArtData(element) {
 	return element.type === "smartArt" ? element.smartArtData : void 0;
 }
-function computeNode3DEditBox(nodeRect, containerRect) {
+function toNode3DEditBox(rect) {
 	return {
-		x: nodeRect.left - containerRect.left,
-		y: nodeRect.top - containerRect.top,
-		width: nodeRect.width,
-		height: nodeRect.height
+		x: rect.left,
+		y: rect.top,
+		width: rect.width,
+		height: rect.height
+	};
+}
+const STYLE_BAR_WIDTH = 168;
+const STYLE_BAR_HEIGHT = 40;
+function computeNode3DStyleBarStyle(rect, container) {
+	if (!rect || !container) return null;
+	const maxLeft = Math.max(0, container.clientWidth - STYLE_BAR_WIDTH);
+	const maxTop = Math.max(0, container.clientHeight - STYLE_BAR_HEIGHT);
+	return {
+		position: "absolute",
+		left: `${Math.min(maxLeft, Math.max(0, rect.left + rect.width - STYLE_BAR_WIDTH))}px`,
+		top: `${Math.min(maxTop, Math.max(0, rect.top - 22))}px`,
+		"z-index": "25"
 	};
 }
 var SmartArt3DRendererComponent = class SmartArt3DRendererComponent {
@@ -93892,6 +94017,10 @@ var SmartArt3DRendererComponent = class SmartArt3DRendererComponent {
 		this.containerStyle = computed(() => getContainerStyle(this.element(), this.zIndex()), ...ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []);
 		this.hitTargetStyle = computed(() => shouldRenderHitTarget(this.editable(), this.presenting()) ? elementHitTargetStyle(this.element()) : void 0, ...ngDevMode ? [{ debugName: "hitTargetStyle" }] : /* istanbul ignore next */ []);
 		this.smartArtData = computed(() => getSmartArtData(this.element()), ...ngDevMode ? [{ debugName: "smartArtData" }] : /* istanbul ignore next */ []);
+		this.palette = computed(() => resolvePalette(this.smartArtData()), ...ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []);
+		this.hoveredNodeId = signal(null, ...ngDevMode ? [{ debugName: "hoveredNodeId" }] : /* istanbul ignore next */ []);
+		this.hoveredNodeRect = signal(null, ...ngDevMode ? [{ debugName: "hoveredNodeRect" }] : /* istanbul ignore next */ []);
+		this.styleBarStyle = computed(() => computeNode3DStyleBarStyle(this.hoveredNodeRect(), this.containerEl()?.nativeElement), ...ngDevMode ? [{ debugName: "styleBarStyle" }] : /* istanbul ignore next */ []);
 		effect(() => {
 			if (this.editState()) afterNextRender(() => {
 				const el = this.nodeEditor3d()?.nativeElement;
@@ -93909,17 +94038,45 @@ var SmartArt3DRendererComponent = class SmartArt3DRendererComponent {
 		if (!container || !data || !(overlay instanceof Element)) return;
 		const nodeEl = smartArtNodeAtPoint(overlay, event.clientX, event.clientY);
 		const nodeId = nodeEl?.getAttribute("data-smartart-node-id");
-		if (!nodeEl || !nodeId) return;
+		const rect = nodeEl ? measureSvgViewportRect(nodeEl) : null;
+		if (!nodeEl || !nodeId || !rect) return;
 		event.stopPropagation();
 		const currentText = data.nodes.find((n) => n.id === nodeId)?.text ?? "";
 		this.draftText = currentText;
 		this.editSettled = false;
+		this.hoveredNodeId.set(null);
+		this.hoveredNodeRect.set(null);
 		this.editState.set({
 			nodeId,
-			box: computeNode3DEditBox(nodeEl.getBoundingClientRect(), container.getBoundingClientRect()),
+			box: toNode3DEditBox(rect),
 			text: currentText
 		});
 	}
+	onOverlayMouseMove(event) {
+		const overlay = event.currentTarget;
+		if (!(overlay instanceof Element) || this.editState()) return;
+		const nodeEl = smartArtNodeAtPoint(overlay, event.clientX, event.clientY);
+		const id = nodeEl?.getAttribute("data-smartart-node-id") ?? null;
+		if (id !== this.hoveredNodeId()) {
+			this.hoveredNodeId.set(id);
+			this.hoveredNodeRect.set(id && nodeEl ? measureSvgViewportRect(nodeEl) : null);
+		}
+	}
+	onHoverLeave(event) {
+		const to = event.relatedTarget;
+		if (to instanceof Node && this.containerEl()?.nativeElement.contains(to)) return;
+		this.hoveredNodeId.set(null);
+		this.hoveredNodeRect.set(null);
+	}
+	handleChangeNodeStyle(nodeId, fill) {
+		const next = commitSmartArtNodeFill(this.element(), nodeId, fill);
+		if (!next || !this.editor) return;
+		const slideIndex = findOwningSlideIndex(this.editor.slides(), this.element().id, this.slideContext?.slideId() ?? null);
+		if (slideIndex < 0) return;
+		this.hoveredNodeId.set(null);
+		this.hoveredNodeRect.set(null);
+		this.editor.updateElement(slideIndex, this.element().id, { smartArtData: next });
+	}
 	updateDraft(event) {
 		this.draftText = event.target.value;
 	}
@@ -94039,8 +94196,8 @@ var SmartArt3DRendererComponent = class SmartArt3DRendererComponent {
 				isSignal: true
 			}],
 			ngImport: i0,
-			template: "@if (useFallback()) {\n	<!--\n		The SVG renderer only fills a box, so the positioned, id-bearing,\n		marked element node has to be drawn here.\n	-->\n	<div\n		class=\"pptx-ng-element pptx-ng-smartart\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-smart-art-renderer [element]=\"element()\" />\n	</div>\n} @else {\n	<div\n		#container3d\n		class=\"pptx-ng-element pptx-ng-smartart-3d\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-ng-three-view [spec]=\"spec()\" [interactive]=\"canEdit()\" [textStyle]=\"textStyle()\">\n			<pptx-smart-art-renderer [element]=\"element()\" />\n		</pptx-ng-three-view>\n		@if (canEdit()) {\n			<!-- Invisible SVG overlay: provides data-smartart-node-id hit targets -->\n			<div class=\"pptx-ng-smartart-3d-hittest\" (dblclick)=\"onOverlayDblClick($event)\">\n				<pptx-smart-art-renderer [element]=\"element()\" [editable]=\"false\" />\n			</div>\n			@if (editState()) {\n				<textarea\n					#nodeEditor3d\n					class=\"pptx-ng-smartart-3d-node-editor\"\n					[style.left.px]=\"editState()!.box.x\"\n					[style.top.px]=\"editState()!.box.y\"\n					[style.width.px]=\"editState()!.box.width\"\n					[style.height.px]=\"editState()!.box.height\"\n					[value]=\"editState()!.text\"\n					spellcheck=\"false\"\n					[attr.aria-label]=\"'pptx.smartArt.editNodeText' | translate\"\n					(input)=\"updateDraft($event)\"\n					(blur)=\"commitEdit()\"\n					(keydown)=\"onEditorKeydown($event)\"\n					(mousedown)=\"$event.stopPropagation()\"\n					(click)=\"$event.stopPropagation()\"\n					(dblclick)=\"$event.stopPropagation()\"\n				></textarea>\n			}\n		}\n	</div>\n}\n",
-			styles: [".pptx-ng-smartart-3d-hittest{position:absolute;inset:0;opacity:0;pointer-events:auto}.pptx-ng-smartart-3d-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:20;outline:none}\n"],
+			template: "@if (useFallback()) {\n	<!--\n		The SVG renderer only fills a box, so the positioned, id-bearing,\n		marked element node has to be drawn here.\n	-->\n	<div\n		class=\"pptx-ng-element pptx-ng-smartart\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-smart-art-renderer [element]=\"element()\" />\n	</div>\n} @else {\n	<div\n		#container3d\n		class=\"pptx-ng-element pptx-ng-smartart-3d\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-ng-three-view [spec]=\"spec()\" [interactive]=\"canEdit()\" [textStyle]=\"textStyle()\">\n			<pptx-smart-art-renderer [element]=\"element()\" />\n		</pptx-ng-three-view>\n		@if (canEdit()) {\n			<!-- Invisible SVG overlay: provides data-smartart-node-id hit targets -->\n			<div\n				class=\"pptx-ng-smartart-3d-hittest\"\n				(dblclick)=\"onOverlayDblClick($event)\"\n				(mousemove)=\"onOverlayMouseMove($event)\"\n				(mouseleave)=\"onHoverLeave($event)\"\n			>\n				<pptx-smart-art-renderer [element]=\"element()\" [editable]=\"false\" />\n			</div>\n			@if (hoveredNodeId() && !editState() && styleBarStyle()) {\n				<!-- Per-node fill colour picker (hover swatch bar), as on the 2D diagram -->\n				<div\n					class=\"pptx-ng-smartart-3d-style-bar\"\n					[ngStyle]=\"styleBarStyle()!\"\n					(mousedown)=\"$event.stopPropagation()\"\n					(click)=\"$event.stopPropagation()\"\n					(mouseleave)=\"onHoverLeave($event)\"\n				>\n					@for (color of palette().slice(0, 6); track color) {\n						<button\n							type=\"button\"\n							class=\"pptx-ng-smartart-3d-swatch\"\n							data-pptx-compact\n							[attr.aria-label]=\"'pptx.smartArt.setFill' | translate: { color: color }\"\n							[style.background]=\"color\"\n							(click)=\"handleChangeNodeStyle(hoveredNodeId()!, color)\"\n						></button>\n					}\n				</div>\n			}\n			@if (editState()) {\n				<textarea\n					#nodeEditor3d\n					class=\"pptx-ng-smartart-3d-node-editor\"\n					[style.left.px]=\"editState()!.box.x\"\n					[style.top.px]=\"editState()!.box.y\"\n					[style.width.px]=\"editState()!.box.width\"\n					[style.height.px]=\"editState()!.box.height\"\n					[value]=\"editState()!.text\"\n					spellcheck=\"false\"\n					[attr.aria-label]=\"'pptx.smartArt.editNodeText' | translate\"\n					(input)=\"updateDraft($event)\"\n					(blur)=\"commitEdit()\"\n					(keydown)=\"onEditorKeydown($event)\"\n					(mousedown)=\"$event.stopPropagation()\"\n					(click)=\"$event.stopPropagation()\"\n					(dblclick)=\"$event.stopPropagation()\"\n				></textarea>\n			}\n		}\n	</div>\n}\n",
+			styles: [".pptx-ng-smartart-3d-hittest{position:absolute;inset:0;opacity:0;pointer-events:auto}.pptx-ng-smartart-3d-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:20;outline:none}.pptx-ng-smartart-3d-style-bar{position:absolute;pointer-events:auto;display:flex;gap:6px;padding:6px 8px;background:#ffffffe6;border:1px solid var(--border, #e2e8f0);border-radius:9999px;box-shadow:0 1px 2px #0000001a}.pptx-ng-smartart-3d-swatch{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-3d-swatch:hover{transform:scale(1.25)}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -94101,8 +94258,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ThreeViewComponent,
 				TranslatePipe
 			],
-			template: "@if (useFallback()) {\n	<!--\n		The SVG renderer only fills a box, so the positioned, id-bearing,\n		marked element node has to be drawn here.\n	-->\n	<div\n		class=\"pptx-ng-element pptx-ng-smartart\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-smart-art-renderer [element]=\"element()\" />\n	</div>\n} @else {\n	<div\n		#container3d\n		class=\"pptx-ng-element pptx-ng-smartart-3d\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-ng-three-view [spec]=\"spec()\" [interactive]=\"canEdit()\" [textStyle]=\"textStyle()\">\n			<pptx-smart-art-renderer [element]=\"element()\" />\n		</pptx-ng-three-view>\n		@if (canEdit()) {\n			<!-- Invisible SVG overlay: provides data-smartart-node-id hit targets -->\n			<div class=\"pptx-ng-smartart-3d-hittest\" (dblclick)=\"onOverlayDblClick($event)\">\n				<pptx-smart-art-renderer [element]=\"element()\" [editable]=\"false\" />\n			</div>\n			@if (editState()) {\n				<textarea\n					#nodeEditor3d\n					class=\"pptx-ng-smartart-3d-node-editor\"\n					[style.left.px]=\"editState()!.box.x\"\n					[style.top.px]=\"editState()!.box.y\"\n					[style.width.px]=\"editState()!.box.width\"\n					[style.height.px]=\"editState()!.box.height\"\n					[value]=\"editState()!.text\"\n					spellcheck=\"false\"\n					[attr.aria-label]=\"'pptx.smartArt.editNodeText' | translate\"\n					(input)=\"updateDraft($event)\"\n					(blur)=\"commitEdit()\"\n					(keydown)=\"onEditorKeydown($event)\"\n					(mousedown)=\"$event.stopPropagation()\"\n					(click)=\"$event.stopPropagation()\"\n					(dblclick)=\"$event.stopPropagation()\"\n				></textarea>\n			}\n		}\n	</div>\n}\n",
-			styles: [".pptx-ng-smartart-3d-hittest{position:absolute;inset:0;opacity:0;pointer-events:auto}.pptx-ng-smartart-3d-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:20;outline:none}\n"]
+			template: "@if (useFallback()) {\n	<!--\n		The SVG renderer only fills a box, so the positioned, id-bearing,\n		marked element node has to be drawn here.\n	-->\n	<div\n		class=\"pptx-ng-element pptx-ng-smartart\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-smart-art-renderer [element]=\"element()\" />\n	</div>\n} @else {\n	<div\n		#container3d\n		class=\"pptx-ng-element pptx-ng-smartart-3d\"\n		[ngStyle]=\"containerStyle()\"\n		[attr.data-element-id]=\"element().id\"\n		[attr.data-pptx-element]=\"markElement() ? 'true' : null\"\n	>\n		<!-- Interaction-only hit target for a degenerate SmartArt; see `hitTargetStyle`. -->\n		@if (hitTargetStyle(); as hit) {\n			<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n		}\n		<pptx-ng-three-view [spec]=\"spec()\" [interactive]=\"canEdit()\" [textStyle]=\"textStyle()\">\n			<pptx-smart-art-renderer [element]=\"element()\" />\n		</pptx-ng-three-view>\n		@if (canEdit()) {\n			<!-- Invisible SVG overlay: provides data-smartart-node-id hit targets -->\n			<div\n				class=\"pptx-ng-smartart-3d-hittest\"\n				(dblclick)=\"onOverlayDblClick($event)\"\n				(mousemove)=\"onOverlayMouseMove($event)\"\n				(mouseleave)=\"onHoverLeave($event)\"\n			>\n				<pptx-smart-art-renderer [element]=\"element()\" [editable]=\"false\" />\n			</div>\n			@if (hoveredNodeId() && !editState() && styleBarStyle()) {\n				<!-- Per-node fill colour picker (hover swatch bar), as on the 2D diagram -->\n				<div\n					class=\"pptx-ng-smartart-3d-style-bar\"\n					[ngStyle]=\"styleBarStyle()!\"\n					(mousedown)=\"$event.stopPropagation()\"\n					(click)=\"$event.stopPropagation()\"\n					(mouseleave)=\"onHoverLeave($event)\"\n				>\n					@for (color of palette().slice(0, 6); track color) {\n						<button\n							type=\"button\"\n							class=\"pptx-ng-smartart-3d-swatch\"\n							data-pptx-compact\n							[attr.aria-label]=\"'pptx.smartArt.setFill' | translate: { color: color }\"\n							[style.background]=\"color\"\n							(click)=\"handleChangeNodeStyle(hoveredNodeId()!, color)\"\n						></button>\n					}\n				</div>\n			}\n			@if (editState()) {\n				<textarea\n					#nodeEditor3d\n					class=\"pptx-ng-smartart-3d-node-editor\"\n					[style.left.px]=\"editState()!.box.x\"\n					[style.top.px]=\"editState()!.box.y\"\n					[style.width.px]=\"editState()!.box.width\"\n					[style.height.px]=\"editState()!.box.height\"\n					[value]=\"editState()!.text\"\n					spellcheck=\"false\"\n					[attr.aria-label]=\"'pptx.smartArt.editNodeText' | translate\"\n					(input)=\"updateDraft($event)\"\n					(blur)=\"commitEdit()\"\n					(keydown)=\"onEditorKeydown($event)\"\n					(mousedown)=\"$event.stopPropagation()\"\n					(click)=\"$event.stopPropagation()\"\n					(dblclick)=\"$event.stopPropagation()\"\n				></textarea>\n			}\n		}\n	</div>\n}\n",
+			styles: [".pptx-ng-smartart-3d-hittest{position:absolute;inset:0;opacity:0;pointer-events:auto}.pptx-ng-smartart-3d-node-editor{position:absolute;box-sizing:border-box;margin:0;padding:1px 2px;border:1px solid var(--pptx-inspector-active, #0078d4);border-radius:2px;background:#fff;color:#111;font-size:11px;line-height:1.1;text-align:center;resize:none;overflow:hidden;z-index:20;outline:none}.pptx-ng-smartart-3d-style-bar{position:absolute;pointer-events:auto;display:flex;gap:6px;padding:6px 8px;background:#ffffffe6;border:1px solid var(--border, #e2e8f0);border-radius:9999px;box-shadow:0 1px 2px #0000001a}.pptx-ng-smartart-3d-swatch{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:transform .1s}.pptx-ng-smartart-3d-swatch:hover{transform:scale(1.25)}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -121405,7 +121562,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const PPTX_ANGULAR_VIEWER_VERSION = "4.24.1";
+const PPTX_ANGULAR_VIEWER_VERSION = "4.24.2";
 var AccountPageComponent = class AccountPageComponent {
 	constructor() {
 		this.accountAuth = input(void 0, ...ngDevMode ? [{ debugName: "accountAuth" }] : /* istanbul ignore next */ []);