pptx-angular-viewer 4.24.1 → 4.24.3

package/fesm2022/pptx-angular-viewer.mjs

@@ -245,7 +245,7 @@ function getStrokeOnlyPresetPaths(element) {
 	const shapeType = element.shapeType;
 	if (!shapeType || shapeType === "custom") return;
 	if (element.pathData) return;
-	const result = evaluatePresetShape(shapeType, Math.max(element.width, 1), Math.max(element.height, 1), element.shapeAdjustments);
+	const result = evaluatePresetShape(shapeType, Math.max(element.width, 0), Math.max(element.height, 0), element.shapeAdjustments);
 	if (!result || !result.fillNone) return;
 	const drawable = result.paths.filter((path) => path.d !== "");
 	return drawable.length > 0 ? drawable : void 0;
@@ -818,7 +818,10 @@ function buildStrokeOutline(element) {
 	};
 }
 function strokeOutlineViewBox(element) {
-	return `0 0 ${Math.max(element.width, 0)} ${Math.max(element.height, 0)}`;
+	const width = Math.max(element.width, 0);
+	const height = Math.max(element.height, 0);
+	if (width < 1 || height < 1) return;
+	return `0 0 ${width} ${height}`;
 }
 function suppressesCssBorder(element) {
 	return buildStrokeOutline(element) !== void 0;
@@ -40117,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;
@@ -48183,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 {
@@ -61792,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";
@@ -61969,6 +62084,7 @@ function createElementClass() {
 	return PptxThreeView;
 }
 function defineThreeViewElement(registry) {
+	if (typeof HTMLElement === "undefined") return;
 	const target = registry ?? (typeof customElements === "undefined" ? void 0 : customElements);
 	if (!target || target.get("pptx-three-view")) return;
 	target.define(THREE_VIEW_TAG, createElementClass());
@@ -71450,7 +71566,10 @@ function buildSelectControl(ctx, control) {
 		sync(state) {
 			const current = state.controls[key];
 			const label = homeLabel(state, control.labelKey, control.fallback);
-			if (select.getAttribute("aria-label") !== label) select.setAttribute("aria-label", label);
+			if (select.getAttribute("aria-label") !== label) {
+				select.setAttribute("aria-label", label);
+				select.requestUpdate?.();
+			}
 			select.title = label;
 			select.hidden = Boolean(current?.hidden);
 			const { nodes, signature: next } = selectOptions(doc, current?.items ?? control.items ?? [], state);
@@ -93854,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 {
@@ -93885,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;
@@ -93902,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;
 	}
@@ -94032,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",
@@ -94094,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: () => [],
@@ -96615,6 +96779,8 @@ var ReflectionMirrorContentComponent = class ReflectionMirrorContentComponent {
 							inset: 0;
 							width: 100%;
 							height: 100%;
+							min-width: 1px;
+							min-height: 1px;
 							overflow: visible;
 							pointer-events: none;
 						"
@@ -96808,6 +96974,8 @@ i0.ɵɵngDeclareClassMetadata({
 							inset: 0;
 							width: 100%;
 							height: 100%;
+							min-width: 1px;
+							min-height: 1px;
 							overflow: visible;
 							pointer-events: none;
 						"
@@ -97183,7 +97351,7 @@ var ElementRendererShapeComponent = class ElementRendererShapeComponent {
 				}
 			},
 			ngImport: i0,
-			template: "<div\n	class=\"pptx-ng-element pptx-ng-shape\"\n	[ngStyle]=\"shapeContainerStyle()\"\n	[style.pointer-events]=\"rootPointerEvents()\"\n	[attr.data-element-id]=\"elementIdAttr()\"\n	[attr.data-pptx-element]=\"elementMarked() ? 'true' : null\"\n>\n	<!-- A font-style emphasis effect (Bold Flash, Bold Reveal, Underline,\n	     Change Font Style/Size) overrides the runs' own inline\n	     bold/italic/underline/size, which plain CSS inheritance cannot\n	     reach (the runs declare those unconditionally). -->\n	<pptx-dynamic-style [css]=\"textStyleOverrideCss()\" />\n	<!-- Interaction-only hit target for a degenerate shape; see `hitTargetStyle`. -->\n	@if (hitTargetStyle(); as hit) {\n		<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n	}\n	<!-- Per-sub-path fill overlay: a multi-sub-path preset (`smileyFace`'s\n	     open eyes, `actionButtonBlank`'s darkened bevel well) or custom\n	     geometry whose sub-paths cannot share one CSS background-color. -->\n	@if (subpathFill(); as sf) {\n		<svg\n			class=\"pptx-ng-subpath-fill\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"subpathFillViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"position: absolute; inset: 0; width: 100%; height: 100%\"\n		>\n			@for (paint of sf.paints; track $index) {\n				<path [attr.d]=\"paint.d\" [attr.fill]=\"paint.fill\" stroke=\"none\" />\n			}\n		</svg>\n	}\n	@if (fillOverlay(); as ov) {\n		<div\n			class=\"pptx-ng-fill-overlay\"\n			aria-hidden=\"true\"\n			style=\"position: absolute; inset: 0; pointer-events: none\"\n			[style.background]=\"ov.color\"\n			[style.mix-blend-mode]=\"ov.blendMode\"\n		></div>\n	}\n	<!-- Real 3D extrusion side panels (`a:sp3d/@extrusionH`), on top of the\n	     flat box-shadow approximation `shapeContainerStyle` already applied. -->\n	<pptx-extrusion-3d-overlay [data]=\"extrusionData()\" />\n	<!-- Mirrored reflection sibling (`a:reflection`): cross-browser, unlike\n	     the `-webkit-box-reflect` this replaced (Firefox never implemented\n	     that property, so reflections were invisible there entirely). A full\n	     inert clone of the element's own content (fill, outline, text body),\n	     not just its resolved fill - see `ReflectionMirrorContentComponent`. -->\n	@if (reflection(); as refl) {\n		<div class=\"pptx-ng-reflection\" aria-hidden=\"true\" [ngStyle]=\"refl.wrapperStyle\">\n			<pptx-reflection-mirror-content [element]=\"element()\" [mediaDataUrls]=\"mediaDataUrls()\" />\n		</div>\n	}\n	<!-- Hollow frame hit target: an unfilled, textless shape is hit-tested\n	     on its outline only, so its interior lets clicks through. -->\n	@if (hollowHit(); as hit) {\n		<svg\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			<path\n				[attr.d]=\"hit.d\"\n				fill=\"none\"\n				stroke=\"transparent\"\n				[attr.stroke-width]=\"hit.strokeWidth\"\n				style=\"pointer-events: stroke\"\n			/>\n		</svg>\n	}\n	<!-- Stroked outline: a CSS border takes one flat colour, and cannot\n	     outline an open preset (`line`, `arc`) at all. -->\n	@if (gradientOutline(); as go) {\n		<svg\n			class=\"pptx-ng-gradient-outline\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			@if (go.paint; as paint) {\n				<defs>\n					@if (paint.kind === 'pattern') {\n						<pattern\n							[attr.id]=\"paint.id\"\n							[attr.width]=\"paint.width\"\n							[attr.height]=\"paint.height\"\n							patternUnits=\"userSpaceOnUse\"\n						>\n							<image\n								[attr.href]=\"paint.href\"\n								[attr.width]=\"paint.width\"\n								[attr.height]=\"paint.height\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'rectPath') {\n						<pattern [attr.id]=\"paint.id\" patternUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n							<image\n								[attr.href]=\"paint.href\"\n								x=\"0\"\n								y=\"0\"\n								width=\"1\"\n								height=\"1\"\n								preserveAspectRatio=\"none\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'radial') {\n						<radialGradient\n							[attr.id]=\"paint.id\"\n							[attr.cx]=\"paint.cx\"\n							[attr.cy]=\"paint.cy\"\n							[attr.r]=\"paint.r\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</radialGradient>\n					} @else {\n						<linearGradient\n							[attr.id]=\"paint.id\"\n							[attr.x1]=\"paint.x1\"\n							[attr.y1]=\"paint.y1\"\n							[attr.x2]=\"paint.x2\"\n							[attr.y2]=\"paint.y2\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</linearGradient>\n					}\n				</defs>\n			}\n			@for (strand of go.strands; track $index) {\n				<path\n					[attr.d]=\"go.d\"\n					fill=\"none\"\n					[attr.stroke]=\"go.stroke\"\n					[attr.stroke-width]=\"strand.strokeWidth\"\n					[attr.stroke-dasharray]=\"go.dashArray\"\n					[attr.stroke-linecap]=\"go.lineCap\"\n					[attr.stroke-linejoin]=\"go.lineJoin\"\n					[style.transform]=\"strand.offset !== 0 ? 'translate(0, ' + strand.offset + 'px)' : null\"\n				/>\n			}\n		</svg>\n	}\n	<!-- While this element is open in the inline text editor, its live text\n	     is drawn by that overlay instead (see `isBeingInlineEdited`);\n	     rendering it here too produced a duplicate, offset \"text shadow\"\n	     (issue #182). -->\n	@if (!isBeingInlineEdited()) {\n		@if (glyphWarp(); as gwarp) {\n			<svg\n				[attr.width]=\"gwarp.width\"\n				[attr.height]=\"gwarp.height\"\n				[attr.viewBox]=\"'0 0 ' + gwarp.width + ' ' + gwarp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				@for (g of gwarp.glyphs; track $index) {\n					<!-- The glyph's real outline, already warped point-by-point (see\n					     `buildWarpedGlyphOutlinePathD` in pptx-viewer-shared): exact,\n					     so no affine fit or slicing is needed. -->\n					@if (g.outlinePath) {\n						<path [attr.d]=\"g.outlinePath\" [attr.fill]=\"g.fill\" />\n					} @else if (!g.slices || g.slices.length <= 1) {\n						<text\n							[attr.x]=\"g.x\"\n							[attr.y]=\"g.y\"\n							[attr.transform]=\"g.transform\"\n							[attr.fill]=\"g.fill\"\n							[attr.font-size]=\"g.fontSize\"\n							[attr.font-weight]=\"g.fontWeight\"\n							[attr.font-style]=\"g.fontStyle\"\n							[attr.font-family]=\"g.fontFamily\"\n						>\n							{{ g.char }}\n						</text>\n					} @else {\n						<!-- A very wide glyph on a strongly-curved envelope: rendered\n						     as `slices.length` clipped copies, each with its own affine\n						     (see `chooseGlyphSliceCount` in pptx-viewer-shared), so the\n						     pieces tile across the glyph. Wrapped in a real <g> so it\n						     never matches an \"svg > text\" selector the single-slice\n						     case does. -->\n						<g [attr.data-glyph-slices]=\"g.slices.length\">\n							@for (slice of g.slices; track $index; let si = $index) {\n								<clipPath [attr.id]=\"g.clipIdPrefix + '-s' + si\" clipPathUnits=\"userSpaceOnUse\">\n									<rect\n										[attr.x]=\"slice.clipX0\"\n										y=\"-100000\"\n										[attr.width]=\"slice.clipX1 - slice.clipX0\"\n										height=\"200000\"\n									/>\n								</clipPath>\n								<text\n									[attr.x]=\"g.x\"\n									[attr.y]=\"g.y\"\n									[attr.transform]=\"slice.transform\"\n									[attr.clip-path]=\"'url(#' + g.clipIdPrefix + '-s' + si + ')'\"\n									[attr.fill]=\"g.fill\"\n									[attr.font-size]=\"g.fontSize\"\n									[attr.font-weight]=\"g.fontWeight\"\n									[attr.font-style]=\"g.fontStyle\"\n									[attr.font-family]=\"g.fontFamily\"\n								>\n									{{ g.char }}\n								</text>\n							}\n						</g>\n					}\n				}\n			</svg>\n		} @else if (pathWarp(); as warp) {\n			<svg\n				[attr.width]=\"warp.width\"\n				[attr.height]=\"warp.height\"\n				[attr.viewBox]=\"'0 0 ' + warp.width + ' ' + warp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				<defs>\n					@for (line of warp.pathLines; track line.pathId) {\n						<path [attr.id]=\"line.pathId\" [attr.d]=\"line.d\" fill=\"none\" />\n					}\n				</defs>\n				@for (line of warp.pathLines; track line.pathId) {\n					<text\n						[attr.font-size]=\"warp.baseFontSize\"\n						[attr.font-family]=\"warp.baseFontFamily\"\n						[attr.fill]=\"warp.baseColor\"\n					>\n						<textPath\n							[attr.href]=\"'#' + line.pathId\"\n							[attr.startOffset]=\"warp.startOffset\"\n							[attr.text-anchor]=\"warp.textAnchor\"\n						>\n							@for (seg of line.segments; track $index) {\n								<tspan\n									[attr.fill]=\"seg.style?.color ?? warp.baseColor\"\n									[attr.font-weight]=\"seg.style?.bold ? 700 : 400\"\n									[attr.font-style]=\"seg.style?.italic ? 'italic' : 'normal'\"\n								>\n									{{ seg.text }}\n								</tspan>\n							}\n						</textPath>\n					</text>\n				}\n			</svg>\n		} @else if (placeholderPrompt(); as prompt) {\n			<div class=\"pptx-ng-text\" [ngStyle]=\"prompt.style\">{{ prompt.text }}</div>\n		} @else if (hasText()) {\n			<pptx-slide-text-block\n				[paragraphs]=\"paragraphs()\"\n				[textStyle]=\"warpedTextStyle()\"\n				[elementId]=\"element().id\"\n				[subElementAnimStates]=\"subElementAnimStates()\"\n				[interactive]=\"true\"\n			/>\n		}\n	}\n</div>\n",
+			template: "<div\n	class=\"pptx-ng-element pptx-ng-shape\"\n	[ngStyle]=\"shapeContainerStyle()\"\n	[style.pointer-events]=\"rootPointerEvents()\"\n	[attr.data-element-id]=\"elementIdAttr()\"\n	[attr.data-pptx-element]=\"elementMarked() ? 'true' : null\"\n>\n	<!-- A font-style emphasis effect (Bold Flash, Bold Reveal, Underline,\n	     Change Font Style/Size) overrides the runs' own inline\n	     bold/italic/underline/size, which plain CSS inheritance cannot\n	     reach (the runs declare those unconditionally). -->\n	<pptx-dynamic-style [css]=\"textStyleOverrideCss()\" />\n	<!-- Interaction-only hit target for a degenerate shape; see `hitTargetStyle`. -->\n	@if (hitTargetStyle(); as hit) {\n		<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n	}\n	<!-- Per-sub-path fill overlay: a multi-sub-path preset (`smileyFace`'s\n	     open eyes, `actionButtonBlank`'s darkened bevel well) or custom\n	     geometry whose sub-paths cannot share one CSS background-color. -->\n	@if (subpathFill(); as sf) {\n		<svg\n			class=\"pptx-ng-subpath-fill\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"subpathFillViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"position: absolute; inset: 0; width: 100%; height: 100%\"\n		>\n			@for (paint of sf.paints; track $index) {\n				<path [attr.d]=\"paint.d\" [attr.fill]=\"paint.fill\" stroke=\"none\" />\n			}\n		</svg>\n	}\n	@if (fillOverlay(); as ov) {\n		<div\n			class=\"pptx-ng-fill-overlay\"\n			aria-hidden=\"true\"\n			style=\"position: absolute; inset: 0; pointer-events: none\"\n			[style.background]=\"ov.color\"\n			[style.mix-blend-mode]=\"ov.blendMode\"\n		></div>\n	}\n	<!-- Real 3D extrusion side panels (`a:sp3d/@extrusionH`), on top of the\n	     flat box-shadow approximation `shapeContainerStyle` already applied. -->\n	<pptx-extrusion-3d-overlay [data]=\"extrusionData()\" />\n	<!-- Mirrored reflection sibling (`a:reflection`): cross-browser, unlike\n	     the `-webkit-box-reflect` this replaced (Firefox never implemented\n	     that property, so reflections were invisible there entirely). A full\n	     inert clone of the element's own content (fill, outline, text body),\n	     not just its resolved fill - see `ReflectionMirrorContentComponent`. -->\n	@if (reflection(); as refl) {\n		<div class=\"pptx-ng-reflection\" aria-hidden=\"true\" [ngStyle]=\"refl.wrapperStyle\">\n			<pptx-reflection-mirror-content [element]=\"element()\" [mediaDataUrls]=\"mediaDataUrls()\" />\n		</div>\n	}\n	<!-- Hollow frame hit target: an unfilled, textless shape is hit-tested\n	     on its outline only, so its interior lets clicks through. -->\n	@if (hollowHit(); as hit) {\n		<svg\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				min-width: 1px;\n				min-height: 1px;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			<path\n				[attr.d]=\"hit.d\"\n				fill=\"none\"\n				stroke=\"transparent\"\n				[attr.stroke-width]=\"hit.strokeWidth\"\n				style=\"pointer-events: stroke\"\n			/>\n		</svg>\n	}\n	<!-- Stroked outline: a CSS border takes one flat colour, and cannot\n	     outline an open preset (`line`, `arc`) at all. -->\n	@if (gradientOutline(); as go) {\n		<svg\n			class=\"pptx-ng-gradient-outline\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				min-width: 1px;\n				min-height: 1px;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			@if (go.paint; as paint) {\n				<defs>\n					@if (paint.kind === 'pattern') {\n						<pattern\n							[attr.id]=\"paint.id\"\n							[attr.width]=\"paint.width\"\n							[attr.height]=\"paint.height\"\n							patternUnits=\"userSpaceOnUse\"\n						>\n							<image\n								[attr.href]=\"paint.href\"\n								[attr.width]=\"paint.width\"\n								[attr.height]=\"paint.height\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'rectPath') {\n						<pattern [attr.id]=\"paint.id\" patternUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n							<image\n								[attr.href]=\"paint.href\"\n								x=\"0\"\n								y=\"0\"\n								width=\"1\"\n								height=\"1\"\n								preserveAspectRatio=\"none\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'radial') {\n						<radialGradient\n							[attr.id]=\"paint.id\"\n							[attr.cx]=\"paint.cx\"\n							[attr.cy]=\"paint.cy\"\n							[attr.r]=\"paint.r\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</radialGradient>\n					} @else {\n						<linearGradient\n							[attr.id]=\"paint.id\"\n							[attr.x1]=\"paint.x1\"\n							[attr.y1]=\"paint.y1\"\n							[attr.x2]=\"paint.x2\"\n							[attr.y2]=\"paint.y2\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</linearGradient>\n					}\n				</defs>\n			}\n			@for (strand of go.strands; track $index) {\n				<path\n					[attr.d]=\"go.d\"\n					fill=\"none\"\n					[attr.stroke]=\"go.stroke\"\n					[attr.stroke-width]=\"strand.strokeWidth\"\n					[attr.stroke-dasharray]=\"go.dashArray\"\n					[attr.stroke-linecap]=\"go.lineCap\"\n					[attr.stroke-linejoin]=\"go.lineJoin\"\n					[style.transform]=\"strand.offset !== 0 ? 'translate(0, ' + strand.offset + 'px)' : null\"\n				/>\n			}\n		</svg>\n	}\n	<!-- While this element is open in the inline text editor, its live text\n	     is drawn by that overlay instead (see `isBeingInlineEdited`);\n	     rendering it here too produced a duplicate, offset \"text shadow\"\n	     (issue #182). -->\n	@if (!isBeingInlineEdited()) {\n		@if (glyphWarp(); as gwarp) {\n			<svg\n				[attr.width]=\"gwarp.width\"\n				[attr.height]=\"gwarp.height\"\n				[attr.viewBox]=\"'0 0 ' + gwarp.width + ' ' + gwarp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				@for (g of gwarp.glyphs; track $index) {\n					<!-- The glyph's real outline, already warped point-by-point (see\n					     `buildWarpedGlyphOutlinePathD` in pptx-viewer-shared): exact,\n					     so no affine fit or slicing is needed. -->\n					@if (g.outlinePath) {\n						<path [attr.d]=\"g.outlinePath\" [attr.fill]=\"g.fill\" />\n					} @else if (!g.slices || g.slices.length <= 1) {\n						<text\n							[attr.x]=\"g.x\"\n							[attr.y]=\"g.y\"\n							[attr.transform]=\"g.transform\"\n							[attr.fill]=\"g.fill\"\n							[attr.font-size]=\"g.fontSize\"\n							[attr.font-weight]=\"g.fontWeight\"\n							[attr.font-style]=\"g.fontStyle\"\n							[attr.font-family]=\"g.fontFamily\"\n						>\n							{{ g.char }}\n						</text>\n					} @else {\n						<!-- A very wide glyph on a strongly-curved envelope: rendered\n						     as `slices.length` clipped copies, each with its own affine\n						     (see `chooseGlyphSliceCount` in pptx-viewer-shared), so the\n						     pieces tile across the glyph. Wrapped in a real <g> so it\n						     never matches an \"svg > text\" selector the single-slice\n						     case does. -->\n						<g [attr.data-glyph-slices]=\"g.slices.length\">\n							@for (slice of g.slices; track $index; let si = $index) {\n								<clipPath [attr.id]=\"g.clipIdPrefix + '-s' + si\" clipPathUnits=\"userSpaceOnUse\">\n									<rect\n										[attr.x]=\"slice.clipX0\"\n										y=\"-100000\"\n										[attr.width]=\"slice.clipX1 - slice.clipX0\"\n										height=\"200000\"\n									/>\n								</clipPath>\n								<text\n									[attr.x]=\"g.x\"\n									[attr.y]=\"g.y\"\n									[attr.transform]=\"slice.transform\"\n									[attr.clip-path]=\"'url(#' + g.clipIdPrefix + '-s' + si + ')'\"\n									[attr.fill]=\"g.fill\"\n									[attr.font-size]=\"g.fontSize\"\n									[attr.font-weight]=\"g.fontWeight\"\n									[attr.font-style]=\"g.fontStyle\"\n									[attr.font-family]=\"g.fontFamily\"\n								>\n									{{ g.char }}\n								</text>\n							}\n						</g>\n					}\n				}\n			</svg>\n		} @else if (pathWarp(); as warp) {\n			<svg\n				[attr.width]=\"warp.width\"\n				[attr.height]=\"warp.height\"\n				[attr.viewBox]=\"'0 0 ' + warp.width + ' ' + warp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				<defs>\n					@for (line of warp.pathLines; track line.pathId) {\n						<path [attr.id]=\"line.pathId\" [attr.d]=\"line.d\" fill=\"none\" />\n					}\n				</defs>\n				@for (line of warp.pathLines; track line.pathId) {\n					<text\n						[attr.font-size]=\"warp.baseFontSize\"\n						[attr.font-family]=\"warp.baseFontFamily\"\n						[attr.fill]=\"warp.baseColor\"\n					>\n						<textPath\n							[attr.href]=\"'#' + line.pathId\"\n							[attr.startOffset]=\"warp.startOffset\"\n							[attr.text-anchor]=\"warp.textAnchor\"\n						>\n							@for (seg of line.segments; track $index) {\n								<tspan\n									[attr.fill]=\"seg.style?.color ?? warp.baseColor\"\n									[attr.font-weight]=\"seg.style?.bold ? 700 : 400\"\n									[attr.font-style]=\"seg.style?.italic ? 'italic' : 'normal'\"\n								>\n									{{ seg.text }}\n								</tspan>\n							}\n						</textPath>\n					</text>\n				}\n			</svg>\n		} @else if (placeholderPrompt(); as prompt) {\n			<div class=\"pptx-ng-text\" [ngStyle]=\"prompt.style\">{{ prompt.text }}</div>\n		} @else if (hasText()) {\n			<pptx-slide-text-block\n				[paragraphs]=\"paragraphs()\"\n				[textStyle]=\"warpedTextStyle()\"\n				[elementId]=\"element().id\"\n				[subElementAnimStates]=\"subElementAnimStates()\"\n				[interactive]=\"true\"\n			/>\n		}\n	}\n</div>\n",
 			dependencies: [
 				{
 					kind: "directive",
@@ -97249,7 +97417,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ReflectionMirrorContentComponent,
 				SlideTextBlockComponent
 			],
-			template: "<div\n	class=\"pptx-ng-element pptx-ng-shape\"\n	[ngStyle]=\"shapeContainerStyle()\"\n	[style.pointer-events]=\"rootPointerEvents()\"\n	[attr.data-element-id]=\"elementIdAttr()\"\n	[attr.data-pptx-element]=\"elementMarked() ? 'true' : null\"\n>\n	<!-- A font-style emphasis effect (Bold Flash, Bold Reveal, Underline,\n	     Change Font Style/Size) overrides the runs' own inline\n	     bold/italic/underline/size, which plain CSS inheritance cannot\n	     reach (the runs declare those unconditionally). -->\n	<pptx-dynamic-style [css]=\"textStyleOverrideCss()\" />\n	<!-- Interaction-only hit target for a degenerate shape; see `hitTargetStyle`. -->\n	@if (hitTargetStyle(); as hit) {\n		<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n	}\n	<!-- Per-sub-path fill overlay: a multi-sub-path preset (`smileyFace`'s\n	     open eyes, `actionButtonBlank`'s darkened bevel well) or custom\n	     geometry whose sub-paths cannot share one CSS background-color. -->\n	@if (subpathFill(); as sf) {\n		<svg\n			class=\"pptx-ng-subpath-fill\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"subpathFillViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"position: absolute; inset: 0; width: 100%; height: 100%\"\n		>\n			@for (paint of sf.paints; track $index) {\n				<path [attr.d]=\"paint.d\" [attr.fill]=\"paint.fill\" stroke=\"none\" />\n			}\n		</svg>\n	}\n	@if (fillOverlay(); as ov) {\n		<div\n			class=\"pptx-ng-fill-overlay\"\n			aria-hidden=\"true\"\n			style=\"position: absolute; inset: 0; pointer-events: none\"\n			[style.background]=\"ov.color\"\n			[style.mix-blend-mode]=\"ov.blendMode\"\n		></div>\n	}\n	<!-- Real 3D extrusion side panels (`a:sp3d/@extrusionH`), on top of the\n	     flat box-shadow approximation `shapeContainerStyle` already applied. -->\n	<pptx-extrusion-3d-overlay [data]=\"extrusionData()\" />\n	<!-- Mirrored reflection sibling (`a:reflection`): cross-browser, unlike\n	     the `-webkit-box-reflect` this replaced (Firefox never implemented\n	     that property, so reflections were invisible there entirely). A full\n	     inert clone of the element's own content (fill, outline, text body),\n	     not just its resolved fill - see `ReflectionMirrorContentComponent`. -->\n	@if (reflection(); as refl) {\n		<div class=\"pptx-ng-reflection\" aria-hidden=\"true\" [ngStyle]=\"refl.wrapperStyle\">\n			<pptx-reflection-mirror-content [element]=\"element()\" [mediaDataUrls]=\"mediaDataUrls()\" />\n		</div>\n	}\n	<!-- Hollow frame hit target: an unfilled, textless shape is hit-tested\n	     on its outline only, so its interior lets clicks through. -->\n	@if (hollowHit(); as hit) {\n		<svg\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			<path\n				[attr.d]=\"hit.d\"\n				fill=\"none\"\n				stroke=\"transparent\"\n				[attr.stroke-width]=\"hit.strokeWidth\"\n				style=\"pointer-events: stroke\"\n			/>\n		</svg>\n	}\n	<!-- Stroked outline: a CSS border takes one flat colour, and cannot\n	     outline an open preset (`line`, `arc`) at all. -->\n	@if (gradientOutline(); as go) {\n		<svg\n			class=\"pptx-ng-gradient-outline\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			@if (go.paint; as paint) {\n				<defs>\n					@if (paint.kind === 'pattern') {\n						<pattern\n							[attr.id]=\"paint.id\"\n							[attr.width]=\"paint.width\"\n							[attr.height]=\"paint.height\"\n							patternUnits=\"userSpaceOnUse\"\n						>\n							<image\n								[attr.href]=\"paint.href\"\n								[attr.width]=\"paint.width\"\n								[attr.height]=\"paint.height\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'rectPath') {\n						<pattern [attr.id]=\"paint.id\" patternUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n							<image\n								[attr.href]=\"paint.href\"\n								x=\"0\"\n								y=\"0\"\n								width=\"1\"\n								height=\"1\"\n								preserveAspectRatio=\"none\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'radial') {\n						<radialGradient\n							[attr.id]=\"paint.id\"\n							[attr.cx]=\"paint.cx\"\n							[attr.cy]=\"paint.cy\"\n							[attr.r]=\"paint.r\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</radialGradient>\n					} @else {\n						<linearGradient\n							[attr.id]=\"paint.id\"\n							[attr.x1]=\"paint.x1\"\n							[attr.y1]=\"paint.y1\"\n							[attr.x2]=\"paint.x2\"\n							[attr.y2]=\"paint.y2\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</linearGradient>\n					}\n				</defs>\n			}\n			@for (strand of go.strands; track $index) {\n				<path\n					[attr.d]=\"go.d\"\n					fill=\"none\"\n					[attr.stroke]=\"go.stroke\"\n					[attr.stroke-width]=\"strand.strokeWidth\"\n					[attr.stroke-dasharray]=\"go.dashArray\"\n					[attr.stroke-linecap]=\"go.lineCap\"\n					[attr.stroke-linejoin]=\"go.lineJoin\"\n					[style.transform]=\"strand.offset !== 0 ? 'translate(0, ' + strand.offset + 'px)' : null\"\n				/>\n			}\n		</svg>\n	}\n	<!-- While this element is open in the inline text editor, its live text\n	     is drawn by that overlay instead (see `isBeingInlineEdited`);\n	     rendering it here too produced a duplicate, offset \"text shadow\"\n	     (issue #182). -->\n	@if (!isBeingInlineEdited()) {\n		@if (glyphWarp(); as gwarp) {\n			<svg\n				[attr.width]=\"gwarp.width\"\n				[attr.height]=\"gwarp.height\"\n				[attr.viewBox]=\"'0 0 ' + gwarp.width + ' ' + gwarp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				@for (g of gwarp.glyphs; track $index) {\n					<!-- The glyph's real outline, already warped point-by-point (see\n					     `buildWarpedGlyphOutlinePathD` in pptx-viewer-shared): exact,\n					     so no affine fit or slicing is needed. -->\n					@if (g.outlinePath) {\n						<path [attr.d]=\"g.outlinePath\" [attr.fill]=\"g.fill\" />\n					} @else if (!g.slices || g.slices.length <= 1) {\n						<text\n							[attr.x]=\"g.x\"\n							[attr.y]=\"g.y\"\n							[attr.transform]=\"g.transform\"\n							[attr.fill]=\"g.fill\"\n							[attr.font-size]=\"g.fontSize\"\n							[attr.font-weight]=\"g.fontWeight\"\n							[attr.font-style]=\"g.fontStyle\"\n							[attr.font-family]=\"g.fontFamily\"\n						>\n							{{ g.char }}\n						</text>\n					} @else {\n						<!-- A very wide glyph on a strongly-curved envelope: rendered\n						     as `slices.length` clipped copies, each with its own affine\n						     (see `chooseGlyphSliceCount` in pptx-viewer-shared), so the\n						     pieces tile across the glyph. Wrapped in a real <g> so it\n						     never matches an \"svg > text\" selector the single-slice\n						     case does. -->\n						<g [attr.data-glyph-slices]=\"g.slices.length\">\n							@for (slice of g.slices; track $index; let si = $index) {\n								<clipPath [attr.id]=\"g.clipIdPrefix + '-s' + si\" clipPathUnits=\"userSpaceOnUse\">\n									<rect\n										[attr.x]=\"slice.clipX0\"\n										y=\"-100000\"\n										[attr.width]=\"slice.clipX1 - slice.clipX0\"\n										height=\"200000\"\n									/>\n								</clipPath>\n								<text\n									[attr.x]=\"g.x\"\n									[attr.y]=\"g.y\"\n									[attr.transform]=\"slice.transform\"\n									[attr.clip-path]=\"'url(#' + g.clipIdPrefix + '-s' + si + ')'\"\n									[attr.fill]=\"g.fill\"\n									[attr.font-size]=\"g.fontSize\"\n									[attr.font-weight]=\"g.fontWeight\"\n									[attr.font-style]=\"g.fontStyle\"\n									[attr.font-family]=\"g.fontFamily\"\n								>\n									{{ g.char }}\n								</text>\n							}\n						</g>\n					}\n				}\n			</svg>\n		} @else if (pathWarp(); as warp) {\n			<svg\n				[attr.width]=\"warp.width\"\n				[attr.height]=\"warp.height\"\n				[attr.viewBox]=\"'0 0 ' + warp.width + ' ' + warp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				<defs>\n					@for (line of warp.pathLines; track line.pathId) {\n						<path [attr.id]=\"line.pathId\" [attr.d]=\"line.d\" fill=\"none\" />\n					}\n				</defs>\n				@for (line of warp.pathLines; track line.pathId) {\n					<text\n						[attr.font-size]=\"warp.baseFontSize\"\n						[attr.font-family]=\"warp.baseFontFamily\"\n						[attr.fill]=\"warp.baseColor\"\n					>\n						<textPath\n							[attr.href]=\"'#' + line.pathId\"\n							[attr.startOffset]=\"warp.startOffset\"\n							[attr.text-anchor]=\"warp.textAnchor\"\n						>\n							@for (seg of line.segments; track $index) {\n								<tspan\n									[attr.fill]=\"seg.style?.color ?? warp.baseColor\"\n									[attr.font-weight]=\"seg.style?.bold ? 700 : 400\"\n									[attr.font-style]=\"seg.style?.italic ? 'italic' : 'normal'\"\n								>\n									{{ seg.text }}\n								</tspan>\n							}\n						</textPath>\n					</text>\n				}\n			</svg>\n		} @else if (placeholderPrompt(); as prompt) {\n			<div class=\"pptx-ng-text\" [ngStyle]=\"prompt.style\">{{ prompt.text }}</div>\n		} @else if (hasText()) {\n			<pptx-slide-text-block\n				[paragraphs]=\"paragraphs()\"\n				[textStyle]=\"warpedTextStyle()\"\n				[elementId]=\"element().id\"\n				[subElementAnimStates]=\"subElementAnimStates()\"\n				[interactive]=\"true\"\n			/>\n		}\n	}\n</div>\n"
+			template: "<div\n	class=\"pptx-ng-element pptx-ng-shape\"\n	[ngStyle]=\"shapeContainerStyle()\"\n	[style.pointer-events]=\"rootPointerEvents()\"\n	[attr.data-element-id]=\"elementIdAttr()\"\n	[attr.data-pptx-element]=\"elementMarked() ? 'true' : null\"\n>\n	<!-- A font-style emphasis effect (Bold Flash, Bold Reveal, Underline,\n	     Change Font Style/Size) overrides the runs' own inline\n	     bold/italic/underline/size, which plain CSS inheritance cannot\n	     reach (the runs declare those unconditionally). -->\n	<pptx-dynamic-style [css]=\"textStyleOverrideCss()\" />\n	<!-- Interaction-only hit target for a degenerate shape; see `hitTargetStyle`. -->\n	@if (hitTargetStyle(); as hit) {\n		<div aria-hidden=\"true\" data-pptx-hit-target=\"true\" [ngStyle]=\"hit\"></div>\n	}\n	<!-- Per-sub-path fill overlay: a multi-sub-path preset (`smileyFace`'s\n	     open eyes, `actionButtonBlank`'s darkened bevel well) or custom\n	     geometry whose sub-paths cannot share one CSS background-color. -->\n	@if (subpathFill(); as sf) {\n		<svg\n			class=\"pptx-ng-subpath-fill\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"subpathFillViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"position: absolute; inset: 0; width: 100%; height: 100%\"\n		>\n			@for (paint of sf.paints; track $index) {\n				<path [attr.d]=\"paint.d\" [attr.fill]=\"paint.fill\" stroke=\"none\" />\n			}\n		</svg>\n	}\n	@if (fillOverlay(); as ov) {\n		<div\n			class=\"pptx-ng-fill-overlay\"\n			aria-hidden=\"true\"\n			style=\"position: absolute; inset: 0; pointer-events: none\"\n			[style.background]=\"ov.color\"\n			[style.mix-blend-mode]=\"ov.blendMode\"\n		></div>\n	}\n	<!-- Real 3D extrusion side panels (`a:sp3d/@extrusionH`), on top of the\n	     flat box-shadow approximation `shapeContainerStyle` already applied. -->\n	<pptx-extrusion-3d-overlay [data]=\"extrusionData()\" />\n	<!-- Mirrored reflection sibling (`a:reflection`): cross-browser, unlike\n	     the `-webkit-box-reflect` this replaced (Firefox never implemented\n	     that property, so reflections were invisible there entirely). A full\n	     inert clone of the element's own content (fill, outline, text body),\n	     not just its resolved fill - see `ReflectionMirrorContentComponent`. -->\n	@if (reflection(); as refl) {\n		<div class=\"pptx-ng-reflection\" aria-hidden=\"true\" [ngStyle]=\"refl.wrapperStyle\">\n			<pptx-reflection-mirror-content [element]=\"element()\" [mediaDataUrls]=\"mediaDataUrls()\" />\n		</div>\n	}\n	<!-- Hollow frame hit target: an unfilled, textless shape is hit-tested\n	     on its outline only, so its interior lets clicks through. -->\n	@if (hollowHit(); as hit) {\n		<svg\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				min-width: 1px;\n				min-height: 1px;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			<path\n				[attr.d]=\"hit.d\"\n				fill=\"none\"\n				stroke=\"transparent\"\n				[attr.stroke-width]=\"hit.strokeWidth\"\n				style=\"pointer-events: stroke\"\n			/>\n		</svg>\n	}\n	<!-- Stroked outline: a CSS border takes one flat colour, and cannot\n	     outline an open preset (`line`, `arc`) at all. -->\n	@if (gradientOutline(); as go) {\n		<svg\n			class=\"pptx-ng-gradient-outline\"\n			aria-hidden=\"true\"\n			[attr.viewBox]=\"outlineViewBox()\"\n			preserveAspectRatio=\"none\"\n			style=\"\n				position: absolute;\n				inset: 0;\n				width: 100%;\n				height: 100%;\n				min-width: 1px;\n				min-height: 1px;\n				overflow: visible;\n				pointer-events: none;\n			\"\n		>\n			@if (go.paint; as paint) {\n				<defs>\n					@if (paint.kind === 'pattern') {\n						<pattern\n							[attr.id]=\"paint.id\"\n							[attr.width]=\"paint.width\"\n							[attr.height]=\"paint.height\"\n							patternUnits=\"userSpaceOnUse\"\n						>\n							<image\n								[attr.href]=\"paint.href\"\n								[attr.width]=\"paint.width\"\n								[attr.height]=\"paint.height\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'rectPath') {\n						<pattern [attr.id]=\"paint.id\" patternUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n							<image\n								[attr.href]=\"paint.href\"\n								x=\"0\"\n								y=\"0\"\n								width=\"1\"\n								height=\"1\"\n								preserveAspectRatio=\"none\"\n							/>\n						</pattern>\n					} @else if (paint.kind === 'radial') {\n						<radialGradient\n							[attr.id]=\"paint.id\"\n							[attr.cx]=\"paint.cx\"\n							[attr.cy]=\"paint.cy\"\n							[attr.r]=\"paint.r\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</radialGradient>\n					} @else {\n						<linearGradient\n							[attr.id]=\"paint.id\"\n							[attr.x1]=\"paint.x1\"\n							[attr.y1]=\"paint.y1\"\n							[attr.x2]=\"paint.x2\"\n							[attr.y2]=\"paint.y2\"\n						>\n							@for (stop of paint.stops; track $index) {\n								<stop\n									[attr.offset]=\"stop.offset\"\n									[attr.stop-color]=\"stop.color\"\n									[attr.stop-opacity]=\"stop.opacity\"\n								/>\n							}\n						</linearGradient>\n					}\n				</defs>\n			}\n			@for (strand of go.strands; track $index) {\n				<path\n					[attr.d]=\"go.d\"\n					fill=\"none\"\n					[attr.stroke]=\"go.stroke\"\n					[attr.stroke-width]=\"strand.strokeWidth\"\n					[attr.stroke-dasharray]=\"go.dashArray\"\n					[attr.stroke-linecap]=\"go.lineCap\"\n					[attr.stroke-linejoin]=\"go.lineJoin\"\n					[style.transform]=\"strand.offset !== 0 ? 'translate(0, ' + strand.offset + 'px)' : null\"\n				/>\n			}\n		</svg>\n	}\n	<!-- While this element is open in the inline text editor, its live text\n	     is drawn by that overlay instead (see `isBeingInlineEdited`);\n	     rendering it here too produced a duplicate, offset \"text shadow\"\n	     (issue #182). -->\n	@if (!isBeingInlineEdited()) {\n		@if (glyphWarp(); as gwarp) {\n			<svg\n				[attr.width]=\"gwarp.width\"\n				[attr.height]=\"gwarp.height\"\n				[attr.viewBox]=\"'0 0 ' + gwarp.width + ' ' + gwarp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				@for (g of gwarp.glyphs; track $index) {\n					<!-- The glyph's real outline, already warped point-by-point (see\n					     `buildWarpedGlyphOutlinePathD` in pptx-viewer-shared): exact,\n					     so no affine fit or slicing is needed. -->\n					@if (g.outlinePath) {\n						<path [attr.d]=\"g.outlinePath\" [attr.fill]=\"g.fill\" />\n					} @else if (!g.slices || g.slices.length <= 1) {\n						<text\n							[attr.x]=\"g.x\"\n							[attr.y]=\"g.y\"\n							[attr.transform]=\"g.transform\"\n							[attr.fill]=\"g.fill\"\n							[attr.font-size]=\"g.fontSize\"\n							[attr.font-weight]=\"g.fontWeight\"\n							[attr.font-style]=\"g.fontStyle\"\n							[attr.font-family]=\"g.fontFamily\"\n						>\n							{{ g.char }}\n						</text>\n					} @else {\n						<!-- A very wide glyph on a strongly-curved envelope: rendered\n						     as `slices.length` clipped copies, each with its own affine\n						     (see `chooseGlyphSliceCount` in pptx-viewer-shared), so the\n						     pieces tile across the glyph. Wrapped in a real <g> so it\n						     never matches an \"svg > text\" selector the single-slice\n						     case does. -->\n						<g [attr.data-glyph-slices]=\"g.slices.length\">\n							@for (slice of g.slices; track $index; let si = $index) {\n								<clipPath [attr.id]=\"g.clipIdPrefix + '-s' + si\" clipPathUnits=\"userSpaceOnUse\">\n									<rect\n										[attr.x]=\"slice.clipX0\"\n										y=\"-100000\"\n										[attr.width]=\"slice.clipX1 - slice.clipX0\"\n										height=\"200000\"\n									/>\n								</clipPath>\n								<text\n									[attr.x]=\"g.x\"\n									[attr.y]=\"g.y\"\n									[attr.transform]=\"slice.transform\"\n									[attr.clip-path]=\"'url(#' + g.clipIdPrefix + '-s' + si + ')'\"\n									[attr.fill]=\"g.fill\"\n									[attr.font-size]=\"g.fontSize\"\n									[attr.font-weight]=\"g.fontWeight\"\n									[attr.font-style]=\"g.fontStyle\"\n									[attr.font-family]=\"g.fontFamily\"\n								>\n									{{ g.char }}\n								</text>\n							}\n						</g>\n					}\n				}\n			</svg>\n		} @else if (pathWarp(); as warp) {\n			<svg\n				[attr.width]=\"warp.width\"\n				[attr.height]=\"warp.height\"\n				[attr.viewBox]=\"'0 0 ' + warp.width + ' ' + warp.height\"\n				style=\"position: absolute; inset: 0; overflow: visible; pointer-events: none\"\n				aria-hidden=\"true\"\n			>\n				<defs>\n					@for (line of warp.pathLines; track line.pathId) {\n						<path [attr.id]=\"line.pathId\" [attr.d]=\"line.d\" fill=\"none\" />\n					}\n				</defs>\n				@for (line of warp.pathLines; track line.pathId) {\n					<text\n						[attr.font-size]=\"warp.baseFontSize\"\n						[attr.font-family]=\"warp.baseFontFamily\"\n						[attr.fill]=\"warp.baseColor\"\n					>\n						<textPath\n							[attr.href]=\"'#' + line.pathId\"\n							[attr.startOffset]=\"warp.startOffset\"\n							[attr.text-anchor]=\"warp.textAnchor\"\n						>\n							@for (seg of line.segments; track $index) {\n								<tspan\n									[attr.fill]=\"seg.style?.color ?? warp.baseColor\"\n									[attr.font-weight]=\"seg.style?.bold ? 700 : 400\"\n									[attr.font-style]=\"seg.style?.italic ? 'italic' : 'normal'\"\n								>\n									{{ seg.text }}\n								</tspan>\n							}\n						</textPath>\n					</text>\n				}\n			</svg>\n		} @else if (placeholderPrompt(); as prompt) {\n			<div class=\"pptx-ng-text\" [ngStyle]=\"prompt.style\">{{ prompt.text }}</div>\n		} @else if (hasText()) {\n			<pptx-slide-text-block\n				[paragraphs]=\"paragraphs()\"\n				[textStyle]=\"warpedTextStyle()\"\n				[elementId]=\"element().id\"\n				[subElementAnimStates]=\"subElementAnimStates()\"\n				[interactive]=\"true\"\n			/>\n		}\n	}\n</div>\n"
 		}]
 	}],
 	propDecorators: {
@@ -121394,7 +121562,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const PPTX_ANGULAR_VIEWER_VERSION = "4.24.0";
+const PPTX_ANGULAR_VIEWER_VERSION = "4.24.2";
 var AccountPageComponent = class AccountPageComponent {
 	constructor() {
 		this.accountAuth = input(void 0, ...ngDevMode ? [{ debugName: "accountAuth" }] : /* istanbul ignore next */ []);