@design.estate/dees-document 1.6.9 → 2.0.2

package/dist_ts_web/ts_web/elements/paymentcode.js

@@ -0,0 +1,162 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, customElement, DeesElement, html, property, query, } from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";
+let DedocumentPaymentCode = (() => {
+    let _classDecorators = [customElement("dedocument-paymentcode")];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _canvasEl_decorators;
+    let _canvasEl_initializers = [];
+    let _canvasEl_extraInitializers = [];
+    let _bic_decorators;
+    let _bic_initializers = [];
+    let _bic_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _iban_decorators;
+    let _iban_initializers = [];
+    let _iban_extraInitializers = [];
+    let _currency_decorators;
+    let _currency_initializers = [];
+    let _currency_extraInitializers = [];
+    let _totalGross_decorators;
+    let _totalGross_initializers = [];
+    let _totalGross_extraInitializers = [];
+    let _reference_decorators;
+    let _reference_initializers = [];
+    let _reference_extraInitializers = [];
+    var DedocumentPaymentCode = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _canvasEl_decorators = [query("canvas")];
+            _bic_decorators = [property()];
+            _name_decorators = [property()];
+            _iban_decorators = [property()];
+            _currency_decorators = [property()];
+            _totalGross_decorators = [property({ type: Number })];
+            _reference_decorators = [property()];
+            __esDecorate(this, null, _canvasEl_decorators, { kind: "accessor", name: "canvasEl", static: false, private: false, access: { has: obj => "canvasEl" in obj, get: obj => obj.canvasEl, set: (obj, value) => { obj.canvasEl = value; } }, metadata: _metadata }, _canvasEl_initializers, _canvasEl_extraInitializers);
+            __esDecorate(this, null, _bic_decorators, { kind: "accessor", name: "bic", static: false, private: false, access: { has: obj => "bic" in obj, get: obj => obj.bic, set: (obj, value) => { obj.bic = value; } }, metadata: _metadata }, _bic_initializers, _bic_extraInitializers);
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _iban_decorators, { kind: "accessor", name: "iban", static: false, private: false, access: { has: obj => "iban" in obj, get: obj => obj.iban, set: (obj, value) => { obj.iban = value; } }, metadata: _metadata }, _iban_initializers, _iban_extraInitializers);
+            __esDecorate(this, null, _currency_decorators, { kind: "accessor", name: "currency", static: false, private: false, access: { has: obj => "currency" in obj, get: obj => obj.currency, set: (obj, value) => { obj.currency = value; } }, metadata: _metadata }, _currency_initializers, _currency_extraInitializers);
+            __esDecorate(this, null, _totalGross_decorators, { kind: "accessor", name: "totalGross", static: false, private: false, access: { has: obj => "totalGross" in obj, get: obj => obj.totalGross, set: (obj, value) => { obj.totalGross = value; } }, metadata: _metadata }, _totalGross_initializers, _totalGross_extraInitializers);
+            __esDecorate(this, null, _reference_decorators, { kind: "accessor", name: "reference", static: false, private: false, access: { has: obj => "reference" in obj, get: obj => obj.reference, set: (obj, value) => { obj.reference = value; } }, metadata: _metadata }, _reference_initializers, _reference_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DedocumentPaymentCode = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [
+            css `
+      :host {
+        text-align: center;
+        width: 100px;
+        height: 100px;
+      }
+
+      canvas {
+        width: inherit !important;
+        height: inherit !important;
+      }
+    `,
+        ];
+        #canvasEl_accessor_storage = __runInitializers(this, _canvasEl_initializers, void 0);
+        get canvasEl() { return this.#canvasEl_accessor_storage; }
+        set canvasEl(value) { this.#canvasEl_accessor_storage = value; }
+        #bic_accessor_storage = (__runInitializers(this, _canvasEl_extraInitializers), __runInitializers(this, _bic_initializers, void 0));
+        get bic() { return this.#bic_accessor_storage; }
+        set bic(value) { this.#bic_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _bic_extraInitializers), __runInitializers(this, _name_initializers, void 0));
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #iban_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _iban_initializers, void 0));
+        get iban() { return this.#iban_accessor_storage; }
+        set iban(value) { this.#iban_accessor_storage = value; }
+        #currency_accessor_storage = (__runInitializers(this, _iban_extraInitializers), __runInitializers(this, _currency_initializers, void 0));
+        get currency() { return this.#currency_accessor_storage; }
+        set currency(value) { this.#currency_accessor_storage = value; }
+        #totalGross_accessor_storage = (__runInitializers(this, _currency_extraInitializers), __runInitializers(this, _totalGross_initializers, void 0));
+        get totalGross() { return this.#totalGross_accessor_storage; }
+        set totalGross(value) { this.#totalGross_accessor_storage = value; }
+        #reference_accessor_storage = (__runInitializers(this, _totalGross_extraInitializers), __runInitializers(this, _reference_initializers, void 0));
+        get reference() { return this.#reference_accessor_storage; }
+        set reference(value) { this.#reference_accessor_storage = value; }
+        updateQRCode() {
+            if (!this.canvasEl)
+                return;
+            plugins.qrcode.toCanvas(this.canvasEl, `BCD
+001
+1
+SCT
+${this.bic}
+${this.name}
+${this.iban}
+${this.currency}${this.totalGross?.toFixed?.(2)}
+      
+${this.reference}`, (error) => {
+                if (error)
+                    console.error(error);
+            });
+        }
+        update(changedProperties) {
+            super.update(changedProperties);
+            this.updateQRCode();
+        }
+        render() {
+            const allDataAvailable = typeof this.bic === "string" &&
+                typeof this.name === "string" &&
+                typeof this.iban === "string" &&
+                typeof this.currency === "string" &&
+                typeof this.totalGross === "number" &&
+                typeof this.reference === "string";
+            return allDataAvailable ? html `<canvas></canvas>` : null;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _reference_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return DedocumentPaymentCode = _classThis;
+})();
+export { DedocumentPaymentCode };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGF5bWVudGNvZGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvcGF5bWVudGNvZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxHQUFHLEVBQ0gsYUFBYSxFQUNiLFdBQVcsRUFDWCxJQUFJLEVBQ0osUUFBUSxFQUNSLEtBQUssR0FFTixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sS0FBSyxPQUFPLE1BQU0sZUFBZSxDQUFDO0lBUzVCLHFCQUFxQjs0QkFEakMsYUFBYSxDQUFDLHdCQUF3QixDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7cUNBQW5CLFNBQVEsV0FBVzs7OztvQ0FnQm5ELEtBQUssQ0FBQyxRQUFRLENBQUM7K0JBR2YsUUFBUSxFQUFFO2dDQUdWLFFBQVEsRUFBRTtnQ0FHVixRQUFRLEVBQUU7b0NBR1YsUUFBUSxFQUFFO3NDQUdWLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztxQ0FHMUIsUUFBUSxFQUFFO1lBakJYLDZLQUFTLFFBQVEsNkJBQVIsUUFBUSwyRkFBcUI7WUFHdEMsOEpBQVMsR0FBRyw2QkFBSCxHQUFHLGlGQUFTO1lBR3JCLGlLQUFTLElBQUksNkJBQUosSUFBSSxtRkFBUztZQUd0QixpS0FBUyxJQUFJLDZCQUFKLElBQUksbUZBQVM7WUFHdEIsNktBQVMsUUFBUSw2QkFBUixRQUFRLDJGQUFTO1lBRzFCLG1MQUFTLFVBQVUsNkJBQVYsVUFBVSwrRkFBUztZQUc1QixnTEFBUyxTQUFTLDZCQUFULFNBQVMsNkZBQVM7WUFuQzdCLDZLQTRFQzs7OztRQTNFUSxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7S0FXRjtTQUNGLENBQUM7UUFHRixxRkFBc0M7UUFBdEMsSUFBUyxRQUFRLDhDQUFxQjtRQUF0QyxJQUFTLFFBQVEsb0RBQXFCO1FBR3RDLG1JQUFxQjtRQUFyQixJQUFTLEdBQUcseUNBQVM7UUFBckIsSUFBUyxHQUFHLCtDQUFTO1FBR3JCLGdJQUFzQjtRQUF0QixJQUFTLElBQUksMENBQVM7UUFBdEIsSUFBUyxJQUFJLGdEQUFTO1FBR3RCLGlJQUFzQjtRQUF0QixJQUFTLElBQUksMENBQVM7UUFBdEIsSUFBUyxJQUFJLGdEQUFTO1FBR3RCLHlJQUEwQjtRQUExQixJQUFTLFFBQVEsOENBQVM7UUFBMUIsSUFBUyxRQUFRLG9EQUFTO1FBRzFCLGlKQUE0QjtRQUE1QixJQUFTLFVBQVUsZ0RBQVM7UUFBNUIsSUFBUyxVQUFVLHNEQUFTO1FBRzVCLGlKQUEyQjtRQUEzQixJQUFTLFNBQVMsK0NBQVM7UUFBM0IsSUFBUyxTQUFTLHFEQUFTO1FBRW5CLFlBQVk7WUFDbEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRO2dCQUFFLE9BQU87WUFFM0IsT0FBTyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQ3JCLElBQUksQ0FBQyxRQUFRLEVBQ2I7Ozs7RUFJSixJQUFJLENBQUMsR0FBRztFQUNSLElBQUksQ0FBQyxJQUFJO0VBQ1QsSUFBSSxDQUFDLElBQUk7RUFDVCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFDOztFQUU3QyxJQUFJLENBQUMsU0FBUyxFQUFFLEVBQ1osQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDUixJQUFJLEtBQUs7b0JBQUUsT0FBTyxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNsQyxDQUFDLENBQ0YsQ0FBQztRQUNKLENBQUM7UUFFZSxNQUFNLENBQ3BCLGlCQUF1RDtZQUV2RCxLQUFLLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7WUFDaEMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3RCLENBQUM7UUFFTSxNQUFNO1lBQ1gsTUFBTSxnQkFBZ0IsR0FDcEIsT0FBTyxJQUFJLENBQUMsR0FBRyxLQUFLLFFBQVE7Z0JBQzVCLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxRQUFRO2dCQUM3QixPQUFPLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUTtnQkFDN0IsT0FBTyxJQUFJLENBQUMsUUFBUSxLQUFLLFFBQVE7Z0JBQ2pDLE9BQU8sSUFBSSxDQUFDLFVBQVUsS0FBSyxRQUFRO2dCQUNuQyxPQUFPLElBQUksQ0FBQyxTQUFTLEtBQUssUUFBUSxDQUFDO1lBRXJDLE9BQU8sZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQzNELENBQUM7Ozs7OztZQTNFVSx1REFBcUI7Ozs7O1NBQXJCLHFCQUFxQiJ9

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

@@ -0,0 +1,15 @@
+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>;
+    accessor letterData: plugins.tsclass.business.TLetter;
+    accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
+    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/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/ts_web/elements/viewer.demo.js

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

package/dist_ts_web/ts_web/elements/viewer.js

@@ -0,0 +1,150 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import * as plugins from "../plugins.js";
+import { DeesElement, css, cssManager, customElement, html, property, } from "@design.estate/dees-element";
+import { demoFunc } from "./viewer.demo.js";
+let DeDocumentViewer = (() => {
+    let _classDecorators = [customElement("dedocument-viewer")];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _letterData_decorators;
+    let _letterData_initializers = [];
+    let _letterData_extraInitializers = [];
+    let _documentSettings_decorators;
+    let _documentSettings_initializers = [];
+    let _documentSettings_extraInitializers = [];
+    var DeDocumentViewer = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _letterData_decorators = [property({
+                    type: Object,
+                    reflect: true,
+                })];
+            _documentSettings_decorators = [property({
+                    type: Object,
+                    reflect: true,
+                })];
+            __esDecorate(this, null, _letterData_decorators, { kind: "accessor", name: "letterData", static: false, private: false, access: { has: obj => "letterData" in obj, get: obj => obj.letterData, set: (obj, value) => { obj.letterData = value; } }, metadata: _metadata }, _letterData_initializers, _letterData_extraInitializers);
+            __esDecorate(this, null, _documentSettings_decorators, { kind: "accessor", name: "documentSettings", static: false, private: false, access: { has: obj => "documentSettings" in obj, get: obj => obj.documentSettings, set: (obj, value) => { obj.documentSettings = value; } }, metadata: _metadata }, _documentSettings_initializers, _documentSettings_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DeDocumentViewer = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        // DEMO
+        static demo = demoFunc;
+        #letterData_accessor_storage = __runInitializers(this, _letterData_initializers, null);
+        // INSTANCE
+        get letterData() { return this.#letterData_accessor_storage; }
+        set letterData(value) { this.#letterData_accessor_storage = value; }
+        #documentSettings_accessor_storage = (__runInitializers(this, _letterData_extraInitializers), __runInitializers(this, _documentSettings_initializers, void 0));
+        get documentSettings() { return this.#documentSettings_accessor_storage; }
+        set documentSettings(value) { this.#documentSettings_accessor_storage = value; }
+        static 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;
+      }
+    `,
+        ];
+        render = (__runInitializers(this, _documentSettings_extraInitializers), () => {
+            return html `
+      <div class="maincontainer">
+        <div class="viewport">
+          ${this.letterData
+                ? html `
+                <dedocument-dedocument
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
+                ></dedocument-dedocument>
+              `
+                : html ``}
+        </div>
+        <div class="controls"></div>
+      </div>
+    `;
+        });
+        updated = (changedProperties) => {
+            super.updated(changedProperties);
+            if (changedProperties.has("letterData")) {
+            }
+        };
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return DeDocumentViewer = _classThis;
+})();
+export { DeDocumentViewer };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3ZpZXdlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSxlQUFlLENBQUM7QUFFekMsT0FBTyxFQUNMLFdBQVcsRUFDWCxHQUFHLEVBQ0gsVUFBVSxFQUNWLGFBQWEsRUFDYixJQUFJLEVBQ0osUUFBUSxHQUNULE1BQU0sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0lBUy9CLGdCQUFnQjs0QkFENUIsYUFBYSxDQUFDLG1CQUFtQixDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Z0NBQW5CLFNBQVEsV0FBVzs7OztzQ0FLOUMsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxNQUFNO29CQUNaLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7NENBR0QsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxNQUFNO29CQUNaLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7WUFMRixtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBQTBDO1lBTTdELHFNQUFTLGdCQUFnQiw2QkFBaEIsZ0JBQWdCLDJHQUE4QztZQWZ6RSw2S0F1RkM7Ozs7UUF0RkMsT0FBTztRQUNBLE1BQU0sQ0FBQyxJQUFJLEdBQUcsUUFBUSxDQUFDO1FBTzlCLGlGQUF3RCxJQUFJLEVBQUM7UUFMN0QsV0FBVztRQUtYLElBQVMsVUFBVSxnREFBMEM7UUFBN0QsSUFBUyxVQUFVLHNEQUEwQztRQU03RCwrSkFBdUU7UUFBdkUsSUFBUyxnQkFBZ0Isc0RBQThDO1FBQXZFLElBQVMsZ0JBQWdCLDREQUE4QztRQUVoRSxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLFVBQVUsQ0FBQyxhQUFhO1lBQ3hCLEdBQUcsQ0FBQTs7Ozs7c0JBS2UsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDOzs7Ozs7Ozs7c0JBU3JDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFdBQVcsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0EwQjNEO1NBQ0YsQ0FBQztRQUVLLE1BQU0sa0VBQUcsR0FBRyxFQUFFO1lBQ25CLE9BQU8sSUFBSSxDQUFBOzs7WUFHSCxJQUFJLENBQUMsVUFBVTtnQkFDZixDQUFDLENBQUMsSUFBSSxDQUFBOztnQ0FFYyxJQUFJLENBQUMsVUFBVTtzQ0FDVCxJQUFJLENBQUMsZ0JBQWdCOztlQUU1QztnQkFDSCxDQUFDLENBQUMsSUFBSSxDQUFBLEVBQUU7Ozs7S0FJZixDQUFDO1FBQ0osQ0FBQyxFQUFDO1FBRUssT0FBTyxHQUFHLENBQ2YsaUJBQXlELEVBQ3pELEVBQUU7WUFDRixLQUFLLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLENBQUM7WUFDakMsSUFBSSxpQkFBaUIsQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQUUsQ0FBQztZQUMxQyxDQUFDO1FBQ0gsQ0FBQyxDQUFDOztZQXRGUyx1REFBZ0I7Ozs7O1NBQWhCLGdCQUFnQiJ9

package/dist_ts_web/ts_web/index.d.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

package/dist_ts_web/ts_web/index.js

@@ -0,0 +1,2 @@
+export * from './elements/index.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxxQkFBcUIsQ0FBQyJ9

package/dist_ts_web/ts_web/pages/index.d.ts

@@ -0,0 +1,2 @@
+export * from './page1.js';
+export * from './page2.js';

package/dist_ts_web/ts_web/pages/index.js

@@ -0,0 +1,3 @@
+export * from './page1.js';
+export * from './page2.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvcGFnZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxZQUFZLENBQUM7QUFDM0IsY0FBYyxZQUFZLENBQUMifQ==

package/dist_ts_web/ts_web/pages/page1.d.ts

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

package/dist_ts_web/ts_web/pages/page1.js

@@ -0,0 +1,21 @@
+import * as plugins from "../plugins.js";
+import { html } from "@design.estate/dees-element";
+export const page1 = () => html `
+  <style>
+    dedocument-dedocument {
+      margin: 16px;
+    }
+  </style>
+  <dedocument-dedocument
+    .printMode=${false}
+    letterData=${plugins.smartjson.stringifyBase64({
+    ...plugins.shared.demoLetter,
+    from: {
+        ...plugins.shared.demoLetter.from,
+        description: "a string set via stringified JSON",
+    },
+})}
+  >
+  </dedocument-dedocument>
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZTEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvcGFnZXMvcGFnZTEudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7Ozs7aUJBT2QsS0FBSztpQkFDTCxPQUFPLENBQUMsU0FBUyxDQUFDLGVBQWUsQ0FBQztJQUM3QyxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsVUFBVTtJQUM1QixJQUFJLEVBQUU7UUFDSixHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUk7UUFDakMsV0FBVyxFQUFFLG1DQUFtQztLQUNqRDtDQUNrQyxDQUFDOzs7Q0FHekMsQ0FBQyJ9

package/dist_ts_web/ts_web/pages/page2.d.ts

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

package/dist_ts_web/ts_web/pages/page2.js

@@ -0,0 +1,18 @@
+import { html } from "@design.estate/dees-element";
+export const page2 = () => html `
+  <style>
+    .demoPort {
+      margin: auto;
+      width: 400px;
+    }
+    dedocument-page {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  </style>
+  <div class="demoPort">
+    <dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
+    <dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
+  </div>
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZTIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvcGFnZXMvcGFnZTIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7Ozs7Ozs7OztnQ0FZQyxJQUFJLGdCQUFnQixHQUFHO2dDQUN2QixJQUFJLGdCQUFnQixHQUFHOztDQUV0RCxDQUFDIn0=

package/dist_ts_web/ts_web/plugins.d.ts

@@ -0,0 +1,9 @@
+import * as shared from '../dist_ts_shared/index.js';
+export { shared };
+import * as tsclass from '@tsclass/tsclass';
+export { tsclass };
+import * as smartjson from '@push.rocks/smartjson';
+import * as smarttime from '@push.rocks/smarttime';
+export { smartjson, smarttime };
+import * as qrcode from 'qrcode';
+export { qrcode };

package/dist_ts_web/ts_web/plugins.js

@@ -0,0 +1,14 @@
+// dees-document scope
+import * as shared from '../dist_ts_shared/index.js';
+export { shared };
+// tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+export { tsclass };
+// @pushrocks scope
+import * as smartjson from '@push.rocks/smartjson';
+import * as smarttime from '@push.rocks/smarttime';
+export { smartjson, smarttime };
+// third party
+import * as qrcode from 'qrcode';
+export { qrcode };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9wbHVnaW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHNCQUFzQjtBQUN0QixPQUFPLEtBQUssTUFBTSxNQUFNLDRCQUE0QixDQUFDO0FBRXJELE9BQU8sRUFBRSxNQUFNLEVBQUUsQ0FBQztBQUVsQixnQkFBZ0I7QUFDaEIsT0FBTyxLQUFLLE9BQU8sTUFBTSxrQkFBa0IsQ0FBQztBQUU1QyxPQUFPLEVBQUUsT0FBTyxFQUFFLENBQUM7QUFFbkIsbUJBQW1CO0FBQ25CLE9BQU8sS0FBSyxTQUFTLE1BQU0sdUJBQXVCLENBQUM7QUFDbkQsT0FBTyxLQUFLLFNBQVMsTUFBTSx1QkFBdUIsQ0FBQztBQUVuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxDQUFDO0FBRWhDLGNBQWM7QUFDZCxPQUFPLEtBQUssTUFBTSxNQUFNLFFBQVEsQ0FBQztBQUVqQyxPQUFPLEVBQUUsTUFBTSxFQUFFLENBQUMifQ==

package/dist_ts_web/ts_web/style.d.ts

@@ -0,0 +1 @@
+export declare const dedocumentSharedStyle: import("@design.estate/dees-element").CSSResult;

package/dist_ts_web/ts_web/style.js

@@ -0,0 +1,38 @@
+import { css } from "@design.estate/dees-element";
+import * as plugins from "./plugins.js";
+export const dedocumentSharedStyle = css `
+  :host {
+    /* Primitive colors */
+    --color-light: #ffffff;
+    --color-dark: #333333;
+    --color-grey: #dddddd;
+    --color-grey-100: #dddddd;
+    --color-red: #e4002b;
+
+    /* Semantic colors */
+    --color-primary-fg: var(--theme-color-primary-fg, var(--color-dark));
+    --color-primary-bg: var(--theme-color-primary-bg, var(--color-light));
+    --color-accent-fg: var(--theme-color-accent-fg, var(--color-light));
+    --color-accent-bg: var(--theme-color-accent-bg, var(--color-red));
+
+    /* Functional colors */
+    --text-fg-color: var(--color-primary-fg);
+    --text-bg-color: var(--color-primary-bg);
+    --label-fg: var(--color-dark);
+    --label-bg: var(--color-grey);
+    --footer-separator-bg-color: var(--color-accent-bg);
+    --footer-separator-fg-color: var(--color-light);
+
+    /* Functional variables */
+    --DPI-FACTOR: ${plugins.shared.cmToPx(1)}px;
+    --RIGHT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --LEFT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --text-font-family: var(--theme-text-font-family, "Exo 2");
+    --text-font-size: var(--theme-text-font-size, 12px);
+
+    color: var(--text-fg-color);
+    font-family: var(--text-font-family);
+    font-size: var(--text-font-size);
+  }
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ2xELE9BQU8sS0FBSyxPQUFPLE1BQU0sY0FBYyxDQUFDO0FBRXhDLE1BQU0sQ0FBQyxNQUFNLHFCQUFxQixHQUFHLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O29CQXdCcEIsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO3NCQUN0QixPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7cUJBQ3pCLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQzs7Ozs7Ozs7Q0FRNUMsQ0FBQyJ9