@dangl/angular-ava 1.1.2-beta0091 → 1.1.2-beta0104

package/fesm2022/dangl-angular-ava.mjs

@@ -283,12 +283,12 @@ var ModeViewType;
 
 // This file is automatically generated as part of the build process
 const version = {
-    version: "1.1.2-beta0091",
-    commitInfo: "Branch.develop.Sha.8c462071c14e90762932b81c72fa058e8bed371c",
-    commitDate: "2024-12-12",
-    commitHash: "8c462071c14e90762932b81c72fa058e8bed371c",
-    informationalVersion: "1.1.2-beta.91+Branch.develop.Sha.8c462071c14e90762932b81c72fa058e8bed371c",
-    buildDateUtc: new Date(Date.UTC(2024, 11, 12, 20, 0, 46))
+    version: "1.1.2-beta0104",
+    commitInfo: "Branch.develop.Sha.1fe892de7d38a2b5ee997a700c90dbe09601d77e",
+    commitDate: "2024-12-13",
+    commitHash: "1fe892de7d38a2b5ee997a700c90dbe09601d77e",
+    informationalVersion: "1.1.2-beta.104+Branch.develop.Sha.1fe892de7d38a2b5ee997a700c90dbe09601d77e",
+    buildDateUtc: new Date(Date.UTC(2024, 11, 13, 13, 1, 46))
 };
 
 const DEFAULT_FILTERS = [
@@ -316,6 +316,8 @@ const DEFAULT_FILTERS = [
 
 const DEFAULT_TEXT_WORD_INVOICE = {
     invoiceTitle: 'Invoice',
+    invoiceBuyerTitle: 'Receiver',
+    invoiceSellerTitle: 'Sender',
     vatId: 'VAT ID',
     detailsInvoiceNumber: 'Invoice Number',
     detailsInvoiceDate: 'Invoice Date',
@@ -362,6 +364,8 @@ const DEFAULT_TEXT_WORD_INVOICE = {
 };
 const germanTextsInvoice = {
     invoiceTitle: 'Rechnung',
+    invoiceBuyerTitle: 'Empfänger',
+    invoiceSellerTitle: 'Rechnungssteller',
     vatId: 'USt.-ID',
     detailsInvoiceNumber: 'Rechnungsnummer',
     detailsInvoiceDate: 'Rechnungsdatum',
@@ -926,6 +930,29 @@ class TreeHoverTooltipService {
     setTooltipVisable(tooltipVisible) {
         this.tooltipVisibleSource.next(tooltipVisible);
     }
+    showElementOver(element) {
+        if (!element)
+            return;
+        const backgroundColor = element.style.backgroundColor || window.getComputedStyle(element, null).backgroundColor;
+        const background = backgroundColor === 'rgba(0, 0, 0, 0)' ? '' : backgroundColor;
+        const text = element.querySelector('.ava-tree-item__text');
+        const rect = text.getBoundingClientRect();
+        text.style.position = 'fixed';
+        text.style.top = `${rect.top}px`;
+        text.style.left = `${rect.left}px`;
+        text.style.zIndex = '2000';
+        text.style.backgroundColor = background || '#fefefe';
+    }
+    hideElementOver(element) {
+        if (!element)
+            return;
+        const text = element.querySelector('.ava-tree-item__text');
+        text.style.position = 'static';
+        text.style.top = ``;
+        text.style.left = ``;
+        text.style.zIndex = '';
+        text.style.backgroundColor = '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeHoverTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeHoverTooltipService, providedIn: 'root' }); }
 }
@@ -1133,7 +1160,7 @@ class TreeItemComponent {
         this.treeNodeSelectionService.changeSelecting(isSelected, element.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeItemComponent, deps: [{ token: SelectElementService }, { token: TreeNodeSelectionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TreeItemComponent, isStandalone: true, selector: "ava-tree-item", inputs: { element: "element", expansionState: "expansionState", isSelectionMode: "isSelectionMode", allowDblClick: "allowDblClick" }, ngImport: i0, template: "@if (element) {\n  <div\n    (click)=\"select()\"\n    (dblclick)=\"dblSelect()\"\n    (contextmenu)=\"openContextMenu($event)\"\n    class=\"ava-tree-item\"\n    [id]=\"element.id\"\n  >\n    <mat-icon\n      class=\"ava-tree-item__icon\"\n      saveChangingView=\"icon\"\n      [attributeValue]=\"'icon'\"\n      [id]=\"element.id\"\n      >{{ element | elementIconName }}</mat-icon\n    >\n    @if (!isSelectionMode) {\n      <div\n        class=\"ava-tree-item__text\"\n        [class.choose]=\"!isSelectionMode && element.id === preselectedElement?.id\"\n        [id]=\"element.id\"\n        saveChangingView=\"text\"\n      >\n        <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n      </div>\n    }\n    @if (isSelectionMode) {\n      <mat-checkbox\n        class=\"ava-tree-item__checkbox\"\n        color=\"primary\"\n        [indeterminate]=\"checkedElements[element.id].indeterminate\"\n        [(ngModel)]=\"checkedElements[element.id].checked\"\n        (ngModelChange)=\"changeSelecting(element, $event)\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"ava-tree-item__text\"\n          saveChangingView=\"text\"\n          [id]=\"element.id\"\n        >\n          <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n        </div>\n      </mat-checkbox>\n    }\n  </div>\n}\n\n<ng-template #text>\n  @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' || element.elementTypeDiscriminator === 'PositionDto') {\n    <ng-container> {{ element | elementItemNumber }} - {{ element | elementText }} </ng-container>\n  } @else {\n    <ng-container>{{ element | elementText }}</ng-container>\n  }\n</ng-template>\n", styles: ["::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox{padding:0;flex:0 0 16px;width:16px;height:16px}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control{width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__ripple{opacity:0!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field>label{line-height:24px;padding-left:8px;-webkit-user-select:none;user-select:none}::ng-deep .ava-tree-item__checkbox .mat-mdc-checkbox-touch-target{width:16px!important;height:16px!important}.ava-tree-item{display:flex;align-items:center}.ava-tree-item__icon,.ava-tree-item__checkbox{flex-shrink:0}.ava-tree-item__text{flex-grow:1;-webkit-user-select:none;user-select:none;white-space:nowrap}.ava-tree-item__text.choose{color:red!important}\n"], dependencies: [{ kind: "directive", type: SaveChangingViewDirective, selector: "[saveChangingView]", inputs: ["attributeValue"] }, { kind: "pipe", type: ElementItemNumberPipe, name: "elementItemNumber" }, { kind: "pipe", type: ElementTextPipe, name: "elementText" }, { kind: "pipe", type: ElementIconNamePipe, name: "elementIconName" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TreeItemComponent, isStandalone: true, selector: "ava-tree-item", inputs: { element: "element", expansionState: "expansionState", isSelectionMode: "isSelectionMode", allowDblClick: "allowDblClick" }, ngImport: i0, template: "@if (element) {\n  <div\n    (click)=\"select()\"\n    (dblclick)=\"dblSelect()\"\n    (contextmenu)=\"openContextMenu($event)\"\n    class=\"ava-tree-item\"\n    [id]=\"element.id\"\n  >\n    <mat-icon\n      class=\"ava-tree-item__icon\"\n      saveChangingView=\"icon\"\n      [attributeValue]=\"'icon'\"\n      [id]=\"element.id\"\n      >{{ element | elementIconName }}</mat-icon\n    >\n    @if (!isSelectionMode) {\n      <div\n        class=\"ava-tree-item__text\"\n        [class.choose]=\"!isSelectionMode && element.id === preselectedElement?.id\"\n        [id]=\"element.id\"\n        saveChangingView=\"text\"\n      >\n        <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n      </div>\n    }\n    @if (isSelectionMode) {\n      <mat-checkbox\n        class=\"ava-tree-item__checkbox\"\n        color=\"primary\"\n        [indeterminate]=\"checkedElements[element.id].indeterminate\"\n        [(ngModel)]=\"checkedElements[element.id].checked\"\n        (ngModelChange)=\"changeSelecting(element, $event)\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"ava-tree-item__text\"\n          saveChangingView=\"text\"\n          [id]=\"element.id\"\n        >\n          <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n        </div>\n      </mat-checkbox>\n    }\n  </div>\n}\n\n<ng-template #text>\n  @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' || element.elementTypeDiscriminator === 'PositionDto') {\n    <ng-container> {{ element | elementItemNumber }} - {{ element | elementText }} </ng-container>\n  } @else {\n    <ng-container>{{ element | elementText }}</ng-container>\n  }\n</ng-template>\n", styles: ["::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox{padding:0;flex:0 0 16px;width:16px;height:16px}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control{width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__ripple{opacity:0!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field>label{line-height:24px;padding-left:8px;-webkit-user-select:none;user-select:none}::ng-deep .ava-tree-item__checkbox .mat-mdc-checkbox-touch-target{width:16px!important;height:16px!important}.ava-tree-item{display:flex;align-items:center}.ava-tree-item__icon,.ava-tree-item__checkbox{flex-shrink:0}.ava-tree-item__text{flex-grow:1;-webkit-user-select:none;user-select:none;white-space:nowrap;display:flex;align-items:center;min-height:24px}.ava-tree-item__text.choose{color:red!important}\n"], dependencies: [{ kind: "directive", type: SaveChangingViewDirective, selector: "[saveChangingView]", inputs: ["attributeValue"] }, { kind: "pipe", type: ElementItemNumberPipe, name: "elementItemNumber" }, { kind: "pipe", type: ElementTextPipe, name: "elementText" }, { kind: "pipe", type: ElementIconNamePipe, name: "elementIconName" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeItemComponent, decorators: [{
             type: Component,
@@ -1146,7 +1173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         MatCheckboxModule,
                         FormsModule,
                         MatIconModule
-                    ], template: "@if (element) {\n  <div\n    (click)=\"select()\"\n    (dblclick)=\"dblSelect()\"\n    (contextmenu)=\"openContextMenu($event)\"\n    class=\"ava-tree-item\"\n    [id]=\"element.id\"\n  >\n    <mat-icon\n      class=\"ava-tree-item__icon\"\n      saveChangingView=\"icon\"\n      [attributeValue]=\"'icon'\"\n      [id]=\"element.id\"\n      >{{ element | elementIconName }}</mat-icon\n    >\n    @if (!isSelectionMode) {\n      <div\n        class=\"ava-tree-item__text\"\n        [class.choose]=\"!isSelectionMode && element.id === preselectedElement?.id\"\n        [id]=\"element.id\"\n        saveChangingView=\"text\"\n      >\n        <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n      </div>\n    }\n    @if (isSelectionMode) {\n      <mat-checkbox\n        class=\"ava-tree-item__checkbox\"\n        color=\"primary\"\n        [indeterminate]=\"checkedElements[element.id].indeterminate\"\n        [(ngModel)]=\"checkedElements[element.id].checked\"\n        (ngModelChange)=\"changeSelecting(element, $event)\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"ava-tree-item__text\"\n          saveChangingView=\"text\"\n          [id]=\"element.id\"\n        >\n          <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n        </div>\n      </mat-checkbox>\n    }\n  </div>\n}\n\n<ng-template #text>\n  @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' || element.elementTypeDiscriminator === 'PositionDto') {\n    <ng-container> {{ element | elementItemNumber }} - {{ element | elementText }} </ng-container>\n  } @else {\n    <ng-container>{{ element | elementText }}</ng-container>\n  }\n</ng-template>\n", styles: ["::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox{padding:0;flex:0 0 16px;width:16px;height:16px}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control{width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__ripple{opacity:0!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field>label{line-height:24px;padding-left:8px;-webkit-user-select:none;user-select:none}::ng-deep .ava-tree-item__checkbox .mat-mdc-checkbox-touch-target{width:16px!important;height:16px!important}.ava-tree-item{display:flex;align-items:center}.ava-tree-item__icon,.ava-tree-item__checkbox{flex-shrink:0}.ava-tree-item__text{flex-grow:1;-webkit-user-select:none;user-select:none;white-space:nowrap}.ava-tree-item__text.choose{color:red!important}\n"] }]
+                    ], template: "@if (element) {\n  <div\n    (click)=\"select()\"\n    (dblclick)=\"dblSelect()\"\n    (contextmenu)=\"openContextMenu($event)\"\n    class=\"ava-tree-item\"\n    [id]=\"element.id\"\n  >\n    <mat-icon\n      class=\"ava-tree-item__icon\"\n      saveChangingView=\"icon\"\n      [attributeValue]=\"'icon'\"\n      [id]=\"element.id\"\n      >{{ element | elementIconName }}</mat-icon\n    >\n    @if (!isSelectionMode) {\n      <div\n        class=\"ava-tree-item__text\"\n        [class.choose]=\"!isSelectionMode && element.id === preselectedElement?.id\"\n        [id]=\"element.id\"\n        saveChangingView=\"text\"\n      >\n        <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n      </div>\n    }\n    @if (isSelectionMode) {\n      <mat-checkbox\n        class=\"ava-tree-item__checkbox\"\n        color=\"primary\"\n        [indeterminate]=\"checkedElements[element.id].indeterminate\"\n        [(ngModel)]=\"checkedElements[element.id].checked\"\n        (ngModelChange)=\"changeSelecting(element, $event)\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <div\n          class=\"ava-tree-item__text\"\n          saveChangingView=\"text\"\n          [id]=\"element.id\"\n        >\n          <ng-container [ngTemplateOutlet]=\"text\"></ng-container>\n        </div>\n      </mat-checkbox>\n    }\n  </div>\n}\n\n<ng-template #text>\n  @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' || element.elementTypeDiscriminator === 'PositionDto') {\n    <ng-container> {{ element | elementItemNumber }} - {{ element | elementText }} </ng-container>\n  } @else {\n    <ng-container>{{ element | elementText }}</ng-container>\n  }\n</ng-template>\n", styles: ["::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox{padding:0;flex:0 0 16px;width:16px;height:16px}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control{width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__ripple{opacity:0!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:100%;height:100%}::ng-deep .ava-tree-item__checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff!important}::ng-deep .ava-tree-item__checkbox .mdc-form-field>label{line-height:24px;padding-left:8px;-webkit-user-select:none;user-select:none}::ng-deep .ava-tree-item__checkbox .mat-mdc-checkbox-touch-target{width:16px!important;height:16px!important}.ava-tree-item{display:flex;align-items:center}.ava-tree-item__icon,.ava-tree-item__checkbox{flex-shrink:0}.ava-tree-item__text{flex-grow:1;-webkit-user-select:none;user-select:none;white-space:nowrap;display:flex;align-items:center;min-height:24px}.ava-tree-item__text.choose{color:red!important}\n"] }]
         }], ctorParameters: () => [{ type: SelectElementService }, { type: TreeNodeSelectionService }, { type: i0.ChangeDetectorRef }], propDecorators: { element: [{
                 type: Input
             }], expansionState: [{
@@ -1170,6 +1197,8 @@ class ListStructureComponent {
         this.selectedElement = null;
         this.$destroy = new Subject();
         this.treeHoverTooltipService = inject(TreeHoverTooltipService);
+        this.allowShow = null;
+        this.currentElement = null;
     }
     ngOnInit() {
         this.selectElementService.selectClickElement.pipe(takeUntil(this.$destroy)).subscribe((element) => {
@@ -1180,24 +1209,40 @@ class ListStructureComponent {
         this.$destroy.next(true);
         this.$destroy.complete();
     }
-    onMouseEnter(id) {
-        const template = this.templates.find((template) => {
-            return template.nativeElement.id === id;
-        });
-        if (!template) {
-            return;
-        }
-        this.treeHoverTooltipService.showTooltip(template);
+    onMouseEnter(event) {
+        this.currentElement = event.target;
+        this.treeHoverTooltipService.showElementOver(this.currentElement);
     }
     onMouseLeave() {
-        this.treeHoverTooltipService.hideHoverTooltip();
+        this.treeHoverTooltipService.hideElementOver(this.currentElement);
+        if (this.allowShow) {
+            clearTimeout(this.allowShow);
+            this.allowShow = null;
+        }
+    }
+    onMouseUp(event) {
+        this.currentElement = event.currentTarget;
+        this.allowShow = setTimeout(() => {
+            this.onMouseLeave();
+            this.treeHoverTooltipService.showElementOver(this.currentElement);
+        }, 400);
+    }
+    onMouseMove(event) {
+        const element = event.currentTarget;
+        const parent = element.closest('.ava-tree-wrapper');
+        if (parent) {
+            const rect = parent.getBoundingClientRect();
+            if (event.x > rect.right) {
+                this.onMouseLeave();
+            }
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ListStructureComponent, deps: [{ token: SelectElementService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ListStructureComponent, isStandalone: true, selector: "ava-list-structure", inputs: { filteredElementList: "filteredElementList", isSelectionMode: "isSelectionMode", selectedColor: "selectedColor", allowDblClick: "allowDblClick" }, host: { listeners: { "wheel": "onWindowScroll()" } }, viewQueries: [{ propertyName: "templates", predicate: ["hoverTooltipElement"], descendants: true }], ngImport: i0, template: "@for (element of filteredElementList; track element.id) {\n  <ng-container>\n    <div\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.background]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      (mouseenter)=\"onMouseEnter('hover-element-id-' + element.id)\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <ava-tree-item\n        [element]=\"element\"\n        [isSelectionMode]=\"isSelectionMode\"\n        [allowDblClick]=\"allowDblClick\"\n      ></ava-tree-item>\n    </div>\n  </ng-container>\n}\n", styles: [".select{background:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"], dependencies: [{ kind: "component", type: TreeItemComponent, selector: "ava-tree-item", inputs: ["element", "expansionState", "isSelectionMode", "allowDblClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ListStructureComponent, isStandalone: true, selector: "ava-list-structure", inputs: { filteredElementList: "filteredElementList", isSelectionMode: "isSelectionMode", selectedColor: "selectedColor", allowDblClick: "allowDblClick" }, host: { listeners: { "wheel": "onWindowScroll()" } }, viewQueries: [{ propertyName: "templates", predicate: ["hoverTooltipElement"], descendants: true }], ngImport: i0, template: "@for (element of filteredElementList; track element.id) {\n  <ng-container>\n    <div\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      (mouseenter)=\"onMouseEnter($event)\"\n      (mouseleave)=\"onMouseLeave()\"\n      (mouseup)=\"onMouseUp($event)\"\n      (mousemove)=\"onMouseMove($event)\"\n      (wheel)=\"onMouseLeave()\"\n    >\n      <ava-tree-item\n        [element]=\"element\"\n        [isSelectionMode]=\"isSelectionMode\"\n        [allowDblClick]=\"allowDblClick\"\n      ></ava-tree-item>\n    </div>\n  </ng-container>\n}\n", styles: [".select{background:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"], dependencies: [{ kind: "component", type: TreeItemComponent, selector: "ava-tree-item", inputs: ["element", "expansionState", "isSelectionMode", "allowDblClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ListStructureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ava-list-structure', imports: [TreeItemComponent], template: "@for (element of filteredElementList; track element.id) {\n  <ng-container>\n    <div\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.background]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      (mouseenter)=\"onMouseEnter('hover-element-id-' + element.id)\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <ava-tree-item\n        [element]=\"element\"\n        [isSelectionMode]=\"isSelectionMode\"\n        [allowDblClick]=\"allowDblClick\"\n      ></ava-tree-item>\n    </div>\n  </ng-container>\n}\n", styles: [".select{background:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"] }]
+            args: [{ selector: 'ava-list-structure', imports: [TreeItemComponent], template: "@for (element of filteredElementList; track element.id) {\n  <ng-container>\n    <div\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      (mouseenter)=\"onMouseEnter($event)\"\n      (mouseleave)=\"onMouseLeave()\"\n      (mouseup)=\"onMouseUp($event)\"\n      (mousemove)=\"onMouseMove($event)\"\n      (wheel)=\"onMouseLeave()\"\n    >\n      <ava-tree-item\n        [element]=\"element\"\n        [isSelectionMode]=\"isSelectionMode\"\n        [allowDblClick]=\"allowDblClick\"\n      ></ava-tree-item>\n    </div>\n  </ng-container>\n}\n", styles: [".select{background:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: SelectElementService }], propDecorators: { filteredElementList: [{
                 type: Input
             }], isSelectionMode: [{
@@ -1399,6 +1444,8 @@ class TreeNodeComponent {
         this.treeHoverTooltipService = inject(TreeHoverTooltipService);
         this.selectedElement = null;
         this.$destroy = new Subject();
+        this.allowShow = null;
+        this.currentElement = null;
     }
     ngOnInit() {
         this.selectElementService.selectClickElement.pipe(takeUntil(this.$destroy)).subscribe((element) => {
@@ -1412,24 +1459,40 @@ class TreeNodeComponent {
     expand(element) {
         this.expansionState[element.id] = !this.expansionState[element.id];
     }
-    onMouseEnter(id) {
-        const template = this.templates.find((template) => {
-            return template.nativeElement.id === id;
-        });
-        if (!template) {
-            return;
-        }
-        this.treeHoverTooltipService.showTooltip(template);
+    onMouseEnter(event) {
+        this.currentElement = event.target;
+        this.treeHoverTooltipService.showElementOver(this.currentElement);
     }
     onMouseLeave() {
-        this.treeHoverTooltipService.hideHoverTooltip();
+        this.treeHoverTooltipService.hideElementOver(this.currentElement);
+        if (this.allowShow) {
+            clearTimeout(this.allowShow);
+            this.allowShow = null;
+        }
+    }
+    onMouseUp(event) {
+        this.currentElement = event.currentTarget;
+        this.allowShow = setTimeout(() => {
+            this.onMouseLeave();
+            this.treeHoverTooltipService.showElementOver(this.currentElement);
+        }, 400);
+    }
+    onMouseMove(event) {
+        const element = event.currentTarget;
+        const parent = element.closest('.ava-tree-wrapper');
+        if (parent) {
+            const rect = parent.getBoundingClientRect();
+            if (event.x > rect.right) {
+                this.onMouseLeave();
+            }
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeNodeComponent, deps: [{ token: SelectElementService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TreeNodeComponent, isStandalone: true, selector: "ava-tree-node", inputs: { elementList: "elementList", indent: "indent", expansionState: "expansionState", isSelectionMode: "isSelectionMode", selectedColor: "selectedColor", allowDblClick: "allowDblClick" }, host: { listeners: { "wheel": "onWindowScroll()", "click": "onCLick()" } }, viewQueries: [{ propertyName: "templates", predicate: ["hoverTooltipElement"], descendants: true }], ngImport: i0, template: "@for (element of elementList; track element.id) {\n  <ng-container>\n    <div\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      class=\"tree-node-wrapper\"\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.background]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      (mouseenter)=\"onMouseEnter('hover-element-id-' + element.id)\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <div class=\"tree-node-wrapper__content\">\n        @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto') {\n          <mat-icon\n            matRipple\n            (click)=\"expand(element)\"\n            class=\"tree-node__icon\"\n          >\n            {{ expansionState[element.id] ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n        } @else {\n          <mat-icon></mat-icon>\n        }\n\n        <ava-tree-item\n          [element]=\"element\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [allowDblClick]=\"allowDblClick\"\n        ></ava-tree-item>\n      </div>\n    </div>\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' && expansionState[element.id]) {\n      <div [style.paddingLeft]=\"indent\">\n        <ava-tree-node\n          [elementList]=\"element | groupChildElements\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [selectedColor]=\"selectedColor\"\n          [allowDblClick]=\"allowDblClick\"\n          [indent]=\"indent\"\n        ></ava-tree-node>\n      </div>\n    }\n  </ng-container>\n}\n", styles: [".tree-node-wrapper{display:flex;align-items:center}.tree-node-wrapper__content{flex:1 0 100%;display:flex}.tree-node__icon{flex-shrink:0}.select{background-color:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ava-tree-node", inputs: ["elementList", "indent", "expansionState", "isSelectionMode", "selectedColor", "allowDblClick"] }, { kind: "component", type: TreeItemComponent, selector: "ava-tree-item", inputs: ["element", "expansionState", "isSelectionMode", "allowDblClick"] }, { kind: "pipe", type: GroupChildElementsPipe, name: "groupChildElements" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TreeNodeComponent, isStandalone: true, selector: "ava-tree-node", inputs: { elementList: "elementList", indent: "indent", expansionState: "expansionState", isSelectionMode: "isSelectionMode", selectedColor: "selectedColor", allowDblClick: "allowDblClick" }, host: { listeners: { "wheel": "onWindowScroll()", "click": "onCLick()" } }, viewQueries: [{ propertyName: "templates", predicate: ["hoverTooltipElement"], descendants: true }], ngImport: i0, template: "@for (element of elementList; track element.id) {\n  <ng-container>\n    <div\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      class=\"tree-node-wrapper\"\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      (mouseenter)=\"onMouseEnter($event)\"\n      (mouseleave)=\"onMouseLeave()\"\n      (mouseup)=\"onMouseUp($event)\"\n      (mousemove)=\"onMouseMove($event)\"\n      (wheel)=\"onMouseLeave()\"\n    >\n      <div class=\"tree-node-wrapper__content\">\n        @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto') {\n          <mat-icon\n            matRipple\n            (click)=\"expand(element)\"\n            class=\"tree-node__icon\"\n          >\n            {{ expansionState[element.id] ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n        } @else {\n          <mat-icon></mat-icon>\n        }\n\n        <ava-tree-item\n          [element]=\"element\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [allowDblClick]=\"allowDblClick\"\n        ></ava-tree-item>\n      </div>\n    </div>\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' && expansionState[element.id]) {\n      <div [style.paddingLeft]=\"indent\">\n        <ava-tree-node\n          [elementList]=\"element | groupChildElements\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [selectedColor]=\"selectedColor\"\n          [allowDblClick]=\"allowDblClick\"\n          [indent]=\"indent\"\n        ></ava-tree-node>\n      </div>\n    }\n  </ng-container>\n}\n", styles: [".tree-node-wrapper{display:flex;align-items:center}.tree-node-wrapper__content{flex:1 0 100%;display:flex}.tree-node__icon{flex-shrink:0}.select{background-color:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ava-tree-node", inputs: ["elementList", "indent", "expansionState", "isSelectionMode", "selectedColor", "allowDblClick"] }, { kind: "component", type: TreeItemComponent, selector: "ava-tree-item", inputs: ["element", "expansionState", "isSelectionMode", "allowDblClick"] }, { kind: "pipe", type: GroupChildElementsPipe, name: "groupChildElements" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ava-tree-node', imports: [TreeItemComponent, GroupChildElementsPipe, MatIconModule], template: "@for (element of elementList; track element.id) {\n  <ng-container>\n    <div\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      class=\"tree-node-wrapper\"\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.background]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      (mouseenter)=\"onMouseEnter('hover-element-id-' + element.id)\"\n      (mouseleave)=\"onMouseLeave()\"\n    >\n      <div class=\"tree-node-wrapper__content\">\n        @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto') {\n          <mat-icon\n            matRipple\n            (click)=\"expand(element)\"\n            class=\"tree-node__icon\"\n          >\n            {{ expansionState[element.id] ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n        } @else {\n          <mat-icon></mat-icon>\n        }\n\n        <ava-tree-item\n          [element]=\"element\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [allowDblClick]=\"allowDblClick\"\n        ></ava-tree-item>\n      </div>\n    </div>\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' && expansionState[element.id]) {\n      <div [style.paddingLeft]=\"indent\">\n        <ava-tree-node\n          [elementList]=\"element | groupChildElements\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [selectedColor]=\"selectedColor\"\n          [allowDblClick]=\"allowDblClick\"\n          [indent]=\"indent\"\n        ></ava-tree-node>\n      </div>\n    }\n  </ng-container>\n}\n", styles: [".tree-node-wrapper{display:flex;align-items:center}.tree-node-wrapper__content{flex:1 0 100%;display:flex}.tree-node__icon{flex-shrink:0}.select{background-color:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"] }]
+            args: [{ selector: 'ava-tree-node', imports: [TreeItemComponent, GroupChildElementsPipe, MatIconModule], template: "@for (element of elementList; track element.id) {\n  <ng-container>\n    <div\n      #hoverTooltipElement\n      [id]=\"'hover-element-id-' + element.id\"\n      class=\"tree-node-wrapper\"\n      [class.select]=\"!isSelectionMode && element.id === selectedElement?.id\"\n      [style.backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? selectedColor || '' : ''\"\n      (mouseenter)=\"onMouseEnter($event)\"\n      (mouseleave)=\"onMouseLeave()\"\n      (mouseup)=\"onMouseUp($event)\"\n      (mousemove)=\"onMouseMove($event)\"\n      (wheel)=\"onMouseLeave()\"\n    >\n      <div class=\"tree-node-wrapper__content\">\n        @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto') {\n          <mat-icon\n            matRipple\n            (click)=\"expand(element)\"\n            class=\"tree-node__icon\"\n          >\n            {{ expansionState[element.id] ? 'expand_more' : 'chevron_right' }}\n          </mat-icon>\n        } @else {\n          <mat-icon></mat-icon>\n        }\n\n        <ava-tree-item\n          [element]=\"element\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [allowDblClick]=\"allowDblClick\"\n        ></ava-tree-item>\n      </div>\n    </div>\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' && expansionState[element.id]) {\n      <div [style.paddingLeft]=\"indent\">\n        <ava-tree-node\n          [elementList]=\"element | groupChildElements\"\n          [expansionState]=\"expansionState\"\n          [isSelectionMode]=\"isSelectionMode\"\n          [selectedColor]=\"selectedColor\"\n          [allowDblClick]=\"allowDblClick\"\n          [indent]=\"indent\"\n        ></ava-tree-node>\n      </div>\n    }\n  </ng-container>\n}\n", styles: [".tree-node-wrapper{display:flex;align-items:center}.tree-node-wrapper__content{flex:1 0 100%;display:flex}.tree-node__icon{flex-shrink:0}.select{background-color:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: SelectElementService }], propDecorators: { elementList: [{
                 type: Input
             }], indent: [{
@@ -2068,11 +2131,11 @@ class InvoiceDisplayComponent {
         link.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDisplayComponent, deps: [], 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 }, textWords: { classPropertyName: "textWords", publicName: "textWords", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"invoice-container\">\n  <!-- Seller and Buyer Information -->\n  <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\n  <header class=\"invoice-header\">\n    <div class=\"seller-info\">\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          <span>{{ invoice().seller?.vatId }}</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=\"buyer-info\">\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          <span>{{ invoice().buyer?.vatId }}</span>\n        </p>\n      }\n    </div>\n  </header>\n\n  <section class=\"invoice-references\">\n    @if (textWords.referencesTopic) {\n      <h2>{{ textWords.referencesTopic }}</h2>\n    }\n    @if (invoice().references?.buyerReference) {\n      <p>\n        <strong>{{ textWords.referencesBuyerReference }}:</strong>\n        <span>{{ invoice().references?.buyerReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.projectReference) {\n      <p>\n        <strong>{{ textWords.referencesProjectReference }}:</strong>\n        <span>{{ invoice().references?.projectReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.contractReference) {\n      <p>\n        <strong>{{ textWords.referencesContractReference }}:</strong>\n        <span>{{ invoice().references?.contractReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.purchaseOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesPurchaseOrderReference }}:</strong>\n        <span>{{ invoice().references?.purchaseOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.salesOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesSalesOrderReference }}:</strong>\n        <span>{{ invoice().references?.salesOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.receivingAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesReceivingAdviceReference }}:</strong>\n        <span>{{ invoice().references?.receivingAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.dispatchAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesDispatchAdviceReference }}:</strong>\n        <span> {{ invoice().references?.dispatchAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.tenderOrLotReference) {\n      <p>\n        <strong>{{ textWords.referencesTenderOrLotReference }}:</strong>\n        <span>{{ invoice().references?.tenderOrLotReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.invoicedObjectIdentifier) {\n      <p>\n        <strong>{{ textWords.referencesInvoicedObjectIdentifier }}:</strong>\n        <span>{{ invoice().references?.invoicedObjectIdentifier }}</span>\n      </p>\n    }\n  </section>\n\n  <table class=\"invoice-table\">\n    <thead>\n      <tr>\n        <th>#</th>\n        <th>{{ textWords.tableHeadDescription }}</th>\n        <th>{{ textWords.tableHeadQuantity }}</th>\n        <th>{{ textWords.tableHeadUnit }}</th>\n        <th>{{ textWords.tableHeadNetPrice }}</th>\n        <th>{{ textWords.tableHeadNetAmount }}</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>{{ item.quantity }}</td>\n          <td>{{ item.unitCode }}</td>\n          <td>{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n          <td>{{ item.netAmount | currency: invoice().currencyCode }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <div class=\"addition-info\">\n    <section class=\"invoice-totals\">\n      <h2>{{ textWords.totalsTopic }}</h2>\n\n      @if (invoice().totals?.totalNet) {\n        <p>\n          <strong>{{ textWords.totalsTotalNet }}:</strong>\n          <span>{{ invoice().totals?.totalNet | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAllowances) {\n        <p>\n          <strong>{{ textWords.totalsTotalAllowances }}:</strong>\n          <span> {{ invoice().totals?.totalAllowances | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalCharges) {\n        <p>\n          <strong>{{ textWords.totalsTotalCharges }}:</strong>\n          <span> {{ invoice().totals?.totalCharges | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAfterDeductions) {\n        <p>\n          <strong>{{ textWords.totalsTotalAfterDeductions }}:</strong>\n          <span>{{ invoice().totals?.totalAfterDeductions | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalVatAmount) {\n        <p>\n          <strong>{{ textWords.totalsTotalVatAmount }}:</strong>\n          <span>{{ invoice().totals?.totalVatAmount | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalGross) {\n        <p>\n          <strong>{{ textWords.totalsTotalGross }}:</strong>\n          <span> {{ invoice().totals?.totalGross | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.alreadyPaidTotal) {\n        <p>\n          <strong>{{ textWords.totalsAlreadyPaidTotal }}:</strong>\n          <span>{{ invoice().totals?.alreadyPaidTotal | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalToBePaid) {\n        <p class=\"total\">\n          <strong>{{ textWords.totalsTotalToBePaid }}:</strong>\n          <strong> {{ invoice().totals?.totalToBePaid | currency: invoice().currencyCode }}</strong>\n        </p>\n      }\n    </section>\n\n    <section class=\"payment-instructions\">\n      <h2>{{ 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              <span>{{ means.accountIdentifier }}</span>\n            </p>\n          }\n          @if (means.accountName) {\n            <p>\n              <strong>{{ textWords.instructionsAccountName }}:</strong>\n              <span>{{ means.accountName }}</span>\n            </p>\n          }\n          @if (means.serviceProviderIdentifier) {\n            <p>\n              <strong>{{ textWords.instructionsServiceProviderIdentifier }}:</strong>\n              <span>{{ means.serviceProviderIdentifier }}</span>\n            </p>\n          }\n        </div>\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\n  @if (invoice().documents?.length) {\n    <section class=\"invoice-attachments\">\n      <mat-accordion>\n        <mat-expansion-panel>\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ textWords.attachmentsHeading }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (document of invoice().documents; track document) {\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              <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            </div>\n          }\n          <pre id=\"fileContent\"></pre>\n        </mat-expansion-panel>\n      </mat-accordion>\n    </section>\n  }\n</div>\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}.seller-info,.buyer-info,.invoice-details{width:30%}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes{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}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff}.invoice-attachments,.document{padding-bottom:15px}\n"], dependencies: [{ kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "pipe", type: InvoiceAttachmentMimeTypePipe, name: "invoiceAttachmentMimeType" }], 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 }, textWords: { classPropertyName: "textWords", publicName: "textWords", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"invoice-container\">\n  <!-- Seller and Buyer Information -->\n  <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\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          <span>{{ invoice().buyer?.vatId }}</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          <span>{{ invoice().seller?.vatId }}</span>\n        </p>\n      }\n    </div>\n  </header>\n\n  <section class=\"invoice-references\">\n    @if (textWords.referencesTopic) {\n      <h2>{{ textWords.referencesTopic }}</h2>\n    }\n    @if (invoice().references?.buyerReference) {\n      <p>\n        <strong>{{ textWords.referencesBuyerReference }}: </strong>\n        <span>{{ invoice().references?.buyerReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.projectReference) {\n      <p>\n        <strong>{{ textWords.referencesProjectReference }}: </strong>\n        <span>{{ invoice().references?.projectReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.contractReference) {\n      <p>\n        <strong>{{ textWords.referencesContractReference }}: </strong>\n        <span>{{ invoice().references?.contractReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.purchaseOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n        <span>{{ invoice().references?.purchaseOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.salesOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n        <span>{{ invoice().references?.salesOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.receivingAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n        <span>{{ invoice().references?.receivingAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.dispatchAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n        <span> {{ invoice().references?.dispatchAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.tenderOrLotReference) {\n      <p>\n        <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n        <span>{{ invoice().references?.tenderOrLotReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.invoicedObjectIdentifier) {\n      <p>\n        <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n        <span>{{ invoice().references?.invoicedObjectIdentifier }}</span>\n      </p>\n    }\n  </section>\n\n  <table class=\"invoice-table\">\n    <thead>\n      <tr>\n        <th>#</th>\n        <th>{{ textWords.tableHeadDescription }}</th>\n        <th>{{ textWords.tableHeadQuantity }}</th>\n        <th>{{ textWords.tableHeadUnit }}</th>\n        <th>{{ textWords.tableHeadNetPrice }}</th>\n        <th>{{ textWords.tableHeadNetAmount }}</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>{{ item.quantity }}</td>\n          <td>{{ item.unitCode }}</td>\n          <td>{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n          <td>{{ item.netAmount | currency: invoice().currencyCode }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <div class=\"addition-info\">\n    <section class=\"invoice-totals\">\n      <h2>{{ textWords.totalsTopic }}</h2>\n\n      @if (invoice().totals?.totalNet) {\n        <p>\n          <strong>{{ textWords.totalsTotalNet }}: </strong>\n          <span>{{ invoice().totals?.totalNet | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAllowances) {\n        <p>\n          <strong>{{ textWords.totalsTotalAllowances }}: </strong>\n          <span> {{ invoice().totals?.totalAllowances | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalCharges) {\n        <p>\n          <strong>{{ textWords.totalsTotalCharges }}: </strong>\n          <span> {{ invoice().totals?.totalCharges | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAfterDeductions) {\n        <p>\n          <strong>{{ textWords.totalsTotalAfterDeductions }}: </strong>\n          <span>{{ invoice().totals?.totalAfterDeductions | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalVatAmount) {\n        <p>\n          <strong>{{ textWords.totalsTotalVatAmount }}: </strong>\n          <span>{{ invoice().totals?.totalVatAmount | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalGross) {\n        <p>\n          <strong>{{ textWords.totalsTotalGross }}: </strong>\n          <span> {{ invoice().totals?.totalGross | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.alreadyPaidTotal) {\n        <p>\n          <strong>{{ textWords.totalsAlreadyPaidTotal }}: </strong>\n          <span>{{ invoice().totals?.alreadyPaidTotal | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalToBePaid) {\n        <p class=\"total\">\n          <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n          <strong> {{ invoice().totals?.totalToBePaid | currency: invoice().currencyCode }}</strong>\n        </p>\n      }\n    </section>\n\n    <section class=\"payment-instructions\">\n      <h2>{{ 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              <span>{{ means.accountIdentifier }}</span>\n            </p>\n          }\n          @if (means.accountName) {\n            <p>\n              <strong>{{ textWords.instructionsAccountName }}: </strong>\n              <span>{{ means.accountName }}</span>\n            </p>\n          }\n          @if (means.serviceProviderIdentifier) {\n            <p>\n              <strong>{{ textWords.instructionsServiceProviderIdentifier }}: </strong>\n              <span>{{ means.serviceProviderIdentifier }}</span>\n            </p>\n          }\n        </div>\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\n  @if (invoice().documents?.length) {\n    <section class=\"invoice-attachments\">\n      <mat-accordion>\n        <mat-expansion-panel>\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ textWords.attachmentsHeading }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (document of invoice().documents; track document) {\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              <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            </div>\n          }\n          <pre id=\"fileContent\"></pre>\n        </mat-expansion-panel>\n      </mat-accordion>\n    </section>\n  }\n</div>\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-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes{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}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff}.invoice-attachments,.document{padding-bottom:15px}\n"], dependencies: [{ kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "pipe", type: InvoiceAttachmentMimeTypePipe, name: "invoiceAttachmentMimeType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ava-invoice-display', imports: [CurrencyPipe, DatePipe, MatButtonModule, MatExpansionModule, InvoiceAttachmentMimeTypePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"invoice-container\">\n  <!-- Seller and Buyer Information -->\n  <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\n  <header class=\"invoice-header\">\n    <div class=\"seller-info\">\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          <span>{{ invoice().seller?.vatId }}</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=\"buyer-info\">\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          <span>{{ invoice().buyer?.vatId }}</span>\n        </p>\n      }\n    </div>\n  </header>\n\n  <section class=\"invoice-references\">\n    @if (textWords.referencesTopic) {\n      <h2>{{ textWords.referencesTopic }}</h2>\n    }\n    @if (invoice().references?.buyerReference) {\n      <p>\n        <strong>{{ textWords.referencesBuyerReference }}:</strong>\n        <span>{{ invoice().references?.buyerReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.projectReference) {\n      <p>\n        <strong>{{ textWords.referencesProjectReference }}:</strong>\n        <span>{{ invoice().references?.projectReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.contractReference) {\n      <p>\n        <strong>{{ textWords.referencesContractReference }}:</strong>\n        <span>{{ invoice().references?.contractReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.purchaseOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesPurchaseOrderReference }}:</strong>\n        <span>{{ invoice().references?.purchaseOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.salesOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesSalesOrderReference }}:</strong>\n        <span>{{ invoice().references?.salesOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.receivingAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesReceivingAdviceReference }}:</strong>\n        <span>{{ invoice().references?.receivingAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.dispatchAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesDispatchAdviceReference }}:</strong>\n        <span> {{ invoice().references?.dispatchAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.tenderOrLotReference) {\n      <p>\n        <strong>{{ textWords.referencesTenderOrLotReference }}:</strong>\n        <span>{{ invoice().references?.tenderOrLotReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.invoicedObjectIdentifier) {\n      <p>\n        <strong>{{ textWords.referencesInvoicedObjectIdentifier }}:</strong>\n        <span>{{ invoice().references?.invoicedObjectIdentifier }}</span>\n      </p>\n    }\n  </section>\n\n  <table class=\"invoice-table\">\n    <thead>\n      <tr>\n        <th>#</th>\n        <th>{{ textWords.tableHeadDescription }}</th>\n        <th>{{ textWords.tableHeadQuantity }}</th>\n        <th>{{ textWords.tableHeadUnit }}</th>\n        <th>{{ textWords.tableHeadNetPrice }}</th>\n        <th>{{ textWords.tableHeadNetAmount }}</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>{{ item.quantity }}</td>\n          <td>{{ item.unitCode }}</td>\n          <td>{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n          <td>{{ item.netAmount | currency: invoice().currencyCode }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <div class=\"addition-info\">\n    <section class=\"invoice-totals\">\n      <h2>{{ textWords.totalsTopic }}</h2>\n\n      @if (invoice().totals?.totalNet) {\n        <p>\n          <strong>{{ textWords.totalsTotalNet }}:</strong>\n          <span>{{ invoice().totals?.totalNet | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAllowances) {\n        <p>\n          <strong>{{ textWords.totalsTotalAllowances }}:</strong>\n          <span> {{ invoice().totals?.totalAllowances | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalCharges) {\n        <p>\n          <strong>{{ textWords.totalsTotalCharges }}:</strong>\n          <span> {{ invoice().totals?.totalCharges | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAfterDeductions) {\n        <p>\n          <strong>{{ textWords.totalsTotalAfterDeductions }}:</strong>\n          <span>{{ invoice().totals?.totalAfterDeductions | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalVatAmount) {\n        <p>\n          <strong>{{ textWords.totalsTotalVatAmount }}:</strong>\n          <span>{{ invoice().totals?.totalVatAmount | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalGross) {\n        <p>\n          <strong>{{ textWords.totalsTotalGross }}:</strong>\n          <span> {{ invoice().totals?.totalGross | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.alreadyPaidTotal) {\n        <p>\n          <strong>{{ textWords.totalsAlreadyPaidTotal }}:</strong>\n          <span>{{ invoice().totals?.alreadyPaidTotal | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalToBePaid) {\n        <p class=\"total\">\n          <strong>{{ textWords.totalsTotalToBePaid }}:</strong>\n          <strong> {{ invoice().totals?.totalToBePaid | currency: invoice().currencyCode }}</strong>\n        </p>\n      }\n    </section>\n\n    <section class=\"payment-instructions\">\n      <h2>{{ 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              <span>{{ means.accountIdentifier }}</span>\n            </p>\n          }\n          @if (means.accountName) {\n            <p>\n              <strong>{{ textWords.instructionsAccountName }}:</strong>\n              <span>{{ means.accountName }}</span>\n            </p>\n          }\n          @if (means.serviceProviderIdentifier) {\n            <p>\n              <strong>{{ textWords.instructionsServiceProviderIdentifier }}:</strong>\n              <span>{{ means.serviceProviderIdentifier }}</span>\n            </p>\n          }\n        </div>\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\n  @if (invoice().documents?.length) {\n    <section class=\"invoice-attachments\">\n      <mat-accordion>\n        <mat-expansion-panel>\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ textWords.attachmentsHeading }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (document of invoice().documents; track document) {\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              <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            </div>\n          }\n          <pre id=\"fileContent\"></pre>\n        </mat-expansion-panel>\n      </mat-accordion>\n    </section>\n  }\n</div>\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}.seller-info,.buyer-info,.invoice-details{width:30%}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes{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}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff}.invoice-attachments,.document{padding-bottom:15px}\n"] }]
+            args: [{ selector: 'ava-invoice-display', imports: [CurrencyPipe, DatePipe, MatButtonModule, MatExpansionModule, InvoiceAttachmentMimeTypePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"invoice-container\">\n  <!-- Seller and Buyer Information -->\n  <h1 class=\"invoice-title\">{{ textWords.invoiceTitle }}</h1>\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          <span>{{ invoice().buyer?.vatId }}</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          <span>{{ invoice().seller?.vatId }}</span>\n        </p>\n      }\n    </div>\n  </header>\n\n  <section class=\"invoice-references\">\n    @if (textWords.referencesTopic) {\n      <h2>{{ textWords.referencesTopic }}</h2>\n    }\n    @if (invoice().references?.buyerReference) {\n      <p>\n        <strong>{{ textWords.referencesBuyerReference }}: </strong>\n        <span>{{ invoice().references?.buyerReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.projectReference) {\n      <p>\n        <strong>{{ textWords.referencesProjectReference }}: </strong>\n        <span>{{ invoice().references?.projectReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.contractReference) {\n      <p>\n        <strong>{{ textWords.referencesContractReference }}: </strong>\n        <span>{{ invoice().references?.contractReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.purchaseOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesPurchaseOrderReference }}: </strong>\n        <span>{{ invoice().references?.purchaseOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.salesOrderReference) {\n      <p>\n        <strong>{{ textWords.referencesSalesOrderReference }}: </strong>\n        <span>{{ invoice().references?.salesOrderReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.receivingAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesReceivingAdviceReference }}: </strong>\n        <span>{{ invoice().references?.receivingAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.dispatchAdviceReference) {\n      <p>\n        <strong>{{ textWords.referencesDispatchAdviceReference }}: </strong>\n        <span> {{ invoice().references?.dispatchAdviceReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.tenderOrLotReference) {\n      <p>\n        <strong>{{ textWords.referencesTenderOrLotReference }}: </strong>\n        <span>{{ invoice().references?.tenderOrLotReference }}</span>\n      </p>\n    }\n    @if (invoice().references?.invoicedObjectIdentifier) {\n      <p>\n        <strong>{{ textWords.referencesInvoicedObjectIdentifier }}: </strong>\n        <span>{{ invoice().references?.invoicedObjectIdentifier }}</span>\n      </p>\n    }\n  </section>\n\n  <table class=\"invoice-table\">\n    <thead>\n      <tr>\n        <th>#</th>\n        <th>{{ textWords.tableHeadDescription }}</th>\n        <th>{{ textWords.tableHeadQuantity }}</th>\n        <th>{{ textWords.tableHeadUnit }}</th>\n        <th>{{ textWords.tableHeadNetPrice }}</th>\n        <th>{{ textWords.tableHeadNetAmount }}</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>{{ item.quantity }}</td>\n          <td>{{ item.unitCode }}</td>\n          <td>{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n          <td>{{ item.netAmount | currency: invoice().currencyCode }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <div class=\"addition-info\">\n    <section class=\"invoice-totals\">\n      <h2>{{ textWords.totalsTopic }}</h2>\n\n      @if (invoice().totals?.totalNet) {\n        <p>\n          <strong>{{ textWords.totalsTotalNet }}: </strong>\n          <span>{{ invoice().totals?.totalNet | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAllowances) {\n        <p>\n          <strong>{{ textWords.totalsTotalAllowances }}: </strong>\n          <span> {{ invoice().totals?.totalAllowances | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalCharges) {\n        <p>\n          <strong>{{ textWords.totalsTotalCharges }}: </strong>\n          <span> {{ invoice().totals?.totalCharges | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalAfterDeductions) {\n        <p>\n          <strong>{{ textWords.totalsTotalAfterDeductions }}: </strong>\n          <span>{{ invoice().totals?.totalAfterDeductions | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalVatAmount) {\n        <p>\n          <strong>{{ textWords.totalsTotalVatAmount }}: </strong>\n          <span>{{ invoice().totals?.totalVatAmount | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalGross) {\n        <p>\n          <strong>{{ textWords.totalsTotalGross }}: </strong>\n          <span> {{ invoice().totals?.totalGross | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.alreadyPaidTotal) {\n        <p>\n          <strong>{{ textWords.totalsAlreadyPaidTotal }}: </strong>\n          <span>{{ invoice().totals?.alreadyPaidTotal | currency: invoice().currencyCode }}</span>\n        </p>\n      }\n      @if (invoice().totals?.totalToBePaid) {\n        <p class=\"total\">\n          <strong>{{ textWords.totalsTotalToBePaid }}: </strong>\n          <strong> {{ invoice().totals?.totalToBePaid | currency: invoice().currencyCode }}</strong>\n        </p>\n      }\n    </section>\n\n    <section class=\"payment-instructions\">\n      <h2>{{ 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              <span>{{ means.accountIdentifier }}</span>\n            </p>\n          }\n          @if (means.accountName) {\n            <p>\n              <strong>{{ textWords.instructionsAccountName }}: </strong>\n              <span>{{ means.accountName }}</span>\n            </p>\n          }\n          @if (means.serviceProviderIdentifier) {\n            <p>\n              <strong>{{ textWords.instructionsServiceProviderIdentifier }}: </strong>\n              <span>{{ means.serviceProviderIdentifier }}</span>\n            </p>\n          }\n        </div>\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\n  @if (invoice().documents?.length) {\n    <section class=\"invoice-attachments\">\n      <mat-accordion>\n        <mat-expansion-panel>\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ textWords.attachmentsHeading }}</mat-panel-title>\n          </mat-expansion-panel-header>\n          @for (document of invoice().documents; track document) {\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              <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            </div>\n          }\n          <pre id=\"fileContent\"></pre>\n        </mat-expansion-panel>\n      </mat-accordion>\n    </section>\n  }\n</div>\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-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes{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}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff}.invoice-attachments,.document{padding-bottom:15px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { textWords: [{
                 type: Input
             }] } });