@dangl/angular-ava 1.4.5-beta0015 → 1.4.5-beta0028
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.
|
@@ -23,7 +23,7 @@ import * as i4 from '@angular/material/checkbox';
|
|
|
23
23
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
24
24
|
import * as i4$1 from '@angular/material/table';
|
|
25
25
|
import { MatTableModule } from '@angular/material/table';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i1 from '@angular/material/divider';
|
|
27
27
|
import { MatDividerModule } from '@angular/material/divider';
|
|
28
28
|
import * as i2 from '@angular/material/expansion';
|
|
29
29
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
@@ -244,12 +244,12 @@ var ModeViewType;
|
|
|
244
244
|
|
|
245
245
|
// This file is automatically generated as part of the build process
|
|
246
246
|
const version = {
|
|
247
|
-
version: "1.4.5-
|
|
248
|
-
commitInfo: "Branch.develop.Sha.
|
|
247
|
+
version: "1.4.5-beta0028",
|
|
248
|
+
commitInfo: "Branch.develop.Sha.ed4309226df6bb9533ebc4b8a8fb727ae895fe5b",
|
|
249
249
|
commitDate: "2025-07-08",
|
|
250
|
-
commitHash: "
|
|
251
|
-
informationalVersion: "1.4.5-beta.
|
|
252
|
-
buildDateUtc: new Date(Date.UTC(2025, 6, 8, 14,
|
|
250
|
+
commitHash: "ed4309226df6bb9533ebc4b8a8fb727ae895fe5b",
|
|
251
|
+
informationalVersion: "1.4.5-beta.28+Branch.develop.Sha.ed4309226df6bb9533ebc4b8a8fb727ae895fe5b",
|
|
252
|
+
buildDateUtc: new Date(Date.UTC(2025, 6, 8, 14, 18, 2))
|
|
253
253
|
};
|
|
254
254
|
|
|
255
255
|
class TreeHoverTooltipService {
|
|
@@ -434,7 +434,8 @@ const DEFAULT_TEXT_WORD_INVOICE = {
|
|
|
434
434
|
lineItemDiscount: 'Discount',
|
|
435
435
|
lineItemCharges: 'Charges',
|
|
436
436
|
lineItemAllowances: 'Allowances',
|
|
437
|
-
lineItemReason: 'Reason'
|
|
437
|
+
lineItemReason: 'Reason',
|
|
438
|
+
invoiceSellerTaxRepresentativeTitle: 'Tax Representative'
|
|
438
439
|
};
|
|
439
440
|
const germanTextsInvoice = {
|
|
440
441
|
invoiceTitle: 'Rechnung',
|
|
@@ -507,7 +508,8 @@ const germanTextsInvoice = {
|
|
|
507
508
|
lineItemDiscount: 'Rabatt',
|
|
508
509
|
lineItemCharges: 'Zuschlag',
|
|
509
510
|
lineItemAllowances: 'Nachlass',
|
|
510
|
-
lineItemReason: 'Grund'
|
|
511
|
+
lineItemReason: 'Grund',
|
|
512
|
+
invoiceSellerTaxRepresentativeTitle: 'Steuervertreter'
|
|
511
513
|
};
|
|
512
514
|
|
|
513
515
|
const DEFAULT_DIGITS_INFO = '1.3-3';
|
|
@@ -3070,6 +3072,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
3070
3072
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n <table\n mat-table\n [dataSource]=\"flatLineItems\"\n multiTemplateDataRows\n class=\"mat-elevation-z8 invoice-table\"\n >\n <ng-container matColumnDef=\"number\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n #\n </th>\n <td\n mat-cell\n *matCellDef=\"let element; let i = dataIndex\"\n [class.children]=\"element.indentLevel\"\n >\n {{ element.identifier || element.objectIdentifier || i + 1 }}\n @if (element.indentLevel) {\n <div\n class=\"children-mark\"\n [style.width.px]=\"element.indentLevel * 8\"\n ></div>\n }\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"description\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.tableHeadDescription }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n >\n {{ element.itemInformation?.description || element.itemInformation?.name }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"quantity\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.tableHeadQuantity }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n >\n {{ element.quantity | numberPlus }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"unit\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.tableHeadUnit }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n >\n {{ element.unitCode }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"netPrice\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.tableHeadNetPrice }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n class=\"currency-table-cell\"\n >\n {{ element.priceDetails?.netPrice | currencyPlus }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"discount\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.lineItemDiscount }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n class=\"currency-table-cell\"\n >\n @if (element.priceDetails?.absoluteDiscountPerItem) {\n {{ element.priceDetails?.absoluteDiscountPerItem | percentPlus: '1.0-2' }}\n }\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"netAmount\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.tableHeadNetAmount }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n class=\"currency-table-cell\"\n >\n {{ element.netAmount | currencyPlus }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"vat\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.vat }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n class=\"currency-table-cell\"\n >\n @if (element && element.vatInformation && element.vatInformation.length > 0) {\n {{ element.vatInformation[0].vatRate | percentPlus: '1.0-2' }}\n }\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let element\"\n [attr.colspan]=\"displayedColumns.length\"\n >\n <div [@detailExpand]=\"isRowExpanded(element) || (pdfViewEnabled$ | async) ? 'expanded' : 'collapsed'\">\n <ava-invoice-line-item-additional-info [lineItem]=\"element\"></ava-invoice-line-item-additional-info>\n </div>\n </td>\n </ng-container>\n\n <tr\n mat-header-row\n *matHeaderRowDef=\"displayedColumns\"\n ></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; columns: displayedColumns\"\n (click)=\"(row.allowances || row.charges) && toggleRow(row)\"\n [ngClass]=\"{\n expanding: !(pdfViewEnabled$ | async) && (row.allowances || row.charges),\n 'expanded-row': isRowExpanded(row) && colorSettings === true,\n 'expanded-row-pdf-view': (pdfViewEnabled$ | async) && !row.indentLevel,\n }\"\n [ngStyle]=\"{\n backgroundColor:\n colorSettings === true\n ? null\n : isRowExpanded(row)\n ? 'color-mix(in srgb,' + colorSettings?.backgroundColor + ', white 70%)'\n : null,\n }\"\n ></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"detail-row\"\n ></tr>\n </table>\n }\n}\n", styles: ["@charset \"UTF-8\";.invoice-table{width:100%;border-collapse:collapse}.invoice-table th,.invoice-table td{text-align:left}.invoice-table tr td:first-child{padding-left:20px}.invoice-table th{background-color:var(--color-primary);font-weight:700;color:#fff}.currency-table-cell{text-align:right!important}.invoice-table tr.detail-row{height:0}tr{cursor:pointer;position:relative}tr:before{content:\"\\25bc\";position:absolute;font-size:20px;transition:transform .3s ease;top:calc(50% - 10px);color:var(--color-primary);z-index:210}tr:not(.expanding):before{opacity:0}tr:has(th):before,tr.detail-row:before,tr.expanded-row-pdf-view:before{visibility:hidden}tr.expanded-row:before{content:\"\\25b2\"}tr.expanded-row td{background-color:color-mix(in srgb,var(--color-primary),white 70%)}.children{position:relative}.children-mark{height:100%;background-color:#add8e6;position:absolute;left:0;top:0;z-index:200;opacity:.5}\n"] }]
|
|
3071
3073
|
}] });
|
|
3072
3074
|
|
|
3075
|
+
class OrganizationInfoComponent {
|
|
3076
|
+
constructor() {
|
|
3077
|
+
this.organizationInfo = input(null);
|
|
3078
|
+
this.configurationInvoiceService = inject(ConfigurationInvoiceService);
|
|
3079
|
+
this.textWords$ = this.configurationInvoiceService.getTextWordsFromConfig();
|
|
3080
|
+
this.colorSettings$ = this.configurationInvoiceService.getColorSettingsFromConfig();
|
|
3081
|
+
}
|
|
3082
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OrganizationInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3083
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: OrganizationInfoComponent, isStandalone: true, selector: "ava-organization-info", inputs: { organizationInfo: { classPropertyName: "organizationInfo", publicName: "organizationInfo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n @if (organizationInfo(); as organizationInfo) {\n <div class=\"buyer-info\">\n <ng-content #header></ng-content>\n\n <p>\n <strong>{{ organizationInfo.name }}</strong>\n </p>\n <p>{{ organizationInfo.address }}</p>\n <p>{{ organizationInfo.city }}, {{ organizationInfo.zipCode }}</p>\n <p>{{ organizationInfo.countryCode }}</p>\n @if (organizationInfo.vatId) {\n <p>\n <strong>{{ textWords.vatId }}: </strong>\n <br />\n <span>{{ organizationInfo.vatId }}</span>\n </p>\n }\n <mat-divider></mat-divider>\n @if (organizationInfo.contactPersonName) {\n <p>\n <strong>{{ textWords.contactPersonName }}: </strong>\n <br />\n <span>{{ organizationInfo.contactPersonName }}</span>\n </p>\n }\n @if (organizationInfo.contactPersonPhone) {\n <p>\n <strong>{{ textWords.contactPersonPhone }}: </strong>\n <br />\n <span>{{ organizationInfo.contactPersonPhone }}</span>\n </p>\n }\n @if (organizationInfo.contactPersonEmail) {\n <p>\n <strong>{{ textWords.contactPersonEmail }}: </strong>\n <br />\n <span>{{ organizationInfo.contactPersonEmail }}</span>\n </p>\n }\n </div>\n }\n }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
|
|
3084
|
+
}
|
|
3085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OrganizationInfoComponent, decorators: [{
|
|
3086
|
+
type: Component,
|
|
3087
|
+
args: [{ selector: 'ava-organization-info', imports: [AsyncPipe, MatDividerModule], template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n @if (organizationInfo(); as organizationInfo) {\n <div class=\"buyer-info\">\n <ng-content #header></ng-content>\n\n <p>\n <strong>{{ organizationInfo.name }}</strong>\n </p>\n <p>{{ organizationInfo.address }}</p>\n <p>{{ organizationInfo.city }}, {{ organizationInfo.zipCode }}</p>\n <p>{{ organizationInfo.countryCode }}</p>\n @if (organizationInfo.vatId) {\n <p>\n <strong>{{ textWords.vatId }}: </strong>\n <br />\n <span>{{ organizationInfo.vatId }}</span>\n </p>\n }\n <mat-divider></mat-divider>\n @if (organizationInfo.contactPersonName) {\n <p>\n <strong>{{ textWords.contactPersonName }}: </strong>\n <br />\n <span>{{ organizationInfo.contactPersonName }}</span>\n </p>\n }\n @if (organizationInfo.contactPersonPhone) {\n <p>\n <strong>{{ textWords.contactPersonPhone }}: </strong>\n <br />\n <span>{{ organizationInfo.contactPersonPhone }}</span>\n </p>\n }\n @if (organizationInfo.contactPersonEmail) {\n <p>\n <strong>{{ textWords.contactPersonEmail }}: </strong>\n <br />\n <span>{{ organizationInfo.contactPersonEmail }}</span>\n </p>\n }\n </div>\n }\n }\n}\n" }]
|
|
3088
|
+
}] });
|
|
3089
|
+
|
|
3073
3090
|
class ReferenceAndDeliveryInformationComponent {
|
|
3074
3091
|
constructor() {
|
|
3075
3092
|
this.deliveryInformation = input(null);
|
|
@@ -3079,11 +3096,11 @@ class ReferenceAndDeliveryInformationComponent {
|
|
|
3079
3096
|
this.colorSettings$ = this.configurationInvoiceService.getColorSettingsFromConfig();
|
|
3080
3097
|
}
|
|
3081
3098
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ReferenceAndDeliveryInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3082
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ReferenceAndDeliveryInformationComponent, isStandalone: true, selector: "ava-reference-and-delivery-information", inputs: { deliveryInformation: { classPropertyName: "deliveryInformation", publicName: "deliveryInformation", isSignal: true, isRequired: false, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n <div class=\"invoice-info\">\n <section class=\"invoice-references\">\n @if (textWords.referencesTopic) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.referencesTopic }}\n </h2>\n }\n <div class=\"invoice-references-details\">\n @if (references()?.buyerReference) {\n <p>\n <strong>{{ textWords.referencesBuyerReference }}: </strong>\n <br />\n <span>{{ references()?.buyerReference }}</span>\n </p>\n }\n @if (references()?.projectReference) {\n <p>\n <strong>{{ textWords.referencesProjectReference }}: </strong>\n <br />\n <span>{{ references()?.projectReference }}</span>\n </p>\n }\n @if (references()?.contractReference) {\n <p>\n <strong>{{ textWords.referencesContractReference }}: </strong>\n <br />\n <span>{{ references()?.contractReference }}</span>\n </p>\n }\n @if (references()?.purchaseOrderReference) {\n <p>\n <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n <br />\n <span>{{ references()?.purchaseOrderReference }}</span>\n </p>\n }\n @if (references()?.salesOrderReference) {\n <p>\n <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n <br />\n <span>{{ references()?.salesOrderReference }}</span>\n </p>\n }\n @if (references()?.receivingAdviceReference) {\n <p>\n <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n <br />\n <span>{{ references()?.receivingAdviceReference }}</span>\n </p>\n }\n @if (references()?.dispatchAdviceReference) {\n <p>\n <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n <br />\n <span> {{ references()?.dispatchAdviceReference }}</span>\n </p>\n }\n @if (references()?.tenderOrLotReference) {\n <p>\n <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n <br />\n <span>{{ references()?.tenderOrLotReference }}</span>\n </p>\n }\n @if (references()?.invoicedObjectIdentifier) {\n <p>\n <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n <br />\n <span>{{ references()?.invoicedObjectIdentifier }}</span>\n </p>\n }\n </div>\n </section>\n @if (deliveryInformation()) {\n <section class=\"invoice-delivery\">\n <h2
|
|
3099
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ReferenceAndDeliveryInformationComponent, isStandalone: true, selector: "ava-reference-and-delivery-information", inputs: { deliveryInformation: { classPropertyName: "deliveryInformation", publicName: "deliveryInformation", isSignal: true, isRequired: false, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n <div class=\"invoice-info\">\n <section class=\"invoice-references\">\n @if (textWords.referencesTopic) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.referencesTopic }}\n </h2>\n }\n <div class=\"invoice-references-details\">\n @if (references()?.buyerReference) {\n <p>\n <strong>{{ textWords.referencesBuyerReference }}: </strong>\n <br />\n <span>{{ references()?.buyerReference }}</span>\n </p>\n }\n @if (references()?.projectReference) {\n <p>\n <strong>{{ textWords.referencesProjectReference }}: </strong>\n <br />\n <span>{{ references()?.projectReference }}</span>\n </p>\n }\n @if (references()?.contractReference) {\n <p>\n <strong>{{ textWords.referencesContractReference }}: </strong>\n <br />\n <span>{{ references()?.contractReference }}</span>\n </p>\n }\n @if (references()?.purchaseOrderReference) {\n <p>\n <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n <br />\n <span>{{ references()?.purchaseOrderReference }}</span>\n </p>\n }\n @if (references()?.salesOrderReference) {\n <p>\n <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n <br />\n <span>{{ references()?.salesOrderReference }}</span>\n </p>\n }\n @if (references()?.receivingAdviceReference) {\n <p>\n <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n <br />\n <span>{{ references()?.receivingAdviceReference }}</span>\n </p>\n }\n @if (references()?.dispatchAdviceReference) {\n <p>\n <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n <br />\n <span> {{ references()?.dispatchAdviceReference }}</span>\n </p>\n }\n @if (references()?.tenderOrLotReference) {\n <p>\n <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n <br />\n <span>{{ references()?.tenderOrLotReference }}</span>\n </p>\n }\n @if (references()?.invoicedObjectIdentifier) {\n <p>\n <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n <br />\n <span>{{ references()?.invoicedObjectIdentifier }}</span>\n </p>\n }\n </div>\n </section>\n @if (deliveryInformation()) {\n <section class=\"invoice-delivery\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.deliveryInformationTitle }}\n </h2>\n\n @if (deliveryInformation()?.deliverToName) {\n <p>\n <strong>{{ textWords.deliverToName }}: </strong>\n <br />\n <span>{{ deliveryInformation()?.deliverToName }}</span>\n </p>\n }\n @if (deliveryInformation()?.deliverToLocationIdentifier) {\n <p>\n <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n <br />\n <span>{{ deliveryInformation()?.deliverToLocationIdentifier }}</span>\n </p>\n }\n @if (deliveryInformation()?.deliveryDate) {\n <p>\n <strong>{{ textWords.deliveryDate }}: </strong>\n <br />\n <span>{{ deliveryInformation()?.deliveryDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (deliveryInformation()?.deliveryAddress) {\n <p>\n <strong>{{ textWords.deliveryAddress }}: </strong>\n <span>\n @if (deliveryInformation()?.deliveryAddress?.address) {\n <p>{{ deliveryInformation()?.deliveryAddress?.address }}</p>\n }\n @if (deliveryInformation()?.deliveryAddress?.city) {\n <span>{{ deliveryInformation()?.deliveryAddress?.city }},</span>\n }\n @if (deliveryInformation()?.deliveryAddress?.zipCode) {\n <span>{{ deliveryInformation()?.deliveryAddress?.zipCode }}</span>\n }\n @if (deliveryInformation()?.deliveryAddress?.countryCode) {\n <p>{{ deliveryInformation()?.deliveryAddress?.countryCode }}</p>\n }\n </span>\n </p>\n }\n </section>\n }\n </div>\n }\n}\n", styles: [".invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.invoice-info{display:grid;grid-template-columns:2fr 1fr;gap:20px}.invoice-references-details{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.invoice-references-details p{margin:0;break-inside:avoid-column}.invoice-delivery{text-align:right}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
3083
3100
|
}
|
|
3084
3101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ReferenceAndDeliveryInformationComponent, decorators: [{
|
|
3085
3102
|
type: Component,
|
|
3086
|
-
args: [{ selector: 'ava-reference-and-delivery-information', imports: [AsyncPipe, DatePipe, NgStyle], template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n <div class=\"invoice-info\">\n <section class=\"invoice-references\">\n @if (textWords.referencesTopic) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.referencesTopic }}\n </h2>\n }\n <div class=\"invoice-references-details\">\n @if (references()?.buyerReference) {\n <p>\n <strong>{{ textWords.referencesBuyerReference }}: </strong>\n <br />\n <span>{{ references()?.buyerReference }}</span>\n </p>\n }\n @if (references()?.projectReference) {\n <p>\n <strong>{{ textWords.referencesProjectReference }}: </strong>\n <br />\n <span>{{ references()?.projectReference }}</span>\n </p>\n }\n @if (references()?.contractReference) {\n <p>\n <strong>{{ textWords.referencesContractReference }}: </strong>\n <br />\n <span>{{ references()?.contractReference }}</span>\n </p>\n }\n @if (references()?.purchaseOrderReference) {\n <p>\n <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n <br />\n <span>{{ references()?.purchaseOrderReference }}</span>\n </p>\n }\n @if (references()?.salesOrderReference) {\n <p>\n <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n <br />\n <span>{{ references()?.salesOrderReference }}</span>\n </p>\n }\n @if (references()?.receivingAdviceReference) {\n <p>\n <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n <br />\n <span>{{ references()?.receivingAdviceReference }}</span>\n </p>\n }\n @if (references()?.dispatchAdviceReference) {\n <p>\n <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n <br />\n <span> {{ references()?.dispatchAdviceReference }}</span>\n </p>\n }\n @if (references()?.tenderOrLotReference) {\n <p>\n <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n <br />\n <span>{{ references()?.tenderOrLotReference }}</span>\n </p>\n }\n @if (references()?.invoicedObjectIdentifier) {\n <p>\n <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n <br />\n <span>{{ references()?.invoicedObjectIdentifier }}</span>\n </p>\n }\n </div>\n </section>\n @if (deliveryInformation()) {\n <section class=\"invoice-delivery\">\n <h2
|
|
3103
|
+
args: [{ selector: 'ava-reference-and-delivery-information', imports: [AsyncPipe, DatePipe, NgStyle], template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n <div class=\"invoice-info\">\n <section class=\"invoice-references\">\n @if (textWords.referencesTopic) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.referencesTopic }}\n </h2>\n }\n <div class=\"invoice-references-details\">\n @if (references()?.buyerReference) {\n <p>\n <strong>{{ textWords.referencesBuyerReference }}: </strong>\n <br />\n <span>{{ references()?.buyerReference }}</span>\n </p>\n }\n @if (references()?.projectReference) {\n <p>\n <strong>{{ textWords.referencesProjectReference }}: </strong>\n <br />\n <span>{{ references()?.projectReference }}</span>\n </p>\n }\n @if (references()?.contractReference) {\n <p>\n <strong>{{ textWords.referencesContractReference }}: </strong>\n <br />\n <span>{{ references()?.contractReference }}</span>\n </p>\n }\n @if (references()?.purchaseOrderReference) {\n <p>\n <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n <br />\n <span>{{ references()?.purchaseOrderReference }}</span>\n </p>\n }\n @if (references()?.salesOrderReference) {\n <p>\n <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n <br />\n <span>{{ references()?.salesOrderReference }}</span>\n </p>\n }\n @if (references()?.receivingAdviceReference) {\n <p>\n <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n <br />\n <span>{{ references()?.receivingAdviceReference }}</span>\n </p>\n }\n @if (references()?.dispatchAdviceReference) {\n <p>\n <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n <br />\n <span> {{ references()?.dispatchAdviceReference }}</span>\n </p>\n }\n @if (references()?.tenderOrLotReference) {\n <p>\n <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n <br />\n <span>{{ references()?.tenderOrLotReference }}</span>\n </p>\n }\n @if (references()?.invoicedObjectIdentifier) {\n <p>\n <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n <br />\n <span>{{ references()?.invoicedObjectIdentifier }}</span>\n </p>\n }\n </div>\n </section>\n @if (deliveryInformation()) {\n <section class=\"invoice-delivery\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.deliveryInformationTitle }}\n </h2>\n\n @if (deliveryInformation()?.deliverToName) {\n <p>\n <strong>{{ textWords.deliverToName }}: </strong>\n <br />\n <span>{{ deliveryInformation()?.deliverToName }}</span>\n </p>\n }\n @if (deliveryInformation()?.deliverToLocationIdentifier) {\n <p>\n <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n <br />\n <span>{{ deliveryInformation()?.deliverToLocationIdentifier }}</span>\n </p>\n }\n @if (deliveryInformation()?.deliveryDate) {\n <p>\n <strong>{{ textWords.deliveryDate }}: </strong>\n <br />\n <span>{{ deliveryInformation()?.deliveryDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (deliveryInformation()?.deliveryAddress) {\n <p>\n <strong>{{ textWords.deliveryAddress }}: </strong>\n <span>\n @if (deliveryInformation()?.deliveryAddress?.address) {\n <p>{{ deliveryInformation()?.deliveryAddress?.address }}</p>\n }\n @if (deliveryInformation()?.deliveryAddress?.city) {\n <span>{{ deliveryInformation()?.deliveryAddress?.city }},</span>\n }\n @if (deliveryInformation()?.deliveryAddress?.zipCode) {\n <span>{{ deliveryInformation()?.deliveryAddress?.zipCode }}</span>\n }\n @if (deliveryInformation()?.deliveryAddress?.countryCode) {\n <p>{{ deliveryInformation()?.deliveryAddress?.countryCode }}</p>\n }\n </span>\n </p>\n }\n </section>\n }\n </div>\n }\n}\n", styles: [".invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.invoice-info{display:grid;grid-template-columns:2fr 1fr;gap:20px}.invoice-references-details{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.invoice-references-details p{margin:0;break-inside:avoid-column}.invoice-delivery{text-align:right}\n"] }]
|
|
3087
3104
|
}] });
|
|
3088
3105
|
|
|
3089
3106
|
registerLocaleData(localeDe, 'de-DE', localeDeExtra);
|
|
@@ -3205,7 +3222,7 @@ class InvoiceDisplayComponent {
|
|
|
3205
3222
|
useFactory: (configurationInvoiceService) => configurationInvoiceService.locale,
|
|
3206
3223
|
deps: [ConfigurationInvoiceService]
|
|
3207
3224
|
}
|
|
3208
|
-
], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n @if (invoice() !== null) {\n <div class=\"invoice-container\">\n <!-- Seller and Buyer Information -->\n <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\n\n <header class=\"invoice-header\">\n <div class=\"buyer-info\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceBuyerTitle }}\n </h2>\n <p>\n <strong>{{ invoice()?.buyer?.name }}</strong>\n </p>\n <p>{{ invoice()?.buyer?.address }}</p>\n <p>{{ invoice()?.buyer?.city }}, {{ invoice()?.buyer?.zipCode }}</p>\n <p>{{ invoice()?.buyer?.countryCode }}</p>\n @if (invoice()?.buyer?.vatId) {\n <p>\n <strong>{{ textWords.vatId }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.vatId }}</span>\n </p>\n }\n <mat-divider></mat-divider>\n @if (invoice()?.buyer?.contactPersonName) {\n <p>\n <strong>{{ textWords.contactPersonName }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.contactPersonName }}</span>\n </p>\n }\n @if (invoice()?.buyer?.contactPersonPhone) {\n <p>\n <strong>{{ textWords.contactPersonPhone }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.contactPersonPhone }}</span>\n </p>\n }\n @if (invoice()?.buyer?.contactPersonEmail) {\n <p>\n <strong>{{ textWords.contactPersonEmail }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.contactPersonEmail }}</span>\n </p>\n }\n </div>\n <div class=\"invoice-details\">\n @if (invoice()?.invoiceNumber) {\n <p>\n <strong>{{ textWords.detailsInvoiceNumber }}: </strong>\n <span>{{ invoice()?.invoiceNumber }}</span>\n </p>\n }\n @if (invoice()?.invoiceDate) {\n <p>\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>{{ invoice()?.invoiceDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.paymentDueDate) {\n <p>\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>{{ invoice()?.paymentDueDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.currencyCode) {\n <p>\n <strong>{{ textWords.detailsCurrencyCode }}: </strong>\n <span>{{ invoice()?.currencyCode }}</span>\n </p>\n }\n @if (invoice()?.paymentTerms) {\n <p>\n <strong>{{ textWords.detailsPaymentTerms }}: </strong>\n <span>{{ invoice()?.paymentTerms }}</span>\n </p>\n }\n </div>\n <div class=\"seller-info\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceSellerTitle }}\n </h2>\n <p>\n <strong>{{ invoice()?.seller?.name }}</strong>\n </p>\n <p>{{ invoice()?.seller?.address }}</p>\n <p>{{ invoice()?.seller?.city }}, {{ invoice()?.seller?.zipCode }}</p>\n <p>{{ invoice()?.seller?.countryCode }}</p>\n @if (invoice()?.seller?.vatId) {\n <p>\n <strong>{{ textWords.vatId }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.vatId }}</span>\n </p>\n }\n <mat-divider></mat-divider>\n @if (invoice()?.seller?.contactPersonName) {\n <p>\n <strong>{{ textWords.contactPersonName }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.contactPersonName }}</span>\n </p>\n }\n @if (invoice()?.seller?.contactPersonPhone) {\n <p>\n <strong>{{ textWords.contactPersonPhone }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.contactPersonPhone }}</span>\n </p>\n }\n @if (invoice()?.seller?.contactPersonEmail) {\n <p>\n <strong>{{ textWords.contactPersonEmail }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.contactPersonEmail }}</span>\n </p>\n }\n </div>\n </header>\n <mat-divider></mat-divider>\n\n <ava-reference-and-delivery-information\n [deliveryInformation]=\"invoice()?.deliveryInformation || null\"\n [references]=\"invoice()?.references || null\"\n ></ava-reference-and-delivery-information>\n <ava-invoice-line-items-table [lineItems]=\"invoice()?.lineItems || []\"></ava-invoice-line-items-table>\n\n <div class=\"addition-info\">\n <section class=\"taxes-and-allowances\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.taxesHeading }}\n </h2>\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.vat }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalNet }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalVatAmount }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (tax of invoice()?.vatBreakdown; track tax.taxRate) {\n @if (tax.vatExemptionReasonText || tax.vatExemptionReasonCode) {\n <tr>\n <td colspan=\"3\">\n <span>{{ tax.vatExemptionReasonText }} / {{ tax.vatExemptionReasonCode }}</span>\n </td>\n </tr>\n }\n\n <tr>\n <td class=\"currency-table-cell\">\n @if (tax.taxRate != null) {\n <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.netTaxableAmount != null) {\n <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.vatAmount != null) {\n <span>{{ tax.vatAmount | currencyPlus }}</span>\n }\n </td>\n </tr>\n }\n </tbody>\n </table>\n\n @if (invoice()?.allowances && (invoice()?.allowances?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceAllowancesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderAllowance }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (allowance of invoice()?.allowances; track allowance) {\n <tr>\n <td colspan=\"4\">\n @if (allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reason }} / {{ allowance.reasonCode }}</span>\n }\n @if (allowance.reason && !allowance.reasonCode) {\n <span>{{ allowance.reason }}</span>\n }\n\n @if (!allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowancePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowanceBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n\n @if (invoice()?.charges && (invoice()?.charges?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceChargesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderCharge }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (charge of invoice()?.charges; track charge) {\n <tr>\n <td colspan=\"4\">\n @if (charge.reason && charge.reasonCode) {\n <span>{{ charge.reason }} / {{ charge.reasonCode }}</span>\n }\n @if (charge.reason && !charge.reasonCode) {\n <span>{{ charge.reason }}</span>\n }\n\n @if (!charge.reason && charge.reasonCode) {\n <span>{{ charge.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargeBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n </section>\n\n <section class=\"payment-instructions\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.instructionsTopic }}\n </h2>\n @if (invoice()?.paymentInstructions?.description) {\n <p>{{ invoice()?.paymentInstructions?.description }}</p>\n }\n @for (means of invoice()?.paymentInstructions?.paymentMeans; track means) {\n <div>\n @if (means.accountIdentifier) {\n <p>\n <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n <br />\n <span>{{ means.accountIdentifier }}</span>\n </p>\n }\n @if (means.accountName) {\n <p>\n <strong>{{ textWords.instructionsAccountName }}: </strong>\n <br />\n <span>{{ means.accountName }}</span>\n </p>\n }\n @if (means.serviceProviderIdentifier) {\n <p>\n <strong>{{ textWords.instructionsServiceProviderIdentifier }}: </strong>\n <br />\n <span>{{ means.serviceProviderIdentifier }}</span>\n </p>\n }\n </div>\n }\n </section>\n\n <section class=\"invoice-totals\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.totalsTopic }}\n </h2>\n\n @if (invoice()?.totals?.totalNet) {\n <p>\n <strong>{{ textWords.totalsTotalNet }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalNet | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAllowances) {\n <p>\n <strong>{{ textWords.totalsTotalAllowances }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalAllowances | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalCharges) {\n <p>\n <strong>{{ textWords.totalsTotalCharges }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalCharges | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAfterDeductions) {\n <p>\n <strong>{{ textWords.totalsTotalAfterDeductions }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalAfterDeductions | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalVatAmount) {\n <p>\n <strong>{{ textWords.totalsTotalVatAmount }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalVatAmount | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalGross) {\n <p>\n <strong>{{ textWords.totalsTotalGross }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalGross | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.alreadyPaidTotal) {\n <p>\n <strong>{{ textWords.totalsAlreadyPaidTotal }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.alreadyPaidTotal | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalToBePaid) {\n <p\n class=\"total\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n <br />\n <strong> {{ invoice()?.totals?.totalToBePaid | currencyPlus }}</strong>\n </p>\n }\n </section>\n </div>\n @if (invoice()?.invoiceNotes?.length) {\n <section class=\"invoice-notes\">\n <h2>{{ textWords.notesTopic }}</h2>\n @for (note of invoice()?.invoiceNotes; track note) {\n <div>\n @if (note?.shortText) {\n <p>\n <strong>{{ note?.shortText }}</strong>\n </p>\n }\n @if (note?.longText) {\n <p>{{ note?.longText }}</p>\n }\n </div>\n }\n </section>\n }\n @if (invoice()?.documents?.length) {\n <section class=\"invoice-attachments\">\n <ava-invoice-documents [documents]=\"invoice()?.documents || []\"></ava-invoice-documents>\n </section>\n }\n </div>\n } @else if (invoice() === null && (pdfViewEnabled$ | async)) {\n <div class=\"error-container\">\n <div class=\"error-message\">\n <mat-icon>error_outline</mat-icon>\n <h2>Oops! Something went wrong.</h2>\n <p>We couldn't retrieve the invoice data. Please try again later.</p>\n </div>\n </div>\n } @else {\n <div></div>\n }\n }\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.seller-info,.payment-instructions,.invoice-totals{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes-and-allowances,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}.center{text-align:center!important}.error-container{display:flex;justify-content:center;align-items:center;height:100vh}.error-message{text-align:center;background-color:#fff3f3;border:1px solid #d32f2f;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a;color:#d32f2f;max-width:400px;width:100%}.error-message h2{font-size:1.5em;margin:0 0 10px;font-weight:700}.error-message p{font-size:1em;margin-top:0;color:#555}\n"], dependencies: [{ kind: "pipe", type: PercentPlusPipe, name: "percentPlus" }, { kind: "pipe", type: CurrencyPlusPipe, name: "currencyPlus" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: InvoiceDocumentsComponent, selector: "ava-invoice-documents", inputs: ["documents"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InvoiceLineItemsTableComponent, selector: "ava-invoice-line-items-table", inputs: ["lineItems"] }, { kind: "component", type: ReferenceAndDeliveryInformationComponent, selector: "ava-reference-and-delivery-information", inputs: ["deliveryInformation", "references"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3225
|
+
], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n @if (invoice() !== null) {\n <div class=\"invoice-container\">\n <!-- Seller and Buyer Information -->\n <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\n\n <header class=\"invoice-header\">\n <div class=\"buyer-info\">\n <ava-organization-info [organizationInfo]=\"invoice()?.buyer || null\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceBuyerTitle }}\n </h2>\n </ava-organization-info>\n </div>\n <div class=\"invoice-details\">\n @if (invoice()?.invoiceNumber) {\n <p>\n <strong>{{ textWords.detailsInvoiceNumber }}: </strong>\n <span>{{ invoice()?.invoiceNumber }}</span>\n </p>\n }\n @if (invoice()?.invoiceDate) {\n <p>\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>{{ invoice()?.invoiceDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.paymentDueDate) {\n <p>\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>{{ invoice()?.paymentDueDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.currencyCode) {\n <p>\n <strong>{{ textWords.detailsCurrencyCode }}: </strong>\n <span>{{ invoice()?.currencyCode }}</span>\n </p>\n }\n @if (invoice()?.paymentTerms) {\n <p>\n <strong>{{ textWords.detailsPaymentTerms }}: </strong>\n <span>{{ invoice()?.paymentTerms }}</span>\n </p>\n }\n </div>\n\n <div class=\"seller-tax-representive\">\n <ava-organization-info [organizationInfo]=\"invoice()?.sellerTaxRepresentative || null\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceSellerTaxRepresentativeTitle }}\n </h2>\n </ava-organization-info>\n </div>\n <div class=\"seller-info\">\n <ava-organization-info [organizationInfo]=\"invoice()?.seller || null\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceSellerTitle }}\n </h2>\n </ava-organization-info>\n </div>\n </header>\n <mat-divider></mat-divider>\n\n <ava-reference-and-delivery-information\n [deliveryInformation]=\"invoice()?.deliveryInformation || null\"\n [references]=\"invoice()?.references || null\"\n ></ava-reference-and-delivery-information>\n <ava-invoice-line-items-table [lineItems]=\"invoice()?.lineItems || []\"></ava-invoice-line-items-table>\n\n <div class=\"addition-info\">\n <section class=\"taxes-and-allowances\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.taxesHeading }}\n </h2>\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.vat }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalNet }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalVatAmount }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (tax of invoice()?.vatBreakdown; track tax.taxRate) {\n @if (tax.vatExemptionReasonText || tax.vatExemptionReasonCode) {\n <tr>\n <td colspan=\"3\">\n <span>{{ tax.vatExemptionReasonText }} / {{ tax.vatExemptionReasonCode }}</span>\n </td>\n </tr>\n }\n\n <tr>\n <td class=\"currency-table-cell\">\n @if (tax.taxRate != null) {\n <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.netTaxableAmount != null) {\n <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.vatAmount != null) {\n <span>{{ tax.vatAmount | currencyPlus }}</span>\n }\n </td>\n </tr>\n }\n </tbody>\n </table>\n\n @if (invoice()?.allowances && (invoice()?.allowances?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceAllowancesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderAllowance }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (allowance of invoice()?.allowances; track allowance) {\n <tr>\n <td colspan=\"4\">\n @if (allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reason }} / {{ allowance.reasonCode }}</span>\n }\n @if (allowance.reason && !allowance.reasonCode) {\n <span>{{ allowance.reason }}</span>\n }\n\n @if (!allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowancePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowanceBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n\n @if (invoice()?.charges && (invoice()?.charges?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceChargesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderCharge }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (charge of invoice()?.charges; track charge) {\n <tr>\n <td colspan=\"4\">\n @if (charge.reason && charge.reasonCode) {\n <span>{{ charge.reason }} / {{ charge.reasonCode }}</span>\n }\n @if (charge.reason && !charge.reasonCode) {\n <span>{{ charge.reason }}</span>\n }\n\n @if (!charge.reason && charge.reasonCode) {\n <span>{{ charge.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargeBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n </section>\n\n <section class=\"payment-instructions\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.instructionsTopic }}\n </h2>\n @if (invoice()?.paymentInstructions?.description) {\n <p>{{ invoice()?.paymentInstructions?.description }}</p>\n }\n @for (means of invoice()?.paymentInstructions?.paymentMeans; track means) {\n <div>\n @if (means.accountIdentifier) {\n <p>\n <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n <br />\n <span>{{ means.accountIdentifier }}</span>\n </p>\n }\n @if (means.accountName) {\n <p>\n <strong>{{ textWords.instructionsAccountName }}: </strong>\n <br />\n <span>{{ means.accountName }}</span>\n </p>\n }\n @if (means.serviceProviderIdentifier) {\n <p>\n <strong>{{ textWords.instructionsServiceProviderIdentifier }}: </strong>\n <br />\n <span>{{ means.serviceProviderIdentifier }}</span>\n </p>\n }\n </div>\n }\n </section>\n\n <section class=\"invoice-totals\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.totalsTopic }}\n </h2>\n\n @if (invoice()?.totals?.totalNet) {\n <p>\n <strong>{{ textWords.totalsTotalNet }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalNet | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAllowances) {\n <p>\n <strong>{{ textWords.totalsTotalAllowances }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalAllowances | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalCharges) {\n <p>\n <strong>{{ textWords.totalsTotalCharges }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalCharges | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAfterDeductions) {\n <p>\n <strong>{{ textWords.totalsTotalAfterDeductions }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalAfterDeductions | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalVatAmount) {\n <p>\n <strong>{{ textWords.totalsTotalVatAmount }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalVatAmount | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalGross) {\n <p>\n <strong>{{ textWords.totalsTotalGross }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalGross | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.alreadyPaidTotal) {\n <p>\n <strong>{{ textWords.totalsAlreadyPaidTotal }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.alreadyPaidTotal | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalToBePaid) {\n <p\n class=\"total\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n <br />\n <strong> {{ invoice()?.totals?.totalToBePaid | currencyPlus }}</strong>\n </p>\n }\n </section>\n </div>\n @if (invoice()?.invoiceNotes?.length) {\n <section class=\"invoice-notes\">\n <h2>{{ textWords.notesTopic }}</h2>\n @for (note of invoice()?.invoiceNotes; track note) {\n <div>\n @if (note?.shortText) {\n <p>\n <strong>{{ note?.shortText }}</strong>\n </p>\n }\n @if (note?.longText) {\n <p>{{ note?.longText }}</p>\n }\n </div>\n }\n </section>\n }\n @if (invoice()?.documents?.length) {\n <section class=\"invoice-attachments\">\n <ava-invoice-documents [documents]=\"invoice()?.documents || []\"></ava-invoice-documents>\n </section>\n }\n </div>\n } @else if (invoice() === null && (pdfViewEnabled$ | async)) {\n <div class=\"error-container\">\n <div class=\"error-message\">\n <mat-icon>error_outline</mat-icon>\n <h2>Oops! Something went wrong.</h2>\n <p>We couldn't retrieve the invoice data. Please try again later.</p>\n </div>\n </div>\n } @else {\n <div></div>\n }\n }\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px;gap:10px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details .seller-tax-representive{width:25%}.seller-info,.payment-instructions,.invoice-totals{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes-and-allowances,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}.center{text-align:center!important}.error-container{display:flex;justify-content:center;align-items:center;height:100vh}.error-message{text-align:center;background-color:#fff3f3;border:1px solid #d32f2f;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a;color:#d32f2f;max-width:400px;width:100%}.error-message h2{font-size:1.5em;margin:0 0 10px;font-weight:700}.error-message p{font-size:1em;margin-top:0;color:#555}\n"], dependencies: [{ kind: "pipe", type: PercentPlusPipe, name: "percentPlus" }, { kind: "pipe", type: CurrencyPlusPipe, name: "currencyPlus" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: InvoiceDocumentsComponent, selector: "ava-invoice-documents", inputs: ["documents"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InvoiceLineItemsTableComponent, selector: "ava-invoice-line-items-table", inputs: ["lineItems"] }, { kind: "component", type: ReferenceAndDeliveryInformationComponent, selector: "ava-reference-and-delivery-information", inputs: ["deliveryInformation", "references"] }, { kind: "component", type: OrganizationInfoComponent, selector: "ava-organization-info", inputs: ["organizationInfo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3209
3226
|
}
|
|
3210
3227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InvoiceDisplayComponent, decorators: [{
|
|
3211
3228
|
type: Component,
|
|
@@ -3219,7 +3236,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
3219
3236
|
MatIconModule,
|
|
3220
3237
|
NgStyle,
|
|
3221
3238
|
InvoiceLineItemsTableComponent,
|
|
3222
|
-
ReferenceAndDeliveryInformationComponent
|
|
3239
|
+
ReferenceAndDeliveryInformationComponent,
|
|
3240
|
+
OrganizationInfoComponent
|
|
3223
3241
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
3224
3242
|
ConfigurationInvoiceService,
|
|
3225
3243
|
CurrencyPipe,
|
|
@@ -3230,7 +3248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
3230
3248
|
useFactory: (configurationInvoiceService) => configurationInvoiceService.locale,
|
|
3231
3249
|
deps: [ConfigurationInvoiceService]
|
|
3232
3250
|
}
|
|
3233
|
-
], template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n @if (invoice() !== null) {\n <div class=\"invoice-container\">\n <!-- Seller and Buyer Information -->\n <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\n\n <header class=\"invoice-header\">\n <div class=\"buyer-info\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceBuyerTitle }}\n </h2>\n <p>\n <strong>{{ invoice()?.buyer?.name }}</strong>\n </p>\n <p>{{ invoice()?.buyer?.address }}</p>\n <p>{{ invoice()?.buyer?.city }}, {{ invoice()?.buyer?.zipCode }}</p>\n <p>{{ invoice()?.buyer?.countryCode }}</p>\n @if (invoice()?.buyer?.vatId) {\n <p>\n <strong>{{ textWords.vatId }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.vatId }}</span>\n </p>\n }\n <mat-divider></mat-divider>\n @if (invoice()?.buyer?.contactPersonName) {\n <p>\n <strong>{{ textWords.contactPersonName }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.contactPersonName }}</span>\n </p>\n }\n @if (invoice()?.buyer?.contactPersonPhone) {\n <p>\n <strong>{{ textWords.contactPersonPhone }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.contactPersonPhone }}</span>\n </p>\n }\n @if (invoice()?.buyer?.contactPersonEmail) {\n <p>\n <strong>{{ textWords.contactPersonEmail }}: </strong>\n <br />\n <span>{{ invoice()?.buyer?.contactPersonEmail }}</span>\n </p>\n }\n </div>\n <div class=\"invoice-details\">\n @if (invoice()?.invoiceNumber) {\n <p>\n <strong>{{ textWords.detailsInvoiceNumber }}: </strong>\n <span>{{ invoice()?.invoiceNumber }}</span>\n </p>\n }\n @if (invoice()?.invoiceDate) {\n <p>\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>{{ invoice()?.invoiceDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.paymentDueDate) {\n <p>\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>{{ invoice()?.paymentDueDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.currencyCode) {\n <p>\n <strong>{{ textWords.detailsCurrencyCode }}: </strong>\n <span>{{ invoice()?.currencyCode }}</span>\n </p>\n }\n @if (invoice()?.paymentTerms) {\n <p>\n <strong>{{ textWords.detailsPaymentTerms }}: </strong>\n <span>{{ invoice()?.paymentTerms }}</span>\n </p>\n }\n </div>\n <div class=\"seller-info\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceSellerTitle }}\n </h2>\n <p>\n <strong>{{ invoice()?.seller?.name }}</strong>\n </p>\n <p>{{ invoice()?.seller?.address }}</p>\n <p>{{ invoice()?.seller?.city }}, {{ invoice()?.seller?.zipCode }}</p>\n <p>{{ invoice()?.seller?.countryCode }}</p>\n @if (invoice()?.seller?.vatId) {\n <p>\n <strong>{{ textWords.vatId }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.vatId }}</span>\n </p>\n }\n <mat-divider></mat-divider>\n @if (invoice()?.seller?.contactPersonName) {\n <p>\n <strong>{{ textWords.contactPersonName }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.contactPersonName }}</span>\n </p>\n }\n @if (invoice()?.seller?.contactPersonPhone) {\n <p>\n <strong>{{ textWords.contactPersonPhone }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.contactPersonPhone }}</span>\n </p>\n }\n @if (invoice()?.seller?.contactPersonEmail) {\n <p>\n <strong>{{ textWords.contactPersonEmail }}: </strong>\n <br />\n <span>{{ invoice()?.seller?.contactPersonEmail }}</span>\n </p>\n }\n </div>\n </header>\n <mat-divider></mat-divider>\n\n <ava-reference-and-delivery-information\n [deliveryInformation]=\"invoice()?.deliveryInformation || null\"\n [references]=\"invoice()?.references || null\"\n ></ava-reference-and-delivery-information>\n <ava-invoice-line-items-table [lineItems]=\"invoice()?.lineItems || []\"></ava-invoice-line-items-table>\n\n <div class=\"addition-info\">\n <section class=\"taxes-and-allowances\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.taxesHeading }}\n </h2>\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.vat }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalNet }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalVatAmount }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (tax of invoice()?.vatBreakdown; track tax.taxRate) {\n @if (tax.vatExemptionReasonText || tax.vatExemptionReasonCode) {\n <tr>\n <td colspan=\"3\">\n <span>{{ tax.vatExemptionReasonText }} / {{ tax.vatExemptionReasonCode }}</span>\n </td>\n </tr>\n }\n\n <tr>\n <td class=\"currency-table-cell\">\n @if (tax.taxRate != null) {\n <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.netTaxableAmount != null) {\n <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.vatAmount != null) {\n <span>{{ tax.vatAmount | currencyPlus }}</span>\n }\n </td>\n </tr>\n }\n </tbody>\n </table>\n\n @if (invoice()?.allowances && (invoice()?.allowances?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceAllowancesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderAllowance }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (allowance of invoice()?.allowances; track allowance) {\n <tr>\n <td colspan=\"4\">\n @if (allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reason }} / {{ allowance.reasonCode }}</span>\n }\n @if (allowance.reason && !allowance.reasonCode) {\n <span>{{ allowance.reason }}</span>\n }\n\n @if (!allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowancePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowanceBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n\n @if (invoice()?.charges && (invoice()?.charges?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceChargesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderCharge }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (charge of invoice()?.charges; track charge) {\n <tr>\n <td colspan=\"4\">\n @if (charge.reason && charge.reasonCode) {\n <span>{{ charge.reason }} / {{ charge.reasonCode }}</span>\n }\n @if (charge.reason && !charge.reasonCode) {\n <span>{{ charge.reason }}</span>\n }\n\n @if (!charge.reason && charge.reasonCode) {\n <span>{{ charge.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargeBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n </section>\n\n <section class=\"payment-instructions\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.instructionsTopic }}\n </h2>\n @if (invoice()?.paymentInstructions?.description) {\n <p>{{ invoice()?.paymentInstructions?.description }}</p>\n }\n @for (means of invoice()?.paymentInstructions?.paymentMeans; track means) {\n <div>\n @if (means.accountIdentifier) {\n <p>\n <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n <br />\n <span>{{ means.accountIdentifier }}</span>\n </p>\n }\n @if (means.accountName) {\n <p>\n <strong>{{ textWords.instructionsAccountName }}: </strong>\n <br />\n <span>{{ means.accountName }}</span>\n </p>\n }\n @if (means.serviceProviderIdentifier) {\n <p>\n <strong>{{ textWords.instructionsServiceProviderIdentifier }}: </strong>\n <br />\n <span>{{ means.serviceProviderIdentifier }}</span>\n </p>\n }\n </div>\n }\n </section>\n\n <section class=\"invoice-totals\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.totalsTopic }}\n </h2>\n\n @if (invoice()?.totals?.totalNet) {\n <p>\n <strong>{{ textWords.totalsTotalNet }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalNet | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAllowances) {\n <p>\n <strong>{{ textWords.totalsTotalAllowances }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalAllowances | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalCharges) {\n <p>\n <strong>{{ textWords.totalsTotalCharges }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalCharges | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAfterDeductions) {\n <p>\n <strong>{{ textWords.totalsTotalAfterDeductions }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalAfterDeductions | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalVatAmount) {\n <p>\n <strong>{{ textWords.totalsTotalVatAmount }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalVatAmount | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalGross) {\n <p>\n <strong>{{ textWords.totalsTotalGross }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalGross | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.alreadyPaidTotal) {\n <p>\n <strong>{{ textWords.totalsAlreadyPaidTotal }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.alreadyPaidTotal | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalToBePaid) {\n <p\n class=\"total\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n <br />\n <strong> {{ invoice()?.totals?.totalToBePaid | currencyPlus }}</strong>\n </p>\n }\n </section>\n </div>\n @if (invoice()?.invoiceNotes?.length) {\n <section class=\"invoice-notes\">\n <h2>{{ textWords.notesTopic }}</h2>\n @for (note of invoice()?.invoiceNotes; track note) {\n <div>\n @if (note?.shortText) {\n <p>\n <strong>{{ note?.shortText }}</strong>\n </p>\n }\n @if (note?.longText) {\n <p>{{ note?.longText }}</p>\n }\n </div>\n }\n </section>\n }\n @if (invoice()?.documents?.length) {\n <section class=\"invoice-attachments\">\n <ava-invoice-documents [documents]=\"invoice()?.documents || []\"></ava-invoice-documents>\n </section>\n }\n </div>\n } @else if (invoice() === null && (pdfViewEnabled$ | async)) {\n <div class=\"error-container\">\n <div class=\"error-message\">\n <mat-icon>error_outline</mat-icon>\n <h2>Oops! Something went wrong.</h2>\n <p>We couldn't retrieve the invoice data. Please try again later.</p>\n </div>\n </div>\n } @else {\n <div></div>\n }\n }\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.seller-info,.payment-instructions,.invoice-totals{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes-and-allowances,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}.center{text-align:center!important}.error-container{display:flex;justify-content:center;align-items:center;height:100vh}.error-message{text-align:center;background-color:#fff3f3;border:1px solid #d32f2f;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a;color:#d32f2f;max-width:400px;width:100%}.error-message h2{font-size:1.5em;margin:0 0 10px;font-weight:700}.error-message p{font-size:1em;margin-top:0;color:#555}\n"] }]
|
|
3251
|
+
], template: "@if (textWords$ | async; as textWords) {\n @if ((colorSettings$ | async) || true; as colorSettings) {\n @if (invoice() !== null) {\n <div class=\"invoice-container\">\n <!-- Seller and Buyer Information -->\n <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\n\n <header class=\"invoice-header\">\n <div class=\"buyer-info\">\n <ava-organization-info [organizationInfo]=\"invoice()?.buyer || null\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceBuyerTitle }}\n </h2>\n </ava-organization-info>\n </div>\n <div class=\"invoice-details\">\n @if (invoice()?.invoiceNumber) {\n <p>\n <strong>{{ textWords.detailsInvoiceNumber }}: </strong>\n <span>{{ invoice()?.invoiceNumber }}</span>\n </p>\n }\n @if (invoice()?.invoiceDate) {\n <p>\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>{{ invoice()?.invoiceDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.paymentDueDate) {\n <p>\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>{{ invoice()?.paymentDueDate | date: 'shortDate' }}</span>\n </p>\n }\n @if (invoice()?.currencyCode) {\n <p>\n <strong>{{ textWords.detailsCurrencyCode }}: </strong>\n <span>{{ invoice()?.currencyCode }}</span>\n </p>\n }\n @if (invoice()?.paymentTerms) {\n <p>\n <strong>{{ textWords.detailsPaymentTerms }}: </strong>\n <span>{{ invoice()?.paymentTerms }}</span>\n </p>\n }\n </div>\n\n <div class=\"seller-tax-representive\">\n <ava-organization-info [organizationInfo]=\"invoice()?.sellerTaxRepresentative || null\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceSellerTaxRepresentativeTitle }}\n </h2>\n </ava-organization-info>\n </div>\n <div class=\"seller-info\">\n <ava-organization-info [organizationInfo]=\"invoice()?.seller || null\">\n <h2\n class=\"header-title\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceSellerTitle }}\n </h2>\n </ava-organization-info>\n </div>\n </header>\n <mat-divider></mat-divider>\n\n <ava-reference-and-delivery-information\n [deliveryInformation]=\"invoice()?.deliveryInformation || null\"\n [references]=\"invoice()?.references || null\"\n ></ava-reference-and-delivery-information>\n <ava-invoice-line-items-table [lineItems]=\"invoice()?.lineItems || []\"></ava-invoice-line-items-table>\n\n <div class=\"addition-info\">\n <section class=\"taxes-and-allowances\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.taxesHeading }}\n </h2>\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.vat }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalNet }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.totalsTotalVatAmount }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (tax of invoice()?.vatBreakdown; track tax.taxRate) {\n @if (tax.vatExemptionReasonText || tax.vatExemptionReasonCode) {\n <tr>\n <td colspan=\"3\">\n <span>{{ tax.vatExemptionReasonText }} / {{ tax.vatExemptionReasonCode }}</span>\n </td>\n </tr>\n }\n\n <tr>\n <td class=\"currency-table-cell\">\n @if (tax.taxRate != null) {\n <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.netTaxableAmount != null) {\n <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n }\n </td>\n <td class=\"currency-table-cell\">\n @if (tax.vatAmount != null) {\n <span>{{ tax.vatAmount | currencyPlus }}</span>\n }\n </td>\n </tr>\n }\n </tbody>\n </table>\n\n @if (invoice()?.allowances && (invoice()?.allowances?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceAllowancesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderAllowance }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceAllowancesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (allowance of invoice()?.allowances; track allowance) {\n <tr>\n <td colspan=\"4\">\n @if (allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reason }} / {{ allowance.reasonCode }}</span>\n }\n @if (allowance.reason && !allowance.reasonCode) {\n <span>{{ allowance.reason }}</span>\n }\n\n @if (!allowance.reason && allowance.reasonCode) {\n <span>{{ allowance.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowancePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ allowance.relativeAllowanceBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n\n @if (invoice()?.charges && (invoice()?.charges?.length || 0) > 0) {\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.invoiceChargesHeader }}\n </h2>\n\n <table class=\"tax-report-table\">\n <thead>\n <tr>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderSum }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderVatRate }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderCharge }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.invoiceChargesTableHeaderBase }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (charge of invoice()?.charges; track charge) {\n <tr>\n <td colspan=\"4\">\n @if (charge.reason && charge.reasonCode) {\n <span>{{ charge.reason }} / {{ charge.reasonCode }}</span>\n }\n @if (charge.reason && !charge.reasonCode) {\n <span>{{ charge.reason }}</span>\n }\n\n @if (!charge.reason && charge.reasonCode) {\n <span>{{ charge.reasonCode }}</span>\n }\n </td>\n </tr>\n <tr>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.netAmount | currencyPlus }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.vatRate | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargePercentage | percentPlus: '1.0-2' }}\n </span>\n </td>\n <td class=\"currency-table-cell\">\n <span>\n {{ charge.relativeChargeBaseAmount | currencyPlus }}\n </span>\n </td>\n </tr>\n }\n </tbody>\n </table>\n }\n </section>\n\n <section class=\"payment-instructions\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.instructionsTopic }}\n </h2>\n @if (invoice()?.paymentInstructions?.description) {\n <p>{{ invoice()?.paymentInstructions?.description }}</p>\n }\n @for (means of invoice()?.paymentInstructions?.paymentMeans; track means) {\n <div>\n @if (means.accountIdentifier) {\n <p>\n <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n <br />\n <span>{{ means.accountIdentifier }}</span>\n </p>\n }\n @if (means.accountName) {\n <p>\n <strong>{{ textWords.instructionsAccountName }}: </strong>\n <br />\n <span>{{ means.accountName }}</span>\n </p>\n }\n @if (means.serviceProviderIdentifier) {\n <p>\n <strong>{{ textWords.instructionsServiceProviderIdentifier }}: </strong>\n <br />\n <span>{{ means.serviceProviderIdentifier }}</span>\n </p>\n }\n </div>\n }\n </section>\n\n <section class=\"invoice-totals\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.totalsTopic }}\n </h2>\n\n @if (invoice()?.totals?.totalNet) {\n <p>\n <strong>{{ textWords.totalsTotalNet }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalNet | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAllowances) {\n <p>\n <strong>{{ textWords.totalsTotalAllowances }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalAllowances | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalCharges) {\n <p>\n <strong>{{ textWords.totalsTotalCharges }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalCharges | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalAfterDeductions) {\n <p>\n <strong>{{ textWords.totalsTotalAfterDeductions }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalAfterDeductions | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalVatAmount) {\n <p>\n <strong>{{ textWords.totalsTotalVatAmount }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.totalVatAmount | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalGross) {\n <p>\n <strong>{{ textWords.totalsTotalGross }}: </strong>\n <br />\n <span> {{ invoice()?.totals?.totalGross | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.alreadyPaidTotal) {\n <p>\n <strong>{{ textWords.totalsAlreadyPaidTotal }}: </strong>\n <br />\n <span>{{ invoice()?.totals?.alreadyPaidTotal | currencyPlus }}</span>\n </p>\n }\n @if (invoice()?.totals?.totalToBePaid) {\n <p\n class=\"total\"\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n <br />\n <strong> {{ invoice()?.totals?.totalToBePaid | currencyPlus }}</strong>\n </p>\n }\n </section>\n </div>\n @if (invoice()?.invoiceNotes?.length) {\n <section class=\"invoice-notes\">\n <h2>{{ textWords.notesTopic }}</h2>\n @for (note of invoice()?.invoiceNotes; track note) {\n <div>\n @if (note?.shortText) {\n <p>\n <strong>{{ note?.shortText }}</strong>\n </p>\n }\n @if (note?.longText) {\n <p>{{ note?.longText }}</p>\n }\n </div>\n }\n </section>\n }\n @if (invoice()?.documents?.length) {\n <section class=\"invoice-attachments\">\n <ava-invoice-documents [documents]=\"invoice()?.documents || []\"></ava-invoice-documents>\n </section>\n }\n </div>\n } @else if (invoice() === null && (pdfViewEnabled$ | async)) {\n <div class=\"error-container\">\n <div class=\"error-message\">\n <mat-icon>error_outline</mat-icon>\n <h2>Oops! Something went wrong.</h2>\n <p>We couldn't retrieve the invoice data. Please try again later.</p>\n </div>\n </div>\n } @else {\n <div></div>\n }\n }\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px;gap:10px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details .seller-tax-representive{width:25%}.seller-info,.payment-instructions,.invoice-totals{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes-and-allowances,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}.center{text-align:center!important}.error-container{display:flex;justify-content:center;align-items:center;height:100vh}.error-message{text-align:center;background-color:#fff3f3;border:1px solid #d32f2f;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a;color:#d32f2f;max-width:400px;width:100%}.error-message h2{font-size:1.5em;margin:0 0 10px;font-weight:700}.error-message p{font-size:1em;margin-top:0;color:#555}\n"] }]
|
|
3234
3252
|
}], ctorParameters: () => [{ type: ConfigurationInvoiceService }] });
|
|
3235
3253
|
|
|
3236
3254
|
/*
|