@design.estate/dees-document 1.6.8 → 1.6.9

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@design.estate/dees-document",
3
- "version": "1.6.8",
3
+ "version": "1.6.9",
4
4
  "private": false,
5
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",
@@ -3,6 +3,6 @@
3
3
  */
4
4
  export const commitinfo = {
5
5
  name: '@design.estate/dees-document',
6
- version: '1.6.8',
6
+ version: '1.6.9',
7
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.6.8',
6
+ version: '1.6.9',
7
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
  }
@@ -18,7 +18,6 @@ import * as plugins from '../plugins.js';
18
18
 
19
19
  import { dedocumentSharedStyle } from '../style.js';
20
20
 
21
-
22
21
  declare global {
23
22
  interface HTMLElementTagNameMap {
24
23
  'dedocument-contentinvoice': DeContentInvoice;
@@ -219,14 +218,26 @@ export class DeContentInvoice extends DeesElement {
219
218
  border-right: 1px dashed #ccc;
220
219
  }
221
220
 
221
+ .lineItem:last-child {
222
+ border-right: none;
223
+ }
224
+
222
225
  .lineItem.rightAlign {
223
226
  text-align: right;
224
227
  }
225
228
 
226
229
  .invoiceLine {
230
+ background: #ffffff00;
227
231
  border-bottom: 1px dotted #ccc;
228
232
  }
229
233
 
234
+ .invoiceLine.highlighted {
235
+ transition: background 0.2s;
236
+ background: #ffc18f;
237
+ border: 1px solid #ff9d4d;
238
+ box-sizing: content-box;
239
+ }
240
+
230
241
  .sums {
231
242
  margin-top: 5px;
232
243
  font-size: 12px;
@@ -286,33 +297,77 @@ export class DeContentInvoice extends DeesElement {
286
297
  </style>
287
298
  <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
288
299
  <div class="grid topLine dataHeader">
289
- <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
290
- <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
291
- <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
292
- <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
293
- <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
294
- <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
295
- <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'vatShort', 'VAT')}</div>
300
+ <div class="lineItem rightAlign">
301
+ ${plugins.shared.translation.translate(
302
+ this.documentSettings.languageCode,
303
+ 'itemPos',
304
+ 'Item Pos.'
305
+ )}
306
+ </div>
307
+ <div class="lineItem">
308
+ ${plugins.shared.translation.translate(
309
+ this.documentSettings.languageCode,
310
+ 'description',
311
+ 'Description'
312
+ )}
313
+ </div>
314
+ <div class="lineItem rightAlign">
315
+ ${plugins.shared.translation.translate(
316
+ this.documentSettings.languageCode,
317
+ 'quantity',
318
+ 'Quantity'
319
+ )}
320
+ </div>
321
+ <div class="lineItem">
322
+ ${plugins.shared.translation.translate(
323
+ this.documentSettings.languageCode,
324
+ 'unitType',
325
+ 'Unit Type'
326
+ )}
327
+ </div>
328
+ <div class="lineItem rightAlign">
329
+ ${plugins.shared.translation.translate(
330
+ this.documentSettings.languageCode,
331
+ 'unitNetPrice',
332
+ 'Unit Net Price'
333
+ )}
334
+ </div>
335
+ <div class="lineItem rightAlign">
336
+ ${plugins.shared.translation.translate(
337
+ this.documentSettings.languageCode,
338
+ 'totalNetPrice',
339
+ 'Total Net Price'
340
+ )}
341
+ </div>
342
+ <div class="lineItem rightAlign">
343
+ ${plugins.shared.translation.translate(
344
+ this.documentSettings.languageCode,
345
+ 'vatShort',
346
+ 'VAT'
347
+ )}
348
+ </div>
296
349
  </div>
297
350
  ${(() => {
298
351
  let counter = 1;
299
- return this.letterData?.content.invoiceData?.items?.map(
300
- (invoiceItem) => html`
301
- <div class="grid invoiceLine needsDataHeader">
352
+ return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => {
353
+ const isHighlighted = false; // TODO: implement rest of highlight logic
354
+ return html`
355
+ <div class="grid invoiceLine needsDataHeader ${isHighlighted ? 'highlighted' : ''}">
302
356
  <div class="lineItem rightAlign">${counter++}</div>
303
357
  <div class="lineItem">${invoiceItem.name}</div>
304
358
  <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
305
359
  <div class="lineItem">${invoiceItem.unitType}</div>
306
- <div class="lineItem rightAlign">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
307
360
  <div class="lineItem rightAlign">
308
- ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
361
+ ${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
309
362
  </div>
310
363
  <div class="lineItem rightAlign">
311
- ${invoiceItem.vatPercentage}%
364
+ ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice}
365
+ ${this.letterData?.content.invoiceData.currency}
312
366
  </div>
367
+ <div class="lineItem rightAlign">${invoiceItem.vatPercentage}%</div>
313
368
  </div>
314
- `
315
- );
369
+ `;
370
+ });
316
371
  })()}
317
372
  <div class="sums">
318
373
  <div class="sumline">
@@ -331,9 +386,13 @@ export class DeContentInvoice extends DeesElement {
331
386
  <div class="sumline">
332
387
  <div class="label">
333
388
  Vat ${vatGroupArg.vatPercentage}%
334
- ${this.documentSettings.vatGroupPositions ? html`
335
- <br /><span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
336
- ` : html``}
389
+ ${this.documentSettings.vatGroupPositions
390
+ ? html`
391
+ <br /><span style="font-weight: normal"
392
+ >(on item positions: ${itemNumbers})</span
393
+ >
394
+ `
395
+ : html``}
337
396
  </div>
338
397
  <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
339
398
  </div>
@@ -348,7 +407,11 @@ export class DeContentInvoice extends DeesElement {
348
407
  ${this.letterData?.content.invoiceData.reverseCharge
349
408
  ? html`
350
409
  <div class="taxNote">
351
- ${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
410
+ ${plugins.shared.translation.translate(
411
+ this.documentSettings.languageCode,
412
+ 'reverseVatNote',
413
+ 'VAT arises on a reverse charge basis and is payable by the customer.'
414
+ )}
352
415
  </div>
353
416
  `
354
417
  : ``}
@@ -368,7 +431,9 @@ export class DeContentInvoice extends DeesElement {
368
431
  <div class="infoBox">
369
432
  <div class="label">Referenced contract:</div>
370
433
  This invoice is adhering to agreements made by contract between the parties on
371
- ${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
434
+ ${plugins.smarttime.ExtendedDate.fromMillis(
435
+ this.letterData?.content.contractData.contractDate
436
+ ).format('MMMM D, YYYY')}.
372
437
  </div>
373
438
  `
374
439
  : html``}