1.6.7

.gitea/workflows/default_nottags.yaml

@@ -6,8 +6,8 @@ on:
       - '**'
 
 env:
-  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
   NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
   NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
   NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
@@ -26,7 +26,7 @@ jobs:
       - name: Install pnpm and npmci
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
 
       - name: Run npm prepare
         run: npmci npm prepare

.gitea/workflows/default_tags.yaml

@@ -6,8 +6,8 @@ on:
       - '*'
 
 env:
-  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
   NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
   NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
   NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
@@ -26,7 +26,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Audit production dependencies
@@ -54,7 +54,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Test stable
@@ -82,7 +82,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Release
@@ -104,7 +104,7 @@ jobs:
       - name: Prepare
         run: |
           pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
           npmci npm prepare
 
       - name: Code quality

.gitignore

@@ -3,7 +3,6 @@
 # artifacts
 coverage/
 public/
-pages/
 
 # installs
 node_modules/

.npmrc

@@ -1 +1 @@
-registry=https://verdaccio.nevermind.cloud/
+registry=https://registry.npmjs.org/

changelog.md

@@ -1,5 +1,68 @@
 # Changelog
 
+## 2024-12-07 - 1.6.7 - fix(document rendering)
+Fixed overflow issues in document and page elements
+
+- Ensured content overflow handling in document.ts
+- Adjusted page element overflow settings in page.ts
+
+## 2024-12-07 - 1.6.6 - fix(page-render)
+Fix layout scaling adjustment for page component
+
+- Ensure `font-family` is no longer explicitly set to inherit in `DePage` component.
+- Adjust scaling logic to properly set width and overflow based on calculated scale.
+
+## 2024-12-05 - 1.6.5 - fix(contentinvoice)
+Fix VAT group item number formatting and remove custom font style in invoice sums.
+
+- Removed custom font-family style from the invoice sums.
+- Corrected VAT group item numbers display by properly formatting and removing trailing comma.
+
+## 2024-12-05 - 1.6.4 - fix(styling)
+Consolidated shared styles for consistent font applied across various components.
+
+- Added a shared style file for consistent font family across components
+- Applied shared style to contentinvoice, letterheader, pagecontent, pagefooter, and pageheader components
+
+## 2024-12-05 - 1.6.3 - fix(ui)
+Corrects font family in contentinvoice element.
+
+- Updated the font-family for line items in contentinvoice.ts
+
+## 2024-12-05 - 1.6.2 - fix(translation)
+Corrected missing translation keys for VAT short form across multiple languages.
+
+- Fixed missing 'vatShort' translation for English, German, Spanish, French, and Italian in translation.ts file.
+
+## 2024-12-05 - 1.6.1 - fix(core)
+Ensure consistent project structure and code organization without additional changes.
+
+
+## 2024-12-05 - 1.6.0 - feat(documentSettings + translations + vat in itemLines)
+Updated dependencies in package.json
+
+- Updated @types/node to version ^22.10.1
+- Updated qrcode package to version ^1.5.4
+
+## 2024-12-02 - 1.5.3 - fix(elements)
+Update viewer attributes and fix font integration
+
+- Updated viewer.ts to add missing property decorators for letterData and documentSettings.
+- Fixed font loading by correcting URLs in index.html.
+- Set demoDocumentSettings default header and footer to false.
+
+## 2024-12-02 - 1.5.2 - fix(workflow)
+Corrected Docker image references and package scope in YAML workflows for compatibility.
+
+- Updated Docker image reference from GitLab to code.foss.global for npmci UI workflows.
+- Fixed npm package scope for `@shipzone/npmci` in YAML workflows.
+- Minor formatting corrections for better code readability.
+
+## 2024-12-02 - 1.5.1 - fix(package)
+Fix duplicate node export in package.json
+
+- Resolved a duplication issue with the './node' export in package.json exports field.
+
 ## 2024-12-02 - 1.5.0 - feat(core)
 Refactor project structure for better modularity and code organization
 

html/index.html

@@ -1,6 +1,3 @@
-<!--gitzone element-->
-<!-- made by Task Venture Capital GmbH -->
-<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
 <html lang="en">
   <head>
     <!--Lets set some basic meta tags-->

package.json

@@ -1,12 +1,13 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.5.0",
+  "version": "1.6.7",
   "private": false,
   "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "exports": {
     ".": "./dist_ts/index.js",
+    "./node": "./dist_ts/index.js",
     "./web": "./dist_ts_web/index.js",
     "./shared": "./dist_ts_shared/index.js",
     "./interfaces": "./dist_ts_shared/interfaces/index.js"
@@ -38,7 +39,7 @@
     "@git.zone/tsbuild": "^2.2.0",
     "@git.zone/tsbundle": "^2.1.0",
     "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.0.25",
+    "@git.zone/tswatch": "^2.0.34",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.5.3"
   },
@@ -60,12 +61,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/designestate/private/dedocument-catalog.git"
+    "url": "git+https://code.foss.global/designestate/private/dedocument-catalog.git"
   },
   "bugs": {
-    "url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
+    "url": "https://code.foss.global/designestate/private/dedocument-catalog/issues"
   },
-  "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
+  "homepage": "https://code.foss.global/designestate/private/dedocument-catalog#readme",
   "keywords": [
     "document generation",
     "invoice automation",

pnpm-lock.yaml

@@ -58,8 +58,8 @@ importers:
         specifier: ^1.0.90
         version: 1.0.90(@aws-sdk/client-sso-oidc@3.699.0(@aws-sdk/client-sts@3.699.0))(@aws-sdk/credential-providers@3.699.0(@aws-sdk/client-sso-oidc@3.699.0(@aws-sdk/client-sts@3.699.0)))(socks@2.8.3)
       '@git.zone/tswatch':
-        specifier: ^2.0.25
-        version: 2.0.25
+        specifier: ^2.0.34
+        version: 2.0.34
       '@push.rocks/projectinfo':
         specifier: ^5.0.2
         version: 5.0.2
@@ -607,8 +607,8 @@ packages:
     resolution: {integrity: sha512-McytXK46GiReEps7wHWW6zOHYCFF4sywjj6auHjhGqzOogA2Wju1YtZRL+o+OAUb61kQxNFRras6Xg/4Zth0Bw==}
     hasBin: true
 
-  '@git.zone/tswatch@2.0.25':
-    resolution: {integrity: sha512-2A2TzJhw5AHI2BUOEjtZJzNgmRDMKZc4+p+yCdgj3mYcD7l1XeM6HTTcyRTxGDrDXggVIWN1O+UxU6ftHg94ag==}
+  '@git.zone/tswatch@2.0.34':
+    resolution: {integrity: sha512-nwrJffX3aAf8DOfbWPXErskn4RTdQVaE4WLnV8QEU2WdNehI3KQCdVPYHcskl7eqatjbZdQEck39DItmNacGxw==}
     hasBin: true
 
   '@hapi/bourne@3.0.0':
@@ -5070,7 +5070,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@git.zone/tswatch@2.0.25':
+  '@git.zone/tswatch@2.0.34':
     dependencies:
       '@api.global/typedserver': 3.0.51
       '@git.zone/tsbundle': 2.1.0
@@ -5080,12 +5080,15 @@ snapshots:
       '@push.rocks/smartchok': 1.0.34
       '@push.rocks/smartcli': 4.0.11
       '@push.rocks/smartdelay': 3.0.5
+      '@push.rocks/smartfile': 11.0.21
       '@push.rocks/smartlog': 3.0.7
       '@push.rocks/smartlog-destination-local': 9.0.2
       '@push.rocks/smartshell': 3.0.6
       '@push.rocks/taskbuffer': 3.1.7
     transitivePeerDependencies:
+      - bufferutil
       - supports-color
+      - utf-8-validate
 
   '@hapi/bourne@3.0.0': {}
 

readme.md

@@ -47,48 +47,48 @@ import { ILetter } from '@design.estate/dees-document';
 
 const invoiceTemplate: ILetter = {
   from: {
-    name: "Your Company Name",
+    name: 'Your Company Name',
     address: {
-      streetName: "Your Street",
-      houseNumber: "123",
-      city: "Your City",
-      country: "Your Country",
-      postalCode: "12345",
+      streetName: 'Your Street',
+      houseNumber: '123',
+      city: 'Your City',
+      country: 'Your Country',
+      postalCode: '12345',
     },
-    email: "your-email@example.com",
-    phone: "123-456-7890",
+    email: 'your-email@example.com',
+    phone: '123-456-7890',
   },
   to: {
-    name: "Recipient Company Name",
+    name: 'Recipient Company Name',
     address: {
-      streetName: "Recipient Street",
-      houseNumber: "456",
-      city: "Recipient City",
-      country: "Recipient Country",
-      postalCode: "67890",
+      streetName: 'Recipient Street',
+      houseNumber: '456',
+      city: 'Recipient City',
+      country: 'Recipient Country',
+      postalCode: '67890',
     },
-    email: "recipient-email@example.com",
-    phone: "098-765-4321",
+    email: 'recipient-email@example.com',
+    phone: '098-765-4321',
   },
   content: {
     invoiceData: {
       items: [
         {
-          name: "Service or Product Name",
+          name: 'Service or Product Name',
           unitQuantity: 2,
-          unitNetPrice: 100.00,
+          unitNetPrice: 100.0,
           unitType: 'service',
           vatPercentage: 19,
           currency: 'EUR',
-        }
-      ]
-    }
         },
-  subject: "Invoice for Services Rendered",
+      ],
+    },
+  },
+  subject: 'Invoice for Services Rendered',
   date: new Date().getTime(),
   versionInfo: {
-    type: "final",
-    version: "1.0.0"
+    type: 'final',
+    version: '1.0.0',
   },
 };
 ```
@@ -133,22 +133,28 @@ This script encompasses initializing services and generating a PDF in a streamli
 `@design.estate/dees-document` provides several advanced functionalities, enabling rich document creation:
 
 1. **Custom Templates & Styling**
+
    - Customize the styling through CSS or using inline styles in TypeScript.
    - Templates can be adjusted to present different document types (e.g., contracts, reports).
 
 2. **Modular Components and Reuse**
+
    - Utilize modular components to create reusable parts across different documents, enhancing maintainability and reducing redundancy.
 
 3. **Interactive Documents**
+
    - Integrate interactivities like forms, buttons, and interactive charts within your documents.
 
 4. **Localization Support**
+
    - Documents can be localized to support multiple languages, enhancing accessibility and usability.
 
 5. **Responsive and Adaptive Designs**
+
    - Create documents that adjust layout dynamically depending on print or digital medium, maintaining consistency across platforms.
 
 6. **Security Features**
+
    - Apply digital signatures and encrypt sensitive documents to ensure secure and authentic document distribution.
 
 7. **Complex Business Logic**

test/plugins.ts

@@ -2,8 +2,4 @@ import * as tsclass from '@tsclass/tsclass';
 import * as smartfile from '@push.rocks/smartfile';
 import * as path from 'path';
 
-export {
-  tsclass,
-  smartfile,
-  path,
-}
+export { tsclass, smartfile, path };

test/test.ts

@@ -113,7 +113,7 @@ tap.test('should create an invoice', async () => {
     const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(optionsArg);
     await plugins.smartfile.memory.toFs(
       Buffer.from(pdfResult.buffer),
-      plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)
+      plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`),
     );
   };
   await saveResult({

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.5.0',
+  version: '1.6.7',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts/classes.pdfservice.ts

@@ -1,9 +1,7 @@
 import * as plugins from './plugins.js';
 import * as helpers from './helpers.js';
 
-export interface IPdfServiceConstructorOptions {
-
-}
+export interface IPdfServiceConstructorOptions {}
 
 /**
  * a pdf service for generating pdfs
@@ -44,8 +42,8 @@ export class PdfService {
    * creates an letter
    */
   public async createPdfFromLetterObject(optionsArg: {
-    letterData: plugins.tsclass.business.ILetter,
-    documentSettings: plugins.shared.interfaces.IDocumentSettings
+    letterData: plugins.tsclass.business.ILetter;
+    documentSettings: plugins.shared.interfaces.IDocumentSettings;
   }) {
     const html = `
       <script type="module">

ts/helpers.ts

@@ -3,4 +3,4 @@ import * as paths from './paths.js';
 
 export const getBundleAsString = async () => {
   return plugins.smartfile.fs.toStringSync(paths.bundleFile);
-}
+};

ts/paths.ts

@@ -1,6 +1,9 @@
 import * as plugins from './plugins.js';
 
-export const packageDir = plugins.path.join(plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url), '../');
+export const packageDir = plugins.path.join(
+  plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
+  '../',
+);
 
 export const nogitDir = plugins.path.join(packageDir, '.nogit/');
 plugins.smartfile.fs.ensureDirSync(nogitDir);

ts/plugins.ts

@@ -1,9 +1,7 @@
 // node native
 import * as path from 'path';
 
-export {
-  path
-}
+export { path };
 
 // dees-document scope
 import * as shared from '../dist_ts_shared/index.js';
@@ -16,16 +14,9 @@ import * as smartjson from '@push.rocks/smartjson';
 import * as smartpath from '@push.rocks/smartpath';
 import * as smartpdf from '@push.rocks/smartpdf';
 
-export {
-  smartfile,
-  smartpath,
-  smartjson,
-  smartpdf,
-}
+export { smartfile, smartpath, smartjson, smartpdf };
 
 // @tsclass scope
 import * as tsclass from '@tsclass/tsclass';
 
-export {
-  tsclass,
-}
+export { tsclass };

ts_shared/interfaces/document.ts

@@ -5,4 +5,5 @@ export interface IDocumentSettings {
   enableDefaultHeader?: boolean;
   enableDefaultFooter?: boolean;
   languageCode?: translation.TLanguageCode;
+  vatGroupPositions?: boolean;
 }

ts_shared/interfaces/index.ts

@@ -1,2 +1 @@
 export * from './document.js';
-export * from './translation.js';

ts_shared/interfaces/translation.ts

@@ -1,19 +0,0 @@
-export interface IDeDocumentTranslations {
-  address: string;
-  bankConnection: string;
-  contactInfo: string;
-  description: string;
-  invoice: string;
-  itemPos: string;
-  quantity: string;
-  registrationInfo: string;
-  reverseVatNote: string;
-  totalNetPrice: string;
-  unitNetPrice: string;
-  unitType: string;
-  yourCustomerId: string;
-  yourVatId: string;
-  continuesOnPage: string;
-  finalPageStatement: string;
-  page: string;
-}

ts_shared/translation.ts

@@ -1,10 +1,7 @@
 import * as interfaces from './interfaces/index.js';
 
-type TTranslationImplementation = {
-  [key in keyof interfaces.IDeDocumentTranslations]: string;
-}
-
-export const EN_translations: TTranslationImplementation = {
+// Define English translations without enforcing TTranslationImplementation yet
+export const EN_translations = {
   address: 'Address',
   bankConnection: 'Bank Connection',
   contactInfo: 'Contact Info',
@@ -22,8 +19,18 @@ export const EN_translations: TTranslationImplementation = {
   continuesOnPage: 'Continues on page',
   finalPageStatement: 'This is the final page of this document.',
   page: 'Page',
+  vatShort: 'VAT',
+} as const;
+
+// Infer keys of EN_translations
+export type TTranslationKey = keyof typeof EN_translations;
+
+// Define the type for all translations based on EN_translations keys
+export type TTranslationImplementation = {
+  [key in TTranslationKey]: string;
 };
 
+// Define German translations
 export const DE_translations: TTranslationImplementation = {
   address: 'Adresse',
   bankConnection: 'Bankverbindung',
@@ -33,17 +40,20 @@ export const DE_translations: TTranslationImplementation = {
   itemPos: 'Pos.',
   quantity: 'Anzahl',
   registrationInfo: 'HRA/HRB Info',
-  reverseVatNote: 'Umkehr der Umsatzsteuerpflicht: Der Rechnungsempfänger ist für die korrekte Abrechnung der Umsatzsteuer zuständig.',
-  totalNetPrice: 'Nettopreis Summe',
-  unitNetPrice: 'Nettopreis',
+  reverseVatNote:
+    'Umkehr der Umsatzsteuerpflicht: Der Rechnungsempfänger ist für die korrekte Abrechnung der Umsatzsteuer zuständig.',
+  totalNetPrice: 'Summe netto',
+  unitNetPrice: 'Einheit netto',
   unitType: 'Einheit',
   yourCustomerId: 'Ihre Kundennummer:',
   yourVatId: 'Ihre Umsatzsteuer-ID:',
   continuesOnPage: 'Fortsetzung auf Seite',
   finalPageStatement: 'Dies ist die letzte Seite dieses Dokuments.',
   page: 'Seite',
+  vatShort: 'USt',
 };
 
+// Define Spanish translations
 export const ES_translations: TTranslationImplementation = {
   address: 'Dirección',
   bankConnection: 'Conexión bancaria',
@@ -62,8 +72,10 @@ export const ES_translations: TTranslationImplementation = {
   continuesOnPage: 'Continúa en la página',
   finalPageStatement: 'Esta es la última página de este documento.',
   page: 'Página',
+  vatShort: 'IVA',
 };
 
+// Define French translations
 export const FR_translations: TTranslationImplementation = {
   address: 'Adresse',
   bankConnection: 'Coordonnées bancaires',
@@ -72,18 +84,21 @@ export const FR_translations: TTranslationImplementation = {
   invoice: 'Facture',
   itemPos: 'Position',
   quantity: 'Quantité',
-  registrationInfo: 'Informations d\'enregistrement',
-  reverseVatNote: 'La TVA s\'applique selon le mécanisme d\'autoliquidation et est à payer par le client.',
+  registrationInfo: "Informations d'enregistrement",
+  reverseVatNote:
+    "La TVA s'applique selon le mécanisme d'autoliquidation et est à payer par le client.",
   totalNetPrice: 'Prix net total',
   unitNetPrice: 'Prix unitaire net',
-  unitType: 'Type d\'unité',
+  unitType: "Type d'unité",
   yourCustomerId: 'Votre numéro de client :',
   yourVatId: 'Votre numéro de TVA :',
   continuesOnPage: 'Continue sur la page',
   finalPageStatement: 'Ceci est la dernière page de ce document.',
   page: 'Page',
+  vatShort: 'TVA',
 };
 
+// Define Italian translations
 export const IT_translations: TTranslationImplementation = {
   address: 'Indirizzo',
   bankConnection: 'Coordinate bancarie',
@@ -93,7 +108,7 @@ export const IT_translations: TTranslationImplementation = {
   itemPos: 'Pos.',
   quantity: 'Quantità',
   registrationInfo: 'Informazioni di registrazione',
-  reverseVatNote: 'L\'IVA è applicata con inversione contabile ed è a carico del cliente.',
+  reverseVatNote: "L'IVA è applicata con inversione contabile ed è a carico del cliente.",
   totalNetPrice: 'Prezzo netto totale',
   unitNetPrice: 'Prezzo netto unitario',
   unitType: 'Tipo di unità',
@@ -102,23 +117,27 @@ export const IT_translations: TTranslationImplementation = {
   continuesOnPage: 'Continua alla pagina',
   finalPageStatement: 'Questa è l\'ultima pagina di questo documento.',
   page: 'Pagina',
+  vatShort: 'IVA',
 };
 
-export const languageCodeMap = {
-  'DE': DE_translations,
-  'EN': EN_translations,
-  'ES': ES_translations,
-  'FR': FR_translations,
-  'IT': IT_translations,
+// Language Code Map
+export const languageCodeMap: Record<string, TTranslationImplementation> = {
+  EN: EN_translations,
+  DE: DE_translations,
+  ES: ES_translations,
+  FR: FR_translations,
+  IT: IT_translations,
 };
 
+// Language Code Type
 export type TLanguageCode = keyof typeof languageCodeMap;
 
-export const translate = (languageCode: TLanguageCode, key: string, defaultValue: string) => {
+// Translate Function
+export const translate = (
+  languageCode: TLanguageCode,
+  key: TTranslationKey,
+  defaultValue: string
+): string => {
   const translations = languageCodeMap[languageCode] || EN_translations;
-  if (translations && translations[key]) {
-    return translations[key];
-  } else {
-    return defaultValue;
-  }
+  return translations[key] || defaultValue;
 };

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.5.0',
+  version: '1.6.7',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_web/elements/contentinvoice.ts

@@ -16,6 +16,8 @@ import {
 } from '@design.estate/dees-element';
 import * as plugins from '../plugins.js';
 
+import { dedocumentSharedStyle } from '../style.js';
+
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -56,6 +58,7 @@ export class DeContentInvoice extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -204,7 +207,7 @@ export class DeContentInvoice extends DeesElement {
         <style>
           .grid {
             display: grid;
-            grid-template-columns: 40px auto 80px 80px 90px 90px;
+            grid-template-columns: 40px auto 60px 60px 84px 84px 46px;
           }
           .topLine {
             margin-top: 5px;
@@ -214,6 +217,11 @@ export class DeContentInvoice extends DeesElement {
           .lineItem {
             font-size: 12px;
             padding: 5px;
+            border-right: 1px dashed #ccc;
+          }
+
+          .lineItem.rightAlign {
+            text-align: right;
           }
 
           .invoiceLine {
@@ -279,26 +287,30 @@ export class DeContentInvoice extends DeesElement {
         </style>
         <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
         <div class="grid topLine dataHeader">
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
           <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
           <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
+          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'vatShort', 'VAT')}</div>
         </div>
         ${(() => {
           let counter = 1;
           return this.letterData?.content.invoiceData?.items?.map(
             (invoiceItem) => html`
               <div class="grid invoiceLine needsDataHeader">
-                <div class="lineItem">${counter++}</div>
+                <div class="lineItem rightAlign">${counter++}</div>
                 <div class="lineItem">${invoiceItem.name}</div>
-                <div class="lineItem">${invoiceItem.unitQuantity}</div>
+                <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
                 <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
-                <div class="lineItem">
+                <div class="lineItem rightAlign">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
+                <div class="lineItem rightAlign">
                   ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
                 </div>
+                <div class="lineItem rightAlign">
+                  ${invoiceItem.vatPercentage}%
+                </div>
               </div>
             `
           );
@@ -310,15 +322,19 @@ export class DeContentInvoice extends DeesElement {
           </div>
           ${this.getVatGroups().map((vatGroupArg) => {
             let itemNumbers = '';
+            let first = true;
             for (const item of vatGroupArg.items) {
               const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
-              itemNumbers += ` ${itemIndex + 1},`;
+              itemNumbers += `${first ? '' : ', '}${itemIndex + 1}`;
+              first = false;
             }
             return html`
               <div class="sumline">
                 <div class="label">
-                  Vat ${vatGroupArg.vatPercentage}%<br />
-                  <span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
+                  Vat ${vatGroupArg.vatPercentage}%
+                  ${this.documentSettings.vatGroupPositions ? html`
+                    <br /><span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
+                  ` : html``}
                 </div>
                 <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>

ts_web/elements/document.ts

@@ -16,6 +16,8 @@ export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSetting
   enableTopDraftText: true,
   enableDefaultHeader: true,
   enableDefaultFooter: true,
+  languageCode: 'EN',
+  vatGroupPositions: true,
 };
 
 
@@ -97,6 +99,7 @@ export class DeDocument extends DeesElement {
         color: #333;
         padding: 0px;
         position: relative;
+        font-family: 'Dees Sans', sans-serif;
       }
 
       .betweenPagesSpacer {
@@ -112,6 +115,36 @@ export class DeDocument extends DeesElement {
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    domtools.plugins.smartdelay.delayFor(0).then(async () => {
+      this.documentSettings = {
+        ...defaultDocumentSettings,
+        ...this.documentSettings,
+      }
+
+      while (false) {
+        await domtools.plugins.smartdelay.delayFor(1000);
+        this.letterData = {
+          ...this.letterData,
+          content: {
+            ...this.letterData.content,
+            invoiceData: {
+              ...this.letterData.content.invoiceData,
+              items: [
+                ...this.letterData.content.invoiceData.items,
+                {
+                  name: 'Test Item',
+                  unitQuantity: 1,
+                  unitNetPrice: 100,
+                  unitType: 'hours',
+                  vatPercentage: 19,
+                  position: 1,
+                },
+              ],
+            },
+          }
+        }
+      }
+    });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const width = entry.contentRect.width;
@@ -126,13 +159,19 @@ export class DeDocument extends DeesElement {
     })
   }
 
+  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
   public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
 
 
   public async renderDocument() {
+
+    this.latestDocumentSettings = this.documentSettings;
+    this.latestRenderedLetterData = this.letterData;
+
+    console.log(`rendering with settings:`);
+    console.log(this.latestDocumentSettings);
+
     const domtools = await this.domtoolsPromise;
-    
-
     const documentBuildContainer = document.createElement('div');
     document.body.appendChild(documentBuildContainer);
 
@@ -199,13 +238,13 @@ export class DeDocument extends DeesElement {
       }
     }
     this.adjustDePageScaling();
-    this.latestRenderedLetterData = this.letterData;
   }
 
   async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
     const domtools = await this.domtoolsPromise;
-    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
+    let renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData)
+     && domtools.convenience.smartjson.deepEqualObjects(this.documentSettings, this.latestDocumentSettings);
     if (!renderedDocIsUpToDate) {
       this.renderDocument();
     }

ts_web/elements/letterheader.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,6 +50,7 @@ export class DeLetterHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;

ts_web/elements/page.ts

@@ -77,6 +77,7 @@ export class DePage extends DeesElement {
     css`
       :host {
         display: block;
+        overflow: hidden;
       }
 
       #scaleWrapper {
@@ -211,7 +212,7 @@ export class DePage extends DeesElement {
 
     // Adjust the outer dimensions so they match the scaled content
 
-    // this.style.width = `${shared.a4Width * scale}px`;
+    this.style.width = `${plugins.shared.a4Width * scale}px`;
     this.style.height = `${plugins.shared.a4Height * scale}px`;
   }
 }

ts_web/elements/pagecontent.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -46,6 +47,7 @@ export class DePageContent extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;

ts_web/elements/pagefooter.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,6 +53,7 @@ export class DePageFooter extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;

ts_web/elements/pageheader.ts

@@ -11,6 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,6 +53,7 @@ export class DePageHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;

ts_web/elements/viewer.ts

@@ -1,6 +1,6 @@
 import * as plugins from '../plugins.js';
 
-import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
+import { DeesElement, css, cssManager, customElement, html, property } from '@design.estate/dees-element';
 import { demoFunc } from './viewer.demo.js';
 
 declare global {
@@ -15,8 +15,16 @@ export class DeDocumentViewer extends DeesElement {
   public static demo = demoFunc;
 
   // INSTANCE
+  @property({
+    type: Object,
+    reflect: true,
+  })
   public letterData: plugins.tsclass.business.ILetter = null;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
   public documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   public static styles = [

ts_web/pages/index.ts

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

ts_web/pages/page1.ts

@@ -0,0 +1,17 @@
+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'
+      }
+    } as plugins.tsclass.business.ILetter)}> </dedocument-dedocument>
+`;

ts_web/pages/page2.ts

@@ -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>
+`;

ts_web/style.ts

@@ -0,0 +1,7 @@
+import { css } from '@design.estate/dees-element';
+
+export const dedocumentSharedStyle = css`
+  :host {
+    font-family: 'Exo 2';
+  }
+`;

tsconfig.json

@@ -6,7 +6,13 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "baseUrl": ".",
+    "paths": {
+      "undefined": [
+        "./ts_web/index.js"
+      ]
+    }
   },
   "exclude": [
     "dist_*/**/*.d.ts"