@odx/ui 5.3.6 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "5.3.6",
+  "version": "5.5.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

package/scss/card.component.scss

@@ -82,15 +82,41 @@
     display: block;
     margin: $img-margin $img-margin 0 $img-margin;
     max-height: var(--odx-card-image-max-height);
-    max-width: max-content;
+
+    /* allow the image container to span the card width (including the card padding)
+     so aspect-ratio can compute height. We compute width as 100% + 2 * padding
+     and keep the negative margins so the element visually spans the card edges. */
+    max-width: none;
     overflow: clip;
+    width: calc(100% + (#{$main-padding} * 2));
+
+    &__img {
+      aspect-ratio: var(--odx-card-image-aspect-ratio);
+      display: block;
+      max-height: var(--odx-card-image-max-height);
+      overflow: hidden;
+      position: relative; /* required for ngOptimizedImage's img[fill] */
+      width: 100%;
+    }
+
+    /* Fallback when aspect-ratio is "auto": ensure the image area has a usable height
+       so ngSrc[fill] (absolutely positioned img) has a non-zero container. The
+       host gets the class `has-aspect-auto` from the component when
+       imageRatio resolves to 'auto'. The fallback height can be overridden by
+       setting --odx-card-image-fallback-height. */
+    &.has-aspect-auto.has-fill {
+      #{$root}-image__img {
+        max-height: var(--odx-card-image-max-height);
+        min-height: var(--odx-card-image-fallback-height, 200px);
+      }
+    }
 
     img {
       aspect-ratio: var(--odx-card-image-aspect-ratio);
       display: block;
       height: auto;
       max-width: 100%;
-      object-fit: cover;
+      object-fit: var(--odx-card-image-object-fit);
     }
   }
 
@@ -100,6 +126,7 @@
     position: absolute;
     top: $main-padding;
     width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
+    z-index: var(--odx-v-layer-2);
   }
 
   &__content {
@@ -121,6 +148,12 @@
       padding-right: dimensions.get-size(math.div(36, 24));
     }
 
+    #{$root}--launch-tile & {
+      @include breakpoints.container-down(card-root, phone) {
+        margin-inline-end: dimensions.get-size(math.div(36, 24));
+      }
+    }
+
     #{$root}--launch-tile &,
     #{$root}--launch-tile-centered & {
       font-size: dimensions.get-size(math.div(20, 24));
@@ -135,10 +168,6 @@
 
         font-size: dimensions.get-size(math.div(25, 24));
       }
-
-      @include breakpoints.container-down(card-root, phone) {
-        margin-inline-end: dimensions.get-size(math.div(36, 24));
-      }
     }
   }
 

package/scss/components/card.component.scss

@@ -82,15 +82,41 @@
     display: block;
     margin: $img-margin $img-margin 0 $img-margin;
     max-height: var(--odx-card-image-max-height);
-    max-width: max-content;
+
+    /* allow the image container to span the card width (including the card padding)
+     so aspect-ratio can compute height. We compute width as 100% + 2 * padding
+     and keep the negative margins so the element visually spans the card edges. */
+    max-width: none;
     overflow: clip;
+    width: calc(100% + (#{$main-padding} * 2));
+
+    &__img {
+      aspect-ratio: var(--odx-card-image-aspect-ratio);
+      display: block;
+      max-height: var(--odx-card-image-max-height);
+      overflow: hidden;
+      position: relative; /* required for ngOptimizedImage's img[fill] */
+      width: 100%;
+    }
+
+    /* Fallback when aspect-ratio is "auto": ensure the image area has a usable height
+       so ngSrc[fill] (absolutely positioned img) has a non-zero container. The
+       host gets the class `has-aspect-auto` from the component when
+       imageRatio resolves to 'auto'. The fallback height can be overridden by
+       setting --odx-card-image-fallback-height. */
+    &.has-aspect-auto.has-fill {
+      #{$root}-image__img {
+        max-height: var(--odx-card-image-max-height);
+        min-height: var(--odx-card-image-fallback-height, 200px);
+      }
+    }
 
     img {
       aspect-ratio: var(--odx-card-image-aspect-ratio);
       display: block;
       height: auto;
       max-width: 100%;
-      object-fit: cover;
+      object-fit: var(--odx-card-image-object-fit);
     }
   }
 
@@ -100,6 +126,7 @@
     position: absolute;
     top: $main-padding;
     width: calc(100% - dimensions.get-size(math.div(40, 24)) - #{$main-padding} - dimensions.get-size(math.div(30, 24)));
+    z-index: var(--odx-v-layer-2);
   }
 
   &__content {
@@ -121,6 +148,12 @@
       padding-right: dimensions.get-size(math.div(36, 24));
     }
 
+    #{$root}--launch-tile & {
+      @include breakpoints.container-down(card-root, phone) {
+        margin-inline-end: dimensions.get-size(math.div(36, 24));
+      }
+    }
+
     #{$root}--launch-tile &,
     #{$root}--launch-tile-centered & {
       font-size: dimensions.get-size(math.div(20, 24));
@@ -135,10 +168,6 @@
 
         font-size: dimensions.get-size(math.div(25, 24));
       }
-
-      @include breakpoints.container-down(card-root, phone) {
-        margin-inline-end: dimensions.get-size(math.div(36, 24));
-      }
     }
   }
 

package/scss/components/select.component.scss

@@ -31,10 +31,6 @@
     }
   }
 
-  &__clear {
-    margin-inline-start: auto;
-  }
-
   &__placeholder,
   &__value {
     @include dimensions.padding-y(math.div(4, 24));

package/scss/select.component.scss

@@ -31,10 +31,6 @@
     }
   }
 
-  &__clear {
-    margin-inline-start: auto;
-  }
-
   &__placeholder,
   &__value {
     @include dimensions.padding-y(math.div(4, 24));