@colijnit/transaction 12.1.32 → 12.1.33

package/lib/cache/cache-field.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from "@angular/core";
+export declare class CacheField<T> {
+    readonly onLoad: EventEmitter<any>;
+    get value(): T;
+    set value(value: T);
+    get isLoaded(): boolean;
+    get isLoading(): boolean;
+    get loadNeverCalled(): boolean;
+    loadFunction: (params?: any) => Promise<T>;
+    private _promiseValue;
+    private _value;
+    private _isLoaded;
+    constructor();
+    getValue(forceReload?: boolean): Promise<T>;
+    setValue(value: any): void;
+    /**
+     * POSTCONDITION: The .value of this cache field contains the loaded value as fetched by the resolve data of its .loadFunction.
+     * Will load only once, consecutive calls will resolve immediately or wait until the first original database fetch was finished.
+     * @returns {Promise<any>} Postcondition holds after resolve
+     */
+    ensureLoaded(forceReload?: boolean): Promise<T>;
+    reload(): Promise<T>;
+    reset(): void;
+    private _load;
+}

package/lib/cache/parameter-cache-field.d.ts

@@ -0,0 +1,11 @@
+export declare class ParameterCacheField<T> {
+    loadFunction: (...params: any[]) => Promise<T>;
+    private _paramsToCacheItems;
+    constructor();
+    getValue(...params: any[]): Promise<T>;
+    setValue(value: any, ...params: any[]): void;
+    reload(...params: any[]): Promise<T>;
+    reset(...params: any[]): void;
+    private _getCacheField;
+    private _makeNewCacheField;
+}

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

@@ -0,0 +1,57 @@
+import { OnDestroy } from "@angular/core";
+import { Subject } from "rxjs";
+import { BusinessObject, BusinessObjectIDType } from "@colijnit/transactionapi/build/model/business-object";
+import { CacheField } from "../cache-field";
+import { ParameterCacheField } from "../parameter-cache-field";
+/**
+ * App-wide, top-level, 'dumb' BO cache manager service. It stores and returns simple and parameterized business object cache items.
+ *
+ * Several other services register cache items onto this manager, such as repositories or the more generic SelectMultipleSimpleCacheService.
+ *
+ * This is a dumb cache manager. It just functions as a point to add and retrieve generic cache items, but does not know how to actually
+ * LOAD these cache items from the database, or what exact types the items are.
+ *
+ * All caches are reset when the user logs out.
+ */
+export declare class BusinessObjectCacheManagerService implements OnDestroy {
+    readonly reset: Subject<void>;
+    private static _NullBoId;
+    private _selectMultipleCache;
+    private _selectMultipleParameterizedCache;
+    private _selectSingleCache;
+    private _selectSingleParameterizedCache;
+    private _logoutSub;
+    ngOnDestroy(): void;
+    /**
+     * Creates and adds a new simple cache item for the given key with the given load function.
+     * @param key
+     * @param loadFunction e.g. () => { return this._dataService.selectMultiple(Color); }
+     * @param overrideOld Whether to allow an old cache item with the same key to become override by this newly created cache item.
+     * @returns The newly created cache item.
+     */
+    addNewSelectMultipleCacheItem<T extends BusinessObject>(key: any, loadFunction: () => Promise<T[]>, overrideOld?: boolean): CacheField<T[]>;
+    addNewSelectSingleCacheItem<T extends BusinessObject>(key: {
+        new (): T;
+    }, id: BusinessObjectIDType, loadFunction: () => Promise<T>, overrideOld?: boolean): CacheField<T>;
+    addNewSelectSingleParameterizedCacheItem<T extends BusinessObject>(key: any, loadFunction: (params?: any) => Promise<T>, overrideOld?: boolean): ParameterCacheField<T>;
+    /**
+     * Creates and adds a new parameterized cache item for the given key with the given load function.
+     * @param key
+     * @param loadFunction e.g. (category: ArticleCategory) => { return this._dataService.selectMultiple(TurnoverGroupImage, category); }
+     * @param overrideOld Whether to allow an old cache item with the same key to become override by this newly created cache item.
+     */
+    addNewSelectMultipleParameterizedCacheItem<T extends BusinessObject>(key: any, loadFunction: (params?: any) => Promise<T[]>, overrideOld?: boolean): ParameterCacheField<T[]>;
+    hasSelectMultipleCacheItem(key: any): boolean;
+    hasSingleCacheItem<T extends BusinessObject>(key: {
+        new (): T;
+    }, id?: BusinessObjectIDType): boolean;
+    hasSelectMultipleParameterizedCacheItem(key: any): boolean;
+    hasSelectSingleParameterizedCacheItem(key: any): boolean;
+    getSelectMultipleCacheItem<T extends BusinessObject>(key: any): CacheField<T[]>;
+    getSingleCacheItem<T extends BusinessObject>(key: {
+        new (): T;
+    }, id?: BusinessObjectIDType): CacheField<T>;
+    getSelectMultipleParameterCacheItem<T extends BusinessObject>(key: any): ParameterCacheField<T[]>;
+    getSelectSingleParameterCacheItem<T extends BusinessObject>(key: any): ParameterCacheField<T>;
+    private _reset;
+}

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

@@ -0,0 +1,15 @@
+import { BusinessObjectCacheManagerService } from "./business-object-cache-manager.service";
+import { CacheField } from "../cache-field";
+import { BusinessObject } from "@colijnit/transactionapi/build/model/business-object";
+export declare class SelectMultipleCacheService {
+    private _boCacheManager;
+    private static _NullCache;
+    constructor(_boCacheManager: BusinessObjectCacheManagerService);
+    /**
+     * Returns the global cache item for the select multiple of the given business object class. Creates a new cache item if not yet exists.
+     * @param clazz The BO class, e.g. CustomerFullObject
+     * @returns {CacheField<T[]>}
+     */
+    requestCache<T extends BusinessObject>(clazz: typeof BusinessObject, loadFunction: () => Promise<T[]>): CacheField<T[]>;
+    private _createCacheItem;
+}

package/lib/cache/service/select-multiple-parameterized-cache.service.d.ts

@@ -0,0 +1,19 @@
+import { OnDestroy } from "@angular/core";
+import { Subject } from "rxjs";
+import { BusinessObjectCacheManagerService } from "./business-object-cache-manager.service";
+import { BusinessObject } from "@colijnit/transactionapi/build/model/business-object";
+import { ParameterCacheField } from "../parameter-cache-field";
+export declare class SelectMultipleParameterizedCacheService implements OnDestroy {
+    private _boCacheManager;
+    readonly reset: Subject<void>;
+    private _subs;
+    constructor(_boCacheManager: BusinessObjectCacheManagerService);
+    ngOnDestroy(): void;
+    /**
+     * Returns the global cache item for the parameterized select multiple of the given business object class. Creates a new cache item if not yet exists.
+     * @param clazz The BO class, used for undeflying dataService.selectMultiple(clazz) call.
+     * @returns {CacheField<T[]>}
+     */
+    requestCache<T extends BusinessObject>(clazz: typeof BusinessObject, loadFunction: (...params: any) => Promise<T[]>): ParameterCacheField<T[]>;
+    private _createParameterizedCacheItem;
+}

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

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

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

@@ -0,0 +1,28 @@
+import { EventEmitter, OnInit } from "@angular/core";
+import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
+export declare abstract class TransactionHeaderBaseComponent implements OnInit {
+    useTransaction: boolean;
+    set searchText(value: string);
+    get searchText(): string;
+    set transactionInfo(value: TransactionInfo);
+    get transactionInfo(): TransactionInfo;
+    valueChange: EventEmitter<any>;
+    readonly: boolean;
+    viewModels: {
+        value: any;
+        text: string;
+        label: string;
+        checked: boolean;
+    }[];
+    viewModelsFiltered: {
+        value: any;
+        text: string;
+        label: string;
+        checked: boolean;
+    }[];
+    private _searchText;
+    private _transactionInfo;
+    ngOnInit(): void;
+    protected transactionInfoSet(): void;
+    private _doSearch;
+}

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

@@ -17,11 +17,13 @@ export declare abstract class TransactionLineBaseComponent implements OnInit {
     viewModels: {
         value: any;
         text: string;
+        label: string;
         checked: boolean;
     }[];
     viewModelsFiltered: {
         value: any;
         text: string;
+        label: string;
         checked: boolean;
     }[];
     private _searchText;

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

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

package/lib/component/dialog/transaction-line/dialog-transaction-line-vat/dialog-transaction-line-vat.module.d.ts

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

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

@@ -0,0 +1,19 @@
+@include export-module('cc-dialog-transaction-line-vat-layout') {
+  .co-dialog-transaction-line-vat {
+    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
+      min-width: 500px;
+    }
+    .co-transaction-default-flex-row {
+      user-select: none;
+      border-radius: $tp-default-border-radius;
+      background-color: $tp-default-background-accent;
+    }
+    .dialog-footer-button-wrapper {
+      display: flex;
+      justify-content: flex-end;
+    }
+    .co-dialog .dialog-content {
+      max-height: 400px;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+@include export-module('cc-dialog-transaction-line-vat-theme') {
+  .co-dialog-transaction-line-vat {
+  }
+}

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

@@ -0,0 +1,5 @@
+@import "../../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";
+@import "../../../dialog-header-search/style/material";

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-location/style/_layout.scss

@@ -0,0 +1,19 @@
+@include export-module('co-dialog-transaction-line-warehouse-location-layout') {
+  .co-dialog-transaction-line-warehouse-location {
+    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
+      min-width: 500px;
+    }
+    .co-transaction-default-flex-row {
+      user-select: none;
+      border-radius: $tp-default-border-radius;
+      background-color: $tp-default-background-accent;
+    }
+    .dialog-footer-button-wrapper {
+      display: flex;
+      justify-content: flex-end;
+    }
+    .co-dialog .dialog-content {
+      max-height: 400px;
+    }
+  }
+}

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-location/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-dialog-transaction-line-warehouse-location-theme') {
+  .co-dialog-transaction-line-warehouse-location {
+  }
+}

package/lib/component/dialog/transaction-line/dialog-transaction-line-warehouse-location/style/material.scss

@@ -0,0 +1,5 @@
+@import "../../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";
+@import "../../../dialog-header-search/style/material";

package/lib/component/relation/relation-contact-details/style/_layout.scss

@@ -1,4 +1,15 @@
 @include export-module('cc-relation-contact-details-layout') {
   .co-relation-contact-details {
+    display: flex;
+    flex-direction: column;
+    column-gap: $tp-relation-contact-details-column-gap;
+    row-gap: $tp-relation-contact-details-row-gap;
+    .default-data-row {
+      display: flex;
+      column-gap: $tp-relation-contact-details-column-gap;
+      .form-input:not(.default-width) {
+        width: 100%;
+      }
+    }
   }
 }

package/lib/component/relation/relation-contact-details/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$tp-relation-contact-details-row-gap: 10px !default;
+$tp-relation-contact-details-column-gap: 10px !default;

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

@@ -22,11 +22,12 @@
       width: 100%;
       border: $tp-transaction-header-delivery-delivery-method-border;
       border-radius: $tp-transaction-header-delivery-delivery-method-border-radius;
+      padding: $tp-transaction-header-delivery-delivery-method-padding;
     }
-    .planning-request-button {
+    .header-planning-request-button {
       border: $tp-transaction-header-delivery-planning-request-button-border;
       border-radius: $tp-transaction-header-delivery-planning-request-button-border-radius;
-
+      padding: $tp-transaction-header-delivery-planning-request-button-padding;
     }
     .header-delivery-deliverydate-wrapper {
       display: flex;

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

@@ -1,11 +1,13 @@
-$tp-transaction-header-delivery-button-width: 40px !default;
+$tp-transaction-header-delivery-button-width: 20px !default;
 $tp-transaction-header-delivery-planning-request-button-color: $tp-color-active !default;
 $tp-transaction-header-delivery-planning-request-button-border: 1px solid !default;
 $tp-transaction-header-delivery-planning-request-button-border-color: $tp-color-border !default;
-$tp-transaction-header-delivery-planning-request-button-border-radius: 5px !default;
+$tp-transaction-header-delivery-planning-request-button-border-radius: 10px !default;
+$tp-transaction-header-delivery-planning-request-button-padding: 5px !default;
 $tp-transaction-header-delivery-definitive-button-color: $tp-color-active-light !default;
 $tp-transaction-header-delivery-delivery-method-background-color: $tp-default-background-accent !default;
 $tp-transaction-header-delivery-delivery-method-border: 1px solid !default;
 $tp-transaction-header-delivery-delivery-method-border-color: $tp-color-border !default;
 $tp-transaction-header-delivery-delivery-method-border-radius: 10px !default;
 $tp-transaction-header-delivery-delivery-truck-color: $tp-color-font !default;
+$tp-transaction-header-delivery-delivery-method-padding: 5px 10px !default;

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

@@ -2,8 +2,10 @@
 
 @include export-module('co-transaction-header-delivery-theme') {
   .co-transaction-header-delivery {
-    .planning-request-button {
+    .header-planning-request-button {
       border-color: $tp-transaction-header-delivery-planning-request-button-border-color;
+    }
+    .planning-request-button {
       & [fill] {
         fill: $tp-transaction-header-delivery-planning-request-button-color;
       }

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

@@ -46,5 +46,8 @@
       width: 100%;
       flex-shrink: 0;
     }
+    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
+      max-height: 80vh;
+    }
   }
 }

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

@@ -9,6 +9,7 @@ $cc-co-carousel-3d-navigate-button-width: 40px;
 @import "../../../relation/relation-address-tile/style/material";
 @import "../../../relation/relation-address-select/style/material";
 @import "../../../relation/relation-general/style/material";
+@import "../../../relation/relation-contact-details/style/material";
 @import "../../../relation/relation-preferences/style/material";
 @import "~@colijnit/corecomponents_v12/lib/components/carousel-3d/style/material";
 @import "~@colijnit/corecomponents_v12/lib/components/drop-down-list/style/material";

package/lib/component/transaction-header-fields/transaction-header-administrative-relation.component.d.ts

@@ -1,8 +1,8 @@
 import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
-export declare class TransactionHeaderAdministrativeRelationComponent extends TransactionHeaderFieldsBaseComponent implements OnInit {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderAdministrativeRelationComponent extends TransactionHeaderBaseComponent implements OnInit {
     private _transactionService;
     collection: RelationListObject[];
     fields: Object;

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

@@ -1,21 +1,16 @@
 import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
 import { BranchLov } from "@colijnit/transactionapi/build/model/branch-lov.bo";
-export declare class TransactionHeaderBranchComponent extends TransactionHeaderFieldsBaseComponent implements OnInit {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderBranchComponent extends TransactionHeaderBaseComponent implements OnInit {
     private _transactionService;
-    showExtended: boolean;
+    simple: boolean;
     collection: BranchLov[];
     fields: Object;
-    viewModels: {
-        value: number;
-        text: string;
-        checked: boolean;
-    }[];
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
     commitTransactionBranch(branch: number): Promise<boolean>;
-    handleChecked(row: {
+    handleChecked(event: MouseEvent, row: {
         value: number;
         text: string;
         checked: boolean;

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

@@ -1,6 +1,6 @@
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderDefinitiveComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderDefinitiveComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     constructor(_transactionService: TransactionService);
     commitTransactionDefinitive(definitive: boolean): Promise<boolean>;

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

@@ -1,7 +1,7 @@
 import { InputDatePickerComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderDeliveryDateComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderDeliveryDateComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;

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

@@ -1,8 +1,8 @@
 import { EventEmitter, OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
 import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
-export declare class TransactionHeaderDeliveryMethodComponent extends TransactionHeaderFieldsBaseComponent implements OnInit {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderDeliveryMethodComponent extends TransactionHeaderBaseComponent implements OnInit {
     private _transactionService;
     deliveryMethodChange: EventEmitter<DeliveryMethod>;
     deliveryMethods: DeliveryMethod[];

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

@@ -1,10 +1,10 @@
 import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
 import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
 import { TextValueContainer } from "../../model/text-value-container";
 import { DeliveryOption } from "@colijnit/transactionapi/build/model/delivery-option.bo";
-export declare class TransactionHeaderDeliveryOptionsComponent extends TransactionHeaderFieldsBaseComponent implements OnInit {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderDeliveryOptionsComponent extends TransactionHeaderBaseComponent implements OnInit {
     private _transactionService;
     set deliveryMethod(value: DeliveryMethod);
     get deliveryMethod(): DeliveryMethod;

package/lib/component/transaction-header-fields/transaction-header-downpayment-amount.component.d.ts

@@ -1,7 +1,7 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderDownpaymentAmountComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderDownpaymentAmountComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;

package/lib/component/transaction-header-fields/transaction-header-downpayment-percentage.component.d.ts

@@ -1,7 +1,7 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderDownpaymentPercentageComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderDownpaymentPercentageComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;

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

@@ -1,16 +1,10 @@
 import { OnInit } from "@angular/core";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
 import { Marketing } from "@colijnit/transactionapi/build/model/marketing.bo";
-export declare class TransactionHeaderMarketingComponent extends TransactionHeaderFieldsBaseComponent implements OnInit {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderMarketingComponent extends TransactionHeaderBaseComponent implements OnInit {
     private _transactionService;
     collection: Marketing[];
-    fields: Object;
-    viewModels: {
-        value: string;
-        text: string;
-        checked: boolean;
-    }[];
     constructor(_transactionService: TransactionService);
     ngOnInit(): void;
     commitTransactionMarketing(code: string): Promise<boolean>;

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

@@ -1,6 +1,6 @@
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderPartialDeliveryComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderPartialDeliveryComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     constructor(_transactionService: TransactionService);
     commitPartialDelivery(allow: boolean): Promise<boolean>;

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

@@ -1,7 +1,7 @@
 import { InputDatePickerComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderPreferredDeliveryDateComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderPreferredDeliveryDateComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;

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

@@ -1,7 +1,7 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderReferenceComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderReferenceComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;

package/lib/component/transaction-header-fields/transaction-header-relation-reference.component.d.ts

@@ -1,7 +1,7 @@
 import { InputTextComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderRelationReferenceComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderRelationReferenceComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;

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

@@ -1,7 +1,7 @@
 import { InputTextareaComponent } from "@colijnit/corecomponents_v12";
 import { TransactionService } from "../../service/transaction.service";
-import { TransactionHeaderFieldsBaseComponent } from "./transaction-header-fields-base.component";
-export declare class TransactionHeaderRemarksComponent extends TransactionHeaderFieldsBaseComponent {
+import { TransactionHeaderBaseComponent } from "../core/base/transaction-header-base.component";
+export declare class TransactionHeaderRemarksComponent extends TransactionHeaderBaseComponent {
     private _transactionService;
     set child(content: any);
     showLabel: boolean;

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

@@ -24,18 +24,33 @@
     }
     .transaction-line-extended-wrapper {
       display: grid;
-      grid-template-columns: 200px 200px 200px;
-      grid-template-rows: 30px 30px;
+      grid-template-columns: $tp-transaction-line-button-width $tp-transaction-line-button-width auto $tp-transaction-line-button-delivery-method-width;
+      grid-template-rows: $tp-transaction-line-button-height $tp-transaction-line-button-height;
       grid-column-gap: $tp-transaction-line-column-gap;
       grid-row-gap: $tp-transaction-line-row-gap;
+      .last-two-columns {
+        grid-column: 3 / 5;
+      }
+      .two-column {
+        grid-column: 1 / 3;
+        column-gap: 5px;
+        padding: 0;
+      }
     }
     .transaction-line-extended-row-wrapper {
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid $tp-transaction-line-border-color;
-      border-radius: 10px;
+      column-gap: $tp-transaction-line-column-gap;
+      padding: $tp-transaction-line-button-padding;
+      &:not(.no-border) {
+        border: $tp-transaction-line-button-border;
+        border-radius: $tp-transaction-line-button-radius;
+      }
+    }
+    .transaction-line-extended-button {
+      height: $tp-transaction-line-button-height;
     }
     &.preview {
       .transaction-line-wrapper {
@@ -106,7 +121,7 @@
     .transaction-line-totals {
       display: grid;
       grid-template-columns: 100px 100px 100px;
-      grid-template-rows: 30px 30px;
+      grid-template-rows: $tp-transaction-line-button-height $tp-transaction-line-button-height;
       grid-column-gap: $tp-transaction-line-column-gap;
       grid-row-gap: $tp-transaction-line-row-gap;
 

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

@@ -23,6 +23,14 @@ $tp-transaction-line-totals-font-weight: bold !default;
 $tp-transaction-line-delete-color: $tp-color-action !default;
 $tp-transaction-line-article-text-background-color: $tp-color-light-accent !default;
 $tp-transaction-line-article-text-color: $tp-color-dark !default;
+$tp-transaction-line-button-width: 78px !default;
+$tp-transaction-line-button-padding: 0 5px !default;
+$tp-transaction-line-button-height: 26px !default;
+$tp-transaction-line-button-radius: 10px !default;
+$tp-transaction-line-button-border: 1px solid !default;
+$tp-transaction-line-button-border-color: $tp-color-border !default;
+$tp-transaction-line-button-delivery-method-width: 250px !default;
+$tp-transaction-line-button-background-color: $tp-color-active-light !default;
 $tp-transaction-line-buttons-overview-background-color: $tp-color-active-light !default;
 $tp-transaction-line-buttons-overview-text-color: $tp-color-light !default;
 $tp-transaction-line-buttons-add-text-background-color: $tp-color-action !default;

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

@@ -28,8 +28,9 @@
     .discount {
       background-color: $tp-transaction-line-discount-background-color;
     }
-    .transaction-line-extended-row-wrapper {
+    .transaction-line-extended-row-wrapper:not(.no-border) {
       background-color: $tp-transaction-line-discount-background-color;
+      border-color: $tp-transaction-line-button-border-color;
     }
   }
 }