@dangl/angular-ava 1.5.0 → 1.5.1-beta0002
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.
|
@@ -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.5.
|
|
248
|
-
commitInfo: "Branch.
|
|
249
|
-
commitDate: "2025-11-
|
|
250
|
-
commitHash: "
|
|
251
|
-
informationalVersion: "1.5.
|
|
252
|
-
buildDateUtc: new Date(Date.UTC(2025, 10,
|
|
247
|
+
version: "1.5.1-beta0002",
|
|
248
|
+
commitInfo: "Branch.develop.Sha.d2c21fd57dd02d94647fd444799bf2236a0c4a7b",
|
|
249
|
+
commitDate: "2025-11-17",
|
|
250
|
+
commitHash: "d2c21fd57dd02d94647fd444799bf2236a0c4a7b",
|
|
251
|
+
informationalVersion: "1.5.1-beta.2+Branch.develop.Sha.d2c21fd57dd02d94647fd444799bf2236a0c4a7b",
|
|
252
|
+
buildDateUtc: new Date(Date.UTC(2025, 10, 17, 14, 45, 27))
|
|
253
253
|
};
|
|
254
254
|
|
|
255
255
|
class TreeHoverTooltipService {
|
|
@@ -3276,7 +3276,7 @@ class InvoiceDisplayComponent {
|
|
|
3276
3276
|
useFactory: (configurationInvoiceService) => configurationInvoiceService.locale,
|
|
3277
3277
|
deps: [ConfigurationInvoiceService]
|
|
3278
3278
|
}
|
|
3279
|
-
], 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\">{{ 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 <div class=\"invoice-date\">\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.invoiceDate | date: 'dd.MM.yyyy')\n : (invoice()?.invoiceDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\n }\n @if (invoice()?.paymentDueDate) {\n <div class=\"invoice-date\">\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.paymentDueDate | date: 'dd.MM.yyyy')\n : (invoice()?.paymentDueDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\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()?.previousInvoices && invoice()?.previousInvoices?.length) {\n <section class=\"previous-invoices\">\n <h2 class=\"info-title\">{{ textWords.previousInvoicesTopic }}</h2>\n\n <table class=\"previous-invoices-table\">\n <thead>\n <tr>\n <th>{{ textWords.previousInvoiceNumber }}</th>\n <th>{{ textWords.previousInvoiceDate }}</th>\n </tr>\n </thead>\n <tbody>\n @for (prevInvoice of invoice()?.previousInvoices; track prevInvoice) {\n <tr>\n <td>\n {{ prevInvoice.invoiceNumber }}\n </td>\n <td>\n {{ prevInvoice.invoiceDate | date: 'shortDate' }}\n </td>\n </tr>\n }\n </tbody>\n </table>\n </section>\n }\n\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,.previous-invoices-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.previous-invoices-table th,.tax-report-table td,.previous-invoices-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th,.previous-invoices-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td,.previous-invoices-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}.invoice-date{margin-bottom:12px;display:flex;gap:5px}\n"], dependencies: [{ 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"] }, { kind: "pipe", type: PercentPlusPipe, name: "percentPlus" }, { kind: "pipe", type: CurrencyPlusPipe, name: "currencyPlus" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3279
|
+
], 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\">{{ 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 <div class=\"invoice-date\">\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.invoiceDate | date: 'dd.MM.yyyy')\n : (invoice()?.invoiceDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\n }\n @if (invoice()?.paymentDueDate) {\n <div class=\"invoice-date\">\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.paymentDueDate | date: 'dd.MM.yyyy')\n : (invoice()?.paymentDueDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\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()?.previousInvoices && invoice()?.previousInvoices?.length) {\n <section class=\"previous-invoices\">\n <div class=\"previous-invoices-wrapper\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.previousInvoicesTopic }}\n </h2>\n\n <table class=\"previous-invoices-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.previousInvoiceNumber }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.previousInvoiceDate }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (prevInvoice of invoice()?.previousInvoices; track prevInvoice) {\n <tr>\n <td>\n {{ prevInvoice.invoiceNumber }}\n </td>\n <td>\n {{ prevInvoice.invoiceDate | date: 'shortDate' }}\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n </section>\n }\n\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}.previous-invoices{width:100%;display:flex;justify-content:flex-end}.previous-invoices-wrapper{width:400px}.tax-report-table,.previous-invoices-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.previous-invoices-table th,.tax-report-table td,.previous-invoices-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th,.previous-invoices-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td,.previous-invoices-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}.invoice-date{margin-bottom:12px;display:flex;gap:5px}\n"], dependencies: [{ 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"] }, { kind: "pipe", type: PercentPlusPipe, name: "percentPlus" }, { kind: "pipe", type: CurrencyPlusPipe, name: "currencyPlus" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3280
3280
|
}
|
|
3281
3281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: InvoiceDisplayComponent, decorators: [{
|
|
3282
3282
|
type: Component,
|
|
@@ -3302,7 +3302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
3302
3302
|
useFactory: (configurationInvoiceService) => configurationInvoiceService.locale,
|
|
3303
3303
|
deps: [ConfigurationInvoiceService]
|
|
3304
3304
|
}
|
|
3305
|
-
], 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\">{{ 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 <div class=\"invoice-date\">\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.invoiceDate | date: 'dd.MM.yyyy')\n : (invoice()?.invoiceDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\n }\n @if (invoice()?.paymentDueDate) {\n <div class=\"invoice-date\">\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.paymentDueDate | date: 'dd.MM.yyyy')\n : (invoice()?.paymentDueDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\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()?.previousInvoices && invoice()?.previousInvoices?.length) {\n <section class=\"previous-invoices\">\n <h2 class=\"info-title\">{{ textWords.previousInvoicesTopic }}</h2>\n\n <table class=\"previous-invoices-table\">\n <thead>\n <tr>\n <th>{{ textWords.previousInvoiceNumber }}</th>\n <th>{{ textWords.previousInvoiceDate }}</th>\n </tr>\n </thead>\n <tbody>\n @for (prevInvoice of invoice()?.previousInvoices; track prevInvoice) {\n <tr>\n <td>\n {{ prevInvoice.invoiceNumber }}\n </td>\n <td>\n {{ prevInvoice.invoiceDate | date: 'shortDate' }}\n </td>\n </tr>\n }\n </tbody>\n </table>\n </section>\n }\n\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,.previous-invoices-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.previous-invoices-table th,.tax-report-table td,.previous-invoices-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th,.previous-invoices-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td,.previous-invoices-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}.invoice-date{margin-bottom:12px;display:flex;gap:5px}\n"] }]
|
|
3305
|
+
], 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\">{{ 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 <div class=\"invoice-date\">\n <strong>{{ textWords.detailsInvoiceDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.invoiceDate | date: 'dd.MM.yyyy')\n : (invoice()?.invoiceDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\n }\n @if (invoice()?.paymentDueDate) {\n <div class=\"invoice-date\">\n <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n <span>\n {{\n configurationInvoiceService.locale === 'de-DE'\n ? (invoice()?.paymentDueDate | date: 'dd.MM.yyyy')\n : (invoice()?.paymentDueDate | date: 'dd/MM/yyyy')\n }}</span\n >\n </div>\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()?.previousInvoices && invoice()?.previousInvoices?.length) {\n <section class=\"previous-invoices\">\n <div class=\"previous-invoices-wrapper\">\n <h2\n class=\"info-title\"\n [ngStyle]=\"{\n borderBottomColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n }\"\n >\n {{ textWords.previousInvoicesTopic }}\n </h2>\n\n <table class=\"previous-invoices-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.previousInvoiceNumber }}\n </th>\n <th\n [ngStyle]=\"{\n backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n color: colorSettings === true ? null : colorSettings?.textColor,\n }\"\n >\n {{ textWords.previousInvoiceDate }}\n </th>\n </tr>\n </thead>\n <tbody>\n @for (prevInvoice of invoice()?.previousInvoices; track prevInvoice) {\n <tr>\n <td>\n {{ prevInvoice.invoiceNumber }}\n </td>\n <td>\n {{ prevInvoice.invoiceDate | date: 'shortDate' }}\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n </section>\n }\n\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}.previous-invoices{width:100%;display:flex;justify-content:flex-end}.previous-invoices-wrapper{width:400px}.tax-report-table,.previous-invoices-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.previous-invoices-table th,.tax-report-table td,.previous-invoices-table td{padding:6px;text-align:center;border:1px solid #ddd}.tax-report-table th,.previous-invoices-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td,.previous-invoices-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}.invoice-date{margin-bottom:12px;display:flex;gap:5px}\n"] }]
|
|
3306
3306
|
}], ctorParameters: () => [{ type: ConfigurationInvoiceService }], propDecorators: { invoice: [{ type: i0.Input, args: [{ isSignal: true, alias: "invoice", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
|
|
3307
3307
|
|
|
3308
3308
|
/*
|