@globalpayments/vega 2.40.0 → 2.42.0

package/dist/cjs/vega-pagination.cjs.entry.js

@@ -5,25 +5,38 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
 const number = require('./number-4816603d.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const ui = require('./ui-5fd9b267.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-8f9ed458.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const ui = require('./ui-13b42af0.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-7f59159e.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-93183c4d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const translationSlimmer = require('./translation-slimmer-510906bc.js');
-require('./change-manager-a297e4d2.js');
-require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-981dfd1c.js');
+const translationSlimmer = require('./translation-slimmer-593b92fe.js');
+const responsiveFormatFacade = require('./responsive-format-facade-9439e9ae.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-7b22e598.js');
+require('./vega-skeleton-loader-controller-1c91112a.js');
+const featureFlagController = require('./feature-flag-controller-ccf4a113.js');
+require('./content-state-45707be4.js');
+require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./translation-2c8a32bb.js');
+require('./change-manager-a297e4d2.js');
+require('./internal-vega-event-manager-cd87600e.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./type-guard-4ba85fdc.js');
+require('./breakpoints-ebde4837.js');
+require('./ui-32e69595.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+require('./pixel-98f2a10c.js');
+require('./array-3aa164ce.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./dynamic-slimmer-f31fdfd7.js');
-require('./translation-6848c389.js');
-require('./static-subject-title-c589a1bd.js');
-require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+require('./static-subject-title-64175f06.js');
 
 const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, translationSlimmer, }) => {
   const rangeFrom = total > 0 ? pageSize * (current - 1) + 1 : 0;
@@ -98,7 +111,7 @@ const MINIMAL_PAGER_ITEM_COUNT = 7;
  * @param {number} current - the current page number
  * @param {number} total - the total number of pages
  * @param {number} [pagerCount=7] - the count of pager items, must be odd number
- * @returns {(number|string)[]} returns an array of page numbers and placeholders
+ * @returns {(number | string)[]} returns an array of page numbers and placeholders
  */
 const generatePagerItems = (current, total, pagerCount = MINIMAL_PAGER_ITEM_COUNT) => {
   const ellipsisPlaceholder = '...';
@@ -187,7 +200,160 @@ const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) =>
     renderNextButton()));
 };
 
-const vegaPaginationCss = ":host{display:flex;align-items:center;justify-content:space-between;gap:20px;line-height:normal}.vega-pagination{display:flex;padding:0px;margin:0px}.vega-pagination .vega-pagination-item{list-style-type:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-pagination .vega-pagination-item button{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));border-width:0px;outline:2px solid transparent;outline-offset:2px;width:100%;height:100%;cursor:pointer;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-pagination .vega-pagination-item.pager-ellipsis{cursor:default}.vega-pagination .vega-pagination-item:not(.pager-ellipsis):not(:active):hover{text-decoration:underline;text-underline-offset:2px}.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.vega-pagination .vega-pagination-item button:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));border-radius:9999px}.vega-pagination .vega-pagination-button{list-style-type:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
+var __decorate$3 = (undefined && undefined.__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;
+};
+/** The `VegaPaginationPageSizeObserverController` class is responsible for adding and removing observers for pagination page size in Vega component. */
+class VegaPaginationPageSizeObserverController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Add the pagination page size subject observer
+   */
+  registerPaginationPageSizeChangeObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalPaginationPageSizeChange, (payload) => {
+      this.pageSize = Number(payload.detail);
+    });
+  }
+  /**
+   * Remove the pagination page size subject observer
+   */
+  unregisterPaginationPageSizeChangeObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalPaginationPageSizeChange);
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaPaginationPageSizeObserverController.prototype, "host", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaPaginationPageSizeObserverController.prototype, "pageSize", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaPaginationPageSizeObserverController.prototype, "registerPaginationPageSizeChangeObserver", null);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaPaginationPageSizeObserverController.prototype, "unregisterPaginationPageSizeChangeObserver", null);
+
+var __decorate$2 = (undefined && undefined.__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;
+};
+/** The `VegaPaginationCurrentPageObserverController` class is responsible for adding and removing observers for pagination current in Vega component. */
+class VegaPaginationCurrentPageObserverController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Add the pagination current subject observer
+   */
+  registerPaginationCurrentChangeObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalPaginationCurrentChange, (payload) => {
+      this.current = Number(payload.detail);
+    });
+  }
+  /**
+   * Remove the pagination current subject observer
+   */
+  unregisterPaginationCurrentChangeObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalPaginationCurrentChange);
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaPaginationCurrentPageObserverController.prototype, "host", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaPaginationCurrentPageObserverController.prototype, "current", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaPaginationCurrentPageObserverController.prototype, "registerPaginationCurrentChangeObserver", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaPaginationCurrentPageObserverController.prototype, "unregisterPaginationCurrentChangeObserver", null);
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+/** Manage the layout of vega-pagination */
+class VegaPaginationLayoutController extends pageResizeObserverSlimmer.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.ResponsiveFormatFacade.formatCustom(this.layout);
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaPaginationLayoutController.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaPaginationLayoutController.prototype, "layout", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaPaginationLayoutController.prototype, "componentWillLoad", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchCurrentBreakpoint')
+], VegaPaginationLayoutController.prototype, "watchCurrentBreakpoint", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchLayout')
+], VegaPaginationLayoutController.prototype, "watchLayout", null);
+
+const vegaPaginationCss = ":host{display:flex;align-items:center;line-height:normal;flex-wrap:wrap}:host(.vega-pagination-horizontal){flex-direction:row;justify-content:space-between}:host(.vega-pagination-vertical){flex-direction:column;gap:16px;justify-content:center}@media (min-width: 320px){:host(.vega-pagination-horizontal){gap:4px}}@media (min-width: 768px){:host(.vega-pagination-horizontal){gap:24px}}.vega-pagination{display:flex;padding:0px;margin:0px}.vega-pagination .vega-pagination-item{list-style-type:none;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-pagination .vega-pagination-item button{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));border-width:0px;outline:2px solid transparent;outline-offset:2px;width:100%;height:100%;cursor:pointer;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-pagination .vega-pagination-item.pager-ellipsis{cursor:default}.vega-pagination .vega-pagination-item:not(.pager-ellipsis):not(:active):hover{text-decoration:underline;text-underline-offset:2px}.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-pagination .vega-pagination-item button:active,.vega-pagination .vega-pagination-item.active button{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.vega-pagination .vega-pagination-item button:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));border-radius:9999px}.vega-pagination .vega-pagination-button{list-style-type:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -213,12 +379,21 @@ const VegaPagination = class {
     this.vegaChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, domNodeSubjectFactory.VegaChange);
     this.vegaPageSizeChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaPagination, domNodeSubjectFactory.VegaPageSizeChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaPaginationPageSizeObserverController = new VegaPaginationPageSizeObserverController();
+    this.vegaPaginationCurrentPageObserverController = new VegaPaginationCurrentPageObserverController();
+    this.breakpointPageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
+    this.vegaPaginationLayoutController = new VegaPaginationLayoutController();
     this.vegaPaginationItemTypes = [
       'currentPageLabel',
       'pageSizeSelector',
       'pageSelector',
       'goTo',
+      'pageSelectorMobile',
+      'pageSizeSelectorMobile',
+      'pageSelectorMobile_goTo',
+      'pageSizeSelectorMobile_currentPageLabel',
     ];
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     /**
      * Total number of pages.
      */
@@ -252,9 +427,27 @@ const VegaPagination = class {
      * It refers to additional elements or components that can be added to
      *    enhance the functionality or appearance of each pagination item.
      *
+     * @VegaWarning Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. To enable the new responsive default value `{
+          default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
+          M: [['pageSelector']],
+        }`, please enable the feature flag.
      * @vegaVersion 1.25.0
+     * @defaultValue [['pageSelector']]
+     */
+    this.extensions = featureFlagController.FeatureFlag.isEnabled('VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE')
+      ? {
+        default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
+        M: [['pageSelector']],
+      }
+      : [['pageSelector']];
+    /**
+     * Specifies the layout of the elements.
+     *
+     * It determines how the pagination elements are arranged, with options such as 'horizontal' for a horizontal layout or other defined layouts.
+     *
+     * @vegaVersion 2.42.0
      */
-    this.extensions = [['pageSelector']];
+    this.layout = 'horizontal';
     /**
      * Specifies the options available for the page size selector
      *    in the pagination component.
@@ -264,7 +457,7 @@ const VegaPagination = class {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.pageSizeSelectorOptions = [10, 20, 50, 100];
     this.renderPaginationItemsWrapper = (extensionArr) => {
-      return (index.h("vega-flex", { gap: "size-24", alignItems: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
+      return (index.h("vega-flex", { gap: { default: 'size-4', M: 'size-24' }, flexWrap: "wrap", alignItems: "center", justifyContent: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
         return index.h("div", { key: item }, this.renderPaginationItem(item));
       })));
     };
@@ -282,6 +475,12 @@ const VegaPagination = class {
           return (index.h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
         case 'goTo':
           return (index.h(VegaPaginationGoTo, { onChange: this.handlePaginationGoToChange, pageCount: this.pageCount, translationSlimmer: this.translationSlimmer }));
+        case 'pageSelectorMobile':
+        case 'pageSelectorMobile_goTo':
+          return (index.h("vega-pagination-page-selector-mobile", { type: item, pageCount: this.pageCount, current: this.current, total: this.total }));
+        case 'pageSizeSelectorMobile':
+        case 'pageSizeSelectorMobile_currentPageLabel':
+          return (index.h("vega-pagination-page-size-selector-mobile", { type: item, pageSize: this.pageSize, current: this.current, total: this.total, pageSizeSelectorOptions: this.pageSizeSelectorOptions, dropdownProps: this.dropdownProps }));
       }
     };
     this.handlePaginationGoToChange = (page) => {
@@ -332,6 +531,13 @@ const VegaPagination = class {
       }
     };
   }
+  /*
+   * The next line is covered in e2e-test
+   * @see{should-render-layout-properly-when-set-responsive-prop-layout}
+   */
+  /* istanbul ignore next */
+  watchCurrentBreakpoint() {
+  }
   watchPageCount() {
     this.currentValueGuard();
   }
@@ -346,6 +552,8 @@ const VegaPagination = class {
     this.vegaPageSizeChangeEventEmitter.emit(this.pageSize);
     this.pageCount = this.calculatePages();
   }
+  watchLayout() {
+  }
   componentWillLoad() {
     this.pageCount = this.calculatePages();
     this.currentValueGuard();
@@ -354,14 +562,17 @@ const VegaPagination = class {
     }
   }
   render() {
-    return component.sanitizeVegaComponent(index.h(index.Host, null, this.removeDuplicateItems(this.extensions).map(this.renderPaginationItemsWrapper)), this.host);
+    const currentExtensions = responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.extensions);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.removeDuplicateItems(currentExtensions).map(this.renderPaginationItemsWrapper)), this.host);
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
+    "currentBreakpoint": ["watchCurrentBreakpoint"],
     "pageCount": ["watchPageCount"],
     "current": ["watchCurrent"],
     "total": ["watchTotal"],
-    "pageSize": ["watchPageSize"]
+    "pageSize": ["watchPageSize"],
+    "layout": ["watchLayout"]
   }; }
 };
 __decorate([
@@ -385,6 +596,18 @@ __decorate([
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaPagination.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationPageSizeObserverController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationCurrentPageObserverController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPagination.prototype, "breakpointPageResizeObserverSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationLayoutController", void 0);
 VegaPagination.style = vegaPaginationCss;
 
 exports.vega_pagination = VegaPagination;

package/dist/cjs/vega-pie-chart.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const legendInputProcessor = require('./legend-input-processor-d0b3f621.js');
+const legendInputProcessor = require('./legend-input-processor-b071654c.js');
 const component = require('./component-73a88c4e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-require('./array-5adef7b2.js');
+require('./array-3aa164ce.js');
 require('./number-4816603d.js');
 require('./typography-4560e7f1.js');
 require('./pixel-98f2a10c.js');
@@ -218,7 +218,7 @@ class PieChartArchPathInputProcessor {
    *
    * @param {ChartOptions<PieChartSourceType>} input - The input parameter is an object containing chart options, including the data source, colors, layout, donut radius, and type of chart.
    * @param {PieChartRadiusProcessResultType} previousOutput - previous result from the other input process
-   * @returns {{ renderOptions: ChartArcOptions }} An object with a property `renderOptions` which contains an object with properties `data`,
+   * @returns {ChartArcOptions} An object with a property `renderOptions` which contains an object with properties `data`,
    * `colors`, `outerRadius`, `donutRadius`, and `center`.
    */
   process(input, previousOutput) {
@@ -241,7 +241,7 @@ class PieChartTextInputProcessor {
    * This function processes input data to generate options for rendering a pie or donut chart with D3.js.
    *
    * @param {ChartArcOptions} input - chartArcPathInputProcessor process result
-   * @returns {{ renderOptions: TextInputType[] }} An object with a property `renderOptions` which contains an object with properties `data`,
+   * @returns {TextInputType[]} An object with a property `renderOptions` which contains an object with properties `data`,
    * `colors`, `outerRadius`, `donutRadius`, and `center`.
    */
   process(input) {

package/dist/cjs/vega-popover_2.cjs.entry.js

@@ -4,33 +4,41 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
-const injectKeyboardManager = require('./inject-keyboard-manager-4a5c27a2.js');
+const injectKeyboardManager = require('./inject-keyboard-manager-d1eac696.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-4f0dc8c6.js');
-const remoteInvocationRegistry = require('./remote-invocation-registry-32aaf6c2.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
-require('./keyboard-manager-2df53b2f.js');
-require('./ui-5fd9b267.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-93183c4d.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-ad1e5774.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-08e3c509.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
+require('./keyboard-manager-97d0ddfa.js');
+require('./ui-13b42af0.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./change-manager-a297e4d2.js');
-require('./dom-node-subject-observer-factory-80b3ac6c.js');
-require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-981dfd1c.js');
-require('./internal-vega-z-index-manager-f03ddb37.js');
-require('./number-4816603d.js');
-require('./page-resize-observer-slimmer-bb1eaebe.js');
-require('./breakpoints-17d6c4c7.js');
+require('./dom-node-subject-observer-factory-8f9ed458.js');
+require('./internal-vega-event-manager-cd87600e.js');
+require('./vega-skeleton-loader-controller-1c91112a.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+require('./page-resize-observer-slimmer-44e08878.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
+require('./number-4816603d.js');
 require('./type-guard-4ba85fdc.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./responsive-format-facade-a1983026.js');
+require('./responsive-format-facade-9439e9ae.js');
 require('./pixel-98f2a10c.js');
-require('./static-subject-title-c589a1bd.js');
+require('./array-3aa164ce.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./feature-flag-controller-ccf4a113.js');
+require('./index-8b247c17.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./content-state-45707be4.js');
+require('./static-subject-title-64175f06.js');
+require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./translation-2c8a32bb.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -52,7 +60,7 @@ class VegaPopoverAppenderRenderer extends globalSlimmerRegistry.VegaSlimmer {
   /**
    * The function returns the HTML element representing the Vega Popover Content Box.
    *
-   * @returns {HTMLElement} An HTMLVegaPopoverContentBoxElement is being returned.
+   * @returns {HTMLVegaPopoverContentBoxElement} An HTMLVegaPopoverContentBoxElement is being returned.
    */
   getPopoverContentBox() {
     return this.popoverContentBox;
@@ -60,7 +68,7 @@ class VegaPopoverAppenderRenderer extends globalSlimmerRegistry.VegaSlimmer {
   /**
    * The `render` function returns a JSX element for a `vega-popover-content-box` component with a ref assigned to `this.popoverContentBox`.
    *
-   * @returns {HTMLElement} An HTMLVegaPopoverContentBoxElement element wrapped in a vega-popover-content-box component is being returned.
+   * @returns {HTMLVegaPopoverContentBoxElement} An HTMLVegaPopoverContentBoxElement element wrapped in a vega-popover-content-box component is being returned.
    */
   render() {
     return (index.h("vega-popover-content-box", { ref: (el) => (this.popoverContentBox = el), showArrow: this.showArrow }));

package/dist/cjs/vega-progress-tracker.cjs.entry.js

@@ -3,20 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-8f9ed458.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const component = require('./component-73a88c4e.js');
 const number = require('./number-4816603d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
-const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-fc729fd9.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-93183c4d.js');
+const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-4f15005f.js');
 require('./change-manager-a297e4d2.js');
-require('./observer-f49483e8.js');
-require('./ui-5fd9b267.js');
+require('./ui-13b42af0.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-981dfd1c.js');
+require('./internal-vega-event-manager-cd87600e.js');
 require('./object-bbd4ed7f.js');
 
 const VegaProgressTrackerRuntimeMetricsPayloadDefinition = [

package/dist/cjs/vega-radio_2.cjs.entry.js

@@ -6,40 +6,38 @@ const index = require('./index-09acd3c9.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const component = require('./component-73a88c4e.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
-const observer = require('./observer-f49483e8.js');
-const ui = require('./ui-5fd9b267.js');
+const staticSubjectTitle = require('./static-subject-title-64175f06.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const ui = require('./ui-13b42af0.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-93183c4d.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
-const componentLoadRequired = require('./component-load-required-16d76afa.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-d92e8212.js');
-const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-4e60a929.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-feba3a83.js');
+const componentLoadRequired = require('./component-load-required-6cc74719.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-928d263f.js');
+const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-100dbe59.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-7f59159e.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-23ce5dcf.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-895b3d3e.js');
-const mutationObserverFilters = require('./mutation-observer-filters-e5a7f85a.js');
+const mutationObserverFilters = require('./mutation-observer-filters-1f8c32a3.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./dom-node-subject-observer-factory-80b3ac6c.js');
-require('./internal-vega-event-manager-981dfd1c.js');
+require('./dom-node-subject-observer-factory-8f9ed458.js');
+require('./internal-vega-event-manager-cd87600e.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./string-21427167.js');
-require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
-require('./translation-6848c389.js');
-require('./page-resize-observer-slimmer-bb1eaebe.js');
-require('./breakpoints-17d6c4c7.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+require('./translation-2c8a32bb.js');
+require('./page-resize-observer-slimmer-44e08878.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
-require('./array-5adef7b2.js');
+require('./array-3aa164ce.js');
 require('./number-4816603d.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-7b22e598.js');
+require('./feature-flag-controller-ccf4a113.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./keyboard-manager-2df53b2f.js');
+require('./keyboard-manager-97d0ddfa.js');
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -56,7 +54,7 @@ class VegaRadioShowErrorController extends globalSlimmerRegistry.VegaSlimmer {
     this.radioGroup =
       ui.findParent(this.host, 'vega-radio-group') || ui.findParent(this.host, 'vega-selection-tile-group');
     if (this.radioGroup) {
-      this.fieldErrorObserver = new observer.Observer(this.canAcceptFieldErrorObserver.bind(this), this.fieldErrorObserverListener.bind(this));
+      this.fieldErrorObserver = new domNodeSubjectFactory.Observer(this.canAcceptFieldErrorObserver.bind(this), this.fieldErrorObserverListener.bind(this));
       changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.radioGroup, vegaInternalEventId.VegaInternalFieldErrorStateChange), this.fieldErrorObserver);
     }
   }
@@ -255,7 +253,7 @@ const VegaRadio = class {
    */
   initAndRegisterGroupDisabledObserver() {
     if (ui.findParent(this.host, 'vega-radio-group')) {
-      this.groupDisabledObserver = new observer.Observer(this.canAcceptGroupDisabledObserver.bind(this), this.groupDisabledObserverListener.bind(this));
+      this.groupDisabledObserver = new domNodeSubjectFactory.Observer(this.canAcceptGroupDisabledObserver.bind(this), this.groupDisabledObserverListener.bind(this));
       changeManager.ChangeManager.register(staticSubjectTitle.RADIO_GROUP_DISABLED_CHANGE, this.groupDisabledObserver);
     }
   }
@@ -377,7 +375,7 @@ class VegaRadioGroupKeyboardController extends keyboardManagerSlimmer.KeyboardMa
   /**
    * filter out disabled elements.
    *
-   * @returns {Nullable<HTMLElement[]>} radios element
+   * @returns {Nullable<HTMLVegaRadioElement[]> } radios element
    */
   getNotDisabledRadioArray() {
     const radios = Array.from(this.host.querySelectorAll('vega-radio'));
@@ -488,7 +486,7 @@ class VegaRadioGroupRadioItemsController extends globalSlimmerRegistry.VegaSlimm
   /**
    * The function returns an array of HTMLVegaRadioElement objects.
    *
-   * @returns {HTMLElement[]} An array of HTMLVegaRadioElement objects is being returned.
+   * @returns {HTMLVegaRadioElement[]} An array of HTMLVegaRadioElement objects is being returned.
    */
   getRadioItemsArray() {
     return this.vegaRadioArray;