@colijnit/transaction 12.1.151 → 12.1.153

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

@@ -19,6 +19,7 @@ export declare class PaymentComponent implements OnInit, OnDestroy {
     set amount(value: number);
     get amount(): number;
     currencyId: number;
+    updateDepositAmount: boolean;
     payed: EventEmitter<void>;
     showClass(): boolean;
     paymentMethodIdx: number;

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/shopping-cart.component.d.ts

@@ -1,8 +1,8 @@
-import { EventEmitter, OnDestroy } from "@angular/core";
-import { DictionaryService } from "../../service/dictionary.service";
-import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
-import { TransactionService } from "../../service/transaction.service";
-import { RelationAnyType } from "../../model/relation-any-type";
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { DictionaryService } from '../../service/dictionary.service';
+import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
+import { TransactionService } from '../../service/transaction.service';
+import { RelationAnyType } from '../../model/relation-any-type';
 export declare class ShoppingCartComponent implements OnDestroy {
     service: TransactionService;
     private _dictionary;

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

@@ -1,13 +1,17 @@
-import { EventEmitter } from "@angular/core";
-import { TransactionService } from "../../service/transaction.service";
-import { Icon } from "../../enum/icon.enum";
-export declare class ShoppingCartPreviewComponent {
+import { EventEmitter, OnInit } from '@angular/core';
+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;
+    private _screenConfigurationService;
     readonly icons: typeof Icon;
     showCheckoutButton: boolean;
     withoutBorder: boolean;
     checkout: EventEmitter<void>;
     editCartClick: EventEmitter<void>;
     showClass(): boolean;
-    constructor(service: TransactionService);
+    screenConfigLoaded: boolean;
+    constructor(service: TransactionService, _screenConfigurationService: TransactionScreenConfigurationService);
+    ngOnInit(): void;
 }

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

@@ -17,6 +17,7 @@ import { TransactionScreenConfigurationService } from '../../service/transaction
 import { DialogService } from '../../service/dialog.service';
 import { LineSelectionService } from '../../service/line-selection.service';
 import { TransactionCfgName } from '../../enum/transaction-cfg-name.enum';
+import { StatusBarCfgNames } from '../../interface/status-bar-cfg-names.interface';
 export declare class TransactionComponent implements OnDestroy {
     iconCacheService: IconCacheService;
     service: TransactionService;
@@ -57,10 +58,12 @@ export declare class TransactionComponent implements OnDestroy {
     screenConfigLoaded: boolean;
     textToEdit: string;
     historicTransactionLines: TransactionLineInfo[] | null;
+    statusBarConfigNames: StatusBarCfgNames;
     private _subs;
     private _transaction;
     private _transactionKind;
     private _transactionNr;
+    private _typeForConfig;
     constructor(iconCacheService: IconCacheService, service: TransactionService, _appRef: ApplicationRef, _dynamicComponentService: DynamicComponentService, _transactionEventService: TransactionEventService, _screenConfigurationService: TransactionScreenConfigurationService, _dialogService: DialogService, _lineSelectionService: LineSelectionService);
     ngOnDestroy(): void;
     handleButtonBarButtonClicked(button: TransactionBarButton): void;

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

@@ -5,3 +5,4 @@
 @import "../../transaction-card-header/style/material";
 @import "../../transaction-card-purchase-overview/style/material";
 @import "../../transaction-card-sales-overview/style/material";
+@import "../../transaction-card-receive-goods/style/material";

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

@@ -7,7 +7,8 @@ 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;
     service: TransactionService;
@@ -23,6 +24,7 @@ export declare class TransactionCardComponent extends TransactionBaseComponent i
     set container(content: any);
     set activeCategory(value: TransactionTypeCategory);
     get activeCategory(): TransactionTypeCategory;
+    statusBarConfigNames: StatusBarCfgNames;
     preview: boolean;
     waitingForUserAction: EventEmitter<boolean>;
     showClass(): boolean;

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

@@ -1,9 +1,11 @@
-import { EventEmitter } from "@angular/core";
-import { TransactionTypeCategory } from "../../../enum/transaction-type-category.enum";
-import { Icon } from "../../../enum/icon.enum";
-import { TransactionBaseComponent } from "../../core/base/transaction-base.component";
+import { EventEmitter } from '@angular/core';
+import { TransactionTypeCategory } from '../../../enum/transaction-type-category.enum';
+import { Icon } from '../../../enum/icon.enum';
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+import { StatusBarCfgNames } from '../../../interface/status-bar-cfg-names.interface';
 export declare class TransactionCardFooterComponent extends TransactionBaseComponent {
     readonly icons: typeof Icon;
+    statusBarConfigNames: StatusBarCfgNames;
     transactionTypeCategory: TransactionTypeCategory;
     expanded: boolean;
     expandClicked: EventEmitter<void>;

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

@@ -1,6 +1,8 @@
 import { TransactionInvoiceLineBaseComponent } from '../../transaction-line/transaction-invoice-line/transaction-invoice-line-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 TransactionCardInvoiceComponent extends TransactionInvoiceLineBaseComponent {
     showClass(): boolean;
+    statusBarConfigNames: StatusBarCfgNames;
     handleShowSidePanel(line: TransactionLineInfo): void;
 }

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

@@ -1,6 +1,8 @@
 import { TransactionOrderDeliveryLineBaseComponent } from '../../transaction-line/transaction-order-delivery-line/transaction-order-delivery-line-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 TransactionCardOrderDeliveryComponent extends TransactionOrderDeliveryLineBaseComponent {
     showClass(): boolean;
+    statusBarConfigNames: StatusBarCfgNames;
     handleShowSidePanel(line: TransactionLineInfo): void;
 }

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

@@ -1,13 +1,15 @@
-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 { 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 { StatusBarCfgNames } from '../../../interface/status-bar-cfg-names.interface';
 export declare class TransactionCardPurchaseOverviewComponent extends TransactionBaseComponent implements OnInit, OnDestroy {
     readonly transactionTypeCategory: typeof TransactionTypeCategory;
+    showClass(): boolean;
+    statusBarConfigNames: StatusBarCfgNames;
     expanded: boolean;
     showCheckboxForLine: boolean;
     private _subs;
-    showClass(): boolean;
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected transactionLineSet(): void;

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

@@ -1,4 +1,81 @@
 @include export-module('cc-transaction-card-receive-goods-layout') {
   .co-transaction-card-receive-goods {
+
+    co-transaction-line-amount co-input-number-picker, .transaction-card-price {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid $tp-color-border;
+      border-radius: $tp-default-border-radius;
+      width: 100px;
+      min-width: 100px;
+      height: $tp-default-button-height;
+
+      .co-input-text {
+        width: 80%;
+        height: 95%;
+
+        input {
+          margin: 4px 0 0;
+        }
+      }
+
+      &.price {
+        width: auto;
+        font-weight: bold;
+      }
+    }
+
+    .transaction-card-content-wrapper {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+
+      .content-base {
+        width: inherit;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-rows: 1fr;
+        grid-column-gap: 5px;
+        margin-bottom: 5px;
+      }
+
+      .content-expanded {
+        width: inherit;
+        display: grid;
+        grid-template-columns: 1fr 3fr;
+        grid-template-rows: 1fr;
+        grid-column-gap: 5px;
+      }
+
+      .co-transaction-line-commission-button, .co-transaction-line-supplier-button, .co-transaction-line-warehouse-button, .co-transaction-line-delivery-button, .co-transaction-line-vat-button {
+        overflow: hidden;
+
+        .transaction-line-button {
+          width: auto;
+        }
+
+        &.fit-content {
+          width: fit-content;
+          min-width: 50%;
+        }
+      }
+    }
+  }
+
+  .side-panel-button {
+    background: #f5f5fc;
+    border-radius: 5px;
+    padding: 5px 2px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .co-icon {
+      width: 20px;
+      height: 20px;
+    }
   }
 }

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

@@ -1,6 +1,8 @@
 import { TransactionReceiveGoodsLineBaseComponent } from '../../transaction-line/transaction-receive-goods-line/transaction-receive-goods-line-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 TransactionCardReceiveGoodsComponent extends TransactionReceiveGoodsLineBaseComponent {
     showClass(): boolean;
+    statusBarConfigNames: StatusBarCfgNames;
     handleShowSidePanel(line: TransactionLineInfo): void;
 }

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

@@ -1,8 +1,10 @@
-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;
+    statusBarConfigNames: StatusBarCfgNames;
     showClass(): boolean;
     expanded: boolean;
     handleShowSidePanel(line: TransactionLineInfo): void;

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

@@ -1,6 +1,6 @@
-import { TransactionKind } from "@colijnit/transactionapi/build/enum/transaction-kind.enum";
-import { TransactionLineInfo } from "@colijnit/transactionapi/build/model/transaction-line-info.bo";
-import { TransactionGridBaseComponent } from "../../core/base/transaction-grid-base.component";
+import { TransactionKind } from '@colijnit/transactionapi/build/enum/transaction-kind.enum';
+import { TransactionLineInfo } from '@colijnit/transactionapi/build/model/transaction-line-info.bo';
+import { TransactionGridBaseComponent } from '../../core/base/transaction-grid-base.component';
 export declare class TransactionLinesGridComponent extends TransactionGridBaseComponent {
     showClass(): boolean;
     currentTransactionLine: TransactionLineInfo;

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

@@ -88,13 +88,14 @@
     .transaction-header-popup-content-wrapper {
       height: 100%;
       margin: $tp-transaction-header-popup-categories-content-margin;
+      padding: $tp-transaction-header-popup-categories-content-padding;
       overflow: hidden;
       > * {
         height: 100%;
       }
       .transaction-header-popup-category-wrapper {
         height: 100%;
-        padding: $tp-transaction-header-popup-categories-content-padding;
+        padding: $tp-transaction-header-popup-category-content-padding;
         overflow-x: hidden;
       }
     }
@@ -136,6 +137,34 @@
       &.general {
         max-width: $tp-transaction-header-popup-section-general-max-width;
       }
+      .co-input-checkbox {
+        .checkbox {
+          border-color: #FFFFFF;
+          background-color: #FFFFFF;
+          &.checked {
+            border-color: $cc-popup-checkbox-checked-background-color;
+            background-color: $cc-popup-checkbox-checked-background-color;
+          }
+          .checkmark {
+            &.show {
+              border-color: #FFFFFF;
+            }
+          }
+        }
+      }
+    }
+    .co-carousel {
+      .carousel-wrapper {
+        padding: 10px 0;
+        .co-tile {
+          &.selected {
+            transform: scale(1);
+          }
+          .co-tile-select-wrapper {
+            display: none;
+          }
+        }
+      }
     }
     .transaction-header-popup-two-column-grid {
       display: grid;
@@ -144,6 +173,13 @@
       column-gap: $tp-transaction-header-popup-section-grid-column-gap;
       align-items: center;
     }
+    .transaction-header-popup-three-column-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      row-gap: $tp-transaction-header-popup-section-grid-row-gap;
+      column-gap: $tp-transaction-header-popup-section-grid-column-gap;
+      align-items: center;
+    }
     .transaction-header-popup-section-label {
       font-family: $tp-transaction-header-popup-section-label-font-family;
       font-size: $tp-transaction-header-popup-section-label-font-size;
@@ -153,7 +189,7 @@
     .co-transaction-filter-categories {
       .transaction-filter-categories-wrapper {
         display: flex;
-        justify-content: center;
+        justify-content: flex-start;
         gap: $tp-transaction-header-popup-filter-categories-wrapper-gap;
         padding: $tp-transaction-header-popup-filter-categories-wrapper-padding;
         .transaction-filter-category {
@@ -167,6 +203,17 @@
         }
       }
     }
+    .co-transaction-line-checkbox-list {
+      .checkbox-list-wrapper {
+        .checkbox-list-item {
+          height: 32px;
+        }
+        .checkbox {
+          border-color: #F5F5FC;
+          background-color: #F5F5FC;
+        }
+      }
+    }
     .co-relation-general {
       .default-data-row {
         .checkout-prefix-name {

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

@@ -18,17 +18,19 @@ $tp-transaction-header-popup-category-font-size: $tp-font-size !default;
 
 $tp-transaction-header-popup-categories-background-color: none !default;
 $tp-transaction-header-popup-categories-border-radius: $tp-default-border-radius !default;
-$tp-transaction-header-popup-categories-column-gap: 5px !default;
-$tp-transaction-header-popup-categories-content-margin: 20px 0 !default;
-$tp-transaction-header-popup-categories-content-padding: 5px 0 0 0 !default;
-$tp-transaction-header-popup-categories-padding: 0 0 20px 0 !default;
+$tp-transaction-header-popup-categories-column-gap: 10px !default;
+$tp-transaction-header-popup-categories-content-margin: 0 !default;
+$tp-transaction-header-popup-categories-content-padding: 20px 0 !default;
+$tp-transaction-header-popup-categories-padding: 0 0 10px 0 !default;
 $tp-transaction-header-popup-categories-border-width: 0 0 5px 0 !default;
 $tp-transaction-header-popup-categories-border-color: #ffffff !default;
 
 $tp-transaction-header-popup-category-background-color: none !default;
+$tp-transaction-header-popup-category-active-background-color: #fff !default;
 $tp-transaction-header-popup-category-font-color: $tp-color-font !default;
 $tp-transaction-header-popup-category-border-radius: $tp-default-border-radius !default;
-$tp-transaction-header-popup-category-padding: 0px !default;
+$tp-transaction-header-popup-category-padding: 5px 15px !default;
+$tp-transaction-header-popup-category-content-padding: 0 0 20px 0 !default;
 $tp-transaction-header-popup-category-margin: 0px !default;
 $tp-transaction-header-popup-category-flex-basis: 50px !default;
 $tp-transaction-header-popup-category-justify-content: center !default;
@@ -38,7 +40,7 @@ $tp-transaction-header-popup-category-selected-background-color: white !default;
 $tp-transaction-header-popup-category-selected-font-color: $tp-color-action !default;
 $tp-transaction-header-popup-category-co-icon-size: 20px !default;
 $tp-transaction-header-popup-category-co-icon-margin: 0 0 5px 0 !default;
-$tp-transaction-header-popup-category-title-font-size: $tp-font-size-small !default;
+$tp-transaction-header-popup-category-title-font-size: $tp-font-size !default;
 
 $tp-transaction-header-popup-section-row-gap: 12px !default;
 $tp-transaction-header-popup-section-margin: 0 0 10px 0 !default;
@@ -53,7 +55,7 @@ $tp-transaction-header-popup-section-label-margin: 0 !default;
 $tp-transaction-header-popup-section-general-max-width: 600px !default;
 
 $tp-transaction-header-popup-section-grid-row-gap: 10px !default;
-$tp-transaction-header-popup-section-grid-column-gap: 20px !default;
+$tp-transaction-header-popup-section-grid-column-gap: 10px !default;
 
 $tp-transaction-header-popup-save-button-size: auto !default;
 $tp-transaction-header-popup-save-button-icon-size: 20px !default;
@@ -94,3 +96,5 @@ $tp-transaction-header-popup-filter-category-border-color: #ffffff !default;
 $tp-transaction-header-popup-filter-category-active-border-color: #1a73e8 !default;
 $tp-transaction-header-popup-filter-category-active-font-color: #1a73e8 !default;
 
+$cc-popup-checkbox-checked-background-color: #1a73e8 !default;
+

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

@@ -7,14 +7,16 @@
       color: $tp-transaction-header-popup-category-font-color;
       background: $tp-transaction-header-popup-category-background-color;
       &.selected {
-        svg {
-          fill: $tp-transaction-header-popup-category-selected-font-color;
+        .title {
+          color: $tp-transaction-header-popup-category-selected-font-color;
         }
+        background: $tp-transaction-header-popup-category-active-background-color;
       }
       &:hover {
-        svg {
-          fill: $tp-transaction-header-popup-category-hover-font-color;
+        .title {
+          color: $tp-transaction-header-popup-category-hover-font-color;
         }
+        background: $tp-transaction-header-popup-category-active-background-color;
       }
     }
     .save-button {

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

@@ -36,6 +36,7 @@ export declare class TransactionHeaderPopupComponent extends TransactionBaseComp
     saving: boolean;
     activeCategory: PopupCategory;
     cloneRelation: RelationAnyType;
+    private _activeCategoryDescription;
     private _subs;
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, transactionScreenConfigurationService: TransactionScreenConfigurationService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, dialogService: DialogService, formMasterService: FormMasterService, relationService: RelationService);
     ngOnInit(): void;

package/lib/component/transaction-header-fields/transaction-header-administrative-relation.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';
 export declare class TransactionHeaderAdministrativeRelationComponent extends TransactionFilterPopupBaseComponent<RelationListObject> implements OnInit {
     transactionEventService: TransactionEventService;
     service: TransactionService;

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

@@ -7,7 +7,7 @@ import { Currency } from '@colijnit/mainapi/build/model/currency.bo';
 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';
 export declare class TransactionHeaderCurrencyComponent extends TransactionFilterPopupBaseComponent<Currency> implements OnInit {
     transactionEventService: TransactionEventService;
     service: TransactionService;

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-delivery-method-button/transaction-header-delivery-method-button.component.d.ts

@@ -7,7 +7,7 @@ import { TransactionService } from '../../../service/transaction.service';
 import { IconCacheService } from '../../../service/icon-cache.service';
 import { DictionaryService } from '../../../service/dictionary.service';
 import { TransactionImageService } from '../../../service/transaction-image.service';
-import { TransactionScreenConfigurationService } from "../../../service/transaction-screen-configuration.service";
+import { TransactionScreenConfigurationService } from '../../../service/transaction-screen-configuration.service';
 export declare class TransactionHeaderDeliveryMethodButtonComponent extends TransactionBaseComponent implements ScreenConfigAdapterComponent {
     transactionEventService: TransactionEventService;
     service: TransactionService;

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>;
 }