@globalpayments/vega 2.40.0 → 2.42.0

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

@@ -14,6 +14,7 @@ import responsiveFormatFacade from '../../helpers/formatter/responsive-map-forma
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { formatFlexStyles } from '../../helpers/formatter/style-formatter';
+import { VegaBoxResponsiveStyleController } from './slimmers/controllers/vega-box-responsive-style-controller';
 /**
  * @vegaVersion 1.27.0
  */
@@ -23,6 +24,13 @@ export class VegaBox {
     this.pageResizeSlimmer = new PageResizeObserverSlimmer();
     this.stateStyleController = new VegaBoxStateStylesController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.responsiveStyleController = new VegaBoxResponsiveStyleController();
+  }
+  watchPaddingChange() {
+    methodPlaceholder();
+  }
+  watchMarginChange() {
+    methodPlaceholder();
   }
   watchBorder() {
     methodPlaceholder();
@@ -36,6 +44,9 @@ export class VegaBox {
   watchBackgroundColor() {
     methodPlaceholder();
   }
+  watchCornersChange() {
+    methodPlaceholder();
+  }
   render() {
     const hostClasses = [
       formatAndValidResponsiveToken(this.padding, 'padding'),
@@ -801,6 +812,12 @@ export class VegaBox {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "padding",
+      "methodName": "watchPaddingChange"
+    }, {
+      "propName": "margin",
+      "methodName": "watchMarginChange"
+    }, {
       "propName": "border",
       "methodName": "watchBorder"
     }, {
@@ -812,6 +829,9 @@ export class VegaBox {
     }, {
       "propName": "backgroundColor",
       "methodName": "watchBackgroundColor"
+    }, {
+      "propName": "corners",
+      "methodName": "watchCornersChange"
     }]; }
 }
 __decorate([
@@ -826,3 +846,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaBox.prototype, "responsiveStyleController", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/helpers/calendar-event-sorter.js

@@ -7,7 +7,7 @@ export class VegaCalendarEventSorter {
    * @param {CalendarEvent[]} events - CalendarEvent[] - an array of CalendarEvent objects that need to be sorted.
    * @param {number} currentViewIndex - The current index of the row
    * @param {VegaCalendarFullDayEventLayout} fullDayEventLayout - The current row all long event layout
-   * @returns {Nullable<CalendarEvent>} The `sort` function is currently returning the input array of `CalendarEvent` objects as is, without performing any sorting operation.
+   * @returns {Nullable<CalendarEvent>[]} The `sort` function is currently returning the input array of `CalendarEvent` objects as is, without performing any sorting operation.
    */
   sort(events, currentViewIndex, fullDayEventLayout) {
     const allDayEvents = [];
@@ -71,7 +71,7 @@ export class VegaCalendarEventSorter {
    * function represents an array of `CalendarEvent` objects that need to be inserted into the
    * `viewEvents` array at empty positions. The function iterates over the `viewEvents` array and
    * inserts events from the `events` array
-   * @returns {CalendarEvent|null[]} The `insertEventsToEmptyPosition` function returns an array of `Nullable<CalendarEvent>`
+   * @returns {Nullable<CalendarEvent>[]} The `insertEventsToEmptyPosition` function returns an array of `Nullable<CalendarEvent>`
    * where events from the `events` array are inserted into empty positions in the `viewEvents` array.
    * If there are no empty positions in `viewEvents`, the function returns the original `viewEvents`
    * array.

package/dist/collection/components/vega-calendar/slimmers/common/layout/base-event-layout-cell.js

@@ -4,7 +4,7 @@ export class VegaCalendarBaseEventLayoutCell {
    * This function retrieves a calendar event based on the slot index provided.
    *
    * @param {number} index - The `index` parameter is a number that represents the position of a slot in an array.
-   * @returns {CalendarEvent | null} The `getEventBySlotIndex` method is returning a `CalendarEvent` object from the `slots` array at the specified `index`.
+   * @returns {Nullable<CalendarEvent>} The `getEventBySlotIndex` method is returning a `CalendarEvent` object from the `slots` array at the specified `index`.
    */
   getEventBySlotIndex(index) {
     return this.slots[index];

package/dist/collection/components/vega-calendar/slimmers/common/layout/full-day-event-layout.js

@@ -25,7 +25,7 @@ export class VegaCalendarFullDayEventLayout extends VegaCalendarBaseEventLayout
    * @param {number} index - The `index` parameter in the `getEventsByIndex` method is a number that
    * represents the slot index for which you want to retrieve calendar events. The method iterates
    * through each row in the `rows` array and retrieves the calendar event at the specified slot index from each row. The method
-   * @returns {(Nullable<CalendarEvent>)[]} An array of CalendarEvent objects is being returned.
+   * @returns {Nullable<CalendarEvent>[]} An array of CalendarEvent objects is being returned.
    */
   getEventsByIndex(index) {
     const result = [];

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-switch-panel.js

@@ -55,7 +55,7 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
   /**
    * get the switch panel container element
    *
-   * @returns {HTMLElement} container element
+   * @returns {HTMLVegaFlexElement} container element
    */
   getSwitchPanelRef() {
     return this.switchPanelRef;

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-view-renderer.js

@@ -11,7 +11,7 @@ export class VegaCalendarViewRenderer extends VegaSlimmer {
   /**
    * Get the calendar view content element ref
    *
-   * @returns {HTMLElement|null} The div element.
+   * @returns {Nullable<HTMLElement>} The div element.
    */
   getCalendarViewElementRef() {
     return this.calendarViewElementRef;

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-more-button-renderer.js

@@ -24,7 +24,7 @@ export class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
    * Render the more button element
    *
    * @param {number} count the hidden elements count
-   * @returns {HTMLElement} more button
+   * @returns {Nullable<HTMLElement>} more button
    */
   render(count) {
     if (!this.showAllEventsInDayOrWeekView) {

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-event-renderer.js

@@ -20,7 +20,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
    * current row dates all events.
    *
    * @param {CalendarDate[]} rowDate the current view date object
-   * @returns {(CalendarEvent|null)[][]} the current view events
+   * @returns {Nullable<CalendarEvent>[][]} the current view events
    */
   getCurrentRowEvents(rowDate) {
     const result = [];
@@ -34,7 +34,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
    * The function filterRowDisplayEvents processes a 2D array of CalendarEvent objects to limit the number of events displayed per row.
    *
    * @param {(CalendarEvent|null)[][]} rowEvents - `rowEvents` is an array of arrays of `CalendarEvent` objects. Each inner array represents events for a specific row in a calendar display.
-   * @returns {(CalendarEvent|null)[][]} the current row should display events array
+   * @returns {Nullable<CalendarEvent>[][]} the current row should display events array
    */
   filterRowDisplayEvents(rowEvents) {
     const result = [];
@@ -88,7 +88,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
    * @param {Nullable<CalendarEvent>[]} events all event list array
    * @param {number} moreItemsLength popover events length
    * @param {string} title the popover title
-   * @returns {HTMLDivElement | null} the more button or null
+   * @returns {Nullable<HTMLDivElement>} the more button or null
    */
   renderMoreButton(events, moreItemsLength, title) {
     if (moreItemsLength) {

package/dist/collection/components/vega-calendar/utils/index.js

@@ -41,7 +41,7 @@ export function getCalendarEventSlotName(eventKey) {
  *
  * @param {Date} date - The starting date from which you want to find the closest workday.
  * @param {'-1' | '1'} [direction=1] - Determines whether to find the closest workday in the past or future. It can have two possible values:
- * @returns {Date} The closest workday to the input date
+ * @returns {CalendarDate} The closest workday to the input date
  */
 export function getClosestWorkday(date, direction = DateDirection.NEXT) {
   const day = date.toDate().getDay();

package/dist/collection/components/vega-calendar/vega-calendar-event/slimmers/controllers/vega-calendar-event-slot-controller.js

@@ -42,7 +42,7 @@ export class VegaCalendarEventSlotController extends VegaSlimmer {
   /**
    * This method is responsible for finding and returning the parent `vega-calendar` element of the current component instance
    *
-   * @returns {HTMLElement} The vega calendar element
+   * @returns {HTMLVegaCalendarElement} The vega calendar element
    */
   getParentCalendarElement() {
     return this.host['data-calendar-ref'];

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField } from 'vega-slimmer/core';
-import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender-slimmer';
+import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import { FeatureFlag } from '../../../../helpers/public-api';
 /** The date picker element appender controller slimmer */
 export class VegaDatePickerElementAppenderController extends ElementAppenderSlimmer {

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

@@ -89,7 +89,8 @@ export class VegaDatePickerValueController extends VegaSlimmer {
   /**
    * The function `getValue` returns the value of a DatePicker component, with type checking based on the specified DatePickerModeType.
    *
-   * @returns {DatePickerValueType} The method is returning the value of type `DatePickerValueType<T>`.
+   * @typedef T generic type
+   * @returns {DatePickerValueType<T>} The method is returning the value of type `DatePickerValueType<T>`.
    */
   getValue() {
     this.valueGuard(this.value);

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

@@ -72,8 +72,8 @@ export class VegaDialog {
     const isSmallScreen = ['default', 'S'].includes(this.currentBreakpoint);
     const actionButtonSize = { default: 'default', M: 'small' };
     const isDanger = this.type === 'danger';
-    const mergedOkButtonProps = Object.assign(Object.assign({ size: actionButtonSize }, this.okButton), { block: isSmallScreen, danger: isDanger });
-    const mergedCancelButtonProps = Object.assign(Object.assign({ size: actionButtonSize, variant: 'secondary' }, this.cancelButton), { block: isSmallScreen, danger: isDanger });
+    const mergedOkButtonProps = Object.assign(Object.assign({ size: actionButtonSize, danger: isDanger }, this.okButton), { block: isSmallScreen });
+    const mergedCancelButtonProps = Object.assign(Object.assign({ size: actionButtonSize, variant: 'secondary', danger: isDanger }, this.cancelButton), { block: isSmallScreen });
     const mergedModalProps = Object.assign(Object.assign({}, this.modalProps), { isVerticallyCentered: this.modalProps.isVerticallyCentered !== undefined ||
         this.modalProps.isVerticallyCenter !== undefined
         ? this.modalProps.isVerticallyCentered || this.modalProps.isVerticallyCenter
@@ -176,7 +176,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "VegaDialogActionButtonProps",
-        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; danger?: boolean; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
         "references": {
           "VegaDialogActionButtonProps": {
             "location": "import",
@@ -222,7 +222,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "VegaDialogActionButtonProps",
-        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; danger?: boolean; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
         "references": {
           "VegaDialogActionButtonProps": {
             "location": "import",

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-appender-controller.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
-import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender-slimmer';
+import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-remote-invocation-controller.js

@@ -21,7 +21,7 @@ export class VegaDropdownRemoteInvocationController extends VegaSlimmer {
    *  Call the search function in input-phone-number.
    *
    * @param {unknown[]} args - arguments of remote search function
-   * @returns {VegaDropdownSourceItem[]} - searched items.
+   * @returns {Nullable<VegaDropdownSourceItem[]>} - searched items.
    */
   callRemoteSearch(...args) {
     if (this.remotePhoneNumberSearchSubject) {
@@ -35,7 +35,7 @@ export class VegaDropdownRemoteInvocationController extends VegaSlimmer {
    * Call the item render function in input-phone-number.
    *
    * @param {unknown[]} args - arguments of remote item render function
-   * @returns {HTMLElement} - rendered item
+   * @returns {Nullable<HTMLVegaDropdownItemElement>} - rendered item
    */
   callRemoteItemRender(...args) {
     if (this.remotePhoneNumberItemRenderSubject) {

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-selected-controller.js

@@ -28,7 +28,7 @@ export class VegaDropdownSelectedController extends VegaSlimmer {
   /**
    * The callback to handle [getSelection]{@link VegaTable.getSelection}
    *
-   * @returns {string[]} The selected row keys array
+   * @returns {string[] | string} The selected row keys array
    */
   getSelection() {
     return this.selectedSourceKey;

package/dist/collection/components/vega-field-label/slimmers/renderers/vega-field-label-suffix-element-renderer.js

@@ -24,7 +24,7 @@ export class VegaFieldLabelSuffixElementRenderer extends VegaSlimmer {
   /**
    * Render a suffix button if the property is not empty.
    *
-   * @returns {HTMLElement | null}
+   * @returns {Nullable<HTMLElement>}
    */
   render() {
     if (this.suffixButtonProps) {
@@ -36,7 +36,7 @@ export class VegaFieldLabelSuffixElementRenderer extends VegaSlimmer {
    * Render a vega button circle component.
    *
    * @param {string} icon the button icon name
-   * @returns {HTMLElement} vega button circle component
+   * @returns {HTMLVegaButtonCircleElement} vega button circle component
    */
   renderSuffixButton(icon) {
     return (h("vega-button-circle", { size: "extra-small", variant: "icon-only", iconColor: "text-link", showTooltip: false, icon: icon }));

package/dist/collection/components/vega-font/slimmers/controllers/vega-font-variant-controller.js

@@ -11,7 +11,7 @@ export class VegaFontVariantController extends VegaSlimmer {
   /**
    * The function `getFontTokenByBreakpoint` returns a font token based on the current breakpoint, with support for responsive typography.
    *
-   * @returns {string|undefined} a nullable string.
+   * @returns {Nullable<string>} a nullable string.
    */
   getFontTokenByBreakpoint() {
     return responsiveFormatFacade.formatCustom(this.variant);

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

@@ -29,7 +29,7 @@ export class VegaInputPhoneNumberRenderer extends VegaSlimmer {
   /**
    * The function `renderHint` returns a label element with a hint text if the `hint` property is provided.
    *
-   * @returns {HTMLElement|null} A `label` element with the class `vega-input-phone-number-hint` containing a `vega-font` element
+   * @returns {Nullable<HTMLElement>} A `label` element with the class `vega-input-phone-number-hint` containing a `vega-font` element
    * with the variant `font-footnote1-short` and color `text-secondary`, displaying the hint text stored
    * in the `this.hint` property.
    */

package/dist/collection/components/vega-input-range/slimmers/renderers/vega-input-range-input-renderer.js

@@ -39,7 +39,7 @@ export class VegaInputRangeInputRenderer extends VegaSlimmer {
    * @param {RangeInputIndexType} index - The `index` parameter in the `getInputRefByIndex` function is
    * of type `RangeInputIndexType`. This type is used to specify whether the index refers to the minimum
    * or maximum input field in a range input element.
-   * @returns {HTMLElement} The `getInputRefByIndex` function returns either the `minFieldInputRef` or
+   * @returns {HTMLVegaInputElement} The `getInputRefByIndex` function returns either the `minFieldInputRef` or
    * `maxFieldInputRef` based on the `index` provided.
    */
   getInputRefByIndex(index) {

package/dist/collection/components/vega-input-range/slimmers/renderers/vega-input-range-renderer.js

@@ -35,7 +35,7 @@ export class VegaInputRangeRenderer extends VegaSlimmer {
   /**
    * The function `renderHintDom` returns a label element with a hint text if the `hint` property is provided.
    *
-   * @returns {HTMLElement|null} A `label` element with the class `vega-input-range-hint` containing a `vega-font` element
+   * @returns {Nullable<HTMLElement>} A `label` element with the class `vega-input-range-hint` containing a `vega-font` element
    * with the variant `font-footnote1-short` and color `text-secondary`, displaying the hint text stored
    * in the `this.hint` property.
    */

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-opened-modal-stack-controller.js

@@ -34,7 +34,7 @@ export class VegaModalOpenedModalStackController extends VegaSlimmer {
   /**
    * Returns the previous HTMLVegaModalElement from the openedModalStack if it exists.
    *
-   * @returns {Nullable<HTMLElement>} - The previous HTMLVegaModalElement.
+   * @returns {Nullable<HTMLVegaModalElement>} - The previous HTMLVegaModalElement.
    */
   peek() {
     const length = this.length();

package/dist/collection/components/vega-nav/vega-left-nav-group/slimmers/renderers/vega-left-nav-group-renderer.js

@@ -31,7 +31,7 @@ export class VegaLeftNavGroupRenderer extends VegaSlimmer {
   /**
    * Get the map of the row form refs
    *
-   * @returns {Map} The map of row form refs
+   * @returns {HTMLDivElement} The map of row form refs
    */
   getGroupContainer() {
     return this.groupContainer;

package/dist/collection/components/vega-pagination/slimmers/controllers/vega-pagination-current-page-observer-controller.js

@@ -0,0 +1,38 @@
+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 { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalPaginationCurrentChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** The `VegaPaginationCurrentPageObserverController` class is responsible for adding and removing observers for pagination current in Vega component. */
+export class VegaPaginationCurrentPageObserverController extends VegaSlimmer {
+  /**
+   * Add the pagination current subject observer
+   */
+  registerPaginationCurrentChangeObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalPaginationCurrentChange, (payload) => {
+      this.current = Number(payload.detail);
+    });
+  }
+  /**
+   * Remove the pagination current subject observer
+   */
+  unregisterPaginationCurrentChangeObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalPaginationCurrentChange);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaPaginationCurrentPageObserverController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaPaginationCurrentPageObserverController.prototype, "current", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaPaginationCurrentPageObserverController.prototype, "registerPaginationCurrentChangeObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaPaginationCurrentPageObserverController.prototype, "unregisterPaginationCurrentChangeObserver", null);

package/dist/collection/components/vega-pagination/slimmers/controllers/vega-pagination-layout-controller.js

@@ -0,0 +1,83 @@
+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 { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+/** Manage the layout of vega-pagination */
+export class VegaPaginationLayoutController extends PageResizeObserverSlimmer {
+  /**
+   * Register the callback function to page resize observer slimmer
+   */
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => {
+        this.calculatePaginationLayout();
+      },
+    });
+    /** calculate the horizontal or vertical layout of vega-pagination */
+    this.calculatePaginationLayout = () => {
+      if (this.currentLayout === 'vertical') {
+        this.host.classList.add('vega-pagination-vertical');
+        this.host.classList.remove('vega-pagination-horizontal');
+      }
+      else {
+        this.host.classList.remove('vega-pagination-vertical');
+        this.host.classList.add('vega-pagination-horizontal');
+        const hostOffsetHeight = this.host.offsetHeight;
+        const directVegaFlexElements = Array.from(this.host.shadowRoot.children).filter((child) => child.tagName === 'VEGA-FLEX');
+        const isLineWrapped = directVegaFlexElements.every((vegaFlexElement) => hostOffsetHeight > vegaFlexElement.offsetHeight);
+        /*
+         * The next line is covered in e2e-test
+         * @see{should-render-layout-properly-when-set-responsive-prop-layout}
+         */
+        /* istanbul ignore next */
+        if (isLineWrapped) {
+          this.host.classList.add('vega-pagination-vertical');
+          this.host.classList.remove('vega-pagination-horizontal');
+        }
+      }
+    };
+  }
+  /** set the currentLayout when component will load */
+  componentWillLoad() {
+    this.setCurrentLayout();
+  }
+  /*
+   * The next line is covered in e2e-test
+   * @see{should-render-layout-properly-when-set-responsive-prop-layout}
+   */
+  /* istanbul ignore next */
+  /** set the currentLayout when currentBreakpoint changes */
+  watchCurrentBreakpoint() {
+    this.setCurrentLayout();
+  }
+  /** set the currentLayout and calculate pagination layout when layout changes */
+  watchLayout() {
+    this.setCurrentLayout();
+    this.calculatePaginationLayout();
+  }
+  /** set the value of currentLayout */
+  setCurrentLayout() {
+    this.currentLayout = ResponsiveFormatFacade.formatCustom(this.layout);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaPaginationLayoutController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaPaginationLayoutController.prototype, "layout", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaPaginationLayoutController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchCurrentBreakpoint')
+], VegaPaginationLayoutController.prototype, "watchCurrentBreakpoint", null);
+__decorate([
+  MapToComponentMethod('watchLayout')
+], VegaPaginationLayoutController.prototype, "watchLayout", null);

package/dist/collection/components/vega-pagination/slimmers/controllers/vega-pagination-page-size-observer-controller.js

@@ -0,0 +1,38 @@
+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 { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalPaginationPageSizeChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** The `VegaPaginationPageSizeObserverController` class is responsible for adding and removing observers for pagination page size in Vega component. */
+export class VegaPaginationPageSizeObserverController extends VegaSlimmer {
+  /**
+   * Add the pagination page size subject observer
+   */
+  registerPaginationPageSizeChangeObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalPaginationPageSizeChange, (payload) => {
+      this.pageSize = Number(payload.detail);
+    });
+  }
+  /**
+   * Remove the pagination page size subject observer
+   */
+  unregisterPaginationPageSizeChangeObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalPaginationPageSizeChange);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaPaginationPageSizeObserverController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaPaginationPageSizeObserverController.prototype, "pageSize", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaPaginationPageSizeObserverController.prototype, "registerPaginationPageSizeChangeObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaPaginationPageSizeObserverController.prototype, "unregisterPaginationPageSizeChangeObserver", null);

package/dist/collection/components/vega-pagination/vega-pagination-page-selector-mobile/slimmers/renderers/page-selector-mobile-renderer.js

@@ -0,0 +1,74 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaBlur, VegaFormSubmit } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { convertToNumber, normalizeNumberByRanger } from '../../../../../utils/number';
+export class PageSelectorMobileRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleChange = () => {
+      if (this.inputRef.value) {
+        const goToPage = normalizeNumberByRanger(convertToNumber(this.inputRef.value, 1), 1, this.pageCount);
+        this.inputRef.value = goToPage.toString();
+        this.prevAndNextButtonRenderer.notifyParentPagination(goToPage.toString());
+      }
+    };
+  }
+  render() {
+    if (this.type === 'pageSelectorMobile') {
+      return this.renderPageSelectorMobile();
+    }
+    else {
+      return this.renderPageSelectorMobileAndGoTo();
+    }
+  }
+  renderPageSelectorMobile() {
+    return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
+      this.prevAndNextButtonRenderer.render('prev'),
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.current.toString()),
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, "/"),
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.pageCount.toString()),
+      this.prevAndNextButtonRenderer.render('next')));
+  }
+  renderPageSelectorMobileAndGoTo() {
+    return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
+      this.prevAndNextButtonRenderer.render('prev'),
+      h("vega-form", { ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, this.handleChange);
+        } },
+        h("vega-input", { "data-vega-form": "pageSelectorMobile_goTo", size: "small", showClearIcon: false, style: { width: '54px' }, maskConfig: {
+            type: 'number',
+            options: {
+              allowNegative: false,
+              precision: 0,
+            },
+          }, value: this.current.toString(), ref: (ref) => {
+            this.inputRef = ref;
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, this.handleChange);
+          } })),
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, "/"),
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.pageCount.toString()),
+      this.prevAndNextButtonRenderer.render('next')));
+  }
+}
+__decorate([
+  MapToComponentField()
+], PageSelectorMobileRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], PageSelectorMobileRenderer.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], PageSelectorMobileRenderer.prototype, "current", void 0);
+__decorate([
+  MapToComponentField()
+], PageSelectorMobileRenderer.prototype, "pageCount", void 0);
+__decorate([
+  MapToComponentField()
+], PageSelectorMobileRenderer.prototype, "prevAndNextButtonRenderer", void 0);