@design.estate/dees-document 1.0.94 → 1.0.96

package/dist_ts/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-document',
-    version: '1.0.93',
+    version: '1.0.95',
     description: 'a catalog for creating documents like invoices'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvMDBfY29tbWl0aW5mb19kYXRhLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHO0lBQ3hCLElBQUksRUFBRSw4QkFBOEI7SUFDcEMsT0FBTyxFQUFFLFFBQVE7SUFDakIsV0FBVyxFQUFFLGdEQUFnRDtDQUM5RCxDQUFBIn0=

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-document',
-    version: '1.0.93',
+    version: '1.0.95',
     description: 'a catalog for creating documents like invoices'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsOEJBQThCO0lBQ3BDLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxnREFBZ0Q7Q0FDOUQsQ0FBQSJ9

package/dist_ts_web/elements/document.d.ts

@@ -9,6 +9,7 @@ export declare class DeDocument extends DeesElement {
     static demo: () => TemplateResult<1>;
     format: 'a4';
     viewWidth: number;
+    viewHeight: number;
     printMode: boolean;
     letterData: plugins.tsclass.business.ILetter;
     letterDataUrl: string;
@@ -17,4 +18,6 @@ export declare class DeDocument extends DeesElement {
     render(): TemplateResult;
     firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
     renderDocument(): Promise<void>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private adjustDePageScaling;
 }

package/dist_ts_web/elements/document.demo.d.ts

@@ -0,0 +1 @@
+export declare const demoFunc: () => import("@design.estate/dees-element").TemplateResult<1>;

package/dist_ts_web/elements/document.demo.js

@@ -0,0 +1,6 @@
+import * as shared from './shared/index.js';
+import { html } from '@design.estate/dees-element';
+export const demoFunc = () => html `
+<dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jdW1lbnQuZGVtby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kb2N1bWVudC5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFDNUMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7a0NBQ0EsSUFBSSxpQkFBaUIsTUFBTSxDQUFDLFVBQVU7Q0FDdkUsQ0FBQyJ9

package/dist_ts_web/elements/document.js

@@ -12,14 +12,14 @@ import * as plugins from '../plugins.js';
 import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';
 import * as shared from './shared/index.js';
+import { demoFunc } from './document.demo.js';
 export let DeDocument = class DeDocument extends DeesElement {
-    static { this.demo = () => html `
-    <dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
-  `; }
+    static { this.demo = demoFunc; }
     constructor() {
         super();
         this.format = 'a4';
-        this.viewWidth = shared.a4Width;
+        this.viewWidth = null;
+        this.viewHeight = null;
         this.printMode = false;
         domtools.DomTools.setupDomTools();
     }
@@ -34,24 +34,28 @@ export let DeDocument = class DeDocument extends DeesElement {
       }
 
       .betweenPagesSpacer {
-        height: 20px;
+        height: 16px;
       }
     `,
     ]; }
     render() {
         return html `
-      <style>
-        :host {
-          transform-origin: top left;
-          transform: ${this.viewWidth
-            ? unsafeCSS(`scale(${this.viewWidth / shared.a4Width}, ${this.viewWidth / shared.a4Width})`)
-            : unsafeCSS('')};
-        }
-      </style>
-      <div class="scaleport"></div>
+      <div class="documentContainer"></div>
     `;
     }
     async firstUpdated(_changedProperties) {
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                const height = entry.contentRect.height;
+                // Handle the new dimensions here
+                this.adjustDePageScaling();
+            }
+        });
+        resizeObserver.observe(this);
+        this.registerGarbageFunction(() => {
+            resizeObserver.disconnect();
+        });
         if (this.letterDataUrl) {
             const response = await fetch(this.letterDataUrl);
             this.letterData = await response.json();
@@ -60,7 +64,7 @@ export let DeDocument = class DeDocument extends DeesElement {
     }
     async renderDocument() {
         const domtools = await this.domtoolsPromise;
-        const scaleport = this.shadowRoot.querySelector('.scaleport');
+        const documentContainer = this.shadowRoot.querySelector('.documentContainer');
         let pages = [];
         let pageCounter = 0;
         let complete = false;
@@ -81,12 +85,12 @@ export let DeDocument = class DeDocument extends DeesElement {
             newPage.pageNumber = pageCounter;
             newPage.append(currentContent);
             newPage.pageTotalNumber = pageCounter;
-            scaleport.append(newPage);
+            documentContainer.append(newPage);
             // betweenPagesSpacer
             if (!this.printMode) {
                 const betweenPagesSpacerDiv = document.createElement('div');
                 betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
-                scaleport.append(betweenPagesSpacerDiv);
+                documentContainer.append(betweenPagesSpacerDiv);
             }
             await currentContent.elementDomReady;
             await currentContent.trimStartToOffset(overallContentOffset);
@@ -109,6 +113,31 @@ export let DeDocument = class DeDocument extends DeesElement {
         for (const page of pages) {
             page.pageTotalNumber = pageCounter;
         }
+        this.adjustDePageScaling();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+            this.adjustDePageScaling();
+        }
+    }
+    adjustDePageScaling() {
+        if (this.printMode) {
+            return;
+        }
+        this.viewWidth = this.clientWidth;
+        // Find all DePage instances within this DeDocument
+        const pages = this.shadowRoot.querySelectorAll('dedocument-page');
+        // Update each DePage instance's viewHeight and viewWidth
+        pages.forEach((page) => {
+            if (this.viewHeight) {
+                page.viewHeight = this.viewHeight;
+            }
+            if (this.viewWidth) {
+                page.viewWidth = this.viewWidth;
+                console.log('setting viewWidth: ', this.viewWidth);
+            }
+        });
     }
 };
 __decorate([
@@ -123,6 +152,12 @@ __decorate([
     }),
     __metadata("design:type", Number)
 ], DeDocument.prototype, "viewWidth", void 0);
+__decorate([
+    property({
+        type: Number,
+    }),
+    __metadata("design:type", Number)
+], DeDocument.prototype, "viewHeight", void 0);
 __decorate([
     property({
         type: Boolean,
@@ -154,4 +189,4 @@ DeDocument = __decorate([
     customElement('dedocument-dedocument'),
     __metadata("design:paramtypes", [])
 ], DeDocument);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jdW1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvZG9jdW1lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLGFBQWEsRUFFYixHQUFHLEVBQ0gsS0FBSyxFQUNMLFVBQVUsRUFDVixTQUFTLEVBQ1QsUUFBUSxHQUNULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLE9BQU8sTUFBTSxlQUFlLENBQUM7QUFHekMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNuQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUV2RCxPQUFPLEtBQUssTUFBTSxNQUFNLG1CQUFtQixDQUFDO0FBU3JDLFdBQU0sVUFBVSxHQUFoQixNQUFNLFVBQVcsU0FBUSxXQUFXO2FBQzNCLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7c0NBQ0ssSUFBSSxpQkFBaUIsTUFBTSxDQUFDLFVBQVU7R0FDekUsQUFGaUIsQ0FFaEI7SUFvQ0Y7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQWhDSCxXQUFNLEdBQVMsSUFBSSxDQUFDO1FBS3BCLGNBQVMsR0FBVyxNQUFNLENBQUMsT0FBTyxDQUFDO1FBSzFDLGNBQVMsR0FBRyxLQUFLLENBQUM7UUF1QmhCLFFBQVEsQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDcEMsQ0FBQzthQUVhLFdBQU0sR0FBRztRQUNyQixRQUFRLENBQUMsWUFBWSxDQUFDLFlBQVk7UUFDbEMsR0FBRyxDQUFBOzs7Ozs7Ozs7OztLQVdGO0tBQ0YsQUFkbUIsQ0FjbEI7SUFFSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Ozs7dUJBSVEsSUFBSSxDQUFDLFNBQVM7WUFDekIsQ0FBQyxDQUFDLFNBQVMsQ0FDUCxTQUFTLElBQUksQ0FB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jdW1lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvZG9jdW1lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLGFBQWEsRUFFYixHQUFHLEVBQ0gsS0FBSyxFQUNMLFVBQVUsRUFDVixTQUFTLEVBQ1QsUUFBUSxHQUNULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLE9BQU8sTUFBTSxlQUFlLENBQUM7QUFHekMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNuQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUV2RCxPQUFPLEtBQUssTUFBTSxNQUFNLG1CQUFtQixDQUFDO0FBQzVDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQVN2QyxXQUFNLFVBQVUsR0FBaEIsTUFBTSxVQUFXLFNBQVEsV0FBVzthQUMzQixTQUFJLEdBQUcsUUFBUSxBQUFYLENBQVk7SUF5QzlCO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFyQ0gsV0FBTSxHQUFTLElBQUksQ0FBQztRQUtwQixjQUFTLEdBQVcsSUFBSSxDQUFDO1FBS3pCLGVBQVUsR0FBVyxJQUFJLENBQUM7UUFLakMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQXVCaEIsUUFBUSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUNwQyxDQUFDO2FBRWEsV0FBTSxHQUFHO1FBQ3JCLFFBQVEsQ0FBQyxZQUFZLENBQUMsWUFBWTtRQUNsQyxHQUFHLENBQUE7Ozs7Ozs7Ozs7O0tBV0Y7S0FDRixBQWRtQixDQWNsQjtJQUVLLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTs7S0FFVixDQUFDO0lBQ0osQ0FBQztJQUVNLEtBQUssQ0FBQyxZQUFZLENBQUMsa0JBQTBEO1FBQ2xGLE1BQU0s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

package/dist_ts_web/elements/index.d.ts

@@ -6,4 +6,5 @@ export * from './pagecontainer.js';
 export * from './pagecontent.js';
 export * from './pagefooter.js';
 export * from './pageheader.js';
+export * from './viewer.js';
 export * from './shared/index.js';

package/dist_ts_web/elements/index.js

@@ -6,5 +6,6 @@ export * from './pagecontainer.js';
 export * from './pagecontent.js';
 export * from './pagefooter.js';
 export * from './pageheader.js';
+export * from './viewer.js';
 export * from './shared/index.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsV0FBVyxDQUFDO0FBQzFCLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsaUJBQWlCLENBQUM7QUFFaEMsY0FBYyxtQkFBbUIsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsV0FBVyxDQUFDO0FBQzFCLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxhQUFhLENBQUM7QUFFNUIsY0FBYyxtQkFBbUIsQ0FBQyJ9

package/dist_ts_web/elements/page.d.ts

@@ -7,6 +7,8 @@ declare global {
 }
 export declare class DePage extends DeesElement {
     static demo: () => TemplateResult<1>;
+    viewWidth: number;
+    viewHeight: number;
     format: 'a4';
     pageNumber: number;
     pageTotalNumber: number;
@@ -16,4 +18,6 @@ export declare class DePage extends DeesElement {
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     checkOverflow(): Promise<boolean>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private adjustScaling;
 }

package/dist_ts_web/elements/page.js

@@ -15,6 +15,8 @@ export let DePage = class DePage extends DeesElement {
     static { this.demo = () => html ` <dedocument-page .format="${'a4'}"></dedocument-page> `; }
     constructor() {
         super();
+        this.viewWidth = null;
+        this.viewHeight = null;
         this.format = 'a4';
         this.pageNumber = 1;
         this.pageTotalNumber = 1;
@@ -26,7 +28,15 @@ export let DePage = class DePage extends DeesElement {
         domtools.elementBasic.staticStyles,
         css `
       :host {
+        display: block;
+        max-height: ${shared.a4Height}px;
+        max-width: ${shared.a4Width}px;
       }
+
+      #scaleWrapper {
+        transform-origin: top left;
+      }
+
       .versionOverlay {
         pointer-events: none;
         position: absolute;
@@ -60,44 +70,46 @@ export let DePage = class DePage extends DeesElement {
     ]; }
     render() {
         return html `
-      <dedocument-pagecontainer .printMode=${this.printMode}>
-        <dedocument-pageheader
-          .letterData=${this.letterData}
-          .pageNumber="${this.pageNumber}"
-          .pageTotalNumber="${this.pageTotalNumber}"
-        ></dedocument-pageheader>
-        ${this.pageNumber === 1
+      <div id="scaleWrapper">
+        <dedocument-pagecontainer .printMode=${this.printMode}>
+          <dedocument-pageheader
+            .letterData=${this.letterData}
+            .pageNumber="${this.pageNumber}"
+            .pageTotalNumber="${this.pageTotalNumber}"
+          ></dedocument-pageheader>
+          ${this.pageNumber === 1
             ? html `
-              <dedocument-letterheader
-                .pageNumber="${this.pageNumber}"
-                .letterData=${this.letterData}
-                .pageTotalNumber="${this.pageTotalNumber}"
-              ></dedocument-letterheader>
-            `
+                <dedocument-letterheader
+                  .pageNumber="${this.pageNumber}"
+                  .letterData=${this.letterData}
+                  .pageTotalNumber="${this.pageTotalNumber}"
+                ></dedocument-letterheader>
+              `
             : html ``}
-        <dedocument-pagecontent
-          .pageNumber="${this.pageNumber}"
-          .pageTotalNumber="${this.pageTotalNumber}"
-          .letterData=${this.letterData}
-          ><slot></slot
-        ></dedocument-pagecontent>
-        <dedocument-pagefooter
-          .letterData=${this.letterData}
-          .pageNumber="${this.pageNumber}"
-          .pageTotalNumber="${this.pageTotalNumber}"
-        ></dedocument-pagefooter>
-        <div class="versionOverlay">
-          ${this.letterData.versionInfo.type === 'draft'
+          <dedocument-pagecontent
+            .pageNumber="${this.pageNumber}"
+            .pageTotalNumber="${this.pageTotalNumber}"
+            .letterData=${this.letterData}
+            ><slot></slot
+          ></dedocument-pagecontent>
+          <dedocument-pagefooter
+            .letterData=${this.letterData}
+            .pageNumber="${this.pageNumber}"
+            .pageTotalNumber="${this.pageTotalNumber}"
+          ></dedocument-pagefooter>
+          <div class="versionOverlay">
+            ${this.letterData.versionInfo.type === 'draft'
             ? html `
-                <div class="topInfo">
-                  Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br>
-                  -> Revision/Document version: ${this.letterData.versionInfo.version}
-                </div>
-                <div class="bigDraftText">DRAFT</div>
-              `
+                  <div class="topInfo">
+                    Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br />
+                    -> Revision/Document version: ${this.letterData.versionInfo.version}
+                  </div>
+                  <div class="bigDraftText">DRAFT</div>
+                `
             : html ``}
-        </div>
-      </dedocument-pagecontainer>
+          </div>
+        </dedocument-pagecontainer>
+      </div>
     `;
     }
     async checkOverflow() {
@@ -105,7 +117,39 @@ export let DePage = class DePage extends DeesElement {
         const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
         return pageContent.checkOverflow();
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("viewHeight") || changedProperties.has("viewWidth")) {
+            this.adjustScaling();
+        }
+    }
+    adjustScaling() {
+        console.log('page scale adjustment triggered.');
+        const scaleWrapper = this.shadowRoot.querySelector("#scaleWrapper");
+        if (!scaleWrapper)
+            return;
+        let scale = 1;
+        if (this.viewHeight) {
+            scale = this.viewHeight / shared.a4Height;
+        }
+        else if (this.viewWidth) {
+            scale = this.viewWidth / shared.a4Width;
+        }
+        console.log(`new scale is ${scale}`);
+        scaleWrapper.style.transform = `scale(${scale})`;
+        // Adjust the outer dimensions so they match the scaled content
+        // this.style.width = `${shared.a4Width * scale}px`;
+        this.style.height = `${shared.a4Height * scale}px`;
+    }
 };
+__decorate([
+    property(),
+    __metadata("design:type", Number)
+], DePage.prototype, "viewWidth", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Number)
+], DePage.prototype, "viewHeight", void 0);
 __decorate([
     property({
         type: String,
@@ -141,4 +185,4 @@ DePage = __decorate([
     customElement('dedocument-page'),
     __metadata("design:paramtypes", [])
 ], DePage);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9wYWdlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxPQUFPLE1BQU0sa0JBQWtCLENBQUM7QUFDNUMsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLGFBQWEsRUFFYixHQUFHLEVBQ0gsVUFBVSxFQUNWLFNBQVMsR0FDVixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sS0FBSyxRQUFRLE1BQU0sOEJBQThCLENBQUM7QUFFekQsT0FBTyxLQUFLLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQVNyQyxXQUFNLE1BQU0sR0FBWixNQUFNLE1BQU8sU0FBUSxXQUFXO2FBQ3ZCLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsOEJBQThCLElBQUksdUJBQXVCLEFBQXRFLENBQXVFO0lBNEJ6RjtRQUNFLEtBQUssRUFBRSxDQUFDO1FBeEJILFdBQU0sR0FBUyxJQUFJLENBQUM7UUFLcEIsZUFBVSxHQUFXLENBQUMsQ0FBQztRQUt2QixvQkFBZSxHQUFXLENBQUMsQ0FBQztRQUs1QixlQUFVLEdBQTZCLE1BQU0sQ0FBQyxVQUFVLENBQUM7UUFNaEUsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUloQixRQUFRLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3BDLENBQUM7YUFFYSxXQUFNLEdBQUc7UUFDckIsUUFBUSxDQUFDLFlBQVksQ0FBQyxZQUFZO1FBQ2xDLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FnQ0Y7S0FDRixBQW5DbUIsQ0FtQ2xCO0lBRUssTUFBTTtRQUNYLE9BQU8sSUFBSSxDQUFBOzZDQUM4QixJQUFJLENBQUMsU0FBUzs7d0JBRW5DLElBQUksQ0FBQyxVQUFVO3lCQUNkLElBQUksQ0FBQyxVQUFVOzhCQUNWLElBQUksQ0FBQyxlQUFlOztVQUV4QyxJQUFJLENBQUMsVUFBVSxLQUFLLENBQUM7WUFDckIsQ0FBQyxDQUFDLElBQUksQ0FBQTs7K0JBRWUsSUFBSSxDQUFDLFVBQVU7OEJBQ2hCLElBQUksQ0FBQyxVQUFVO29DQUNULElBQUksQ0FBQyxlQUFlOzthQUUzQztZQUNILENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTs7eUJBRU8sSUFBSSxDQUFDLFVBQVU7OEJBQ1YsSUFBSSxDQUFDLGVBQWU7d0JBQzFCLElBQUksQ0FBQyxVQUFVOzs7O3dCQUlmLElBQUksQ0FBQyxVQUFVO3lCQUNkLElBQUksQ0FBQyxVQUFVOzhCQUNWLElBQUksQ0FBQyxlQUFlOzs7WUFHdEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsSUFBSSxLQUFLLE9BQU87WUFDNUMsQ0FBQyxDQUFDLElBQUksQ0FBQTs7O2tEQUdnQyxJQUFJLENBQUMsVUFBVSxDQUFDLFdBQVcsQ0FBQyxPQUFPOzs7ZUFHdEU7WUFDSCxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUU7OztLQUdmLENBQUM7SUFDSixDQUFDO0lBRU0sS0FBSyxDQUFDLGFBQWE7UUFDeEIsTUFBTSxJQUFJLENBQUMsZUFBZSxDQUFDO1FBQzNCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLHdCQUF3QixDQUFDLENBQUM7UUFDNUUsT0FBTyxXQUFXLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDckMsQ0FBQzs7QUFoSE07SUFITixRQUFRLENBQUM7UUFDUixJQUFJLEVBQUUsTUFBTTtLQUNiLENBQUM7O3NDQUN5QjtBQUtwQjtJQUhOLFFBQVEsQ0FBQztRQUNSLElBQUksRUFBRSxNQUFNO0tBQ2IsQ0FBQzs7MENBQzRCO0FBS3ZCO0lBSE4sUUFBUSxDQUFDO1FBQ1IsSUFBSSxFQUFFLE1BQU07S0FDYixDQUFDOzsrQ0FDaUM7QUFLNUI7SUFITixRQUFRLENBQUM7UUFDUixJQUFJLEVBQUUsTUFBTTtLQUNiLENBQUM7OzBDQUM4RDtBQU1oRTtJQUpDLFFBQVEsQ0FBQztRQUNSLElBQUksRUFBRSxPQUFPO1FBQ2IsT0FBTyxFQUFFLElBQUk7S0FDZCxDQUFDOzt5Q0FDZ0I7QUEzQlAsTUFBTTtJQURsQixhQUFhLENBQUMsaUJBQWlCLENBQUM7O0dBQ3BCLE1BQU0sQ0F1SGxCIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9wYWdlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxPQUFPLE1BQU0sa0JBQWtCLENBQUM7QUFDNUMsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLGFBQWEsRUFFYixHQUFHLEVBQ0gsVUFBVSxFQUNWLFNBQVMsR0FDVixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sS0FBSyxRQUFRLE1BQU0sOEJBQThCLENBQUM7QUFFekQsT0FBTyxLQUFLLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQVNyQyxXQUFNLE1BQU0sR0FBWixNQUFNLE1BQU8sU0FBUSxXQUFXO2FBQ3ZCLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsOEJBQThCLElBQUksdUJBQXVCLEFBQXRFLENBQXVFO0lBa0N6RjtRQUNFLEtBQUssRUFBRSxDQUFDO1FBaENWLGNBQVMsR0FBVyxJQUFJLENBQUM7UUFHekIsZUFBVSxHQUFXLElBQUksQ0FBQztRQUtuQixXQUFNLEdBQVMsSUFBSSxDQUFDO1FBS3BCLGVBQVUsR0FBVyxDQUFDLENBQUM7UUFLdkIsb0JBQWUsR0FBVyxDQUFDLENBQUM7UUFLNUIsZUFBVSxHQUE2QixNQUFNLENBQUMsVUFBVSxDQUFDO1FBTWhFLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFJaEIsUUFBUSxDQUFDLFFBQVEsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUNwQyxDQUFDO2FBRWEsV0FBTSxHQUFHO1FBQ3JCLFFBQVEsQ0FBQyxZQUFZLENBQUMsWUFBWTtRQUNsQyxHQUFHLENBQUE7OztzQkFHZSxNQUFNLENBQUMsUUFBUTtxQkFDaEIsTUFBTSxDQUFDLE9BQU87Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQW9DOUI7S0FDRixBQTNDbUIsQ0EyQ2xCO0lBRUssTUFB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

package/dist_ts_web/elements/viewer.d.ts

@@ -0,0 +1,14 @@
+import * as plugins from '../plugins.js';
+import { DeesElement } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dedocument-viewer': DeDocumentViewer;
+    }
+}
+export declare class DeDocumentViewer extends DeesElement {
+    static demo: () => import("@design.estate/dees-element").TemplateResult<1>;
+    letterData: plugins.tsclass.business.ILetter;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render: () => import("@design.estate/dees-element").TemplateResult<1>;
+    updated: (changedProperties: Map<string | number | symbol, unknown>) => void;
+}

package/dist_ts_web/elements/viewer.demo.d.ts

@@ -0,0 +1 @@
+export declare const demoFunc: () => import("@design.estate/dees-element").TemplateResult<1>;

package/dist_ts_web/elements/viewer.demo.js

@@ -0,0 +1,6 @@
+import { html } from '@design.estate/dees-element';
+import * as shared from './shared/index.js';
+export const demoFunc = () => html `
+  <dedocument-viewer .letterData=${shared.demoLetter}></dedocument-viewer>
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvdmlld2VyLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ25ELE9BQU8sS0FBSyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFFNUMsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTttQ0FDQyxNQUFNLENBQUMsVUFBVTtDQUNuRCxDQUFDIn0=

package/dist_ts_web/elements/viewer.js

@@ -0,0 +1,83 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import * as plugins from '../plugins.js';
+import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
+import { demoFunc } from './viewer.demo.js';
+export let DeDocumentViewer = class DeDocumentViewer extends DeesElement {
+    constructor() {
+        super(...arguments);
+        // INSTANCE
+        this.letterData = null;
+        this.render = () => {
+            return html `
+      <div class="maincontainer">
+        <div class="viewport">
+          ${this.letterData
+                ? html ` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
+                : html ``}
+        </div>
+        <div class="controls"></div>
+      </div>
+    `;
+        };
+        this.updated = (changedProperties) => {
+            super.updated(changedProperties);
+            if (changedProperties.has('letterData')) {
+            }
+        };
+    }
+    // DEMO
+    static { this.demo = demoFunc; }
+    static { this.styles = [
+        cssManager.defaultStyles,
+        css `
+      .maincontainer {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+      }
+      .controls {
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        position: absolute;
+        height: 32px;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111111ee')};
+        box-shadow: 0px 2px 8px 0px #000000;
+      }
+      .controlsShadow {
+        position: absolute;
+        top: 32px;
+        right: 0px;
+        left: 0px;
+        height: 16px;
+        width: 100%;
+        position: absolute;
+        background: linear-gradient(to bottom, #111111cc 0%, #11111100 100%);
+      }
+
+      .viewport {
+        position: absolute;
+        padding: 16px;
+        padding-top: 48px;
+        padding-bottom: 0px;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        overflow-y: scroll;
+        overscroll-behavior: contain;
+      }
+    `,
+    ]; }
+};
+DeDocumentViewer = __decorate([
+    customElement('dedocument-viewer')
+], DeDocumentViewer);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3ZpZXdlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEtBQUssT0FBTyxNQUFNLGVBQWUsQ0FBQztBQUV6QyxPQUFPLEVBQUUsV0FBVyxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsYUFBYSxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ2hHLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQVNyQyxXQUFNLGdCQUFnQixHQUF0QixNQUFNLGdCQUFpQixTQUFRLFdBQVc7SUFBMUM7O1FBSUwsV0FBVztRQUNKLGVBQVUsR0FBcUMsSUFBSSxDQUFDO1FBK0NwRCxXQUFNLEdBQUcsR0FBRyxFQUFFO1lBQ25CLE9BQU8sSUFBSSxDQUFBOzs7WUFHSCxJQUFJLENBQUMsVUFBVTtnQkFDZixDQUFDLENBQUMsSUFBSSxDQUFBLHVDQUF1QyxJQUFJLENBQUMsVUFBVSw0QkFBNEI7Z0JBQ3hGLENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTs7OztLQUlmLENBQUM7UUFDSixDQUFDLENBQUM7UUFFSyxZQUFPLEdBQUcsQ0FBQyxpQkFBeUQsRUFBRSxFQUFFO1lBQzdFLEtBQUssQ0FBQyxPQUFPLENBQUMsaUJBQWlCLENBQUMsQ0FBQztZQUNqQyxJQUFJLGlCQUFpQixDQUFDLEdBQUcsQ0FBQyxZQUFZLENBQUMsRUFBRTthQUN4QztRQUNILENBQUMsQ0FBQztJQUNKLENBQUM7SUFyRUMsT0FBTzthQUNPLFNBQUksR0FBRyxRQUFRLEFBQVgsQ0FBWTthQUtoQixXQUFNLEdBQUc7UUFDckIsVUFBVSxDQUFDLGFBQWE7UUFDeEIsR0FBRyxDQUFBOzs7OztzQkFLZSxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxNQUFNLENBQUM7Ozs7Ozs7OztzQkFTckMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsV0FBVyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTBCM0Q7S0FDRixBQTNDbUIsQ0EyQ2xCOztBQWxEUyxnQkFBZ0I7SUFENUIsYUFBYSxDQUFDLG1CQUFtQixDQUFDO0dBQ3RCLGdCQUFnQixDQXNFNUIifQ==

package/dist_ts_web/pages/page1.js

@@ -4,7 +4,7 @@ import * as plugins from '../plugins.js';
 export const page1 = () => html `
   <style>
     dedocument-dedocument {
-      margin: 40px;
+      margin: 16px;
     }
   </style>
   <dedocument-dedocument .printMode=${false} letterData=${plugins.smartjson.stringifyBase64({