pptx-angular-viewer 1.1.41 → 1.1.43

package/fesm2022/pptx-angular-viewer.mjs

@@ -1,6 +1,6 @@
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, output, computed, ChangeDetectionStrategy, Component, signal, Injectable, HostListener, effect, inject, DestroyRef, ElementRef, viewChild, afterNextRender, Injector } from '@angular/core';
+import { InjectionToken, input, output, computed, ChangeDetectionStrategy, Component, signal, Injectable, inject, DestroyRef, HostListener, effect, ElementRef, viewChild, afterNextRender, Injector } from '@angular/core';
 import { guideEmuToPx, getShapeClipPath, getAdjustmentAwareShapeClipPath, getShapeClipPathFromPreset, getCloudPathForRendering, hasShapeProperties, applyDrawingColorTransforms as applyDrawingColorTransforms$1, hslToRgb as hslToRgb$1, PRESET_COLOR_MAP, isImageLikeElement, hasTextProperties, MIN_ELEMENT_SIZE as MIN_ELEMENT_SIZE$2, THEME_COLOR_SCHEME_KEYS, getLinkedTextBoxSegments, svgPathToPolygons, deobfuscateFont, detectFontFormat, getSubstituteFontFamily, checkMissingAltText, checkMissingSlideTitle, checkLowContrast, checkComplexTables, checkBlankSlide, checkDuplicateTitles, createChartElement, formatCommentTimestamp, setChartTitle, setChartLegend, setChartDataLabels, setChartAxis, setChartSeriesTrendline, setChartSeriesErrorBars, setChartDataPointLabel, setChartAxisLogScale, setChartAxisTitleStyle, setChartAxisGridlineStyle, setChartSeriesMarker, setChartSeriesChartType, setChartDataPointFill, setChartDataPointExplosion, chartDataAddSeries, chartDataRemoveSeries, chartDataAddCategory, chartDataRemoveCategory, chartDataUpdatePoint, chartDataChangeType, updateSmartArtNodeText, addSmartArtNodeAsChild, removeSmartArtNode, promoteSmartArtNode, demoteSmartArtNode, reorderSmartArtNode, switchSmartArtLayout, SWITCHABLE_LAYOUT_TYPES, PptxHandler, EncryptedFileError, parseSignatureXml, isInkElement, isZoomElement, THEME_PRESETS, applyThemeToData, getAnimationPresetInfo } from 'pptx-viewer-core';
 import { jsPDF } from 'jspdf';
 import html2canvasPro from 'html2canvas-pro';
@@ -23966,6 +23966,516 @@ function buildSmartArt3DModel(layout, options = {}) {
     return options.spatial ? applySpatialLayout(model) : model;
 }
 
+/**
+ * Vanilla three.js GLTF/GLB model scene controller (framework-agnostic).
+ *
+ * Mounts an interactive 3D model into a caller-provided container element:
+ * dynamically imports `three` plus its `GLTFLoader` and `OrbitControls` addons,
+ * builds a scene (perspective camera, lights), auto-centres and fits the model
+ * to the view via a `Box3`, renders with a RAF loop, and exposes `resize()` /
+ * `dispose()` for deterministic teardown of GPU resources.
+ *
+ * `three` is an OPTIONAL peer dependency: every import is dynamic and guarded.
+ * When `three` is not installed, {@link mountModel3D} resolves to a sentinel
+ * handle ({@link THREE_UNAVAILABLE}) so the caller can fall back to a poster.
+ * No framework imports - the React, Vue, and Angular bindings can all mount it.
+ */
+/**
+ * Sentinel handle returned when `three` is unavailable or the model fails to
+ * load. All methods are no-ops; `ok` is `false` so callers can show a poster.
+ */
+const THREE_UNAVAILABLE = {
+    ok: false,
+    resize: () => { },
+    setInteractive: () => { },
+    dispose: () => { },
+};
+const FOV$1 = 50;
+/** Dynamically load `three`; returns `null` when the package is not installed. */
+async function loadThree$1() {
+    try {
+        return (await import('three'));
+    }
+    catch {
+        return null;
+    }
+}
+/** Dynamically load the GLTFLoader addon; returns `null` when unavailable. */
+async function loadGltfLoaderCtor() {
+    try {
+        const mod = await import('three/examples/jsm/loaders/GLTFLoader.js');
+        return mod.GLTFLoader;
+    }
+    catch {
+        return null;
+    }
+}
+/** Dynamically load the OrbitControls addon; returns `null` when unavailable. */
+async function loadOrbitControlsCtor$1() {
+    try {
+        const mod = await import('three/examples/jsm/controls/OrbitControls.js');
+        return mod.OrbitControls;
+    }
+    catch {
+        return null;
+    }
+}
+/** Promisified `GLTFLoader.load`. */
+function loadGltf(loader, url) {
+    return new Promise((resolve, reject) => {
+        loader.load(url, resolve, undefined, reject);
+    });
+}
+/**
+ * Auto-centre the model at the origin and uniformly scale it so its largest
+ * dimension fills a 2-unit cube, mirroring the previous react-three-fiber fit.
+ */
+function centerAndFit(three, root) {
+    const box = new three.Box3().setFromObject(root);
+    const size = new three.Vector3();
+    box.getSize(size);
+    const maxDim = Math.max(size.x, size.y, size.z);
+    if (maxDim > 0) {
+        root.scale.setScalar(2 / maxDim);
+    }
+    const center = new three.Vector3();
+    box.getCenter(center);
+    root.position.sub(center.multiplyScalar(root.scale.x));
+}
+/**
+ * Mount an interactive GLTF/GLB model into `container` and start rendering.
+ *
+ * Resolves to {@link THREE_UNAVAILABLE} (a no-op handle with `ok === false`)
+ * when `three` or its addons cannot be loaded, or when the model fails to parse.
+ */
+async function mountModel3D(container, modelUrl, options) {
+    const three = await loadThree$1();
+    const GltfLoaderCtor = three ? await loadGltfLoaderCtor() : null;
+    if (!three || !GltfLoaderCtor) {
+        return THREE_UNAVAILABLE;
+    }
+    const width = Math.max(1, options.width);
+    const height = Math.max(1, options.height);
+    const renderer = new three.WebGLRenderer({ antialias: true, alpha: !options.background });
+    renderer.setPixelRatio(Math.min(typeof window === 'undefined' ? 1 : window.devicePixelRatio || 1, options.maxPixelRatio ?? 2));
+    renderer.setSize(width, height, false);
+    const canvas = renderer.domElement;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.style.display = 'block';
+    canvas.style.willChange = 'transform';
+    container.appendChild(canvas);
+    const scene = new three.Scene();
+    if (options.background) {
+        scene.background = new three.Color(options.background);
+    }
+    const camera = new three.PerspectiveCamera(FOV$1, width / height, 0.1, 1000);
+    camera.position.set(0, 0, 5);
+    camera.lookAt(0, 0, 0);
+    scene.add(new three.AmbientLight(0xffffff, 0.5));
+    const key = new three.DirectionalLight(0xffffff, 1);
+    key.position.set(5, 5, 5);
+    scene.add(key);
+    const fill = new three.DirectionalLight(0xffffff, 0.3);
+    fill.position.set(-3, -3, 2);
+    scene.add(fill);
+    let gltf;
+    try {
+        gltf = await loadGltf(new GltfLoaderCtor(), modelUrl);
+    }
+    catch {
+        renderer.dispose();
+        canvas.remove();
+        return THREE_UNAVAILABLE;
+    }
+    const model = gltf.scene;
+    centerAndFit(three, model);
+    scene.add(model);
+    let controls = null;
+    const OrbitCtrlCtor = await loadOrbitControlsCtor$1();
+    const enableControls = (on) => {
+        if (on && !controls && OrbitCtrlCtor) {
+            controls = new OrbitCtrlCtor(camera, canvas);
+            controls.enablePan = false;
+            controls.enableZoom = true;
+            controls.enableRotate = true;
+            controls.minDistance = 2;
+            controls.maxDistance = 20;
+            controls.update();
+        }
+        else if (!on && controls) {
+            controls.dispose();
+            controls = null;
+        }
+    };
+    enableControls(options.interactive ?? true);
+    let frame = 0;
+    let disposed = false;
+    const renderLoop = () => {
+        if (disposed) {
+            return;
+        }
+        frame = requestAnimationFrame(renderLoop);
+        controls?.update();
+        renderer.render(scene, camera);
+    };
+    frame = requestAnimationFrame(renderLoop);
+    /** Recursively dispose every geometry/material/texture under the model. */
+    const disposeModel = () => {
+        model.traverse((obj) => {
+            const mesh = obj;
+            mesh.geometry?.dispose();
+            const material = mesh.material;
+            if (Array.isArray(material)) {
+                for (const m of material) {
+                    m.dispose();
+                }
+            }
+            else {
+                material?.dispose();
+            }
+        });
+    };
+    return {
+        ok: true,
+        resize(w, h) {
+            const nextW = Math.max(1, w);
+            const nextH = Math.max(1, h);
+            camera.aspect = nextW / nextH;
+            camera.updateProjectionMatrix();
+            renderer.setSize(nextW, nextH, false);
+            canvas.style.width = `${nextW}px`;
+            canvas.style.height = `${nextH}px`;
+        },
+        setInteractive(on) {
+            enableControls(on);
+        },
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            cancelAnimationFrame(frame);
+            controls?.dispose();
+            disposeModel();
+            scene.clear();
+            renderer.dispose();
+            canvas.remove();
+        },
+    };
+}
+
+/**
+ * Pure surface-chart 3D geometry helpers (framework- and three-agnostic).
+ *
+ * The vanilla three scene controller ({@link mountSurfaceChart3D}) feeds these
+ * the loaded `three` module so the heavy library stays a dynamic, optional
+ * import while the grid maths (plane subdivision -> height/colour displacement,
+ * world-space label anchors) lives here as small, separately testable units.
+ */
+/** Half-unit spacing between adjacent grid points, in world units. */
+const GRID_SPACING = 0.5;
+/** Maximum height displacement (world units) for a normalised value of 1. */
+const MAX_HEIGHT = 1.5;
+/** Compute the world-space width/depth of the data grid. */
+function computeGridExtent(cols, rows) {
+    return {
+        gridWidth: Math.max(cols - 1, 1) * GRID_SPACING,
+        gridDepth: Math.max(rows - 1, 1) * GRID_SPACING,
+    };
+}
+/**
+ * Build the surface mesh + wireframe geometries from the normalised height and
+ * colour maps. The plane is subdivided to match the data grid, rotated into the
+ * XZ plane, then each vertex is displaced in Y by its height and tinted by its
+ * colour. Returns disposable geometries the caller adds to the scene.
+ */
+function buildSurfaceGeometry(three, cols, rows, heightMap, colorMap) {
+    const widthSegs = Math.max(cols - 1, 0);
+    const depthSegs = Math.max(rows - 1, 0);
+    const { gridWidth, gridDepth } = computeGridExtent(cols, rows);
+    const geo = new three.PlaneGeometry(gridWidth, gridDepth, widthSegs, depthSegs);
+    // PlaneGeometry lies in the XY plane by default; rotate it flat into XZ.
+    geo.rotateX(-Math.PI / 2);
+    const pos = geo.attributes.position;
+    const vertexCount = pos.count;
+    const colors = new Float32Array(vertexCount * 3);
+    for (let i = 0; i < vertexCount; i++) {
+        // After the rotation, the (widthSegs+1) x (depthSegs+1) vertices stay in
+        // row-major order, so col = i % cols and row = floor(i / cols) map onto the
+        // data grid directly.
+        const row = Math.floor(i / cols);
+        const col = i % cols;
+        const idx = row * cols + col;
+        const h = idx < heightMap.length ? heightMap[idx] : 0;
+        pos.setY(i, h * MAX_HEIGHT);
+        const ci = idx * 3;
+        colors[i * 3] = ci < colorMap.length ? colorMap[ci] : 0.5;
+        colors[i * 3 + 1] = ci + 1 < colorMap.length ? colorMap[ci + 1] : 0.5;
+        colors[i * 3 + 2] = ci + 2 < colorMap.length ? colorMap[ci + 2] : 0.5;
+    }
+    geo.setAttribute('color', new three.BufferAttribute(colors, 3));
+    geo.computeVertexNormals();
+    pos.needsUpdate = true;
+    const wireGeometry = new three.WireframeGeometry(geo);
+    return { geometry: geo, wireGeometry };
+}
+/**
+ * Build the axis labels (category along the front edge, series along the right
+ * edge, plus a single "Value" Y-axis label) as world-anchored {@link
+ * SurfaceLabel}s. Category/series labels are thinned to at most `maxCat`/`maxSer`
+ * entries to avoid clutter, mirroring the prior drei `Html` layout.
+ */
+function buildSurfaceLabels(cols, rows, categoryLabels, seriesNames, maxCat = 8, maxSer = 6) {
+    const { gridWidth, gridDepth } = computeGridExtent(cols, rows);
+    const labels = [];
+    const catStep = Math.max(1, Math.ceil(categoryLabels.length / maxCat));
+    for (let i = 0; i < categoryLabels.length; i += catStep) {
+        const x = -gridWidth / 2 + (i / Math.max(cols - 1, 1)) * gridWidth;
+        labels.push({
+            key: `cat-${i}`,
+            text: categoryLabels[i],
+            anchor: [x, -0.15, gridDepth / 2 + 0.25],
+            axis: 'category',
+        });
+    }
+    const serStep = Math.max(1, Math.ceil(seriesNames.length / maxSer));
+    for (let i = 0; i < seriesNames.length; i += serStep) {
+        const z = -gridDepth / 2 + (i / Math.max(rows - 1, 1)) * gridDepth;
+        labels.push({
+            key: `ser-${i}`,
+            text: seriesNames[i],
+            anchor: [gridWidth / 2 + 0.3, -0.15, z],
+            axis: 'series',
+        });
+    }
+    labels.push({
+        key: 'value-axis',
+        text: 'Value',
+        anchor: [-gridWidth / 2 - 0.35, 0.75, -gridDepth / 2],
+        axis: 'value',
+    });
+    return labels;
+}
+/** Isometric-like camera placement that frames the whole grid. */
+function computeCameraPlacement(cols, rows) {
+    const { gridWidth, gridDepth } = computeGridExtent(cols, rows);
+    const maxExtent = Math.max(gridWidth, gridDepth, MAX_HEIGHT);
+    const dist = maxExtent * 1.8;
+    return {
+        position: [dist * 0.8, dist * 0.7, dist * 0.8],
+        target: [0, 0.3, 0],
+    };
+}
+
+/**
+ * Vanilla three.js 3D surface-chart scene controller (framework-agnostic).
+ *
+ * Mounts an interactive surface chart into a caller-provided container element:
+ * dynamically imports `three` plus its `OrbitControls` addon, builds a colour-
+ * displaced surface mesh (with optional wireframe), grid floor, lights, and an
+ * isometric camera, renders with a RAF loop, and overlays axis labels as DOM
+ * nodes that are re-projected to screen each frame. Exposes `dispose()` for
+ * deterministic teardown of GPU resources, listeners, and overlay nodes.
+ *
+ * `three` is an OPTIONAL peer dependency: every import is dynamic and guarded.
+ * When `three` (or its OrbitControls addon) is missing, {@link mountSurfaceChart3D}
+ * resolves to a sentinel handle ({@link SURFACE_THREE_UNAVAILABLE}) so the caller
+ * can fall back to the 2D renderer. No framework imports - React, Vue, and
+ * Angular bindings can all mount it.
+ */
+/** No-op sentinel returned when `three` or its OrbitControls addon is missing. */
+const SURFACE_THREE_UNAVAILABLE = {
+    ok: false,
+    resize: () => { },
+    dispose: () => { },
+};
+const FOV = 45;
+/** Dynamically load `three`; returns `null` when the package is not installed. */
+async function loadThree() {
+    try {
+        return (await import('three'));
+    }
+    catch {
+        return null;
+    }
+}
+/** Dynamically load the OrbitControls addon; returns `null` when unavailable. */
+async function loadOrbitControlsCtor() {
+    try {
+        const mod = await import('three/examples/jsm/controls/OrbitControls.js');
+        return mod.OrbitControls;
+    }
+    catch {
+        return null;
+    }
+}
+/** Create the DOM overlay nodes for the axis labels, returned with the layer. */
+function createLabelOverlay(doc, labels) {
+    const layer = doc.createElement('div');
+    Object.assign(layer.style, {
+        position: 'absolute',
+        inset: '0',
+        pointerEvents: 'none',
+        overflow: 'hidden',
+    });
+    const nodes = labels.map((label) => {
+        const node = doc.createElement('div');
+        node.textContent = label.text;
+        const color = label.axis === 'value' ? '#999' : '#666';
+        Object.assign(node.style, {
+            position: 'absolute',
+            fontSize: '9px',
+            color,
+            whiteSpace: 'nowrap',
+            userSelect: 'none',
+            transform: 'translate(-50%, -50%)',
+            willChange: 'left, top',
+        });
+        if (label.axis === 'value') {
+            node.style.writingMode = 'vertical-rl';
+        }
+        layer.appendChild(node);
+        return node;
+    });
+    return { layer, nodes };
+}
+/**
+ * Mount an interactive 3D surface chart into `container` and start rendering.
+ *
+ * Resolves to {@link SURFACE_THREE_UNAVAILABLE} when `three` or its OrbitControls
+ * addon cannot be loaded, so the caller can fall back to a 2D surface renderer.
+ */
+async function mountSurfaceChart3D(container, options) {
+    const three = await loadThree();
+    const OrbitCtrlCtor = three ? await loadOrbitControlsCtor() : null;
+    if (!three || !OrbitCtrlCtor) {
+        return SURFACE_THREE_UNAVAILABLE;
+    }
+    const { cols, rows } = options;
+    let width = Math.max(1, options.width);
+    let height = Math.max(1, options.height);
+    const renderer = new three.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(typeof window === 'undefined' ? 1 : window.devicePixelRatio || 1, options.maxPixelRatio ?? 2));
+    renderer.setSize(width, height, false);
+    const canvas = renderer.domElement;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.style.display = 'block';
+    canvas.style.willChange = 'transform';
+    container.appendChild(canvas);
+    const scene = new three.Scene();
+    scene.add(new three.AmbientLight(0xffffff, 0.6));
+    const key = new three.DirectionalLight(0xffffff, 0.8);
+    key.position.set(5, 8, 5);
+    scene.add(key);
+    const fill = new three.DirectionalLight(0xffffff, 0.3);
+    fill.position.set(-3, 4, -2);
+    scene.add(fill);
+    const camera = new three.PerspectiveCamera(FOV, width / height, 0.1, 1000);
+    const placement = computeCameraPlacement(cols, rows);
+    camera.position.set(...placement.position);
+    const target = new three.Vector3(...placement.target);
+    camera.lookAt(target);
+    // Grid floor under the surface.
+    const { gridWidth, gridDepth } = computeGridExtent(cols, rows);
+    const floorSize = Math.max(gridWidth, gridDepth) * 1.2;
+    const gridFloor = new three.GridHelper(floorSize, Math.max(cols, rows), 0xcccccc, 0xe8e8e8);
+    gridFloor.position.y = -0.02;
+    scene.add(gridFloor);
+    // Surface mesh + optional wireframe.
+    const { geometry, wireGeometry } = buildSurfaceGeometry(three, cols, rows, options.heightMap, options.colorMap);
+    const surfaceMaterial = new three.MeshPhongMaterial({
+        vertexColors: true,
+        side: three.DoubleSide,
+        shininess: 30,
+        transparent: true,
+        opacity: 0.92,
+    });
+    const surfaceMesh = new three.Mesh(geometry, surfaceMaterial);
+    scene.add(surfaceMesh);
+    let wireMaterial = null;
+    if (options.wireframe) {
+        wireMaterial = new three.LineBasicMaterial({
+            color: 0x333333,
+            transparent: true,
+            opacity: 0.25,
+        });
+        scene.add(new three.LineSegments(wireGeometry, wireMaterial));
+    }
+    const controls = new OrbitCtrlCtor(camera, canvas);
+    controls.enablePan = true;
+    controls.enableZoom = true;
+    controls.enableRotate = true;
+    controls.minDistance = 1;
+    controls.maxDistance = 20;
+    controls.maxPolarAngle = Math.PI / 2 + 0.3;
+    controls.target.copy(target);
+    controls.update();
+    // Axis-label DOM overlay, re-projected to screen each frame.
+    const doc = container.ownerDocument ?? document;
+    const labels = buildSurfaceLabels(cols, rows, options.categoryLabels, options.seriesNames);
+    const { layer, nodes } = createLabelOverlay(doc, labels);
+    container.appendChild(layer);
+    const anchors = labels.map((l) => new three.Vector3(...l.anchor));
+    const projected = new three.Vector3();
+    const updateLabels = () => {
+        for (let i = 0; i < nodes.length; i++) {
+            projected.copy(anchors[i]).project(camera);
+            const node = nodes[i];
+            // Hide labels behind the camera.
+            if (projected.z > 1) {
+                node.style.display = 'none';
+                continue;
+            }
+            node.style.display = '';
+            node.style.left = `${((projected.x + 1) / 2) * width}px`;
+            node.style.top = `${((-projected.y + 1) / 2) * height}px`;
+        }
+    };
+    let frame = 0;
+    let disposed = false;
+    const renderLoop = () => {
+        if (disposed) {
+            return;
+        }
+        frame = requestAnimationFrame(renderLoop);
+        controls.update();
+        renderer.render(scene, camera);
+        updateLabels();
+    };
+    frame = requestAnimationFrame(renderLoop);
+    return {
+        ok: true,
+        resize(w, h) {
+            width = Math.max(1, w);
+            height = Math.max(1, h);
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+            renderer.setSize(width, height, false);
+            canvas.style.width = `${width}px`;
+            canvas.style.height = `${height}px`;
+        },
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            cancelAnimationFrame(frame);
+            controls.dispose();
+            geometry.dispose();
+            wireGeometry.dispose();
+            surfaceMaterial.dispose();
+            wireMaterial?.dispose();
+            gridFloor.dispose();
+            scene.clear();
+            renderer.dispose();
+            canvas.remove();
+            layer.remove();
+        },
+    };
+}
+
 /**
  * smartart-drawing.ts: Drawing-shape view-model helpers for the SmartArt
  * renderer, shared across the React, Vue, and Angular bindings.
@@ -26142,6 +26652,298 @@ function issueTrackKey(issue, index) {
     return `${issue.slideIndex}-${issue.type}-${issue.elementId ?? 'slide'}-${index}`;
 }
 
+/**
+ * Accessibility utilities for the PowerPoint viewer.
+ *
+ * Provides functions for computing reading order, generating ARIA labels,
+ * determining ARIA roles, and detecting reduced-motion preferences.
+ *
+ * Pure (framework-agnostic): consumed by every binding's element renderer.
+ *
+ * @module render/accessibility
+ */
+// ---------------------------------------------------------------------------
+// Reading order
+// ---------------------------------------------------------------------------
+/**
+ * Computes a reading-order index for each element on a slide.
+ *
+ * Elements are sorted top-to-bottom first, then left-to-right for elements
+ * at roughly the same vertical position (within a tolerance band).
+ * Returns a `Map<elementId, tabIndex>` with 1-based indices.
+ *
+ * @param elements - The flat list of elements on the current slide.
+ * @param tolerancePx - Vertical tolerance for grouping elements into the
+ *   same "row" (default 20px).
+ * @returns Map from element ID to 1-based reading order index.
+ */
+function computeReadingOrder(elements, tolerancePx = 20) {
+    if (elements.length === 0) {
+        return new Map();
+    }
+    const sorted = [...elements]
+        .filter((el) => !el.hidden)
+        .sort((a, b) => {
+        const dy = a.y - b.y;
+        if (Math.abs(dy) > tolerancePx) {
+            return dy;
+        }
+        return a.x - b.x;
+    });
+    const result = new Map();
+    sorted.forEach((el, idx) => {
+        result.set(el.id, idx + 1);
+    });
+    return result;
+}
+// ---------------------------------------------------------------------------
+// ARIA roles
+// ---------------------------------------------------------------------------
+/**
+ * Maps a PptxElement to its appropriate ARIA role.
+ *
+ * - image / picture => "img"
+ * - table => "table"
+ * - group => "group"
+ * - chart => "img" (complex visualisation treated as image)
+ * - text / shape with text => "text" is not valid; use undefined and rely on
+ *   aria-label alone. However, shapes without text act as decorative images.
+ * - connector => "img"
+ * - media => "application"
+ *
+ * @param element - The element to determine a role for.
+ * @returns The ARIA role string, or undefined when none is needed.
+ */
+function getAriaRole(element) {
+    switch (element.type) {
+        case 'image':
+        case 'picture':
+            return 'img';
+        case 'table':
+            return 'table';
+        case 'group':
+            return 'group';
+        case 'chart':
+            return 'img';
+        case 'smartArt':
+            return 'img';
+        case 'connector':
+            return 'img';
+        case 'media':
+            return 'application';
+        case 'ink':
+            return 'img';
+        case 'model3d':
+            return 'img';
+        case 'text':
+            return undefined;
+        case 'shape': {
+            // Shapes with text act as text containers; shapes without text are decorative
+            if (hasTextProperties(element) && element.text) {
+                return undefined;
+            }
+            return 'img';
+        }
+        default:
+            return undefined;
+    }
+}
+// ---------------------------------------------------------------------------
+// ARIA labels
+// ---------------------------------------------------------------------------
+/**
+ * Generates a human-readable ARIA label for an element.
+ *
+ * Priority:
+ * 1. Image altText (for image/picture elements)
+ * 2. Text content (for text-bearing elements)
+ * 3. Chart title (from chartData)
+ * 4. Element type fallback label
+ *
+ * @param element - The element to generate a label for.
+ * @returns A descriptive string for the `aria-label` attribute.
+ */
+function getAriaLabel(element) {
+    // Image alt text
+    if ((element.type === 'image' || element.type === 'picture') &&
+        'altText' in element &&
+        typeof element.altText === 'string' &&
+        element.altText.trim()) {
+        return element.altText.trim();
+    }
+    // Text content
+    if (hasTextProperties(element) && element.text) {
+        const text = element.text.trim();
+        if (text) {
+            // Truncate long text for the label
+            return text.length > 120 ? `${text.slice(0, 117)}...` : text;
+        }
+    }
+    // Chart title
+    if (element.type === 'chart' && 'chartData' in element && element.chartData) {
+        const cd = element.chartData;
+        if (cd.title) {
+            return `Chart: ${cd.title}`;
+        }
+        return 'Chart';
+    }
+    // SmartArt
+    if (element.type === 'smartArt') {
+        return 'SmartArt diagram';
+    }
+    // Table
+    if (element.type === 'table') {
+        return 'Table';
+    }
+    // Media
+    if (element.type === 'media') {
+        return 'Media element';
+    }
+    // Group
+    if (element.type === 'group') {
+        return 'Group of elements';
+    }
+    // Connector
+    if (element.type === 'connector') {
+        return 'Connector line';
+    }
+    // Ink
+    if (element.type === 'ink') {
+        return 'Ink drawing';
+    }
+    // 3D Model
+    if (element.type === 'model3d') {
+        return '3D Model';
+    }
+    // Shape fallback
+    if (element.type === 'shape') {
+        if ('shapeType' in element && element.shapeType) {
+            return `Shape: ${element.shapeType}`;
+        }
+        return 'Shape';
+    }
+    // Generic fallback
+    return getTypeFallbackLabel(element.type);
+}
+/**
+ * Returns a user-friendly fallback label based on element type.
+ */
+function getTypeFallbackLabel(type) {
+    switch (type) {
+        case 'text':
+            return 'Text box';
+        case 'shape':
+            return 'Shape';
+        case 'image':
+        case 'picture':
+            return 'Image';
+        case 'table':
+            return 'Table';
+        case 'chart':
+            return 'Chart';
+        case 'connector':
+            return 'Connector';
+        case 'group':
+            return 'Group';
+        case 'smartArt':
+            return 'SmartArt';
+        case 'media':
+            return 'Media';
+        case 'ink':
+            return 'Drawing';
+        case 'ole':
+            return 'Embedded object';
+        case 'contentPart':
+            return 'Content part';
+        case 'model3d':
+            return '3D Model';
+        default:
+            return 'Element';
+    }
+}
+// ---------------------------------------------------------------------------
+// ARIA role descriptions
+// ---------------------------------------------------------------------------
+/**
+ * Returns an `aria-roledescription` string for an element, providing
+ * assistive-technology users with a more specific description of the
+ * element's purpose than the generic ARIA role alone.
+ *
+ * @param element - The element to describe.
+ * @returns A human-readable role description, or undefined when none is needed.
+ */
+function getAriaRoleDescription(element) {
+    switch (element.type) {
+        case 'shape': {
+            const shapeType = 'shapeType' in element && typeof element.shapeType === 'string'
+                ? element.shapeType
+                : undefined;
+            if (shapeType) {
+                return `shape: ${shapeType}`;
+            }
+            return 'shape';
+        }
+        case 'chart':
+            return 'chart';
+        case 'connector':
+            return 'connector line';
+        case 'smartArt':
+            return 'diagram';
+        case 'image':
+        case 'picture':
+            return 'image';
+        case 'table':
+            return 'data table';
+        case 'group':
+            return 'grouped elements';
+        case 'media':
+            return 'media player';
+        case 'ink':
+            return 'ink drawing';
+        case 'model3d':
+            return '3D model';
+        default:
+            return undefined;
+    }
+}
+// ---------------------------------------------------------------------------
+// Reduced motion detection
+// ---------------------------------------------------------------------------
+/**
+ * Queries the `prefers-reduced-motion: reduce` media query.
+ *
+ * @returns `true` if the user prefers reduced motion, `false` otherwise.
+ */
+function prefersReducedMotion() {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Returns a CSS-property object (framework-agnostic; spreadable into any
+ * binding's style prop) that disables or tones
+ * down animations and transitions when the user's OS-level
+ * `prefers-reduced-motion: reduce` setting is active.
+ *
+ * When reduced motion is **not** preferred the function returns an empty
+ * object so it can always be spread into a style prop safely.
+ *
+ * @returns CSS properties that suppress animations when appropriate.
+ */
+function getReducedMotionStyles() {
+    if (!prefersReducedMotion()) {
+        return {};
+    }
+    return {
+        animationDuration: '0.001ms',
+        animationIterationCount: 1,
+        transitionDuration: '0.001ms',
+        animationDelay: '0ms',
+        transitionDelay: '0ms',
+    };
+}
+
 /**
  * Convert an array of points into an SVG path `d` attribute string.
  * - 0 points -> `''`
@@ -29380,6 +30182,229 @@ function canUseClipboard(nav) {
         typeof nav.clipboard.writeText === 'function');
 }
 
+/**
+ * is-mobile.ts: Injectable signal-based mobile-detection service plus a
+ * pure `computeIsMobile` helper for unit-testing.
+ *
+ * Ported from: packages/react/src/viewer/hooks/useIsMobile.ts
+ *
+ * The service tracks two independent media conditions:
+ *   - `(pointer: coarse)`: primary pointer is a touch screen / stylus
+ *   - viewport width below {@link MOBILE_BREAKPOINT}
+ *
+ * Both conditions are evaluated once at construction time and then kept live
+ * via `MediaQueryList.addEventListener`. The service is SSR-safe: when
+ * `matchMedia` is not available (server / test environment without a DOM) all
+ * signals default to `false` and no listeners are registered.
+ */
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Viewport width (px) below which the UI switches to mobile layout. */
+const MOBILE_BREAKPOINT = 768;
+/** Tablet breakpoint: below this width (but >= MOBILE) is tablet. */
+const TABLET_BREAKPOINT = 1024;
+/**
+ * Max viewport height (px) at which a *touch* device is treated as mobile
+ * regardless of width. Catches landscape phones (e.g. 915×412), which are wide
+ * enough to fall in the "tablet" width band but far too short for the desktop
+ * ribbon + side panels, so they need the mobile chrome. Tablets in landscape are
+ * taller (~760px+) so they stay on the desktop layout. Mirrors React's
+ * `MOBILE_LANDSCAPE_MAX_HEIGHT` in useIsMobile.ts.
+ */
+const MOBILE_LANDSCAPE_MAX_HEIGHT = 500;
+// ---------------------------------------------------------------------------
+// Pure helpers (no Angular deps, safe in vitest without a DOM)
+// ---------------------------------------------------------------------------
+/**
+ * Decide whether the current environment should use the mobile layout:
+ * - a narrow viewport (`width < MOBILE_BREAKPOINT`), OR
+ * - a short *touch* viewport below the tablet width: a landscape phone, which
+ *   is wide enough to look like a tablet but far too short for the desktop
+ *   ribbon + side panels.
+ *
+ * This mirrors React's `isMobileViewport(width, height, isTouch)` so the three
+ * frameworks switch chrome at the same breakpoints (and the shared mobile e2e
+ * specs pass identically). A tall touch tablet (e.g. 820×1180) is NOT mobile.
+ *
+ * @pure: no side effects, fully testable without a DOM.
+ */
+function computeIsMobile(width, height, isTouch) {
+    if (width < MOBILE_BREAKPOINT) {
+        return true;
+    }
+    return isTouch && height > 0 && height < MOBILE_LANDSCAPE_MAX_HEIGHT && width < TABLET_BREAKPOINT;
+}
+/**
+ * Decide whether the current environment is "tablet" (desktop chrome, but in
+ * the 768–1023px width band). A short landscape-phone touch viewport is mobile,
+ * not tablet (handled by {@link computeIsMobile}).
+ *
+ * @pure
+ */
+function computeIsTablet(width, height, isTouch) {
+    if (computeIsMobile(width, height, isTouch)) {
+        return false;
+    }
+    return width >= MOBILE_BREAKPOINT && width < TABLET_BREAKPOINT;
+}
+// ---------------------------------------------------------------------------
+// IsMobileService
+// ---------------------------------------------------------------------------
+/**
+ * `IsMobileService`: provides reactive signals for the current viewport /
+ * pointer kind so components can switch between mobile and desktop chrome
+ * without subscribing to resize events themselves.
+ *
+ * Inject at the component level (or provide at root); the service cleans up
+ * its `MediaQueryList` listeners automatically via `DestroyRef`.
+ *
+ * ```ts
+ * providers: [IsMobileService]
+ * // or globally:
+ * // provideIsMobile()  (see factory below)
+ * ```
+ *
+ * ```ts
+ * protected readonly mobile = inject(IsMobileService);
+ * // in template:  @if (mobile.isMobile()) { … }
+ * ```
+ */
+class IsMobileService {
+    /** True when the primary pointer is coarse (touch / stylus). */
+    isCoarsePointer = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCoarsePointer" }] : /* istanbul ignore next */ []));
+    /** True when the viewport width is below {@link MOBILE_BREAKPOINT}. */
+    isNarrowViewport = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNarrowViewport" }] : /* istanbul ignore next */ []));
+    /**
+     * True when either the pointer is coarse OR the viewport is narrow.
+     * Use this as the single gate for showing mobile chrome.
+     */
+    isMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    /** True when the viewport is in the tablet range (desktop pointer only). */
+    isTablet = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS pixels the on-screen keyboard currently covers at the bottom of the
+     * layout viewport (0 when no keyboard is open). The orchestrator lifts the
+     * fixed mobile bottom bar by this amount so it stays above the keyboard.
+     */
+    keyboardInset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardInset" }] : /* istanbul ignore next */ []));
+    /** True while {@link keyboardInset} is large enough to count as "open". */
+    isKeyboardOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isKeyboardOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        // Guard: matchMedia / window may not be available in SSR / test envs.
+        if (typeof matchMedia !== 'function' || typeof window === 'undefined') {
+            return;
+        }
+        this._wireKeyboardInset(destroyRef);
+        // ── Coarse-pointer media query (drives the touch flag) ───────────────────
+        const coarseMql = matchMedia('(pointer: coarse)');
+        this.isCoarsePointer.set(coarseMql.matches);
+        const onCoarseChange = (evt) => {
+            this.isCoarsePointer.set(evt.matches);
+            this._recompute();
+        };
+        coarseMql.addEventListener('change', onCoarseChange);
+        // ── Viewport size tracking ───────────────────────────────────────────────
+        // Width-only media queries cannot express the "short landscape phone"
+        // rule (which depends on height + touch), so track the live viewport size
+        // on resize and recompute the derived flags from width/height/touch.
+        const onResize = () => this._recompute();
+        window.addEventListener('resize', onResize);
+        if (typeof screen !== 'undefined' && screen.orientation) {
+            screen.orientation.addEventListener('change', onResize);
+        }
+        this._recompute();
+        // ── Cleanup on destroy ───────────────────────────────────────────────────
+        destroyRef.onDestroy(() => {
+            coarseMql.removeEventListener('change', onCoarseChange);
+            window.removeEventListener('resize', onResize);
+            if (typeof screen !== 'undefined' && screen.orientation) {
+                screen.orientation.removeEventListener('change', onResize);
+            }
+        });
+    }
+    /** Recompute all derived flags from the live viewport size + pointer kind. */
+    _recompute() {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const touch = this.isCoarsePointer();
+        this.isNarrowViewport.set(width < MOBILE_BREAKPOINT);
+        this.isMobile.set(computeIsMobile(width, height, touch));
+        this.isTablet.set(computeIsTablet(width, height, touch));
+    }
+    /**
+     * Track the on-screen-keyboard inset via the `VisualViewport` API and keep the
+     * focused editable visible: when the keyboard shrinks the visual viewport,
+     * update {@link keyboardInset} / {@link isKeyboardOpen} and scroll the active
+     * input / textarea / contenteditable into the area above the keyboard. No-op
+     * when `visualViewport` is unavailable (desktop / SSR), so desktop is unchanged.
+     */
+    _wireKeyboardInset(destroyRef) {
+        const vv = window.visualViewport;
+        if (!vv) {
+            return;
+        }
+        const update = () => {
+            const metrics = readViewportMetrics(window);
+            const inset = metrics ? computeKeyboardInset(metrics) : 0;
+            this.keyboardInset.set(inset);
+            this.isKeyboardOpen.set(isKeyboardOpen(inset));
+            if (inset > 0) {
+                window.requestAnimationFrame(() => this._scrollFocusedIntoView(inset));
+            }
+        };
+        const onFocusIn = () => {
+            window.requestAnimationFrame(() => {
+                const metrics = readViewportMetrics(window);
+                const inset = metrics ? computeKeyboardInset(metrics) : 0;
+                if (inset > 0) {
+                    this._scrollFocusedIntoView(inset);
+                }
+            });
+        };
+        update();
+        vv.addEventListener('resize', update);
+        vv.addEventListener('scroll', update);
+        document.addEventListener('focusin', onFocusIn);
+        destroyRef.onDestroy(() => {
+            vv.removeEventListener('resize', update);
+            vv.removeEventListener('scroll', update);
+            document.removeEventListener('focusin', onFocusIn);
+        });
+    }
+    /** Scroll the focused editable into the area above the keyboard, if needed. */
+    _scrollFocusedIntoView(keyboardInset) {
+        if (keyboardInset <= 0 || typeof document === 'undefined') {
+            return;
+        }
+        const active = document.activeElement;
+        if (!(active instanceof HTMLElement)) {
+            return;
+        }
+        const tag = active.tagName;
+        if (tag !== 'INPUT' && tag !== 'TEXTAREA' && !active.isContentEditable) {
+            return;
+        }
+        const rect = active.getBoundingClientRect();
+        const delta = computeScrollDelta({ top: rect.top, bottom: rect.bottom }, window.innerHeight, keyboardInset);
+        if (delta !== 0) {
+            window.scrollBy({ top: delta, behavior: 'smooth' });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IsMobileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IsMobileService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IsMobileService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 /**
  * modal-dialog.component.ts: Reusable, accessible modal dialog shell.
  *
@@ -29406,6 +30431,16 @@ function canUseClipboard(nav) {
  * </pptx-modal-dialog>
  * ```
  */
+/**
+ * Map the mobile flag to the modal-panel class list. Pure (no Angular / DOM) so
+ * it can be unit-tested without TestBed: on mobile the panel gets the
+ * `is-mobile` modifier that turns it into a bottom sheet (matching the CSS media
+ * query, but driven by the {@link IsMobileService} 768px breakpoint so the three
+ * frameworks switch chrome at the same width).
+ */
+function modalPanelClass(isMobile) {
+    return isMobile ? 'pptx-ng-modal-panel is-mobile' : 'pptx-ng-modal-panel';
+}
 class ModalDialogComponent {
     /** Whether the dialog is visible. */
     open = input(false, /* @ts-ignore */
@@ -29415,6 +30450,14 @@ class ModalDialogComponent {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     /** Fired on backdrop click, the `×` button, and `Escape`. */
     close = output();
+    /** Reactive viewport / pointer flags (drives the bottom-sheet layout). */
+    mobile = inject(IsMobileService);
+    /**
+     * Panel class list: gains the `is-mobile` bottom-sheet modifier under the
+     * mobile breakpoint. See {@link modalPanelClass}.
+     */
+    panelClass = computed(() => modalPanelClass(this.mobile.isMobile()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** Close on `Escape`, regardless of where focus currently sits. */
     onDocumentKeydown(event) {
         if (!this.open()) {
@@ -29477,11 +30520,15 @@ class ModalDialogComponent {
         this.dragY.set(0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ModalDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ModalDialogComponent, isStandalone: true, selector: "pptx-modal-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ModalDialogComponent, isStandalone: true, selector: "pptx-modal-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" } }, providers: [IsMobileService], ngImport: i0, template: `
 		@if (open()) {
-			<div class="pptx-ng-modal-backdrop" (click)="onBackdropClick()">
+			<div
+				class="pptx-ng-modal-backdrop"
+				[class.is-mobile]="mobile.isMobile()"
+				(click)="onBackdropClick()"
+			>
 				<div
-					class="pptx-ng-modal-panel"
+					[class]="panelClass()"
 					role="dialog"
 					aria-modal="true"
 					[attr.aria-label]="title() || null"
@@ -29521,15 +30568,19 @@ class ModalDialogComponent {
 				</div>
 			</div>
 		}
-	`, isInline: true, styles: [".pptx-ng-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#00000073}.pptx-ng-modal-panel{display:flex;flex-direction:column;min-width:320px;max-width:min(92vw,480px);max-height:88vh;overflow:hidden;background:var(--pptx-popover, #ffffff);color:var(--pptx-foreground, #111827);border:1px solid var(--pptx-border, #e5e7eb);border-radius:var(--pptx-radius, 8px);box-shadow:0 10px 40px #00000059}.pptx-ng-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pptx-border, #e5e7eb);touch-action:none}.pptx-ng-modal-title{margin:0;font-size:14px;font-weight:600;line-height:1.4}.pptx-ng-modal-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;font-size:18px;line-height:1;color:var(--pptx-muted-foreground, #6b7280);background:transparent;border:none;border-radius:4px;cursor:pointer}.pptx-ng-modal-close:hover{color:var(--pptx-foreground, #111827);background:var(--pptx-muted, #f3f4f6)}.pptx-ng-modal-body{padding:16px;overflow-y:auto}.pptx-ng-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--pptx-border, #e5e7eb)}.pptx-ng-modal-footer:empty{display:none}@media(max-width:640px),(pointer:coarse){.pptx-ng-modal-backdrop{align-items:flex-end;justify-content:stretch}.pptx-ng-modal-panel{min-width:0;max-width:none;width:100%;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-radius:16px 16px 0 0;padding-bottom:max(env(safe-area-inset-bottom),0px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#00000073}.pptx-ng-modal-panel{display:flex;flex-direction:column;min-width:320px;max-width:min(92vw,480px);max-height:88vh;overflow:hidden;background:var(--pptx-popover, #ffffff);color:var(--pptx-foreground, #111827);border:1px solid var(--pptx-border, #e5e7eb);border-radius:var(--pptx-radius, 8px);box-shadow:0 10px 40px #00000059}.pptx-ng-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pptx-border, #e5e7eb);touch-action:none}.pptx-ng-modal-title{margin:0;font-size:14px;font-weight:600;line-height:1.4}.pptx-ng-modal-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;font-size:18px;line-height:1;color:var(--pptx-muted-foreground, #6b7280);background:transparent;border:none;border-radius:4px;cursor:pointer}.pptx-ng-modal-close:hover{color:var(--pptx-foreground, #111827);background:var(--pptx-muted, #f3f4f6)}.pptx-ng-modal-body{padding:16px;overflow-y:auto}.pptx-ng-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--pptx-border, #e5e7eb)}.pptx-ng-modal-footer:empty{display:none}.pptx-ng-modal-backdrop.is-mobile{align-items:flex-end;justify-content:stretch}.pptx-ng-modal-panel.is-mobile{min-width:0;max-width:none;width:100%;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-radius:16px 16px 0 0;padding-bottom:max(env(safe-area-inset-bottom),0px)}@media(max-width:767px),(pointer:coarse){.pptx-ng-modal-backdrop{align-items:flex-end;justify-content:stretch}.pptx-ng-modal-panel{min-width:0;max-width:none;width:100%;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-radius:16px 16px 0 0;padding-bottom:max(env(safe-area-inset-bottom),0px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ModalDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-modal-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'pptx-modal-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IsMobileService], template: `
 		@if (open()) {
-			<div class="pptx-ng-modal-backdrop" (click)="onBackdropClick()">
+			<div
+				class="pptx-ng-modal-backdrop"
+				[class.is-mobile]="mobile.isMobile()"
+				(click)="onBackdropClick()"
+			>
 				<div
-					class="pptx-ng-modal-panel"
+					[class]="panelClass()"
 					role="dialog"
 					aria-modal="true"
 					[attr.aria-label]="title() || null"
@@ -29569,7 +30620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 				</div>
 			</div>
 		}
-	`, styles: [".pptx-ng-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#00000073}.pptx-ng-modal-panel{display:flex;flex-direction:column;min-width:320px;max-width:min(92vw,480px);max-height:88vh;overflow:hidden;background:var(--pptx-popover, #ffffff);color:var(--pptx-foreground, #111827);border:1px solid var(--pptx-border, #e5e7eb);border-radius:var(--pptx-radius, 8px);box-shadow:0 10px 40px #00000059}.pptx-ng-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pptx-border, #e5e7eb);touch-action:none}.pptx-ng-modal-title{margin:0;font-size:14px;font-weight:600;line-height:1.4}.pptx-ng-modal-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;font-size:18px;line-height:1;color:var(--pptx-muted-foreground, #6b7280);background:transparent;border:none;border-radius:4px;cursor:pointer}.pptx-ng-modal-close:hover{color:var(--pptx-foreground, #111827);background:var(--pptx-muted, #f3f4f6)}.pptx-ng-modal-body{padding:16px;overflow-y:auto}.pptx-ng-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--pptx-border, #e5e7eb)}.pptx-ng-modal-footer:empty{display:none}@media(max-width:640px),(pointer:coarse){.pptx-ng-modal-backdrop{align-items:flex-end;justify-content:stretch}.pptx-ng-modal-panel{min-width:0;max-width:none;width:100%;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-radius:16px 16px 0 0;padding-bottom:max(env(safe-area-inset-bottom),0px)}}\n"] }]
+	`, styles: [".pptx-ng-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#00000073}.pptx-ng-modal-panel{display:flex;flex-direction:column;min-width:320px;max-width:min(92vw,480px);max-height:88vh;overflow:hidden;background:var(--pptx-popover, #ffffff);color:var(--pptx-foreground, #111827);border:1px solid var(--pptx-border, #e5e7eb);border-radius:var(--pptx-radius, 8px);box-shadow:0 10px 40px #00000059}.pptx-ng-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pptx-border, #e5e7eb);touch-action:none}.pptx-ng-modal-title{margin:0;font-size:14px;font-weight:600;line-height:1.4}.pptx-ng-modal-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;font-size:18px;line-height:1;color:var(--pptx-muted-foreground, #6b7280);background:transparent;border:none;border-radius:4px;cursor:pointer}.pptx-ng-modal-close:hover{color:var(--pptx-foreground, #111827);background:var(--pptx-muted, #f3f4f6)}.pptx-ng-modal-body{padding:16px;overflow-y:auto}.pptx-ng-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--pptx-border, #e5e7eb)}.pptx-ng-modal-footer:empty{display:none}.pptx-ng-modal-backdrop.is-mobile{align-items:flex-end;justify-content:stretch}.pptx-ng-modal-panel.is-mobile{min-width:0;max-width:none;width:100%;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-radius:16px 16px 0 0;padding-bottom:max(env(safe-area-inset-bottom),0px)}@media(max-width:767px),(pointer:coarse){.pptx-ng-modal-backdrop{align-items:flex-end;justify-content:stretch}.pptx-ng-modal-panel{min-width:0;max-width:none;width:100%;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-radius:16px 16px 0 0;padding-bottom:max(env(safe-area-inset-bottom),0px)}}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], onDocumentKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -40197,6 +41248,15 @@ class InspectorPanelComponent {
     slideIndex = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slideIndex" }] : /* istanbul ignore next */ []));
     editor = inject(EditorStateService);
+    /** Reactive viewport / pointer flags (drives the bottom-sheet layout). */
+    mobile = inject(IsMobileService);
+    /**
+     * Root class list: gains the `is-mobile` modifier under the mobile
+     * breakpoint so the panel becomes a full-width, touch-sized bottom sheet.
+     * See {@link inspectorRootClass}.
+     */
+    inspectorClass = computed(() => inspectorRootClass(this.mobile.isMobile()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inspectorClass" }] : /* istanbul ignore next */ []));
     /** Alias so the template can call el() without conflicting with Angular internals. */
     el = computed(() => this.element(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
@@ -40372,7 +41432,7 @@ class InspectorPanelComponent {
         this.editor.updateElement(this.slideIndex(), cur.id, textStylePatch(cur, { underline: !this.currentUnderline() }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InspectorPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: InspectorPanelComponent, isStandalone: true, selector: "pptx-inspector-panel", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: InspectorPanelComponent, isStandalone: true, selector: "pptx-inspector-panel", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, slideIndex: { classPropertyName: "slideIndex", publicName: "slideIndex", isSignal: true, isRequired: true, transformFunction: null } }, providers: [IsMobileService], ngImport: i0, template: `
 		<!--
 			NOTE (mobile-safe inputs): every numeric / colour input is keyed on the
 			selected element's id via @if blocks. Angular destroys and recreates the
@@ -40382,7 +41442,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="pptx-ng-inspector" aria-label="Element properties">
+		<aside [class]="inspectorClass()" aria-label="Element properties">
 			<!-- ── Transform: Position & Size ─────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
 				<h3 class="pptx-ng-inspector__heading">Transform</h3>
@@ -40665,7 +41725,7 @@ class InspectorPanelComponent {
 				</div>
 			</section>
 		</aside>
-	`, isInline: true, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}@media(pointer:coarse),(max-width:640px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "component", type: GradientPickerComponent, selector: "pptx-gradient-picker", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: EffectsPanelComponent, selector: "pptx-effects-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TextAdvancedPanelComponent, selector: "pptx-text-advanced-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TableDataEditorComponent, selector: "pptx-table-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDataEditorComponent, selector: "pptx-chart-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: SmartArtPropertiesComponent, selector: "pptx-smart-art-properties", inputs: ["smartArtData", "canEdit"], outputs: ["smartArtDataChange"] }, { kind: "component", type: AnimationAuthorPanelComponent, selector: "pptx-animation-author-panel", inputs: ["element", "slideIndex", "animations", "canEdit"], outputs: ["animationsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}.pptx-ng-inspector.is-mobile{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}@media(pointer:coarse),(max-width:767px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"], dependencies: [{ kind: "component", type: GradientPickerComponent, selector: "pptx-gradient-picker", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: EffectsPanelComponent, selector: "pptx-effects-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TextAdvancedPanelComponent, selector: "pptx-text-advanced-panel", inputs: ["element"], outputs: ["patch"] }, { kind: "component", type: TableDataEditorComponent, selector: "pptx-table-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: ChartDataEditorComponent, selector: "pptx-chart-data-editor", inputs: ["element", "canEdit"], outputs: ["elementChange"] }, { kind: "component", type: SmartArtPropertiesComponent, selector: "pptx-smart-art-properties", inputs: ["smartArtData", "canEdit"], outputs: ["smartArtDataChange"] }, { kind: "component", type: AnimationAuthorPanelComponent, selector: "pptx-animation-author-panel", inputs: ["element", "slideIndex", "animations", "canEdit"], outputs: ["animationsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InspectorPanelComponent, decorators: [{
             type: Component,
@@ -40677,7 +41737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         ChartDataEditorComponent,
                         SmartArtPropertiesComponent,
                         AnimationAuthorPanelComponent,
-                    ], template: `
+                    ], providers: [IsMobileService], template: `
 		<!--
 			NOTE (mobile-safe inputs): every numeric / colour input is keyed on the
 			selected element's id via @if blocks. Angular destroys and recreates the
@@ -40687,7 +41747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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="pptx-ng-inspector" aria-label="Element properties">
+		<aside [class]="inspectorClass()" aria-label="Element properties">
 			<!-- ── Transform: Position & Size ─────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
 				<h3 class="pptx-ng-inspector__heading">Transform</h3>
@@ -40970,8 +42030,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 				</div>
 			</section>
 		</aside>
-	`, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}@media(pointer:coarse),(max-width:640px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"] }]
+	`, styles: [".pptx-ng-inspector{display:flex;flex-direction:column;gap:0;padding:.5rem;background:var(--pptx-inspector-bg, #1e1e1e);color:var(--pptx-inspector-fg, #e0e0e0);font-size:12px;min-width:220px;overflow-y:auto}.pptx-ng-inspector__section{padding:.5rem 0;border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__section:last-child{border-bottom:none}.pptx-ng-inspector__heading{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);margin:0 0 .35rem}.pptx-ng-inspector__details{border-bottom:1px solid var(--pptx-inspector-border, #333)}.pptx-ng-inspector__summary{padding:.5rem 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--pptx-inspector-muted, #888);cursor:pointer;-webkit-user-select:none;user-select:none}.pptx-ng-inspector__row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}.pptx-ng-inspector__row:last-child{margin-bottom:0}.pptx-ng-inspector__row--toggles{gap:.25rem}.pptx-ng-inspector__label{font-size:10px;color:var(--pptx-inspector-muted, #888);min-width:32px;text-align:right;flex-shrink:0}.pptx-ng-inspector__input{background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;padding:2px 4px;font-size:12px}.pptx-ng-inspector__input--number{width:62px;text-align:right}.pptx-ng-inspector__color{width:32px;height:22px;border:1px solid var(--pptx-inspector-border, #444);border-radius:3px;padding:1px;cursor:pointer;background:transparent;flex-shrink:0}.pptx-ng-inspector__toggle{width:26px;height:22px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}.pptx-ng-inspector.is-mobile{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector.is-mobile .pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}@media(pointer:coarse),(max-width:767px){.pptx-ng-inspector{width:100%;min-width:0;box-sizing:border-box;font-size:14px}.pptx-ng-inspector__row{flex-wrap:wrap;gap:.5rem}.pptx-ng-inspector__label{min-width:28px}.pptx-ng-inspector__input{flex:1 1 auto;min-height:40px;font-size:16px;padding:6px 8px}.pptx-ng-inspector__input--number{width:auto;min-width:72px}.pptx-ng-inspector__color{width:44px;height:40px}.pptx-ng-inspector__toggle{min-width:44px;width:auto;flex:1 1 auto;height:40px;font-size:15px}.pptx-ng-inspector__btn{min-height:40px;padding:8px 10px;font-size:13px}}.pptx-ng-inspector__toggle.is-active{background:var(--pptx-inspector-active, #0078d4);border-color:var(--pptx-inspector-active, #0078d4);color:#fff}.pptx-ng-inspector__btn{flex:1;padding:3px 6px;background:var(--pptx-inspector-input-bg, #2d2d2d);border:1px solid var(--pptx-inspector-border, #444);color:inherit;border-radius:3px;cursor:pointer;font-size:11px;white-space:nowrap}.pptx-ng-inspector__btn:hover{background:var(--pptx-inspector-hover, #3a3a3a)}.pptx-ng-inspector__btn--danger{color:var(--pptx-inspector-danger, #f47c7c);border-color:var(--pptx-inspector-danger-border, #6b2a2a)}.pptx-ng-inspector__btn--danger:hover{background:var(--pptx-inspector-danger-hover, #4a1a1a)}\n"] }]
         }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], slideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideIndex", required: true }] }] } });
+// ── Pure helpers (no Angular / DOM; unit-testable without TestBed) ────────────
+/**
+ * Map the mobile flag to the inspector root class list. On mobile the panel
+ * gains the `is-mobile` modifier that makes it a full-width, touch-sized
+ * bottom-sheet body (the orchestrator host wraps it with the drawer chrome).
+ */
+function inspectorRootClass(isMobile) {
+    return isMobile ? 'pptx-ng-inspector is-mobile' : 'pptx-ng-inspector';
+}
 // ── Module-private helpers ───────────────────────────────────────────────────
 /** Extract a finite number from an input change event, or null if invalid. */
 function numberFromEvent(event) {
@@ -40992,229 +42061,6 @@ function stringFromEvent(event) {
     return val.length > 0 ? val : null;
 }
 
-/**
- * is-mobile.ts: Injectable signal-based mobile-detection service plus a
- * pure `computeIsMobile` helper for unit-testing.
- *
- * Ported from: packages/react/src/viewer/hooks/useIsMobile.ts
- *
- * The service tracks two independent media conditions:
- *   - `(pointer: coarse)`: primary pointer is a touch screen / stylus
- *   - viewport width below {@link MOBILE_BREAKPOINT}
- *
- * Both conditions are evaluated once at construction time and then kept live
- * via `MediaQueryList.addEventListener`. The service is SSR-safe: when
- * `matchMedia` is not available (server / test environment without a DOM) all
- * signals default to `false` and no listeners are registered.
- */
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-/** Viewport width (px) below which the UI switches to mobile layout. */
-const MOBILE_BREAKPOINT = 768;
-/** Tablet breakpoint: below this width (but >= MOBILE) is tablet. */
-const TABLET_BREAKPOINT = 1024;
-/**
- * Max viewport height (px) at which a *touch* device is treated as mobile
- * regardless of width. Catches landscape phones (e.g. 915×412), which are wide
- * enough to fall in the "tablet" width band but far too short for the desktop
- * ribbon + side panels, so they need the mobile chrome. Tablets in landscape are
- * taller (~760px+) so they stay on the desktop layout. Mirrors React's
- * `MOBILE_LANDSCAPE_MAX_HEIGHT` in useIsMobile.ts.
- */
-const MOBILE_LANDSCAPE_MAX_HEIGHT = 500;
-// ---------------------------------------------------------------------------
-// Pure helpers (no Angular deps, safe in vitest without a DOM)
-// ---------------------------------------------------------------------------
-/**
- * Decide whether the current environment should use the mobile layout:
- * - a narrow viewport (`width < MOBILE_BREAKPOINT`), OR
- * - a short *touch* viewport below the tablet width: a landscape phone, which
- *   is wide enough to look like a tablet but far too short for the desktop
- *   ribbon + side panels.
- *
- * This mirrors React's `isMobileViewport(width, height, isTouch)` so the three
- * frameworks switch chrome at the same breakpoints (and the shared mobile e2e
- * specs pass identically). A tall touch tablet (e.g. 820×1180) is NOT mobile.
- *
- * @pure: no side effects, fully testable without a DOM.
- */
-function computeIsMobile(width, height, isTouch) {
-    if (width < MOBILE_BREAKPOINT) {
-        return true;
-    }
-    return isTouch && height > 0 && height < MOBILE_LANDSCAPE_MAX_HEIGHT && width < TABLET_BREAKPOINT;
-}
-/**
- * Decide whether the current environment is "tablet" (desktop chrome, but in
- * the 768–1023px width band). A short landscape-phone touch viewport is mobile,
- * not tablet (handled by {@link computeIsMobile}).
- *
- * @pure
- */
-function computeIsTablet(width, height, isTouch) {
-    if (computeIsMobile(width, height, isTouch)) {
-        return false;
-    }
-    return width >= MOBILE_BREAKPOINT && width < TABLET_BREAKPOINT;
-}
-// ---------------------------------------------------------------------------
-// IsMobileService
-// ---------------------------------------------------------------------------
-/**
- * `IsMobileService`: provides reactive signals for the current viewport /
- * pointer kind so components can switch between mobile and desktop chrome
- * without subscribing to resize events themselves.
- *
- * Inject at the component level (or provide at root); the service cleans up
- * its `MediaQueryList` listeners automatically via `DestroyRef`.
- *
- * ```ts
- * providers: [IsMobileService]
- * // or globally:
- * // provideIsMobile()  (see factory below)
- * ```
- *
- * ```ts
- * protected readonly mobile = inject(IsMobileService);
- * // in template:  @if (mobile.isMobile()) { … }
- * ```
- */
-class IsMobileService {
-    /** True when the primary pointer is coarse (touch / stylus). */
-    isCoarsePointer = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isCoarsePointer" }] : /* istanbul ignore next */ []));
-    /** True when the viewport width is below {@link MOBILE_BREAKPOINT}. */
-    isNarrowViewport = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isNarrowViewport" }] : /* istanbul ignore next */ []));
-    /**
-     * True when either the pointer is coarse OR the viewport is narrow.
-     * Use this as the single gate for showing mobile chrome.
-     */
-    isMobile = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
-    /** True when the viewport is in the tablet range (desktop pointer only). */
-    isTablet = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []));
-    /**
-     * CSS pixels the on-screen keyboard currently covers at the bottom of the
-     * layout viewport (0 when no keyboard is open). The orchestrator lifts the
-     * fixed mobile bottom bar by this amount so it stays above the keyboard.
-     */
-    keyboardInset = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "keyboardInset" }] : /* istanbul ignore next */ []));
-    /** True while {@link keyboardInset} is large enough to count as "open". */
-    isKeyboardOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isKeyboardOpen" }] : /* istanbul ignore next */ []));
-    constructor() {
-        const destroyRef = inject(DestroyRef);
-        // Guard: matchMedia / window may not be available in SSR / test envs.
-        if (typeof matchMedia !== 'function' || typeof window === 'undefined') {
-            return;
-        }
-        this._wireKeyboardInset(destroyRef);
-        // ── Coarse-pointer media query (drives the touch flag) ───────────────────
-        const coarseMql = matchMedia('(pointer: coarse)');
-        this.isCoarsePointer.set(coarseMql.matches);
-        const onCoarseChange = (evt) => {
-            this.isCoarsePointer.set(evt.matches);
-            this._recompute();
-        };
-        coarseMql.addEventListener('change', onCoarseChange);
-        // ── Viewport size tracking ───────────────────────────────────────────────
-        // Width-only media queries cannot express the "short landscape phone"
-        // rule (which depends on height + touch), so track the live viewport size
-        // on resize and recompute the derived flags from width/height/touch.
-        const onResize = () => this._recompute();
-        window.addEventListener('resize', onResize);
-        if (typeof screen !== 'undefined' && screen.orientation) {
-            screen.orientation.addEventListener('change', onResize);
-        }
-        this._recompute();
-        // ── Cleanup on destroy ───────────────────────────────────────────────────
-        destroyRef.onDestroy(() => {
-            coarseMql.removeEventListener('change', onCoarseChange);
-            window.removeEventListener('resize', onResize);
-            if (typeof screen !== 'undefined' && screen.orientation) {
-                screen.orientation.removeEventListener('change', onResize);
-            }
-        });
-    }
-    /** Recompute all derived flags from the live viewport size + pointer kind. */
-    _recompute() {
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-        const touch = this.isCoarsePointer();
-        this.isNarrowViewport.set(width < MOBILE_BREAKPOINT);
-        this.isMobile.set(computeIsMobile(width, height, touch));
-        this.isTablet.set(computeIsTablet(width, height, touch));
-    }
-    /**
-     * Track the on-screen-keyboard inset via the `VisualViewport` API and keep the
-     * focused editable visible: when the keyboard shrinks the visual viewport,
-     * update {@link keyboardInset} / {@link isKeyboardOpen} and scroll the active
-     * input / textarea / contenteditable into the area above the keyboard. No-op
-     * when `visualViewport` is unavailable (desktop / SSR), so desktop is unchanged.
-     */
-    _wireKeyboardInset(destroyRef) {
-        const vv = window.visualViewport;
-        if (!vv) {
-            return;
-        }
-        const update = () => {
-            const metrics = readViewportMetrics(window);
-            const inset = metrics ? computeKeyboardInset(metrics) : 0;
-            this.keyboardInset.set(inset);
-            this.isKeyboardOpen.set(isKeyboardOpen(inset));
-            if (inset > 0) {
-                window.requestAnimationFrame(() => this._scrollFocusedIntoView(inset));
-            }
-        };
-        const onFocusIn = () => {
-            window.requestAnimationFrame(() => {
-                const metrics = readViewportMetrics(window);
-                const inset = metrics ? computeKeyboardInset(metrics) : 0;
-                if (inset > 0) {
-                    this._scrollFocusedIntoView(inset);
-                }
-            });
-        };
-        update();
-        vv.addEventListener('resize', update);
-        vv.addEventListener('scroll', update);
-        document.addEventListener('focusin', onFocusIn);
-        destroyRef.onDestroy(() => {
-            vv.removeEventListener('resize', update);
-            vv.removeEventListener('scroll', update);
-            document.removeEventListener('focusin', onFocusIn);
-        });
-    }
-    /** Scroll the focused editable into the area above the keyboard, if needed. */
-    _scrollFocusedIntoView(keyboardInset) {
-        if (keyboardInset <= 0 || typeof document === 'undefined') {
-            return;
-        }
-        const active = document.activeElement;
-        if (!(active instanceof HTMLElement)) {
-            return;
-        }
-        const tag = active.tagName;
-        if (tag !== 'INPUT' && tag !== 'TEXTAREA' && !active.isContentEditable) {
-            return;
-        }
-        const rect = active.getBoundingClientRect();
-        const delta = computeScrollDelta({ top: rect.top, bottom: rect.bottom }, window.innerHeight, keyboardInset);
-        if (delta !== 0) {
-            window.scrollBy({ top: delta, behavior: 'smooth' });
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IsMobileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IsMobileService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IsMobileService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 /**
  * `LoadContentService`: Angular port of the React `useLoadContent` hook and
  * the Vue `useLoadContent` composable.
@@ -53172,6 +54018,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * }
  * ```
  */
+/**
+ * Map the mobile flag to the print-dialog panel class list. Pure (no Angular /
+ * DOM) so it can be unit-tested without TestBed. On mobile the dialog gains the
+ * `is-mobile` modifier that turns it into a full-width bottom sheet.
+ */
+function printDialogClass(isMobile) {
+    return isMobile ? 'pptx-ng-print-dialog is-mobile' : 'pptx-ng-print-dialog';
+}
 class PrintDialogComponent {
     // -------------------------------------------------------------------------
     // Inputs / outputs
@@ -53192,6 +54046,14 @@ class PrintDialogComponent {
     print = output();
     /** Emits when the dialog is dismissed (Cancel / Escape / backdrop). */
     cancel = output();
+    /** Reactive viewport / pointer flags (drives the bottom-sheet layout). */
+    mobile = inject(IsMobileService);
+    /**
+     * Dialog class list: gains the `is-mobile` bottom-sheet modifier under the
+     * mobile breakpoint. See {@link printDialogClass}.
+     */
+    dialogClass = computed(() => printDialogClass(this.mobile.isMobile()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogClass" }] : /* istanbul ignore next */ []));
     // -------------------------------------------------------------------------
     // State
     // -------------------------------------------------------------------------
@@ -53259,15 +54121,16 @@ class PrintDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PrintDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PrintDialogComponent, isStandalone: true, selector: "pptx-print-dialog", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, activeSlideIndex: { classPropertyName: "activeSlideIndex", publicName: "activeSlideIndex", isSignal: true, isRequired: true, transformFunction: null }, defaultSlidesPerPage: { classPropertyName: "defaultSlidesPerPage", publicName: "defaultSlidesPerPage", isSignal: true, isRequired: false, transformFunction: null }, defaultFrameSlides: { classPropertyName: "defaultFrameSlides", publicName: "defaultFrameSlides", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { print: "print", cancel: "cancel" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: PrintDialogComponent, isStandalone: true, selector: "pptx-print-dialog", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: true, transformFunction: null }, activeSlideIndex: { classPropertyName: "activeSlideIndex", publicName: "activeSlideIndex", isSignal: true, isRequired: true, transformFunction: null }, defaultSlidesPerPage: { classPropertyName: "defaultSlidesPerPage", publicName: "defaultSlidesPerPage", isSignal: true, isRequired: false, transformFunction: null }, defaultFrameSlides: { classPropertyName: "defaultFrameSlides", publicName: "defaultFrameSlides", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { print: "print", cancel: "cancel" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [IsMobileService], ngImport: i0, template: `
 		<div
 			class="pptx-ng-print-dialog__backdrop"
+			[class.is-mobile]="mobile.isMobile()"
 			role="dialog"
 			aria-modal="true"
 			aria-label="Print"
 			(click)="onBackdropClick($event)"
 		>
-			<div class="pptx-ng-print-dialog">
+			<div [class]="dialogClass()">
 				<!-- Header -->
 				<div class="pptx-ng-print-dialog__header">
 					<h2 class="pptx-ng-print-dialog__title">Print</h2>
@@ -53313,19 +54176,20 @@ class PrintDialogComponent {
 				</div>
 			</div>
 		</div>
-	`, isInline: true, styles: [".pptx-ng-print-dialog__backdrop{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-print-dialog{display:flex;flex-direction:column;width:780px;max-width:calc(100vw - 2rem);max-height:90vh;border:1px solid rgba(255,255,255,.12);border-radius:.75rem;background:#1e1e1e;color:#e5e5e5;box-shadow:0 20px 60px #0009}.pptx-ng-print-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__title{margin:0;font-size:.875rem;font-weight:600;color:#fff}.pptx-ng-print-dialog__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .12s,color .12s}.pptx-ng-print-dialog__icon-btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__body{flex:1;overflow-y:auto;padding:1rem 1.25rem}.pptx-ng-print-dialog__footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__estimate{font-size:.75rem;color:#ffffff80}.pptx-ng-print-dialog__actions{display:flex;gap:.5rem}.pptx-ng-print-dialog__btn{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0a;color:#ffffffb3;font-size:.8125rem;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.pptx-ng-print-dialog__btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__btn--primary{border-color:#3b82f6;background:#3b82f6;color:#fff}.pptx-ng-print-dialog__btn--primary:hover{background:#2f6fd6}\n"], dependencies: [{ kind: "component", type: PrintSettingsPanelComponent, selector: "pptx-print-settings-panel", inputs: ["settings", "totalSlides", "activeSlideIndex"], outputs: ["settingsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-print-dialog__backdrop{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-print-dialog{display:flex;flex-direction:column;width:780px;max-width:calc(100vw - 2rem);max-height:90vh;border:1px solid rgba(255,255,255,.12);border-radius:.75rem;background:#1e1e1e;color:#e5e5e5;box-shadow:0 20px 60px #0009}.pptx-ng-print-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__title{margin:0;font-size:.875rem;font-weight:600;color:#fff}.pptx-ng-print-dialog__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .12s,color .12s}.pptx-ng-print-dialog__icon-btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__body{flex:1;overflow-y:auto;padding:1rem 1.25rem}.pptx-ng-print-dialog__footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__estimate{font-size:.75rem;color:#ffffff80}.pptx-ng-print-dialog__actions{display:flex;gap:.5rem}.pptx-ng-print-dialog__btn{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0a;color:#ffffffb3;font-size:.8125rem;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.pptx-ng-print-dialog__btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__btn--primary{border-color:#3b82f6;background:#3b82f6;color:#fff}.pptx-ng-print-dialog__btn--primary:hover{background:#2f6fd6}.pptx-ng-print-dialog__backdrop.is-mobile{align-items:flex-end}.pptx-ng-print-dialog.is-mobile{width:100%;max-width:none;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-top-left-radius:1rem;border-top-right-radius:1rem;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:max(env(safe-area-inset-bottom),0px)}@media(max-width:767px),(pointer:coarse){.pptx-ng-print-dialog__backdrop{align-items:flex-end}.pptx-ng-print-dialog{width:100%;max-width:none;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-top-left-radius:1rem;border-top-right-radius:1rem;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:max(env(safe-area-inset-bottom),0px)}}\n"], dependencies: [{ kind: "component", type: PrintSettingsPanelComponent, selector: "pptx-print-settings-panel", inputs: ["settings", "totalSlides", "activeSlideIndex"], outputs: ["settingsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PrintDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-print-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrintSettingsPanelComponent], template: `
+            args: [{ selector: 'pptx-print-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PrintSettingsPanelComponent], providers: [IsMobileService], template: `
 		<div
 			class="pptx-ng-print-dialog__backdrop"
+			[class.is-mobile]="mobile.isMobile()"
 			role="dialog"
 			aria-modal="true"
 			aria-label="Print"
 			(click)="onBackdropClick($event)"
 		>
-			<div class="pptx-ng-print-dialog">
+			<div [class]="dialogClass()">
 				<!-- Header -->
 				<div class="pptx-ng-print-dialog__header">
 					<h2 class="pptx-ng-print-dialog__title">Print</h2>
@@ -53371,7 +54235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 				</div>
 			</div>
 		</div>
-	`, styles: [".pptx-ng-print-dialog__backdrop{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-print-dialog{display:flex;flex-direction:column;width:780px;max-width:calc(100vw - 2rem);max-height:90vh;border:1px solid rgba(255,255,255,.12);border-radius:.75rem;background:#1e1e1e;color:#e5e5e5;box-shadow:0 20px 60px #0009}.pptx-ng-print-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__title{margin:0;font-size:.875rem;font-weight:600;color:#fff}.pptx-ng-print-dialog__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .12s,color .12s}.pptx-ng-print-dialog__icon-btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__body{flex:1;overflow-y:auto;padding:1rem 1.25rem}.pptx-ng-print-dialog__footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__estimate{font-size:.75rem;color:#ffffff80}.pptx-ng-print-dialog__actions{display:flex;gap:.5rem}.pptx-ng-print-dialog__btn{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0a;color:#ffffffb3;font-size:.8125rem;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.pptx-ng-print-dialog__btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__btn--primary{border-color:#3b82f6;background:#3b82f6;color:#fff}.pptx-ng-print-dialog__btn--primary:hover{background:#2f6fd6}\n"] }]
+	`, styles: [".pptx-ng-print-dialog__backdrop{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pptx-ng-print-dialog{display:flex;flex-direction:column;width:780px;max-width:calc(100vw - 2rem);max-height:90vh;border:1px solid rgba(255,255,255,.12);border-radius:.75rem;background:#1e1e1e;color:#e5e5e5;box-shadow:0 20px 60px #0009}.pptx-ng-print-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__title{margin:0;font-size:.875rem;font-weight:600;color:#fff}.pptx-ng-print-dialog__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:transparent;color:#fff9;font-size:.75rem;cursor:pointer;transition:background .12s,color .12s}.pptx-ng-print-dialog__icon-btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__body{flex:1;overflow-y:auto;padding:1rem 1.25rem}.pptx-ng-print-dialog__footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}.pptx-ng-print-dialog__estimate{font-size:.75rem;color:#ffffff80}.pptx-ng-print-dialog__actions{display:flex;gap:.5rem}.pptx-ng-print-dialog__btn{padding:.5rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0a;color:#ffffffb3;font-size:.8125rem;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.pptx-ng-print-dialog__btn:hover{background:#ffffff1a;color:#fff}.pptx-ng-print-dialog__btn--primary{border-color:#3b82f6;background:#3b82f6;color:#fff}.pptx-ng-print-dialog__btn--primary:hover{background:#2f6fd6}.pptx-ng-print-dialog__backdrop.is-mobile{align-items:flex-end}.pptx-ng-print-dialog.is-mobile{width:100%;max-width:none;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-top-left-radius:1rem;border-top-right-radius:1rem;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:max(env(safe-area-inset-bottom),0px)}@media(max-width:767px),(pointer:coarse){.pptx-ng-print-dialog__backdrop{align-items:flex-end}.pptx-ng-print-dialog{width:100%;max-width:none;max-height:88dvh;border-left:none;border-right:none;border-bottom:none;border-top-left-radius:1rem;border-top-right-radius:1rem;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:max(env(safe-area-inset-bottom),0px)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: true }] }], activeSlideIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSlideIndex", required: true }] }], defaultSlidesPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSlidesPerPage", required: false }] }], defaultFrameSlides: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFrameSlides", required: false }] }], print: [{ type: i0.Output, args: ["print"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], onKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]