@colijnit/transaction 12.1.117 → 12.1.119

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

@@ -46,7 +46,7 @@
       align-items: center;
     }
 
-    .co-transaction-header-definitive {
+    .transaction-header-order-definitive {
       .co-input-checkbox {
         font-size: $tp-font-size-small;
         flex-direction: column-reverse;

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

@@ -6,5 +6,4 @@ export declare class TransactionHeaderOrderComponent extends TransactionBaseComp
     showDialog: boolean;
     showDialogDiscount: boolean;
     openDiscount(event: MouseEvent): void;
-    handleShowDialog(event: MouseEvent): Promise<void>;
 }

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

@@ -0,0 +1,106 @@
+@include export-module('co-transaction-header-popup-layout') {
+  .co-transaction-header-popup {
+    font-family: $tp-transaction-header-popup-font-family;
+    font-size: $tp-transaction-header-popup-font-size;
+    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
+      width: $tp-transaction-header-popup-width;
+      height: $tp-transaction-header-popup-height;
+      .dialog-content {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        height: 100%;
+      }
+    }
+    .transaction-header-popup-categories {
+      display: flex;
+      column-gap: $tp-transaction-header-popup-categories-column-gap;
+      border-radius: $tp-transaction-header-popup-categories-border-radius;
+    }
+    .transaction-header-popup-category {
+      display: flex;
+      flex-basis: $tp-transaction-header-popup-category-flex-basis;
+      justify-content: $tp-transaction-header-popup-category-justify-content;
+      cursor: pointer;
+      padding: $tp-transaction-header-popup-category-padding;
+      margin: $tp-transaction-header-popup-category-margin;
+      border-radius: $tp-transaction-header-popup-category-border-radius;
+    }
+    .transaction-header-popup-content-wrapper {
+      height: 100%;
+      margin: $tp-transaction-header-popup-categories-content-margin;
+      overflow: hidden;
+      > * {
+        height: 100%;
+      }
+      .transaction-header-popup-category-wrapper {
+        height: 100%;
+        padding: $tp-transaction-header-popup-categories-content-padding;
+        overflow-x: hidden;
+      }
+    }
+
+    .extended-block-wrapper {
+      display: grid;
+      grid-template-columns: 50% 50%;
+      grid-column-gap: 10px;
+      grid-row-gap: 10px;
+      @include screen-mobile {
+        grid-template-columns: 100%;
+      }
+    }
+    .header-definitive-checkbox, .header-delivery-date-checkbox {
+      .co-input-checkbox {
+        font-size: $tp-transaction-header-popup-font-size;
+        flex-direction: row;
+      }
+    }
+    .transaction-header-popup-section {
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-transaction-header-popup-section-row-gap;
+      margin: $tp-transaction-header-popup-section-margin;
+      padding: $tp-transaction-header-popup-section-padding;
+      border-style: $tp-transaction-header-popup-section-border-style;
+      border-width: $tp-transaction-header-popup-section-border-width;
+      border-color: black;
+      &.general {
+        max-width: $tp-transaction-header-popup-section-general-max-width;
+      }
+    }
+    .transaction-header-popup-two-column-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: $tp-transaction-header-popup-section-grid-row-gap;
+      column-gap: $tp-transaction-header-popup-section-grid-column-gap;
+    }
+    .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;
+      font-weight: $tp-transaction-header-popup-section-label-font-weight;
+      margin: $tp-transaction-header-popup-section-label-margin;
+    }
+    .co-transaction-filter-categories .transaction-filter-categories-wrapper {
+      justify-content: flex-start;
+    }
+    .co-relation-addresses .co-carousel-3d {
+      max-width: 100%;
+      height: 175px;
+    }
+    .header-relation-navigation-wrapper {
+      display: flex;
+      overflow: hidden;
+      scroll-behavior: smooth;
+    }
+    .header-relation-navigation-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      flex-shrink: 0;
+    }
+    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
+      max-height: 90vh;
+    }
+
+  }
+}

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

@@ -0,0 +1,40 @@
+$tp-transaction-header-popup-font-family: $tp-font-family !default;
+$tp-transaction-header-popup-font-size: $tp-font-size !default;
+$tp-transaction-header-popup-width: 650px !default;
+$tp-transaction-header-popup-height: 800px !default;
+
+$tp-transaction-header-popup-category-font-family: $tp-font-family !default;
+$tp-transaction-header-popup-category-font-size: $tp-font-size !default;
+
+$tp-transaction-header-popup-categories-background-color: $tp-default-background-accent !default;
+$tp-transaction-header-popup-categories-border-radius: $tp-default-border-radius !default;
+$tp-transaction-header-popup-categories-column-gap: 10px !default;
+$tp-transaction-header-popup-categories-content-margin: 20px 0 !default;
+$tp-transaction-header-popup-categories-content-padding: 20px 0 0 0 !default;
+
+$tp-transaction-header-popup-category-background-color: $tp-default-background-accent !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: 10px !default;
+$tp-transaction-header-popup-category-margin: 10px !default;
+$tp-transaction-header-popup-category-flex-basis: 100% !default;
+$tp-transaction-header-popup-category-justify-content: center !default;
+$tp-transaction-header-popup-category-hover-background-color: white !default;
+$tp-transaction-header-popup-category-hover-font-color: $tp-color-action !default;
+$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-section-row-gap: 20px !default;
+$tp-transaction-header-popup-section-margin: 0 0 20px 0 !default;
+$tp-transaction-header-popup-section-padding: 0 0 10px 0 !default;
+$tp-transaction-header-popup-section-border-style: solid !default;
+$tp-transaction-header-popup-section-border-width: 0 !default;
+$tp-transaction-header-popup-section-border-color: $tp-color-border !default;
+$tp-transaction-header-popup-section-label-font-family: $tp-font-family !default;
+$tp-transaction-header-popup-section-label-font-size: $tp-font-size !default;
+$tp-transaction-header-popup-section-label-font-weight: bold !default;
+$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;

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

@@ -0,0 +1,19 @@
+@include export-module('co-transaction-header-popup-theme') {
+  .co-transaction-header-popup {
+    .transaction-header-popup-categories {
+      background: $tp-transaction-header-popup-categories-background-color;
+    }
+    .transaction-header-popup-category {
+      color: $tp-transaction-header-popup-category-font-color;
+      background: $tp-transaction-header-popup-category-background-color;
+      &.selected {
+        color: $tp-transaction-header-popup-category-selected-font-color;
+        background: $tp-transaction-header-popup-category-selected-background-color;
+      }
+      &:hover {
+        color: $tp-transaction-header-popup-category-hover-font-color;
+        background: $tp-transaction-header-popup-category-hover-background-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+@import "../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,31 @@
+import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+import { TransactionEventService } from '../../../service/transaction-event.service';
+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 { FormComponent, FormMasterService } from '@colijnit/corecomponents_v12';
+import { DialogService } from '../../../service/dialog.service';
+export declare abstract class TransactionHeaderPopupBaseComponent extends TransactionBaseComponent implements OnInit, OnDestroy {
+    transactionEventService: TransactionEventService;
+    service: TransactionService;
+    iconCacheService: IconCacheService;
+    protected dictionaryService: DictionaryService;
+    protected imageService: TransactionImageService;
+    protected changeDetector: ChangeDetectorRef;
+    protected dialogService: DialogService;
+    protected formMasterService: FormMasterService;
+    set content(form: FormComponent);
+    readonly: boolean;
+    dirty: boolean;
+    form: FormComponent;
+    private _subs;
+    constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, dialogService: DialogService, formMasterService: FormMasterService);
+    ngOnInit(): Promise<void>;
+    ngOnDestroy(): Promise<void>;
+    abstract saveObject(): any;
+    protected setFormPristine(): void;
+    private _setFormDirty;
+    private _askForSave;
+}

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

@@ -0,0 +1,6 @@
+import { TransactionHeaderPopupBaseComponent } from './transaction-header-popup-base.component';
+export declare class TransactionHeaderPopupDeliveryComponent extends TransactionHeaderPopupBaseComponent {
+    showClass(): boolean;
+    protected transactionInfoSet(): Promise<void>;
+    saveObject(): void;
+}

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

@@ -0,0 +1,6 @@
+import { TransactionHeaderPopupBaseComponent } from './transaction-header-popup-base.component';
+export declare class TransactionHeaderPopupOrderComponent extends TransactionHeaderPopupBaseComponent {
+    showClass(): boolean;
+    protected transactionInfoSet(): Promise<void>;
+    saveObject(): void;
+}

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

@@ -0,0 +1,4 @@
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+export declare class TransactionHeaderPopupPaymentComponent extends TransactionBaseComponent {
+    showClass(): boolean;
+}

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

@@ -0,0 +1,43 @@
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { TransactionEventService } from '../../../service/transaction-event.service';
+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 { RelationService } from '../../../service/relation.service';
+import { FormMasterService } from '@colijnit/corecomponents_v12';
+import { DialogService } from '../../../service/dialog.service';
+import { AddressType } from '@colijnit/relationapi/build/enum/address-type.enum';
+import { RelationAnyType } from '@colijnit/relationapi/build/model/relation-any-type';
+import { TransactionHeaderPopupBaseComponent } from './transaction-header-popup-base.component';
+export declare class TransactionHeaderPopupRelationComponent extends TransactionHeaderPopupBaseComponent {
+    transactionEventService: TransactionEventService;
+    service: TransactionService;
+    iconCacheService: IconCacheService;
+    protected dictionaryService: DictionaryService;
+    protected imageService: TransactionImageService;
+    protected changeDetector: ChangeDetectorRef;
+    protected dialogService: DialogService;
+    protected formMasterService: FormMasterService;
+    private _relationService;
+    readonly addressType: typeof AddressType;
+    navigationItems: ElementRef;
+    mainItems: ElementRef;
+    preferenceItems: ElementRef;
+    showClass(): boolean;
+    deliveryAddressNawNr: number;
+    invoiceAddressNawNr: number;
+    invoiceAddressSameAsDeliveryAddress: boolean;
+    categories: string[];
+    customerGroup: string;
+    cloneRelation: RelationAnyType;
+    constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, dialogService: DialogService, formMasterService: FormMasterService, _relationService: RelationService);
+    relationSet(): Promise<void>;
+    setIndexDeliveryAddress(nawNr: number): void;
+    setIndexInvoiceAddress(nawNr: number): void;
+    checkSameAddress(checked: boolean): void;
+    handleNavigationClick(nav: string): void;
+    handleChangeCustomGroup(group: string): void;
+    saveObject(): void;
+    private _lockRelation;
+}

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

@@ -0,0 +1,20 @@
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+export interface PopupCategory {
+    index: number;
+    description: string;
+}
+export declare class TransactionHeaderPopupComponent extends TransactionBaseComponent implements OnInit, OnDestroy {
+    set activeCategoryIndex(value: number);
+    closeClick: EventEmitter<MouseEvent>;
+    showClass(): boolean;
+    categories: PopupCategory[];
+    okButtonEnabled: boolean;
+    activeCategory: PopupCategory;
+    private _subs;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleCloseClick(event: MouseEvent): void;
+    handleCategoryClick(cat: PopupCategory): void;
+    handleOkButtonClick(event: MouseEvent): void;
+}

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

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

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

@@ -34,21 +34,21 @@
     .header-relation-section {
       display: flex;
       flex-direction: column;
-      row-gap: $tp-transaction-header-relation-section-row-gap;
-      margin: $tp-transaction-header-relation-section-margin;
-      padding: $tp-transaction-header-relation-section-padding;
-      border-style: $tp-transaction-header-relation-section-border-style;
-      border-width: $tp-transaction-header-relation-section-border-width;
+      row-gap: $tp-transaction-header-popup-section-row-gap;
+      margin: $tp-transaction-header-popup-section-margin;
+      padding: $tp-transaction-header-popup-section-padding;
+      border-style: $tp-transaction-header-popup-section-border-style;
+      border-width: $tp-transaction-header-popup-section-border-width;
       border-color: black;
       &.general {
-        max-width: $tp-transaction-header-relation-section-general-max-width;
+        max-width: $tp-transaction-header-popup-section-general-max-width;
       }
     }
     .header-relation-section-label {
-      font-family: $tp-transaction-header-relation-section-label-font-family;
-      font-size: $tp-transaction-header-relation-section-label-font-size;
-      font-weight: $tp-transaction-header-relation-section-label-font-weight;
-      margin: $tp-transaction-header-relation-section-label-margin;
+      font-family: $tp-transaction-header-popup-section-label-font-family;
+      font-size: $tp-transaction-header-popup-section-label-font-size;
+      font-weight: $tp-transaction-header-popup-section-label-font-weight;
+      margin: $tp-transaction-header-popup-section-label-margin;
     }
     .co-transaction-filter-categories .transaction-filter-categories-wrapper {
       justify-content: flex-start;

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

@@ -3,7 +3,7 @@
 @include export-module('co-transaction-header-relation-theme') {
   .co-transaction-header-relation {
     .section {
-      border-color: $tp-transaction-header-relation-section-border-color;
+      border-color: $tp-transaction-header-popup-section-border-color;
     }
   }
 }

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

@@ -1,45 +1,5 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
-import { DictionaryService } from '../../../service/dictionary.service';
-import { TransactionService } from '../../../service/transaction.service';
-import { DialogService } from '../../../service/dialog.service';
-import { AddressType } from '@colijnit/relationapi/build/enum/address-type.enum';
-import { RelationService } from '../../../service/relation.service';
-import { FormMasterService } from '@colijnit/corecomponents_v12';
-import { TransactionEventService } from '../../../service/transaction-event.service';
-import { IconCacheService } from '../../../service/icon-cache.service';
-import { TransactionImageService } from '../../../service/transaction-image.service';
 export declare class TransactionHeaderRelationComponent extends TransactionBaseComponent {
-    transactionEventService: TransactionEventService;
-    service: TransactionService;
-    iconCacheService: IconCacheService;
-    protected dictionaryService: DictionaryService;
-    protected imageService: TransactionImageService;
-    protected changeDetector: ChangeDetectorRef;
-    private _relationService;
-    private _formMasterService;
-    private _dialogService;
-    readonly addressType: typeof AddressType;
-    navigationItems: ElementRef;
-    mainItems: ElementRef;
-    preferenceItems: ElementRef;
     showClass(): boolean;
-    deliveryAddressNawNr: number;
-    invoiceAddressNawNr: number;
-    invoiceAddressSameAsDeliveryAddress: boolean;
     showDialog: boolean;
-    categories: string[];
-    customerGroup: string;
-    readonly: boolean;
-    private _boFactory;
-    constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _relationService: RelationService, _formMasterService: FormMasterService, _dialogService: DialogService);
-    relationSet(): void;
-    setIndexDeliveryAddress(nawNr: number): void;
-    setIndexInvoiceAddress(nawNr: number): void;
-    checkSameAddress(checked: boolean): void;
-    handleNavigationClick(nav: string): void;
-    handleChangeCustomGroup(group: string): void;
-    handleShowDialog(): Promise<void>;
-    handleCloseDialog(event: MouseEvent): void;
-    handleOkClick(): void;
 }

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

@@ -24,7 +24,6 @@ export declare class TransactionHeaderBranchComponent extends TransactionFilterP
     protected propsForLabel: string[];
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _relationService: RelationService);
     commit(branch: number | RelationSmallObject): Promise<boolean>;
-    protected transactionSet(): void;
     protected transactionInfoSet(): void;
     private _setBranchModel;
 }

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

@@ -20,6 +20,6 @@ export declare class TransactionHeaderCurrencyComponent extends TransactionFilte
     constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _relationService: RelationService);
     ngOnInit(): void;
     commitTransactionCurrency(currency: number): Promise<boolean>;
-    protected transactionSet(): void;
+    protected transactionInfoSet(): void;
     private _setCurrencyModel;
 }

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

@@ -1,5 +1,5 @@
-import { InputDatePickerComponent } from "@colijnit/corecomponents_v12";
-import { TransactionInputFieldBaseComponent } from "../core/base/transaction-input-field-base.component";
+import { InputDatePickerComponent } from '@colijnit/corecomponents_v12';
+import { TransactionInputFieldBaseComponent } from '../core/base/transaction-input-field-base.component';
 export declare class TransactionHeaderDeliveryDateComponent extends TransactionInputFieldBaseComponent {
     set child(content: any);
     input: InputDatePickerComponent;

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

@@ -0,0 +1,8 @@
+@include export-module('co-transaction-header-delivery-method-button-layout') {
+  .co-transaction-header-delivery-method-button {
+    width: 100%;
+    .transaction-button {
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+@include export-module('co-transaction-header-delivery-method-button-theme') {
+  .co-transaction-header-delivery-method-button {
+  }
+}

package/lib/component/transaction-header-fields/transaction-header-delivery-method-button/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,26 @@
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
+import { OverlayService } from '@colijnit/corecomponents_v12';
+import { DeliveryMethod } from '@colijnit/transactionapi/build/model/delivery-method.bo';
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+import { TransactionEventService } from '../../../service/transaction-event.service';
+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';
+export declare class TransactionHeaderDeliveryMethodButtonComponent extends TransactionBaseComponent {
+    transactionEventService: TransactionEventService;
+    service: TransactionService;
+    iconCacheService: IconCacheService;
+    protected dictionaryService: DictionaryService;
+    protected imageService: TransactionImageService;
+    protected changeDetector: ChangeDetectorRef;
+    private _overlayService;
+    private _elementRef;
+    showClass(): boolean;
+    showDialog: boolean;
+    deliveryMethod: DeliveryMethod;
+    deliveryMethods: DeliveryMethod[];
+    constructor(transactionEventService: TransactionEventService, service: TransactionService, iconCacheService: IconCacheService, dictionaryService: DictionaryService, imageService: TransactionImageService, changeDetector: ChangeDetectorRef, _overlayService: OverlayService, _elementRef: ElementRef);
+    showTheDeliveryMethodDialog(event: MouseEvent): Promise<void>;
+    transactionInfoSet(): void;
+}

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

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

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

@@ -1,7 +1,15 @@
 @include export-module('co-transaction-header-delivery-options-layout') {
   .co-transaction-header-delivery-options {
-    .e-listbox-wrapper {
-      border: $tp-transaction-header-delivery-options-border;
+    .transaction-header-delivery-option-checkbox-wrapper {
+      cursor: pointer;
+      padding: $tp-transaction-header-delivery-options-checkbox-padding;
+      margin: $tp-transaction-header-delivery-options-checkbox-margin;
+      border-style: $tp-transaction-header-delivery-options-checkbox-border-style;
+      border-width: $tp-transaction-header-delivery-options-checkbox-border-width;
+      border-radius: $tp-transaction-header-delivery-options-checkbox-border-radius;
+      &.checked {
+
+      }
     }
   }
 }

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

@@ -1 +1,9 @@
-$tp-transaction-header-delivery-options-border: none !default;
+$tp-transaction-header-delivery-options-checkbox-padding: 10px !default;
+$tp-transaction-header-delivery-options-checkbox-margin: 0 0 5px 0 !default;
+$tp-transaction-header-delivery-options-checkbox-border-style: solid !default;
+$tp-transaction-header-delivery-options-checkbox-border-width: 1px !default;
+$tp-transaction-header-delivery-options-checkbox-border-radius: $tp-default-border-radius !default;
+$tp-transaction-header-delivery-options-checkbox-background-color: transparent !default;
+$tp-transaction-header-delivery-options-checkbox-border-color: $tp-color-border !default;
+$tp-transaction-header-delivery-options-checkbox-checked-border-color: $tp-color-action !default;
+$tp-transaction-header-delivery-options-checkbox-checked-background-color: $tp-color-background-selected !default;

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

@@ -1,4 +1,12 @@
 @include export-module('co-transaction-header-delivery-options-theme') {
   .co-transaction-header-delivery-options {
+    .transaction-header-delivery-option-checkbox-wrapper {
+      border-color: $tp-transaction-header-delivery-options-checkbox-border-color;
+      background: $tp-transaction-header-delivery-options-checkbox-background-color;
+      &.checked {
+        border-color: $tp-transaction-header-delivery-options-checkbox-checked-border-color;
+        background: $tp-transaction-header-delivery-options-checkbox-checked-background-color;
+      }
+    }
   }
 }

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

@@ -1,17 +1,15 @@
-import { OnInit } from '@angular/core';
-import { DeliveryMethod } from '@colijnit/transactionapi/build/model/delivery-method.bo';
 import { DeliveryOption } from '@colijnit/transactionapi/build/model/delivery-option.bo';
-import { TextValueContainer } from '../../../model/text-value-container';
 import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
-export declare class TransactionHeaderDeliveryOptionsComponent extends TransactionBaseComponent implements OnInit {
-    set deliveryMethod(value: DeliveryMethod);
-    get deliveryMethod(): DeliveryMethod;
+export declare class DeliveryOptionViewModel {
+    deliveryOption: DeliveryOption;
+    checked: boolean;
+    constructor(deliveryOption: DeliveryOption, checked: boolean);
+}
+export declare class TransactionHeaderDeliveryOptionsComponent extends TransactionBaseComponent {
     showClass(): boolean;
-    deliveryOptionsFromMethod: DeliveryOption[];
-    deliveryOptions: DeliveryOption[];
-    deliveryOptionFields: TextValueContainer;
-    private _deliveryMethod;
-    ngOnInit(): void;
+    deliveryOptionsViewModels: DeliveryOptionViewModel[];
     commitDeliveryOptions(options: string[]): Promise<boolean>;
+    handleCheckboxClicked(option: DeliveryOptionViewModel): void;
+    protected transactionInfoSet(): void;
     private _getDeliveryOptionsForMethod;
 }

package/lib/component/transaction-header-fields/transaction-header-deliverydate-definitive-button/style/_layout.scss

@@ -0,0 +1,26 @@
+@include export-module('co-transaction-header-deliverydate-definitive-button-layout') {
+  .co-transaction-header-deliverydate-definitive-button {
+    width: $tp-transaction-header-deliverydate-definitive-button-size;
+    height: $tp-transaction-header-deliverydate-definitive-button-size;
+    padding: $tp-transaction-header-deliverydate-definitive-button-padding;
+    border-style: $tp-transaction-header-deliverydate-definitive-button-border-style;
+    border-width: $tp-transaction-header-deliverydate-definitive-button-border-width;
+    border-color: $tp-transaction-header-deliverydate-definitive-button-border-color;
+    co-icon {
+      height: 100%;
+      width: auto;
+      aspect-ratio: 1;
+    }
+    &.big {
+      width: $tp-transaction-header-deliverydate-definitive-button-size-big;
+      height: $tp-transaction-header-deliverydate-definitive-button-size-big;
+      padding: $tp-transaction-header-deliverydate-definitive-button-big-padding;
+      border-style: $tp-transaction-header-deliverydate-definitive-button-big-border-style;
+      border-width: $tp-transaction-header-deliverydate-definitive-button-big-border-width;
+      border-color: $tp-transaction-header-deliverydate-definitive-button-big-border-color;
+    }
+    &:not(.read-only) {
+      cursor: pointer;
+    }
+  }
+}

package/lib/component/transaction-header-fields/transaction-header-deliverydate-definitive-button/style/_material-definition.scss

@@ -0,0 +1,13 @@
+$tp-transaction-header-deliverydate-definitive-button-size: 15px !default;
+$tp-transaction-header-deliverydate-definitive-button-padding: 0 !default;
+$tp-transaction-header-deliverydate-definitive-button-border-radius: 0 !default;
+$tp-transaction-header-deliverydate-definitive-button-border-style: solid !default;
+$tp-transaction-header-deliverydate-definitive-button-border-width: 0 !default;
+$tp-transaction-header-deliverydate-definitive-button-border-color: $tp-color-border !default;
+
+$tp-transaction-header-deliverydate-definitive-button-size-big: $tp-item-size !default;
+$tp-transaction-header-deliverydate-definitive-button-big-padding: 8px !default;
+$tp-transaction-header-deliverydate-definitive-button-big-border-radius: 0 !default;
+$tp-transaction-header-deliverydate-definitive-button-big-border-style: solid !default;
+$tp-transaction-header-deliverydate-definitive-button-big-border-width: 1px !default;
+$tp-transaction-header-deliverydate-definitive-button-big-border-color: $tp-color-border !default;

package/lib/component/transaction-header-fields/transaction-header-deliverydate-definitive-button/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-transaction-header-deliverydate-definitive-button-theme') {
+  .co-transaction-header-deliverydate-definitive-button {
+  }
+}

package/lib/component/transaction-header-fields/transaction-header-deliverydate-definitive-button/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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

@@ -0,0 +1,6 @@
+import { TransactionBaseComponent } from '../../core/base/transaction-base.component';
+export declare class TransactionHeaderDeliverydateDefinitiveButtonComponent extends TransactionBaseComponent {
+    big: boolean;
+    showClass(): boolean;
+    changeDeliveryDateDefinitive(event: MouseEvent, definitive: boolean): Promise<void>;
+}

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

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