@heartlandone/vega 2.79.0 → 2.81.0

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

@@ -121,6 +121,15 @@ export class VegaModal {
      * @vegaVersion 1.0.10
      */
     this.padding = 'size-24';
+    /**
+     * Specifies the margin around the modal dialog.
+     *
+     * It accepts a ResponsiveType or size values.
+     * Set `x` to `auto` to horizontally center the modal.
+     *
+     * @vegaVersion 2.81.0
+     */
+    this.margin = { y: 'size-64', x: 'auto' };
     /**
      * Provides a callback function that is triggered when a user clicks the
      *    close button located in the top right corner of the modal.
@@ -145,6 +154,14 @@ export class VegaModal {
   watchSize() {
     methodPlaceholder();
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-height-e2e}
+   */
+  /* istanbul ignore next */
+  watchHeight() {
+    methodPlaceholder();
+  }
   watchOpen() {
     this.openState = new VegaModalOpenState(this.open, 'property');
   }
@@ -271,6 +288,31 @@ export class VegaModal {
       "attribute": "size",
       "reflect": false
     },
+    "height": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<number | string>",
+        "resolved": "number | string | { S?: string | number; M?: string | number; L?: string | number; XL?: string | number; default?: string | number; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Determines the height of the modal.\n\nIt accepts numeric values (interpreted as pixels), string values (e.g., \"100%\", \"100vh\"),\n   or ResponsiveType for responsive configurations."
+      },
+      "attribute": "height",
+      "reflect": false
+    },
     "open": {
       "type": "boolean",
       "mutable": true,
@@ -456,6 +498,36 @@ export class VegaModal {
       "reflect": false,
       "defaultValue": "'size-24'"
     },
+    "margin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<MarginType>",
+        "resolved": "\"0\" | \"auto\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "MarginType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Specifies the margin around the modal dialog.\n\nIt accepts a ResponsiveType or size values.\nSet `x` to `auto` to horizontally center the modal."
+      },
+      "attribute": "margin",
+      "reflect": false,
+      "defaultValue": "{ y: 'size-64', x: 'auto' }"
+    },
     "contentMaxHeight": {
       "type": "any",
       "mutable": false,
@@ -615,6 +687,9 @@ export class VegaModal {
     }, {
       "propName": "size",
       "methodName": "watchSize"
+    }, {
+      "propName": "height",
+      "methodName": "watchHeight"
     }, {
       "propName": "open",
       "methodName": "watchOpen"

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-open-state-controller.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { MapToComponentField, MapToComponentMethod, methodPlaceholder } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-resize-observer-slimmer';
 import { executeAfterTransition } from '../../../../../utils/effect';
 import { FeatureFlag } from '../../../../../helpers/feature-control/feature-flag-controller';
+import { checkIsVoiceOverClick, getFirstFocusableElement } from '../../../../../utils/ui';
 export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
   /**
    * The below method is e2e-test covered in
@@ -20,6 +21,11 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
         this.updateMainContentUI(this.openState);
       },
     });
+    this.isVoiceOverClick = false;
+    this.triggerElement = null;
+    this.handleClickEvent = (e) => {
+      this.isVoiceOverClick = checkIsVoiceOverClick(e);
+    };
     /* eslint-enable jsdoc/require-jsdoc*/
   }
   /**
@@ -37,10 +43,25 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     else {
       this.openState = 'close';
     }
+    // eslint-disable-next-line no-restricted-globals
+    window.addEventListener('click', this.handleClickEvent, { capture: true });
+  }
+  /**
+   * Component lifecycle - [componentDidRender]
+   */
+  componentDidRender() {
+    methodPlaceholder();
   }
   /** Call this method to toggle the left nav menu */
   async toggle() {
-    this.openState === 'open' ? (this.openState = 'close') : (this.openState = 'open');
+    if (this.openState === 'close') {
+      // eslint-disable-next-line no-restricted-globals
+      this.triggerElement = document.activeElement;
+      this.openState = 'open';
+    }
+    else {
+      this.openState = 'close';
+    }
   }
   watchOpen(newOpenValue) {
     if (newOpenValue) {
@@ -63,6 +84,12 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
       }
     }
     this.stateUpdateEventEmitter.emit(this.openState);
+    if (newState === 'open') {
+      this.focusFirstFocusableInDialog();
+    }
+    else {
+      this.focusFirstFocusableOutsideDialog();
+    }
   }
   watchShowAsOverlay() {
     this.updateMainContentUI(this.openState);
@@ -75,6 +102,59 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
   setOpenState(openState) {
     this.openState = openState;
   }
+  /**
+   * Focuses the first focusable element within the left nav dialog when it is opened via VoiceOver.
+   */
+  focusFirstFocusableInDialog() {
+    if (!this.isVoiceOverClick) {
+      return;
+    }
+    const dialogElement = this.host;
+    const focusableElement = getFirstFocusableElement(dialogElement);
+    if (focusableElement) {
+      executeAfterTransition(() => focusableElement.focus(), dialogElement, 300);
+    }
+  }
+  /**
+   * Focuses the triggering element when the left nav dialog is closed.
+   * Falls back to the first focusable element outside the dialog if the trigger is unavailable.
+   */
+  focusFirstFocusableOutsideDialog() {
+    var _a;
+    const triggerEl = this.triggerElement;
+    this.triggerElement = null;
+    const dialogEl = this.host;
+    if (triggerEl && triggerEl.isConnected) {
+      const focusable = (_a = getFirstFocusableElement(triggerEl)) !== null && _a !== void 0 ? _a : triggerEl;
+      focusable.focus();
+      return;
+    }
+    const firstFocusable = this.findFirstFocusableOutside(dialogEl);
+    firstFocusable && firstFocusable.focus();
+  }
+  findFirstFocusableOutside(excludeEl) {
+    // eslint-disable-next-line no-restricted-globals
+    const walk = (node) => {
+      const children = Array.from(node.children);
+      for (const child of children) {
+        if (child === excludeEl || excludeEl.contains(child)) {
+          continue;
+        }
+        if (child.contains(excludeEl)) {
+          const found = walk(child);
+          if (found)
+            return found;
+          continue;
+        }
+        const focusable = getFirstFocusableElement(child);
+        if (focusable)
+          return focusable;
+      }
+      return null;
+    };
+    // eslint-disable-next-line no-restricted-globals
+    return walk(document.body);
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-left-nav-e2e-resize-with-desktop}
@@ -129,6 +209,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaLeftNavOpenStateController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaLeftNavOpenStateController.prototype, "componentDidRender", null);
 __decorate([
   MapToComponentMethod('toggle')
 ], VegaLeftNavOpenStateController.prototype, "toggle", null);

package/dist/collection/components/vega-nav/vega-left-nav/vega-left-nav.js

@@ -12,6 +12,7 @@ import { VegaLeftNavHeaderRenderer } from './slimmers/renderers/vega-left-nav-he
 import { VegaLeftNavFooterRenderer } from './slimmers/renderers/vega-left-nav-footer-renderer';
 import { VegaLeftNavZIndexController } from './slimmers/controllers/vega-left-nav-zindex-controller';
 import { VegaLeftNavBackdropController } from './slimmers/controllers/vega-left-nav-backdrop-controller';
+import { InjectKeyboardManager } from '../../../decorators/property-decorators/inject-keyboard-manager';
 import { VegaNavListRenderer } from '../slimmers/renderers/vega-nav-list-renderer';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaStateUpdate } from '../../../helpers/event-manager/event-id/vega-event-id';
@@ -430,3 +431,25 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "brandSwitchControllerSlimmer", void 0);
+__decorate([
+  InjectKeyboardManager((target) => [
+    {
+      keyCode: 'Escape',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      activeElementInScope: /* istanbul ignore next */ () => {
+        const backdrop = target.backdropController.getBackdrop();
+        if (backdrop && backdrop.visible) {
+          // eslint-disable-next-line no-restricted-globals
+          return [document.body];
+        }
+        return [target.host];
+      },
+      callback: /* istanbul ignore next */ () => {
+        const backdrop = target.backdropController.getBackdrop();
+        if (backdrop && backdrop.visible) {
+          target.openStateController.setOpenState('close');
+        }
+      },
+    },
+  ])
+], VegaLeftNav.prototype, "host", void 0);

package/dist/collection/components/vega-pagination/constants/page-size.js

@@ -0,0 +1,2 @@
+/** Sentinel value representing the "All" page size option, which displays all records at once. */
+export const PAGE_SIZE_ALL = -1;

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

@@ -1,20 +1,24 @@
 import { h } from '@stencil/core';
 import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
-export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, dropdownProps, onChange, translationSlimmer, }) => {
-  const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
+import { normalizePageSizeOption, sortPageSizeOptions, } from '../utils/page-size-option-utils';
+import { PAGE_SIZE_ALL } from '../constants/page-size';
+export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, dropdownProps, onChange, translationSlimmer, isAllActive, }) => {
+  const normalized = pageSizeSelectorOptions.map(normalizePageSizeOption);
+  const mergedPageSizeOptions = sortPageSizeOptions(normalized);
   const handleChange = (input) => {
     // Because input-select use single mode, so the detail is always a string type
-    const pageSize = Number(input.detail);
-    onChange(pageSize);
+    const selectedValue = Number(input.detail);
+    onChange(selectedValue);
   };
+  const selectedValue = isAllActive ? PAGE_SIZE_ALL : pageSize;
   return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
     h("vega-field-label", { label: translationSlimmer.t('Show') }),
     h("div", null,
       h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
-          id: option.toString(),
-          displayName: option.toString(),
-        })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: Object.assign({ matchTargetWidth: false, searchable: false }, dropdownProps), 
+          id: option.value.toString(),
+          displayName: option.label,
+        })), value: selectedValue.toString(), placeholder: "Page Size", vegaDropdownProps: Object.assign({ matchTargetWidth: false, searchable: false }, dropdownProps), 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);

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

@@ -7,6 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
+import { resolvePageSizeValue } from '../../utils/page-size-option-utils';
+import { PAGE_SIZE_ALL } from '../../constants/page-size';
 /** The `VegaPaginationPageSizeObserverController` class is responsible for adding and removing observers for pagination page size in Vega component. */
 export class VegaPaginationPageSizeObserverController extends VegaSlimmer {
   /**
@@ -14,7 +16,9 @@ export class VegaPaginationPageSizeObserverController extends VegaSlimmer {
    */
   registerPaginationPageSizeChangeObserver() {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalPaginationPageSizeChange, (payload) => {
-      this.pageSize = Number(payload.detail);
+      const rawValue = Number(payload.detail);
+      this.isAllActive = rawValue === PAGE_SIZE_ALL;
+      this.pageSize = resolvePageSizeValue(rawValue, this.total);
     });
   }
   /**
@@ -30,6 +34,12 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaPaginationPageSizeObserverController.prototype, "pageSize", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaPaginationPageSizeObserverController.prototype, "isAllActive", void 0);
+__decorate([
+  MapToComponentField()
+], VegaPaginationPageSizeObserverController.prototype, "total", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaPaginationPageSizeObserverController.prototype, "registerPaginationPageSizeChangeObserver", null);

package/dist/collection/components/vega-pagination/utils/page-size-option-utils.js

@@ -0,0 +1,57 @@
+import { PAGE_SIZE_ALL } from '../constants/page-size';
+/**
+ * Normalizes a page-size option (number or object) into a `NormalizedPageSizeOption` with `value` and `label`.
+ *
+ * @param {VegaPaginationPageSizeOption} option - A page-size option, either a plain number or an object with `value` and `label`.
+ * @returns {NormalizedPageSizeOption} A normalized option object.
+ */
+export function normalizePageSizeOption(option) {
+  return typeof option === 'number' ? { value: option, label: option.toString() } : option;
+}
+/**
+ * Sorts page-size options in ascending order, pinning the "All" option (value `-1`) last.
+ *
+ * @param {NormalizedPageSizeOption[]} options - An array of normalized page-size options.
+ * @returns {NormalizedPageSizeOption[]} A new sorted array.
+ */
+export function sortPageSizeOptions(options) {
+  return [...options].sort((a, b) => {
+    if (a.value === PAGE_SIZE_ALL)
+      return 1;
+    if (b.value === PAGE_SIZE_ALL)
+      return -1;
+    return a.value - b.value;
+  });
+}
+/**
+ * Resolves the sentinel value `-1` ("All") to `total`; returns other values unchanged.
+ *
+ * @param {number} value - The page size value, potentially the sentinel `-1`.
+ * @param {number} total - The total number of items.
+ * @returns {number} The resolved page size number.
+ */
+export function resolvePageSizeValue(value, total) {
+  return value === PAGE_SIZE_ALL ? total : value;
+}
+/**
+ * Returns `true` if the options array contains an "All" entry (`{ value: -1 }`).
+ *
+ * @param {VegaPaginationPageSizeOption[]} options - An array of page-size options.
+ * @returns {boolean} `true` when an "All" option is present.
+ */
+export function hasAllOption(options) {
+  return options.some((opt) => typeof opt === 'object' && opt.value === PAGE_SIZE_ALL);
+}
+/**
+ * Returns `true` if any option in the array has a `value` equal to `pageSize`.
+ *
+ * @param {VegaPaginationPageSizeOption[]} options - An array of page-size options.
+ * @param {number} pageSize - The page size to look for.
+ * @returns {boolean} `true` when the page size is found.
+ */
+export function includesPageSize(options, pageSize) {
+  return options.some((opt) => {
+    const value = typeof opt === 'number' ? opt : opt.value;
+    return value === pageSize;
+  });
+}

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

@@ -12,6 +12,8 @@ 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';
+import { normalizePageSizeOption, sortPageSizeOptions, includesPageSize, } from '../../../utils/page-size-option-utils';
+import { PAGE_SIZE_ALL } from '../../../constants/page-size';
 export class PageSizeSelectorMobileDropdownRenderer extends VegaSlimmer {
   /**
    * Renders the dropdown component with the provided children.
@@ -22,19 +24,21 @@ export class PageSizeSelectorMobileDropdownRenderer extends VegaSlimmer {
   render(children) {
     var _a;
     /* istanbul ignore next */
-    const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
+    const options = this.isAllActive || includesPageSize(this.pageSizeSelectorOptions, this.pageSize)
       ? this.pageSizeSelectorOptions
       : [...this.pageSizeSelectorOptions, this.pageSize];
-    const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
+    const normalized = options.map(normalizePageSizeOption);
+    const mergedPageSizeOptions = sortPageSizeOptions(normalized);
     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: [
+    const selectedValue = this.isAllActive ? PAGE_SIZE_ALL : this.pageSize;
+    return (h("vega-dropdown", { trigger: "click", selectType: "single", alignment: "center", minWidth: 160, selectedSourceKey: selectedValue.toString(), source: [
         {
           key: 'items-per-page',
           label: itemsPerPageLabel,
           children: [
             ...mergedPageSizeOptions.map((option) => ({
-              key: option.toString(),
-              label: option.toString(),
+              key: option.value.toString(),
+              label: option.label,
             })),
           ],
         },
@@ -69,3 +73,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], PageSizeSelectorMobileDropdownRenderer.prototype, "dropdownProps", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "total", void 0);
+__decorate([
+  MapToComponentField()
+], PageSizeSelectorMobileDropdownRenderer.prototype, "isAllActive", void 0);

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

@@ -48,6 +48,13 @@ export class VegaPaginationPageSizeSelectorMobile {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.current = 1;
+    /**
+     * @internal
+     * Tracks whether "All" page size option is currently active.
+     *
+     * @vegaVersion 2.81.0
+     */
+    this.isAllActive = false;
   }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.pageSizeSelectorMobileRenderer.render()), this.host);
@@ -106,9 +113,14 @@ export class VegaPaginationPageSizeSelectorMobile {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "number[]",
-        "resolved": "number[]",
-        "references": {}
+        "original": "VegaPaginationPageSizeOption[]",
+        "resolved": "VegaPaginationPageSizeOption[]",
+        "references": {
+          "VegaPaginationPageSizeOption": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -185,6 +197,30 @@ export class VegaPaginationPageSizeSelectorMobile {
           }],
         "text": "Specifies the properties of the `vega-dropdown` component\n   used to configure the dropdown for the\n   page size selector mobile in pagination."
       }
+    },
+    "isAllActive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": "Tracks whether \"All\" page size option is currently active."
+          }, {
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": ""
+      },
+      "attribute": "is-all-active",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -10,6 +10,8 @@ import { VegaPaginationCurrentPageLabel } from './internal/vega-pagination-curre
 import { VegaPaginationGoTo } from './internal/vega-pagination-go-to';
 import { VegaPaginationPageSizeSelector } from './internal/vega-pagination-page-size-selector';
 import { VegaPaginationPageSelector } from './internal/vega-pagination-page-selector';
+import { includesPageSize, hasAllOption, resolvePageSizeValue } from './utils/page-size-option-utils';
+import { PAGE_SIZE_ALL } from './constants/page-size';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaChange, VegaFormSubmit, VegaPageSizeChange, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -54,6 +56,8 @@ export class VegaPagination {
      * Total number of pages.
      */
     this.pageCount = 0;
+    /** Tracks whether "All" was explicitly selected or initialized. */
+    this.isAllActive = false;
     /**
      * Specifies the current page number for
      *    the pagination component.
@@ -109,6 +113,9 @@ export class VegaPagination {
      * Specifies the options available for the page size selector
      *    in the pagination component.
      *
+     * Each option can be a number or an object with `value` and `label`.
+     * Use `{ value: -1, label: 'All' }` to show all items on a single page.
+     *
      * @vegaVersion 1.25.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
@@ -123,10 +130,10 @@ export class VegaPagination {
         case 'currentPageLabel':
           return (h(VegaPaginationCurrentPageLabel, { total: this.total, current: this.current, pageSize: this.pageSize, translationSlimmer: this.translationSlimmer }));
         case 'pageSizeSelector': {
-          const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
+          const pageSizeSelectorOptions = this.isAllActive || includesPageSize(this.pageSizeSelectorOptions, this.pageSize)
             ? this.pageSizeSelectorOptions
             : [...this.pageSizeSelectorOptions, this.pageSize];
-          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, dropdownProps: this.dropdownProps, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
+          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, dropdownProps: this.dropdownProps, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer, isAllActive: this.isAllActive }));
         }
         case 'pageSelector':
           return (h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
@@ -137,14 +144,15 @@ export class VegaPagination {
           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 }));
+          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, isAllActive: this.isAllActive }));
       }
     };
     this.handlePaginationGoToChange = (page) => {
       this.current = page;
     };
     this.onPageSizeSelectorChange = (pageSize) => {
-      this.pageSize = pageSize;
+      this.isAllActive = pageSize === PAGE_SIZE_ALL;
+      this.pageSize = resolvePageSizeValue(pageSize, this.total);
     };
     this.calculatePages = () => {
       if (!this.total) {
@@ -203,7 +211,10 @@ export class VegaPagination {
     this.currentValueGuard();
     this.vegaChangeEventEmitter.emit(this.current);
   }
-  watchTotal() {
+  watchTotal(newTotal) {
+    if (this.isAllActive) {
+      this.pageSize = newTotal;
+    }
     this.pageCount = this.calculatePages();
   }
   watchPageSize() {
@@ -214,9 +225,13 @@ export class VegaPagination {
     methodPlaceholder();
   }
   componentWillLoad() {
+    this.isAllActive =
+      hasAllOption(this.pageSizeSelectorOptions) &&
+        this.pageSize === this.total &&
+        !includesPageSize(this.pageSizeSelectorOptions, this.pageSize);
     this.pageCount = this.calculatePages();
     this.currentValueGuard();
-    if (!this.pageSizeSelectorOptions.includes(this.pageSize)) {
+    if (!this.isAllActive && !includesPageSize(this.pageSizeSelectorOptions, this.pageSize)) {
       this.pageSizeSelectorOptions = [...this.pageSizeSelectorOptions, this.pageSize];
     }
   }
@@ -364,9 +379,14 @@ export class VegaPagination {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "number[]",
-        "resolved": "number[]",
-        "references": {}
+        "original": "VegaPaginationPageSizeOption[]",
+        "resolved": "VegaPaginationPageSizeOption[]",
+        "references": {
+          "VegaPaginationPageSizeOption": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -375,7 +395,7 @@ export class VegaPagination {
             "name": "vegaVersion",
             "text": "1.25.0"
           }],
-        "text": "Specifies the options available for the page size selector\n   in the pagination component."
+        "text": "Specifies the options available for the page size selector\n   in the pagination component.\n\nEach option can be a number or an object with `value` and `label`.\nUse `{ value: -1, label: 'All' }` to show all items on a single page."
       },
       "defaultValue": "[10, 20, 50, 100]"
     },
@@ -405,7 +425,8 @@ export class VegaPagination {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "pageCount": {}
+    "pageCount": {},
+    "isAllActive": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",