@colijnit/transaction 12.1.6 → 12.1.7

package/app/app.component.scss

@@ -0,0 +1,39 @@
+$size-header-height: 60px;
+$distance-medium: 11px;
+$xs-width: 600px;
+
+@mixin screen-xs {
+  @media only screen and (max-width: $xs-width - 1) {
+    @content;
+  }
+}
+
+.overlay-shopping-cart {
+ // position: absolute;
+  top: $size-header-height;
+  right: $distance-medium;
+//  border: 3px solid #DBE3E8;
+//  background-color: white;
+//  height: 0;
+//  min-width: 600px;
+//  max-width: 90vw;
+//
+  &.opened {
+    height: 80vh;
+    transition: height 600ms ease-in-out;
+  }
+
+  @include screen-xs() {
+    width: 100%;
+  }
+}
+
+
+.constraint {
+  //position: relative;
+  //min-width: 18.25rem;
+  //max-width: 76rem;
+  //padding-right: 1rem;
+  //padding-left: 1rem;
+  //margin: 0 auto;
+}

package/app/component/checkout/checkout/checkout.component.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from "@angular/core";
 import { StepperSelectionEvent } from "@angular/cdk/stepper";
 import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
 import { CustomerFullObject } from "@colijnit/transactionapi/build/model/customer-full-object.bo";
@@ -10,6 +11,7 @@ export declare class CheckoutComponent {
     promptService: PromptService;
     overview: CheckoutOverviewComponent;
     stepper: MatStepper;
+    transactionFinished: EventEmitter<TransactionInfo>;
     get relation(): CustomerFullObject;
     get transaction(): TransactionInfo;
     get canContinue(): boolean;

package/app/component/checkout/checkout/checkout.component.scss

@@ -0,0 +1,137 @@
+//@import "src/style/variables";
+//@import "src/style/styles";
+//
+//.checkout-viewport {
+//  //max-width:60%;
+//  //margin-left:20%;
+//}
+//
+//
+////.mat-label {
+////  font-family: Montserrat, Arial, Helvetica, sans-serif;
+////}
+//
+//
+//.default-flex-row {
+//  flex-direction: row;
+//  box-sizing: border-box;
+//  column-gap: 20px;
+//  display: flex;
+//}
+//
+//.default-flex-column {
+//  display: flex;
+//  flex-direction: column;
+//  width: 200px;
+//}
+//
+//.checkout-overview h2 {
+//  font-size: 18px;
+//  font-weight: bold;
+//}
+//
+//.checkout-overview h3 {
+//  font-size: 15px;
+//}
+//
+//mat-horizontal-stepper {
+//  position: sticky;
+//  top: 0;
+//  z-index: 30;
+//}
+//
+//::ng-deep .mat-horizontal-content-container {
+//  display: none;
+//}
+//
+//.step-content-customer {
+//  background-color: white;
+//  @extend %flex-column;
+//  @extend %padding-big;
+//}
+//
+//.step-content-delivery {
+//  background-color: white;
+//  @extend %flex-row;
+//  //  @extend %flex-center;
+//  @extend %padding-big;
+//}
+//
+//::ng-deep .step-wrapper {
+//  width: auto; //360px;
+//  background: rgba(255, 255, 255, 0.25);
+//
+//  button-colijn {
+//    margin-top: 20px;
+//  }
+//
+//  &.payment {
+//    align-items: center !important;
+//    justify-content: left !important;
+//  }
+//}
+//
+//.overview-wrapper {
+//}
+//
+//.overview-header {
+//  background: rgba(255, 255, 255, 0.25);
+//  border-top-left-radius: 5px;
+//  border-top-right-radius: 5px;
+//
+//  .overview-step-nr {
+//    @include square($tp-item-size-very-small);
+//    @extend %circle;
+//    @extend %action-background;
+//    text-align: center;
+//    font-weight: bold;
+//  }
+//}
+//
+//.overview-body {
+//  @extend %padding-very-big;
+//  border-bottom-left-radius: 5px;
+//  border-bottom-right-radius: 5px;
+//
+//  .contact-option-value {
+//    align-self: center;
+//  }
+//}
+//
+//.overview-header-label {
+//  font-weight: bold;
+//}
+//
+//.overview-label {
+//  font-weight: bold;
+//}
+//
+//ul.cart-buttons {
+//  display: flex;
+//  justify-content: space-between;
+//  @extend %margin-vertical-big;
+//  flex-wrap: nowrap;
+//  list-style-type: none;
+//
+//  > li {
+//    display: flex;
+//    align-items: center;
+//    justify-content: center;
+//    flex-grow: 0;
+//    flex-shrink: 0;
+//    width: fit-content;
+//    @extend %padding-horizontal-medium;
+//    height: 40px;
+//    background-color: $tp-color-less-light;
+//    cursor: pointer;
+//    font-size: 15px;
+//    color: $tp-color-action;
+//    border: 1px solid $tp-color-border;
+//    border-radius: 5px;
+//    opacity: 1;
+//
+//    a {
+//      white-space: nowrap;
+//    }
+//  }
+//}

package/app/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/component/checkout/checkout-overview-delivery-edit/checkout-overview-delivery-edit.component.scss

@@ -0,0 +1,3 @@
+.container-button-change-address {
+  margin-top: 5px;
+}

package/app/component/checkout/checkout-overview-relation-address/checkout-overview-relation-address.component.d.ts

@@ -9,6 +9,7 @@ export declare class CheckoutOverviewRelationAddressComponent implements OnInit
     label: string;
     set address(address: Address);
     get address(): Address;
+    showClass(): boolean;
     countries: Country[];
     fields: Object;
     constructor(_dictionary: DictionaryService, _connector: IOneConnectorAdapterService);

package/app/component/checkout/checkout-overview-relation-address/style/_layout.scss

@@ -0,0 +1,19 @@
+@import "../../../../../style/mixin";
+
+@include export-module('co-checkout-overview-relation-address-layout') {
+  .co-checkout-overview-relation-address {
+    font-family: $tp-checkout-font-family;
+    .checkout-data-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      row-gap: $tp-checkout-default-padding;
+      column-gap: $tp-checkout-default-padding;
+      &.default {
+        .form-input {
+          flex: 1;
+        }
+      }
+    }
+  }
+}

package/app/component/checkout/checkout-overview-relation-address/style/_theme.scss

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

package/app/component/checkout/checkout-overview-relation-address/style/material.scss

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

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

@@ -9,17 +9,16 @@ import { GenderType } from "@colijnit/transactionapi/build/enum/gender-type.enum
 import { TransactionService } from "../../../service/transaction.service";
 import { FormComponent } 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;
     relationForm: FormComponent;
-    relationSidebar: CoSidebarComponent;
     set relation(value: RelationAnyType);
     transaction: TransactionInfo;
     validSubmit: EventEmitter<void>;
     invalidSubmit: EventEmitter<void>;
+    showClass(): boolean;
     testje: boolean;
     dateOfBirth: Date;
     accountPassword: string;

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

@@ -0,0 +1,92 @@
+@import "../../../../../style/mixin";
+
+@include export-module('co-checkout-overview-relation-edit-layout') {
+  .co-checkout-overview-relation-edit {
+    font-family: $tp-checkout-font-family;
+    font-size: $tp-font-size;
+    .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-label-column-font-family;
+      font-size: $tp-checkout-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-label-description-fontsize;
+      }
+      .label {
+        font-weight: $tp-checkout-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-first-name-width;
+      flex-grow: 1;
+    }
+    .checkout-prefix-name {
+      flex-basis: $tp-checkout-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;
+      row-gap: $tp-checkout-default-padding;
+      column-gap: $tp-checkout-default-padding;
+    }
+    .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;
+      }
+    }
+    .suggestions-sidebar {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: $tp-checkout-suggestion-list-sidebar-width;
+      height: 100%;
+      background: $tp-checkout-suggestion-list-sidebar-background-color;
+      box-shadow: $tp-checkout-suggestion-list-sidebar-boxshadow;
+    }
+    .relation-sidebar-header {
+      padding: $tp-checkout-suggestion-list-label-padding;
+      margin: $tp-checkout-suggestion-list-label-margin;
+    }
+    .checkout-label-h3 {
+      font-size: $tp-checkout-suggestion-list-label-fontsize;
+      font-weight: $tp-checkout-suggestion-list-label-fontweight;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+$tp-checkout-font-family: $tp-font-family !default;
+$tp-checkout-label-column-font-family: $tp-checkout-font-family !default;
+$tp-checkout-first-name-width: 200px !default;
+$tp-checkout-prefix-width: 50px !default;
+$tp-checkout-label-sequence-fontsize: $tp-font-size !default;
+$tp-checkout-label-description-fontsize: $tp-font-size-small !default;
+$tp-checkout-label-fontsize: $tp-font-size !default;
+$tp-checkout-label-fontweight: bold !default;
+$tp-checkout-suggestion-list-sidebar-width: 300px !default;
+$tp-checkout-suggestion-list-sidebar-background-color: white !default;
+$tp-checkout-suggestion-list-sidebar-boxshadow: -3px 1px 10px rgba(1, 1, 1, 0.1) !default;
+$tp-checkout-suggestion-list-label-fontsize: $tp-font-size !default;
+$tp-checkout-suggestion-list-label-fontweight: bold !default;
+$tp-checkout-suggestion-list-label-padding: 5px !default;
+$tp-checkout-suggestion-list-label-margin: 5px !default;

package/app/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/app/component/checkout/checkout-overview-relation-edit/style/material.scss

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

package/app/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/app/component/checkout/checkout-relation-suggestions-list/style/_layout.scss

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

package/app/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/app/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/app/component/checkout/checkout-relation-suggestions-list-item/checkout-relation-suggestions-list-item.component.d.ts

@@ -1,12 +1,8 @@
-import { EventEmitter, OnInit } from "@angular/core";
+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 CheckOutRelationSuggestionsListItemComponent implements OnInit {
+export declare class CheckOutRelationSuggestionsListItemComponent {
     suggestion: RelationListObject;
-    set arrowDirection(arrowDirection: Direction);
-    buttonClick: EventEmitter<MouseEvent>;
-    private _arrowDirection;
-    constructor();
-    ngOnInit(): void;
-    private _updateIcon;
+    selectionSelected: EventEmitter<RelationListObject>;
+    showClass(): boolean;
+    handleClick(event: MouseEvent): void;
 }

package/app/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/app/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/app/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/app/component/checkout/checkout-relation-suggestions-list-item/style/material.scss

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

package/app/component/checkout/checkout-transaction/checkout-transaction.component.d.ts

@@ -1,8 +1,11 @@
 import { CheckoutComponent } from "../checkout/checkout.component";
+import { EventEmitter } from "@angular/core";
 import { TransactionService } from "../../../service/transaction.service";
+import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
 export declare class CheckoutTransactionComponent {
     service: TransactionService;
     checkout: CheckoutComponent;
+    transactionFinished: EventEmitter<TransactionInfo>;
     get canPrevious(): boolean;
     get canContinue(): boolean;
     get started(): boolean;

package/app/component/checkout/checkout-transaction/checkout-transaction.component.scss

@@ -0,0 +1,11 @@
+.checkout-transaction-viewport {
+  //max-width:60%;
+  //margin-left:20%;
+}
+
+.checkout-row-end {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  justify-content: flex-end;
+}

package/app/component/checkout/ione-checkout.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, OnDestroy, OnInit } from "@angular/core";
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
 import { OptionsService } from "../../service/options.service";
 import { TransactionService } from "../../service/transaction.service";
 import { DictionaryService } from "../../service/dictionary.service";
@@ -6,6 +6,7 @@ import { IOneConnectorAdapterService } from "../../service/ione-connector-adapte
 import { TransactionEventService } from "../../service/transaction-event.service";
 import { PromptService } from "@colijnit/corecomponents_v12";
 import { CheckoutLoginComponent } from "./checkout-login/checkout-login.component";
+import { TransactionInfo } from "@colijnit/transactionapi/build/model/transaction-info.bo";
 export declare class IoneCheckoutComponent implements OnInit, OnDestroy {
     _changeDetector: ChangeDetectorRef;
     _optionsService: OptionsService;
@@ -18,6 +19,7 @@ export declare class IoneCheckoutComponent implements OnInit, OnDestroy {
     checkoutLogin: CheckoutLoginComponent;
     set options(value: any);
     set applicationUser(value: boolean);
+    transactionFinished: EventEmitter<TransactionInfo>;
     get transactionNr(): number;
     get applicationUser(): boolean;
     upAndLoaded: boolean;

package/app/component/core/base/default-ok-cancel-buttons.component.d.ts

@@ -1,13 +1,13 @@
 import { EventEmitter } from "@angular/core";
 import { ButtonComponent } from "@colijnit/corecomponents_v12";
 export declare class DefaultOkCancelButtonsComponent {
+    okButtonComp: ButtonComponent;
     okDisabled: boolean;
     hideCancel: boolean;
     hideOk: boolean;
     okLabel: string;
     okClick: EventEmitter<MouseEvent>;
     cancelClick: EventEmitter<MouseEvent>;
-    okButtonComp: ButtonComponent;
-    constructor();
+    showClass(): boolean;
     onOkClick(event: MouseEvent): void;
 }

package/app/component/core/base/style/_layout.scss

@@ -0,0 +1,7 @@
+@import "../../../../../style/mixin";
+
+@include export-module('co-default-ok-cancel-buttons-layout') {
+  .co-default-ok-cancel-buttons {
+    display: flex;
+  }
+}

package/app/component/core/base/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../../../style/mixin";
+
+@include export-module('co-default-ok-cancel-buttons-theme') {
+  .co-default-ok-cancel-buttons {
+  }
+}

package/app/component/core/base/style/material.scss

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

package/app/component/core/characteristic-answer/characteristic-answer.component.scss

@@ -0,0 +1,18 @@
+@import "src/style/variables";
+@import "src/style/styles";
+
+.characteristic-title {
+  font-weight: bold;
+  font-size: 20px;
+  margin-right: 10px;
+}
+
+.characteristic-value {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.characteristic-header {
+  display: flex;
+  justify-content: center;
+}