@colijnit/transaction 12.1.140 → 12.1.142

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

@@ -10,8 +10,8 @@ import { DictionaryService } from "../../service/dictionary.service";
 import { TransactionImageService } from "../../service/transaction-image.service";
 import { RelationService } from "../../service/relation.service";
 import { CopyTransactionRequest } from "@colijnit/transactionapi/build/model/copy-transaction-request";
-import { CustomerFullObject } from "@colijnit/relationapi/build/model/customer-full-object.bo";
 import { TransactionCreationService } from "../../service/transaction-creation.service";
+import { RelationSmallObject } from "@colijnit/relationapi/build/model/relation-small-object.bo";
 export declare class TransactionCopyOrderComponent extends TransactionBaseComponent {
     transactionEventService: TransactionEventService;
     service: TransactionService;
@@ -27,7 +27,7 @@ export declare class TransactionCopyOrderComponent extends TransactionBaseCompon
     customers: any[];
     selectedSalesPerson: SalesPerson;
     selectedBranch: BranchLov;
-    selectedCustomer: CustomerFullObject;
+    selectedCustomer: RelationSmallObject;
     copyTransactionRequest: CopyTransactionRequest;
     closeDialog: EventEmitter<void>;
     showClass(): boolean;

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

@@ -32,7 +32,7 @@
       height: $tp-transaction-header-order-discount-height;
       .header-discount {
         display: flex;
-        column-gap: 10px;
+        column-gap: $tp-transaction-header-order-discount-column-gap;
         align-items: center;
         justify-content: space-between;
         font-size: $tp-transaction-header-order-discount-font-size;
@@ -46,6 +46,11 @@
           height: $tp-transaction-header-order-discount-icon-size;
         }
       }
+      .spacer {
+        width: 1px;
+        height: 100%;
+        background: $tp-transaction-header-order-discount-border-color;
+      }
     }
     .transaction-header-block-content-third {
       display: flex;

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

@@ -11,9 +11,10 @@ $tp-transaction-header-order-discount-border-style: solid !default;
 $tp-transaction-header-order-discount-border-width: 1px !default;
 $tp-transaction-header-order-discount-border-color: $tp-color-border !default;
 $tp-transaction-header-order-discount-border-radius: $tp-default-border-radius !default;
-$tp-transaction-header-order-discount-padding: 5px 10px !default;
+$tp-transaction-header-order-discount-padding: 0px 10px !default;
 $tp-transaction-header-order-discount-icon-color: $tp-color-font !default;
 $tp-transaction-header-order-discount-icon-size: 16px !default;
+$tp-transaction-header-order-discount-column-gap: 8px !default;
 $tp-transaction-header-order-default-row-gap: $tp-default-row-gap !default;
 $tp-transaction-header-order-default-column-gap: $tp-default-column-gap !default;
 $tp-transaction-header-order-section-label-font-family: $tp-font-family !default;

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

@@ -39,7 +39,7 @@
       height: 100%;
       background-color: $tp-co-transaction-header-downpayment-percentage-wrapper-background;
       border-color: $tp-co-transaction-header-downpayment-border-color;
-      min-width: $tp-co-transaction-header-downpayment-percentage-wrapper-width;
+      pointer-events: none;
       .transaction-header-deposit {
         span {
           font-weight: $tp-co-transaction-header-downpayment-amount-weight;
@@ -47,6 +47,7 @@
       }
     }
     .header-downpayment-amount-wrapper {
+      pointer-events: none;
       .transaction-header-deposit {
         span {
           font-weight: $tp-co-transaction-header-downpayment-amount-weight;
@@ -76,6 +77,11 @@
           font-weight: 600;
         }
       }
+      .spacer {
+        width: 1px;
+        height: 100%;
+        background: $tp-co-transaction-header-payment-button-wrapper-border-color;
+      }
     }
   }
 }

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

@@ -1,13 +1,13 @@
-$tp-co-transaction-header-downpayment-border-width: 1px !default;
+$tp-co-transaction-header-downpayment-border-width: 0px !default;
 $tp-co-transaction-header-downpayment-border-radius: 5px !default;
 $tp-co-transaction-header-downpayment-border-color: $tp-color-light-accent !default;
-$tp-co-transaction-header-downpayment-percentage-padding: 2px 10px !default;
-$tp-co-transaction-header-downpayment-percentage-wrapper-background: $tp-color-light !default;
-$tp-co-transaction-header-downpayment-percentage-wrapper-width: 100px !default;
+$tp-co-transaction-header-downpayment-percentage-padding: 0 0 0 5px !default;
+$tp-co-transaction-header-downpayment-percentage-wrapper-background: transparent !default;
+$tp-co-transaction-header-downpayment-percentage-wrapper-width: 40px !default;
 $tp-co-transaction-header-downpayment-amount-weight: bold !default;
 
-$tp-co-transaction-header-payment-button-wrapper-gap: 10px !default;
-$tp-co-transaction-header-payment-button-wrapper-padding: 5px 10px !default;
+$tp-co-transaction-header-payment-button-wrapper-gap: 8px !default;
+$tp-co-transaction-header-payment-button-wrapper-padding: 0px 10px !default;
 $tp-co-transaction-header-payment-button-wrapper-height: 30px !default;
 $tp-co-transaction-header-payment-button-wrapper-border-width: 1px !default;
 $tp-co-transaction-header-payment-button-wrapper-border-color: $tp-color-light-accent !default;

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

@@ -128,7 +128,7 @@
     .co-dialog:not(.is-mobile) .co-dialog-wrapper {
       max-height: 90vh;
     }
-    .save-button {
+    .save-button, .close-button {
       height: $tp-transaction-header-popup-save-button-size;
       .co-icon {
         height: $tp-transaction-header-popup-save-button-icon-size;

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

@@ -3,6 +3,7 @@
     font-family: $tp-transaction-line-font-family;
     font-size: $tp-transaction-line-font-size;
     width: 100%;
+    min-width: 100%;
     display: flex;
     flex-direction: column;
     border: $tp-transaction-line-border;
@@ -19,6 +20,7 @@
     .line-end {
       max-width: 66%;
       width: max-content;
+      padding-top: 5px;
     }
     .preview-margin {
       margin-left: $tp-transaction-line-column-gap;
@@ -39,7 +41,6 @@
     }
     .transaction-line-extended-wrapper {
       display: flex;
-      flex-wrap: wrap;
       align-content: flex-start;
       row-gap: $tp-transaction-line-row-gap;
       .column1 {
@@ -198,6 +199,19 @@
         grid-row: 1 / 1;
       }
     }
+    @media(max-width:1440px) {
+      .transaction-line-totals {
+        grid-template-columns: 100px 100px;
+        .transaction-line-totals-total {
+          grid-column: 2 / 2;
+          grid-row: 2 / 2;
+        }
+        .co-transaction-line-discount-button {
+          grid-column: 1 / 1;
+          grid-row: 2 / 2;
+        }
+      }
+    }
     //.transaction-line-totals-price-discount {
     //  display: flex;
     //  flex-direction: column;

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

@@ -5,7 +5,8 @@
 
     .transaction-line-section {
       display: flex;
-
+      gap: 10px;
+      margin-right: 15px;
       .vat-button {
         margin-right: 15px;
       }

package/lib/component/transaction-line-action-buttons/transaction-line-action-buttons-popup.component.d.ts

@@ -5,11 +5,13 @@ export declare class TransactionLineActionButtonsPopupComponent {
     iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
     parentForOverlay: ElementRef;
+    addDocumentButtonClick: EventEmitter<void>;
     articleTextButtonClick: EventEmitter<void>;
     transactionTextButtonClick: EventEmitter<void>;
     sidePanelButtonClick: EventEmitter<void>;
     showClass: boolean;
     constructor(iconCacheService: IconCacheService);
+    handleAddDocumentButtonClick(event: MouseEvent): void;
     handleArticleTextButtonClick(event: MouseEvent): void;
     handleTransactionTextButtonClick(event: MouseEvent): void;
     handleSidePanelButtonClick(event: MouseEvent): void;

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

@@ -3,7 +3,6 @@ import { TransactionEventService } from '../../service/transaction-event.service
 import { TransactionService } from '../../service/transaction.service';
 import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
 import { Icon } from '../../enum/icon.enum';
-import { DictionaryService } from '../../service/dictionary.service';
 import { IconCacheService } from '../../service/icon-cache.service';
 import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 import { OverlayService } from '@colijnit/corecomponents_v12';
@@ -11,9 +10,9 @@ export declare class TransactionLineActionButtonsComponent implements OnInit {
     elementRef: ElementRef;
     iconCacheService: IconCacheService;
     private _transactionService;
-    private _dictionaryService;
     private _transactionEventService;
     private _overlayService;
+    private _eventService;
     readonly icons: typeof Icon;
     set transactionLine(value: TransactionLineInfo);
     get transactionLine(): TransactionLineInfo;
@@ -28,9 +27,10 @@ export declare class TransactionLineActionButtonsComponent implements OnInit {
     showActionButtons: boolean;
     private _transactionLine;
     private _actionButtonsPopupComponentRef;
-    constructor(elementRef: ElementRef, iconCacheService: IconCacheService, _transactionService: TransactionService, _dictionaryService: DictionaryService, _transactionEventService: TransactionEventService, _overlayService: OverlayService);
+    constructor(elementRef: ElementRef, iconCacheService: IconCacheService, _transactionService: TransactionService, _transactionEventService: TransactionEventService, _overlayService: OverlayService, _eventService: TransactionEventService);
     ngOnInit(): void;
     handleShowHideClick(): void;
+    handleAddDocumentButtonClick(): void;
     handleTransactionText(): void;
     handleArticleText(): void;
     handleShowSidePanel(): void;

package/lib/component/transaction-line-fields/transaction-line-delivery-date-button.component.d.ts

@@ -1,8 +1,32 @@
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { Icon } from '../../enum/icon.enum';
 import { TransactionBaseComponent } from '../core/base/transaction-base.component';
+import { OverlayService } from '@colijnit/corecomponents_v12';
+import { TransactionEventService } from "../../service/transaction-event.service";
+import { TransactionService } from "../../service/transaction.service";
+import { IconCacheService } from "../../service/icon-cache.service";
+import { TransactionScreenConfigurationService } from "../../service/transaction-screen-configuration.service";
+import { DictionaryService } from "../../service/dictionary.service";
+import { TransactionImageService } from "../../service/transaction-image.service";
 export declare class TransactionLineDeliveryDateButtonComponent extends TransactionBaseComponent {
+    transactionEventService: TransactionEventService;
+    service: TransactionService;
+    iconCacheService: IconCacheService;
+    transactionScreenConfigurationService: TransactionScreenConfigurationService;
+    protected dictionaryService: DictionaryService;
+    protected imageService: TransactionImageService;
+    protected changeDetector: ChangeDetectorRef;
+    private _overlayService;
     readonly icons: typeof Icon;
+    commitWhenDateSelected: boolean;
+    showCalender: boolean;
+    parentComponent: ElementRef;
     showClass(): boolean;
+    constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, transactionScreenConfigurationService: TransactionScreenConfigurationService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _overlayService: OverlayService);
     private _calendarPopupComponentRef;
-    handleShowDialog(event: MouseEvent): void;
+    handleShowHideClick(): void;
+    private _showPopup;
+    private _handleDateChanged;
+    private _hidePopup;
+    protected commit(date: Date): Promise<boolean>;
 }

package/lib/component/transaction-line-image-and-description/style/_layout.scss

@@ -25,7 +25,6 @@
       padding: $tp-transaction-line-image-and-description-description-inner-padding;
       overflow: hidden;
       height: 100%;
-      justify-content: center;
       .description-wrapper {
         display: flex;
         flex-direction: row;
@@ -64,6 +63,22 @@
       display: flex;
       column-gap: 15px;
     }
+    .article-text-expand {
+      &.large-article {
+        max-height: 90px;
+        overflow: hidden;
+      }
+    }
+    .expand-wrapper {
+      display: flex;
+      align-items: center;
+      padding-top: 5px;
+      .co-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+    }
 
   }
 }

package/lib/component/transaction-line-image-and-description/transaction-line-image-and-description.component.d.ts

@@ -6,10 +6,14 @@ export declare class TransactionLineImageAndDescriptionComponent extends Transac
     preview: boolean;
     openArticleTextClicked: EventEmitter<string>;
     handleDeleteLine: EventEmitter<MouseEvent>;
+    expanded: boolean;
+    expandClicked(): void;
     image: string;
     handleOpenArticleText(text: string): void;
     deleteTransactionLineClick(event: MouseEvent): Promise<void>;
     protected transactionLineSet(): void;
     protected visibilitySet(visible: boolean): void;
     private _loadLineImage;
+    calculateTotalCharacterCount(): number;
+    handleReadMoreClick(): void;
 }

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

@@ -5,12 +5,15 @@
     .transaction-tags-wrapper {
       display: flex;
       column-gap: $tp-co-transaction-tags-column-gap;
+      align-items: center;
       .edit-tags-wrapper {
         display: flex;
         column-gap: $tp-co-transaction-tags-column-gap;
+        cursor: pointer;
         .co-button {
           color: $tp-co-transaction-tags-edit-button-color;
           background: $tp-co-transaction-tags-edit-button-background-color;
+          height: 28px;
           .co-icon {
             width: $tp-co-transaction-tags-edit-button-icon-size;
             height: $tp-co-transaction-tags-edit-button-icon-size;
@@ -21,6 +24,15 @@
               fill: $tp-co-transaction-tags-edit-button-icon-color;
             }
           }
+          &:hover {
+            filter: brightness(100%);
+            background: $tp-co-transaction-tags-edit-button-hover-color;
+            .co-icon {
+              svg {
+                fill: $tp-co-transaction-tags-edit-button-hover-icon-color;
+              }
+            }
+          }
         }
       }
     }
@@ -28,6 +40,7 @@
       user-select: none;
       display: flex;
       align-items: center;
+      max-height: $tp-co-transaction-tags-height;
       padding: $tp-co-transaction-tags-padding;
       border-style: $tp-co-transaction-tags-border-style;
       border-width: $tp-co-transaction-tags-border-width;

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

@@ -1,6 +1,6 @@
 $tp-co-transaction-tags-font-family: $tp-font-family !default;
-$tp-co-transaction-tags-font-size: $tp-font-size !default;
-$tp-co-transaction-tags-color: $tp-color-font !default;
+$tp-co-transaction-tags-font-size: $tp-font-size-small !default;
+$tp-co-transaction-tags-color: $tp-color-light !default;
 $tp-co-transaction-tags-default-background-color: $tp-color-label !default;
 $tp-co-transaction-tags-border-style: solid !default;
 $tp-co-transaction-tags-border-width: 1px !default;
@@ -9,7 +9,10 @@ $tp-co-transaction-tags-column-gap: 5px !default;
 $tp-co-transaction-tags-align-items: flex-start !default;
 $tp-co-transaction-tags-border-radius: 10px !default;
 $tp-co-transaction-tags-padding: 5px 10px !default;
+$tp-co-transaction-tags-height: 24px !default;
 $tp-co-transaction-tags-edit-button-icon-size: 20px !default;
-$tp-co-transaction-tags-edit-button-icon-color: $tp-color-action !default;
+$tp-co-transaction-tags-edit-button-icon-color: $tp-color-font !default;
+$tp-co-transaction-tags-edit-button-hover-icon-color: $tp-color-light !default;
 $tp-co-transaction-tags-edit-button-color: $tp-color-action !default;
-$tp-co-transaction-tags-edit-button-background-color: $tp-default-background-accent !default;
+$tp-co-transaction-tags-edit-button-hover-color: $tp-color-action !default;
+$tp-co-transaction-tags-edit-button-background-color: $tp-default-background !default;

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

@@ -6,6 +6,7 @@ export declare enum Icon {
     ArrowPointRight = "arrow_point_right",
     ArrowRightRegular = "arrow_right_regular",
     Article = "article",
+    Attachments = "attachments",
     AtSolid = "at_solid",
     BarcodeRegular = "barcode_regular",
     BarcodeSolid = "barcode_solid",
@@ -96,6 +97,8 @@ export declare enum Icon {
     SquareFullSolid = "square_full_solid",
     SyncAlt = "sync_alt",
     Tag = "tag",
+    TagLight = "tag_light",
+    TagLines = "tag_lines",
     TextSizeSolid = "text_size_solid",
     TextSolid = "text_solid",
     ThickLines = "thick_lines",

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

@@ -14918,6 +14918,8 @@ export declare class Dictionaries {
         PROGNOSIS: string;
         PROGRESS: string;
         PROGRESSIVE: string;
+        PROJECT_CODE: string;
+        PROJECT_CODES: string;
         PROJECTNR: string;
         PROMOTIONS: string;
         PROMOTION_RULES: string;
@@ -15925,6 +15927,7 @@ export declare class Dictionaries {
         SHOW_ALL_CONTACTS: string;
         SHOW_ALL_FILTERS: string;
         SHOW_ALL_LINES: string;
+        SHOW_ALL_PRESETS: string;
         SHOW_ALL_WAREHOUSES_FOR_BRANCH: string;
         SHOW_ANONYMISED_RELATIONS: string;
         SHOW_ART_OPTIONS: string;

package/lib/service/payment.service.d.ts

@@ -14,15 +14,34 @@ import { DoPaymentRequest } from "@colijnit/transactionapi/build/model/do-paymen
 import { AmountToPay } from "@colijnit/transactionapi/build/model/amount-to-pay";
 import { CalculateAmountToPayRequest } from "@colijnit/transactionapi/build/model/calculate-amount-to-pay-request";
 import { CreateCashRegisterOrderRequest } from "@colijnit/transactionapi/build/model/create-cash-register-order-request";
+import { DepositPaymentViewModel } from "../model/deposit-payment-view-model";
+import { CashRegister } from "@colijnit/transactionapi/build/model/cash-register";
+import { TransactionEventService } from "./transaction-event.service";
 export declare class PaymentService {
     private _adapterService;
     private _selectMultipleCacheService;
     private _selectMultipleParameterizedCacheService;
     private _transactionService;
     private _sharedService;
+    private _transactionEventService;
     readonly transKind: typeof TransactionKind;
     currentCashRegisterOrderRequest: CreateCashRegisterOrderRequest;
-    constructor(_adapterService: TransactionConnectorAdapterService, _selectMultipleCacheService: SelectMultipleCacheService, _selectMultipleParameterizedCacheService: SelectMultipleParameterizedCacheService, _transactionService: TransactionService, _sharedService: SharedService);
+    selectedCashRegister: CashRegister;
+    paymentMethods: PaymentViewmodel[];
+    depositPayments: DepositPaymentViewModel[];
+    showKeyPad: boolean;
+    showPspQrCode: boolean;
+    qrCodeImage: string;
+    showLoader: boolean;
+    amountToPay: number;
+    statusMessage: string;
+    private _paymentStatusInterval;
+    private _paymentStatusPollIntervalMs;
+    private _paymentStatusMaxPollInterval;
+    private _paymentStatusPollIntervalCount;
+    private _paymentResult;
+    private _paymentMethod;
+    constructor(_adapterService: TransactionConnectorAdapterService, _selectMultipleCacheService: SelectMultipleCacheService, _selectMultipleParameterizedCacheService: SelectMultipleParameterizedCacheService, _transactionService: TransactionService, _sharedService: SharedService, _transactionEventService: TransactionEventService);
     registerSalesOrderPayment(uuid: string, amount: number, currencyId: number, paymentMethod: string, cashRegisterGroupId: number): Promise<boolean>;
     createIonePaymentLinkAndQRCode(uuid: string, amount: number, paymentMethodCode: string): Promise<CreatePaymentLinkResult>;
     doPinPayment(transId: number, paymentMethodCode: string, cashRegisterNr: number, cashRegisterGroupId: number, amount: number): Promise<string>;
@@ -35,4 +54,14 @@ export declare class PaymentService {
     getPaymentMethodsForCashRegister(branchNr: string): Promise<PaymentMethod[]>;
     processPosTransactionByUuid(uuid: string): Promise<boolean>;
     getPaymentMethodsViewModels(branchNr: string, transactionKind: TransactionKind): Promise<PaymentViewmodel[]>;
+    handlePayment(paymentMethod: PaymentMethod, cashRegister?: CashRegister, amountToPay?: number): void;
+    private _handlePayment;
+    private _doPayment;
+    private _getDepositPaymentInfo;
+    private _calculateAmountToPay;
+    private _dataUriToBase64;
+    private _waitForPaymentStatus;
+    private _waitForPinPaymentStatus;
+    private _clearInterval;
+    private _getToPayDetails;
 }

package/lib/service/transaction-connector-adapter.service.d.ts

@@ -132,9 +132,9 @@ export declare class TransactionConnectorAdapterService {
     mainConnector: MainApi;
     controllerInitialized: BehaviorSubject<boolean>;
     private _boFactory;
-    private _internalParameterCache;
     constructor(_optionsService: OptionsService, _selectMultipleCacheService: SelectMultipleCacheService, _selectMultipleParameterizedCacheService: SelectMultipleParameterizedCacheService, _errorService: ErrorService);
     connect(): Promise<void>;
+    logOut(): Promise<void>;
     getArticleFullObject(goodId: number): Promise<ArticleFullObject>;
     getGoodIdFromArticleNr(articleNr: string): Promise<number>;
     getSingleImage(nodeId: number | string, publication: number, includeMimetype: boolean, thumb: boolean): Promise<string>;

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

@@ -120,6 +120,7 @@ export declare class TransactionConnectorService {
     private _selectSinlgeParameterizedCacheService;
     constructor(_adapterService: TransactionConnectorAdapterService, _selectSingleCacheService: SelectSingleCacheService, _selectMultipleCacheService: SelectMultipleCacheService, _selectMultipleParameterizedCacheService: SelectMultipleParameterizedCacheService, _selectSinlgeParameterizedCacheService: SelectSingleParameterizedCacheService);
     connect(): Promise<void>;
+    logOut(): Promise<void>;
     getArticleFullObject(goodId: number): Promise<ArticleFullObject>;
     getGoodIdFromArticleNr(articleNr: string): Promise<number>;
     getSingleImage(nodeId: number | string, publication: number, includeMimetype: boolean, thumb: boolean): Promise<string>;

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

@@ -115,5 +115,6 @@ export declare class TransactionEventService {
     readonly headerPopupSaveButtonClick: Subject<void>;
     readonly headerPopupWantsToClose: Subject<void>;
     readonly headerPopupClose: Subject<boolean>;
+    readonly addDocumentToLineClicked: Subject<TransactionLineInfo>;
     constructor();
 }

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

@@ -108,6 +108,7 @@ export declare class TransactionService extends PendingReasonService {
     internalParameterAllowsDropShipment: boolean;
     internalParameterPartialInvoice: boolean;
     internalParameterReceiveGoodsWithDataTerminal: boolean;
+    logOut(): Promise<void>;
     prepareDropShipmentInternalParam(): void;
     preparePartialInvoiceInternalParam(): void;
     prepareReceiveGoodsWithDataTerminalInternalParam(): void;

package/lib/style/_variables.scss

@@ -82,7 +82,7 @@ $tp-md-width: 1280px !default;
 $tp-lg-width: 1920px !default;
 
 // transaction buttons
-$tp-transaction-default-button-width: 78px !default;
+$tp-transaction-default-button-width: 100px !default;
 $tp-transaction-default-button-width-big: 175px !default;
 $tp-transaction-default-button-height: 26px !default;
 $tp-transaction-line-input-number-picker-width: 110px !default;
@@ -96,9 +96,12 @@ $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-background-color: white !default;
 $tp-payment-amount-border-color: $tp-color-border !default;
-
+$sc-key-pad-background-color: white;
+$sc-key-pad-button-gap: 2px;
+$sc-key-pad-button-border-radius: 0;
+$sc-key-pad-button-background-color: #131840;
 
 /* core components override */
 $cc-color-action: $tp-color-font !default;

package/lib/style/transaction-globals.scss

@@ -82,6 +82,7 @@
   .key-pad-button {
     background-color: $tp-payment-amount-background-color;
     color: $tp-payment-amount-color;
+    box-shadow: none;
     font-weight: bold;
     .co-icon {
       svg { // for fontawesome icons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "12.1.140",
+  "version": "12.1.142",
   "description": "Colijn IT transaction module for Angular 12",
   "repository": "npm/npm",
   "author": "Colijn IT",
@@ -9,16 +9,16 @@
   "peerDependencies": {
     "@angular/common": ">=12.2.0",
     "@angular/core": ">=12.2.0",
-    "@colijnit/articleapi": ">=1.0.26",
-    "@colijnit/catalog": ">=12.1.41",
+    "@colijnit/articleapi": ">=1.0.27",
+    "@colijnit/catalog": ">=12.1.42",
     "@colijnit/corecomponents": ">=1.12.0",
     "@colijnit/corecomponents_v12": ">=12.1.8",
-    "@colijnit/ioneconnector": ">=3.1.4",
-    "@colijnit/mainapi": ">=1.0.21",
-    "@colijnit/relationapi": ">=1.0.7",
+    "@colijnit/ioneconnector": ">=3.1.6",
+    "@colijnit/mainapi": ">=1.0.23",
+    "@colijnit/relationapi": ">=1.0.8",
     "@colijnit/sharedapi": ">=1.0.16",
     "@colijnit/sharedcomponents": ">=1.0.46",
-    "@colijnit/transactionapi": ">=1.1.97",
+    "@colijnit/transactionapi": ">=1.1.100",
     "@types/three": ">=0.125.0",
     "@tweenjs/tween.js": ">=17.2.0",
     "three": ">=0.125.0"

package/lib/component/transaction-document-button/style/_layout.scss

@@ -1,59 +0,0 @@
-@include export-module('co-transaction-document-button-bar-layout') {
-  .co-transaction-document-button-bar {
-    font-family: $tp-co-transaction-document-button-bar-font-family;
-    font-size: $tp-co-transaction-document-button-bar-font-size;
-    .button-bar-wrapper {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-    }
-
-    .co-transaction-document-button {
-      .co-transaction-document-button-icon {
-        height: $tp-co-transaction-button-bar-icon-size;
-        width: $tp-co-transaction-button-bar-icon-size;
-        margin: $tp-co-transaction-button-bar-icon-margin;
-        svg {
-          height: 100%;
-          width: 100%;
-        }
-      }
-    }
-    .button-wrapper {
-      //height: $tp-co-transaction-button-bar-button-size;
-      //min-width: $tp-co-transaction-button-bar-button-size;
-      background: $tp-co-transaction-document-button-background-color;
-      border-radius: $tp-co-transaction-document-button-border-radius;
-      padding: $tp-co-transaction-document-button-padding;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      .button-title {
-        font-size: $tp-co-transaction-document-button-label-font-size;
-        //padding: 0 7px 4px 7px;
-      }
-      .co-transaction-document-button-icon {
-        height: $tp-co-transaction-document-button-icon-size;
-        width: $tp-co-transaction-document-button-icon-size;
-        margin: $tp-co-transaction-document-button-icon-margin;
-        svg {
-          height: 100%;
-          width: 100%;
-        }
-      }
-    }
-    /*.co-transaction-sales-purchase-button-bar-button,
-    .co-transaction-purchase-receive-goods-button-bar-button,
-    .co-transaction-sales-allocation-button-bar-button,
-    .co-transaction-purchase-confirmation-button-bar-button,
-    .co-transaction-purchase-invoice-button-bar-button,
-    .co-transaction-sales-invoice-button-bar-button,
-    .co-transaction-sales-delivery-button-bar-button {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }*/
-  }
-}

package/lib/component/transaction-document-button/style/_material-definition.scss

@@ -1,9 +0,0 @@
-$tp-co-transaction-document-button-bar-font-family: $tp-font-family !default;
-$tp-co-transaction-document-button-bar-font-size: $tp-font-size !default;
-//$tp-co-transaction-button-bar-button-size: 65px !default;
-$tp-co-transaction-document-button-background-color: white !default;
-$tp-co-transaction-document-button-border-radius: $tp-default-border-radius !default;
-$tp-co-transaction-document-button-padding: 5px !default;
-$tp-co-transaction-document-button-icon-size: 60px !default;
-$tp-co-transaction-document-button-icon-margin: 0 0 5px 0 !default;
-$tp-co-transaction-document-button-label-font-size: $tp-font-size-small !default;

package/lib/component/transaction-document-button/style/_theme.scss

@@ -1,5 +0,0 @@
-@include export-module('co-transaction-document-button-bar-theme') {
-  .co-transaction-document-button-bar {
-
-  }
-}