@colijnit/inphoto 300.1.3 → 300.1.4

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

@@ -2,8 +2,41 @@
 
 @include cfg.export-module('co-segment-inpaint-theme') {
   .co-segment-inpaint {
+    .inpaint-container {
+      .inpaint-info {
+        background: var(--co-inphoto-dialog-background-color);
+      }
+      .inpaint-info-dialog-container {
+        .header-icon {
+          background: var(--co-inphoto-prepare-icon-background);
+          color: var(--co-inphoto-accent-color);
+          @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-color));
+        }
 
+      }
+      .restart-button-container {
+        border-top: 1px solid #eee;
 
+        .co-button {
+          @include cfg.action-button(
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-background),
+                  var(--co-inphoto-button-color),
+                  var(--co-inphoto-button-font-size),
+                  var(--co-inphoto-button-icon-size),
+                  var(--co-inphoto-button-icon-color),
+                  var(--co-inphoto-button-border),
+                  var(--co-inphoto-button-radius),
+                  var(--co-inphoto-button-padding)
+          );
+
+          .label {
+            margin-left: 15px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
   }
 }
 

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

@@ -0,0 +1,57 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-step-tile-layout') {
+  .co-step-tile {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .button-container {
+      display: flex;
+      gap: 10px;
+
+      .image-container {
+        max-width: 185px;
+      }
+
+      .number-container {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        justify-self: center;
+        align-items: center;
+        justify-content: space-around;
+        background: var(--co-inphoto-accent-color);
+        color: var(--co-inphoto-icon-color-light);
+      }
+
+      .button-container-text-container {
+        box-sizing: border-box;
+
+        .tile-head-new-container {
+          margin-bottom: 10px;
+        }
+
+        .tile-next-icon {
+          width: 45px;
+          height: 45px;
+          display: flex;
+          align-items: center;
+          position: absolute;
+          bottom: 8px;
+          right: 8px;
+
+          .co-icon {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+}

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

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

package/lib/component/step-tile/style/_theme.scss

@@ -0,0 +1,89 @@
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-step-tile-theme') {
+  .co-step-tile {
+    border-radius: var(--co-inphoto-border-radius);
+    background: var(--co-inphoto-background-white);
+    border: 1px solid var(--co-inphoto-border-color);
+    box-shadow: var(--co-inphoto-dialog-box-shadow);
+    box-sizing: border-box;
+    padding: 8px;
+
+    .button-container {
+
+      .image-container {
+        border-radius: var(--co-inphoto-border-radius);
+        overflow: hidden;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          border-radius: var(--co-inphoto-border-radius);
+        }
+      }
+
+      .button-container-text-container {
+        padding: 16px 8px 40px;
+
+        .tile-head {
+          @include cfg.sub-header-text();
+          margin-bottom: 10px;
+        }
+
+        .tile-text {
+          @include cfg.text();
+        }
+
+        .tile-head-new-container {
+
+          .text-head-new {
+            margin-left: 10px;
+            box-sizing: border-box;
+            padding: 4px 12px;
+            border-radius: var(--co-inphoto-border-radius);
+            background: var(--co-inphoto-header-icon-background);
+            color: var(--co-inphoto-success-color);
+            font-size: var(--co-inphoto-font-size-label);
+            font-weight: bold;
+          }
+        }
+
+        .tile-next-icon {
+          border-radius: 50%;
+          background: var(--co-inphoto-dialog-background-color);
+          @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-accent-text));
+        }
+      }
+
+      &:hover {
+        border-color: var(--co-inphoto-accent-color);
+      }
+    }
+
+
+    .step-tile-button {
+      .co-button {
+        display: flex;
+        width: 100%;justify-content: space-around;
+        color: var(--co-inphoto-action-button-color);
+      }
+      @include cfg.action-button(
+              var(--co-inphoto-active-button-background),
+              var(--co-inphoto-active-button-background),
+              var(--co-inphoto-active-button-color),
+              var(--co-inphoto-action-button-font-size),
+              var(--co-inphoto-action-button-icon-size),
+              var(--co-inphoto-action-button-icon-color),
+              2px solid var(--co-inphoto-active-button-background),
+              var(--co-inphoto-action-button-radius),
+              0);
+
+      border: none;
+    }
+
+  }
+}
+
+
+

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

@@ -7,32 +7,13 @@
     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/_theme.scss

@@ -1,6 +1,30 @@
 @use '../../../style' as cfg;
 
 @include cfg.export-module('co-threed-to-ai-theme') {
+  .threed-to-ai-container {
+    background: var(--co-inphoto-dialog-background-color);
+    border-radius: var(--co-inphoto-border-radius);
 
+    .threed-to-ai-icon {
+      @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/threedscene/style/_layout.scss

@@ -17,11 +17,21 @@
           canvas {
             width: 100%;
             height: 100%;
-            //min-height: 100vh;
-            //min-width: 100vw;
           }
         }
       }
     }
+
+
+    .co-configurator {
+      .floating {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        width: 100%;
+        max-width: 500px;
+        overflow: hidden;
+      }
+    }
   }
 }

package/lib/style/_variables.scss

@@ -40,6 +40,7 @@
   --co-inphoto-button-color: #172121;
   --co-inphoto-button-font-size: 12px;
   --co-inphoto-button-icon-size: 24px;
+  --co-inphoto-button-small-icon-size: 18px;
   --co-inphoto-button-icon-color: #333;
   --co-inphoto-button-border: 1px solid #ECEDEE;
   --co-inphoto-button-radius: 8px;

package/lib/style/inphoto-globals.scss

@@ -2,6 +2,7 @@
 
 * {
   font-family: Inter,sans-serif;
+  box-sizing: border-box;
 }
 
 html, body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/inphoto",
-  "version": "300.1.3",
+  "version": "300.1.4",
   "description": "Colijn IT inphoto module for Angular 20",
   "repository": "npm/npm",
   "author": "Colijn IT",

package/lib/component/image-process-complete/components/image-process-complete-next/style/_layout.scss

@@ -1,45 +0,0 @@
-@use '../../../../../style' as cfg;
-
-@include cfg.export-module('co-image-process-complete-next-layout') {
-  .co-image-process-complete-next {
-    flex: 1;
-
-    .image-process-complete-next {
-      .image-process-complete-dialog-next-step {
-        background: var(--co-inphoto-background-white);
-        display: flex;
-        align-items: start;
-        justify-content: space-between;
-        border: 1px solid var(--co-inphoto-next-stop-border-color);
-        box-sizing: border-box;
-        padding: 10px;
-        border-radius: var(--co-inphoto-border-radius);
-        cursor: pointer;
-        min-height: 100px;
-
-        &:hover {
-          border-color: var(--co-inphoto-accent-color);
-        }
-
-        .next-step-icon {
-          margin-right: 15px;
-        }
-
-        .next-body {
-          .next-body-head {
-            @include cfg.sub-header-text();
-            margin-bottom: 15px;
-          }
-
-          .next-body-text {
-            @include cfg.text();
-          }
-        }
-
-        .next-step-continue {
-          margin-left: auto;
-        }
-      }
-    }
-  }
-}

package/lib/component/image-process-complete/components/image-process-complete-next/style/_material-definition.scss

@@ -1,3 +0,0 @@
-:root {
-  --co-inphoto-next-stop-border-color: #ECEDEE;
-}

package/lib/component/image-process-complete/components/image-process-complete-next/style/_theme.scss

@@ -1,10 +0,0 @@
-@use '../../../../../style' as cfg;
-
-@include cfg.export-module('co-image-process-complete-next-theme') {
-  .co-image-process-complete-next {
-
-  }
-}
-
-
-

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_layout.scss

@@ -1,49 +0,0 @@
-@use '../../../../../style' as cfg;
-
-@include cfg.export-module('co-inpaint-info-card-layout') {
-  .co-inpaint-info-card {
-    flex: 1;
-
-    .inpaint-info-container {
-      display: flex;
-      justify-content: space-between;
-
-      .number-container {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        display: flex;
-        justify-self: center;
-        align-items: center;
-        justify-content: space-around;
-        background: var(--co-inphoto-accent-color);
-        color: var(--co-inphoto-icon-color-light);
-      }
-
-      .col-right {
-        box-sizing: border-box;
-        padding: 0 4px 4px 15px;
-
-        .card-icon {
-          width: 50px;
-          height: 50px;
-          background: var(--co-inphoto-info-dialog-icon-bg);
-          display: flex;
-          align-items: center;
-          justify-content: space-around;
-          margin-bottom: 10px;
-          border-radius: 4px;
-        }
-
-        .card-title {
-          @include cfg.sub-header-text();
-          margin-bottom: 10px;
-        }
-
-        .card-description {
-          @include cfg.text()
-        }
-      }
-    }
-  }
-}

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

@@ -1,3 +0,0 @@
-:root {
-  --co-inphoto-info-dialog-icon-bg: #EEE;
-}

package/lib/component/segment-inpaint/components/inpaint-info-card/style/_theme.scss

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