Compare commits
No commits in common. "master" and "v1.3.1" have entirely different histories.
@ -6,8 +6,8 @@ on:
|
||||
- '**'
|
||||
|
||||
env:
|
||||
IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
|
||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
|
||||
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
|
||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||
@ -26,7 +26,7 @@ jobs:
|
||||
- name: Install pnpm and npmci
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @ship.zone/npmci
|
||||
pnpm install -g @shipzone/npmci
|
||||
|
||||
- name: Run npm prepare
|
||||
run: npmci npm prepare
|
||||
|
||||
@ -6,8 +6,8 @@ on:
|
||||
- '*'
|
||||
|
||||
env:
|
||||
IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
|
||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
|
||||
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
|
||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||
@ -26,7 +26,7 @@ jobs:
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @ship.zone/npmci
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Audit production dependencies
|
||||
@ -54,7 +54,7 @@ jobs:
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @ship.zone/npmci
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Test stable
|
||||
@ -82,7 +82,7 @@ jobs:
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @ship.zone/npmci
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Release
|
||||
@ -104,7 +104,7 @@ jobs:
|
||||
- name: Prepare
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @ship.zone/npmci
|
||||
pnpm install -g @shipzone/npmci
|
||||
npmci npm prepare
|
||||
|
||||
- name: Code quality
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,6 +3,7 @@
|
||||
# artifacts
|
||||
coverage/
|
||||
public/
|
||||
pages/
|
||||
|
||||
# installs
|
||||
node_modules/
|
||||
|
||||
2
.npmrc
2
.npmrc
@ -1 +1 @@
|
||||
registry=https://registry.npmjs.org/
|
||||
registry=https://verdaccio.nevermind.cloud/
|
||||
|
||||
105
changelog.md
105
changelog.md
@ -1,110 +1,5 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-01-01 - 1.6.11 - fix(license)
|
||||
Update copyright notice in license to reflect new ownership
|
||||
|
||||
- Updated copyright from Lossless GmbH to Task Venture Capital GmbH.
|
||||
|
||||
## 2024-12-08 - 1.6.10 - fix(core)
|
||||
Improve stability and performance of document generation
|
||||
|
||||
|
||||
## 2024-12-08 - 1.6.9 - fix(contentinvoice.ts)
|
||||
Improve invoice item layout and fix alignment issues.
|
||||
|
||||
- Fixed missing border on last invoice item.
|
||||
- Added highlighted style for invoice lines.
|
||||
- Corrected alignment and display of invoice item details.
|
||||
- Included VAT percentage display adjustments.
|
||||
|
||||
## 2024-12-07 - 1.6.8 - fix(rendering and logging)
|
||||
Removed debug logging from document rendering process.
|
||||
|
||||
- Removed console logs from content invoice, document rendering, page scaling, and overflow checking.
|
||||
|
||||
## 2024-12-07 - 1.6.7 - fix(document rendering)
|
||||
Fixed overflow issues in document and page elements
|
||||
|
||||
- Ensured content overflow handling in document.ts
|
||||
- Adjusted page element overflow settings in page.ts
|
||||
|
||||
## 2024-12-07 - 1.6.6 - fix(page-render)
|
||||
Fix layout scaling adjustment for page component
|
||||
|
||||
- Ensure `font-family` is no longer explicitly set to inherit in `DePage` component.
|
||||
- Adjust scaling logic to properly set width and overflow based on calculated scale.
|
||||
|
||||
## 2024-12-05 - 1.6.5 - fix(contentinvoice)
|
||||
Fix VAT group item number formatting and remove custom font style in invoice sums.
|
||||
|
||||
- Removed custom font-family style from the invoice sums.
|
||||
- Corrected VAT group item numbers display by properly formatting and removing trailing comma.
|
||||
|
||||
## 2024-12-05 - 1.6.4 - fix(styling)
|
||||
Consolidated shared styles for consistent font applied across various components.
|
||||
|
||||
- Added a shared style file for consistent font family across components
|
||||
- Applied shared style to contentinvoice, letterheader, pagecontent, pagefooter, and pageheader components
|
||||
|
||||
## 2024-12-05 - 1.6.3 - fix(ui)
|
||||
Corrects font family in contentinvoice element.
|
||||
|
||||
- Updated the font-family for line items in contentinvoice.ts
|
||||
|
||||
## 2024-12-05 - 1.6.2 - fix(translation)
|
||||
Corrected missing translation keys for VAT short form across multiple languages.
|
||||
|
||||
- Fixed missing 'vatShort' translation for English, German, Spanish, French, and Italian in translation.ts file.
|
||||
|
||||
## 2024-12-05 - 1.6.1 - fix(core)
|
||||
Ensure consistent project structure and code organization without additional changes.
|
||||
|
||||
|
||||
## 2024-12-05 - 1.6.0 - feat(documentSettings + translations + vat in itemLines)
|
||||
Updated dependencies in package.json
|
||||
|
||||
- Updated @types/node to version ^22.10.1
|
||||
- Updated qrcode package to version ^1.5.4
|
||||
|
||||
## 2024-12-02 - 1.5.3 - fix(elements)
|
||||
Update viewer attributes and fix font integration
|
||||
|
||||
- Updated viewer.ts to add missing property decorators for letterData and documentSettings.
|
||||
- Fixed font loading by correcting URLs in index.html.
|
||||
- Set demoDocumentSettings default header and footer to false.
|
||||
|
||||
## 2024-12-02 - 1.5.2 - fix(workflow)
|
||||
Corrected Docker image references and package scope in YAML workflows for compatibility.
|
||||
|
||||
- Updated Docker image reference from GitLab to code.foss.global for npmci UI workflows.
|
||||
- Fixed npm package scope for `@shipzone/npmci` in YAML workflows.
|
||||
- Minor formatting corrections for better code readability.
|
||||
|
||||
## 2024-12-02 - 1.5.1 - fix(package)
|
||||
Fix duplicate node export in package.json
|
||||
|
||||
- Resolved a duplication issue with the './node' export in package.json exports field.
|
||||
|
||||
## 2024-12-02 - 1.5.0 - feat(core)
|
||||
Refactor project structure for better modularity and code organization
|
||||
|
||||
- Moved shared components to a dedicated 'dist_ts_shared' directory for better separation of concerns.
|
||||
- Updated import statements across the codebase to align with the new file structure.
|
||||
- Introduced translations directly under 'ts_shared' for language-specific string management.
|
||||
|
||||
## 2024-12-02 - 1.4.0 - feat(translation)
|
||||
Add French and Italian translations for document interface
|
||||
|
||||
- Expanded translation support by adding French and Italian language translations
|
||||
- Fixed duplicated text in German final page statement
|
||||
- Improved Spanish translation of reverse VAT note and final page statement
|
||||
|
||||
## 2024-12-02 - 1.3.2 - fix(core)
|
||||
Minor updates and optimizations in the output PDF formatting process.
|
||||
|
||||
- Improved handling of page content overflow in PDF generation.
|
||||
- Refined default document settings for consistent rendering.
|
||||
|
||||
## 2024-12-02 - 1.3.1 - fix(documentation)
|
||||
Updated project description and enhanced documentation in package.json and README
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
<!--gitzone element-->
|
||||
<!-- made by Task Venture Capital GmbH -->
|
||||
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!--Lets set some basic meta tags-->
|
||||
|
||||
2
license
2
license
@ -1,4 +1,4 @@
|
||||
Copyright (c) 2022 Task Venture Capital GmbH (hello@task.vc)
|
||||
Copyright (c) 2022 Lossless GmbH (hello@lossless.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
17
package.json
17
package.json
@ -1,16 +1,13 @@
|
||||
{
|
||||
"name": "@design.estate/dees-document",
|
||||
"version": "1.6.11",
|
||||
"version": "1.3.1",
|
||||
"private": false,
|
||||
"description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"exports": {
|
||||
".": "./dist_ts/index.js",
|
||||
"./node": "./dist_ts/index.js",
|
||||
"./web": "./dist_ts_web/index.js",
|
||||
"./shared": "./dist_ts_shared/index.js",
|
||||
"./interfaces": "./dist_ts_shared/interfaces/index.js"
|
||||
"./ts": "./dist_ts/index.js",
|
||||
"./ts_web": "./dist_ts_web/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "npm run build && tstest test/",
|
||||
@ -39,7 +36,7 @@
|
||||
"@git.zone/tsbuild": "^2.2.0",
|
||||
"@git.zone/tsbundle": "^2.1.0",
|
||||
"@git.zone/tstest": "^1.0.90",
|
||||
"@git.zone/tswatch": "^2.0.34",
|
||||
"@git.zone/tswatch": "^2.0.25",
|
||||
"@push.rocks/projectinfo": "^5.0.2",
|
||||
"@push.rocks/tapbundle": "^5.5.3"
|
||||
},
|
||||
@ -61,12 +58,12 @@
|
||||
"type": "module",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://code.foss.global/designestate/private/dedocument-catalog.git"
|
||||
"url": "git+https://gitlab.com/designestate/private/dedocument-catalog.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://code.foss.global/designestate/private/dedocument-catalog/issues"
|
||||
"url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
|
||||
},
|
||||
"homepage": "https://code.foss.global/designestate/private/dedocument-catalog#readme",
|
||||
"homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
|
||||
"keywords": [
|
||||
"document generation",
|
||||
"invoice automation",
|
||||
|
||||
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@ -58,8 +58,8 @@ importers:
|
||||
specifier: ^1.0.90
|
||||
version: 1.0.90(@aws-sdk/client-sso-oidc@3.699.0(@aws-sdk/client-sts@3.699.0))(@aws-sdk/credential-providers@3.699.0(@aws-sdk/client-sso-oidc@3.699.0(@aws-sdk/client-sts@3.699.0)))(socks@2.8.3)
|
||||
'@git.zone/tswatch':
|
||||
specifier: ^2.0.34
|
||||
version: 2.0.34
|
||||
specifier: ^2.0.25
|
||||
version: 2.0.25
|
||||
'@push.rocks/projectinfo':
|
||||
specifier: ^5.0.2
|
||||
version: 5.0.2
|
||||
@ -607,8 +607,8 @@ packages:
|
||||
resolution: {integrity: sha512-McytXK46GiReEps7wHWW6zOHYCFF4sywjj6auHjhGqzOogA2Wju1YtZRL+o+OAUb61kQxNFRras6Xg/4Zth0Bw==}
|
||||
hasBin: true
|
||||
|
||||
'@git.zone/tswatch@2.0.34':
|
||||
resolution: {integrity: sha512-nwrJffX3aAf8DOfbWPXErskn4RTdQVaE4WLnV8QEU2WdNehI3KQCdVPYHcskl7eqatjbZdQEck39DItmNacGxw==}
|
||||
'@git.zone/tswatch@2.0.25':
|
||||
resolution: {integrity: sha512-2A2TzJhw5AHI2BUOEjtZJzNgmRDMKZc4+p+yCdgj3mYcD7l1XeM6HTTcyRTxGDrDXggVIWN1O+UxU6ftHg94ag==}
|
||||
hasBin: true
|
||||
|
||||
'@hapi/bourne@3.0.0':
|
||||
@ -5070,7 +5070,7 @@ snapshots:
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
|
||||
'@git.zone/tswatch@2.0.34':
|
||||
'@git.zone/tswatch@2.0.25':
|
||||
dependencies:
|
||||
'@api.global/typedserver': 3.0.51
|
||||
'@git.zone/tsbundle': 2.1.0
|
||||
@ -5080,15 +5080,12 @@ snapshots:
|
||||
'@push.rocks/smartchok': 1.0.34
|
||||
'@push.rocks/smartcli': 4.0.11
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
'@push.rocks/smartfile': 11.0.21
|
||||
'@push.rocks/smartlog': 3.0.7
|
||||
'@push.rocks/smartlog-destination-local': 9.0.2
|
||||
'@push.rocks/smartshell': 3.0.6
|
||||
'@push.rocks/taskbuffer': 3.1.7
|
||||
transitivePeerDependencies:
|
||||
- bufferutil
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
|
||||
'@hapi/bourne@3.0.0': {}
|
||||
|
||||
|
||||
54
readme.md
54
readme.md
@ -47,48 +47,48 @@ import { ILetter } from '@design.estate/dees-document';
|
||||
|
||||
const invoiceTemplate: ILetter = {
|
||||
from: {
|
||||
name: 'Your Company Name',
|
||||
name: "Your Company Name",
|
||||
address: {
|
||||
streetName: 'Your Street',
|
||||
houseNumber: '123',
|
||||
city: 'Your City',
|
||||
country: 'Your Country',
|
||||
postalCode: '12345',
|
||||
streetName: "Your Street",
|
||||
houseNumber: "123",
|
||||
city: "Your City",
|
||||
country: "Your Country",
|
||||
postalCode: "12345",
|
||||
},
|
||||
email: 'your-email@example.com',
|
||||
phone: '123-456-7890',
|
||||
email: "your-email@example.com",
|
||||
phone: "123-456-7890",
|
||||
},
|
||||
to: {
|
||||
name: 'Recipient Company Name',
|
||||
name: "Recipient Company Name",
|
||||
address: {
|
||||
streetName: 'Recipient Street',
|
||||
houseNumber: '456',
|
||||
city: 'Recipient City',
|
||||
country: 'Recipient Country',
|
||||
postalCode: '67890',
|
||||
streetName: "Recipient Street",
|
||||
houseNumber: "456",
|
||||
city: "Recipient City",
|
||||
country: "Recipient Country",
|
||||
postalCode: "67890",
|
||||
},
|
||||
email: 'recipient-email@example.com',
|
||||
phone: '098-765-4321',
|
||||
email: "recipient-email@example.com",
|
||||
phone: "098-765-4321",
|
||||
},
|
||||
content: {
|
||||
invoiceData: {
|
||||
items: [
|
||||
{
|
||||
name: 'Service or Product Name',
|
||||
name: "Service or Product Name",
|
||||
unitQuantity: 2,
|
||||
unitNetPrice: 100.0,
|
||||
unitNetPrice: 100.00,
|
||||
unitType: 'service',
|
||||
vatPercentage: 19,
|
||||
currency: 'EUR',
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
subject: 'Invoice for Services Rendered',
|
||||
subject: "Invoice for Services Rendered",
|
||||
date: new Date().getTime(),
|
||||
versionInfo: {
|
||||
type: 'final',
|
||||
version: '1.0.0',
|
||||
type: "final",
|
||||
version: "1.0.0"
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -133,28 +133,22 @@ This script encompasses initializing services and generating a PDF in a streamli
|
||||
`@design.estate/dees-document` provides several advanced functionalities, enabling rich document creation:
|
||||
|
||||
1. **Custom Templates & Styling**
|
||||
|
||||
- Customize the styling through CSS or using inline styles in TypeScript.
|
||||
- Templates can be adjusted to present different document types (e.g., contracts, reports).
|
||||
|
||||
2. **Modular Components and Reuse**
|
||||
|
||||
- Utilize modular components to create reusable parts across different documents, enhancing maintainability and reducing redundancy.
|
||||
|
||||
3. **Interactive Documents**
|
||||
|
||||
- Integrate interactivities like forms, buttons, and interactive charts within your documents.
|
||||
|
||||
4. **Localization Support**
|
||||
|
||||
- Documents can be localized to support multiple languages, enhancing accessibility and usability.
|
||||
|
||||
5. **Responsive and Adaptive Designs**
|
||||
|
||||
- Create documents that adjust layout dynamically depending on print or digital medium, maintaining consistency across platforms.
|
||||
|
||||
6. **Security Features**
|
||||
|
||||
- Apply digital signatures and encrypt sensitive documents to ensure secure and authentic document distribution.
|
||||
|
||||
7. **Complex Business Logic**
|
||||
|
||||
@ -2,4 +2,8 @@ import * as tsclass from '@tsclass/tsclass';
|
||||
import * as smartfile from '@push.rocks/smartfile';
|
||||
import * as path from 'path';
|
||||
|
||||
export { tsclass, smartfile, path };
|
||||
export {
|
||||
tsclass,
|
||||
smartfile,
|
||||
path,
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as paths from './paths.js';
|
||||
import * as interfaces from '../ts_shared/interfaces/index.js';
|
||||
import * as interfaces from '../ts/interfaces/index.js';
|
||||
import { expect, tap } from '@push.rocks/tapbundle';
|
||||
import * as deesDocumentServer from '../ts/index.js';
|
||||
|
||||
@ -113,7 +113,7 @@ tap.test('should create an invoice', async () => {
|
||||
const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(optionsArg);
|
||||
await plugins.smartfile.memory.toFs(
|
||||
Buffer.from(pdfResult.buffer),
|
||||
plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`),
|
||||
plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)
|
||||
);
|
||||
};
|
||||
await saveResult({
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-document',
|
||||
version: '1.6.11',
|
||||
version: '1.3.1',
|
||||
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
|
||||
}
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as paths from './paths.js';
|
||||
import * as helpers from './helpers.js';
|
||||
import * as interfaces from '../ts/interfaces/index.js';
|
||||
|
||||
export interface IPdfServiceConstructorOptions {}
|
||||
export interface IPdfServiceConstructorOptions {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* a pdf service for generating pdfs
|
||||
@ -42,8 +46,8 @@ export class PdfService {
|
||||
* creates an letter
|
||||
*/
|
||||
public async createPdfFromLetterObject(optionsArg: {
|
||||
letterData: plugins.tsclass.business.ILetter;
|
||||
documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
||||
letterData: plugins.tsclass.business.ILetter,
|
||||
documentSettings: interfaces.IDocumentSettings
|
||||
}) {
|
||||
const html = `
|
||||
<script type="module">
|
||||
|
||||
@ -3,4 +3,4 @@ import * as paths from './paths.js';
|
||||
|
||||
export const getBundleAsString = async () => {
|
||||
return plugins.smartfile.fs.toStringSync(paths.bundleFile);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import * as translation from '../translation.js';
|
||||
import * as shared from '../shared/index.js';
|
||||
|
||||
export interface IDocumentSettings {
|
||||
enableTopDraftText?: boolean;
|
||||
enableDefaultHeader?: boolean;
|
||||
enableDefaultFooter?: boolean;
|
||||
languageCode?: translation.TLanguageCode;
|
||||
vatGroupPositions?: boolean;
|
||||
languageCode?: shared.translation.TLanguageCode;
|
||||
}
|
||||
2
ts/interfaces/index.ts
Normal file
2
ts/interfaces/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './document.js';
|
||||
export * from './translation.js';
|
||||
19
ts/interfaces/translation.ts
Normal file
19
ts/interfaces/translation.ts
Normal file
@ -0,0 +1,19 @@
|
||||
export interface IDeDocumentTranslations {
|
||||
address: string;
|
||||
bankConnection: string;
|
||||
contactInfo: string;
|
||||
description: string;
|
||||
invoice: string;
|
||||
itemPos: string;
|
||||
quantity: string;
|
||||
registrationInfo: string;
|
||||
reverseVatNote: string;
|
||||
totalNetPrice: string;
|
||||
unitNetPrice: string;
|
||||
unitType: string;
|
||||
yourCustomerId: string;
|
||||
yourVatId: string;
|
||||
continuesOnPage: string;
|
||||
finalPageStatement: string;
|
||||
page: string;
|
||||
}
|
||||
@ -1,9 +1,6 @@
|
||||
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);
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
// node native
|
||||
import * as path from 'path';
|
||||
|
||||
export { path };
|
||||
|
||||
// dees-document scope
|
||||
import * as shared from '../dist_ts_shared/index.js';
|
||||
|
||||
export { shared };
|
||||
export {
|
||||
path
|
||||
}
|
||||
|
||||
// @push.rocks/scope
|
||||
import * as smartfile from '@push.rocks/smartfile';
|
||||
@ -14,9 +11,16 @@ import * as smartjson from '@push.rocks/smartjson';
|
||||
import * as smartpath from '@push.rocks/smartpath';
|
||||
import * as smartpdf from '@push.rocks/smartpdf';
|
||||
|
||||
export { smartfile, smartpath, smartjson, smartpdf };
|
||||
export {
|
||||
smartfile,
|
||||
smartpath,
|
||||
smartjson,
|
||||
smartpdf,
|
||||
}
|
||||
|
||||
// @tsclass scope
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
export { tsclass };
|
||||
export {
|
||||
tsclass,
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
|
||||
const fromContact: plugins.tsclass.business.IContact = {
|
||||
const fromContact: tsclass.business.IContact = {
|
||||
name: 'Awesome From Company',
|
||||
type: 'company',
|
||||
description: 'a company that does stuff',
|
||||
@ -23,7 +23,7 @@ const fromContact: plugins.tsclass.business.IContact = {
|
||||
|
||||
};
|
||||
|
||||
const toContact: plugins.tsclass.business.IContact = {
|
||||
const toContact: tsclass.business.IContact = {
|
||||
name: 'Awesome To GmbH',
|
||||
type: 'company',
|
||||
customerNumber: 'LL-CLIENT-123',
|
||||
@ -38,7 +38,7 @@ const toContact: plugins.tsclass.business.IContact = {
|
||||
vatId: 'BE12345678',
|
||||
}
|
||||
|
||||
export const demoLetter: plugins.tsclass.business.ILetter = {
|
||||
export const demoLetter: tsclass.business.ILetter = {
|
||||
versionInfo: {
|
||||
type: 'draft',
|
||||
version: '1.0.0',
|
||||
@ -3,9 +3,6 @@ export const a4Width = 794;
|
||||
export const rightMargin = 70;
|
||||
export const leftMargin = 90;
|
||||
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
export { interfaces };
|
||||
|
||||
import * as translation from './translation.js';
|
||||
export { translation };
|
||||
|
||||
82
ts/shared/translation.ts
Normal file
82
ts/shared/translation.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
|
||||
type TTranslationImplementation = {
|
||||
[key in keyof interfaces.IDeDocumentTranslations]: string;
|
||||
}
|
||||
|
||||
export const EN_translations: TTranslationImplementation = {
|
||||
address: 'Address',
|
||||
bankConnection: 'Bank Connection',
|
||||
contactInfo: 'Contact Info',
|
||||
description: 'Description',
|
||||
invoice: 'Invoice',
|
||||
itemPos: 'Item Pos.',
|
||||
quantity: 'Quantity',
|
||||
registrationInfo: 'Registration Info',
|
||||
reverseVatNote: 'VAT arises on a reverse charge basis and is payable by the customer.',
|
||||
totalNetPrice: 'Total Net Price',
|
||||
unitNetPrice: 'Unit Net Price',
|
||||
unitType: 'Unit Type',
|
||||
yourCustomerId: 'Your Customer ID:',
|
||||
yourVatId: 'Your vat id on file:',
|
||||
continuesOnPage: 'Continues on page',
|
||||
finalPageStatement: 'This is the final page of this document.',
|
||||
page: 'Page',
|
||||
};
|
||||
|
||||
export const DE_translations: TTranslationImplementation = {
|
||||
address: 'Adresse',
|
||||
bankConnection: 'Bankverbindung',
|
||||
contactInfo: 'Kontaktinformationen',
|
||||
description: 'Beschreibung',
|
||||
invoice: 'Rechnung',
|
||||
itemPos: 'Pos.',
|
||||
quantity: 'Anzahl',
|
||||
registrationInfo: 'HRA/HRB Info',
|
||||
reverseVatNote: 'Umkehr der Umsatzsteuerpflicht: Der Rechnungsempfänger ist für die korrekte Abrechnung der Umsatzsteuer zuständig.',
|
||||
totalNetPrice: 'Nettopreis Summe',
|
||||
unitNetPrice: 'Nettopreis',
|
||||
unitType: 'Einheit',
|
||||
yourCustomerId: 'Ihre Kundennummer:',
|
||||
yourVatId: 'Ihre Umsatzsteuer-ID:',
|
||||
continuesOnPage: 'Fortsetzung auf Seite',
|
||||
finalPageStatement: 'Diese ist die letzte Seite einer Dokumente.',
|
||||
page: 'Seite',
|
||||
};
|
||||
|
||||
export const ES_translations: TTranslationImplementation = {
|
||||
address: 'Dirección',
|
||||
bankConnection: 'Conexión bancaria',
|
||||
contactInfo: 'Información de contacto',
|
||||
description: 'Descripción',
|
||||
invoice: 'Factura',
|
||||
itemPos: 'Pos.',
|
||||
quantity: 'Cantidad',
|
||||
registrationInfo: 'Información de registro',
|
||||
reverseVatNote: 'La declaración de IVA se aplica en base a la factura de venta, y se paga por el cliente.',
|
||||
totalNetPrice: 'Precio total neto',
|
||||
unitNetPrice: 'Precio unitario neto',
|
||||
unitType: 'Tipo de unidad',
|
||||
yourCustomerId: 'Su número de cliente:',
|
||||
yourVatId: 'Su ID de IVA:',
|
||||
continuesOnPage: 'Continues on page',
|
||||
finalPageStatement: 'This is the final page of this document.',
|
||||
page: 'Page',
|
||||
};
|
||||
|
||||
export const languageCodeMap = {
|
||||
'DE': DE_translations,
|
||||
'EN': EN_translations,
|
||||
'ES': ES_translations,
|
||||
};
|
||||
|
||||
export type TLanguageCode = keyof typeof languageCodeMap;
|
||||
|
||||
export const translate = (languageCode: TLanguageCode, key: string, defaultValue: string) => {
|
||||
const translations = languageCodeMap[languageCode] || EN_translations;
|
||||
if (translations && translations[key]) {
|
||||
return translations[key];
|
||||
} else {
|
||||
return defaultValue;
|
||||
}
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"order": 2
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export * from './document.js';
|
||||
@ -1,4 +0,0 @@
|
||||
// tsclass scope
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
export { tsclass };
|
||||
@ -1,143 +0,0 @@
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
// Define English translations without enforcing TTranslationImplementation yet
|
||||
export const EN_translations = {
|
||||
address: 'Address',
|
||||
bankConnection: 'Bank Connection',
|
||||
contactInfo: 'Contact Info',
|
||||
description: 'Description',
|
||||
invoice: 'Invoice',
|
||||
itemPos: 'Item Pos.',
|
||||
quantity: 'Quantity',
|
||||
registrationInfo: 'Registration Info',
|
||||
reverseVatNote: 'VAT arises on a reverse charge basis and is payable by the customer.',
|
||||
totalNetPrice: 'Total Net Price',
|
||||
unitNetPrice: 'Unit Net Price',
|
||||
unitType: 'Unit Type',
|
||||
yourCustomerId: 'Your Customer ID:',
|
||||
yourVatId: 'Your vat id on file:',
|
||||
continuesOnPage: 'Continues on page',
|
||||
finalPageStatement: 'This is the final page of this document.',
|
||||
page: 'Page',
|
||||
vatShort: 'VAT',
|
||||
} as const;
|
||||
|
||||
// Infer keys of EN_translations
|
||||
export type TTranslationKey = keyof typeof EN_translations;
|
||||
|
||||
// Define the type for all translations based on EN_translations keys
|
||||
export type TTranslationImplementation = {
|
||||
[key in TTranslationKey]: string;
|
||||
};
|
||||
|
||||
// Define German translations
|
||||
export const DE_translations: TTranslationImplementation = {
|
||||
address: 'Adresse',
|
||||
bankConnection: 'Bankverbindung',
|
||||
contactInfo: 'Kontaktinformationen',
|
||||
description: 'Beschreibung',
|
||||
invoice: 'Rechnung',
|
||||
itemPos: 'Pos.',
|
||||
quantity: 'Anzahl',
|
||||
registrationInfo: 'HRA/HRB Info',
|
||||
reverseVatNote:
|
||||
'Umkehr der Umsatzsteuerpflicht: Der Rechnungsempfänger ist für die korrekte Abrechnung der Umsatzsteuer zuständig.',
|
||||
totalNetPrice: 'Summe netto',
|
||||
unitNetPrice: 'Einheit netto',
|
||||
unitType: 'Einheit',
|
||||
yourCustomerId: 'Ihre Kundennummer:',
|
||||
yourVatId: 'Ihre Umsatzsteuer-ID:',
|
||||
continuesOnPage: 'Fortsetzung auf Seite',
|
||||
finalPageStatement: 'Dies ist die letzte Seite dieses Dokuments.',
|
||||
page: 'Seite',
|
||||
vatShort: 'USt',
|
||||
};
|
||||
|
||||
// Define Spanish translations
|
||||
export const ES_translations: TTranslationImplementation = {
|
||||
address: 'Dirección',
|
||||
bankConnection: 'Conexión bancaria',
|
||||
contactInfo: 'Información de contacto',
|
||||
description: 'Descripción',
|
||||
invoice: 'Factura',
|
||||
itemPos: 'Pos.',
|
||||
quantity: 'Cantidad',
|
||||
registrationInfo: 'Información de registro',
|
||||
reverseVatNote: 'El IVA se aplica por inversión del sujeto pasivo y debe ser pagado por el cliente.',
|
||||
totalNetPrice: 'Precio total neto',
|
||||
unitNetPrice: 'Precio unitario neto',
|
||||
unitType: 'Tipo de unidad',
|
||||
yourCustomerId: 'Su número de cliente:',
|
||||
yourVatId: 'Su ID de IVA:',
|
||||
continuesOnPage: 'Continúa en la página',
|
||||
finalPageStatement: 'Esta es la última página de este documento.',
|
||||
page: 'Página',
|
||||
vatShort: 'IVA',
|
||||
};
|
||||
|
||||
// Define French translations
|
||||
export const FR_translations: TTranslationImplementation = {
|
||||
address: 'Adresse',
|
||||
bankConnection: 'Coordonnées bancaires',
|
||||
contactInfo: 'Informations de contact',
|
||||
description: 'Description',
|
||||
invoice: 'Facture',
|
||||
itemPos: 'Position',
|
||||
quantity: 'Quantité',
|
||||
registrationInfo: "Informations d'enregistrement",
|
||||
reverseVatNote:
|
||||
"La TVA s'applique selon le mécanisme d'autoliquidation et est à payer par le client.",
|
||||
totalNetPrice: 'Prix net total',
|
||||
unitNetPrice: 'Prix unitaire net',
|
||||
unitType: "Type d'unité",
|
||||
yourCustomerId: 'Votre numéro de client :',
|
||||
yourVatId: 'Votre numéro de TVA :',
|
||||
continuesOnPage: 'Continue sur la page',
|
||||
finalPageStatement: 'Ceci est la dernière page de ce document.',
|
||||
page: 'Page',
|
||||
vatShort: 'TVA',
|
||||
};
|
||||
|
||||
// Define Italian translations
|
||||
export const IT_translations: TTranslationImplementation = {
|
||||
address: 'Indirizzo',
|
||||
bankConnection: 'Coordinate bancarie',
|
||||
contactInfo: 'Informazioni di contatto',
|
||||
description: 'Descrizione',
|
||||
invoice: 'Fattura',
|
||||
itemPos: 'Pos.',
|
||||
quantity: 'Quantità',
|
||||
registrationInfo: 'Informazioni di registrazione',
|
||||
reverseVatNote: "L'IVA è applicata con inversione contabile ed è a carico del cliente.",
|
||||
totalNetPrice: 'Prezzo netto totale',
|
||||
unitNetPrice: 'Prezzo netto unitario',
|
||||
unitType: 'Tipo di unità',
|
||||
yourCustomerId: 'Il tuo numero cliente:',
|
||||
yourVatId: 'Il tuo numero di partita IVA:',
|
||||
continuesOnPage: 'Continua alla pagina',
|
||||
finalPageStatement: 'Questa è l\'ultima pagina di questo documento.',
|
||||
page: 'Pagina',
|
||||
vatShort: 'IVA',
|
||||
};
|
||||
|
||||
// Language Code Map
|
||||
export const languageCodeMap: Record<string, TTranslationImplementation> = {
|
||||
EN: EN_translations,
|
||||
DE: DE_translations,
|
||||
ES: ES_translations,
|
||||
FR: FR_translations,
|
||||
IT: IT_translations,
|
||||
};
|
||||
|
||||
// Language Code Type
|
||||
export type TLanguageCode = keyof typeof languageCodeMap;
|
||||
|
||||
// Translate Function
|
||||
export const translate = (
|
||||
languageCode: TLanguageCode,
|
||||
key: TTranslationKey,
|
||||
defaultValue: string
|
||||
): string => {
|
||||
const translations = languageCodeMap[languageCode] || EN_translations;
|
||||
return translations[key] || defaultValue;
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"order": 1
|
||||
}
|
||||
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-document',
|
||||
version: '1.6.11',
|
||||
version: '1.3.1',
|
||||
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
|
||||
}
|
||||
|
||||
@ -15,8 +15,9 @@ import {
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
import * as interfaces from '../../ts/interfaces/index.js';
|
||||
|
||||
import { dedocumentSharedStyle } from '../style.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -48,7 +49,7 @@ export class DeContentInvoice extends DeesElement {
|
||||
type: Object,
|
||||
reflect: true,
|
||||
})
|
||||
public documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
||||
public documentSettings: interfaces.IDocumentSettings;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@ -57,7 +58,6 @@ export class DeContentInvoice extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
dedocumentSharedStyle,
|
||||
css`
|
||||
:host {
|
||||
color: #333;
|
||||
@ -174,6 +174,7 @@ export class DeContentInvoice extends DeesElement {
|
||||
(await this.getContentNodes()).trimmedContent.append(
|
||||
(await this.getContentNodes()).currentContent.children.item(0)
|
||||
);
|
||||
console.log('hey' + this.shadowRoot.children.length);
|
||||
}
|
||||
if (
|
||||
(await this.getContentNodes()).currentContent.children
|
||||
@ -205,7 +206,7 @@ export class DeContentInvoice extends DeesElement {
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto 60px 60px 84px 84px 46px;
|
||||
grid-template-columns: 40px auto 80px 80px 90px 90px;
|
||||
}
|
||||
.topLine {
|
||||
margin-top: 5px;
|
||||
@ -215,29 +216,12 @@ export class DeContentInvoice extends DeesElement {
|
||||
.lineItem {
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
border-right: 1px dashed #ccc;
|
||||
}
|
||||
|
||||
.lineItem:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.lineItem.rightAlign {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.invoiceLine {
|
||||
background: #ffffff00;
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
.invoiceLine.highlighted {
|
||||
transition: background 0.2s;
|
||||
background: #ffc18f;
|
||||
border: 1px solid #ff9d4d;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.sums {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
@ -297,77 +281,29 @@ export class DeContentInvoice extends DeesElement {
|
||||
</style>
|
||||
<div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
|
||||
<div class="grid topLine dataHeader">
|
||||
<div class="lineItem rightAlign">
|
||||
${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 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>
|
||||
${(() => {
|
||||
let counter = 1;
|
||||
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>
|
||||
return this.letterData?.content.invoiceData?.items?.map(
|
||||
(invoiceItem) => html`
|
||||
<div class="grid invoiceLine needsDataHeader">
|
||||
<div class="lineItem">${counter++}</div>
|
||||
<div class="lineItem">${invoiceItem.name}</div>
|
||||
<div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
|
||||
<div class="lineItem">${invoiceItem.unitQuantity}</div>
|
||||
<div class="lineItem">${invoiceItem.unitType}</div>
|
||||
<div class="lineItem rightAlign">
|
||||
${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
|
||||
<div class="lineItem">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
|
||||
<div class="lineItem">
|
||||
${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
|
||||
</div>
|
||||
<div class="lineItem rightAlign">
|
||||
${invoiceItem.unitQuantity * invoiceItem.unitNetPrice}
|
||||
${this.letterData?.content.invoiceData.currency}
|
||||
</div>
|
||||
<div class="lineItem rightAlign">${invoiceItem.vatPercentage}%</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
`
|
||||
);
|
||||
})()}
|
||||
<div class="sums">
|
||||
<div class="sumline">
|
||||
@ -376,23 +312,15 @@ export class DeContentInvoice extends DeesElement {
|
||||
</div>
|
||||
${this.getVatGroups().map((vatGroupArg) => {
|
||||
let itemNumbers = '';
|
||||
let first = true;
|
||||
for (const item of vatGroupArg.items) {
|
||||
const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
|
||||
itemNumbers += `${first ? '' : ', '}${itemIndex + 1}`;
|
||||
first = false;
|
||||
itemNumbers += ` ${itemIndex + 1},`;
|
||||
}
|
||||
return html`
|
||||
<div class="sumline">
|
||||
<div class="label">
|
||||
Vat ${vatGroupArg.vatPercentage}%
|
||||
${this.documentSettings.vatGroupPositions
|
||||
? html`
|
||||
<br /><span style="font-weight: normal"
|
||||
>(on item positions: ${itemNumbers})</span
|
||||
>
|
||||
`
|
||||
: html``}
|
||||
Vat ${vatGroupArg.vatPercentage}%<br />
|
||||
<span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
|
||||
</div>
|
||||
<div class="value">${vatGroupArg.vatAmountSum} EUR</div>
|
||||
</div>
|
||||
@ -407,11 +335,7 @@ export class DeContentInvoice extends DeesElement {
|
||||
${this.letterData?.content.invoiceData.reverseCharge
|
||||
? html`
|
||||
<div class="taxNote">
|
||||
${plugins.shared.translation.translate(
|
||||
this.documentSettings.languageCode,
|
||||
'reverseVatNote',
|
||||
'VAT arises on a reverse charge basis and is payable by the customer.'
|
||||
)}
|
||||
${shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
|
||||
</div>
|
||||
`
|
||||
: ``}
|
||||
@ -431,9 +355,7 @@ export class DeContentInvoice extends DeesElement {
|
||||
<div class="infoBox">
|
||||
<div class="label">Referenced contract:</div>
|
||||
This invoice is adhering to agreements made by contract between the parties on
|
||||
${plugins.smarttime.ExtendedDate.fromMillis(
|
||||
this.letterData?.content.contractData.contractDate
|
||||
).format('MMMM D, YYYY')}.
|
||||
${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
@ -460,6 +382,7 @@ ${this.letterData.content.invoiceData.id}
|
||||
EPC QR Code`,
|
||||
(error) => {
|
||||
if (error) console.error(error);
|
||||
console.log('success!');
|
||||
}
|
||||
);
|
||||
contentNodes.currentContent.querySelector('.paymentCode').append(canvas);
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dedocument-dedocument .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-dedocument>
|
||||
<dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
|
||||
`;
|
||||
@ -10,20 +10,21 @@ import {
|
||||
unsafeCSS,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as interfaces from '../../ts/interfaces/index.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings = {
|
||||
export const defaultDocumentSettings: interfaces.IDocumentSettings = {
|
||||
enableTopDraftText: true,
|
||||
enableDefaultHeader: true,
|
||||
enableDefaultFooter: true,
|
||||
languageCode: 'EN',
|
||||
vatGroupPositions: true,
|
||||
};
|
||||
|
||||
|
||||
import { DePage } from './page.js';
|
||||
import { DeContentInvoice } from './contentinvoice.js';
|
||||
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
import { demoFunc } from './document.demo.js';
|
||||
|
||||
declare global {
|
||||
@ -84,7 +85,7 @@ export class DeDocument extends DeesElement {
|
||||
}
|
||||
},
|
||||
})
|
||||
public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
|
||||
public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@ -99,7 +100,6 @@ export class DeDocument extends DeesElement {
|
||||
color: #333;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
font-family: 'Dees Sans', sans-serif;
|
||||
}
|
||||
|
||||
.betweenPagesSpacer {
|
||||
@ -115,36 +115,6 @@ export class DeDocument extends DeesElement {
|
||||
}
|
||||
|
||||
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
|
||||
domtools.plugins.smartdelay.delayFor(0).then(async () => {
|
||||
this.documentSettings = {
|
||||
...defaultDocumentSettings,
|
||||
...this.documentSettings,
|
||||
}
|
||||
|
||||
while (false) {
|
||||
await domtools.plugins.smartdelay.delayFor(1000);
|
||||
this.letterData = {
|
||||
...this.letterData,
|
||||
content: {
|
||||
...this.letterData.content,
|
||||
invoiceData: {
|
||||
...this.letterData.content.invoiceData,
|
||||
items: [
|
||||
...this.letterData.content.invoiceData.items,
|
||||
{
|
||||
name: 'Test Item',
|
||||
unitQuantity: 1,
|
||||
unitNetPrice: 100,
|
||||
unitType: 'hours',
|
||||
vatPercentage: 19,
|
||||
position: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const width = entry.contentRect.width;
|
||||
@ -159,22 +129,14 @@ export class DeDocument extends DeesElement {
|
||||
})
|
||||
}
|
||||
|
||||
public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
|
||||
public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
|
||||
public cleanupStore: any[] = [];
|
||||
|
||||
|
||||
public async renderDocument() {
|
||||
|
||||
this.latestDocumentSettings = this.documentSettings;
|
||||
this.latestRenderedLetterData = this.letterData;
|
||||
|
||||
const cleanUpStoreCurrentRender = [];
|
||||
const cleanUpStoreNextRender = [];
|
||||
|
||||
const domtools = await this.domtoolsPromise;
|
||||
|
||||
|
||||
const documentBuildContainer = document.createElement('div');
|
||||
cleanUpStoreCurrentRender.push(documentBuildContainer);
|
||||
document.body.appendChild(documentBuildContainer);
|
||||
|
||||
let pages: DePage[] = [];
|
||||
@ -183,7 +145,6 @@ export class DeDocument extends DeesElement {
|
||||
|
||||
// lets append the content
|
||||
const content: DeContentInvoice = new DeContentInvoice();
|
||||
cleanUpStoreCurrentRender.push(content);
|
||||
content.letterData = this.letterData;
|
||||
content.documentSettings = this.documentSettings;
|
||||
document.body.appendChild(content);
|
||||
@ -195,7 +156,6 @@ export class DeDocument extends DeesElement {
|
||||
while (!complete) {
|
||||
pageCounter++;
|
||||
const currentContent = content.cloneNode(true) as DeContentInvoice;
|
||||
cleanUpStoreNextRender.push(currentContent);
|
||||
const newPage = new DePage();
|
||||
newPage.printMode = this.printMode;
|
||||
newPage.letterData = this.letterData;
|
||||
@ -204,9 +164,6 @@ export class DeDocument extends DeesElement {
|
||||
newPage.pageNumber = pageCounter;
|
||||
newPage.append(currentContent);
|
||||
newPage.pageTotalNumber = pageCounter;
|
||||
|
||||
// store current page
|
||||
cleanUpStoreNextRender.push(newPage);
|
||||
documentBuildContainer.append(newPage);
|
||||
|
||||
await currentContent.elementDomReady;
|
||||
@ -223,24 +180,16 @@ export class DeDocument extends DeesElement {
|
||||
if (trimmed === 0) {
|
||||
complete = true;
|
||||
}
|
||||
// complete = true;
|
||||
console.log(currentContentOffset);
|
||||
}
|
||||
|
||||
for (const cleanUp of this.cleanupStore) {
|
||||
cleanUp.remove();
|
||||
}
|
||||
this.cleanupStore = cleanUpStoreNextRender
|
||||
|
||||
cleanUpStoreCurrentRender.forEach((cleanUp) => {
|
||||
cleanUp.remove();
|
||||
});
|
||||
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);
|
||||
child.remove();
|
||||
});
|
||||
children.forEach((child) => documentContainer.removeChild(child));
|
||||
}
|
||||
for (const page of pages) {
|
||||
page.pageTotalNumber = pageCounter;
|
||||
@ -253,13 +202,13 @@ export class DeDocument extends DeesElement {
|
||||
}
|
||||
}
|
||||
this.adjustDePageScaling();
|
||||
this.latestRenderedLetterData = this.letterData;
|
||||
}
|
||||
|
||||
async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
|
||||
super.updated(changedProperties);
|
||||
const domtools = await this.domtoolsPromise;
|
||||
let renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData)
|
||||
&& domtools.convenience.smartjson.deepEqualObjects(this.documentSettings, this.latestDocumentSettings);
|
||||
const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
|
||||
if (!renderedDocIsUpToDate) {
|
||||
this.renderDocument();
|
||||
}
|
||||
@ -284,6 +233,7 @@ export class DeDocument extends DeesElement {
|
||||
}
|
||||
if (this.viewWidth) {
|
||||
page.viewWidth = this.viewWidth;
|
||||
console.log('setting viewWidth: ', this.viewWidth);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -7,3 +7,5 @@ export * from './pagecontent.js';
|
||||
export * from './pagefooter.js';
|
||||
export * from './pageheader.js';
|
||||
export * from './viewer.js';
|
||||
|
||||
export * from '../../ts/shared/index.js';
|
||||
@ -7,11 +7,11 @@ import {
|
||||
css,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import * as plugins from '../plugins.js';
|
||||
import { dedocumentSharedStyle } from '../style.js';
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -22,14 +22,14 @@ declare global {
|
||||
@customElement('dedocument-letterheader')
|
||||
export class DeLetterHeader extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dedocument-letterheader .format="${'a4'}" .letterData=${plugins.shared.demoLetter}></dedocument-letterheader>
|
||||
<dedocument-letterheader .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-letterheader>
|
||||
`;
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
reflect: true
|
||||
})
|
||||
public letterData: plugins.tsclass.business.ILetter;
|
||||
public letterData: tsclass.business.ILetter;
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
@ -50,7 +50,6 @@ export class DeLetterHeader extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
dedocumentSharedStyle,
|
||||
css`
|
||||
:host {
|
||||
color: #333;
|
||||
@ -61,7 +60,7 @@ export class DeLetterHeader extends DeesElement {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
top: 200px;
|
||||
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
|
||||
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
||||
width: 200px;
|
||||
text-align: right;
|
||||
}
|
||||
@ -75,14 +74,14 @@ export class DeLetterHeader extends DeesElement {
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
|
||||
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.address {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
|
||||
left: ${unsafeCSS(shared.leftMargin + 'px')};
|
||||
}
|
||||
|
||||
.address .from {
|
||||
|
||||
@ -11,10 +11,12 @@ import {
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as interfaces from '../../ts/interfaces/index.js';
|
||||
|
||||
import { defaultDocumentSettings } from './document.js';
|
||||
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dedocument-page': DePage;
|
||||
@ -65,7 +67,7 @@ export class DePage extends DeesElement {
|
||||
type: Object,
|
||||
reflect: true,
|
||||
})
|
||||
public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
|
||||
public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@ -77,7 +79,6 @@ export class DePage extends DeesElement {
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#scaleWrapper {
|
||||
@ -196,21 +197,23 @@ export class DePage extends DeesElement {
|
||||
}
|
||||
|
||||
private adjustScaling() {
|
||||
console.log('page scale adjustment triggered.');
|
||||
const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
|
||||
|
||||
if (!scaleWrapper) return;
|
||||
|
||||
let scale = 1;
|
||||
if (this.viewHeight) {
|
||||
scale = this.viewHeight / plugins.shared.a4Height;
|
||||
scale = this.viewHeight / shared.a4Height;
|
||||
} else if (this.viewWidth) {
|
||||
scale = this.viewWidth / plugins.shared.a4Width;
|
||||
scale = this.viewWidth / shared.a4Width;
|
||||
}
|
||||
console.log(`new scale is ${scale}`);
|
||||
scaleWrapper.style.transform = `scale(${scale})`;
|
||||
|
||||
// Adjust the outer dimensions so they match the scaled content
|
||||
|
||||
this.style.width = `${plugins.shared.a4Width * scale}px`;
|
||||
this.style.height = `${plugins.shared.a4Height * scale}px`;
|
||||
// this.style.width = `${shared.a4Width * scale}px`;
|
||||
this.style.height = `${shared.a4Height * scale}px`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ import {
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -47,8 +47,8 @@ export class DePageContainer extends DeesElement {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 0px;
|
||||
width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
|
||||
height: ${unsafeCSS(plugins.shared.a4Height + 'px')};
|
||||
width: ${unsafeCSS(shared.a4Width + 'px')};
|
||||
height: ${unsafeCSS(shared.a4Height + 'px')};
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
|
||||
@ -7,11 +7,11 @@ import {
|
||||
css,
|
||||
cssManager,
|
||||
unsafeCSS,
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import * as plugins from '../plugins.js';
|
||||
import { dedocumentSharedStyle } from '../style.js';
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -28,7 +28,7 @@ export class DePageContent extends DeesElement {
|
||||
@property({
|
||||
type: Number,
|
||||
})
|
||||
public letterData: plugins.tsclass.business.ILetter;
|
||||
public letterData: tsclass.business.ILetter;
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
@ -47,7 +47,6 @@ export class DePageContent extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
dedocumentSharedStyle,
|
||||
css`
|
||||
:host {
|
||||
color: #333;
|
||||
@ -56,8 +55,8 @@ export class DePageContent extends DeesElement {
|
||||
.content {
|
||||
position: absolute;
|
||||
|
||||
left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
|
||||
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
|
||||
left: ${unsafeCSS(shared.leftMargin + 'px')};
|
||||
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
||||
bottom: 170px;
|
||||
overflow: visible;
|
||||
}
|
||||
@ -138,8 +137,10 @@ export class DePageContent extends DeesElement {
|
||||
await this.elementDomReady;
|
||||
const contentContainer = this.shadowRoot.querySelector('.content');
|
||||
if (contentContainer.scrollHeight > contentContainer.clientHeight) {
|
||||
console.log('overflows');
|
||||
return true;
|
||||
} else {
|
||||
console.log('does not overflow!');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,8 +10,10 @@ import {
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as plugins from '../plugins.js';
|
||||
import { dedocumentSharedStyle } from '../style.js';
|
||||
import * as interfaces from '../../ts/interfaces/index.js';
|
||||
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -28,13 +30,13 @@ export class DePageFooter extends DeesElement {
|
||||
@property({
|
||||
type: Object,
|
||||
})
|
||||
letterData: plugins.tsclass.business.ILetter;
|
||||
letterData: tsclass.business.ILetter;
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
reflect: true,
|
||||
})
|
||||
documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
||||
documentSettings: interfaces.IDocumentSettings;
|
||||
|
||||
@property({
|
||||
type: Number
|
||||
@ -53,7 +55,6 @@ export class DePageFooter extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
dedocumentSharedStyle,
|
||||
css`
|
||||
:host {
|
||||
color: #333;
|
||||
@ -68,7 +69,7 @@ export class DePageFooter extends DeesElement {
|
||||
right: 0px;
|
||||
height: 130px;
|
||||
content: '';
|
||||
padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
|
||||
padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
|
||||
grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
|
||||
grid-gap: 5px;
|
||||
border-top: 2px solid #e4002b;
|
||||
@ -77,7 +78,7 @@ export class DePageFooter extends DeesElement {
|
||||
.bottomstripe .pageNumber {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
|
||||
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
||||
background: #e4002b;
|
||||
padding: 3px;
|
||||
font-size: 9px;
|
||||
@ -88,7 +89,7 @@ export class DePageFooter extends DeesElement {
|
||||
.bottomstripe .documentTitle {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
|
||||
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
||||
background: #dddddd;
|
||||
padding: 3px;
|
||||
font-size: 9px;
|
||||
@ -103,26 +104,26 @@ export class DePageFooter extends DeesElement {
|
||||
return html`
|
||||
<div class="bottomstripe">
|
||||
<div>
|
||||
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
|
||||
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
|
||||
${this.letterData.from.name}<br />
|
||||
${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
|
||||
${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
|
||||
${this.letterData.from.address.country}
|
||||
</div>
|
||||
<div>
|
||||
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
|
||||
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
|
||||
Amtsgericht Bremen<br />
|
||||
<i>reg-#:</i> HRB 35230 HB<br />
|
||||
<i>vat-id:</i> ${this.letterData.from.vatId}
|
||||
</div>
|
||||
<div>
|
||||
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
|
||||
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
|
||||
<i>email:</i> ${this.letterData.from.email}<br />
|
||||
<i>phone:</i> ${this.letterData.from.phone}<br />
|
||||
<i>fax:</i> ${this.letterData.from.fax}
|
||||
</div>
|
||||
<div>
|
||||
<strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
|
||||
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
|
||||
<i>beneficiary:</i> ${this.letterData?.from?.name}<br />
|
||||
<i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
|
||||
<i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />
|
||||
|
||||
@ -10,8 +10,10 @@ import {
|
||||
domtools
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as plugins from '../plugins.js';
|
||||
import { dedocumentSharedStyle } from '../style.js';
|
||||
import * as interfaces from '../../ts/interfaces/index.js';
|
||||
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -28,13 +30,13 @@ export class DePageHeader extends DeesElement {
|
||||
@property({
|
||||
type: Object,
|
||||
})
|
||||
public letterData: plugins.tsclass.business.ILetter = null;
|
||||
public letterData: tsclass.business.ILetter = null;
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
reflect: true,
|
||||
})
|
||||
documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
||||
documentSettings: interfaces.IDocumentSettings;
|
||||
|
||||
@property({
|
||||
type: Number,
|
||||
@ -53,7 +55,6 @@ export class DePageHeader extends DeesElement {
|
||||
|
||||
public static styles = [
|
||||
domtools.elementBasic.staticStyles,
|
||||
dedocumentSharedStyle,
|
||||
css`
|
||||
:host {
|
||||
color: #333;
|
||||
@ -75,7 +76,7 @@ export class DePageHeader extends DeesElement {
|
||||
overflow: hidden;
|
||||
top: 130px;
|
||||
left: auto;
|
||||
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
|
||||
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
@ -86,7 +87,7 @@ export class DePageHeader extends DeesElement {
|
||||
bottom: 10px;
|
||||
height: 25px;
|
||||
left: auto;
|
||||
right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
|
||||
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
.topstripe .logo img {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as shared from '../../ts/shared/index.js';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dedocument-viewer .letterData=${plugins.shared.demoLetter} .documentSettings=${plugins.shared.demoDocumentSettings}></dedocument-viewer>
|
||||
<dedocument-viewer .letterData=${shared.demoLetter} .documentSettings=${shared.demoDocumentSettings}></dedocument-viewer>
|
||||
`;
|
||||
@ -1,6 +1,7 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as interfaces from '../../ts/interfaces/index.js';
|
||||
|
||||
import { DeesElement, css, cssManager, customElement, html, property } from '@design.estate/dees-element';
|
||||
import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
|
||||
import { demoFunc } from './viewer.demo.js';
|
||||
|
||||
declare global {
|
||||
@ -15,17 +16,9 @@ export class DeDocumentViewer extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Object,
|
||||
reflect: true,
|
||||
})
|
||||
public letterData: plugins.tsclass.business.ILetter = null;
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
reflect: true,
|
||||
})
|
||||
public documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
||||
public documentSettings: interfaces.IDocumentSettings;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
export * from './page1.js';
|
||||
export * from './page2.js';
|
||||
@ -1,17 +0,0 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const page1 = () => html`
|
||||
<style>
|
||||
dedocument-dedocument {
|
||||
margin: 16px;
|
||||
}
|
||||
</style>
|
||||
<dedocument-dedocument .printMode=${false} letterData=${plugins.smartjson.stringifyBase64({
|
||||
...plugins.shared.demoLetter,
|
||||
from: {
|
||||
...plugins.shared.demoLetter.from,
|
||||
description: 'a string set via stringified JSON'
|
||||
}
|
||||
} as plugins.tsclass.business.ILetter)}> </dedocument-dedocument>
|
||||
`;
|
||||
@ -1,18 +0,0 @@
|
||||
import { html } from "@design.estate/dees-element";
|
||||
|
||||
export const page2 = () => html`
|
||||
<style>
|
||||
.demoPort {
|
||||
margin: auto;
|
||||
width: 400px;
|
||||
}
|
||||
dedocument-page {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
<div class="demoPort">
|
||||
<dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
|
||||
<dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
|
||||
</div>
|
||||
`;
|
||||
@ -1,8 +1,3 @@
|
||||
// dees-document scope
|
||||
import * as shared from '../dist_ts_shared/index.js';
|
||||
|
||||
export { shared };
|
||||
|
||||
// tsclass scope
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import { css } from '@design.estate/dees-element';
|
||||
|
||||
export const dedocumentSharedStyle = css`
|
||||
:host {
|
||||
font-family: 'Exo 2';
|
||||
}
|
||||
`;
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"order": 3
|
||||
}
|
||||
@ -6,13 +6,7 @@
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"undefined": [
|
||||
"./ts_web/index.js"
|
||||
]
|
||||
}
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"exclude": [
|
||||
"dist_*/**/*.d.ts"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user