@colijnit/inphoto 262.1.1 → 300.1.1

package/lib/component/segment-inpaint/style/_layout.scss

@@ -0,0 +1,52 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-segment-inpaint-layout') {
+  .co-segment-inpaint {
+    .segment-inpaint-container {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
+      position: relative;
+    }
+
+    .inpaint-info-dialog-container {
+      position: absolute;
+      z-index: 10000;
+      bottom: 20%;
+      left: calc(50% - 490px);
+      background: var(--co-inphoto-dialog-background-color);
+      width: 100%;
+      max-width: 980px;
+      box-sizing: border-box;
+      padding: 20px 20px 30px;
+      border-radius: var(--co-inphoto-border-radius);
+
+      .inpaint-info-dialog-header {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 10px 0 25px;
+
+        .dialog-header {
+          @include cfg.sub-header-text()
+        }
+
+        .close-click {
+          cursor: pointer;
+        }
+      }
+
+      .dialog-content {
+        display: flex;
+        justify-content: space-between;
+
+        .arrow-next {
+          width: 50px;
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
+        }
+      }
+    }
+  }
+}

package/lib/component/segment-inpaint/style/_material-definition.scss

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

package/lib/component/segment-inpaint/style/_theme.scss

@@ -0,0 +1,11 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-segment-inpaint-theme') {
+  .co-segment-inpaint {
+
+
+  }
+}
+
+
+

package/lib/component/segment-inpaint/style/material.scss

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

package/lib/component/side-bar-menu/style/_layout.scss

@@ -1,40 +1,45 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-side-bar-menu-layout') {
+@include cfg.export-module('co-side-bar-menu-layout') {
   .co-side-bar-menu {
-    .lib-menu-bar {
-      position: absolute;
-      // todo revert tot 1
+    .side-bar-menu {
+      position: fixed;
+      background-color: #fff;
       z-index: 5;
-      width: 50px;
+      width: 85px;
       top: 0;
       left: 0;
       height: 100vh;
 
-      .lib-menu-bar-item {
-        width: 50px;
-        height: 50px;
+      .side-bar-menu-item {
+        width: 85px;
+        min-height: 85px;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         position: relative;
 
-        .lib-menu-tooltip {
-          position: absolute;
-          top: 0;
-          left: -250px;
-          box-sizing: border-box;
-          padding: 0 10px;
-          line-height: 50px;
+        @include cfg.default-icon(25px, 25px, #333);
+
+        .side-bar-menu-text {
+          font-size: 13px;
+          text-align: center;
         }
 
         &:hover {
-          .lib-menu-tooltip {
-            left: 50px;
-          }
+          @include cfg.default-icon(25px, 25px, #da9803);
         }
       }
+
+      .side-bar-menu-item-active {
+        @include cfg.default-icon(25px, 25px, #da9803);
+      }
+
+      .side-bar-menu-item-disabled {
+        @include cfg.default-icon(25px, 25px, #eee);
+      }
     }
   }
 }

package/lib/component/side-bar-menu/style/_theme.scss

@@ -1,19 +1,6 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-side-bar-menu-theme') {
-  .co-side-bar-menu {
-    .lib-menu-bar {
-      background-color: var(--co-inphoto-loader-background-dark);
+@include cfg.export-module('co-side-bar-menu-theme') {
 
-      .lib-menu-bar-item {
-        .lib-menu-tooltip {
-          background-color: var(--co-inphoto-loader-background-dark);
-          color: var(--co-inphoto-color-light);
-        }
-
-        @include default-icon(40px, 40px, #fff);
-      }
-    }
-  }
 }
 

package/lib/component/threed-to-ai/style/_layout.scss

@@ -0,0 +1,38 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-threed-to-ai-layout') {
+  .threed-to-ai-container {
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+    box-sizing: border-box;
+    padding: 20px;
+    background: var(--co-inphoto-dialog-background-color);
+    border-radius: var(--co-inphoto-border-radius);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .threed-to-ai-icon {
+      margin-right: 10px;
+      @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color))
+    }
+
+    .threed-to-ai-body {
+      .threed-to-ai-body-head {
+        font-weight: bold;
+        font-size: var(--co-inphoto-font-size-text);
+      }
+
+      .threed-to-ai-body-text {
+        font-size: var(--co-inphoto-font-size-label);
+      }
+    }
+
+    &:hover {
+      .threed-to-ai-icon {
+        @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-color))
+      }
+    }
+  }
+}

package/lib/component/threed-to-ai/style/_material-definition.scss

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

package/lib/component/threed-to-ai/style/_theme.scss

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

package/lib/component/threed-to-ai/style/material.scss

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

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

@@ -1,50 +1,21 @@
-@import "../../../style/mixin.scss";
-
-@include export-module('co-threedscene-layout') {
-  .co-threedscene {
-
-
-    .co-product-configurator {
-      .product-configurator-container {
-        top: 10px;
-        height: calc(100% - 20px);
-        max-height: calc(100% - 20px);
-        border: 1px solid #000;
-
-        .product-configurator-details {
-          overflow-x: hidden;
-        }
-      }
-    }
-
+@use '../../../style' as cfg;
 
+@include cfg.export-module('co-inphoto-threed-scene-layout') {
+  .co-inphoto-threed-scene {
     .threed-container {
-      display: flex;
-      gap: 20px;
-
       .scene-container {
-        width: 70%;
-
         .three-container {
           width: 100%;
           height: 100%;
-          min-height: 500px;
-        }
-      }
-    }
-
-    .scene-info-container {
-      width: 30%;
-
-      .info-container {
-        box-sizing: border-box;
-        padding: 10px;
-
-        .header-icon-container {
-          margin-bottom: 10px;
-          display: flex;
-          align-items: center;
-          gap: 10px;
+          min-height: 100vh;
+          min-width: 100vw;
+
+          canvas {
+            width: 100%;
+            height: 100%;
+            min-height: 100vh;
+            min-width: 100vw;
+          }
         }
       }
     }

package/lib/component/threedscene/style/_theme.scss

@@ -1,38 +1,8 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-threedscene-theme') {
-  .co-threedscene {
-    .scene-info-container {
-      .info-container {
-        .header-icon-container {
-          margin-bottom: 10px;
-          h2 {
-            font-size: var(--co-inphoto-font-size-head);
-            color: var(--co-inphoto-color-dark);
-          }
-        }
+@include cfg.export-module('co-inphoto-threed-scene-theme') {
+  .co-inphoto-threed-scene {
 
-        p {
-          font-size: var(--co-inphoto-font-size-label);
-          color: var(--co-inphoto-color-dark);
-        }
-
-        .action-button {
-          margin: 20px 0;
-          @include action-button(
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-background),
-                          var(--co-inphoto-action-button-color),
-                          var(--co-inphoto-action-button-font-size),
-                          var(--co-inphoto-action-button-icon-size),
-                          var(--co-inphoto-action-button-icon-color),
-                          var(--co-inphoto-action-button-border),
-                          var(--co-inphoto-action-button-radius),
-                          var(--co-inphoto-action-button-padding)
-          )
-        }
-      }
-    }
   }
 }
 

package/lib/component/upload-starting-image/style/_layout.scss

@@ -1,44 +1,53 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-upload-starting-image-layout') {
+@include cfg.export-module('co-upload-starting-image-layout') {
   .co-upload-starting-image {
+
     .upload-starting-container {
       display: flex;
-      gap: 20px;
-      .upload-starting-image-container {
-        width: 70%;
-        .image-preview {
-          border-radius: 10px;
-          width: 100%;
-          height: 100%;
-          img {
-            border-radius: 10px;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-          }
+      justify-content: space-around;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      min-height: 100vh;
+
+      .upload-image-dialog {
+        width: 100%;
+        max-width: 680px;
+        box-sizing: border-box;
+        position: relative;
+
+        .close-click {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+        }
+
+        .upload-image-dialog-header {
+          max-width: 500px;
+          display: flex;
+          justify-self: center;
+          flex-direction: column;
+          align-items: center;
         }
       }
 
-      .upload-starting-info-container {
-        width: 30%;
-        .info-container {
-          box-sizing: border-box;
-          padding: 10px;
+      .image-upload-container {
+        max-width: 500px;
+        display: flex;
+        justify-self: center;
+      }
 
-          .header-icon-container {
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-          }
+      .image-upload-button-container {
+        .inphoto-cancel-button {
+          display: block;
+          box-sizing: border-box;
+          max-width: 230px;
+          text-align: center;
+          margin: 10px auto;
+          cursor: pointer;
         }
       }
     }
-
-    .co-button.disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
   }
 }

package/lib/component/upload-starting-image/style/_theme.scss

@@ -1,25 +1,43 @@
-@import "../../../style/mixin.scss";
+@use '../../../style' as cfg;
 
-@include export-module('co-upload-starting-image-theme') {
+@include cfg.export-module('co-upload-starting-image-theme') {
   .co-upload-starting-image {
     .upload-starting-container {
+      background-color: #eee;
 
-      .upload-starting-info-container {
-        .info-container {
-          .header-icon-container {
-            margin-bottom: 10px;
-            h2 {
-              font-size: var(--co-inphoto-font-size-head);
-              color: var(--co-inphoto-color-dark);
-            }
+      .upload-image-dialog {
+        background: var(--co-inphoto-dialog-background-color);
+        padding: 25px 50px;
+        border-radius: var(--co-inphoto-border-radius);
+
+
+        .upload-image-dialog-header {
+          margin-bottom: 30px;
+
+          .header-icon {
+            margin: 0 0 15px;
+            @include cfg.default-icon(var(--co-inphoto-icon-header), var(--co-inphoto-icon-header), var(--co-inphoto-accent-color));
           }
 
-          p {
-            font-size: var(--co-inphoto-font-size-label);
-            color: var(--co-inphoto-color-dark);
+          .header-text {
+            @include cfg.header-text();
           }
         }
       }
+
+      .image-upload-button-container {
+        .inphoto-cancel-button {
+          margin: 10px auto;
+          background-color: var(--co-inphoto-button-background);
+          color: var(--co-inphoto-button-color);
+          font-size: var(--co-inphoto-button-font-size);
+          border: var(--co-inphoto-button-border);
+          border-radius: var(--co-inphoto-button-radius);
+          font-weight: var(--co-inphoto-button-weight);
+          padding: 10px 15px;
+          @include cfg.default-icon(var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-color))
+        }
+      }
     }
   }
 }

package/lib/style/_index.scss

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

package/lib/style/_mixin.scss

@@ -46,7 +46,35 @@ $imported-modules: () !default;
     svg {
       path, polygon, rect {
         fill: $color;
+        transition: fill 0.15s ease;
       }
     }
   }
 }
+
+@mixin header-text() {
+  font-size: var(--co-inphoto-font-size-head);
+  color: var(--co-inphoto-color-dark);
+  font-weight: 600;
+  line-height: 175%;
+}
+
+@mixin sub-header-text() {
+  font-size: var(--co-inphoto-font-size-sub-head);
+  color: var(--co-inphoto-color-dark);
+  font-weight: 600;
+  line-height: 125%;
+}
+
+@mixin sub-header-light() {
+  font-size: var(--co-inphoto-font-size-sub-head);
+  color: var(--co-inphoto-accent-text);
+  line-height: 125%;
+}
+
+@mixin text() {
+  font-size: var(--co-inphoto-font-size-text);
+  color: var(--co-inphoto-color-dark);
+  line-height: 125%;
+
+}

package/lib/style/_variables.scss

@@ -6,8 +6,13 @@
 
   */
 
-  /* Background for dialogs etc */
-  --co-inphoto-dialog-background-color: #ffffff;
+  --co-inphoto-accent-color: #D29428;
+  --co-inphoto-success-color: #1C9C21;
+  --co-inphoto-border-radius: 15px;
+  --co-inphoto-dialog-background-color: #FAF8F7;
+  --co-inphoto-background-white: #ffffff;
+  --co-inphoto-border-color: #D9D9DF;
+  --co-inphoto-header-icon-background: #DEF1DD;
 
   /* Icon */
   --co-inphoto-icon-color: #000;
@@ -15,47 +20,47 @@
   --co-inphoto-icon-size: 24px;
   --co-inphoto-icon-size-small: 16px;
   --co-inphoto-icon-size-large: 32px;
+  --co-inphoto-icon-header: 40px;
 
   /* Text related stuff */
-  --co-inphoto-font-size-label: 14px;
-  --co-inphoto-font-size-base: 16px;
-  --co-inphoto-font-size-sub-head: 28px;
-  --co-inphoto-font-size-head: 20px;
-  --co-inphoto-color-dark: #333333;
+
+  /** Main head **/
+  --co-inphoto-font-size-label: 12px;
+  --co-inphoto-font-size-text: 15px;
+  --co-inphoto-font-size-sub-head: 18px;
+  --co-inphoto-font-size-head: 24px;
+  --co-inphoto-color-dark: #000000;
+  --co-inphoto-accent-text: #64748B;
   --co-inphoto-color-light: #ffffff;
 
   /* Buttons related stuff */
 
-  --co-inphoto-next-button-background: #1a73e8;
-  --co-inphoto-next-button-color: #fff;
-  --co-inphoto-next-button-font-size: 15px;
-  --co-inphoto-next-button-icon-size: 24px;
-  --co-inphoto-next-button-icon-color: #fff;
-  --co-inphoto-next-button-border: 1px solid #1A73E8;
-  --co-inphoto-next-button-radius: 3px;
-  --co-inphoto-next-button-padding: 15px 20px;
-
-  --co-inphoto-prev-button-background: #313854;
-  --co-inphoto-prev-button-color: #fff;
-  --co-inphoto-prev-button-font-size: 15px;
-  --co-inphoto-prev-button-icon-size: 24px;
-  --co-inphoto-prev-button-icon-color: #fff;
-  --co-inphoto-prev-button-border: 1px solid #313854;
-  --co-inphoto-prev-button-radius: 3px;
-  --co-inphoto-prev-button-padding: 15px 20px;
-
+  --co-inphoto-button-background: #fff;
+  --co-inphoto-button-color: #6B7280;
+  --co-inphoto-button-font-size: 16px;
+  --co-inphoto-button-icon-size: 24px;
+  --co-inphoto-button-icon-color: #333;
+  --co-inphoto-button-border: 1px solid #ECEDEE;
+  --co-inphoto-button-radius: 8px;
+  --co-inphoto-button-padding: 8px;
+  --co-inphoto-button-weight: bold;
 
-  --co-inphoto-loader-background-dark: rgba(0, 0, 0, 0.5);
-  --co-inphoto-loader-background-light: rgba(255, 255, 255, 0.5);
+  --co-inphoto-active-button-background: #1a73e8;
+  --co-inphoto-active-button-color: #fff;
 
 
-  --co-inphoto-action-button-background: #fff;
-  --co-inphoto-action-button-color: #1A73E8;
+  --co-inphoto-action-button-background: #D29428;
+  --co-inphoto-action-button-color: #fff;
   --co-inphoto-action-button-font-size: 15px;
   --co-inphoto-action-button-icon-size: 24px;
-  --co-inphoto-action-button-icon-color: #1A73E8;
-  --co-inphoto-action-button-border: 1px solid #1A73E8;
-  --co-inphoto-action-button-radius: 3px;
-  --co-inphoto-action-button-padding: 15px 20px;
+  --co-inphoto-action-button-icon-color: #fff;
+  --co-inphoto-action-button-border: 2px solid #D29428;
+  --co-inphoto-action-button-radius: 8px;
+  --co-inphoto-action-button-padding: 8px;
+
+  --co-inphoto-cancel-button-border-color: #ccc;
+
+  --co-inphoto-loader-background-dark: rgba(0, 0, 0, 0.5);
+  --co-inphoto-loader-background-light: rgba(255, 255, 255, 0.5);
 
 }

package/lib/style/inphoto-globals.scss

@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+* {
+  font-family: Inter,sans-serif;
+}
+
+html, body {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/inphoto",
-  "version": "262.1.1",
+  "version": "300.1.1",
   "description": "Colijn IT inphoto module for Angular 20",
   "repository": "npm/npm",
   "author": "Colijn IT",
@@ -9,11 +9,11 @@
   "peerDependencies": {
     "@angular/common": ">=20.3.16",
     "@angular/core": ">=20.3.16",
-    "@colijnit/articleapi": ">=262.1.0",
-    "@colijnit/configuratorapi": ">=262.1.0",
-    "@colijnit/corecomponents_v12": ">=262.1.0",
-    "@colijnit/ioneconnector": ">=262.1.0",
-    "@colijnit/mainapi": ">=262.1.0",
+    "@colijnit/articleapi": ">=300.1.0",
+    "@colijnit/configuratorapi": ">=300.1.0",
+    "@colijnit/corecomponents_v12": ">=300.1.0",
+    "@colijnit/ioneconnector": ">=300.1.0",
+    "@colijnit/mainapi": ">=300.1.0",
     "@types/three": "0.178.1",
     "three": "0.178.0"
   },

package/lib/component/model-list/style/_layout.scss

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

package/lib/component/model-list/style/_theme.scss

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

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

@@ -1,4 +0,0 @@
-:root {
-  --co-model-list-item-border-color: #eee;
-  --co-model-list-item-border-radius: 10px;
-}