@odx/ui 2.5.0 → 2.7.0

package/package.json

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

package/scss/abstract/_utils.scss

@@ -119,8 +119,8 @@
 }
 
 @mixin non-interactive() {
+  outline-color: transparent;
   pointer-events: none;
-  user-select: none;
 }
 
 @mixin dark-theme-selector() {

package/scss/components/autocomplete.component.scss

@@ -5,9 +5,9 @@
     height: 100%;
   }
 
-  .odx-form-field-control {
+  &__control {
     height: 100%;
-    padding: 0;
+    width: 100%;
 
     @include dimensions.min-height(1.5);
   }

package/scss/components/calendar.component.scss

@@ -0,0 +1,168 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-calendar {
+  $root: &;
+
+  display: inline-block;
+  flex-direction: column;
+  max-height: inherit;
+
+  &-header {
+    @include motion.transition(background-color outline-color color border-radius);
+    @include utils.vertical-center-content();
+    @include typography.font-weight(normal);
+
+    background-color: var(--odx-c-background-content);
+    border-bottom: 1px solid var(--odx-input-control-outline-color);
+
+    .odx-action-group {
+      width: 100%;
+
+      @include dimensions.margin(0, top);
+      @include dimensions.margin(math.div(4, 24), bottom);
+    }
+
+    &__title {
+      flex: 1 1 auto;
+    }
+  }
+
+  &-cell {
+    @include dimensions.container(1.5);
+    @include motion.transition(background-color outline-color color border-radius);
+    @include utils.interactive(false);
+    @include utils.with-outline-bold();
+    @include typography.font-weight(normal);
+
+    border-radius: var(--odx-v-border-radius-controls);
+    cursor: pointer;
+    outline-color: transparent;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    z-index: 1;
+
+    &:hover {
+      background-color: var(--blue-700-10);
+    }
+
+    &--is-current,
+    &.is-selected {
+      @include typography.font-weight(medium);
+    }
+
+    &.is-selected {
+      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 {
+    #{$root}__table {
+      border-collapse: separate;
+      border-spacing: dimensions.get-size(math.div(4, 24));
+
+      @include dimensions.margin-x(math.div(-4, 24));
+    }
+
+    #{$root}__weekdays {
+      @include typography.font-weight(bold);
+      @include typography.font-size(-1);
+      @include utils.non-interactive();
+
+      text-align: center;
+
+      td {
+        @include dimensions.container(1.5);
+
+        vertical-align: middle;
+      }
+    }
+
+    #{$root}-cell {
+      &--is-current::after {
+        @include dimensions.container(1);
+        @include dimensions.margin(0.25);
+
+        background-color: var(--blue-700-15);
+        border-radius: 50%;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: 0;
+        z-index: -1;
+      }
+    }
+  }
+
+  &-year,
+  &-years {
+    #{$root}-cell {
+      &--is-current {
+        background-color: var(--blue-700-10);
+      }
+    }
+  }
+
+  &-year {
+    #{$root}__body {
+      display: inline-table;
+
+      @include dimensions.margin-y(1.75);
+    }
+
+    #{$root}__table {
+      @include dimensions.margin(1.42, bottom);
+    }
+
+    #{$root}__season {
+      display: grid;
+      grid-gap: 50px;
+      grid-template-columns: repeat(3, 1fr);
+      margin: 2px 0;
+
+      @include dimensions.padding-x(1.16);
+    }
+
+    #{$root}-cell {
+      @include dimensions.container(math.div(5, 3));
+    }
+  }
+
+  &-years {
+    #{$root}__table {
+      margin: 0 28px;
+    }
+
+    #{$root}__year-row {
+      display: grid;
+      grid-gap: 36px;
+      grid-template-columns: repeat(3, 1fr);
+      margin: 2px 0;
+    }
+
+    #{$root}-cell {
+      height: dimensions.get-size(math.div(5, 3));
+      width: dimensions.get-size(2);
+    }
+  }
+}

package/scss/components/datepicker.component.scss

@@ -0,0 +1,30 @@
+@use '../abstract/utils';
+
+.odx-datepicker {
+  $root: &;
+  $dropdown-max-height: 359px;
+
+  @include utils.vertical-center-content();
+
+  &__trigger {
+    #{$root}.is-readonly & {
+      @include utils.non-interactive();
+
+      color: var(--odx-control-color-disabled);
+    }
+  }
+
+  &__control {
+    width: 100%;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-calendar-picker-indicator {
+      appearance: none;
+      display: none;
+    }
+  }
+
+  .odx-dropdown {
+    max-height: $dropdown-max-height;
+  }
+}

package/scss/components/dropdown.component.scss

@@ -18,6 +18,7 @@ $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
     max-height: inherit;
     min-height: inherit;
     overflow: auto;
+    overscroll-behavior: contain;
   }
 
   &__option-list {

package/scss/components/form-field.component.scss

@@ -93,7 +93,8 @@ body {
     @include dimensions.min-height(1.5);
     @include motion.transition(background-color color outline-color);
     @include utils.with-outline();
-    @include utils.focus-state(true, true, $control-selector);
+    @include utils.focus-state(true, true, 'input');
+    @include utils.focus-state(true, true, 'textarea');
 
     background-color: var(--odx-input-control-background-color);
     border-radius: var(--odx-v-border-radius-controls);
@@ -117,12 +118,15 @@ body {
     }
 
     #{$control-selector} {
-      @include dimensions.padding-x($form-field-inner-padding);
-      @include typography.font-weight(medium);
-
       vertical-align: middle;
       width: 100%;
 
+      @include dimensions.padding-x($form-field-inner-padding);
+      @include typography.font-weight(medium);
+    }
+
+    #{$control-selector},
+    input {
       &::placeholder {
         @include typography.font-weight(normal);
 

package/scss/components/select.component.scss

@@ -49,10 +49,9 @@ body {
     }
   }
 
-  &__search {
+  &__control {
     height: 100%;
-    outline: inherit;
-    padding: 0 !important;
+    width: 100%;
   }
 
   &__indicator {

package/scss/core.scss

@@ -41,11 +41,13 @@ Layout
 @use 'components/button-group.component';
 @use 'components/button.component';
 @use 'components/card.component';
+@use 'components/calendar.component';
 @use 'components/checkbox.component';
 @use 'components/chip.component';
 @use 'components/chip-list.component';
 @use 'components/circular-progress.component';
 @use 'components/content-box.component';
+@use 'components/datepicker.component';
 @use 'components/dropdown.component';
 @use 'components/expandable-list-item.component';
 @use 'components/form-field.component';