@odx/ui 3.4.4 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 3.5.0
+
+### Minor Changes
+
+- 4262ef8: Added a daterangepicker component
+
 ## 3.4.4
 
 ### Patch Changes

package/core-theme.css

@@ -42,6 +42,7 @@
   --cyan-700: #0065ad;
   --cyan-800: #00508a;
   --cyan-900: #003c66;
+  --cyan-500-5: rgba(0, 145, 247, 0.05);
   --cyan-500-15: rgba(0, 145, 247, 0.15);
   --cyan-500-20: rgba(0, 145, 247, 0.2);
   --red-00: #ffe0e3;
@@ -3301,29 +3302,29 @@ html body .odx-fs-italic {
   outline-color: transparent;
   pointer-events: none;
 }
+.odx-calendar-cell--adjacent, .odx-calendar-cell.is-disabled {
+  color: var(--odx-input-control-color-disabled);
+}
+.odx-calendar-cell:focus:disabled, .odx-calendar-cell:focus.is-disabled {
+  outline-color: var(--odx-c-focus-outline-disabled);
+}
 @media (hover: hover){
-.odx-calendar-cell:hover {
+.odx-calendar-cell:hover:not(.is-in-any-range) {
   background-color: var(--blue-700-10);
 }
 }
-.odx-calendar-cell--is-current, .odx-calendar-cell.is-selected {
+.odx-calendar-cell--is-current, .odx-calendar-cell.is-selected:not(.is-in-any-range) {
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
 }
-.odx-calendar-cell.is-selected {
+.odx-calendar-cell.is-selected:not(.is-in-any-range) {
   background-color: var(--odx-c-focus);
 }
 @media (hover: hover){
-.odx-calendar-cell.is-selected:hover {
+.odx-calendar-cell.is-selected:not(.is-in-any-range):hover {
   background-color: var(--cyan-500-20);
 }
 }
-.odx-calendar-cell--adjacent, .odx-calendar-cell.is-disabled {
-  color: var(--odx-input-control-color-disabled);
-}
-.odx-calendar-cell:focus:disabled, .odx-calendar-cell:focus.is-disabled {
-  outline-color: var(--odx-c-focus-outline-disabled);
-}
 .odx-calendar-month .odx-calendar__table {
   border-collapse: separate;
   border-spacing: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
@@ -3345,6 +3346,9 @@ html body .odx-fs-italic {
   width: calc(var(--odx-vertical-rythm-base-size) * 1.5);
   vertical-align: middle;
 }
+.odx-calendar-month .odx-calendar-cell {
+  border-radius: 0;
+}
 .odx-calendar-month .odx-calendar-cell--is-current::after {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
   margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
@@ -3362,6 +3366,66 @@ html body .odx-fs-italic {
   top: 0;
   z-index: -1;
 }
+.odx-calendar-month .odx-calendar-cell--is-in-range::before {
+  background-color: var(--odx-c-selected);
+  bottom: 0;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+.odx-calendar-month .odx-calendar-cell--is-range-start {
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+}
+.odx-calendar-month .odx-calendar-cell--is-range-start::before {
+  border-bottom-left-radius: var(--odx-v-border-radius-controls);
+  border-top-left-radius: var(--odx-v-border-radius-controls);
+}
+.odx-calendar-month .odx-calendar-cell--is-range-end {
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+}
+.odx-calendar-month .odx-calendar-cell--is-range-end::before {
+  border-bottom-right-radius: var(--odx-v-border-radius-controls);
+  border-top-right-radius: var(--odx-v-border-radius-controls);
+}
+.odx-calendar-month .odx-calendar-cell--is-in-range:not(.odx-calendar-month .odx-calendar-cell--is-range-end) {
+  box-shadow: 4px 0 0 0 var(--odx-c-selected);
+}
+.odx-calendar-month .odx-calendar-cell--is-in-preview-range::before {
+  background-color: var(--cyan-500-5);
+  bottom: 0;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+.odx-calendar-month .odx-calendar-cell--is-preview-range-start {
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+}
+.odx-calendar-month .odx-calendar-cell--is-preview-range-start::before {
+  background-color: var(--odx-c-selected);
+  border-bottom-left-radius: var(--odx-v-border-radius-controls);
+  border-top-left-radius: var(--odx-v-border-radius-controls);
+}
+.odx-calendar-month .odx-calendar-cell--is-preview-range-end {
+  font-weight: var(--odx-typography-font-weight-medium);
+  letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+}
+.odx-calendar-month .odx-calendar-cell--is-preview-range-end::before {
+  background-color: var(--odx-c-selected);
+  border-bottom-right-radius: var(--odx-v-border-radius-controls);
+  border-top-right-radius: var(--odx-v-border-radius-controls);
+}
+.odx-calendar-month .odx-calendar-cell--is-in-preview-range:not(.odx-calendar-month .odx-calendar-cell--is-preview-range-end) {
+  box-shadow: 4px 0 0 0 var(--cyan-500-5);
+}
 .odx-calendar-year .odx-calendar-cell--is-current, .odx-calendar-years .odx-calendar-cell--is-current {
   background-color: var(--blue-700-10);
 }
@@ -3777,6 +3841,37 @@ html body .odx-fs-italic {
   max-height: 359px;
 }
 
+.odx-daterangepicker {
+  display: flex;
+  align-items: center;
+}
+.odx-daterangepicker.is-readonly .odx-daterangepicker__trigger {
+  outline-color: transparent;
+  pointer-events: none;
+  color: var(--odx-control-color-disabled);
+}
+.odx-daterangepicker__trigger-wrapper {
+  margin: 0 0 0 auto;
+}
+.odx-daterangepicker__mirror {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  white-space: pre;
+}
+.odx-daterangepicker__control::-webkit-inner-spin-button, .odx-daterangepicker__control::-webkit-calendar-picker-indicator {
+  -webkit-appearance: none;
+          appearance: none;
+  display: none;
+}
+.odx-daterangepicker__separator {
+  margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  margin-left: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+}
+.odx-daterangepicker .odx-dropdown {
+  max-height: 359px;
+}
+
 .odx-error-page {
   margin-right: calc(var(--odx-vertical-rythm-base-size) * 1);
   margin-left: calc(var(--odx-vertical-rythm-base-size) * 1);

package/package.json

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

package/scss/components/calendar.component.scss

@@ -46,34 +46,34 @@
     vertical-align: middle;
     z-index: 1;
 
-    &:hover {
+    &--adjacent,
+    &.is-disabled {
+      color: var(--odx-input-control-color-disabled);
+    }
+
+    &:focus {
+      &:disabled,
+      &.is-disabled {
+        outline-color: var(--odx-c-focus-outline-disabled);
+      }
+    }
+
+    &:hover:not(.is-in-any-range) {
       background-color: var(--blue-700-10);
     }
 
     &--is-current,
-    &.is-selected {
+    &.is-selected:not(.is-in-any-range) {
       @include typography.font-weight(medium);
     }
 
-    &.is-selected {
+    &.is-selected:not(.is-in-any-range) {
       background-color: var(--odx-c-focus);
 
       &:hover {
         background-color: var(--cyan-500-20);
       }
     }
-
-    &--adjacent,
-    &.is-disabled {
-      color: var(--odx-input-control-color-disabled);
-    }
-
-    &:focus {
-      &:disabled,
-      &.is-disabled {
-        outline-color: var(--odx-c-focus-outline-disabled);
-      }
-    }
   }
 
   &-month {
@@ -99,6 +99,8 @@
     }
 
     #{$root}-cell {
+      border-radius: 0;
+
       &--is-current::after {
         @include dimensions.container(1);
         @include dimensions.margin(0.25);
@@ -111,6 +113,74 @@
         top: 0;
         z-index: -1;
       }
+
+      &--is-in-range::before {
+        background-color: var(--odx-c-selected);
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+      }
+
+      &--is-range-start {
+        @include typography.font-weight(medium);
+
+        &::before {
+          border-bottom-left-radius: var(--odx-v-border-radius-controls);
+          border-top-left-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-range-end {
+        @include typography.font-weight(medium);
+
+        &::before {
+          border-bottom-right-radius: var(--odx-v-border-radius-controls);
+          border-top-right-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-in-range:not(&--is-range-end) {
+        box-shadow: 4px 0 0 0 var(--odx-c-selected);
+      }
+
+      &--is-in-preview-range::before {
+        background-color: var(--cyan-500-5);
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+      }
+
+      &--is-preview-range-start {
+        @include typography.font-weight(medium);
+
+        &::before {
+          background-color: var(--odx-c-selected);
+          border-bottom-left-radius: var(--odx-v-border-radius-controls);
+          border-top-left-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-preview-range-end {
+        @include typography.font-weight(medium);
+
+        &::before {
+          background-color: var(--odx-c-selected);
+          border-bottom-right-radius: var(--odx-v-border-radius-controls);
+          border-top-right-radius: var(--odx-v-border-radius-controls);
+        }
+      }
+
+      &--is-in-preview-range:not(&--is-preview-range-end) {
+        box-shadow: 4px 0 0 0 var(--cyan-500-5);
+      }
     }
   }
 

package/scss/components/daterangepicker.component.scss

@@ -0,0 +1,44 @@
+@use '../abstract/utils';
+@use '../abstract/dimensions';
+
+.odx-daterangepicker {
+  $root: &;
+  $dropdown-max-height: 359px;
+
+  @include utils.vertical-center-content();
+
+  &__trigger {
+    #{$root}.is-readonly & {
+      @include utils.non-interactive();
+
+      color: var(--odx-control-color-disabled);
+    }
+  }
+
+  &__trigger-wrapper {
+    margin: 0 0 0 auto;
+  }
+
+  &__mirror {
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    white-space: pre;
+  }
+
+  &__control {
+    &::-webkit-inner-spin-button,
+    &::-webkit-calendar-picker-indicator {
+      appearance: none;
+      display: none;
+    }
+  }
+
+  &__separator {
+    @include dimensions.margin-x(0.25);
+  }
+
+  .odx-dropdown {
+    max-height: $dropdown-max-height;
+  }
+}

package/scss/core.scss

@@ -49,6 +49,7 @@ Layout
 @use 'components/circular-progress.component';
 @use 'components/content-box.component';
 @use 'components/datepicker.component';
+@use 'components/daterangepicker.component';
 @use 'components/dropdown.component';
 @use 'components/error-page.component';
 @use 'components/expandable-list-item.component';

package/scss/variables/_color-palettes.scss

@@ -44,6 +44,7 @@
   --cyan-800: #00508a;
   --cyan-900: #003c66;
 
+  --cyan-500-5: #{rgba(#0091f7, 5%)};
   --cyan-500-15: #{rgba(#0091f7, 15%)};
   --cyan-500-20: #{rgba(#0091f7, 20%)};