@odx/ui 1.0.4 → 2.0.0

package/package.json

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

package/scss/3rdparty/ag-grid/theme.scss

@@ -3,7 +3,7 @@
 @use '../../abstract/typography';
 
 .ag-theme-odx {
-  --ag-border-color: var(--odx-c-seperator);
+  --ag-border-color: var(--odx-c-separator);
   --ag-foreground-color: var(--odx-c-text);
   --ag-secondary-foreground-color: var(--odx-c-text);
   --ag-disabled-foreground-color: vara(--odx-c-text-disabled);

package/scss/components/autocomplete.component.scss

@@ -0,0 +1,16 @@
+@use '../abstract/dimensions';
+
+.odx-autocomplete {
+  $root: &;
+
+  &__trigger {
+    height: 100%;
+  }
+
+  .odx-form-field-control {
+    height: 100%;
+    padding: 0;
+
+    @include dimensions.min-height(1.5);
+  }
+}

package/scss/components/chip-list.component.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+$form-field-inner-padding: math.div(8, 24);
+
+.odx-chip-list {
+  $root: &;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-row {
+    &:has(.odx-chip) {
+      @include dimensions.padding($form-field-inner-padding, ('top', 'left', 'right'));
+      @include dimensions.padding(math.div(4, 24), ('bottom'));
+
+      display: flex;
+      flex-wrap: wrap;
+      gap: dimensions.get-size($form-field-inner-padding);
+    }
+  }
+}

package/scss/components/dropdown.component.scss

@@ -19,6 +19,13 @@ $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
     min-height: inherit;
     overflow: auto;
   }
+
+  &__option-list {
+    display: flex;
+    flex-direction: column;
+    max-height: var(--odx-select-max-height);
+    min-height: dimensions.get-size(1.5);
+  }
 }
 
 .odx-dropdown-overlay {

package/scss/components/expandable-list-item.component.scss

@@ -5,6 +5,7 @@
 .odx-expandable-list-item {
   $root: &;
 
+  display: block;
   position: relative;
 
   &::before {
@@ -13,6 +14,7 @@
     border-bottom: 1px solid var(--gray-200);
     content: '';
     display: block;
+    left: dimensions.get-size(math.div(1, 3));
     position: absolute;
     top: 0;
     width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
@@ -27,7 +29,6 @@
   }
 
   &--danger + &::before,
-  &--expanded + &::before,
   &:hover + &::before {
     border-color: transparent;
   }
@@ -59,6 +60,17 @@
   }
 
   &__slot {
+    #{$root}:last-child & {
+      .odx-list-item:last-child::after {
+        border-bottom: 1px solid var(--gray-200);
+        bottom: 0;
+        content: '';
+        display: block;
+        position: absolute;
+        width: calc(100% - #{dimensions.get-size(math.div(14, 24))});
+      }
+    }
+
     .odx-list-item__content {
       @include dimensions.padding(math.div(36, 24), left);
     }

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

@@ -15,6 +15,7 @@ body {
 .odx-form,
 .odx-form-group {
   --odx-grid-gutter: #{dimensions.get-size(0.5)};
+  --odx-form-field-horizontal-label-width: #{dimensions.get-size(math.div(150, 24))};
 
   row-gap: 0;
 }
@@ -60,10 +61,9 @@ body {
   }
 
   &-label {
-    @include typography.prevent-text-overflow();
-
-    display: block;
-    max-width: 100%;
+    #{$root}:not(#{$root}--horizontal) & {
+      @include typography.prevent-text-overflow();
+    }
   }
 
   &__label {
@@ -71,16 +71,21 @@ body {
     @include dimensions.margin(-$form-field-label-height, 'top');
     @include typography.font-size(-1);
 
-    display: flex;
     user-select: none;
 
-    #{$root}--required:not(.is-readonly, .is-disabled) &::after {
+    #{$root}:not(#{$root}--horizontal, #{$root}--simple) & {
+      display: flex;
+    }
+
+    &-is-required {
       @include typography.font-size(0);
 
-      color: var(--odx-c-error-text);
-      content: '*';
       margin-left: 2px;
       vertical-align: top;
+
+      #{$root}--required:not(.is-readonly, .is-disabled) & {
+        color: var(--odx-c-error-text);
+      }
     }
   }
 
@@ -216,6 +221,24 @@ body {
       display: none;
     }
   }
+
+  &--horizontal {
+    @include dimensions.padding(math.div(8, 24), top);
+
+    flex-direction: row;
+
+    #{$root}__label {
+      @include dimensions.margin(0.25, top);
+
+      flex: 0 0 var(--odx-form-field-horizontal-label-width);
+      max-width: var(--odx-form-field-horizontal-label-width);
+      padding-left: 0;
+    }
+
+    #{$root}__inner {
+      flex: 1;
+    }
+  }
 }
 
 .odx-form-field.is-readonly,

package/scss/components/header.component.scss

@@ -30,7 +30,7 @@
   }
 
   .odx-action-group:not(:last-child) {
-    border-right: 1px solid var(--odx-c-seperator);
+    border-right: 1px solid var(--odx-c-separator);
     margin-right: dimensions.get-size(0.5);
     padding-right: dimensions.get-size(0.5);
   }

package/scss/components/option.component.scss

@@ -0,0 +1,38 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+.odx-option {
+  @include dimensions.line-height(1.5, 1);
+  @include dimensions.margin(math.div(4, 24), bottom);
+  @include dimensions.padding-x(0.5);
+  @include motion.transition(background-color color outline-color);
+  @include typography.font-weight(normal);
+
+  border-radius: var(--odx-v-border-radius-controls);
+  cursor: pointer;
+  user-select: none;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-active,
+  &:hover {
+    background-color: var(--gray-50);
+  }
+
+  &.is-selected {
+    background-color: var(--cyan-500-15);
+  }
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  > .odx-checkbox {
+    @include dimensions.margin(math.div(8, 24), right);
+  }
+}

package/scss/components/select.component.scss

@@ -66,44 +66,3 @@ body {
     }
   }
 }
-
-.odx-select-dropdown {
-  display: flex;
-  flex-direction: column;
-  max-height: var(--odx-select-max-height);
-  min-height: dimensions.get-size(1.5);
-}
-
-.odx-option {
-  @include dimensions.line-height(1.5, 1);
-  @include dimensions.margin(math.div(4, 24), bottom);
-  @include dimensions.padding-x(0.5);
-  @include motion.transition(background-color color outline-color);
-  @include typography.font-weight(normal);
-
-  border-radius: var(--odx-v-border-radius-controls);
-  cursor: pointer;
-  user-select: none;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &.is-active,
-  &:hover {
-    background-color: var(--gray-50);
-  }
-
-  &.is-selected {
-    background-color: var(--cyan-500-15);
-  }
-
-  &.is-disabled {
-    color: var(--odx-control-color-disabled);
-    pointer-events: none;
-  }
-
-  > .odx-checkbox {
-    @include dimensions.margin(math.div(8, 24), right);
-  }
-}

package/scss/components/table.component.scss

@@ -0,0 +1,94 @@
+@use 'sass:math';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use '../abstract/motion';
+
+.odx-table {
+  --odx-table-background-color: var(--white);
+  --odx-table-head-border-color: var(--gray-900);
+  --odx-table-cell-border-color: var(--gray-200);
+  --odx-table-cell-background-color-hover: var(--blue-700-5);
+  --odx-table-cell-background-color-striped: var(--gray-50);
+  --odx-table-cell-background-color-active: var(--cyan-500-15);
+
+  $root: &;
+
+  background: var(--odx-table-background-color);
+  border: 0;
+  border-spacing: 0;
+  min-width: 100%;
+  table-layout: auto;
+  white-space: normal;
+
+  &__header-cell,
+  &__cell {
+    @include dimensions.padding-x(0.5);
+
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    text-align: left;
+  }
+
+  &__cell {
+    border-bottom-color: var(--odx-table-cell-border-color);
+    height: dimensions.get-size(2);
+    vertical-align: middle;
+  }
+
+  &__header-cell-title {
+    align-items: center;
+    display: flex;
+    gap: dimensions.get-size(math.div(8, 24));
+    height: dimensions.get-size(2);
+    user-select: none;
+
+    &.sortable {
+      cursor: pointer;
+
+      > svg {
+        display: inline-block;
+        height: auto;
+        width: dimensions.get-size(math.div(16, 24));
+      }
+    }
+  }
+
+  &__header-cell {
+    @include typography.font-weight(medium);
+
+    border-bottom-color: var(--odx-table-head-border-color);
+
+    .odx-form-field {
+      height: dimensions.get-size(2);
+      justify-content: center;
+      padding: 0;
+
+      &__info {
+        display: none;
+      }
+    }
+  }
+
+  &--striped {
+    .odx-table__row:nth-child(odd) {
+      background-color: var(--odx-table-cell-background-color-striped);
+    }
+  }
+
+  &__body {
+    /* stylelint-disable-next-line no-descending-specificity */
+    .odx-table__row {
+      @include motion.transition(background-color);
+
+      &:hover {
+        background-color: var(--odx-table-cell-background-color-hover);
+      }
+
+      &:focus-visible {
+        background-color: var(--odx-table-cell-background-color-active);
+      }
+    }
+  }
+}

package/scss/components/wizard-step.component.scss

@@ -0,0 +1,256 @@
+@use 'sass:math';
+@use 'sass:color';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+.odx-wizard-step {
+  $root: &;
+  $parent-root: odx-wizard;
+  $step-size: dimensions.get-size(math.div(20, 24));
+  $icon-size: dimensions.get-size(math.div(13, 24));
+  $border-width: dimensions.get-size(math.div(2, 24));
+
+  cursor: pointer;
+  display: none;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+
+  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+    gap: dimensions.get-size(math.div(8, 24));
+    min-width: var(--odx-horizontal-wizzard-width);
+  }
+
+  &.is-disabled {
+    @include utils.non-interactive();
+  }
+
+  &--visible {
+    display: inline-flex;
+  }
+
+  &__label {
+    @include typography.prevent-text-overflow();
+    @include utils.with-outline();
+    @include motion.transition(background-color, outline-color);
+
+    align-self: center;
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-c-secondary-disabled);
+    margin: 0 auto;
+    padding: dimensions.get-size(math.div(4, 24));
+    user-select: none;
+
+    #{$root}--valid & {
+      color: var(--odx-control-color-disabled);
+    }
+
+    #{$root}--passed & {
+      color: var(--odx-c-primary);
+    }
+
+    #{$root}--active & {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+
+    #{$root}:focus-visible & {
+      background-color: var(--odx-c-focus);
+      outline-color: var(--odx-c-focus-outline);
+    }
+
+    #{$root}:hover & {
+      background-color: var(--blue-700-5);
+    }
+
+    .#{$parent-root}--vertical & {
+      margin: unset;
+    }
+  }
+
+  &__line-before,
+  &__line-after,
+  &__dotted-line {
+    flex: 1;
+
+    .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+      border-bottom: $border-width solid var(--odx-c-secondary-disabled);
+      height: 0;
+    }
+
+    .#{$parent-root}--vertical & {
+      border-left: $border-width solid var(--odx-c-secondary-disabled);
+      width: 0;
+    }
+  }
+
+  &__dotted-line {
+    &:not(.odx-wizard-step__dotted-line--active) {
+      display: none;
+    }
+
+    .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+      align-self: flex-end;
+      border-style: dashed;
+      height: 0;
+      margin-bottom: calc(#{$step-size} / 2 - #{$border-width} / 2);
+      min-width: var(--odx-horizontal-wizzard-width);
+    }
+
+    .#{$parent-root}.#{$parent-root}--vertical & {
+      border-style: dashed;
+      margin-left: calc(#{$step-size} / 2 - #{$border-width} / 2);
+      padding-bottom: var(--odx-verticalal-wizzard-heigth);
+    }
+
+    #{$root}:first-of-type + & {
+      .#{$parent-root}.#{$parent-root}--vertical & {
+        border-left-color: var(--odx-c-primary);
+      }
+
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-c-primary);
+      }
+    }
+
+    .#{$parent-root}:not(.#{$parent-root}--vertical):has(#{$root}:last-of-type#{$root}--touched) & {
+      &:last-of-type {
+        border-bottom-color: var(--odx-control-color-disabled);
+      }
+    }
+
+    .#{$parent-root}--vertical:has(#{$root}:last-of-type#{$root}--touched) & {
+      &:last-of-type {
+        border-left-color: var(--odx-control-color-disabled);
+      }
+    }
+  }
+
+  &__line-before {
+    #{$root}:first-of-type & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: transparent;
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: transparent;
+      }
+    }
+
+    #{$root}--touched & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-control-color-disabled);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-control-color-disabled);
+      }
+    }
+
+    #{$root}--passed & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-c-primary);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-c-primary);
+      }
+    }
+  }
+
+  &__line-after {
+    #{$root}--touched:not(#{$root}--is-last-touched) & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-control-color-disabled);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-control-color-disabled);
+      }
+    }
+
+    #{$root}:last-of-type & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: transparent;
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: transparent;
+      }
+    }
+
+    #{$root}--passed:not(#{$root}--active) & {
+      .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+        border-bottom-color: var(--odx-c-primary);
+      }
+
+      .#{$parent-root}--vertical & {
+        border-left-color: var(--odx-c-primary);
+      }
+    }
+  }
+
+  &__holder {
+    align-items: center;
+    display: flex;
+
+    .#{$parent-root}--vertical & {
+      flex-direction: column;
+      height: 100%;
+    }
+  }
+
+  &__circle {
+    @include motion.transition(background-color, color);
+
+    align-items: center;
+    border: $border-width solid var(--odx-c-secondary-disabled);
+    border-radius: 50%;
+    color: var(--odx-c-secondary-disabled);
+    display: flex;
+    height: $step-size;
+    justify-content: center;
+    width: $step-size;
+
+    #{$root}--touched & {
+      border-color: var(--odx-control-color-disabled);
+      color: var(--odx-control-color-disabled);
+    }
+
+    #{$root}--active & {
+      background-color: var(--odx-c-primary);
+      border-color: var(--odx-c-primary);
+      color: var(--odx-c-primary);
+    }
+
+    #{$root}--active#{$root}--valid & {
+      color: var(--white);
+    }
+
+    #{$root}--passed & {
+      border-color: var(--odx-c-primary);
+      color: var(--odx-c-primary);
+    }
+  }
+
+  &__icon {
+    font-size: $icon-size;
+    font-weight: var(--odx-typography-font-weight-bold);
+    height: $icon-size;
+    visibility: hidden;
+    width: $icon-size;
+
+    #{$root}--valid & {
+      visibility: visible;
+    }
+  }
+
+  .#{$parent-root}--vertical & {
+    align-items: center;
+    flex: 0 0 var(--odx-vertical-wizzard-heigth);
+    flex-direction: row-reverse;
+    gap: dimensions.get-size(math.div(12, 24));
+    justify-content: start;
+  }
+}

package/scss/components/wizard.component.scss

@@ -0,0 +1,18 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/breakpoints';
+
+.odx-wizard {
+  --odx-horizontal-wizzard-width: #{dimensions.get-size(math.div(100, 24))};
+  --odx-vertical-wizzard-heigth: #{dimensions.get-size(math.div(70, 24))};
+
+  display: flex;
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--overflow:not(&--vertical) {
+    min-width: calc(var(--odx-horizontal-wizzard-width) * 7);
+  }
+}

package/scss/core.scss

@@ -6,12 +6,13 @@ Layout
 */
 
 @use 'layout/base';
+@use 'layout/content';
 @use 'layout/description-list';
 @use 'layout/layout';
 @use 'layout/helpers';
 @use 'layout/typography';
 @use 'layout/text-list';
-@use 'layout/content';
+@use 'layout/application';
 
 /*
   CDK
@@ -32,6 +33,7 @@ Layout
 @use 'components/accordion-item.component';
 @use 'components/action-group.component';
 @use 'components/area-header.component';
+@use 'components/autocomplete.component';
 @use 'components/avatar.component';
 @use 'components/badge.component';
 @use 'components/bar.component';
@@ -41,6 +43,7 @@ Layout
 @use 'components/card.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/dropdown.component';
@@ -59,6 +62,7 @@ Layout
 @use 'components/menu.component';
 @use 'components/modal.component';
 @use 'components/navigation-back.component';
+@use 'components/option.component';
 @use 'components/progress.component';
 @use 'components/radio-button.component';
 @use 'components/radio-group.component';
@@ -70,8 +74,11 @@ Layout
 @use 'components/switch.component';
 @use 'components/tab-bar-item.component';
 @use 'components/tab-bar.component';
+@use 'components/table.component';
 @use 'components/toast.component';
 @use 'components/toast-item.component';
 @use 'components/toggle-button.component';
 @use 'components/toggle-button-group.component';
 @use 'components/tooltip.component';
+@use 'components/wizard.component';
+@use 'components/wizard-step.component';