pptx-angular-viewer 1.1.41 → 1.1.42

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';
@@ -26142,6 +26142,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 +29672,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 +29921,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 +29940,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 +30010,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 +30058,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 +30110,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 +40738,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 +40922,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 +40932,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 +41215,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 +41227,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 +41237,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 +41520,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 +41551,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 +53508,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 +53536,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 +53611,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 +53666,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 +53725,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']]