@vaadin/time-picker 25.0.0-alpha2 → 25.0.0-alpha21

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

@@ -3,6 +3,8 @@
  * 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 { I18nMixin } from '@vaadin/component-base/src/i18n-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 +24,16 @@ const MAX_ALLOWED_TIME = '23:59:59.999';
  * A mixin providing common time-picker functionality.
  *
  * @polymerMixin
+ * @mixes ComboBoxBaseMixin
+ * @mixes I18nMixin
  * @mixes InputControlMixin
  * @mixes PatternMixin
  */
 export const TimePickerMixin = (superClass) =>
-  class TimePickerMixinClass extends PatternMixin(InputControlMixin(superClass)) {
+  class TimePickerMixinClass extends I18nMixin(
+    timePickerI18nDefaults,
+    PatternMixin(ComboBoxBaseMixin(InputControlMixin(superClass))),
+  ) {
     static get properties() {
       return {
         /**
@@ -45,17 +52,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,61 +103,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
-         * _i18n_ object or just the property you want to modify.
-         *
-         * The object has the following JSON structure:
-         *
-         * ```
-         * {
-         *   // A function to format given `Object` as
-         *   // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
-         *   formatTime: (time) => {
-         *     // returns a string representation of the given
-         *     // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
-         *   },
-         *
-         *   // A function to parse the given text to an `Object` in the format
-         *   // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
-         *   // Must properly parse (at least) text
-         *   // formatted by `formatTime`.
-         *   parseTime: text => {
-         *     // Parses a string in object/string that can be formatted by`formatTime`.
-         *   }
-         * }
-         * ```
-         *
-         * Both `formatTime` and `parseTime` need to be implemented
-         * to ensure the component works properly.
-         *
-         * @type {!TimePickerI18n}
-         */
-        i18n: {
-          type: Object,
-          sync: true,
-          value: () => ({ ...timePickerI18nDefaults }),
-        },
-
         /** @private */
         _comboBoxValue: {
           type: String,
@@ -169,12 +110,6 @@ export const TimePickerMixin = (superClass) =>
           observer: '__comboBoxValueChanged',
         },
 
-        /** @private */
-        __dropdownItems: {
-          type: Array,
-          sync: true,
-        },
-
         /** @private */
         _inputContainer: {
           type: Object,
@@ -184,8 +119,10 @@ export const TimePickerMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateAriaAttributes(__dropdownItems, opened, inputElement)',
-        '__updateDropdownItems(i18n, min, max, step)',
+        '_openedOrItemsChanged(opened, _dropdownItems)',
+        '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
+        '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
+        '__updateDropdownItems(__effectiveI18n, min, max, step)',
       ];
     }
 
@@ -193,6 +130,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
@@ -202,6 +148,45 @@ export const TimePickerMixin = (superClass) =>
       return this.$.clearButton;
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides both the
+     * time parsing and formatting functions.
+     *
+     * The object has the following JSON structure:
+     *
+     * ```js
+     * {
+     *   // A function to format given `Object` as
+     *   // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
+     *   formatTime: (time) => {
+     *     // returns a string representation of the given
+     *     // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
+     *   },
+     *
+     *   // A function to parse the given text to an `Object` in the format
+     *   // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
+     *   // Must properly parse (at least) text
+     *   // formatted by `formatTime`.
+     *   parseTime: text => {
+     *     // Parses a string in object/string that can be formatted by`formatTime`.
+     *   }
+     * }
+     * ```
+     *
+     * NOTE: `formatTime` and `parseTime` must be implemented in a
+     * compatible manner to ensure the component works properly.
+     *
+     * @return {!TimePickerI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /**
      * The input element's value when it cannot be parsed as a time, and an empty string otherwise.
      *
@@ -209,7 +194,7 @@ export const TimePickerMixin = (superClass) =>
      * @return {string}
      */
     get __unparsableValue() {
-      if (this._inputElementValue && !this.i18n.parseTime(this._inputElementValue)) {
+      if (this._inputElementValue && !this.__effectiveI18n.parseTime(this._inputElementValue)) {
         return this._inputElementValue;
       }
 
@@ -239,6 +224,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 +233,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.__effectiveI18n.parseTime(this.value))) &&
+        (!this._comboBoxValue || this.__effectiveI18n.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();
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to implement clearing logic.
+     * @protected
+     * @override
+     */
+    _onClearAction() {
+      this._comboBoxValue = '';
+      this._inputElementValue = '';
+
+      this.__commitValueChange();
     }
 
     /**
-     * Opens the dropdown list.
+     * 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 +396,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 +409,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);
@@ -354,7 +418,7 @@ export const TimePickerMixin = (superClass) =>
       // observer where the value can be parsed again, so we set
       // this flag to ensure it does not alter the value.
       this.__useMemo = true;
-      this._comboBoxValue = this.i18n.formatTime(objWithStep);
+      this._comboBoxValue = this.__effectiveI18n.formatTime(objWithStep);
       this.__useMemo = false;
 
       this.__commitValueChange();
@@ -451,14 +515,14 @@ export const TimePickerMixin = (superClass) =>
     }
 
     /** @private */
-    __updateDropdownItems(i18n, min, max, step) {
+    __updateDropdownItems(effectiveI18n, min, max, step) {
       const minTimeObj = validateTime(parseISOTime(min || MIN_ALLOWED_TIME), step);
       const minSec = this.__getSec(minTimeObj);
 
       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;
@@ -467,7 +531,7 @@ export const TimePickerMixin = (superClass) =>
       }
 
       if (this.value) {
-        this._comboBoxValue = i18n.formatTime(i18n.parseTime(this.value));
+        this._comboBoxValue = effectiveI18n.formatTime(effectiveI18n.parseTime(this.value));
       }
     }
 
@@ -503,7 +567,7 @@ export const TimePickerMixin = (superClass) =>
       while (time + step >= minSec && time + step <= maxSec) {
         const timeObj = validateTime(this.__addStep(time * 1000, step), step);
         time += step;
-        const formatted = this.i18n.formatTime(timeObj);
+        const formatted = this.__effectiveI18n.formatTime(timeObj);
         generatedList.push({ label: formatted, value: formatted });
       }
 
@@ -549,8 +613,8 @@ export const TimePickerMixin = (superClass) =>
         return;
       }
 
-      const parsedObj = this.__useMemo ? this.__memoValue : this.i18n.parseTime(value);
-      const newValue = this.i18n.formatTime(parsedObj) || '';
+      const parsedObj = this.__useMemo ? this.__memoValue : this.__effectiveI18n.parseTime(value);
+      const newValue = this.__effectiveI18n.formatTime(parsedObj) || '';
 
       if (parsedObj) {
         if (value !== newValue) {
@@ -574,12 +638,6 @@ export const TimePickerMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __onComboBoxChange(event) {
-      event.stopPropagation();
-      this.__commitValueChange();
-    }
-
     /** @private */
     __updateValue(obj) {
       const timeString = formatISOTime(validateTime(obj, this.step)) || '';
@@ -593,7 +651,8 @@ export const TimePickerMixin = (superClass) =>
 
     /** @private */
     __updateInputValue(obj) {
-      const timeString = this.i18n.formatTime(validateTime(obj, this.step)) || '';
+      const timeString = this.__effectiveI18n.formatTime(validateTime(obj, this.step)) || '';
+      this._inputElementValue = timeString;
       this._comboBoxValue = timeString;
     }
 
@@ -605,8 +664,8 @@ export const TimePickerMixin = (superClass) =>
      * @protected
      */
     _timeAllowed(time) {
-      const parsedMin = this.i18n.parseTime(this.min || MIN_ALLOWED_TIME);
-      const parsedMax = this.i18n.parseTime(this.max || MAX_ALLOWED_TIME);
+      const parsedMin = this.__effectiveI18n.parseTime(this.min || MIN_ALLOWED_TIME);
+      const parsedMax = this.__effectiveI18n.parseTime(this.max || MAX_ALLOWED_TIME);
 
       return (
         (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
@@ -615,22 +674,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

@@ -8,10 +8,11 @@ import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-ove
 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-base-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';
-import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-core-styles.js';
+import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
@@ -24,7 +25,7 @@ import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-cor
  * @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';
@@ -37,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

@@ -7,7 +7,7 @@ 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';
+import { timePickerScrollerStyles } from './styles/vaadin-time-picker-scroller-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.

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

@@ -73,33 +73,43 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
  * `--vaadin-time-picker-overlay-width`     | Width of the overlay       | `auto`
  * `--vaadin-time-picker-overlay-max-height`| Max height of the overlay  | `65vh`
  *
- * `<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
- * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
- *
- * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
- *
- * Part name       | Description
- * ----------------|----------------
- * `toggle-button` | The toggle button
- *
- * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
- *
- * Attribute | Description
- * ----------|------------------------------------------
- * `opened`  | Set when the time-picker dropdown is open
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The label element
+ * `input-field`        | The element that wraps prefix, value and buttons
+ * `field-button`       | Set on both clear and toggle buttons
+ * `clear-button`       | The clear button
+ * `error-message`      | The error message element
+ * `helper-text`        | The helper text element wrapper
+ * `required-indicator` | The `required` state indicator element
+ * `toggle-button`      | The toggle button
+ * `overlay`            | The overlay container
+ * `content`            | The overlay content
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute            | Description
+ * ---------------------|---------------------------------
+ * `disabled`           | Set when the element is disabled
+ * `has-value`          | Set when the element has a value
+ * `has-label`          | Set when the element has a label
+ * `has-helper`         | Set when the element has helper text or slot
+ * `has-error-message`  | Set when the element has an error message
+ * `has-tooltip`        | Set when the element has a slotted tooltip
+ * `invalid`            | Set when the element is invalid
+ * `focused`            | Set when the element is focused
+ * `focus-ring`         | Set when the element is keyboard focused
+ * `readonly`           | Set when the element is readonly
+ * `opened`             | Set when the overlay is opened
  *
  * ### Internal components
  *
  * 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.
- *
- * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
- * propagated to the internal components listed above.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *