@colijnit/transaction 12.1.13 → 12.1.16

package/lib/component/transaction-header/transaction-header-delivery/style/_layout.scss

@@ -0,0 +1,38 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-delivery-layout') {
+  .co-transaction-header-delivery {
+    display: flex;
+    .transaction-header-block-header {
+      co-icon {
+        position: relative;
+        height: $tp-transaction-header-delivery-button-width;
+        width: $tp-transaction-header-delivery-button-width;
+      }
+    }
+    .header-delivery-method {
+      display: flex;
+      column-gap: 10px;
+      align-items: center;
+    }
+    .planning-request-button {
+      border: $tp-transaction-header-delivery-planning-request-button-border;
+      border-radius: $tp-transaction-header-delivery-planning-request-button-border-radius;
+
+    }
+    .header-delivery-deliverydate-wrapper {
+      display: flex;
+      column-gap: 10px;
+      align-items: center;
+      co-icon {
+        width: 15px;
+        height: 15px;
+      }
+    }
+    .transaction-header-block-content-third {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}

package/lib/component/transaction-header/transaction-header-delivery/style/_material-definition.scss

@@ -0,0 +1,7 @@
+$tp-transaction-header-delivery-button-width: 40px !default;
+$tp-transaction-header-delivery-planning-request-button-color: $tp-color-active !default;
+$tp-transaction-header-delivery-planning-request-button-border: 1px solid !default;
+$tp-transaction-header-delivery-planning-request-button-border-color: $tp-color-border !default;
+$tp-transaction-header-delivery-planning-request-button-border-radius: 5px !default;
+$tp-transaction-header-delivery-definitive-button-color: $tp-color-active-light !default;
+$tp-transaction-header-delivery-delivery-truck-color: $tp-color-font !default;

package/lib/component/transaction-header/transaction-header-delivery/style/_theme.scss

@@ -0,0 +1,25 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-delivery-theme') {
+  .co-transaction-header-delivery {
+    .planning-request-button {
+      border-color: $tp-transaction-header-delivery-planning-request-button-border-color;
+      & [fill] {
+        fill: $tp-transaction-header-delivery-planning-request-button-color;
+      }
+    }
+    .header-delivery-deliverydate-wrapper.closed {
+      co-icon [fill] {
+        fill: $tp-transaction-header-delivery-definitive-button-color;
+      }
+    }
+    .header-delivery-truck-icon {
+      svg { // for fontawesome icons
+        fill: $tp-transaction-header-delivery-delivery-truck-color;
+      }
+      & [fill] { // for own icons
+        fill: $tp-transaction-header-delivery-delivery-truck-color;
+      }
+    }
+  }
+}

package/lib/component/transaction-header/transaction-header-delivery/style/material.scss

@@ -0,0 +1,3 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

package/lib/component/transaction-header/transaction-header-delivery/transaction-header-delivery.component.d.ts

@@ -0,0 +1,15 @@
+import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
+import { Icon } from "../../../enum/icon.enum";
+import { TransactionService } from "../../../service/transaction.service";
+import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
+import { IconCacheService } from "../../../service/icon-cache.service";
+export declare class TransactionHeaderDeliveryComponent extends TransactionBaseComponent {
+    iconService: IconCacheService;
+    protected service: TransactionService;
+    readonly icons: typeof Icon;
+    showClass(): boolean;
+    deliveryMethod: DeliveryMethod;
+    deliveryMethods: DeliveryMethod[];
+    constructor(iconService: IconCacheService, service: TransactionService);
+    transactionSet(): void;
+}

package/lib/component/transaction-header/transaction-header-order/style/_layout.scss

@@ -0,0 +1,12 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-order-layout') {
+  .co-transaction-header-order {
+    display: flex;
+    .transaction-header-block-content-third {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}

package/lib/component/transaction-header/transaction-header-order/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-order-theme') {
+  .co-transaction-header-order {
+  }
+}

package/lib/component/transaction-header/transaction-header-order/style/material.scss

@@ -0,0 +1,4 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../core/base/components/transaction-header-block/style/material";

package/lib/component/transaction-header/transaction-header-order/transaction-header-order.component.d.ts

@@ -0,0 +1,4 @@
+import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
+export declare class TransactionHeaderOrderComponent extends TransactionBaseComponent {
+    showClass(): boolean;
+}

package/lib/component/transaction-header/transaction-header-order/transaction-header-order.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TransactionHeaderOrderModule {
+}

package/lib/component/transaction-header/transaction-header-payment/style/_layout.scss

@@ -0,0 +1,14 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-header-payment-layout') {
+  .co-transaction-header-payment {
+    display: flex;
+    .header-block-balance {
+      display: flex;
+      cursor: pointer;
+      column-gap: 10px;
+      border-radius: $tp-transaction-header-block-payment-balance-border-radius;
+      padding: $tp-transaction-header-block-payment-balance-padding;
+    }
+  }
+}

package/lib/component/transaction-header/transaction-header-payment/style/_material-definition.scss

@@ -0,0 +1,4 @@
+$tp-transaction-header-block-payment-balance-background: $tp-color-active-light !default;
+$tp-transaction-header-block-payment-balance-padding: 5px 10px !default;
+$tp-transaction-header-block-payment-balance-border-radius: 10px !default;
+$tp-transaction-header-block-payment-balance-to-pay-color: #C1002A !default;

package/lib/component/transaction-header/transaction-header-payment/style/_theme.scss

@@ -0,0 +1,12 @@
+@import "../../../../style/mixin";
+
+@include export-module('cc-transaction-header-payment-theme') {
+  .co-transaction-header-payment {
+    .header-block-balance {
+      background: $tp-transaction-header-block-payment-balance-background;
+      .payment-to-pay {
+        color: $tp-transaction-header-block-payment-balance-to-pay-color;
+      }
+    }
+  }
+}

package/lib/component/transaction-header/transaction-header-payment/style/material.scss

@@ -0,0 +1,5 @@
+@import "../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";
+@import "../../../core/base/components/transaction-header-block/style/material";

package/lib/component/transaction-header/transaction-header-payment/transaction-header-payment.component.d.ts

@@ -0,0 +1,6 @@
+import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
+export declare class TransactionHeaderPaymentComponent extends TransactionBaseComponent {
+    showClass(): boolean;
+    showPaymentDialog: boolean;
+    openPayment(): void;
+}

package/lib/component/transaction-header/transaction-header-payment/transaction-header-payment.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TransactionHeaderPaymentModule {
+}

package/lib/component/transaction-header/transaction-header-relation/style/_layout.scss

@@ -0,0 +1,7 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-relation-layout') {
+  .co-transaction-header-relation {
+    display: flex;
+  }
+}

package/lib/component/transaction-header/transaction-header-relation/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-header-relation-theme') {
+  .co-transaction-header-relation {
+  }
+}

package/lib/component/transaction-header/transaction-header-relation/style/material.scss

@@ -0,0 +1,4 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../core/base/components/transaction-header-block/style/material";

package/lib/component/{transaction-header-relation → transaction-header/transaction-header-relation}/transaction-header-relation.component.d.ts

@@ -1,4 +1,4 @@
-import { TransactionBaseComponent } from "../core/base/transaction-base.component";
+import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
 export declare class TransactionHeaderRelationComponent extends TransactionBaseComponent {
     showClass(): boolean;
 }

package/lib/component/transaction-header/transaction-header.component.d.ts

@@ -5,8 +5,6 @@ export declare class TransactionHeaderComponent {
     set transaction(value: TransactionInfoResponse);
     get transaction(): TransactionInfoResponse;
     showClass(): boolean;
-    expanded: boolean;
     relationId: number;
     private _transaction;
-    handleExpandClick(event: MouseEvent): void;
 }

package/lib/component/transaction-history-grid-status/style/_layout.scss

@@ -4,25 +4,25 @@
   .co-transaction-history-grid-status {
     .transaction-status-indication {
       display: flex;
-      width: 130px;
+      width: $tp-co-transaction-history-grid-status-button-width;
       border-radius: 22px;
-      height: 44px;
-      background: white;
-      border: 1px solid #dce4ea;
+      height: $tp-co-transaction-history-grid-status-button-height;
+      background: $tp-co-transaction-history-grid-status-button-background;
+      border: $tp-co-transaction-history-grid-status-button-border;
       align-items: center;
       justify-content: center;
     }
 
     .status-color-circle {
-      height: 12px;
-      width: 12px;
+      height: $tp-co-transaction-history-grid-status-circle-height;
+      width: $tp-co-transaction-history-grid-status-circle-width;
       border-radius: 6px;
       background: #dce4ea;
       margin-right: 10px;
     }
 
     .status-text {
-      //font-family:
+      font-family: $tp-co-transaction-history-grid-status-button-font-family;
     }
   }
 }

package/lib/component/transaction-history-grid-status/style/_material-definition.scss

@@ -0,0 +1,8 @@
+$tp-co-transaction-history-grid-status-button-font-family: $tp-font-family !default;
+$tp-co-transaction-history-grid-status-button-width: 130px !default;
+$tp-co-transaction-history-grid-status-button-height: 44px !default;
+$tp-co-transaction-history-grid-status-button-background: white !default;
+$tp-co-transaction-history-grid-status-button-border: 1px solid #dce4ea !default;
+
+$tp-co-transaction-history-grid-status-circle-width: 12px !default;
+$tp-co-transaction-history-grid-status-circle-height: 12px !default;

package/lib/component/transaction-history-grid-status/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-history-grid-status/transaction-history-grid-status.component.d.ts

@@ -1,7 +1,9 @@
 import { AfterViewInit, ElementRef } from "@angular/core";
 import { StatusType } from "../../enum/status-type.enum";
 export declare class TransactionHistoryGridStatusComponent implements AfterViewInit {
+    readonly type: typeof StatusType;
     statusType: StatusType;
+    subType: string;
     statusIndicator: ElementRef;
     showClass(): boolean;
     private _getStatusIndicatorColor;

package/lib/component/transaction-line/style/_layout.scss

@@ -94,6 +94,8 @@
       flex-shrink: 0;
       height: $tp-transaction-line-amount-height;
       padding: $tp-transaction-line-inner-padding;
+      width: 100px;
+      justify-content: flex-end;
     }
     .transaction-line-buttons {
       display: flex;
@@ -104,12 +106,48 @@
       height: $tp-transaction-line-amount-height;
       padding: $tp-transaction-line-inner-padding;
       .circle {
+        opacity: 0;
         height: 25px;
         width: 25px;
         co-icon {
           height: 25px;
           width: 25px;
         }
+        &.show {
+          opacity: 1;
+        }
+      }
+      .circle:nth-child(1) {
+        //animation-delay: .4s;
+        transition: all .2s .4s;
+      }
+      .circle:nth-child(2) {
+        //animation-delay: .4s;
+        transition: all .2s .3s;
+      }
+      .circle:nth-child(3) {
+        //animation-delay: .6s;
+        transition: all .2s .2s;
+      }
+      .circle:nth-child(4) {
+        //animation-delay: .8s;
+        transition: all .2s .1s;
+      }
+      .circle.show:nth-child(1) {
+        //animation-delay: .4s;
+        transition: all .2s;
+      }
+      .circle.show:nth-child(2) {
+        //animation-delay: .4s;
+        transition: all .2s .1s;
+      }
+      .circle.show:nth-child(3) {
+        //animation-delay: .6s;
+        transition: all .2s .2s;
+      }
+      .circle.show:nth-child(4) {
+        //animation-delay: .8s;
+        transition: all .2s .3s;
       }
     }
     .transaction-line-description-description {
@@ -134,7 +172,6 @@
     font-family: $tp-transaction-line-font-family;
     font-size: $tp-transaction-line-article-text-font-size;
     padding: $tp-transaction-line-article-text-padding;
-    background-color: $tp-transaction-line-background-color;
   }
   //.cdk-drop-list-dragging .drag-drop-list:not(.cdk-drag-placeholder) {
   //  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);

package/lib/component/transaction-line/style/_material-definition.scss

@@ -11,9 +11,9 @@ $tp-transaction-line-border-color: $tp-color-action !default;
 $tp-transaction-line-image-border: 1px solid $tp-color-border !default;
 $tp-transaction-line-column-gap: 15px !default;
 $tp-transaction-line-row-gap: 15px !default;
-$tp-transaction-line-image-width: 125px !default;
+$tp-transaction-line-image-width: 67px !default;
 $tp-transaction-line-preview-image-width: 75px !default;
-$tp-transaction-line-image-height: 100px !default;
+$tp-transaction-line-image-height: 50px !default;
 $tp-transaction-line-preview-image-height: 50px !default;
 $tp-transaction-line-amount-height: 50px !default;
 $tp-transaction-line-amount-input-width: 50px !default;
@@ -25,5 +25,6 @@ $tp-transaction-line-buttons-overview-background-color: $tp-color-active-light !
 $tp-transaction-line-buttons-overview-text-color: $tp-color-light !default;
 $tp-transaction-line-buttons-add-text-background-color: $tp-color-action !default;
 $tp-transaction-line-buttons-add-text-text-color: $tp-color-light !default;
-$tp-transaction-line-article-text-font-size: $tp-font-size-small !default;
+$tp-transaction-line-article-text-font-size: $tp-font-size !default;
+$tp-transaction-line-article-text-font-color: $tp-color-label !default;
 $tp-transaction-line-article-text-padding: 2px !default;

package/lib/component/transaction-line/style/_theme.scss

@@ -4,6 +4,7 @@
   .co-transaction-line {
     background-color: $tp-transaction-line-background-color;
     border-color: $tp-transaction-line-border-color;
+    color: $tp-color-font;
     .transaction-line-image {
       border: $tp-transaction-line-image-border;
     }
@@ -37,5 +38,9 @@
         fill: $tp-transaction-line-buttons-add-text-text-color;
       }
     }
+    .article-text {
+      color: $tp-transaction-line-article-text-font-color;
+      background-color: $tp-transaction-line-background-color;
+    }
   }
 }

package/lib/component/transaction-line/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-line/transaction-line.component.d.ts

@@ -8,21 +8,25 @@ import { IconCacheService } from "../../service/icon-cache.service";
 import { TransactionAddTextLineRequest } from "@colijnit/transactionapi/build/model/transaction-add-text-line-request.bo";
 import { DialogService } from "../../service/dialog.service";
 import { ResolveLinePendingReasonRequest } from "@colijnit/transactionapi/build/model/resolve-pending-reason-request.bo";
+import { TransactionImageService } from "../../service/transaction-image.service";
 export declare class TransactionLineComponent {
     service: TransactionService;
     iconCacheService: IconCacheService;
     private _dialogService;
     private _dictionaryService;
+    private _imageService;
     readonly icons: typeof Icon;
     preview: boolean;
     set line(value: TransactionLineInfo);
     get line(): TransactionLineInfo;
     waitingForUserAction: EventEmitter<boolean>;
-    showSidePanelClicked: EventEmitter<boolean>;
+    sidePanelButtonClicked: EventEmitter<void>;
     isText: boolean;
     isArticle: boolean;
     isSelected: boolean;
     showClass(): boolean;
+    handleMouseOver(event: MouseEvent): void;
+    handleMouseLeave(event: MouseEvent): void;
     localAmount: number;
     image: string;
     stock: StockStatus;
@@ -31,9 +35,9 @@ export declare class TransactionLineComponent {
     showTransactionArticleTextOverview: boolean;
     articleTextHeader: string;
     textToEdit: string;
-    showSidePanel: boolean;
+    mouseOver: boolean;
     private _line;
-    constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService);
+    constructor(service: TransactionService, iconCacheService: IconCacheService, _dialogService: DialogService, _dictionaryService: DictionaryService, _imageService: TransactionImageService);
     changeLineAmount(amount: number): void;
     deleteTransactionLineClick(): Promise<void>;
     handleTransactionArticleText(event: MouseEvent): void;
@@ -48,5 +52,4 @@ export declare class TransactionLineComponent {
     private _showArticleTextOverviewDialog;
     private _hideArticleTextOverviewDialog;
     handleShowSidePanel(event: MouseEvent): void;
-    handleCloseSidePanel(event: MouseEvent): void;
 }

package/lib/component/transaction-line-grid/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-line-side-panel/style/_layout.scss

@@ -8,9 +8,9 @@
     font-size: $tp-transaction-line-side-panel-font-size;
     position: fixed;
     right: 0;
-    top: 0;
+    top: $tp-transaction-line-side-panel-top;
     width: $tp-transaction-line-side-panel-width;
-    height: 100%;
+    height: $tp-transaction-line-side-panel-height;
     z-index: 10;
     box-shadow: $tp-transaction-line-side-panel-box-shadow;
     padding: $tp-transaction-line-side-panel-padding;
@@ -50,6 +50,7 @@
       flex-direction: column;
       flex-basis: 100%;
       overflow-y: auto;
+      overflow-x: hidden;
     }
     .save-cancel-wrapper {
       display: flex;

package/lib/component/transaction-line-side-panel/style/_material-definition.scss

@@ -1,5 +1,7 @@
 $tp-transaction-line-side-panel-font-family: $tp-font-family !default;
 $tp-transaction-line-side-panel-font-size: $tp-font-size !default;
+$tp-transaction-line-side-panel-top: 0 !default;
+$tp-transaction-line-side-panel-height: 100% !default;
 $tp-transaction-line-side-panel-width: 700px !default;
 $tp-transaction-line-side-panel-box-shadow: -3px 0px 16px 1px rgb(0, 0, 0, 0.2) !default;
 $tp-transaction-line-side-panel-padding: 10px !default;

package/lib/component/transaction-line-side-panel/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-line-side-panel/transaction-line-side-panel.component.d.ts

@@ -1,18 +1,25 @@
 import { EventEmitter } from "@angular/core";
 import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
-import { TabCategory } from "../../enum/tab-category.enum";
 import { Icon } from "../../enum/icon.enum";
 import { IconCacheService } from "../../service/icon-cache.service";
+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";
 export declare class TransactionLineSidePanelComponent {
     iconService: IconCacheService;
+    private _service;
+    private _transactionEventService;
     readonly icons: typeof Icon;
-    readonly tabCategory: typeof TabCategory;
+    readonly categories: typeof TransactionTypeCategory;
+    readonly transactionTypes: typeof TransactionKind;
+    transactionType: TransactionKind;
     transactionLine: TransactionLineInfo;
-    activeTabCategory: TabCategory;
+    transactionId: number;
+    activeCategory: TransactionTypeCategory;
     cancelClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
-    constructor(iconService: IconCacheService);
+    quantityToReceive: number;
+    constructor(iconService: IconCacheService, _service: TransactionService, _transactionEventService: TransactionEventService);
     handleCancelClick(event: MouseEvent): void;
-    handleSaveDetailsEdit(): void;
-    handleCancelDetailsEdit(): void;
 }

package/lib/component/transaction-line-side-panel-default/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-line-side-panel-purchase/style/_layout.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('cc-transaction-line-side-panel-purchase-layout') {
+  .co-transaction-line-side-panel-purchase {
+  }
+}

package/lib/component/transaction-line-side-panel-purchase/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('cc-transaction-line-side-panel-purchase-theme') {
+  .co-transaction-line-side-panel-purchase {
+  }
+}

package/lib/component/transaction-line-side-panel-purchase/style/material.scss

@@ -0,0 +1,5 @@
+@import "../../../style/mixin";
+@import "../../../style/variables";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/transaction-line-side-panel-purchase/transaction-line-side-panel-purchase.component.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from "@angular/core";
+import { GoodsReceiptStatusWithHistory } from "@colijnit/transactionapi/build/model/goods-receipt-status-with-history.bo";
+import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionTypeCategory } from "../../enum/transaction-type-category.enum";
+import { TransactionService } from "../../service/transaction.service";
+import { TransactionEventService } from "../../service/transaction-event.service";
+export declare class TransactionLineSidePanelPurchaseComponent {
+    private _service;
+    private _transactionEventService;
+    readonly categories: typeof TransactionTypeCategory;
+    transactionLine: TransactionLineInfo;
+    set transactionId(value: number);
+    get transactionId(): number;
+    category: TransactionTypeCategory;
+    quantityToReceiveChange: EventEmitter<number>;
+    showClass(): boolean;
+    goodsReceiptStatus: GoodsReceiptStatusWithHistory;
+    private _transactionId;
+    constructor(_service: TransactionService, _transactionEventService: TransactionEventService);
+    getGoodsReceiptStatusWithHistory(): Promise<void>;
+}

package/lib/component/transaction-line-side-panel-purchase/transaction-line-side-panel-purchase.module.d.ts

@@ -0,0 +1,2 @@
+export declare class TransactionLineSidePanelPurchaseModule {
+}

package/lib/component/transaction-lines/style/material.scss

@@ -1,4 +1,3 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/component/transaction-lines/transaction-lines.component.d.ts

@@ -14,15 +14,13 @@ export declare class TransactionLinesComponent {
     transactionLines: TransactionLineInfo[];
     preview: boolean;
     saveTransactionLine: EventEmitter<TransactionAddTextLineRequest>;
-    showSidePanelClicked: EventEmitter<{
-        show: boolean;
-        line: TransactionLineInfo;
-    }>;
+    showSidePanelClicked: EventEmitter<TransactionLineInfo>;
     showClass(): boolean;
     showTransactionArticleText: boolean;
     selectedArticleText: TransactionLineInfo;
     textToEdit: string;
     userActionRequired: boolean;
+    selectedTransactionLine: TransactionLineInfo;
     constructor(iconCacheService: IconCacheService, service: TransactionService);
     trackByFn(index: number, line: TransactionLineInfo): any;
     handleCanDragDrop(drag: CdkDrag, drop: CdkDropList): boolean;
@@ -31,7 +29,7 @@ export declare class TransactionLinesComponent {
     handleTransactionArticleText(event: MouseEvent): void;
     closeTransactionArticleText(event: MouseEvent): void;
     saveTransactionArticleLineText(transactionLine: TransactionAddTextLineRequest): void;
-    handleShowSidePanelClicked(event: boolean, line: TransactionLineInfo): void;
+    handleShowSidePanelClicked(line: TransactionLineInfo): void;
     private _showArticleTextDialog;
     private _hideArticleTextDialog;
 }

package/lib/component/transaction-quick-access/transaction-quick-access/style/_layout.scss

@@ -0,0 +1,11 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-transaction-quick-access-layout') {
+  .co-transaction-quick-access {
+    .quick-access-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+  }
+}