@odx/ui 3.5.2 → 3.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @odx/ui
 
+## 3.5.3
+
+### Patch Changes
+
+- 7321693: new timepicker component
+
 ## 3.5.2
 
 ### Patch Changes

package/core-theme.css

@@ -6559,6 +6559,53 @@ html body .odx-fs-italic {
   background-color: var(--odx-table-cell-background-color-active);
 }
 
+.odx-timepicker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.odx-timepicker__wrapper {
+  display: inline-flex;
+  max-width: calc(var(--odx-vertical-rythm-base-size) * 4.5834);
+}
+.odx-timepicker input[odxTimepickerControl] {
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  width: 100%;
+}
+.odx-timepicker input[odxTimepickerControl]::-moz-placeholder {
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  color: var(--odx-input-control-color);
+  opacity: 0.65;
+}
+.odx-timepicker input[odxTimepickerControl]::placeholder {
+  font-weight: var(--odx-typography-font-weight-normal);
+  letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+  color: var(--odx-input-control-color);
+  opacity: 0.65;
+}
+.odx-timepicker input[odxTimepickerControl]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+          appearance: none;
+}
+.odx-timepicker__option-list {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(7 * var(--odx-vertical-rythm-base-size) * 1.5 + var(--odx-vertical-rythm-base-size));
+}
+.odx-timepicker-option:active {
+  background-color: var(--odx-input-control-active-color);
+}
+.odx-timepicker.is-readonly .odx-timepicker__trigger {
+  outline-color: transparent;
+  pointer-events: none;
+}
+
 .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);

package/package.json

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

package/scss/components/timepicker.component.scss

@@ -0,0 +1,56 @@
+@use 'sass:math';
+@use '../abstract/utils';
+@use '../layout/helpers';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/motion';
+
+.odx-timepicker {
+  $root: &;
+
+  @include utils.vertical-center-content();
+
+  justify-content: space-between;
+  width: 100%;
+
+  &__wrapper {
+    display: inline-flex;
+    max-width: dimensions.get-size(math.div(110, 24));
+  }
+
+  input[odxTimepickerControl] {
+    appearance: textfield;
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-normal-letter-spacing);
+    width: 100%;
+
+    &::placeholder {
+      @include typography.font-weight(normal);
+
+      color: var(--odx-input-control-color);
+      opacity: 0.65;
+    }
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+  }
+
+  &__option-list {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(7 * dimensions.get-size(1.5) + var(--odx-vertical-rythm-base-size));
+  }
+
+  &-option {
+    &:active {
+      background-color: var(--odx-input-control-active-color);
+    }
+  }
+
+  &.is-readonly {
+    #{$root}__trigger {
+      @include utils.non-interactive();
+    }
+  }
+}

package/scss/core.scss

@@ -87,6 +87,7 @@ Layout
 @use 'components/tab-bar-item.component';
 @use 'components/tab-bar.component';
 @use 'components/table.component';
+@use 'components/timepicker.component';
 @use 'components/toast.component';
 @use 'components/toast-item.component';
 @use 'components/toggle-button.component';