@dangl/angular-ava 1.3.0-beta0038 → 1.3.0-beta0042

package/README.md

@@ -194,5 +194,8 @@ export interface IConfigurationInvoice {
 
   //** This controls how many digits are displayed for quantities. It defaults to '1.3-3', meaning it will always show three decimal palces. */
   quantityDecimalPlaces?: string;
+
+  //** If specified, the invoice color settings will be used for the invoice viewer.*/
+  colorSettings?: IColorSettings | null;
 }
 ```

package/fesm2022/dangl-angular-ava.mjs

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgTemplateOutlet, NgClass, DecimalPipe, registerLocaleData, CurrencyPipe, PercentPipe, DatePipe } from '@angular/common';
+import { AsyncPipe, NgTemplateOutlet, NgClass, DecimalPipe, registerLocaleData, CurrencyPipe, PercentPipe, NgStyle, DatePipe } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import localeEn from '@angular/common/locales/en';
 import localeDeExtra from '@angular/common/locales/extra/de';
@@ -243,12 +243,12 @@ var ModeViewType;
 
 // This file is automatically generated as part of the build process
 const version = {
-    version: "1.3.0-beta0038",
-    commitInfo: "Branch.develop.Sha.6cf5581b25e2ce87a2840b84ba8b015039c45d2f",
+    version: "1.3.0-beta0042",
+    commitInfo: "Branch.develop.Sha.869030eab249e24057928c8e05360d55e0714807",
     commitDate: "2025-02-11",
-    commitHash: "6cf5581b25e2ce87a2840b84ba8b015039c45d2f",
-    informationalVersion: "1.3.0-beta.38+Branch.develop.Sha.6cf5581b25e2ce87a2840b84ba8b015039c45d2f",
-    buildDateUtc: new Date(Date.UTC(2025, 1, 11, 15, 44, 42))
+    commitHash: "869030eab249e24057928c8e05360d55e0714807",
+    informationalVersion: "1.3.0-beta.42+Branch.develop.Sha.869030eab249e24057928c8e05360d55e0714807",
+    buildDateUtc: new Date(Date.UTC(2025, 1, 11, 19, 35, 26))
 };
 
 class TreeHoverTooltipService {
@@ -2016,6 +2016,7 @@ class ConfigurationInvoiceService {
         this._pdfViewEnabled = false;
         this._quantityDecimalPlaces = DEFAULT_DIGITS_INFO;
         this._currencyCode = DEFAULT_CURRENCY_CODE;
+        this._colorSettings = null;
         this.invoiceConfigSource = new BehaviorSubject(this.getDefaultInvoiceConfiguration());
         this.invoiceConfig$ = this.invoiceConfigSource.asObservable();
     }
@@ -2042,9 +2043,13 @@ class ConfigurationInvoiceService {
             textWords: this._textWords,
             pdfViewEnabled: this._pdfViewEnabled,
             language: this._language,
-            quantityDecimalPlaces: this._quantityDecimalPlaces
+            quantityDecimalPlaces: this._quantityDecimalPlaces,
+            colorSettings: this._colorSettings
         };
     }
+    getColorSettingsFromConfig() {
+        return this.invoiceConfig$.pipe(map((config) => config?.colorSettings || null), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
     getDefaultTextWords(languageWord) {
         return languageWord === 'de' ? germanTextsInvoice : DEFAULT_TEXT_WORD_INVOICE;
     }
@@ -2207,6 +2212,7 @@ class InvoiceDocumentsComponent {
         this.documentsPanel = null;
         this.destroyRef = inject(DestroyRef);
         this.textWords$ = this.configurationInvoiceService.getTextWordsFromConfig();
+        this.colorSettings$ = this.configurationInvoiceService.getColorSettingsFromConfig();
         this.pdfViewEnabled = false;
     }
     ngOnInit() {
@@ -2260,11 +2266,11 @@ class InvoiceDocumentsComponent {
         link.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDocumentsComponent, deps: [{ token: ConfigurationInvoiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InvoiceDocumentsComponent, isStandalone: true, selector: "ava-invoice-documents", inputs: { documents: { classPropertyName: "documents", publicName: "documents", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "documentsPanel", first: true, predicate: ["documentsPanel"], descendants: true }], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n  <mat-accordion>\n    <mat-expansion-panel\n      [hideToggle]=\"pdfViewEnabled\"\n      #documentsPanel\n    >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          {{ textWords.attachmentsHeading }}\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (document of documents(); track document.documentReference) {\n        <div class=\"document\">\n          @if (document.documentReference) {\n            <div>\n              <strong>{{ textWords.attachmentsName }}: </strong>\n              <span>{{ document.documentReference }}</span>\n            </div>\n          }\n          @if (document.description) {\n            <div>\n              <strong>{{ textWords.attachmentsDescription }}: </strong>\n              <span>{{ document.description }}</span>\n            </div>\n          }\n          @if (document.externalDocumentUrl) {\n            <div>\n              <strong>{{ textWords.attachmentsUrl }}: </strong>\n              <span>{{ document.externalDocumentUrl }}</span>\n            </div>\n          } @else if (document.documentBase64) {\n            <div>\n              <strong>{{ textWords.attachmentsDataSize }}: </strong>\n              <span>{{ document.documentBase64.length }}</span>\n            </div>\n\n            @if (document.documentMimeType) {\n              <div>\n                <strong>{{ textWords.attachmentsMimeType }}: </strong>\n                <span>{{ document.documentMimeType | invoiceAttachmentMimeType }}</span>\n              </div>\n            }\n          }\n          @if (document.fileName) {\n            <div>\n              <strong>{{ textWords.attachmentsFileName }}: </strong>\n              <span>{{ document.fileName }}</span>\n            </div>\n          }\n          @if (!pdfViewEnabled) {\n            <button\n              mat-raised-button\n              color=\"primary\"\n              (click)=\"download(document)\"\n              [disabled]=\"!document.externalDocumentUrl && !document.documentBase64\"\n            >\n              {{ textWords.attachmentsDownloadButton }}\n            </button>\n          }\n        </div>\n      }\n    </mat-expansion-panel>\n  </mat-accordion>\n}\n", styles: [".document{padding-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: InvoiceAttachmentMimeTypePipe, name: "invoiceAttachmentMimeType" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InvoiceDocumentsComponent, isStandalone: true, selector: "ava-invoice-documents", inputs: { documents: { classPropertyName: "documents", publicName: "documents", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "documentsPanel", first: true, predicate: ["documentsPanel"], descendants: true }], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n  @if ((colorSettings$ | async) || true; as colorSettings) {\n    <mat-accordion>\n      <mat-expansion-panel\n        [hideToggle]=\"pdfViewEnabled\"\n        #documentsPanel\n      >\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            {{ textWords.attachmentsHeading }}\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n        @for (document of documents(); track document.documentReference) {\n          <div class=\"document\">\n            @if (document.documentReference) {\n              <div>\n                <strong>{{ textWords.attachmentsName }}: </strong>\n                <span>{{ document.documentReference }}</span>\n              </div>\n            }\n            @if (document.description) {\n              <div>\n                <strong>{{ textWords.attachmentsDescription }}: </strong>\n                <span>{{ document.description }}</span>\n              </div>\n            }\n            @if (document.externalDocumentUrl) {\n              <div>\n                <strong>{{ textWords.attachmentsUrl }}: </strong>\n                <span>{{ document.externalDocumentUrl }}</span>\n              </div>\n            } @else if (document.documentBase64) {\n              <div>\n                <strong>{{ textWords.attachmentsDataSize }}: </strong>\n                <span>{{ document.documentBase64.length }}</span>\n              </div>\n\n              @if (document.documentMimeType) {\n                <div>\n                  <strong>{{ textWords.attachmentsMimeType }}: </strong>\n                  <span>{{ document.documentMimeType | invoiceAttachmentMimeType }}</span>\n                </div>\n              }\n            }\n            @if (document.fileName) {\n              <div>\n                <strong>{{ textWords.attachmentsFileName }}: </strong>\n                <span>{{ document.fileName }}</span>\n              </div>\n            }\n            @if (!pdfViewEnabled) {\n              <button\n                mat-raised-button\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                }\"\n                color=\"primary\"\n                (click)=\"download(document)\"\n                [disabled]=\"!document.externalDocumentUrl && !document.documentBase64\"\n              >\n                <span\n                  [ngStyle]=\"{\n                    color: colorSettings === true ? null : colorSettings?.textColor,\n                  }\"\n                >\n                  {{ textWords.attachmentsDownloadButton }}\n                </span>\n              </button>\n            }\n          </div>\n        }\n      </mat-expansion-panel>\n    </mat-accordion>\n  }\n}\n", styles: [".document{padding-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: InvoiceAttachmentMimeTypePipe, name: "invoiceAttachmentMimeType" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDocumentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ava-invoice-documents', imports: [MatExpansionModule, MatButtonModule, InvoiceAttachmentMimeTypePipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (textWords$ | async; as textWords) {\n  <mat-accordion>\n    <mat-expansion-panel\n      [hideToggle]=\"pdfViewEnabled\"\n      #documentsPanel\n    >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          {{ textWords.attachmentsHeading }}\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (document of documents(); track document.documentReference) {\n        <div class=\"document\">\n          @if (document.documentReference) {\n            <div>\n              <strong>{{ textWords.attachmentsName }}: </strong>\n              <span>{{ document.documentReference }}</span>\n            </div>\n          }\n          @if (document.description) {\n            <div>\n              <strong>{{ textWords.attachmentsDescription }}: </strong>\n              <span>{{ document.description }}</span>\n            </div>\n          }\n          @if (document.externalDocumentUrl) {\n            <div>\n              <strong>{{ textWords.attachmentsUrl }}: </strong>\n              <span>{{ document.externalDocumentUrl }}</span>\n            </div>\n          } @else if (document.documentBase64) {\n            <div>\n              <strong>{{ textWords.attachmentsDataSize }}: </strong>\n              <span>{{ document.documentBase64.length }}</span>\n            </div>\n\n            @if (document.documentMimeType) {\n              <div>\n                <strong>{{ textWords.attachmentsMimeType }}: </strong>\n                <span>{{ document.documentMimeType | invoiceAttachmentMimeType }}</span>\n              </div>\n            }\n          }\n          @if (document.fileName) {\n            <div>\n              <strong>{{ textWords.attachmentsFileName }}: </strong>\n              <span>{{ document.fileName }}</span>\n            </div>\n          }\n          @if (!pdfViewEnabled) {\n            <button\n              mat-raised-button\n              color=\"primary\"\n              (click)=\"download(document)\"\n              [disabled]=\"!document.externalDocumentUrl && !document.documentBase64\"\n            >\n              {{ textWords.attachmentsDownloadButton }}\n            </button>\n          }\n        </div>\n      }\n    </mat-expansion-panel>\n  </mat-accordion>\n}\n", styles: [".document{padding-bottom:15px}\n"] }]
+            args: [{ selector: 'ava-invoice-documents', imports: [MatExpansionModule, MatButtonModule, InvoiceAttachmentMimeTypePipe, AsyncPipe, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (textWords$ | async; as textWords) {\n  @if ((colorSettings$ | async) || true; as colorSettings) {\n    <mat-accordion>\n      <mat-expansion-panel\n        [hideToggle]=\"pdfViewEnabled\"\n        #documentsPanel\n      >\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n            {{ textWords.attachmentsHeading }}\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n        @for (document of documents(); track document.documentReference) {\n          <div class=\"document\">\n            @if (document.documentReference) {\n              <div>\n                <strong>{{ textWords.attachmentsName }}: </strong>\n                <span>{{ document.documentReference }}</span>\n              </div>\n            }\n            @if (document.description) {\n              <div>\n                <strong>{{ textWords.attachmentsDescription }}: </strong>\n                <span>{{ document.description }}</span>\n              </div>\n            }\n            @if (document.externalDocumentUrl) {\n              <div>\n                <strong>{{ textWords.attachmentsUrl }}: </strong>\n                <span>{{ document.externalDocumentUrl }}</span>\n              </div>\n            } @else if (document.documentBase64) {\n              <div>\n                <strong>{{ textWords.attachmentsDataSize }}: </strong>\n                <span>{{ document.documentBase64.length }}</span>\n              </div>\n\n              @if (document.documentMimeType) {\n                <div>\n                  <strong>{{ textWords.attachmentsMimeType }}: </strong>\n                  <span>{{ document.documentMimeType | invoiceAttachmentMimeType }}</span>\n                </div>\n              }\n            }\n            @if (document.fileName) {\n              <div>\n                <strong>{{ textWords.attachmentsFileName }}: </strong>\n                <span>{{ document.fileName }}</span>\n              </div>\n            }\n            @if (!pdfViewEnabled) {\n              <button\n                mat-raised-button\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                }\"\n                color=\"primary\"\n                (click)=\"download(document)\"\n                [disabled]=\"!document.externalDocumentUrl && !document.documentBase64\"\n              >\n                <span\n                  [ngStyle]=\"{\n                    color: colorSettings === true ? null : colorSettings?.textColor,\n                  }\"\n                >\n                  {{ textWords.attachmentsDownloadButton }}\n                </span>\n              </button>\n            }\n          </div>\n        }\n      </mat-expansion-panel>\n    </mat-accordion>\n  }\n}\n", styles: [".document{padding-bottom:15px}\n"] }]
         }], ctorParameters: () => [{ type: ConfigurationInvoiceService }], propDecorators: { documentsPanel: [{
                 type: ViewChild,
                 args: ['documentsPanel']
@@ -2293,6 +2299,7 @@ class InvoiceDisplayComponent {
         this.invoice = input.required({
             transform: this.transformFn
         });
+        this.colorSettings$ = this.configurationInvoiceService.getColorSettingsFromConfig();
         this.textWords$ = this.configurationInvoiceService.getTextWordsFromConfig();
         this.pdfViewEnabled$ = this.configurationInvoiceService.getPdfViewEnabledFromConfig();
         this.currencyCode = linkedSignal(() => this.invoice()?.currencyCode || '');
@@ -2378,7 +2385,7 @@ class InvoiceDisplayComponent {
         this.configurationInvoiceService.setInvoiceConfig(this.linkedConfig());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDisplayComponent, deps: [{ token: ConfigurationInvoiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InvoiceDisplayComponent, isStandalone: true, selector: "ava-invoice-display", inputs: { invoice: { classPropertyName: "invoice", publicName: "invoice", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [ConfigurationInvoiceService, CurrencyPipe, DecimalPipe, PercentPipe], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\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 class=\"header-title\">{{ textWords.invoiceBuyerTitle }}</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: 'dd.MM.yyyy' }}</span>\n            </p>\n          }\n          @if (invoice()?.paymentDueDate) {\n            <p>\n              <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n              <span>{{ invoice()?.paymentDueDate | date: 'dd.MM.yyyy' }}</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 class=\"header-title\">{{ textWords.invoiceSellerTitle }}</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      <div class=\"invoice-info\">\n        <section class=\"invoice-references\">\n          @if (textWords.referencesTopic) {\n            <h2 class=\"info-title\">{{ textWords.referencesTopic }}</h2>\n          }\n          @if (invoice()?.references?.buyerReference) {\n            <p>\n              <strong>{{ textWords.referencesBuyerReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.buyerReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.projectReference) {\n            <p>\n              <strong>{{ textWords.referencesProjectReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.projectReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.contractReference) {\n            <p>\n              <strong>{{ textWords.referencesContractReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.contractReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.purchaseOrderReference) {\n            <p>\n              <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.purchaseOrderReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.salesOrderReference) {\n            <p>\n              <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.salesOrderReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.receivingAdviceReference) {\n            <p>\n              <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.receivingAdviceReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.dispatchAdviceReference) {\n            <p>\n              <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n              <br />\n              <span> {{ invoice()?.references?.dispatchAdviceReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.tenderOrLotReference) {\n            <p>\n              <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.tenderOrLotReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.invoicedObjectIdentifier) {\n            <p>\n              <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.invoicedObjectIdentifier }}</span>\n            </p>\n          }\n        </section>\n        @if (invoice()?.deliveryInformation) {\n          <section class=\"invoice-delivery\">\n            <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n            @if (invoice()?.deliveryInformation?.deliverToName) {\n              <p>\n                <strong>{{ textWords.deliverToName }}: </strong>\n                <br />\n                <span>{{ invoice()?.deliveryInformation?.deliverToName }}</span>\n              </p>\n            }\n            @if (invoice()?.deliveryInformation?.deliverToLocationIdentifier) {\n              <p>\n                <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n                <br />\n                <span>{{ invoice()?.deliveryInformation?.deliverToLocationIdentifier }}</span>\n              </p>\n            }\n            @if (invoice()?.deliveryInformation?.deliveryDate) {\n              <p>\n                <strong>{{ textWords.deliveryDate }}: </strong>\n                <br />\n                <span>{{ invoice()?.deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n              </p>\n            }\n            @if (invoice()?.deliveryInformation?.deliveryAddress) {\n              <p>\n                <strong>{{ textWords.deliveryAddress }}: </strong>\n                <span>\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.address) {\n                    <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.address }}</p>\n                  }\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.city) {\n                    <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.city }},</span>\n                  }\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.zipCode) {\n                    <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                  }\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.countryCode) {\n                    <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                  }\n                </span>\n              </p>\n            }\n          </section>\n        }\n      </div>\n\n      <table class=\"invoice-table\">\n        <thead>\n          <tr>\n            <th>#</th>\n            <th>{{ textWords.tableHeadDescription }}</th>\n            <th class=\"center\">{{ textWords.tableHeadQuantity }}</th>\n            <th class=\"center\">{{ textWords.tableHeadUnit }}</th>\n            <th class=\"center\">{{ textWords.tableHeadNetPrice }}</th>\n            <th class=\"center\">{{ textWords.tableHeadNetAmount }}</th>\n            <th class=\"center\">{{ textWords.vat }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (item of invoice()?.lineItems; track item; let i = $index) {\n            <tr>\n              <td>{{ i + 1 }}</td>\n              <td>{{ item.itemInformation?.description }}</td>\n              <td class=\"currency-table-cell\">{{ item.quantity | numberPlus }}</td>\n              <td>{{ item.unitCode }}</td>\n              <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currencyPlus }}</td>\n              <td class=\"currency-table-cell\">{{ item.netAmount | currencyPlus }}</td>\n              @if (item.vatInformation && item.vatInformation.length > 0) {\n                <td class=\"currency-table-cell\">{{ item.vatInformation[0].vatRate | percentPlus: '1.0-2' }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n\n      <div class=\"addition-info\">\n        <section class=\"taxes\">\n          <h2 class=\"info-title\">{{ textWords.taxesHeading }}</h2>\n          <table class=\"tax-report-table\">\n            <thead>\n              <tr>\n                <th>{{ textWords.vat }}</th>\n                <th>{{ textWords.totalsTotalNet }}</th>\n                <th>{{ textWords.totalsTotalVatAmount }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (tax of invoice()?.vatBreakdown; track tax.taxRate) {\n                <tr>\n                  <td class=\"currency-table-cell\">\n                    @if (tax.taxRate) {\n                      <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n                    }\n                  </td>\n                  <td class=\"currency-table-cell\">\n                    @if (tax.netTaxableAmount) {\n                      <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n                    }\n                  </td>\n                  <td class=\"currency-table-cell\">\n                    @if (tax.vatAmount) {\n                      <span>{{ tax.vatAmount | currencyPlus }}</span>\n                    }\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </section>\n\n        <section class=\"payment-instructions\">\n          <h2 class=\"info-title\">{{ textWords.instructionsTopic }}</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 class=\"info-title\">{{ textWords.totalsTopic }}</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 class=\"total\">\n              <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n              <br />\n              <strong> {{ invoice()?.totals?.totalToBePaid | currencyPlus }}</strong>\n            </p>\n          }\n        </section>\n      </div>\n\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      @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", 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,.invoice-delivery,.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,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.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}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.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:12px;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: NumberPlusPipe, name: "numberPlus" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InvoiceDisplayComponent, isStandalone: true, selector: "ava-invoice-display", inputs: { invoice: { classPropertyName: "invoice", publicName: "invoice", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, providers: [ConfigurationInvoiceService, CurrencyPipe, DecimalPipe, PercentPipe], 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: 'dd.MM.yyyy' }}</span>\n              </p>\n            }\n            @if (invoice()?.paymentDueDate) {\n              <p>\n                <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n                <span>{{ invoice()?.paymentDueDate | date: 'dd.MM.yyyy' }}</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        <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            @if (invoice()?.references?.buyerReference) {\n              <p>\n                <strong>{{ textWords.referencesBuyerReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.buyerReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.projectReference) {\n              <p>\n                <strong>{{ textWords.referencesProjectReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.projectReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.contractReference) {\n              <p>\n                <strong>{{ textWords.referencesContractReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.contractReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.purchaseOrderReference) {\n              <p>\n                <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.purchaseOrderReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.salesOrderReference) {\n              <p>\n                <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.salesOrderReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.receivingAdviceReference) {\n              <p>\n                <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.receivingAdviceReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.dispatchAdviceReference) {\n              <p>\n                <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n                <br />\n                <span> {{ invoice()?.references?.dispatchAdviceReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.tenderOrLotReference) {\n              <p>\n                <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.tenderOrLotReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.invoicedObjectIdentifier) {\n              <p>\n                <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.invoicedObjectIdentifier }}</span>\n              </p>\n            }\n          </section>\n          @if (invoice()?.deliveryInformation) {\n            <section class=\"invoice-delivery\">\n              <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n              @if (invoice()?.deliveryInformation?.deliverToName) {\n                <p>\n                  <strong>{{ textWords.deliverToName }}: </strong>\n                  <br />\n                  <span>{{ invoice()?.deliveryInformation?.deliverToName }}</span>\n                </p>\n              }\n              @if (invoice()?.deliveryInformation?.deliverToLocationIdentifier) {\n                <p>\n                  <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n                  <br />\n                  <span>{{ invoice()?.deliveryInformation?.deliverToLocationIdentifier }}</span>\n                </p>\n              }\n              @if (invoice()?.deliveryInformation?.deliveryDate) {\n                <p>\n                  <strong>{{ textWords.deliveryDate }}: </strong>\n                  <br />\n                  <span>{{ invoice()?.deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n                </p>\n              }\n              @if (invoice()?.deliveryInformation?.deliveryAddress) {\n                <p>\n                  <strong>{{ textWords.deliveryAddress }}: </strong>\n                  <span>\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.address) {\n                      <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.address }}</p>\n                    }\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.city) {\n                      <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.city }},</span>\n                    }\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.zipCode) {\n                      <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                    }\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.countryCode) {\n                      <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                    }\n                  </span>\n                </p>\n              }\n            </section>\n          }\n        </div>\n\n        <table class=\"invoice-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                #\n              </th>\n              <th\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadDescription }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadQuantity }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadUnit }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadNetPrice }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadNetAmount }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.vat }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of invoice()?.lineItems; track item; let i = $index) {\n              <tr>\n                <td>{{ i + 1 }}</td>\n                <td>{{ item.itemInformation?.description }}</td>\n                <td class=\"currency-table-cell\">{{ item.quantity | numberPlus }}</td>\n                <td>{{ item.unitCode }}</td>\n                <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currencyPlus }}</td>\n                <td class=\"currency-table-cell\">{{ item.netAmount | currencyPlus }}</td>\n                @if (item.vatInformation && item.vatInformation.length > 0) {\n                  <td class=\"currency-table-cell\">{{ item.vatInformation[0].vatRate | percentPlus: '1.0-2' }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n\n        <div class=\"addition-info\">\n          <section class=\"taxes\">\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                  <tr>\n                    <td class=\"currency-table-cell\">\n                      @if (tax.taxRate) {\n                        <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n                      }\n                    </td>\n                    <td class=\"currency-table-cell\">\n                      @if (tax.netTaxableAmount) {\n                        <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n                      }\n                    </td>\n                    <td class=\"currency-table-cell\">\n                      @if (tax.vatAmount) {\n                        <span>{{ tax.vatAmount | currencyPlus }}</span>\n                      }\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\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\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        @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,.invoice-delivery,.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,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.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}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.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:12px;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: NumberPlusPipe, name: "numberPlus" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDisplayComponent, decorators: [{
             type: Component,
@@ -2390,8 +2397,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         AsyncPipe,
                         MatDividerModule,
                         InvoiceDocumentsComponent,
-                        MatIconModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigurationInvoiceService, CurrencyPipe, DecimalPipe, PercentPipe], template: "@if (textWords$ | async; as textWords) {\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 class=\"header-title\">{{ textWords.invoiceBuyerTitle }}</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: 'dd.MM.yyyy' }}</span>\n            </p>\n          }\n          @if (invoice()?.paymentDueDate) {\n            <p>\n              <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n              <span>{{ invoice()?.paymentDueDate | date: 'dd.MM.yyyy' }}</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 class=\"header-title\">{{ textWords.invoiceSellerTitle }}</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      <div class=\"invoice-info\">\n        <section class=\"invoice-references\">\n          @if (textWords.referencesTopic) {\n            <h2 class=\"info-title\">{{ textWords.referencesTopic }}</h2>\n          }\n          @if (invoice()?.references?.buyerReference) {\n            <p>\n              <strong>{{ textWords.referencesBuyerReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.buyerReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.projectReference) {\n            <p>\n              <strong>{{ textWords.referencesProjectReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.projectReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.contractReference) {\n            <p>\n              <strong>{{ textWords.referencesContractReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.contractReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.purchaseOrderReference) {\n            <p>\n              <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.purchaseOrderReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.salesOrderReference) {\n            <p>\n              <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.salesOrderReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.receivingAdviceReference) {\n            <p>\n              <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.receivingAdviceReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.dispatchAdviceReference) {\n            <p>\n              <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n              <br />\n              <span> {{ invoice()?.references?.dispatchAdviceReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.tenderOrLotReference) {\n            <p>\n              <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.tenderOrLotReference }}</span>\n            </p>\n          }\n          @if (invoice()?.references?.invoicedObjectIdentifier) {\n            <p>\n              <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n              <br />\n              <span>{{ invoice()?.references?.invoicedObjectIdentifier }}</span>\n            </p>\n          }\n        </section>\n        @if (invoice()?.deliveryInformation) {\n          <section class=\"invoice-delivery\">\n            <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n            @if (invoice()?.deliveryInformation?.deliverToName) {\n              <p>\n                <strong>{{ textWords.deliverToName }}: </strong>\n                <br />\n                <span>{{ invoice()?.deliveryInformation?.deliverToName }}</span>\n              </p>\n            }\n            @if (invoice()?.deliveryInformation?.deliverToLocationIdentifier) {\n              <p>\n                <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n                <br />\n                <span>{{ invoice()?.deliveryInformation?.deliverToLocationIdentifier }}</span>\n              </p>\n            }\n            @if (invoice()?.deliveryInformation?.deliveryDate) {\n              <p>\n                <strong>{{ textWords.deliveryDate }}: </strong>\n                <br />\n                <span>{{ invoice()?.deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n              </p>\n            }\n            @if (invoice()?.deliveryInformation?.deliveryAddress) {\n              <p>\n                <strong>{{ textWords.deliveryAddress }}: </strong>\n                <span>\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.address) {\n                    <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.address }}</p>\n                  }\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.city) {\n                    <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.city }},</span>\n                  }\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.zipCode) {\n                    <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                  }\n                  @if (invoice()?.deliveryInformation?.deliveryAddress?.countryCode) {\n                    <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                  }\n                </span>\n              </p>\n            }\n          </section>\n        }\n      </div>\n\n      <table class=\"invoice-table\">\n        <thead>\n          <tr>\n            <th>#</th>\n            <th>{{ textWords.tableHeadDescription }}</th>\n            <th class=\"center\">{{ textWords.tableHeadQuantity }}</th>\n            <th class=\"center\">{{ textWords.tableHeadUnit }}</th>\n            <th class=\"center\">{{ textWords.tableHeadNetPrice }}</th>\n            <th class=\"center\">{{ textWords.tableHeadNetAmount }}</th>\n            <th class=\"center\">{{ textWords.vat }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (item of invoice()?.lineItems; track item; let i = $index) {\n            <tr>\n              <td>{{ i + 1 }}</td>\n              <td>{{ item.itemInformation?.description }}</td>\n              <td class=\"currency-table-cell\">{{ item.quantity | numberPlus }}</td>\n              <td>{{ item.unitCode }}</td>\n              <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currencyPlus }}</td>\n              <td class=\"currency-table-cell\">{{ item.netAmount | currencyPlus }}</td>\n              @if (item.vatInformation && item.vatInformation.length > 0) {\n                <td class=\"currency-table-cell\">{{ item.vatInformation[0].vatRate | percentPlus: '1.0-2' }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n\n      <div class=\"addition-info\">\n        <section class=\"taxes\">\n          <h2 class=\"info-title\">{{ textWords.taxesHeading }}</h2>\n          <table class=\"tax-report-table\">\n            <thead>\n              <tr>\n                <th>{{ textWords.vat }}</th>\n                <th>{{ textWords.totalsTotalNet }}</th>\n                <th>{{ textWords.totalsTotalVatAmount }}</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (tax of invoice()?.vatBreakdown; track tax.taxRate) {\n                <tr>\n                  <td class=\"currency-table-cell\">\n                    @if (tax.taxRate) {\n                      <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n                    }\n                  </td>\n                  <td class=\"currency-table-cell\">\n                    @if (tax.netTaxableAmount) {\n                      <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n                    }\n                  </td>\n                  <td class=\"currency-table-cell\">\n                    @if (tax.vatAmount) {\n                      <span>{{ tax.vatAmount | currencyPlus }}</span>\n                    }\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </section>\n\n        <section class=\"payment-instructions\">\n          <h2 class=\"info-title\">{{ textWords.instructionsTopic }}</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 class=\"info-title\">{{ textWords.totalsTopic }}</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 class=\"total\">\n              <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n              <br />\n              <strong> {{ invoice()?.totals?.totalToBePaid | currencyPlus }}</strong>\n            </p>\n          }\n        </section>\n      </div>\n\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      @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", 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,.invoice-delivery,.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,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.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}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.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:12px;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"] }]
+                        MatIconModule,
+                        NgStyle
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigurationInvoiceService, CurrencyPipe, DecimalPipe, PercentPipe], 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: 'dd.MM.yyyy' }}</span>\n              </p>\n            }\n            @if (invoice()?.paymentDueDate) {\n              <p>\n                <strong>{{ textWords.detailsPaymentDueDate }}: </strong>\n                <span>{{ invoice()?.paymentDueDate | date: 'dd.MM.yyyy' }}</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        <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            @if (invoice()?.references?.buyerReference) {\n              <p>\n                <strong>{{ textWords.referencesBuyerReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.buyerReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.projectReference) {\n              <p>\n                <strong>{{ textWords.referencesProjectReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.projectReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.contractReference) {\n              <p>\n                <strong>{{ textWords.referencesContractReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.contractReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.purchaseOrderReference) {\n              <p>\n                <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.purchaseOrderReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.salesOrderReference) {\n              <p>\n                <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.salesOrderReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.receivingAdviceReference) {\n              <p>\n                <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.receivingAdviceReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.dispatchAdviceReference) {\n              <p>\n                <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n                <br />\n                <span> {{ invoice()?.references?.dispatchAdviceReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.tenderOrLotReference) {\n              <p>\n                <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.tenderOrLotReference }}</span>\n              </p>\n            }\n            @if (invoice()?.references?.invoicedObjectIdentifier) {\n              <p>\n                <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n                <br />\n                <span>{{ invoice()?.references?.invoicedObjectIdentifier }}</span>\n              </p>\n            }\n          </section>\n          @if (invoice()?.deliveryInformation) {\n            <section class=\"invoice-delivery\">\n              <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n              @if (invoice()?.deliveryInformation?.deliverToName) {\n                <p>\n                  <strong>{{ textWords.deliverToName }}: </strong>\n                  <br />\n                  <span>{{ invoice()?.deliveryInformation?.deliverToName }}</span>\n                </p>\n              }\n              @if (invoice()?.deliveryInformation?.deliverToLocationIdentifier) {\n                <p>\n                  <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n                  <br />\n                  <span>{{ invoice()?.deliveryInformation?.deliverToLocationIdentifier }}</span>\n                </p>\n              }\n              @if (invoice()?.deliveryInformation?.deliveryDate) {\n                <p>\n                  <strong>{{ textWords.deliveryDate }}: </strong>\n                  <br />\n                  <span>{{ invoice()?.deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n                </p>\n              }\n              @if (invoice()?.deliveryInformation?.deliveryAddress) {\n                <p>\n                  <strong>{{ textWords.deliveryAddress }}: </strong>\n                  <span>\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.address) {\n                      <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.address }}</p>\n                    }\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.city) {\n                      <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.city }},</span>\n                    }\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.zipCode) {\n                      <span>{{ invoice()?.deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                    }\n                    @if (invoice()?.deliveryInformation?.deliveryAddress?.countryCode) {\n                      <p>{{ invoice()?.deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                    }\n                  </span>\n                </p>\n              }\n            </section>\n          }\n        </div>\n\n        <table class=\"invoice-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                #\n              </th>\n              <th\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadDescription }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadQuantity }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadUnit }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadNetPrice }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.tableHeadNetAmount }}\n              </th>\n              <th\n                class=\"center\"\n                [ngStyle]=\"{\n                  backgroundColor: colorSettings === true ? null : colorSettings?.backgroundColor,\n                  color: colorSettings === true ? null : colorSettings?.textColor,\n                }\"\n              >\n                {{ textWords.vat }}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of invoice()?.lineItems; track item; let i = $index) {\n              <tr>\n                <td>{{ i + 1 }}</td>\n                <td>{{ item.itemInformation?.description }}</td>\n                <td class=\"currency-table-cell\">{{ item.quantity | numberPlus }}</td>\n                <td>{{ item.unitCode }}</td>\n                <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currencyPlus }}</td>\n                <td class=\"currency-table-cell\">{{ item.netAmount | currencyPlus }}</td>\n                @if (item.vatInformation && item.vatInformation.length > 0) {\n                  <td class=\"currency-table-cell\">{{ item.vatInformation[0].vatRate | percentPlus: '1.0-2' }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n\n        <div class=\"addition-info\">\n          <section class=\"taxes\">\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                  <tr>\n                    <td class=\"currency-table-cell\">\n                      @if (tax.taxRate) {\n                        <span>{{ tax.taxRate | percentPlus: '1.0-2' }}</span>\n                      }\n                    </td>\n                    <td class=\"currency-table-cell\">\n                      @if (tax.netTaxableAmount) {\n                        <span>{{ tax.netTaxableAmount | currencyPlus }}</span>\n                      }\n                    </td>\n                    <td class=\"currency-table-cell\">\n                      @if (tax.vatAmount) {\n                        <span>{{ tax.vatAmount | currencyPlus }}</span>\n                      }\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\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\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        @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,.invoice-delivery,.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,.invoice-delivery,.invoice-details{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.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}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.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:12px;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"] }]
         }], ctorParameters: () => [{ type: ConfigurationInvoiceService }] });
 
 /*