@colijnit/configurator 262.1.3 → 262.1.5

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;

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 {

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;

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 {

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

@@ -10,6 +10,9 @@
   --tile-background-color: #FFFFFF;
   --default-padding: 5px;
 
+  /* Dialog related */
+  --configurator-dialog-backdrop: rgba(0, 0, 0, 0.5);
+  --configutator-dialog-background: #fff;
 
   /* checkmarks and icons */
   --checked-icon-color: #FFFFFF;
@@ -47,4 +50,9 @@
   --load-more-link-color: #da9803;
   --white-text-color: #fff;
   --link-text-color: #0070ba;
+
+  --success-text-color: #155724;
+  --success-background-color: #d4edda;
+  --success-border-color: #c3e6cb;
+
 }

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.3",
+  "version": "262.1.5",
   "description": "iOne configurator specific for version 262",
   "private": false,
   "peerDependencies": {
@@ -9,12 +9,14 @@
     "@angular/core": ">=20.0.0",
     "@angular/material": "20.2.14",
     "@colijnit/articleapi": ">=262.1.0",
-    "@colijnit/configuratorapi": ">=262.1.0",
+    "@colijnit/configuratorapi": ">=262.1.2",
     "@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": {
+    "@colijnit/configuratorcore": "262.1.1",
     "@tweenjs/tween.js": "25.0.0",
     "@types/three": "0.178.1",
     "jszip": "3.6.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 {
-  }
-}

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

@@ -1,9 +0,0 @@
-@use './_material-definition.scss';
-@use './_layout.scss';
-@use './_theme.scss';
-
-@keyframes pulse-add-buttons {
-  50% {
-    box-shadow: 0 0 20px hsl(12, 100%, 60%);
-  }
-}