@odx/ui 4.10.0 → 4.10.2

package/scss/datepicker.component.scss

@@ -0,0 +1,36 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+
+.odx-datepicker {
+  $root: &;
+
+  @include utils.vertical-center-content();
+
+  &__trigger-wrapper {
+    gap: dimensions.get-size(math.div(1, 3));
+    margin: 0 0 0 auto;
+
+    > .odx-button {
+      #{$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 {
+    --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), 359px);
+  }
+}

package/scss/daterangepicker.component.scss

@@ -0,0 +1,45 @@
+@use 'sass:math';
+@use '../abstract/utils';
+@use '../abstract/dimensions';
+
+.odx-daterangepicker {
+  $root: &;
+
+  @include utils.vertical-center-content();
+
+  &__trigger-wrapper {
+    gap: dimensions.get-size(math.div(1, 3));
+    margin: 0 0 0 auto;
+
+    > .odx-button {
+      #{$root}.is-readonly & {
+        @include utils.non-interactive();
+
+        color: var(--odx-control-color-disabled);
+      }
+    }
+  }
+
+  &__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 {
+    --odx-cdk-connected-overlay-max-height-modified: min(var(--odx-cdk-connected-overlay-max-height), 359px);
+  }
+}

package/scss/dropdown.component.scss

@@ -0,0 +1,37 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+$dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
+
+.odx-dropdown {
+  background-color: var(--odx-c-background-content);
+  border-radius: var(--odx-v-border-radius);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
+  display: block;
+  max-width: var(--odx-select-max-width);
+  min-height: inherit;
+
+  &__inner {
+    @include dimensions.padding-x(0.5);
+
+    border-bottom: dimensions.get-size(0.5) solid transparent;
+    border-top: dimensions.get-size(0.5) solid transparent;
+    max-height: inherit;
+    min-height: inherit;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  &__option-list {
+    display: flex;
+    flex-direction: column;
+    max-height: var(--odx-select-max-height);
+    min-height: dimensions.get-size(1.5);
+  }
+}
+
+.odx-dropdown-overlay {
+  .odx-cdk-connected-overlay-arrow {
+    background-color: var(--odx-c-background-content);
+  }
+}

package/scss/error-page.component.scss

@@ -0,0 +1,46 @@
+@use 'sass:math';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/dimensions';
+@use '../layout/typography';
+
+.odx-error-page {
+  @include dimensions.margin-x(1);
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  &__title {
+    @extend .odx-heading-4;
+  }
+
+  &__container {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &__icon-container {
+    @include dimensions.margin(1, bottom);
+  }
+
+  &__actions {
+    @include dimensions.margin(1, top);
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--odx-grid-gutter);
+    justify-content: center;
+    width: 100%;
+  }
+
+  &__footer {
+    @include dimensions.padding(1, bottom);
+
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,59 @@
+@use 'sass:math';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/dimensions';
+
+.odx-expandable-list-item {
+  $root: &;
+  $list-item-selector: '> #{$root}__header .odx-list-item';
+
+  &__header {
+    display: block;
+    position: relative;
+
+    > .odx-list-item {
+      @include dimensions.padding(math.div(52, 24), right);
+    }
+  }
+
+  &__action {
+    margin: 0;
+    position: absolute;
+    right: dimensions.get-size(math.div(8, 24));
+    top: 50%;
+    transform: translateY(-50%);
+
+    .odx-icon {
+      @include motion.transition(transform);
+    }
+  }
+
+  &__slot {
+    .odx-list #{$root}:first-child #{$list-item-selector},
+    .odx-list .odx-list-item:first-child {
+      --separator-color: var(--odx-c-separator);
+    }
+  }
+
+  &:has(#{$list-item-selector}--danger) {
+    #{$root}__action {
+      .odx-button {
+        color: var(--odx-c-danger-text);
+      }
+    }
+  }
+
+  &:first-child #{$list-item-selector} {
+    --separator-color: transparent;
+  }
+
+  &__icon--expanded {
+    transform: scaleY(-1);
+  }
+
+  &--interactive {
+    #{$root}__action {
+      pointer-events: none;
+    }
+  }
+}

package/scss/footer.component.scss

@@ -0,0 +1,86 @@
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+:root {
+  --odx-footer-min-height: #{dimensions.get-size(10)};
+  --odx-footer-background-color: var(--odx-c-background-content);
+  --odx-footer-text-color: var(--odx-c-text);
+  --odx-footer-description-color: var(--odx-c-text-disabled);
+
+  .odx-footer--dark {
+    --odx-footer-background-color: var(--odx-c-primary);
+    --odx-footer-text-color: var(--odx-c-primary-text);
+    --odx-footer-description-color: var(--odx-footer-text-color);
+  }
+}
+
+@include utils.theme-selector(dark) {
+  .odx-footer--dark {
+    --odx-footer-background-color: var(--blue-800);
+    --odx-footer-text-color: var(--black);
+    --odx-footer-description-color: var(--black);
+  }
+}
+
+.odx-footer {
+  background-color: var(--odx-footer-background-color);
+  box-sizing: border-box;
+  color: var(--odx-footer-text-color);
+  display: flex;
+  margin-block-start: auto;
+  min-height: var(--odx-footer-min-height);
+
+  @include dimensions.padding(1);
+
+  &__inner,
+  &__navigation {
+    row-gap: #{dimensions.get-size(0.25)};
+  }
+
+  &__content {
+    grid-area: content;
+  }
+
+  &__inner {
+    column-gap: var(--odx-grid-gutter);
+    display: grid;
+    grid-template-areas: 'content' 'navigation' 'meta';
+    grid-template-rows: 1fr repeat(2, auto);
+    margin-inline: auto;
+    max-width: var(--odx-v-max-page-width, 100%);
+    width: 100%;
+  }
+
+  &__navigation {
+    align-items: center;
+    column-gap: #{dimensions.get-size(1)};
+    display: flex;
+    flex-wrap: wrap;
+    grid-area: navigation;
+    grid-template-rows: 1fr auto;
+
+    > .odx-link {
+      color: var(--odx-footer-text-color);
+    }
+
+    @include breakpoints.up(phone) {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+
+  &__description {
+    color: var(--odx-footer-description-color);
+    grid-area: meta;
+    user-select: none;
+
+    @include utils.non-interactive();
+    @include typography.font-size(-1);
+
+    @include breakpoints.up(phone) {
+      text-align: right;
+    }
+  }
+}

package/scss/form-field.component.scss

@@ -0,0 +1,264 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+$form-field-label-height: math.div(20, 24);
+$form-field-hint-height: math.div(16, 24);
+$form-field-inner-padding: math.div(8, 24);
+
+:root {
+  --odx-form-field-hint-color: var(--gray-500);
+}
+
+.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;
+}
+
+.odx-form-field {
+  $root: &;
+  $control-selector: '.odx-form-field-control';
+
+  @include dimensions.padding($form-field-label-height, top);
+
+  color: var(--odx-input-control-color);
+  display: flex;
+  flex-direction: column;
+  vertical-align: top;
+
+  &__label,
+  &__info {
+    @include dimensions.padding-x($form-field-inner-padding);
+
+    display: block;
+    flex: 1 1 auto;
+  }
+
+  &__prefix,
+  &__suffix {
+    @include dimensions.height(1.5);
+    @include motion.transition(color);
+    @include utils.vertical-center-content(true);
+
+    flex: 0 0 auto;
+
+    #{$root}.is-disabled & {
+      color: var(--odx-input-control-color-disabled);
+    }
+  }
+
+  &__prefix:not(:empty) {
+    @include dimensions.padding($form-field-inner-padding, left);
+  }
+
+  &__suffix:not(:empty) {
+    @include dimensions.padding($form-field-inner-padding, right);
+  }
+
+  &-label {
+    #{$root}:not(#{$root}--horizontal) & {
+      @include typography.prevent-text-overflow();
+    }
+  }
+
+  &__label {
+    @include dimensions.line-height($form-field-label-height);
+    @include dimensions.margin(-$form-field-label-height, 'top');
+    @include typography.font-size(-1);
+
+    user-select: none;
+
+    #{$root}:not(#{$root}--horizontal, #{$root}--simple) & {
+      display: flex;
+    }
+
+    &-is-required {
+      @include typography.font-size(0);
+
+      margin-left: 2px;
+      vertical-align: top;
+
+      #{$root}--required:not(.is-readonly, .is-disabled) & {
+        color: var(--odx-c-error-text);
+      }
+    }
+  }
+
+  &__control {
+    @include dimensions.min-height(1.5);
+    @include motion.transition(background-color color outline-color);
+    @include utils.with-outline();
+    @include utils.focus-state(true, true, 'input');
+    @include utils.focus-state(true, true, 'textarea');
+    @include utils.focus-state(true, true, '.odx-select');
+
+    background-color: var(--odx-input-control-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    display: flex;
+    outline-color: var(--odx-input-control-outline-color);
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+      @include motion.transition(background-color);
+
+      background-color: transparent;
+      bottom: 0;
+      content: '';
+      display: block;
+      height: 1px;
+      left: 0;
+      position: absolute;
+      width: 100%;
+      z-index: var(--odx-v-layer-1);
+    }
+
+    #{$control-selector} {
+      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);
+
+        color: var(--odx-input-control-color);
+        opacity: 0.65;
+      }
+    }
+
+    > textarea {
+      @include dimensions.padding-y(0.25);
+
+      height: dimensions.get-size(3);
+      resize: vertical;
+    }
+
+    > select {
+      border-right: dimensions.get-size(0.25) solid transparent;
+    }
+
+    &:hover {
+      background-color: var(--odx-input-control-background-color-hover);
+      outline-color: var(--odx-input-control-outline-color-hover);
+    }
+
+    #{$root}.has-error & {
+      background-color: var(--odx-input-control-background-color-error);
+      outline-color: var(--odx-input-control-outline-color-error);
+
+      &:hover {
+        background-color: var(--odx-input-control-background-color);
+      }
+
+      &::after {
+        background-color: var(--odx-input-control-color-error);
+      }
+    }
+
+    #{$root}.has-warning & {
+      background-color: var(--odx-input-control-background-color-warning);
+      outline-color: var(--odx-input-control-outline-color-warning);
+
+      &:hover {
+        background-color: var(--odx-input-control-background-color-warning);
+      }
+
+      &::after {
+        background-color: var(--odx-input-control-color-warning);
+      }
+    }
+
+    #{$root}.is-disabled &,
+    #{$root}.is-readonly & {
+      &::after {
+        background-color: transparent;
+      }
+    }
+
+    #{$root}.is-disabled & {
+      background-color: var(--odx-input-control-background-color-disabled);
+      color: var(--odx-input-control-color-disabled);
+      outline-color: var(--odx-input-control-outline-color-disabled);
+
+      #{$control-selector} {
+        @include utils.non-interactive();
+
+        &::placeholder {
+          color: var(--odx-input-control-color-disabled);
+        }
+      }
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-input-control-background-color-readonly);
+      color: var(--odx-input-control-color-readonly);
+      outline-color: var(--odx-input-control-outline-color-readonly);
+    }
+  }
+
+  &__info {
+    @include dimensions.min-height($form-field-hint-height);
+    @include dimensions.line-height($form-field-hint-height);
+    @include motion.transition(opacity);
+    @include typography.font-size(-2);
+
+    color: var(--odx-form-field-hint-color);
+    text-align: right;
+  }
+
+  &--simple {
+    padding: 0;
+
+    @include dimensions.margin-y(0.25);
+
+    #{$root}__label,
+    #{$root}__info {
+      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,
+.odx-form-group:has(.odx-form-field.is-readonly) {
+  .odx-form-field__info {
+    @include utils.non-interactive();
+
+    opacity: 0;
+  }
+}
+
+.odx-form-field-error {
+  color: var(--odx-input-control-color-error);
+}
+
+.odx-form-field.has-warning .odx-form-field-error {
+  color: var(--odx-input-control-color-warning);
+}

package/scss/header-navigation.component.scss

@@ -0,0 +1,35 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../layout/typography' as *;
+
+.odx-header-navigation {
+  $root: &;
+
+  background-color: var(--odx-c-background-content);
+  border-block-start: 1px solid var(--odx-c-separator);
+  display: block;
+  margin-block-start: -1px;
+
+  @include dimensions.padding-x(0.5);
+  @include dimensions.padding-y(0.25);
+
+  &__inner {
+    flex-wrap: wrap;
+    height: auto;
+    margin: 0;
+
+    #{$root}--centered & {
+      display: flex;
+      justify-content: center;
+      margin-inline: auto;
+      max-width: var(--odx-v-max-page-width);
+    }
+
+    > .odx-button {
+      margin-block: 0;
+    }
+  }
+}

package/scss/header.component.scss

@@ -0,0 +1,73 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../layout/typography' as *;
+
+.odx-header {
+  @include dimensions.padding(math.div(20, 24), 'inline-start');
+  @include dimensions.padding(0.5, 'inline-end');
+  @include dimensions.min-height(2);
+  @include utils.vertical-center-content();
+
+  background-color: var(--odx-c-background-content);
+
+  .odx-main-menu-button {
+    margin-inline-end: dimensions.get-size(0.5);
+    margin-inline-start: dimensions.get-size(-1 * math.div(1, 3));
+  }
+
+  > * {
+    margin-block: 0;
+    min-height: auto;
+  }
+
+  &__content {
+    &:has(&-container:not(:empty)) {
+      @include dimensions.padding-x(0.5);
+    }
+
+    margin-inline-end: auto;
+
+    &-container {
+      @include typography.prevent-text-overflow();
+
+      display: none;
+      overflow: hidden;
+
+      @include breakpoints.up(tablet) {
+        display: block;
+      }
+    }
+  }
+
+  &__title {
+    @extend .odx-heading;
+    @extend .odx-heading-6;
+    @include typography.prevent-text-overflow();
+
+    overflow: hidden;
+  }
+
+  .odx-action-group:not(:last-child) {
+    border-inline-end: 1px solid var(--odx-c-separator);
+    margin-inline-end: dimensions.get-size(0.5);
+    padding-inline-end: dimensions.get-size(0.5);
+  }
+
+  &:has(> .odx-heading) > .odx-logo {
+    display: none;
+    margin-inline-end: dimensions.get-size(0.5);
+
+    @include breakpoints.up(tablet) {
+      display: block;
+    }
+  }
+
+  .odx-search-bar {
+    &:not(:last-child) {
+      margin-inline-end: dimensions.get-size(0.5);
+    }
+  }
+}

package/scss/icon.component.scss

@@ -0,0 +1,21 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+
+$icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.div(48, 24) 2);
+
+.odx-icon {
+  flex: 0 0 auto;
+  font-size: dimensions.get-size(1);
+
+  @each $size, $size_factor, $factor in $icon-sizes {
+    &--#{$size} {
+      font-size: dimensions.get-size($size_factor);
+    }
+  }
+
+  &--inline {
+    font-size: inherit;
+    vertical-align: -0.1em;
+  }
+}