@colijnit/configurator 262.1.2 → 262.1.4

package/lib/components/answer-card/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answer-card-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answer-card-layout') {
   .co-answer-card {
     width: 23%;
 

package/lib/components/answer-card/style/_theme.scss

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

package/lib/components/answer-card/style/material.scss

@@ -1,2 +1,3 @@
 @use './layout.scss';
+@use './material-definition';
 @use './theme.scss';

package/lib/components/answer-info-dialog/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answer-info-dialog-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answer-info-dialog-layout') {
   .co-answer-info-dialog{
     .answer-info-tooltip {
       position: fixed;

package/lib/components/answer-info-dialog/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answer-info-dialog-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answer-info-dialog-theme') {
   .co-answer-info-dialog {
     .answer-info-tooltip {
       background: #4a4a49;

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-answers-slideout-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-answers-slideout-layout') {
   .co-answers-slideout {
     .answer-slideout {
       overflow-y: auto;
@@ -60,10 +59,10 @@
     }
 
     &:not(.custom-dimensions) co-slideout {
-      width: 500px;
+      width: 640px;
       max-width: 60vw;
       top: 40px;
-      max-height: calc(100% - 100px);
+      max-height: calc(100% - 40px);
       padding: 30px;
     }
 

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

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

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-color-filter-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-color-filter-layout') {
   .co-color-filter {
     display: flex;
     align-items: center;

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

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

package/lib/components/configuration-preset/style/_layout.scss

@@ -0,0 +1,41 @@
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configuration-preset-layout') {
+  .co-configuration-preset {
+    .save-load-configuration-buttons {
+      display: flex;
+      justify-content: end;
+      flex-direction: column;
+      .preset-button {
+        cursor: pointer;
+        width: 100%;
+        padding: 0;
+        background: none;
+      }
+    }
+    .save-load-config-wrapper {
+      position: relative;
+      .open-save-load {
+        cursor: pointer;
+      }
+    }
+
+    .save-load-configuration-buttons {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-8px);
+      pointer-events: none;
+      transition: opacity 200ms ease, transform 200ms ease;
+      z-index: 10;
+    }
+
+    .save-load-configuration-buttons.is-open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+  }
+}

package/lib/components/configuration-preset/style/_material-definition.scss

@@ -0,0 +1,5 @@
+:root {
+  --success-text-color: #155724;
+  --success-background-color: #d4edda;
+  --success-border-color: #c3e6cb;
+}

package/lib/components/configuration-preset/style/_theme.scss

@@ -0,0 +1,19 @@
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configuration-preset-theme') {
+  .co-configuration-preset {
+    .save-load-configuration-buttons {
+      box-shadow: 1px 1px 4px 1px rgba(151, 146, 132, 0.3);
+      padding: 5px;
+      .preset-button {
+        color: var(--link-text-color);
+        .co-icon {
+          svg {
+            path {
+              fill: var(--link-text-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/configuration-preset/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/configuration-preset-dialog/style/_layout.scss

@@ -0,0 +1,81 @@
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configuration-preset-dialog-layout') {
+  .co-configuration-preset-dialog {
+    .configuration-preset-dialog {
+      position: fixed;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 100;
+      background-color: rgba(0, 0, 0, 0.5);
+
+      .configuration-preset-dialog-container {
+        background-color: #fff;
+        box-sizing: border-box;
+        min-width: 450px;
+
+        .configuration-preset-dialog-container-header {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+          margin-bottom: 20px;
+          border-bottom: 1px solid #ccc;
+          padding: 20px;
+        }
+
+        .configuration-preset-dialog-container-body {
+          padding: 20px;
+          position: relative;
+
+          .validation-error {
+            max-width: 450px;
+            font-size: var(--font-size-small);
+          }
+
+          .save-success {
+            padding: 10px;
+            color: var(--success-text-color);
+            background-color: var(--success-background-color);
+            border: 1px solid var(--success-border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .save-success-text {
+              min-width: 90%;
+              text-align: center;
+              font-weight: bold;
+            }
+
+            .save-success-button {
+              background: none;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .configuration-preset-dialog-container-footer {
+          padding: 20px;
+          display: flex;
+          gap: 10px;
+          justify-content: space-evenly;
+
+          .co-button {
+            cursor: pointer;
+          }
+
+          .button-as-link {
+            background: none;
+            color: var(--text-color);
+            text-decoration: underline;
+          }
+
+        }
+      }
+    }
+  }
+}

package/lib/components/configuration-preset-dialog/style/_material-definition.scss

@@ -0,0 +1,5 @@
+:root {
+  --success-text-color: #155724;
+  --success-background-color: #d4edda;
+  --success-border-color: #c3e6cb;
+}

package/lib/components/configuration-preset-dialog/style/_theme.scss

@@ -0,0 +1,6 @@
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configuration-preset-dialog-theme') {
+  .co-configuration-preset-dialog {
+
+  }
+}

package/lib/components/configuration-preset-dialog/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

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

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

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

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

package/lib/components/configurator-dialog/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin";
-
-@include export-module('co-configurator-dialog-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-dialog-layout') {
   .co-configurator-error-dialog, .co-configurator-error-dialog, .co-configurator-camera-settings-dialog {
     .dialog {
       width: 550px;

package/lib/components/configurator-dialog/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin";
-
-@include export-module('co-configurator-dialog-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-dialog-theme') {
   .co-configurator-error-dialog, .co-configurator-error-dialog, .co-configurator-camera-settings-dialog {
     .dialog {
       background-color: var(--overlay-background);

package/lib/components/configurator-dialog/style/material.scss

@@ -1,3 +1,3 @@
-@use './material-definition';
-@use './layout';
-@use './theme';
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/configurator-loader/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-loader-layout') {
   .co-configurator-loader {
     .loader-wrapper {
       z-index: 1100;
@@ -70,3 +69,13 @@
     }
   }
 }
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/lib/components/configurator-loader/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-loader-theme') {
   .co-configurator-loader {
     .bg {
       fill: none;

package/lib/components/configurator-loader/style/material.scss

@@ -1,14 +1,3 @@
 @use './_material-definition.scss';
 @use './_layout.scss';
 @use './_theme.scss';
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

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

@@ -1,22 +1,17 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-scene-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-scene-layout') {
   .co-configurator-scene {
-
-    .configurator-bundle-container {
+    display: block;
+    width: 100%;
+    height: 100%;
+    .configurator-scene-wrapper {
       position: relative;
-
-      .threedviewer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        min-height: 100%;
-        min-width: 100%;
-        height: 100vh;
-        width: 100vw;
-      }
+      width: 100%;
+      height: 100%;
+    }
+    .canvas {
+      height: 100%;
+      width: 100%;
     }
   }
 }

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

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

package/lib/components/configurator-scene-loader/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-scene-loader-layout') {
   .co-configurator-scene-loader {
     .loader-wrapper {
       z-index: 1100;
@@ -70,3 +69,13 @@
     }
   }
 }
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/lib/components/configurator-scene-loader/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-configurator-loader-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-configurator-loader-theme') {
   .co-configurator-scene-loader {
     .bg {
       fill: none;

package/lib/components/configurator-scene-loader/style/material.scss

@@ -1,14 +1,3 @@
 @use './_material-definition.scss';
 @use './_layout.scss';
 @use './_theme.scss';
-
-@keyframes ripple {
-  0% {
-    transform: scale(0);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

package/lib/components/element-buttons/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-buttons') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-element-buttons-layout') {
   .co-element-buttons {
     pointer-events: all;
 
@@ -48,5 +47,18 @@
 
       transform: translate(-5px, -5px);
     }
+    &.animate {
+      ::ng-deep .element-add-button {
+        animation-name: pulse-add-buttons;
+        animation-duration: 400ms;
+        animation-iteration-count: 6;
+        animation-direction: alternate;
+      }
+    }
+  }
+}
+@keyframes pulse-add-buttons {
+  50% {
+    box-shadow: 0 0 20px hsl(12, 100%, 60%);
   }
 }

package/lib/components/element-buttons/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-buttons-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-element-buttons-theme') {
   .co-element-buttons {
 
     .add-button-label {

package/lib/components/element-toolbar/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-toolbar-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-element-toolbar-layout') {
   .co-element-toolbar {
     position: absolute;
     display: block;
@@ -18,6 +17,7 @@
       .toolbar-button {
         display: flex;
         align-items: center;
+        justify-content: center;
         cursor: pointer;
         border: none;
         border-radius: 5px;
@@ -25,14 +25,6 @@
         width: 36px;
         box-sizing: border-box;
         padding: 5px;
-
-        button {
-          cursor: pointer;
-          background: none;
-          border: none;
-          height: 26px;
-          width: 26px;
-        }
       }
     }
 

package/lib/components/element-toolbar/style/_theme.scss

@@ -1,14 +1,15 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-element-toolbar-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-element-toolbar-theme') {
   .co-element-toolbar {
     .toolbar-wrapper {
       .toolbar-button {
         background-color: #17253391;
         box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
 
-        button {
-          color: #fff;
+        .co-icon svg {
+          fill: #fff;
+        }
+        & [fill] {
           fill: #fff;
         }
       }

package/lib/components/image-zoom/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-image-zoom-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-image-zoom-layout') {
   .co-image-zoom {
 
     .zoom-layer {

package/lib/components/image-zoom/style/_theme.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-image-zoom-theme') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-image-zoom-theme') {
   .co-image-zoom {
     .zoom-layer {
       background: rgba(0, 0, 0, 0.6);

package/lib/components/lite-selector/style/_layout.scss

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-lite-selector-layout') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-lite-selector-layout') {
   .co-lite-selector {
     &.floating co-selections-summary {
       position: absolute;

package/lib/components/lite-selector/style/_theme.scss

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

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

@@ -1,7 +1,5 @@
-@import "../../../style/mixin.scss";
-
-
-@include export-module('co-product-configurator') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-layout') {
   .product-configurator-container {
     box-sizing: border-box;
     position: absolute;
@@ -27,7 +25,11 @@
           margin: 0;
         }
       }
+      .product-configurator-header-actions {
+        display: flex;
+        gap: 5px;
 
+      }
       .product-configurator-close {
         cursor: pointer;
       }

package/lib/components/product-configurator/style/_material-definition.scss

@@ -1,3 +1,4 @@
 :root {
   --product-configurator-background-color: #fff;
+  --head-co-icon-size: 24px;
 }

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

@@ -1,6 +1,5 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-product-configurator') {
+@use '../../../style' as cfg;
+@include cfg.export-module('co-product-configurator-theme') {
   .co-product-configurator {
     .product-configurator-container {
       background: var(--product-configurator-background-color);
@@ -13,7 +12,13 @@
           }
 
           .product-configurator-text {
-            font-size: var(--font-size-medium);
+            font-size: var(--font-size-small);
+          }
+        }
+        .product-configurator-header-actions {
+          co-icon {
+            width: var(--head-co-icon-size);
+            height: var(--head-co-icon-size);
           }
         }
       }