@vaadin/time-picker 25.0.0-alpha1 → 25.0.0-alpha10

package/src/vaadin-time-picker-mixin.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ComboBoxBaseMixin } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -22,11 +23,12 @@ const MAX_ALLOWED_TIME = '23:59:59.999';
  * A mixin providing common time-picker functionality.
  *
  * @polymerMixin
+ * @mixes ComboBoxBaseMixin
  * @mixes InputControlMixin
  * @mixes PatternMixin
  */
 export const TimePickerMixin = (superClass) =>
-  class TimePickerMixinClass extends PatternMixin(InputControlMixin(superClass)) {
+  class TimePickerMixinClass extends PatternMixin(ComboBoxBaseMixin(InputControlMixin(superClass))) {
     static get properties() {
       return {
         /**
@@ -45,17 +47,6 @@ export const TimePickerMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * True if the dropdown is open, false otherwise.
-         */
-        opened: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          reflectToAttribute: true,
-          sync: true,
-        },
-
         /**
          * Minimum time allowed.
          *
@@ -107,24 +98,6 @@ export const TimePickerMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * Set true to prevent the overlay from opening automatically.
-         * @attr {boolean} auto-open-disabled
-         */
-        autoOpenDisabled: {
-          type: Boolean,
-          sync: true,
-        },
-
-        /**
-         * A space-delimited list of CSS class names to set on the overlay element.
-         *
-         * @attr {string} overlay-class
-         */
-        overlayClass: {
-          type: String,
-        },
-
         /**
          * The object used to localize this component.
          * To change the default localization, replace the entire
@@ -169,12 +142,6 @@ export const TimePickerMixin = (superClass) =>
           observer: '__comboBoxValueChanged',
         },
 
-        /** @private */
-        __dropdownItems: {
-          type: Array,
-          sync: true,
-        },
-
         /** @private */
         _inputContainer: {
           type: Object,
@@ -184,7 +151,9 @@ export const TimePickerMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateAriaAttributes(__dropdownItems, opened, inputElement)',
+        '_openedOrItemsChanged(opened, _dropdownItems)',
+        '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
+        '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
         '__updateDropdownItems(i18n, min, max, step)',
       ];
     }
@@ -193,6 +162,15 @@ export const TimePickerMixin = (superClass) =>
       return [...super.constraints, 'min', 'max'];
     }
 
+    /**
+     * Tag name prefix used by `ComboBoxBaseMixin` for scroller and items.
+     * @protected
+     * @return {string}
+     */
+    get _tagNamePrefix() {
+      return 'vaadin-time-picker';
+    }
+
     /**
      * Used by `ClearButtonMixin` as a reference to the clear button element.
      * @protected
@@ -239,6 +217,7 @@ export const TimePickerMixin = (superClass) =>
       );
       this.addController(new LabelledInputController(this.inputElement, this._labelController));
       this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
+      this._toggleElement = this.$.toggleButton;
 
       this._tooltipController = new TooltipController(this);
       this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
@@ -247,47 +226,136 @@ export const TimePickerMixin = (superClass) =>
       this.addController(this._tooltipController);
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      // Update selected item in the scroller
+      if (props.has('_comboBoxValue') && this._dropdownItems) {
+        this._scroller.selectedItem = this._dropdownItems.find((item) => item.value === this._comboBoxValue);
+      }
+    }
+
     /**
-     * Override method inherited from `InputMixin` to forward the input to combo-box.
+     * Returns true if the current input value satisfies all constraints (if any).
+     * You can override this method for custom validations.
+     *
+     * @return {boolean} True if the value is valid
+     */
+    checkValidity() {
+      return !!(
+        this.inputElement.checkValidity() &&
+        (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
+        (!this._comboBoxValue || this.i18n.parseTime(this._comboBoxValue))
+      );
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to handle item label path.
      * @protected
      * @override
      */
-    _inputElementChanged(input) {
-      super._inputElementChanged(input);
+    _getItemLabel(item) {
+      return item ? item.label : '';
+    }
 
-      if (input) {
-        this.$.comboBox._setInputElement(input);
+    /** @private */
+    _updateScroller(opened, items, focusedIndex, theme) {
+      if (opened) {
+        this._scroller.style.maxHeight =
+          getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
       }
+
+      this._scroller.setProperties({
+        items: opened ? items : [],
+        opened,
+        focusedIndex,
+        theme,
+      });
+    }
+
+    /** @private */
+    _openedOrItemsChanged(opened, items) {
+      // Close the overlay if there are no items to display.
+      this._overlayOpened = opened && !!(items && items.length);
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to commit value on overlay closing.
+     * @protected
+     * @override
+     */
+    _onClosed() {
+      this._commitValue();
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to handle Escape pres..
+     * @protected
+     * @override
+     */
+    _onEscapeCancel() {
+      this._inputElementValue = this._comboBoxValue;
+      this._closeOrCommit();
     }
 
     /**
-     * Opens the dropdown list.
+     * Override method from `ComboBoxBaseMixin` to implement clearing logic.
+     * @protected
+     * @override
+     */
+    _onClearAction() {
+      this._comboBoxValue = '';
+      this._inputElementValue = '';
+
+      this.__commitValueChange();
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to implement value commit logic.
+     * @protected
+     * @override
      */
-    open() {
-      if (!this.disabled && !this.readonly) {
-        this.opened = true;
+    _commitValue() {
+      if (this._focusedIndex > -1) {
+        // Commit value based on focused index
+        const focusedItem = this._dropdownItems[this._focusedIndex];
+        const itemValue = this._getItemLabel(focusedItem);
+        this._inputElementValue = itemValue;
+        this._comboBoxValue = itemValue;
+        this._focusedIndex = -1;
+      } else if (this._inputElementValue === '' || this._inputElementValue === undefined) {
+        this._comboBoxValue = '';
+      } else {
+        this._comboBoxValue = this._inputElementValue;
       }
+
+      this.__commitValueChange();
+
+      this._clearSelectionRange();
     }
 
     /**
-     * Closes the dropdown list.
+     * Override method from `ComboBoxBaseMixin` to handle loading.
+     * @protected
+     * @override
      */
-    close() {
-      this.opened = false;
+    _closeOrCommit() {
+      if (!this.opened) {
+        this._commitValue();
+      } else {
+        this.close();
+      }
     }
 
     /**
-     * Returns true if the current input value satisfies all constraints (if any).
-     * You can override this method for custom validations.
-     *
-     * @return {boolean} True if the value is valid
+     * Override method from `ComboBoxBaseMixin` to handle reverting value.
+     * @protected
+     * @override
      */
-    checkValidity() {
-      return !!(
-        this.inputElement.checkValidity() &&
-        (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
-        (!this._comboBoxValue || this.i18n.parseTime(this._comboBoxValue))
-      );
+    _revertInputValue() {
+      this._inputElementValue = this._comboBoxValue;
+      this._clearSelectionRange();
     }
 
     /**
@@ -321,7 +389,7 @@ export const TimePickerMixin = (superClass) =>
     _onKeyDown(e) {
       super._onKeyDown(e);
 
-      if (this.readonly || this.disabled || this.__dropdownItems.length) {
+      if (this.readonly || this.disabled || this._dropdownItems.length) {
         return;
       }
 
@@ -334,17 +402,6 @@ export const TimePickerMixin = (superClass) =>
       }
     }
 
-    /**
-     * Override an event listener from `KeyboardMixin`.
-     * Do not call `super` in order to override clear
-     * button logic defined in `InputControlMixin`.
-     * @param {Event} event
-     * @protected
-     */
-    _onEscape() {
-      // Do nothing, the internal combo-box handles Escape.
-    }
-
     /** @private */
     __onArrowPressWithStep(step) {
       const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
@@ -458,7 +515,7 @@ export const TimePickerMixin = (superClass) =>
       const maxTimeObj = validateTime(parseISOTime(max || MAX_ALLOWED_TIME), step);
       const maxSec = this.__getSec(maxTimeObj);
 
-      this.__dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
+      this._dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
 
       if (step !== this.__oldStep) {
         this.__oldStep = step;
@@ -574,12 +631,6 @@ export const TimePickerMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __onComboBoxChange(event) {
-      event.stopPropagation();
-      this.__commitValueChange();
-    }
-
     /** @private */
     __updateValue(obj) {
       const timeString = formatISOTime(validateTime(obj, this.step)) || '';
@@ -594,6 +645,7 @@ export const TimePickerMixin = (superClass) =>
     /** @private */
     __updateInputValue(obj) {
       const timeString = this.i18n.formatTime(validateTime(obj, this.step)) || '';
+      this._inputElementValue = timeString;
       this._comboBoxValue = timeString;
     }
 
@@ -615,22 +667,44 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /**
-     * Override method inherited from `InputControlMixin`.
+     * Override method from `ComboBoxBaseMixin` to deselect
+     * dropdown item by requesting content update on clear.
+     * @param {Event} event
      * @protected
      */
-    _onClearButtonClick() {}
+    _onClearButtonClick(event) {
+      event.stopPropagation();
+      super._onClearButtonClick(event);
+
+      if (this.opened) {
+        this._scroller.requestContentUpdate();
+      }
+    }
 
     /**
-     * Override method inherited from `InputConstraintsMixin`.
+     * @param {Event} event
      * @protected
      */
-    _onChange() {}
+    _onHostClick(event) {
+      const path = event.composedPath();
+
+      // Open dropdown only when clicking on the label or input field
+      if (path.includes(this._labelNode) || path.includes(this._inputContainer)) {
+        super._onHostClick(event);
+      }
+    }
 
     /**
-     * Override method inherited from `InputMixin`.
+     * Override an event listener from `InputMixin`.
+     * @param {!Event} event
      * @protected
+     * @override
      */
-    _onInput() {}
+    _onChange(event) {
+      // Suppress the native change event fired on the native input.
+      // We use `__commitValueChange` to fire a custom event.
+      event.stopPropagation();
+    }
 
     /**
      * Fired when the user commits a value change.

package/src/vaadin-time-picker-overlay.js

@@ -3,26 +3,16 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const timePickerOverlayStyles = css`
-  #overlay {
-    width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-`;
+import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
@@ -35,7 +25,7 @@ const timePickerOverlayStyles = css`
  * @private
  */
 export class TimePickerOverlay extends ComboBoxOverlayMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-time-picker-overlay';
@@ -48,7 +38,6 @@ export class TimePickerOverlay extends ComboBoxOverlayMixin(
   /** @protected */
   render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden></div>
       <div part="overlay" id="overlay">
         <div part="content" id="content">
           <slot></slot>

package/src/vaadin-time-picker-scroller.js

@@ -3,10 +3,11 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { timePickerScrollerStyles } from './styles/vaadin-time-picker-scroller-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
@@ -22,29 +23,7 @@ export class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitEl
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: block;
-        min-height: 1px;
-        overflow: auto;
-
-        /* Fixes item background from getting on top of scrollbars on Safari */
-        transform: translate3d(0, 0, 0);
-
-        /* Enable momentum scrolling on iOS */
-        -webkit-overflow-scrolling: touch;
-
-        /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-        box-shadow: 0 0 0 white;
-      }
-
-      #selector {
-        border-width: var(--_vaadin-time-picker-items-container-border-width);
-        border-style: var(--_vaadin-time-picker-items-container-border-style);
-        border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
-        position: relative;
-      }
-    `;
+    return timePickerScrollerStyles;
   }
 
   /** @protected */

package/src/vaadin-time-picker.d.ts

@@ -78,9 +78,11 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
  *
  * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * Part name       | Description
- * ----------------|----------------
- * `toggle-button` | The toggle button
+ * Part name        | Description
+ * -----------------|----------------
+ * `toggle-button`  | The toggle button
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
@@ -93,7 +95,6 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
  * In addition to `<vaadin-time-picker>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-time-picker-combo-box>` - an internal version of [`<vaadin-combo-box>`](#/elements/vaadin-combo-box).
  * - `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.

package/src/vaadin-time-picker.js

@@ -4,14 +4,18 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
-import './vaadin-time-picker-combo-box.js';
-import { css, html, LitElement } from 'lit';
+import './vaadin-time-picker-item.js';
+import './vaadin-time-picker-overlay.js';
+import './vaadin-time-picker-scroller.js';
+import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { timePickerStyles } from './styles/vaadin-time-picker-core-styles.js';
 import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
 
 /**
@@ -41,9 +45,11 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
  *
  * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
  *
- * Part name       | Description
- * ----------------|----------------
- * `toggle-button` | The toggle button
+ * Part name        | Description
+ * -----------------|----------------
+ * `toggle-button`  | The toggle button
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  *
  * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
  *
@@ -56,7 +62,6 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
  * In addition to `<vaadin-time-picker>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-time-picker-combo-box>` - an internal version of [`<vaadin-combo-box>`](#/elements/vaadin-combo-box).
  * - `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  * - `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
  * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
@@ -94,30 +99,13 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
  * @mixes ThemableMixin
  * @mixes TimePickerMixin
  */
-class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-time-picker';
   }
 
   static get styles() {
-    return [
-      inputFieldShared,
-      css`
-        /* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
-        :host([dir='rtl']) [part='input-field'] {
-          direction: ltr;
-        }
-
-        :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
-          direction: rtl;
-          text-align: left;
-        }
-
-        [part~='toggle-button'] {
-          cursor: pointer;
-        }
-      `,
-    ];
+    return [inputFieldShared, timePickerStyles];
   }
 
   /** @protected */
@@ -129,35 +117,18 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
           <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
         </div>
 
-        <vaadin-time-picker-combo-box
-          id="comboBox"
-          .filteredItems="${this.__dropdownItems}"
-          .value="${this._comboBoxValue}"
-          .opened="${this.opened}"
-          .disabled="${this.disabled}"
+        <vaadin-input-container
+          part="input-field"
           .readonly="${this.readonly}"
-          .clearButtonVisible="${this.clearButtonVisible}"
-          .autoOpenDisabled="${this.autoOpenDisabled}"
-          .overlayClass="${this.overlayClass}"
-          .positionTarget="${this._inputContainer}"
+          .disabled="${this.disabled}"
+          .invalid="${this.invalid}"
           theme="${ifDefined(this._theme)}"
-          @value-changed="${this.__onComboBoxValueChanged}"
-          @opened-changed="${this.__onComboBoxOpenedChanged}"
-          @change="${this.__onComboBoxChange}"
         >
-          <vaadin-input-container
-            part="input-field"
-            .readonly="${this.readonly}"
-            .disabled="${this.disabled}"
-            .invalid="${this.invalid}"
-            theme="${ifDefined(this._theme)}"
-          >
-            <slot name="prefix" slot="prefix"></slot>
-            <slot name="input"></slot>
-            <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-            <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
-          </vaadin-input-container>
-        </vaadin-time-picker-combo-box>
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
 
         <div part="helper-text">
           <slot name="helper"></slot>
@@ -167,18 +138,22 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
           <slot name="error-message"></slot>
         </div>
       </div>
-      <slot name="tooltip"></slot>
-    `;
-  }
 
-  /** @private */
-  __onComboBoxOpenedChanged(event) {
-    this.opened = event.detail.value;
-  }
+      <vaadin-time-picker-overlay
+        id="overlay"
+        dir="ltr"
+        .owner="${this}"
+        .opened="${this._overlayOpened}"
+        theme="${ifDefined(this._theme)}"
+        .positionTarget="${this._inputContainer}"
+        no-vertical-overlap
+        exportparts="overlay, content"
+      >
+        <slot name="overlay"></slot>
+      </vaadin-time-picker-overlay>
 
-  /** @private */
-  __onComboBoxValueChanged(event) {
-    this._comboBoxValue = event.detail.value;
+      <slot name="tooltip"></slot>
+    `;
   }
 }