pptx-angular-viewer 0.1.0

package/fesm2022/pptx-angular-viewer.mjs

@@ -0,0 +1,1358 @@
+import { NgStyle, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, computed, inject, DestroyRef, Injectable, input, ChangeDetectionStrategy, Component, output, effect } from '@angular/core';
+import { guideEmuToPx, PptxHandler, EncryptedFileError, hasShapeProperties, hasTextProperties } from 'pptx-viewer-core';
+
+/**
+ * Default dark-theme color values.
+ *
+ * These correspond to the built-in dark UI of the PowerPoint viewer and
+ * use Tailwind's gray palette as the neutral scale with indigo as the
+ * primary accent.
+ */
+const defaultThemeColors = {
+    background: '#030712', // gray-950
+    foreground: '#f3f4f6', // gray-100
+    card: '#111827', // gray-900
+    cardForeground: '#f3f4f6', // gray-100
+    popover: '#111827', // gray-900
+    popoverForeground: '#f3f4f6', // gray-100
+    primary: '#6366f1', // indigo-500
+    primaryForeground: '#ffffff', // white
+    secondary: '#1f2937', // gray-800
+    secondaryForeground: '#f3f4f6', // gray-100
+    muted: '#1f2937', // gray-800
+    mutedForeground: '#9ca3af', // gray-400
+    accent: '#1f2937', // gray-800
+    accentForeground: '#f3f4f6', // gray-100
+    destructive: '#ef4444', // red-500
+    destructiveForeground: '#ffffff', // white
+    border: '#374151', // gray-700
+    input: '#374151', // gray-700
+    ring: '#6366f1', // indigo-500
+};
+/** Default border-radius. */
+const defaultRadius = '0.5rem';
+
+/**
+ * Map from camelCase ViewerThemeColors keys to kebab-case CSS custom
+ * property suffixes (the part after `--pptx-`).
+ */
+const COLOR_KEY_TO_CSS = {
+    background: 'background',
+    foreground: 'foreground',
+    card: 'card',
+    cardForeground: 'card-foreground',
+    popover: 'popover',
+    popoverForeground: 'popover-foreground',
+    primary: 'primary',
+    primaryForeground: 'primary-foreground',
+    secondary: 'secondary',
+    secondaryForeground: 'secondary-foreground',
+    muted: 'muted',
+    mutedForeground: 'muted-foreground',
+    accent: 'accent',
+    accentForeground: 'accent-foreground',
+    destructive: 'destructive',
+    destructiveForeground: 'destructive-foreground',
+    border: 'border',
+    input: 'input',
+    ring: 'ring',
+};
+/**
+ * Convert a `ViewerTheme` into a flat `Record<string, string>` of CSS
+ * custom properties (including the `--` prefix) ready to be spread onto
+ * a `style` attribute.
+ *
+ * Only properties that differ from the built-in defaults are emitted when
+ * `omitDefaults` is true (the default).
+ */
+function themeToCssVars(theme, omitDefaults = false) {
+    const vars = {};
+    if (!theme) {
+        return vars;
+    }
+    // ── Colors ───────────────────────────────────────────────────────
+    const colors = theme.colors;
+    if (colors) {
+        for (const [key, cssSuffix] of Object.entries(COLOR_KEY_TO_CSS)) {
+            const value = colors[key];
+            if (value === undefined) {
+                continue;
+            }
+            if (omitDefaults && value === defaultThemeColors[key]) {
+                continue;
+            }
+            vars[`--pptx-${cssSuffix}`] = value;
+        }
+    }
+    // ── Radius ───────────────────────────────────────────────────────
+    if (theme.radius !== undefined) {
+        if (!omitDefaults || theme.radius !== defaultRadius) {
+            vars['--pptx-radius'] = theme.radius;
+        }
+    }
+    // ── Escape-hatch custom properties ───────────────────────────────
+    if (theme.cssVars) {
+        for (const [key, value] of Object.entries(theme.cssVars)) {
+            vars[key] = value;
+        }
+    }
+    return vars;
+}
+/**
+ * Build the complete set of CSS custom properties with all defaults.
+ * Useful for generating a full fallback stylesheet.
+ */
+function defaultCssVars() {
+    const vars = {};
+    for (const [key, cssSuffix] of Object.entries(COLOR_KEY_TO_CSS)) {
+        vars[`--pptx-${cssSuffix}`] = defaultThemeColors[key];
+    }
+    vars['--pptx-radius'] = defaultRadius;
+    return vars;
+}
+
+/**
+ * Recursively walks an element tree and pushes every media element
+ * into the supplied collector array.
+ */
+function collectMediaElements(elements, collector) {
+    for (const element of elements) {
+        if (element.type === 'media') {
+            collector.push(element);
+            continue;
+        }
+        if (element.type === 'group' && element.children?.length) {
+            collectMediaElements(element.children, collector);
+        }
+    }
+}
+/**
+ * Collect all unique image archive paths across all slides that need
+ * to be resolved to displayable URLs (Blob URLs).
+ *
+ * This covers:
+ * - Picture elements (`imageData`, `svgData`)
+ * - Media poster frames (`posterFrameData`)
+ *
+ * Returns the set of unique archive paths, plus a list of element/field
+ * references that need to be updated once each path resolves.
+ */
+function collectImagePaths(slides) {
+    const paths = new Set();
+    const refs = [];
+    const walkElements = (elements) => {
+        for (const el of elements) {
+            if (el.type === 'picture' || el.type === 'image') {
+                const pic = el;
+                if (pic.imagePath && !pic.imageData && !isExternalUrl(pic.imagePath)) {
+                    paths.add(pic.imagePath);
+                    refs.push({ element: el, field: 'imageData', path: pic.imagePath });
+                }
+                if (pic.svgPath && !pic.svgData && !isExternalUrl(pic.svgPath)) {
+                    paths.add(pic.svgPath);
+                    refs.push({ element: el, field: 'svgData', path: pic.svgPath });
+                }
+            }
+            if (el.type === 'media') {
+                const media = el;
+                if (media.posterFramePath &&
+                    !media.posterFrameData &&
+                    !isExternalUrl(media.posterFramePath)) {
+                    paths.add(media.posterFramePath);
+                    refs.push({
+                        element: el,
+                        field: 'posterFrameData',
+                        path: media.posterFramePath,
+                    });
+                }
+            }
+            if (el.type === 'group' && el.children?.length) {
+                walkElements(el.children);
+            }
+        }
+    };
+    for (const slide of slides) {
+        walkElements(slide.elements);
+    }
+    return { paths, refs };
+}
+function isExternalUrl(path) {
+    return (path.startsWith('http://') ||
+        path.startsWith('https://') ||
+        path.startsWith('data:') ||
+        path.startsWith('blob:'));
+}
+/**
+ * Converts raw EMU-based drawing guides from the parsed presentation
+ * and the first slide into pixel-based `GuideEntry` objects.
+ */
+function buildInitialGuides(presentationGuides, firstSlideGuides) {
+    const guides = [];
+    if (presentationGuides) {
+        for (const g of presentationGuides) {
+            guides.push({
+                id: g.id,
+                axis: g.orientation === 'horz' ? 'h' : 'v',
+                position: guideEmuToPx(g.positionEmu),
+            });
+        }
+    }
+    if (firstSlideGuides) {
+        for (const g of firstSlideGuides) {
+            guides.push({
+                id: g.id,
+                axis: g.orientation === 'horz' ? 'h' : 'v',
+                position: guideEmuToPx(g.positionEmu),
+            });
+        }
+    }
+    return guides;
+}
+
+/**
+ * Framework-agnostic public types shared by the viewer bindings.
+ *
+ * These were duplicated in the React (`types-ui.ts`) and Vue (`viewer/types.ts`)
+ * packages; this is the canonical copy. Each binding layers its own
+ * framework-specific prop/event/handle types on top of these.
+ */
+
+/**
+ * Scalar viewer defaults shared by the UI bindings.
+ *
+ * Subset of the React package's `constants/scalar.ts` that the Vue and Angular
+ * viewers also need. Additional constant groups (toolbar presets, shape styles,
+ * transitions, etc.) remain per-binding until those features are ported.
+ */
+/** Default slide canvas width in pixels when the file declares none. */
+const DEFAULT_CANVAS_WIDTH = 1280;
+/** Default slide canvas height in pixels when the file declares none. */
+const DEFAULT_CANVAS_HEIGHT = 720;
+/** Fallback text colour. */
+const DEFAULT_TEXT_COLOR = '#111827';
+/** Fallback shape fill colour. */
+const DEFAULT_FILL_COLOR = '#3b82f6';
+/** Fallback shape stroke colour. */
+const DEFAULT_STROKE_COLOR = '#1f2937';
+
+/**
+ * pptx-viewer-shared — framework-agnostic viewer logic shared by the
+ * React (`pptx-viewer`), Vue (`pptx-vue-viewer`), and Angular
+ * (`pptx-angular-viewer`) bindings.
+ *
+ * Everything exported here is pure TypeScript (no framework imports), so each
+ * UI binding consumes one copy instead of duplicating it.
+ *
+ * Current surface:
+ *   - theme:     ViewerTheme types, default palette, CSS-variable helpers.
+ *   - loader:    load-pipeline helpers (media/image collection, guides).
+ *   - types:     CanvasSize, CollaborationConfig, CollaborationRole.
+ *   - constants: scalar viewer defaults (canvas size, fallback colours).
+ *
+ * Roadmap (see packages/angular/PORTING.md and packages/vue/PORTING.md):
+ *   color resolution, geometry/clip-paths, connector routing, animation
+ *   timeline engine, table-merge math, morph matching, export data helpers.
+ */
+
+/**
+ * Internal re-export of `pptx-viewer-shared`.
+ *
+ * `pptx-viewer-shared` is an INTERNAL, non-published package (`"private": true`).
+ * Its source is vendored into `./shared-src` at build time by
+ * `scripts/inline-shared.mjs` (a generated, git-ignored directory), so the
+ * shared code compiles as part of THIS library and ships **inlined** in the
+ * published FESM. As a result `pptx-viewer-shared` never appears in the
+ * published `package.json`.
+ *
+ * All Angular sources import shared symbols from THIS barrel, never from the
+ * bare `'pptx-viewer-shared'` specifier (which ng-packagr would externalize).
+ */
+
+/**
+ * Theme system for the Angular PowerPoint viewer.
+ *
+ * Angular counterpart of the React `ViewerThemeProvider` / `useViewerTheme`
+ * context and the Vue `provide`/`inject` theme provider. The `ViewerTheme`
+ * type, default palette, and `themeToCssVars` helper are framework-agnostic
+ * and live in `pptx-viewer-shared`.
+ */
+/** DI token carrying the active `ViewerTheme` (or `undefined`). */
+const VIEWER_THEME = new InjectionToken('PPTX_VIEWER_THEME');
+/**
+ * Provide a `ViewerTheme` to a subtree.
+ *
+ * Typically you do **not** need this — passing a `theme` input to
+ * `<pptx-viewer>` is sufficient. Use this to share a theme across multiple
+ * viewers or a wider component subtree.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideViewerTheme({ colors: { primary: '#6366f1' } })],
+ * });
+ * ```
+ */
+function provideViewerTheme(theme) {
+    return { provide: VIEWER_THEME, useValue: theme };
+}
+/**
+ * Build an `[ngStyle]`-compatible map of CSS custom properties for a theme.
+ * Returns an empty object when the theme contributes no variables.
+ */
+function themeStyle(theme) {
+    if (!theme) {
+        return {};
+    }
+    return themeToCssVars(theme);
+}
+
+/**
+ * `LoadContentService` — Angular port of the React `useLoadContent` hook and
+ * the Vue `useLoadContent` composable.
+ *
+ * Parses `.pptx` bytes into reactive signals via the framework-agnostic
+ * `PptxHandler` from `pptx-viewer-core`. All heavy lifting (ZIP, XML parse,
+ * theme/master/layout resolution, media extraction) lives in core and the
+ * pure helpers live in `pptx-viewer-shared`; this service only wires the async
+ * load into Angular signals and manages Blob-URL / handler lifecycle.
+ *
+ * Provide it at the component level so its lifetime tracks the host viewer:
+ * `@Component({ providers: [LoadContentService] })`.
+ *
+ * This is the viewer-first subset; the React hook also populated ~25 extra
+ * pieces of presentation metadata (sections, custom shows, embedded fonts,
+ * digital signatures, …). Those are tracked in PORTING.md and added here as
+ * the corresponding features are ported.
+ */
+class LoadContentService {
+    /** Parsed slides (with image Blob URLs patched in). */
+    slides = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []));
+    /** Slide canvas size in pixels. */
+    canvasSize = signal({
+        width: DEFAULT_CANVAS_WIDTH,
+        height: DEFAULT_CANVAS_HEIGHT,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasSize" }] : /* istanbul ignore next */ []));
+    /** Resolved presentation theme. */
+    theme = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    /** Slide masters (for placeholder/background resolution). */
+    slideMasters = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slideMasters" }] : /* istanbul ignore next */ []));
+    /** Archive-path → displayable URL map for media + poster frames. */
+    mediaDataUrls = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaDataUrls" }] : /* istanbul ignore next */ []));
+    /** True while a load is in flight. */
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Error message from the last failed load, or null. */
+    error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** True when the file is password-protected and could not be opened. */
+    isEncrypted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEncrypted" }] : /* istanbul ignore next */ []));
+    /** Number of loaded slides. */
+    slideCount = computed(() => this.slides().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slideCount" }] : /* istanbul ignore next */ []));
+    handler = null;
+    renderToken = 0;
+    activeBlobUrls = [];
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this.renderToken++;
+            this.revokeBlobUrls(this.activeBlobUrls);
+            this.revokeBlobUrls(Array.from(this.mediaDataUrls().values()));
+            this.disposeHandler();
+        });
+    }
+    /** Serialise the current presentation back to `.pptx` bytes. */
+    async getContent() {
+        if (!this.handler) {
+            throw new Error('No presentation is loaded.');
+        }
+        return this.handler.save(this.slides());
+    }
+    /** Parse the supplied `.pptx` bytes into the reactive signals. */
+    async load(raw) {
+        if (!raw) {
+            return;
+        }
+        const token = ++this.renderToken;
+        const loadBlobUrls = [];
+        try {
+            this.loading.set(true);
+            this.error.set(null);
+            this.isEncrypted.set(false);
+            const buffer = raw instanceof Uint8Array
+                ? raw.buffer.slice(raw.byteOffset, raw.byteOffset + raw.byteLength)
+                : raw;
+            const fileSizeMB = buffer instanceof ArrayBuffer ? buffer.byteLength / (1024 * 1024) : 0;
+            if (fileSizeMB > 50) {
+                console.warn(`[pptx] Large file detected (${fileSizeMB.toFixed(1)} MB). ` +
+                    `Loading may use significant memory.`);
+            }
+            const previousHandler = this.handler;
+            const newHandler = new PptxHandler();
+            const parsed = await newHandler.load(buffer);
+            if (token !== this.renderToken) {
+                newHandler.dispose();
+                return;
+            }
+            previousHandler?.dispose();
+            // ── Resolve media Blob URLs (audio/video + poster frames) ──
+            const mediaElements = [];
+            for (const slide of parsed.slides) {
+                collectMediaElements(slide.elements, mediaElements);
+            }
+            this.revokeBlobUrls(Array.from(this.mediaDataUrls().values()));
+            const nextMediaUrls = new Map();
+            await Promise.all(mediaElements.map(async (mediaElement) => {
+                const mediaPath = mediaElement.mediaPath;
+                if (!mediaPath) {
+                    mediaElement.mediaMissing = true;
+                    return;
+                }
+                try {
+                    const isAudioVideo = mediaElement.mediaType === 'audio' || mediaElement.mediaType === 'video';
+                    if (isAudioVideo) {
+                        const arrayBuffer = await newHandler.getMediaArrayBuffer(mediaPath);
+                        if (arrayBuffer) {
+                            const mimeType = mediaElement.mediaMimeType || 'application/octet-stream';
+                            const blob = new Blob([arrayBuffer], { type: mimeType });
+                            const blobUrl = URL.createObjectURL(blob);
+                            loadBlobUrls.push(blobUrl);
+                            nextMediaUrls.set(mediaPath, blobUrl);
+                        }
+                        else {
+                            mediaElement.mediaMissing = true;
+                        }
+                    }
+                    else {
+                        const dataUrl = await newHandler.getImageData(mediaPath);
+                        if (dataUrl) {
+                            nextMediaUrls.set(mediaPath, dataUrl);
+                        }
+                        else {
+                            mediaElement.mediaMissing = true;
+                        }
+                    }
+                }
+                catch {
+                    mediaElement.mediaMissing = true;
+                }
+            }));
+            // ── Resolve lazily-loaded picture Blob URLs ──
+            const { paths: imagePaths, refs: imageRefs } = collectImagePaths(parsed.slides);
+            let nextSlides = parsed.slides;
+            if (imagePaths.size > 0) {
+                const resolvedMap = new Map();
+                await Promise.all(Array.from(imagePaths).map(async (path) => {
+                    try {
+                        const url = await newHandler.getImageData(path);
+                        if (url) {
+                            resolvedMap.set(path, url);
+                        }
+                    }
+                    catch {
+                        // Non-critical: image will show as broken.
+                    }
+                }));
+                const elementPatches = new Map();
+                for (const refEntry of imageRefs) {
+                    const url = resolvedMap.get(refEntry.path);
+                    if (!url) {
+                        continue;
+                    }
+                    const id = refEntry.element.id;
+                    const existing = elementPatches.get(id) ?? {};
+                    existing[refEntry.field] = url;
+                    elementPatches.set(id, existing);
+                }
+                if (elementPatches.size > 0) {
+                    const patchElements = (elements) => {
+                        let mutated = false;
+                        const next = elements.map((el) => {
+                            let updated = el;
+                            const patch = elementPatches.get(el.id);
+                            if (patch) {
+                                updated = { ...el, ...patch };
+                            }
+                            if (updated.type === 'group' && updated.children?.length) {
+                                const newChildren = patchElements(updated.children);
+                                if (newChildren !== updated.children) {
+                                    updated = { ...updated, children: newChildren };
+                                }
+                            }
+                            if (updated !== el) {
+                                mutated = true;
+                            }
+                            return updated;
+                        });
+                        return mutated ? next : elements;
+                    };
+                    nextSlides = parsed.slides.map((s) => {
+                        const newElements = patchElements(s.elements);
+                        return newElements === s.elements ? s : { ...s, elements: newElements };
+                    });
+                }
+            }
+            // Commit reactive state.
+            this.revokeBlobUrls(this.activeBlobUrls);
+            this.activeBlobUrls = loadBlobUrls;
+            this.handler = newHandler;
+            this.slides.set(nextSlides);
+            this.mediaDataUrls.set(nextMediaUrls);
+            this.canvasSize.set({
+                width: parsed.width ?? DEFAULT_CANVAS_WIDTH,
+                height: parsed.height ?? DEFAULT_CANVAS_HEIGHT,
+            });
+            this.theme.set(parsed.theme);
+            this.slideMasters.set(parsed.slideMasters ?? []);
+        }
+        catch (err) {
+            if (token === this.renderToken) {
+                if (err instanceof EncryptedFileError) {
+                    this.isEncrypted.set(true);
+                }
+                else {
+                    this.error.set(err instanceof Error ? err.message : String(err));
+                }
+            }
+        }
+        finally {
+            if (token === this.renderToken) {
+                this.loading.set(false);
+            }
+        }
+    }
+    disposeHandler() {
+        if (this.handler) {
+            this.handler.dispose();
+            this.handler = null;
+        }
+    }
+    revokeBlobUrls(urls) {
+        for (const url of urls) {
+            if (url.startsWith('blob:')) {
+                URL.revokeObjectURL(url);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LoadContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LoadContentService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LoadContentService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/** Map a number to a CSS pixel string. */
+const px = (n) => `${n}px`;
+/**
+ * Absolute container style: position, size, rotation, flip, opacity, z-index.
+ * Mirrors the essentials of the React `getContainerStyle`.
+ */
+function getContainerStyle(el, zIndex) {
+    const transforms = [];
+    if (el.rotation) {
+        transforms.push(`rotate(${el.rotation}deg)`);
+    }
+    if (el.flipHorizontal) {
+        transforms.push('scaleX(-1)');
+    }
+    if (el.flipVertical) {
+        transforms.push('scaleY(-1)');
+    }
+    const style = {
+        position: 'absolute',
+        left: px(el.x),
+        top: px(el.y),
+        width: px(el.width),
+        height: px(el.height),
+        'z-index': zIndex,
+        'box-sizing': 'border-box',
+    };
+    if (transforms.length > 0) {
+        style['transform'] = transforms.join(' ');
+    }
+    if (typeof el.opacity === 'number') {
+        style['opacity'] = el.opacity;
+    }
+    if (el.hidden) {
+        style['display'] = 'none';
+    }
+    return style;
+}
+/**
+ * Fill / stroke / corner-radius for shape-like elements. Returns an empty
+ * object when the element carries no shape styling.
+ */
+function getShapeFillStrokeStyle(el) {
+    if (!hasShapeProperties(el)) {
+        return {};
+    }
+    const ss = el.shapeStyle;
+    const style = {};
+    if (ss) {
+        // Fill — solid only for now (gradients/patterns/images: TODO).
+        if (ss.fillColor && ss.fillColor !== 'transparent' && ss.fillMode !== 'none') {
+            style['background-color'] = ss.fillColor;
+        }
+        // Stroke.
+        const strokeWidth = Math.max(0, ss.strokeWidth ?? 0);
+        if (strokeWidth > 0) {
+            const dash = ss.strokeDash && ss.strokeDash !== 'solid'
+                ? ss.strokeDash === 'dot' || ss.strokeDash === 'sysDot'
+                    ? 'dotted'
+                    : 'dashed'
+                : 'solid';
+            style['border'] = `${px(strokeWidth)} ${dash} ${ss.strokeColor ?? DEFAULT_STROKE_COLOR}`;
+        }
+    }
+    // Corner radius — approximate common preset geometries.
+    const shapeType = 'shapeType' in el ? el.shapeType : undefined;
+    if (shapeType === 'ellipse' || shapeType === 'circle') {
+        style['border-radius'] = '50%';
+    }
+    else if (shapeType === 'roundRect') {
+        style['border-radius'] = px(Math.min(el.width, el.height) * 0.1);
+    }
+    return style;
+}
+/**
+ * Text block style for elements that carry text. Mirrors the essentials of the
+ * React `getTextStyleForElement`.
+ */
+function getTextBlockStyle(el) {
+    if (!hasTextProperties(el)) {
+        return {};
+    }
+    const ts = el.textStyle;
+    const style = {
+        display: 'flex',
+        'flex-direction': 'column',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        'white-space': 'pre-wrap',
+        'word-break': 'break-word',
+    };
+    if (!ts) {
+        style['color'] = DEFAULT_TEXT_COLOR;
+        return style;
+    }
+    style['color'] = ts.color ?? DEFAULT_TEXT_COLOR;
+    if (ts.fontFamily) {
+        style['font-family'] = ts.fontFamily;
+    }
+    if (typeof ts.fontSize === 'number') {
+        style['font-size'] = `${ts.fontSize}pt`;
+    }
+    if (ts.bold) {
+        style['font-weight'] = 'bold';
+    }
+    if (ts.italic) {
+        style['font-style'] = 'italic';
+    }
+    const decorations = [];
+    if (ts.underline) {
+        decorations.push('underline');
+    }
+    if (ts.strikethrough) {
+        decorations.push('line-through');
+    }
+    if (decorations.length > 0) {
+        style['text-decoration'] = decorations.join(' ');
+    }
+    switch (ts.align) {
+        case 'center':
+            style['text-align'] = 'center';
+            break;
+        case 'right':
+            style['text-align'] = 'right';
+            break;
+        case 'justify':
+            style['text-align'] = 'justify';
+            break;
+        default:
+            style['text-align'] = 'left';
+    }
+    switch (ts.vAlign) {
+        case 'middle':
+            style['justify-content'] = 'center';
+            break;
+        case 'bottom':
+            style['justify-content'] = 'flex-end';
+            break;
+        default:
+            style['justify-content'] = 'flex-start';
+    }
+    return style;
+}
+/** Resolve a displayable image source for picture/image/media poster frames. */
+function getImageSrc(el, mediaDataUrls) {
+    if (el.type === 'picture' || el.type === 'image') {
+        return el.imageData ?? (el.imagePath ? mediaDataUrls.get(el.imagePath) : undefined);
+    }
+    if (el.type === 'media') {
+        return (el.posterFrameData ?? (el.posterFramePath ? mediaDataUrls.get(el.posterFramePath) : undefined));
+    }
+    return undefined;
+}
+
+/**
+ * ElementRendererComponent — Angular port of the React `ElementRenderer.tsx`
+ * and the Vue `ElementRenderer.vue`.
+ *
+ * Renders a single slide element by its `type` discriminant (viewer-first
+ * subset):
+ *  - `text` / `shape`    → positioned box with fill/stroke + rich text
+ *  - `picture` / `image` → `<img>`
+ *  - `media`             → poster frame (`<img>`) — playback TODO
+ *  - `group`             → recursive children (self-referencing selector)
+ *  - everything else     → labelled placeholder (TODO, see PORTING.md)
+ *
+ * Interaction (selection, resize, inline editing), connectors, charts, tables,
+ * SmartArt, ink, OLE, and 3D are not yet ported.
+ */
+class ElementRendererComponent {
+    element = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    mediaDataUrls = input(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaDataUrls" }] : /* istanbul ignore next */ []));
+    zIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    containerStyle = computed(() => getContainerStyle(this.element(), this.zIndex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerStyle" }] : /* istanbul ignore next */ []));
+    shapeContainerStyle = computed(() => ({
+        ...this.containerStyle(),
+        ...getShapeFillStrokeStyle(this.element()),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shapeContainerStyle" }] : /* istanbul ignore next */ []));
+    textStyle = computed(() => getTextBlockStyle(this.element()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textStyle" }] : /* istanbul ignore next */ []));
+    imageSrc = computed(() => getImageSrc(this.element(), this.mediaDataUrls()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
+    children = computed(() => {
+        const el = this.element();
+        return el.type === 'group' ? (el.children ?? []) : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    isShapeLike = computed(() => this.element().type === 'text' || this.element().type === 'shape', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isShapeLike" }] : /* istanbul ignore next */ []));
+    isImageLike = computed(() => this.element().type === 'picture' || this.element().type === 'image', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isImageLike" }] : /* istanbul ignore next */ []));
+    paragraphs = computed(() => {
+        const el = this.element();
+        if (!hasTextProperties(el)) {
+            return [];
+        }
+        const segments = el.textSegments;
+        if (!segments || segments.length === 0) {
+            return el.text ? [[{ text: el.text, style: {} }]] : [];
+        }
+        const out = [[]];
+        for (const seg of segments) {
+            if (seg.isParagraphBreak) {
+                out.push([]);
+                continue;
+            }
+            const current = out[out.length - 1];
+            const text = seg.isLineBreak ? '\n' : seg.text;
+            if (text) {
+                current.push({ text, style: this.segmentStyle(seg) });
+            }
+        }
+        return out.filter((p) => p.length > 0 || out.length === 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paragraphs" }] : /* istanbul ignore next */ []));
+    hasText = computed(() => this.paragraphs().some((p) => p.length > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []));
+    placeholderLabel = computed(() => {
+        const map = {
+            table: 'Table',
+            chart: 'Chart',
+            smartArt: 'SmartArt',
+            connector: 'Connector',
+            group: 'Group',
+            media: 'Media',
+            ink: 'Ink',
+            ole: 'Embedded object',
+            model3d: '3D model',
+            zoom: 'Zoom',
+        };
+        return map[this.element().type] ?? this.element().type;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
+    segmentStyle(seg) {
+        const s = seg.style ?? {};
+        const style = {};
+        if (s.fontFamily) {
+            style['font-family'] = s.fontFamily;
+        }
+        if (typeof s.fontSize === 'number') {
+            style['font-size'] = `${s.fontSize}pt`;
+        }
+        if (s.color) {
+            style['color'] = s.color;
+        }
+        if (s.bold) {
+            style['font-weight'] = 'bold';
+        }
+        if (s.italic) {
+            style['font-style'] = 'italic';
+        }
+        const deco = [];
+        if (s.underline) {
+            deco.push('underline');
+        }
+        if (s.strikethrough) {
+            deco.push('line-through');
+        }
+        if (deco.length > 0) {
+            style['text-decoration'] = deco.join(' ');
+        }
+        return style;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ElementRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ElementRendererComponent, isStandalone: true, selector: "pptx-element-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		@switch (true) {
+			@case (element().type === 'group') {
+				<div
+					class="pptx-ng-element pptx-ng-group"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@for (child of children(); track child.id) {
+						<pptx-element-renderer
+							[element]="child"
+							[mediaDataUrls]="mediaDataUrls()"
+							[zIndex]="$index"
+						/>
+					}
+				</div>
+			}
+			@case (isImageLike()) {
+				<div
+					class="pptx-ng-element pptx-ng-image"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@if (imageSrc()) {
+						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
+					}
+				</div>
+			}
+			@case (element().type === 'media') {
+				<div
+					class="pptx-ng-element pptx-ng-media"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@if (imageSrc()) {
+						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
+					} @else {
+						<div class="pptx-ng-placeholder">{{ placeholderLabel() }}</div>
+					}
+				</div>
+			}
+			@case (isShapeLike()) {
+				<div
+					class="pptx-ng-element pptx-ng-shape"
+					[ngStyle]="shapeContainerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@if (hasText()) {
+						<div class="pptx-ng-text" [ngStyle]="textStyle()">
+							@for (para of paragraphs(); track $index) {
+								<p class="pptx-ng-para">
+									@for (run of para; track $index) {
+										@if (
+											run.text ===
+											'
+'
+										) {
+											<br />
+										} @else {
+											<span [ngStyle]="run.style">{{ run.text }}</span>
+										}
+									}
+								</p>
+							}
+						</div>
+					}
+				</div>
+			}
+			@default {
+				<div
+					class="pptx-ng-element pptx-ng-unsupported"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					<div class="pptx-ng-placeholder">{{ placeholderLabel() }}</div>
+				</div>
+			}
+		}
+	`, isInline: true, dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ElementRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pptx-element-renderer',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgStyle],
+                    template: `
+		@switch (true) {
+			@case (element().type === 'group') {
+				<div
+					class="pptx-ng-element pptx-ng-group"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@for (child of children(); track child.id) {
+						<pptx-element-renderer
+							[element]="child"
+							[mediaDataUrls]="mediaDataUrls()"
+							[zIndex]="$index"
+						/>
+					}
+				</div>
+			}
+			@case (isImageLike()) {
+				<div
+					class="pptx-ng-element pptx-ng-image"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@if (imageSrc()) {
+						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
+					}
+				</div>
+			}
+			@case (element().type === 'media') {
+				<div
+					class="pptx-ng-element pptx-ng-media"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@if (imageSrc()) {
+						<img [src]="imageSrc()" alt="" class="pptx-ng-img" />
+					} @else {
+						<div class="pptx-ng-placeholder">{{ placeholderLabel() }}</div>
+					}
+				</div>
+			}
+			@case (isShapeLike()) {
+				<div
+					class="pptx-ng-element pptx-ng-shape"
+					[ngStyle]="shapeContainerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					@if (hasText()) {
+						<div class="pptx-ng-text" [ngStyle]="textStyle()">
+							@for (para of paragraphs(); track $index) {
+								<p class="pptx-ng-para">
+									@for (run of para; track $index) {
+										@if (
+											run.text ===
+											'
+'
+										) {
+											<br />
+										} @else {
+											<span [ngStyle]="run.style">{{ run.text }}</span>
+										}
+									}
+								</p>
+							}
+						</div>
+					}
+				</div>
+			}
+			@default {
+				<div
+					class="pptx-ng-element pptx-ng-unsupported"
+					[ngStyle]="containerStyle()"
+					[attr.data-element-id]="element().id"
+				>
+					<div class="pptx-ng-placeholder">{{ placeholderLabel() }}</div>
+				</div>
+			}
+		}
+	`,
+                }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
+
+/**
+ * SlideCanvasComponent — Angular port of the React `SlideCanvas.tsx` and Vue
+ * `SlideCanvas.vue` (viewer-first subset).
+ *
+ * Renders the active slide as a fixed-size stage scaled by `zoom`, with each
+ * element absolutely positioned. The React version additionally layered in
+ * rulers, grid, guides, marquee/selection, connector-creation, drawing, and
+ * collaboration overlays — all tracked in PORTING.md.
+ */
+class SlideCanvasComponent {
+    slide = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slide" }] : /* istanbul ignore next */ []));
+    canvasSize = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasSize" }] : /* istanbul ignore next */ []));
+    mediaDataUrls = input(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaDataUrls" }] : /* istanbul ignore next */ []));
+    zoom = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    elements = computed(() => this.slide()?.elements ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    wrapperStyle = computed(() => {
+        const scale = this.zoom();
+        const size = this.canvasSize();
+        return {
+            width: `${size.width * scale}px`,
+            height: `${size.height * scale}px`,
+            position: 'relative',
+            margin: '1rem auto',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrapperStyle" }] : /* istanbul ignore next */ []));
+    stageStyle = computed(() => {
+        const scale = this.zoom();
+        const size = this.canvasSize();
+        const slide = this.slide();
+        const style = {
+            width: `${size.width}px`,
+            height: `${size.height}px`,
+            transform: `scale(${scale})`,
+            'transform-origin': 'top left',
+            position: 'relative',
+            overflow: 'hidden',
+            'background-color': slide?.backgroundColor && slide.backgroundColor !== 'transparent'
+                ? slide.backgroundColor
+                : '#ffffff',
+            'background-size': '100% 100%',
+            'box-shadow': '0 10px 40px rgba(0, 0, 0, 0.35)',
+        };
+        if (slide?.backgroundImage) {
+            style['background-image'] = `url(${slide.backgroundImage})`;
+        }
+        return style;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stageStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SlideCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SlideCanvasComponent, isStandalone: true, selector: "pptx-slide-canvas", inputs: { slide: { classPropertyName: "slide", publicName: "slide", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<div class="pptx-ng-canvas-viewport">
+			<div class="pptx-ng-canvas-wrapper" [ngStyle]="wrapperStyle()">
+				<div
+					class="pptx-ng-canvas-stage"
+					role="region"
+					aria-roledescription="slide"
+					[ngStyle]="stageStyle()"
+				>
+					@for (element of elements(); track element.id; let i = $index) {
+						<pptx-element-renderer
+							[element]="element"
+							[mediaDataUrls]="mediaDataUrls()"
+							[zIndex]="i"
+						/>
+					}
+				</div>
+			</div>
+		</div>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ElementRendererComponent, selector: "pptx-element-renderer", inputs: ["element", "mediaDataUrls", "zIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SlideCanvasComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pptx-slide-canvas',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgStyle, ElementRendererComponent],
+                    template: `
+		<div class="pptx-ng-canvas-viewport">
+			<div class="pptx-ng-canvas-wrapper" [ngStyle]="wrapperStyle()">
+				<div
+					class="pptx-ng-canvas-stage"
+					role="region"
+					aria-roledescription="slide"
+					[ngStyle]="stageStyle()"
+				>
+					@for (element of elements(); track element.id; let i = $index) {
+						<pptx-element-renderer
+							[element]="element"
+							[mediaDataUrls]="mediaDataUrls()"
+							[zIndex]="i"
+						/>
+					}
+				</div>
+			</div>
+		</div>
+	`,
+                }]
+        }], propDecorators: { slide: [{ type: i0.Input, args: [{ isSignal: true, alias: "slide", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: true }] }], mediaDataUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaDataUrls", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }] } });
+
+const ZOOM_STEP = 0.1;
+const ZOOM_MIN = 0.2;
+const ZOOM_MAX = 3;
+/**
+ * PowerPointViewerComponent — Angular port of the React `PowerPointViewer.tsx`
+ * and Vue `PowerPointViewer.vue`.
+ *
+ * Top-level orchestrator that loads `.pptx` bytes and renders the slides with
+ * navigation and zoom. This is the viewer-first milestone of the port: the
+ * React component additionally composes a full editor (toolbar, inspector
+ * panels, dialogs, presentation mode, collaboration, export). The roadmap and
+ * per-area status live in `packages/angular/PORTING.md`.
+ *
+ * Conventions vs. React/Vue:
+ *  - React `forwardRef` handle / Vue `defineExpose` → public {@link getContent}
+ *    method (reach it via a template ref or `viewChild`).
+ *  - React callback props / Vue emits → Angular `output()` events.
+ *  - React theme context / Vue provide-inject → `themeStyle` CSS vars applied to
+ *    the root element (app-wide sharing via `provideViewerTheme`).
+ */
+class PowerPointViewerComponent {
+    /** PowerPoint content as Uint8Array (or ArrayBuffer). */
+    content = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /** Whether editing actions are enabled. (Editor chrome not yet ported.) */
+    canEdit = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    /** Optional class applied to the root element. */
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Theme configuration for customising the viewer's appearance. */
+    theme = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    /** Optional real-time collaboration config (accepted for API parity; not yet implemented). */
+    collaboration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collaboration" }] : /* istanbul ignore next */ []));
+    /** Fired when the active slide changes. */
+    activeSlideChange = output();
+    /** Fired when the unsaved-changes flag toggles. (Editing not yet ported.) */
+    dirtyChange = output();
+    /** Fired when the in-memory content changes after edits. (Editing not yet ported.) */
+    contentChange = output();
+    loader = inject(LoadContentService);
+    activeSlideIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSlideIndex" }] : /* istanbul ignore next */ []));
+    slideCount = this.loader.slideCount;
+    activeSlide = computed(() => this.loader.slides()[this.activeSlideIndex()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSlide" }] : /* istanbul ignore next */ []));
+    rootStyle = computed(() => themeStyle(this.theme()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootStyle" }] : /* istanbul ignore next */ []));
+    zoom = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    zoomPercent = computed(() => Math.round(this.zoom() * 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomPercent" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Load whenever the `content` input changes.
+        effect(() => {
+            const content = this.content();
+            void this.loader.load(content);
+        });
+        // Reset to the first slide whenever a new presentation finishes loading.
+        effect(() => {
+            // Read slides to track; reset index out of band.
+            this.loader.slides();
+            this.activeSlideIndex.set(0);
+        });
+        // Emit navigation changes.
+        effect(() => {
+            this.activeSlideChange.emit(this.activeSlideIndex());
+        });
+    }
+    /** Serialise the current presentation to `.pptx` bytes (imperative handle). */
+    getContent() {
+        return this.loader.getContent();
+    }
+    goTo(index) {
+        if (index < 0 || index >= this.slideCount()) {
+            return;
+        }
+        this.activeSlideIndex.set(index);
+    }
+    goPrev() {
+        this.goTo(this.activeSlideIndex() - 1);
+    }
+    goNext() {
+        this.goTo(this.activeSlideIndex() + 1);
+    }
+    zoomIn() {
+        this.zoom.set(Math.min(ZOOM_MAX, Number((this.zoom() + ZOOM_STEP).toFixed(2))));
+    }
+    zoomOut() {
+        this.zoom.set(Math.max(ZOOM_MIN, Number((this.zoom() - ZOOM_STEP).toFixed(2))));
+    }
+    zoomReset() {
+        this.zoom.set(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PowerPointViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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 }, collaboration: { classPropertyName: "collaboration", publicName: "collaboration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSlideChange: "activeSlideChange", dirtyChange: "dirtyChange", contentChange: "contentChange" }, providers: [LoadContentService], ngImport: i0, template: `
+		<div class="pptx-ng-viewer" [ngClass]="class()" [ngStyle]="rootStyle()">
+			@if (loader.loading()) {
+				<div class="pptx-ng-state pptx-ng-loading">
+					<div class="pptx-ng-spinner" aria-hidden="true"></div>
+					<p>Loading presentation…</p>
+				</div>
+			} @else if (loader.isEncrypted()) {
+				<div class="pptx-ng-state pptx-ng-error">
+					<p>This presentation is password-protected and cannot be opened.</p>
+				</div>
+			} @else if (loader.error()) {
+				<div class="pptx-ng-state pptx-ng-error">
+					<p>Failed to load presentation.</p>
+					<pre class="pptx-ng-error-detail">{{ loader.error() }}</pre>
+				</div>
+			} @else {
+				<header class="pptx-ng-toolbar">
+					<div class="pptx-ng-nav">
+						<button type="button" [disabled]="activeSlideIndex() <= 0" (click)="goPrev()">‹</button>
+						<span class="pptx-ng-slide-counter">
+							{{ slideCount() === 0 ? 0 : activeSlideIndex() + 1 }} / {{ slideCount() }}
+						</span>
+						<button
+							type="button"
+							[disabled]="activeSlideIndex() >= slideCount() - 1"
+							(click)="goNext()"
+						>
+							›
+						</button>
+					</div>
+					<div class="pptx-ng-zoom">
+						<button type="button" (click)="zoomOut()">−</button>
+						<button type="button" class="pptx-ng-zoom-value" (click)="zoomReset()">
+							{{ zoomPercent() }}%
+						</button>
+						<button type="button" (click)="zoomIn()">+</button>
+					</div>
+				</header>
+
+				<div class="pptx-ng-body">
+					<nav class="pptx-ng-thumbnails" aria-label="Slides">
+						@for (slide of loader.slides(); track slide.id; let i = $index) {
+							<button
+								type="button"
+								class="pptx-ng-thumb"
+								[class.is-active]="i === activeSlideIndex()"
+								(click)="goTo(i)"
+							>
+								<span class="pptx-ng-thumb-index">{{ i + 1 }}</span>
+							</button>
+						}
+					</nav>
+
+					<main class="pptx-ng-main">
+						<pptx-slide-canvas
+							[slide]="activeSlide()"
+							[canvasSize]="loader.canvasSize()"
+							[mediaDataUrls]="loader.mediaDataUrls()"
+							[zoom]="zoom()"
+						/>
+					</main>
+				</div>
+			}
+		</div>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SlideCanvasComponent, selector: "pptx-slide-canvas", inputs: ["slide", "canvasSize", "mediaDataUrls", "zoom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PowerPointViewerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pptx-viewer',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [LoadContentService],
+                    imports: [NgClass, NgStyle, SlideCanvasComponent],
+                    template: `
+		<div class="pptx-ng-viewer" [ngClass]="class()" [ngStyle]="rootStyle()">
+			@if (loader.loading()) {
+				<div class="pptx-ng-state pptx-ng-loading">
+					<div class="pptx-ng-spinner" aria-hidden="true"></div>
+					<p>Loading presentation…</p>
+				</div>
+			} @else if (loader.isEncrypted()) {
+				<div class="pptx-ng-state pptx-ng-error">
+					<p>This presentation is password-protected and cannot be opened.</p>
+				</div>
+			} @else if (loader.error()) {
+				<div class="pptx-ng-state pptx-ng-error">
+					<p>Failed to load presentation.</p>
+					<pre class="pptx-ng-error-detail">{{ loader.error() }}</pre>
+				</div>
+			} @else {
+				<header class="pptx-ng-toolbar">
+					<div class="pptx-ng-nav">
+						<button type="button" [disabled]="activeSlideIndex() <= 0" (click)="goPrev()">‹</button>
+						<span class="pptx-ng-slide-counter">
+							{{ slideCount() === 0 ? 0 : activeSlideIndex() + 1 }} / {{ slideCount() }}
+						</span>
+						<button
+							type="button"
+							[disabled]="activeSlideIndex() >= slideCount() - 1"
+							(click)="goNext()"
+						>
+							›
+						</button>
+					</div>
+					<div class="pptx-ng-zoom">
+						<button type="button" (click)="zoomOut()">−</button>
+						<button type="button" class="pptx-ng-zoom-value" (click)="zoomReset()">
+							{{ zoomPercent() }}%
+						</button>
+						<button type="button" (click)="zoomIn()">+</button>
+					</div>
+				</header>
+
+				<div class="pptx-ng-body">
+					<nav class="pptx-ng-thumbnails" aria-label="Slides">
+						@for (slide of loader.slides(); track slide.id; let i = $index) {
+							<button
+								type="button"
+								class="pptx-ng-thumb"
+								[class.is-active]="i === activeSlideIndex()"
+								(click)="goTo(i)"
+							>
+								<span class="pptx-ng-thumb-index">{{ i + 1 }}</span>
+							</button>
+						}
+					</nav>
+
+					<main class="pptx-ng-main">
+						<pptx-slide-canvas
+							[slide]="activeSlide()"
+							[canvasSize]="loader.canvasSize()"
+							[mediaDataUrls]="loader.mediaDataUrls()"
+							[zoom]="zoom()"
+						/>
+					</main>
+				</div>
+			}
+		</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 }] }], collaboration: [{ type: i0.Input, args: [{ isSignal: true, alias: "collaboration", required: false }] }], activeSlideChange: [{ type: i0.Output, args: ["activeSlideChange"] }], dirtyChange: [{ type: i0.Output, args: ["dirtyChange"] }], contentChange: [{ type: i0.Output, args: ["contentChange"] }] } });
+
+/**
+ * Scalar viewer defaults — shared across the React, Vue, and Angular bindings
+ * via `pptx-viewer-shared`. Re-exported here for ergonomic local imports.
+ */
+
+function cn(...values) {
+    return values.filter((v) => Boolean(v)).join(' ');
+}
+
+/**
+ * Public API surface for `pptx-angular-viewer`.
+ *
+ * Angular counterpart of the React `pptx-viewer` and Vue `pptx-vue-viewer`
+ * packages. Wraps the framework-agnostic `pptx-viewer-core` engine and shares
+ * cross-framework logic via `pptx-viewer-shared`.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_CANVAS_HEIGHT, DEFAULT_CANVAS_WIDTH, DEFAULT_FILL_COLOR, DEFAULT_STROKE_COLOR, DEFAULT_TEXT_COLOR, ElementRendererComponent, LoadContentService, PowerPointViewerComponent, SlideCanvasComponent, VIEWER_THEME, cn, defaultCssVars, defaultRadius, defaultThemeColors, getContainerStyle, getImageSrc, getShapeFillStrokeStyle, getTextBlockStyle, provideViewerTheme, themeStyle, themeToCssVars };
+//# sourceMappingURL=pptx-angular-viewer.mjs.map