@globalpayments/vega 2.41.0 → 2.42.0

package/dist/cjs/vega-pagination-page-size-selector-mobile.cjs.entry.js

@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-09acd3c9.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const component = require('./component-73a88c4e.js');
+const translationSlimmer = require('./translation-slimmer-593b92fe.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 changeManager = require('./change-manager-a297e4d2.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
+require('./translation-2c8a32bb.js');
+require('./static-subject-title-64175f06.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+
+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;
+};
+class PageSizeSelectorMobileRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render() {
+    if (this.type === 'pageSizeSelectorMobile') {
+      return this.renderPageSizeSelectorMobile();
+    }
+    else {
+      return this.renderPageSizeSelectorMobileAndCurrentPageLabel();
+    }
+  }
+  renderPageSizeSelectorMobile() {
+    return (index.h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-4" },
+      index.h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t('Show')),
+      this.pageSizeSelectorMobileDropdownRenderer.render(index.h("vega-button-link", { label: `${this.pageSize.toString()} items / page` }))));
+  }
+  renderPageSizeSelectorMobileAndCurrentPageLabel() {
+    const rangeFrom = this.total > 0 ? this.pageSize * (this.current - 1) + 1 : 0;
+    const rangeTo = Math.min(this.current * this.pageSize, this.total);
+    return (index.h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-4" },
+      index.h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t('Viewing')),
+      this.pageSizeSelectorMobileDropdownRenderer.render(index.h("vega-button-link", { label: this.translationSlimmer.t(`${rangeFrom}-${rangeTo}`) })),
+      index.h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t(`of ${this.total}`))));
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "translationSlimmer", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "type", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "pageSize", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "total", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "current", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "pageSizeSelectorMobileDropdownRenderer", void 0);
+
+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;
+};
+class PageSizeSelectorMobileDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Renders the dropdown component with the provided children.
+   *
+   * @param {HTMLElement} children HTML element children to be rendered inside the dropdown.
+   * @returns {HTMLElement} The rendered dropdown component.
+   */
+  render(children) {
+    var _a;
+    /* istanbul ignore next */
+    const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
+      ? this.pageSizeSelectorOptions
+      : [...this.pageSizeSelectorOptions, this.pageSize];
+    const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
+    const itemsPerPageLabel = this.translationSlimmer.t('Items Per Page');
+    return (index.h("vega-dropdown", { trigger: "click", selectType: "single", alignment: "center", minWidth: 160, selectedSourceKey: this.pageSize.toString(), source: [
+        {
+          key: 'items-per-page',
+          label: itemsPerPageLabel,
+          children: [
+            ...mergedPageSizeOptions.map((option) => ({
+              key: option.toString(),
+              label: option.toString(),
+            })),
+          ],
+        },
+      ], ref: (node) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectFactory.VegaDropdownClick, (payload) => {
+          this.notifyParentPagination(payload.detail);
+        });
+      }, isScreenPosition: (_a = this.dropdownProps) === null || _a === void 0 ? void 0 : _a.isScreenPosition }, children));
+  }
+  notifyParentPagination(detail) {
+    const pagination = ui.findParent(this.host, 'vega-pagination');
+    if (pagination) {
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(pagination, vegaInternalEventId.VegaInternalPaginationPageSizeChange), {
+        host: this.host,
+        detail,
+      });
+    }
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "pageSizeSelectorOptions", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], PageSizeSelectorMobileDropdownRenderer.prototype, "pageSize", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "dropdownProps", void 0);
+
+const vegaPaginationPageSizeSelectorMobileCss = ":host{display:inline-block}";
+
+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;
+  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;
+};
+const VegaPaginationPageSizeSelectorMobile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.pageSizeSelectorMobileRenderer = new PageSizeSelectorMobileRenderer();
+    this.pageSizeSelectorMobileDropdownRenderer = new PageSizeSelectorMobileDropdownRenderer();
+    /**
+     * Specifies the number of data items to be displayed per page
+     *
+     * @vegaVersion 2.42.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.pageSize = 10;
+    /**
+     * Specifies the options available for the page size selector
+     *
+     * @vegaVersion 2.42.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.pageSizeSelectorOptions = [10, 20, 50, 100];
+    /**
+     * Specifies the total number of data items
+     *
+     * @vegaVersion 2.42.0
+     */
+    this.total = 0;
+    /**
+     * Specifies the current page number
+     *
+     * @vegaVersion 2.42.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.current = 1;
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.pageSizeSelectorMobileRenderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "translationSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "pageSizeSelectorMobileRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "pageSizeSelectorMobileDropdownRenderer", void 0);
+VegaPaginationPageSizeSelectorMobile.style = vegaPaginationPageSizeSelectorMobileCss;
+
+exports.vega_pagination_page_size_selector_mobile = VegaPaginationPageSizeSelectorMobile;

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

@@ -5,24 +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-5f0eae19.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
-const ui = require('./ui-5fd9b267.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-4beb1fde.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.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('./internal-vega-event-manager-e5e4bcf4.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-3c6666df.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;
@@ -97,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 = '...';
@@ -186,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;
@@ -212,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.
      */
@@ -251,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.
@@ -263,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));
       })));
     };
@@ -281,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) => {
@@ -331,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();
   }
@@ -345,6 +552,8 @@ const VegaPagination = class {
     this.vegaPageSizeChangeEventEmitter.emit(this.pageSize);
     this.pageCount = this.calculatePages();
   }
+  watchLayout() {
+  }
   componentWillLoad() {
     this.pageCount = this.calculatePages();
     this.currentValueGuard();
@@ -353,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([
@@ -384,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) {