@globalpayments/vega 2.69.1 → 2.73.0

package/dist/types/components.d.ts

@@ -25,7 +25,7 @@ import { FormFieldValidationRule } from "./helpers/validator/rules/form-field-va
 import { VegaChipIconAlign, VegaChipSize, VegaChipType, VegaChipVariant } from "./components/vega-chip/types";
 import { VegaCodeBlockValue } from "./components/vega-code-block/types";
 import { VegaComboBoxSize, VegaDropdownPropsForComboBox } from "./components/vega-combo-box/types";
-import { DatePickerModeType, DatePickerMonthYearTypes, DatePickerValueType, DropdownConfigForDatePicker } from "./components/vega-date-picker/types";
+import { DatePickerCalendarRepickType, DatePickerCalendarSizeType, DatePickerModeType, DatePickerMonthYearTypes, DatePickerValueType, DropdownConfigForDatePicker, VegaDropdownPropsForDatePickerCalendar } from "./components/vega-date-picker/types";
 import { VegaDialogAction, VegaDialogActionButtonProps } from "./components/vega-dialog/types";
 import { VegaDividerDirectionType, VegaDividerVariantType } from "./components/vega-divider/interface";
 import { VegaDropdownItemClickEvent } from "./components/vega-dropdown/vega-dropdown-item/types";
@@ -48,6 +48,7 @@ import { VegaModalBackdrop, VegaModalBackdropColor } from "./components/vega-mod
 import { VegaPageNotificationActionButtonConfig, VegaPageNotificationTypes } from "./components/vega-page-notification/types";
 import { DropdownPropsForPagination, VegaPaginationItemType, VegaPaginationLayoutType } from "./components/vega-pagination/types";
 import { PieChartOptions } from "./helpers/chart/pie-chart";
+import { VegaProgressTrackerDirectionType } from "./components/vega-progress-tracker/type";
 import { VegaRTEContent } from "./components/vega-rich-text-editor/dto/content-state";
 import { VegaRTEExtension } from "./components/vega-rich-text-editor/extensions/extension.abstract";
 import { VegaRichTextEditorImage, VegaRTESourceEditConfig, VegaRTEToolbarItem } from "./components/vega-rich-text-editor/interface";
@@ -556,6 +557,11 @@ export namespace Components {
         "variant": VegaButtonCircleVariant;
     }
     interface VegaButtonGroup {
+        /**
+          * Specifies whether the button elements are disabled.
+          * @vegaVersion 2.72.0
+         */
+        "disabled": boolean;
         /**
           * Specifies the placement of the icon in relation to the button's label.
           * @vegaVersion 2.5.0
@@ -573,6 +579,11 @@ export namespace Components {
         "variant": VegaButtonGroupVariant;
     }
     interface VegaButtonGroupItem {
+        /**
+          * Specifies whether the button group item is disabled.
+          * @vegaVersion 2.72.0
+         */
+        "disabled": boolean;
         /**
           * Specifies the properties for the dropdown menu that appears when the button group contains more than one button item.
           * @vegaVersion 2.5.0
@@ -1250,6 +1261,78 @@ export namespace Components {
         "value": DatePickerValueType<DatePickerModeType>;
     }
     interface VegaDatePickerCalendar {
+        /**
+          * Specifies whether to display the clear button when the calendar is shown.
+          * @vegaVersion 2.72.0
+         */
+        "clearButton": boolean;
+        /**
+          * Specifies the desired date format.
+          * @vegaVersion 2.72.0
+         */
+        "format": string;
+        /**
+          * 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.72.0
+         */
+        "isDateDisabled": DisabledDate;
+        /**
+          * Specifies the maximum selectable date in the date picker calendar.
+          * @vegaVersion 2.72.0
+         */
+        "maxDate": string;
+        /**
+          * Specifies the minimum selectable date in the date picker calendar.
+          * @vegaVersion 2.72.0
+         */
+        "minDate": string;
+        /**
+          * Specifies the selection mode of the date picker calendar.   - Use `single` to allow selecting a single date.  - Use `range` to allow selecting a date range.
+          * @vegaVersion 2.72.0
+         */
+        "mode": DatePickerModeType;
+        /**
+          * Invoke this method to reset calendar to its initial state, 	it include reset to current value and reset the current period.
+          * @vegaVersion 2.72.0
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Specifies the selected date or date range in the date picker calendar.
+          * @vegaVersion 2.72.0
+         */
+        "selection": DatePickerValueType<DatePickerModeType>;
+        /**
+          * Determines whether to show months and years dropdown in date picker calendar If set to true, date picker calendar will have months and years dropdown
+          * @vegaVersion 2.72.0
+         */
+        "showYearMonthDropdowns": boolean;
+        /**
+          * Renders the calendar picker in different sizes. Defaults to regular size
+          * @vegaVersion 2.72.0
+         */
+        "size": DatePickerCalendarSizeType;
+        /**
+          * Specifies the calendar is static height.
+          * @vegaVersion 2.72.0
+         */
+        "staticHeight": boolean;
+        /**
+          * Specifies the IANA time zone or Etc/GMT±n format.     It accepts values such as "America/New_York" or "Etc/GMT+12".     For a complete list of IANA time zones, refer to Time Zone DB(https://timezonedb.com/time-zones). 	   If not configured, the time zone will default to the system's time zone.
+          * @vegaVersion 2.72.0
+         */
+        "timezone": string;
+        /**
+          * Invoke this method to trigger repick.   The param `type` is distinguishing the start date or end date can be repick.
+          * @vegaVersion 2.72.0
+         */
+        "triggerRepick": (type: DatePickerCalendarRepickType) => Promise<void>;
+        /**
+          * Determines whether the year or month dropdown position is calculated relative to the screen.
+          * @vegaVersion 2.72.0
+         */
+        "yearMonthDropdownProps": VegaDropdownPropsForDatePickerCalendar;
     }
     interface VegaDialog {
         /**
@@ -1973,6 +2056,11 @@ export namespace Components {
           * @vegaVersion 1.3.0
          */
         "hint": string;
+        /**
+          * A hint to the browser for which keyboard to display. Please refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode for more details.
+          * @vegaVersion 2.71.0
+         */
+        "inputmode": 'text' | 'numeric';
         /**
           * Indicates whether the current value in the field is considered valid or    invalid based on the defined validation rules.
           * @vegaVersion 1.3.0
@@ -2739,10 +2827,10 @@ export namespace Components {
          */
         "backdropColor": VegaModalBackdropColor;
         /**
-          * Defines the maximum height of the content within    the modal element.
+          * Defines the maximum height of the content within    the modal element.  It accepts values in numeric, string and ResponsiveType. Numeric values represent maximum height of the content in pixels    (e.g., 100 translates to 100px). String values allow the use of CSS units like 'vh' or 'calc' expressions.    (e.g., '100vh' or 'calc(100vh - 20px)').
           * @vegaVersion 1.4.0
          */
-        "contentMaxHeight": ResponsiveType<number>;
+        "contentMaxHeight": ResponsiveType<number | string>;
         /**
           * Provides a callback function that is triggered when a user clicks the    close button located in the top right corner of the modal.  If the callback function returns `true`, the modal will be closed.  If the callback function returns `false` or does not return any value, the modal will remain open.
           * @vegaVersion 1.22.0
@@ -2982,8 +3070,9 @@ export namespace Components {
         /**
           * Invoke this method to show the popover.
           * @vegaVersion 1.22.0
+          * @param refresh - Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover‘s styles (such as width, height, or position). The default value is false. Added in 2.73.0.
          */
-        "show": () => Promise<void>;
+        "show": (refresh?: boolean) => Promise<void>;
         /**
           * Controls whether the arrow is display.
           * @vegaVersion 2.8.0
@@ -3035,10 +3124,10 @@ export namespace Components {
          */
         "current": number;
         /**
-          * Specifies the direction of the Progress Tracker component.  It can be set to either horizontal or vertical.    In the horizontal direction, the tracker is divided into    panes with navigable arrows. In the vertical direction,    it is displayed as a single pane.
+          * Specifies the direction of the Progress Tracker component.  It can be set to either horizontal or vertical.    In the horizontal direction, the tracker is divided into    panes with navigable arrows. In the vertical direction,    it is displayed as a single pane. It also can be set as ResponsiveType for responsive direction.
           * @vegaVersion 1.0.7
          */
-        "direction": 'vertical' | 'horizontal';
+        "direction": ResponsiveType<VegaProgressTrackerDirectionType>;
         /**
           * Invoke this method to retrieve the tracker's current step.
           * @vegaVersion 1.3.0
@@ -3065,6 +3154,13 @@ export namespace Components {
          */
         "steps": string[];
     }
+    interface VegaProgressTrackerStep {
+        /**
+          * The unique key for the step.
+          * @vegaVersion 2.73.0
+         */
+        "stepKey": string;
+    }
     interface VegaRadio {
         /**
           * Determines if the radio button is selected or checked.
@@ -4492,6 +4588,10 @@ export interface VegaDatePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVegaDatePickerElement;
 }
+export interface VegaDatePickerCalendarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLVegaDatePickerCalendarElement;
+}
 export interface VegaDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLVegaDropdownElement;
@@ -5101,6 +5201,12 @@ declare global {
         prototype: HTMLVegaProgressTrackerElement;
         new (): HTMLVegaProgressTrackerElement;
     };
+    interface HTMLVegaProgressTrackerStepElement extends Components.VegaProgressTrackerStep, HTMLStencilElement {
+    }
+    var HTMLVegaProgressTrackerStepElement: {
+        prototype: HTMLVegaProgressTrackerStepElement;
+        new (): HTMLVegaProgressTrackerStepElement;
+    };
     interface HTMLVegaRadioElement extends Components.VegaRadio, HTMLStencilElement {
     }
     var HTMLVegaRadioElement: {
@@ -5420,6 +5526,7 @@ declare global {
         "vega-popover": HTMLVegaPopoverElement;
         "vega-popover-content-box": HTMLVegaPopoverContentBoxElement;
         "vega-progress-tracker": HTMLVegaProgressTrackerElement;
+        "vega-progress-tracker-step": HTMLVegaProgressTrackerStepElement;
         "vega-radio": HTMLVegaRadioElement;
         "vega-radio-group": HTMLVegaRadioGroupElement;
         "vega-rich-text-content": HTMLVegaRichTextContentElement;
@@ -5620,6 +5727,12 @@ declare namespace LocalJSX {
           * @vegaVersion 2.0.0
          */
         "onDropdownClick"?: (event: VegaAppHeaderButtonCustomEvent<string>) => void;
+        /**
+          * An event emitter notifying the reset event in the dropdown.
+          * @eventSemantics namespace:native
+          * @vegaVersion 2.73.0
+         */
+        "onReset"?: (event: VegaAppHeaderButtonCustomEvent<string>) => void;
         /**
           * An event emitter notifying the click event of an app header button.
           * @vegaVersion 1.11.0
@@ -5630,6 +5743,11 @@ declare namespace LocalJSX {
           * @vegaVersion 1.23.0
          */
         "onVegaDropdownClick"?: (event: VegaAppHeaderButtonCustomEvent<string>) => void;
+        /**
+          * An event emitter notifying the reset event in the dropdown.
+          * @vegaVersion 2.73.0
+         */
+        "onVegaReset"?: (event: VegaAppHeaderButtonCustomEvent<string>) => void;
         /**
           * Specifies whether the app header button is displayed in a selected state.
           * @vegaVersion 1.15.0
@@ -6043,6 +6161,11 @@ declare namespace LocalJSX {
         "variant"?: VegaButtonCircleVariant;
     }
     interface VegaButtonGroup {
+        /**
+          * Specifies whether the button elements are disabled.
+          * @vegaVersion 2.72.0
+         */
+        "disabled"?: boolean;
         /**
           * Specifies the placement of the icon in relation to the button's label.
           * @vegaVersion 2.5.0
@@ -6071,6 +6194,11 @@ declare namespace LocalJSX {
         "variant"?: VegaButtonGroupVariant;
     }
     interface VegaButtonGroupItem {
+        /**
+          * Specifies whether the button group item is disabled.
+          * @vegaVersion 2.72.0
+         */
+        "disabled"?: boolean;
         /**
           * Specifies the properties for the dropdown menu that appears when the button group contains more than one button item.
           * @vegaVersion 2.5.0
@@ -6908,6 +7036,101 @@ declare namespace LocalJSX {
         "value"?: DatePickerValueType<DatePickerModeType>;
     }
     interface VegaDatePickerCalendar {
+        /**
+          * Specifies whether to display the clear button when the calendar is shown.
+          * @vegaVersion 2.72.0
+         */
+        "clearButton"?: boolean;
+        /**
+          * Specifies the desired date format.
+          * @vegaVersion 2.72.0
+         */
+        "format"?: string;
+        /**
+          * 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.72.0
+         */
+        "isDateDisabled"?: DisabledDate;
+        /**
+          * Specifies the maximum selectable date in the date picker calendar.
+          * @vegaVersion 2.72.0
+         */
+        "maxDate"?: string;
+        /**
+          * Specifies the minimum selectable date in the date picker calendar.
+          * @vegaVersion 2.72.0
+         */
+        "minDate"?: string;
+        /**
+          * Specifies the selection mode of the date picker calendar.   - Use `single` to allow selecting a single date.  - Use `range` to allow selecting a date range.
+          * @vegaVersion 2.72.0
+         */
+        "mode"?: DatePickerModeType;
+        /**
+          * An event emitter notifying the change of the value in the date picker,    whether triggered programmatically or through user interaction.
+          * @eventSemantics namespace:native
+          * @vegaVersion 2.72.0
+         */
+        "onClear"?: (event: VegaDatePickerCalendarCustomEvent<string | string[]>) => void;
+        /**
+          * An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,
+          * @eventSemantics namespace:native
+          * @vegaVersion 2.61.0
+         */
+        "onMonthYearChange"?: (event: VegaDatePickerCalendarCustomEvent<DatePickerMonthYearTypes>) => void;
+        /**
+          * An event emitter notifying the change of the value in the date picker,    whether triggered programmatically or through user interaction.
+          * @eventSemantics namespace:native
+          * @vegaVersion 2.72.0
+         */
+        "onSelectionChange"?: (event: VegaDatePickerCalendarCustomEvent<string | string[]>) => void;
+        /**
+          * An event emitter notifying the change of the value in the date picker,    whether triggered programmatically or through user interaction.
+          * @vegaVersion 2.72.0
+         */
+        "onVegaClear"?: (event: VegaDatePickerCalendarCustomEvent<string | string[]>) => void;
+        /**
+          * An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,    whether triggered programmatically or through user interaction.
+          * @vegaVersion 2.61.0
+         */
+        "onVegaMonthYearChange"?: (event: VegaDatePickerCalendarCustomEvent<DatePickerMonthYearTypes>) => void;
+        /**
+          * An event emitter notifying the change of the value in the date picker,    whether triggered programmatically or through user interaction.
+          * @vegaVersion 2.72.0
+         */
+        "onVegaSelectionChange"?: (event: VegaDatePickerCalendarCustomEvent<string | string[]>) => void;
+        /**
+          * Specifies the selected date or date range in the date picker calendar.
+          * @vegaVersion 2.72.0
+         */
+        "selection"?: DatePickerValueType<DatePickerModeType>;
+        /**
+          * Determines whether to show months and years dropdown in date picker calendar If set to true, date picker calendar will have months and years dropdown
+          * @vegaVersion 2.72.0
+         */
+        "showYearMonthDropdowns"?: boolean;
+        /**
+          * Renders the calendar picker in different sizes. Defaults to regular size
+          * @vegaVersion 2.72.0
+         */
+        "size"?: DatePickerCalendarSizeType;
+        /**
+          * Specifies the calendar is static height.
+          * @vegaVersion 2.72.0
+         */
+        "staticHeight"?: boolean;
+        /**
+          * Specifies the IANA time zone or Etc/GMT±n format.     It accepts values such as "America/New_York" or "Etc/GMT+12".     For a complete list of IANA time zones, refer to Time Zone DB(https://timezonedb.com/time-zones). 	   If not configured, the time zone will default to the system's time zone.
+          * @vegaVersion 2.72.0
+         */
+        "timezone"?: string;
+        /**
+          * Determines whether the year or month dropdown position is calculated relative to the screen.
+          * @vegaVersion 2.72.0
+         */
+        "yearMonthDropdownProps"?: VegaDropdownPropsForDatePickerCalendar;
     }
     interface VegaDialog {
         /**
@@ -7776,6 +7999,11 @@ declare namespace LocalJSX {
           * @vegaVersion 1.3.0
          */
         "hint"?: string;
+        /**
+          * A hint to the browser for which keyboard to display. Please refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode for more details.
+          * @vegaVersion 2.71.0
+         */
+        "inputmode"?: 'text' | 'numeric';
         /**
           * Indicates whether the current value in the field is considered valid or    invalid based on the defined validation rules.
           * @vegaVersion 1.3.0
@@ -8780,10 +9008,10 @@ declare namespace LocalJSX {
          */
         "backdropColor"?: VegaModalBackdropColor;
         /**
-          * Defines the maximum height of the content within    the modal element.
+          * Defines the maximum height of the content within    the modal element.  It accepts values in numeric, string and ResponsiveType. Numeric values represent maximum height of the content in pixels    (e.g., 100 translates to 100px). String values allow the use of CSS units like 'vh' or 'calc' expressions.    (e.g., '100vh' or 'calc(100vh - 20px)').
           * @vegaVersion 1.4.0
          */
-        "contentMaxHeight"?: ResponsiveType<number>;
+        "contentMaxHeight"?: ResponsiveType<number | string>;
         /**
           * Provides a callback function that is triggered when a user clicks the    close button located in the top right corner of the modal.  If the callback function returns `true`, the modal will be closed.  If the callback function returns `false` or does not return any value, the modal will remain open.
           * @vegaVersion 1.22.0
@@ -9117,10 +9345,10 @@ declare namespace LocalJSX {
          */
         "current"?: number;
         /**
-          * Specifies the direction of the Progress Tracker component.  It can be set to either horizontal or vertical.    In the horizontal direction, the tracker is divided into    panes with navigable arrows. In the vertical direction,    it is displayed as a single pane.
+          * Specifies the direction of the Progress Tracker component.  It can be set to either horizontal or vertical.    In the horizontal direction, the tracker is divided into    panes with navigable arrows. In the vertical direction,    it is displayed as a single pane. It also can be set as ResponsiveType for responsive direction.
           * @vegaVersion 1.0.7
          */
-        "direction"?: 'vertical' | 'horizontal';
+        "direction"?: ResponsiveType<VegaProgressTrackerDirectionType>;
         /**
           * An event emitter notifying that the current step has changed.
           * @eventSemantics namespace:native
@@ -9138,6 +9366,13 @@ declare namespace LocalJSX {
          */
         "steps"?: string[];
     }
+    interface VegaProgressTrackerStep {
+        /**
+          * The unique key for the step.
+          * @vegaVersion 2.73.0
+         */
+        "stepKey"?: string;
+    }
     interface VegaRadio {
         /**
           * Determines if the radio button is selected or checked.
@@ -10802,6 +11037,7 @@ declare namespace LocalJSX {
         "vega-popover": VegaPopover;
         "vega-popover-content-box": VegaPopoverContentBox;
         "vega-progress-tracker": VegaProgressTracker;
+        "vega-progress-tracker-step": VegaProgressTrackerStep;
         "vega-radio": VegaRadio;
         "vega-radio-group": VegaRadioGroup;
         "vega-rich-text-content": VegaRichTextContent;
@@ -10921,6 +11157,7 @@ declare module "@stencil/core" {
             "vega-popover": LocalJSX.VegaPopover & JSXBase.HTMLAttributes<HTMLVegaPopoverElement>;
             "vega-popover-content-box": LocalJSX.VegaPopoverContentBox & JSXBase.HTMLAttributes<HTMLVegaPopoverContentBoxElement>;
             "vega-progress-tracker": LocalJSX.VegaProgressTracker & JSXBase.HTMLAttributes<HTMLVegaProgressTrackerElement>;
+            "vega-progress-tracker-step": LocalJSX.VegaProgressTrackerStep & JSXBase.HTMLAttributes<HTMLVegaProgressTrackerStepElement>;
             "vega-radio": LocalJSX.VegaRadio & JSXBase.HTMLAttributes<HTMLVegaRadioElement>;
             "vega-radio-group": LocalJSX.VegaRadioGroup & JSXBase.HTMLAttributes<HTMLVegaRadioGroupElement>;
             "vega-rich-text-content": LocalJSX.VegaRichTextContent & JSXBase.HTMLAttributes<HTMLVegaRichTextContentElement>;

package/dist/types/constants/regex.d.ts

@@ -4,3 +4,4 @@ export declare const VisaRegex: RegExp;
 export declare const MasterCardRegex: RegExp;
 export declare const AmexRegex: RegExp;
 export declare const DiscoverRegex: RegExp;
+export declare const DateFormatParserRegex: RegExp;

package/dist/types/constants/ui.d.ts

@@ -12,5 +12,5 @@ export declare const FlexWrap: readonly ["nowrap", "wrap", "wrap-reverse"];
 export declare const BoxDisplay: readonly ["block", "inline-block", "none"];
 export declare const BorderStyle: readonly ["solid", "dashed", "dotted", "double", "none"];
 export declare const TextAlign: readonly ["start", "end", "left", "right", "center", "justify"];
-export declare const VegaNativeEventName: readonly ["change", "click", "focus", "blur", "close", "modalOpen", "validate", "formSubmit", "formReset", "rowClick", "rowExpand", "selectChange", "selectAllChange", "pageSizeChange", "dropdownClick", "create", "search", "searchTrigger", "hide", "show", "popoverShow", "popoverHide", "cancel", "remove", "pageUpdate", "currentStepUpdate", "toggleStatus", "stateUpdate", "groupClick", "menuClick", "accordionExpand", "dropdownShow", "dropdownHide", "dropdownSearch", "actionClick", "eventClick", "dateDblClick", "dateClick", "countryChange", "actionButtonClick", "moreActionClick", "expand", "rowSelect", "rowSelectAll", "retry", "selectedFileChange", "preview", "labelButtonClick", "imageInserted", "reset", "eventPreviewShow", "monthYearChange", "complete", "paste"];
+export declare const VegaNativeEventName: readonly ["change", "click", "focus", "blur", "close", "modalOpen", "validate", "formSubmit", "formReset", "rowClick", "rowExpand", "selectChange", "selectAllChange", "pageSizeChange", "dropdownClick", "create", "search", "searchTrigger", "hide", "show", "popoverShow", "popoverHide", "cancel", "remove", "pageUpdate", "currentStepUpdate", "toggleStatus", "stateUpdate", "groupClick", "menuClick", "accordionExpand", "dropdownShow", "dropdownHide", "dropdownSearch", "actionClick", "eventClick", "dateDblClick", "dateClick", "countryChange", "actionButtonClick", "moreActionClick", "expand", "rowSelect", "rowSelectAll", "retry", "selectedFileChange", "preview", "labelButtonClick", "imageInserted", "reset", "eventPreviewShow", "monthYearChange", "complete", "paste", "clear", "periodChange", "selectionChange"];
 export declare const CssStates: readonly ["default", "hover", "active", "focus-visible"];

package/dist/types/helpers/calendar/calendar-date.d.ts

@@ -1,3 +1,4 @@
+import { Nullable } from '../../types/general';
 export declare type DateCompareResult = {
   isPreviousMonth: boolean;
   isNextMonth: boolean;
@@ -7,6 +8,7 @@ export declare type DateCompareResult = {
  * Calendar date class
  */
 export declare class CalendarDate {
+  private static readonly MONTHS;
   private _year;
   private _month;
   private _date;
@@ -19,6 +21,37 @@ export declare class CalendarDate {
    * @returns {CalendarDate} - Return a CalendarDate object
    */
   static from(currentDate: Date, timezone?: string): CalendarDate;
+  /**
+   * Converts a date string to CalendarDate with optional format and timezone parameters.
+   *
+   * @param {string} dateString - The string date.
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - lang
+   * @returns {Nullable<CalendarDate>} - CalendarDate.
+   */
+  static fromString(dateString: string, format?: string, lang?: string): Nullable<CalendarDate>;
+  /**
+   * Get regex pattern by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {FormatPatternType} - regex pattern.
+   */
+  private static getPatternByFormatToken;
+  /**
+   * Shorts months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Shorts months.
+   */
+  private static shortMonths;
+  /**
+   * Long months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Long months.
+   */
+  private static longMonths;
   /**
    * The year of the calendar date
    *
@@ -40,6 +73,14 @@ export declare class CalendarDate {
    */
   get date(): number;
   set date(value: number);
+  /**
+   * Converts CalendarDate to a string with an optional format specifier.
+   *
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - Language
+   * @returns {string} The string date.
+   */
+  toString(format?: string, lang?: string): string;
   /**
    * Verify whether the calendar date is today
    *
@@ -63,11 +104,11 @@ export declare class CalendarDate {
   /**
    * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
    *
-   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * @param {Nullable<CalendarDate>} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
    * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
    * @returns {boolean} The date is same day with current
    */
-  equal(calendarDate: CalendarDate): boolean;
+  equal(calendarDate: Nullable<CalendarDate>): boolean;
   /**
    * Get month name.
    *
@@ -75,4 +116,47 @@ export declare class CalendarDate {
    * @returns {string} The name of the month
    */
   getMonthName(isShortName?: boolean): string;
+  /**
+   * To determine if it is larger than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isAfter(calendarDate: Nullable<CalendarDate>): boolean;
+  /**
+   * To determine if it is less than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isBefore(calendarDate: Nullable<CalendarDate>): boolean;
+  /**
+   * Get first day of month.
+   *
+   * @returns {CalendarDate} - First day of month.
+   */
+  firstDateOfMonth(): CalendarDate;
+  /**
+   * Get last day of month.
+   *
+   * @returns {CalendarDate} - Last day of month.
+   */
+  lastDateOfMonth(): CalendarDate;
+  /**
+   * Adjusts the calendar date by adding the specified number of years, months, and days.
+   *
+   * @param {number} [years=0] - The number of years to add.
+   * @param {number} [months=0] - The number of months to add.
+   * @param {number} [days=0] - The number of days to add.
+   * @returns {CalendarDate} - A new CalendarDate object with the adjusted date.
+   */
+  add(years?: number, months?: number, days?: number): CalendarDate;
+  /**
+   * Get year, month and day value by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {string} - year, month and day value.
+   */
+  private getDateItemByFormatToken;
 }

package/dist/types/helpers/calendar/calendar-period/calendar-period.abstract.d.ts

@@ -67,6 +67,13 @@ export declare abstract class CalendarPeriod {
    * @returns {this} - The current period.
    */
   now(): this;
+  /**
+   * Check the give period is equal to current period
+   *
+   * @param {CalendarPeriod} [period] - Give period to compare
+   * @returns {boolean} compare result
+   */
+  equal(period: CalendarPeriod): boolean;
   /**
    * Calculate the period start date and end date.
    *

package/dist/types/helpers/event-manager/event-id/vega-event-id.d.ts

@@ -93,7 +93,9 @@ export declare const VegaRetry: VegaEventID;
 export declare const VegaPreview: VegaEventID;
 export declare const VegaLabelButtonClick: VegaEventID;
 export declare const VegaReset: VegaEventID;
-export declare const VegaMonthYearChange: VegaEventID;
+export declare const VegaClear: VegaEventID;
 export declare const VegaComplete: VegaEventID;
 export declare const VegaPaste: VegaEventID;
 export declare const HTMLNativeEventIds: VegaEventID[];
+export declare const VegaMonthYearChange: VegaEventID;
+export declare const VegaSelectionChange: VegaEventID;

package/dist/types/helpers/event-manager/event-id/vega-internal-event-id.d.ts

@@ -34,7 +34,6 @@ export declare const VegaInternalSidenavLinkClick: VegaInternalEventID;
 export declare const VegaInternalLeftNavGroupExpand: VegaInternalEventID;
 export declare const VegaInternalLeftNavLinkSelected: VegaInternalEventID;
 export declare const VegaInternalInitializeLeftNavLinkSelected: VegaInternalEventID;
-export declare const VegaInternalDropdownUpdateTarget: VegaInternalEventID;
 export declare const VegaInternalRichTextEditorFlushChanges: VegaInternalEventID;
 export declare const VegaInternalRichTextEditorSelectionRangeChange: VegaInternalEventID;
 export declare const VegaInternalRichTextImageClick: VegaInternalEventID;
@@ -54,8 +53,15 @@ export declare const VegaInternalColumnBodyCellRenderInputRIC: VegaInternalEvent
 export declare const VegaInternalCalendarEventPreviewUpdate: VegaInternalEventID;
 export declare const VegaInternalCalendarEventPreviewClear: VegaInternalEventID;
 export declare const VegaInternalUpdateRTECursorPosition: VegaInternalEventID;
-export declare const VegaInternalMonthYearChange: VegaInternalEventID;
 export declare const VegaInternalLeftNavLinkSelectedTopic: VegaInternalEventID;
 export declare const VegaInternalCalendarEventPreviewHide: VegaInternalEventID;
 export declare const VegaInternalFormSubmit: VegaInternalEventID;
 export declare const VegaInternalFormReset: VegaInternalEventID;
+export declare const VegaInternalProgressTrackerStepClick: VegaInternalEventID;
+export declare const VegaInternalDatePickerCalendarSelectionChange: VegaInternalEventID;
+export declare const VegaInternalDatePickerCalendarInputClick: VegaInternalEventID;
+export declare const VegaInternalDatePickerCalendarClear: VegaInternalEventID;
+export declare const VegaInternalDatePickerCalendarUpdatePeriodByUser: VegaInternalEventID;
+export declare const VegaInternalUpdateVegaInputValue: VegaInternalEventID;
+export declare const VegaInternalFocusVegaInput: VegaInternalEventID;
+export declare const VegaInternalSetupVegaInputMaskConfig: VegaInternalEventID;

package/dist/types/helpers/ui/element-appender.d.ts

@@ -86,6 +86,20 @@ export declare class ElementAppender {
    * @param {boolean} show remove hidden style if true, otherwise add it
    */
   private toggleShow;
+  /**
+   * Show the appendable element by removing hidden styles
+   * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  private showElementAppender;
+  /**
+   * Hide the appendable element by adding hidden styles.
+   * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  private hideElementAppender;
   /**
    * Save visible AppendableElement from the container state
    *