@colijnit/inphoto 300.1.9 → 301.1.0

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

@@ -1,78 +1,78 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-step-tile-theme') {
-  .co-step-tile {
-    font-family: var(--co-inphoto-step-tile-font-family);
-    font-size: var(--co-inphoto-step-tile-font-size-text);
-    border-radius: var(--co-inphoto-border-radius);
-    background: var(--co-inphoto-background-white);
-    border: var(--co-inphoto-step-tile-border);
-    box-shadow: var(--co-inphoto-dialog-box-shadow);
-    padding: var(--co-inphoto-step-tile-padding);
-
-    .button-container {
-      .number-container {
-        border-radius: var(--co-inphoto-step-tile-circle-radius);
-        background: var(--co-inphoto-accent-color);
-        color: var(--co-inphoto-icon-color-light);
-      }
-
-      .image-container {
-        border-radius: var(--co-inphoto-border-radius);
-        overflow: hidden;
-
-        img {
-          width: var(--co-inphoto-step-tile-image-full-size);
-          height: var(--co-inphoto-step-tile-image-full-size);
-          object-fit: contain;
-          border-radius: var(--co-inphoto-border-radius);
-        }
-      }
-
-      .button-container-text-container {
-        padding: var(--co-inphoto-step-tile-button-container-padding);
-
-        .tile-head {
-          @include cfg.sub-header-text();
-          margin: var(--co-inphoto-step-tile-button-container-head-margin);
-        }
-
-        .tile-text {
-          @include cfg.text();
-        }
-
-        .tile-next-icon {
-          border-radius: var(--co-inphoto-step-tile-circle-radius);
-          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: var(--co-inphoto-step-tile-button-full-width);
-        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),
-              var(--co-inphoto-step-tile-button-border),
-              var(--co-inphoto-action-button-radius),
-              var(--co-inphoto-step-tile-button-zero));
-
-      border: var(--co-inphoto-step-tile-button-border-none);
-    }
-
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-step-tile-theme') {
+  .co-step-tile {
+    font-family: var(--co-inphoto-step-tile-font-family);
+    font-size: var(--co-inphoto-step-tile-font-size-text);
+    border-radius: var(--co-inphoto-border-radius);
+    background: var(--co-inphoto-background-white);
+    border: var(--co-inphoto-step-tile-border);
+    box-shadow: var(--co-inphoto-dialog-box-shadow);
+    padding: var(--co-inphoto-step-tile-padding);
+
+    .button-container {
+      .number-container {
+        border-radius: var(--co-inphoto-step-tile-circle-radius);
+        background: var(--co-inphoto-accent-color);
+        color: var(--co-inphoto-icon-color-light);
+      }
+
+      .image-container {
+        border-radius: var(--co-inphoto-border-radius);
+        overflow: hidden;
+
+        img {
+          width: var(--co-inphoto-step-tile-image-full-size);
+          height: var(--co-inphoto-step-tile-image-full-size);
+          object-fit: contain;
+          border-radius: var(--co-inphoto-border-radius);
+        }
+      }
+
+      .button-container-text-container {
+        padding: var(--co-inphoto-step-tile-button-container-padding);
+
+        .tile-head {
+          @include cfg.sub-header-text();
+          margin: var(--co-inphoto-step-tile-button-container-head-margin);
+        }
+
+        .tile-text {
+          @include cfg.text();
+        }
+
+        .tile-next-icon {
+          border-radius: var(--co-inphoto-step-tile-circle-radius);
+          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: var(--co-inphoto-step-tile-button-full-width);
+        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),
+              var(--co-inphoto-step-tile-button-border),
+              var(--co-inphoto-action-button-radius),
+              var(--co-inphoto-step-tile-button-zero));
+
+      border: var(--co-inphoto-step-tile-button-border-none);
+    }
+
+  }
+}

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

@@ -1,57 +1,57 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-inphoto-threed-scene-layout') {
-  .co-inphoto-threed-scene {
-    .threed-container {
-      display: flex;
-      width: var(--co-inphoto-threed-scene-container-full-size);
-      height: var(--co-inphoto-threed-scene-container-full-size);
-      min-height: var(--co-inphoto-threed-scene-full-viewport-height);
-      align-items: flex-start;
-
-      .scene-container {
-        width: var(--co-inphoto-left-container-width);
-        height: var(--co-inphoto-threed-scene-container-full-size);
-
-
-        .three-container {
-          display: inline-flex;
-          padding: var(--co-inphoto-threed-scene-canvas-container-padding);
-          margin: var(--co-inphoto-threed-scene-canvas-container-margin);
-          position: relative;
-
-          canvas {
-            display: block;
-            max-width: var(--co-inphoto-threed-scene-container-full-size);
-            max-height: var(--co-inphoto-threed-scene-canvas-max-height);
-          }
-        }
-      }
-    }
-
-    .threed-sidepanel {
-      width: var(--co-inphoto-right-container-width);
-      height: var(--co-inphoto-threed-scene-full-viewport-height);
-
-      .theed-sidepanel-tile-group {
-        display: flex;
-        gap: var(--co-inphoto-threed-scene-sidepanel-tile-group-gap);
-
-        .co-step-tile {
-          flex: 1;
-
-          .button-container {
-            display: block;
-
-            .image-container {
-              --co-inphoto-step-tile-image-size: var(--co-inphoto-threed-scene-sidepanel-tile-image-size);
-            }
-            .button-container-text-container {
-              --co-inphoto-step-tile-button-container-padding: var(--co-inphoto-threed-scene-sidepanel-tile-container-padding);
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-inphoto-threed-scene-layout') {
+  .co-inphoto-threed-scene {
+    .threed-container {
+      display: flex;
+      width: var(--co-inphoto-threed-scene-container-full-size);
+      height: var(--co-inphoto-threed-scene-container-full-size);
+      min-height: var(--co-inphoto-threed-scene-full-viewport-height);
+      align-items: flex-start;
+
+      .scene-container {
+        width: var(--co-inphoto-left-container-width);
+        height: var(--co-inphoto-threed-scene-container-full-size);
+
+
+        .three-container {
+          display: inline-flex;
+          padding: var(--co-inphoto-threed-scene-canvas-container-padding);
+          margin: var(--co-inphoto-threed-scene-canvas-container-margin);
+          position: relative;
+
+          canvas {
+            display: block;
+            max-width: var(--co-inphoto-threed-scene-container-full-size);
+            max-height: var(--co-inphoto-threed-scene-canvas-max-height);
+          }
+        }
+      }
+    }
+
+    .threed-sidepanel {
+      width: var(--co-inphoto-right-container-width);
+      height: var(--co-inphoto-threed-scene-full-viewport-height);
+
+      .theed-sidepanel-tile-group {
+        display: flex;
+        gap: var(--co-inphoto-threed-scene-sidepanel-tile-group-gap);
+
+        .co-step-tile {
+          flex: 1;
+
+          .button-container {
+            display: block;
+
+            .image-container {
+              --co-inphoto-step-tile-image-size: var(--co-inphoto-threed-scene-sidepanel-tile-image-size);
+            }
+            .button-container-text-container {
+              --co-inphoto-step-tile-button-container-padding: var(--co-inphoto-threed-scene-sidepanel-tile-container-padding);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/threedscene/style/_material-definition.scss

@@ -1,12 +1,12 @@
-.co-inphoto-threed-scene {
-  --co-inphoto-threed-scene-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-threed-scene-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-threed-scene-container-full-size: 100%;
-  --co-inphoto-threed-scene-full-viewport-height: 100vh;
-  --co-inphoto-threed-scene-canvas-container-padding: 20px;
-  --co-inphoto-threed-scene-canvas-container-margin: 20px;
-  --co-inphoto-threed-scene-canvas-max-height: calc(100vh - 40px);
-  --co-inphoto-threed-scene-sidepanel-tile-group-gap: 10px;
-  --co-inphoto-threed-scene-sidepanel-tile-image-size: 100%;
-  --co-inphoto-threed-scene-sidepanel-tile-container-padding: 5px;
-}
+.co-inphoto-threed-scene {
+  --co-inphoto-threed-scene-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-threed-scene-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-threed-scene-container-full-size: 100%;
+  --co-inphoto-threed-scene-full-viewport-height: 100vh;
+  --co-inphoto-threed-scene-canvas-container-padding: 20px;
+  --co-inphoto-threed-scene-canvas-container-margin: 20px;
+  --co-inphoto-threed-scene-canvas-max-height: calc(100vh - 40px);
+  --co-inphoto-threed-scene-sidepanel-tile-group-gap: 10px;
+  --co-inphoto-threed-scene-sidepanel-tile-image-size: 100%;
+  --co-inphoto-threed-scene-sidepanel-tile-container-padding: 5px;
+}

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

@@ -1,17 +1,17 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-inphoto-threed-scene-theme') {
-  .co-inphoto-threed-scene {
-    font-family: var(--co-inphoto-threed-scene-font-family);
-    font-size: var(--co-inphoto-threed-scene-font-size-text);
-
-    .threed-container {
-      .scene-container {
-        .three-container {
-          background: var(--co-inphoto-background-white);
-          box-shadow: var(--co-inphoto-container-box-shadow);
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-inphoto-threed-scene-theme') {
+  .co-inphoto-threed-scene {
+    font-family: var(--co-inphoto-threed-scene-font-family);
+    font-size: var(--co-inphoto-threed-scene-font-size-text);
+
+    .threed-container {
+      .scene-container {
+        .three-container {
+          background: var(--co-inphoto-background-white);
+          box-shadow: var(--co-inphoto-container-box-shadow);
+        }
+      }
+    }
+  }
+}

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

@@ -1,58 +1,58 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-upload-starting-image-layout') {
-  .co-upload-starting-image {
-
-    .upload-starting-container {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      width: var(--co-inphoto-upload-starting-image-full-size);
-      height: var(--co-inphoto-upload-starting-image-full-size);
-      min-height: var(--co-inphoto-upload-starting-image-min-height);
-
-      .upload-image-dialog {
-        width: var(--co-inphoto-upload-starting-image-full-size);
-        max-width: var(--co-inphoto-upload-starting-image-dialog-max-width);
-        position: var(--co-inphoto-upload-starting-image-position-relative);
-        padding: var(--co-inphoto-upload-starting-image-dialog-padding);
-
-        .close-click {
-          position: var(--co-inphoto-upload-starting-image-position-absolute);
-          right: var(--co-inphoto-upload-starting-image-close-offset);
-          top: var(--co-inphoto-upload-starting-image-close-offset);
-        }
-
-        .upload-image-dialog-header {
-          max-width: var(--co-inphoto-upload-starting-image-content-max-width);
-          display: flex;
-          justify-self: center;
-          flex-direction: column;
-          align-items: center;
-          margin-bottom: var(--co-inphoto-upload-starting-image-header-margin-bottom);
-
-          .header-icon {
-            margin: var(--co-inphoto-upload-starting-image-header-icon-margin);
-          }
-        }
-      }
-
-      .image-upload-container {
-        max-width: var(--co-inphoto-upload-starting-image-content-max-width);
-        display: flex;
-        justify-self: center;
-      }
-
-      .image-upload-button-container {
-        .inphoto-cancel-button {
-          display: block;
-          max-width: var(--co-inphoto-upload-starting-image-cancel-button-max-width);
-          text-align: center;
-          margin: var(--co-inphoto-upload-starting-image-cancel-button-margin);
-          cursor: pointer;
-          padding: var(--co-inphoto-upload-starting-image-cancel-button-padding);
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-upload-starting-image-layout') {
+  .co-upload-starting-image {
+
+    .upload-starting-container {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: var(--co-inphoto-upload-starting-image-full-size);
+      height: var(--co-inphoto-upload-starting-image-full-size);
+      min-height: var(--co-inphoto-upload-starting-image-min-height);
+
+      .upload-image-dialog {
+        width: var(--co-inphoto-upload-starting-image-full-size);
+        max-width: var(--co-inphoto-upload-starting-image-dialog-max-width);
+        position: var(--co-inphoto-upload-starting-image-position-relative);
+        padding: var(--co-inphoto-upload-starting-image-dialog-padding);
+
+        .close-click {
+          position: var(--co-inphoto-upload-starting-image-position-absolute);
+          right: var(--co-inphoto-upload-starting-image-close-offset);
+          top: var(--co-inphoto-upload-starting-image-close-offset);
+        }
+
+        .upload-image-dialog-header {
+          max-width: var(--co-inphoto-upload-starting-image-content-max-width);
+          display: flex;
+          justify-self: center;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: var(--co-inphoto-upload-starting-image-header-margin-bottom);
+
+          .header-icon {
+            margin: var(--co-inphoto-upload-starting-image-header-icon-margin);
+          }
+        }
+      }
+
+      .image-upload-container {
+        max-width: var(--co-inphoto-upload-starting-image-content-max-width);
+        display: flex;
+        justify-self: center;
+      }
+
+      .image-upload-button-container {
+        .inphoto-cancel-button {
+          display: block;
+          max-width: var(--co-inphoto-upload-starting-image-cancel-button-max-width);
+          text-align: center;
+          margin: var(--co-inphoto-upload-starting-image-cancel-button-margin);
+          cursor: pointer;
+          padding: var(--co-inphoto-upload-starting-image-cancel-button-padding);
+        }
+      }
+    }
+  }
+}

package/lib/component/upload-starting-image/style/_material-definition.scss

@@ -1,18 +1,18 @@
-.co-upload-starting-image {
-  --co-inphoto-upload-starting-image-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-upload-starting-image-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-upload-starting-image-background: #eee;
-  --co-inphoto-upload-starting-image-full-size: 100%;
-  --co-inphoto-upload-starting-image-min-height: 100vh;
-  --co-inphoto-upload-starting-image-dialog-max-width: 680px;
-  --co-inphoto-upload-starting-image-position-relative: relative;
-  --co-inphoto-upload-starting-image-position-absolute: absolute;
-  --co-inphoto-upload-starting-image-close-offset: 10px;
-  --co-inphoto-upload-starting-image-content-max-width: 500px;
-  --co-inphoto-upload-starting-image-cancel-button-max-width: 230px;
-  --co-inphoto-upload-starting-image-cancel-button-margin: 10px auto;
-  --co-inphoto-upload-starting-image-dialog-padding: 25px 50px;
-  --co-inphoto-upload-starting-image-header-margin-bottom: 30px;
-  --co-inphoto-upload-starting-image-header-icon-margin: 0 0 15px;
-  --co-inphoto-upload-starting-image-cancel-button-padding: 10px 15px;
-}
+.co-upload-starting-image {
+  --co-inphoto-upload-starting-image-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-upload-starting-image-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-upload-starting-image-background: #eee;
+  --co-inphoto-upload-starting-image-full-size: 100%;
+  --co-inphoto-upload-starting-image-min-height: 100vh;
+  --co-inphoto-upload-starting-image-dialog-max-width: 680px;
+  --co-inphoto-upload-starting-image-position-relative: relative;
+  --co-inphoto-upload-starting-image-position-absolute: absolute;
+  --co-inphoto-upload-starting-image-close-offset: 10px;
+  --co-inphoto-upload-starting-image-content-max-width: 500px;
+  --co-inphoto-upload-starting-image-cancel-button-max-width: 230px;
+  --co-inphoto-upload-starting-image-cancel-button-margin: 10px auto;
+  --co-inphoto-upload-starting-image-dialog-padding: 25px 50px;
+  --co-inphoto-upload-starting-image-header-margin-bottom: 30px;
+  --co-inphoto-upload-starting-image-header-icon-margin: 0 0 15px;
+  --co-inphoto-upload-starting-image-cancel-button-padding: 10px 15px;
+}

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

@@ -1,39 +1,39 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-upload-starting-image-theme') {
-  .co-upload-starting-image {
-    font-family: var(--co-inphoto-upload-starting-image-font-family);
-    font-size: var(--co-inphoto-upload-starting-image-font-size-text);
-
-    .upload-starting-container {
-      background-color: var(--co-inphoto-upload-starting-image-background);
-
-      .upload-image-dialog {
-        background: var(--co-inphoto-dialog-background-color);
-        border-radius: var(--co-inphoto-border-radius);
-
-        .upload-image-dialog-header {
-          .header-icon {
-            @include cfg.default-icon(var(--co-inphoto-icon-header), var(--co-inphoto-icon-header), var(--co-inphoto-accent-color));
-          }
-
-          .header-text {
-            @include cfg.header-text();
-          }
-        }
-      }
-
-      .image-upload-button-container {
-        .inphoto-cancel-button {
-          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);
-          @include cfg.default-icon(var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-color))
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-upload-starting-image-theme') {
+  .co-upload-starting-image {
+    font-family: var(--co-inphoto-upload-starting-image-font-family);
+    font-size: var(--co-inphoto-upload-starting-image-font-size-text);
+
+    .upload-starting-container {
+      background-color: var(--co-inphoto-upload-starting-image-background);
+
+      .upload-image-dialog {
+        background: var(--co-inphoto-dialog-background-color);
+        border-radius: var(--co-inphoto-border-radius);
+
+        .upload-image-dialog-header {
+          .header-icon {
+            @include cfg.default-icon(var(--co-inphoto-icon-header), var(--co-inphoto-icon-header), var(--co-inphoto-accent-color));
+          }
+
+          .header-text {
+            @include cfg.header-text();
+          }
+        }
+      }
+
+      .image-upload-button-container {
+        .inphoto-cancel-button {
+          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);
+          @include cfg.default-icon(var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-color))
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/inphoto",
-  "version": "300.1.9",
+  "version": "301.1.0",
   "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": ">=300.1.1",
-    "@colijnit/configuratorapi": ">=300.1.0",
-    "@colijnit/corecomponents_v12": ">=300.1.0",
-    "@colijnit/ioneconnector": ">=300.1.1",
-    "@colijnit/mainapi": ">=300.1.0",
+    "@colijnit/articleapi": ">=301.1.0",
+    "@colijnit/configuratorapi": ">=301.1.0",
+    "@colijnit/corecomponents_v12": ">=301.1.0",
+    "@colijnit/ioneconnector": ">=301.1.0",
+    "@colijnit/mainapi": ">=301.1.0",
     "@types/three": "0.178.1",
     "three": "0.178.0"
   },