@colijnit/transaction 12.1.157 → 12.1.158

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

@@ -2,7 +2,7 @@
   .co-checkout-overview-delivery-edit {
     font-family: $tp-checkout-delivery-font-family;
     font-size: $tp-checkout-delivery-font-size;
-    //width: 100%;
+    width: 100%;
     //.delivery-edit-content {
     //  display: flex;
     //  flex-direction: row;

package/lib/component/checkout/checkout-overview-payment/style/_layout.scss

@@ -9,6 +9,7 @@
       border-width: $tp-checkout-overview-payment-section-border-width;
       margin: $tp-checkout-overview-payment-section-margin;
       padding: $tp-checkout-overview-payment-section-padding;
+      background: $tp-checkout-overview-payment-section-background;
     }
     .two-column-grid {
       display: grid;

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

@@ -3,9 +3,10 @@ $tp-checkout-overview-payment-font-size: $tp-font-size !default;
 $tp-checkout-overview-payment-font-color: $tp-color-font !default;
 $tp-checkout-overview-payment-section-border-style: solid !default;
 $tp-checkout-overview-payment-section-border-color: $tp-color-border !default;
-$tp-checkout-overview-payment-section-border-width: 0 0 1px 0 !default;
+$tp-checkout-overview-payment-section-border-width: 0 0 0 0 !default;
 $tp-checkout-overview-payment-section-margin: 0 0 20px 0 !default;
-$tp-checkout-overview-payment-section-padding: 0 0 10px 0 !default;
+$tp-checkout-overview-payment-section-padding: 30px !default;
+$tp-checkout-overview-payment-section-background: #f8f8fa !default;
 $tp-checkout-overview-payment-address-margin: 10px 0 !default;
 $tp-checkout-overview-payment-address-title-font-family: $tp-font-family !default;
 $tp-checkout-overview-payment-address-title-font-size: $tp-font-size !default;

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

@@ -32,9 +32,24 @@
     height: 100%;
     background: $tp-checkout-relation-suggestion-list-sidebar-background-color;
     box-shadow: $tp-checkout-relation-suggestion-list-sidebar-boxshadow;
+    padding: $tp-checkout-relation-suggestion-list-sidebar-padding;
+    .close-button {
+      position: absolute;
+      cursor: pointer;
+      right:$tp-checkout-relation-suggestion-list-sidebar-close-btn-right;
+      top: $tp-checkout-relation-suggestion-list-sidebar-close-btn-top;
+      width: $tp-checkout-relation-suggestion-list-sidebar-close-btn-size;
+      height: $tp-checkout-relation-suggestion-list-sidebar-close-btn-size;
+      svg [fill] {
+        fill: $tp-checkout-relation-suggestion-list-sidebar-close-btn-color;
+      }
+    }
   }
   .relation-sidebar-header {
     padding: $tp-checkout-relation-suggestion-list-label-padding;
     margin: $tp-checkout-relation-suggestion-list-label-margin;
+    .checkout-label-h3 {
+      color: $tp-checkout-relation-suggestion-list-label-color;
+    }
   }
 }

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

@@ -10,9 +10,16 @@ $tp-checkout-simple-relation-empty-text-color: $tp-color-action !default;
 $tp-checkout-simple-relation-empty-hover-text-color: #FFFFFF !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-background-color: #212437 !default;
 $tp-checkout-relation-suggestion-list-sidebar-boxshadow: -3px 1px 10px rgba(1, 1, 1, 0.1) !default;
+$tp-checkout-relation-suggestion-list-sidebar-padding: 10px !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;
+$tp-checkout-relation-suggestion-list-label-color: #ffffff !default;
+
+$tp-checkout-relation-suggestion-list-sidebar-close-btn-size: 20px !default;
+$tp-checkout-relation-suggestion-list-sidebar-close-btn-top: 20px !default;
+$tp-checkout-relation-suggestion-list-sidebar-close-btn-right: 20px !default;
+$tp-checkout-relation-suggestion-list-sidebar-close-btn-color: #ffffff !default;

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

@@ -1,5 +1,9 @@
 @include export-module('co-checkout-layout') {
   .co-checkout {
+    max-width: $tp-checkout-wrapper-max-width;
+    margin: 0 auto;
+    display: block;
+    width: 100%;
     .co-stepper-content-wrapper {
       display: flex;
       flex-direction: row;
@@ -21,6 +25,12 @@
       flex-grow: 1;
       flex-shrink: 1;
       max-width: $tp-checkout-max-width;
+      .cart-header-label {
+        display: none;
+      }
+      .button-edit-cart {
+        text-decoration: underline;
+      }
     }
     .co-checkout-right-panel-relation {
       display: flex;
@@ -28,21 +38,35 @@
     }
     .co-checkout-overview-payment {
       width: 100%;
+      .checkout-label-column {
+        margin-bottom: 15px;
+      }
     }
     co-form {
       flex: 1;
+      .co-input-text {
+        &:before {
+          box-shadow: none;
+        }
+        label {
+          padding-right: 20px;
+        }
+      }
+      .co-list-of-values {
+        &:before {
+          box-shadow: none;
+        }
+      }
     }
     .co-shopping-cart-preview {
       min-width: 35%;
+      background: $tp-checkout-co-shopping-cart-preview-background;
+      padding: 30px;
     }
     .checkout-form-wrapper {
-      display: grid;
-      grid-template-columns: minmax(170px, 250px) auto;
-      grid-template-areas: "columnlabel columndata";
-      grid-row-gap: 50px;
-      //display: flex;
-      //flex-direction: column;
-      //row-gap: 50px;
+      display: flex;
+      flex-direction: column;
+      row-gap: 15px;
     }
     .checkout-section-wrapper {
       display: flex;
@@ -52,12 +76,9 @@
       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;
-      width: 170px;
+      flex-direction: row;
+      gap: 10px;
+      align-items: center;
       .label-description {
         font-size: $tp-checkout-label-description-fontsize;
         font-weight: $tp-checkout-label-description-fontweight;
@@ -69,6 +90,8 @@
       grid-row: auto;
       width: 100%;
       overflow: hidden;
+      background: $tp-checkout-checkout-data-column-background;
+      padding: 30px;
     }
     .checkout-data-row {
       display: flex;
@@ -110,6 +133,25 @@
     .overview-delivery-invoice-address {
       overflow: hidden;
     }
-
+    .co-carousel {
+      .carousel-wrapper {
+        padding: 10px 0;
+        .co-tile-wrapper {
+          width: $tp-checkout-co-carousel-tile-width;
+          height: $tp-checkout-co-carousel-tile-height;
+          min-height: $tp-checkout-co-carousel-tile-min-height;
+          max-height: $tp-checkout-co-carousel-tile-max-height;
+          padding: $tp-checkout-co-carousel-tile-padding;
+          .co-tile-content-wrapper {
+            justify-content: start;
+          }
+        }
+      }
+    }
+    .co-payment {
+      background: $tp-checkout-co-payment-background;
+      padding: $tp-checkout-co-payment-padding;
+      display: block;
+    }
   }
 }

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

@@ -1,10 +1,11 @@
 $tp-checkout-font-family: $tp-font-family !default;
 $tp-checkout-padding: 30px !default;
-$tp-checkout-column-gap: 10px !default;
+$tp-checkout-column-gap: 30px !default;
 $tp-checkout-row-gap: 10px !default;
 $tp-checkout-default-width: 55% !default;
-$tp-checkout-max-width: 80% !default;
-$tp-checkout-right-panel-row-gap: 10px !default;
+$tp-checkout-max-width: calc(100% - 450px) !default;
+$tp-checkout-wrapper-max-width: 1340px !default;
+$tp-checkout-right-panel-row-gap: 15px !default;
 $tp-checkout-right-panel-width: 400px !default;
 $tp-checkout-right-panel-width: 50% !default;
 $tp-checkout-label-column-font-family: $tp-font-family;

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

@@ -8,10 +8,12 @@
     font-size: $tp-delivery-type-tile-font-size;
     .delivery-type-content-wrapper {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       align-items: center;
       height: 100%;
       overflow: hidden;
+      width: 100%;
+      justify-content: space-between;
     }
     .delivery-type-description {
       font-family: $tp-delivery-type-tile-description-font-family;
@@ -30,6 +32,8 @@
       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;
+      min-width: 60px;
+      text-align: right;
     }
   }
 }

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

@@ -12,5 +12,5 @@ $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-size: $tp-font-size !default;
 $tp-delivery-type-tile-price-font-weight: bold !default;

package/lib/component/relation/relation-address/style/_layout.scss

@@ -20,6 +20,11 @@
         .form-input {
           flex: 1;
         }
+        &.single {
+          > .form-input {
+            max-width: $tp-relation-address-default-single-width;
+          }
+        }
       }
     }
   }

package/lib/component/relation/relation-address/style/_material-definition.scss

@@ -1,3 +1,4 @@
 $tp-relation-address-font-family: $tp-font-family !default;
 $tp-relation-address-font-size: $tp-font-size !default;
 $tp-relation-address-default-padding: 10px !default;
+$tp-relation-address-default-single-width: calc(50% - 5px) !default;

package/lib/component/relation/relation-addresses/style/_layout.scss

@@ -13,10 +13,14 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      font-weight: bold;
+      font-weight: 500;
+      color: $tp-relation-addresses-new-link-color;
       .relation-address-icon {
         height: 20px;
         width: 20px;
+        svg path {
+          fill: $tp-relation-addresses-new-link-color;
+        }
       }
     }
   }

package/lib/component/relation/relation-addresses/style/_material-definition.scss

@@ -1 +1,2 @@
 $tp-relation-addresses-carousel-max-width: 500px !default;
+$tp-relation-addresses-new-link-color: #1A73E8 !default;

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

@@ -1,6 +1,7 @@
 @include export-module('cc-relation-suggestions-list-layout') {
   .co-relation-suggestions-list {
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
     z-index: 10;
   }
 }

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

@@ -7,18 +7,21 @@
     flex-shrink: 0;
     padding: $tp-relation-suggestions-list-item-padding;
     background-color: $tp-relation-suggestions-list-item-background-color;
-    border: 1px solid $tp-relation-suggestions-list-item-border-color;
-    border-radius: 5px;
-    margin: 5px;
+    border-color: $tp-relation-suggestions-list-item-border-color;
+    border-style: $tp-relation-suggestions-list-item-border-style;
+    border-width: $tp-relation-suggestions-list-item-border-width;
+    border-radius: $tp-relation-suggestions-list-item-border-radius;
+    margin: $tp-relation-suggestions-list-item-margin;
     max-width: $tp-relation-suggestions-list-item-max-width;
 
     .name {
       font-weight: $tp-relation-suggestions-list-item-name-fontweight;
       font-size: $tp-relation-suggestions-list-item-name-fontsize;
+      color: $tp-relation-suggestions-list-item-fontcolor;
     }
 
     .email, .address, .phone {
-      color: $tp-color-text-grey;
+      color: $tp-relation-suggestions-list-item-fontcolor;
       font-size: $tp-relation-suggestions-list-item-fontsize;
     }
 
@@ -27,6 +30,12 @@
       co-button.popup {
         visibility: visible;
       }
+      .email, .address, .phone {
+        color: #747b87;
+      }
+      .name {
+        color: #171721;
+      }
     }
   }
 }

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

@@ -1,8 +1,13 @@
 $tp-relation-suggestions-list-item-padding: 11px !default;
-$tp-relation-suggestions-list-item-background-color: $tp-color-light !default;
+$tp-relation-suggestions-list-item-background-color: #2e3350 !default;
 $tp-relation-suggestions-list-item-border-color: $tp-color-light-accent !default;
+$tp-relation-suggestions-list-item-border-style: none !default;
+$tp-relation-suggestions-list-item-border-width: 1px !default;
 $tp-relation-suggestions-list-item-max-width: 250px !default;
+$tp-relation-suggestions-list-item-margin: 10px !default;
+$tp-relation-suggestions-list-item-border-radius: 0 !default;
 $tp-relation-suggestions-list-item-hover-color: $tp-color-hover !default;
 $tp-relation-suggestions-list-item-name-fontsize: $tp-font-size !default;
+$tp-relation-suggestions-list-item-fontcolor: $tp-color-light !default;
 $tp-relation-suggestions-list-item-fontsize: $tp-font-size !default;
 $tp-relation-suggestions-list-item-name-fontweight: bold !default;

package/lib/component/shopping-cart-preview/style/_layout.scss

@@ -19,12 +19,15 @@
       text-transform: $tp-shopping-cart-preview-header-text-transform;
       font-weight: $tp-shopping-cart-preview-header-font-weight;
     }
+    .cart-lines {
+      max-height: $tp-shopping-cart-preview-cart-lines-height;
+    }
     .co-image-display .no-image .no-image-label {
       font-size: 8px;
     }
 
     .co-transaction-line {
-      padding: 0;
+      padding: $tp-shopping-cart-preview-cart-lines-padding;
     }
     .preview-totals-wrapper {
       display: flex;
@@ -44,5 +47,31 @@
     .button-edit-cart {
       cursor: pointer;
     }
+    .co-transaction-line-image-and-description {
+      align-items: center;
+      .transaction-line-description {
+        height: auto;
+      }
+    }
+    .co-transaction-base-line {
+      .transaction-line-totals {
+        display: flex;
+        align-items: center;
+        .transaction-line-totals-price {
+          border: none;
+          padding: 0;
+        }
+      }
+      .transaction-line-section {
+        margin-right: 10px;
+      }
+      .transaction-base-line-section {
+        flex: 2;
+        &.preview-margin {
+          flex: 1;
+          justify-content: end;
+        }
+      }
+    }
   }
 }

package/lib/component/shopping-cart-preview/style/_material-definition.scss

@@ -13,6 +13,9 @@ $tp-shopping-cart-preview-header-font-weight: bold !default;
 $tp-shopping-cart-preview-header-text-transform: uppercase !default;
 $tp-shopping-cart-preview-header-margin: 5px !default;
 
+$tp-shopping-cart-preview-cart-lines-height: 460px !default;
+$tp-shopping-cart-preview-cart-lines-padding: 10px 0 !default;
+
 $tp-shopping-cart-preview-totals-margin: 15px 0 !default;
 $tp-shopping-cart-preview-buttons-column-gap: 15px !default;
 $tp-shopping-cart-preview-buttons-margin: 20px 0 !default;

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

@@ -23,7 +23,7 @@
       width: 100%;
     }
     .co-tile-select-wrapper {
-      //position: absolute;
+      display: none;
       .co-radio-button {
         border: none;
         height: $tp-tile-icon-width;

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

@@ -15,4 +15,4 @@ $tp-tile-selected-border-color: #0084de !default;
 $tp-tile-edit-background-color: $tp-color-border !default;
 $tp-tile-edit-icon-color: $tp-color-action !default;
 $tp-tile-edit-icon-width: 30px !default;
-$tp-tile-selected-zoom: 1.05 !default;
+$tp-tile-selected-zoom: 1 !default;

package/lib/component/transaction-line-image-and-description/style/_layout.scss

@@ -43,6 +43,10 @@
           margin-top: 0;
         }
       }
+      .co-icon {
+        width: $tp-transaction-line-image-and-description-edit-icon-size;
+        height: $tp-transaction-line-image-and-description-edit-icon-size;
+      }
     }
     .delete-icon {
       cursor: pointer;
@@ -58,14 +62,17 @@
       font-size: $tp-transaction-line-image-and-description-article-text-font-size;
       padding: $tp-transaction-line-image-and-description-article-text-padding;
     }
-
+    .configuration-text {
+      padding: $tp-transaction-line-image-and-description-article-configuration-padding;
+      line-height: $tp-transaction-line-image-and-description-article-configuration-line-height;
+    }
     .transaction-line-article-number-wrapper {
       display: flex;
       column-gap: 15px;
     }
     .article-text-expand {
       &.large-article {
-        max-height: 90px;
+        max-height: $tp-transaction-line-image-and-description-article-text-max-height;
         overflow: hidden;
       }
     }
@@ -73,10 +80,15 @@
       display: flex;
       align-items: center;
       padding-top: 5px;
+      cursor: pointer;
       .co-icon {
-        width: 20px;
-        height: 20px;
-        margin-right: 10px;
+        width: $tp-transaction-line-image-and-description-article-text-show-more-size;
+        height: $tp-transaction-line-image-and-description-article-text-show-more-size;
+        margin-right: $tp-transaction-line-image-and-description-article-text-show-more-gap;
+      }
+      span {
+        text-decoration: underline;
+        font-size: $tp-transaction-line-image-and-description-article-text-span-size;
       }
     }
 

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

@@ -1,6 +1,6 @@
 $tp-transaction-line-image-and-description-font-family: $tp-font-family !default;
 $tp-transaction-line-image-and-description-font-size: $tp-font-size !default;
-$tp-transaction-line-image-and-description-article-text-font-color: $tp-color-label !default;
+$tp-transaction-line-image-and-description-article-text-font-color: $tp-color-font !default;
 $tp-transaction-line-image-and-description-image-width: 67px !default;
 $tp-transaction-line-image-and-description-image-height: 50px !default;
 $tp-transaction-line-image-and-description-image-border: none !default;
@@ -11,9 +11,17 @@ $tp-transaction-line-image-and-description-description-row-gap: 5px !default;
 $tp-transaction-line-image-and-description-description-inner-padding: 0 10px !default;
 $tp-transaction-line-image-and-description-description-column-gap: 15px !default;
 $tp-transaction-line-image-and-description-delete-icon-size: 15px !default;
+$tp-transaction-line-image-and-description-edit-icon-size: 24px !default;
 $tp-transaction-line-image-and-description-article-text-font-size: $tp-font-size !default;
-$tp-transaction-line-image-and-description-article-text-padding: 2px !default;
+$tp-transaction-line-image-and-description-article-text-padding: 1px 0 !default;
+$tp-transaction-line-image-and-description-article-configuration-padding: 10px 0 !default;
+$tp-transaction-line-image-and-description-article-configuration-line-height: 1.35 !default;
 $tp-transaction-line-image-and-description-article-text-background-color: white !default;
 $tp-transaction-line-image-and-description-article-text-color: $tp-color-dark !default;
 $tp-transaction-line-image-and-description-delete-color: $tp-color-action !default;
 $tp-transaction-line-image-and-description-align-items: flex-start !default;
+
+$tp-transaction-line-image-and-description-article-text-max-height: 78px !default;
+$tp-transaction-line-image-and-description-article-text-show-more-size: 18px !default;
+$tp-transaction-line-image-and-description-article-text-show-more-gap: 5px !default;
+$tp-transaction-line-image-and-description-article-text-span-size: 11px !default;

package/lib/style/_variables.scss

@@ -165,4 +165,14 @@ $cc-co-calendar-day-number-font-weight: normal !default;
 $cc-co-calendar-weekday-font-size: 13px !default;
 $cc-co-calendar-weekday-color: #0000008a !default;
 $cc-co-calendar-day-margin: 0 !default;
+
+$tp-checkout-co-carousel-tile-width: 160px !default;
+$tp-checkout-co-carousel-tile-height: 100% !default;
+$tp-checkout-co-carousel-tile-min-height: 100% !default;
+$tp-checkout-co-carousel-tile-max-height: 120px !default;
+$tp-checkout-co-carousel-tile-padding: 10px 15px !default;
+$tp-checkout-co-payment-padding: 30px !default;
+$tp-checkout-co-payment-background: #f8f8fa !default;
+$tp-checkout-checkout-data-column-background: #f8f8fa !default;
+$tp-checkout-co-shopping-cart-preview-background: #f8f8fa !default;
 /****************************/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "12.1.157",
+  "version": "12.1.158",
   "description": "Colijn IT transaction module for Angular 12",
   "repository": "npm/npm",
   "author": "Colijn IT",