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

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

@@ -1,1646 +0,0 @@
-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 };