import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-090d31ca.js';
import { s as sanitizeVegaComponent } from './component-7d906393.js';
import { n as normalizeNumberByRanger, c as convertToNumber } from './number-4398f2e1.js';
import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3897e95b.js';
import { C as VegaFormSubmit, I as VegaBlur, i as VegaChange, a as VegaClick, W as VegaPageSizeChange } from './vega-event-id-578c6c6d.js';
import { n as normalizePageSizeOption, s as sortPageSizeOptions, P as PAGE_SIZE_ALL, r as resolvePageSizeValue, i as includesPageSize, h as hasAllOption } from './page-size-option-utils-50afc81a.js';
import { a as arrayToClassString } from './ui-64815a12.js';
import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-0a406a71.js';
import { c as createEventEmitSlimmer } from './event-emit-slimmer-697ad0b7.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-4b1afd04.js';
import { T as TranslationSlimmer } from './translation-slimmer-32353a1c.js';
import { R as ResponsiveFormatFacade } from './responsive-format-facade-2a1d6398.js';
import { g as getCurrentBreakpoint } from './breakpoints-332702ed.js';
import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
import { t as VegaInternalPaginationPageSizeChange, u as VegaInternalPaginationCurrentChange } from './vega-internal-event-id-913e8be6.js';
import { F as FeatureFlag } from './feature-flag-controller-5ebc0cec.js';
import './change-manager-6a7eb88c.js';
import './observer-3959f9dd.js';
import './internal-vega-event-manager-1ac5ee9a.js';
import './vega-env-manager-8f8dc473.js';
import './dynamic-slimmer-90b8af32.js';
import './try-get-document-bef0f526.js';
import './internal-translation-controller-d8217d93.js';
import './static-subject-title-52f93124.js';
import './type-guard-ed1004cc.js';
import './breakpoints-d9faf11c.js';
import './ui-93922c59.js';
import './typography-396de03f.js';
import './pixel-f32c07ce.js';
import './array-7888f339.js';
import './index-9c9865c0.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", autocomplete: "on", 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, 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 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.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);
        } }))));
};

/**
 *  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) => {
      const rawValue = Number(payload.detail);
      this.isAllActive = rawValue === PAGE_SIZE_ALL;
      this.pageSize = resolvePageSizeValue(rawValue, this.total);
    });
  }
  /**
   * 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([
  MapToComponentField({ writable: true })
], VegaPaginationPageSizeObserverController.prototype, "isAllActive", void 0);
__decorate$3([
  MapToComponentField()
], VegaPaginationPageSizeObserverController.prototype, "total", 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;
    /** Tracks whether "All" was explicitly selected or initialized. */
    this.isAllActive = false;
    /**
     * 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.
     *
     * 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 */
    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.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, isAllActive: this.isAllActive }));
        }
        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, isAllActive: this.isAllActive }));
      }
    };
    this.handlePaginationGoToChange = (page) => {
      this.current = page;
    };
    this.onPageSizeSelectorChange = (pageSize) => {
      this.isAllActive = pageSize === PAGE_SIZE_ALL;
      this.pageSize = resolvePageSizeValue(pageSize, this.total);
    };
    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() {
  }
  watchPageCount() {
    this.currentValueGuard();
  }
  watchCurrent() {
    this.currentValueGuard();
    this.vegaChangeEventEmitter.emit(this.current);
  }
  watchTotal(newTotal) {
    if (this.isAllActive) {
      this.pageSize = newTotal;
    }
    this.pageCount = this.calculatePages();
  }
  watchPageSize() {
    this.vegaPageSizeChangeEventEmitter.emit(this.pageSize);
    this.pageCount = this.calculatePages();
  }
  watchLayout() {
  }
  componentWillLoad() {
    this.isAllActive =
      hasAllOption(this.pageSizeSelectorOptions) &&
        this.pageSize === this.total &&
        !includesPageSize(this.pageSizeSelectorOptions, this.pageSize);
    this.pageCount = this.calculatePages();
    this.currentValueGuard();
    if (!this.isAllActive && !includesPageSize(this.pageSizeSelectorOptions, 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 };
