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

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

@@ -0,0 +1,1646 @@
+import { h, g as Host, F as Fragment, r as registerInstance, e as createEvent, i as getElement } from './index-01a2f9c9.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { D as DateRequiredRule } from './date-required-rule-79ecc64d.js';
+import { af as compareIsSameOrBefore, W as isDateStr, ag as compareIsBefore, ah as compareIsAfter, a5 as CalendarDate } from './type-guard-09acedc9.js';
+import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import { V as VegaSlimmer, b as MapToComponentField, L as LogUtility, M as MapToComponentMethod, 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 { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-5f775fd9.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { a as VegaClick, s as VegaSelectionChange, r as VegaClear, q as VegaMonthYearChange, N as VegaOpen, f as VegaClose, h as VegaChange } from './vega-event-id-61c8bd9f.js';
+import { I as Icons } from './icons-d5c5c709.js';
+import { a as VegaInternalIconManager } from './internal-icon-manager-9279071a.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { i as isArrayEqual } from './array-a1d98264.js';
+import './public-api-a77a0b33.js';
+import { t as tryGetDocument } from './try-get-document-bef0f526.js';
+import { F as FeatureFlag } from './feature-flag-controller-24b9f956.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6fdf8c8b.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { S as StringMaskStrategy } from './string-mask-strategy-9cd2a273.js';
+import { S as StringInputFormatterSlimmer } from './string-input-formatter-slimmer-39a7bd95.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-a7b44d74.js';
+import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import './index-9fdb7060.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-16a5ed3a.js';
+import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './breakpoints-d9faf11c.js';
+import './ui-189dae23.js';
+import './typography-396de03f.js';
+import './index-81ce67e2.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './string-a953eafc.js';
+import './observer-3959f9dd.js';
+import './dom-node-subject-factory-5798693b.js';
+import './vega-internal-event-id-b65a01a3.js';
+import './page-resize-observer-slimmer-ee8774a6.js';
+import './mutation-observer-slimmer-7065c745.js';
+import './mutation-observer-filters-6c515793.js';
+import './sub-state-observer-slimmer-4fc8b3da.js';
+import './number-4398f2e1.js';
+import './vega-env-manager-8f8dc473.js';
+import './internal-vega-event-manager-826279b7.js';
+import './internal-vega-z-index-manager-f0ca0975.js';
+import './dark-mode-style-controller-e2a2f76c.js';
+import './_commonjsHelpers-2088bffa.js';
+import './vega-nonce-manager-497e5eb5.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 './pixel-f32c07ce.js';
+import './timer-9321173b.js';
+import './styles.constants-b320e4a7.js';
+import './range-429fb0e2.js';
+import './index-1f9eab8f.js';
+import './string-format-strategy.abstract-2d2ce51e.js';
+import './keyboard-manager-3c463777.js';
+import './responsive-format-facade-d4abfdb9.js';
+
+/**
+ * A rule that checks if start date is before than end date
+ */
+class DateRangeRule extends InternalFormFieldValidationRule {
+  /**
+   * 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 date is before than end date
+   *
+   * @param {string | string[]} input - The value of the date 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 startDate = new Date(input[0]);
+    const endDate = new Date(input[1]);
+    const isValid = compareIsSameOrBefore(startDate, endDate);
+    return {
+      isValid: isValid,
+      message: isValid ? '' : 'The end date should be later than start date',
+    };
+  }
+  /**
+   * 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(isDateStr);
+  }
+}
+
+/**
+ * A rule that checks if date is in minDate and maxDate range
+ */
+class MinAndMaxDateRule extends InternalFormFieldValidationRule {
+  /**
+   * It creates a new instance of the class with the given config.
+   *
+   * @param {{ minDate: string; maxDate: string }} config - config including the minDate and the maxDate
+   * @param {string} config.minDate - The minDate
+   * @param {string} config.maxDate - The maxDate
+   */
+  constructor(config) {
+    super();
+    /**
+     *  Evaluate if single date is within the min and max date range
+     *
+     * @param {string} input A single date string
+     * @returns  {EvaluateResultTranslation}An object with two properties: isValid and message.
+     */
+    this.evaluateSingleDate = (input) => {
+      const singleDate = new Date(input);
+      if (this.minDate && compareIsBefore(singleDate, this.minDate)) {
+        return this.invalidResult({
+          key: 'The date should be later than {0}',
+          args: [this.config.minDate],
+        });
+      }
+      if (this.maxDate && compareIsAfter(singleDate, this.maxDate)) {
+        return this.invalidResult({
+          key: 'The date should be earlier than {0}',
+          args: [this.config.maxDate],
+        });
+      }
+      return this.validResult();
+    };
+    /**
+     * Evaluate if start date or end date are within the min and max date range
+     *
+     * @param {string[]} input includes start date or end date
+     * @returns  {EvaluateResultTranslation}An object with two properties: isValid and message.
+     */
+    this.evaluateRangeDates = (input) => {
+      const startDate = new Date(input[0]);
+      const endDate = new Date(input[1]);
+      if (this.minDate && compareIsBefore(startDate, this.minDate)) {
+        return this.invalidResult({
+          key: 'The start date should be later than {0}',
+          args: [this.config.minDate],
+        });
+      }
+      if (this.maxDate && compareIsAfter(startDate, this.maxDate)) {
+        return this.invalidResult({
+          key: 'The start date should be earlier than {0}',
+          args: [this.config.maxDate],
+        });
+      }
+      if (endDate && this.maxDate && compareIsAfter(endDate, this.maxDate)) {
+        return this.invalidResult({
+          key: 'The end date should be earlier than {0}',
+          args: [this.config.maxDate],
+        });
+      }
+      return this.validResult();
+    };
+    /**
+     * Generate an invalid result
+     *
+     * @param {string} message Error message
+     * @returns {EvaluateResultTranslation} invalid validation result
+     */
+    this.invalidResult = (message) => ({
+      isValid: false,
+      message,
+    });
+    /**
+     * Generate a valid result
+     *
+     * @returns {EvaluateResultTranslation} invalid validation result
+     */
+    this.validResult = () => ({
+      isValid: true,
+      message: '',
+    });
+    this.config = config;
+    this.minDate = config.minDate ? new Date(config.minDate) : null;
+    this.maxDate = config.maxDate ? new Date(config.maxDate) : null;
+  }
+  /**
+   * 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 input is a string, check if it's within the min and max date range.
+   * If the input is an array, check if the start date is within the min and max date range, and if the end date is within the
+   * max date range
+   *
+   * @param {string | string[]} input - The value of the date picker.
+   * @returns  {EvaluateResultTranslation} - The result of the evaluation.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Unexpected type of input: ${typeof input}: ${input}`);
+    }
+    if (typeof input === 'string') {
+      return this.evaluateSingleDate(input);
+    }
+    else {
+      return this.evaluateRangeDates(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);
+  }
+  /**
+   * It returns true if the input is a string or an array of two strings, and each string is a valid date string
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    return ((typeof input === 'string' && isDateStr(input)) ||
+      (Array.isArray(input) && input.length === 2 && input.every(isDateStr)));
+  }
+}
+
+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;
+};
+class VegaDatePickerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderInputPrefix = () => {
+      return (h("div", { class: "vega-input-prefix" },
+        h("vega-icon", { icon: VegaInternalIconManager.getIconKey('calendar'), color: "text-secondary", 
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick: async () => {
+            if (!this.disabled) {
+              await this.focusInput();
+              await this.vegaDatePickerCalendarRenderer.triggerRepick('start');
+            }
+          } })));
+    };
+    /**
+     * return true if input is enabled, otherwise false
+     * on mobile, the input is ready-only to avoid virtual keyboard
+     */
+    this.isInputEnabled = () => {
+      return !this.readOnly && !this.isMobileDevice;
+    };
+    this.renderLabel = () => {
+      return (this.label && (h("vega-field-label", { ref: (e) => {
+          /* istanbul ignore next */
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaClick, async () => {
+            await this.focusInput();
+          });
+        }, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-click-label-focus-input-e2e}
+     */
+    /* istanbul ignore next */
+    this.focusInput = async () => {
+      var _a, _b;
+      (_a = this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef()) === null || _a === void 0 ? void 0 : _a.focus();
+      (_b = this.vegaDatePickerRangeInputRenderer.getStartDateInputRef()) === null || _b === void 0 ? void 0 : _b.focus();
+      await this.calendarOpenStateController.showCalendar();
+    };
+  }
+  getDatePickerContainer() {
+    return this.datePickerContainer;
+  }
+  render() {
+    const classNames = [
+      'vega-input-container',
+      this.size,
+      `${this.mode}-mode`,
+      this.isMobileDevice ? /* istanbul ignore next */ 'mobile' : '',
+    ];
+    return (h(Host, { class: {
+        disabled: this.disabled,
+      } },
+      this.renderLabel(),
+      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) }, this.mode === 'range'
+        ? this.vegaDatePickerRangeInputRenderer.render()
+        : this.vegaDatePickerSingleInputRenderer.render()),
+      this.vegaDatePickerCalendarRenderer.render()));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ calendar: Icons.calendar });
+})();
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "disabled", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "size", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "mode", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "label", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "required", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "readOnly", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "autoValidation", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "isMobileDevice", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "calendarOpenStateController", void 0);
+
+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;
+};
+/**
+ * Date picker input base renderer
+ */
+class VegaDatePickerInputRendererBase extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.onClickClearIcon = async () => {
+      if (this.mode === 'range') {
+        this.vegaDatePickerValueController.setValue(['', '']);
+      }
+      else {
+        this.vegaDatePickerValueController.setValue('');
+      }
+      await this.calendarOpenStateController.hideCalendar();
+    };
+    this.isClearIconVisible = () => {
+      if (this.mode === 'range') {
+        const value = this.vegaDatePickerValueController.getValue();
+        return !this.disabled && !isArrayEqual(value, ['', '']);
+      }
+      else {
+        const value = this.vegaDatePickerValueController.getValue();
+        return !this.disabled && Boolean(value.length);
+      }
+    };
+  }
+  /**
+   * Render clear icon for either single or range date picker
+   */
+  renderClearIcon() {
+    return (h(Fragment, null, this.showClearIcon && this.isClearIconVisible() && (h("div", { class: "vega-input-clear-icon", tabIndex: -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-icon", { icon: "close" })))));
+  }
+}
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "disabled", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "showClearIcon", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "mode", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "vegaDatePickerValueController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "calendarOpenStateController", void 0);
+
+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;
+};
+class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRendererBase {
+  constructor() {
+    super(...arguments);
+    this.render = () => {
+      return (h("div", { class: "date-picker-input" },
+        this.vegaDatePickerRenderer.renderInputPrefix(),
+        h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getSinglePlaceholder(), value: this.vegaDatePickerValueController.getValue(), ref: (ref) => (this.singleDateInputRef = ref), onChange: this.onSingleDateChange, disabled: this.disabled, 
+          /* eslint-disable-next-line react/jsx-no-bind */
+          onClick: () => this.calendarOpenStateController.showCalendar() }),
+        this.renderClearIcon()));
+    };
+    this.getSinglePlaceholder = () => {
+      if (!this.placeholder) {
+        return this.format;
+      }
+      if (typeof this.placeholder !== 'string') {
+        LogUtility.warn('The placeholder should be a string');
+        return this.format;
+      }
+      return this.placeholder;
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-single-date-change}
+     */
+    this.onSingleDateChange = (e) => {
+      const currentTarget = e.currentTarget;
+      const date = currentTarget.value;
+      if (CalendarDate.fromString(date, this.format)) {
+        this.vegaDatePickerValueController.setValue(this.vegaDatePickerFormatController.formatDate(date));
+      }
+      else {
+        this.vegaDatePickerValueController.setValue('');
+        this.singleDateInputRef.value = '';
+        LogUtility.warn('The date value of ${date} is invalid');
+      }
+    };
+  }
+  getSingleDateInputRef() {
+    return this.singleDateInputRef;
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "placeholder", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "format", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "calendarOpenStateController", void 0);
+
+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;
+};
+class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
+  constructor() {
+    super(...arguments);
+    this.render = () => {
+      return (h(Fragment, null,
+        h("div", { class: "date-picker-input" },
+          this.vegaDatePickerRenderer.renderInputPrefix(),
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: async () => await this.onInputClicked('start') })),
+        h("span", { class: {
+            'range-input-divider': true,
+          } }),
+        h("div", { class: "date-picker-input" },
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[1], value: this.vegaDatePickerValueController.getValue()[1], ref: (ref) => (this.endDateInputRef = ref), onChange: this.onEndDateChange, disabled: this.disabled, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: async () => await this.onInputClicked('end') }),
+          this.renderClearIcon())));
+    };
+    this.getRangePlaceholder = () => {
+      if (!this.placeholder) {
+        return ['Start Date', 'End Date'].map((item) => this.translationSlimmer.t(item));
+      }
+      if (!Array.isArray(this.placeholder) || this.placeholder.length !== 2) {
+        LogUtility.warn('The placeholder should be an array, including start and end placeholder');
+        return ['Start Date', 'End Date'].map((item) => this.translationSlimmer.t(item));
+      }
+      return this.placeholder;
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-start-end-date-change}
+     */
+    this.onStartDateChange = (e) => {
+      const currentTarget = e.currentTarget;
+      const date = currentTarget.value;
+      if (CalendarDate.fromString(date, this.format)) {
+        this.vegaDatePickerValueController.setValue([
+          this.vegaDatePickerFormatController.formatDate(date),
+          this.vegaDatePickerValueController.getValue()[1],
+        ]);
+      }
+      else {
+        this.vegaDatePickerValueController.setValue([
+          '',
+          this.vegaDatePickerValueController.getValue()[1],
+        ]);
+        this.startDateInputRef.value = '';
+        LogUtility.warn('The date value of ${date} is invalid');
+      }
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-start-end-date-change}
+     */
+    this.onEndDateChange = (e) => {
+      const currentTarget = e.currentTarget;
+      const date = currentTarget.value;
+      if (CalendarDate.fromString(date, this.format)) {
+        this.vegaDatePickerValueController.setValue([
+          this.vegaDatePickerValueController.getValue()[0],
+          this.vegaDatePickerFormatController.formatDate(date),
+        ]);
+      }
+      else {
+        this.vegaDatePickerValueController.setValue([
+          this.vegaDatePickerValueController.getValue()[0],
+          '',
+        ]);
+        this.endDateInputRef.value = '';
+        LogUtility.warn('The date value of ${date} is invalid');
+      }
+    };
+  }
+  getStartDateInputRef() {
+    return this.startDateInputRef;
+  }
+  getEndDateInputRef() {
+    return this.endDateInputRef;
+  }
+  async onInputClicked(type) {
+    await this.calendarOpenStateController.showCalendar();
+    await this.vegaDatePickerCalendarRenderer.triggerRepick(type);
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "placeholder", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "calendarOpenStateController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "allowRepick", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "format", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerCalendarRenderer", 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;
+};
+class VegaDatePickerCalendarRenderer extends VegaSlimmer {
+  componentDidLoad() {
+    this.appendCalendarToBodyIfMobile();
+  }
+  getCalendarContentBoxRef() {
+    return this.calendarContentBoxRef;
+  }
+  getCalendarRef() {
+    return this.calendarRef;
+  }
+  getMobileModalRef() {
+    return this.mobileModalRef;
+  }
+  async triggerRepick(type) {
+    if (this.allowRepick && this.mode === 'range') {
+      await this.calendarRef.triggerRepick(type);
+    }
+  }
+  render() {
+    return this.isMobileDevice ? this.mobileRender() : this.renderCalendar();
+  }
+  mobileRender() {
+    return (h("vega-modal", { showCloseButton: false, size: VegaDatePickerCalendarRenderer.calendarModalSize, padding: "0", isVerticallyCentered: true, backdropColor: "semi", ref: (ref) => {
+        this.mobileModalRef = ref;
+        this.addModalObserver(ref);
+      } }, h("div", { slot: "modal-content" }, this.renderCalendar())));
+  }
+  renderCalendar() {
+    return (h("vega-box", { padding: {
+        default: 'size-12',
+        S: 'size-32',
+      }, corners: "rounded-12", backgroundColor: "bg-primary", shadow: "shadow-dropdown-menu", border: "border-input-field", ref: (ref) => {
+        this.calendarContentBoxRef = ref;
+      }, class: "date-picker-content-box" },
+      h("vega-box", { width: this.getDefaultCalendarDimension('width'), height: this.getDefaultCalendarDimension('height') },
+        h("vega-date-picker-calendar", { selection: this.value, mode: this.mode, minDate: this.minDate, maxDate: this.maxDate, clearButton: this.clearButton, format: this.format, staticHeight: this.dropdownConfig.staticHeight !== false, showYearMonthDropdowns: this.showYearMonthDropdowns, timezone: this.timezone, yearMonthDropdownProps: {
+            isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
+          }, ref: (ref) => {
+            this.calendarRef = ref;
+            this.addCalendarObserver(ref);
+          }, 
+          /* eslint-disable-next-line react/jsx-no-bind */
+          isDateDisabled: (date) => this.isDateDisabled(date) }))));
+  }
+  addCalendarObserver(calendarRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaSelectionChange, async (payload) => {
+      await this.onCalendarSelected(payload.detail);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaClear, async () => {
+      await this.calendarOpenStateController.hideCalendar();
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaMonthYearChange, async (payload) => {
+      this.monthYearChangeEventEmitter.emit(payload.detail);
+    });
+  }
+  addModalObserver(modalRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, VegaOpen, () => {
+      this.calendarOpenStateController.updateIsCalendarShowState(true);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, VegaClose, () => {
+      this.calendarOpenStateController.updateIsCalendarShowState(false);
+    });
+  }
+  async onCalendarSelected(value) {
+    if (this.mode === 'single') {
+      this.vegaDatePickerValueController.setValue(value);
+    }
+    else if (this.mode === 'range') {
+      this.vegaDatePickerValueController.setValue(value);
+    }
+    if (this.isCalendarShow) {
+      await this.calendarOpenStateController.hideCalendar();
+    }
+  }
+  appendCalendarToBodyIfMobile() {
+    const document = tryGetDocument();
+    if (this.isMobileDevice && document) {
+      document.body.append(this.mobileModalRef);
+    }
+  }
+  getDefaultCalendarDimension(type) {
+    const dimensions = this.mode === 'range' && !this.isMobileDevice
+      ? VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForRange
+      : VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForSingle;
+    // Height can be dynamic
+    if (type === 'height' && this.dropdownConfig.staticHeight === false) {
+      return 'auto';
+    }
+    let value = dimensions[type];
+    // Extra space for footer when height is static
+    if (type === 'height' && this.clearButton) {
+      value += 40; // 24px footer + 16px margin
+    }
+    return `${value}px`;
+  }
+}
+VegaDatePickerCalendarRenderer.calendarModalSize = 344;
+VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForSingle = {
+  width: 280,
+  height: 316,
+};
+VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForRange = {
+  width: 608,
+  height: 324,
+};
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "format", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "value", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "minDate", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "maxDate", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "dropdownConfig", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "showYearMonthDropdowns", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "timezone", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "isCalendarShow", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "isDateDisabled", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "allowRepick", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerValueController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "calendarOpenStateController", void 0);
+__decorate$5([
+  MapToComponentMethod('componentDidLoad')
+], VegaDatePickerCalendarRenderer.prototype, "componentDidLoad", null);
+
+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 date picker value controller slimmer */
+class VegaDatePickerValueController extends VegaSlimmer {
+  /*
+   * call this method to open the date picker dropdown
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-render-ui-with-single}
+   */
+  /** Set default value if value is not set when component will load */
+  componentWillLoad() {
+    if (!this.value || !this.valueGuard(this.value)) {
+      this.setDefaultValueByMode();
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-single-date-change}
+   * @see{module:vega-date-picker-single-mode-auto-validate-value-change}
+   * @see{module:vega-date-picker-range-mode-auto-validate-value-change}
+   * @see{module:should-receive-the-value-from-vegaChange-event-in-single-mode}
+   * @see{module:should-receive-the-value-from-vegaChange-event-in-range-mode}
+   */
+  /**
+   * Update value when property of value changed.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} newValue - The new value of date picker.
+   * @param {DatePickerValueType<DatePickerModeType>} oldValue - The old value of date picker.
+   */
+  watchValue(newValue, oldValue) {
+    /**
+     * - single mode: @Watch will not be trigger if the value not change.
+     * - range mode: the value will be updated to the dropdown calendar,
+     *      avoid the value changed again by `onDatePickerSelected` in range mode.
+     */
+    if (this.mode === 'range' &&
+      isArrayEqual(newValue, oldValue)) {
+      return; // avoid the value changed again by `onDatePickerSelected` in range mode
+    }
+    if (!this.valueGuard(newValue)) {
+      this.setDefaultValueByMode();
+    }
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-mode-change}
+   */
+  /* istanbul ignore next */
+  /** Update datePicker settings property of mode is changed */
+  watchMode() {
+    this.setDefaultValueByMode();
+  }
+  /**
+   * The function `getValue` returns the value of a DatePicker component, with type checking based on the specified DatePickerModeType.
+   *
+   * @typedef T generic type
+   * @returns {DatePickerValueType<T>} The method is returning the value of type `DatePickerValueType<T>`.
+   */
+  getValue() {
+    this.valueGuard(this.value);
+    return this.value;
+  }
+  /**
+   * The function sets the value of a date picker if it passes a type guard check.
+   *
+   * @param {DatePickerValueType} value - The `value` parameter is of type `DatePickerValueType<T>`. This means that it can
+   * accept a value of any type `T` that extends `DatePickerModeType`.
+   */
+  setValue(value) {
+    if (this.valueGuard(value)) {
+      this.value = value;
+    }
+  }
+  /**
+   * The function sets default values based on the mode specified.
+   */
+  setDefaultValueByMode() {
+    if (this.mode === 'range') {
+      this.setValue(['', '']);
+    }
+    if (this.mode === 'single') {
+      this.setValue('');
+    }
+  }
+  /**
+   * The function `valueGuard` checks if the provided value is valid for the specified mode of a date picker component.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} value - The `value` parameter is of type `DatePickerValueType<DatePickerModeType>`. It
+   * represents the value of the date picker, which can be a single date or a range of dates depending on
+   * the mode of the date picker.
+   * @returns {boolean} a boolean value.
+   */
+  valueGuard(value) {
+    let isValid;
+    switch (this.mode) {
+      case 'single':
+        isValid =
+          (value && typeof value === 'string' && !!CalendarDate.fromString(value, this.format)) ||
+            value === '';
+        break;
+      case 'range':
+        isValid =
+          Array.isArray(value) &&
+            value.length === 2 &&
+            value.every((item) => !!CalendarDate.fromString(item, this.format) || item === '');
+        break;
+    }
+    if (!isValid) {
+      LogUtility.warn(`Invalid date picker value ${value} for ${this.mode} mode`);
+    }
+    return isValid;
+  }
+}
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaDatePickerValueController.prototype, "value", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "mode", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "format", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "isCalendarShow", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "calendarOpenStateController", void 0);
+__decorate$4([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerValueController.prototype, "componentWillLoad", null);
+__decorate$4([
+  MapToComponentMethod('watchValue')
+], VegaDatePickerValueController.prototype, "watchValue", null);
+__decorate$4([
+  MapToComponentMethod('watchMode')
+], VegaDatePickerValueController.prototype, "watchMode", 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 date picker format controller slimmer */
+class VegaDatePickerFormatController extends StringInputFormatterSlimmer {
+  /**
+   * The constructor function initializes an object with a specified input type in TypeScript.
+   *
+   * @param {InputType} inputType - The `inputType` parameter in the constructor is of type `InputType`.
+   * It is being assigned to the `inputType` property of the class instance.
+   */
+  constructor(inputType) {
+    super();
+    /**
+     * The code below is defining a function called `formatDate` in TypeScript. This function takes a
+     *  parameter `date` of type string and returns a string.
+     *
+     * @param {string} date - The value of the date.
+     * @returns {string} The formatted date is being returned.
+     */
+    this.formatDate = (date) => {
+      const formattedDate = CalendarDate.fromString(date, this.format);
+      return formattedDate.toString(this.format);
+    };
+    /**
+     * This function returns a reference to an HTML input element based on the input type specified.
+     *
+     * @returns {HTMLInputElement|null} The single mode input ref, the start date input ref or end date input ref in range mode
+     */
+    this.getInputElementRef = () => {
+      switch (this.inputType) {
+        case 'single':
+          return this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef();
+        case 'rangeStart':
+          return this.vegaDatePickerRangeInputRenderer.getStartDateInputRef();
+        case 'rangeEnd':
+          return this.vegaDatePickerRangeInputRenderer.getEndDateInputRef();
+      }
+    };
+    /**
+     * Determining the string format strategy to be applied when the input field trigger is set to 'input'.
+     *
+     * @returns {Nullable<StringFormatStrategy>} the input mode mask strategy
+     */
+    this.getInputModeStrategy = () => {
+      return this.datePickerFormatStrategy;
+    };
+    /**
+     * Determining the string format strategy to be applied when the input field trigger is set to 'blur'. The date-picker don't need blur strategy, return null
+     *
+     * @returns {Nullable<StringFormatStrategy>} the blur mode mask strategy
+     */
+    this.getBlurModeStrategy = () => {
+      return null;
+    };
+    /**
+     * The code below is defining a private method called `getDateFormatMask` in a TypeScript class. This
+     * method takes a `format` parameter of type `string`.
+     *
+     * @param {string} format - The value of the format.
+     * @returns {StringMaskStrategy} - The mask of the date format.
+     */
+    this.getDateFormatMask = (format) => {
+      const matchResult = format.match(/M/gi);
+      return new StringMaskStrategy({
+        mask: format.replace(/[MDY]/gi, '9'),
+        slot: '9',
+        accept: (matchResult && matchResult.length) > 2 ? /\w/g : /\d/g,
+      });
+    };
+    this.inputType = inputType;
+  }
+  /** Set up string formatter when component did load */
+  componentDidLoad() {
+    this.setupStringFormatter(this.format);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-change-mask-format}
+   * @see{module:vega-date-picker-range-mode-change-mask-format}
+   */
+  /* istanbul ignore next */
+  /**
+   * It is decorated with the `@MapToComponentMethod` decorator,
+   * which indicates that this method should be mapped to a component method called 'format'.
+   *
+   * @param {string} format - The value of the format.
+   */
+  watchFormat(format) {
+    this.setupStringFormatter(format);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-change-mask-format}
+   * @see{module:vega-date-picker-range-mode-change-mask-format}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function `setupStringFormatter` sets up string input formatters based on the provided format for
+   * either single date or range mode.
+   *
+   * @param {string} format - The format parameter is a string that represents the desired format for the
+   * date input. It is used to create a date format mask that is passed to the StringInputFormatter
+   * constructor.
+   */
+  setupStringFormatter(format) {
+    this.datePickerFormatStrategy = this.getDateFormatMask(format);
+    this.setup();
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "format", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "mode", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate$3([
+  MapToComponentMethod('componentDidLoad')
+], VegaDatePickerFormatController.prototype, "componentDidLoad", null);
+__decorate$3([
+  MapToComponentMethod('watchFormat')
+], VegaDatePickerFormatController.prototype, "watchFormat", null);
+
+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 date picker key board controller slimmer */
+class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-open-by-keyboard}
+   */
+  /* istanbul ignore next */
+  /** The function sets up the functionality of key board control */
+  constructor() {
+    super((target) => [
+      {
+        keyCode: 'Enter',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        activeElementInScope: /* istanbul ignore next */ () => [
+          target.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
+          target.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
+          target.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
+          target.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
+        ],
+        eventName: 'keydown',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        callback: /* istanbul ignore next */ (e) => {
+          var _a;
+          const activeElement = (((_a = e.target.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) ||
+            e.target);
+          return activeElement === null || activeElement === void 0 ? void 0 : activeElement.click();
+        },
+      },
+    ]);
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerKeyboardController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerKeyboardController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerKeyboardController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+
+const VegaDatePickerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: 'Determines whether automatic validation should be implemented when a date or range is selected',
+    /**
+     * 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 when a date or range is selected',
+    /**
+     * 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 selection mode of the date picker. Use `single` to allow selecting a single date',
+    /**
+     * 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 selection mode of the date picker. Use `range` to allow selecting a date 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',
+  },
+];
+
+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 date picker element appender controller slimmer */
+class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
+  /**
+   * Sets up the configuration the element appender of date picker.
+   */
+  constructor() {
+    super(() => ({
+      target: this.vegaDatePickerRenderer.getDatePickerContainer(),
+      appendableElement: this.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
+      positionRelativeTo: this.dropdownConfig.positionRelativeTo,
+      translocation: { X: 0, Y: 8 },
+      placement: ['bottom', 'top'],
+      alignment: ['start', 'end'],
+      isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
+    }), () => 'custom', 'isCalendarShow');
+    this.clearCalendarStateTaskQueue = new SynchronizeTaskQueue();
+  }
+  /**
+   * Since connectedCallback will init element appender again, and it will add `vega-force-hidden` class to calendar,
+   *   so we should skip this in mobile side.
+   */
+  connectedCallback() {
+    if (!this.isMobileDevice) {
+      super.connectedCallback();
+    }
+  }
+  /**
+   * Since it not init the element appender in mobile side, we also not need destroy element appender in disconnectedCallback.
+   */
+  disconnectedCallback() {
+    if (!this.isMobileDevice) {
+      super.disconnectedCallback();
+    }
+  }
+  /**
+   * Since componentDidLoad will init element appender, and it will add `vega-force-hidden` class to calendar,
+   *   so we should skip this in mobile side.
+   */
+  componentDidLoad() {
+    if (!this.isMobileDevice) {
+      super.componentDidLoad();
+    }
+  }
+  /**
+   * We need to clear the calendar state when the property or state of the vega-date-picker is completed,
+   *   such as when the user inputs a range value. we can refill the selecting state in calendar according the new value.
+   */
+  async componentDidRender() {
+    await this.clearCalendarStateTaskQueue.runTask();
+  }
+  /** doOpen */
+  async doOpen() {
+    await this.showCalendar();
+  }
+  /** doClose */
+  async doClose() {
+    await this.hideCalendar();
+  }
+  /** watchDisabled */
+  async watchDisabled() {
+    await this.hideCalendar();
+  }
+  /** watch calendar show state */
+  async watchIsCalendarShow() {
+    await this.clearCalendarSelectingState();
+  }
+  /**
+   * Watch isCalendarShow state change to clear selecting state in calendar.
+   */
+  async showCalendar() {
+    if (this.isMobileDevice) {
+      await this.vegaDatePickerCalendarRenderer.getMobileModalRef().modal('show');
+    }
+    else {
+      this.show();
+    }
+  }
+  /**
+   * Hide calendar in both mobile and desktop mode.
+   */
+  async hideCalendar() {
+    if (this.isMobileDevice) {
+      await this.vegaDatePickerCalendarRenderer.getMobileModalRef().modal('hide');
+    }
+    else {
+      this.hide();
+    }
+  }
+  /**
+   * Update isCalendarShow state.
+   *
+   * @param {boolean} isShow - is calendar show
+   */
+  updateIsCalendarShowState(isShow) {
+    this.isCalendarShow = isShow;
+  }
+  /**
+   * Clear selecting state in calendar.
+   */
+  async clearCalendarSelectingState() {
+    if (!this.isCalendarShow) {
+      const calendar = this.vegaDatePickerCalendarRenderer.getCalendarRef();
+      await this.clearCalendarStateTaskQueue.enqueue({
+        /** Clear the calendar selecting state */
+        run: async () => await calendar.reset(),
+      }, false);
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "dropdownConfig", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarOpenStateController.prototype, "isCalendarShow", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "isMobileDevice", void 0);
+__decorate$1([
+  MapToComponentMethod('componentDidRender')
+], VegaDatePickerCalendarOpenStateController.prototype, "componentDidRender", null);
+__decorate$1([
+  MapToComponentMethod('doOpen')
+], VegaDatePickerCalendarOpenStateController.prototype, "doOpen", null);
+__decorate$1([
+  MapToComponentMethod('doClose')
+], VegaDatePickerCalendarOpenStateController.prototype, "doClose", null);
+__decorate$1([
+  MapToComponentMethod('watchDisabled')
+], VegaDatePickerCalendarOpenStateController.prototype, "watchDisabled", null);
+__decorate$1([
+  MapToComponentMethod('watchIsCalendarShow')
+], VegaDatePickerCalendarOpenStateController.prototype, "watchIsCalendarShow", null);
+
+const vegaDatePickerCss = ":host{display:inline-block;width:100%;text-align:left;line-height:normal}:host vega-field-label{margin-bottom:8px}:host .vega-input-container{position:relative;display:block;border-radius:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));display:flex;align-items:center}:host .vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .vega-input-container .date-picker-input{padding-left:16px;padding-right:16px;width:100%;box-sizing:border-box;display:flex;align-items:center}:host .vega-input-container.default .date-picker-input{padding-left:16px;padding-right:16px}:host .vega-input-container.small .date-picker-input{padding-left:12px;padding-right:12px}:host .vega-input-container.default .date-picker-input input{padding-top:12px;padding-bottom:12px}:host .vega-input-container.small .date-picker-input input{padding-top:8px;padding-bottom:8px}:host .vega-input-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-input-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-input-container.single-mode.error:focus-within,:host .vega-input-container.range-mode.error .date-picker-input: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));border-radius:8px}:host .vega-input-container.range-mode.error .date-picker-input:first-of-type:focus-within{margin:-1px 0 -1px -1px}:host .vega-input-container.range-mode.error .date-picker-input:last-of-type:focus-within{margin:-1px -1px -1px 0}:host .vega-input-container.single-mode:not(.error):focus-within,:host .vega-input-container.range-mode:not(.error) .date-picker-input: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));border-radius:8px}:host .vega-input-container.range-mode .date-picker-input:first-of-type:focus-within{margin:-1px 0 -1px -1px}:host .vega-input-container.range-mode .date-picker-input:last-of-type:focus-within{margin:-1px -1px -1px 0}:host .vega-input-container input{width:100%;box-sizing:content-box;border-width:0px;margin:0px;outline:2px solid transparent;outline-offset:2px;background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .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-left:8px;padding-right:8px;padding-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .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){:host .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){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}.vega-input-clear-icon{width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-input-clear-icon vega-icon{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}:host .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))}:host .vega-input-container.range-mode.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;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-input-prefix{display:flex;margin-right:8px}:host .vega-input-container.range-mode.mobile.small .vega-input-prefix{margin-right:8px}:host .vega-input-container.range-mode.mobile{flex-direction:column}:host .vega-input-container.range-mode.mobile .date-picker-input:last-of-type{padding-left:40px}:host .vega-input-container.range-mode.mobile.small .date-picker-input:last-of-type{padding-left:36px}:host(.disabled) .vega-input-container{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host(.disabled) .vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.disabled) .vega-input-container input{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}";
+
+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 VegaDatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaMonthYearChange = createEvent(this, "vegaMonthYearChange", 7);
+    this.monthYearChange = createEvent(this, "monthYearChange", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.calendarOpenStateController = new VegaDatePickerCalendarOpenStateController();
+    this.vegaDatePickerValueController = new VegaDatePickerValueController();
+    this.vegaDatePickerFormatController = new VegaDatePickerFormatController('single');
+    this.startInputFormatController = new VegaDatePickerFormatController('rangeStart');
+    this.endInputFormatController = new VegaDatePickerFormatController('rangeEnd');
+    this.vegaDatePickerKeyboardController = new VegaDatePickerKeyboardController();
+    this.vegaDatePickerRenderer = new VegaDatePickerRenderer();
+    this.vegaDatePickerSingleInputRenderer = new VegaDatePickerSingleInputRenderer();
+    this.vegaDatePickerRangeInputRenderer = new VegaDatePickerRangeInputRenderer();
+    this.vegaDatePickerCalendarRenderer = new VegaDatePickerCalendarRenderer();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired, mode) => isRequired ? new DateRequiredRule({ mode }) : null,
+          dependence: 'mode',
+        },
+        {
+          propertyName: 'mode',
+          ruleFactory: (mode) => (mode === 'range' ? new DateRangeRule() : null),
+        },
+        {
+          propertyName: 'minDate',
+          ruleFactory: (minDate, maxDate) => new MinAndMaxDateRule({ minDate: minDate, maxDate }),
+          dependence: 'maxDate',
+        },
+        {
+          propertyName: 'maxDate',
+          ruleFactory: (maxDate, minDate) => new MinAndMaxDateRule({ minDate, maxDate: maxDate }),
+          dependence: 'minDate',
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: (target) => (target.mode === 'range' ? ['', ''] : ''),
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaDatePickerRenderer.getDatePickerContainer(),
+      touchableAreaGetter: () => {
+        return [
+          this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
+          this.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
+          this.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
+        ].filter(Boolean);
+      },
+    });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
+    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClear, VegaMonthYearChange], () => this.vegaDatePickerCalendarRenderer.getCalendarRef());
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.isCalendarShow = false;
+    /**
+     * Specifies the selection mode of the date picker.
+     *
+     *  - Use `single` to allow selecting a single date.
+     *  - Use `range` to allow selecting a date range.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.mode = 'single';
+    /**
+     * Specifies the selected date or date range in the date picker.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.value = this.mode === 'range' ? ['', ''] : '';
+    /**
+     * Determines whether the date picker field is required.
+     *
+     * Specifies whether a date or range must be selected for
+     *    the date picker to pass form validation.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.required = false;
+    /**
+     * Specifies the validation status of the date picker component.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether automatic validation should be implemented
+     *    when a date or range is selected.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies the desired date format.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.format = 'MM/DD/YYYY';
+    /**
+     * Specifies the size of the date picker field.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.size = 'default';
+    /**
+     * Specifies custom validation rules for the date picker field.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.validationRules = [];
+    /**
+     * Specifies whether to display the clear button when the calendar is shown.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.clearButton = false;
+    /**
+     * Specifies whether the date picker field is set to read-only.
+     *
+     * If set to `true`, keyboards and touch devices will skip
+     *    interacting with this element.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.readOnly = false;
+    /**
+     * Specifies whether the user is allowed to change either the
+     *    start date or end date of an already selected date range
+     *    without completely resetting the selected range.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.allowRepick = false;
+    /**
+     * Specifies the configuration for the calendar dropdown
+     *    associated with the date picker.
+     *
+     * @vegaVersion 1.5.0
+     */
+    this.dropdownConfig = {};
+    /**
+     * Determines whether the clear icon should be displayed or hidden.
+     *
+     * @vegaVersion 2.33.0
+     */
+    this.showClearIcon = true;
+    /**
+     * Determines whether to show months and years dropdown in date picker
+     * If set to true, date picker calendar will have months and years dropdown
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.showYearMonthDropdowns = false;
+    /**
+     * Specifies whether the date picker field is disabled.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).
+     *
+     * The function is called for each date cell before rendering.
+     *
+     * Return `true` to disable the cell, or false to keep it selectable.
+     * Default behavior: always returns `false` (no cells are disabled).
+     *
+     * @param date - The `Date` object for the cell being evaluated.
+     * @returns `true` if the cell should be disabled; otherwise `false`.
+     * @vegaVersion 2.60.0
+     */
+    this.isDateDisabled = () => false;
+  }
+  watchIsCalendarShow() {
+    methodPlaceholder();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-mode-change}
+   */
+  /* istanbul ignore next */
+  /** Update datePicker settings property of mode is changed */
+  watchMode() {
+    methodPlaceholder();
+  }
+  watchValue(newValue, oldValue) {
+    methodPlaceholder(newValue, oldValue);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-change-mask-format}
+   * @see{module:vega-date-picker-range-mode-change-mask-format}
+   */
+  /* istanbul ignore next */
+  /**
+   * It is decorated with the `@MapToComponentMethod` decorator,
+   * which indicates that this method should be mapped to a component method called 'format'.
+   *
+   * @param {string} format - The value of the format.
+   */
+  watchFormat(format) {
+    methodPlaceholder(format);
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  watchMinDate(value) {
+    methodPlaceholder(value);
+  }
+  watchMaxDate(value) {
+    methodPlaceholder(value);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-range-mode-repick-start-date-or-end-date}
+   */
+  /* istanbul ignore next */
+  /** Update property of allowRepick when it is changed */
+  watchAllowRepick() {
+    methodPlaceholder();
+  }
+  watchShowYearMonthDropdowns() {
+    methodPlaceholder();
+  }
+  watchDisabled() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to close the calendar dropdown
+   *    associated with the date picker.
+   *
+   * @see{module:vega-date-picker-click-call-do-open-close}
+   * @vegaVersion 1.3.0
+   */
+  /* istanbul ignore next */
+  async doClose() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to open the calendar dropdown
+   *    associated with the date picker.
+   *
+   * @see{module:vega-date-picker-click-call-do-open-close}
+   * @vegaVersion 1.3.0
+   */
+  /* istanbul ignore next */
+  async doOpen() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(this.vegaDatePickerRenderer.render(), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "isCalendarShow": ["watchIsCalendarShow"],
+    "mode": ["watchMode"],
+    "value": ["watchValue"],
+    "format": ["watchFormat"],
+    "validationRules": ["watchValidationRules"],
+    "minDate": ["watchMinDate"],
+    "maxDate": ["watchMaxDate"],
+    "allowRepick": ["watchAllowRepick"],
+    "showYearMonthDropdowns": ["watchShowYearMonthDropdowns"],
+    "disabled": ["watchDisabled"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDatePicker.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "calendarOpenStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerValueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerFormatController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "startInputFormatController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "endInputFormatController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerKeyboardController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "inputEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  ComponentLoadRequired()
+], VegaDatePicker.prototype, "watchValue", null);
+VegaDatePicker.style = vegaDatePickerCss;
+
+export { VegaDatePicker as vega_date_picker };