@globalpayments/vega 2.41.0 → 2.42.0

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

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalPaginationCurrentChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** The `VegaPaginationCurrentPageObserverController` class is responsible for adding and removing observers for pagination current in Vega component. */
+export class VegaPaginationCurrentPageObserverController extends VegaSlimmer {
+  /**
+   * Add the pagination current subject observer
+   */
+  registerPaginationCurrentChangeObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalPaginationCurrentChange, (payload) => {
+      this.current = Number(payload.detail);
+    });
+  }
+  /**
+   * Remove the pagination current subject observer
+   */
+  unregisterPaginationCurrentChangeObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalPaginationCurrentChange);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaPaginationCurrentPageObserverController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaPaginationCurrentPageObserverController.prototype, "current", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaPaginationCurrentPageObserverController.prototype, "registerPaginationCurrentChangeObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaPaginationCurrentPageObserverController.prototype, "unregisterPaginationCurrentChangeObserver", null);

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

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

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

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalPaginationPageSizeChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** The `VegaPaginationPageSizeObserverController` class is responsible for adding and removing observers for pagination page size in Vega component. */
+export class VegaPaginationPageSizeObserverController extends VegaSlimmer {
+  /**
+   * Add the pagination page size subject observer
+   */
+  registerPaginationPageSizeChangeObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalPaginationPageSizeChange, (payload) => {
+      this.pageSize = Number(payload.detail);
+    });
+  }
+  /**
+   * Remove the pagination page size subject observer
+   */
+  unregisterPaginationPageSizeChangeObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalPaginationPageSizeChange);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaPaginationPageSizeObserverController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaPaginationPageSizeObserverController.prototype, "pageSize", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaPaginationPageSizeObserverController.prototype, "registerPaginationPageSizeChangeObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaPaginationPageSizeObserverController.prototype, "unregisterPaginationPageSizeChangeObserver", null);

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

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

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

@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { findParent } from '../../../../../utils/ui';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalPaginationCurrentChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+export class PrevAndNextButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.pagerButton = (icon, isDisabled, handleClick) => {
+      return (h("vega-button-circle", { variant: "icon-only", icon: icon, iconColor: "text-link", size: "small", disabled: isDisabled, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, handleClick);
+        } }));
+    };
+    /** Render the prev button of the page selector mobile **/
+    this.renderPrevButton = () => {
+      const isDisabled = this.total === 0 || this.current === 1;
+      return this.pagerButton('chevron-left', isDisabled, () => {
+        this.notifyParentPagination((this.current - 1).toString());
+      });
+    };
+    /** Render the next button of the page selector mobile **/
+    this.renderNextButton = () => {
+      const isDisabled = this.total === 0 || this.current === this.pageCount;
+      return this.pagerButton('chevron-right', isDisabled, () => {
+        this.notifyParentPagination((this.current + 1).toString());
+      });
+    };
+  }
+  notifyParentPagination(detail) {
+    const pagination = findParent(this.host, 'vega-pagination');
+    if (pagination) {
+      changeManager.notify(domNodeSubjectFactory.getSubject(pagination, VegaInternalPaginationCurrentChange), {
+        host: this.host,
+        detail,
+      });
+    }
+  }
+  render(buttonType) {
+    if (buttonType === 'prev') {
+      return this.renderPrevButton();
+    }
+    else {
+      return this.renderNextButton();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], PrevAndNextButtonRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], PrevAndNextButtonRenderer.prototype, "current", void 0);
+__decorate([
+  MapToComponentField()
+], PrevAndNextButtonRenderer.prototype, "total", void 0);
+__decorate([
+  MapToComponentField()
+], PrevAndNextButtonRenderer.prototype, "pageCount", void 0);

package/dist/collection/components/vega-pagination/vega-pagination-page-selector-mobile/vega-pagination-page-selector-mobile.css

@@ -0,0 +1,8 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: inline-block;
+}

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

@@ -0,0 +1,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Host, h, Element, Prop } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { PageSelectorMobileRenderer } from './slimmers/renderers/page-selector-mobile-renderer';
+import { PrevAndNextButtonRenderer } from './slimmers/renderers/prev-and-next-button-renderer';
+import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
+/**
+ * @vegaVersion 2.42.0
+ */
+export class VegaPaginationPageSelectorMobile {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.childEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
+    this.pageSelectorMobileRenderer = new PageSelectorMobileRenderer();
+    this.prevAndNextButtonRenderer = new PrevAndNextButtonRenderer();
+    /**
+     * Total number of pages.
+     *
+     * @vegaVersion 2.42.0
+     */
+    this.pageCount = 0;
+    /**
+     * Specifies the current page number
+     *
+     * @vegaVersion 2.42.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.current = 1;
+    /**
+     * Specifies the total number of data items
+     *
+     * @vegaVersion 2.42.0
+     */
+    this.total = 0;
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.pageSelectorMobileRenderer.render()), this.host);
+  }
+  static get is() { return "vega-pagination-page-selector-mobile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-pagination-page-selector-mobile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-pagination-page-selector-mobile.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'pageSelectorMobile' | 'pageSelectorMobile_goTo'",
+        "resolved": "\"pageSelectorMobile\" | \"pageSelectorMobile_goTo\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.42.0"
+          }],
+        "text": "Specifies the type of the pagination elements."
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "pageCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.42.0"
+          }],
+        "text": "Total number of pages."
+      },
+      "attribute": "page-count",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "current": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.42.0"
+          }],
+        "text": "Specifies the current page number"
+      },
+      "attribute": "current",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.42.0"
+          }],
+        "text": "Specifies the total number of data items"
+      },
+      "attribute": "total",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaPaginationPageSelectorMobile.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSelectorMobile.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSelectorMobile.prototype, "childEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSelectorMobile.prototype, "pageSelectorMobileRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPaginationPageSelectorMobile.prototype, "prevAndNextButtonRenderer", void 0);

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

@@ -0,0 +1,71 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { findParent } from '../../../../../utils/ui';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalPaginationPageSizeChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+export 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([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "pageSizeSelectorOptions", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], PageSizeSelectorMobileDropdownRenderer.prototype, "pageSize", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "dropdownProps", void 0);

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

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+export 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([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "pageSize", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "total", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "current", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileRenderer.prototype, "pageSizeSelectorMobileDropdownRenderer", void 0);

package/dist/collection/components/vega-pagination/vega-pagination-page-size-selector-mobile/vega-pagination-page-size-selector-mobile.css

@@ -0,0 +1,8 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: inline-block;
+}