pptx-angular-viewer 1.5.2 → 1.6.0

package/CHANGELOG.md

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

package/README.md

@@ -143,17 +143,41 @@ async save() {
 
 ### Outputs
 
-| Output              | Payload      | Description                                        |
-| ------------------- | ------------ | -------------------------------------------------- |
-| `activeSlideChange` | `number`     | Emits the active slide index on navigation.        |
-| `dirtyChange`       | `boolean`    | Emits `true`/`false` when the dirty state changes. |
-| `contentChange`     | `Uint8Array` | Emits updated bytes after any editing change.      |
+| Output              | Payload      | Description                                                          |
+| ------------------- | ------------ | -------------------------------------------------------------------- |
+| `activeSlideChange` | `number`     | Emits the active slide index on navigation.                          |
+| `dirtyChange`       | `boolean`    | Emits `true`/`false` when the dirty state changes.                   |
+| `contentChange`     | `Uint8Array` | Emits updated bytes after any editing change.                        |
+| `modeChange`        | `string`     | Emits the new mode (`'preview'`, `'edit'`, `'present'`, `'master'`). |
+| `zoomChange`        | `number`     | Emits the new zoom level (1 = 100%).                                 |
+| `selectionChange`   | `string[]`   | Emits the selected element IDs when selection changes.               |
+| `slideCountChange`  | `number`     | Emits the total slide count when slides change.                      |
 
 ### Methods
 
-| Method         | Returns               | Description                                    |
-| -------------- | --------------------- | ---------------------------------------------- |
-| `getContent()` | `Promise<Uint8Array>` | Serialise the current presentation to `.pptx`. |
+| Method                    | Returns               | Description                                    |
+| ------------------------- | --------------------- | ---------------------------------------------- |
+| `getContent()`            | `Promise<Uint8Array>` | Serialise the current presentation to `.pptx`. |
+| `goTo(index)`             | `void`                | Navigate to a slide by zero-based index.       |
+| `goPrev()`                | `void`                | Navigate to the previous slide.                |
+| `goNext()`                | `void`                | Navigate to the next slide.                    |
+| `undo()`                  | `void`                | Undo the last editing action.                  |
+| `redo()`                  | `void`                | Redo the last undone action.                   |
+| `canUndo()`               | `boolean`             | Whether an undo action is available.           |
+| `canRedo()`               | `boolean`             | Whether a redo action is available.            |
+| `getZoom()`               | `number`              | Get the current zoom level.                    |
+| `setZoom(level)`          | `void`                | Set the zoom level (clamped to 0.2 - 3.0).     |
+| `zoomIn()`                | `void`                | Zoom in by one step.                           |
+| `zoomOut()`               | `void`                | Zoom out by one step.                          |
+| `zoomReset()`             | `void`                | Reset zoom to 100%.                            |
+| `getMode()`               | `string`              | Get the current viewer mode.                   |
+| `setMode(mode)`           | `void`                | Switch mode programmatically.                  |
+| `getActiveSlideIndex()`   | `number`              | Get the zero-based active slide index.         |
+| `getSlideCount()`         | `number`              | Get the total number of slides.                |
+| `isDirty()`               | `boolean`             | Whether the document has unsaved changes.      |
+| `getSelectedElementIds()` | `string[]`            | Get IDs of currently selected elements.        |
+| `selectElements(ids)`     | `void`                | Programmatically select elements by ID.        |
+| `clearSelection()`        | `void`                | Clear the current selection.                   |
 
 ### Exported components & helpers
 
@@ -180,18 +204,12 @@ Unlike React/Vue, `translationsEn`, `keyToLabel`, and the `TranslationKey` type
 
 ## Limitations
 
-The Angular package has reached functional parity with the React package: all 11
-element types render; the full Tailwind 4 Office ribbon is wired; editing
-(including slide master/layout template editing), presentation, export,
-collaboration, comments, and mobile chrome all work. The remaining items are
-polish/cosmetic, not behavioural gaps:
-
-- **Pixel-level cosmetic differences** - Some toolbar controls are not pixel-
-  identical to their React counterparts (spacing, split-button affordances,
-  dropdown chrome).
 - **3D models need the Three.js peer** - GLB/GLTF models render interactively when
   the optional `three` peer dependency is installed, and fall back to their poster
-  image otherwise (the same as the React package).
+  image otherwise.
+- **CSS-rendering approximations** - A handful of effects (`backdrop-filter`, path
+  gradients) are approximated on screen, and a few effects flatten in raster
+  export; see the root README's Limitations for details.
 
 The `pptx-viewer-core` engine parses all element data, so you can access it from
 the model even where the UI does not expose it yet.

package/fesm2022/pptx-angular-viewer.mjs

@@ -78861,6 +78861,14 @@ class PowerPointViewerComponent {
     contentChange = output();
     /** Fired when the user edits document properties in the Info dialog. */
     propertiesChange = output();
+    /** Fired when the viewer mode changes (preview, edit, present, master). */
+    modeChange = output();
+    /** Fired when the zoom level changes. */
+    zoomChange = output();
+    /** Fired when element selection changes. */
+    selectionChange = output();
+    /** Fired when the total slide count changes (slide added/deleted). */
+    slideCountChange = output();
     /**
      * Fired when a collaboration/broadcast session starts, with the connected
      * config (role `collaborator` for Share, `owner` for Broadcast). Lets the
@@ -79069,6 +79077,29 @@ class PowerPointViewerComponent {
         effect(() => {
             this.dirtyChange.emit(this.editor.dirty());
         });
+        // Emit mode changes.
+        effect(() => {
+            const mode = this.presentationMode.presenting()
+                ? 'present'
+                : this.editor.editTemplateMode()
+                    ? 'master'
+                    : this.canEdit()
+                        ? 'edit'
+                        : 'preview';
+            this.modeChange.emit(mode);
+        });
+        // Emit zoom changes.
+        effect(() => {
+            this.zoomChange.emit(this.zoomSvc.zoom());
+        });
+        // Emit selection changes.
+        effect(() => {
+            this.selectionChange.emit([...this.editor.selectedIds()]);
+        });
+        // Emit slide count changes.
+        effect(() => {
+            this.slideCountChange.emit(this.slideCount());
+        });
         // Keep the active index in range when the deck shrinks (slide deleted).
         effect(() => {
             const count = this.displaySlides().length;
@@ -79278,6 +79309,162 @@ class PowerPointViewerComponent {
     goNext() {
         this.goTo(this.activeSlideIndex() + 1);
     }
+    /** Undo the last editing action. No-op when nothing to undo. */
+    undo() {
+        this.editor.undo();
+    }
+    /** Redo the last undone action. No-op when nothing to redo. */
+    redo() {
+        this.editor.redo();
+    }
+    /** Whether an undo action is available. */
+    canUndo() {
+        return this.editor.canUndo();
+    }
+    /** Whether a redo action is available. */
+    canRedo() {
+        return this.editor.canRedo();
+    }
+    /** Get the current zoom level (1 = 100%). */
+    getZoom() {
+        return this.zoomSvc.zoom();
+    }
+    /** Set the zoom level (clamped to min/max bounds). */
+    setZoom(level) {
+        this.zoomSvc.zoom.set(Math.min(Math.max(level, 0.2), 3));
+    }
+    /** Zoom in by one step. */
+    zoomIn() {
+        this.zoomSvc.zoomIn();
+    }
+    /** Zoom out by one step. */
+    zoomOut() {
+        this.zoomSvc.zoomOut();
+    }
+    /** Reset zoom to 100%. */
+    zoomReset() {
+        this.zoomSvc.zoomReset();
+    }
+    /** Get the current viewer mode. */
+    getMode() {
+        if (this.presentationMode.presenting()) {
+            return 'present';
+        }
+        if (this.editor.editTemplateMode()) {
+            return 'master';
+        }
+        return this.canEdit() ? 'edit' : 'preview';
+    }
+    /** Switch the viewer mode (e.g. 'edit', 'preview', 'present'). */
+    setMode(mode) {
+        if (mode === 'present') {
+            this.presentationMode.present();
+        }
+        else if (mode === 'master') {
+            this.editor.setEditTemplateMode(true);
+        }
+        else {
+            this.presentationMode.presenting.set(false);
+            this.editor.setEditTemplateMode(false);
+        }
+    }
+    /** Get the zero-based active slide index. */
+    getActiveSlideIndex() {
+        return this.activeSlideIndex();
+    }
+    /** Get the total number of slides. */
+    getSlideCount() {
+        return this.slideCount();
+    }
+    /** Whether the document has unsaved changes. */
+    isDirty() {
+        return this.editor.dirty();
+    }
+    /** Get the IDs of currently selected elements. */
+    getSelectedElementIds() {
+        return [...this.editor.selectedIds()];
+    }
+    /** Programmatically select elements by their IDs. */
+    selectElements(ids) {
+        this.editor.selectedIds.set(ids);
+    }
+    /** Clear the current selection. */
+    clearSelection() {
+        this.editor.selectedIds.set([]);
+    }
+    /** Set the active slide by zero-based index (alias of goTo). */
+    setActiveSlideIndex(index) {
+        this.goTo(index);
+    }
+    /** Get a read-only reference to all slides. */
+    getSlides() {
+        return this.displaySlides();
+    }
+    /** Get a single slide by zero-based index. */
+    getSlide(index) {
+        return this.displaySlides()[index];
+    }
+    /** Get the currently active slide. */
+    getActiveSlide() {
+        return this.displaySlides()[this.activeSlideIndex()];
+    }
+    /** Add a blank slide after the given index (or after the active slide). */
+    addSlide(afterIndex) {
+        const idx = afterIndex ?? this.activeSlideIndex();
+        this.editor.addSlide(idx);
+    }
+    /** Delete slides at the given zero-based indexes. */
+    deleteSlides(indexes) {
+        for (const i of [...indexes].sort((a, b) => b - a)) {
+            this.editor.deleteSlide(i);
+        }
+    }
+    /** Duplicate slides at the given zero-based indexes. */
+    duplicateSlides(indexes) {
+        for (const i of indexes) {
+            this.editor.duplicateSlide(i);
+        }
+    }
+    /** Move a slide from one position to another. */
+    moveSlide(fromIndex, toIndex) {
+        this.editor.moveSlide(fromIndex, toIndex);
+    }
+    /** Toggle the hidden flag on slides at the given indexes. */
+    toggleHideSlides(indexes) {
+        for (const i of indexes) {
+            const s = this.displaySlides()[i];
+            if (s) {
+                this.editor.updateSlide(i, { hidden: !s.hidden });
+            }
+        }
+    }
+    /** Get elements on a slide (defaults to active slide). */
+    getElements(slideIndex) {
+        const idx = slideIndex ?? this.activeSlideIndex();
+        const s = this.displaySlides()[idx];
+        return s?.elements ?? [];
+    }
+    /** Get a single element by ID. */
+    getElementById(elementId, slideIndex) {
+        const idx = slideIndex ?? this.activeSlideIndex();
+        const s = this.displaySlides()[idx];
+        return s?.elements.find((e) => e.id === elementId);
+    }
+    /** Update one or more properties of an element by ID. */
+    updateElement(elementId, updates) {
+        this.editor.updateElement(this.activeSlideIndex(), elementId, updates);
+    }
+    /** Delete elements by their IDs from the active slide. */
+    deleteElements(elementIds) {
+        this.editor.selectedIds.set(elementIds);
+        this.editor.deleteSelected(this.activeSlideIndex());
+    }
+    /** Duplicate an element. Returns the new element's ID. */
+    duplicateElement(elementId) {
+        this.editor.selectedIds.set([elementId]);
+        this.editor.duplicateSelected(this.activeSlideIndex());
+        return this.editor.selectedIds()[0];
+    }
     /** Toggle the Find & Replace panel from the title-bar search button. */
     toggleFindReplace() {
         if (this.findReplace.showFindReplace()) {
@@ -79371,7 +79558,7 @@ class PowerPointViewerComponent {
         return (this.mainEl()?.nativeElement.querySelector('.pptx-ng-canvas-stage') ?? undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PowerPointViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PowerPointViewerComponent, isStandalone: true, selector: "pptx-viewer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, collaboration: { classPropertyName: "collaboration", publicName: "collaboration", isSignal: true, isRequired: false, transformFunction: null }, authorName: { classPropertyName: "authorName", publicName: "authorName", isSignal: true, isRequired: false, transformFunction: null }, shareDefaults: { classPropertyName: "shareDefaults", publicName: "shareDefaults", isSignal: true, isRequired: false, transformFunction: null }, onOpenFile: { classPropertyName: "onOpenFile", publicName: "onOpenFile", isSignal: true, isRequired: false, transformFunction: null }, smartArt3D: { classPropertyName: "smartArt3D", publicName: "smartArt3D", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSlideChange: "activeSlideChange", dirtyChange: "dirtyChange", contentChange: "contentChange", propertiesChange: "propertiesChange", startCollaboration: "startCollaboration", stopCollaboration: "stopCollaboration" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PowerPointViewerComponent, isStandalone: true, selector: "pptx-viewer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, filePath: { classPropertyName: "filePath", publicName: "filePath", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, collaboration: { classPropertyName: "collaboration", publicName: "collaboration", isSignal: true, isRequired: false, transformFunction: null }, authorName: { classPropertyName: "authorName", publicName: "authorName", isSignal: true, isRequired: false, transformFunction: null }, shareDefaults: { classPropertyName: "shareDefaults", publicName: "shareDefaults", isSignal: true, isRequired: false, transformFunction: null }, onOpenFile: { classPropertyName: "onOpenFile", publicName: "onOpenFile", isSignal: true, isRequired: false, transformFunction: null }, smartArt3D: { classPropertyName: "smartArt3D", publicName: "smartArt3D", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSlideChange: "activeSlideChange", dirtyChange: "dirtyChange", contentChange: "contentChange", propertiesChange: "propertiesChange", modeChange: "modeChange", zoomChange: "zoomChange", selectionChange: "selectionChange", slideCountChange: "slideCountChange", startCollaboration: "startCollaboration", stopCollaboration: "stopCollaboration" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, providers: [
             LoadContentService,
             ExportService,
             EditorStateService,
@@ -80659,7 +80846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 		</div>
 	`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], filePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePath", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], collaboration: [{ type: i0.Input, args: [{ isSignal: true, alias: "collaboration", required: false }] }], authorName: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorName", required: false }] }], shareDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareDefaults", required: false }] }], onOpenFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "onOpenFile", required: false }] }], smartArt3D: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartArt3D", required: false }] }], activeSlideChange: [{ type: i0.Output, args: ["activeSlideChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], propertiesChange: [{ type: i0.Output, args: ["propertiesChange"] }], startCollaboration: [{ type: i0.Output, args: ["startCollaboration"] }], stopCollaboration: [{ type: i0.Output, args: ["stopCollaboration"] }], extraDialogs: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ViewerExtraDialogsComponent), { isSignal: true }] }], mainEl: [{ type: i0.ViewChild, args: ['mainEl', { isSignal: true }] }], onKeyDown: [{
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], filePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "filePath", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], collaboration: [{ type: i0.Input, args: [{ isSignal: true, alias: "collaboration", required: false }] }], authorName: [{ type: i0.Input, args: [{ isSignal: true, alias: "authorName", required: false }] }], shareDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareDefaults", required: false }] }], onOpenFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "onOpenFile", required: false }] }], smartArt3D: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartArt3D", required: false }] }], activeSlideChange: [{ type: i0.Output, args: ["activeSlideChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }], propertiesChange: [{ type: i0.Output, args: ["propertiesChange"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], zoomChange: [{ type: i0.Output, args: ["zoomChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], slideCountChange: [{ type: i0.Output, args: ["slideCountChange"] }], startCollaboration: [{ type: i0.Output, args: ["startCollaboration"] }], stopCollaboration: [{ type: i0.Output, args: ["stopCollaboration"] }], extraDialogs: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ViewerExtraDialogsComponent), { isSignal: true }] }], mainEl: [{ type: i0.ViewChild, args: ['mainEl', { isSignal: true }] }], onKeyDown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });