refactor: move time-picker ready block to the mixin (#8257)

vaadin · Dec 2, 2024 · 97e2acb · 97e2acb
1 parent 20487c4
commit 97e2acb
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 84 deletions.
diff --git 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
@@ -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
@@ -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
       <slot name="tooltip"></slot>
     `;
   }
-
-  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);