1.6.11

Reviewed-on: #1

.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,118 @@
 # 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
+
+- The package description in package.json was updated to include more features.
+- Added more details about setting up and using the PdfService.
+- Included comprehensive examples for initializing and generating PDFs.
+- Expanded sections covering advanced features, modular components, interactive documents, and localization support.
+
 ## 2024-12-02 - 1.3.0 - feat(translation)
 Add multi-language support for document translations.
 

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-->

license

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

npmextra.json

@@ -5,7 +5,7 @@
       "githost": "code.foss.global",
       "gitscope": "designestate/private",
       "gitrepo": "dedocument-catalog",
-      "description": "A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.",
+      "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
       "npmPackagename": "@designestate_private/dedocument-catalog",
       "license": "MIT",
       "projectDomain": "design.estate",
@@ -24,7 +24,11 @@
         "responsive design",
         "QR code",
         "modular architecture",
-        "automated workflows"
+        "automated workflows",
+        "localization",
+        "digital signatures",
+        "security",
+        "interactive documents"
       ]
     }
   },

package.json

@@ -1,17 +1,20 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.3.0",
+  "version": "1.6.11",
   "private": false,
-  "description": "A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.",
+  "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": {
-    "./ts": "./dist_ts/index.js",
-    "./ts_web": "./dist_ts_web/index.js"
+    ".": "./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"
   },
   "scripts": {
     "test": "npm run build && tstest test/",
-    "build": "tsbuild --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
     "watch": "tswatch element",
     "buildDocs": "tsdoc"
   },
@@ -36,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"
   },
@@ -58,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",
@@ -78,6 +81,10 @@
     "responsive design",
     "QR code",
     "modular architecture",
-    "automated workflows"
+    "automated workflows",
+    "localization",
+    "digital signatures",
+    "security",
+    "interactive documents"
   ]
 }

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

@@ -1,7 +1,6 @@
-```markdown
 # @design.estate/dees-document
 
-A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.
+A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.
 
 ## Install
 
@@ -15,18 +14,20 @@ This command will install the package and add it to your project's dependencies,
 
 ## Usage
 
-The `@design.estate/dees-document` package serves as a robust framework to facilitate the generation of business documents, such as invoices and contracts. Leveraging modern web technologies, this package integrates seamlessly with TypeScript and ES modules, offering a type-safe environment conducive to efficient, dynamic document creation. Presented here is a comprehensive guide to utilizing this package, ranging from initializing your environment to generating complete PDF documents.
+The `@design.estate/dees-document` package serves as a robust framework to facilitate the generation of business documents, such as invoices, contracts, and reports. Leveraging modern web technologies, this package integrates seamlessly with TypeScript and ES modules, offering a type-safe environment conducive to efficient, dynamic document creation.
 
-### Getting Started
+Below, we provide a detailed guide for utilizing this package, from initializing your environment to generating complete PDF documents.
 
-To embark on a document creation journey, initiate the document service. This service constitutes the core of this package and is typically started at the application's outset.
+### Setting Up the Environment
+
+Before diving into document creation, ensure your environment is properly configured. Make sure to import necessary dependencies and setup configurations:
 
 ```typescript
 import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
 
 async function setupPdfService() {
   const options: IPdfServiceConstructorOptions = {
-    // configure your options here
+    // Configure your options here
   };
 
   const pdfService = await PdfService.createAndStart(options);
@@ -35,70 +36,68 @@ async function setupPdfService() {
 }
 ```
 
-The above code initializes the `PdfService`. Tailor the configuration options to suit your specific requirements.
+In this setup snippet, you set up the `PdfService` which is the core component for PDF generation. The configuration options should be adjusted to fit your needs, especially considering options such as file paths, languages, and template directories.
 
-### Creating Documents
+### Creating a Document Template
 
-With the PDF service initialized, you can now proceed to generate your documents. In the following section, you will find a detailed walkthrough for creating an invoice. This method can be adapted to other document types with necessary modifications.
-
-#### Step-by-Step: Create an Invoice
-
-1. **Define the Data Structure**: Construct the details of the invoice, including the sender, recipient information, and the details of the items being invoiced.
+To create documents, particularly invoices, you'll first need to define a template. This template describes the structure of your document:
 
 ```typescript
 import { ILetter } from '@design.estate/dees-document';
 
-   const invoiceData: ILetter = {
+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',
   },
 };
 ```
 
-   The `ILetter` interface captures all the components of an invoice, including both the sender (`from`) and recipient (`to`) information, alongside the details of the invoiced items.
+The `invoiceTemplate` object utilizes the `ILetter` interface which specifies the structure for invoice data, including sender and recipient details, itemization, and pricing.
 
-2. **Generate the PDF**: Convert the invoice details into a PDF file.
+### Generating the Document
+
+Once a template is established, the next step is generating a PDF:
 
 ```typescript
 async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
@@ -109,64 +108,76 @@ With the PDF service initialized, you can now proceed to generate your documents
 }
 ```
 
-   The `createPdfFromLetterObject` function returns a `Buffer` that contains the generated PDF, enabling you to save it to a file, send it to clients, or store it for record-keeping.
+In this function, the `createPdfFromLetterObject` method converts your invoice data into a `Buffer` containing the PDF. This `Buffer` can subsequently be saved as a file or sent over HTTP.
 
-3. **Integrate It All**: The following script ties together the PDF service and generates the invoice with the described data.
+### Comprehensive Example
+
+Below is an example integrating all previous steps into a single coherent script:
 
 ```typescript
 async function main() {
   const pdfService = await setupPdfService();
+  const invoiceData: ILetter = {
+    // Populate your invoice object
+  };
   await generateInvoice(pdfService, invoiceData);
 }
 
 main().then(() => console.log('Invoice generation process completed.'));
 ```
 
-   This example initiates the PDF service and utilizes it to generate a PDF invoice with specified parameters.
+This script encompasses initializing services and generating a PDF in a streamlined, efficient workflow.
 
-### Advanced Document Features
+### Advanced Features
 
-The package is designed to create a broad range of documents, far beyond simple invoices. Utilize the modular architecture to customize documents to your specific business requirements.
+`@design.estate/dees-document` provides several advanced functionalities, enabling rich document creation:
 
-#### Advanced Scenarios
+1. **Custom Templates & Styling**
 
-1. **Custom Styling**: Alter the visual styles of various elements within your documents, like headers, footers, and more through CSS or inline styles.
+   - 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**
+   - Implement complex logic for feature-rich documents such as inventory systems, automatic tax calculations, or real-time pricing adjustments.
+
+### Utilize Translation for Localization
+
+The package offers a translation mechanism to adapt your documents for international clients:
 
 ```typescript
-   import { DeDocumentViewer } from '@design.estate/dees-element';
+import { translate } from '@design.estate/dees-document/shared';
 
-   const customStyledViewer = new DeDocumentViewer();
-   customStyledViewer.style.setProperty('--main-bg-color', 'lightblue');
-   document.body.appendChild(customStyledViewer);
+const languageCode: 'DE' | 'EN' | 'ES' = 'EN'; // Set required language code
+console.log(translate(languageCode, 'invoice', 'Invoice')); // Translated output
 ```
 
-   Adjust styles either with standard CSS or via dynamic TypeScript changes.
+Different language settings can be applied, enabling the seamless presentation of document contents tailored to regional and linguistic preferences.
 
-2. **Interactive Document Elements**: Integrate interactive UI components, like buttons or input fields, fitting seamlessly into your documents.
+### Conclusion
 
-3. **Multi-page Document Generation**: Handle content overflow elegantly through automatic page creation, keeping headers and footers intact.
-
-   ```typescript
-   pdfService.adjustDePageScaling();
-   ```
-
-   Adapt between print and digital formats, managing scaling effectively.
-
-4. **Embedding Images and Logos**: Enhance your document's appearance with company logos, graphics, and other auxiliary content.
-
-### Additional Capabilities
-
-Beyond basic functionality, this package offers a range of advanced features:
-
-- **Document Management**: Manage multiple document templates, maintain version control, and append annotations or notes.
-- **Dynamic Rendering**: Utilize templating engines to render dynamic content based on input variables.
-- **Responsive Design for Digital Documents**: Ensure your documents are consistently displayed across various devices.
-
-### Concluding Remarks
-
-The `@design.estate/dees-document` package presents a powerful solution within the modern document generation realm. From basic invoices to intricate templates, this package provides the essential tools for businesses to streamline their document workflows and enhance their presentation quality and accuracy. Explore further depth by consulting the package’s detailed documentation or by reviewing the examples included within the module.
-```
+The `@design.estate/dees-document` package is a versatile and powerful solution for businesses seeking to automate and streamline their document generation processes using modern web technologies. By integrating seamlessly with TypeScript, it offers robust capabilities for creating complex, customizable, and interactive documents that can meet a variety of business needs.
 
+From custom templates to localization and advanced security features, this module provides the flexibility and power to create polished and professional documents efficiently. Whether you're generating invoices, contracts, or detailed reports, `@design.estate/dees-document` has the tools to support your enterprise workflows with ease and precision.
 
 ## License and Legal Information
 

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

@@ -1,6 +1,6 @@
 import * as plugins from './plugins.js';
 import * as paths from './paths.js';
-import * as interfaces from '../ts/interfaces/index.js';
+import * as interfaces from '../ts_shared/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.3.0',
-  description: 'A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.'
+  version: '1.6.11',
+  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,11 +1,7 @@
 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
@@ -46,8 +42,8 @@ export class PdfService {
    * creates an letter
    */
   public async createPdfFromLetterObject(optionsArg: {
-    letterData: plugins.tsclass.business.ILetter,
-    documentSettings: 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/interfaces/index.ts

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

ts/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/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,12 @@
 // 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';
@@ -11,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/translation.ts

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

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

ts_shared/demoletter.ts

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

ts_shared/index.ts

@@ -3,6 +3,9 @@ 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/interfaces/document.ts

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

ts_shared/interfaces/index.ts

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

ts_shared/plugins.ts

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

ts_shared/translation.ts

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

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

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.3.0',
-  description: 'A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.'
+  version: '1.6.11',
+  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,9 +15,8 @@ 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 {
@@ -49,7 +48,7 @@ export class DeContentInvoice extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: interfaces.IDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   constructor() {
     super();
@@ -58,6 +57,7 @@ export class DeContentInvoice extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -174,7 +174,6 @@ 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
@@ -206,7 +205,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;
@@ -216,12 +215,29 @@ 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;
@@ -281,29 +297,77 @@ 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">${shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-          <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 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 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) => html`
-              <div class="grid invoiceLine needsDataHeader">
-                <div class="lineItem">${counter++}</div>
+          return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => {
+            const isHighlighted = false; // TODO: implement rest of highlight logic
+            return html`
+              <div class="grid invoiceLine needsDataHeader ${isHighlighted ? 'highlighted' : ''}">
+                <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">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
+                <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>
+            `;
+          });
         })()}
         <div class="sums">
           <div class="sumline">
@@ -312,15 +376,23 @@ 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>
@@ -335,7 +407,11 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                ${shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
+                ${plugins.shared.translation.translate(
+                  this.documentSettings.languageCode,
+                  'reverseVatNote',
+                  'VAT arises on a reverse charge basis and is payable by the customer.'
+                )}
               </div>
             `
           : ``}
@@ -355,7 +431,9 @@ 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(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
+                ${plugins.smarttime.ExtendedDate.fromMillis(
+                  this.letterData?.content.contractData.contractDate
+                ).format('MMMM D, YYYY')}.
               </div>
             `
           : html``}
@@ -382,7 +460,6 @@ ${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,6 +1,7 @@
-import * as shared from '../../ts/shared/index.js';
+import * as plugins from '../plugins.js';
+
 import { html } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
-<dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
+<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
 `;

ts_web/elements/document.ts

@@ -10,21 +10,20 @@ 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: interfaces.IDocumentSettings = {
+export const defaultDocumentSettings: plugins.shared.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 {
@@ -85,7 +84,7 @@ export class DeDocument extends DeesElement {
       }
     },
   })
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -100,6 +99,7 @@ export class DeDocument extends DeesElement {
         color: #333;
         padding: 0px;
         position: relative;
+        font-family: 'Dees Sans', sans-serif;
       }
 
       .betweenPagesSpacer {
@@ -115,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;
@@ -129,14 +159,22 @@ 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[] = [];
@@ -145,6 +183,7 @@ 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);
@@ -156,6 +195,7 @@ 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;
@@ -164,6 +204,9 @@ 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;
@@ -180,16 +223,24 @@ export class DeDocument extends DeesElement {
       if (trimmed === 0) {
         complete = true;
       }
-      // complete = true;
-      console.log(currentContentOffset);
     }
-    document.body.removeChild(content);
-    document.body.removeChild(documentBuildContainer);
+    
+    for (const cleanUp of this.cleanupStore) {
+      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) => documentContainer.removeChild(child));
+      children.forEach((child) => {
+        documentContainer.removeChild(child);
+        child.remove();
+      });
     }
     for (const page of pages) {
       page.pageTotalNumber = pageCounter;
@@ -202,13 +253,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();
     }
@@ -233,7 +284,6 @@ export class DeDocument extends DeesElement {
       }
       if (this.viewWidth) {
         page.viewWidth = this.viewWidth;
-        console.log('setting viewWidth: ', this.viewWidth);
       }
     });
   }

ts_web/elements/index.ts

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

ts_web/elements/page.ts

@@ -11,12 +11,10 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 
-import * as interfaces from '../../ts/interfaces/index.js';
+import * as plugins from '../plugins.js';
 
 import { defaultDocumentSettings } from './document.js';
 
-import * as shared from '../../ts/shared/index.js';
-
 declare global {
   interface HTMLElementTagNameMap {
     'dedocument-page': DePage;
@@ -67,7 +65,7 @@ export class DePage extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -79,6 +77,7 @@ export class DePage extends DeesElement {
     css`
       :host {
         display: block;
+        overflow: hidden;
       }
 
       #scaleWrapper {
@@ -197,23 +196,21 @@ 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 / shared.a4Height;
+      scale = this.viewHeight / plugins.shared.a4Height;
     } else if (this.viewWidth) {
-      scale = this.viewWidth / shared.a4Width;
+      scale = this.viewWidth / plugins.shared.a4Width;
     }
-    console.log(`new scale is ${scale}`);
     scaleWrapper.style.transform = `scale(${scale})`;
 
     // Adjust the outer dimensions so they match the scaled content
 
-    // this.style.width = `${shared.a4Width * scale}px`;
-    this.style.height = `${shared.a4Height * scale}px`;
+    this.style.width = `${plugins.shared.a4Width * scale}px`;
+    this.style.height = `${plugins.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 shared from '../../ts/shared/index.js';
+import * as plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -47,8 +47,8 @@ export class DePageContainer extends DeesElement {
         background: white;
         color: #333;
         padding: 0px;
-        width: ${unsafeCSS(shared.a4Width + 'px')};
-        height: ${unsafeCSS(shared.a4Height + 'px')};
+        width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
+        height: ${unsafeCSS(plugins.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 shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,7 +28,7 @@ export class DePageContent extends DeesElement {
   @property({
     type: Number,
   })
-  public letterData: tsclass.business.ILetter;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -47,6 +47,7 @@ export class DePageContent extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -55,8 +56,8 @@ export class DePageContent extends DeesElement {
       .content {
         position: absolute;
 
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         bottom: 170px;
         overflow: visible;
       }
@@ -137,10 +138,8 @@ 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,10 +10,8 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 
-import * as interfaces from '../../ts/interfaces/index.js';
-
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,13 +28,13 @@ export class DePageFooter extends DeesElement {
   @property({
     type: Object,
   })
-  letterData: tsclass.business.ILetter;
+  letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: interfaces.IDocumentSettings;
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number
@@ -55,6 +53,7 @@ export class DePageFooter extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -69,7 +68,7 @@ export class DePageFooter extends DeesElement {
         right: 0px;
         height: 130px;
         content: '';
-        padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
+        padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.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;
@@ -78,7 +77,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .pageNumber {
         position: absolute;
         top: 0px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         background: #e4002b;
         padding: 3px;
         font-size: 9px;
@@ -89,7 +88,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .documentTitle {
         position: absolute;
         top: -18px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         background: #dddddd;
         padding: 3px;
         font-size: 9px;
@@ -104,26 +103,26 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
+          <strong>${plugins.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>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
+          <strong>${plugins.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>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
+          <strong>${plugins.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>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
+          <strong>${plugins.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,10 +10,8 @@ import {
   domtools
 } from '@design.estate/dees-element';
 
-import * as interfaces from '../../ts/interfaces/index.js';
-
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from '../plugins.js';
+import { dedocumentSharedStyle } from '../style.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,13 +28,13 @@ export class DePageHeader extends DeesElement {
   @property({
     type: Object,
   })
-  public letterData: tsclass.business.ILetter = null;
+  public letterData: plugins.tsclass.business.ILetter = null;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: interfaces.IDocumentSettings;
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number,
@@ -55,6 +53,7 @@ export class DePageHeader extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
     css`
       :host {
         color: #333;
@@ -76,7 +75,7 @@ export class DePageHeader extends DeesElement {
         overflow: hidden;
         top: 130px;
         left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         height: 20px;
         line-height: 20px;
         color: #333;
@@ -87,7 +86,7 @@ export class DePageHeader extends DeesElement {
         bottom: 10px;
         height: 25px;
         left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.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 shared from '../../ts/shared/index.js';
+import * as plugins from '../plugins.js';
 
 export const demoFunc = () => html`
-  <dedocument-viewer .letterData=${shared.demoLetter} .documentSettings=${shared.demoDocumentSettings}></dedocument-viewer>
+  <dedocument-viewer .letterData=${plugins.shared.demoLetter} .documentSettings=${plugins.shared.demoDocumentSettings}></dedocument-viewer>
 `;

ts_web/elements/viewer.ts

@@ -1,7 +1,6 @@
 import * as plugins from '../plugins.js';
-import * as interfaces from '../../ts/interfaces/index.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 {
@@ -16,9 +15,17 @@ export class DeDocumentViewer extends DeesElement {
   public static demo = demoFunc;
 
   // INSTANCE
+  @property({
+    type: Object,
+    reflect: true,
+  })
   public letterData: plugins.tsclass.business.ILetter = null;
 
-  public documentSettings: interfaces.IDocumentSettings;
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   public static styles = [
     cssManager.defaultStyles,

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/plugins.ts

@@ -1,3 +1,8 @@
+// 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

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

ts_web/tspublish.json

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

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"