@colijnit/inphoto 300.1.9 → 301.1.0

package/lib/component/image-history/style/_layout.scss

@@ -1,57 +1,57 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-history-layout') {
-  .co-image-history {
-    .image-history-container {
-      position: var(--co-inphoto-image-history-position-absolute);
-      bottom: var(--co-inphoto-image-history-container-bottom);
-      left: var(--co-inphoto-image-history-container-left);
-      padding: var(--co-inphoto-image-history-dialog-offset);
-    }
-
-    .image-history-card {
-      position: var(--co-inphoto-image-history-position-relative);
-      display: flex;
-      align-items: center;
-      max-width: var(--co-inphoto-image-history-card-max-width);
-    }
-
-    .image-history-tiles {
-      flex: 1 1 auto;
-      min-width: 0;
-      display: flex;
-      gap: var(--co-inphoto-image-history-gap);
-      overflow-x: auto;
-      overflow-y: hidden;
-      scroll-behavior: smooth;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-
-    .scroll-btn {
-      position: var(--co-inphoto-image-history-position-absolute);
-      top: var(--co-inphoto-image-history-vertical-center);
-      transform: var(--co-inphoto-image-history-vertical-translate);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--co-inphoto-image-history-button-size);
-      height: var(--co-inphoto-image-history-button-size);
-      padding: var(--co-inphoto-image-history-zero);
-      cursor: pointer;
-      z-index: var(--co-inphoto-image-history-button-z-index);
-
-      &-left {
-        left: var(--co-inphoto-image-history-button-edge-offset);
-      }
-
-      &-right {
-        right: var(--co-inphoto-image-history-button-edge-offset);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-history-layout') {
+  .co-image-history {
+    .image-history-container {
+      position: var(--co-inphoto-image-history-position-absolute);
+      bottom: var(--co-inphoto-image-history-container-bottom);
+      left: var(--co-inphoto-image-history-container-left);
+      padding: var(--co-inphoto-image-history-dialog-offset);
+    }
+
+    .image-history-card {
+      position: var(--co-inphoto-image-history-position-relative);
+      display: flex;
+      align-items: center;
+      max-width: var(--co-inphoto-image-history-card-max-width);
+    }
+
+    .image-history-tiles {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      gap: var(--co-inphoto-image-history-gap);
+      overflow-x: auto;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    .scroll-btn {
+      position: var(--co-inphoto-image-history-position-absolute);
+      top: var(--co-inphoto-image-history-vertical-center);
+      transform: var(--co-inphoto-image-history-vertical-translate);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--co-inphoto-image-history-button-size);
+      height: var(--co-inphoto-image-history-button-size);
+      padding: var(--co-inphoto-image-history-zero);
+      cursor: pointer;
+      z-index: var(--co-inphoto-image-history-button-z-index);
+
+      &-left {
+        left: var(--co-inphoto-image-history-button-edge-offset);
+      }
+
+      &-right {
+        right: var(--co-inphoto-image-history-button-edge-offset);
+      }
+    }
+  }
+}

package/lib/component/image-history/style/_material-definition.scss

@@ -1,20 +1,20 @@
-.co-image-history {
-  --co-inphoto-image-history-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-image-history-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-image-history-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  --co-inphoto-image-history-container-bottom: 10px;
-  --co-inphoto-image-history-container-left: 115px;
-  --co-inphoto-image-history-position-absolute: absolute;
-  --co-inphoto-image-history-position-relative: relative;
-  --co-inphoto-image-history-card-max-width: 675px;
-  --co-inphoto-image-history-gap: 10px;
-  --co-inphoto-image-history-button-size: 30px;
-  --co-inphoto-image-history-button-radius: 50%;
-  --co-inphoto-image-history-button-border: none;
-  --co-inphoto-image-history-zero: 0;
-  --co-inphoto-image-history-button-z-index: 2;
-  --co-inphoto-image-history-vertical-center: 50%;
-  --co-inphoto-image-history-vertical-translate: translateY(-50%);
-  --co-inphoto-image-history-button-edge-offset: -6px;
-  --co-inphoto-image-history-dialog-offset: 20px;
-}
+.co-image-history {
+  --co-inphoto-image-history-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-history-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-history-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --co-inphoto-image-history-container-bottom: 10px;
+  --co-inphoto-image-history-container-left: 115px;
+  --co-inphoto-image-history-position-absolute: absolute;
+  --co-inphoto-image-history-position-relative: relative;
+  --co-inphoto-image-history-card-max-width: 675px;
+  --co-inphoto-image-history-gap: 10px;
+  --co-inphoto-image-history-button-size: 30px;
+  --co-inphoto-image-history-button-radius: 50%;
+  --co-inphoto-image-history-button-border: none;
+  --co-inphoto-image-history-zero: 0;
+  --co-inphoto-image-history-button-z-index: 2;
+  --co-inphoto-image-history-vertical-center: 50%;
+  --co-inphoto-image-history-vertical-translate: translateY(-50%);
+  --co-inphoto-image-history-button-edge-offset: -6px;
+  --co-inphoto-image-history-dialog-offset: 20px;
+}

package/lib/component/image-history/style/_theme.scss

@@ -1,25 +1,25 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-history-theme') {
-  .co-image-history {
-    font-family: var(--co-inphoto-image-history-font-family);
-    font-size: var(--co-inphoto-image-history-font-size-text);
-
-    .image-history-container {
-      background: var(--co-inphoto-dialog-background-color);
-      border-radius: var(--co-inphoto-border-radius);
-    }
-
-    .image-history-card {
-      border-radius: var(--co-inphoto-border-radius);
-    }
-
-    .scroll-btn {
-      background: var(--co-inphoto-background-white);
-      box-shadow: var(--co-inphoto-image-history-box-shadow);
-      border: var(--co-inphoto-image-history-button-border);
-      border-radius: var(--co-inphoto-image-history-button-radius);
-      @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-history-theme') {
+  .co-image-history {
+    font-family: var(--co-inphoto-image-history-font-family);
+    font-size: var(--co-inphoto-image-history-font-size-text);
+
+    .image-history-container {
+      background: var(--co-inphoto-dialog-background-color);
+      border-radius: var(--co-inphoto-border-radius);
+    }
+
+    .image-history-card {
+      border-radius: var(--co-inphoto-border-radius);
+    }
+
+    .scroll-btn {
+      background: var(--co-inphoto-background-white);
+      box-shadow: var(--co-inphoto-image-history-box-shadow);
+      border: var(--co-inphoto-image-history-button-border);
+      border-radius: var(--co-inphoto-image-history-button-radius);
+      @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+    }
+  }
+}

package/lib/component/image-history-tile/style/_layout.scss

@@ -1,53 +1,53 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-history-tile-layout') {
-  .co-image-history-tile {
-    flex: 0 0 auto;
-    width: var(--co-inphoto-image-history-tile-width);
-
-    .image-history-item {
-      position: var(--co-inphoto-image-history-tile-position-relative);
-      width: var(--co-inphoto-image-history-tile-item-full-width);
-      height: var(--co-inphoto-image-history-tile-item-height);
-      overflow: hidden;
-      cursor: pointer;
-
-      img {
-        display: block;
-        width: var(--co-inphoto-image-history-tile-item-full-width);
-        height: var(--co-inphoto-image-history-tile-item-full-width);
-        object-fit: cover;
-      }
-
-      .tile-action {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--co-inphoto-image-history-tile-action-size);
-        height: var(--co-inphoto-image-history-tile-action-size);
-        opacity: var(--co-inphoto-image-history-tile-action-hidden-opacity);
-        z-index: var(--co-inphoto-image-history-tile-action-z-index);
-      }
-
-      &:hover .tile-action, .tile-action-select {
-        opacity: var(--co-inphoto-image-history-tile-action-visible-opacity);
-      }
-
-      .tile-action-select {
-        top: var(--co-inphoto-image-history-tile-action-offset);
-        right: var(--co-inphoto-image-history-tile-action-offset);
-      }
-
-      .tile-action-download {
-        bottom: var(--co-inphoto-image-history-tile-action-offset);
-        left: var(--co-inphoto-image-history-tile-action-offset);
-      }
-
-      .tile-action-remove {
-        bottom: var(--co-inphoto-image-history-tile-action-offset);
-        right: var(--co-inphoto-image-history-tile-action-offset);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-history-tile-layout') {
+  .co-image-history-tile {
+    flex: 0 0 auto;
+    width: var(--co-inphoto-image-history-tile-width);
+
+    .image-history-item {
+      position: var(--co-inphoto-image-history-tile-position-relative);
+      width: var(--co-inphoto-image-history-tile-item-full-width);
+      height: var(--co-inphoto-image-history-tile-item-height);
+      overflow: hidden;
+      cursor: pointer;
+
+      img {
+        display: block;
+        width: var(--co-inphoto-image-history-tile-item-full-width);
+        height: var(--co-inphoto-image-history-tile-item-full-width);
+        object-fit: cover;
+      }
+
+      .tile-action {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--co-inphoto-image-history-tile-action-size);
+        height: var(--co-inphoto-image-history-tile-action-size);
+        opacity: var(--co-inphoto-image-history-tile-action-hidden-opacity);
+        z-index: var(--co-inphoto-image-history-tile-action-z-index);
+      }
+
+      &:hover .tile-action, .tile-action-select {
+        opacity: var(--co-inphoto-image-history-tile-action-visible-opacity);
+      }
+
+      .tile-action-select {
+        top: var(--co-inphoto-image-history-tile-action-offset);
+        right: var(--co-inphoto-image-history-tile-action-offset);
+      }
+
+      .tile-action-download {
+        bottom: var(--co-inphoto-image-history-tile-action-offset);
+        left: var(--co-inphoto-image-history-tile-action-offset);
+      }
+
+      .tile-action-remove {
+        bottom: var(--co-inphoto-image-history-tile-action-offset);
+        right: var(--co-inphoto-image-history-tile-action-offset);
+      }
+    }
+  }
+}

package/lib/component/image-history-tile/style/_material-definition.scss

@@ -1,15 +1,15 @@
-.co-image-history-tile {
-  --co-inphoto-image-history-tile-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-image-history-tile-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-image-history-tile-width: 160px;
-  --co-inphoto-image-history-tile-position-relative: relative;
-  --co-inphoto-image-history-tile-item-full-width: 100%;
-  --co-inphoto-image-history-tile-item-height: 115px;
-  --co-inphoto-image-history-tile-action-size: 26px;
-  --co-inphoto-image-history-tile-action-radius: 50%;
-  --co-inphoto-image-history-tile-action-hidden-opacity: 0;
-  --co-inphoto-image-history-tile-action-visible-opacity: 1;
-  --co-inphoto-image-history-tile-action-transition: opacity 0.15s ease;
-  --co-inphoto-image-history-tile-action-z-index: 1;
-  --co-inphoto-image-history-tile-action-offset: 6px;
-}
+.co-image-history-tile {
+  --co-inphoto-image-history-tile-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-history-tile-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-history-tile-width: 160px;
+  --co-inphoto-image-history-tile-position-relative: relative;
+  --co-inphoto-image-history-tile-item-full-width: 100%;
+  --co-inphoto-image-history-tile-item-height: 115px;
+  --co-inphoto-image-history-tile-action-size: 26px;
+  --co-inphoto-image-history-tile-action-radius: 50%;
+  --co-inphoto-image-history-tile-action-hidden-opacity: 0;
+  --co-inphoto-image-history-tile-action-visible-opacity: 1;
+  --co-inphoto-image-history-tile-action-transition: opacity 0.15s ease;
+  --co-inphoto-image-history-tile-action-z-index: 1;
+  --co-inphoto-image-history-tile-action-offset: 6px;
+}

package/lib/component/image-history-tile/style/_theme.scss

@@ -1,32 +1,32 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-history-tile-theme') {
-
-  .co-image-history-tile {
-    font-family: var(--co-inphoto-image-history-tile-font-family);
-    font-size: var(--co-inphoto-image-history-tile-font-size-text);
-
-    .image-history-item {
-      border-radius: var(--co-inphoto-border-radius);
-
-      .tile-action {
-        color: var(--co-inphoto-background-white);
-        background: var(--co-inphoto-loader-background-light);
-        border-radius: var(--co-inphoto-image-history-tile-action-radius);
-        transition: var(--co-inphoto-image-history-tile-action-transition);
-        @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
-
-        &:hover {
-          background: var(--co-inphoto-accent-color);
-        }
-      }
-
-      &-selected {
-        .tile-action-select {
-          opacity: var(--co-inphoto-image-history-tile-action-visible-opacity);
-          background: var(--co-inphoto-accent-color);
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-history-tile-theme') {
+
+  .co-image-history-tile {
+    font-family: var(--co-inphoto-image-history-tile-font-family);
+    font-size: var(--co-inphoto-image-history-tile-font-size-text);
+
+    .image-history-item {
+      border-radius: var(--co-inphoto-border-radius);
+
+      .tile-action {
+        color: var(--co-inphoto-background-white);
+        background: var(--co-inphoto-loader-background-light);
+        border-radius: var(--co-inphoto-image-history-tile-action-radius);
+        transition: var(--co-inphoto-image-history-tile-action-transition);
+        @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color-light));
+
+        &:hover {
+          background: var(--co-inphoto-accent-color);
+        }
+      }
+
+      &-selected {
+        .tile-action-select {
+          opacity: var(--co-inphoto-image-history-tile-action-visible-opacity);
+          background: var(--co-inphoto-accent-color);
+        }
+      }
+    }
+  }
+}

package/lib/component/image-overlay/style/_layout.scss

@@ -1,84 +1,84 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-image-overlay-layout') {
-  .co-image-overlay {
-    position: var(--co-inphoto-image-overlay-position-fixed);
-    inset: var(--co-inphoto-image-overlay-inset-zero);
-    z-index: var(--co-inphoto-image-overlay-z-index);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .dialog-container {
-      position: var(--co-inphoto-image-overlay-position-relative);
-
-      .close-dialog-button, .dialog-prev-button, .dialog-next-button {
-        position: var(--co-inphoto-image-overlay-position-absolute);
-        cursor: pointer;
-        width: var(--co-inphoto-image-overlay-button-size);
-        height: var(--co-inphoto-image-overlay-button-size);
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-
-        .co-icon {
-          flex: 1
-        }
-      }
-
-      .close-dialog-button {
-        top: var(--co-inphoto-image-overlay-offset);
-        right: var(--co-inphoto-image-overlay-offset);
-      }
-
-      .dialog-prev-button {
-        left: var(--co-inphoto-image-overlay-offset);
-        top: var(--co-inphoto-image-overlay-vertical-center);
-      }
-
-      .dialog-next-button {
-        right: var(--co-inphoto-image-overlay-offset);
-        top: var(--co-inphoto-image-overlay-vertical-center);
-      }
-
-      .dialog-toolbar {
-        position: var(--co-inphoto-image-overlay-position-absolute);
-        bottom: var(--co-inphoto-image-overlay-offset);
-        right: var(--co-inphoto-image-overlay-offset);
-        display: flex;
-        gap: var(--co-inphoto-image-overlay-toolbar-gap);
-
-        .co-button {
-          display: flex;
-          cursor: pointer;
-          padding: var(--co-inphoto-image-overlay-toolbar-button-padding);
-
-          .label {
-            margin-left: var(--co-inphoto-image-overlay-toolbar-label-margin);
-          }
-        }
-
-        .options-menu {
-          position: var(--co-inphoto-image-overlay-position-relative);
-
-          .options-menu-list {
-            position: var(--co-inphoto-image-overlay-position-absolute);
-            bottom: var(--co-inphoto-image-overlay-menu-offset);
-            right: var(--co-inphoto-image-overlay-menu-right);
-            display: flex;
-            flex-direction: column;
-            gap: var(--co-inphoto-image-overlay-toolbar-gap);
-            padding: var(--co-inphoto-image-overlay-menu-padding);
-          }
-        }
-      }
-    }
-
-    .large-image {
-      max-width: var(--co-inphoto-image-overlay-image-max-width);
-      max-height: var(--co-inphoto-image-overlay-image-max-height);
-      object-fit: contain;
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-image-overlay-layout') {
+  .co-image-overlay {
+    position: var(--co-inphoto-image-overlay-position-fixed);
+    inset: var(--co-inphoto-image-overlay-inset-zero);
+    z-index: var(--co-inphoto-image-overlay-z-index);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .dialog-container {
+      position: var(--co-inphoto-image-overlay-position-relative);
+
+      .close-dialog-button, .dialog-prev-button, .dialog-next-button {
+        position: var(--co-inphoto-image-overlay-position-absolute);
+        cursor: pointer;
+        width: var(--co-inphoto-image-overlay-button-size);
+        height: var(--co-inphoto-image-overlay-button-size);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        .co-icon {
+          flex: 1
+        }
+      }
+
+      .close-dialog-button {
+        top: var(--co-inphoto-image-overlay-offset);
+        right: var(--co-inphoto-image-overlay-offset);
+      }
+
+      .dialog-prev-button {
+        left: var(--co-inphoto-image-overlay-offset);
+        top: var(--co-inphoto-image-overlay-vertical-center);
+      }
+
+      .dialog-next-button {
+        right: var(--co-inphoto-image-overlay-offset);
+        top: var(--co-inphoto-image-overlay-vertical-center);
+      }
+
+      .dialog-toolbar {
+        position: var(--co-inphoto-image-overlay-position-absolute);
+        bottom: var(--co-inphoto-image-overlay-offset);
+        right: var(--co-inphoto-image-overlay-offset);
+        display: flex;
+        gap: var(--co-inphoto-image-overlay-toolbar-gap);
+
+        .co-button {
+          display: flex;
+          cursor: pointer;
+          padding: var(--co-inphoto-image-overlay-toolbar-button-padding);
+
+          .label {
+            margin-left: var(--co-inphoto-image-overlay-toolbar-label-margin);
+          }
+        }
+
+        .options-menu {
+          position: var(--co-inphoto-image-overlay-position-relative);
+
+          .options-menu-list {
+            position: var(--co-inphoto-image-overlay-position-absolute);
+            bottom: var(--co-inphoto-image-overlay-menu-offset);
+            right: var(--co-inphoto-image-overlay-menu-right);
+            display: flex;
+            flex-direction: column;
+            gap: var(--co-inphoto-image-overlay-toolbar-gap);
+            padding: var(--co-inphoto-image-overlay-menu-padding);
+          }
+        }
+      }
+    }
+
+    .large-image {
+      max-width: var(--co-inphoto-image-overlay-image-max-width);
+      max-height: var(--co-inphoto-image-overlay-image-max-height);
+      object-fit: contain;
+    }
+  }
+}

package/lib/component/image-overlay/style/_material-definition.scss

@@ -1,21 +1,21 @@
-.co-image-overlay {
-  --co-inphoto-image-overlay-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-image-overlay-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-image-overlay-position-fixed: fixed;
-  --co-inphoto-image-overlay-position-relative: relative;
-  --co-inphoto-image-overlay-position-absolute: absolute;
-  --co-inphoto-image-overlay-inset-zero: 0;
-  --co-inphoto-image-overlay-z-index: 1000;
-  --co-inphoto-image-overlay-button-size: 30px;
-  --co-inphoto-image-overlay-button-radius: 50%;
-  --co-inphoto-image-overlay-offset: 20px;
-  --co-inphoto-image-overlay-vertical-center: 50%;
-  --co-inphoto-image-overlay-toolbar-gap: 10px;
-  --co-inphoto-image-overlay-toolbar-button-padding: 8px 15px;
-  --co-inphoto-image-overlay-toolbar-label-margin: 10px;
-  --co-inphoto-image-overlay-image-max-width: 100vw;
-  --co-inphoto-image-overlay-image-max-height: 90vh;
-  --co-inphoto-image-overlay-menu-offset: calc(100% + 10px);
-  --co-inphoto-image-overlay-menu-right: 0;
-  --co-inphoto-image-overlay-menu-padding: 0;
-}
+.co-image-overlay {
+  --co-inphoto-image-overlay-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-image-overlay-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-image-overlay-position-fixed: fixed;
+  --co-inphoto-image-overlay-position-relative: relative;
+  --co-inphoto-image-overlay-position-absolute: absolute;
+  --co-inphoto-image-overlay-inset-zero: 0;
+  --co-inphoto-image-overlay-z-index: 1000;
+  --co-inphoto-image-overlay-button-size: 30px;
+  --co-inphoto-image-overlay-button-radius: 50%;
+  --co-inphoto-image-overlay-offset: 20px;
+  --co-inphoto-image-overlay-vertical-center: 50%;
+  --co-inphoto-image-overlay-toolbar-gap: 10px;
+  --co-inphoto-image-overlay-toolbar-button-padding: 8px 15px;
+  --co-inphoto-image-overlay-toolbar-label-margin: 10px;
+  --co-inphoto-image-overlay-image-max-width: 100vw;
+  --co-inphoto-image-overlay-image-max-height: 90vh;
+  --co-inphoto-image-overlay-menu-offset: calc(100% + 10px);
+  --co-inphoto-image-overlay-menu-right: 0;
+  --co-inphoto-image-overlay-menu-padding: 0;
+}