diff --git a/packages/time-picker/src/vaadin-lit-time-picker.js b/packages/time-picker/src/vaadin-lit-time-picker.js index 1bd695a2fb..f06b8ada8c 100644 --- a/packages/time-picker/src/vaadin-lit-time-picker.js +++ b/packages/time-picker/src/vaadin-lit-time-picker.js @@ -10,9 +10,6 @@ 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'; @@ -52,15 +49,6 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin ]; } - static get properties() { - return { - /** @private */ - _inputContainer: { - type: Object, - }, - }; - } - /** @protected */ render() { return html` @@ -114,37 +102,6 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin `; } - /** @protected */ - ready() { - super.ready(); - - 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; diff --git a/packages/time-picker/src/vaadin-time-picker-mixin.js b/packages/time-picker/src/vaadin-time-picker-mixin.js index 6b9303885b..c65e9bd82b 100644 --- a/packages/time-picker/src/vaadin-time-picker-mixin.js +++ b/packages/time-picker/src/vaadin-time-picker-mixin.js @@ -3,7 +3,10 @@ * Copyright (c) 2018 - 2024 Vaadin Ltd. * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ +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'; +import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js'; import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js'; import { formatISOTime, parseISOTime, validateTime } from './vaadin-time-picker-helper.js'; @@ -171,6 +174,11 @@ export const TimePickerMixin = (superClass) => type: Array, sync: true, }, + + /** @private */ + _inputContainer: { + type: Object, + }, }; } @@ -208,6 +216,37 @@ export const TimePickerMixin = (superClass) => return ''; } + /** @protected */ + ready() { + super.ready(); + + 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); + } + /** * Override method inherited from `InputMixin` to forward the input to combo-box. * @protected diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js index a2fff4b24c..23a06d968f 100644 --- a/packages/time-picker/src/vaadin-time-picker.js +++ b/packages/time-picker/src/vaadin-time-picker.js @@ -8,9 +8,6 @@ import './vaadin-time-picker-combo-box.js'; import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; import { ElementMixin } from '@vaadin/component-base/src/element-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 { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; import { TimePickerMixin } from './vaadin-time-picker-mixin.js'; @@ -166,44 +163,6 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolymerEleme `; } - - static get properties() { - return { - /** @private */ - _inputContainer: Object, - }; - } - - /** @protected */ - ready() { - super.ready(); - - 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); - } } defineCustomElement(TimePicker);