pptx-angular-viewer 1.1.43 → 1.1.44

package/fesm2022/pptx-angular-viewer.mjs

@@ -16519,6 +16519,60 @@ class EditorHistory {
     }
 }
 
+/**
+ * ole-actions.ts - framework-agnostic helpers for the OLE download/open UI.
+ *
+ * Shared by the binding OLE renderers to format the recovered embedded payload
+ * size and decide whether its MIME type can be opened directly in a browser tab
+ * (vs download-only). Pure functions, no framework or DOM dependencies.
+ *
+ * @module shared/render/ole-actions
+ */
+const BYTE_UNITS = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+/**
+ * Human-readable binary file size (1024-based), e.g. `1 byte`, `0 bytes`,
+ * `12 MB`. Returns `undefined` for missing, negative, or non-finite input so
+ * callers can simply omit the size when it is unknown.
+ */
+function formatBytes$1(bytes) {
+    if (bytes === undefined || !Number.isFinite(bytes) || bytes < 0) {
+        return undefined;
+    }
+    if (bytes === 1) {
+        return '1 byte';
+    }
+    if (bytes < 1024) {
+        return `${bytes} bytes`;
+    }
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < BYTE_UNITS.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    // One decimal place, trimming a trailing `.0`.
+    const rounded = Math.round(value * 10) / 10;
+    const text = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
+    return `${text} ${BYTE_UNITS[unit]}`;
+}
+/**
+ * Whether a payload of the given MIME type can be opened directly in a browser
+ * tab (PDF, images, plain text, JSON, XML). Everything else is download-only.
+ */
+function isBrowserOpenableMime$1(mime) {
+    if (!mime) {
+        return false;
+    }
+    const value = mime.trim().toLowerCase();
+    if (value === 'application/pdf') {
+        return true;
+    }
+    if (value.startsWith('image/') || value.startsWith('text/')) {
+        return true;
+    }
+    return value === 'application/json' || value === 'application/xml';
+}
+
 /**
  * Pure snap-and-alignment-guide geometry shared by the React, Vue, and Angular
  * editor bindings. No framework imports, no DOM, no side effects — only data
@@ -45194,6 +45248,112 @@ function getPlaceholderStyle(type) {
         'background-color': `${color}0d`,
     };
 }
+// ==========================================================================
+// Embedded-payload size + MIME helpers
+// ==========================================================================
+/**
+ * Format a byte count as a short human-readable string (e.g. `"1.5 KB"`,
+ * `"2.3 MB"`) using binary (1024) units. Returns `undefined` for missing,
+ * non-finite, or negative input so callers can omit the size row entirely.
+ *
+ * Kept local to the Angular binding for now: the equivalent shared helper is
+ * being churned by a parallel session, so this avoids a flaky cross-package
+ * dependency. Extract to `pptx-viewer-shared` once that settles.
+ */
+function formatBytes(bytes) {
+    if (bytes === undefined || !Number.isFinite(bytes) || bytes < 0) {
+        return undefined;
+    }
+    if (bytes < 1024) {
+        return bytes === 1 ? '1 byte' : `${Math.round(bytes)} bytes`;
+    }
+    const units = ['KB', 'MB', 'GB', 'TB'];
+    let value = bytes / 1024;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+    }
+    const rounded = Math.round(value * 10) / 10;
+    const text = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
+    return `${text} ${units[unitIndex]}`;
+}
+/**
+ * Whether a payload of the given MIME type can be opened (previewed) inline in
+ * a new browser tab rather than only downloaded. PDFs, plain text / HTML / CSV /
+ * JSON, and any `image/*` or `text/*` type qualify; binary office formats do
+ * not. Matching is case-insensitive and ignores any `; charset=...` parameter.
+ */
+function isBrowserOpenableMime(mimeType) {
+    if (!mimeType) {
+        return false;
+    }
+    const normalized = mimeType.split(';', 1)[0]?.trim().toLowerCase() ?? '';
+    if (normalized.length === 0) {
+        return false;
+    }
+    if (normalized.startsWith('image/') || normalized.startsWith('text/')) {
+        return true;
+    }
+    return (normalized === 'application/pdf' ||
+        normalized === 'application/json' ||
+        normalized === 'application/xml' ||
+        normalized === 'application/xhtml+xml');
+}
+// ==========================================================================
+// Embedded-payload actions (Download / Open) + richer info
+// ==========================================================================
+/**
+ * Resolve the file name to use for the download anchor's `download` attribute:
+ * the recovered embedded name, then the authored file name, then a generic
+ * fallback so the saved file is never nameless.
+ */
+function getOleDownloadFileName(el) {
+    return el.oleEmbeddedFileName ?? el.fileName ?? 'embedded-object';
+}
+/**
+ * Build the descriptive info rows shown in the OLE caption.
+ *
+ * Rows: object type label, original file name (`oleEmbeddedFileName ?? fileName`),
+ * human-readable size (`oleEmbeddedByteSize`), and application (`oleProgId`).
+ * A row is omitted when its value is unknown, so the result may contain only
+ * the always-present type row.
+ */
+function buildOleInfoRows(el) {
+    const rows = [
+        { key: 'type', label: 'Type', value: getOleTypeLabel(resolveOleType(el)) },
+    ];
+    const fileName = el.oleEmbeddedFileName ?? el.fileName;
+    if (fileName) {
+        rows.push({ key: 'file', label: 'File', value: fileName });
+    }
+    const sizeLabel = formatBytes(el.oleEmbeddedByteSize);
+    if (sizeLabel) {
+        rows.push({ key: 'size', label: 'Size', value: sizeLabel });
+    }
+    if (el.oleProgId) {
+        rows.push({ key: 'application', label: 'Application', value: el.oleProgId });
+    }
+    return rows;
+}
+/**
+ * Build the full action model for an OLE element. Download is offered whenever a
+ * non-empty embedded data-URL exists; Open is additionally offered when the
+ * payload's MIME type is one a browser can render inline (PDF / image / text).
+ */
+function buildOleActionModel(el) {
+    const downloadHref = el.oleEmbeddedData;
+    const canDownload = typeof downloadHref === 'string' && downloadHref.length > 0;
+    const canOpen = canDownload && isBrowserOpenableMime(el.oleEmbeddedMimeType);
+    return {
+        canDownload,
+        canOpen,
+        downloadHref,
+        downloadFileName: getOleDownloadFileName(el),
+        sizeLabel: formatBytes(el.oleEmbeddedByteSize),
+        info: buildOleInfoRows(el),
+    };
+}
 
 /**
  * OleRendererComponent: Angular port of the React `renderOleElement`
@@ -45261,6 +45421,39 @@ class OleRendererComponent {
     /** Border + background style for the placeholder box. */
     placeholderStyle = computed(() => getPlaceholderStyle(this.oleType()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholderStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Download / Open action model derived from the recovered embedded payload.
+     * When the input is not an OLE element, every action is disabled.
+     */
+    actions = computed(() => {
+        const el = this.ole();
+        if (!el) {
+            return {
+                canDownload: false,
+                canOpen: false,
+                downloadHref: undefined,
+                downloadFileName: 'embedded-object',
+                sizeLabel: undefined,
+                info: [],
+            };
+        }
+        return buildOleActionModel(el);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /**
+     * Descriptive tooltip for the wrapper: the info rows joined as
+     * "Label: value" pairs (e.g. "Type: Excel Spreadsheet, File: budget.xlsx,
+     * Size: 2.3 KB, Application: Excel.Sheet.12"). Falls back to the aria label
+     * when no rows are available.
+     */
+    infoTitle = computed(() => {
+        const rows = this.actions().info;
+        if (rows.length === 0) {
+            return this.ariaLabel();
+        }
+        return rows.map((row) => `${row.label}: ${row.value}`).join(', ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "infoTitle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OleRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OleRendererComponent, isStandalone: true, selector: "pptx-ole-renderer", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<div
@@ -45269,7 +45462,7 @@ class OleRendererComponent {
 			[attr.data-element-id]="element().id"
 			role="img"
 			[attr.aria-label]="ariaLabel()"
-			title="Embedded object"
+			[attr.title]="infoTitle()"
 		>
 			@if (previewSrc()) {
 				<!-- Preview image with type-badge overlay -->
@@ -45514,8 +45707,43 @@ class OleRendererComponent {
 					}
 				</div>
 			}
+			@if (actions().canDownload) {
+				<!--
+					Download / Open actions for the recovered embedded payload.
+					Pointer events are isolated so clicking an action never starts a
+					selection/drag of the underlying element; the controls are
+					keyboard-focusable and only paint on hover / focus-within.
+				-->
+				<div
+					class="pptx-ng-ole-actions"
+					(pointerdown)="$event.stopPropagation()"
+					(mousedown)="$event.stopPropagation()"
+				>
+					<a
+						class="pptx-ng-ole-action"
+						[href]="actions().downloadHref"
+						[attr.download]="actions().downloadFileName"
+						[attr.aria-label]="'Download ' + actions().downloadFileName"
+						(click)="$event.stopPropagation()"
+					>
+						Download
+					</a>
+					@if (actions().canOpen) {
+						<a
+							class="pptx-ng-ole-action"
+							[href]="actions().downloadHref"
+							target="_blank"
+							rel="noopener noreferrer"
+							[attr.aria-label]="'Open ' + actions().downloadFileName + ' in a new tab'"
+							(click)="$event.stopPropagation()"
+						>
+							Open
+						</a>
+					}
+				</div>
+			}
 		</div>
-	`, isInline: true, styles: [".pptx-ng-ole-preview{position:relative;width:100%;height:100%}.pptx-ng-ole-img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;display:block}.pptx-ng-ole-badge{position:absolute;bottom:4px;right:4px;z-index:10}.pptx-ng-ole-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;box-sizing:border-box}.pptx-ng-ole-name{margin-top:8px;font-size:12px;font-weight:500;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-sublabel{margin-top:2px;font-size:10px;color:#00000073;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, styles: [".pptx-ng-ole-preview{position:relative;width:100%;height:100%}.pptx-ng-ole-img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;display:block}.pptx-ng-ole-badge{position:absolute;bottom:4px;right:4px;z-index:10}.pptx-ng-ole-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;box-sizing:border-box}.pptx-ng-ole-name{margin-top:8px;font-size:12px;font-weight:500;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-sublabel{margin-top:2px;font-size:10px;color:#00000073;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-actions{position:absolute;bottom:4px;left:4px;display:flex;gap:4px;z-index:11;opacity:0;transition:opacity .12s ease-in-out}.pptx-ng-ole:hover .pptx-ng-ole-actions,.pptx-ng-ole-actions:focus-within{opacity:1}.pptx-ng-ole-action{font-size:11px;line-height:1;padding:4px 8px;border-radius:4px;background-color:#000000b8;color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;pointer-events:auto}.pptx-ng-ole-action:hover{background-color:#000000d9}.pptx-ng-ole-action:focus-visible{outline:2px solid #fff;outline-offset:1px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OleRendererComponent, decorators: [{
             type: Component,
@@ -45526,7 +45754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 			[attr.data-element-id]="element().id"
 			role="img"
 			[attr.aria-label]="ariaLabel()"
-			title="Embedded object"
+			[attr.title]="infoTitle()"
 		>
 			@if (previewSrc()) {
 				<!-- Preview image with type-badge overlay -->
@@ -45771,8 +45999,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 					}
 				</div>
 			}
+			@if (actions().canDownload) {
+				<!--
+					Download / Open actions for the recovered embedded payload.
+					Pointer events are isolated so clicking an action never starts a
+					selection/drag of the underlying element; the controls are
+					keyboard-focusable and only paint on hover / focus-within.
+				-->
+				<div
+					class="pptx-ng-ole-actions"
+					(pointerdown)="$event.stopPropagation()"
+					(mousedown)="$event.stopPropagation()"
+				>
+					<a
+						class="pptx-ng-ole-action"
+						[href]="actions().downloadHref"
+						[attr.download]="actions().downloadFileName"
+						[attr.aria-label]="'Download ' + actions().downloadFileName"
+						(click)="$event.stopPropagation()"
+					>
+						Download
+					</a>
+					@if (actions().canOpen) {
+						<a
+							class="pptx-ng-ole-action"
+							[href]="actions().downloadHref"
+							target="_blank"
+							rel="noopener noreferrer"
+							[attr.aria-label]="'Open ' + actions().downloadFileName + ' in a new tab'"
+							(click)="$event.stopPropagation()"
+						>
+							Open
+						</a>
+					}
+				</div>
+			}
 		</div>
-	`, styles: [".pptx-ng-ole-preview{position:relative;width:100%;height:100%}.pptx-ng-ole-img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;display:block}.pptx-ng-ole-badge{position:absolute;bottom:4px;right:4px;z-index:10}.pptx-ng-ole-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;box-sizing:border-box}.pptx-ng-ole-name{margin-top:8px;font-size:12px;font-weight:500;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-sublabel{margin-top:2px;font-size:10px;color:#00000073;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+	`, styles: [".pptx-ng-ole-preview{position:relative;width:100%;height:100%}.pptx-ng-ole-img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;display:block}.pptx-ng-ole-badge{position:absolute;bottom:4px;right:4px;z-index:10}.pptx-ng-ole-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;box-sizing:border-box}.pptx-ng-ole-name{margin-top:8px;font-size:12px;font-weight:500;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-sublabel{margin-top:2px;font-size:10px;color:#00000073;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pptx-ng-ole-actions{position:absolute;bottom:4px;left:4px;display:flex;gap:4px;z-index:11;opacity:0;transition:opacity .12s ease-in-out}.pptx-ng-ole:hover .pptx-ng-ole-actions,.pptx-ng-ole-actions:focus-within{opacity:1}.pptx-ng-ole-action{font-size:11px;line-height:1;padding:4px 8px;border-radius:4px;background-color:#000000b8;color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;pointer-events:auto}.pptx-ng-ole-action:hover{background-color:#000000d9}.pptx-ng-ole-action:focus-visible{outline:2px solid #fff;outline-offset:1px}\n"] }]
         }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
 
 /**