@vaadin/time-picker 24.6.0-alpha4 → 24.6.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/time-picker",
-  "version": "24.6.0-alpha4",
+  "version": "24.6.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,19 +35,21 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "24.6.0-alpha4",
-    "@vaadin/component-base": "24.6.0-alpha4",
-    "@vaadin/field-base": "24.6.0-alpha4",
-    "@vaadin/input-container": "24.6.0-alpha4",
-    "@vaadin/item": "24.6.0-alpha4",
-    "@vaadin/overlay": "24.6.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha4"
+    "@vaadin/combo-box": "24.6.0-alpha5",
+    "@vaadin/component-base": "24.6.0-alpha5",
+    "@vaadin/field-base": "24.6.0-alpha5",
+    "@vaadin/input-container": "24.6.0-alpha5",
+    "@vaadin/item": "24.6.0-alpha5",
+    "@vaadin/overlay": "24.6.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha5",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha5",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha4",
+    "@vaadin/chai-plugins": "24.6.0-alpha5",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "78967d4f3bb46f58f43c2cc621802554acb2efaf"
+  "gitHead": "cbfa46fe276f254dcaa99a622710d56df7f0a539"
 }

package/src/vaadin-lit-time-picker-combo-box.js

@@ -0,0 +1,113 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-time-picker-item.js';
+import './vaadin-lit-time-picker-overlay.js';
+import './vaadin-lit-time-picker-scroller.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ComboBoxMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-time-picker-combo-box';
+  }
+
+  static get styles() {
+    return css`
+      :host([opened]) {
+        pointer-events: auto;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      positionTarget: {
+        type: Object,
+      },
+    };
+  }
+
+  /**
+   * Tag name prefix used by scroller and items.
+   * @protected
+   * @return {string}
+   */
+  get _tagNamePrefix() {
+    return 'vaadin-time-picker';
+  }
+
+  /**
+   * Reference to the clear button element.
+   * @protected
+   * @return {!HTMLElement}
+   */
+  get clearElement() {
+    return this.querySelector('[part="clear-button"]');
+  }
+
+  /**
+   * @override
+   * @protected
+   */
+  get _inputElementValue() {
+    return super._inputElementValue;
+  }
+
+  /**
+   * The setter is overridden to ensure the `_hasInputValue` property
+   * doesn't wrongly indicate true after the input element's value
+   * is reverted or cleared programmatically.
+   *
+   * @override
+   * @protected
+   */
+  set _inputElementValue(value) {
+    super._inputElementValue = value;
+    this._hasInputValue = value && value.length > 0;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot></slot>
+
+      <vaadin-time-picker-overlay
+        id="overlay"
+        .opened="${this._overlayOpened}"
+        ?loading="${this.loading}"
+        theme="${ifDefined(this._theme)}"
+        .positionTarget="${this.positionTarget}"
+        .restoreFocusNode="${this.inputElement}"
+        no-vertical-overlap
+      ></vaadin-time-picker-overlay>
+    `;
+  }
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.allowCustomValue = true;
+    this._toggleElement = this.querySelector('.toggle-button');
+
+    // See https://github.com/vaadin/vaadin-time-picker/issues/145
+    this.setAttribute('dir', 'ltr');
+  }
+}
+
+defineCustomElement(TimePickerComboBox);

package/src/vaadin-lit-time-picker-item.js

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 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 { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-time-picker-item>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-time-picker-item';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(TimePickerItem);

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

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 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 { 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 { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.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%;
+  }
+`;
+
+/**
+ * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ComboBoxOverlayMixin
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+export class TimePickerOverlay extends ComboBoxOverlayMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-time-picker-overlay';
+  }
+
+  static get styles() {
+    return [overlayStyles, timePickerOverlayStyles];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * When true, the overlay is visible and attached to body.
+       * This property config is overridden to set `sync: true`.
+       */
+      opened: {
+        type: Boolean,
+        notify: true,
+        observer: '_openedChanged',
+        reflectToAttribute: true,
+        sync: true,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="loader"></div>
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(TimePickerOverlay);

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

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2024 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 { 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';
+
+/**
+ * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
+ * @private
+ */
+export class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-time-picker-scroller';
+  }
+
+  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;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="selector">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(TimePickerScroller);

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

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/input-container/src/vaadin-lit-input-container.js';
+import './vaadin-lit-time-picker-combo-box.js';
+import { css, 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 { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
+import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-time-picker>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(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;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /** @private */
+      _inputContainer: {
+        type: Object,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-time-picker-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <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}"
+          .readonly="${this.readonly}"
+          .clearButtonVisible="${this.clearButtonVisible}"
+          .autoOpenDisabled="${this.autoOpenDisabled}"
+          .overlayClass="${this.overlayClass}"
+          .positionTarget="${this._inputContainer}"
+          theme="${ifDefined(this._theme)}"
+          @value-changed="${this.__onComboBoxValueChanged}"
+          @opened-changed="${this.__onComboBoxOpenedChanged}"
+          @change="${this.__onComboBoxChange}"
+          @has-input-value-changed="${this.__onComboBoxHasInputValueChanged}"
+        >
+          <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>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  /** @protected */
+  firstUpdated() {
+    super.firstUpdated();
+
+    this.addController(
+      new InputController(
+        this,
+        (input) => {
+          this._setInputElement(input);
+          this._setFocusElement(input);
+          this.stateTarget = input;
+          this.ariaTarget = input;
+        },
+        {
+          // The "search" word is a trick to prevent Safari from enabling AutoFill,
+          // which is causing click issues:
+          // https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
+          uniqueIdPrefix: 'search-input',
+        },
+      ),
+    );
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+    this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
+
+    this._tooltipController = new TooltipController(this);
+    this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
+    this._tooltipController.setPosition('top');
+    this._tooltipController.setAriaTarget(this.inputElement);
+    this.addController(this._tooltipController);
+  }
+
+  /** @private */
+  __onComboBoxOpenedChanged(event) {
+    this.opened = event.detail.value;
+  }
+
+  /** @private */
+  __onComboBoxValueChanged(event) {
+    this._comboBoxValue = event.detail.value;
+  }
+}
+
+defineCustomElement(TimePicker);
+
+export { TimePicker };

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+export interface TimePickerTime {
+  hours: number | string;
+  minutes: number | string;
+  seconds?: number | string;
+  milliseconds?: number | string;
+}
+
+/**
+ * A function to format given `Object` as time string.
+ * Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
+ */
+export function formatISOTime(time: TimePickerTime | undefined): string;
+
+/**
+ * A function to parse the given string to an `Object` in the format
+ * `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
+ */
+export function parseISOTime(timeString: string): TimePickerTime | undefined;
+
+/**
+ * A function to validate the time object based on the given step.
+ */
+export function validateTime(
+  timeObject: TimePickerTime | undefined,
+  step: number | null | undefined,
+): TimePickerTime | undefined;

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

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A function to format given `Object` as time string.
+ * Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
+ * @param {object} time
+ * @return {string}
+ */
+export function formatISOTime(time) {
+  if (!time) {
+    return '';
+  }
+
+  const pad = (num = 0, fmt = '00') => (fmt + num).substr((fmt + num).length - fmt.length);
+  // Always display hour and minute
+  let timeString = `${pad(time.hours)}:${pad(time.minutes)}`;
+  // Adding second and millisecond depends on resolution
+  if (time.seconds !== undefined) {
+    timeString += `:${pad(time.seconds)}`;
+  }
+  if (time.milliseconds !== undefined) {
+    timeString += `.${pad(time.milliseconds, '000')}`;
+  }
+  return timeString;
+}
+
+const MATCH_HOURS = '(\\d|[0-1]\\d|2[0-3])';
+const MATCH_MINUTES = '(\\d|[0-5]\\d)';
+const MATCH_SECONDS = MATCH_MINUTES;
+const MATCH_MILLISECONDS = '(\\d{1,3})';
+const re = new RegExp(`^${MATCH_HOURS}(?::${MATCH_MINUTES}(?::${MATCH_SECONDS}(?:\\.${MATCH_MILLISECONDS})?)?)?$`, 'u');
+
+/**
+ * A function to parse the given string to an `Object` in the format
+ * `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
+ *
+ * @param {string} timeString
+ * @return {object | undefined}
+ */
+export function parseISOTime(timeString) {
+  // Parsing with RegExp to ensure correct format
+  const parts = re.exec(timeString);
+  if (parts) {
+    // Allows setting the milliseconds with hundreds and tens precision
+    if (parts[4]) {
+      while (parts[4].length < 3) {
+        parts[4] += '0';
+      }
+    }
+    return { hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4] };
+  }
+}
+
+function getStepSegment(stepValue) {
+  const step = stepValue == null ? 60 : parseFloat(stepValue);
+  if (step % 3600 === 0) {
+    // Accept hours
+    return 1;
+  } else if (step % 60 === 0 || !step) {
+    // Accept minutes
+    return 2;
+  } else if (step % 1 === 0) {
+    // Accept seconds
+    return 3;
+  } else if (step < 1) {
+    // Accept milliseconds
+    return 4;
+  }
+}
+
+/**
+ * A function to validate the time object based on the given step.
+ *
+ * @param {object} timeObject
+ * @param {number} step
+ * @return {object | undefined}
+ */
+export function validateTime(timeObject, step) {
+  if (timeObject) {
+    const stepSegment = getStepSegment(step);
+    timeObject.hours = parseInt(timeObject.hours);
+    timeObject.minutes = parseInt(timeObject.minutes || 0);
+    timeObject.seconds = stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0);
+    timeObject.milliseconds = stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0);
+  }
+  return timeObject;
+}