@heartlandone/vega 2.72.0 → 2.74.0-RTE-table-preview

package/dist/vega/vega-time-picker.entry.js

@@ -0,0 +1,2039 @@
+import { h, F as Fragment, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
+import { T as TimeRangeRequiredRule, a as TimeRequiredRule } from './time-required-rule-dd0e68fc.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, L as LogUtility, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-316ebdb1.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { h as VegaChange, F as VegaFocus, G as VegaBlur, a as VegaClick } from './vega-event-id-61c8bd9f.js';
+import { g as getDeviceType, D as DeviceType } from './ui-5f775fd9.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { X as isTimeStr, Z as pad, i as isNonNullable, ak as convert12HourTo24HourFormat } from './type-guard-09acedc9.js';
+import { i as isArrayEqual } from './array-a1d98264.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6fdf8c8b.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-16a5ed3a.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-a7b44d74.js';
+import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import './index-9fdb7060.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './string-a953eafc.js';
+import './observer-3959f9dd.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './dom-node-subject-factory-5798693b.js';
+import './vega-internal-event-id-b65a01a3.js';
+import './index-81ce67e2.js';
+import './page-resize-observer-slimmer-ee8774a6.js';
+import './ui-189dae23.js';
+import './breakpoints-d9faf11c.js';
+import './try-get-document-bef0f526.js';
+import './mutation-observer-slimmer-7065c745.js';
+import './mutation-observer-filters-6c515793.js';
+import './sub-state-observer-slimmer-4fc8b3da.js';
+import './typography-396de03f.js';
+import './number-4398f2e1.js';
+import './internal-vega-z-index-manager-f0ca0975.js';
+import './responsive-format-facade-d4abfdb9.js';
+import './pixel-f32c07ce.js';
+import './public-api-a77a0b33.js';
+import './vega-env-manager-8f8dc473.js';
+import './internal-vega-event-manager-826279b7.js';
+import './feature-flag-controller-24b9f956.js';
+import './index-1f9eab8f.js';
+import './_commonjsHelpers-2088bffa.js';
+import './dark-mode-style-controller-e2a2f76c.js';
+import './vega-nonce-manager-497e5eb5.js';
+import './internal-icon-manager-9279071a.js';
+import './valid-credit-card-number-rule-04b032a6.js';
+import './index-b04c1ee0.js';
+import './content-state-fc9d98e0.js';
+import './code-block-b5f8fc8a.js';
+import './object-66c37948.js';
+import './dto-renderer-manager-12bc9121.js';
+import './base-renderer-101f6d04.js';
+import './column-operation-a1620c67.js';
+import './remote-invocation-registry-4219120b.js';
+import './timer-9321173b.js';
+import './styles.constants-b320e4a7.js';
+import './range-429fb0e2.js';
+import './keyboard-manager-3c463777.js';
+
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The VegaTimePickerLabelRenderer class is a TypeScript React component that renders a label for a time picker input field. */
+class VegaTimePickerLabelRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-time-picker-select-time-e2e}
+     */
+    /* istanbul ignore next */
+    this.onTimePickerFocus = async () => {
+      if (this.mode === 'single') {
+        await this.singleInputRenderer.getInputRef().doFocus();
+      }
+      else {
+        await this.rangeInputRenderer.getStartInputRef().doFocus();
+      }
+    };
+  }
+  render() {
+    return (h("vega-field-label", { onClick: this.onTimePickerFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+  }
+}
+__decorate$c([
+  MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "label", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "mode", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "required", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "disabled", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "singleInputRenderer", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "rangeInputRenderer", void 0);
+
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerInputRenderer` class is a TypeScript React component that renders a time picker input field. */
+class VegaTimePickerSingleInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * It is an event handler that is called when the `vega-input` component emits a `VegaChange` event.
+     *
+     * @param {CustomEvent} e event object
+     */
+    this.onChildVegaInputChange = (e) => {
+      this.valueController.setValue(e.detail);
+    };
+  }
+  /**
+   * The function returns a reference to an HTML input element.
+   *
+   * @returns {HTMLVegaInputElement} an HTMLVegaInputElement.
+   */
+  getInputRef() {
+    return this.timeInputRef;
+  }
+  /* istanbul ignore next */
+  /**
+   * The function updates the value of a time input field in a TypeScript React component.
+   *
+   * @param {string} value - A string value that will be used to update the input value.
+   */
+  updateInputValue(value) {
+    this.timeInputRef.value = value;
+  }
+  /* istanbul ignore next */
+  render() {
+    return (h("div", { class: "time-picker-input" },
+      h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholder(), disabled: this.disabled, size: this.size, value: typeof this.value === 'string' ? this.value : '', ref: (ref) => {
+          this.timeInputRef = ref;
+          this.handleVegaInputEvent(ref);
+        } })));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-keyboard-control-e2e}
+   * @see{module:vega-time-picker-keyboard-control-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function `handleVegaInputEvent` adds event observers to a given HTML input element for handling changes, focus, and blur events.
+   *
+   * @param {HTMLVegaInputElement} ref - The ref parameter is a reference to an HTML input element with the type "vega".
+   */
+  handleVegaInputEvent(ref) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
+      this.onChildVegaInputChange(input);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, () => {
+      this.singleDropdownController.show();
+    });
+    //When the filled time format is incorrect, the value needs to be set to empty, the initial value may also be empty, so the input needs to be set to an empty value.
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, (input) => {
+      this.valueController.checkValueAfterInputBlur(input);
+    });
+  }
+  /**
+   * get the vega input placeholder
+   *
+   * @returns {string} a string value
+   */
+  getPlaceholder() {
+    return this.placeholder && typeof this.placeholder === 'string'
+      ? this.placeholder
+      : this.translationSlimmer.t('Select Time');
+  }
+}
+__decorate$b([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "placeholder", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "size", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "disabled", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "value", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "valueController", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "singleDropdownController", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaTimePickerSingleInputRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerDropdownRenderer` class is a TypeScript React component that renders a dropdown menu for selecting a time value. */
+class VegaTimePickerSingleDropdownRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.isTabletDevice = getDeviceType() === DeviceType.TABLET;
+    this.renderDropdownByTimeSource = () => {
+      return (h(Fragment, null,
+        this.renderDropdownColumn(this.dropdownSource.hours, 'hour'),
+        this.renderDropdownColumn(this.dropdownSource.minutes, 'minute'),
+        this.timeFormat === '12-hour' && this.renderDropdownColumn(['AM', 'PM'], 'amPm')));
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-time-picker-click-label-focus-input-e2e}
+     */
+    /* istanbul ignore next */
+    this.onItemClick = (itemValue, sourceType) => {
+      this.dropdownSelectedItemsController.setSelectedItems(Object.assign(Object.assign({}, this.selectedTimeValue), { [sourceType]: itemValue }));
+    };
+    this.onNowButtonClick = () => {
+      this.dropdownSelectedItemsController.setSelectedItemsToCurrentTime();
+      this.singleDropdownController.hide();
+    };
+    this.onApplyButtonClick = () => {
+      this.valueController.updateValueBySelectedItems();
+      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 {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("vega-time-picker-dropdown", { class: {
+        'vega-time-picker-dropdown': true,
+        /* istanbul ignore next */
+        'mobile': this.isMobileDevice,
+        'tablet': this.isTabletDevice,
+      }, ref: (e) => (this.dropdown = e) },
+      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())));
+  }
+  renderDropdownColumn(items, sourceType) {
+    return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+        'vega-time-picker-panel-column': true,
+      } }, items.map((item, index) => {
+      {
+        return this.renderDropdownItem(item, sourceType, index);
+      }
+    })));
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-select-time-e2e}
+   */
+  /* istanbul ignore next */
+  renderDropdownItem(item, sourceType, index) {
+    return (h("li", { key: item, role: "menuitem", "aria-label": item, class: {
+        'vega-dropdown-item-selected': this.isItemSelected(item, sourceType),
+      }, tabIndex: index === 0 ? 0 : -1, "data-index": index, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onClick: () => this.onItemClick(item, sourceType), onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("span", { "data-index": index, innerHTML: item })));
+  }
+  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", ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+              this.onNowButtonClick();
+            });
+          } })),
+      h("div", null,
+        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.
+   */
+  isItemSelected(itemValue, sourceType) {
+    return this.selectedTimeValue[`${sourceType}`] === itemValue;
+  }
+}
+__decorate$a([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownRenderer.prototype, "timeFormat", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownRenderer.prototype, "dropdownSource", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownRenderer.prototype, "selectedTimeValue", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownRenderer.prototype, "valueController", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownRenderer.prototype, "dropdownSelectedItemsController", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownRenderer.prototype, "singleDropdownController", void 0);
+__decorate$a([
+  MapToComponentMethod('componentDidRender')
+], VegaTimePickerSingleDropdownRenderer.prototype, "componentDidRenderCallback", null);
+
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerValueController` class is responsible for managing the value and behavior of a time picker component. */
+class VegaTimePickerValueController extends VegaSlimmer {
+  /**
+   * The function emits a change event if the new value is a valid time string or clears the time picker if the new value is not valid or empty.
+   *
+   * @param {string|string[]} newValue - The `newValue` parameter is a string representing the new value for the time picker.
+   * @param {string|string[]} oldValue - The `oldValue` parameter is a string representing the old value for the time picker.
+   */
+  emitChangeEventOrClearTimePicker(newValue, oldValue) {
+    if (this.mode === 'range' &&
+      isArrayEqual(newValue, oldValue)) {
+      return; // avoid the value changed again by `input blur`, `dropdown item click` in range mode
+    }
+    if (this.valueGuard(newValue)) {
+      this.changeEventEmitter.emit(newValue);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: newValue,
+      });
+    }
+    else {
+      if (this.mode === 'single') {
+        this.clearTimePicker();
+      }
+      else {
+        this.clearRangeTimePicker();
+      }
+    }
+  }
+  /**
+   * The function updates a value if there are selected items.
+   */
+  updateValueIfSelectedItemsChange() {
+    if (this.mode === 'single') {
+      if (Object.keys(this.selectedTimeValue).length > 0) {
+        this.updateValueBySelectedItems();
+      }
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-mode-change}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function resets the current value if there is a change in mode.
+   */
+  resetCurrentValueIfModeChange() {
+    this.resetValue();
+  }
+  /**
+   * The function checks if the mode is set to 'range' and if the value is not valid, it clears the range time picker.
+   */
+  checkTheDefaultValueForRangeMode() {
+    if (this.mode === 'range' && this.value && !this.valueGuard(this.value)) {
+      this.clearRangeTimePicker();
+    }
+  }
+  /*
+   * When the filled time format is incorrect, the value needs to be set to empty,
+   * the initial value may also be empty, so the input needs to be set to an empty value.
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-keyboard-control-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function checks the value of an input element after it loses focus and performs certain actions based on the value.
+   *
+   * @param {NotifyObserverPayload<unknown>} input - input#host is vega-input component
+   */
+  checkValueAfterInputBlur(input) {
+    const vegaInput = input.host;
+    if (!this.valueGuard(vegaInput.value)) {
+      this.clearTimePicker();
+    }
+    else if (this.increments > 1 && this.value && vegaInput.value && vegaInput.value !== this.value) {
+      vegaInput.value = this.value;
+    }
+  }
+  /**
+   * The function sets the value of a variable.
+   *
+   * @param {string|string[]} value - The parameter "value" is of type string.
+   */
+  setValue(value) {
+    if (this.valueGuard(value)) {
+      this.value = value;
+    }
+  }
+  /**
+   * The function resets the value property to an empty string or an array depending on the mode property.
+   */
+  resetValue() {
+    this.value = this.mode === 'single' ? '' : ['', ''];
+  }
+  /**
+   * The function updates the value based on the selected time items, taking into account the time
+   * format (12-hour or 24-hour).
+   */
+  updateValueBySelectedItems() {
+    const defaultHour = this.timeFormat === '12-hour' ? '12' : '00';
+    const hour = this.selectedTimeValue.hour ? this.selectedTimeValue.hour : defaultHour;
+    const minute = this.selectedTimeValue.minute ? this.selectedTimeValue.minute : '00';
+    const amPm = this.selectedTimeValue.amPm ? this.selectedTimeValue.amPm : 'AM';
+    this.timeFormat === '12-hour'
+      ? this.setValue(`${hour}:${minute} ${amPm}`)
+      : this.setValue(`${hour}:${minute}`);
+  }
+  /**
+   * The function updates a value based on the range type. if change start value, check the end value is a time string, if not check, the start value will block by the value guard
+   *
+   * @param {string} value - A string value that needs to be updated based on the source code.
+   * @param {TimeRangeIndex} rangeIndex - The rangeIndex parameter is of type TimeRangeIndex, which is a string that can have two possible values: 'start' or 'end'.
+   */
+  updateValueByRangeType(value, rangeIndex) {
+    if (rangeIndex === 'start') {
+      this.setValue([
+        value,
+        Array.isArray(this.value) && this.value[1] && isTimeStr(this.value[1], this.timeFormat)
+          ? this.value[1]
+          : '',
+      ]);
+    }
+    else {
+      this.setValue([
+        Array.isArray(this.value) && this.value[0] && isTimeStr(this.value[0], this.timeFormat)
+          ? this.value[0]
+          : '',
+        value,
+      ]);
+    }
+  }
+  /**
+   * This method is used to clear the selected time value in a time picker component.
+   */
+  clearRangeTimePicker() {
+    this.value = ['', ''];
+    this.rangeInputRenderer.getStartInputRef().value = '';
+    this.rangeInputRenderer.getEndInputRef().value = '';
+  }
+  /**
+   * This method is used to clear the selected time value in a time picker component.
+   */
+  clearTimePicker() {
+    this.value = '';
+    this.singleInputRenderer.getInputRef().value = '';
+    this.dropdownSelectedItemsController.setSelectedItems({});
+  }
+  /**
+   * The function `valueGuard` checks if the provided value is valid for the specified mode of a time picker component.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} value - The `value` parameter is of type `DatePickerValueType<DatePickerModeType>`. It
+   * represents the value of the time picker, which can be a single time or a range of times depending on
+   * the mode of the time picker.
+   * @returns {boolean} a boolean value.
+   */
+  valueGuard(value) {
+    let isValid;
+    switch (this.mode) {
+      case 'single':
+        isValid =
+          (value && typeof value === 'string' && isTimeStr(value, this.timeFormat)) || value === '';
+        break;
+      case 'range':
+        isValid =
+          Array.isArray(value) &&
+            value.length === 2 &&
+            value.every((item) => isTimeStr(item, this.timeFormat) || item === '');
+        break;
+    }
+    if (!isValid) {
+      LogUtility.warn(`Invalid time picker value ${value} for ${this.mode} mode`);
+    }
+    return isValid;
+  }
+}
+__decorate$9([
+  MapToComponentField({ writable: true })
+], VegaTimePickerValueController.prototype, "value", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "mode", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "timeFormat", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "selectedTimeValue", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "increments", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "singleInputRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "rangeInputRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "dropdownSelectedItemsController", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTimePickerValueController.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentMethod('watchValue')
+], VegaTimePickerValueController.prototype, "emitChangeEventOrClearTimePicker", null);
+__decorate$9([
+  MapToComponentMethod('watchSelectedTimeValue')
+], VegaTimePickerValueController.prototype, "updateValueIfSelectedItemsChange", null);
+__decorate$9([
+  MapToComponentMethod('watchMode')
+], VegaTimePickerValueController.prototype, "resetCurrentValueIfModeChange", null);
+__decorate$9([
+  MapToComponentMethod('componentDidLoad')
+], VegaTimePickerValueController.prototype, "checkTheDefaultValueForRangeMode", null);
+
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerDropdownController` class is responsible for managing the dropdown functionality of the VegaTimePicker component in a TypeScript application. */
+class VegaTimePickerSingleDropdownController extends ElementAppenderSlimmer {
+  /**
+   * The constructor initializes a custom dropdown component with specific configuration options.
+   */
+  constructor() {
+    super(
+    /* istanbul ignore next */
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    () => ({
+      target: this.singleInputRenderer.getInputRef(),
+      appendableElement: this.singleDropdownRenderer.getDropdownRef(),
+      positionRelativeTo: this.positionRelativeTo,
+      translocation: { X: 0, Y: 8 },
+      placement: ['bottom', 'top'],
+    }), () => 'custom');
+  }
+  /**
+   * The function initializes a value controller and dropdown source.
+   */
+  initValueAndDropdownSource() {
+    this.valueController.resetValue();
+    this.initDropdownSource();
+  }
+  /**
+   * The function initializes the dropdown source and input mask configuration, resetting the value
+   * controller, initializing the dropdown source, and initializing the input mask configuration.
+   */
+  initDropdownSourceAndInputMaskConfig() {
+    this.valueController.resetValue();
+    this.initDropdownSource();
+    this.inputMaskController.initInputMask();
+  }
+  /**
+   * The function initializes the dropdown source and sets the selected items based on a given value.
+   */
+  initDropdownSourceAndSelectedItems() {
+    this.initDropdownSource();
+    if (this.mode === 'single') {
+      this.dropdownSelectedItemsController.initSelectedItemsByString(this.value);
+    }
+  }
+  /**
+   * The function hides a dropdown when it is disabled.
+   */
+  hideDropdownWhenDisabled() {
+    if (this.mode === 'single') {
+      this.hide();
+    }
+  }
+  /**
+   * The function initializes the dropdownSource object with hours and minutes strings.
+   */
+  initDropdownSource() {
+    this.dropdownSource = {
+      hours: this.getSourceHoursStrings(),
+      minutes: this.getSourceMinutesStrings(),
+    };
+  }
+  /**
+   * The function `getSourceMinutesStrings` generates an array of strings representing minutes in increments specified by the `increments` variable.
+   *
+   * @returns {string[]} an array of strings.
+   */
+  getSourceMinutesStrings() {
+    if (this.increments < 1 || this.increments > 59 || isNaN(Number(this.increments))) {
+      LogUtility.warn('The increments should be between 1 and 59.');
+      this.increments = 1;
+    }
+    const sourceMinutesStrings = [];
+    for (let i = 0; i < 60; i = i + this.increments) {
+      sourceMinutesStrings.push(pad(i));
+    }
+    return sourceMinutesStrings;
+  }
+  /**
+   * The function `getSourceHoursStrings` returns an array of strings representing the hours in either 12-hour or 24-hour format.
+   *
+   * @returns {string[]} The function `getSourceHoursStrings` returns an array of strings.
+   */
+  getSourceHoursStrings() {
+    const sourceHoursStrings = [];
+    if (this.timeFormat === '12-hour') {
+      sourceHoursStrings.push('12');
+      for (let i = 1; i < 12; i++) {
+        sourceHoursStrings.push(pad(i));
+      }
+    }
+    else {
+      for (let i = 0; i < 24; i++) {
+        sourceHoursStrings.push(pad(i));
+      }
+    }
+    return sourceHoursStrings;
+  }
+}
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaTimePickerSingleDropdownController.prototype, "isDropdownShow", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaTimePickerSingleDropdownController.prototype, "dropdownSource", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "mode", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaTimePickerSingleDropdownController.prototype, "increments", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "timeFormat", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "value", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "positionRelativeTo", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "selectedTimeValue", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "singleInputRenderer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "rangeInputRenderer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "singleDropdownRenderer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "valueController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "dropdownSelectedItemsController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaTimePickerSingleDropdownController.prototype, "inputMaskController", void 0);
+__decorate$8([
+  MapToComponentMethod('watchIncrements')
+], VegaTimePickerSingleDropdownController.prototype, "initValueAndDropdownSource", null);
+__decorate$8([
+  MapToComponentMethod('watchTimeFormat')
+], VegaTimePickerSingleDropdownController.prototype, "initDropdownSourceAndInputMaskConfig", null);
+__decorate$8([
+  MapToComponentMethod('componentWillLoad')
+], VegaTimePickerSingleDropdownController.prototype, "initDropdownSourceAndSelectedItems", null);
+__decorate$8([
+  MapToComponentMethod('watchDisabled')
+], VegaTimePickerSingleDropdownController.prototype, "hideDropdownWhenDisabled", null);
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerDropdownSelectedItemsController` class is responsible for managing the selected items in the dropdown of a time picker component. */
+class VegaTimePickerDropdownSelectedItemsController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.DROPDOWN_ITEM_DEFAULT_HEIGHT = 32;
+    /**
+     * The selected fill time is displayed in the dropdown, increments is set to handle the filled minute mismatch option.
+     *
+     * @param {string} value time picker value
+     */
+    this.initSelectedItemsByString = (value) => {
+      if (value === '' || !isTimeStr(value, this.timeFormat)) {
+        this.selectedTimeValue = {};
+      }
+      else {
+        this.selectedTimeValue = this.getClosetTimeValue(value);
+      }
+    };
+    /*
+     * The height of the scroll is based on the default height of the current element 32 * the index of the element.
+     * The below method is e2e-test covered in
+     * @see{module:vega-time-picker-select-time-e2e}
+     * @see{module:vega-time-picker-scroll-top-e2e}
+     */
+    /* istanbul ignore next */
+    /**
+     * scroll the selected item to top
+     *
+     * @param {HTMLElement} element the element which should scroll to top
+     */
+    this.scrollToSelectedElement = (element) => {
+      const parentElement = element.closest('ul');
+      const scrollTop = Number(element.dataset['index']) * this.DROPDOWN_ITEM_DEFAULT_HEIGHT;
+      parentElement.scrollTop = scrollTop;
+    };
+    /**
+     * It is responsible for finding the closest minute value in the dropdown source that is less than or equal to the current minute value.
+     *
+     * @param {string} currentMinute minute string
+     * @returns {string} the minute string which find in list
+     */
+    this.getClosestMinuteForCurrent = (currentMinute) => {
+      const lessCurrentMinuteStrings = this.dropdownSource.minutes.filter((minute) => Number(minute) <= Number(currentMinute));
+      return lessCurrentMinuteStrings[lessCurrentMinuteStrings.length - 1];
+    };
+    /**
+     * It is responsible for getting the current time based on the specified time format (either '12-hour' or '24-hour').
+     *
+     * @param {TimeFormat} timeFormat time format string
+     * @returns {TimeValue} time value object
+     */
+    this.getCurrentTime = (timeFormat) => {
+      const curHour = new Date(Date.now()).getHours();
+      const minute = pad(new Date(Date.now()).getMinutes());
+      if (timeFormat === '12-hour') {
+        return {
+          hour: curHour > 12
+            ? pad(curHour - 12)
+            : pad(curHour === 0 ? 12 : curHour),
+          minute: minute,
+          amPm: curHour >= 12 ? 'PM' : 'AM',
+        };
+      }
+      else {
+        return {
+          hour: pad(curHour),
+          minute: minute,
+        };
+      }
+    };
+    /*
+     * The selected element scrolls to the top by default.
+     * The below method is e2e-test covered in
+     * @see{module:vega-time-picker-select-time-e2e}
+     * @see{module:vega-time-picker-scroll-top-e2e}
+     */
+    /* istanbul ignore next */
+    /** The `selectedElementScrollTop` method is responsible for scrolling the selected element to the top of the dropdown list. */
+    this.selectedElementScrollTop = () => {
+      const elements = this.mode === 'single'
+        ? this.singleDropdownRenderer.getSelectedItem()
+        : this.rangeDropdownRenderer.getSelectedItem();
+      elements.forEach((element) => {
+        this.scrollToSelectedElement(element);
+      });
+    };
+  }
+  /**
+   * The function syncSelectedItemsByValueChange updates the selected items based on a new value, if the value is a valid time string or empty.
+   *
+   *  @param {string} newValue - The `newValue` parameter is a string value that represents the new value that needs to be synchronized with the selected items.
+   */
+  syncSelectedItemsByValueChange(newValue) {
+    if (this.mode === 'single') {
+      if (isTimeStr(newValue, this.timeFormat) || !newValue) {
+        this.initSelectedItemsByString(newValue);
+      }
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-keyboard-control-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function syncSelectedItemsPositionWhenDropdownShow scrolls the selected element to the top when the dropdown is shown, but only if the dropdown is not disabled.
+   *
+   * @param {boolean} newValue - A boolean value indicating whether the dropdown is being shown or hidden.
+   */
+  syncSelectedItemsPositionWhenDropdownShow(newValue) {
+    if (newValue) {
+      if (!this.disabled) {
+        this.selectedElementScrollTop();
+      }
+    }
+  }
+  /**
+   * The function syncSelectedItemsPosition checks if there are selected items and scrolls to the
+   * selected element if necessary.
+   */
+  syncSelectedItemsPosition() {
+    if ((this.mode === 'single' && Object.keys(this.selectedTimeValue).length > 0) ||
+      (this.mode === 'range' && Array.isArray(this.value) && (this.value[0] || this.value[1]))) {
+      this.selectedElementScrollTop();
+    }
+  }
+  /**
+   * The function setSelectedItems sets the selectedTimeValue to the provided value.
+   *
+   * @param {TimeValue} value - The value parameter is of type TimeValue.
+   */
+  setSelectedItems(value) {
+    this.selectedTimeValue = value;
+  }
+  /**
+   * The function "setSelectedItemsToCurrentTime" sets the selectedTimeValue to the current time in the specified time format.
+   */
+  setSelectedItemsToCurrentTime() {
+    this.selectedTimeValue = this.getCurrentTime(this.timeFormat);
+  }
+  /**
+   * The getClosetTimeValue function takes a current time string and returns an object with the hour, minute, and amPm values.
+   *
+   * @param {string} currentTime - The `currentTime` parameter is a string representing the current time. It should be in the format "HH:mm" for 24-hour format or "HH:mm AM/PM" for 12-hour format.
+   * @returns {TimeValue} an object of type TimeValue.
+   */
+  getClosetTimeValue(currentTime) {
+    const timeArray = currentTime.replace(' ', ':').split(':');
+    return {
+      hour: timeArray[0],
+      minute: this.increments > 1 ? this.getClosestMinuteForCurrent(timeArray[1]) : timeArray[1],
+      amPm: this.timeFormat === '12-hour' ? timeArray[2] : undefined,
+    };
+  }
+}
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTimePickerDropdownSelectedItemsController.prototype, "selectedTimeValue", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "mode", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "value", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "timeFormat", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "dropdownSource", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "increments", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "disabled", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "singleDropdownRenderer", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaTimePickerDropdownSelectedItemsController.prototype, "rangeDropdownRenderer", void 0);
+__decorate$7([
+  MapToComponentMethod('watchValue')
+], VegaTimePickerDropdownSelectedItemsController.prototype, "syncSelectedItemsByValueChange", null);
+__decorate$7([
+  MapToComponentMethod('watchIsDropdownShow')
+], VegaTimePickerDropdownSelectedItemsController.prototype, "syncSelectedItemsPositionWhenDropdownShow", null);
+__decorate$7([
+  MapToComponentMethod('componentDidRender')
+], VegaTimePickerDropdownSelectedItemsController.prototype, "syncSelectedItemsPosition", null);
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerKeyboardController` class is a TypeScript class that extends the `KeyboardManagerSlimmer` class and provides keyboard control functionality for a time picker component. */
+class VegaTimePickerKeyboardController extends KeyboardManagerSlimmer {
+  /**
+   * The constructor function sets up keyboard event listeners for a time picker component.
+   */
+  constructor() {
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-time-picker-keyboard-control-e2e}
+     */
+    /* istanbul ignore next */
+    super((target) => {
+      const dropdownRef = target.singleDropdownRenderer.getDropdownRef();
+      const startDropdownRef = target.rangeDropdownRenderer.getStartDropdownRef();
+      const endDropdownRef = target.rangeDropdownRenderer.getEndDropdownRef();
+      return [
+        {
+          keyCode: 'Enter',
+          activeElementInScope: [target.host],
+          callback: target.componentBlurAndHideDropdown,
+        },
+        {
+          keyCode: ['ArrowUp', 'ArrowDown'],
+          activeElementInScope: [dropdownRef, startDropdownRef, endDropdownRef],
+          /**
+           * switch the element focus when keyboard press
+           *
+           * @param {KeyboardEvent} event event object
+           */
+          callback: /* istanbul ignore next */ (event) => {
+            target.switchHourOrMinuteFocus(event);
+          },
+        },
+        {
+          keyCode: 'Escape',
+          activeElementInScope: [target.host, dropdownRef, startDropdownRef, endDropdownRef],
+          callback: target.componentBlurAndHideDropdown,
+        },
+      ];
+    });
+    /* istanbul ignore next */
+    /**
+     * It is an asynchronous method that is used to blur the input field and hide the dropdown of the time picker component.
+     */
+    this.componentBlurAndHideDropdown = async () => {
+      if (this.mode === 'single') {
+        await this.singleInputRenderer.getInputRef().doBlur();
+        this.singleDropdownController.hide();
+      }
+      else {
+        await this.rangeInputRenderer.getStartInputRef().doBlur();
+        await this.rangeInputRenderer.getEndInputRef().doBlur();
+        this.startDropdownController.hide();
+        this.endDropdownController.hide();
+      }
+    };
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-keyboard-up-down-control-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * It is used to switch the focus between different elements based on the arrow key pressed.
+   *
+   * @param {KeyboardEvent} event the event of target
+   */
+  switchHourOrMinuteFocus(event) {
+    const keyCode = event.key;
+    const activeElement = event.composedPath()[0];
+    let nextActiveElement = null;
+    if (activeElement.tagName === 'LI' && activeElement.getAttribute('role') === 'menuitem') {
+      nextActiveElement =
+        keyCode === 'ArrowDown'
+          ? activeElement.nextElementSibling
+          : activeElement.previousElementSibling;
+    }
+    if (nextActiveElement) {
+      nextActiveElement.focus();
+    }
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "mode", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "singleInputRenderer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "singleDropdownRenderer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "rangeDropdownRenderer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "rangeInputRenderer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "singleDropdownController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "startDropdownController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaTimePickerKeyboardController.prototype, "endDropdownController", void 0);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerRangeInputRenderer` class is a TypeScript React component that renders a range input for selecting start and end times. */
+class VegaTimePickerRangeInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.onInputChange = (e) => {
+      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');
+      }
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-time-picker-range-input-focus}
+     */
+    /* istanbul ignore next */
+    /**
+     * an event handler that is triggered when the input field of the time picker component receives focus.
+     *
+     * @param {CustomEvent} e event object
+     */
+    this.timePickerInputFocus = (e) => {
+      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]);
+      }
+      else {
+        this.endDropdownController.showAndScrollPosition(value[1] ? value[1] : value[0]);
+      }
+    };
+    /* istanbul ignore next */
+    /**
+     * an event handler that is triggered when the input field of the time picker component receives blur.
+     *
+     * @param {CustomEvent} e event object
+     */
+    this.timePickerInputBlur = (e) => {
+      const target = e.host;
+      const rangeIndex = target.parentElement.classList.contains('time-picker-input-start')
+        ? 'start'
+        : 'end';
+      if (!isTimeStr(target.value, this.timeFormat)) {
+        target.value = '';
+        this.valueController.updateValueByRangeType('', rangeIndex);
+      }
+      else if (target.value && this.increments > 1) {
+        const { hour, minute, amPm } = this.dropdownSelectedItemsController.getClosetTimeValue(target.value);
+        target.value = `${hour}:${minute}${amPm ? ' ' + amPm : ''}`;
+      }
+    };
+  }
+  /**
+   * The function returns a reference to the start time input element.
+   *
+   * @returns {HTMLVegaInputElement} The method is returning an HTMLVegaInputElement.
+   */
+  getStartInputRef() {
+    return this.startTimeInputRef;
+  }
+  /**
+   * The function returns a reference to the end time input element.
+   *
+   * @returns {HTMLVegaInputElement} The method is returning an HTMLVegaInputElement.
+   */
+  getEndInputRef() {
+    return this.endTimeInputRef;
+  }
+  /* istanbul ignore next */
+  render() {
+    const startValue = Array.isArray(this.value) ? this.value[0] : '';
+    const endValue = Array.isArray(this.value) ? this.value[1] : '';
+    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 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
+   *
+   * @param {TimeRangeIndex} rangeIndex start or end input
+   * @returns {string} a string value
+   */
+  getPlaceholderBySourceType(rangeIndex) {
+    if (rangeIndex === 'start') {
+      return Array.isArray(this.placeholder) && this.placeholder[0]
+        ? this.placeholder[0]
+        : this.translationSlimmer.t('Start Time');
+    }
+    else {
+      return Array.isArray(this.placeholder) && this.placeholder[1]
+        ? this.placeholder[1]
+        : this.translationSlimmer.t('End Time');
+    }
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "mode", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "placeholder", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "size", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "positionRelativeTo", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "timeFormat", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "increments", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "value", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "startDropdownController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "endDropdownController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "valueController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "rangeClearButtonRenderer", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "rangeDropdownRenderer", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "dropdownSelectedItemsController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTimePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerRangeDropdownRenderer` class is a TypeScript React component that renders a dropdown for selecting a range of time values. */
+class VegaTimePickerRangeDropdownRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.isTabletDevice = getDeviceType() === DeviceType.TABLET;
+    /** 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("vega-time-picker-dropdown", { class: {
+          'vega-time-picker-dropdown start-dropdown': true,
+          /* istanbul ignore next */
+          'mobile': this.isMobileDevice,
+          'tablet': this.isTabletDevice,
+        }, ref: (e) => (this.startDropdown = e) },
+        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("vega-time-picker-dropdown", { class: {
+          'vega-time-picker-dropdown end-dropdown': true,
+          /* istanbul ignore next */
+          'mobile': this.isMobileDevice,
+          'tablet': this.isTabletDevice,
+        }, ref: (e) => (this.endDropdown = e) },
+        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. */
+    this.renderDropdownList = (rangeIndex) => {
+      const source = this.getTimeArray();
+      return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+          'vega-time-picker-panel-column': true,
+        } }, source.map((item, index) => {
+        {
+          return this.renderDropdownItem(item, rangeIndex, index);
+        }
+      })));
+    };
+  }
+  /**
+   * 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.
+   *
+   * @returns {HTMLElement} the startDropdown element, which is of type HTMLElement.
+   */
+  getStartDropdownRef() {
+    return this.startDropdown;
+  }
+  /**
+   * The function returns a reference to the endDropdown element.
+   *
+   * @returns {HTMLElement} the startDropdown element, which is of type HTMLElement.
+   */
+  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(),
+      this.renderEndDropdown()));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-range-dropdown-item-click}
+   */
+  /* istanbul ignore next */
+  /** The `renderDropdownItem` method is responsible for rendering each item in the dropdown list of time values. It creates an `<li>` element with the following attributes and event handlers: */
+  renderDropdownItem(item, rangeIndex, index) {
+    return (h("li", { key: item, role: "menuitem", "aria-label": item, class: {
+        'vega-dropdown-item-selected': this.isItemSelected(item, rangeIndex),
+      }, tabIndex: index === 0 ? 0 : -1, "data-index": index, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onClick: () => this.onItemClick(item, rangeIndex), onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("span", { "data-index": index, innerHTML: item })));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-range-dropdown-item-click}
+   */
+  /* istanbul ignore next */
+  /**
+   * It is called when a dropdown item is clicked.
+   *
+   * @param {string} item time string
+   * @param {TimeRangeIndex} rangeIndex start or end
+   */
+  onItemClick(item, rangeIndex) {
+    this.valueController.updateValueByRangeType(item, rangeIndex);
+    if (rangeIndex === 'start') {
+      this.startDropdownController.hide();
+      void this.rangeInputRenderer.getEndInputRef().doFocus();
+    }
+    else {
+      this.endDropdownController.hide();
+    }
+  }
+  /**
+   * It is used to determine if a dropdown item is currently selected or not.
+   *
+   * @param {string} item time string
+   * @param {TimeRangeIndex} rangeIndex start or end
+   * @returns {boolean} a boolean value
+   */
+  isItemSelected(item, rangeIndex) {
+    /* istanbul ignore next */
+    const valueArr = this.value && Array.isArray(this.value) ? this.value : ['', ''];
+    if (rangeIndex === 'start' && valueArr[0] === item) {
+      return true;
+    }
+    else if (rangeIndex === 'end' && valueArr[1] === item) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * The `getTimeArray` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class.
+   * It is responsible for generating an array of time values based on the `hours` and `minutes` provided in the `dropdownSource` property.
+   *
+   * @returns {string[]} all selectable time list
+   */
+  getTimeArray() {
+    const result = [];
+    const resultWithPM = [];
+    const resultWithAM = [];
+    const timeFormat = this.timeFormat;
+    const { hours, minutes } = this.dropdownSource;
+    if (this.dropdownSource) {
+      for (let i = 0; i < hours.length; i++) {
+        for (let j = 0; j < minutes.length; j++) {
+          const item = `${hours[i]}:${minutes[j]}`;
+          result.push(item);
+          if (timeFormat === '12-hour') {
+            resultWithAM.push(item + ' AM');
+            resultWithPM.push(item + ' PM');
+          }
+        }
+      }
+    }
+    if (timeFormat === '12-hour') {
+      return resultWithAM.concat(resultWithPM);
+    }
+    return result;
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownRenderer.prototype, "timeFormat", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownRenderer.prototype, "value", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownRenderer.prototype, "dropdownSource", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownRenderer.prototype, "valueController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownRenderer.prototype, "rangeInputRenderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownRenderer.prototype, "startDropdownController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownRenderer.prototype, "endDropdownController", void 0);
+__decorate$4([
+  MapToComponentMethod('componentDidRender')
+], VegaTimePickerRangeDropdownRenderer.prototype, "componentDidRenderCallback", null);
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/* The code is defining a class called `VegaTimePickerRangeClearButtonRenderer` that extends the `VegaSlimmer` class. This class is used to render a clear button for a time picker range component. */
+class VegaTimePickerRangeClearButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /** The `onClickClearIcon` function is a private method that is called when the clear icon is clicked. It performs the following actions: */
+    this.onClickClearIcon = () => {
+      this.valueController.clearRangeTimePicker();
+      this.endDropdownController.hide();
+      void this.rangeInputRenderer.getStartInputRef().doFocus();
+    };
+  }
+  render() {
+    return (h("div", { class: {
+        'vega-time-picker-range-clear-icon': true,
+        'invisible': !this.isInvisible(),
+      }, "aria-label": "clear input", role: "button", tabindex: !this.disabled ? 0 : -1, onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-icon", { icon: "close", class: "v-min-w-min vega-flex-shrink-0" })));
+  }
+  /**
+   * The function checks if the value is an array and if either of the elements in the array is truthy, returning true if so.
+   *
+   * @returns {boolean} a boolean value.
+   */
+  isInvisible() {
+    return (!this.disabled && Array.isArray(this.value) && (Boolean(this.value[0]) || Boolean(this.value[1])));
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaTimePickerRangeClearButtonRenderer.prototype, "disabled", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTimePickerRangeClearButtonRenderer.prototype, "value", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTimePickerRangeClearButtonRenderer.prototype, "valueController", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTimePickerRangeClearButtonRenderer.prototype, "endDropdownController", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTimePickerRangeClearButtonRenderer.prototype, "rangeInputRenderer", void 0);
+
+/**
+ * A rule that checks if start time is before than end time
+ */
+class TimeRangeRule extends InternalFormFieldValidationRule {
+  /**
+   * It creates a new instance of the class with the given config.
+   *
+   * @param {{ timeFormat: TimeFormat }} config - config including the timeFormat for time value
+   * @param {TimeFormat} config.timeFormat - The timeFormat for time value
+   */
+  constructor(config) {
+    super();
+    this.config = config;
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * Check if the start time is before than end time
+   *
+   * @param {string | string[]} input - The value of the time picker.
+   * @returns  {EvaluateResultTranslation} - The result of the evaluation.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Unexpected type of input: ${typeof input}: ${input}`);
+    }
+    const isValid = this.isStartTimeBeforeEndTime(input[0], input[1]);
+    return {
+      isValid: isValid,
+      message: isValid ? '' : 'The end time should be later than start time',
+    };
+  }
+  /**
+   * If the input is an array of two strings, and each string is a valid date, then return true.
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    return (Array.isArray(input) &&
+      input.length === 2 &&
+      input.every((item) => isTimeStr(item, this.config.timeFormat)));
+  }
+  /**
+   * check if start time before end time, the 12-hour time should convert to 24-hour time format, the safari, 'fire fox' do not support 12-hour
+   *
+   * @param {string} startTime time string
+   * @param  {string} endTime time string
+   * @returns {boolean} boolean value
+   */
+  isStartTimeBeforeEndTime(startTime, endTime) {
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const baseDate = `${year}-${month}-${day}`;
+    return (new Date(`${baseDate}T${convert12HourTo24HourFormat(endTime)}`) >
+      new Date(`${baseDate}T${convert12HourTo24HourFormat(startTime)}`));
+  }
+}
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerInputMaskController` class is responsible for initializing an input mask based on the time format and mode. */
+class VegaTimePickerInputMaskController extends VegaSlimmer {
+  /**
+   * The function initializes an input mask based on the time format and mode.
+   */
+  initInputMask() {
+    const maskConfig = {
+      type: 'custom',
+      options: {
+        mask: this.timeFormat === '12-hour' ? 'xx:xx xx' : 'xx:xx',
+        slot: 'x',
+        accept: this.timeFormat === '12-hour' ? /[0-9|A|P|M]/ : /\d/,
+      },
+    };
+    if (this.mode === 'range') {
+      this.rangeInputRenderer.getStartInputRef().maskConfig = maskConfig;
+      this.rangeInputRenderer.getEndInputRef().maskConfig = maskConfig;
+    }
+    else {
+      this.singleInputRenderer.getInputRef().maskConfig = maskConfig;
+    }
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaTimePickerInputMaskController.prototype, "timeFormat", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTimePickerInputMaskController.prototype, "mode", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTimePickerInputMaskController.prototype, "singleInputRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTimePickerInputMaskController.prototype, "rangeInputRenderer", void 0);
+__decorate$2([
+  MapToComponentMethod('componentDidLoad')
+], VegaTimePickerInputMaskController.prototype, "initInputMask", null);
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/** The `VegaTimePickerRangeDropdownController` class is responsible for managing the dropdown menu for selecting a range of time in the VegaTimePicker component. */
+class VegaTimePickerRangeDropdownController extends ElementAppenderSlimmer {
+  /**
+   * The constructor function sets up the configuration for a dropdown menu that is shown when a specific condition is met.
+   *
+   * @param {TimeRangeIndex} rangeIndex start or end
+   */
+  constructor(rangeIndex) {
+    super(() => {
+      const target = rangeIndex === 'start'
+        ? this.rangeInputRenderer.getStartInputRef()
+        : this.rangeInputRenderer.getEndInputRef();
+      const appendableElement = rangeIndex === 'start'
+        ? this.rangeDropdownRenderer.getStartDropdownRef()
+        : this.rangeDropdownRenderer.getEndDropdownRef();
+      return {
+        target,
+        appendableElement,
+        positionRelativeTo: this.positionRelativeTo,
+        translocation: { X: 0, Y: 8 },
+        placement: ['bottom', 'top'],
+        matchTargetWidth: true,
+      };
+    }, () => 'custom', 'isRangeDropdownShow');
+    this.isRangeDropdownShow = false;
+    this.rangeDropdownType = 'start';
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-time-picker-range-input-focus}
+     */
+    /* istanbul ignore next */
+    /**
+     * The function shows a dropdown and scrolls to a selected element if a value is provided.
+     *
+     * @param {string} value - The `value` parameter is a string that represents the value to be scrolled to in the dropdown list.
+     */
+    this.showAndScrollPosition = (value) => {
+      this.show();
+      if (value) {
+        const dropdownRef = this.rangeDropdownType === 'start'
+          ? this.rangeDropdownRenderer.getStartDropdownRef()
+          : this.rangeDropdownRenderer.getEndDropdownRef();
+        const selectedItem = dropdownRef.shadowRoot.querySelector(`[aria-label="${value}"]`);
+        if (selectedItem) {
+          this.dropdownSelectedItemsController.scrollToSelectedElement(selectedItem);
+        }
+      }
+    };
+    this.rangeDropdownType = rangeIndex;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-range-disabled-change}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function hides a dropdown when it is disabled.
+   */
+  hideDropdownWhenDisabled() {
+    if (this.mode === 'range' && this.isRangeDropdownShow) {
+      this.hide();
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownController.prototype, "positionRelativeTo", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownController.prototype, "mode", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownController.prototype, "rangeDropdownRenderer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownController.prototype, "rangeInputRenderer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaTimePickerRangeDropdownController.prototype, "dropdownSelectedItemsController", void 0);
+__decorate$1([
+  MapToComponentMethod('watchDisabled')
+], VegaTimePickerRangeDropdownController.prototype, "hideDropdownWhenDisabled", null);
+
+const VegaTimePickerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the time picker during user input',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === true,
+  },
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the time picker during user input',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === false,
+  },
+  {
+    payloadKey: 'MODE_IS_SINGLE',
+    payloadDescription: 'Specifies the mode for selecting time in the time picker, `single` indicates the ability to select a single time.',
+    /**
+     * The function checks if the `mode` property of the `host` element is equal to 'single'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.mode === 'single',
+  },
+  {
+    payloadKey: 'MODE_IS_RANGE',
+    payloadDescription: 'Specifies the mode for selecting time in the time picker, `range` indicates the ability to select a time range',
+    /**
+     * The function checks if the `mode` property of the `host` element is equal to 'range'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.mode === 'range',
+  },
+];
+
+const vegaTimePickerCss = ":host{display:inline-block;text-align:left;line-height:normal;width:100%}vega-field-label{margin-bottom:8px}vega-input::part(field-error-message){display:none}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-top:12px;padding-right:8px;padding-left:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-time-picker-input-container.error vega-input::part(input-container){border-width:0px}.vega-time-picker-input-container.error vega-input::part(input-container):hover{border-width:0px}.vega-time-picker-input-container.error vega-input::part(input-container):focus-within{outline:none}.vega-time-picker-input-container.error{border-radius:8px;border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}.vega-time-picker-input-container.error .vega-time-picker-range-clear-icon:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.vega-time-picker-input-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}.vega-time-picker-input-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}.vega-hidden{display:none}.range-input-divider{width:1px;height:24px;border-style:solid;border-right-width:1px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}.mobile .range-input-divider{width:100%;height:1px;border-style:solid;border-right-width:0px;border-top-width:1px;border-bottom-width:0px;border-left-width:0px}.mobile .time-picker-input-end vega-input::part(input){padding-left:26px}.range-mode{position:relative;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:8px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))}:host(.disabled) .range-mode{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host:not(.disabled) .range-mode:not(.error):hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.range-mode vega-input::part(input-container),:host(.disabled) .range-mode vega-input::part(input-container):hover{border-width:0px}.range-mode:not(.error) .time-picker-input-start vega-input::part(input-container):focus-within,.range-mode:not(.error) .time-picker-input-end vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));margin:-1px}.range-mode .vega-time-picker-range-clear-icon{position:absolute;width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));top:50%;right:16px;transform:translateY(-50%)}.range-mode .vega-time-picker-range-clear-icon:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;border-radius:4px;padding:2px}.range-mode.mobile .vega-time-picker-range-clear-icon{top:75%}.range-mode.mobile .time-picker-input{width:100%}vega-time-picker-dropdown.vega-force-hidden{display:none !important}.vega-time-picker-range-clear-icon.invisible{visibility:hidden}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+const VegaTimePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.labelRenderer = new VegaTimePickerLabelRenderer();
+    this.singleInputRenderer = new VegaTimePickerSingleInputRenderer();
+    this.singleDropdownRenderer = new VegaTimePickerSingleDropdownRenderer();
+    this.valueController = new VegaTimePickerValueController();
+    this.singleDropdownController = new VegaTimePickerSingleDropdownController();
+    this.dropdownSelectedItemsController = new VegaTimePickerDropdownSelectedItemsController();
+    this.keyboardController = new VegaTimePickerKeyboardController();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired, timeFormat, mode) => isRequired
+            ? mode === 'range'
+              ? new TimeRangeRequiredRule({ timeFormat })
+              : new TimeRequiredRule({ timeFormat })
+            : null,
+          dependence: ['timeFormat', 'mode'],
+        },
+        {
+          propertyName: 'timeFormat',
+          ruleFactory: (timeFormat, required, mode) => timeFormat && required
+            ? mode === 'range'
+              ? new TimeRangeRequiredRule({ timeFormat })
+              : new TimeRequiredRule({ timeFormat })
+            : null,
+          dependence: ['required', 'mode'],
+        },
+        {
+          propertyName: 'mode',
+          ruleFactory: (mode, timeFormat) => mode === 'range' ? new TimeRangeRule({ timeFormat }) : null,
+          dependence: 'timeFormat',
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: (target) => (target.mode === 'range' ? ['', ''] : ''),
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => this.mode === 'single'
+        ? [this.singleInputRenderer.getInputRef()]
+        : [this.rangeInputRenderer.getStartInputRef(), this.rangeInputRenderer.getEndInputRef()],
+    });
+    this.rangeInputRenderer = new VegaTimePickerRangeInputRenderer();
+    this.rangeClearButtonRenderer = new VegaTimePickerRangeClearButtonRenderer();
+    this.rangeDropdownRenderer = new VegaTimePickerRangeDropdownRenderer();
+    this.startDropdownController = new VegaTimePickerRangeDropdownController('start');
+    this.endDropdownController = new VegaTimePickerRangeDropdownController('end');
+    this.inputMaskController = new VegaTimePickerInputMaskController();
+    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.inputContainerRef);
+    this.changeEventEmitter = createEventEmitSlimmer(VegaTimePicker, VegaChange);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaTimePickerRuntimeMetricsPayloadDefinition);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.isTabletDevice = getDeviceType() === DeviceType.TABLET;
+    /** dropdown source */
+    this.dropdownSource = {
+      hours: [],
+      minutes: [],
+    };
+    /* Selected hour, minute and amPm */
+    this.isDropdownShow = false;
+    this.selectedTimeValue = {};
+    /**
+     * Specifies the mode for selecting time in the time picker.
+     *
+     *  - `single` indicates the ability to select a single time.
+     *  - `range` indicates the ability to select a time range.
+     *
+     * @vegaVersion 1.48.0
+     */
+    this.mode = 'single';
+    /**
+     * Specifies whether selecting a time in the time picker
+     *    is required for passing form validation.
+     *
+     * @vegaVersion 1.12.0
+     */
+    this.required = false;
+    /**
+     * Determines the interval between each selectable minute value
+     *    in the time picker.
+     *
+     * @vegaVersion 1.12.0
+     */
+    this.increments = 1;
+    /**
+     * Specifies the format in which the time is displayed
+     *    in the time picker.
+     *  - `24-hour` displays time as "HH:mm".
+     *  - `12-hour` displays time as "hh:mm a".
+     *
+     * @vegaVersion 1.12.0
+     */
+    this.timeFormat = '24-hour';
+    /**
+     * Specifies the initial value or selected time
+     *    for the time picker.
+     * - In `single` mode, the value is a string:
+     *  - `24-hour` format: "HH:mm".
+     *  - `12-hour` format: "hh:mm a".
+     * - In `range` mode, the value is an array of two strings:
+     *  - `24-hour` format: ["HH:mm", "HH:mm"].
+     *  - `12-hour` format: ["hh:mm a", "hh:mm a"]
+     *
+     * @vegaVersion 1.12.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = this.mode === 'range' ? ['', ''] : '';
+    /**
+     * Determines the size or dimensions of the time picker component.
+     *
+     * @vegaVersion 1.12.0
+     */
+    this.size = 'default';
+    /**
+     * Determines whether the time picker component is disabled.
+     *
+     * @vegaVersion 1.12.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies the validation status of the time picker component.
+     *
+     * @vegaVersion 1.12.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether automatic validation should be implemented
+     *    for the time picker during user input.
+     *
+     * @vegaVersion 1.12.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies custom validation rules for the
+     *    time picker input field.
+     *
+     * @vegaVersion 1.12.0
+     */
+    this.validationRules = [];
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-keyboard-control-e2e}
+   */
+  /* istanbul ignore next */
+  async watchIsDropdownShow(newValue) {
+    methodPlaceholder(newValue);
+  }
+  watchSelectedTimeValue() {
+    methodPlaceholder();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-time-picker-mode-change}
+   */
+  /* istanbul ignore next */
+  /** Update timePicker settings property of mode is changed */
+  watchMode() {
+    methodPlaceholder();
+  }
+  watchIncrements() {
+    methodPlaceholder();
+  }
+  watchTimeFormat() {
+    methodPlaceholder();
+  }
+  watchValue(newValue, oldValue) {
+    methodPlaceholder(newValue, oldValue);
+  }
+  watchDisabled() {
+    methodPlaceholder();
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  componentWillLoad() {
+    methodPlaceholder();
+  }
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  componentDidRender() {
+    methodPlaceholder();
+  }
+  render() {
+    const isRangeMode = this.mode === 'range';
+    return sanitizeVegaComponent(h(Host, { class: {
+        disabled: this.disabled,
+      } }, this.labelRenderer.render(), h("div", { class: this.getTimePickerClass(isRangeMode), ref: (node) => (this.inputContainerRef = node) }, isRangeMode ? this.rangeInputRenderer.render() : this.singleInputRenderer.render()), isRangeMode ? this.rangeDropdownRenderer.render() : this.singleDropdownRenderer.render()), this.host);
+  }
+  getTimePickerClass(isRangeMode) {
+    return {
+      'vega-time-picker-input-container': true,
+      'range-mode': isRangeMode,
+      'mobile': isRangeMode && this.isMobileDevice,
+      'tablet': isRangeMode && this.isTabletDevice,
+    };
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "isDropdownShow": ["watchIsDropdownShow"],
+    "selectedTimeValue": ["watchSelectedTimeValue"],
+    "mode": ["watchMode"],
+    "increments": ["watchIncrements"],
+    "timeFormat": ["watchTimeFormat"],
+    "value": ["watchValue"],
+    "disabled": ["watchDisabled"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaTimePicker.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "labelRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "singleInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "singleDropdownRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "singleDropdownController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "dropdownSelectedItemsController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "keyboardController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "rangeInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "rangeClearButtonRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "rangeDropdownRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "startDropdownController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "endDropdownController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "inputMaskController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "inputEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTimePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  ComponentLoadRequired()
+], VegaTimePicker.prototype, "watchValue", null);
+VegaTimePicker.style = vegaTimePickerCss;
+
+export { VegaTimePicker as vega_time_picker };