@colijnit/configurator 262.1.2 → 262.1.4

package/lib/components/product-configurator-selector/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-layout') {
   .co-product-configurator-selector {
     .selector-container {
       margin: 0 auto;
@@ -90,7 +89,29 @@
         box-sizing: border-box;
       }
     }
-
+    // container for the displayOption SmallCircle and SmallSquare
+    .selection-container-03, .selection-container-04 {
+      grid-template-columns: repeat(auto-fill, minmax(50px, .5fr));
+      .selector-option-wrapper {
+        padding: 5px;
+        align-items: center;
+        display: flex;
+        background: none;
+        border: none;
+        box-sizing: border-box;
+        .product-configurator-selector-option-tile-description {
+          display: none;
+        }
+      }
+    }
+    .selection-container-03 {
+      .selector-option-wrapper {
+        border-radius: 100%;
+        &.active {
+          box-shadow: none;
+        }
+      }
+    }
     // container for the displayOption small tile
     .selection-container-06 {
       grid-template-columns: repeat(auto-fill, minmax(70px, .5fr));
@@ -141,5 +162,8 @@
         }
       }
     }
+    &.hidden-frontend {
+      display: none;
+    }
   }
 }

package/lib/components/product-configurator-selector/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-theme') {
   .co-product-configurator-selector {
     .selector-container {
       background-color: #fff;
@@ -12,11 +11,13 @@
         }
 
         .selector-option-header {
-          font-size: var(--font-size-large);
+          font-size: var(--font-size-normal);
+          font-weight: var(--font-weight-bold);
         }
 
         .selector-option-sub-header {
-          font-size: var(--font-size-large);
+          font-size: var(--font-size-small);
+          font-weight: var(--font-weight-normal);
         }
 
         .selector-option-bold-text-header {
@@ -31,11 +32,26 @@
 
     .selector-wrapper {
       .selector-option-wrapper {
-        border: 1px solid var(--border-color);
+        border: 2px solid var(--border-color);
         border-radius: var(--default-border-radius);
         background-color: var(--tile-background-color);
         font-size: var(--font-size-normal);
         padding: var(--default-padding);
+        &.active {
+          border: 2px solid var(--border-color-active);
+        }
+      }
+      &.selection-container-03, &.selection-container-08 {
+        .selector-option-wrapper {
+          &.active {
+            border-radius: var(--circle-border-radius);
+          }
+        }
+      }
+      &.selection-container-08 {
+        .selector-option-wrapper {
+          border: none;
+        }
       }
     }
 

package/lib/components/product-configurator-selector-option/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-layout') {
   .co-product-configurator-selector-option {
 
   }

package/lib/components/product-configurator-selector-option/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-theme') {
   .co-product-configurator-selector-option {
 
   }

package/lib/components/product-configurator-selector-option-button/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-button-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-button-layout') {
   .co-product-configurator-selector-option-button {
     .configurator-selector-option-button-container {
       .product-configurator-selector-option-button-checkmark {

package/lib/components/product-configurator-selector-option-button/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-button-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-button-theme') {
   .co-product-configurator-selector-option-button {
     .configurator-selector-option-button-container {
       .product-configurator-selector-option-button-checkmark {

package/lib/components/product-configurator-selector-option-checkbox/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-option-checkbox-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-option-checkbox-layout') {
   .co-product-configurator-option-checkbox {
     .configurator-option-checkbox-container {
       display: flex;

package/lib/components/product-configurator-selector-option-checkbox/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-option-checkbox-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-option-checkbox-theme') {
   .co-product-configurator-option-checkbox {
     .configurator-option-checkbox-container {
       .product-configurator-checkbox-checkmark {
@@ -13,7 +12,10 @@
         }
 
         .product-configurator-checkbox-selected {
+          background: var(--checked-icon-background);
           fill: var(--checked-icon-color);
+          padding: var(--checked-icon-padding);
+          border-radius: var(--checked-selected-icon-radius);
         }
       }
 

package/lib/components/product-configurator-selector-option-dropdown/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-dropdown-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-dropdown-layout') {
   .co-product-configurator-selector-option-dropdown {
     .configurator-option-dropdown-container {
       padding-left: 5px;

package/lib/components/product-configurator-selector-option-dropdown/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-dropdown-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-dropdown-theme') {
   .co-product-configurator-selector-option-dropdown {
     .configurator-option-dropdown-container {
       .option-dropdown-select {

package/lib/components/product-configurator-selector-option-tile/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-tile-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-tile-layout') {
   .co-product-configurator-selector-option-tile {
     .configurator-selector-option-tile-container {
       position: relative;
@@ -10,8 +9,8 @@
 
       .product-configurator-selector-option-tile-checkmark {
         position: absolute;
-        top: 5px;
-        right: 5px;
+        top: -7px;
+        right: -7px;
       }
 
       .product-configurator-selector-option-tile-image {
@@ -34,11 +33,19 @@
         }
       }
 
-      &.configurator-selector-option-tile-container-small {
+      &.configurator-selector-option-tile-container-small,
+      &.configurator-selector-option-tile-container-small-rounded,
+      &.configurator-selector-option-tile-container-small-square {
         .product-configurator-selector-option-tile-image {
           width: 100%;
           min-height: 40px;
-          max-width: 40px;
+          max-width: 100%;
+        }
+      }
+      &.configurator-selector-option-tile-container-rounded {
+        .product-configurator-selector-option-tile-checkmark {
+          top: 5px;
+          right: 5px;
         }
       }
     }

package/lib/components/product-configurator-selector-option-tile/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator-selector-option-tile-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-selector-option-tile-theme') {
   .co-product-configurator-selector-option-tile {
     .configurator-selector-option-tile-container {
       .product-configurator-selector-option-tile-checkmark {
@@ -8,12 +7,13 @@
         fill: var(--checked-icon-color);
         height: var(--big-icon-height);
         width: var(--big-icon-width);
-        background: rgba(255, 255, 255, 0.5);
-        border-radius: 50%;
+        background: var(--checked-icon-background);
+        border-radius: var(--checked-icon-radius);
 
         co-icon {
           width: var(--big-icon-width);
           height: var(--big-icon-height);
+          padding: var(--checked-icon-padding);
         }
       }
 
@@ -46,11 +46,36 @@
         }
       }
 
+      &.configurator-selector-option-tile-container-small-rounded, &.configurator-selector-option-tile-container-rounded {
+        .product-configurator-selector-option-tile-checkmark {
+          border-radius: var(--circle-border-radius);
+        }
+      }
+
       &.configurator-selector-option-tile-container-small {
         .product-configurator-selector-option-tile-description {
           font-size: var(--font-size-small);
         }
       }
+      &.configurator-selector-option-tile-container-rounded {
+        .product-configurator-selector-option-tile-image {
+          aspect-ratio: 1/1;
+          img {
+            height: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            padding: var(--default-padding);
+          }
+        }
+        &.active {
+          .product-configurator-selector-option-tile-image {
+            img {
+              border: 2px solid var(--border-color-active);
+              box-shadow: none;
+            }
+          }
+        }
+      }
     }
   }
 }

package/lib/components/progress-bar/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-progress-bar-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-progress-bar-layout') {
   .co-progress-bar {
     position: fixed;
     width: 100%;

package/lib/components/progress-bar/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-progress-bar-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-progress-bar-theme') {
   .co-progress-bar {
     .progress {
       background: var(--progress-bar-background);

package/lib/components/scene-options/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-scene-options-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-scene-options-layout') {
   .co-scene-options {
     margin: 0 5px;
     .buttons-wrapper {
@@ -10,6 +9,7 @@
       flex-direction: row;
       align-items: center;
       column-gap: 5px;
+      z-index: 1;
     }
     .button-wrapper {
       position: relative;
@@ -24,16 +24,17 @@
     }
 
     button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       z-index: 1;
       max-width: 50px;
       max-height: 50px;
       cursor: pointer;
       img {
         pointer-events: none;
-        width: 100%;
-        height: 100%;
-        max-height: 34px;
-        max-width: max-content;
+        height: 50px;
+        width: inherit;
       }
       &.active {
         box-shadow: none;

package/lib/components/scene-options/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-scene-options-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-scene-options-theme') {
   .co-scene-options {
 
   }

package/lib/components/selections-summary/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-selections-summary-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-selections-summary-layout') {
   .co-selections-summary {
     display: inline-block;
     overflow-y: auto;

package/lib/components/selections-summary/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-selections-summary-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-selections-summary-theme') {
   .co-selections-summary {
     .co-selections-summary {
       background-color: var(--background-white);

package/lib/components/selections-summary-line/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-selections-summary-line-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-selections-summary-line-layout') {
   .co-selections-summary-line {
     .customizer-button {
       display: flex;

package/lib/components/selections-summary-line/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-selections-summary-line-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-selections-summary-line-theme') {
   .co-selections-summary-line {
     .customizer-button {
       background-color: var(--customizer-button-background-color);

package/lib/components/slideout/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-slideout-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-slideout-layout') {
   .co-slideout {
     position: fixed;
     right: -200%;

package/lib/components/slideout/style/_theme.scss

@@ -1,5 +1,4 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-slideout-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-slideout-theme') {
 
 }

package/lib/components/summary-line/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-summary-line-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-summary-line-layout') {
   .co-summary-line {
     display: flex;
     flex-direction: column;

package/lib/components/summary-line/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-summary-line-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-summary-line-theme') {
   .co-summary-line {
     cursor: pointer;
     background-color: var(--white-text-color);

package/lib/components/tag-filter/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-tag-filter-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-tag-filter-layout') {
   .co-tag-filter {
     cursor: pointer;
     font-size: 13px;

package/lib/components/tag-filter/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-tag-filter-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-tag-filter-theme') {
   .co-tag-filter {
 
   }

package/lib/style/_index.scss

@@ -0,0 +1,2 @@
+@forward "./mixin";
+@forward "./variables";

package/lib/style/_variables.scss

@@ -3,18 +3,24 @@
   --tile-container-background: #EBEBED;
 
   /* tiles */
-  --border-color: #f8f8fa;
+  --border-color: transparent;
+  --border-color-active: #979284;
   --default-border-radius: 3px;
-  --tile-background-color: #f8f8fa;
+  --circle-border-radius: 50%;
+  --tile-background-color: #FFFFFF;
   --default-padding: 5px;
 
 
   /* checkmarks and icons */
-  --checked-icon-color: #17953a;
-  --big-icon-height: 24px;
-  --big-icon-width: 24px;
-  --small-icon-height: 20px;
-  --small-icon-width: 20px;
+  --checked-icon-color: #FFFFFF;
+  --checked-icon-background: #979284;
+  --checked-icon-radius: 0 3px;
+  --checked-selected-icon-radius: 3px;
+  --checked-icon-padding: 3px;
+  --big-icon-height: 20px;
+  --big-icon-width: 20px;
+  --small-icon-height: 18px;
+  --small-icon-width: 18px;
   --xs-icon-height: 16px;
   --xs-icon-width: 16px;
 
@@ -29,9 +35,16 @@
   --font-size-small: 12px;
   --font-size-xs: 10px;
 
+  /* fontweights */
+  --font-weight-light: 400;
+  --font-weight-normal: 500;
+  --font-weight-bold: 600;
+  --font-weight-bolder: 700;
+
   /* Links and text color */
   --text-color: #333333;
   --text-color-hover: #333333;
   --load-more-link-color: #da9803;
   --white-text-color: #fff;
+  --link-text-color: #0070ba;
 }

package/lib/style/configurator-globals.scss

@@ -1 +1,6 @@
-@import "./variables";
+@use "./mixin" as mixin;
+@use "./variables" as *;
+
+input, button {
+  border: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/configurator",
-  "version": "262.1.2",
+  "version": "262.1.4",
   "description": "iOne configurator specific for version 262",
   "private": false,
   "peerDependencies": {
@@ -12,7 +12,8 @@
     "@colijnit/configuratorapi": ">=262.1.0",
     "@colijnit/corecomponents_v12": ">=262.1.0",
     "@colijnit/ioneconnector": ">=262.1.0",
-    "@colijnit/mainapi": ">=262.1.1"
+    "@colijnit/mainapi": ">=262.1.1",
+    "@colijnit/utilities": ">=262.1.0"
   },
   "dependencies": {
     "@tweenjs/tween.js": "25.0.0",

package/lib/components/element-toolbar/element-toolbar.component.scss

@@ -1,59 +0,0 @@
-:host {
-
-}
-
-//.toolbar-wrapper {
-//  display: flex;
-//  align-items: center;
-//  gap: 2px;
-//}
-
-//.toolbar-wrapper button:not(:last-child) {
-//  margin-right: 5px;
-//}
-
-//.element-pointer {
-//  pointer-events: none;
-//  position: absolute;
-//  width: 0px;
-//  border-left: 2px dashed #2c67ff;
-//  transform-origin: top center;
-//  top: 45px;
-//  left: 50%;
-//  margin-left: 20px;
-//}
-//
-//.edit-menu-wrapper {
-//  position: absolute;
-//  margin-top: 10px;
-//  min-width: 175px;
-//  left: 25px;
-//  transform: translateX(-50%);
-//  overflow: hidden;
-//}
-
-//.edit-menu-wrapper .edit-menu:not(:last-child) {
-//  margin-bottom: 5px;
-//}
-//
-//.edit-menu {
-//  font-size: 12px;
-//  background: white;
-//  color: #41403D;
-//  height: 30px;
-//  display: flex;
-//  align-items: center;
-//  padding: 5px;
-//  cursor: pointer;
-//  white-space: nowrap;
-//  justify-content: space-between;
-//
-//  span {
-//    margin-right: 50px;
-//  }
-//
-//  mat-icon {
-//    width: 20px;
-//    height: 20px;
-//  }
-//}

package/lib/components/threedselector/style/_layout.scss

@@ -1,32 +0,0 @@
-@import "../../../style/mixin.scss";
-
-
-@include export-module('co-threedselector-layout') {
-  .co-threedselector {
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    & > * {
-      pointer-events: all;
-    }
-
-    // TODO Maybe we should move this to the co-element-buttons style?
-    .co-element-buttons {
-      &.animate {
-        ::ng-deep .element-add-button {
-          animation-name: pulse-add-buttons;
-          animation-duration: 400ms;
-          animation-iteration-count: 6;
-          animation-direction: alternate;
-        }
-      }
-    }
-  }
-}

package/lib/components/threedselector/style/_material-definition.scss

@@ -1,3 +0,0 @@
-:root {
-
-}

package/lib/components/threedselector/style/_theme.scss

@@ -1,7 +0,0 @@
-@import "../../../style/mixin.scss";
-
-
-@include export-module('co-threedselector-theme') {
-  .co-threedselector {
-  }
-}