@colijnit/transaction 12.1.114 → 12.1.116

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

@@ -1,4 +1,5 @@
 import { TransactionPurchaseOrderLineBaseComponent } from './transaction-purchase-order-line-base.component';
 export declare class TransactionPurchaseOrderLineComponent extends TransactionPurchaseOrderLineBaseComponent {
     showClass(): boolean;
+    confirmDeliveryDate(data: any): void;
 }

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

@@ -5,13 +5,13 @@
     .line-content-wrapper {
       display: grid;
       grid-template-columns:
-        60px
+        75px
         $tp-transaction-line-button-width
         $tp-transaction-line-button-width
         $tp-transaction-line-button-width
-        90px
-        30px
-        $tp-transaction-line-button-width;
+        $tp-transaction-line-button-width
+        $tp-transaction-line-input-number-picker-width
+        $tp-transaction-line-input-number-picker-width;
       grid-template-rows: $tp-transaction-line-button-height;
       gap: 0 10px;
       grid-template-areas:

package/lib/component/transaction-line/transaction-receive-goods-line/transaction-receive-goods-line-base.component.d.ts

@@ -12,7 +12,6 @@ export declare abstract class TransactionReceiveGoodsLineBaseComponent extends T
     ngOnDestroy(): void;
     changeLineAmount(amount: number): void;
     handleLineClicked(mouseClick: PointerEvent): void;
-    protected transactionSet(): void;
     protected transactionLineSet(): void;
     private _handleTransactionLineSet;
 }

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

@@ -11,4 +11,7 @@
       }
     }
   }
+  .input-text {
+    height: 20px;
+  }
 }

package/lib/component/transaction-line-fields/transaction-line-warehouse-location-button.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef } from '@angular/core';
 import { Icon } from "../../enum/icon.enum";
 import { IconCacheService } from "../../service/icon-cache.service";
 import { DialogService } from "../../service/dialog.service";
@@ -16,10 +16,7 @@ export declare class TransactionLineWarehouseLocationButtonComponent extends Tra
     protected changeDetector: ChangeDetectorRef;
     private _dialogService;
     readonly icons: typeof Icon;
-    locationNr: string;
-    warehouseNumber: number;
     readonly: boolean;
-    locationNrChange: EventEmitter<string>;
     showClass(): boolean;
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _dialogService: DialogService);
     openWarehouseLocationDialog(): Promise<void>;

package/lib/component/transaction-line-fields/transaction-purchase-portal-line-confirmed-delivery-date.component.d.ts

@@ -1,10 +1,10 @@
+import { EventEmitter } from "@angular/core";
 import { Icon } from "../../enum/icon.enum";
-import { IconCacheService } from "../../service/icon-cache.service";
 import { PurchasePortalLine } from "@colijnit/transactionapi/build/model/purchase-portal-line.bo";
 export declare class TransactionPurchasePortalLineConfirmedDeliveryDateComponent {
-    iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
     purchasePortalLine: PurchasePortalLine;
+    selectedConfirmedDeliveryDate: EventEmitter<any>;
+    confirmedDeliveryDate: Date;
     showClass(): boolean;
-    constructor(iconCacheService: IconCacheService);
 }

package/lib/component/transaction-line-fields/transaction-purchase-portal-line-confirmed-price.component.d.ts

@@ -11,4 +11,5 @@ export declare class TransactionPurchasePortalLineConfirmedPriceComponent {
     input: InputTextComponent;
     private _editMode;
     constructor();
+    portalLinePriceChanged(event: number): void;
 }

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

@@ -19,4 +19,5 @@ export declare class TransactionLinePurchaseConfirmationComponent extends Transa
     handleCancelClick(): void;
     protected transactionLineSet(): void;
     private _updateBatchArray;
+    private _getPurchasePortalLine;
 }

package/lib/component/transaction-line-purchase-receive-goods/style/_layout.scss

@@ -9,6 +9,14 @@
       display: flex;
       flex-direction: column;
 
+      .transaction-line-totals-amount {
+        margin: 5px;
+      }
+
+      .icon-wrapper .co-icon {
+        padding: 13px;
+      }
+
       //.amount-number-picker {
       //  height: 40px;
       //  margin: 5px;
@@ -48,7 +56,7 @@
       position: relative;
 
       .transaction-line-button {
-        height: 40px;
+        height: 45px;
         width: auto;
         margin: 5px;
       }
@@ -67,20 +75,42 @@
       margin-top: 25px;
       margin-bottom: 40px;
       justify-content: center;
+      column-gap: 4px;
+
+      co-button {
+        height: auto;
+        width: auto;
+        background-color: $tp-default-background-accent;
+        border-bottom: 2px solid $tp-color-border;
+        cursor: pointer;
 
-      .commit-button {
-        display: flex;
-        width: 125px;
-        height: 35px;
-        background: $tp-color-action;
-        align-items: center;
-        justify-content: center;
-        border-radius: 11px;
-
-        .commit-text {
-          font-size: 12px;
-          font-weight: bold;
-          color: $tp-color-text-light;
+        &:not(.circle) {
+          padding: 8px;
+        }
+
+        &.cancel-button {
+          padding: 5px;
+          co-icon {
+            width: 22px;
+            height: 22px;
+            svg { // for fontawesome icons
+              fill: $tp-color-dark-accent;
+            }
+            & [fill] { // for own icons
+              fill: $tp-color-dark-accent;
+            }
+          }
+        }
+      }
+
+      co-icon {
+        width: 16px;
+        height: 16px;
+        svg { // for fontawesome icons
+          fill: $tp-color-action;
+        }
+        & [fill] { // for own icons
+          fill: $tp-color-action;
         }
       }
     }

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

@@ -54,14 +54,50 @@
       overflow-x: hidden;
     }
     .save-cancel-wrapper {
-      display: flex;
-      justify-content: center;
-      padding: 30px;
+        width: 100%;
+        display: flex;
+        margin-top: 25px;
+        margin-bottom: 40px;
+        justify-content: center;
+        column-gap: 4px;
+
+        co-button {
+          height: auto;
+          width: auto;
+          background-color: $tp-default-background-accent;
+          border-bottom: 2px solid $tp-color-border;
+          cursor: pointer;
 
-      .button-wrapper {
-        margin: 5px;
+          &:not(.circle) {
+            padding: 8px;
+          }
+
+          &.cancel-button {
+            padding: 5px;
+            co-icon {
+              width: 22px;
+              height: 22px;
+              svg { // for fontawesome icons
+                fill: $tp-color-dark-accent;
+              }
+              & [fill] { // for own icons
+                fill: $tp-color-dark-accent;
+              }
+            }
+          }
+        }
+
+        co-icon {
+          width: 16px;
+          height: 16px;
+          svg { // for fontawesome icons
+            fill: $tp-color-action;
+          }
+          & [fill] { // for own icons
+            fill: $tp-color-action;
+          }
+        }
       }
-    }
     .hidden {
       visibility: hidden;
     }

package/lib/component/transaction-print-package-sticker/style/_layout.scss

@@ -1,28 +1,11 @@
 @include export-module('cc-transaction-print-package-sticker-layout') {
   .co-transaction-print-package-sticker {
-    .print-button {
-      display: flex;
-      align-items: center;
-      padding: 3px 6px;
-      border: 1px solid #8a8f8f;
-      border-radius: 9px;
-      width: 55px;
-      justify-content: space-between;
 
+    co-input-number-picker {
+      height: 100%;
       co-icon {
         width: 17px;
         height: 17px;
-        &.pointer {
-          cursor: pointer;
-        }
-      }
-
-      co-input-text {
-        width: 15px;
-        text-align-last: center;
-        input, .input-text-wrapper, .input-wrapper {
-          width: inherit;
-        }
       }
     }
   }

package/lib/component/transaction-quick-access/transaction-quick-access-invoice/transaction-quick-access-invoice.component.d.ts

@@ -6,12 +6,13 @@ import { EmailInvoiceRequest } from "@colijnit/transactionapi/build/model/email-
 import { PrintInvoiceRequest } from "@colijnit/transactionapi/build/model/print-invoice-request";
 import { PdfInvoiceRequest } from "@colijnit/transactionapi/build/model/pdf-invoice-request";
 export declare class TransactionQuickAccessInvoiceComponent extends TransactionQuickAccessSendMethodBaseComponent implements OnInit {
-    internalParameterAllowsPartialInvoicing: boolean;
+    sendDocumentsComponent: any;
     showClass(): boolean;
     reportDocumentEmailRequest: EmailInvoiceRequest;
     reportDocumentPrintRequest: PrintInvoiceRequest;
     reportDocumentPdfRequest: PdfInvoiceRequest;
     canInvoice: boolean;
+    internalParameterAllowsPartialInvoicing: boolean;
     ngOnInit(): void;
     handleSelectAllLines(value: boolean): void;
     protected getDefaultEmailAddressList(): Promise<string[]>;
@@ -23,6 +24,8 @@ export declare class TransactionQuickAccessInvoiceComponent extends TransactionQ
     protected emailDocument(emailInvoiceRequest: EmailInvoiceRequest): void;
     transactionSet(): void;
     _prepareRequest(request: EmailInvoiceRequest | PrintInvoiceRequest | PdfInvoiceRequest): void;
+    historicDocuments(): boolean;
+    handleSendDocument(defaultSendMethod: string): void;
     private _createRequestLines;
     private _createLinesInfoArray;
     private _getInternalParameterAllowPartialInvoicing;

package/lib/component/transaction-quick-access/transaction-quick-access-order-confirmation/transaction-quick-access-order-confirmation.component.d.ts

@@ -5,6 +5,5 @@ export declare class TransactionQuickAccessOrderConfirmationComponent extends Tr
     showClass(): boolean;
     awaitingResult: boolean;
     iconVisible: boolean;
-    handleSelectAllLines(value: boolean): void;
     handleCommitEvent(event: MouseEvent): Promise<void>;
 }

package/lib/component/transaction-quick-access/transaction-quick-access-order-delivery/transaction-quick-access-order-delivery.component.d.ts

@@ -24,5 +24,7 @@ export declare class TransactionQuickAccessOrderDeliveryComponent extends Transa
     protected emailDocument(emailDeliveryNoteRequest: EmailDeliveryNoteRequest): void;
     transactionSet(): void;
     _prepareRequest(request: EmailDeliveryNoteRequest | PrintDeliveryNoteRequest | PdfDeliveryNoteRequest): void;
+    historicDocuments(): boolean;
+    handleSendDocument(defaultSendMethod: string): void;
     private _createRequestLines;
 }

package/lib/component/transaction-quick-access/transaction-quick-access-overview/transaction-quick-access-overview.component.d.ts

@@ -6,6 +6,7 @@ import { PrintOrderConfirmationRequest } from '@colijnit/mainapi/build/model/pri
 import { PdfOrderConfirmationRequest } from '@colijnit/mainapi/build/model/pdf-order-confirmation-request';
 import { TransactionQuickAccessSendMethodBaseComponent } from '../transaction-quick-access-send-method-base.component';
 export declare class TransactionQuickAccessOverviewComponent extends TransactionQuickAccessSendMethodBaseComponent implements OnInit {
+    sendDocumentsComponent: any;
     showClass(): boolean;
     reportDocumentEmailRequest: EmailOrderConfirmationRequest;
     reportDocumentPrintRequest: PrintOrderConfirmationRequest;
@@ -18,4 +19,5 @@ export declare class TransactionQuickAccessOverviewComponent extends Transaction
     protected pdfDocument(request: PdfOrderConfirmationRequest): void;
     protected printDocument(request: PrintOrderConfirmationRequest): Promise<void>;
     protected getDefaultSendMethod(): Promise<number>;
+    _prepareRequest(request: EmailOrderConfirmationRequest | PrintOrderConfirmationRequest | PdfOrderConfirmationRequest): void;
 }

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

@@ -25,6 +25,16 @@
         }
       }
 
+      .co-transaction-line-warehouse-location-button {
+        .transaction-line-button {
+          height: 45px;
+          width: 100px;
+          .co-icon {
+            padding: 13px;
+          }
+        }
+      }
+
       .button-wrapper {
         background: $tp-default-background-accent;
         border-radius: $tp-default-border-radius;

package/lib/component/transaction-quick-access/transaction-quick-access-received-goods/transaction-quick-access-received-goods.component.d.ts

@@ -16,6 +16,7 @@ export declare class TransactionQuickAccessReceivedGoodsComponent extends Transa
     commitDate: Date;
     packingSlipNr: string;
     hideQuickAccessContent: boolean;
+    globalWarehouseLocation: string;
     showClass(): boolean;
     ngOnInit(): void;
     handleCommitEvent(): Promise<void>;
@@ -27,4 +28,5 @@ export declare class TransactionQuickAccessReceivedGoodsComponent extends Transa
     protected pdfDocument(): void;
     protected printDocument(printRequest: ReportingDocumentPrintBaseRequest): void;
     protected emailDocument(emailInvoiceRequest: EmailInvoiceRequest): void;
+    handleGlobalLocationChange(location: string): void;
 }

package/lib/component/transaction-send-documents/transaction-send-documents.component.d.ts

@@ -12,6 +12,7 @@ export declare class TransactionSendDocumentsComponent extends TransactionBaseCo
     showClass(): boolean;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    getHistoricDocuments(): void;
     toggleSendDocumentsDialog(): void;
     handleShowHistoricDocumentLines(historicReport: HistoricReport): void;
     getSendMethodIcon(report: HistoricReport): Icon;

package/lib/enum/icon.enum.d.ts

@@ -12,6 +12,7 @@ export declare enum Icon {
     CalendarDayRegular = "calendar_day_regular",
     Cancel = "cancel",
     CartCheck = "cart_check",
+    CartFlatbedBoxesRegular = "cart_flatbed_boxes_regular",
     CartFlatbedBoxesSolid = "cart_flatbed_boxes_solid",
     CartMinusRegular = "cart_minus_regular",
     CartPlusRegular = "cart_plus_regular",
@@ -63,9 +64,13 @@ export declare enum Icon {
     PrintRegular = "print_regular",
     PrintSolid = "print_solid",
     Purchase = "purchase",
+    RegularCartFlatbedBoxesCircleCheck = "regular_cart_flatbed_boxes_circle_check",
+    RegularIndustryClock = "regular_industry_clock",
+    RegularIndustryTag = "regular_industry_tag",
     Resize = "resize",
     ShareSolid = "share_solid",
     SharpLightTruckMovingClock = "sharp_light_truck_moving_clock",
+    SharpRegularBarcodeReadTag = "sharp_regular_barcode_read_tag",
     ShelvesLight = "shelves_light",
     ShelvesRegular = "shelves_regular",
     ShelvesSolid = "shelves_solid",

package/lib/enum/transaction-type-category.enum.d.ts

@@ -11,5 +11,6 @@ export declare enum TransactionTypeCategory {
     SalesOrderLogistics = "salesOrderLogistics",
     SalesOrderPlanning = "salesOrderPlanning",
     SalesOrderDeliveryNote = "salesOrderDeliveryNote",
-    SalesOrderInvoice = "salesOrderInvoice"
+    SalesOrderInvoice = "salesOrderInvoice",
+    SalesOrderCashRegister = "salesOrderCashRegister"
 }

package/lib/res/dictionary/dictionaries.d.ts

@@ -3140,6 +3140,7 @@ export declare class Dictionaries {
         CREATE_ABSENCE: string;
         CREATE_ACCOUNT: string;
         CREATE_ACCOUNT_IN_2_MIN: string;
+        CREATE_AUDIT_FILE: string;
         CREATE_EXCEPTION: string;
         CREATE_IDENTIFICATION: string;
         CREATE_NEW: string;
@@ -4394,6 +4395,9 @@ export declare class Dictionaries {
         INCLUDE_LINE_DETAILS: string;
         INCLUDE_NO_STOCK_ART: string;
         INCLUDE_REAFFIRMATIONS: string;
+        INCLUDING_OPENING_BALANCE: string;
+        INCLUDING_RELATION_DETAILS: string;
+        INCLUDING_UNPROCESSED_ENTRIES: string;
         INCLUDING_CONTACT_PERSONS: string;
         INCLUDING_PRINTED: string;
         INCLUDING_RETURNS: string;
@@ -5787,6 +5791,7 @@ export declare class Dictionaries {
         OUTGOING: string;
         OUTSTANDING: string;
         OUTSTANDING_AMOUNT: string;
+        OUTSTANDING_AMOUNT_CURRENCY: string;
         OUTSTANDING_AMOUNTS_BOOKINGS: string;
         OUTSTANDING_AMOUNTS_CUSTOMERS: string;
         OUTSTANDING_AMOUNTS_SUPPLIERS: string;
@@ -5904,6 +5909,7 @@ export declare class Dictionaries {
         PAYMENT_CONDITION_30_60: string;
         PAYMENT_CONDITION_60: string;
         PAYMENT_CONDITION_LEDGER_ACCOUNT: string;
+        PAYMENT_DISCOUNT: string;
         PAYMENT_EXECUTED: string;
         PAYMENT_INFO: string;
         PAYMENT_INFORMATION: string;
@@ -11280,6 +11286,7 @@ export declare class Dictionaries {
         CREATE_ABSENCE: string;
         CREATE_ACCOUNT: string;
         CREATE_ACCOUNT_IN_2_MIN: string;
+        CREATE_AUDIT_FILE: string;
         CREATE_EMPLOYEE: string;
         CREATE_EXCEPTION: string;
         CREATE_IDENTIFICATION: string;
@@ -12660,9 +12667,12 @@ export declare class Dictionaries {
         INCLUDE_NO_STOCK_ART: string;
         INCLUDE_REAFFIRMATIONS: string;
         INCLUDING_CONTACT_PERSONS: string;
+        INCLUDING_OPENING_BALANCE: string;
         INCLUDING_PRINTED: string;
+        INCLUDING_RELATION_DETAILS: string;
         INCLUDING_REQUESTED_ONLINE: string;
         INCLUDING_RETURNS: string;
+        INCLUDING_UNPROCESSED_ENTRIES: string;
         INCLUSIVE_DELAYED_DELIVERIES: string;
         INCLUSIVE_RETURNS: string;
         INCL_DELIVERED: string;
@@ -14221,6 +14231,7 @@ export declare class Dictionaries {
         OUTGOING: string;
         OUTSTANDING: string;
         OUTSTANDING_AMOUNT: string;
+        OUTSTANDING_AMOUNT_CURRENCY: string;
         OUTSTANDING_AMOUNTS_BOOKINGS: string;
         OUTSTANDING_AMOUNTS_CUSTOMERS: string;
         OUTSTANDING_AMOUNTS_SUPPLIERS: string;
@@ -14343,6 +14354,7 @@ export declare class Dictionaries {
         PAYMENT_CONDITION_60: string;
         PAYMENT_CONDITION_LEDGER_ACCOUNT: string;
         PAYMENT_DESCRIPTION: string;
+        PAYMENT_DISCOUNT: string;
         PAYMENT_EXECUTED: string;
         PAYMENT_ID: string;
         PAYMENT_INFO: string;

package/lib/service/transaction-base.service.d.ts

@@ -57,7 +57,6 @@ export declare class TransactionBaseService {
     purchasePortalLine: PurchasePortalLine[];
     docDeliveryBatch: DocDeliveryBatch;
     articleAmount: number;
-    protected warehouseLocationPopupShown: boolean;
     private _transactionKind;
     private _relation;
     private _purchaseOrdersCompleted;

package/lib/service/transaction.service.d.ts

@@ -78,7 +78,7 @@ export declare class TransactionService extends PendingReasonService {
     prepareReceiveGoodsWithDataTerminalInternalParam(): void;
     getFocusStatusIndex(category: TransactionTypeCategory): number;
     getRelationKindFromTransactionKind(): RelationKind;
-    showWarehouseLocationPopupOnce(): Promise<void>;
+    showWarehouseLocationPopup(): Promise<string>;
     deleteTransaction(): Promise<void>;
     updatePriceTransactionLine(uuid: string, lineUuid: string, price: number): Promise<boolean>;
     updateReferenceTransactionLine(uuid: string, lineUuid: string, reference: string): Promise<boolean>;

package/lib/style/_variables.scss

@@ -63,7 +63,7 @@ $tp-action-size-pico: 14px !default;
 $tp-size-header-height: 60px !default;
 
 $tp-default-background-accent: #f5f5fc !default;
-$tp-default-border-radius: 8px !default;
+$tp-default-border-radius: 5px !default;
 $tp-default-button-height: 26px;
 
 $tp-xs-width: 600px !default;
@@ -77,6 +77,9 @@ $tp-transaction-line-button-big-width: 175px !default;
 $tp-transaction-line-button-font-size: 11px !default;
 $tp-transaction-line-button-font-weight: 600 !default;
 $tp-transaction-line-button-icon-size: 13px !default;
+$tp-transaction-line-button-icon-margin: 5px !default;;
+$tp-transaction-line-button-icon-padding: 4px !default;;
+$tp-transaction-line-button-icon-spacer-width: 1px !default;
 $tp-transaction-line-button-height: 26px !default;
 $tp-transaction-line-button-background-color: $tp-default-background-accent !default;
 $tp-transaction-line-button-border-color: $tp-color-border !default;
@@ -84,13 +87,24 @@ $tp-transaction-line-button-column-gap: 15px !default;
 $tp-transaction-line-button-padding: 0 10px !default;
 $tp-transaction-line-button-radius: $tp-default-border-radius !default;
 $tp-transaction-line-button-border: 1px solid !default;
+$tp-transaction-line-button-label-row-gap: 9px !default;
+$tp-transaction-line-button-label-padding-right: 5px !default;
+$tp-transaction-line-button-label-color: rgba(0, 0, 0, 0.7) !default;
+$tp-transaction-line-input-number-picker-width: 110px !default;
 
 $tp-transaction-header-font-family: $tp-font-family !default;
 $tp-transaction-header-font-size: 14px !default;
 $tp-transaction-header-font-color: $tp-color-dark !default;
 $tp-transaction-lines-drag-handle-size: 30px !default;
-
 $tp-transaction-quick-access-column-gap: 10px;
+
+
+// payment num pad globals
+$tp-payment-amount-color: rgba(0, 0, 0, 0.5) !default;
+$tp-payment-amount-background-color: #dedede5c !default;
+$tp-payment-amount-border-color: $tp-color-border !default;
+
+
 /* core components override */
 $cc-color-action: $tp-color-font !default;
 $cc-btn-color: $tp-color-action !default;
@@ -122,6 +136,13 @@ $cc-collapsible-content-padding: 10px 0px 0px 0px !default;
 $cc-co-input-search-border-radius: $tp-default-border-radius !default;
 
 $cc-co-input-text-icon-margin-number: 5px !default;
+$cc-co-input-text-spacer-color: $tp-color-border !default;
+$cc-co-input-text-icon-padding: 4px !default;
+
+$cc-co-input-number-picker-button-background-color-hover: $tp-color-action !default;
+$cc-co-input-number-picker-button-background-color-select: $tp-color-action !default;
+$cc-co-input-number-picker-spacer-color: $tp-color-border !default;
+$cc-co-input-number-picker-icon-padding: 4px !default;
 
 //$cc-co-commit-buttons-button-background: none !default;
 $cc-co-commit-buttons-commit-color: $tp-color-label !default;

package/lib/style/transaction-globals.scss

@@ -65,11 +65,25 @@
   display: flex;
   align-items: center;
   height: $tp-transaction-line-button-height;
-  column-gap: $tp-transaction-line-button-column-gap;
-  padding: $tp-transaction-line-button-padding;
-  .co-icon {
-    height: $tp-transaction-line-button-icon-size;
-    width: $tp-transaction-line-button-icon-size;
+
+  .icon-wrapper {
+    display: flex;
+    height: 100%;
+    flex-shrink: 0;
+    align-items: center;
+    margin-right: $tp-transaction-line-button-icon-margin;
+
+    .co-icon {
+      height: 100%;
+      width: auto;
+      padding: $tp-transaction-line-button-icon-padding;
+    }
+
+    .spacer {
+      height: 100%;
+      min-width: $tp-transaction-line-button-icon-spacer-width;
+      background-color: $tp-color-border;
+    }
   }
   &:not(.no-border) {
     border: $tp-transaction-line-button-border;
@@ -98,5 +112,23 @@
   color: $tp-color-negative-value;
 }
 
-
+.payment-to-pay-keypad {
+  .key-pad-wrapper {
+    background: transparent;
+    border-color: $tp-payment-amount-border-color;
+  }
+  .key-pad-button {
+    background-color: $tp-payment-amount-background-color;
+    color: $tp-payment-amount-color;
+    font-weight: bold;
+    .co-icon {
+      svg { // for fontawesome icons
+        fill: $tp-payment-amount-color;
+      }
+      & [fill] { // for own icons
+        fill: $tp-payment-amount-color;
+      }
+    }
+  }
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "12.1.114",
+  "version": "12.1.116",
   "description": "Colijn IT transaction module for Angular 12",
   "repository": "npm/npm",
   "author": "Colijn IT",