@colijnit/transaction 261.20.50 → 261.20.52

package/projects/transaction/src/lib/component/transaction-line-purchase-transport/transaction-line-purchase-transport.module.ts

@@ -0,0 +1,65 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TransactionLinePurchaseTransportComponent} from "./transaction-line-purchase-transport.component";
+import {
+  ButtonModule,
+  FormModule,
+  InputDatePickerModule,
+  InputNumberPickerModule,
+  InputTextModule, ListOfValuesModule, ScreenConfigurationModule
+} from "@colijnit/corecomponents_v12";
+import {TransactionLineStatusbarModule} from "../transaction-line-statusbar/transaction-line-statusbar.module";
+import {TransactionLineWarehouseLocationButtonModule} from "../transaction-line-fields/transaction-line-warehouse-location-button.module";
+import {PipeModule} from "../../pipe/pipe.module";
+import {TransactionReceivingGoodsHistoryModule} from "../transaction-receiving-goods-history/transaction-receiving-goods-history.module";
+import {TransactionAvailableStockGridModule} from "../transaction-grid/transaction-available-stock-grid/transaction-available-stock-grid.module";
+import {
+    TransactionLabeledWarehouseLocationButtonModule
+} from "../transaction-labeled-warehouse-location-button/transaction-labeled-warehouse-location-button.module";
+import {TransactionLineLabelModule} from "../transaction-line/transaction-line-label/transaction-line-label.module";
+import {
+  TransactionLineWarehouseButtonModule
+} from "../transaction-line-fields/transaction-line-warehouse-button.module";
+import {
+  TransactionPrintPackageStickerModule
+} from "../transaction-print-package-sticker/transaction-print-package-sticker.module";
+import {PurchaseConfirmationLinesModule} from "../purchase-confirmation-lines/purchase-confirmation-lines.module";
+import {
+  TransactionLabeledPriceInputModule
+} from "../transaction-labeled-price-input/transaction-labeled-price-input.module";
+import {
+  TransactionHistoryTransportGridModule
+} from "../transaction-grid/transaction-transport-history-grid/transaction-history-transport-grid.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormModule,
+    TransactionLineStatusbarModule,
+    InputNumberPickerModule,
+    InputTextModule,
+    TransactionLineWarehouseLocationButtonModule,
+    InputDatePickerModule,
+    PipeModule,
+    TransactionReceivingGoodsHistoryModule,
+    TransactionAvailableStockGridModule,
+    ButtonModule,
+    TransactionLabeledWarehouseLocationButtonModule,
+    TransactionLineLabelModule,
+    ScreenConfigurationModule,
+    TransactionLineWarehouseButtonModule,
+    TransactionPrintPackageStickerModule,
+    PurchaseConfirmationLinesModule,
+    TransactionLabeledPriceInputModule,
+    TransactionHistoryTransportGridModule,
+    ListOfValuesModule
+  ],
+  declarations: [
+    TransactionLinePurchaseTransportComponent
+  ],
+  exports: [
+    TransactionLinePurchaseTransportComponent
+  ]
+})
+export class TransactionLinePurchaseTransportModule {
+}

package/projects/transaction/src/lib/component/transaction-line-sales-allocation/transaction-line-sales-allocation.component.ts

@@ -0,0 +1,227 @@
+import {ChangeDetectorRef, Component, HostBinding, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import {FormMasterService} from '@colijnit/corecomponents_v12';
+import {TransactionBaseComponent} from '../core/base/transaction-base.component';
+import {AllocateGoodsForSalesOrderRequest} from '@colijnit/transactionapi/build/model/allocate-goods-for-sales-order-request';
+import {SalesOrderLineAllocationDetails} from '@colijnit/transactionapi/build/model/sales-order-line-allocation-details';
+import {LogisticalStateDetail} from '@colijnit/transactionapi/build/model/logistical-state-detail.bo';
+import {IconCacheService} from '../../service/icon-cache.service';
+import {TransactionService} from '../../service/transaction.service';
+import {TransactionDialogService} from '../../service/transaction-dialog.service';
+import {
+  AllocateGoodsForSalesOrderCorrectionRequest
+} from '@colijnit/transactionapi/build/model/allocate-goods-for-sales-order-correction-request';
+import {
+  SalesOrderLineAllocationCorrectionDetails
+} from '@colijnit/transactionapi/build/model/sales-order-line-allocation-correction-details';
+import {Subscription} from 'rxjs';
+import {TransactionEventService} from '../../service/transaction-event.service';
+import {TransactionLineInfo} from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
+import {GoodsAllocationHistory} from '@colijnit/transactionapi/build/model/goods-allocation-history.bo';
+import {DictionaryService} from '../../service/dictionary.service';
+import {TransactionImageService} from '../../service/transaction-image.service';
+import {TransactionScreenConfigurationService} from '../../service/transaction-screen-configuration.service';
+import {TransactionLineBaseComponent} from '../core/base/transaction-line-base.component';
+import {TransactionHeaderService} from '../core/base/service/transaction-header.service';
+import {TransactionLineService} from '../core/base/service/transaction-line.service';
+import {DialogResponseInterface} from "../../interface/dialog-response.interface";
+
+@Component({
+    selector: "co-transaction-line-sales-allocation",
+    template: `
+    <div class="confirmation-details-wrapper form-and-buttons">
+      <co-form class="line-side-panel-content-wrapper">
+        <div class="line-side-panel-header">
+          <span [textContent]="'ALLOCATION' | localize"></span>
+        </div>
+        <div class="line-side-panel-content">
+          <div class="side-panel-input-row">
+            <div class="side-panel-input">
+              <div class="inside-field">
+                <co-transaction-line-label [insideLabel]="'QUANTITY'"></co-transaction-line-label>
+                <co-input-number-picker
+                  [max]="allocationDetails.quantityToAllocate"
+                  [model]="allocationDetails.serialNr ? 1 : allocationDetails.quantityToAllocate" (modelChange)="allocationDetails.serialNr ? 1 : allocationDetails.quantityToAllocate = $event"
+                  [decimals]="decimals"
+                  [disabled]="!!allocationDetails.serialNr || allocationDetails.quantityToAllocate === 0"
+                  [readonly]="!!allocationDetails.serialNr || allocationDetails.quantityToAllocate === 0 || readonly"
+                  [required]="true"
+                [min]="1"></co-input-number-picker>
+              </div>
+            </div>
+            <div class="side-panel-input">
+              <div class="inside-field">
+                <co-transaction-line-label [insideLabel]="'WAREHOUSE'"></co-transaction-line-label>
+                <co-input-text [(model)]="allocationDetails.warehouseNr"
+                  [type]="'number'"
+                  [hideArrowButtons]="true"
+                  [readonly]="transactionLine.warehouseNumber !== undefined || readonly"
+                  [disabled]="transactionLine.warehouseNumber !== undefined"
+                  [required]="transactionLine.isWarehouseRequired"
+                [placeholder]="''"></co-input-text>
+              </div>
+            </div>
+            <div class="side-panel-input">
+              <co-transaction-line-warehouse-location-button class="warehouse-buttons"
+                [inputLabel]="true"
+              ></co-transaction-line-warehouse-location-button>
+            </div>
+            <!--<co-transaction-button class="side-panel-input"
+            [label]="allocationDetails.locationNr ? allocationDetails.locationNr : ('LOCATION' | localize)"
+            [readonly]="transactionHeaderService.readonly"
+            [iconData]="iconCacheService.getIcon(icons.Warehouse)"
+            [tooltip]="tooltipMessage"
+            (click)="openWarehouseLocationDialog()"
+            [class.clickable]="lineQuantityToAllocate > 0"
+          ></co-transaction-button>-->
+        </div>
+        <div class="side-panel-input-row">
+          @if (transactionLine.isBatchNrRequired) {
+            <co-input-text class="side-panel-input" [(model)]="allocationDetails.batchNr"
+              [type]="'number'"
+              [hideArrowButtons]="true"
+              [readonly]="readonly"
+              [required]="!internalParameterPakBinnen"
+            [placeholder]="'BATCH_NUMBER' | localize"></co-input-text>
+          }
+          @if (transactionLine.isSerialNrRequired) {
+            <co-input-text class="side-panel-input" [(model)]="allocationDetails.serialNr"
+              [type]="'text'"
+              [maxLength]="15"
+              [hideArrowButtons]="true"
+              [readonly]="readonly"
+              [required]="!internalParameterPakBinnen"
+            [placeholder]="'SERIAL_NUMBER' | localize"></co-input-text>
+          }
+        </div>
+      </div>
+    </co-form>
+    <div class="save-cancel-wrapper">
+      <co-button [iconData]="iconCacheService.getIcon(icons.CheckDuotone)"
+        [class.clickable]="allocationDetails.quantityToAllocate > 0"
+        [class.disabled]="allocationDetails.quantityToAllocate === 0"
+        (click)="handleSaveDetailsEdit()"
+      ></co-button>
+      <co-button class="cancel-button"
+        [iconData]="iconCacheService.getIcon(icons.Crossskinny)"
+      ></co-button>
+    </div>
+    </div>
+    <co-transaction-allocate-goods-history
+      [goodsAllocationHistory]="goodsAllocationHistory"
+      (deleteRow)="handleDeleteSelectedRow($event)"
+    ></co-transaction-allocate-goods-history>
+    `,
+    providers: [
+        FormMasterService
+    ],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TransactionLineSalesAllocationComponent extends TransactionLineBaseComponent implements OnInit, OnDestroy {
+
+  public allocationRequest: AllocateGoodsForSalesOrderRequest = new AllocateGoodsForSalesOrderRequest();
+  public allocationDetails: SalesOrderLineAllocationDetails = new SalesOrderLineAllocationDetails();
+
+  public goodsAllocationHistory: LogisticalStateDetail[] = [];
+
+  @HostBinding("class.co-transaction-line-sales-allocation")
+  public showClass() {
+    return true;
+  }
+
+  public internalParameterPakBinnen: boolean = false;
+
+  private _subs: Subscription[] = [];
+
+  constructor(
+    public transactionHeaderService: TransactionHeaderService,
+    public transactionLineService: TransactionLineService,
+    public transactionEventService: TransactionEventService,
+    public service: TransactionService,
+    public iconCacheService: IconCacheService,
+    public transactionScreenConfigurationService: TransactionScreenConfigurationService,
+    protected dictionaryService: DictionaryService,
+    protected imageService: TransactionImageService,
+    protected changeDetector: ChangeDetectorRef,
+    private _formMaster: FormMasterService,
+    private _dialogService: TransactionDialogService
+  ) {
+    super(transactionHeaderService, transactionLineService, transactionEventService, iconCacheService, transactionScreenConfigurationService, imageService, dictionaryService, service, changeDetector);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this._subs.push(
+      this.transactionEventService.transactionLineChanged.subscribe((transLine: TransactionLineInfo) => {
+        if (transLine.lineNr === this.transactionLine.lineNr) {
+          this._handleTransactionLineSet(transLine);
+        }
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this._subs.forEach(s => s.unsubscribe());
+    super.ngOnDestroy();
+  }
+
+  public submit(): boolean {
+    return this._formMaster.submitSlaves();
+  }
+
+  public async getGoodsAllocationHistory(): Promise<void> {
+    this.transactionService.getGoodsAllocationHistory(this.transactionInfo.id, this.transactionLine.lineNr)
+      .then((result: GoodsAllocationHistory) => {
+        this.goodsAllocationHistory = result.goodsAllocationHistory;
+      });
+  }
+
+  public handleSaveDetailsEdit(): void {
+    if (this.lineQuantityToAllocate === 0) {
+      return;
+    }
+    const valid = this.submit();
+    if (valid) {
+      const request: AllocateGoodsForSalesOrderRequest = this.allocationRequest;
+      request.transId = this.transactionInfo.id;
+      this.allocationDetails.locationNr = this.transactionLine.locationNr;
+      request.salesOrderLineAllocationDetailsDTOS = [this.allocationDetails];
+      this.transactionService.allocateGoodsForSalesOrder(this.transactionInfo.id, this.transactionInfo.version, request).then((success) => {
+        if (success) {
+          this.allocationDetails.locationNr = undefined;
+          this.getGoodsAllocationHistory();
+        }
+      });
+    }
+  }
+
+  public handleDeleteSelectedRow(row: LogisticalStateDetail): void {
+    if (row && row.type !== 'correction') {
+      const request: AllocateGoodsForSalesOrderCorrectionRequest = new AllocateGoodsForSalesOrderCorrectionRequest();
+      const correctionDetails: SalesOrderLineAllocationCorrectionDetails = new SalesOrderLineAllocationCorrectionDetails();
+      request.allowedToRemovePickedAllocations = false;
+      request.transId = this.transactionInfo.id;
+      request.salesOrderLineAllocationCorrectionDetailsDTOS = [correctionDetails];
+      correctionDetails.lineNr = this.transactionLine.lineNr;
+      correctionDetails.quantityToCorrect = row.quantity;
+      correctionDetails.documentId = row.documentId;
+      correctionDetails.documentLineNr = row.lineNumber;
+      this.transactionService.allocateGoodsForSalesOrderCorrection(this.transactionInfo.id, this.transactionInfo.version, request).then(() => {
+        this.getGoodsAllocationHistory();
+      });
+    }
+  }
+
+  protected transactionLineSet() {
+    super.transactionLineSet();
+    this._handleTransactionLineSet(this.transactionLine);
+    this.internalParameterPakBinnen = this.transactionService.internalParameterPakBinnen;
+  }
+
+  private _handleTransactionLineSet(transLine: TransactionLineInfo): void {
+    this.allocationDetails.quantityToAllocate = transLine.quantityToAllocate;
+    this.allocationDetails.warehouseNr = transLine.warehouseNumber;
+    this.allocationDetails.lineNr = transLine.lineNr;
+    this.getGoodsAllocationHistory();
+  }
+}

package/projects/transaction/src/lib/component/transaction-line-sales-allocation/transaction-line-sales-allocation.module.ts

@@ -0,0 +1,43 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TransactionLineSalesAllocationComponent} from "./transaction-line-sales-allocation.component";
+import {
+    ButtonModule,
+    FormModule,
+    IconModule,
+    InputNumberPickerModule,
+    InputTextModule,
+    TooltipDirectiveModule
+} from "@colijnit/corecomponents_v12";
+import {PipeModule} from "../../pipe/pipe.module";
+import {TransactionAllocateGoodsHistoryModule} from "../transaction-allocate-goods-history/transaction-allocate-goods-history.module";
+import {TransactionButtonModule} from "../transaction-button/transaction-button.module";
+import {
+    TransactionLineWarehouseLocationButtonModule
+} from "../transaction-line-fields/transaction-line-warehouse-location-button.module";
+import {TransactionLineLabelModule} from "../transaction-line/transaction-line-label/transaction-line-label.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormModule,
+        PipeModule,
+        InputTextModule,
+        IconModule,
+        TransactionAllocateGoodsHistoryModule,
+        InputNumberPickerModule,
+        TransactionButtonModule,
+        TooltipDirectiveModule,
+        ButtonModule,
+        TransactionLineWarehouseLocationButtonModule,
+        TransactionLineLabelModule
+    ],
+  declarations: [
+    TransactionLineSalesAllocationComponent
+  ],
+  exports: [
+    TransactionLineSalesAllocationComponent
+  ]
+})
+export class TransactionLineSalesAllocationModule {
+}

package/projects/transaction/src/lib/component/transaction-line-sales-delivery/transaction-line-sales-delivery.component.ts

@@ -0,0 +1,50 @@
+import {Component, HostBinding, OnInit, ViewEncapsulation} from "@angular/core";
+import {TransactionBaseComponent} from "../core/base/transaction-base.component";
+import {LayoutCode} from "@colijnit/transactionapi/build/enum/layout-code.enum";
+import {HistoricReport} from "@colijnit/transactionapi/build/model/historic-report.bo";
+import {LogisticalStateDetail} from "@colijnit/transactionapi/build/model/logistical-state-detail.bo";
+import {TransactionLineBaseComponent} from '../core/base/transaction-line-base.component';
+
+@Component({
+    selector: "co-transaction-line-sales-delivery",
+    template: `
+        <co-transaction-line-delivery-history
+          [goodsDeliveryHistory]="goodsDeliveryHistory"
+        ></co-transaction-line-delivery-history>
+    `,
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TransactionLineSalesDeliveryComponent extends TransactionLineBaseComponent implements OnInit {
+
+  public goodsDeliveryHistory: LogisticalStateDetail[] = [];
+
+  @HostBinding("class.co-transaction-line-sales-delivery")
+  public showClass() {
+    return true;
+  }
+
+  public ngOnInit(): void {
+    super.ngOnInit();
+    this.transactionService.getHistoricDocuments(this.transactionInfo.id, LayoutCode.DeliveryNote, false)
+      .then((result) => {
+        this._parseReports(result);
+      });
+  }
+
+  private _parseReports(reports: HistoricReport[]): void {
+    reports.forEach((report: HistoricReport) => {
+      for (let line of report.reportTransactionLines) {
+        if (line.lineNr === this.transactionLine.lineNr) {
+          const detail: LogisticalStateDetail = new LogisticalStateDetail();
+          detail.warehouseNumber = line.wareHouseNr;
+          detail.date = line.deliveryDate;
+          detail.quantity = line.amount;
+          detail.reference = line.reference;
+          detail.username = line.user;
+          this.goodsDeliveryHistory.push(detail);
+        }
+      }
+    });
+  }
+}

package/projects/transaction/src/lib/component/transaction-line-sales-delivery/transaction-line-sales-delivery.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TransactionLineSalesDeliveryComponent} from "./transaction-line-sales-delivery.component";
+import {
+    TransactionLineDeliveryHistoryModule
+} from "../transaction-line-delivery-history/transaction-line-delivery-history.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TransactionLineDeliveryHistoryModule
+    ],
+    declarations: [
+        TransactionLineSalesDeliveryComponent
+    ],
+    exports: [
+        TransactionLineSalesDeliveryComponent
+    ]
+})
+export class TransactionLineSalesDeliveryModule {
+}

package/projects/transaction/src/lib/component/transaction-line-sales-invoice/transaction-line-sales-invoice.component.ts

@@ -0,0 +1,51 @@
+import {Component, HostBinding, OnInit, ViewEncapsulation} from "@angular/core";
+import {TransactionBaseComponent} from "../core/base/transaction-base.component";
+import {LogisticalStateDetail} from "@colijnit/transactionapi/build/model/logistical-state-detail.bo";
+import {LayoutCode} from "@colijnit/transactionapi/build/enum/layout-code.enum";
+import {HistoricReport} from "@colijnit/transactionapi/build/model/historic-report.bo";
+import {TransactionLineBaseComponent} from '../core/base/transaction-line-base.component';
+
+@Component({
+    selector: "co-transaction-line-sales-invoice",
+    template: `
+        <co-transaction-line-invoice-history
+          [goodsInvoiceHistory]="goodsInvoiceHistory"
+        ></co-transaction-line-invoice-history>
+    `,
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TransactionLineSalesInvoiceComponent extends TransactionLineBaseComponent implements OnInit {
+
+  public goodsInvoiceHistory: LogisticalStateDetail[] = [];
+
+  @HostBinding("class.co-transaction-line-sales-invoice")
+  public showClass() {
+    return true;
+  }
+
+  public ngOnInit(): void {
+    super.ngOnInit();
+    this.transactionService.getHistoricDocuments(this.transactionInfo.id, LayoutCode.Invoice, false)
+      .then((result) => {
+        this._parseReports(result);
+      });
+  }
+
+  private _parseReports(reports: HistoricReport[]): void {
+    reports.forEach((report: HistoricReport) => {
+      for (let line of report.reportTransactionLines) {
+        if (line.lineNr === this.transactionLine.lineNr) {
+          const detail: LogisticalStateDetail = new LogisticalStateDetail();
+          detail.warehouseNumber = line.wareHouseNr;
+          detail.date = line.deliveryDate;
+          detail.quantity = line.amount;
+          detail.reference = line.reference;
+          detail.username = line.user;
+          this.goodsInvoiceHistory.push(detail);
+        }
+      }
+    });
+  }
+
+}

package/projects/transaction/src/lib/component/transaction-line-sales-invoice/transaction-line-sales-invoice.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {TransactionLineSalesInvoiceComponent} from "./transaction-line-sales-invoice.component";
+import {
+    TransactionLineInvoiceHistoryModule
+} from "../transaction-line-invoice-history/transaction-line-invoice-history.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TransactionLineInvoiceHistoryModule
+    ],
+    declarations: [
+        TransactionLineSalesInvoiceComponent
+    ],
+    exports: [
+        TransactionLineSalesInvoiceComponent
+    ]
+})
+export class TransactionLineSalesInvoiceModule {
+}

package/projects/transaction/src/lib/component/transaction-line-side-panel/transaction-line-side-panel.component.ts

@@ -0,0 +1,150 @@
+import {ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {TransactionLineInfo} from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
+import {Icon} from '../../enum/icon.enum';
+import {TransactionKind} from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
+import {TransactionTypeCategory} from '../../enum/transaction-type-category.enum';
+import {TransactionService} from '../../service/transaction.service';
+import {TransactionEventService} from '../../service/transaction-event.service';
+import {TransactionInfo} from '@colijnit/transactionapi/build/model/transaction-info.bo';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {TransactionMappingService} from '../../service/transaction-mapping.service';
+import {TransactionBarButton} from '../../model/transaction-bar-button';
+import {TransactionInfoResponse} from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
+import {PurchaseConfirmationService} from '../../service/purchase-confirmation.service';
+import {Subscription} from "rxjs";
+import {TransactionLineService} from '../core/base/service/transaction-line.service';
+import {TransactionHeaderService} from '../core/base/service/transaction-header.service';
+import {LineSelectionService} from '../../service/line-selection.service';
+
+@Component({
+    selector: "co-transaction-line-side-panel",
+    template: `
+    <div class="transaction-line-side-panel-wrapper" [class.wide]="wide" @showHideSidePanel>
+      <icon (click)="cancelClick.emit($event)" [icon]="icons.Crossskinny" class="side-panel close-button"></icon>
+      <div class="transaction-line-side-panel-header">
+        <div class="icon-header-side-panel">
+          <icon [icon]="activeCategoryButton?.icon"></icon>
+          <span [textContent]="activeCategoryButton?.title | localize"></span>
+        </div>
+      </div>
+    
+      <div class="transaction-line-side-panel-nav-bar">
+        <co-transaction-button-bar
+          [sidePanel]="true"
+          [selectedCategory]="activeCategory"
+          (buttonClicked)="updateActiveCategory($event)"
+        ></co-transaction-button-bar>
+      </div>
+      <div class="side-panel-line-description">
+        <span [textContent]="this.transactionLineService.transactionLine.goodDescription"></span>
+        <span [textContent]="this.transactionLineService.transactionLine.articleNumber"></span>
+      </div>
+      @if (activeCategory === TransactionTypeCategory.PurchaseOrderOrderConfirmation) {
+        <div class="total-amount">
+          <span>Totaal excl. BTW</span>
+          <span [textContent]="ordersTotal | coCurrency"></span>
+        </div>
+      }
+      <div class="transaction-line-side-panel-content co-small-scrollbar">
+        @switch (transactionInfo.transactionKind) {
+          @case (transactionTypes.PurchaseOrder) {
+            <co-transaction-line-side-panel-purchase [categoryType]="activeCategory"></co-transaction-line-side-panel-purchase>
+          }
+          @case (transactionTypes.SalesOrder) {
+            <co-transaction-line-side-panel-sales [categoryType]="activeCategory"></co-transaction-line-side-panel-sales>
+          }
+          @case (transactionTypes.InternalDelivery) {
+            <co-transaction-line-side-panel-internal-delivery [categoryType]="activeCategory"></co-transaction-line-side-panel-internal-delivery>
+          }
+          @default {
+            <co-transaction-line-side-panel-purchase [categoryType]="activeCategory"></co-transaction-line-side-panel-purchase>
+          }
+        }
+      </div>
+    </div>
+    `,
+    providers: [
+        TransactionLineService
+    ],
+    animations: [
+        trigger("showHideSidePanel", [
+            state("void", style({ transform: "translateX(100%)" })),
+            state("*", style({ transform: "translateX(0)" })),
+            transition("void <=> *", animate("200ms ease-in-out"))
+        ])
+    ],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TransactionLineSidePanelComponent implements OnInit, OnDestroy {
+  public readonly icons: typeof Icon = Icon;
+  public readonly categories: typeof TransactionTypeCategory = TransactionTypeCategory;
+  public readonly transactionTypes: typeof TransactionKind = TransactionKind;
+  public readonly TransactionTypeCategory = TransactionTypeCategory;
+
+  @Input()
+  public wide: boolean = false;
+
+  @Input()
+  public activeCategory: TransactionTypeCategory;
+
+  @Output()
+  public cancelClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+  @HostBinding("class.co-transaction-line-side-panel")
+  public showClass(): boolean {
+    return true;
+  }
+
+  public get transaction(): TransactionInfoResponse {
+    return this._transactionHeaderService.transaction;
+  }
+
+  public get transactionInfo(): TransactionInfo {
+    return this._transactionHeaderService.transactionInfo;
+  }
+
+  public activeCategoryButton: TransactionBarButton;
+  public ordersTotal: number;
+
+  private _subs: Subscription[] = [];
+
+  constructor(
+    private _service: TransactionService,
+    private _transactionHeaderService: TransactionHeaderService,
+    public transactionLineService: TransactionLineService,
+    private _transactionEventService: TransactionEventService,
+    private _transactionMappingService: TransactionMappingService,
+    private _purchaseConfirmationService: PurchaseConfirmationService,
+    private _lineSelectionService: LineSelectionService,
+    private _changeDetector: ChangeDetectorRef
+  ) {
+  }
+
+  public ngOnInit(): void {
+    this.activeCategoryButton = this._transactionMappingService.getButtonBar(this._transactionHeaderService.transactionKind)
+      .find((button) => button.category === this.activeCategory);
+
+    this._subs.push(
+      this._lineSelectionService.selectedTransactionLineChanged.subscribe((line: TransactionLineInfo) => {
+        if (line) {
+          this.transactionLineService.transactionLine = line;
+          this._changeDetector.detectChanges();
+        }
+      }),
+      this._purchaseConfirmationService.ordersTotalObservable.subscribe(
+      (value) => {
+        this.ordersTotal = value;
+      })
+    );
+  }
+
+  ngOnDestroy() {
+    this._subs.forEach(s => s.unsubscribe());
+  }
+
+  public updateActiveCategory(button: TransactionBarButton): void {
+    this.activeCategory = button.category;
+    this.activeCategoryButton = button;
+  }
+}