@design.estate/dees-document 1.0.99 → 1.0.103

package/npmextra.json

@@ -2,19 +2,40 @@
   "gitzone": {
     "projectType": "wcc",
     "module": {
-      "githost": "gitlab.com",
+      "githost": "code.foss.global",
       "gitscope": "designestate/private",
       "gitrepo": "dedocument-catalog",
-      "description": "a catalog for creating documents like invoices",
+      "description": "A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.",
       "npmPackagename": "@designestate_private/dedocument-catalog",
       "license": "MIT",
       "projectDomain": "design.estate",
-      "shortDescription": "undefined variable"
+      "shortDescription": "undefined variable",
+      "keywords": [
+        "document generation",
+        "invoices",
+        "PDF creation",
+        "typescript",
+        "web components",
+        "custom elements",
+        "QR code",
+        "smart contracts",
+        "templating",
+        "dynamic rendering",
+        "responsive design",
+        "modular development",
+        "lightweight",
+        "efficient",
+        "finance",
+        "business"
+      ]
     }
   },
   "npmci": {
     "npmGlobalTools": [],
     "npmAccessLevel": "private",
     "npmRegistryUrl": "verdaccio2.lossless.one"
+  },
+  "tsdoc": {
+    "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
   }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.0.99",
+  "version": "1.0.103",
   "private": false,
-  "description": "a catalog for creating documents like invoices",
+  "description": "A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "exports": {
@@ -12,26 +12,26 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.55",
-    "@design.estate/dees-element": "^2.0.33",
-    "@design.estate/dees-wcctools": "^1.0.85",
-    "@git.zone/tsrun": "^1.2.46",
-    "@push.rocks/smartfile": "^11.0.4",
-    "@push.rocks/smartjson": "^5.0.10",
-    "@push.rocks/smartpath": "^5.0.11",
-    "@push.rocks/smartpdf": "^3.0.16",
-    "@push.rocks/smarttime": "^4.0.6",
-    "@tsclass/tsclass": "^4.0.46",
+    "@design.estate/dees-domtools": "^2.0.65",
+    "@design.estate/dees-element": "^2.0.39",
+    "@design.estate/dees-wcctools": "^1.0.90",
+    "@git.zone/tsrun": "^1.3.3",
+    "@push.rocks/smartfile": "^11.0.21",
+    "@push.rocks/smartjson": "^5.0.20",
+    "@push.rocks/smartpath": "^5.0.18",
+    "@push.rocks/smartpdf": "^3.1.7",
+    "@push.rocks/smarttime": "^4.0.8",
+    "@tsclass/tsclass": "^4.1.2",
     "@types/qrcode": "^1.5.5",
-    "qrcode": "^1.5.3"
+    "qrcode": "^1.5.4"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.72",
-    "@git.zone/tsbundle": "^2.0.15",
-    "@git.zone/tstest": "^1.0.84",
-    "@git.zone/tswatch": "^2.0.21",
+    "@git.zone/tsbuild": "^2.2.0",
+    "@git.zone/tsbundle": "^2.1.0",
+    "@git.zone/tstest": "^1.0.90",
+    "@git.zone/tswatch": "^2.0.25",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.0.15"
+    "@push.rocks/tapbundle": "^5.5.3"
   },
   "files": [
     "ts/**/*",
@@ -57,6 +57,24 @@
     "url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
   },
   "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
+  "keywords": [
+    "document generation",
+    "invoices",
+    "PDF creation",
+    "typescript",
+    "web components",
+    "custom elements",
+    "QR code",
+    "smart contracts",
+    "templating",
+    "dynamic rendering",
+    "responsive design",
+    "modular development",
+    "lightweight",
+    "efficient",
+    "finance",
+    "business"
+  ],
   "scripts": {
     "test": "npm run build && tstest test/",
     "build": "tsbuild --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",

package/readme.hints.md

@@ -0,0 +1 @@
+ 

package/readme.md

@@ -1,7 +1,144 @@
-# @design.estate/private/dedocument-catalog
+# @design.estate/dees-document
 a catalog for creating documents like invoices
 
+## Install
+To install `@design.estate/dees-document`, run the following command in your project directory:
+```shell
+npm install @design.estate/dees-document --save
+```
+
+This will add `@design.estate/dees-document` to your project's dependencies and ensure it's installed into your `node_modules` folder.
+
 ## Usage
+The `@design.estate/dees-document` package is a comprehensive toolkit for creating various types of documents, such as invoices, with ease. It leverages modern ECMAScript (ES) modules and TypeScript for a type-safe, developer-friendly experience. Below, you'll find detailed examples covering how to utilize the package to its full potential.
+
+### Setting Up the Document Service
+Before diving into creating documents, you first need to set up the document service. This involves importing the necessary modules and initializing the service instance.
+
+```typescript
+import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
+
+async function setupPdfService() {
+  const options: IPdfServiceConstructorOptions = {
+    // Configuration options here
+  };
+  
+  const pdfService = await PdfService.createAndStart(options);
+  console.log('PDF Service started successfully.');
+  return pdfService;
+}
+```
+
+In the example above, we import `PdfService` from the package and use its `createAndStart` method to initialize it with optional configuration settings. Replace `// Configuration options here` with any specific options your project may require.
+
+### Creating a Simple Invoice
+After setting up the document service, you can proceed to create documents such as invoices. Here, we'll demonstrate how to create a basic invoice.
+
+#### Define the Invoice Data Structure
+First, define the basic structure of your invoice. This involves specifying details like the sender, recipient, items, and more.
+
+```typescript
+import { ILetter } from '@design.estate/dees-document';
+
+const invoiceData: ILetter = {
+  from: {
+    name: "Your Company Name",
+    address: {
+      streetName: "Your Street",
+      houseNumber: "123",
+      city: "Your City",
+      country: "Your Country",
+      postalCode: "12345",
+    },
+    email: "your-email@example.com",
+    phone: "123-456-7890",
+  },
+  to: {
+    name: "Recipient Company Name",
+    address: {
+      streetName: "Recipient Street",
+      houseNumber: "456",
+      city: "Recipient City",
+      country: "Recipient Country",
+      postalCode: "67890",
+    },
+    email: "recipient-email@example.com",
+    phone: "098-765-4321",
+  },
+  content: {
+    invoiceData: {
+      items: [
+        {
+          name: "Service or Product Name",
+          unitQuantity: 2,
+          unitNetPrice: 100.00,
+          unitType: 'service',
+          vatPercentage: 19,
+          currency: 'EUR',
+        }
+      ]
+    }
+  },
+  subject: "Invoice for Services Rendered",
+  date: new Date().getTime(),
+  versionInfo: {
+    type: "final",
+    version: "1.0.0"
+  },
+};
+```
+
+In this structure, `invoiceData` outlines essential details for an invoice document, using the `ILetter` interface. It includes information about both the sender (`from`) and the recipient (`to`), as well as the invoiced items under `content.invoiceData.items`.
+
+#### Generate the Invoice PDF
+With the invoice data ready, you can now generate the PDF using the `PdfService` instance.
+
+```typescript
+async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
+  const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
+  console.log('Invoice PDF generated successfully.');
+
+  // Here, you can save the PDF to a file, send it over a network, etc.
+}
+```
+
+The method `createPdfFromLetterObject` receives the invoice data and returns a `Buffer` containing the PDF. You can then save this PDF to the filesystem, send it over email, or perform any other required actions.
+
+#### Complete Example Integration
+Combining everything, your complete script to set up the service, define invoice data, and generate a PDF invoice might look something like this:
+
+```typescript
+async function main() {
+  const pdfService = await setupPdfService();
+  await generateInvoice(pdfService, invoiceData);
+}
+
+main().then(() => console.log('Invoice generation process completed.'));
+```
+
+### Beyond Invoices
+The `@design.estate/dees-document` package is not limited to invoices alone. It's designed to handle a wide range of document types. The modular architecture allows for the customizable construction of documents, enabling you to tailor the output to meet precise requirements.
+
+For instance, you can create contracts, reports, and other document types using a similar approach—by defining the content structure and utilizing the PDF service to generate the document. The package's flexibility and extensibility make it an invaluable tool in any document generation workflow.
+
+### Advanced Usage
+For more advanced scenarios, such as custom styling, embedding images, and handling more complex document structures, refer to the package's documentation. It provides comprehensive details and examples to help you fully leverage the capabilities of `@design.estate/dees-document`.
+
+## License and Legal Information
+
+This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. 
+
+**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
+
+### Trademarks
+
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
+
+### Company Information
+
+Task Venture Capital GmbH  
+Registered at District court Bremen HRB 35230 HB, Germany
+
+For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
 
-Use TypeScript for best in class intellisense
-For further information read the linked docs at the top of this readme.
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.

package/ts/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.0.99',
-  description: 'a catalog for creating documents like invoices'
+  version: '1.0.103',
+  description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
 }

package/ts_web/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.0.99',
-  description: 'a catalog for creating documents like invoices'
+  version: '1.0.103',
+  description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
 }

package/ts_web/elements/contentinvoice.ts

@@ -292,9 +292,9 @@ export class DeContentInvoice extends DeesElement {
                 <div class="lineItem">${invoiceItem.name}</div>
                 <div class="lineItem">${invoiceItem.unitQuantity}</div>
                 <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem">${invoiceItem.unitNetPrice} ${invoiceItem.currency}</div>
+                <div class="lineItem">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
                 <div class="lineItem">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${invoiceItem.currency}
+                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
                 </div>
               </div>
             `
@@ -343,7 +343,7 @@ export class DeContentInvoice extends DeesElement {
           IBAN: ${this.letterData?.from?.sepaConnection?.iban}<br />
           BIC: ${this.letterData?.from?.sepaConnection?.bic}<br />
           Description: ${this.letterData?.content.invoiceData?.id}<br />
-          Amount: ${this.getTotalGross()} ${this.letterData?.content.invoiceData.items[0].currency}
+          Amount: ${this.getTotalGross()} ${this.letterData?.content.invoiceData.currency}
         </div>
         ${this.letterData?.content?.contractData?.contractDate
           ? html`

package/ts_web/elements/document.ts

@@ -32,21 +32,25 @@ export class DeDocument extends DeesElement {
 
   @property({
     type: String,
+    reflect: true,
   })
   public format: 'a4' = 'a4';
 
   @property({
     type: Number,
+    reflect: true,
   })
   public viewWidth: number = null;
 
   @property({
     type: Number,
+    reflect: true,
   })
   public viewHeight: number = null;
 
   @property({
     type: Boolean,
+    reflect: true,
   })
   printMode = false;
 
@@ -60,7 +64,6 @@ export class DeDocument extends DeesElement {
         return valueArg;
       }
     },
-
   })
   public letterData: plugins.tsclass.business.ILetter;
 
@@ -114,20 +117,27 @@ export class DeDocument extends DeesElement {
       const response = await fetch(this.letterDataUrl);
       this.letterData = await response.json();
     }
-    this.renderDocument();
   }
 
+  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
+
+
   public async renderDocument() {
     const domtools = await this.domtoolsPromise;
-    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    
+
+    const documentBuildContainer = document.createElement('div');
+    document.body.appendChild(documentBuildContainer);
+
     let pages: DePage[] = [];
     let pageCounter = 0;
     let complete = false;
-    const content: DeContentInvoice = document.createElement(
-      'dedocument-contentinvoice'
-    ) as DeContentInvoice;
+
+    // lets append the content
+    const content: DeContentInvoice = new DeContentInvoice();
     content.letterData = this.letterData;
     document.body.appendChild(content);
+
     await domtools.convenience.smartdelay.delayFor(0);
     let overallContentOffset: number = 0;
     let currentContentOffset: number;
@@ -142,13 +152,8 @@ export class DeDocument extends DeesElement {
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);
       newPage.pageTotalNumber = pageCounter;
-      documentContainer.append(newPage);
-      // betweenPagesSpacer
-      if (!this.printMode) {
-        const betweenPagesSpacerDiv = document.createElement('div');
-        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
-        documentContainer.append(betweenPagesSpacerDiv);
-      }
+      documentBuildContainer.append(newPage);
+      
       await currentContent.elementDomReady;
       await currentContent.trimStartToOffset(overallContentOffset);
       let newPageOverflows = await newPage.checkOverflow();
@@ -167,15 +172,34 @@ export class DeDocument extends DeesElement {
       console.log(currentContentOffset);
     }
     document.body.removeChild(content);
+    document.body.removeChild(documentBuildContainer);
 
+    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    if (documentContainer) {
+      const children = Array.from(documentContainer.children);
+      children.forEach((child) => documentContainer.removeChild(child));
+    }
     for (const page of pages) {
       page.pageTotalNumber = pageCounter;
+      documentContainer.append(page);
+      // betweenPagesSpacer
+      if (!this.printMode) {
+        const betweenPagesSpacerDiv = document.createElement('div');
+        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
+        documentContainer.appendChild(betweenPagesSpacerDiv);
+      }
     }
     this.adjustDePageScaling();
+    this.latestRenderedLetterData = this.letterData;
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+  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);
+    if (!renderedDocIsUpToDate) {
+      this.renderDocument();
+    }
 
     if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
       this.adjustDePageScaling();

package/ts_web/elements/page.ts

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

package/ts_web/elements/shared/demoletter.ts

@@ -59,31 +59,33 @@ export const demoLetter: tsclass.business.ILetter = {
       deliveryDate: new Date().getTime(),
       periodOfPerformance: null,
       printResult: null,
-      
+      currency: 'EUR',
+      notes: [],
+      type: 'debitnote',
       items: [
         {
           name: 'Item with 19% VAT',
-          unitQuantity: 1,
+          unitQuantity: 2,
           unitNetPrice: 100,
           unitType: 'hours',
           vatPercentage: 19,
-          currency: 'EUR',
+          position: 0,
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 4,
           unitNetPrice: 100,
           unitType: 'hours',
           vatPercentage: 7,
-          currency: 'EUR',
+          position: 1,
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 3,
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 7,
-          currency: 'EUR',
+          position: 2,
         },
         {
           name: 'Item with 21% VAT',
@@ -91,7 +93,94 @@ export const demoLetter: tsclass.business.ILetter = {
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 21,
-          currency: 'EUR',
+          position: 3,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 6,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 4,
+        },{
+          name: 'Item with 19% VAT',
+          unitQuantity: 8,
+          unitNetPrice: 100,
+          unitType: 'hours',
+          vatPercentage: 19,
+          position: 5,
+        },
+        {
+          name: 'Item with 7% VAT',
+          unitQuantity: 9,
+          unitNetPrice: 100,
+          unitType: 'hours',
+          vatPercentage: 7,
+          position: 6,
+        },
+        {
+          name: 'Item with 7% VAT',
+          unitQuantity: 4,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 7,
+          position: 8,
+        },
+        {
+          name: 'Item with 21% VAT',
+          unitQuantity: 3,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 21,
+          position: 9,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
         },
         {
           name: 'Item with 0% VAT',
@@ -99,7 +188,7 @@ export const demoLetter: tsclass.business.ILetter = {
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 0,
-          currency: 'EUR',
+          position: 10,
         },
       ],
     }