@globalpayments/vega 2.69.1 → 2.73.0

package/dist/collection/components/vega-app-header-button/slimmers/renderers/vega-app-header-button-dropdown-renderer.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, VegaReset, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 /**
  * Renderer class for the Vega App Header Button Dropdown.
  * This class extends the VegaSlimmer and is responsible for rendering the dropdown component and managing its state and events.
@@ -23,6 +23,14 @@ export class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
     this.triggerDropdownClickEvent = (input) => {
       this.dropdownClickEventEmitter.emit(input.detail);
     };
+    /**
+     * emit dropdown reset event when component get dropdown selected items reset
+     *
+     * @param {NotifyObserverPayload<string>} input the reset detail
+     */
+    this.triggerResetEvent = (input) => {
+      this.resetEventEmitter.emit(input.detail);
+    };
     /**
      * Shows the dropdown component.
      */
@@ -78,6 +86,7 @@ export class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
           this.onDropdownHide();
         });
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, this.triggerDropdownClickEvent);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaReset, this.triggerResetEvent);
       } }),
       children,
       this.renderItemsSlot()));
@@ -116,6 +125,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaAppHeaderButtonDropdownRenderer.prototype, "dropdownClickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "resetEventEmitter", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaAppHeaderButtonDropdownRenderer.prototype, "connectedCallback", null);

package/dist/collection/components/vega-app-header-button/vega-app-header-button.js

@@ -15,7 +15,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaClick, VegaDropdownClick } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClick, VegaDropdownClick, VegaReset } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaMenuArrowIconRenderer } from './slimmers/renderers/vega-menu-arrow-icon-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaAppHeaderButtonDropdownRenderer } from './slimmers/renderers/vega-app-header-button-dropdown-renderer';
@@ -30,13 +30,14 @@ export class VegaAppHeaderButton {
      * @see{module:vega-app-header-button-resize-e2e}
      */
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick], () => this.dropdownRenderer.getDropdownRef(), {
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick, VegaReset], () => this.dropdownRenderer.getDropdownRef(), {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
     });
     this.clickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaClick);
     this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaDropdownClick);
+    this.resetEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaReset);
     this.vegaMenuArrowIconRenderer = new VegaMenuArrowIconRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.dropdownRenderer = new VegaAppHeaderButtonDropdownRenderer();
@@ -230,7 +231,7 @@ export class VegaAppHeaderButton {
       "mutable": false,
       "complexType": {
         "original": "VegaAppHeaderButtonDropdownConfig",
-        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; source?: VegaDropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; translocation?: ResponsiveType<TranslocationType>; virtualizationThreshold?: number; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; source?: VegaDropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; translocation?: ResponsiveType<TranslocationType>; virtualizationThreshold?: number; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; selectType?: \"none\" | \"single\" | \"multiple\"; resettable?: boolean; }",
         "references": {
           "VegaAppHeaderButtonDropdownConfig": {
             "location": "import",
@@ -512,6 +513,45 @@ export class VegaAppHeaderButton {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaReset",
+      "name": "vegaReset",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.73.0"
+          }],
+        "text": "An event emitter notifying the reset event in the dropdown."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "reset",
+      "name": "reset",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.73.0"
+          }],
+        "text": "An event emitter notifying the reset event in the dropdown."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -534,6 +574,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "dropdownClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppHeaderButton.prototype, "resetEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "vegaMenuArrowIconRenderer", void 0);

package/dist/collection/components/vega-button/vega-button.css

@@ -210,4 +210,8 @@
 :host .vega-button-variant-primary vega-loading-indicator::part(circle-loader-track) {
   stroke: rgba(var(--v-text-white, 252, 252, 252, 1));
   opacity: 0.2;
+}
+
+:host(.button-group-item-button-secondary) .vega-button-variant-secondary.vega-button-disabled {
+  border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
 }

package/dist/collection/components/vega-button-group/vega-button-group-item/slimmers/controllers/vega-button-group-item-sub-state-controller.js

@@ -27,6 +27,10 @@ export class VegaButtonGroupItemSubStateController extends SubStateObserverSlimm
           subStateName: 'iconAlign',
           parentStateName: 'iconAlign',
         },
+        {
+          subStateName: 'parentDisabled',
+          parentStateName: 'disabled',
+        },
       ],
     });
   }
@@ -40,3 +44,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaButtonGroupItemSubStateController.prototype, "iconAlign", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaButtonGroupItemSubStateController.prototype, "parentDisabled", void 0);

package/dist/collection/components/vega-button-group/vega-button-group-item/slimmers/renderers/vega-button-group-item-renderer.js

@@ -28,6 +28,17 @@ export class VegaButtonGroupItemRenderer extends VegaSlimmer {
     this.moreDropdownItemClickHandle = (payload) => {
       this.notifyParentGroup(payload.detail);
     };
+    /**
+     * Determines whether the button group item is disabled.
+     *
+     * The button group item is considered disabled if either:
+     * - the item itself is disabled, or
+     * - the parent is disabled (which forces all children to be disabled,
+     *   regardless of their individual disabled state).
+     */
+    this.isDisabled = () => {
+      return this.disabled || this.parentDisabled;
+    };
   }
   /**
    * This function conditionally renders a Vega dropdown component with specified props and a click event handler if there is dropdown source data available, otherwise it renders a button item.
@@ -38,8 +49,13 @@ export class VegaButtonGroupItemRenderer extends VegaSlimmer {
    * `renderButtonItem()` is returned.
    */
   render() {
+    var _a, _b, _c;
     if (this.dropdownSource && this.dropdownSource.length) {
-      return (h("vega-dropdown", Object.assign({ source: this.dropdownSource, trigger: "click" }, this.dropdownProps, { ref: (node) => {
+      const dropdownProps = Object.assign(Object.assign({}, this.dropdownProps), { trigger: this.isDisabled() ? 'none' : (_b = (_a = this.dropdownProps) === null || _a === void 0 ? void 0 : _a.trigger) !== null && _b !== void 0 ? _b : 'click' });
+      if (this.isDisabled() && ((_c = this.dropdownProps) === null || _c === void 0 ? void 0 : _c.trigger)) {
+        this.dropdownProps.trigger = 'none';
+      }
+      return (h("vega-dropdown", Object.assign({ source: this.dropdownSource }, dropdownProps, { ref: (node) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, this.moreDropdownItemClickHandle);
         } }), this.renderButtonItemWithTooltip()));
     }
@@ -70,7 +86,7 @@ export class VegaButtonGroupItemRenderer extends VegaSlimmer {
   renderButtonItem() {
     const buttonProps = this.getButtonProps();
     if (this.variant === 'tertiary') {
-      return h("vega-button-link", Object.assign({}, buttonProps));
+      return (h("vega-button-link", Object.assign({ class: `button-group-item-button-${this.variant}` }, buttonProps)));
     }
     else {
       return (h("vega-button", Object.assign({ class: `button-group-item-button-${this.variant}`, variant: this.variant }, buttonProps)));
@@ -104,6 +120,7 @@ export class VegaButtonGroupItemRenderer extends VegaSlimmer {
       icon: this.icon,
       label: this.iconOnly ? '' : this.getDefaultLabel(),
       iconAlign: this.iconAlign,
+      disabled: this.isDisabled(),
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, this.buttonItemClickHandle);
@@ -136,6 +153,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaButtonGroupItemRenderer.prototype, "iconAlign", void 0);
+__decorate([
+  MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "parentDisabled", void 0);
 __decorate([
   MapToComponentField()
 ], VegaButtonGroupItemRenderer.prototype, "iconOnly", void 0);

package/dist/collection/components/vega-button-group/vega-button-group-item/vega-button-group-item.js

@@ -22,12 +22,19 @@ export class VegaButtonGroupItem {
     this.variant = 'primary';
     this.size = 'default';
     this.iconAlign = 'left';
+    this.parentDisabled = false;
     /**
      * Specifies whether to display the icon only.
      *
      * @vegaVersion 2.5.0
      */
     this.iconOnly = false;
+    /**
+     * Specifies whether the button group item is disabled.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.disabled = false;
   }
   render() {
     return sanitizeVegaComponent(h(Host, { class: "vega-button-group-item" }, this.buttonGroupItemRenderer.render()), this.host);
@@ -102,6 +109,27 @@ export class VegaButtonGroupItem {
       "reflect": false,
       "defaultValue": "false"
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies whether the button group item is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "itemKey": {
       "type": "string",
       "mutable": false,
@@ -127,7 +155,7 @@ export class VegaButtonGroupItem {
       "mutable": false,
       "complexType": {
         "original": "DropdownPropsForButtonGroup",
-        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger: \"hover\" | \"click\"; }",
+        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger: \"hover\" | \"click\" | \"none\"; }",
         "references": {
           "DropdownPropsForButtonGroup": {
             "location": "import",
@@ -176,7 +204,8 @@ export class VegaButtonGroupItem {
   static get states() { return {
     "variant": {},
     "size": {},
-    "iconAlign": {}
+    "iconAlign": {},
+    "parentDisabled": {}
   }; }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/vega-button-group/vega-button-group.js

@@ -26,6 +26,7 @@ export class VegaButtonGroup {
     this.variantNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'variant', 'watchVariant');
     this.sizeNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'size', 'watchSize');
     this.iconAlignNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'iconAlign', 'watchIconAlign');
+    this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'disabled', 'watchDisabled');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonGroupRuntimeMetricsPayloadDefinition);
     /**
      * Specifies the visual style and prominence of the button group.
@@ -47,6 +48,12 @@ export class VegaButtonGroup {
      * @vegaVersion 2.5.0
      */
     this.iconAlign = 'left';
+    /**
+     * Specifies whether the button elements are disabled.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.disabled = false;
   }
   watchVariant() {
     methodPlaceholder();
@@ -57,6 +64,9 @@ export class VegaButtonGroup {
   watchIconAlign() {
     methodPlaceholder();
   }
+  watchDisabled() {
+    methodPlaceholder();
+  }
   render() {
     const containerClasses = `vega-button-group-container vega-button-group-${this.variant}`;
     return sanitizeVegaComponent(h(Host, null,
@@ -149,6 +159,27 @@ export class VegaButtonGroup {
       "attribute": "icon-align",
       "reflect": false,
       "defaultValue": "'left'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies whether the button elements are disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -201,6 +232,9 @@ export class VegaButtonGroup {
     }, {
       "propName": "iconAlign",
       "methodName": "watchIconAlign"
+    }, {
+      "propName": "disabled",
+      "methodName": "watchDisabled"
     }]; }
 }
 __decorate([
@@ -224,6 +258,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonGroup.prototype, "iconAlignNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "disabledNotifySlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-button-link/vega-button-link.css

@@ -316,4 +316,8 @@ a.vega-button-link-size-large .vega-button-link-label {
 
 :host(.vega-button-link-disabled) a:focus > .vega-button-link-content {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+
+:host(.button-group-item-button-tertiary.vega-button-link-disabled) a {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
 }

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-calendar-open-state-controller.js

@@ -0,0 +1,149 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
+import { FeatureFlag } from '../../../../helpers/public-api';
+import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
+/** The date picker element appender controller slimmer */
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "dropdownConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarOpenStateController.prototype, "isCalendarShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "isMobileDevice", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaDatePickerCalendarOpenStateController.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('doOpen')
+], VegaDatePickerCalendarOpenStateController.prototype, "doOpen", null);
+__decorate([
+  MapToComponentMethod('doClose')
+], VegaDatePickerCalendarOpenStateController.prototype, "doClose", null);
+__decorate([
+  MapToComponentMethod('watchDisabled')
+], VegaDatePickerCalendarOpenStateController.prototype, "watchDisabled", null);
+__decorate([
+  MapToComponentMethod('watchIsCalendarShow')
+], VegaDatePickerCalendarOpenStateController.prototype, "watchIsCalendarShow", null);

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-format-controller.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { StringMaskStrategy } from '../../../../helpers/formatter/string-formatter/string-mask-strategy';
 import { StringInputFormatterSlimmer } from '../../../../helpers/slimmers/string-input-formatter-slimmer';
+import { CalendarDate } from '../../../../helpers/calendar';
 /** The date picker format controller slimmer */
 export class VegaDatePickerFormatController extends StringInputFormatterSlimmer {
   /**
@@ -25,7 +26,8 @@ export class VegaDatePickerFormatController extends StringInputFormatterSlimmer
      * @returns {string} The formatted date is being returned.
      */
     this.formatDate = (date) => {
-      return this.vegaDatePickerCalendarRenderer.getDatePicker().DateTime(date).format(this.format);
+      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.

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

@@ -23,7 +23,7 @@ export class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
           target.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
-          target.vegaDatePickerCalendarRenderer.getCalendarContainerRef(),
+          target.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
         ],
         eventName: 'keydown',
         // eslint-disable-next-line jsdoc/require-jsdoc

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

@@ -6,30 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-slimmer/core';
 import { isArrayEqual } from '../../../../utils/array';
-import { isDateStr } from '../../../../utils/date';
 import { LogUtility } from '../../../../utils/log';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { CalendarDate } from '../../../../helpers/calendar';
 /** The date picker value controller slimmer */
 export class VegaDatePickerValueController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    // The litepicker logic will clear the input element value if one of the startDate and dateDate is empty
-    // Hence we need sync up the vega-date-picker value with litepicker calendar
-    // Link: https://github.com/wakirin/Litepicker/blob/master/src/litepicker.ts#L119
-    /** Sync up the value of input with the value of the calendar */
-    this.syncUpValueWithCalendar = () => {
-      var _a, _b;
-      const startDate = ((_a = this.vegaDatePickerCalendarRenderer.getDatePicker().getStartDate()) === null || _a === void 0 ? void 0 : _a.format(this.format)) || '';
-      const endDate = ((_b = this.vegaDatePickerCalendarRenderer.getDatePicker().getEndDate()) === null || _b === void 0 ? void 0 : _b.format(this.format)) || '';
-      if (this.mode === 'range' && !isArrayEqual(this.getValue(), [startDate, endDate])) {
-        this.setValue([startDate, endDate]);
-      }
-      if (this.mode === 'single' && this.getValue() !== startDate) {
-        this.setValue(startDate);
-      }
-    };
-  }
   /*
    * call this method to open the date picker dropdown
    * The below method is e2e-test covered in
@@ -65,10 +47,7 @@ export class VegaDatePickerValueController extends VegaSlimmer {
       isArrayEqual(newValue, oldValue)) {
       return; // avoid the value changed again by `onDatePickerSelected` in range mode
     }
-    if (this.valueGuard(newValue)) {
-      this.vegaDatePickerCalendarController.shouldUpdateCalendar(newValue);
-    }
-    else {
+    if (!this.valueGuard(newValue)) {
       this.setDefaultValueByMode();
     }
     this.changeEventEmitter.emit(this.value);
@@ -130,13 +109,15 @@ export class VegaDatePickerValueController extends VegaSlimmer {
     let isValid;
     switch (this.mode) {
       case 'single':
-        isValid = (value && typeof value === 'string' && isDateStr(value)) || value === '';
+        isValid =
+          (value && typeof value === 'string' && !!CalendarDate.fromString(value, this.format)) ||
+            value === '';
         break;
       case 'range':
         isValid =
           Array.isArray(value) &&
             value.length === 2 &&
-            value.every((item) => isDateStr(item) || item === '');
+            value.every((item) => !!CalendarDate.fromString(item, this.format) || item === '');
         break;
     }
     if (!isValid) {
@@ -162,10 +143,13 @@ __decorate([
 ], VegaDatePickerValueController.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarController", void 0);
+], VegaDatePickerValueController.prototype, "isCalendarShow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "calendarOpenStateController", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerValueController.prototype, "componentWillLoad", null);