@colijnit/transaction 12.1.6 → 12.1.9

package/lib/component/checkout/checkout-login/checkout-login.component.scss

@@ -0,0 +1,35 @@
+.users {
+  display: flex;
+  flex-direction: row;
+
+  co-form {
+    width: 50%;
+  }
+}
+
+.existing-user {
+  padding-right: 2rem;
+  margin-bottom: 0;
+  border-right: 1px solid #aaa;
+}
+
+.new-user {
+  padding-left: 2rem;
+}
+
+.new-user-e-mail {
+  padding-top: 2.6rem;
+}
+
+.boxedbottom {
+  margin-bottom: .5rem;
+}
+
+.login-button {
+  display:flex;
+  margin-top: 10px;
+
+  co-button {
+    margin-right: 10px;
+  }
+}

package/{app → lib}/component/checkout/checkout-overview-delivery-edit/checkout-overview-delivery-edit.component.d.ts

@@ -1,39 +1,42 @@
-import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnInit } from "@angular/core";
-import { CoDialogComponent, CoGridComponent, FormComponent } from "@colijnit/corecomponents_v12";
-import { RelationAnyType } from "@colijnit/transactionapi/build/model/relation-any-type";
+import { EventEmitter, OnInit } from "@angular/core";
+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";
 import { TextValueContainer } from "../../../model/text-value-container";
-import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
 import { DictionaryService } from "../../../service/dictionary.service";
-export declare class CheckoutOverviewDeliveryEditComponent implements OnInit, AfterViewInit {
-    private cdr;
+import { TransactionInfoResponse } from "@colijnit/transactionapi/build/model/transaction-info-response.bo";
+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;
-    readonly deliveryAddressType: AddressType;
-    readonly billingAddressType: AddressType;
-    deliveryForm: FormComponent;
-    locationForm: FormComponent;
-    changeLocationDialog: CoDialogComponent;
-    addressGrid: CoGridComponent<any>;
-    relation: RelationAnyType;
-    transaction: TransactionInfo;
+    iconService: IconCacheService;
+    readonly icons: typeof Icon;
+    deliveryOptionsRequest: SetTransactionDeliveryOptionsRequest;
+    transaction: TransactionInfoResponse;
     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[];
+    addressToEdit: Address;
     preferredDate: Date;
     gender: GenderType;
     marketing: Marketing[];
@@ -41,41 +44,25 @@ export declare class CheckoutOverviewDeliveryEditComponent implements OnInit, Af
     marketingCode: string;
     assemblyCosts: number;
     deliveryCosts: number;
-    addresses: Address[];
-    selectedAddress: Address;
-    columns: any[];
     deliveryDateFinal: boolean;
     assemblyDate: Date;
     totalAssemblyTime: string;
     dropshipment: boolean;
-    private _addressType;
-    get billingAddress(): Address;
-    get deliveryAddress(): 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, iconService: IconCacheService);
     ngOnInit(): Promise<void>;
-    ngAfterViewInit(): void;
-    constructor(cdr: ChangeDetectorRef, _dictionaryService: DictionaryService, service: TransactionService);
     submit(): boolean;
-    onDeliveryMethodChange(deliveryMethodId: string): Promise<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>;
+    selectDeliveryMethodById(deliveryMethodId: string): DeliveryMethod;
     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

@@ -0,0 +1,98 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-checkout-overview-delivery-edit-layout') {
+  .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;
+      row-gap: 50px;
+    }
+    .checkout-section-wrapper {
+      display: flex;
+      flex-direction: row;
+    }
+    .checkout-label-column {
+      font-family: $tp-checkout-delivery-label-column-font-family;
+      font-size: $tp-checkout-delivery-label-fontsize;
+      display: flex;
+      flex-direction: column;
+      grid-area: columnlabel;
+      grid-column-start: 1;
+      grid-row: auto;
+      align-self: baseline;
+      width: 170px;
+      .label-description {
+        margin-top: 10px;
+        font-size: $tp-checkout-delivery-label-description-fontsize;
+      }
+      .label {
+        font-weight: $tp-checkout-delivery-label-fontweight;
+      }
+    }
+    .co-carousel-3d {
+      max-width: $tp-checkout-delivery-address-carousel-max-width;
+      height: 175px;
+    }
+    .checkout-data-column {
+      grid-area: columndata;
+      grid-column-start: 2;
+      grid-row: auto;
+      width: 100%;
+      overflow: hidden;
+    }
+    .checkout-data-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: $tp-checkout-default-padding;
+      margin-bottom: $tp-checkout-delivery-row-gap;
+      > :not(.default-width) {
+        flex: 1;
+      }
+    }
+    .collapseable {
+      overflow: hidden;
+    }
+    .two-column-grid {
+      display: grid;
+      grid-template-areas: "firstcolumn secondcolumn";
+      .first-column {
+        grid-area: firstcolumn;
+        grid-row: auto;
+      }
+      .second-column {
+        grid-area: secondcolumn;
+        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;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+$tp-checkout-delivery-font-family: $tp-font-family !default;
+$tp-checkout-delivery-font-size: $tp-font-size !default;
+$tp-checkout-delivery-label-column-font-family: $tp-checkout-relation-font-family !default;
+$tp-checkout-delivery-first-name-width: 200px !default;
+$tp-checkout-delivery-row-gap: 10px !default;
+$tp-checkout-delivery-address-carousel-max-width: 500px !default;
+$tp-checkout-delivery-prefix-width: 50px !default;
+$tp-checkout-delivery-label-sequence-fontsize: $tp-font-size !default;
+$tp-checkout-delivery-label-description-fontsize: $tp-font-size-small !default;
+$tp-checkout-delivery-label-fontsize: $tp-font-size !default;
+$tp-checkout-delivery-label-fontweight: bold !default;
+$tp-checkout-delivery-link-color: $tp-color-action !default;

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

@@ -0,0 +1,17 @@
+@import "../../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('co-checkout-overview-delivery-edit-theme') {
+  .co-checkout-overview-delivery-edit {
+    .checkout-label-column {
+    }
+    .relation-address-new {
+      .relation-address-icon {
+        [fill] {
+          fill: $tp-checkout-delivery-link-color;
+        }
+      }
+      color: $tp-checkout-delivery-link-color;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "../../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../../relation-address-select/style/material";
+@import "../../../relation-address-tile/style/material";
+@import "../../../delivery-type-tile/style/material";

package/{app → lib}/component/checkout/checkout-overview-relation-edit/checkout-overview-relation-edit.component.d.ts

@@ -1,26 +1,32 @@
-import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnInit } from "@angular/core";
+import { EventEmitter, OnInit } from "@angular/core";
 import { RelationAnyType } from "@colijnit/transactionapi/build/model/relation-any-type";
-import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
 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 { CoSidebarComponent } from "@colijnit/corecomponents_v12";
 import { Address } from "@colijnit/transactionapi/build/model/address.bo";
-export declare class CheckoutOverviewRelationEditComponent implements OnInit, AfterViewInit {
-    private _changeDetector;
-    private _transactionService;
+import { FormGroup } from "@angular/forms";
+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;
-    relationSidebar: CoSidebarComponent;
     set relation(value: RelationAnyType);
-    transaction: TransactionInfo;
+    deliveryOptionsRequest: SetTransactionDeliveryOptionsRequest;
     validSubmit: EventEmitter<void>;
     invalidSubmit: EventEmitter<void>;
-    testje: boolean;
+    relationChange: EventEmitter<RelationAnyType>;
+    showClass(): boolean;
+    formRelation: FormGroup;
     dateOfBirth: Date;
     accountPassword: string;
     hide: boolean;
@@ -31,18 +37,36 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit, Af
     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;
     get relationAsCustomer(): CustomerFullObject;
     get editFirstAddress(): Address;
-    get firstAddress(): Address;
     get applicationUser(): boolean;
-    ngOnInit(): Promise<void>;
-    ngAfterViewInit(): void;
     private _relation;
-    constructor(_changeDetector: ChangeDetectorRef, _transactionService: TransactionService);
+    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>;
@@ -52,10 +76,13 @@ export declare class CheckoutOverviewRelationEditComponent implements OnInit, Af
     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;
     hideSidebar(): void;
+    private _initForm;
     private _relationNameChangeHandler;
     private _relationNameChangedHandlerFn;
+    private _setCountryNameToAddress;
 }

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

@@ -0,0 +1,125 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-checkout-overview-relation-edit-layout') {
+  .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;
+      grid-template-areas: "columnlabel columndata";
+      grid-row-gap: 50px;
+    }
+    .checkout-label-column {
+      font-family: $tp-checkout-relation-label-column-font-family;
+      font-size: $tp-checkout-relation-label-fontsize;
+      display: flex;
+      flex-direction: column;
+      grid-area: columnlabel;
+      grid-column-start: 1;
+      grid-row: auto;
+      align-self: baseline;
+      .label-description {
+        margin-top: 10px;
+        font-size: $tp-checkout-relation-label-description-fontsize;
+      }
+      .label {
+        font-weight: $tp-checkout-relation-label-fontweight;
+      }
+    }
+
+    .checkout-data-column {
+      grid-area: columndata;
+      grid-column-start: 2;
+      grid-row: auto;
+    }
+    .default-width {
+      width: $tp-radio-button-width;
+    }
+    .checkout-first-name {
+      flex-basis: $tp-checkout-relation-first-name-width;
+      flex-grow: 1;
+    }
+    .checkout-prefix-name {
+      flex-basis: $tp-checkout-relation-prefix-width;
+    }
+    .checkout-last-name {
+      flex-shrink: 1;
+      flex-grow: 3;
+      min-width: 200px;
+    }
+
+    .checkout-data-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: $tp-checkout-default-padding;
+      margin-bottom: $tp-checkout-relation-row-gap;
+      > :not(.default-width) {
+        flex: 1;
+      }
+    }
+    .collapseable {
+      overflow: hidden;
+    }
+    .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;
+      }
+      .second-column {
+        grid-area: secondcolumn;
+        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;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      width: $tp-checkout-relation-suggestion-list-sidebar-width;
+      height: 100%;
+      background: $tp-checkout-relation-suggestion-list-sidebar-background-color;
+      box-shadow: $tp-checkout-relation-suggestion-list-sidebar-boxshadow;
+    }
+    .relation-sidebar-header {
+      padding: $tp-checkout-relation-suggestion-list-label-padding;
+      margin: $tp-checkout-relation-suggestion-list-label-margin;
+    }
+    .checkout-label-h3 {
+      font-size: $tp-checkout-relation-suggestion-list-label-fontsize;
+      font-weight: $tp-checkout-relation-suggestion-list-label-fontweight;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+$tp-checkout-relation-font-family: $tp-font-family !default;
+$tp-checkout-relation-font-size: $tp-font-size !default;
+$tp-checkout-relation-label-column-font-family: $tp-checkout-relation-font-family !default;
+$tp-checkout-relation-first-name-width: 200px !default;
+$tp-checkout-relation-row-gap: 10px !default;
+$tp-checkout-relation-prefix-width: 50px !default;
+$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;
+$tp-checkout-relation-suggestion-list-label-fontsize: $tp-font-size !default;
+$tp-checkout-relation-suggestion-list-label-fontweight: bold !default;
+$tp-checkout-relation-suggestion-list-label-padding: 5px !default;
+$tp-checkout-relation-suggestion-list-label-margin: 5px !default;

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

@@ -0,0 +1,9 @@
+@import "../../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('co-checkout-overview-relation-edit-theme') {
+  .co-checkout-overview-relation-edit {
+    .checkout-label-column {
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+@import "../../../../style/variables";
+@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/{app → lib}/component/checkout/checkout-relation-suggestions-list/checkout-relation-suggestions-list.component.d.ts

@@ -1,8 +1,7 @@
 import { EventEmitter } from "@angular/core";
 import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
-import { Direction } from "../../../enum/direction.enum";
 export declare class CheckOutRelationSuggestionsListComponent {
     suggestions: RelationListObject[];
-    arrowDirection: Direction;
-    suggestionButtonClick: EventEmitter<RelationListObject>;
+    suggestionSelected: EventEmitter<RelationListObject>;
+    showClass(): boolean;
 }

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

@@ -0,0 +1,8 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-checkout-relation-suggestions-list-layout') {
+  .co-checkout-relation-suggestions-list {
+    overflow: auto;
+    z-index: 10;
+  }
+}

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

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-checkout-relation-suggestions-list-theme') {
+  .co-checkout-relation-suggestions-list {
+  }
+}

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

@@ -0,0 +1,5 @@
+@import "../../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../checkout-relation-suggestions-list-item/style/material";

package/lib/component/checkout/checkout-relation-suggestions-list-item/checkout-relation-suggestions-list-item.component.d.ts

@@ -0,0 +1,8 @@
+import { EventEmitter } from "@angular/core";
+import { RelationListObject } from "@colijnit/transactionapi/build/model/relation-list-object.bo";
+export declare class CheckOutRelationSuggestionsListItemComponent {
+    suggestion: RelationListObject;
+    selectionSelected: EventEmitter<RelationListObject>;
+    showClass(): boolean;
+    handleClick(event: MouseEvent): void;
+}

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

@@ -0,0 +1,34 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-checkout-relation-suggestions-list-item-layout') {
+  .co-checkout-relation-suggestions-list-item {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding: $tp-checkout-suggestions-padding;
+    background-color: $tp-checkout-suggestions-background-color;
+    border: 1px solid $tp-checkout-suggestions-border-color;
+    border-radius: 5px;
+    margin: 5px;
+    max-width: $tp-checkout-suggestions-max-width;
+
+    .name {
+      font-weight: $tp-checkout-suggestions-name-fontweight;
+      font-size: $tp-checkout-suggestions-name-fontsize;
+    }
+
+    .email, .address, .phone {
+      color: $tp-color-text-grey;
+      font-size: $tp-checkout-suggestions-fontsize;
+    }
+
+    &:hover {
+      background-color: $tp-checkout-suggestions-hover-color;
+      co-button.popup {
+        visibility: visible;
+      }
+    }
+  }
+}

package/lib/component/checkout/checkout-relation-suggestions-list-item/style/_material-definition.scss

@@ -0,0 +1,8 @@
+$tp-checkout-suggestions-padding: 11px !default;
+$tp-checkout-suggestions-background-color: $tp-color-light !default;
+$tp-checkout-suggestions-border-color: $tp-color-light-accent !default;
+$tp-checkout-suggestions-max-width: 250px !default;
+$tp-checkout-suggestions-hover-color: $tp-color-hover !default;
+$tp-checkout-suggestions-name-fontsize: $tp-font-size !default;
+$tp-checkout-suggestions-fontsize: $tp-font-size !default;
+$tp-checkout-suggestions-name-fontweight: bold !default;

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

@@ -0,0 +1,6 @@
+@import "../../../../style/mixin";
+
+@include export-module('co-checkout-relation-suggestions-list-item-theme') {
+  .co-checkout-relation-suggestions-list-item {
+  }
+}

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

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