pptx-angular-viewer 1.1.10 → 1.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptx-angular-viewer",
-	"version": "1.1.10",
+	"version": "1.1.12",
 	"description": "Angular PowerPoint viewer/editor component — depends on pptx-viewer-core. Angular counterpart of the React `pptx-viewer` and Vue `pptx-vue-viewer` packages.",
 	"keywords": [
 		"angular",
@@ -34,12 +34,14 @@
 		}
 	},
 	"dependencies": {
+		"html2canvas-pro": "^2.0.4",
+		"jspdf": "^4.2.1",
 		"tslib": "^2.8.1"
 	},
 	"peerDependencies": {
 		"@angular/common": "^22.0.1",
 		"@angular/core": "^22.0.1",
-		"pptx-viewer-core": "^1.1.10",
+		"pptx-viewer-core": "^1.1.12",
 		"rxjs": "^7.8.0"
 	},
 	"module": "fesm2022/pptx-angular-viewer.mjs",

package/pptx-angular-viewer.css

@@ -177,6 +177,115 @@
 	box-sizing: border-box;
 }
 
+.pptx-ng-canvas-stage.is-editable {
+	cursor: default;
+}
+
+.pptx-ng-canvas-stage.is-editable .pptx-ng-element {
+	cursor: pointer;
+}
+
+.pptx-ng-selection {
+	position: absolute;
+	box-sizing: border-box;
+	outline: 2px solid #4f86ff;
+	outline-offset: 1px;
+	background: rgba(79, 134, 255, 0.08);
+	pointer-events: none;
+	z-index: 10000;
+}
+
+.pptx-ng-handle {
+	position: absolute;
+	box-sizing: border-box;
+	background: #ffffff;
+	border: 1px solid #4f86ff;
+	border-radius: 2px;
+	pointer-events: auto;
+	touch-action: none;
+	z-index: 10001;
+}
+
+.pptx-ng-text-editor {
+	position: absolute;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 2px;
+	border: 2px solid #4f86ff;
+	background: rgba(255, 255, 255, 0.96);
+	color: #000;
+	font: inherit;
+	line-height: 1.2;
+	resize: none;
+	overflow: auto;
+	z-index: 10002;
+	white-space: pre-wrap;
+}
+
+.pptx-ng-marquee {
+	position: absolute;
+	box-sizing: border-box;
+	border: 1px dashed #4f86ff;
+	background: rgba(79, 134, 255, 0.12);
+	pointer-events: none;
+	z-index: 9999;
+}
+
+.pptx-ng-snap-guide {
+	position: absolute;
+	box-sizing: border-box;
+	border-left: 1px solid #f43f8e;
+	border-top: 1px solid #f43f8e;
+	pointer-events: none;
+	z-index: 10003;
+}
+
+.pptx-ng-rotate-handle {
+	position: absolute;
+	box-sizing: border-box;
+	background: #ffffff;
+	border: 1px solid #4f86ff;
+	border-radius: 50%;
+	cursor: grab;
+	pointer-events: auto;
+	touch-action: none;
+	z-index: 10001;
+}
+
+.pptx-ng-inspector-host {
+	flex: 0 0 240px;
+	width: 240px;
+	overflow: auto;
+	border-left: 1px solid rgba(0, 0, 0, 0.1);
+	background: rgba(0, 0, 0, 0.02);
+}
+
+.pptx-ng-slide-props {
+	padding: 0.75rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	font-size: 0.8125rem;
+}
+
+.pptx-ng-prop-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+}
+
+.pptx-ng-prop-row.pptx-ng-prop-col {
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.pptx-ng-prop-row textarea {
+	width: 100%;
+	resize: vertical;
+	font: inherit;
+}
+
 .pptx-ng-img {
 	width: 100%;
 	height: 100%;
@@ -188,6 +297,76 @@
 	margin: 0;
 }
 
+.pptx-ng-bullet {
+	white-space: pre;
+}
+
+.pptx-ng-link {
+	color: inherit;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+/* ── Toolbar actions + speaker notes ────────────────────────────────── */
+.pptx-ng-actions {
+	display: flex;
+	gap: 0.25rem;
+	align-items: center;
+}
+
+.pptx-ng-notes {
+	max-height: 30%;
+	overflow: auto;
+	margin: 0.5rem 1rem 1rem;
+	padding: 0.5rem 0.75rem;
+	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	background: rgba(0, 0, 0, 0.02);
+	font-size: 0.875rem;
+	line-height: 1.4;
+}
+
+.pptx-ng-notes-title {
+	margin: 0 0 0.25rem;
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	opacity: 0.6;
+}
+
+.pptx-ng-notes-body {
+	margin: 0;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+/* ── Tables ─────────────────────────────────────────────────────────── */
+.pptx-ng-table-wrapper {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.pptx-ng-table-wrapper > .pptx-ng-table {
+	width: 100%;
+	height: 100%;
+	border-collapse: collapse;
+	table-layout: fixed;
+}
+
+.pptx-ng-table-wrapper > .pptx-ng-table td {
+	overflow: hidden;
+	word-break: break-word;
+	vertical-align: middle;
+}
+
+/* ── Charts ─────────────────────────────────────────────────────────── */
+.pptx-ng-chart svg {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
 .pptx-ng-placeholder {
 	display: flex;
 	align-items: center;
@@ -199,3 +378,94 @@
 	font-size: 0.75rem;
 	background: rgba(99, 102, 241, 0.06);
 }
+
+/* ── Mobile / coarse-pointer ─────────────────────────────────────────── */
+/*
+ * On small screens and touch devices the toolbar buttons are too small to tap
+ * reliably and the toolbar overflows. Below we (1) grow the nav/zoom/action
+ * buttons to ≥44px touch targets, (2) let the toolbar and its action group
+ * wrap / scroll horizontally instead of overflowing, and (3) collapse the side
+ * panels so the slide canvas gets the available width. Swipe navigation is
+ * wired up in the component (touchstart/touchend on <main>) for non-editing
+ * mode; the large ‹ › buttons remain the always-available fallback.
+ */
+@media (max-width: 640px), (pointer: coarse) {
+	.pptx-ng-toolbar {
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		row-gap: 0.5rem;
+		padding: 0.5rem;
+	}
+
+	.pptx-ng-actions {
+		flex: 1 1 100%;
+		gap: 0.5rem;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: thin;
+		padding-bottom: 0.15rem;
+	}
+
+	.pptx-ng-actions button {
+		flex: 0 0 auto;
+	}
+
+	.pptx-ng-nav button,
+	.pptx-ng-zoom button,
+	.pptx-ng-actions button {
+		min-width: 44px;
+		min-height: 44px;
+		height: auto;
+		padding: 0 0.65rem;
+		font-size: 1.1rem;
+	}
+
+	/* Emphasise the prev/next controls — primary mobile navigation. */
+	.pptx-ng-nav button {
+		font-size: 1.5rem;
+		font-weight: 600;
+	}
+
+	/* Shrink the slide thumbnails rail to a slim horizontal strip. */
+	.pptx-ng-thumbnails {
+		flex-direction: row;
+		width: auto;
+		max-width: 100%;
+		overflow-x: auto;
+		overflow-y: hidden;
+		border-right: none;
+		border-bottom: 1px solid var(--pptx-border);
+		padding: 0.5rem;
+	}
+
+	.pptx-ng-thumbnails .pptx-ng-thumb {
+		flex: 0 0 4.5rem;
+		width: 4.5rem;
+	}
+
+	/* Stack body vertically so the canvas spans the full width. */
+	.pptx-ng-body {
+		flex-direction: column;
+	}
+
+	/* Slides panel (editor mode): keep it from dominating the viewport. */
+	.pptx-ng-body > pptx-slides-panel {
+		flex: 0 0 auto;
+		max-height: 30vh;
+	}
+
+	/* Property/inspector aside: full width, bounded height, below the canvas. */
+	.pptx-ng-inspector-host {
+		flex: 0 0 auto;
+		width: 100%;
+		max-height: 40vh;
+		border-left: none;
+		border-top: 1px solid var(--pptx-border);
+	}
+
+	/* Give the canvas the bulk of the vertical space. */
+	.pptx-ng-main {
+		flex: 1 1 auto;
+		min-height: 50vh;
+	}
+}