@heartlandone/vega 2.72.0 → 2.74.0-RTE-table-preview

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

@@ -0,0 +1,629 @@
+import { h, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { n as normalizeNumberByRanger, c as convertToNumber } from './number-4398f2e1.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { B as VegaFormSubmit, G as VegaBlur, h as VegaChange, a as VegaClick, S as VegaPageSizeChange } from './vega-event-id-61c8bd9f.js';
+import { a as arrayToClassString } from './ui-5f775fd9.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import './index-9fdb7060.js';
+import { r as responsiveFormatFacade } from './responsive-format-facade-d4abfdb9.js';
+import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-ee8774a6.js';
+import { E as VegaInternalPaginationPageSizeChange, F as VegaInternalPaginationCurrentChange } from './vega-internal-event-id-b65a01a3.js';
+import './public-api-a77a0b33.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import { F as FeatureFlag } from './feature-flag-controller-24b9f956.js';
+import './change-manager-b115783e.js';
+import './observer-3959f9dd.js';
+import './dom-node-subject-factory-5798693b.js';
+import './internal-vega-event-manager-826279b7.js';
+import './vega-env-manager-8f8dc473.js';
+import './try-get-document-bef0f526.js';
+import './type-guard-09acedc9.js';
+import './breakpoints-d9faf11c.js';
+import './ui-189dae23.js';
+import './typography-396de03f.js';
+import './index-81ce67e2.js';
+import './static-subject-title-6fdf8c8b.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './pixel-f32c07ce.js';
+import './array-a1d98264.js';
+import './internal-vega-z-index-manager-f0ca0975.js';
+import './dark-mode-style-controller-e2a2f76c.js';
+import './_commonjsHelpers-2088bffa.js';
+import './vega-nonce-manager-497e5eb5.js';
+import './internal-icon-manager-9279071a.js';
+import './valid-credit-card-number-rule-04b032a6.js';
+import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import './index-b04c1ee0.js';
+import './content-state-fc9d98e0.js';
+import './code-block-b5f8fc8a.js';
+import './string-a953eafc.js';
+import './object-66c37948.js';
+import './dto-renderer-manager-12bc9121.js';
+import './base-renderer-101f6d04.js';
+import './column-operation-a1620c67.js';
+import './remote-invocation-registry-4219120b.js';
+import './timer-9321173b.js';
+import './styles.constants-b320e4a7.js';
+import './range-429fb0e2.js';
+import './index-1f9eab8f.js';
+
+const VegaPaginationCurrentPageLabel = ({ pageSize, current, total, translationSlimmer, }) => {
+  const rangeFrom = total > 0 ? pageSize * (current - 1) + 1 : 0;
+  const rangeTo = Math.min(current * pageSize, total);
+  return (h("vega-field-label", { label: translationSlimmer.t('Viewing {0}-{1} of {2}', rangeFrom, rangeTo, total) }));
+};
+
+const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
+  let inputRef;
+  const handleChange = () => {
+    if (inputRef.value) {
+      const goToPage = normalizeNumberByRanger(convertToNumber(inputRef.value, 1), 1, pageCount);
+      onChange(goToPage);
+      inputRef.value = '';
+    }
+  };
+  const stopChangePropagation = (e) => {
+    e.stopPropagation();
+  };
+  return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
+    h("vega-field-label", { label: translationSlimmer.t('Go To') }),
+    h("vega-form", { 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, handleChange);
+      } },
+      h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
+          type: 'number',
+          options: {
+            allowNegative: false,
+            precision: 0,
+          },
+        }, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onVegaChange: stopChangePropagation, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onChange: stopChangePropagation, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          inputRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, handleChange);
+        } }))));
+};
+
+const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, dropdownProps, onChange, translationSlimmer, }) => {
+  const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
+  const handleChange = (input) => {
+    // Because input-select use single mode, so the detail is always a string type
+    const pageSize = Number(input.detail);
+    onChange(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), 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+        } }))));
+};
+
+/**
+ *  minimal pager item count, must be odd number
+ */
+const MINIMAL_PAGER_ITEM_COUNT = 7;
+/**
+ * It generates an array of numbers and ellipsis that represent the pager items
+ *
+ * @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
+ */
+const generatePagerItems = (current, total, pagerCount = MINIMAL_PAGER_ITEM_COUNT) => {
+  const ellipsisPlaceholder = '...';
+  if (pagerCount < MINIMAL_PAGER_ITEM_COUNT) {
+    throw new Error(`Must allow at least ${MINIMAL_PAGER_ITEM_COUNT} pager items`);
+  }
+  if (pagerCount % 2 === 0) {
+    throw new Error(`Must allow odd number of pager items`);
+  }
+  if (total < pagerCount) {
+    return Array(total)
+      .fill(0)
+      .map((_, index) => index + 1);
+  }
+  const left = Math.max(1, Math.min(total - pagerCount + 1, current - Math.floor(pagerCount / 2)));
+  const items = new Array(pagerCount);
+  for (let i = 0; i < pagerCount; i += 1) {
+    items[i] = i + left;
+  }
+  if (Number(items[0]) > 1) {
+    items[0] = 1;
+    items[1] = ellipsisPlaceholder;
+  }
+  if (Number(items[items.length - 1]) <= total - 1) {
+    items[items.length - 1] = total;
+    items[items.length - 2] = ellipsisPlaceholder;
+  }
+  return items;
+};
+
+const VegaPaginationPageSelector = ({ total, current, onChange, pageCount, }) => {
+  const pagerItem = (page) => {
+    const isCurrent = current === page ? 'active' : '';
+    const clickable = current !== page;
+    return (
+    /* no-noninteractive-element-to-interactive-role https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md */
+    h("li", { key: page, class: arrayToClassString(['vega-pagination-item', isCurrent]) },
+      h("button", { 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onClick: () => clickable && onChange(page) }, page)));
+  };
+  /** Render the prev button of the pager **/
+  const renderPrevButton = () => {
+    const isDisabled = total === 0 || current === 1;
+    return pagerButton('chevron-left', isDisabled, handlePrev);
+  };
+  /** Render the next button of the pager **/
+  const renderNextButton = () => {
+    const isDisabled = total === 0 || current === pageCount;
+    return pagerButton('chevron-right', isDisabled, handleNext);
+  };
+  const renderPagers = () => {
+    if (total === 0) {
+      return [pagerItem(1)];
+    }
+    const pagerItems = generatePagerItems(current, pageCount);
+    return pagerItems.map((item) => {
+      if (typeof item === 'string') {
+        return pagerEllipsis();
+      }
+      else {
+        return pagerItem(item);
+      }
+    });
+  };
+  const pagerButton = (icon, isDisabled, handleClick) => {
+    return (h("li", { class: arrayToClassString(['vega-pagination-button', isDisabled && 'disabled']) },
+      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);
+        } })));
+  };
+  const handlePrev = () => {
+    onChange(current - 1);
+  };
+  const handleNext = () => {
+    onChange(current + 1);
+  };
+  const pagerEllipsis = () => {
+    return h("li", { class: "vega-pagination-item pager-ellipsis" }, "...");
+  };
+  return (h("ul", { class: "vega-pagination" },
+    renderPrevButton(),
+    renderPagers(),
+    renderNextButton()));
+};
+
+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{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px;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;
+  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 VegaPagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaPageSizeChange = createEvent(this, "vegaPageSizeChange", 7);
+    this.pageSizeChange = createEvent(this, "pageSizeChange", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.childEventPrevent = new ChildNodesEventPreventSlimmer([VegaFormSubmit], () => this.host);
+    this.childValueChangePrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, true);
+    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.
+     */
+    this.pageCount = 0;
+    /**
+     * Specifies the current page number for
+     *    the pagination component.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.current = 1;
+    /**
+     * Specifies the total number of data items for the pagination component.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.total = 0;
+    /**
+     * Specifies the number of data items to be displayed per page in
+     *    the pagination component.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.pageSize = 10;
+    /**
+     * Specifies the extensions associated with the pagination items
+     *    in the pagination component.
+     *
+     * 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.layout = 'horizontal';
+    /**
+     * Specifies the options available for the page size selector
+     *    in the pagination component.
+     *
+     * @vegaVersion 1.25.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.pageSizeSelectorOptions = [10, 20, 50, 100];
+    this.renderPaginationItemsWrapper = (extensionArr) => {
+      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));
+      })));
+    };
+    this.renderPaginationItem = (item) => {
+      switch (item) {
+        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)
+            ? this.pageSizeSelectorOptions
+            : [...this.pageSizeSelectorOptions, this.pageSize];
+          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, dropdownProps: this.dropdownProps, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
+        }
+        case 'pageSelector':
+          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) => {
+      this.current = page;
+    };
+    this.onPageSizeSelectorChange = (pageSize) => {
+      this.pageSize = pageSize;
+    };
+    this.calculatePages = () => {
+      if (!this.total) {
+        return 0;
+      }
+      return Math.floor((this.total - 1) / this.pageSize) + 1;
+    };
+    this.onPageSelectorChange = (page) => {
+      this.current = page;
+    };
+    this.removeDuplicateItems = (extensions) => {
+      const items = [...this.vegaPaginationItemTypes];
+      const extensionsClone = [...extensions];
+      return extensionsClone
+        .map((extension) => {
+        return extension.filter((item, itemIndex) => {
+          const index = items.indexOf(item);
+          if (index >= 0) {
+            items.splice(index, 1);
+            return true;
+          }
+          else {
+            extension.splice(itemIndex, 1);
+            return false;
+          }
+        });
+      })
+        .filter((arr) => arr.length > 0);
+    };
+    this.generateWrapperKey = (extensionArr) => {
+      return extensionArr
+        .map(String)
+        .reduce((pre, cur) => `${pre}-${cur}`);
+    };
+    this.currentValueGuard = () => {
+      if (this.pageCount === 0) {
+        this.current = 1;
+      }
+      else if (this.current > this.pageCount) {
+        this.current = this.pageCount;
+      }
+    };
+  }
+  /*
+   * The next line is covered in e2e-test
+   * @see{should-render-layout-properly-when-set-responsive-prop-layout}
+   */
+  /* istanbul ignore next */
+  watchCurrentBreakpoint() {
+    methodPlaceholder();
+  }
+  watchPageCount() {
+    this.currentValueGuard();
+  }
+  watchCurrent() {
+    this.currentValueGuard();
+    this.vegaChangeEventEmitter.emit(this.current);
+  }
+  watchTotal() {
+    this.pageCount = this.calculatePages();
+  }
+  watchPageSize() {
+    this.vegaPageSizeChangeEventEmitter.emit(this.pageSize);
+    this.pageCount = this.calculatePages();
+  }
+  watchLayout() {
+    methodPlaceholder();
+  }
+  componentWillLoad() {
+    this.pageCount = this.calculatePages();
+    this.currentValueGuard();
+    if (!this.pageSizeSelectorOptions.includes(this.pageSize)) {
+      this.pageSizeSelectorOptions = [...this.pageSizeSelectorOptions, this.pageSize];
+    }
+  }
+  render() {
+    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"],
+    "layout": ["watchLayout"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaPagination.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "childEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "childValueChangePrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPageSizeChangeEventEmitter", void 0);
+__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 };