@odx/ui 4.1.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @odx/ui
 
+## 4.3.0
+
+### Minor Changes
+
+- 388a92e: Badges, Dropdowns, Tooltips rework (connected overlay now uses popover api)
+
+## 4.2.0
+
+### Minor Changes
+
+- c42ff73: New 'angular-chart-js' library for chart-js customization. Please note that '@odx/angular/charts-config' has been removed from the '@odx/angular' library and you should install '@odx/angular-chart-js' and change the path in the 'ChartThemeModule' import.
+
+  1. Install new package: 'npm install @odx/angular-chart-js'
+  2. Change the path if you already use 'ChartThemeModule' before: '@odx/angular/charts-config' => '@odx/angular-chart-js'.
+
 ## 4.1.0
 
 ### Minor Changes

package/core-theme.css

@@ -2126,15 +2126,21 @@ html body .odx-fs-italic {
 .odx-cdk-connected-overlay {
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
-  transition-property: opacity, visibility;
+  transition-property: opacity, visibility, overlay;
   transition-timing-function: var(--odx-v-transition-easing-fn);
-  display: block;
+  background: transparent;
+  border: 0;
+  color: var(--odx-c-text);
+  margin: 0;
+  opacity: 0;
+  overflow: visible;
+  padding: 0;
   position: fixed;
-  z-index: var(--odx-v-layer-4);
+  transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
+  transition-behavior: allow-discrete;
 }
 .odx-cdk-connected-overlay.is-hidden {
-  opacity: 0;
-  visibility: hidden;
+  display: none;
 }
 .odx-cdk-connected-overlay__content {
   left: 0 !important;
@@ -2148,13 +2154,20 @@ html body .odx-fs-italic {
 .odx-cdk-connected-overlay__content > * {
   max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
 }
+.odx-cdk-connected-overlay:popover-open {
+  opacity: 1;
+}
+@starting-style {
+  .odx-cdk-connected-overlay:popover-open {
+    opacity: 0;
+  }
+}
 
 .odx-cdk-connected-overlay-arrow {
   height: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   position: fixed;
   transform: rotate(45deg);
   width: calc(var(--odx-vertical-rythm-base-size) * 0.5);
-  z-index: var(--odx-v-layer-1);
 }
 
 /*
@@ -2856,10 +2869,6 @@ html body .odx-fs-italic {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
-.odx-badge-overlay {
-  z-index: var(--odx-v-layer-1);
-}
-
 .odx-badge {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.125);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.125);
@@ -5232,14 +5241,6 @@ html body .odx-fs-italic {
   width: calc(var(--odx-vertical-rythm-base-size) * 4.1667);
 }
 
-@keyframes basic-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
 .odx-modal {
   --odx-modal-margin-y: calc(var(--odx-vertical-rythm-base-size) * 2);
   --odx-modal-margin-x: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
@@ -5255,17 +5256,40 @@ html body .odx-fs-italic {
   padding: 0;
   width: min(var(--odx-modal-max-width), 100% - 2 * var(--odx-modal-margin-x));
 }
-.odx-modal:modal {
-  max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
-  max-width: 100vw;
+.odx-modal::backdrop, .odx-modal:modal {
+  transition-delay: 0ms;
+  transition-duration: var(--odx-v-transition-duration);
+  transition-property: opacity, visibility, overlay, transform;
+  transition-timing-function: var(--odx-v-transition-easing-fn);
+  opacity: 0;
+  transition-behavior: allow-discrete;
 }
 .odx-modal::backdrop {
   -webkit-backdrop-filter: blur(var(--odx-v-backdrop-blur));
           backdrop-filter: blur(var(--odx-v-backdrop-blur));
   background-color: var(--odx-c-backdrop-dark);
 }
-.odx-modal[data-closing-animation]::backdrop {
-  animation: basic-fade-out 0.3s;
+.odx-modal:modal {
+  max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+  max-width: 100vw;
+}
+.odx-modal[open]::backdrop, .odx-modal[open]:modal {
+  opacity: 1;
+}
+.odx-modal[open]:modal {
+  transform: translateY(0);
+  transform: translateX(0);
+}
+@starting-style {
+  .odx-modal[open]:modal, .odx-modal[open]::backdrop {
+    opacity: 0;
+  }
+  .odx-modal[open]:modal:not(.odx-modal--sidesheet) {
+    transform: translateY(calc(var(--odx-vertical-rythm-base-size) * 0.3334));
+  }
+  .odx-modal[open]:modal.odx-modal--sidesheet {
+    transform: translateX(calc(var(--odx-vertical-rythm-base-size) * 2));
+  }
 }
 .odx-modal.odx-modal--xsmall {
   --odx-modal-max-width: calc(var(--odx-vertical-rythm-base-size) * 15);
@@ -5278,7 +5302,9 @@ html body .odx-fs-italic {
 }
 .odx-modal--sidesheet {
   height: 100%;
-  max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+}
+.odx-modal--sidesheet .odx-modal__container {
+  height: calc(100dvh - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
 }
 .odx-modal--sidesheet::backdrop {
   -webkit-backdrop-filter: unset;
@@ -6803,16 +6829,15 @@ html body .odx-fs-italic {
 .odx-toast-container {
   --odx-toast-outer-offset: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   --odx-toast-border-radius: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  background-color: transparent;
+  border: none;
+  color: var(--odx-c-text);
   display: flex;
   flex-direction: column;
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  margin: calc(var(--odx-vertical-rythm-base-size) * 0.1667) var(--odx-toast-outer-offset) auto auto;
   max-width: min(100dvw - 2 * var(--odx-toast-outer-offset), var(--odx-vertical-rythm-base-size) * 20);
+  overflow: clip;
   padding-top: var(--odx-toast-outer-offset);
-  position: fixed;
-  right: var(--odx-toast-outer-offset);
-  top: 0;
-  width: 100%;
-  z-index: var(--odx-v-layer-5);
 }
 .odx-toast-container__counter {
   align-self: center;

package/package.json

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

package/scss/abstract/_breakpoints.scss

@@ -30,7 +30,7 @@ $breakpoints: (
   $keys: get-breakpoint-names();
   $index: list.index($keys, $breakpoint);
 
-  @return if($index < length($keys), list.nth($keys, $index + 1), null);
+  @return if($index < list.length($keys), list.nth($keys, $index + 1), null);
 }
 
 @function _get-min-value($breakpoint) {

package/scss/cdk/connected-overlay.scss

@@ -5,15 +5,21 @@
 @use '../abstract/utils';
 
 .odx-cdk-connected-overlay {
-  @include motion.transition(opacity visibility);
+  @include motion.transition(opacity visibility overlay);
 
-  display: block;
+  background: transparent;
+  border: 0;
+  color: var(--odx-c-text);
+  margin: 0;
+  opacity: 0;
+  overflow: visible;
+  padding: 0;
   position: fixed;
-  z-index: var(--odx-v-layer-4);
+  transform: translate(var(--odx-cdk-connected-overlay-position-x, 0), var(--odx-cdk-connected-overlay-position-y, 0));
+  transition-behavior: allow-discrete;
 
   &.is-hidden {
-    opacity: 0;
-    visibility: hidden;
+    display: none;
   }
 
   &__content {
@@ -29,6 +35,16 @@
       max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
     }
   }
+
+  &:popover-open {
+    opacity: 1;
+  }
+
+  @starting-style {
+    &:popover-open {
+      opacity: 0;
+    }
+  }
 }
 
 .odx-cdk-connected-overlay-arrow {
@@ -36,5 +52,4 @@
   position: fixed;
   transform: rotate(45deg);
   width: dimensions.get-size(0.5);
-  z-index: var(--odx-v-layer-1);
 }

package/scss/components/badge.component.scss

@@ -7,10 +7,6 @@
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
-.odx-badge-overlay {
-  z-index: var(--odx-v-layer-1);
-}
-
 .odx-badge {
   $badge-size: dimensions.get-size(math.div(2, 3));
 

package/scss/components/modal.component.scss

@@ -1,19 +1,10 @@
 @use 'sass:math';
 @use '../abstract/dimensions';
 @use '../abstract/breakpoints';
+@use '../abstract/motion';
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-@keyframes basic-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
 $modal-padding: math.div(12, 24);
 
 .odx-modal {
@@ -34,9 +25,12 @@ $modal-padding: math.div(12, 24);
   padding: 0;
   width: min(var(--odx-modal-max-width), calc(100% - 2 * var(--odx-modal-margin-x)));
 
+  &::backdrop,
   &:modal {
-    max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
-    max-width: 100vw;
+    @include motion.transition(opacity visibility overlay transform);
+
+    opacity: 0;
+    transition-behavior: allow-discrete;
   }
 
   &::backdrop {
@@ -44,8 +38,34 @@ $modal-padding: math.div(12, 24);
     background-color: var(--odx-c-backdrop-dark);
   }
 
-  &[data-closing-animation]::backdrop {
-    animation: basic-fade-out 0.3s;
+  &:modal {
+    max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+    max-width: 100vw;
+  }
+
+  &[open]::backdrop,
+  &[open]:modal {
+    opacity: 1;
+  }
+
+  &[open]:modal {
+    transform: translateY(0);
+    transform: translateX(0);
+  }
+
+  @starting-style {
+    &[open]:modal,
+    &[open]::backdrop {
+      opacity: 0;
+    }
+
+    &[open]:modal:not(#{$root}--sidesheet) {
+      transform: translateY(#{dimensions.get-size(math.div(8, 24))});
+    }
+
+    &[open]:modal#{$root}--sidesheet {
+      transform: translateX(#{dimensions.get-size(math.div(8, 4))});
+    }
   }
 
   &.odx-modal--xsmall {
@@ -62,7 +82,10 @@ $modal-padding: math.div(12, 24);
 
   &--sidesheet {
     height: 100%;
-    max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+
+    #{$root}__container {
+      height: calc(100dvh - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
+    }
 
     &::backdrop {
       backdrop-filter: unset;

package/scss/components/toast.component.scss

@@ -7,16 +7,15 @@
   --odx-toast-outer-offset: #{dimensions.get-size(math.div(8, 24))};
   --odx-toast-border-radius: #{dimensions.get-size(math.div(6, 24))};
 
+  background-color: transparent;
+  border: none;
+  color: var(--odx-c-text);
   display: flex;
   flex-direction: column;
-  margin-top: dimensions.get-size(math.div(4, 24));
+  margin: #{dimensions.get-size(math.div(4, 24))} var(--odx-toast-outer-offset) auto auto;
   max-width: min(calc(100dvw - 2 * var(--odx-toast-outer-offset)), dimensions.get-size(20));
+  overflow: clip;
   padding-top: var(--odx-toast-outer-offset);
-  position: fixed;
-  right: var(--odx-toast-outer-offset);
-  top: 0;
-  width: 100%;
-  z-index: var(--odx-v-layer-5);
 
   &__counter {
     align-self: center;