@globalpayments/vega 2.24.2 → 2.26.0

package/dist/collection/components/vega-grid/vega-grid.js

@@ -143,7 +143,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GapType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; M?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; L?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; XL?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; default?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: GapType; M?: GapType; L?: GapType; XL?: GapType; default?: GapType; } | { x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

package/dist/collection/components/vega-input/vega-input.js

@@ -17,7 +17,7 @@ import { ComponentLoadRequired } from '../../decorators/method-decorators/compon
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaBlur, VegaChange, VegaFocus } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
 import { VegaInputCopyPasteController } from './slimmers/controllers/vega-input-copy-paste-controller';
@@ -25,6 +25,7 @@ import { VegaInputPrefixSlotRenderer } from './slimmers/renderers/vega-input-pre
 import { VegaInputMaskConfigController } from './slimmers/controllers/vega-input-mask-config-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input/runtime-metrics-payload-definition';
+import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 /**
  * @version 1.0.5
  */
@@ -74,6 +75,7 @@ export class VegaInput {
     this.changeEventEmitter = createEventEmitSlimmer(VegaInput, VegaChange);
     this.focusEventEmitter = createEventEmitSlimmer(VegaInput, VegaFocus);
     this.blurEventEmitter = createEventEmitSlimmer(VegaInput, VegaBlur);
+    this.labelButtonClickEventEmitter = createEventEmitSlimmer(VegaInput, VegaLabelButtonClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputRuntimeMetricsPayloadDefinition);
     /**
      * Specifies the label or title for the input field.
@@ -84,6 +86,15 @@ export class VegaInput {
      * @version 1.0.5
      */
     this.label = '';
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality
+     *  related to the suffix button's role and behavior.
+     *
+     * @version 2.25.0
+     */
+    this.labelSuffixButtonProps = null;
     /**
      * Represents a pre-set or default value for the input field.
      *
@@ -267,6 +278,9 @@ export class VegaInput {
         this.value = e.target.value;
       }
     };
+    this.handleLabelButtonClick = () => {
+      this.labelButtonClickEventEmitter.emit();
+    };
   }
   /**
    * The input component is embedded in other components.
@@ -346,7 +360,9 @@ export class VegaInput {
       this.renderHintDom()));
   }
   renderLabelDom() {
-    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
+      } }));
   }
   renderClearIcon() {
     return (h("div", { class: {
@@ -389,6 +405,30 @@ export class VegaInput {
       "reflect": false,
       "defaultValue": "''"
     },
+    "labelSuffixButtonProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "LabelSuffixButtonProps",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "references": {
+          "LabelSuffixButtonProps": {
+            "location": "import",
+            "path": "../vega-field-label/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality\n related to the suffix button's role and behavior."
+      },
+      "defaultValue": "null"
+    },
     "value": {
       "type": "string",
       "mutable": true,
@@ -980,6 +1020,45 @@ export class VegaInput {
         "resolved": "undefined",
         "references": {}
       }
+    }, {
+      "method": "vegaLabelButtonClick",
+      "name": "vegaLabelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "labelButtonClick",
+      "name": "labelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "doFocus": {
@@ -1057,6 +1136,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "blurEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "labelButtonClickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-input-phone-number/slimmers/controllers/country-select-controller.js

@@ -4,21 +4,37 @@ 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 } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { getCountries } from 'libphonenumber-js';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
-import { DROPDOWN_SEARCH_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { COUNTRIES } from '../../assets/countries';
+import { VegaDropdownSearchInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 /**
  * The `CountrySelectController` class in TypeScript includes methods to set the search string and
  * countryCode properties.
  */
 export class CountrySelectController extends VegaSlimmer {
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.registerRemoteDropdownSearch();
+  }
+  /**
+   * The function `setCountryCode` sets the countryCode property of an object to the specified VegaCountryCode value.
+   *
+   * @param {VegaCountryCode} countryCode - The `countryCode` parameter is of type `VegaCountryCode`, which is likely a
+   * custom data type representing a country code.
+   */
+  setCountryCode(countryCode) {
+    this.countryCode = countryCode;
+  }
   /**
    * Registers a remote invocation call for a dropdown search.
    */
-  static registerRemoteDropdownSearch() {
-    staticRemoteInvocationCallRegistry.register(DROPDOWN_SEARCH_INTERNAL_OVERRIDEN, this.filterDropdownSourcesBySearchString.bind(this));
+  registerRemoteDropdownSearch() {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaDropdownSearchInternalOverridden), this.filterDropdownSourcesBySearchString.bind(this));
   }
   /**
    * Remote invocation call for a dropdown search.
@@ -27,24 +43,20 @@ export class CountrySelectController extends VegaSlimmer {
    * @param {string} searchString - Searching string of dropdown.
    * @returns  {DropdownSourceItem[]}  The searched source.
    */
-  static filterDropdownSourcesBySearchString(source, searchString) {
+  filterDropdownSourcesBySearchString(source, searchString) {
     return source.filter((item) => `${COUNTRIES[item.key].toLowerCase()} +${item.label}`
       .toLowerCase()
       .includes(searchString.toLowerCase()));
   }
-  /**
-   * The function `setCountryCode` sets the countryCode property of an object to the specified VegaCountryCode value.
-   *
-   * @param {VegaCountryCode} countryCode - The `countryCode` parameter is of type `VegaCountryCode`, which is likely a
-   * custom data type representing a country code.
-   */
-  setCountryCode(countryCode) {
-    this.countryCode = countryCode;
-  }
 }
 CountrySelectController.defaultCountryCode = 'US';
 CountrySelectController.defaultAllowedCountryCodes = getCountries();
 __decorate([
   MapToComponentField({ writable: true })
 ], CountrySelectController.prototype, "countryCode", void 0);
-CountrySelectController.registerRemoteDropdownSearch();
+__decorate([
+  MapToComponentField()
+], CountrySelectController.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], CountrySelectController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-input-phone-number/slimmers/controllers/vega-input-phone-number-value-controller.js

@@ -38,19 +38,23 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
     this.updateValue(this.value);
   }
   /**
-   * The `watchValue` function emits a change event with the provided value and notifies the
-   * ChangeManager about the form element value change.
+   * The `watchValue` function updates a value and emits change events based on certain conditions.
    *
-   * @param {string} value - The `value` parameter is a string that represents the value being watched or
-   * monitored.
+   * @param {string} newValue - The `newValue` parameter represents the new value that is being watched
+   * for changes.
+   * @param {string} oldValue - The `oldValue` parameter in the `watchValue` function represents the
+   * previous value before the update. It is used to compare with the new value (`newValue`) to determine
+   * if there has been a change in the value.
    */
-  watchValue(value) {
-    this.updateValue(value);
-    this.changeEventEmitter.emit(value);
-    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
-      host: this.host,
-      detail: value,
-    });
+  watchValue(newValue, oldValue) {
+    this.updateValue(newValue);
+    if (oldValue && oldValue !== this.value) {
+      this.changeEventEmitter.emit(this.value);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: this.value,
+      });
+    }
   }
   /**
    * The function `getCallingCodePrefix` returns the calling code prefix for a given country code.

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/country-select-renderer.js

@@ -12,8 +12,9 @@ import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-
 import { CountryFlags } from '../../assets/country-flags';
 import { getCountryCallingCode } from 'libphonenumber-js';
 import { COUNTRIES } from '../../assets/countries';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
-import { DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import { VegaDropdownRenderItemInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 export class CountrySelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -87,7 +88,7 @@ export class CountrySelectRenderer extends VegaSlimmer {
           (e) => {
             this.handleCountrySelectChange(e.detail);
           });
-          staticRemoteInvocationCallRegistry.register(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, this.renderDropdownItem.bind(this));
+          remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaDropdownRenderItemInternalOverridden), this.renderDropdownItem.bind(this));
         }, value: this.countryCode })));
   }
   /*
@@ -144,6 +145,9 @@ export class CountrySelectRenderer extends VegaSlimmer {
   VegaInternalIconManager.register(CountryFlags);
 })();
 CountrySelectRenderer.allCountries = COUNTRIES;
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], CountrySelectRenderer.prototype, "size", void 0);

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -105,6 +105,7 @@ export class VegaInputPhoneNumber {
     /**
      * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
      *
+     * @VegaWarning Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`. For example, if the default country code is US, the default value will be `+1`.
      * @version 2.18.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
@@ -141,8 +142,8 @@ export class VegaInputPhoneNumber {
   watchCountryCode(newCountryCode, oldCountryCode) {
     methodPlaceholder(newCountryCode, oldCountryCode);
   }
-  watchValue(value) {
-    methodPlaceholder(value);
+  watchValue(newValue, oldValue) {
+    methodPlaceholder(newValue, oldValue);
   }
   watchValidationRules() {
     methodPlaceholder();
@@ -305,6 +306,9 @@ export class VegaInputPhoneNumber {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaWarning",
+            "text": "Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`. For example, if the default country code is US, the default value will be `+1`."
+          }, {
             "name": "version",
             "text": "2.18.0"
           }],

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -511,7 +511,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ caseSensitive?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
+        "resolved": "{ caseSensitive?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchTriggerBy?: VegaDropdownSearchTriggerByType; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

package/dist/collection/components/vega-modal/vega-modal.js

@@ -215,12 +215,14 @@ export class VegaModal {
   }
   /**
    * Invoke this method to show or hide the modal.
+   *
+   * @version 1.0.6
    */
   /* The below method is e2e-test covered in
    * @see{module:vega-modal-toggle-interactive-e2e}
    */
-  /* istanbul ignore next *
-   * @version 1.0.6
+  /* istanbul ignore next
+   *
    */
   async modal(option) {
     switch (option) {
@@ -888,7 +890,10 @@ export class VegaModal {
       },
       "docs": {
         "text": "Invoke this method to show or hide the modal.",
-        "tags": []
+        "tags": [{
+            "name": "version",
+            "text": "1.0.6"
+          }]
       }
     }
   }; }

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-open-state-controller.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-resize-observer-slimmer';
 import { executeAfterTransition } from '../../../../../utils/effect';
+import { FeatureFlag } from '../../../../../helpers/feature-control/feature-flag-controller';
 export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
   /**
    * The below method is e2e-test covered in
@@ -27,7 +28,15 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
    */
   /* istanbul ignore next */
   componentDidLoad() {
-    this.open === true ? (this.openState = 'open') : (this.openState = 'close');
+    if (this.open === true) {
+      this.openState = 'open';
+      if (FeatureFlag.isEnabled('VEGA_LEFT_NAV.DISABLE_ANIMATION_ON_LOAD')) {
+        this.host.classList.add('disableAnimation');
+      }
+    }
+    else {
+      this.openState = 'close';
+    }
   }
   /** Call this method to toggle the left nav menu */
   async toggle() {
@@ -48,6 +57,10 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
     else {
       this.open = false;
+      if (FeatureFlag.isEnabled('VEGA_LEFT_NAV.DISABLE_ANIMATION_ON_LOAD') &&
+        this.host.classList.contains('disableAnimation')) {
+        this.host.classList.remove('disableAnimation');
+      }
     }
     this.stateUpdateEventEmitter.emit(this.openState);
   }

package/dist/collection/components/vega-nav/vega-left-nav/vega-left-nav.css

@@ -20,6 +20,10 @@
   transform: translateX(-320px);
 }
 
+:host(.open.disableAnimation) {
+  transition-duration: 0s;
+}
+
 :host(.open) {
   transform: translateX(0px);
 }

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -254,6 +254,11 @@
   }
 }
 
+@media screen and (min-width: 320px) and (max-width: 767px) {
+  :host {
+    flex: 1 1 100%;
+  }
+}
 /* vertical css in mobile */
 @media screen and (min-width: 320px) and (max-width: 767px) {
   :host .vega-progress-tracker__container {

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

@@ -267,7 +267,7 @@ export class VegaRadioGroup {
       "mutable": false,
       "complexType": {
         "original": "VegaFlexProps",
-        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<\"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\">; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
+        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<GapType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
         "references": {
           "VegaFlexProps": {
             "location": "import",

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-page-index-controller.js

@@ -11,7 +11,12 @@ export class VegaTabGroupPageIndexController extends VegaSlimmer {
    * update the page index when component call watchTabPagesChange method
    */
   handleTabPagesChange() {
-    this.setCurrentPageIndexWhenTabPagesChange();
+    if (this.selectedTabDataTarget) {
+      this.setCurrentPageIndexBySelectedTab(this.selectedTabDataTarget);
+    }
+    else {
+      this.setCurrentPageIndexWhenTabPagesChange();
+    }
   }
   /**
    * update the page index when component call watchSelectedTabDataTargetChange method

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-slider-state-controller.js

@@ -5,12 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { SynchronizeTaskQueue } from '../../../../../helpers/queue/synchronize-task-queue';
 /** The `VegaTabGroupSliderStateController` class manages the animation state of a tab group slider component. */
 export class VegaTabGroupSliderStateController extends VegaSlimmer {
   constructor() {
     super(...arguments);
     /* about 2 frames in the browser */
     this.UPDATE_ANIMATION_FLAG_DELAY = 32;
+    this.goToPageTaskQueue = new SynchronizeTaskQueue();
     /**
      * The normal flow:
      * page index change
@@ -37,24 +39,32 @@ export class VegaTabGroupSliderStateController extends VegaSlimmer {
      */
     this.pendingCarouselActionCount = 0;
   }
+  /**
+   * goToPage method should be called after the carousel re-render which waiting for the carousel to render all pages,
+   *    otherwise it may not jump to the current page.
+   */
+  async componentDidRender() {
+    await this.goToPageTaskQueue.runTask();
+  }
   /* istanbul ignore next */
   /**
    * update the page index when component call watchCurrentPageIndexChange method
    *
    *  {@link VegaTabGroup#watchCurrentPageIndexChange}
-   *
-   * @param {number} newIndex the page index
    */
-  async handlePageIndexChange(newIndex) {
+  async handlePageIndexChange() {
     const carouselDom = this.tabListRenderer.getCarouselDomRef();
     if (carouselDom) {
       this.pendingCarouselActionCount += 1;
-      await carouselDom.goToPage(newIndex + 1);
       setTimeout(() => {
         if (this && typeof this.pendingCarouselActionCount === 'number') {
           this.pendingCarouselActionCount -= 1;
         }
       }, this.UPDATE_ANIMATION_FLAG_DELAY);
+      await this.goToPageTaskQueue.enqueue({
+        /** Add task to the queue and run it until component did render */
+        run: async () => await carouselDom.goToPage(this.currentPageIndex + 1),
+      }, false);
     }
   }
   /*
@@ -74,6 +84,12 @@ export class VegaTabGroupSliderStateController extends VegaSlimmer {
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupSliderStateController.prototype, "tabListRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupSliderStateController.prototype, "currentPageIndex", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTabGroupSliderStateController.prototype, "componentDidRender", null);
 __decorate([
   MapToComponentMethod('watchCurrentPageIndexChange')
 ], VegaTabGroupSliderStateController.prototype, "handlePageIndexChange", null);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-expand-row-controller.js

@@ -12,7 +12,7 @@ import { TABLE_EXPAND_ROW } from '../../../../helpers/change-manager/subject/sta
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { findParent } from '../../../../utils/ui';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { VegaInternalTableRowExpand } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The expand row controller of VegaTable
@@ -157,7 +157,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
       this.mutationObserver.disconnect();
     }
     ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
-    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
   }
   /**
    * Component lifecycle - componentDidLoad
@@ -184,7 +184,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
       }
     });
     ChangeManager.register(TABLE_EXPAND_ROW, this.expandObserver);
-    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand), ({ rowKey, expanded }) => {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand), ({ rowKey, expanded }) => {
       return this.rowExpandEventEmitter.emit({
         record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
         expanded: expanded,

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-row-selection-controller.js

@@ -9,7 +9,7 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { TABLE_ROW_CLICK, TABLE_ROW_SELECTION, TABLE_ROW_SELECTION_ALL, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { findParent } from '../../../../utils/ui';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalTableRowSelect, VegaInternalTableRowSelectAll, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
@@ -159,8 +159,8 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
     ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
     ChangeManager.unregister(TABLE_ROW_CLICK, this.rowClickObserver);
-    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect));
-    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll));
   }
   /**
    * Component lifecycle - componentWillLoad
@@ -294,14 +294,14 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
       this.handleRowSelect(checked, record);
     });
     ChangeManager.register(TABLE_ROW_SELECTION, this.rowSelectionObserver);
-    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect), ({ rowKey, checked }) => {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect), ({ rowKey, checked }) => {
       return this.rowSelectEventEmitter.emit({
         selected: checked,
         record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
         selectedRows: this.getSelectedRecords(),
       });
     });
-    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll), ({ checked }) => {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll), ({ checked }) => {
       return this.rowSelectAllEventEmitter.emit({
         selected: checked,
         selectedRows: this.getSelectedRecords(),

package/dist/collection/components/vega-table/vega-table-head-row/slimmers/renderers/vega-table-head-row-renderer.js

@@ -11,7 +11,7 @@ import ChangeManager from '../../../../../helpers/change-manager/change-manager'
 import { TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { findParent } from '../../../../../utils/ui';
 import { VegaInternalTableRowSelectAll } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
@@ -44,7 +44,7 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
     };
     this.handleClick = (e) => {
       e.stopPropagation();
-      const event = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(findParent(this.host, 'vega-table'), VegaInternalTableRowSelectAll), {
+      const event = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(findParent(this.host, 'vega-table'), VegaInternalTableRowSelectAll), {
         host: this.host,
         checked: !this.checkedAll,
       });

package/dist/collection/components/vega-table/vega-table-row/slimmers/controllers/vega-table-row-click-controller.js

@@ -9,7 +9,7 @@ import ChangeManager from '../../../../../helpers/change-manager/change-manager'
 import { TABLE_ROW_CLICK } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import { isAcceptableTableRowObserver } from '../../../type-guard';
-import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalTableRowSelect } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
@@ -32,7 +32,7 @@ export class VegaTableRowClickController extends VegaSlimmer {
    * Row click handler
    */
   handleRowClick() {
-    const rowSelectEvent = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowSelect), {
+    const rowSelectEvent = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowSelect), {
       host: this.host,
       rowKey: this.rowKey,
       checked: !this.checked,