@dangl/angular-ava 1.2.1-beta0002 → 1.2.2-beta0002

package/fesm2022/dangl-angular-ava.mjs

@@ -1,6 +1,6 @@
 import { AsyncPipe, NgTemplateOutlet, NgClass, DecimalPipe, CurrencyPipe, DatePipe, PercentPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Directive, Input, HostListener, Pipe, Component, ViewChild, ViewChildren, EventEmitter, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, Self, Output, input } from '@angular/core';
+import { Injectable, inject, Directive, Input, HostListener, Pipe, Component, ViewChild, ViewChildren, EventEmitter, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, Self, Output, DestroyRef, input } from '@angular/core';
 import * as i11 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i7 from '@angular/material/button';
@@ -13,18 +13,16 @@ import * as i12 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i10 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ReplaySubject, of, BehaviorSubject, Subject, takeUntil, combineLatestWith, take, map, switchMap, debounceTime, filter, tap, fromEvent } from 'rxjs';
+import { BehaviorSubject, map, distinctUntilChanged, ReplaySubject, of, Subject, takeUntil, combineLatestWith, take, switchMap, debounceTime, filter, tap, fromEvent, skip } from 'rxjs';
 import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2 from 'projects/angular-ava/src/lib/ava-tree/services/configuration-tree.service';
-import { ConfigurationTreeService } from 'projects/angular-ava/src/lib/ava-tree/services/configuration-tree.service';
 import * as i4$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i2$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import { InvoiceDocumentsComponent } from 'projects/angular-ava/src/lib/invoice/components/invoice-documents/invoice-documents.component';
-import * as i1 from 'projects/angular-ava/src/lib/invoice/services/configuration-invoice.service';
-import { ConfigurationInvoiceService } from 'projects/angular-ava/src/lib/invoice/services/configuration-invoice.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 //----------------------
 // <auto-generated>
@@ -241,14 +239,118 @@ var ModeViewType;
 
 // This file is automatically generated as part of the build process
 const version = {
-    version: "1.2.1-beta0002",
-    commitInfo: "Branch.develop.Sha.4f96b260b0124ae151c2f6ecf3117cf74ab656b6",
+    version: "1.2.2-beta0002",
+    commitInfo: "Branch.develop.Sha.b2b1d5dc5c641526a58144500f04598785073464",
     commitDate: "2025-01-16",
-    commitHash: "4f96b260b0124ae151c2f6ecf3117cf74ab656b6",
-    informationalVersion: "1.2.1-beta.2+Branch.develop.Sha.4f96b260b0124ae151c2f6ecf3117cf74ab656b6",
-    buildDateUtc: new Date(Date.UTC(2025, 0, 16, 12, 28, 2))
+    commitHash: "b2b1d5dc5c641526a58144500f04598785073464",
+    informationalVersion: "1.2.2-beta.2+Branch.develop.Sha.b2b1d5dc5c641526a58144500f04598785073464",
+    buildDateUtc: new Date(Date.UTC(2025, 0, 16, 14, 41, 6))
 };
 
+const DEFAULT_TEXT_WORDS = {
+    textSearch: 'Search',
+    textNothing: 'Nothing',
+    textNothingFiltered: 'No Filter',
+    textAll: 'All',
+    tooltipAllOpen: 'Expand all',
+    tooltipAllClose: 'Collapse all',
+    tooltipAllAdd: 'Add all',
+    tooltipAllRemove: 'Remove all',
+    defaultNameNoteText: 'Note Text',
+    defaultNameDescription: 'Description',
+    defaultNameGroup: 'Group',
+    defaultNamePosition: 'Position'
+};
+const germanTextsAva = {
+    textSearch: 'Suche',
+    textNothing: 'Nichts',
+    textNothingFiltered: 'Kein Filter',
+    textAll: 'Alle',
+    tooltipAllOpen: 'Alle aufklappen',
+    tooltipAllClose: 'Alle zuklappen',
+    tooltipAllAdd: 'Alle hinzufügen',
+    tooltipAllRemove: 'Alle entfernen',
+    defaultNameNoteText: 'Hinweis',
+    defaultNameDescription: 'Beschreibung',
+    defaultNameGroup: 'Gruppe',
+    defaultNamePosition: 'Position'
+};
+
+class ConfigurationTreeService {
+    constructor() {
+        this._textWords = { ...DEFAULT_TEXT_WORDS };
+        this._indent = '20px';
+        this._functionView = [];
+        this._selectedColor = '';
+        this._allowDblClick = true;
+        this._mouseAwareKeyboardControl = true;
+        this._addTableColumns = [];
+        this._isSelectionMode = false;
+        this._initiallySelectedElements = [];
+        this._customKeyboardOperationConfig = null;
+        this._listFilterFunc = [];
+        this.treeConfigSource = new BehaviorSubject(this.getDefaultConfiguration());
+        this.treeConfig$ = this.treeConfigSource.asObservable();
+    }
+    setTreeConfig(value) {
+        this.treeConfigSource.next(value);
+    }
+    getCurrentTreeConfig() {
+        return this.treeConfigSource.getValue();
+    }
+    getTextWordsFromConfig() {
+        return this.treeConfig$.pipe(map((config) => {
+            const configTextWords = config?.textWords === 'en' ? DEFAULT_TEXT_WORDS : config?.textWords === 'de' ? germanTextsAva : config?.textWords;
+            return { ...this._textWords, ...configTextWords };
+        }), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getIndentFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.indent || ''), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getFunctionViewFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.functionView || []), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getSelectedColorFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.selectedColor || ''), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getAllowDblClickFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.allowDblClick || false), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getAddTableColumnsFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.addTableColumns || []), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getIsSelectionModeFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.isSelectionMode || false), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getInitiallySelectedElementsViewFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.initiallySelectedElements || []), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getMouseAwareKeyboardControlFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.mouseAwareKeyboardControl || false), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getCustomKeyboardOperationConfigFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.customKeyboardOperationConfig || null), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getListFilterFuncFromConfig() {
+        return this.treeConfig$.pipe(map((config) => config?.listFilterFunc || []), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getDefaultConfiguration() {
+        return {
+            textWords: this._textWords,
+            indent: this._indent,
+            functionView: this._functionView,
+            selectedColor: this._selectedColor,
+            allowDblClick: this._allowDblClick,
+            addTableColumns: this._addTableColumns,
+            isSelectionMode: this._isSelectionMode,
+            initiallySelectedElements: this._initiallySelectedElements,
+            mouseAwareKeyboardControl: this._mouseAwareKeyboardControl,
+            customKeyboardOperationConfig: this._customKeyboardOperationConfig,
+            listFilterFunc: this._listFilterFunc
+        };
+    }
+}
+
 class ExpandParentGroupService {
     constructor() { }
     expandParentGroups(element, flatElements, expansionState) {
@@ -304,35 +406,6 @@ const DEFAULT_FILTERS = [
     }
 ];
 
-const DEFAULT_TEXT_WORDS = {
-    textSearch: 'Search',
-    textNothing: 'Nothing',
-    textNothingFiltered: 'No Filter',
-    textAll: 'All',
-    tooltipAllOpen: 'Expand all',
-    tooltipAllClose: 'Collapse all',
-    tooltipAllAdd: 'Add all',
-    tooltipAllRemove: 'Remove all',
-    defaultNameNoteText: 'Note Text',
-    defaultNameDescription: 'Description',
-    defaultNameGroup: 'Group',
-    defaultNamePosition: 'Position'
-};
-const germanTextsAva = {
-    textSearch: 'Suche',
-    textNothing: 'Nichts',
-    textNothingFiltered: 'Kein Filter',
-    textAll: 'Alle',
-    tooltipAllOpen: 'Alle aufklappen',
-    tooltipAllClose: 'Alle zuklappen',
-    tooltipAllAdd: 'Alle hinzufügen',
-    tooltipAllRemove: 'Alle entfernen',
-    defaultNameNoteText: 'Hinweis',
-    defaultNameDescription: 'Beschreibung',
-    defaultNameGroup: 'Gruppe',
-    defaultNamePosition: 'Position'
-};
-
 const defaults = {
     doubleClickTimeoutInMilliseconds: 300
 };
@@ -891,7 +964,7 @@ class SaveChangingViewDirective {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SaveChangingViewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FlatElementsService }, { token: i2.ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SaveChangingViewDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: FlatElementsService }, { token: ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: SaveChangingViewDirective, isStandalone: true, selector: "[saveChangingView]", inputs: { saveChangingView: "saveChangingView" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SaveChangingViewDirective, decorators: [{
@@ -899,7 +972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             args: [{
                     selector: '[saveChangingView]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FlatElementsService }, { type: i2.ConfigurationTreeService }], propDecorators: { saveChangingView: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: FlatElementsService }, { type: ConfigurationTreeService }], propDecorators: { saveChangingView: [{
                 type: Input
             }] } });
 
@@ -1071,7 +1144,7 @@ class TreeItemComponent {
     changeSelecting(element, isSelected) {
         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 }, { token: i2.ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }, { token: ConfigurationTreeService }], 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", isSelect: "isSelect", backgroundColor: "backgroundColor" }, viewQueries: [{ propertyName: "textElement", first: true, predicate: ["textItem"], descendants: true }], 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      [id]=\"element.id\"\n      >{{ element | elementIconName }}</mat-icon\n    >\n    @if (!isSelectionMode) {\n      <div\n        #textItem\n        class=\"ava-tree-item__text\"\n        [class.choose]=\"!isSelectionMode && element.id === preselectedElement?.id\"\n        [id]=\"element.id\"\n        saveChangingView=\"text\"\n        [class.select]=\"isSelect\"\n        [style.backgroundColor]=\"backgroundColor\"\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 (textWords$ | async; as textWords) {\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' || element.elementTypeDiscriminator === 'PositionDto') {\n      <ng-container> {{ element | elementItemNumber }} - {{ element | elementText: textWords }} </ng-container>\n    } @else {\n      <ng-container>{{ element | elementText: textWords }}</ng-container>\n    }\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}.ava-tree-item__text{background-color:#fefefe}.select{background-color:var(--mdc-filled-text-field-caret-color);color:#fff}\n"], dependencies: [{ kind: "directive", type: SaveChangingViewDirective, selector: "[saveChangingView]", inputs: ["saveChangingView"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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: i4.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.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: [{
@@ -1087,7 +1160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         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      [id]=\"element.id\"\n      >{{ element | elementIconName }}</mat-icon\n    >\n    @if (!isSelectionMode) {\n      <div\n        #textItem\n        class=\"ava-tree-item__text\"\n        [class.choose]=\"!isSelectionMode && element.id === preselectedElement?.id\"\n        [id]=\"element.id\"\n        saveChangingView=\"text\"\n        [class.select]=\"isSelect\"\n        [style.backgroundColor]=\"backgroundColor\"\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 (textWords$ | async; as textWords) {\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' || element.elementTypeDiscriminator === 'PositionDto') {\n      <ng-container> {{ element | elementItemNumber }} - {{ element | elementText: textWords }} </ng-container>\n    } @else {\n      <ng-container>{{ element | elementText: textWords }}</ng-container>\n    }\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}.ava-tree-item__text{background-color:#fefefe}.select{background-color:var(--mdc-filled-text-field-caret-color);color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: SelectElementService }, { type: TreeNodeSelectionService }, { type: i0.ChangeDetectorRef }, { type: i2.ConfigurationTreeService }], propDecorators: { element: [{
+        }], ctorParameters: () => [{ type: SelectElementService }, { type: TreeNodeSelectionService }, { type: i0.ChangeDetectorRef }, { type: ConfigurationTreeService }], propDecorators: { element: [{
                 type: Input
             }], expansionState: [{
                 type: Input
@@ -1125,13 +1198,13 @@ class ListStructureComponent {
         this.$destroy.next(true);
         this.$destroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ListStructureComponent, deps: [{ token: SelectElementService }, { token: i2.ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ListStructureComponent, deps: [{ token: SelectElementService }, { token: ConfigurationTreeService }], 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" }, 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$ | async) : ''\"\n      [id]=\"'hover-element-id-' + element.id\"\n      [avaHoverEffect]=\"avaItem\"\n    >\n      <ava-tree-item\n        #avaItem\n        [element]=\"element\"\n        [isSelect]=\"!isSelectionMode && element.id === selectedElement?.id\"\n        [backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? (selectedColor$ | async) : ''\"\n      ></ava-tree-item>\n    </div>\n  </ng-container>\n}\n", styles: [".select{background-color: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", "isSelect", "backgroundColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: HoverEffectDirective, selector: "[avaHoverEffect]", inputs: ["avaHoverEffect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ListStructureComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ava-list-structure', imports: [TreeItemComponent, AsyncPipe, HoverEffectDirective], 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$ | async) : ''\"\n      [id]=\"'hover-element-id-' + element.id\"\n      [avaHoverEffect]=\"avaItem\"\n    >\n      <ava-tree-item\n        #avaItem\n        [element]=\"element\"\n        [isSelect]=\"!isSelectionMode && element.id === selectedElement?.id\"\n        [backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? (selectedColor$ | async) : ''\"\n      ></ava-tree-item>\n    </div>\n  </ng-container>\n}\n", styles: [".select{background-color:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: SelectElementService }, { type: i2.ConfigurationTreeService }], propDecorators: { filteredElementList: [{
+        }], ctorParameters: () => [{ type: SelectElementService }, { type: ConfigurationTreeService }], propDecorators: { filteredElementList: [{
                 type: Input
             }], templates: [{
                 type: ViewChildren,
@@ -1242,7 +1315,7 @@ class TableStructureComponent {
             this.displayedColumns = [...columns];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableStructureComponent, deps: [{ token: SelectElementService }, { token: TreeNodeSelectionService }, { token: i0.ChangeDetectorRef }, { token: i2.ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableStructureComponent, deps: [{ token: SelectElementService }, { token: TreeNodeSelectionService }, { token: i0.ChangeDetectorRef }, { token: ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TableStructureComponent, isStandalone: true, selector: "ava-table-structure", inputs: { filteredElementList: "filteredElementList" }, ngImport: i0, template: "<table\n  mat-table\n  [dataSource]=\"filteredElementList\"\n>\n  <ng-container matColumnDef=\"icon\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    ></th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"table-cell-small-width\"\n    >\n      <mat-icon\n        class=\"icon-element\"\n        saveChangingView=\"icon\"\n        [id]=\"row.id\"\n      >\n        {{ row | elementIconName }}\n      </mat-icon>\n    </td>\n  </ng-container>\n\n  <ng-container matColumnDef=\"checkbox\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    ></th>\n    <td\n      mat-cell\n      *matCellDef=\"let element\"\n      class=\"table-cell-small-width\"\n    >\n      <mat-checkbox\n        class=\"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      </mat-checkbox>\n    </td>\n  </ng-container>\n\n  <ng-container matColumnDef=\"itemNumber\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    >\n      OZ\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      [style.width.ch]=\"row?.itemNumber?.stringRepresentation.length\"\n    >\n      <div\n        class=\"text-element\"\n        saveChangingView=\"text\"\n        [id]=\"row.id\"\n      >\n        {{ row | elementItemNumber }}\n      </div>\n    </td>\n  </ng-container>\n\n  <ng-container matColumnDef=\"text\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    >\n      Text\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"table-text\"\n    >\n      @if (textWords$ | async; as textWords) {\n        <div\n          class=\"text-element\"\n          saveChangingView=\"text\"\n          [id]=\"row.id\"\n        >\n          {{ row | elementText: textWords }}\n        </div>\n      }\n    </td>\n  </ng-container>\n  @for (oneColumn of addTableColumns$ | async; track oneColumn.name) {\n    <ng-container>\n      <ng-container matColumnDef=\"{{ oneColumn.name }}\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n        >\n          {{ oneColumn.title }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n        >\n          <div\n            [style.textAlign]=\"oneColumn.align\"\n            saveChangingView=\"text\"\n            [id]=\"row.id\"\n          >\n            {{ !oneColumn.numberFormat ? row[oneColumn.name] : (row[oneColumn.name] | number: oneColumn.numberFormat) }}\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n  }\n\n  <tr\n    mat-header-row\n    *matHeaderRowDef=\"displayedColumns; sticky: true\"\n    class=\"mat-header-row\"\n  ></tr>\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: displayedColumns\"\n    (click)=\"select(row)\"\n    (dblclick)=\"dblSelect(row)\"\n    (contextmenu)=\"openContextMenu($event, row)\"\n    [ngClass]=\"{\n      choose: !isSelectionMode && row.id === preselectedElement?.id,\n      select: !isSelectionMode && row.id === selectedElement?.id,\n    }\"\n    [style.background]=\"!isSelectionMode && row.id === selectedElement?.id ? (selectedColor$ | async) : ''\"\n    [id]=\"row.id\"\n  ></tr>\n</table>\n", styles: ["table{width:100%}table tr.mat-mdc-row,table tr.mat-mdc-header-row{height:24px}table tr input{box-sizing:border-box;padding:0 3px;outline:none;border:none;height:20px;width:calc(100% - 2px)}table tr input:focus{background:#fff!important}table tr .right{text-align:right}table tr td,table tr th{border-right:1px solid #777;border-bottom:1px solid #777;padding:0}table tr td:first-child,table tr th:first-child{border-left:1px solid #777}table tr td.min-width,table tr th.min-width{width:12ch;min-width:12ch}table tr td div,table tr th div{padding:0 3px}table tr th{border-top:1px solid #777;padding:0 3px}.table-text{overflow-x:hidden;position:relative}.table-text div{position:absolute;top:50%;left:0;white-space:nowrap;transform:translateY(-50%)}.select{background:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}.choose div{color:red!important}::ng-deep .checkbox .mdc-form-field .mdc-checkbox{padding:0;flex:0 0 16px;width:16px;height:16px}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control{width:100%;height:100%}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__ripple{opacity:0!important}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:100%;height:100%}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff!important}::ng-deep .checkbox .mdc-form-field>label{line-height:24px;padding-left:8px;-webkit-user-select:none;user-select:none}.text-element{-webkit-user-select:none;user-select:none}.table-cell-small-width{width:24px;min-width:24px;position:relative;text-align:center}.table-cell-small-width .icon-element{position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElementTextPipe, name: "elementText" }, { kind: "pipe", type: ElementItemNumberPipe, name: "elementItemNumber" }, { kind: "pipe", type: ElementIconNamePipe, name: "elementIconName" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SaveChangingViewDirective, selector: "[saveChangingView]", inputs: ["saveChangingView"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableStructureComponent, decorators: [{
@@ -1260,7 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         FormsModule,
                         SaveChangingViewDirective
                     ], template: "<table\n  mat-table\n  [dataSource]=\"filteredElementList\"\n>\n  <ng-container matColumnDef=\"icon\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    ></th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"table-cell-small-width\"\n    >\n      <mat-icon\n        class=\"icon-element\"\n        saveChangingView=\"icon\"\n        [id]=\"row.id\"\n      >\n        {{ row | elementIconName }}\n      </mat-icon>\n    </td>\n  </ng-container>\n\n  <ng-container matColumnDef=\"checkbox\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    ></th>\n    <td\n      mat-cell\n      *matCellDef=\"let element\"\n      class=\"table-cell-small-width\"\n    >\n      <mat-checkbox\n        class=\"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      </mat-checkbox>\n    </td>\n  </ng-container>\n\n  <ng-container matColumnDef=\"itemNumber\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    >\n      OZ\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      [style.width.ch]=\"row?.itemNumber?.stringRepresentation.length\"\n    >\n      <div\n        class=\"text-element\"\n        saveChangingView=\"text\"\n        [id]=\"row.id\"\n      >\n        {{ row | elementItemNumber }}\n      </div>\n    </td>\n  </ng-container>\n\n  <ng-container matColumnDef=\"text\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n    >\n      Text\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"table-text\"\n    >\n      @if (textWords$ | async; as textWords) {\n        <div\n          class=\"text-element\"\n          saveChangingView=\"text\"\n          [id]=\"row.id\"\n        >\n          {{ row | elementText: textWords }}\n        </div>\n      }\n    </td>\n  </ng-container>\n  @for (oneColumn of addTableColumns$ | async; track oneColumn.name) {\n    <ng-container>\n      <ng-container matColumnDef=\"{{ oneColumn.name }}\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n        >\n          {{ oneColumn.title }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n        >\n          <div\n            [style.textAlign]=\"oneColumn.align\"\n            saveChangingView=\"text\"\n            [id]=\"row.id\"\n          >\n            {{ !oneColumn.numberFormat ? row[oneColumn.name] : (row[oneColumn.name] | number: oneColumn.numberFormat) }}\n          </div>\n        </td>\n      </ng-container>\n    </ng-container>\n  }\n\n  <tr\n    mat-header-row\n    *matHeaderRowDef=\"displayedColumns; sticky: true\"\n    class=\"mat-header-row\"\n  ></tr>\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: displayedColumns\"\n    (click)=\"select(row)\"\n    (dblclick)=\"dblSelect(row)\"\n    (contextmenu)=\"openContextMenu($event, row)\"\n    [ngClass]=\"{\n      choose: !isSelectionMode && row.id === preselectedElement?.id,\n      select: !isSelectionMode && row.id === selectedElement?.id,\n    }\"\n    [style.background]=\"!isSelectionMode && row.id === selectedElement?.id ? (selectedColor$ | async) : ''\"\n    [id]=\"row.id\"\n  ></tr>\n</table>\n", styles: ["table{width:100%}table tr.mat-mdc-row,table tr.mat-mdc-header-row{height:24px}table tr input{box-sizing:border-box;padding:0 3px;outline:none;border:none;height:20px;width:calc(100% - 2px)}table tr input:focus{background:#fff!important}table tr .right{text-align:right}table tr td,table tr th{border-right:1px solid #777;border-bottom:1px solid #777;padding:0}table tr td:first-child,table tr th:first-child{border-left:1px solid #777}table tr td.min-width,table tr th.min-width{width:12ch;min-width:12ch}table tr td div,table tr th div{padding:0 3px}table tr th{border-top:1px solid #777;padding:0 3px}.table-text{overflow-x:hidden;position:relative}.table-text div{position:absolute;top:50%;left:0;white-space:nowrap;transform:translateY(-50%)}.select{background:var(--mdc-filled-text-field-caret-color);color:#fff}.select *{color:#fff}.choose div{color:red!important}::ng-deep .checkbox .mdc-form-field .mdc-checkbox{padding:0;flex:0 0 16px;width:16px;height:16px}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control{width:100%;height:100%}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__ripple{opacity:0!important}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background{top:0;left:0;width:100%;height:100%}::ng-deep .checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff!important}::ng-deep .checkbox .mdc-form-field>label{line-height:24px;padding-left:8px;-webkit-user-select:none;user-select:none}.text-element{-webkit-user-select:none;user-select:none}.table-cell-small-width{width:24px;min-width:24px;position:relative;text-align:center}.table-cell-small-width .icon-element{position:absolute;top:0;left:0}\n"] }]
-        }], ctorParameters: () => [{ type: SelectElementService }, { type: TreeNodeSelectionService }, { type: i0.ChangeDetectorRef }, { type: i2.ConfigurationTreeService }], propDecorators: { filteredElementList: [{
+        }], ctorParameters: () => [{ type: SelectElementService }, { type: TreeNodeSelectionService }, { type: i0.ChangeDetectorRef }, { type: ConfigurationTreeService }], propDecorators: { filteredElementList: [{
                 type: Input
             }] } });
 
@@ -1312,13 +1385,13 @@ class TreeNodeComponent {
     expand(element) {
         this.expansionState[element.id] = !this.expansionState[element.id];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeNodeComponent, deps: [{ token: SelectElementService }, { token: i2.ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TreeNodeComponent, deps: [{ token: SelectElementService }, { token: ConfigurationTreeService }], 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", expansionState: "expansionState" }, ngImport: i0, template: "@for (element of elementList; track element.id) {\n  <ng-container>\n    <div\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$ | async) : ''\"\n      [avaHoverEffect]=\"avaItem\"\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          #avaItem\n          [element]=\"element\"\n          [expansionState]=\"expansionState\"\n          [isSelect]=\"!isSelectionMode && element.id === selectedElement?.id\"\n          [backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? (selectedColor$ | async) : ''\"\n        ></ava-tree-item>\n      </div>\n    </div>\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' && expansionState[element.id]) {\n      <div [style.paddingLeft]=\"indent$ | async\">\n        <ava-tree-node\n          [elementList]=\"element | groupChildElements\"\n          [expansionState]=\"expansionState\"\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", "expansionState"] }, { kind: "component", type: TreeItemComponent, selector: "ava-tree-item", inputs: ["element", "expansionState", "isSelect", "backgroundColor"] }, { kind: "pipe", type: GroupChildElementsPipe, name: "groupChildElements" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: HoverEffectDirective, selector: "[avaHoverEffect]", inputs: ["avaHoverEffect"] }] }); }
 }
 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, AsyncPipe, HoverEffectDirective], template: "@for (element of elementList; track element.id) {\n  <ng-container>\n    <div\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$ | async) : ''\"\n      [avaHoverEffect]=\"avaItem\"\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          #avaItem\n          [element]=\"element\"\n          [expansionState]=\"expansionState\"\n          [isSelect]=\"!isSelectionMode && element.id === selectedElement?.id\"\n          [backgroundColor]=\"!isSelectionMode && element.id === selectedElement?.id ? (selectedColor$ | async) : ''\"\n        ></ava-tree-item>\n      </div>\n    </div>\n    @if (element.elementTypeDiscriminator === 'ServiceSpecificationGroupDto' && expansionState[element.id]) {\n      <div [style.paddingLeft]=\"indent$ | async\">\n        <ava-tree-node\n          [elementList]=\"element | groupChildElements\"\n          [expansionState]=\"expansionState\"\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 }, { type: i2.ConfigurationTreeService }], propDecorators: { elementList: [{
+        }], ctorParameters: () => [{ type: SelectElementService }, { type: ConfigurationTreeService }], propDecorators: { elementList: [{
                 type: Input
             }], expansionState: [{
                 type: Input
@@ -1723,7 +1796,7 @@ class AvaTreeComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AvaTreeComponent, deps: [{ token: FlatElementsService, self: true }, { token: SelectElementService, self: true }, { token: TreeNodeSelectionService, self: true }, { token: ExpandParentGroupService, self: true }, { token: KeyboardOperationService, self: true }, { token: i0.NgZone }, { token: i2.ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AvaTreeComponent, deps: [{ token: FlatElementsService, self: true }, { token: SelectElementService, self: true }, { token: TreeNodeSelectionService, self: true }, { token: ExpandParentGroupService, self: true }, { token: KeyboardOperationService, self: true }, { token: i0.NgZone }, { token: ConfigurationTreeService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: AvaTreeComponent, isStandalone: true, selector: "ava-tree", inputs: { project: "project", expansionState: "expansionState", selectedNodeId: "selectedNodeId", modeView: "modeView", config: "config" }, outputs: { selectClick: "selectClick", selectDblClick: "selectDblClick", contextMenuEvent: "contextMenuEvent", selectedElementsChanged: "selectedElementsChanged" }, providers: [
             FlatElementsService,
             SelectElementService,
@@ -1764,7 +1837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                     type: Self
                 }] }, { type: KeyboardOperationService, decorators: [{
                     type: Self
-                }] }, { type: i0.NgZone }, { type: i2.ConfigurationTreeService }], propDecorators: { project: [{
+                }] }, { type: i0.NgZone }, { type: ConfigurationTreeService }], propDecorators: { project: [{
                 type: Input
             }], expansionState: [{
                 type: Input
@@ -1793,96 +1866,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                 args: ['avaTreeFilterInput']
             }] } });
 
-class InvoiceDisplayComponent {
-    /**
-     * You can supply a map of strings to be used for the text in the tree. This allows you to translate
-     * the text in the tree to other languages.
-     * {
-     *   invoiceTitle: string;
-     *   vatId: string;
-     *   detailsInvoiceNumber: string;
-     *   detailsInvoiceDate: string;
-     *   detailsPaymentDueDate: string;
-     *   detailsCurrencyCode: string;
-     *   detailsPaymentTerms: string;
-     *   referencesTopic: string;
-     *   referencesBuyerReference: string;
-     *   referencesProjectReference: string;
-     *   referencesContractReference: string;
-     *   referencesPurchaseOrderReference: string;
-     *   referencesSalesOrderReference: string;
-     *   referencesReceivingAdviceReference: string;
-     *   referencesDispatchAdviceReference: string;
-     *   referencesTenderOrLotReference: string;
-     *   referencesInvoicedObjectIdentifier: string;
-     *   tableHeadDescription: string;
-     *   tableHeadQuantity: string;
-     *   tableHeadUnit: string;
-     *   tableHeadNetPrice: string;
-     *   tableHeadNetAmount: string;
-     *   totalsTopic: string;
-     *   totalsTotalNet: string;
-     *   totalsTotalAllowances: string;
-     *   totalsTotalCharges: string;
-     *   totalsTotalAfterDeductions: string;
-     *   totalsTotalVatAmount: string;
-     *   totalsTotalGross: string;
-     *   totalsAlreadyPaidTotal: string;
-     *   totalsTotalToBePaid: string;
-     *   instructionsTopic: string;
-     *   instructionsAccountIdentifier: string;
-     *   instructionsAccountName: string;
-     *   instructionsServiceProviderIdentifier: string;
-     *   notesTopic: string;
-     *   attachmentsHeading: string;
-     *   attachmentsName: string;
-     *   attachmentsDescription: string;
-     *   attachmentsUrl: string;
-     *   attachmentsDataSize: string;
-     *   attachmentsMimeType: string;
-     *   attachmentsFileName: string;
-     *   attachmentsDownloadButton: string;
-     *
-     * }
-     */
-    set config(configObject) {
-        if (this.configurationInvoiceService.getCurrentInvoiceConfig()) {
-            const config = { ...this.configurationInvoiceService.getCurrentInvoiceConfig(), ...configObject };
-            this.configurationInvoiceService.setInvoiceConfig(config);
-        }
-    }
-    constructor(configurationInvoiceService) {
-        this.configurationInvoiceService = configurationInvoiceService;
-        // TODO remove type any after TODO under will be resolved
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.invoice = input.required();
-        this.textWords$ = this.configurationInvoiceService.getTextWordsFromConfig();
-        /**TODO:  For setting invoice instead:
-         * <ava-invoice-display id="invoice"></ava-invoice-display>
-         * invoice = document.getElementById('invoice');
-         * invoice.invoice = INVOICE;
-         * we should pass value to global window variable
-         * window['InvoiceGlobalVariable'] = INVOICE;
-         * Temporary solution until the problem of setting the value for InputSignal is solved. See this PR https://github.com/angular/angular/pull/55067
-         */
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (window['InvoiceGlobalVariable']) {
-            this.invoice = () => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                return window['InvoiceGlobalVariable'];
-            };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDisplayComponent, deps: [{ token: i1.ConfigurationInvoiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InvoiceDisplayComponent, isStandalone: true, selector: "ava-invoice-display", inputs: { invoice: { classPropertyName: "invoice", publicName: "invoice", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null } }, providers: [ConfigurationInvoiceService], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n  <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        <mat-divider></mat-divider>\n        @if (invoice().buyer?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n      <div class=\"invoice-details\">\n        <h2 [class.header]=\"textWords.invoiceBuyerTitle.trim() || textWords.invoiceSellerTitle.trim()\"></h2>\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        <mat-divider></mat-divider>\n        @if (invoice().seller?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().seller?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().seller?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().seller?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n    </header>\n    <mat-divider></mat-divider>\n    <div class=\"invoice-info\">\n      <section class=\"invoice-references\">\n        @if (textWords.referencesTopic) {\n          <h2 class=\"info-title\">{{ textWords.referencesTopic }}</h2>\n        }\n        @if (invoice().references?.buyerReference) {\n          <p>\n            <strong>{{ textWords.referencesBuyerReference }}: </strong>\n            <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      @if (invoice().deliveryInformation) {\n        <section class=\"invoice-delivery\">\n          <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n          @if (invoice().deliveryInformation?.deliverToName) {\n            <p>\n              <strong>{{ textWords.deliverToName }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToName }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliverToLocationIdentifier) {\n            <p>\n              <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToLocationIdentifier }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryDate) {\n            <p>\n              <strong>{{ textWords.deliveryDate }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryAddress) {\n            <p>\n              <strong>{{ textWords.deliveryAddress }}: </strong>\n              <span>\n                @if (invoice().deliveryInformation?.deliveryAddress?.address) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.address }}</p>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.city) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.city }},</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.zipCode) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.countryCode) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                }\n              </span>\n            </p>\n          }\n        </section>\n      }\n    </div>\n\n    <table class=\"invoice-table\">\n      <thead>\n        <tr>\n          <th>#</th>\n          <th>{{ textWords.tableHeadDescription }}</th>\n          <th>{{ textWords.tableHeadQuantity }}</th>\n          <th>{{ textWords.tableHeadUnit }}</th>\n          <th>{{ textWords.tableHeadNetPrice }}</th>\n          <th>{{ textWords.tableHeadNetAmount }}</th>\n          <th>{{ textWords.vat }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of invoice().lineItems; track item; let i = $index) {\n          <tr>\n            <td>{{ i + 1 }}</td>\n            <td>{{ item.itemInformation?.description }}</td>\n            <td>{{ item.quantity }}</td>\n            <td>{{ item.unitCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.netAmount | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.vatInformation[0]?.vatRate | percent: '1.0-2' }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <div class=\"addition-info\">\n      <section class=\"invoice-totals\">\n        <h2 class=\"info-title\">{{ textWords.totalsTopic }}</h2>\n\n        @if (invoice().totals?.totalNet) {\n          <p>\n            <strong>{{ textWords.totalsTotalNet }}: </strong>\n            <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      <section class=\"taxes\">\n        <h2 class=\"info-title\">{{ textWords.taxesHeading }}</h2>\n        <table class=\"tax-report-table\">\n          <thead>\n            <tr>\n              <th>{{ textWords.vat }}</th>\n              <th>{{ textWords.totalsTotalNet }}</th>\n              <th>{{ textWords.totalsTotalVatAmount }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (tax of invoice().vatBreakdown; track tax.taxRate) {\n              <tr>\n                <td class=\"currency-table-cell\">\n                  @if (tax.taxRate) {\n                    <span>{{ tax.taxRate | percent: '1.0-2' }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.netTaxableAmount) {\n                    <span>{{ tax.netTaxableAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.vatAmount) {\n                    <span>{{ tax.vatAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </section>\n\n      <section class=\"payment-instructions\">\n        <h2 class=\"info-title\">{{ textWords.instructionsTopic }}</h2>\n        @if (invoice().paymentInstructions?.description) {\n          <p>{{ invoice().paymentInstructions?.description }}</p>\n        }\n        @for (means of invoice().paymentInstructions?.paymentMeans; track means) {\n          <div>\n            @if (means.accountIdentifier) {\n              <p>\n                <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n                <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    @if (invoice().documents?.length) {\n      <section class=\"invoice-attachments\">\n        <ava-invoice-documents [documents]=\"invoice().documents\"></ava-invoice-documents>\n      </section>\n    }\n  </div>\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.seller-info,.invoice-delivery,.payment-instructions{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes,.invoice-delivery{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:12px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}\n"], dependencies: [{ kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: InvoiceDocumentsComponent, selector: "ava-invoice-documents", inputs: ["documents"] }], 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, PercentPipe, AsyncPipe, MatDividerModule, InvoiceDocumentsComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigurationInvoiceService], template: "@if (textWords$ | async; as textWords) {\n  <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        <mat-divider></mat-divider>\n        @if (invoice().buyer?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n      <div class=\"invoice-details\">\n        <h2 [class.header]=\"textWords.invoiceBuyerTitle.trim() || textWords.invoiceSellerTitle.trim()\"></h2>\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        <mat-divider></mat-divider>\n        @if (invoice().seller?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().seller?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().seller?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().seller?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n    </header>\n    <mat-divider></mat-divider>\n    <div class=\"invoice-info\">\n      <section class=\"invoice-references\">\n        @if (textWords.referencesTopic) {\n          <h2 class=\"info-title\">{{ textWords.referencesTopic }}</h2>\n        }\n        @if (invoice().references?.buyerReference) {\n          <p>\n            <strong>{{ textWords.referencesBuyerReference }}: </strong>\n            <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      @if (invoice().deliveryInformation) {\n        <section class=\"invoice-delivery\">\n          <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n          @if (invoice().deliveryInformation?.deliverToName) {\n            <p>\n              <strong>{{ textWords.deliverToName }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToName }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliverToLocationIdentifier) {\n            <p>\n              <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToLocationIdentifier }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryDate) {\n            <p>\n              <strong>{{ textWords.deliveryDate }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryAddress) {\n            <p>\n              <strong>{{ textWords.deliveryAddress }}: </strong>\n              <span>\n                @if (invoice().deliveryInformation?.deliveryAddress?.address) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.address }}</p>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.city) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.city }},</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.zipCode) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.countryCode) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                }\n              </span>\n            </p>\n          }\n        </section>\n      }\n    </div>\n\n    <table class=\"invoice-table\">\n      <thead>\n        <tr>\n          <th>#</th>\n          <th>{{ textWords.tableHeadDescription }}</th>\n          <th>{{ textWords.tableHeadQuantity }}</th>\n          <th>{{ textWords.tableHeadUnit }}</th>\n          <th>{{ textWords.tableHeadNetPrice }}</th>\n          <th>{{ textWords.tableHeadNetAmount }}</th>\n          <th>{{ textWords.vat }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of invoice().lineItems; track item; let i = $index) {\n          <tr>\n            <td>{{ i + 1 }}</td>\n            <td>{{ item.itemInformation?.description }}</td>\n            <td>{{ item.quantity }}</td>\n            <td>{{ item.unitCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.netAmount | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.vatInformation[0]?.vatRate | percent: '1.0-2' }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <div class=\"addition-info\">\n      <section class=\"invoice-totals\">\n        <h2 class=\"info-title\">{{ textWords.totalsTopic }}</h2>\n\n        @if (invoice().totals?.totalNet) {\n          <p>\n            <strong>{{ textWords.totalsTotalNet }}: </strong>\n            <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      <section class=\"taxes\">\n        <h2 class=\"info-title\">{{ textWords.taxesHeading }}</h2>\n        <table class=\"tax-report-table\">\n          <thead>\n            <tr>\n              <th>{{ textWords.vat }}</th>\n              <th>{{ textWords.totalsTotalNet }}</th>\n              <th>{{ textWords.totalsTotalVatAmount }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (tax of invoice().vatBreakdown; track tax.taxRate) {\n              <tr>\n                <td class=\"currency-table-cell\">\n                  @if (tax.taxRate) {\n                    <span>{{ tax.taxRate | percent: '1.0-2' }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.netTaxableAmount) {\n                    <span>{{ tax.netTaxableAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.vatAmount) {\n                    <span>{{ tax.vatAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </section>\n\n      <section class=\"payment-instructions\">\n        <h2 class=\"info-title\">{{ textWords.instructionsTopic }}</h2>\n        @if (invoice().paymentInstructions?.description) {\n          <p>{{ invoice().paymentInstructions?.description }}</p>\n        }\n        @for (means of invoice().paymentInstructions?.paymentMeans; track means) {\n          <div>\n            @if (means.accountIdentifier) {\n              <p>\n                <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n                <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    @if (invoice().documents?.length) {\n      <section class=\"invoice-attachments\">\n        <ava-invoice-documents [documents]=\"invoice().documents\"></ava-invoice-documents>\n      </section>\n    }\n  </div>\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.seller-info,.invoice-delivery,.payment-instructions{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes,.invoice-delivery{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:12px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ConfigurationInvoiceService }], propDecorators: { config: [{
-                type: Input
-            }] } });
-
 const DEFAULT_TEXT_WORD_INVOICE = {
     invoiceTitle: 'Invoice',
     invoiceBuyerTitle: 'Receiver',
@@ -2002,6 +1985,47 @@ const germanTextsInvoice = {
     taxesHeading: 'Steuer'
 };
 
+class ConfigurationInvoiceService {
+    constructor() {
+        this._textWords = null;
+        this._pdfViewEnabled = false;
+        this._language = 'en';
+        this.invoiceConfigSource = new BehaviorSubject(this.getDefaultInvoiceConfiguration());
+        this.invoiceConfig$ = this.invoiceConfigSource.asObservable();
+        this.getLanguageFromConfig()
+            .pipe(skip(1), take(1))
+            .subscribe((language) => {
+            this._textWords = this.getDefaulTextWords(language);
+            this.setInvoiceConfig({ textWords: this._textWords, ...this.getCurrentInvoiceConfig() });
+        });
+    }
+    setInvoiceConfig(value) {
+        this.invoiceConfigSource.next(value);
+    }
+    getCurrentInvoiceConfig() {
+        return this.invoiceConfigSource.getValue();
+    }
+    getTextWordsFromConfig() {
+        return this.invoiceConfig$.pipe(map((config) => config?.textWords || null), map((textWords) => (textWords === null ? this._textWords : { ...this._textWords, ...textWords })), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getPdfViewEnabledFromConfig() {
+        return this.invoiceConfig$.pipe(map((config) => (config === null ? false : config.pdfViewEnabled || false)), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    }
+    getLanguageFromConfig() {
+        return this.invoiceConfig$.pipe(map((c) => c.language || 'en'));
+    }
+    getDefaultInvoiceConfiguration() {
+        return {
+            textWords: null,
+            pdfViewEnabled: this._pdfViewEnabled,
+            language: this._language
+        };
+    }
+    getDefaulTextWords(language) {
+        return language === 'en' ? { ...DEFAULT_TEXT_WORD_INVOICE } : { ...germanTextsInvoice };
+    }
+}
+
 /** Type of the invoice */
 var InvoiceType;
 (function (InvoiceType) {
@@ -2047,6 +2071,199 @@ var SourceType;
     SourceType[SourceType["Cii"] = 2] = "Cii";
 })(SourceType || (SourceType = {}));
 
+class InvoiceAttachmentMimeTypePipe {
+    transform(attachmentMimeType) {
+        switch (attachmentMimeType) {
+            case AttachmentMimeType.Pdf:
+                return 'PDF';
+            case AttachmentMimeType.Png:
+                return 'PNG';
+            case AttachmentMimeType.Jpeg:
+                return 'JPEG';
+            case AttachmentMimeType.Csv:
+                return 'CSV';
+            case AttachmentMimeType.Excel:
+                return 'Excel';
+            case AttachmentMimeType.OpenOfficeSpreadsheet:
+                return 'Open Office Spreadsheet';
+            case AttachmentMimeType.Unknown:
+            default:
+                return 'Unknown';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceAttachmentMimeTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: InvoiceAttachmentMimeTypePipe, isStandalone: true, name: "invoiceAttachmentMimeType" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceAttachmentMimeTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'invoiceAttachmentMimeType',
+                    standalone: true
+                }]
+        }] });
+
+class InvoiceDocumentsComponent {
+    constructor(configurationInvoiceService) {
+        this.configurationInvoiceService = configurationInvoiceService;
+        this.documents = [];
+        this.documentsPanel = null;
+        this.destroyRef = inject(DestroyRef);
+        this.textWords$ = this.configurationInvoiceService.getTextWordsFromConfig();
+        this.pdfViewEnabled = false;
+    }
+    ngOnInit() {
+        this.configurationInvoiceService
+            .getPdfViewEnabledFromConfig()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((pdfViewEnabled) => {
+            this.pdfViewEnabled = pdfViewEnabled;
+        });
+    }
+    ngAfterViewInit() {
+        if (this.documentsPanel && this.pdfViewEnabled) {
+            // In a static PDF view, we always want to open the documents panel
+            this.documentsPanel.open();
+        }
+    }
+    download(documentValue) {
+        if (documentValue.documentBase64) {
+            this.downloadAny(documentValue);
+        }
+        else {
+            this.downloadLink(documentValue);
+        }
+    }
+    downloadAny(documentValue) {
+        if (documentValue.documentBase64) {
+            const byteCharacters = atob(documentValue.documentBase64);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: 'application/octet-stream' });
+            this.saveAs(blob, documentValue.fileName);
+        }
+    }
+    async downloadLink(documentValue) {
+        try {
+            const response = await fetch(documentValue.externalDocumentUrl);
+            const blob = await response.blob();
+            this.saveAs(blob, documentValue.fileName);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    saveAs(blob, fileName) {
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = fileName;
+        link.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDocumentsComponent, deps: [{ token: ConfigurationInvoiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InvoiceDocumentsComponent, isStandalone: true, selector: "ava-invoice-documents", inputs: { documents: "documents" }, viewQueries: [{ propertyName: "documentsPanel", first: true, predicate: ["documentsPanel"], descendants: true }], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n  <mat-accordion>\n    <mat-expansion-panel\n      [hideToggle]=\"pdfViewEnabled\"\n      #documentsPanel\n    >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          {{ textWords.attachmentsHeading }}\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (document of documents; track document.documentReference) {\n        <div class=\"document\">\n          @if (document.documentReference) {\n            <div>\n              <strong>{{ textWords.attachmentsName }}: </strong>\n              <span>{{ document.documentReference }}</span>\n            </div>\n          }\n          @if (document.description) {\n            <div>\n              <strong>{{ textWords.attachmentsDescription }}: </strong>\n              <span>{{ document.description }}</span>\n            </div>\n          }\n          @if (document.externalDocumentUrl) {\n            <div>\n              <strong>{{ textWords.attachmentsUrl }}: </strong>\n              <span>{{ document.externalDocumentUrl }}</span>\n            </div>\n          } @else if (document.documentBase64) {\n            <div>\n              <strong>{{ textWords.attachmentsDataSize }}: </strong>\n              <span>{{ document.documentBase64.length }}</span>\n            </div>\n\n            @if (document.documentMimeType) {\n              <div>\n                <strong>{{ textWords.attachmentsMimeType }}: </strong>\n                <span>{{ document.documentMimeType | invoiceAttachmentMimeType }}</span>\n              </div>\n            }\n          }\n          @if (document.fileName) {\n            <div>\n              <strong>{{ textWords.attachmentsFileName }}: </strong>\n              <span>{{ document.fileName }}</span>\n            </div>\n          }\n          @if (!pdfViewEnabled) {\n            <button\n              mat-raised-button\n              color=\"primary\"\n              (click)=\"download(document)\"\n              [disabled]=\"!document.externalDocumentUrl && !document.documentBase64\"\n            >\n              {{ textWords.attachmentsDownloadButton }}\n            </button>\n          }\n        </div>\n      }\n    </mat-expansion-panel>\n  </mat-accordion>\n}\n", styles: [".document{padding-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: InvoiceAttachmentMimeTypePipe, name: "invoiceAttachmentMimeType" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDocumentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ava-invoice-documents', imports: [MatExpansionModule, MatButtonModule, InvoiceAttachmentMimeTypePipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (textWords$ | async; as textWords) {\n  <mat-accordion>\n    <mat-expansion-panel\n      [hideToggle]=\"pdfViewEnabled\"\n      #documentsPanel\n    >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          {{ textWords.attachmentsHeading }}\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (document of documents; track document.documentReference) {\n        <div class=\"document\">\n          @if (document.documentReference) {\n            <div>\n              <strong>{{ textWords.attachmentsName }}: </strong>\n              <span>{{ document.documentReference }}</span>\n            </div>\n          }\n          @if (document.description) {\n            <div>\n              <strong>{{ textWords.attachmentsDescription }}: </strong>\n              <span>{{ document.description }}</span>\n            </div>\n          }\n          @if (document.externalDocumentUrl) {\n            <div>\n              <strong>{{ textWords.attachmentsUrl }}: </strong>\n              <span>{{ document.externalDocumentUrl }}</span>\n            </div>\n          } @else if (document.documentBase64) {\n            <div>\n              <strong>{{ textWords.attachmentsDataSize }}: </strong>\n              <span>{{ document.documentBase64.length }}</span>\n            </div>\n\n            @if (document.documentMimeType) {\n              <div>\n                <strong>{{ textWords.attachmentsMimeType }}: </strong>\n                <span>{{ document.documentMimeType | invoiceAttachmentMimeType }}</span>\n              </div>\n            }\n          }\n          @if (document.fileName) {\n            <div>\n              <strong>{{ textWords.attachmentsFileName }}: </strong>\n              <span>{{ document.fileName }}</span>\n            </div>\n          }\n          @if (!pdfViewEnabled) {\n            <button\n              mat-raised-button\n              color=\"primary\"\n              (click)=\"download(document)\"\n              [disabled]=\"!document.externalDocumentUrl && !document.documentBase64\"\n            >\n              {{ textWords.attachmentsDownloadButton }}\n            </button>\n          }\n        </div>\n      }\n    </mat-expansion-panel>\n  </mat-accordion>\n}\n", styles: [".document{padding-bottom:15px}\n"] }]
+        }], ctorParameters: () => [{ type: ConfigurationInvoiceService }], propDecorators: { documents: [{
+                type: Input
+            }], documentsPanel: [{
+                type: ViewChild,
+                args: ['documentsPanel']
+            }] } });
+
+class InvoiceDisplayComponent {
+    /**
+     * You can supply a map of strings to be used for the text in the tree. This allows you to translate
+     * the text in the tree to other languages.
+     * {
+     *   invoiceTitle: string;
+     *   vatId: string;
+     *   detailsInvoiceNumber: string;
+     *   detailsInvoiceDate: string;
+     *   detailsPaymentDueDate: string;
+     *   detailsCurrencyCode: string;
+     *   detailsPaymentTerms: string;
+     *   referencesTopic: string;
+     *   referencesBuyerReference: string;
+     *   referencesProjectReference: string;
+     *   referencesContractReference: string;
+     *   referencesPurchaseOrderReference: string;
+     *   referencesSalesOrderReference: string;
+     *   referencesReceivingAdviceReference: string;
+     *   referencesDispatchAdviceReference: string;
+     *   referencesTenderOrLotReference: string;
+     *   referencesInvoicedObjectIdentifier: string;
+     *   tableHeadDescription: string;
+     *   tableHeadQuantity: string;
+     *   tableHeadUnit: string;
+     *   tableHeadNetPrice: string;
+     *   tableHeadNetAmount: string;
+     *   totalsTopic: string;
+     *   totalsTotalNet: string;
+     *   totalsTotalAllowances: string;
+     *   totalsTotalCharges: string;
+     *   totalsTotalAfterDeductions: string;
+     *   totalsTotalVatAmount: string;
+     *   totalsTotalGross: string;
+     *   totalsAlreadyPaidTotal: string;
+     *   totalsTotalToBePaid: string;
+     *   instructionsTopic: string;
+     *   instructionsAccountIdentifier: string;
+     *   instructionsAccountName: string;
+     *   instructionsServiceProviderIdentifier: string;
+     *   notesTopic: string;
+     *   attachmentsHeading: string;
+     *   attachmentsName: string;
+     *   attachmentsDescription: string;
+     *   attachmentsUrl: string;
+     *   attachmentsDataSize: string;
+     *   attachmentsMimeType: string;
+     *   attachmentsFileName: string;
+     *   attachmentsDownloadButton: string;
+     *
+     * }
+     */
+    set config(configObject) {
+        if (this.configurationInvoiceService.getCurrentInvoiceConfig()) {
+            const config = { ...this.configurationInvoiceService.getCurrentInvoiceConfig(), ...configObject };
+            this.configurationInvoiceService.setInvoiceConfig(config);
+        }
+    }
+    constructor(configurationInvoiceService) {
+        this.configurationInvoiceService = configurationInvoiceService;
+        // TODO remove type any after TODO under will be resolved
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.invoice = input.required();
+        this.textWords$ = this.configurationInvoiceService.getTextWordsFromConfig();
+        /**TODO:  For setting invoice instead:
+         * <ava-invoice-display id="invoice"></ava-invoice-display>
+         * invoice = document.getElementById('invoice');
+         * invoice.invoice = INVOICE;
+         * we should pass value to global window variable
+         * window['InvoiceGlobalVariable'] = INVOICE;
+         * Temporary solution until the problem of setting the value for InputSignal is solved. See this PR https://github.com/angular/angular/pull/55067
+         */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (window['InvoiceGlobalVariable']) {
+            this.invoice = () => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return window['InvoiceGlobalVariable'];
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InvoiceDisplayComponent, deps: [{ token: ConfigurationInvoiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InvoiceDisplayComponent, isStandalone: true, selector: "ava-invoice-display", inputs: { invoice: { classPropertyName: "invoice", publicName: "invoice", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null } }, providers: [ConfigurationInvoiceService], ngImport: i0, template: "@if (textWords$ | async; as textWords) {\n  <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        <mat-divider></mat-divider>\n        @if (invoice().buyer?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n      <div class=\"invoice-details\">\n        <h2 [class.header]=\"textWords.invoiceBuyerTitle.trim() || textWords.invoiceSellerTitle.trim()\"></h2>\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        <mat-divider></mat-divider>\n        @if (invoice().seller?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().seller?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().seller?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().seller?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n    </header>\n    <mat-divider></mat-divider>\n    <div class=\"invoice-info\">\n      <section class=\"invoice-references\">\n        @if (textWords.referencesTopic) {\n          <h2 class=\"info-title\">{{ textWords.referencesTopic }}</h2>\n        }\n        @if (invoice().references?.buyerReference) {\n          <p>\n            <strong>{{ textWords.referencesBuyerReference }}: </strong>\n            <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      @if (invoice().deliveryInformation) {\n        <section class=\"invoice-delivery\">\n          <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n          @if (invoice().deliveryInformation?.deliverToName) {\n            <p>\n              <strong>{{ textWords.deliverToName }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToName }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliverToLocationIdentifier) {\n            <p>\n              <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToLocationIdentifier }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryDate) {\n            <p>\n              <strong>{{ textWords.deliveryDate }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryAddress) {\n            <p>\n              <strong>{{ textWords.deliveryAddress }}: </strong>\n              <span>\n                @if (invoice().deliveryInformation?.deliveryAddress?.address) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.address }}</p>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.city) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.city }},</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.zipCode) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.countryCode) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                }\n              </span>\n            </p>\n          }\n        </section>\n      }\n    </div>\n\n    <table class=\"invoice-table\">\n      <thead>\n        <tr>\n          <th>#</th>\n          <th>{{ textWords.tableHeadDescription }}</th>\n          <th>{{ textWords.tableHeadQuantity }}</th>\n          <th>{{ textWords.tableHeadUnit }}</th>\n          <th>{{ textWords.tableHeadNetPrice }}</th>\n          <th>{{ textWords.tableHeadNetAmount }}</th>\n          <th>{{ textWords.vat }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of invoice().lineItems; track item; let i = $index) {\n          <tr>\n            <td>{{ i + 1 }}</td>\n            <td>{{ item.itemInformation?.description }}</td>\n            <td>{{ item.quantity }}</td>\n            <td>{{ item.unitCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.netAmount | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.vatInformation[0]?.vatRate | percent: '1.0-2' }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <div class=\"addition-info\">\n      <section class=\"invoice-totals\">\n        <h2 class=\"info-title\">{{ textWords.totalsTopic }}</h2>\n\n        @if (invoice().totals?.totalNet) {\n          <p>\n            <strong>{{ textWords.totalsTotalNet }}: </strong>\n            <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      <section class=\"taxes\">\n        <h2 class=\"info-title\">{{ textWords.taxesHeading }}</h2>\n        <table class=\"tax-report-table\">\n          <thead>\n            <tr>\n              <th>{{ textWords.vat }}</th>\n              <th>{{ textWords.totalsTotalNet }}</th>\n              <th>{{ textWords.totalsTotalVatAmount }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (tax of invoice().vatBreakdown; track tax.taxRate) {\n              <tr>\n                <td class=\"currency-table-cell\">\n                  @if (tax.taxRate) {\n                    <span>{{ tax.taxRate | percent: '1.0-2' }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.netTaxableAmount) {\n                    <span>{{ tax.netTaxableAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.vatAmount) {\n                    <span>{{ tax.vatAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </section>\n\n      <section class=\"payment-instructions\">\n        <h2 class=\"info-title\">{{ textWords.instructionsTopic }}</h2>\n        @if (invoice().paymentInstructions?.description) {\n          <p>{{ invoice().paymentInstructions?.description }}</p>\n        }\n        @for (means of invoice().paymentInstructions?.paymentMeans; track means) {\n          <div>\n            @if (means.accountIdentifier) {\n              <p>\n                <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n                <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    @if (invoice().documents?.length) {\n      <section class=\"invoice-attachments\">\n        <ava-invoice-documents [documents]=\"invoice().documents\"></ava-invoice-documents>\n      </section>\n    }\n  </div>\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.seller-info,.invoice-delivery,.payment-instructions{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes,.invoice-delivery{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:12px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}\n"], dependencies: [{ kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: InvoiceDocumentsComponent, selector: "ava-invoice-documents", inputs: ["documents"] }], 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, PercentPipe, AsyncPipe, MatDividerModule, InvoiceDocumentsComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ConfigurationInvoiceService], template: "@if (textWords$ | async; as textWords) {\n  <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        <mat-divider></mat-divider>\n        @if (invoice().buyer?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().buyer?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().buyer?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n      <div class=\"invoice-details\">\n        <h2 [class.header]=\"textWords.invoiceBuyerTitle.trim() || textWords.invoiceSellerTitle.trim()\"></h2>\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        <mat-divider></mat-divider>\n        @if (invoice().seller?.contactPersonName) {\n          <p>\n            <strong>{{ textWords.contactPersonName }}: </strong>\n            <span>{{ invoice().seller?.contactPersonName }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonPhone) {\n          <p>\n            <strong>{{ textWords.contactPersonPhone }}: </strong>\n            <span>{{ invoice().seller?.contactPersonPhone }}</span>\n          </p>\n        }\n        @if (invoice().seller?.contactPersonEmail) {\n          <p>\n            <strong>{{ textWords.contactPersonEmail }}: </strong>\n            <span>{{ invoice().seller?.contactPersonEmail }}</span>\n          </p>\n        }\n      </div>\n    </header>\n    <mat-divider></mat-divider>\n    <div class=\"invoice-info\">\n      <section class=\"invoice-references\">\n        @if (textWords.referencesTopic) {\n          <h2 class=\"info-title\">{{ textWords.referencesTopic }}</h2>\n        }\n        @if (invoice().references?.buyerReference) {\n          <p>\n            <strong>{{ textWords.referencesBuyerReference }}: </strong>\n            <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      @if (invoice().deliveryInformation) {\n        <section class=\"invoice-delivery\">\n          <h2 class=\"info-title\">{{ textWords.deliveryInformationTitle }}</h2>\n\n          @if (invoice().deliveryInformation?.deliverToName) {\n            <p>\n              <strong>{{ textWords.deliverToName }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToName }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliverToLocationIdentifier) {\n            <p>\n              <strong>{{ textWords.deliverToLocationIdentifier }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliverToLocationIdentifier }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryDate) {\n            <p>\n              <strong>{{ textWords.deliveryDate }}: </strong>\n              <span>{{ invoice().deliveryInformation?.deliveryDate | date: 'shortDate' }}</span>\n            </p>\n          }\n          @if (invoice().deliveryInformation?.deliveryAddress) {\n            <p>\n              <strong>{{ textWords.deliveryAddress }}: </strong>\n              <span>\n                @if (invoice().deliveryInformation?.deliveryAddress?.address) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.address }}</p>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.city) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.city }},</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.zipCode) {\n                  <span>{{ invoice().deliveryInformation?.deliveryAddress?.zipCode }}</span>\n                }\n                @if (invoice().deliveryInformation?.deliveryAddress?.countryCode) {\n                  <p>{{ invoice().deliveryInformation?.deliveryAddress?.countryCode }}</p>\n                }\n              </span>\n            </p>\n          }\n        </section>\n      }\n    </div>\n\n    <table class=\"invoice-table\">\n      <thead>\n        <tr>\n          <th>#</th>\n          <th>{{ textWords.tableHeadDescription }}</th>\n          <th>{{ textWords.tableHeadQuantity }}</th>\n          <th>{{ textWords.tableHeadUnit }}</th>\n          <th>{{ textWords.tableHeadNetPrice }}</th>\n          <th>{{ textWords.tableHeadNetAmount }}</th>\n          <th>{{ textWords.vat }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of invoice().lineItems; track item; let i = $index) {\n          <tr>\n            <td>{{ i + 1 }}</td>\n            <td>{{ item.itemInformation?.description }}</td>\n            <td>{{ item.quantity }}</td>\n            <td>{{ item.unitCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.priceDetails?.netPrice | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.netAmount | currency: invoice().currencyCode }}</td>\n            <td class=\"currency-table-cell\">{{ item.vatInformation[0]?.vatRate | percent: '1.0-2' }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <div class=\"addition-info\">\n      <section class=\"invoice-totals\">\n        <h2 class=\"info-title\">{{ textWords.totalsTopic }}</h2>\n\n        @if (invoice().totals?.totalNet) {\n          <p>\n            <strong>{{ textWords.totalsTotalNet }}: </strong>\n            <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      <section class=\"taxes\">\n        <h2 class=\"info-title\">{{ textWords.taxesHeading }}</h2>\n        <table class=\"tax-report-table\">\n          <thead>\n            <tr>\n              <th>{{ textWords.vat }}</th>\n              <th>{{ textWords.totalsTotalNet }}</th>\n              <th>{{ textWords.totalsTotalVatAmount }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (tax of invoice().vatBreakdown; track tax.taxRate) {\n              <tr>\n                <td class=\"currency-table-cell\">\n                  @if (tax.taxRate) {\n                    <span>{{ tax.taxRate | percent: '1.0-2' }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.netTaxableAmount) {\n                    <span>{{ tax.netTaxableAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n                <td class=\"currency-table-cell\">\n                  @if (tax.vatAmount) {\n                    <span>{{ tax.vatAmount | currency: invoice().currencyCode }}</span>\n                  }\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </section>\n\n      <section class=\"payment-instructions\">\n        <h2 class=\"info-title\">{{ textWords.instructionsTopic }}</h2>\n        @if (invoice().paymentInstructions?.description) {\n          <p>{{ invoice().paymentInstructions?.description }}</p>\n        }\n        @for (means of invoice().paymentInstructions?.paymentMeans; track means) {\n          <div>\n            @if (means.accountIdentifier) {\n              <p>\n                <strong>{{ textWords.instructionsAccountIdentifier }}: </strong>\n                <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    @if (invoice().documents?.length) {\n      <section class=\"invoice-attachments\">\n        <ava-invoice-documents [documents]=\"invoice().documents\"></ava-invoice-documents>\n      </section>\n    }\n  </div>\n}\n", styles: [".invoice-container{width:100%;max-width:800px;margin:auto;font-family:Arial,sans-serif;line-height:1.5}.invoice-header{display:flex;justify-content:space-between;margin-bottom:20px}.invoice-header .header{height:32px}.invoice-header .header-title{background:var(--color-primary);color:#fff;text-align:center}.seller-info,.buyer-info,.invoice-details{width:30%}.seller-info,.invoice-delivery,.payment-instructions{text-align:right}.currency-table-cell{text-align:right!important}.invoice-title{font-size:48px;margin:20px 0}.invoice-references,.invoice-totals,.payment-instructions,.invoice-notes,.taxes,.invoice-delivery{margin:20px 0}.invoice-table{width:100%;border-collapse:collapse;margin:20px 0}.invoice-table th,.invoice-table td{border:1px solid #000;padding:8px;text-align:left}.invoice-table th{background-color:var(--color-primary)}.invoice-totals p,.payment-instructions p,.invoice-notes p{margin:5px 0}h2{font-size:18px;margin-bottom:10px}.addition-info{display:flex;justify-content:space-between;gap:10px}.total{background-color:var(--color-primary);color:#fff;padding:5px;border-radius:5px}th{color:#fff;text-wrap:nowrap}.invoice-attachments{padding-bottom:15px}.invoice-info{display:flex;justify-content:space-between;margin-bottom:20px}.info-title{border-bottom:2px solid var(--color-primary);text-align:center}.tax-report-table{width:100%;border-collapse:collapse;margin-top:10px}.tax-report-table th,.tax-report-table td{padding:12px;text-align:center;border:1px solid #ddd}.tax-report-table th{background-color:var(--color-primary);color:#fff;font-weight:700;border:1px solid #000}.tax-report-table td{font-size:14px;color:#333;border:1px solid #000}\n"] }]
+        }], ctorParameters: () => [{ type: ConfigurationInvoiceService }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of angular-ava
  */