@globalpayments/vega 2.41.0 → 2.43.0

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

@@ -0,0 +1,198 @@
+import { h, r as registerInstance, H as Host, g as getElement } from './index-187f71d1.js';
+import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { T as TranslationSlimmer } from './translation-slimmer-a8c20249.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-d661fc7c.js';
+import { b as VegaDropdownClick, d as domNodeSubjectFactory } from './dom-node-subject-factory-286df025.js';
+import { f as findParent } from './ui-ed1283bb.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { j as VegaInternalPaginationPageSizeChange } from './vega-internal-event-id-d7113cf7.js';
+import './translation-a18bc15e.js';
+import './static-subject-title-249c76cd.js';
+import './create-public-api-runtime-metrics-slimmer-8ada793f.js';
+import './dynamic-slimmer-90b8af32.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 VegaSlimmer {
+  render() {
+    if (this.type === 'pageSizeSelectorMobile') {
+      return this.renderPageSizeSelectorMobile();
+    }
+    else {
+      return this.renderPageSizeSelectorMobileAndCurrentPageLabel();
+    }
+  }
+  renderPageSizeSelectorMobile() {
+    return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-4" },
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t('Show')),
+      this.pageSizeSelectorMobileDropdownRenderer.render(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 (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-4" },
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t('Viewing')),
+      this.pageSizeSelectorMobileDropdownRenderer.render(h("vega-button-link", { label: this.translationSlimmer.t(`${rangeFrom}-${rangeTo}`) })),
+      h("vega-font", { variant: "font-field-label", color: "text-primary" }, this.translationSlimmer.t(`of ${this.total}`))));
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "translationSlimmer", void 0);
+__decorate$2([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "type", void 0);
+__decorate$2([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "pageSize", void 0);
+__decorate$2([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "total", void 0);
+__decorate$2([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "current", void 0);
+__decorate$2([
+  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 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 (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.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
+          this.notifyParentPagination(payload.detail);
+        });
+      }, isScreenPosition: (_a = this.dropdownProps) === null || _a === void 0 ? void 0 : _a.isScreenPosition }, children));
+  }
+  notifyParentPagination(detail) {
+    const pagination = findParent(this.host, 'vega-pagination');
+    if (pagination) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(pagination, VegaInternalPaginationPageSizeChange), {
+        host: this.host,
+        detail,
+      });
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "pageSizeSelectorOptions", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], PageSizeSelectorMobileDropdownRenderer.prototype, "pageSize", void 0);
+__decorate$1([
+  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) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new 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 sanitizeVegaComponent(h(Host, null, this.pageSizeSelectorMobileRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "pageSizeSelectorMobileRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSizeSelectorMobile.prototype, "pageSizeSelectorMobileDropdownRenderer", void 0);
+VegaPaginationPageSizeSelectorMobile.style = vegaPaginationPageSizeSelectorMobileCss;
+
+export { VegaPaginationPageSizeSelectorMobile as vega_pagination_page_size_selector_mobile };

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

@@ -1,24 +1,38 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-187f71d1.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { n as normalizeNumberByRanger, c as convertToNumber } from './number-4398f2e1.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
-import { v as VegaFormSubmit, A as VegaBlur, f as VegaChange, a as VegaClick, K as VegaPageSizeChange } from './dom-node-subject-factory-5831cdd4.js';
-import { a as arrayToClassString } from './ui-62e4be97.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-851ad927.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
-import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-d661fc7c.js';
+import { v as VegaFormSubmit, A as VegaBlur, f as VegaChange, a as VegaClick, K as VegaPageSizeChange } from './dom-node-subject-factory-286df025.js';
+import { a as arrayToClassString } from './ui-ed1283bb.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-aab1c019.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-acc7fbb7.js';
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { T as TranslationSlimmer } from './translation-slimmer-7974f30b.js';
-import './change-manager-6a7eb88c.js';
-import './internal-vega-event-manager-07e1b3d9.js';
+import { T as TranslationSlimmer } from './translation-slimmer-a8c20249.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-175aee98.js';
+import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-15a84d26.js';
+import { j as VegaInternalPaginationPageSizeChange, k as VegaInternalPaginationCurrentChange } from './vega-internal-event-id-d7113cf7.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-91e7eaa1.js';
+import './vega-skeleton-loader-controller-722a41c2.js';
+import { F as FeatureFlag } from './feature-flag-controller-690eac1d.js';
+import './content-state-2b4fdc4f.js';
+import './icon-manager-638dd4d4.js';
+import './wait-for-vega-handler-b18eb955.js';
+import './translation-a18bc15e.js';
+import './change-manager-6a7eb88c.js';
+import './internal-vega-event-manager-d2c962d2.js';
+import './dynamic-slimmer-90b8af32.js';
+import './type-guard-158f6d7a.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-396de03f.js';
+import './pixel-f32c07ce.js';
+import './array-3113609f.js';
+import './create-public-api-runtime-metrics-slimmer-8ada793f.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
-import './dynamic-slimmer-90b8af32.js';
-import './translation-c08f2274.js';
-import './static-subject-title-8268945e.js';
-import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import './static-subject-title-249c76cd.js';
 
 const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, translationSlimmer, }) => {
   const rangeFrom = total > 0 ? pageSize * (current - 1) + 1 : 0;
@@ -93,7 +107,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 = '...';
@@ -182,7 +196,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 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$3([
+  MapToComponentField()
+], VegaPaginationPageSizeObserverController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaPaginationPageSizeObserverController.prototype, "pageSize", void 0);
+__decorate$3([
+  MapToComponentMethod('connectedCallback')
+], VegaPaginationPageSizeObserverController.prototype, "registerPaginationPageSizeChangeObserver", null);
+__decorate$3([
+  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 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$2([
+  MapToComponentField()
+], VegaPaginationCurrentPageObserverController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaPaginationCurrentPageObserverController.prototype, "current", void 0);
+__decorate$2([
+  MapToComponentMethod('connectedCallback')
+], VegaPaginationCurrentPageObserverController.prototype, "registerPaginationCurrentChangeObserver", null);
+__decorate$2([
+  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 {
+  /**
+   * 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$1([
+  MapToComponentField()
+], VegaPaginationLayoutController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaPaginationLayoutController.prototype, "layout", void 0);
+__decorate$1([
+  MapToComponentMethod('componentWillLoad')
+], VegaPaginationLayoutController.prototype, "componentWillLoad", null);
+__decorate$1([
+  MapToComponentMethod('watchCurrentBreakpoint')
+], VegaPaginationLayoutController.prototype, "watchCurrentBreakpoint", null);
+__decorate$1([
+  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;
@@ -208,12 +375,21 @@ const VegaPagination = class {
     this.vegaChangeEventEmitter = createEventEmitSlimmer(VegaPagination, VegaChange);
     this.vegaPageSizeChangeEventEmitter = createEventEmitSlimmer(VegaPagination, VegaPageSizeChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaPaginationPageSizeObserverController = new VegaPaginationPageSizeObserverController();
+    this.vegaPaginationCurrentPageObserverController = new VegaPaginationCurrentPageObserverController();
+    this.breakpointPageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaPaginationLayoutController = new VegaPaginationLayoutController();
     this.vegaPaginationItemTypes = [
       'currentPageLabel',
       'pageSizeSelector',
       'pageSelector',
       'goTo',
+      'pageSelectorMobile',
+      'pageSizeSelectorMobile',
+      'pageSelectorMobile_goTo',
+      'pageSizeSelectorMobile_currentPageLabel',
     ];
+    this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Total number of pages.
      */
@@ -247,9 +423,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 = 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.
@@ -259,7 +453,7 @@ const VegaPagination = class {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.pageSizeSelectorOptions = [10, 20, 50, 100];
     this.renderPaginationItemsWrapper = (extensionArr) => {
-      return (h("vega-flex", { gap: "size-24", alignItems: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
+      return (h("vega-flex", { gap: { default: 'size-4', M: 'size-24' }, flexWrap: "wrap", alignItems: "center", justifyContent: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
         return h("div", { key: item }, this.renderPaginationItem(item));
       })));
     };
@@ -277,6 +471,12 @@ const VegaPagination = class {
           return (h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
         case 'goTo':
           return (h(VegaPaginationGoTo, { onChange: this.handlePaginationGoToChange, pageCount: this.pageCount, translationSlimmer: this.translationSlimmer }));
+        case 'pageSelectorMobile':
+        case 'pageSelectorMobile_goTo':
+          return (h("vega-pagination-page-selector-mobile", { type: item, pageCount: this.pageCount, current: this.current, total: this.total }));
+        case 'pageSizeSelectorMobile':
+        case 'pageSizeSelectorMobile_currentPageLabel':
+          return (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) => {
@@ -327,6 +527,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();
   }
@@ -341,6 +548,8 @@ const VegaPagination = class {
     this.vegaPageSizeChangeEventEmitter.emit(this.pageSize);
     this.pageCount = this.calculatePages();
   }
+  watchLayout() {
+  }
   componentWillLoad() {
     this.pageCount = this.calculatePages();
     this.currentValueGuard();
@@ -349,14 +558,17 @@ const VegaPagination = class {
     }
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.removeDuplicateItems(this.extensions).map(this.renderPaginationItemsWrapper)), this.host);
+    const currentExtensions = ResponsiveFormatFacade.formatCustom(this.extensions);
+    return sanitizeVegaComponent(h(Host, null, this.removeDuplicateItems(currentExtensions).map(this.renderPaginationItemsWrapper)), this.host);
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "currentBreakpoint": ["watchCurrentBreakpoint"],
     "pageCount": ["watchPageCount"],
     "current": ["watchCurrent"],
     "total": ["watchTotal"],
-    "pageSize": ["watchPageSize"]
+    "pageSize": ["watchPageSize"],
+    "layout": ["watchLayout"]
   }; }
 };
 __decorate([
@@ -380,6 +592,18 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaPagination.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationPageSizeObserverController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationCurrentPageObserverController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "breakpointPageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationLayoutController", void 0);
 VegaPagination.style = vegaPaginationCss;
 
 export { VegaPagination as vega_pagination };

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, g as getElement, H as Host } from './index-187f71d1.js';
-import { h as array, t as tau, j as constant, I as InteractingEntryGenerator, k as d3Select, B as BaseDrawer, a as BaseChart, L as LayoutInputProcessor, P as ProcessorChain, b as LegendInputProcessor, c as LegendDrawer } from './legend-input-processor-15939912.js';
+import { h as array, t as tau, j as constant, I as InteractingEntryGenerator, k as d3Select, B as BaseDrawer, a as BaseChart, L as LayoutInputProcessor, P as ProcessorChain, b as LegendInputProcessor, c as LegendDrawer } from './legend-input-processor-8bcd5c5a.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import './array-b668466e.js';
+import './array-3113609f.js';
 import './number-4398f2e1.js';
 import './typography-396de03f.js';
 import './pixel-f32c07ce.js';
@@ -214,7 +214,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) {
@@ -237,7 +237,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) {