fix(core): fix scaling greater than 1x, fix automatic document updates

ts_web/elements/document.ts

@@ -32,21 +32,25 @@ export class DeDocument extends DeesElement {
 
   @property({
     type: String,
+    reflect: true,
   })
   public format: 'a4' = 'a4';
 
   @property({
     type: Number,
+    reflect: true,
   })
   public viewWidth: number = null;
 
   @property({
     type: Number,
+    reflect: true,
   })
   public viewHeight: number = null;
 
   @property({
     type: Boolean,
+    reflect: true,
   })
   printMode = false;
 
@@ -60,7 +64,6 @@ export class DeDocument extends DeesElement {
         return valueArg;
       }
     },
-
   })
   public letterData: plugins.tsclass.business.ILetter;
 
@@ -117,6 +120,7 @@ export class DeDocument extends DeesElement {
     this.renderDocument();
   }
 
+  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
   public async renderDocument() {
     const domtools = await this.domtoolsPromise;
     const documentContainer = this.shadowRoot.querySelector('.documentContainer');
@@ -172,10 +176,16 @@ export class DeDocument extends DeesElement {
       page.pageTotalNumber = pageCounter;
     }
     this.adjustDePageScaling();
+    this.latestRenderedLetterData = this.letterData;
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+  async updated(changedProperties: Map<string | number | symbol, unknown>): void {
     super.updated(changedProperties);
+    const domtools = await this.domtoolsPromise;
+    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
+    if (!renderedDocIsUpToDate) {
+      this.renderDocument();
+    }
 
     if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
       this.adjustDePageScaling();

ts_web/elements/page.ts

@@ -65,8 +65,6 @@ export class DePage extends DeesElement {
     css`
       :host {
         display: block;
-        max-height: ${shared.a4Height}px;
-        max-width: ${shared.a4Width}px;
       }
 
       #scaleWrapper {

ts_web/elements/shared/demoletter.ts

@@ -69,6 +69,45 @@ export const demoLetter: tsclass.business.ILetter = {
           vatPercentage: 19,
           currency: 'EUR',
         },
+        {
+          name: 'Item with 7% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 100,
+          unitType: 'hours',
+          vatPercentage: 7,
+          position: 1,
+        },
+        {
+          name: 'Item with 7% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 7,
+          position: 2,
+        },
+        {
+          name: 'Item with 21% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 21,
+          position: 3,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 4,
+        },{
+          name: 'Item with 19% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 100,
+          unitType: 'hours',
+          vatPercentage: 19,
+          position: 5,
+        },
         {
           name: 'Item with 7% VAT',
           unitQuantity: 1,