structured-render 0.0.3 → 0.0.5

package/dist/elements/vir-structured-render.element.d.ts

@@ -10,8 +10,24 @@ import { type RenderHtmlOptions, type RenderInput } from '../render/render-types
 export declare const VirStructuredRender: import("element-vir").DeclarativeElementDefinition<"vir-structured-render", {
     data: Readonly<RenderInput>;
     options?: Readonly<PartialWithUndefined<RenderHtmlOptions & {
-        isTableSize: boolean;
+        /**
+         * If `true`, smaller, tablet-compatible styles are used.
+         *
+         * @default false
+         */
+        isTabletSize: boolean;
+        /**
+         * If `true`, smaller, phone-compatible styles are used.
+         *
+         * @default false
+         */
         isPhoneSize: boolean;
+        /**
+         * If `true`, all sections will automatically be expanded at first.
+         *
+         * @default false
+         */
+        expandAllSections: boolean;
     }>> | undefined;
 }, {
     currentlyExpanded: Record<string, boolean>;

package/dist/elements/vir-structured-render.element.js

@@ -29,7 +29,7 @@ export const VirStructuredRender = defineElement()({
     },
     hostClasses: {
         'vir-structured-render-phone-size': ({ inputs }) => !!inputs.options?.isPhoneSize,
-        'vir-structured-render-tablet-size': ({ inputs }) => !!inputs.options?.isTableSize,
+        'vir-structured-render-tablet-size': ({ inputs }) => !!inputs.options?.isTabletSize,
     },
     styles: ({ cssVars, hostClasses }) => css `
         :host {

package/dist/render/browser-rendering.js

@@ -132,7 +132,17 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
     const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
     if (outputType.pdf) {
         if (outputType.pdf === OutputPdfType.Download) {
-            return await instance.save(fileName);
+            const pdfBlob = (await instance.outputPdf(OutputPdfType.Blob));
+            const blobUrl = URL.createObjectURL(pdfBlob);
+            const anchor = globalThis.document.createElement('a');
+            anchor.href = blobUrl;
+            anchor.download = fileName.endsWith('.pdf') ? fileName : `${fileName}.pdf`;
+            anchor.style.display = 'none';
+            globalThis.document.body.append(anchor);
+            anchor.click();
+            anchor.remove();
+            URL.revokeObjectURL(blobUrl);
+            return;
         }
         else {
             return await instance.outputPdf(outputType.pdf, {

package/dist/render/render-html.js

@@ -371,25 +371,48 @@ function structuredRenderToHtmlArray(data, options, keyChain) {
         const sectionTitle = ('sectionTitle' in data && keyChain.length > 0 && data.sectionTitle) || undefined;
         const sectionTemplate = htmlRenderers[data.type](data, options, keyChain);
         const sources = ('sources' in data && data.sources) || undefined;
+        const sectionContent = html `
+            <div
+                class=${classMap({
+            'section-wrapper': true,
+            'top-section-wrapper': keyChain.length === 0,
+            [structuredRenderSectionHtmlNames[data.type]]: true,
+        })}
+                ${testId(structuredRenderSectionHtmlTestId)}
+                ${testId(structuredRenderSectionHtmlNames[data.type])}
+            >
+                ${createSourceWrapper(sectionTemplate, options, keyChain, sources)}
+            </div>
+        `;
+        if (sectionTitle) {
+            const sectionKeyChain = [
+                ...keyChain,
+                'section-collapsible',
+            ];
+            const sectionKey = makeChainKey(sectionKeyChain);
+            const isSectionExpanded = !!options.currentlyExpanded[sectionKey];
+            return [
+                html `
+                    <${ViraCollapsibleWrapper.assign({
+                    expanded: isSectionExpanded,
+                })}
+                        class="section-collapsible-wrapper"
+                        ${listen(ViraCollapsibleWrapper.events.expandChange, (event) => {
+                    const eventTarget = extractEventTarget(event, HTMLElement);
+                    eventTarget.dispatchEvent(new SourceExpansionEvent({
+                        expanded: event.detail,
+                        key: sectionKey,
+                    }));
+                })}
+                    >
+                        <h3 slot=${ViraCollapsibleWrapper.slotNames.header}>${sectionTitle}</h3>
+                        ${sectionContent}
+                    </${ViraCollapsibleWrapper}>
+                `,
+            ];
+        }
         return [
-            sectionTitle
-                ? html `
-                      <h3>${sectionTitle}</h3>
-                  `
-                : undefined,
-            html `
-                <div
-                    class=${classMap({
-                'section-wrapper': true,
-                'top-section-wrapper': keyChain.length === 0,
-                [structuredRenderSectionHtmlNames[data.type]]: true,
-            })}
-                    ${testId(structuredRenderSectionHtmlTestId)}
-                    ${testId(structuredRenderSectionHtmlNames[data.type])}
-                >
-                    ${createSourceWrapper(sectionTemplate, options, keyChain, sources)}
-                </div>
-            `,
+            sectionContent,
         ];
     }
     else if ('sections' in data) {

package/dist/render/render-pdf.js

@@ -50,16 +50,69 @@ export async function printPdf(renderInput, params) {
         ...params,
     }));
     const blobUrl = URL.createObjectURL(pdfBlob);
+    /**
+     * Firefox uses PDF.js to render PDFs in iframes, which doesn't support printing via
+     * `contentWindow.print()` on blob URLs. Open a new window instead so Firefox's native PDF
+     * viewer handles it.
+     */
+    if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        const printWindow = globalThis.window.open(blobUrl);
+        if (!printWindow) {
+            URL.revokeObjectURL(blobUrl);
+            throw new Error('Failed to open print window. Check your popup blocker settings.');
+        }
+        return;
+    }
     const printFrame = globalThis.document.createElement('iframe');
-    printFrame.style.display = 'none';
+    printFrame.style.position = 'fixed';
+    printFrame.style.left = '-10000px';
+    printFrame.style.top = '0';
+    printFrame.style.width = '1px';
+    printFrame.style.height = '1px';
+    printFrame.style.border = 'none';
+    printFrame.style.opacity = '0';
     printFrame.src = blobUrl;
     globalThis.document.body.append(printFrame);
     return new Promise((resolve) => {
         printFrame.onload = () => {
-            printFrame.contentWindow?.print();
-            URL.revokeObjectURL(blobUrl);
-            resolve();
-            printFrame.remove();
+            const contentWindow = printFrame.contentWindow;
+            if (!contentWindow) {
+                URL.revokeObjectURL(blobUrl);
+                printFrame.remove();
+                resolve();
+                return;
+            }
+            function cleanup() {
+                URL.revokeObjectURL(blobUrl);
+                printFrame.remove();
+                resolve();
+            }
+            let resolved = false;
+            function resolveOnce() {
+                if (resolved) {
+                    return;
+                }
+                resolved = true;
+                globalThis.window.removeEventListener('focus', focusFallback);
+                cleanup();
+            }
+            /**
+             * Fallback: when the print dialog closes (print or cancel), focus returns to the main
+             * window. Some browsers don't fire `afterprint` on the iframe's contentWindow when the
+             * user cancels.
+             */
+            function focusFallback() {
+                resolveOnce();
+            }
+            contentWindow.addEventListener('afterprint', () => {
+                resolveOnce();
+            }, {
+                once: true,
+            });
+            globalThis.window.addEventListener('focus', focusFallback, {
+                once: true,
+            });
+            contentWindow.print();
         };
     });
 }

package/dist/ui/elements/vir-app.element.d.ts

@@ -0,0 +1 @@
+export declare const VirApp: import("element-vir").DeclarativeElementDefinition<"vir-app", {}, {}, {}, "vir-app-", "vir-app-", readonly [], readonly []>;

package/dist/ui/elements/vir-app.element.js

@@ -0,0 +1,9 @@
+import { defineElement, html } from 'element-vir';
+export const VirApp = defineElement()({
+    tagName: 'vir-app',
+    render() {
+        return html `
+            Vir App goes here!
+        `;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "structured-render",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "A library for safely rendering arbitrary data generated from any source.",
     "keywords": [
         "render",
@@ -52,7 +52,7 @@
         "object-shape-tester": "^6.11.0",
         "theme-vir": "^28.22.0",
         "type-fest": "^5.4.4",
-        "vira": "^29.7.2"
+        "vira": "^29.8.0"
     },
     "devDependencies": {
         "@augment-vir/test": "^31.67.0",