@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/collection/components/vega-textarea/vega-textarea.js

@@ -4,16 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Host, h, Element, Prop, Listen, Method, Watch, Event, State, } from '@stencil/core';
-import { FeatureFlag } from '../../helpers/feature-control/featureFlagController';
+import { Component, Host, h, Element, Prop, Listen, Watch, Event, State } from '@stencil/core';
 import { MaxStringLengthRule } from '../../helpers/validator/rules/maxStringLengthRule';
 import { MinStringLengthRule } from '../../helpers/validator/rules/minStringLengthRule';
 import { RequiredFieldRule } from '../../helpers/validator/rules/requiredFieldRule';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../helpers/change-manager/changeManager';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaBlur, VegaChange } from '../../helpers/event-manager/eventID/vegaEventId';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 export class VegaTextarea {
   constructor() {
+    this.globalSlimmers = {};
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -29,12 +34,15 @@ export class VegaTextarea {
           ruleFactory: (maxLength) => maxLength ? new MaxStringLengthRule({ maxStrLength: maxLength }) : null,
         },
       ],
-      inputContainerSelector: '.vega-textarea-container',
-      touchableAreaSelector: 'textarea',
       validationRulesName: 'validationRules',
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => [this.textareaRef],
     });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaTextarea, VegaChange);
+    this.blurEventEmitter = createEventEmitSlimmer(VegaTextarea, VegaBlur);
+    this.textareaEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.inputContainerRef);
     this.currentCharCount = 0;
     /**
      * Specifies a placeholder string that displays as a
@@ -101,7 +109,7 @@ export class VegaTextarea {
      */
     this.validationRules = [];
     this.renderTextareaContainer = () => {
-      return (h("div", { class: "vega-textarea-container" },
+      return (h("div", { class: "vega-textarea-container", ref: (e) => (this.inputContainerRef = e) },
         h("textarea", { rows: 4, placeholder: this.placeholder, disabled: this.disabled, required: this.required, ref: this.setTextareaRef, maxLength: this.maxLength, minLength: this.minLength, value: this.value, onBlur: this.handleTextareaBlur, "aria-label": this.label || 'No label defined' }),
         this.showCounter && this.renderCharacterCounter()));
     };
@@ -134,21 +142,25 @@ export class VegaTextarea {
     this.inputFocus = () => {
       this.textareaRef.focus();
     };
-    this.handleTextareaBlur = () => {
-      this.vegaBlur.emit();
+    this.handleTextareaBlur = (e) => {
+      this.blurEventEmitter.emit(undefined, e);
     };
     this.isExceedMaxLength = (value, maxLength) => {
       return maxLength != null ? value.length > maxLength : false;
     };
   }
   watchValue(value) {
-    this.vegaChange.emit(value);
+    this.changeEventEmitter.emit(value);
     if (this.textareaRef.value !== this.value) {
       this.textareaRef.value = this.value;
     }
     if (value) {
       this.currentCharCount = value.length;
     }
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: value,
+    });
   }
   watchValidationRules() {
     methodPlaceholder();
@@ -165,17 +177,9 @@ export class VegaTextarea {
     this.value = this.textareaRef.value;
     this.currentCharCount = this.value.length;
   }
-  /** Invoke this method to validate the input in the text area.
-   *
-   * @deprecated This property will be removed soon
-   */
-  async valid(showErrorText = true) {
-    return methodPlaceholder(showErrorText);
-  }
   render() {
     return sanitizeVegaComponent(h(Host, { class: {
-        'disabled': this.disabled,
-        'v-inline-block v-w-full': FeatureFlag.isEnabled('VEGA_FORM_FIELD.CHANGE_BLOCK_TO_INLINE_BLOCK'),
+        disabled: this.disabled,
       } },
       this.renderLabelDom(),
       this.renderTextareaContainer(),
@@ -185,6 +189,13 @@ export class VegaTextarea {
     return (h("vega-field-label", { onClick: this.inputFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
   }
   static get is() { return "vega-textarea"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-textarea.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-textarea.css"]
+  }; }
   static get properties() { return {
     "placeholder": {
       "type": "string",
@@ -425,21 +436,21 @@ export class VegaTextarea {
         "references": {}
       }
     }, {
-      "method": "vegaValidate",
-      "name": "vegaValidate",
+      "method": "change",
+      "name": "change",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "deprecated",
-            "text": "vegaValidate is only used to listen on the vega-form component."
+            "name": "eventSemantics",
+            "text": "namespace:native"
           }],
-        "text": "An event emitter notifying changes in the validation result\n   of the text area."
+        "text": "An event emitter notifying about changes in the value\n   of the text area."
       },
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       }
     }, {
@@ -457,31 +468,25 @@ export class VegaTextarea {
         "resolved": "undefined",
         "references": {}
       }
-    }]; }
-  static get methods() { return {
-    "valid": {
-      "complexType": {
-        "signature": "(showErrorText?: boolean | 'rule') => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
+    }, {
+      "method": "blur",
+      "name": "blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
-        "text": "Invoke this method to validate the input in the text area.",
         "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the blur event of the inner\n   textarea element within the text area."
+      },
+      "complexType": {
+        "original": "undefined",
+        "resolved": "undefined",
+        "references": {}
       }
-    }
-  }; }
+    }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "value",
@@ -498,6 +503,18 @@ export class VegaTextarea {
       "passive": false
     }]; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaTextarea.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTextarea.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTextarea.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTextarea.prototype, "blurEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTextarea.prototype, "textareaEventPrevent", void 0);

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-dropdown-selected-items-controller.js

@@ -85,10 +85,9 @@ export class VegaTimePickerDropdownSelectedItemsController extends VegaSlimmer {
     /* istanbul ignore next */
     /** The `selectedElementScrollTop` method is responsible for scrolling the selected element to the top of the dropdown list. */
     this.selectedElementScrollTop = () => {
-      let elements = Array.from(document.querySelectorAll('.vega-dropdown-item-selected'));
-      if (elements.length === 0) {
-        elements = Array.from(document.querySelectorAll('.vega-time-picker-dropdown-panel > ul > li:first-child'));
-      }
+      const elements = this.mode === 'single'
+        ? this.singleDropdownRenderer.getSelectedItem()
+        : this.rangeDropdownRenderer.getSelectedItem();
       elements.forEach((element) => {
         this.scrollToSelectedElement(element);
       });
@@ -183,6 +182,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerDropdownSelectedItemsController.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "singleDropdownRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "rangeDropdownRenderer", void 0);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaTimePickerDropdownSelectedItemsController.prototype, "syncSelectedItemsByValueChange", null);

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-keyboard-controller.js

@@ -36,7 +36,7 @@ export class VegaTimePickerKeyboardController extends KeyboardManagerSlimmer {
            * @param {KeyboardEvent} event event object
            */
           callback: /* istanbul ignore next */ (event) => {
-            target.switchHourOrMinuteFocus(event.key);
+            target.switchHourOrMinuteFocus(event);
           },
         },
         {
@@ -71,10 +71,11 @@ export class VegaTimePickerKeyboardController extends KeyboardManagerSlimmer {
   /**
    * It is used to switch the focus between different elements based on the arrow key pressed.
    *
-   * @param {UpDownKeyCode} keyCode key code up or down
+   * @param {KeyboardEvent} event the event of target
    */
-  switchHourOrMinuteFocus(keyCode) {
-    const activeElement = document.activeElement;
+  switchHourOrMinuteFocus(event) {
+    const keyCode = event.key;
+    const activeElement = event.composedPath()[0];
     let nextActiveElement = null;
     if (activeElement.tagName === 'LI' && activeElement.getAttribute('role') === 'menuitem') {
       nextActiveElement =

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-range-dropdown-controller.js

@@ -48,7 +48,7 @@ export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimme
         const dropdownRef = this.rangeDropdownType === 'start'
           ? this.rangeDropdownRenderer.getStartDropdownRef()
           : this.rangeDropdownRenderer.getEndDropdownRef();
-        const selectedItem = dropdownRef.querySelector(`[aria-label="${value}"]`);
+        const selectedItem = dropdownRef.shadowRoot.querySelector(`[aria-label="${value}"]`);
         if (selectedItem) {
           this.dropdownSelectedItemsController.scrollToSelectedElement(selectedItem);
         }

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-value-controller.js

@@ -8,6 +8,8 @@ import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-sli
 import { isTimeStr } from '../../../../utils/date';
 import { LogUtility } from '../../../../utils/log';
 import { isArrayEqual } from '../../../../utils/array';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../../../helpers/change-manager/changeManager';
 /** The `VegaTimePickerValueController` class is responsible for managing the value and behavior of a time picker component. */
 export class VegaTimePickerValueController extends VegaSlimmer {
   /**
@@ -22,7 +24,11 @@ export class VegaTimePickerValueController extends VegaSlimmer {
       return; // avoid the value changed again by `input blur`, `dropdown item click` in range mode
     }
     if (this.valueGuard(newValue)) {
-      this.vegaChange.emit(newValue);
+      this.changeEventEmitter.emit(newValue);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: newValue,
+      });
     }
     else {
       if (this.mode === 'single') {
@@ -72,10 +78,10 @@ export class VegaTimePickerValueController extends VegaSlimmer {
   /**
    * The function checks the value of an input element after it loses focus and performs certain actions based on the value.
    *
-   * @param {MouseEvent} e - MouseEvent - The event object that triggered the function. It contains information about the event, such as the target element that triggered the event.
+   * @param {NotifyObserverPayload<unknown>} input - input#host is vega-input component
    */
-  checkValueAfterInputBlur(e) {
-    const vegaInput = e.target;
+  checkValueAfterInputBlur(input) {
+    const vegaInput = input.host;
     if (!this.valueGuard(vegaInput.value)) {
       this.clearTimePicker();
     }
@@ -197,7 +203,7 @@ __decorate([
 ], VegaTimePickerValueController.prototype, "increments", void 0);
 __decorate([
   MapToComponentField()
-], VegaTimePickerValueController.prototype, "vegaChange", void 0);
+], VegaTimePickerValueController.prototype, "changeEventEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTimePickerValueController.prototype, "singleInputRenderer", void 0);
@@ -207,6 +213,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerValueController.prototype, "dropdownSelectedItemsController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "host", void 0);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaTimePickerValueController.prototype, "emitChangeEventOrClearTimePicker", null);

package/dist/collection/components/vega-time-picker/slimmers/renderers/vega-time-picker-range-clear-button-renderer.js

@@ -21,7 +21,7 @@ export class VegaTimePickerRangeClearButtonRenderer extends VegaSlimmer {
   render() {
     return (h("div", { class: {
         'vega-time-picker-range-clear-icon': true,
-        'v-invisible': !this.isInvisible(),
+        'invisible': !this.isInvisible(),
       }, "aria-label": "clear input", role: "button", tabindex: "-1", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       h("vega-icon", { icon: "close", class: "v-min-w-min vega-flex-shrink-0" })));
   }

package/dist/collection/components/vega-time-picker/slimmers/renderers/vega-time-picker-range-dropdown-renderer.js

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Fragment, h } from '@stencil/core';
-import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
+import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import { getDeviceType } from '../../../../utils/ui';
 import { DeviceType } from '../../../../types/ui.type';
+import { isNonNullable } from '../../../../types/typeGuard';
 /** The `VegaTimePickerRangeDropdownRenderer` class is a TypeScript React component that renders a dropdown for selecting a range of time values. */
 export class VegaTimePickerRangeDropdownRenderer extends VegaSlimmer {
   constructor() {
@@ -16,22 +17,22 @@ export class VegaTimePickerRangeDropdownRenderer extends VegaSlimmer {
     this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
     /** The `renderStartDropdown` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class. It is responsible for rendering the start dropdown element in the component's JSX. */
     this.renderStartDropdown = () => {
-      return (h("div", { class: {
-          'vega-time-picker-dropdown': true,
+      return (h("vega-time-picker-dropdown", { class: {
+          'vega-time-picker-dropdown start-dropdown': true,
           /* istanbul ignore next */
           'mobile': this.isMobileDevice,
         }, ref: (e) => (this.startDropdown = e) },
-        h("div", { class: "vega-time-picker-dropdown-container" },
+        h("div", { class: "vega-time-picker-dropdown-container", ref: (e) => (this.startDropdownContainer = e) },
           h("div", { class: "vega-time-picker-dropdown-panel" }, this.renderDropdownList('start')))));
     };
     /** The `renderEndDropdown` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class. It is responsible for rendering the end dropdown element in the component's JSX. */
     this.renderEndDropdown = () => {
-      return (h("div", { class: {
-          'vega-time-picker-dropdown': true,
+      return (h("vega-time-picker-dropdown", { class: {
+          'vega-time-picker-dropdown end-dropdown': true,
           /* istanbul ignore next */
           'mobile': this.isMobileDevice,
         }, ref: (e) => (this.endDropdown = e) },
-        h("div", { class: "vega-time-picker-dropdown-container" },
+        h("div", { class: "vega-time-picker-dropdown-container", ref: (e) => (this.endDropdownContainer = e) },
           h("div", { class: "vega-time-picker-dropdown-panel" }, this.renderDropdownList('end')))));
     };
     /** The `renderDropdownList` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class. It is responsible for rendering the dropdown list of time values in the component's JSX. */
@@ -46,6 +47,17 @@ export class VegaTimePickerRangeDropdownRenderer extends VegaSlimmer {
       })));
     };
   }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaTimePicker.componentDidRender}
+   */
+  componentDidRenderCallback() {
+    if (this.startDropdownContainer && this.startDropdownContainer.parentElement === this.startDropdown) {
+      this.startDropdown.shadowRoot.append(this.startDropdownContainer);
+    }
+    if (this.endDropdownContainer && this.endDropdownContainer.parentElement === this.endDropdown) {
+      this.endDropdown.shadowRoot.append(this.endDropdownContainer);
+    }
+  }
   /**
    * The function returns a reference to the startDropdown element.
    *
@@ -62,6 +74,26 @@ export class VegaTimePickerRangeDropdownRenderer extends VegaSlimmer {
   getEndDropdownRef() {
     return this.endDropdown;
   }
+  /**
+   * The function returns the selected elements. If elements is empty, it returns the first option by default.
+   *
+   * @returns {HTMLElement[]} returns an array of HTMLElements.
+   */
+  getSelectedItem() {
+    const startDropdown = this.startDropdown.shadowRoot;
+    const endDropdown = this.endDropdown.shadowRoot;
+    let elements = [
+      startDropdown.querySelector('.vega-dropdown-item-selected'),
+      endDropdown.querySelector('.vega-dropdown-item-selected'),
+    ].filter(isNonNullable);
+    if (elements.length === 0) {
+      elements = [
+        startDropdown.querySelector('.vega-time-picker-dropdown-panel li:first-child'),
+        endDropdown.querySelector('.vega-time-picker-dropdown-panel li:first-child'),
+      ].filter(isNonNullable);
+    }
+    return elements;
+  }
   render() {
     return (h(Fragment, null,
       this.renderStartDropdown(),
@@ -171,3 +203,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerRangeDropdownRenderer.prototype, "endDropdownController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTimePickerRangeDropdownRenderer.prototype, "componentDidRenderCallback", null);

package/dist/collection/components/vega-time-picker/slimmers/renderers/vega-time-picker-range-input-renderer.js

@@ -4,25 +4,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h } from '@stencil/core';
+import { h, Fragment } from '@stencil/core';
 import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 import { isTimeStr } from '../../../../utils/date';
 import { getDeviceType } from '../../../../utils/ui';
 import { DeviceType } from '../../../../types/ui.type';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaBlur, VegaChange, VegaFocus } from '../../../../helpers/event-manager/eventID/vegaEventId';
 /** The `VegaTimePickerRangeInputRenderer` class is a TypeScript React component that renders a range input for selecting start and end times. */
 export class VegaTimePickerRangeInputRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
     this.onInputChange = (e) => {
-      const target = e.target;
+      const target = e.host;
       if (target.parentElement.classList.contains('time-picker-input-start')) {
         this.valueController.updateValueByRangeType(e.detail, 'start');
       }
       else {
         this.valueController.updateValueByRangeType(e.detail, 'end');
       }
-      e.stopImmediatePropagation();
     };
     /*
      * The below method is e2e-test covered in
@@ -35,7 +36,7 @@ export class VegaTimePickerRangeInputRenderer extends VegaSlimmer {
      * @param {CustomEvent} e event object
      */
     this.timePickerInputFocus = (e) => {
-      const target = e.target;
+      const target = e.host;
       const value = Array.isArray(this.value) ? this.value : ['', ''];
       if (target.parentElement.classList.contains('time-picker-input-start')) {
         this.startDropdownController.showAndScrollPosition(value[0]);
@@ -51,7 +52,7 @@ export class VegaTimePickerRangeInputRenderer extends VegaSlimmer {
      * @param {CustomEvent} e event object
      */
     this.timePickerInputBlur = (e) => {
-      const target = e.target;
+      const target = e.host;
       const rangeIndex = target.parentElement.classList.contains('time-picker-input-start')
         ? 'start'
         : 'end';
@@ -85,18 +86,32 @@ export class VegaTimePickerRangeInputRenderer extends VegaSlimmer {
   render() {
     const startValue = Array.isArray(this.value) ? this.value[0] : '';
     const endValue = Array.isArray(this.value) ? this.value[1] : '';
-    return (h("div", { class: {
-        'vega-time-picker-input-container range-mode': true,
-        'mobile': this.isMobileDevice,
-      } },
-      h("vega-flex", { class: "v-w-full", "use-native-flex": "false", gap: "0", "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
-        h("div", { class: "time-picker-input time-picker-input-start" },
-          h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholderBySourceType('start'), disabled: this.disabled, size: this.size, value: startValue, ref: (ref) => (this.startTimeInputRef = ref), onVegaChange: this.onInputChange, "show-clear-icon": "false", onVegaFocus: this.timePickerInputFocus, onVegaBlur: this.timePickerInputBlur })),
+    return (h(Fragment, null,
+      h("vega-flex", { class: "v-w-full", gap: "0", "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
+        h("div", { class: "time-picker-input time-picker-input-start vega-flex-basis-0 vega-flex-grow" },
+          h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholderBySourceType('start'), disabled: this.disabled, size: this.size, value: startValue, ref: (ref) => {
+              this.handlerEvent(ref);
+              return (this.startTimeInputRef = ref);
+            }, "show-clear-icon": "false" })),
         h("span", { class: "range-input-divider v-min-w-min vega-flex-shrink-0" }),
-        h("div", { class: "time-picker-input time-picker-input-end" },
-          h("vega-input", { placeholder: this.getPlaceholderBySourceType('end'), disabled: this.disabled, size: this.size, value: endValue, ref: (ref) => (this.endTimeInputRef = ref), onVegaChange: this.onInputChange, "show-clear-icon": "false", onVegaFocus: this.timePickerInputFocus, onVegaBlur: this.timePickerInputBlur }))),
+        h("div", { class: "time-picker-input time-picker-input-end vega-flex-basis-0 vega-flex-grow" },
+          h("vega-input", { placeholder: this.getPlaceholderBySourceType('end'), disabled: this.disabled, size: this.size, value: endValue, ref: (ref) => {
+              this.handlerEvent(ref);
+              return (this.endTimeInputRef = ref);
+            }, "show-clear-icon": "false" }))),
       this.rangeClearButtonRenderer.render()));
   }
+  handlerEvent(ref) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, (input) => {
+      this.timePickerInputBlur(input);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
+      this.onInputChange(input);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, (input) => {
+      this.timePickerInputFocus(input);
+    });
+  }
   /**
    * get input placeholder by input source type
    *

package/dist/collection/components/vega-time-picker/slimmers/renderers/vega-time-picker-single-dropdown-renderer.js

@@ -5,10 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Fragment, h } from '@stencil/core';
-import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
+import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { getDeviceType } from '../../../../utils/ui';
 import { DeviceType } from '../../../../types/ui.type';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaClick } from '../../../../helpers/event-manager/eventID/vegaEventId';
 /** The `VegaTimePickerDropdownRenderer` class is a TypeScript React component that renders a dropdown menu for selecting a time value. */
 export class VegaTimePickerSingleDropdownRenderer extends VegaSlimmer {
   constructor() {
@@ -37,21 +39,49 @@ export class VegaTimePickerSingleDropdownRenderer extends VegaSlimmer {
       this.singleDropdownController.hide();
     };
   }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaTimePicker.componentDidRender}
+   */
+  componentDidRenderCallback() {
+    if (this.dropdownContainer && this.dropdownContainer.parentElement === this.dropdown) {
+      this.dropdown.shadowRoot.append(this.dropdownContainer);
+    }
+  }
   /**
    * The function returns a reference to the dropdown element.
    *
-   * @returns an HTMLElement, specifically the dropdown element.
+   * @returns {HTMLElement} an HTMLElement, specifically the dropdown element.
    */
   getDropdownRef() {
     return this.dropdown;
   }
+  /**
+   * The function returns the selected elements. If elements is empty, it returns the first option by default.
+   *
+   * @returns {HTMLElement[]} an array of HTMLElements.
+   */
+  getSelectedItem() {
+    const elements = [];
+    const dropdown = this.dropdown.shadowRoot;
+    dropdown.querySelectorAll('.vega-dropdown-item-selected').forEach((selectedItem) => {
+      elements.push(selectedItem);
+    });
+    if (elements.length === 0) {
+      dropdown
+        .querySelectorAll('.vega-time-picker-dropdown-panel li:first-child')
+        .forEach((selectedItem) => {
+        elements.push(selectedItem);
+      });
+    }
+    return elements;
+  }
   render() {
-    return (h("div", { class: {
+    return (h("vega-time-picker-dropdown", { class: {
         'vega-time-picker-dropdown': true,
         /* istanbul ignore next */
         'mobile': this.isMobileDevice,
       }, ref: (e) => (this.dropdown = e) },
-      h("div", { class: "vega-time-picker-dropdown-container" },
+      h("div", { class: "vega-time-picker-dropdown-container", ref: (e) => (this.dropdownContainer = e) },
         h("div", { class: "vega-time-picker-dropdown-panel" }, this.renderDropdownByTimeSource()),
         h("div", { class: "horizontal-divider v-my-size-12" }),
         this.renderDropdownFoot())));
@@ -81,9 +111,17 @@ export class VegaTimePickerSingleDropdownRenderer extends VegaSlimmer {
   renderDropdownFoot() {
     return (h("div", { class: "vega-time-picker-dropdown-footer" },
       h("div", { class: "vega-time-picker-now" },
-        h("vega-button-link", { size: "small", label: "Now", onVegaClick: this.onNowButtonClick })),
+        h("vega-button-link", { size: "small", label: "Now", ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+              this.onNowButtonClick();
+            });
+          } })),
       h("div", null,
-        h("vega-button-link", { size: "small", label: "Apply", onVegaClick: this.onApplyButtonClick }))));
+        h("vega-button-link", { size: "small", label: "Apply", ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+              this.onApplyButtonClick();
+            });
+          } }))));
   }
   /* If no hour, minute, etc. are currently selected,
    * the initial value is displayed. Hour and minute initial value is 00, amPm is AM.
@@ -110,3 +148,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerSingleDropdownRenderer.prototype, "singleDropdownController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTimePickerSingleDropdownRenderer.prototype, "componentDidRenderCallback", null);