@colijnit/transaction 12.1.152 → 12.1.154

package/lib/cache/service/business-object-cache-manager.service.d.ts

@@ -52,6 +52,9 @@ export declare class BusinessObjectCacheManagerService implements OnDestroy {
     getSingleCacheItem<T extends BusinessObject>(key: {
         new (): T;
     }, id?: BusinessObjectIDType): CacheField<T>;
+    deleteSingleCacheItem<T extends BusinessObject>(key: {
+        new (): T;
+    }, id?: BusinessObjectIDType): void;
     getSelectMultipleParameterCacheItem<T extends BusinessObject>(key: any): ParameterCacheField<T[]>;
     getSelectSingleParameterCacheItem<T>(key: any): ParameterCacheField<T>;
     private _reset;

package/lib/cache/service/select-single-cache.service.d.ts

@@ -1,12 +1,12 @@
-import { BusinessObjectCacheManagerService } from "./business-object-cache-manager.service";
-import { BusinessObject } from "@colijnit/ioneconnector/build/model/business-object";
-import { CacheField } from "../cache-field";
-import { BusinessObjectIDType } from "@colijnit/ioneconnector/build/type/business-object-id-type";
+import { BusinessObjectCacheManagerService } from './business-object-cache-manager.service';
+import { BusinessObject } from '@colijnit/ioneconnector/build/model/business-object';
+import { CacheField } from '../cache-field';
+import { BusinessObjectIDType } from '@colijnit/ioneconnector/build/type/business-object-id-type';
 export declare class SelectSingleCacheService {
     private _boCacheManager;
     constructor(_boCacheManager: BusinessObjectCacheManagerService);
     requestCache<T extends BusinessObject>(clazz: {
         new (): T;
-    }, sourceId: BusinessObjectIDType, loadFunction: () => Promise<T>): CacheField<T>;
+    }, sourceId: BusinessObjectIDType, loadFunction: () => Promise<T>, reload?: boolean): CacheField<T>;
     private _createCacheItem;
 }

package/lib/component/checkout/checkout.component.d.ts

@@ -30,6 +30,10 @@ export declare class CheckoutComponent implements OnInit, OnDestroy {
     checkoutDelivery: CheckoutOverviewDeliveryEditComponent;
     checkoutPayment: PaymentComponent;
     newTransaction: boolean;
+    /**
+     * When set, this is the relation be used for the checkout
+     */
+    relationNr: number;
     sellerId: number;
     transactionType: TransactionKind;
     showCreateTransactionButton: boolean;

package/lib/component/deposit-payment/style/_layout.scss

@@ -2,11 +2,13 @@
   .co-deposit-payment {
     font-family: $tp-down-payment-font-family;
     font-size: $tp-down-payment-font-size;
+    font-weight: 600;
     display: flex;
     flex-direction: column;
     row-gap: $tp-down-payment-row-gap;
     .co-payment-tile {
       height: 100%;
+      min-width: 0;
     }
     .co-tile {
       .co-tile-wrapper {
@@ -15,6 +17,7 @@
         min-height: initial;
         width: auto;
         height: auto;
+        padding: 0;
         .co-tile-select-wrapper {
           display: none;
         }
@@ -57,7 +60,6 @@
     .down-payment-amount-wrapper {
       display: flex;
       flex-direction: row;
-      width: 100%;
       justify-content: space-between;
       .down-payment-amount {
         font-size: $tp-down-payment-amount-font-size;

package/lib/component/deposit-payment/style/_material-definition.scss

@@ -1,6 +1,6 @@
 $tp-down-payment-font-family: $tp-font-family !default;
 $tp-down-payment-font-size: $tp-font-size !default;
-$tp-down-payment-row-gap: 20px !default;
+$tp-down-payment-row-gap: 15px !default;
 $tp-down-payment-payments-height: 50px !default;
 $tp-down-payment-payments-padding: 0 !default;
 $tp-down-payment-payments-background-color: white !default;
@@ -14,7 +14,7 @@ $tp-down-payment-amount-row-gap: 10px !default;
 $tp-down-payment-amount-spacer-width: $tp-down-payment-amount-row-gap !default;
 $tp-down-payment-date-font-size: $tp-font-size !default;
 $tp-down-payment-date-font-weight: normal !default;
-$tp-down-payment-payment-padding: 0 20px !default;
+$tp-down-payment-payment-padding: 0 15px !default;
 $tp-down-payment-payment-border-style: solid !default;
 $tp-down-payment-payment-border-width: 0 0 1px 0 !default;
 $tp-down-payment-payment-border-color: $tp-color-border !default;

package/lib/component/payment/payment.component.d.ts

@@ -7,11 +7,13 @@ import { SharedService } from '../../service/shared.service';
 import { PaymentMethod } from '@colijnit/transactionapi/build/model/payment-method.bo';
 import { PaymentViewmodel } from '../../model/payment.viewmodel';
 import { TransactionEventService } from '../../service/transaction-event.service';
+import { IconCacheService } from "../../service/icon-cache.service";
 export declare class PaymentComponent implements OnInit, OnDestroy {
     private _transactionService;
     private _sharedService;
     private _paymentService;
     private _transactionEventService;
+    iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
     transId: number;
     transactionUuid: string;
@@ -33,6 +35,7 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     qrCodeImage: string;
     showLoader: boolean;
     amountToPay: number;
+    depositAmount: number;
     statusMessage: string;
     private _amount;
     private _paymentStatusInterval;
@@ -41,7 +44,7 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     private _paymentStatusPollIntervalCount;
     private _paymentResult;
     private _subs;
-    constructor(_transactionService: TransactionService, _sharedService: SharedService, _paymentService: PaymentService, _transactionEventService: TransactionEventService);
+    constructor(_transactionService: TransactionService, _sharedService: SharedService, _paymentService: PaymentService, _transactionEventService: TransactionEventService, iconCacheService: IconCacheService);
     ngOnInit(): Promise<void>;
     ngOnDestroy(): void;
     paymentMethodSelected(method: PaymentMethod, index: number): void;

package/lib/component/payment/style/_layout.scss

@@ -4,19 +4,35 @@
   .co-payment {
     font-family: $tp-payment-font-family;
     font-size: $tp-payment-font-size;
+    .co-tile {
+      &.selected {
+        transform: none;
+      }
+    }
     .co-tile-wrapper {
-      min-width: $tp-payment-tile-width;
-      min-height: $tp-payment-tile-height;
-      width: $tp-payment-tile-width;
-      height: $tp-payment-tile-height;
+      min-width: 100%;
+      min-height: 50px;
+      width: 100%;
+      height: 50px;
     }
-    .payment-wrapper {
-      padding: $tp-payment-padding;
+    .co-tile-select-wrapper {
+      display: none;
     }
-    .payment-wrapper, .payment-cash-register-wrapper {
+    .payment-wrapper {
       display: flex;
       flex-direction: column;
+      row-gap: 30px;
+    }
+    .payment-methods-wrapper, .payment-cash-register-wrapper {
+      display: flex;
       row-gap: $tp-payment-row-gap;
+      flex: 1;
+      flex-direction: column;
+    }
+    .payment-methods-register-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: $tp-payment-row-gap;
     }
     .payment-methods-header {
       display: flex;
@@ -32,12 +48,11 @@
     }
     .payment-methods {
       position: relative;
-      min-height: 50px;
       display: flex;
       flex-direction: row;
       column-gap: $tp-payment-methods-column-gap;
       row-gap: $tp-payment-methods-row-gap;
-      flex-wrap: wrap;
+      max-width: 620px;
       .loader {
         position: absolute;
         top: 50%;
@@ -49,30 +64,9 @@
       display: grid;
       grid-template-columns: auto auto;
       grid-template-rows: auto auto auto;
-      row-gap: 10px;
-      column-gap: 10px;
-    }
-    .payment-to-pay {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      row-gap: $tp-payment-row-gap;
-      grid-column: 1 / 1;
-      grid-row: 1 / 1;
+      row-gap: 20px;
+      column-gap: 20px;
     }
-    .payment-amount {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: $tp-payment-amount-height;
-      border: $tp-payment-amount-border;
-      font-family: $tp-payment-amount-font-family;
-      font-size: $tp-payment-amount-font-size;
-      font-weight: $tp-payment-amount-font-weight;
-      border-radius: 5px;
-      width: 100%;
-    }
-
     .payment-deposit {
       grid-column: 1 / 1;
       grid-row: 2 / 2;
@@ -80,10 +74,34 @@
         display: none;
       }
     }
-
+    .payment-to-pay-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      .payment-header-title, .payment-total-pay {
+        font-size: 26px;
+        font-weight: bold;
+      }
+    }
+    .co-payment-to-pay {
+      width: 100%;
+    }
+    .payment-input-button {
+      display: flex;
+      align-items: center;
+      row-gap: 10px;
+      column-gap: 10px;
+    }
+    .payment-to-pay-total {
+      display: flex;
+      flex-direction: column;
+      row-gap: 20px;
+      column-gap: 20px;
+    }
     .payment-to-pay-button {
-      grid-column: 1 / 1;
-      grid-row: 3 / 3;
+      width: 55px;
+      height: 55px;
+      cursor: pointer;
       .payment-error-message {
         margin: $tp-payment-error-margin;
         font-family: $tp-payment-error-font-family;
@@ -93,6 +111,17 @@
       .co-button {
         justify-content: center;
         border-radius: 5px;
+        background-color: #f1fcff;
+        filter: brightness(1);
+        height: 55px;
+        width: 55px;
+        border: 2px solid #0084de;
+        .co-icon {
+          height: 60%;
+          svg {
+            fill: #0084de;
+          }
+        }
       }
       &.no-deposit {
         grid-row: 2 / 2;

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

@@ -5,7 +5,7 @@ $tp-payment-tile-height: $tp-tile-min-height !default;
 $tp-payment-padding: 10px !default;
 $tp-payment-header-font-family: $tp-font-family !default;
 $tp-payment-header-font-size: $tp-font-size !default;
-$tp-payment-header-font-weight: bold !default;
+$tp-payment-header-font-weight: 600 !default;
 $tp-payment-header-extra-font-color: $tp-color-colijn-orange !default;
 $tp-payment-row-gap: 20px !default;
 $tp-payment-methods-column-gap: 5px !default;

package/lib/component/payment/style/_theme.scss

@@ -11,9 +11,6 @@
       .payment-error-message {
         color: $tp-payment-error-font-color;
       }
-      .co-button {
-        background-color: $tp-color-colijn-orange;
-      }
     }
   }
 }

package/lib/component/payment-tile/style/_layout.scss

@@ -3,20 +3,22 @@
 @include export-module('co-payment-tile-layout') {
   .co-payment-tile {
     display: flex;
+    min-width: 120px;
     .payment-tile-wrapper {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       width: 100%;
       height: 100%;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
+      gap: 15px;
     }
     .payment-tile-description {
     }
     .payment-tile-icon, .payment-tile-image {
       display: block;
       height: 80%;
-      width: 50%;
+      width: 30px;
       object-fit: contain;
     }
   }

package/lib/component/payment-to-pay/style/_layout.scss

@@ -5,21 +5,22 @@
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      justify-content: space-between;
+      border: $tp-payment-to-pay-amount-border;
       row-gap: $tp-payment-to-pay-row-gap;
-      grid-column: 1 / 1;
-      grid-row: 1 / 1;
+      height: $tp-payment-to-pay-amount-height;
+      padding: 5px;
+      border-radius: 5px;
     }
 
     .payment-amount {
       display: flex;
       align-items: center;
       justify-content: center;
-      height: $tp-payment-to-pay-amount-height;
-      border: $tp-payment-to-pay-amount-border;
       font-family: $tp-payment-to-pay-amount-font-family;
       font-size: $tp-payment-to-pay-amount-font-size;
       font-weight: $tp-payment-to-pay-amount-font-weight;
-      border-radius: 5px;
+      line-height: $tp-payment-to-pay-amount-font-size;
       width: 100%;
     }
   }

package/lib/component/payment-to-pay/style/_material-definition.scss

@@ -1,6 +1,6 @@
-$tp-payment-to-pay-row-gap: 20px !default;
-$tp-payment-to-pay-amount-height: 60px !default;
-$tp-payment-to-pay-amount-border: 1px solid !default;
+$tp-payment-to-pay-row-gap: 0px !default;
+$tp-payment-to-pay-amount-height: 55px !default;
+$tp-payment-to-pay-amount-border: 2px solid #0084de !default;
 $tp-payment-to-pay-amount-font-family: $tp-font-family !default;
-$tp-payment-to-pay-amount-font-size: 32px !default;
+$tp-payment-to-pay-amount-font-size: 28px !default;
 $tp-payment-to-pay-amount-font-weight: bold !default;

package/lib/component/relation/relation-address/relation-address.component.d.ts

@@ -6,10 +6,12 @@ import { RelationBaseComponent } from '../relation-base.component';
 import { Address } from '@colijnit/relationapi/build/model/address.bo';
 import { Country } from '@colijnit/transactionapi/build/model/country.bo';
 import { RelationAddressCfgNames } from '../../../interface/relation-address-cfg-names.interface';
+import { RelationService } from '../../../service/relation.service';
 export declare class RelationAddressComponent extends RelationBaseComponent implements OnInit {
     private _dictionary;
     private _connector;
     private _formMasterService;
+    protected relationService: RelationService;
     configNames: RelationAddressCfgNames;
     set address(value: Address);
     get address(): Address;
@@ -23,7 +25,7 @@ export declare class RelationAddressComponent extends RelationBaseComponent impl
     private _prevPostalCodeForCheck;
     private _prevHouseNoForCheck;
     private _address;
-    constructor(_dictionary: DictionaryService, _connector: TransactionConnectorService, _formMasterService: FormMasterService);
+    constructor(_dictionary: DictionaryService, _connector: TransactionConnectorService, _formMasterService: FormMasterService, relationService: RelationService);
     ngOnInit(): Promise<void>;
     checkForPostalCodeCheckError(): Promise<void>;
     changeHouseNo(): void;

package/lib/component/relation/relation-address-select/relation-address-select.component.d.ts

@@ -3,7 +3,9 @@ import { Icon } from '../../../enum/icon.enum';
 import { FormMasterService } from '@colijnit/corecomponents_v12';
 import { RelationBaseComponent } from '../relation-base.component';
 import { Address } from '@colijnit/relationapi/build/model/address.bo';
+import { RelationService } from '../../../service/relation.service';
 export declare class RelationAddressSelectComponent extends RelationBaseComponent {
+    protected relationService: RelationService;
     private _formMasterService;
     readonly icons: typeof Icon;
     set content(content: any);
@@ -22,7 +24,7 @@ export declare class RelationAddressSelectComponent extends RelationBaseComponen
     showNavigateLeft: boolean;
     showNavigateRight: boolean;
     private _boFactory;
-    constructor(_formMasterService: FormMasterService);
+    constructor(relationService: RelationService, _formMasterService: FormMasterService);
     selectAddress(): void;
     createAddress(): void;
     saveAddress(address: Address): void;

package/lib/component/relation/relation-addresses/relation-addresses.component.d.ts

@@ -5,10 +5,10 @@ import { FormMasterService } from '@colijnit/corecomponents_v12';
 import { Address } from '@colijnit/relationapi/build/model/address.bo';
 import { AddressType } from '@colijnit/relationapi/build/enum/address-type.enum';
 import { RelationService } from '../../../service/relation.service';
-import { IconCacheService } from "../../../service/icon-cache.service";
+import { IconCacheService } from '../../../service/icon-cache.service';
 export declare class RelationAddressesComponent extends RelationBaseComponent implements AfterViewInit {
     private _formMasterService;
-    private _relationService;
+    protected relationService: RelationService;
     iconCacheService: IconCacheService;
     readonly icons: typeof Icon;
     readonly: boolean;
@@ -21,7 +21,7 @@ export declare class RelationAddressesComponent extends RelationBaseComponent im
     showEditAddressDialog: boolean;
     addressToEdit: Address;
     private _boFactory;
-    constructor(_formMasterService: FormMasterService, _relationService: RelationService, iconCacheService: IconCacheService);
+    constructor(_formMasterService: FormMasterService, relationService: RelationService, iconCacheService: IconCacheService);
     ngAfterViewInit(): void;
     submitForm(): void;
     saveAddress(address: Address): Promise<void>;

package/lib/component/relation/relation-base.component.d.ts

@@ -1,10 +1,12 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnDestroy } from '@angular/core';
 import { CustomerFullObject } from '@colijnit/relationapi/build/model/customer-full-object.bo';
 import { RelationAnyType } from '@colijnit/relationapi/build/model/relation-any-type';
 import { RelationKind } from '@colijnit/relationapi/build/enum/relation-kind.enum';
 import { RelationSuggestionsRequest } from '../../interface/relation-suggestions-request.interface';
 import { TransactionCfgName } from '../../enum/transaction-cfg-name.enum';
-export declare abstract class RelationBaseComponent {
+import { RelationService } from '../../service/relation.service';
+export declare abstract class RelationBaseComponent implements OnDestroy {
+    protected relationService: RelationService;
     readonly relKind: typeof RelationKind;
     readonly cfgNames: typeof TransactionCfgName;
     set relation(value: RelationAnyType);
@@ -13,6 +15,9 @@ export declare abstract class RelationBaseComponent {
     inputChangeForSuggestions: EventEmitter<RelationSuggestionsRequest>;
     get relationAsCustomer(): CustomerFullObject;
     private _relation;
+    private _subs;
     protected suggestionRequest: RelationSuggestionsRequest;
+    constructor(relationService: RelationService);
+    ngOnDestroy(): void;
     protected relationSet(): void;
 }

package/lib/component/relation/relation-general/relation-general.component.d.ts

@@ -9,7 +9,7 @@ import { RelationGeneralCfgNames } from '../../../interface/relation-general-cfg
 export declare class RelationGeneralComponent extends RelationBaseComponent {
     private _service;
     private _dialogService;
-    private _relationService;
+    protected relationService: RelationService;
     readonly relType: typeof RelationNameKind;
     readonly genderType: typeof GenderType;
     configNames: RelationGeneralCfgNames;
@@ -18,7 +18,7 @@ export declare class RelationGeneralComponent extends RelationBaseComponent {
     relationType: RelationNameKind;
     showClass(): boolean;
     dateOfBirth: Date;
-    constructor(_service: TransactionService, _dialogService: DialogService, _relationService: RelationService);
+    constructor(_service: TransactionService, _dialogService: DialogService, relationService: RelationService);
     firstNameChange(firstName: string): void;
     familyNameChange(familyName: string): void;
     changeGenderType(value: GenderType): void;

package/lib/component/relation/relation-preferences/relation-preferences.component.d.ts

@@ -1,16 +1,18 @@
-import { RelationPrivacySetting } from "@colijnit/relationapi/build/model/relation-privacy-setting.bo";
-import { TransactionService } from "../../../service/transaction.service";
-import { RelationBaseComponent } from "../relation-base.component";
+import { RelationPrivacySetting } from '@colijnit/relationapi/build/model/relation-privacy-setting.bo';
+import { TransactionService } from '../../../service/transaction.service';
+import { RelationBaseComponent } from '../relation-base.component';
+import { RelationService } from '../../../service/relation.service';
 export declare class PrivacySettingViewModel {
     privacySetting: RelationPrivacySetting;
     checked: boolean;
 }
 export declare class RelationPreferencesComponent extends RelationBaseComponent {
+    protected relationService: RelationService;
     private _service;
     readonly: boolean;
     showClass(): boolean;
     privacySettings: PrivacySettingViewModel[];
-    constructor(_service: TransactionService);
+    constructor(relationService: RelationService, _service: TransactionService);
     changePrivacySetting(relationPrivacySetting: RelationPrivacySetting, value: boolean): void;
     protected relationSet(): void;
     private _loadPrivacySettings;

package/lib/component/shopping-cart-preview/shopping-cart-preview.component.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, OnInit } from '@angular/core';
-import { TransactionService } from "../../service/transaction.service";
-import { Icon } from "../../enum/icon.enum";
+import { TransactionService } from '../../service/transaction.service';
+import { Icon } from '../../enum/icon.enum';
 import { TransactionScreenConfigurationService } from '../../service/transaction-screen-configuration.service';
 export declare class ShoppingCartPreviewComponent implements OnInit {
     service: TransactionService;

package/lib/component/stepper/style/_material-definition.scss

@@ -18,11 +18,11 @@ $tp-co-stepper-step-incomplete-description-color: rgba(0, 0, 0, 0.3) !default;
 $tp-co-stepper-step-incomplete-description-font-weight: normal !default;
 
 $tp-co-stepper-step-title-padding: 30px !default;
-$tp-co-stepper-step-title-column-gap: 20px !default;
+$tp-co-stepper-step-title-column-gap: 10px !default;
 $tp-co-stepper-step-title-font-family: $tp-font-family !default;
-$tp-co-stepper-step-title-font-size: 28px !default;
-$tp-co-stepper-step-title-font-weight: bold !default;
-$tp-co-stepper-step-title-icon-size: 30px !default;
+$tp-co-stepper-step-title-font-size: 20px !default;
+$tp-co-stepper-step-title-font-weight: 600 !default;
+$tp-co-stepper-step-title-icon-size: 17px !default;
 
 $tp-co-stepper-step-button-color: $tp-color-action !default;
 $tp-co-stepper-step-button-background-color: $tp-default-background-accent !default;

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

@@ -26,7 +26,7 @@
       justify-content: flex-end;
       align-items: center;
       padding: $tp-transaction-transaction-lines-header-padding;
-      flex-wrap: wrap-reverse;
+      flex-wrap: nowrap;
       .transaction-lines-header-item {
         flex-basis: 33%;
         &.right {

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

@@ -7,7 +7,7 @@ import { DictionaryService } from '../../../service/dictionary.service';
 import { TransactionEventService } from '../../../service/transaction-event.service';
 import { IconCacheService } from '../../../service/icon-cache.service';
 import { TransactionImageService } from '../../../service/transaction-image.service';
-import { TransactionScreenConfigurationService } from "../../../service/transaction-screen-configuration.service";
+import { TransactionScreenConfigurationService } from '../../../service/transaction-screen-configuration.service';
 import { StatusBarCfgNames } from '../../../interface/status-bar-cfg-names.interface';
 export declare class TransactionCardComponent extends TransactionBaseComponent implements OnChanges {
     transactionEventService: TransactionEventService;

package/lib/component/transaction-card/transaction-card-purchase-overview/transaction-card-purchase-overview.component.d.ts

@@ -1,7 +1,7 @@
 import { OnDestroy, OnInit } from '@angular/core';
-import { TransactionTypeCategory } from "../../../enum/transaction-type-category.enum";
-import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionTypeCategory } from '../../../enum/transaction-type-category.enum';
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 import { StatusBarCfgNames } from '../../../interface/status-bar-cfg-names.interface';
 export declare class TransactionCardPurchaseOverviewComponent extends TransactionBaseComponent implements OnInit, OnDestroy {
     readonly transactionTypeCategory: typeof TransactionTypeCategory;

package/lib/component/transaction-card/transaction-card-sales-overview/transaction-card-sales-overview.component.d.ts

@@ -1,6 +1,6 @@
-import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
-import { TransactionLineActionButtonsComponent } from "../../transaction-line-action-buttons/transaction-line-action-buttons.component";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+import { TransactionLineActionButtonsComponent } from '../../transaction-line-action-buttons/transaction-line-action-buttons.component';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
 import { StatusBarCfgNames } from '../../../interface/status-bar-cfg-names.interface';
 export declare class TransactionCardSalesOverviewComponent extends TransactionBaseComponent {
     transactionLineActionButtons: TransactionLineActionButtonsComponent;

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

@@ -94,5 +94,22 @@
         background: $tp-co-transaction-header-payment-button-wrapper-border-color;
       }
     }
+    .payment-dialog {
+      .payment-wrapper-popup-title {
+        display: flex;
+        align-items: center;
+        grid-column-gap: 10px;
+        column-gap: 10px;
+        margin-bottom: 20px;
+        .co-icon {
+          height: 20px;
+          width: 20px;
+          margin: 0;
+        }
+        .co-dialog-header-title {
+          margin: 0;
+        }
+      }
+    }
   }
 }

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

@@ -1,5 +1,7 @@
 import { TransactionBaseComponent } from '../core/base/transaction-base.component';
+import { InputCheckboxComponent } from '@colijnit/corecomponents_v12';
 export declare class TransactionHeaderDefinitiveComponent extends TransactionBaseComponent {
+    checkbox: InputCheckboxComponent;
     showClass: boolean;
     commit(definitive: boolean): Promise<boolean>;
 }

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

@@ -1,5 +1,7 @@
 import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+import { InputCheckboxComponent } from '@colijnit/corecomponents_v12';
 export declare class TransactionHeaderPartialDeliveryComponent extends TransactionBaseComponent {
+    checkbox: InputCheckboxComponent;
     showClass: boolean;
     commit(allow: boolean): Promise<boolean>;
 }

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

@@ -18,10 +18,10 @@ export declare class TransactionLineDeliveryDateButtonComponent extends Transact
     protected changeDetector: ChangeDetectorRef;
     private _overlayService;
     readonly icons: typeof Icon;
-    commitWhenDateSelected: boolean;
-    showCalender: boolean;
     parentComponent: ElementRef;
     showClass(): boolean;
+    commitWhenDateSelected: boolean;
+    showCalender: boolean;
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, transactionScreenConfigurationService: TransactionScreenConfigurationService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _overlayService: OverlayService);
     private _calendarPopupComponentRef;
     handleShowHideClick(): void;

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

@@ -19,8 +19,13 @@ export declare class TransactionLineSupplierDeliveryDateButtonComponent extends
     private _overlayService;
     private _elementRef;
     readonly icons: typeof Icon;
+    parentComponent: ElementRef;
     showClass(): boolean;
+    showCalender: boolean;
     private _calendarPopupComponentRef;
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, transactionScreenConfigurationService: TransactionScreenConfigurationService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _overlayService: OverlayService, _elementRef: ElementRef);
-    handleShowDialog(event: MouseEvent): void;
+    handleShowHideClick(): void;
+    private _showPopup;
+    private _handleDateChanged;
+    private _hidePopup;
 }

package/lib/component/transaction-quick-access/transaction-quick-access-picked/transaction-quick-access-picked.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 TransactionQuickAccessPickedComponent extends TransactionBaseComponent {
     awaitingResult: boolean;
     hasArticlesToPick: boolean;