pptx-angular-viewer 1.17.0 → 1.17.1

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.17.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.17.0) - 2026-07-13
+
+### Bug Fixes
+
+- **build:** Restore compatibility after dependency updates (by @ChristopherVR) ([ddbfae6](https://github.com/ChristopherVR/pptx-viewer/commit/ddbfae687669b9e6c64fd3c3b16a592623b79c10))
+
+### Dependencies
+
+- **deps:** Update html2canvas-pro to 2.2.3 (by @dependabot[bot]) ([0fe015b](https://github.com/ChristopherVR/pptx-viewer/commit/0fe015b83722534f14864b2054ce6561b09386ca))
+- **deps:** Update angular compiler to 22.0.6 (by @dependabot[bot]) ([3990f82](https://github.com/ChristopherVR/pptx-viewer/commit/3990f821128012438f9e72337b293fce7110d0fc))
+- **deps:** Update fast-xml-parser to 5.10.0 (by @dependabot[bot]) ([6080273](https://github.com/ChristopherVR/pptx-viewer/commit/6080273f6a6f603d10d69a71d54faad1e6d9bf05))
+- **deps:** Update angular vite plugin to 2.6.3 (by @dependabot[bot]) ([f3c664e](https://github.com/ChristopherVR/pptx-viewer/commit/f3c664e28425ff0059073b3119f215e981f56d00))
+- **deps:** Update dompurify to 3.4.12 (by @dependabot[bot]) ([00a6ca4](https://github.com/ChristopherVR/pptx-viewer/commit/00a6ca49609d5a0e922a9e20447460b11ec690ba))
+- **deps:** Update minor and patch dependencies (by @dependabot[bot]) ([5cd81fb](https://github.com/ChristopherVR/pptx-viewer/commit/5cd81fb0c8708e53990ac4858660d0b6a4b17a7a))
+- **deps:** Update typescript to 7.0.2 (by @dependabot[bot]) ([0a7c1f1](https://github.com/ChristopherVR/pptx-viewer/commit/0a7c1f1f7f0ccdee9537f1e11177b6a39839d221))
+
 ## [1.16.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.16.1) - 2026-07-13
 
 ## [1.16.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.16.0) - 2026-07-11

package/fesm2022/pptx-angular-viewer.mjs

@@ -39841,7 +39841,7 @@ const translationsEn = {
     'pptx.collaboration.status.connecting': 'Connecting...',
     'pptx.collaboration.status.disconnected': 'Disconnected',
     'pptx.collaboration.status.error': 'Connection error',
-    'pptx.collaboration.statusAriaLabel': 'Collaboration: {{status}}. {{count}} user(s) connected.',
+    'pptx.collaboration.statusAriaLabel': 'Collaboration: {{status}}',
     'pptx.collaboration.userCount': '{{count}} user(s)',
     'pptx.collaboration.youLabel': '{{name}} (you)',
     'pptx.collaboration.usersConnected': '{{count}} user(s) connected',
@@ -53475,6 +53475,7 @@ class SmartArtPropertiesComponent {
 					@for (layout of layoutTypes; track layout) {
 						<button
 							type="button"
+							[attr.data-testid]="'smartart-layout-' + layout"
 							class="pptx-sa-props__layout"
 							[class.is-active]="activeLayout() === layout"
 							[disabled]="!canEdit()"
@@ -53492,6 +53493,8 @@ class SmartArtPropertiesComponent {
 				<span class="pptx-sa-props__label">{{ 'pptx.smartart.colorScheme' | translate }}</span>
 				<select
 					class="pptx-sa-props__select"
+					data-testid="smartart-color-scheme"
+					[attr.aria-label]="'pptx.smartart.colorScheme' | translate"
 					[disabled]="!canEdit()"
 					[value]="activeColorScheme()"
 					(change)="onColorScheme($event)"
@@ -53555,11 +53558,13 @@ class SmartArtPropertiesComponent {
 						<span class="pptx-sa-props__bullet">{{ isChild(node) ? '•' : i + 1 }}</span>
 						<input
 							type="text"
+							data-testid="smartart-node-text"
+							[attr.aria-label]="node.text"
 							class="pptx-sa-props__node-input"
 							[disabled]="!canEdit()"
 							[value]="node.text"
 							[attr.placeholder]="'pptx.smartArt.nodePlaceholder' | translate"
-							(change)="onNodeText($event, node.id)"
+							(input)="onNodeText($event, node.id)"
 							(keydown)="onNodeKeydown($event, node.id)"
 						/>
 						<div class="pptx-sa-props__node-actions">
@@ -53701,6 +53706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					@for (layout of layoutTypes; track layout) {
 						<button
 							type="button"
+							[attr.data-testid]="'smartart-layout-' + layout"
 							class="pptx-sa-props__layout"
 							[class.is-active]="activeLayout() === layout"
 							[disabled]="!canEdit()"
@@ -53718,6 +53724,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 				<span class="pptx-sa-props__label">{{ 'pptx.smartart.colorScheme' | translate }}</span>
 				<select
 					class="pptx-sa-props__select"
+					data-testid="smartart-color-scheme"
+					[attr.aria-label]="'pptx.smartart.colorScheme' | translate"
 					[disabled]="!canEdit()"
 					[value]="activeColorScheme()"
 					(change)="onColorScheme($event)"
@@ -53781,11 +53789,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 						<span class="pptx-sa-props__bullet">{{ isChild(node) ? '•' : i + 1 }}</span>
 						<input
 							type="text"
+							data-testid="smartart-node-text"
+							[attr.aria-label]="node.text"
 							class="pptx-sa-props__node-input"
 							[disabled]="!canEdit()"
 							[value]="node.text"
 							[attr.placeholder]="'pptx.smartArt.nodePlaceholder' | translate"
-							(change)="onNodeText($event, node.id)"
+							(input)="onNodeText($event, node.id)"
 							(keydown)="onNodeKeydown($event, node.id)"
 						/>
 						<div class="pptx-sa-props__node-actions">
@@ -56357,10 +56367,7 @@ class InspectorPanelComponent {
 			mid-edit: the caret stays put and the on-screen keyboard does not dismiss.
 			All commits happen on (change) (blur), reading event.target.value.
 		-->
-		<aside
-			[class]="inspectorClass()"
-			[attr.aria-label]="'pptx.inspector.elementProperties' | translate"
-		>
+		<aside [class]="inspectorClass()" [attr.aria-label]="'pptx.inspector.properties' | translate">
 			<!-- ── Transform: Position & Size ─────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
 				<h3 class="pptx-ng-inspector__heading">{{ 'pptx.inspector.transform' | translate }}</h3>
@@ -56735,10 +56742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 			mid-edit: the caret stays put and the on-screen keyboard does not dismiss.
 			All commits happen on (change) (blur), reading event.target.value.
 		-->
-		<aside
-			[class]="inspectorClass()"
-			[attr.aria-label]="'pptx.inspector.elementProperties' | translate"
-		>
+		<aside [class]="inspectorClass()" [attr.aria-label]="'pptx.inspector.properties' | translate">
 			<!-- ── Transform: Position & Size ─────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
 				<h3 class="pptx-ng-inspector__heading">{{ 'pptx.inspector.transform' | translate }}</h3>
@@ -57215,6 +57219,7 @@ class MobileBottomBarComponent {
             {
                 key: 'notes',
                 labelKey: 'pptx.notes.title',
+                ariaLabelKey: 'pptx.statusBar.toggleNotes',
                 // Note / document-text icon
                 svgPath: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M8 13h8 M8 17h5',
                 disabled: noSlides,
@@ -57233,7 +57238,7 @@ class MobileBottomBarComponent {
 					class="pptx-ng-mbar-btn"
 					[class.is-active]="action.active"
 					[attr.aria-pressed]="action.active ? true : null"
-					[attr.aria-label]="action.labelKey | translate"
+					[attr.aria-label]="action.ariaLabelKey ?? action.labelKey | translate"
 					[disabled]="action.disabled"
 					(click)="action.emit()"
 				>
@@ -57274,7 +57279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					class="pptx-ng-mbar-btn"
 					[class.is-active]="action.active"
 					[attr.aria-pressed]="action.active ? true : null"
-					[attr.aria-label]="action.labelKey | translate"
+					[attr.aria-label]="action.ariaLabelKey ?? action.labelKey | translate"
 					[disabled]="action.disabled"
 					(click)="action.emit()"
 				>
@@ -57725,7 +57730,6 @@ class MobileMenuSheetComponent {
 							[class.is-active]="row.active"
 							[class.is-danger]="row.danger"
 							[disabled]="row.disabled"
-							role="menuitem"
 							[attr.aria-label]="row.labelKey | translate"
 							(click)="onRowClick(row)"
 						>
@@ -57778,7 +57782,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 							[class.is-active]="row.active"
 							[class.is-danger]="row.danger"
 							[disabled]="row.disabled"
-							role="menuitem"
 							[attr.aria-label]="row.labelKey | translate"
 							(click)="onRowClick(row)"
 						>
@@ -68940,8 +68943,12 @@ class PresentationTransitionOverlayComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PresentationTransitionOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: PresentationTransitionOverlayComponent, isStandalone: true, selector: "pptx-presentation-transition-overlay", inputs: { outgoingSlide: { classPropertyName: "outgoingSlide", publicName: "outgoingSlide", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: true, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, durationMs: { classPropertyName: "durationMs", publicName: "durationMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, ngImport: i0, template: `
-		<div class="pptx-ng-transition-layer" [ngStyle]="layerStyle()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: PresentationTransitionOverlayComponent, isStandalone: true, selector: "pptx-presentation-transition-overlay", inputs: { outgoingSlide: { classPropertyName: "outgoingSlide", publicName: "outgoingSlide", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: true, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, durationMs: { classPropertyName: "durationMs", publicName: "durationMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, host: { attributes: { "data-pptx-transition-overlay": "" } }, ngImport: i0, template: `
+		<div
+			class="pptx-ng-transition-layer"
+			data-pptx-transition-layer="outgoing"
+			[ngStyle]="layerStyle()"
+		>
 			<div [ngStyle]="slideBoxStyle()">
 				<pptx-slide-canvas
 					[slide]="layerSlide()"
@@ -68956,8 +68963,12 @@ class PresentationTransitionOverlayComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PresentationTransitionOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-presentation-transition-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, SlideCanvasComponent], template: `
-		<div class="pptx-ng-transition-layer" [ngStyle]="layerStyle()">
+            args: [{ selector: 'pptx-presentation-transition-overlay', host: { 'data-pptx-transition-overlay': '' }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, SlideCanvasComponent], template: `
+		<div
+			class="pptx-ng-transition-layer"
+			data-pptx-transition-layer="outgoing"
+			[ngStyle]="layerStyle()"
+		>
 			<div [ngStyle]="slideBoxStyle()">
 				<pptx-slide-canvas
 					[slide]="layerSlide()"
@@ -73286,6 +73297,7 @@ class RibbonFileSectionComponent {
 			class="pptx-rb-pill"
 			[disabled]="slideCount() === 0"
 			(click)="save.emit()"
+			[attr.aria-label]="'pptx.file.saveAsPptx' | translate"
 			[title]="'pptx.ribbon.saveAsPptx' | translate"
 		>
 			{{ 'pptx.toolbar.save' | translate }}
@@ -73391,6 +73403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 			class="pptx-rb-pill"
 			[disabled]="slideCount() === 0"
 			(click)="save.emit()"
+			[attr.aria-label]="'pptx.file.saveAsPptx' | translate"
 			[title]="'pptx.ribbon.saveAsPptx' | translate"
 		>
 			{{ 'pptx.toolbar.save' | translate }}
@@ -77100,7 +77113,7 @@ class RibbonComponent {
 			/>
 
 			<!-- ── Tab bar ───────────────────────────────────────────────────── -->
-			<div class="flex items-center border-b border-border/60 px-1">
+			<div role="tablist" class="flex items-center border-b border-border/60 px-1">
 				<!-- Scrollable tab strip: on narrow widths the tabs scroll instead of
 				     clipping (mirrors React's max-md:overflow-x-auto scrollbar-none),
 				     while the Record/Share actions and collapse toggle stay pinned. -->
@@ -77108,6 +77121,8 @@ class RibbonComponent {
 					@for (t of tabs; track t.id) {
 						<button
 							type="button"
+							role="tab"
+							[attr.aria-selected]="activeTab() === t.id"
 							(click)="activeTab.set(t.id)"
 							class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
 							[ngClass]="
@@ -77135,29 +77150,39 @@ class RibbonComponent {
 							<span>{{ 'pptx.titleBar.record' | translate }}</span>
 						</button>
 					}
-					<button
-						type="button"
-						class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
-						[ngClass]="
-							collabConnected()
-								? 'bg-green-600 hover:bg-green-500'
-								: 'bg-primary hover:bg-primary/90'
-						"
-						[title]="
+					<div
+						role="status"
+						[attr.aria-label]="
 							collabConnected()
-								? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
+								? ('pptx.collaboration.statusAriaLabel'
+									| translate: { status: 'pptx.collaboration.status.connected' | translate })
+								: null
 						"
-						[attr.aria-label]="'pptx.toolbar.share' | translate"
-						(click)="share.emit()"
 					>
-						<svg lucideShare2 class="h-3.5 w-3.5"></svg>
-						<span>{{
-							collabConnected()
-								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
-						}}</span>
-					</button>
+						<button
+							type="button"
+							class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
+							[ngClass]="
+								collabConnected()
+									? 'bg-green-600 hover:bg-green-500'
+									: 'bg-primary hover:bg-primary/90'
+							"
+							[title]="
+								collabConnected()
+									? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							"
+							[attr.aria-label]="'pptx.toolbar.share' | translate"
+							(click)="share.emit()"
+						>
+							<svg lucideShare2 class="h-3.5 w-3.5"></svg>
+							<span>{{
+								collabConnected()
+									? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							}}</span>
+						</button>
+					</div>
 				</div>
 
 				<button
@@ -77406,7 +77431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 			/>
 
 			<!-- ── Tab bar ───────────────────────────────────────────────────── -->
-			<div class="flex items-center border-b border-border/60 px-1">
+			<div role="tablist" class="flex items-center border-b border-border/60 px-1">
 				<!-- Scrollable tab strip: on narrow widths the tabs scroll instead of
 				     clipping (mirrors React's max-md:overflow-x-auto scrollbar-none),
 				     while the Record/Share actions and collapse toggle stay pinned. -->
@@ -77414,6 +77439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					@for (t of tabs; track t.id) {
 						<button
 							type="button"
+							role="tab"
+							[attr.aria-selected]="activeTab() === t.id"
 							(click)="activeTab.set(t.id)"
 							class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
 							[ngClass]="
@@ -77441,29 +77468,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 							<span>{{ 'pptx.titleBar.record' | translate }}</span>
 						</button>
 					}
-					<button
-						type="button"
-						class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
-						[ngClass]="
-							collabConnected()
-								? 'bg-green-600 hover:bg-green-500'
-								: 'bg-primary hover:bg-primary/90'
-						"
-						[title]="
+					<div
+						role="status"
+						[attr.aria-label]="
 							collabConnected()
-								? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
+								? ('pptx.collaboration.statusAriaLabel'
+									| translate: { status: 'pptx.collaboration.status.connected' | translate })
+								: null
 						"
-						[attr.aria-label]="'pptx.toolbar.share' | translate"
-						(click)="share.emit()"
 					>
-						<svg lucideShare2 class="h-3.5 w-3.5"></svg>
-						<span>{{
-							collabConnected()
-								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
-						}}</span>
-					</button>
+						<button
+							type="button"
+							class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
+							[ngClass]="
+								collabConnected()
+									? 'bg-green-600 hover:bg-green-500'
+									: 'bg-primary hover:bg-primary/90'
+							"
+							[title]="
+								collabConnected()
+									? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							"
+							[attr.aria-label]="'pptx.toolbar.share' | translate"
+							(click)="share.emit()"
+						>
+							<svg lucideShare2 class="h-3.5 w-3.5"></svg>
+							<span>{{
+								collabConnected()
+									? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							}}</span>
+						</button>
+					</div>
 				</div>
 
 				<button
@@ -85255,9 +85292,9 @@ class ViewerInspectorPanelService {
             case 'selection':
                 return 'pptx.selectionPane.title';
             case 'element':
-                return 'pptx.viewer.elementProperties';
+                return 'pptx.inspector.properties';
             case 'slide':
-                return 'pptx.viewer.slideProperties';
+                return 'pptx.inspector.properties';
             default:
                 return '';
         }
@@ -86925,6 +86962,7 @@ class PowerPointViewerComponent {
 					-->
 					@if (inspectorPanel.visibleInspectorKind(); as kind) {
 						<aside
+							data-pptx-inspector
 							class="pptx-ng-inspector-host"
 							[attr.aria-label]="inspectorPanel.inspectorLabel() | translate"
 							[style.transform]="
@@ -87602,6 +87640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					-->
 					@if (inspectorPanel.visibleInspectorKind(); as kind) {
 						<aside
+							data-pptx-inspector
 							class="pptx-ng-inspector-host"
 							[attr.aria-label]="inspectorPanel.inspectorLabel() | translate"
 							[style.transform]="