.gitea/workflows/default_nottags.yaml

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

.gitea/workflows/default_tags.yaml

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

.gitignore

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

.npmrc

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

changelog.md

@@ -1,110 +1,5 @@
 # Changelog
 
-## 2025-01-01 - 1.6.11 - fix(license)
-Update copyright notice in license to reflect new ownership
-
-- Updated copyright from Lossless GmbH to Task Venture Capital GmbH.
-
-## 2024-12-08 - 1.6.10 - fix(core)
-Improve stability and performance of document generation
-
-
-## 2024-12-08 - 1.6.9 - fix(contentinvoice.ts)
-Improve invoice item layout and fix alignment issues.
-
-- Fixed missing border on last invoice item.
-- Added highlighted style for invoice lines.
-- Corrected alignment and display of invoice item details.
-- Included VAT percentage display adjustments.
-
-## 2024-12-07 - 1.6.8 - fix(rendering and logging)
-Removed debug logging from document rendering process.
-
-- Removed console logs from content invoice, document rendering, page scaling, and overflow checking.
-
-## 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
-
-- Moved shared components to a dedicated 'dist_ts_shared' directory for better separation of concerns.
-- Updated import statements across the codebase to align with the new file structure.
-- Introduced translations directly under 'ts_shared' for language-specific string management.
-
-## 2024-12-02 - 1.4.0 - feat(translation)
-Add French and Italian translations for document interface
-
-- Expanded translation support by adding French and Italian language translations
-- Fixed duplicated text in German final page statement
-- Improved Spanish translation of reverse VAT note and final page statement
-
-## 2024-12-02 - 1.3.2 - fix(core)
-Minor updates and optimizations in the output PDF formatting process.
-
-- Improved handling of page content overflow in PDF generation.
-- Refined default document settings for consistent rendering.
-
 ## 2024-12-02 - 1.3.1 - fix(documentation)
 Updated project description and enhanced documentation in package.json and README
 

html/index.html

@@ -1,3 +1,6 @@
+<!--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-->

license

@@ -1,4 +1,4 @@
-Copyright (c) 2022 Task Venture Capital GmbH (hello@task.vc)
+Copyright (c) 2022 Lossless GmbH (hello@lossless.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,16 +1,13 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.6.11",
+  "version": "1.3.1",
   "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",
+    "./ts": "./dist_ts/index.js",
-    "./node": "./dist_ts/index.js",
+    "./ts_web": "./dist_ts_web/index.js"
-    "./web": "./dist_ts_web/index.js",
-    "./shared": "./dist_ts_shared/index.js",
-    "./interfaces": "./dist_ts_shared/interfaces/index.js"
   },
   "scripts": {
     "test": "npm run build && tstest test/",
@@ -39,7 +36,7 @@
     "@git.zone/tsbuild": "^2.2.0",
     "@git.zone/tsbundle": "^2.1.0",
     "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.0.34",
+    "@git.zone/tswatch": "^2.0.25",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.5.3"
   },
@@ -61,12 +58,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://code.foss.global/designestate/private/dedocument-catalog.git"
+    "url": "git+https://gitlab.com/designestate/private/dedocument-catalog.git"
   },
   "bugs": {
-    "url": "https://code.foss.global/designestate/private/dedocument-catalog/issues"
+    "url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
   },
-  "homepage": "https://code.foss.global/designestate/private/dedocument-catalog#readme",
+  "homepage": "https://gitlab.com/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.34
+        specifier: ^2.0.25
-        version: 2.0.34
+        version: 2.0.25
       '@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.34':
+  '@git.zone/tswatch@2.0.25':
-    resolution: {integrity: sha512-nwrJffX3aAf8DOfbWPXErskn4RTdQVaE4WLnV8QEU2WdNehI3KQCdVPYHcskl7eqatjbZdQEck39DItmNacGxw==}
+    resolution: {integrity: sha512-2A2TzJhw5AHI2BUOEjtZJzNgmRDMKZc4+p+yCdgj3mYcD7l1XeM6HTTcyRTxGDrDXggVIWN1O+UxU6ftHg94ag==}
     hasBin: true
 
   '@hapi/bourne@3.0.0':
@@ -5070,7 +5070,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@git.zone/tswatch@2.0.34':
+  '@git.zone/tswatch@2.0.25':
     dependencies:
       '@api.global/typedserver': 3.0.51
       '@git.zone/tsbundle': 2.1.0
@@ -5080,15 +5080,12 @@ 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',
+      streetName: "Your Street",
-      houseNumber: '123',
+      houseNumber: "123",
-      city: 'Your City',
+      city: "Your City",
-      country: 'Your Country',
+      country: "Your Country",
-      postalCode: '12345',
+      postalCode: "12345",
     },
-    email: 'your-email@example.com',
+    email: "your-email@example.com",
-    phone: '123-456-7890',
+    phone: "123-456-7890",
   },
   to: {
-    name: 'Recipient Company Name',
+    name: "Recipient Company Name",
     address: {
-      streetName: 'Recipient Street',
+      streetName: "Recipient Street",
-      houseNumber: '456',
+      houseNumber: "456",
-      city: 'Recipient City',
+      city: "Recipient City",
-      country: 'Recipient Country',
+      country: "Recipient Country",
-      postalCode: '67890',
+      postalCode: "67890",
     },
-    email: 'recipient-email@example.com',
+    email: "recipient-email@example.com",
-    phone: '098-765-4321',
+    phone: "098-765-4321",
   },
   content: {
     invoiceData: {
       items: [
         {
-          name: 'Service or Product Name',
+          name: "Service or Product Name",
           unitQuantity: 2,
-          unitNetPrice: 100.0,
+          unitNetPrice: 100.00,
           unitType: 'service',
           vatPercentage: 19,
           currency: 'EUR',
-        },
+        }
-      ],
+      ]
-    },
+    }
   },
-  subject: 'Invoice for Services Rendered',
+  subject: "Invoice for Services Rendered",
   date: new Date().getTime(),
   versionInfo: {
-    type: 'final',
+    type: "final",
-    version: '1.0.0',
+    version: "1.0.0"
   },
 };
 ```
@@ -133,28 +133,22 @@ 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,4 +2,8 @@ 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

@@ -1,6 +1,6 @@
 import * as plugins from './plugins.js';
 import * as paths from './paths.js';
-import * as interfaces from '../ts_shared/interfaces/index.js';
+import * as interfaces from '../ts/interfaces/index.js';
 import { expect, tap } from '@push.rocks/tapbundle';
 import * as deesDocumentServer from '../ts/index.js';
 
@@ -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.6.11',
+  version: '1.3.1',
   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,7 +1,11 @@
 import * as plugins from './plugins.js';
+import * as paths from './paths.js';
 import * as helpers from './helpers.js';
+import * as interfaces from '../ts/interfaces/index.js';
 
-export interface IPdfServiceConstructorOptions {}
+export interface IPdfServiceConstructorOptions {
+
+}
 
 /**
  * a pdf service for generating pdfs
@@ -42,8 +46,8 @@ export class PdfService {
    * creates an letter
    */
   public async createPdfFromLetterObject(optionsArg: {
-    letterData: plugins.tsclass.business.ILetter;
+    letterData: plugins.tsclass.business.ILetter,
-    documentSettings: plugins.shared.interfaces.IDocumentSettings;
+    documentSettings: 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/interfaces/document.ts

@@ -1,9 +1,8 @@
-import * as translation from '../translation.js';
+import * as shared from '../shared/index.js';
 
 export interface IDocumentSettings {
   enableTopDraftText?: boolean;
   enableDefaultHeader?: boolean;
   enableDefaultFooter?: boolean;
-  languageCode?: translation.TLanguageCode;
+  languageCode?: shared.translation.TLanguageCode;
-  vatGroupPositions?: boolean;
 }

ts/interfaces/index.ts

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

ts/interfaces/translation.ts

@@ -0,0 +1,19 @@
+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/paths.ts

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

ts/plugins.ts

@@ -1,12 +1,9 @@
 // node native
 import * as path from 'path';
 
-export { path };
+export {
-
+  path
-// dees-document scope
+}
-import * as shared from '../dist_ts_shared/index.js';
-
-export { shared };
 
 // @push.rocks/scope
 import * as smartfile from '@push.rocks/smartfile';
@@ -14,9 +11,16 @@ 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/demoletter.ts

@@ -1,7 +1,7 @@
-import * as plugins from './plugins.js';
+import * as tsclass from '@tsclass/tsclass';
-import * as interfaces from './interfaces/index.js';
+import * as interfaces from '../interfaces/index.js';
 
-const fromContact: plugins.tsclass.business.IContact = {
+const fromContact: tsclass.business.IContact = {
   name: 'Awesome From Company',
   type: 'company',
   description: 'a company that does stuff',
@@ -23,7 +23,7 @@ const fromContact: plugins.tsclass.business.IContact = {
 
 };
 
-const toContact: plugins.tsclass.business.IContact = {
+const toContact: tsclass.business.IContact = {
   name: 'Awesome To GmbH',
   type: 'company',
   customerNumber: 'LL-CLIENT-123',
@@ -38,7 +38,7 @@ const toContact: plugins.tsclass.business.IContact = {
   vatId: 'BE12345678',
 }
 
-export const demoLetter: plugins.tsclass.business.ILetter = {
+export const demoLetter: tsclass.business.ILetter = {
   versionInfo: {
     type: 'draft',
     version: '1.0.0',

ts/shared/index.ts

@@ -3,9 +3,6 @@ export const a4Width = 794;
 export const rightMargin = 70;
 export const leftMargin = 90;
 
-import * as interfaces from './interfaces/index.js';
-export { interfaces };
-
 import * as translation from './translation.js';
 export { translation };
 

ts/shared/translation.ts

@@ -0,0 +1,82 @@
+import * as interfaces from '../interfaces/index.js';
+
+type TTranslationImplementation = {
+  [key in keyof interfaces.IDeDocumentTranslations]: string;
+}
+
+export const EN_translations: TTranslationImplementation = {
+  address: 'Address',
+  bankConnection: 'Bank Connection',
+  contactInfo: 'Contact Info',
+  description: 'Description',
+  invoice: 'Invoice',
+  itemPos: 'Item Pos.',
+  quantity: 'Quantity',
+  registrationInfo: 'Registration Info',
+  reverseVatNote: 'VAT arises on a reverse charge basis and is payable by the customer.',
+  totalNetPrice: 'Total Net Price',
+  unitNetPrice: 'Unit Net Price',
+  unitType: 'Unit Type',
+  yourCustomerId: 'Your Customer ID:',
+  yourVatId: 'Your vat id on file:',
+  continuesOnPage: 'Continues on page',
+  finalPageStatement: 'This is the final page of this document.',
+  page: 'Page',
+};
+
+export const DE_translations: TTranslationImplementation = {
+  address: 'Adresse',
+  bankConnection: 'Bankverbindung',
+  contactInfo: 'Kontaktinformationen',
+  description: 'Beschreibung',
+  invoice: 'Rechnung',
+  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',
+  unitType: 'Einheit',
+  yourCustomerId: 'Ihre Kundennummer:',
+  yourVatId: 'Ihre Umsatzsteuer-ID:',
+  continuesOnPage: 'Fortsetzung auf Seite',
+  finalPageStatement: 'Diese ist die letzte Seite einer Dokumente.',
+  page: 'Seite',
+};
+
+export const ES_translations: TTranslationImplementation = {
+  address: 'Dirección',
+  bankConnection: 'Conexión bancaria',
+  contactInfo: 'Información de contacto',
+  description: 'Descripción',
+  invoice: 'Factura',
+  itemPos: 'Pos.',
+  quantity: 'Cantidad',
+  registrationInfo: 'Información de registro',
+  reverseVatNote: 'La declaración de IVA se aplica en base a la factura de venta, y se paga por el cliente.',
+  totalNetPrice: 'Precio total neto',
+  unitNetPrice: 'Precio unitario neto',
+  unitType: 'Tipo de unidad',
+  yourCustomerId: 'Su número de cliente:',
+  yourVatId: 'Su ID de IVA:',
+  continuesOnPage: 'Continues on page',
+  finalPageStatement: 'This is the final page of this document.',
+  page: 'Page',
+};
+
+export const languageCodeMap = {
+  'DE': DE_translations,
+  'EN': EN_translations,
+  'ES': ES_translations,
+};
+
+export type TLanguageCode = keyof typeof languageCodeMap;
+
+export const translate = (languageCode: TLanguageCode, key: string, defaultValue: string) => {
+  const translations = languageCodeMap[languageCode] || EN_translations;
+  if (translations && translations[key]) {
+    return translations[key];
+  } else {
+    return defaultValue;
+  }
+};

ts/tspublish.json

@@ -1,3 +0,0 @@
-{
-  "order": 2
-}

ts_shared/interfaces/index.ts

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

ts_shared/plugins.ts

@@ -1,4 +0,0 @@
-// tsclass scope
-import * as tsclass from '@tsclass/tsclass';
-
-export { tsclass };

ts_shared/translation.ts

@@ -1,143 +0,0 @@
-import * as interfaces from './interfaces/index.js';
-
-// Define English translations without enforcing TTranslationImplementation yet
-export const EN_translations = {
-  address: 'Address',
-  bankConnection: 'Bank Connection',
-  contactInfo: 'Contact Info',
-  description: 'Description',
-  invoice: 'Invoice',
-  itemPos: 'Item Pos.',
-  quantity: 'Quantity',
-  registrationInfo: 'Registration Info',
-  reverseVatNote: 'VAT arises on a reverse charge basis and is payable by the customer.',
-  totalNetPrice: 'Total Net Price',
-  unitNetPrice: 'Unit Net Price',
-  unitType: 'Unit Type',
-  yourCustomerId: 'Your Customer ID:',
-  yourVatId: 'Your vat id on file:',
-  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',
-  contactInfo: 'Kontaktinformationen',
-  description: 'Beschreibung',
-  invoice: 'Rechnung',
-  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: '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',
-  contactInfo: 'Información de contacto',
-  description: 'Descripción',
-  invoice: 'Factura',
-  itemPos: 'Pos.',
-  quantity: 'Cantidad',
-  registrationInfo: 'Información de registro',
-  reverseVatNote: 'El IVA se aplica por inversión del sujeto pasivo y debe ser pagado por el cliente.',
-  totalNetPrice: 'Precio total neto',
-  unitNetPrice: 'Precio unitario neto',
-  unitType: 'Tipo de unidad',
-  yourCustomerId: 'Su número de cliente:',
-  yourVatId: 'Su ID de IVA:',
-  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',
-  contactInfo: 'Informations de contact',
-  description: 'Description',
-  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.",
-  totalNetPrice: 'Prix net total',
-  unitNetPrice: 'Prix unitaire net',
-  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',
-  contactInfo: 'Informazioni di contatto',
-  description: 'Descrizione',
-  invoice: 'Fattura',
-  itemPos: 'Pos.',
-  quantity: 'Quantità',
-  registrationInfo: 'Informazioni di registrazione',
-  reverseVatNote: "L'IVA è applicata con inversione contabile ed è a carico del cliente.",
-  totalNetPrice: 'Prezzo netto totale',
-  unitNetPrice: 'Prezzo netto unitario',
-  unitType: 'Tipo di unità',
-  yourCustomerId: 'Il tuo numero cliente:',
-  yourVatId: 'Il tuo numero di partita IVA:',
-  continuesOnPage: 'Continua alla pagina',
-  finalPageStatement: 'Questa è l\'ultima pagina di questo documento.',
-  page: 'Pagina',
-  vatShort: 'IVA',
-};
-
-// 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;
-
-// Translate Function
-export const translate = (
-  languageCode: TLanguageCode,
-  key: TTranslationKey,
-  defaultValue: string
-): string => {
-  const translations = languageCodeMap[languageCode] || EN_translations;
-  return translations[key] || defaultValue;
-};

ts_shared/tspublish.json

@@ -1,3 +0,0 @@
-{
-  "order": 1
-}

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.6.11',
+  version: '1.3.1',
   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

@@ -15,8 +15,9 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 import * as plugins from '../plugins.js';
+import * as shared from '../../ts/shared/index.js';
+import * as interfaces from '../../ts/interfaces/index.js';
 
-import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -48,7 +49,7 @@ export class DeContentInvoice extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  public documentSettings: interfaces.IDocumentSettings;
 
   constructor() {
     super();
@@ -57,7 +58,6 @@ export class DeContentInvoice extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -174,6 +174,7 @@ export class DeContentInvoice extends DeesElement {
       (await this.getContentNodes()).trimmedContent.append(
         (await this.getContentNodes()).currentContent.children.item(0)
       );
+      console.log('hey' + this.shadowRoot.children.length);
     }
     if (
       (await this.getContentNodes()).currentContent.children
@@ -205,7 +206,7 @@ export class DeContentInvoice extends DeesElement {
         <style>
           .grid {
             display: grid;
-            grid-template-columns: 40px auto 60px 60px 84px 84px 46px;
+            grid-template-columns: 40px auto 80px 80px 90px 90px;
           }
           .topLine {
             margin-top: 5px;
@@ -215,29 +216,12 @@ export class DeContentInvoice extends DeesElement {
           .lineItem {
             font-size: 12px;
             padding: 5px;
-            border-right: 1px dashed #ccc;
-          }
-
-          .lineItem:last-child {
-            border-right: none;
-          }
-
-          .lineItem.rightAlign {
-            text-align: right;
           }
 
           .invoiceLine {
-            background: #ffffff00;
             border-bottom: 1px dotted #ccc;
           }
 
-          .invoiceLine.highlighted {
-            transition: background 0.2s;
-            background: #ffc18f;
-            border: 1px solid #ff9d4d;
-            box-sizing: content-box;
-          }
-
           .sums {
             margin-top: 5px;
             font-size: 12px;
@@ -297,77 +281,29 @@ 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 rightAlign">
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-            ${plugins.shared.translation.translate(
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-              this.documentSettings.languageCode,
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-              'itemPos',
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-              'Item Pos.'
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
-            )}
+          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
-          </div>
-          <div class="lineItem">
-            ${plugins.shared.translation.translate(
-              this.documentSettings.languageCode,
-              'description',
-              'Description'
-            )}
-          </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 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) => {
+          return this.letterData?.content.invoiceData?.items?.map(
-            const isHighlighted = false; // TODO: implement rest of highlight logic
+            (invoiceItem) => html`
-            return html`
+              <div class="grid invoiceLine needsDataHeader">
-              <div class="grid invoiceLine needsDataHeader ${isHighlighted ? 'highlighted' : ''}">
+                <div class="lineItem">${counter++}</div>
-                <div class="lineItem rightAlign">${counter++}</div>
                 <div class="lineItem">${invoiceItem.name}</div>
-                <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
+                <div class="lineItem">${invoiceItem.unitQuantity}</div>
                 <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem rightAlign">
+                <div class="lineItem">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
-                  ${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
+                <div class="lineItem">
+                  ${invoiceItem.unitQuantity * 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>
-            `;
+            `
-          });
+          );
         })()}
         <div class="sums">
           <div class="sumline">
@@ -376,23 +312,15 @@ 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 += `${first ? '' : ', '}${itemIndex + 1}`;
+              itemNumbers += ` ${itemIndex + 1},`;
-              first = false;
             }
             return html`
               <div class="sumline">
                 <div class="label">
-                  Vat ${vatGroupArg.vatPercentage}%
+                  Vat ${vatGroupArg.vatPercentage}%<br />
-                  ${this.documentSettings.vatGroupPositions
+                  <span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
-                    ? html`
-                        <br /><span style="font-weight: normal"
-                          >(on item positions: ${itemNumbers})</span
-                        >
-                      `
-                    : html``}
                 </div>
                 <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>
@@ -407,11 +335,7 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                ${plugins.shared.translation.translate(
+                ${shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
-                  this.documentSettings.languageCode,
-                  'reverseVatNote',
-                  'VAT arises on a reverse charge basis and is payable by the customer.'
-                )}
               </div>
             `
           : ``}
@@ -431,9 +355,7 @@ export class DeContentInvoice extends DeesElement {
               <div class="infoBox">
                 <div class="label">Referenced contract:</div>
                 This invoice is adhering to agreements made by contract between the parties on
-                ${plugins.smarttime.ExtendedDate.fromMillis(
+                ${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
-                  this.letterData?.content.contractData.contractDate
-                ).format('MMMM D, YYYY')}.
               </div>
             `
           : html``}
@@ -460,6 +382,7 @@ ${this.letterData.content.invoiceData.id}
 EPC QR Code`,
       (error) => {
         if (error) console.error(error);
+        console.log('success!');
       }
     );
     contentNodes.currentContent.querySelector('.paymentCode').append(canvas);

ts_web/elements/document.demo.ts

@@ -1,7 +1,6 @@
-import * as plugins from '../plugins.js';
+import * as shared from '../../ts/shared/index.js';
-
 import { html } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
-<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
+<dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
 `;

ts_web/elements/document.ts

@@ -10,20 +10,21 @@ import {
   unsafeCSS,
   domtools,
 } from '@design.estate/dees-element';
+
+import * as interfaces from '../../ts/interfaces/index.js';
 import * as plugins from '../plugins.js';
 
-export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings = {
+export const defaultDocumentSettings: interfaces.IDocumentSettings = {
   enableTopDraftText: true,
   enableDefaultHeader: true,
   enableDefaultFooter: true,
-  languageCode: 'EN',
-  vatGroupPositions: true,
 };
 
 
 import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';
 
+import * as shared from '../../ts/shared/index.js';
 import { demoFunc } from './document.demo.js';
 
 declare global {
@@ -84,7 +85,7 @@ export class DeDocument extends DeesElement {
       }
     },
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -99,7 +100,6 @@ export class DeDocument extends DeesElement {
         color: #333;
         padding: 0px;
         position: relative;
-        font-family: 'Dees Sans', sans-serif;
       }
 
       .betweenPagesSpacer {
@@ -115,36 +115,6 @@ 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;
@@ -159,22 +129,14 @@ export class DeDocument extends DeesElement {
     })
   }
 
-  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
   public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
-  public cleanupStore: any[] = [];
 
 
   public async renderDocument() {
-
-    this.latestDocumentSettings = this.documentSettings;
-    this.latestRenderedLetterData = this.letterData;
-
-    const cleanUpStoreCurrentRender = [];
-    const cleanUpStoreNextRender = [];
-
     const domtools = await this.domtoolsPromise;
+    
+
     const documentBuildContainer = document.createElement('div');
-    cleanUpStoreCurrentRender.push(documentBuildContainer);
     document.body.appendChild(documentBuildContainer);
 
     let pages: DePage[] = [];
@@ -183,7 +145,6 @@ export class DeDocument extends DeesElement {
 
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
-    cleanUpStoreCurrentRender.push(content);
     content.letterData = this.letterData;
     content.documentSettings = this.documentSettings;
     document.body.appendChild(content);
@@ -195,7 +156,6 @@ export class DeDocument extends DeesElement {
     while (!complete) {
       pageCounter++;
       const currentContent = content.cloneNode(true) as DeContentInvoice;
-      cleanUpStoreNextRender.push(currentContent);
       const newPage = new DePage();
       newPage.printMode = this.printMode;
       newPage.letterData = this.letterData;
@@ -204,9 +164,6 @@ export class DeDocument extends DeesElement {
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);
       newPage.pageTotalNumber = pageCounter;
-
-      // store current page
-      cleanUpStoreNextRender.push(newPage);
       documentBuildContainer.append(newPage);
       
       await currentContent.elementDomReady;
@@ -223,24 +180,16 @@ export class DeDocument extends DeesElement {
       if (trimmed === 0) {
         complete = true;
       }
+      // complete = true;
+      console.log(currentContentOffset);
     }
-    
+    document.body.removeChild(content);
-    for (const cleanUp of this.cleanupStore) {
+    document.body.removeChild(documentBuildContainer);
-      cleanUp.remove();
-    }
-    this.cleanupStore = cleanUpStoreNextRender
-
-    cleanUpStoreCurrentRender.forEach((cleanUp) => {
-      cleanUp.remove();
-    });
 
     const documentContainer = this.shadowRoot.querySelector('.documentContainer');
     if (documentContainer) {
       const children = Array.from(documentContainer.children);
-      children.forEach((child) => {
+      children.forEach((child) => documentContainer.removeChild(child));
-        documentContainer.removeChild(child);
-        child.remove();
-      });
     }
     for (const page of pages) {
       page.pageTotalNumber = pageCounter;
@@ -253,13 +202,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;
-    let renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData)
+    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
-     && domtools.convenience.smartjson.deepEqualObjects(this.documentSettings, this.latestDocumentSettings);
     if (!renderedDocIsUpToDate) {
       this.renderDocument();
     }
@@ -284,6 +233,7 @@ export class DeDocument extends DeesElement {
       }
       if (this.viewWidth) {
         page.viewWidth = this.viewWidth;
+        console.log('setting viewWidth: ', this.viewWidth);
       }
     });
   }

ts_web/elements/index.ts

@@ -7,3 +7,5 @@ export * from './pagecontent.js';
 export * from './pagefooter.js';
 export * from './pageheader.js';
 export * from './viewer.js';
+
+export * from '../../ts/shared/index.js';

ts_web/elements/letterheader.ts

@@ -7,11 +7,11 @@ import {
   css,
   cssManager,
   unsafeCSS,
-  domtools,
 } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
 
-import * as plugins from '../plugins.js';
+import * as shared from '../../ts/shared/index.js';
-import { dedocumentSharedStyle } from '../style.js';
+import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -22,14 +22,14 @@ declare global {
 @customElement('dedocument-letterheader')
 export class DeLetterHeader extends DeesElement {
   public static demo = () => html`
-    <dedocument-letterheader .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-letterheader>
+    <dedocument-letterheader .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-letterheader>
   `;
 
   @property({
     type: Object,
     reflect: true
   })
-  public letterData: plugins.tsclass.business.ILetter;
+  public letterData: tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -50,7 +50,6 @@ export class DeLetterHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -61,7 +60,7 @@ export class DeLetterHeader extends DeesElement {
         display: block;
         overflow: hidden;
         top: 200px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
         width: 200px;
         text-align: right;
       }
@@ -75,14 +74,14 @@ export class DeLetterHeader extends DeesElement {
       .date {
         position: absolute;
         top: 180px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
         text-align: right;
       }
 
       .address {
         position: absolute;
         top: 180px;
-        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
+        left: ${unsafeCSS(shared.leftMargin + 'px')};
       }
 
       .address .from {

ts_web/elements/page.ts

@@ -11,10 +11,12 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 
-import * as plugins from '../plugins.js';
+import * as interfaces from '../../ts/interfaces/index.js';
 
 import { defaultDocumentSettings } from './document.js';
 
+import * as shared from '../../ts/shared/index.js';
+
 declare global {
   interface HTMLElementTagNameMap {
     'dedocument-page': DePage;
@@ -65,7 +67,7 @@ export class DePage extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -77,7 +79,6 @@ export class DePage extends DeesElement {
     css`
       :host {
         display: block;
-        overflow: hidden;
       }
 
       #scaleWrapper {
@@ -196,21 +197,23 @@ export class DePage extends DeesElement {
   }
 
   private adjustScaling() {
+    console.log('page scale adjustment triggered.');
     const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
 
     if (!scaleWrapper) return;
 
     let scale = 1;
     if (this.viewHeight) {
-      scale = this.viewHeight / plugins.shared.a4Height;
+      scale = this.viewHeight / shared.a4Height;
     } else if (this.viewWidth) {
-      scale = this.viewWidth / plugins.shared.a4Width;
+      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 = `${plugins.shared.a4Width * scale}px`;
+    // this.style.width = `${shared.a4Width * scale}px`;
-    this.style.height = `${plugins.shared.a4Height * scale}px`;
+    this.style.height = `${shared.a4Height * scale}px`;
   }
 }

ts_web/elements/pagecontainer.ts

@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as plugins from '../plugins.js';
+import * as shared from '../../ts/shared/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -47,8 +47,8 @@ export class DePageContainer extends DeesElement {
         background: white;
         color: #333;
         padding: 0px;
-        width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
+        width: ${unsafeCSS(shared.a4Width + 'px')};
-        height: ${unsafeCSS(plugins.shared.a4Height + 'px')};
+        height: ${unsafeCSS(shared.a4Height + 'px')};
         position: relative;
         border-radius: 3px;
         overflow: hidden;

ts_web/elements/pagecontent.ts

@@ -7,11 +7,11 @@ import {
   css,
   cssManager,
   unsafeCSS,
-  domtools,
 } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
 
-import * as plugins from '../plugins.js';
+import * as shared from '../../ts/shared/index.js';
-import { dedocumentSharedStyle } from '../style.js';
+import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,7 +28,7 @@ export class DePageContent extends DeesElement {
   @property({
     type: Number,
   })
-  public letterData: plugins.tsclass.business.ILetter;
+  public letterData: tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -47,7 +47,6 @@ export class DePageContent extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -56,8 +55,8 @@ export class DePageContent extends DeesElement {
       .content {
         position: absolute;
 
-        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
+        left: ${unsafeCSS(shared.leftMargin + 'px')};
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
         bottom: 170px;
         overflow: visible;
       }
@@ -138,8 +137,10 @@ export class DePageContent extends DeesElement {
     await this.elementDomReady;
     const contentContainer = this.shadowRoot.querySelector('.content');
     if (contentContainer.scrollHeight > contentContainer.clientHeight) {
+      console.log('overflows');
       return true;
     } else {
+      console.log('does not overflow!');
       return false;
     }
   }

ts_web/elements/pagefooter.ts

@@ -10,8 +10,10 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 
-import * as plugins from '../plugins.js';
+import * as interfaces from '../../ts/interfaces/index.js';
-import { dedocumentSharedStyle } from '../style.js';
+
+import * as shared from '../../ts/shared/index.js';
+import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,13 +30,13 @@ export class DePageFooter extends DeesElement {
   @property({
     type: Object,
   })
-  letterData: plugins.tsclass.business.ILetter;
+  letterData: tsclass.business.ILetter;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  documentSettings: interfaces.IDocumentSettings;
 
   @property({
     type: Number
@@ -53,7 +55,6 @@ export class DePageFooter extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -68,7 +69,7 @@ export class DePageFooter extends DeesElement {
         right: 0px;
         height: 130px;
         content: '';
-        padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
+        padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
         grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
         grid-gap: 5px;
         border-top: 2px solid #e4002b;
@@ -77,7 +78,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .pageNumber {
         position: absolute;
         top: 0px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
         background: #e4002b;
         padding: 3px;
         font-size: 9px;
@@ -88,7 +89,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .documentTitle {
         position: absolute;
         top: -18px;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
         background: #dddddd;
         padding: 3px;
         font-size: 9px;
@@ -103,26 +104,26 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
           ${this.letterData.from.name}<br />
           ${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
           ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
           ${this.letterData.from.address.country}
         </div>
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
           Amtsgericht Bremen<br />
           <i>reg-#:</i> HRB 35230 HB<br />
           <i>vat-id:</i> ${this.letterData.from.vatId}
         </div>
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
           <i>email:</i> ${this.letterData.from.email}<br />
           <i>phone:</i> ${this.letterData.from.phone}<br />
           <i>fax:</i> ${this.letterData.from.fax}
         </div>
         <div>
-          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
+          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
           <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
           <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
           <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />

ts_web/elements/pageheader.ts

@@ -10,8 +10,10 @@ import {
   domtools
 } from '@design.estate/dees-element';
 
-import * as plugins from '../plugins.js';
+import * as interfaces from '../../ts/interfaces/index.js';
-import { dedocumentSharedStyle } from '../style.js';
+
+import * as shared from '../../ts/shared/index.js';
+import * as tsclass from '@tsclass/tsclass';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,13 +30,13 @@ export class DePageHeader extends DeesElement {
   @property({
     type: Object,
   })
-  public letterData: plugins.tsclass.business.ILetter = null;
+  public letterData: tsclass.business.ILetter = null;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  documentSettings: interfaces.IDocumentSettings;
 
   @property({
     type: Number,
@@ -53,7 +55,6 @@ export class DePageHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -75,7 +76,7 @@ export class DePageHeader extends DeesElement {
         overflow: hidden;
         top: 130px;
         left: auto;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
         height: 20px;
         line-height: 20px;
         color: #333;
@@ -86,7 +87,7 @@ export class DePageHeader extends DeesElement {
         bottom: 10px;
         height: 25px;
         left: auto;
-        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
+        right: ${unsafeCSS(shared.rightMargin + 'px')};
         font-family: 'Courier New', Courier, monospace;
       }
       .topstripe .logo img {

ts_web/elements/viewer.demo.ts

@@ -1,6 +1,6 @@
 import { html } from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
+import * as shared from '../../ts/shared/index.js';
 
 export const demoFunc = () => html`
-  <dedocument-viewer .letterData=${plugins.shared.demoLetter} .documentSettings=${plugins.shared.demoDocumentSettings}></dedocument-viewer>
+  <dedocument-viewer .letterData=${shared.demoLetter} .documentSettings=${shared.demoDocumentSettings}></dedocument-viewer>
 `;

ts_web/elements/viewer.ts

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

ts_web/pages/index.ts

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

ts_web/pages/page1.ts

@@ -1,17 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/plugins.ts

@@ -1,8 +1,3 @@
-// dees-document scope
-import * as shared from '../dist_ts_shared/index.js';
-
-export { shared };
-
 // tsclass scope
 import * as tsclass from '@tsclass/tsclass';
 

ts_web/style.ts

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

ts_web/tspublish.json

@@ -1,3 +0,0 @@
-{
-  "order": 3
-}

tsconfig.json

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