@globalpayments/vega 2.70.0 → 2.72.0

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -4,503 +4,165 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-slimmer/core';
-import { Litepicker } from 'litepicker/dist/nocss/litepicker.umd.js';
-import { Icons } from '../../assets/icons';
-import { LogUtility } from '../../../../utils/log';
-import ChangeManager from '../../../../helpers/change-manager/change-manager';
-import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalMonthYearChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import { FeatureFlag } from '../../../../helpers/public-api';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClear, VegaClose, VegaOpen, VegaMonthYearChange, VegaSelectionChange, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { tryGetDocument } from '../../../../utils/try-get-document';
 export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.startMonthYearHeaderRef = {
-      month: null,
-      year: null,
-    };
-    this.endMonthYearHeaderRef = {
-      month: null,
-      year: null,
-    };
-    this.alterLitePickerHeader = (ui) => {
-      if (this.showYearMonthDropdowns) {
-        this.monthYearDropdownRenderer.renderMonthYearDropdowns(this.datePicker);
-      }
-      else {
-        this.renderMonthName(ui);
-        this.setYearMonthHeaderRef(ui);
-      }
-      this.renderWeekdays(ui);
-      this.renderPrevAndNextMonthButtons(ui);
-    };
-    this.alterLitePickerFooter = (ui) => {
-      this.clearButton && this.renderClearButton(ui);
-    };
-    this.alterLitePickerHeight = (ui) => {
-      if (this.dropdownConfig.staticHeight === false) {
-        ui.classList.remove('static-height');
-      }
-      else {
-        ui.classList.add('static-height');
-      }
-    };
-    /**
-     * Update the weekday to a single letter to adapt the vega UI design. e.g. Mon to M | Tue to T | Wed to W
-     * The below method is e2e-test covered in
-     * @see{module:vega-date-picker-render-ui-with-single}
-     */
-    /* istanbul ignore next */
-    this.renderWeekdays = (ui) => {
-      ui.querySelectorAll('.month-item-weekdays-row').forEach((row) => {
-        Array.from(row.children).forEach((item) => {
-          item.innerText = item.innerText.replace(/^(Mon|Tue|Wed|Thu|Fri|Sat|Sun)$/, (match) => this.translationSlimmer.t(`${match}-short`));
-        });
-      });
-    };
-    /**
-     * Update the previous/next month buttons icon to adapt the vega UI design
-     * The below method is e2e-test covered in
-     * @see{module:vega-date-picker-render-ui-with-single}
-     */
-    /* istanbul ignore next */
-    this.renderPrevAndNextMonthButtons = (ui) => {
-      ui.querySelectorAll('.button-previous-month').forEach((item) => {
-        /**
-         * Calendar will flash when using vega-icon here. Hence use svg here for now
-         * TODO: Use vega-icon instead when deprecated litepicker in https://gethired.atlassian.net/browse/VD-2534
-         */
-        item.innerHTML = Icons['chevron-left'].icon;
-        item.addEventListener('click', () => {
-          this.emitMonthYearChangeEvent();
-        });
-      });
-      ui.querySelectorAll('.button-next-month').forEach((item) => {
-        item.innerHTML = Icons['chevron-right'].icon;
-        item.addEventListener('click', () => {
-          this.emitMonthYearChangeEvent();
-        });
-      });
-    };
-    this.renderClearButton = (ui) => {
-      // eslint-disable-next-line no-restricted-globals
-      const footerContainer = document.createElement('div');
-      footerContainer.className = 'footer-container';
-      // eslint-disable-next-line no-restricted-globals
-      const clearButton = document.createElement('vega-button-link');
-      clearButton.label = this.translationSlimmer.t('Clear');
-      clearButton.addEventListener('click', this.vegaDatePickerCalendarController.handleClear);
-      footerContainer.append(clearButton);
-      const mainContainer = ui.querySelector('.container__main');
-      if (mainContainer) {
-        mainContainer.append(footerContainer);
-      }
-    };
-    this.getSystemTimeZone = () => {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone;
-    };
+  componentDidLoad() {
+    this.appendCalendarToBodyIfMobile();
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-in-popover}
-   */
-  /* istanbul ignore next */
-  /**
-   * The connectedCallback function checks if the datePicker is null and initializes it if it is.
-   */
-  connectedCallback() {
-    if (this.datePicker === null) {
-      this.initDatePicker();
-    }
-    // eslint-disable-next-line no-restricted-globals
-    this.calendarContainerRef = document.createElement('vega-date-picker-calendar');
-    // eslint-disable-next-line no-restricted-globals
-    document.body.append(this.calendarContainerRef);
+  getCalendarContentBoxRef() {
+    return this.calendarContentBoxRef;
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-disconnected-callback}
-   */
-  /* istanbul ignore next */
-  /**
-   * The `disconnectedCallback` function destroys the `datePicker` instance and sets it to null.
-   */
-  disconnectedCallback() {
-    var _a;
-    (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.datePicker = null;
-    this.calendarContainerRef.remove();
+  getCalendarRef() {
+    return this.calendarRef;
   }
-  /*
-   * 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}
-   */
-  /** Import litepicker mobilefriendly module when the device is mobile */
-  async componentWillLoad() {
-    /* istanbul ignore next */ // Spec test can't load the plugin, use e2e test for below
-    if (this.vegaDatePickerMobileController.getIsMobileDevice()) {
-      await import('litepicker/dist/plugins/mobilefriendly');
-    }
-  }
-  /** Init date picker when component did load */
-  componentDidLoad() {
-    this.initDatePicker();
+  getMobileModalRef() {
+    return this.mobileModalRef;
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-re-render-in-single-mode}
-   * @see{module:vega-date-picker-re-render-in-range-mode }
-   */
-  /* istanbul ignore next */
-  /** Refresh date picker when it is updated */
-  componentDidRender() {
-    if (this.requireRefreshLitePicker ||
-      (this.vegaDatePickerSingleInputRenderer.getOldSingleDateInputRef() &&
-        this.vegaDatePickerSingleInputRenderer.getOldSingleDateInputRef() !==
-          this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef()) ||
-      (this.vegaDatePickerRangeInputRenderer.getOldStartDateInputRef() &&
-        this.vegaDatePickerRangeInputRenderer.getOldStartDateInputRef() !==
-          this.vegaDatePickerRangeInputRenderer.getStartDateInputRef()) ||
-      (this.vegaDatePickerRangeInputRenderer.getOldEndDateInputRef() &&
-        this.vegaDatePickerRangeInputRenderer.getOldEndDateInputRef() !==
-          this.vegaDatePickerRangeInputRenderer.getEndDateInputRef())) {
-      this.refreshLitePicker();
+  async triggerRepick(type) {
+    if (this.allowRepick && this.mode === 'range') {
+      await this.calendarRef.triggerRepick(type);
     }
   }
-  watchIsDateDisabled() {
-    const dateItems = 
-    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-    this.calendarContainerRef.shadowRoot.querySelectorAll('.day-item');
-    dateItems.forEach((item) => {
-      if (this.isDateDisabled(new Date(Number(item.dataset.time)))) {
-        this.setDisabledDayStyles(item);
-      }
-      else {
-        this.clearDisabledDayStyles(item);
-      }
+  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);
     });
-  }
-  /**
-   * The callback to handle [doOpen]{@link VegaDatePicker.doOpen}
-   */
-  doOpen() {
-    this.datePicker.show();
-  }
-  /**
-   * The callback to handle [doClose]{@link VegaDatePicker.doClose}
-   */
-  doClose() {
-    this.datePicker.hide();
-  }
-  /*
-   * 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() {
-    this.datePicker.setOptions({
-      allowRepick: this.allowRepick,
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaClear, async () => {
+      await this.calendarOpenStateController.hideCalendar();
     });
-  }
-  /**
-   * Specifies whether the date picker field is disabled.
-   */
-  watchDisabled() {
-    this.datePicker.hide();
-  }
-  /*
-   * 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() {
-    this.datePicker.setOptions({
-      format: this.format,
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaMonthYearChange, async (payload) => {
+      this.monthYearChangeEventEmitter.emit(payload.detail);
     });
   }
-  /*
-   * 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.requireRefreshLitePicker = true;
-  }
-  /**
-   * Update datePicker settings property if showYearMonthDropdowns is changed
-   */
-  watchShowYearMonthDropdowns() {
-    this.requireRefreshLitePicker = true;
-  }
-  getStartMonthYearHeaderRef() {
-    return this.startMonthYearHeaderRef;
-  }
-  getEndMonthYearHeaderRef() {
-    return this.endMonthYearHeaderRef;
-  }
-  /**
-   * get the reference of datePicker
-   *
-   * @returns {Litepicker} the reference of datePicker.
-   */
-  getDatePicker() {
-    return this.datePicker;
-  }
-  getCalendarContainerRef() {
-    return this.calendarContainerRef;
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-re-render-in-single-mode}
-   * @see{module:vega-date-picker-re-render-in-range-mode}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function refreshLitePicker destroys and initializes a date picker if it exists.
-   */
-  refreshLitePicker() {
-    if (this.datePicker) {
-      this.datePicker.destroy();
-      this.initDatePicker();
-      this.requireRefreshLitePicker = false;
-    }
-  }
-  /**
-   * Render date picker calendar month name
-   *
-   * @param {HTMLElement} ui - Calendar dom ref
-   */
-  renderMonthName(ui) {
-    ui.querySelectorAll('.month-item-name').forEach((item) => {
-      const currentMonthName = item.innerText;
-      item.innerText = this.translationSlimmer.t(currentMonthName);
+  addModalObserver(modalRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, VegaOpen, () => {
+      this.calendarOpenStateController.updateIsCalendarShowState(true);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, VegaClose, () => {
+      this.calendarOpenStateController.updateIsCalendarShowState(false);
     });
   }
-  setYearMonthHeaderRef(ui) {
-    this.startMonthYearHeaderRef.month = ui.querySelectorAll('.month-item-name')[0];
-    this.endMonthYearHeaderRef.month = ui.querySelectorAll('.month-item-name')[1];
-    this.startMonthYearHeaderRef.year = ui.querySelectorAll('.month-item-year')[0];
-    this.endMonthYearHeaderRef.year = ui.querySelectorAll('.month-item-year')[1];
-  }
-  emitMonthYearChangeEvent() {
-    const monthYearSummary = this.showYearMonthDropdowns
-      ? this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownEnabled()
-      : this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownDisabled();
-    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), monthYearSummary);
-  }
-  resetTodayByTimezone() {
-    if (this.timezone && this.timezone !== this.getSystemTimeZone()) {
-      try {
-        const formattedDate = new Intl.DateTimeFormat([], {
-          timeZone: this.timezone,
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-        }).format(new Date());
-        const dateByTimezone = new Date(formattedDate.split('/').join('-')).getTime();
-        const dayItems = 
-        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.calendarContainerRef.shadowRoot.querySelectorAll('.day-item');
-        for (let i = 0; i < dayItems.length; i++) {
-          if (dayItems[i].classList.contains('is-today') &&
-            Number(dayItems[i].dataset.time) !== dateByTimezone) {
-            dayItems[i].classList.remove('is-today');
-          }
-          if (!dayItems[i].classList.contains('is-today') &&
-            Number(dayItems[i].dataset.time) === dateByTimezone) {
-            dayItems[i].classList.add('is-today');
-          }
-        }
-      }
-      catch (_a) {
-        LogUtility.warn('Invalid timezone: ', this.timezone);
-      }
+  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();
     }
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-render-ui-with-single}
-   * @see{module:vega-date-picker-render-ui-with-range}
-   */
-  /**
-   * The function initializes a Litepicker date picker, customizes its appearance and behavior, and
-   * attaches event listeners.
-   */
-  initDatePicker() {
-    this.datePicker = new Litepicker(this.vegaDatePickerCalendarController.getDefaultLitePickerConfig())
-      .on('render', (ui) => {
-      this.alterLitePickerHeader(ui);
-      this.alterLitePickerFooter(ui);
-      this.alterLitePickerHeight(ui);
-      this.litepickerRef = ui;
-      // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-      this.getCalendarContainerRef().shadowRoot.append(this.litepickerRef);
-      /* istanbul ignore next */
-      if (this.vegaDatePickerMobileController.getIsMobileDevice()) {
-        this.vegaDatePickerMobileController.preventElementTouchMoveInMobile();
-      }
-      this.resetTodayByTimezone();
-    })
-      .on('selected', this.vegaDatePickerCalendarController.onDatePickerSelected)
-      .on('before:show', () => {
-      this.vegaDatePickerCalendarController.goToDate();
-    })
-      .on('show', () => {
-      this.vegaDatePickerElementAppenderController.show();
-    })
-      .on('render:day', (node, date) => {
-      const isDisabled = this.isDateDisabled(date.toJSDate());
-      if (isDisabled) {
-        this.setDisabledDayStyles(node);
-      }
-    })
-      .on('mobilefriendly.show', 
-    /* istanbul ignore next */ () => {
-      this.vegaDatePickerZIndexController.setZIndex();
-      this.getCalendarContainerRef().style.position = 'fixed';
-      this.getCalendarContainerRef().style.top = '50%';
-      this.getCalendarContainerRef().style.left = '50%';
-      this.getCalendarContainerRef().style.transform = 'translate(-50%, -50%)';
-      this.getCalendarContainerRef().classList.remove('vega-force-hidden');
-    })
-      .on('hide', () => {
-      this.vegaDatePickerValueController.syncUpValueWithCalendar();
-      /* istanbul ignore else */
-      if (!this.vegaDatePickerMobileController.getIsMobileDevice()) {
-        this.vegaDatePickerElementAppenderController.hide();
-      }
-      else {
-        this.getCalendarContainerRef().classList.add('vega-force-hidden');
-        this.vegaDatePickerZIndexController.removeZIndex();
-      }
-    });
-  }
-  /**
-   * Applies styles to disable a specific day in the calendar.
-   *
-   * @param {HTMLElement} dayRef - The reference to the day element to be disabled.
-   */
-  setDisabledDayStyles(dayRef) {
-    dayRef.classList.add('is-locked');
-    dayRef.classList.add('is-disabled');
-    dayRef.tabIndex = -1;
+  appendCalendarToBodyIfMobile() {
+    const document = tryGetDocument();
+    if (this.isMobileDevice && document) {
+      document.body.append(this.mobileModalRef);
+    }
   }
-  /**
-   * Clears the styles applied to a day element that mark it as disabled.
-   *
-   * @param {HTMLElement} dayRef - The reference to the day element to be cleared of disabled styles.
-   */
-  clearDisabledDayStyles(dayRef) {
-    dayRef.classList.remove('is-locked');
-    dayRef.classList.remove('is-disabled');
-    dayRef.tabIndex = 0;
+  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`;
   }
 }
-__decorate([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "dropdownConfig", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "allowRepick", void 0);
+VegaDatePickerCalendarRenderer.calendarModalSize = 344;
+VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForSingle = {
+  width: 280,
+  height: 316,
+};
+VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForRange = {
+  width: 608,
+  height: 324,
+};
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "format", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "showYearMonthDropdowns", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "value", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerCalendarController", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerMobileController", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "minDate", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerElementAppenderController", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "maxDate", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerZIndexController", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerValueController", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "dropdownConfig", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "showYearMonthDropdowns", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "timezone", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "monthYearDropdownRenderer", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "timezone", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "isCalendarShow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "isDateDisabled", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "allowRepick", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "monthYearChangeEventEmitter", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
-__decorate([
-  MapToComponentMethod('connectedCallback')
-], VegaDatePickerCalendarRenderer.prototype, "connectedCallback", null);
-__decorate([
-  MapToComponentMethod('disconnectedCallback')
-], VegaDatePickerCalendarRenderer.prototype, "disconnectedCallback", null);
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerValueController", void 0);
 __decorate([
-  MapToComponentMethod('componentWillLoad')
-], VegaDatePickerCalendarRenderer.prototype, "componentWillLoad", null);
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "calendarOpenStateController", void 0);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaDatePickerCalendarRenderer.prototype, "componentDidLoad", null);
-__decorate([
-  MapToComponentMethod('componentDidRender')
-], VegaDatePickerCalendarRenderer.prototype, "componentDidRender", null);
-__decorate([
-  MapToComponentMethod('watchIsDateDisabled')
-], VegaDatePickerCalendarRenderer.prototype, "watchIsDateDisabled", null);
-__decorate([
-  MapToComponentMethod('doOpen')
-], VegaDatePickerCalendarRenderer.prototype, "doOpen", null);
-__decorate([
-  MapToComponentMethod('doClose')
-], VegaDatePickerCalendarRenderer.prototype, "doClose", null);
-__decorate([
-  MapToComponentMethod('watchAllowRepick')
-], VegaDatePickerCalendarRenderer.prototype, "watchAllowRepick", null);
-__decorate([
-  MapToComponentMethod('watchDisabled')
-], VegaDatePickerCalendarRenderer.prototype, "watchDisabled", null);
-__decorate([
-  MapToComponentMethod('watchFormat')
-], VegaDatePickerCalendarRenderer.prototype, "watchFormat", null);
-__decorate([
-  MapToComponentMethod('watchMode')
-], VegaDatePickerCalendarRenderer.prototype, "watchMode", null);
-__decorate([
-  MapToComponentMethod('watchShowYearMonthDropdowns')
-], VegaDatePickerCalendarRenderer.prototype, "watchShowYearMonthDropdowns", null);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-input-renderer-base.abstract.js

@@ -14,13 +14,14 @@ import { isArrayEqual } from '../../../../utils/array';
 export class VegaDatePickerInputRendererBase extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.onClickClearIcon = () => {
+    this.onClickClearIcon = async () => {
       if (this.mode === 'range') {
         this.vegaDatePickerValueController.setValue(['', '']);
       }
       else {
         this.vegaDatePickerValueController.setValue('');
       }
+      await this.calendarOpenStateController.hideCalendar();
     };
     this.isClearIconVisible = () => {
       if (this.mode === 'range') {
@@ -53,3 +54,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "vegaDatePickerValueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "calendarOpenStateController", void 0);