@colijnit/transaction 12.1.8 → 12.1.9

package/lib/component/checkout/checkout-overview-delivery-edit/checkout-overview-delivery-edit.component.d.ts

@@ -1,10 +1,8 @@
 import { EventEmitter, OnInit } from "@angular/core";
-import { CoDialogComponent, CoGridComponent, FormComponent, FormMasterService } from "@colijnit/corecomponents_v12";
-import { RelationAnyType } from "@colijnit/transactionapi/build/model/relation-any-type";
+import { FormMasterService } from "@colijnit/corecomponents_v12";
 import { Address } from "@colijnit/transactionapi/build/model/address.bo";
 import { GenderType } from "@colijnit/transactionapi/build/enum/gender-type.enum";
 import { Marketing } from "@colijnit/transactionapi/build/model/marketing.bo";
-import { AddressType } from "@colijnit/transactionapi/build/enum/address-type.enum";
 import { DeliveryMethod } from "@colijnit/transactionapi/build/model/delivery-method.bo";
 import { DeliveryOption } from "@colijnit/transactionapi/build/model/delivery-option.bo";
 import { TransactionService } from "../../../service/transaction.service";
@@ -14,30 +12,27 @@ import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/tr
 import { SetTransactionDeliveryOptionsRequest } from "@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo";
 import { Icon } from "../../../enum/icon.enum";
 import { BusinessObjectFactory } from "../../../factory/business-object-factory";
+import { DeliveryType } from "../../../model/delivery-type";
+import { IconCacheService } from "../../../service/icon-cache.service";
 export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     private _dictionaryService;
     private _formMasterService;
     private _boFactory;
     service: TransactionService;
+    iconService: IconCacheService;
     readonly icons: typeof Icon;
-    deliveryForm: FormComponent;
-    locationForm: FormComponent;
-    changeLocationDialog: CoDialogComponent;
-    addressGrid: CoGridComponent<any>;
-    set relation(value: RelationAnyType);
-    get relation(): RelationAnyType;
     deliveryOptionsRequest: SetTransactionDeliveryOptionsRequest;
     transaction: TransactionInfoResponse;
-    relationChange: EventEmitter<RelationAnyType>;
     validSubmit: EventEmitter<void>;
     invalidSubmit: EventEmitter<void>;
     showClass(): boolean;
+    deliveryTypes: DeliveryType[];
     deliveryOptionList: DeliveryOption[];
     deliveryOptions: DeliveryOption[];
     deliveryOptionFields: TextValueContainer;
     deliveryMethods: DeliveryMethod[];
     deliveryMethodFields: TextValueContainer;
-    addLocationPopup: boolean;
+    deliveryTypeIdx: number;
     changeLocationPopup: boolean;
     newAddress: Address;
     preferredDateOptions: TextValueContainer[];
@@ -49,57 +44,25 @@ export declare class CheckoutOverviewDeliveryEditComponent implements OnInit {
     marketingCode: string;
     assemblyCosts: number;
     deliveryCosts: number;
-    showSelectAddressDialog: boolean;
-    showCreateAddressDialog: boolean;
-    editAddressType: AddressType;
-    addresses: Address[];
-    selectedAddress: Address;
-    deliveryAddress: Address;
-    invoiceAddress: Address;
-    deliveryAddressIdx: number;
-    invoiceAddressIdx: number;
-    invoiceAddressSameAsDeliveryAddress: boolean;
-    columns: any[];
     deliveryDateFinal: boolean;
     assemblyDate: Date;
     totalAssemblyTime: string;
     dropshipment: boolean;
-    private _relation;
-    private _addressType;
-    get billingAddress(): Address;
     get deliveryDate(): Date;
     set deliveryDate(value: Date);
     get preferredDeliveryDate(): Date;
     set preferredDeliveryDate(value: Date);
-    newRelationAddress(): Address;
-    constructor(_dictionaryService: DictionaryService, _formMasterService: FormMasterService, _boFactory: BusinessObjectFactory, service: TransactionService);
+    constructor(_dictionaryService: DictionaryService, _formMasterService: FormMasterService, _boFactory: BusinessObjectFactory, service: TransactionService, iconService: IconCacheService);
     ngOnInit(): Promise<void>;
-    showNewAddressDialog(deliveryAddress?: boolean): void;
-    showEditAddressDialog(deliveryAddress?: boolean): void;
-    setIndexDeliveryAddress(idx: number): void;
-    setIndexInvoiceAddress(idx: number): void;
-    editAddress(addr: Address): void;
-    checkSameAddress(checked: boolean): void;
     submit(): boolean;
-    saveNewAddress(address: Address): void;
-    saveAddress(address: Address): void;
-    selectAddress(address?: Address): void;
     handleDeliveryMethodChange(deliveryMethodId: string): Promise<void>;
+    setIndexDeliveryType(idx: number): void;
     selectDeliveryOptionsByDeliveryMethod(deliveryMethod: DeliveryMethod): DeliveryOption[];
     selectDeliveryMethodById(deliveryMethodId: string): DeliveryMethod;
-    changeAddress(addressType: AddressType): void;
-    saveNewLocation(): void;
-    saveLocation(): void;
-    addLocation(): void;
-    updateAddress(address: Address): Promise<void>;
     isDeliveryOptionChecked(deliveryOptionItem: DeliveryOption): boolean;
     changePreferredDeliveryDate2(preferredDateOption: string): void;
     onMarketingCodeChange(marketingCode: string): void;
     onChangeLocationCancelClick(): void;
-    onAddLocationOkClick(): void;
-    handleAddressSelected(rows: any): void;
     private calculateDeliveryCosts;
     private calculateAssemblyCosts;
-    private _addAddress;
-    private _setCountryNameToAddress;
 }

package/lib/component/checkout/checkout-overview-delivery-edit/style/_layout.scss

@@ -4,6 +4,19 @@
   .co-checkout-overview-delivery-edit {
     font-family: $tp-checkout-delivery-font-family;
     font-size: $tp-checkout-delivery-font-size;
+    width: 100%;
+    .delivery-edit-content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: 20px;
+    }
+    co-form {
+      flex: 1;
+    }
+    .co-shopping-cart-preview {
+      min-width: 35%;
+    }
     .checkout-form-wrapper {
       display: flex;
       flex-direction: column;
@@ -42,12 +55,6 @@
       width: 100%;
       overflow: hidden;
     }
-    /*
-    .default-width {
-      width: $tp-radio-button-width;
-    }
-    */
-
     .checkout-data-row {
       display: flex;
       flex-direction: row;

package/lib/component/checkout/checkout-overview-delivery-edit/style/material.scss

@@ -4,5 +4,4 @@
 @import "./theme";
 @import "../../../relation-address-select/style/material";
 @import "../../../relation-address-tile/style/material";
-$cc-co-carousel-3d-navigate-button-width: 40px;
-@import "lib/components/carousel-3d/style/material";
+@import "../../../delivery-type-tile/style/material";

package/lib/component/checkout/checkout-overview-relation-edit/checkout-overview-relation-edit.component.d.ts

@@ -3,19 +3,25 @@ import { RelationAnyType } from "@colijnit/transactionapi/build/model/relation-a
 import { CustomerFullObject } from "@colijnit/transactionapi/build/model/customer-full-object.bo";
 import { ContactOption } from "@colijnit/transactionapi/build/model/contact-option.bo";
 import { RelationNameKind } from "@colijnit/transactionapi/build/enum/relation-name-kind.enum";
+import { AddressType } from "@colijnit/transactionapi/build/enum/address-type.enum";
 import { RelationPrivacySetting } from "@colijnit/transactionapi/build/model/relation-privacy-setting.bo";
 import { GenderType } from "@colijnit/transactionapi/build/enum/gender-type.enum";
 import { TransactionService } from "../../../service/transaction.service";
-import { FormComponent } from "@colijnit/corecomponents_v12";
+import { FormComponent, FormMasterService } from "@colijnit/corecomponents_v12";
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
 import { Address } from "@colijnit/transactionapi/build/model/address.bo";
 import { FormGroup } from "@angular/forms";
-import { FormMasterService } from "@colijnit/corecomponents_v12";
+import { BusinessObjectFactory } from "../../../factory/business-object-factory";
+import { SetTransactionDeliveryOptionsRequest } from "@colijnit/transactionapi/build/model/set-transaction-delivery-options-request.bo";
+import { Icon } from "../../../enum/icon.enum";
 export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     private _service;
     private _formMaster;
+    private _boFactory;
+    readonly icons: typeof Icon;
     relationForm: FormComponent;
     set relation(value: RelationAnyType);
+    deliveryOptionsRequest: SetTransactionDeliveryOptionsRequest;
     validSubmit: EventEmitter<void>;
     invalidSubmit: EventEmitter<void>;
     relationChange: EventEmitter<RelationAnyType>;
@@ -31,6 +37,17 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     relationSuggestions: RelationListObject[];
     showRelationSidebar: boolean;
     inviteToAccount: boolean;
+    addresses: Address[];
+    selectedAddress: Address;
+    deliveryAddress: Address;
+    invoiceAddress: Address;
+    deliveryAddressIdx: number;
+    invoiceAddressIdx: number;
+    invoiceAddressSameAsDeliveryAddress: boolean;
+    editAddressType: AddressType;
+    addressToEdit: Address;
+    showSelectAddressDialog: boolean;
+    showCreateAddressDialog: boolean;
     readonly relType: typeof RelationNameKind;
     readonly genderType: typeof GenderType;
     get relation(): RelationAnyType;
@@ -38,9 +55,18 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     get editFirstAddress(): Address;
     get applicationUser(): boolean;
     private _relation;
-    constructor(_service: TransactionService, _formMaster: FormMasterService);
+    constructor(_service: TransactionService, _formMaster: FormMasterService, _boFactory: BusinessObjectFactory);
     ngOnInit(): Promise<void>;
     submit(): boolean;
+    showNewAddressDialog(deliveryAddress?: boolean): void;
+    showEditAddressDialog(deliveryAddress?: boolean): void;
+    setIndexDeliveryAddress(idx: number): void;
+    setIndexInvoiceAddress(idx: number): void;
+    editAddress(addr: Address): void;
+    checkSameAddress(checked: boolean): void;
+    saveNewAddress(address: Address): void;
+    saveAddress(address: Address): void;
+    selectAddress(address?: Address): void;
     preparePrimaryEmail(): void;
     preparePrimaryPhone(): void;
     loadPrivacySettings(): Promise<void>;
@@ -50,6 +76,7 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     changeGenderType(value: GenderType): void;
     firstNameChange(firstName: string): void;
     familyNameChange(familyName: string): void;
+    checkVisibilitySuggestions(): void;
     onRelationSuggestionClick(relationSuggested: RelationListObject): Promise<void>;
     changePrivacySetting(relationPrivacySetting: RelationPrivacySetting, value: boolean): void;
     showSidebar(): void;
@@ -57,4 +84,5 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit {
     private _initForm;
     private _relationNameChangeHandler;
     private _relationNameChangedHandlerFn;
+    private _setCountryNameToAddress;
 }

package/lib/component/checkout/checkout-overview-relation-edit/style/_layout.scss

@@ -4,6 +4,19 @@
   .co-checkout-overview-relation-edit {
     font-family: $tp-checkout-relation-font-family;
     font-size: $tp-checkout-relation-font-size;
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+    co-form {
+      flex: 1;
+    }
+    .co-carousel-3d {
+      max-width: $tp-checkout-relation-address-carousel-max-width;
+      height: 175px;
+    }
+    .co-shopping-cart-preview {
+      min-width: 35%;
+    }
     .checkout-form-wrapper {
       display: grid;
       grid-template-columns: minmax(170px, 250px) auto;
@@ -65,6 +78,7 @@
     .two-column-grid {
       display: grid;
       grid-template-areas: "firstcolumn secondcolumn";
+      row-gap: $tp-checkout-relation-row-gap;
       .first-column {
         grid-area: firstcolumn;
         grid-row: auto;
@@ -74,6 +88,20 @@
         grid-row: auto;
       }
     }
+    .relation-address-new {
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-weight: bold;
+      .relation-address-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
+    .overview-delivery-invoice-address {
+      overflow: hidden;
+    }
     .suggestions-sidebar {
       position: fixed;
       top: 0;

package/lib/component/checkout/checkout-overview-relation-edit/style/_material-definition.scss

@@ -8,6 +8,7 @@ $tp-checkout-relation-label-sequence-fontsize: $tp-font-size !default;
 $tp-checkout-relation-label-description-fontsize: $tp-font-size-small !default;
 $tp-checkout-relation-label-fontsize: $tp-font-size !default;
 $tp-checkout-relation-label-fontweight: bold !default;
+$tp-checkout-relation-address-carousel-max-width: 500px !default;
 $tp-checkout-relation-suggestion-list-sidebar-width: 300px !default;
 $tp-checkout-relation-suggestion-list-sidebar-background-color: white !default;
 $tp-checkout-relation-suggestion-list-sidebar-boxshadow: -3px 1px 10px rgba(1, 1, 1, 0.1) !default;

package/lib/component/checkout/checkout-overview-relation-edit/style/material.scss

@@ -2,5 +2,9 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+$cc-co-carousel-3d-navigate-button-width: 40px;
 @import "../../../relation-address/style/material";
 @import "../../checkout-relation-suggestions-list/style/material";
+@import "~@colijnit/corecomponents_v12/lib/components/carousel-3d/style/material";
+@import "~@colijnit/corecomponents_v12/lib/components/drop-down-list/style/material";
+@import "~@colijnit/corecomponents_v12/lib/components/input-checkbox/style/material";

package/lib/component/checkout/checkout-relation-suggestions-list/style/_layout.scss

@@ -3,5 +3,6 @@
 @include export-module('co-checkout-relation-suggestions-list-layout') {
   .co-checkout-relation-suggestions-list {
     overflow: auto;
+    z-index: 10;
   }
 }

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

@@ -7,21 +7,30 @@ import { CheckoutOverviewRelationEditComponent } from "./checkout-overview-relat
 import { CheckoutOverviewDeliveryEditComponent } from "./checkout-overview-delivery-edit/checkout-overview-delivery-edit.component";
 import { StepperStepComponent } from "../stepper/component/stepper-step.component";
 import { DialogService } from "../../service/dialog.service";
+import { PaymentComponent } from "../payment/payment.component";
 export declare class CheckoutComponent {
     service: TransactionService;
     private _dictionary;
     private _dialogService;
     stepRelation: StepperStepComponent;
     stepDelivery: StepperStepComponent;
+    stepPayment: StepperStepComponent;
+    stepOverview: StepperStepComponent;
+    stepPay: StepperStepComponent;
     checkoutRelation: CheckoutOverviewRelationEditComponent;
     checkoutDelivery: CheckoutOverviewDeliveryEditComponent;
+    checkoutPayment: PaymentComponent;
+    sellerId: number;
     transactionFinished: EventEmitter<TransactionInfo>;
     showClass(): boolean;
     get userIsApplicationUser(): boolean;
     transaction: TransactionInfoResponse;
     constructor(service: TransactionService, _dictionary: DictionaryService, _dialogService: DialogService);
     handleRelationValidation(): Promise<void>;
-    handleDeliveryValidation(): void;
+    handleDeliveryValidation(): Promise<void>;
+    handlePaymentValidation(): void;
+    handleOverviewValidation(): void;
+    handleFinishStep(): Promise<void>;
     saveRelation(): Promise<boolean>;
     handleSaveDelivery(): Promise<boolean>;
 }

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

@@ -2,5 +2,30 @@
 
 @include export-module('co-checkout-layout') {
   .co-checkout {
+    .co-stepper-content-wrapper {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: $tp-checkout-column-gap;
+      padding: $tp-checkout-padding;
+    }
+    .co-stepper-step {
+      display: flex;
+      flex-basis: 60%;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+    .co-checkout-right-panel {
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-checkout-right-panel-row-gap;
+      flex-basis: $tp-checkout-right-panel-width;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+    .co-checkout-right-panel-relation {
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 }

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

@@ -0,0 +1,5 @@
+$tp-checkout-padding: 30px !default;
+$tp-checkout-column-gap: 10px !default;
+$tp-checkout-right-panel-row-gap: 10px !default;
+$tp-checkout-right-panel-width: 400px !default;
+$tp-checkout-right-panel-width: 50% !default;

package/lib/component/checkout/style/material.scss

@@ -6,3 +6,5 @@
 @import "../checkout-overview-delivery-edit/style/material";
 @import "../../relation-address/style/material";
 @import "../../stepper/style/material";
+@import "../../seller-information/style/material";
+@import "../../payment/style/material";

package/lib/component/confirmation-dialog/style/material.scss

@@ -2,3 +2,4 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+@import "lib/components/co-dialog/style/material";

package/lib/component/core/relation/relation-customer-groups.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  .co-input-combo-box {
+    width: 100%;
+  }
+}

package/lib/component/delivery-type-tile/delivery-type-tile.component.d.ts

@@ -0,0 +1,10 @@
+import { EventEmitter } from "@angular/core";
+import { DeliveryType } from "../../model/delivery-type";
+export declare class DeliveryTypeTileComponent {
+    type: DeliveryType;
+    selected: boolean;
+    selectedChange: EventEmitter<boolean>;
+    showClass(): boolean;
+    deliveryTypeIdx: number;
+    setIndexDeliveryType(index: number): void;
+}

package/lib/component/delivery-type-tile/delivery-type-tile.module.d.ts

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

package/lib/component/delivery-type-tile/style/_layout.scss

@@ -0,0 +1,35 @@
+@import "../../../style/mixin";
+
+@include export-module('co-delivery-type-tile-layout') {
+  .co-delivery-type-tile {
+    display: flex;
+    position: relative;
+    font-family: $tp-delivery-type-tile-font-family;
+    font-size: $tp-delivery-type-tile-font-size;
+    .delivery-type-content-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      overflow: hidden;
+    }
+    .delivery-type-description {
+      font-family: $tp-delivery-type-tile-description-font-family;
+      font-size: $tp-delivery-type-tile-description-font-size;
+      font-weight: $tp-delivery-type-tile-description-font-weight;
+    }
+    .delivery-type-icon {
+      height: 65px;
+      width: 65px;
+      icon {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .delivery-type-price {
+      font-family: $tp-delivery-type-tile-price-font-family;
+      font-size: $tp-delivery-type-tile-price-font-size;
+      font-weight: $tp-delivery-type-tile-price-font-weight;
+    }
+  }
+}

package/lib/component/delivery-type-tile/style/_material-definition.scss

@@ -0,0 +1,16 @@
+$tp-delivery-type-tile-font-family: $tp-font-family !default;
+$tp-delivery-type-tile-font-size: $tp-font-size !default;
+$tp-delivery-type-tile-border: 2px solid !default;
+$tp-delivery-type-tile-border-radius: 5px !default;
+$tp-delivery-type-tile-padding: 10px !default;
+$tp-delivery-type-tile-background-color: white !default;
+$tp-delivery-type-tile-border-color: $tp-color-border !default;
+$tp-delivery-type-tile-selected-background-color: #f1fcff !default;
+$tp-delivery-type-tile-selected-border-color: #0084de !default;
+$tp-delivery-type-tile-icon-width: 20px !default;
+$tp-delivery-type-tile-description-font-family: $tp-font-family !default;
+$tp-delivery-type-tile-description-font-size: $tp-font-size !default;
+$tp-delivery-type-tile-description-font-weight: bold !default;
+$tp-delivery-type-tile-price-font-family: $tp-font-family !default;
+$tp-delivery-type-tile-price-font-size: $tp-font-size-big !default;
+$tp-delivery-type-tile-price-font-weight: bold !default;

package/lib/component/delivery-type-tile/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('co-select-delivery-type-theme') {
+  .co-delivery-type-tile {
+  }
+}

package/lib/component/delivery-type-tile/style/material.scss

@@ -0,0 +1,5 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../tile/style/material";

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

@@ -0,0 +1,18 @@
+import { OnInit } from "@angular/core";
+import { Icon } from "../../enum/icon.enum";
+import { TransactionService } from "../../service/transaction.service";
+export declare class PaymentComponent implements OnInit {
+    private _transactionService;
+    readonly icons: typeof Icon;
+    amount: number;
+    showClass(): boolean;
+    paymentMethodIdx: number;
+    paymentMethods: {
+        icon: Icon;
+        description: string;
+    }[];
+    cashRegisters: any[];
+    constructor(_transactionService: TransactionService);
+    ngOnInit(): void;
+    private _getCashRegisters;
+}

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

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

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

@@ -0,0 +1,54 @@
+@import "../../../style/mixin";
+
+@include export-module('co-payment-layout') {
+  .co-payment {
+    font-family: $tp-payment-font-family;
+    font-size: $tp-payment-font-size;
+    .co-tile-wrapper {
+      min-width: $tp-payment-tile-width;
+      min-height: $tp-payment-tile-height;
+      width: $tp-payment-tile-width;
+      height: $tp-payment-tile-height;
+    }
+    .payment-wrapper {
+      display: flex;
+      flex-direction: column;
+      row-gap: $tp-payment-row-gap;
+    }
+    .payment-methods-header {
+      display: flex;
+      column-gap: 3px;
+    }
+    .payment-header-title {
+      font-family: $tp-payment-header-font-family;
+      font-size: $tp-payment-header-font-size;
+      font-weight: $tp-payment-header-font-weight;
+      &.extra {
+
+      }
+    }
+    .payment-methods {
+      display: flex;
+      flex-direction: row;
+      column-gap: 5px;
+      flex-wrap: wrap;
+    }
+    .payment-to-pay {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      row-gap: $tp-payment-row-gap;
+    }
+    .payment-amount {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: $tp-payment-amount-border;
+      font-family: $tp-payment-amount-font-family;
+      font-size: $tp-payment-amount-font-size;
+      font-weight: $tp-payment-amount-font-weight;
+      padding: $tp-payment-amount-padding;
+      border-radius: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+$tp-payment-font-family: $tp-font-family !default;
+$tp-payment-font-size: $tp-font-size !default;
+$tp-payment-tile-width: $tp-tile-min-width !default;
+$tp-payment-tile-height: $tp-tile-min-height !default;
+$tp-payment-header-font-family: $tp-font-family !default;
+$tp-payment-header-font-size: $tp-font-size !default;
+$tp-payment-header-font-weight: bold !default;
+$tp-payment-header-extra-font-color: $tp-color-colijn-orange !default;
+$tp-payment-row-gap: 20px !default;
+$tp-payment-amount-font-family: $tp-font-family !default;
+$tp-payment-amount-font-size: 32px !default;
+$tp-payment-amount-font-weight: bold !default;
+$tp-payment-amount-padding: 25px 90px !default;
+$tp-payment-amount-color: rgba(0, 0, 0, 0.5) !default;
+$tp-payment-amount-border: 1px solid !default;
+$tp-payment-amount-border-color: $tp-color-border !default;
+$tp-payment-amount-background-color: #dedede5c !default;

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

@@ -0,0 +1,16 @@
+@import "../../../style/mixin";
+
+@include export-module('co-payment-theme') {
+  .co-payment {
+    .payment-header-title {
+      &.extra {
+        color: $tp-color-colijn-orange;
+      }
+    }
+    .payment-amount {
+      color: $tp-payment-amount-color;
+      border-color: $tp-payment-amount-border-color;
+      background-color: $tp-payment-amount-background-color;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../payment-tile/style/material";

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

@@ -0,0 +1,9 @@
+import { EventEmitter } from "@angular/core";
+import { Icon } from "../../enum/icon.enum";
+export declare class PaymentTileComponent {
+    selected: boolean;
+    icon: Icon;
+    description: string;
+    selectedChange: EventEmitter<boolean>;
+    showClass(): boolean;
+}

package/lib/component/payment-tile/payment-tile.module.d.ts

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

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

@@ -0,0 +1,22 @@
+@import "../../../style/mixin";
+
+@include export-module('co-payment-tile-layout') {
+  .co-payment-tile {
+    display: flex;
+    .payment-tile-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+    .payment-tile-description {
+    }
+    .payment-tile-icon {
+      display: block;
+      height: 80%;
+      width: 50%;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('co-payment-tile') {
+  .co-payment-tile {
+  }
+}

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

@@ -0,0 +1,5 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../tile/style/material";