@design.estate/dees-document 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist_ts/00_commitinfo_data.js +3 -3
- package/dist_ts_web/ts/interfaces/document.d.ts +7 -0
- package/dist_ts_web/ts/interfaces/document.js +2 -0
- package/dist_ts_web/ts/interfaces/index.d.ts +2 -0
- package/dist_ts_web/ts/interfaces/index.js +3 -0
- package/dist_ts_web/ts/interfaces/translation.d.ts +19 -0
- package/dist_ts_web/ts/interfaces/translation.js +2 -0
- package/dist_ts_web/ts/shared/demoletter.d.ts +4 -0
- package/dist_ts_web/ts/shared/demoletter.js +214 -0
- package/dist_ts_web/{elements → ts}/shared/index.d.ts +2 -0
- package/dist_ts_web/ts/shared/index.js +8 -0
- package/dist_ts_web/ts/shared/translation.d.ts +15 -0
- package/dist_ts_web/ts/shared/translation.js +73 -0
- package/dist_ts_web/{00_commitinfo_data.d.ts → ts_web/00_commitinfo_data.d.ts} +1 -1
- package/dist_ts_web/ts_web/00_commitinfo_data.js +9 -0
- package/dist_ts_web/{elements → ts_web/elements}/contentinvoice.d.ts +3 -1
- package/dist_ts_web/{elements → ts_web/elements}/contentinvoice.js +21 -14
- package/dist_ts_web/{elements → ts_web/elements}/document.d.ts +5 -2
- package/dist_ts_web/ts_web/elements/document.demo.js +6 -0
- package/dist_ts_web/ts_web/elements/document.js +226 -0
- package/dist_ts_web/{elements → ts_web/elements}/index.d.ts +1 -1
- package/dist_ts_web/{elements → ts_web/elements}/index.js +2 -2
- package/dist_ts_web/{elements → ts_web/elements}/letterheader.js +2 -2
- package/dist_ts_web/{elements → ts_web/elements}/page.d.ts +2 -0
- package/dist_ts_web/ts_web/elements/page.js +221 -0
- package/dist_ts_web/{elements → ts_web/elements}/pagecontainer.js +2 -2
- package/dist_ts_web/{elements → ts_web/elements}/pagecontent.js +2 -2
- package/dist_ts_web/{elements → ts_web/elements}/pagefooter.d.ts +2 -0
- package/dist_ts_web/{elements → ts_web/elements}/pagefooter.js +15 -8
- package/dist_ts_web/{elements → ts_web/elements}/pageheader.d.ts +2 -0
- package/dist_ts_web/{elements → ts_web/elements}/pageheader.js +20 -7
- package/dist_ts_web/{elements → ts_web/elements}/viewer.d.ts +2 -0
- package/dist_ts_web/ts_web/elements/viewer.demo.js +6 -0
- package/dist_ts_web/{elements → ts_web/elements}/viewer.js +3 -2
- package/dist_ts_web/{index.js → ts_web/index.js} +1 -1
- package/dist_ts_web/{pages → ts_web/pages}/index.js +1 -1
- package/dist_ts_web/ts_web/pages/page1.js +18 -0
- package/dist_ts_web/{pages → ts_web/pages}/page2.js +1 -1
- package/dist_ts_web/ts_web/plugins.js +11 -0
- package/npmextra.json +6 -2
- package/package.json +8 -4
- package/readme.md +125 -120
- package/ts/00_commitinfo_data.ts +2 -2
- package/ts_web/00_commitinfo_data.ts +2 -2
- package/dist_ts_web/00_commitinfo_data.js +0 -9
- package/dist_ts_web/elements/document.demo.js +0 -6
- package/dist_ts_web/elements/document.js +0 -193
- package/dist_ts_web/elements/page.js +0 -195
- package/dist_ts_web/elements/shared/demoletter.d.ts +0 -2
- package/dist_ts_web/elements/shared/demoletter.js +0 -117
- package/dist_ts_web/elements/shared/index.js +0 -6
- package/dist_ts_web/elements/viewer.demo.js +0 -6
- package/dist_ts_web/pages/page1.js +0 -18
- package/dist_ts_web/plugins.js +0 -11
- package/dist_watch/bundle.js +0 -40123
- package/dist_watch/bundle.js.map +0 -7
- package/dist_watch/index.html +0 -28
- /package/dist_ts_web/{elements → ts_web/elements}/document.demo.d.ts +0 -0
- /package/dist_ts_web/{elements → ts_web/elements}/letterheader.d.ts +0 -0
- /package/dist_ts_web/{elements → ts_web/elements}/pagecontainer.d.ts +0 -0
- /package/dist_ts_web/{elements → ts_web/elements}/pagecontent.d.ts +0 -0
- /package/dist_ts_web/{elements → ts_web/elements}/viewer.demo.d.ts +0 -0
- /package/dist_ts_web/{index.d.ts → ts_web/index.d.ts} +0 -0
- /package/dist_ts_web/{pages → ts_web/pages}/index.d.ts +0 -0
- /package/dist_ts_web/{pages → ts_web/pages}/page1.d.ts +0 -0
- /package/dist_ts_web/{pages → ts_web/pages}/page2.d.ts +0 -0
- /package/dist_ts_web/{plugins.d.ts → ts_web/plugins.d.ts} +0 -0
|
@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
9
|
};
|
|
10
|
-
import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, } from '@design.estate/dees-element';
|
|
11
|
-
import * as
|
|
12
|
-
import * as shared from '
|
|
10
|
+
import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, domtools, } from '@design.estate/dees-element';
|
|
11
|
+
import * as interfaces from '../../ts/interfaces/index.js';
|
|
12
|
+
import * as shared from '../../ts/shared/index.js';
|
|
13
13
|
import * as tsclass from '@tsclass/tsclass';
|
|
14
14
|
let DePageFooter = class DePageFooter extends DeesElement {
|
|
15
15
|
static { this.demo = () => html `
|
|
@@ -71,26 +71,26 @@ let DePageFooter = class DePageFooter extends DeesElement {
|
|
|
71
71
|
return html `
|
|
72
72
|
<div class="bottomstripe">
|
|
73
73
|
<div>
|
|
74
|
-
<strong
|
|
74
|
+
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
|
|
75
75
|
${this.letterData.from.name}<br />
|
|
76
76
|
${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
|
|
77
77
|
${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
|
|
78
78
|
${this.letterData.from.address.country}
|
|
79
79
|
</div>
|
|
80
80
|
<div>
|
|
81
|
-
<strong
|
|
81
|
+
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
|
|
82
82
|
Amtsgericht Bremen<br />
|
|
83
83
|
<i>reg-#:</i> HRB 35230 HB<br />
|
|
84
84
|
<i>vat-id:</i> ${this.letterData.from.vatId}
|
|
85
85
|
</div>
|
|
86
86
|
<div>
|
|
87
|
-
<strong
|
|
87
|
+
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
|
|
88
88
|
<i>email:</i> ${this.letterData.from.email}<br />
|
|
89
89
|
<i>phone:</i> ${this.letterData.from.phone}<br />
|
|
90
90
|
<i>fax:</i> ${this.letterData.from.fax}
|
|
91
91
|
</div>
|
|
92
92
|
<div>
|
|
93
|
-
<strong
|
|
93
|
+
<strong>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
|
|
94
94
|
<i>beneficiary:</i> ${this.letterData?.from?.name}<br />
|
|
95
95
|
<i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
|
|
96
96
|
<i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />
|
|
@@ -111,6 +111,13 @@ __decorate([
|
|
|
111
111
|
}),
|
|
112
112
|
__metadata("design:type", Object)
|
|
113
113
|
], DePageFooter.prototype, "letterData", void 0);
|
|
114
|
+
__decorate([
|
|
115
|
+
property({
|
|
116
|
+
type: Object,
|
|
117
|
+
reflect: true,
|
|
118
|
+
}),
|
|
119
|
+
__metadata("design:type", Object)
|
|
120
|
+
], DePageFooter.prototype, "documentSettings", void 0);
|
|
114
121
|
__decorate([
|
|
115
122
|
property({
|
|
116
123
|
type: Number
|
|
@@ -128,4 +135,4 @@ DePageFooter = __decorate([
|
|
|
128
135
|
__metadata("design:paramtypes", [])
|
|
129
136
|
], DePageFooter);
|
|
130
137
|
export { DePageFooter };
|
|
131
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
138
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZWZvb3Rlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy9wYWdlZm9vdGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsUUFBUSxFQUNSLElBQUksRUFDSixhQUFhLEVBRWIsR0FBRyxFQUNILFVBQVUsRUFDVixTQUFTLEVBQ1QsUUFBUSxHQUNULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFVBQVUsTUFBTSw4QkFBOEIsQ0FBQztBQUUzRCxPQUFPLEtBQUssTUFBTSxNQUFNLDBCQUEwQixDQUFDO0FBQ25ELE9BQU8sS0FBSyxPQUFPLE1BQU0sa0JBQWtCLENBQUM7QUFTckMsSUFBTSxZQUFZLEdBQWxCLE1BQU0sWUFBYSxTQUFRLFdBQVc7YUFDN0IsU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTtzQ0FDSyxJQUFJO0dBQ3ZDLEFBRmlCLENBRWhCO0lBdUJGO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFSSCxlQUFVLEdBQVcsQ0FBQyxDQUFDO1FBS3ZCLG9CQUFlLEdBQVcsQ0FBQyxDQUFDO1FBSWpDLFFBQVEsQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDcEMsQ0FBQzthQUVhLFdBQU0sR0FBRztRQUNyQixRQUFRLENBQUMsWUFBWSxDQUFDLFlBQVk7UUFDbEMsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozt3QkFjaUIsU0FBUyxDQUFDLE1BQU0sQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFNBQVMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDOzs7Ozs7Ozs7aUJBU3ZGLFNBQVMsQ0FBQyxNQUFNLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQzs7Ozs7Ozs7Ozs7aUJBV3BDLFNBQVMsQ0FBQyxNQUFNLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQzs7Ozs7Ozs7S0FRaEQ7S0FD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
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
|
|
2
|
+
import * as interfaces from '../../ts/interfaces/index.js';
|
|
2
3
|
import * as tsclass from '@tsclass/tsclass';
|
|
3
4
|
declare global {
|
|
4
5
|
interface HTMLElementTagNameMap {
|
|
@@ -8,6 +9,7 @@ declare global {
|
|
|
8
9
|
export declare class DePageHeader extends DeesElement {
|
|
9
10
|
static demo: () => TemplateResult<1>;
|
|
10
11
|
letterData: tsclass.business.ILetter;
|
|
12
|
+
documentSettings: interfaces.IDocumentSettings;
|
|
11
13
|
pageNumber: number;
|
|
12
14
|
pageTotalNumber: number;
|
|
13
15
|
constructor();
|
|
@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
9
|
};
|
|
10
|
-
import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, } from '@design.estate/dees-element';
|
|
11
|
-
import * as
|
|
12
|
-
import * as shared from '
|
|
10
|
+
import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, domtools } from '@design.estate/dees-element';
|
|
11
|
+
import * as interfaces from '../../ts/interfaces/index.js';
|
|
12
|
+
import * as shared from '../../ts/shared/index.js';
|
|
13
13
|
import * as tsclass from '@tsclass/tsclass';
|
|
14
14
|
let DePageHeader = class DePageHeader extends DeesElement {
|
|
15
15
|
static { this.demo = () => html `
|
|
@@ -51,20 +51,26 @@ let DePageHeader = class DePageHeader extends DeesElement {
|
|
|
51
51
|
color: #333;
|
|
52
52
|
font-size: 10px;
|
|
53
53
|
}
|
|
54
|
-
.topstripe
|
|
55
|
-
filter: invert(1);
|
|
54
|
+
.topstripe .logo {
|
|
56
55
|
position: absolute;
|
|
57
56
|
bottom: 10px;
|
|
58
57
|
height: 25px;
|
|
59
58
|
left: auto;
|
|
60
59
|
right: ${unsafeCSS(shared.rightMargin + 'px')};
|
|
60
|
+
font-family: 'Courier New', Courier, monospace;
|
|
61
|
+
}
|
|
62
|
+
.topstripe .logo img {
|
|
63
|
+
position: relative;
|
|
64
|
+
height: 25px;
|
|
61
65
|
}
|
|
62
66
|
`,
|
|
63
67
|
]; }
|
|
64
68
|
render() {
|
|
65
69
|
return html `
|
|
66
70
|
<div class="topstripe">
|
|
67
|
-
<
|
|
71
|
+
<div class="logo">
|
|
72
|
+
No logo set!
|
|
73
|
+
</div>
|
|
68
74
|
</div>
|
|
69
75
|
<div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
|
|
70
76
|
`;
|
|
@@ -76,6 +82,13 @@ __decorate([
|
|
|
76
82
|
}),
|
|
77
83
|
__metadata("design:type", Object)
|
|
78
84
|
], DePageHeader.prototype, "letterData", void 0);
|
|
85
|
+
__decorate([
|
|
86
|
+
property({
|
|
87
|
+
type: Object,
|
|
88
|
+
reflect: true,
|
|
89
|
+
}),
|
|
90
|
+
__metadata("design:type", Object)
|
|
91
|
+
], DePageHeader.prototype, "documentSettings", void 0);
|
|
79
92
|
__decorate([
|
|
80
93
|
property({
|
|
81
94
|
type: Number,
|
|
@@ -93,4 +106,4 @@ DePageHeader = __decorate([
|
|
|
93
106
|
__metadata("design:paramtypes", [])
|
|
94
107
|
], DePageHeader);
|
|
95
108
|
export { DePageHeader };
|
|
96
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
109
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZWhlYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy9wYWdlaGVhZGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsUUFBUSxFQUNSLElBQUksRUFDSixhQUFhLEVBRWIsR0FBRyxFQUNILFVBQVUsRUFDVixTQUFTLEVBQ1QsUUFBUSxFQUNULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFVBQVUsTUFBTSw4QkFBOEIsQ0FBQztBQUUzRCxPQUFPLEtBQUssTUFBTSxNQUFNLDBCQUEwQixDQUFDO0FBQ25ELE9BQU8sS0FBSyxPQUFPLE1BQU0sa0JBQWtCLENBQUM7QUFTckMsSUFBTSxZQUFZLEdBQWxCLE1BQU0sWUFBYSxTQUFRLFdBQVc7YUFDN0IsU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTtzQ0FDSyxJQUFJO0dBQ3ZDLEFBRmlCLENBRWhCO0lBdUJGO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFuQkgsZUFBVSxHQUE2QixJQUFJLENBQUM7UUFXNUMsZUFBVSxHQUFXLENBQUMsQ0FBQztRQUt2QixvQkFBZSxHQUFXLENBQUMsQ0FBQztRQUlqQyxRQUFRLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3BDLENBQUM7YUFFYSxXQUFNLEdBQUc7UUFDckIsUUFBUSxDQUFDLFlBQVksQ0FBQyxZQUFZO1FBQ2xDLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQXFCVSxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7Ozs7Ozs7Ozs7O2lCQVdwQyxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7Ozs7Ozs7S0FPaEQ7S0FDRixBQTFDbUIsQ0EwQ2xCO0lBRUssTUFBTTtRQUNYLE9BQU8sSUFBSSxDQUFBOzs7Ozs7Z0NBTWlCLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLFdBQVcsSUFBSSxzQ0FBc0M7S0FDdkcsQ0FBQztJQUNKLENBQUM7O0FBNUVNO0lBSE4sUUFBUSxDQUFDO1FBQ1IsSUFBSSxFQUFFLE1BQU07S0FDYixDQUFDOztnREFDaUQ7QUFNbkQ7SUFKQyxRQUFRLENBQUM7UUFDUixJQUFJLEVBQUUsTUFBTTtRQUNaLE9BQU8sRUFBRSxJQUFJO0tBQ2QsQ0FBQzs7c0RBQzZDO0FBS3hDO0lBSE4sUUFBUSxDQUFDO1FBQ1IsSUFBSSxFQUFFLE1BQU07S0FDYixDQUFDOztnREFDNEI7QUFLdkI7SUFITixRQUFRLENBQUM7UUFDUixJQUFJLEVBQUUsTUFBTTtLQUNiLENBQUM7O3FEQUNpQztBQXhCeEIsWUFBWTtJQUR4QixhQUFhLENBQUMsdUJBQXVCLENBQUM7O0dBQzFCLFlBQVksQ0FxRnhCIn0=
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as plugins from '../plugins.js';
|
|
2
|
+
import * as interfaces from '../../ts/interfaces/index.js';
|
|
2
3
|
import { DeesElement } from '@design.estate/dees-element';
|
|
3
4
|
declare global {
|
|
4
5
|
interface HTMLElementTagNameMap {
|
|
@@ -8,6 +9,7 @@ declare global {
|
|
|
8
9
|
export declare class DeDocumentViewer extends DeesElement {
|
|
9
10
|
static demo: () => import("@design.estate/dees-element").TemplateResult<1>;
|
|
10
11
|
letterData: plugins.tsclass.business.ILetter;
|
|
12
|
+
documentSettings: interfaces.IDocumentSettings;
|
|
11
13
|
static styles: import("@design.estate/dees-element").CSSResult[];
|
|
12
14
|
render: () => import("@design.estate/dees-element").TemplateResult<1>;
|
|
13
15
|
updated: (changedProperties: Map<string | number | symbol, unknown>) => void;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { html } from '@design.estate/dees-element';
|
|
2
|
+
import * as shared from '../../ts/shared/index.js';
|
|
3
|
+
export const demoFunc = () => html `
|
|
4
|
+
<dedocument-viewer .letterData=${shared.demoLetter} .documentSettings=${shared.demoDocumentSettings}></dedocument-viewer>
|
|
5
|
+
`;
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvdmlld2VyLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ25ELE9BQU8sS0FBSyxNQUFNLE1BQU0sMEJBQTBCLENBQUM7QUFFbkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTttQ0FDQyxNQUFNLENBQUMsVUFBVSxzQkFBc0IsTUFBTSxDQUFDLG9CQUFvQjtDQUNwRyxDQUFDIn0=
|
|
@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import * as plugins from '../plugins.js';
|
|
8
|
+
import * as interfaces from '../../ts/interfaces/index.js';
|
|
8
9
|
import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
|
|
9
10
|
import { demoFunc } from './viewer.demo.js';
|
|
10
11
|
let DeDocumentViewer = class DeDocumentViewer extends DeesElement {
|
|
@@ -17,7 +18,7 @@ let DeDocumentViewer = class DeDocumentViewer extends DeesElement {
|
|
|
17
18
|
<div class="maincontainer">
|
|
18
19
|
<div class="viewport">
|
|
19
20
|
${this.letterData
|
|
20
|
-
? html ` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
|
|
21
|
+
? html ` <dedocument-dedocument .letterData=${this.letterData} .documentSettings=${this.documentSettings}></dedocument-dedocument> `
|
|
21
22
|
: html ``}
|
|
22
23
|
</div>
|
|
23
24
|
<div class="controls"></div>
|
|
@@ -81,4 +82,4 @@ DeDocumentViewer = __decorate([
|
|
|
81
82
|
customElement('dedocument-viewer')
|
|
82
83
|
], DeDocumentViewer);
|
|
83
84
|
export { DeDocumentViewer };
|
|
84
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
85
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3ZpZXdlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEtBQUssT0FBTyxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEtBQUssVUFBVSxNQUFNLDhCQUE4QixDQUFDO0FBRTNELE9BQU8sRUFBRSxXQUFXLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxhQUFhLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBU3JDLElBQU0sZ0JBQWdCLEdBQXRCLE1BQU0sZ0JBQWlCLFNBQVEsV0FBVztJQUExQzs7UUFJTCxXQUFXO1FBQ0osZUFBVSxHQUFxQyxJQUFJLENBQUM7UUFpRHBELFdBQU0sR0FBRyxHQUFHLEVBQUU7WUFDbkIsT0FBTyxJQUFJLENBQUE7OztZQUdILElBQUksQ0FBQyxVQUFVO2dCQUNmLENBQUMsQ0FBQyxJQUFJLENBQUEsdUNBQXVDLElBQUksQ0FBQyxVQUFVLHNCQUFzQixJQUFJLENBQUMsZ0JBQWdCLDRCQUE0QjtnQkFDbkksQ0FBQyxDQUFDLElBQUksQ0FBQSxFQUFFOzs7O0tBSWYsQ0FBQztRQUNKLENBQUMsQ0FBQztRQUVLLFlBQU8sR0FBRyxDQUFDLGlCQUF5RCxFQUFFLEVBQUU7WUFDN0UsS0FBSyxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1lBQ2pDLElBQUksaUJBQWlCLENBQUMsR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUFFLENBQUM7WUFDMUMsQ0FBQztRQUNILENBQUMsQ0FBQztJQUNKLENBQUM7SUF2RUMsT0FBTzthQUNPLFNBQUksR0FBRyxRQUFRLEFBQVgsQ0FBWTthQU9oQixXQUFNLEdBQUc7UUFDckIsVUFBVSxDQUFDLGFBQWE7UUFDeEIsR0FBRyxDQUFBOzs7OztzQkFLZSxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxNQUFNLENBQUM7Ozs7Ozs7OztzQkFTckMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsV0FBVyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTBCM0Q7S0FDRixBQTNDbUIsQ0EyQ2xCOztBQXBEUyxnQkFBZ0I7SUFENUIsYUFBYSxDQUFDLG1CQUFtQixDQUFDO0dBQ3RCLGdCQUFnQixDQXdFNUIifQ==
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './elements/index.js';
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxxQkFBcUIsQ0FBQyJ9
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export * from './page1.js';
|
|
2
2
|
export * from './page2.js';
|
|
3
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvcGFnZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxZQUFZLENBQUM7QUFDM0IsY0FBYyxZQUFZLENBQUMifQ==
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { html } from '@design.estate/dees-element';
|
|
2
|
+
import { demoLetter } from '../../ts/shared/index.js';
|
|
3
|
+
import * as plugins from '../plugins.js';
|
|
4
|
+
export const page1 = () => html `
|
|
5
|
+
<style>
|
|
6
|
+
dedocument-dedocument {
|
|
7
|
+
margin: 16px;
|
|
8
|
+
}
|
|
9
|
+
</style>
|
|
10
|
+
<dedocument-dedocument .printMode=${false} letterData=${plugins.smartjson.stringifyBase64({
|
|
11
|
+
...demoLetter,
|
|
12
|
+
from: {
|
|
13
|
+
...demoLetter.from,
|
|
14
|
+
description: 'a string set via stringified JSON'
|
|
15
|
+
}
|
|
16
|
+
})}> </dedocument-dedocument>
|
|
17
|
+
`;
|
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZTEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvcGFnZXMvcGFnZTEudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ25ELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN0RCxPQUFPLEtBQUssT0FBTyxNQUFNLGVBQWUsQ0FBQztBQUV6QyxNQUFNLENBQUMsTUFBTSxLQUFLLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7c0NBTU8sS0FBSyxlQUFlLE9BQU8sQ0FBQyxTQUFTLENBQUMsZUFBZSxDQUFDO0lBQ3RGLEdBQUcsVUFBVTtJQUNiLElBQUksRUFBRTtRQUNKLEdBQUcsVUFBVSxDQUFDLElBQUk7UUFDbEIsV0FBVyxFQUFFLG1DQUFtQztLQUNqRDtDQUNrQyxDQUFDO0NBQ3pDLENBQUMifQ==
|
|
@@ -15,4 +15,4 @@ export const page2 = () => html `
|
|
|
15
15
|
<dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
|
|
16
16
|
</div>
|
|
17
17
|
`;
|
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZTIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvcGFnZXMvcGFnZTIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRW5ELE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7Ozs7Ozs7OztnQ0FZQyxJQUFJLGdCQUFnQixHQUFHO2dDQUN2QixJQUFJLGdCQUFnQixHQUFHOztDQUV0RCxDQUFDIn0=
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// tsclass scope
|
|
2
|
+
import * as tsclass from '@tsclass/tsclass';
|
|
3
|
+
export { tsclass };
|
|
4
|
+
// @pushrocks scope
|
|
5
|
+
import * as smartjson from '@push.rocks/smartjson';
|
|
6
|
+
import * as smarttime from '@push.rocks/smarttime';
|
|
7
|
+
export { smartjson, smarttime };
|
|
8
|
+
// third party
|
|
9
|
+
import * as qrcode from 'qrcode';
|
|
10
|
+
export { qrcode };
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9wbHVnaW5zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGdCQUFnQjtBQUNoQixPQUFPLEtBQUssT0FBTyxNQUFNLGtCQUFrQixDQUFDO0FBRTVDLE9BQU8sRUFBRSxPQUFPLEVBQUUsQ0FBQztBQUVuQixtQkFBbUI7QUFDbkIsT0FBTyxLQUFLLFNBQVMsTUFBTSx1QkFBdUIsQ0FBQztBQUNuRCxPQUFPLEtBQUssU0FBUyxNQUFNLHVCQUF1QixDQUFDO0FBRW5ELE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLENBQUM7QUFFaEMsY0FBYztBQUNkLE9BQU8sS0FBSyxNQUFNLE1BQU0sUUFBUSxDQUFDO0FBRWpDLE9BQU8sRUFBRSxNQUFNLEVBQUUsQ0FBQyJ9
|
package/npmextra.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"githost": "code.foss.global",
|
|
6
6
|
"gitscope": "designestate/private",
|
|
7
7
|
"gitrepo": "dedocument-catalog",
|
|
8
|
-
"description": "A
|
|
8
|
+
"description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
|
|
9
9
|
"npmPackagename": "@designestate_private/dedocument-catalog",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"projectDomain": "design.estate",
|
|
@@ -24,7 +24,11 @@
|
|
|
24
24
|
"responsive design",
|
|
25
25
|
"QR code",
|
|
26
26
|
"modular architecture",
|
|
27
|
-
"automated workflows"
|
|
27
|
+
"automated workflows",
|
|
28
|
+
"localization",
|
|
29
|
+
"digital signatures",
|
|
30
|
+
"security",
|
|
31
|
+
"interactive documents"
|
|
28
32
|
]
|
|
29
33
|
}
|
|
30
34
|
},
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design.estate/dees-document",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"private": false,
|
|
5
|
-
"description": "A
|
|
5
|
+
"description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
|
|
6
6
|
"main": "dist_ts_web/index.js",
|
|
7
7
|
"typings": "dist_ts_web/index.d.ts",
|
|
8
8
|
"exports": {
|
|
@@ -72,11 +72,15 @@
|
|
|
72
72
|
"responsive design",
|
|
73
73
|
"QR code",
|
|
74
74
|
"modular architecture",
|
|
75
|
-
"automated workflows"
|
|
75
|
+
"automated workflows",
|
|
76
|
+
"localization",
|
|
77
|
+
"digital signatures",
|
|
78
|
+
"security",
|
|
79
|
+
"interactive documents"
|
|
76
80
|
],
|
|
77
81
|
"scripts": {
|
|
78
82
|
"test": "npm run build && tstest test/",
|
|
79
|
-
"build": "tsbuild --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
|
|
83
|
+
"build": "tsbuild tsfolders --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
|
|
80
84
|
"watch": "tswatch element",
|
|
81
85
|
"buildDocs": "tsdoc"
|
|
82
86
|
}
|
package/readme.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
```markdown
|
|
2
1
|
# @design.estate/dees-document
|
|
3
2
|
|
|
4
|
-
A
|
|
3
|
+
A comprehensive tool for dynamically generating and rendering business documents like invoices using modern web technologies.
|
|
5
4
|
|
|
6
5
|
## Install
|
|
7
6
|
|
|
@@ -15,158 +14,164 @@ This command will install the package and add it to your project's dependencies,
|
|
|
15
14
|
|
|
16
15
|
## Usage
|
|
17
16
|
|
|
18
|
-
The `@design.estate/dees-document` package serves as a robust framework to facilitate the generation of business documents, such as invoices and
|
|
17
|
+
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.
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
Below, we provide a detailed guide for utilizing this package, from initializing your environment to generating complete PDF documents.
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
### Setting Up the Environment
|
|
22
|
+
|
|
23
|
+
Before diving into document creation, ensure your environment is properly configured. Make sure to import necessary dependencies and setup configurations:
|
|
23
24
|
|
|
24
25
|
```typescript
|
|
25
26
|
import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
|
|
26
27
|
|
|
27
28
|
async function setupPdfService() {
|
|
28
29
|
const options: IPdfServiceConstructorOptions = {
|
|
29
|
-
//
|
|
30
|
+
// Configure your options here
|
|
30
31
|
};
|
|
31
|
-
|
|
32
|
+
|
|
32
33
|
const pdfService = await PdfService.createAndStart(options);
|
|
33
34
|
console.log('PDF Service started successfully.');
|
|
34
35
|
return pdfService;
|
|
35
36
|
}
|
|
36
37
|
```
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
### Creating Documents
|
|
41
|
-
|
|
42
|
-
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.
|
|
43
|
-
|
|
44
|
-
#### Step-by-Step: Create an Invoice
|
|
45
|
-
|
|
46
|
-
1. **Define the Data Structure**: Construct the details of the invoice, including the sender, recipient information, and the details of the items being invoiced.
|
|
47
|
-
|
|
48
|
-
```typescript
|
|
49
|
-
import { ILetter } from '@design.estate/dees-document';
|
|
50
|
-
|
|
51
|
-
const invoiceData: ILetter = {
|
|
52
|
-
from: {
|
|
53
|
-
name: "Your Company Name",
|
|
54
|
-
address: {
|
|
55
|
-
streetName: "Your Street",
|
|
56
|
-
houseNumber: "123",
|
|
57
|
-
city: "Your City",
|
|
58
|
-
country: "Your Country",
|
|
59
|
-
postalCode: "12345",
|
|
60
|
-
},
|
|
61
|
-
email: "your-email@example.com",
|
|
62
|
-
phone: "123-456-7890",
|
|
63
|
-
},
|
|
64
|
-
to: {
|
|
65
|
-
name: "Recipient Company Name",
|
|
66
|
-
address: {
|
|
67
|
-
streetName: "Recipient Street",
|
|
68
|
-
houseNumber: "456",
|
|
69
|
-
city: "Recipient City",
|
|
70
|
-
country: "Recipient Country",
|
|
71
|
-
postalCode: "67890",
|
|
72
|
-
},
|
|
73
|
-
email: "recipient-email@example.com",
|
|
74
|
-
phone: "098-765-4321",
|
|
75
|
-
},
|
|
76
|
-
content: {
|
|
77
|
-
invoiceData: {
|
|
78
|
-
items: [
|
|
79
|
-
{
|
|
80
|
-
name: "Service or Product Name",
|
|
81
|
-
unitQuantity: 2,
|
|
82
|
-
unitNetPrice: 100.00,
|
|
83
|
-
unitType: 'service',
|
|
84
|
-
vatPercentage: 19,
|
|
85
|
-
currency: 'EUR',
|
|
86
|
-
}
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
subject: "Invoice for Services Rendered",
|
|
91
|
-
date: new Date().getTime(),
|
|
92
|
-
versionInfo: {
|
|
93
|
-
type: "final",
|
|
94
|
-
version: "1.0.0"
|
|
95
|
-
},
|
|
96
|
-
};
|
|
97
|
-
```
|
|
39
|
+
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.
|
|
98
40
|
|
|
99
|
-
|
|
41
|
+
### Creating a Document Template
|
|
100
42
|
|
|
101
|
-
|
|
43
|
+
To create documents, particularly invoices, you'll first need to define a template. This template describes the structure of your document:
|
|
102
44
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
45
|
+
```typescript
|
|
46
|
+
import { ILetter } from '@design.estate/dees-document';
|
|
47
|
+
|
|
48
|
+
const invoiceTemplate: ILetter = {
|
|
49
|
+
from: {
|
|
50
|
+
name: "Your Company Name",
|
|
51
|
+
address: {
|
|
52
|
+
streetName: "Your Street",
|
|
53
|
+
houseNumber: "123",
|
|
54
|
+
city: "Your City",
|
|
55
|
+
country: "Your Country",
|
|
56
|
+
postalCode: "12345",
|
|
57
|
+
},
|
|
58
|
+
email: "your-email@example.com",
|
|
59
|
+
phone: "123-456-7890",
|
|
60
|
+
},
|
|
61
|
+
to: {
|
|
62
|
+
name: "Recipient Company Name",
|
|
63
|
+
address: {
|
|
64
|
+
streetName: "Recipient Street",
|
|
65
|
+
houseNumber: "456",
|
|
66
|
+
city: "Recipient City",
|
|
67
|
+
country: "Recipient Country",
|
|
68
|
+
postalCode: "67890",
|
|
69
|
+
},
|
|
70
|
+
email: "recipient-email@example.com",
|
|
71
|
+
phone: "098-765-4321",
|
|
72
|
+
},
|
|
73
|
+
content: {
|
|
74
|
+
invoiceData: {
|
|
75
|
+
items: [
|
|
76
|
+
{
|
|
77
|
+
name: "Service or Product Name",
|
|
78
|
+
unitQuantity: 2,
|
|
79
|
+
unitNetPrice: 100.00,
|
|
80
|
+
unitType: 'service',
|
|
81
|
+
vatPercentage: 19,
|
|
82
|
+
currency: 'EUR',
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
subject: "Invoice for Services Rendered",
|
|
88
|
+
date: new Date().getTime(),
|
|
89
|
+
versionInfo: {
|
|
90
|
+
type: "final",
|
|
91
|
+
version: "1.0.0"
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
```
|
|
107
95
|
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
```
|
|
96
|
+
The `invoiceTemplate` object utilizes the `ILetter` interface which specifies the structure for invoice data, including sender and recipient details, itemization, and pricing.
|
|
111
97
|
|
|
112
|
-
|
|
98
|
+
### Generating the Document
|
|
113
99
|
|
|
114
|
-
|
|
100
|
+
Once a template is established, the next step is generating a PDF:
|
|
115
101
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
102
|
+
```typescript
|
|
103
|
+
async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
|
|
104
|
+
const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
|
|
105
|
+
console.log('Invoice PDF generated successfully.');
|
|
121
106
|
|
|
122
|
-
|
|
123
|
-
|
|
107
|
+
// Here you could save the PDF to your filesystem, send it via email, etc.
|
|
108
|
+
}
|
|
109
|
+
```
|
|
124
110
|
|
|
125
|
-
|
|
111
|
+
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.
|
|
126
112
|
|
|
127
|
-
###
|
|
113
|
+
### Comprehensive Example
|
|
128
114
|
|
|
129
|
-
|
|
115
|
+
Below is an example integrating all previous steps into a single coherent script:
|
|
116
|
+
|
|
117
|
+
```typescript
|
|
118
|
+
async function main() {
|
|
119
|
+
const pdfService = await setupPdfService();
|
|
120
|
+
const invoiceData: ILetter = {
|
|
121
|
+
// Populate your invoice object
|
|
122
|
+
};
|
|
123
|
+
await generateInvoice(pdfService, invoiceData);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
main().then(() => console.log('Invoice generation process completed.'));
|
|
127
|
+
```
|
|
130
128
|
|
|
131
|
-
|
|
129
|
+
This script encompasses initializing services and generating a PDF in a streamlined, efficient workflow.
|
|
132
130
|
|
|
133
|
-
|
|
131
|
+
### Advanced Features
|
|
134
132
|
|
|
135
|
-
|
|
136
|
-
import { DeDocumentViewer } from '@design.estate/dees-element';
|
|
133
|
+
`@design.estate/dees-document` provides several advanced functionalities, enabling rich document creation:
|
|
137
134
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
document.
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
Adjust styles either with standard CSS or via dynamic TypeScript changes.
|
|
144
|
-
|
|
145
|
-
2. **Interactive Document Elements**: Integrate interactive UI components, like buttons or input fields, fitting seamlessly into your documents.
|
|
146
|
-
|
|
147
|
-
3. **Multi-page Document Generation**: Handle content overflow elegantly through automatic page creation, keeping headers and footers intact.
|
|
148
|
-
|
|
149
|
-
```typescript
|
|
150
|
-
pdfService.adjustDePageScaling();
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
Adapt between print and digital formats, managing scaling effectively.
|
|
154
|
-
|
|
155
|
-
4. **Embedding Images and Logos**: Enhance your document's appearance with company logos, graphics, and other auxiliary content.
|
|
156
|
-
|
|
157
|
-
### Additional Capabilities
|
|
158
|
-
|
|
159
|
-
Beyond basic functionality, this package offers a range of advanced features:
|
|
160
|
-
|
|
161
|
-
- **Document Management**: Manage multiple document templates, maintain version control, and append annotations or notes.
|
|
162
|
-
- **Dynamic Rendering**: Utilize templating engines to render dynamic content based on input variables.
|
|
163
|
-
- **Responsive Design for Digital Documents**: Ensure your documents are consistently displayed across various devices.
|
|
135
|
+
1. **Custom Templates & Styling**
|
|
136
|
+
- Customize the styling through CSS or using inline styles in TypeScript.
|
|
137
|
+
- Templates can be adjusted to present different document types (e.g., contracts, reports).
|
|
164
138
|
|
|
165
|
-
|
|
139
|
+
2. **Modular Components and Reuse**
|
|
140
|
+
- Utilize modular components to create reusable parts across different documents, enhancing maintainability and reducing redundancy.
|
|
166
141
|
|
|
167
|
-
|
|
142
|
+
3. **Interactive Documents**
|
|
143
|
+
- Integrate interactivities like forms, buttons, and interactive charts within your documents.
|
|
144
|
+
|
|
145
|
+
4. **Localization Support**
|
|
146
|
+
- Documents can be localized to support multiple languages, enhancing accessibility and usability.
|
|
147
|
+
|
|
148
|
+
5. **Responsive and Adaptive Designs**
|
|
149
|
+
- Create documents that adjust layout dynamically depending on print or digital medium, maintaining consistency across platforms.
|
|
150
|
+
|
|
151
|
+
6. **Security Features**
|
|
152
|
+
- Apply digital signatures and encrypt sensitive documents to ensure secure and authentic document distribution.
|
|
153
|
+
|
|
154
|
+
7. **Complex Business Logic**
|
|
155
|
+
- Implement complex logic for feature-rich documents such as inventory systems, automatic tax calculations, or real-time pricing adjustments.
|
|
156
|
+
|
|
157
|
+
### Utilize Translation for Localization
|
|
158
|
+
|
|
159
|
+
The package offers a translation mechanism to adapt your documents for international clients:
|
|
160
|
+
|
|
161
|
+
```typescript
|
|
162
|
+
import { translate } from '@design.estate/dees-document/shared';
|
|
163
|
+
|
|
164
|
+
const languageCode: 'DE' | 'EN' | 'ES' = 'EN'; // Set required language code
|
|
165
|
+
console.log(translate(languageCode, 'invoice', 'Invoice')); // Translated output
|
|
168
166
|
```
|
|
169
167
|
|
|
168
|
+
Different language settings can be applied, enabling the seamless presentation of document contents tailored to regional and linguistic preferences.
|
|
169
|
+
|
|
170
|
+
### Conclusion
|
|
171
|
+
|
|
172
|
+
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.
|
|
173
|
+
|
|
174
|
+
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.
|
|
170
175
|
|
|
171
176
|
## License and Legal Information
|
|
172
177
|
|
package/ts/00_commitinfo_data.ts
CHANGED
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-document',
|
|
6
|
-
version: '1.3.
|
|
7
|
-
description: 'A
|
|
6
|
+
version: '1.3.1',
|
|
7
|
+
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
|
|
8
8
|
}
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-document',
|
|
6
|
-
version: '1.3.
|
|
7
|
-
description: 'A
|
|
6
|
+
version: '1.3.1',
|
|
7
|
+
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
|
|
8
8
|
}
|