@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/calcite-pagination.entry.js

@@ -0,0 +1,554 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, F as Fragment, g as getElement } from './index-bdfaac50.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { c as createObserver } from './observers-5ba39eee.js';
+import { g as getIconScale } from './component-edd2c3cd.js';
+import './dom-b91aa537.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './key-9a10d862.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    page: "page",
+    selected: "selected",
+    chevron: "chevron",
+    disabled: "disabled",
+    ellipsis: "ellipsis",
+};
+const ICONS = {
+    next: "chevron-right",
+    previous: "chevron-left",
+    first: "chevron-start",
+    last: "chevron-end",
+};
+
+/**
+ * Do not edit directly
+ * Generated on Wed, 17 Jan 2024 17:52:10 GMT
+ */
+
+const calciteBorderWidthNone = "0";
+const calciteBorderWidthSm = "1px";
+const calciteBorderWidthMd = "2px";
+const calciteBorderWidthLg = "4px";
+const calciteColorBackground = {"light":"#f8f8f8","dark":"#353535"};
+const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
+const calciteColorForeground1 = {"light":"#ffffff","dark":"#2b2b2b"};
+const calciteColorForeground2 = {"light":"#f3f3f3","dark":"#202020"};
+const calciteColorForeground3 = {"light":"#eaeaea","dark":"#151515"};
+const calciteColorForegroundCurrent = {"light":"#c7eaff","dark":"#214155"};
+const calciteColorTransparent = {"light":"rgba(0, 0, 0, 0)","dark":"rgba(255, 255, 255, 0)"};
+const calciteColorTransparentHover = {"light":"rgba(0, 0, 0, 0.04)","dark":"rgba(255, 255, 255, 0.04)"};
+const calciteColorTransparentPress = {"light":"rgba(0, 0, 0, 0.08)","dark":"rgba(255, 255, 255, 0.08)"};
+const calciteColorTransparentScrim = {"light":"rgba(255, 255, 255, 0.85)","dark":"rgba(0, 0, 0, 0.85)"};
+const calciteColorTransparentTint = {"light":"rgba(255, 255, 255, 0.8)","dark":"rgba(43, 43, 43, 0.8)"};
+const calciteColorBrand = {"light":"#007ac2","dark":"#009af2"};
+const calciteColorBrandHover = {"light":"#00619b","dark":"#007ac2"};
+const calciteColorBrandPress = {"light":"#004874","dark":"#00619b"};
+const calciteColorBrandUnderline = {"light":"rgba(0, 97, 155, 0.4)","dark":"rgba(0, 160, 255, 0.4)"};
+const calciteColorStatusInfo = {"light":"#00619b","dark":"#00a0ff"};
+const calciteColorStatusInfoHover = {"light":"#004874","dark":"#3db8ff"};
+const calciteColorStatusInfoPress = {"light":"#00304d","dark":"#009af2"};
+const calciteColorStatusSuccess = {"light":"#35ac46","dark":"#36da43"};
+const calciteColorStatusSuccessHover = {"light":"#288835","dark":"#3bed52"};
+const calciteColorStatusSuccessPress = {"light":"#1a6324","dark":"#00b81b"};
+const calciteColorStatusWarning = {"light":"#edd317","dark":"#ffc900"};
+const calciteColorStatusWarningHover = {"light":"#d9bc00","dark":"#ffee33"};
+const calciteColorStatusWarningPress = {"light":"#bfa200","dark":"#f5d000"};
+const calciteColorStatusDanger = {"light":"#d83020","dark":"#fe583e"};
+const calciteColorStatusDangerHover = {"light":"#a82b1e","dark":"#ff0015"};
+const calciteColorStatusDangerPress = {"light":"#7c1d13","dark":"#d90012"};
+const calciteColorInverse = {"light":"#353535","dark":"#f8f8f8"};
+const calciteColorInverseHover = {"light":"#2b2b2b","dark":"#ffffff"};
+const calciteColorInversePress = {"light":"#202020","dark":"#f3f3f3"};
+const calciteColorText1 = {"light":"#151515","dark":"#ffffff"};
+const calciteColorText2 = {"light":"#4a4a4a","dark":"#bfbfbf"};
+const calciteColorText3 = {"light":"#6a6a6a","dark":"#9f9f9f"};
+const calciteColorTextInverse = {"light":"#ffffff","dark":"#151515"};
+const calciteColorTextLink = {"light":"#00619b","dark":"#00a0ff"};
+const calciteColorBorder1 = {"light":"#cacaca","dark":"#555555"};
+const calciteColorBorder2 = {"light":"#d4d4d4","dark":"#4a4a4a"};
+const calciteColorBorder3 = {"light":"#dfdfdf","dark":"#404040"};
+const calciteColorBorderInput = {"light":"#949494","dark":"#757575"};
+const calciteColorBorderGhost = {"light":"rgba(0, 0, 0, 0.3)","dark":"rgba(117, 117, 117, 0.3)"};
+const calciteColorBorderWhite = {"light":"#ffffff","dark":"#f8f8f8"};
+const calciteContainerSizeHeightXxs = {"min":"0","max":"154px"}; // Small handheld devices and mini-windows
+const calciteContainerSizeHeightXs = {"min":"155px","max":"328px"}; // Handheld devices
+const calciteContainerSizeHeightSm = {"min":"329px","max":"504px"}; // Small tablets
+const calciteContainerSizeHeightMd = {"min":"505px","max":"678px"}; // Small laptops
+const calciteContainerSizeHeightLg = {"min":"679px","max":"854px"}; // Large laptops and desktop computers
+const calciteContainerSizeHeightXl = {"min":"855px"}; // Projectors and televisions
+const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
+const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
+const calciteContainerSizeWidthSm = {"min":"477px","max":"768px"}; // Small tablets
+const calciteContainerSizeWidthMd = {"min":"769px","max":"1152px"}; // Small laptops
+const calciteContainerSizeWidthLg = {"min":"1153px","max":"1440px"}; // Large laptops and desktop computers
+const calciteContainerSizeWidthXl = {"min":"1441px"}; // Projectors and televisions
+const calciteContainerSizeMargin = "24px";
+const calciteContainerSizeGutter = "16px";
+const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths
+const calciteContainerSizeContentFixed = "1440px"; // only for lg breakpoint fixed grid width
+const calciteCornerRadius = "0";
+const calciteCornerRadiusSharp = "0";
+const calciteCornerRadiusRound = "4px";
+const calciteCornerRadiusPill = "100%";
+const calciteFontFamily = ["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"]; // Primary font with fallbacks
+const calciteFontFamilyCode = ["Monaco","Consolas","Andale Mono","Lucida Console","monospace"]; // Font family for code with fallbacks
+const calciteFontWeightLight = "300"; // For Avenir Next World (secondary font family)
+const calciteFontWeightNormal = "400"; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
+const calciteFontWeightRegular = "400";
+const calciteFontWeightMedium = "500";
+const calciteFontWeightSemibold = "600";
+const calciteFontWeightBold = "700";
+const calciteFontSizeXs = "10px";
+const calciteFontSizeSm = "12px";
+const calciteFontSize = "14px";
+const calciteFontSizeMd = "16px";
+const calciteFontSizeLg = "18px";
+const calciteFontSizeXl = "20px";
+const calciteFontSizeXxl = "24px";
+const calciteFontStyleEmphasis = "italic"; // used in ratings
+const calciteFontLineHeightFixedSm = "12px";
+const calciteFontLineHeightFixedBase = "16px";
+const calciteFontLineHeightFixedLg = "20px";
+const calciteFontLineHeightFixedXl = "24px";
+const calciteFontLineHeightRelative = "auto"; // 1
+const calciteFontLineHeightRelativeTight = "125%"; // 1.25
+const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375
+const calciteFontLineHeightRelativeNormal = "150%"; // 1.5
+const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625
+const calciteFontLineHeightRelativeLoose = "200%"; // 2
+const calciteFontLetterSpacingTight = "-0.4";
+const calciteFontLetterSpacingNormal = "0";
+const calciteFontLetterSpacingWide = "0.4";
+const calciteFontParagraphSpacingNormal = "4px";
+const calciteFontTextDecorationNone = "none";
+const calciteFontTextDecorationUnderline = "underline";
+const calciteFontTextCaseNone = "none";
+const calciteFontTextCaseUppercase = "uppercase";
+const calciteFontTextCaseLowercase = "lowercase";
+const calciteFontTextCaseCapitalize = "capitalize";
+const calciteOpacityLight = "0.4";
+const calciteOpacityHalf = "0.5";
+const calciteOpacityDark = "0.85";
+const calciteOpacityFull = "1";
+const calciteOpacityDisabled = "0.5";
+const calciteShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0)"};
+const calciteShadowSm = [{"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 0.04)"},{"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 0.08)"}];
+const calciteShadowMd = [{"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 0.08)"},{"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 0.1)"}];
+const calciteSizePx = "1px";
+const calciteSizeXxxs = "2px";
+const calciteSizeXxs = "4px";
+const calciteSizeXs = "6px";
+const calciteSizeSm = "8px";
+const calciteSizeSmPlus = "10px";
+const calciteSizeMd = "12px";
+const calciteSizeMdPlus = "14px";
+const calciteSizeLg = "16px";
+const calciteSizeXl = "20px";
+const calciteSizeXxl = "24px";
+const calciteSizeXxxl = "32px";
+const calciteSpacingPx = "1px";
+const calciteSpacingBase = "2px";
+const calciteSpacingXxs = "4px";
+const calciteSpacingXs = "6px";
+const calciteSpacingSm = "8px";
+const calciteSpacingMd = "12px";
+const calciteSpacingLg = "14px";
+const calciteSpacingXl = "16px";
+const calciteSpacingXxl = "20px";
+const calciteSpacingXxxl = "32px";
+const calciteTypography = {"fontFamily":["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+const calciteTypographyLightMinus3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"};
+const calciteTypographyLightMinus2h = {"fontSize":"12px","fontWeight":"300"};
+const calciteTypographyLightMinus1h = {"fontWeight":"300"};
+const calciteTypographyLight0h = {"fontSize":"16px","fontWeight":"300","lineHeight":"20px"};
+const calciteTypographyLight1h = {"fontSize":"18px","fontWeight":"300","lineHeight":"24px"};
+const calciteTypographyRegularMinus3h = {"lineHeight":"12px","fontSize":"10px"};
+const calciteTypographyRegularMinus2h = {"fontSize":"12px"};
+const calciteTypographyRegularMinus1h = {"fontFamily":["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+const calciteTypographyRegular0h = {"lineHeight":"20px","fontSize":"16px"};
+const calciteTypographyRegular1h = {"lineHeight":"24px","fontSize":"18px"};
+const calciteTypographyMediumMinus3h = {"fontWeight":"500","lineHeight":"12px","fontSize":"10px"};
+const calciteTypographyMediumMinus2h = {"fontWeight":"500","fontSize":"12px"};
+const calciteTypographyMediumMinus1h = {"fontWeight":"500"};
+const calciteTypographyMedium0h = {"fontWeight":"500","lineHeight":"20px","fontSize":"16px"};
+const calciteTypographyMedium1h = {"fontWeight":"500","lineHeight":"24px","fontSize":"18px"};
+const calciteTypographyBoldMinus3h = {"fontWeight":"600","lineHeight":"12px","fontSize":"10px"};
+const calciteTypographyBoldMinus2h = {"fontWeight":"600","fontSize":"12px"};
+const calciteTypographyBoldMinus1h = {"fontWeight":"600"};
+const calciteTypographyBold0h = {"fontWeight":"600","lineHeight":"20px","fontSize":"16px"};
+const calciteTypographyBold1h = {"fontWeight":"600","lineHeight":"24px","fontSize":"18px"};
+const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"16px"};
+const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"18px"};
+const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"20px"};
+const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"125%","fontSize":"24px"};
+const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"12px"};
+const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"137.5%"};
+const calciteTypographyWrapRegular0 = {"lineHeight":"137.5%","fontSize":"16px"};
+const calciteTypographyWrapRegular1 = {"lineHeight":"137.5%","fontSize":"18px"};
+const calciteTypographyWrapRegular2 = {"lineHeight":"137.5%","fontSize":"20px"};
+const calciteTypographyWrapRegular3 = {"lineHeight":"137.5%","fontSize":"24px"};
+const calciteTypographyWrapRegularMinus2 = {"lineHeight":"137.5%","fontSize":"12px"};
+const calciteTypographyWrapRegularMinus1 = {"lineHeight":"137.5%"};
+const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
+const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
+const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
+const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
+const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"12px"};
+const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"137.5%"};
+const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"16px"};
+const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"18px"};
+const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
+const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
+const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"12px"};
+const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"137.5%"};
+const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"};
+const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"};
+const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"};
+const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"};
+const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"};
+const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"};
+const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"137.5%"};
+const calciteTypographyHierarchyBodySnug = {"lineHeight":"137.5%"};
+const calciteTypographyHierarchyBody = {"fontFamily":["Avenir Next World","Avenir Next LT Pro","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"};
+const calciteTypographyHierarchyOverline = {"lineHeight":"12px","textCase":"uppercase","fontWeight":"700"};
+const calciteTypographyHierarchyCaption = {"lineHeight":"137.5%","fontSize":"12px"};
+const calciteZIndexDeep = "-999999";
+const calciteZIndex = "1";
+const calciteZIndexSticky = "300";
+const calciteZIndexHeader = "400";
+const calciteZIndexToast = "500";
+const calciteZIndexDropdown = "600";
+const calciteZIndexOverlay = "700";
+const calciteZIndexModal = "800";
+const calciteZIndexPopup = "900";
+const calciteZIndexTooltip = "901";
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+/**
+ * A breakpoints lookup object.
+ */
+const breakpoints = {
+    width: {
+        large: cssLengthToNumber(calciteContainerSizeWidthLg.max),
+        medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),
+        small: cssLengthToNumber(calciteContainerSizeWidthSm.max),
+        xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),
+        xxsmall: cssLengthToNumber(calciteContainerSizeWidthXxs.max),
+    },
+};
+function cssLengthToNumber(length) {
+    return parseInt(length);
+}
+
+const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.chevron,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity:0;background-color:transparent;padding:0px;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-3)}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{color:var(--calcite-color-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-color-border-2)}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);border-block-end-color:var(--calcite-color-brand)}.chevron:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-brand)}.chevron:active{background-color:var(--calcite-color-foreground-3)}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";
+
+const firstAndLastPageCount = 2;
+const ellipsisCount = 2;
+const maxItemBreakpoints = {
+    large: 11,
+    medium: 9,
+    small: 7,
+    xsmall: 5,
+    xxsmall: 1,
+};
+const Pagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 6);
+        this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
+        this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
+        this.firstClicked = () => {
+            this.startItem = 1;
+            this.emitUpdate();
+        };
+        this.lastClicked = () => {
+            this.startItem = this.lastStartItem;
+            this.emitUpdate();
+        };
+        this.previousClicked = async () => {
+            await this.previousPage();
+            this.emitUpdate();
+        };
+        this.nextClicked = async () => {
+            await this.nextPage();
+            this.emitUpdate();
+        };
+        this.handlePageClick = (event) => {
+            const target = event.target;
+            this.startItem = parseInt(target.value, 10);
+            this.emitUpdate();
+        };
+        this.groupSeparator = false;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.numberingSystem = undefined;
+        this.pageSize = 20;
+        this.scale = "m";
+        this.startItem = 1;
+        this.totalItems = 0;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.maxItems = maxItemBreakpoints.xxsmall;
+        this.totalPages = undefined;
+        this.lastStartItem = undefined;
+        this.isXXSmall = undefined;
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    handleTotalPages() {
+        if (this.pageSize < 1) {
+            this.pageSize = 1;
+        }
+        this.totalPages = this.totalItems / this.pageSize;
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    effectiveLocaleWatcher() {
+        numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            useGrouping: this.groupSeparator,
+        };
+    }
+    handleLastStartItemChange() {
+        const { totalItems, pageSize, totalPages } = this;
+        this.lastStartItem =
+            (totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize) + 1;
+    }
+    handleIsXXSmall() {
+        this.isXXSmall = this.maxItems === maxItemBreakpoints.xxsmall;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        var _a;
+        connectLocalized(this);
+        connectMessages(this);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+    }
+    async componentWillLoad() {
+        await setUpMessages(this);
+        setUpLoadableComponent(this);
+        this.handleTotalPages();
+        this.handleLastStartItemChange();
+        this.handleIsXXSmall();
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+        this.setMaxItemsToBreakpoint(this.el.clientWidth);
+    }
+    disconnectedCallback() {
+        var _a;
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component's first focusable element. */
+    async setFocus() {
+        await componentFocusable(this);
+        this.el.focus();
+    }
+    /** Go to the next page of results. */
+    async nextPage() {
+        this.startItem = Math.min(this.lastStartItem, this.startItem + this.pageSize);
+    }
+    /** Go to the previous page of results. */
+    async previousPage() {
+        this.startItem = Math.max(1, this.startItem - this.pageSize);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    setMaxItemsToBreakpoint(width) {
+        if (!breakpoints || !width) {
+            return;
+        }
+        if (width >= breakpoints.width.medium) {
+            this.maxItems = maxItemBreakpoints.large;
+            return;
+        }
+        if (width >= breakpoints.width.small) {
+            this.maxItems = maxItemBreakpoints.medium;
+            return;
+        }
+        if (width >= breakpoints.width.xsmall) {
+            this.maxItems = maxItemBreakpoints.small;
+            return;
+        }
+        if (width >= breakpoints.width.xxsmall) {
+            this.maxItems = maxItemBreakpoints.xsmall;
+            return;
+        }
+        this.maxItems = maxItemBreakpoints.xxsmall;
+    }
+    showStartEllipsis() {
+        return (this.totalPages > this.maxItems &&
+            Math.floor(this.startItem / this.pageSize) >
+                this.maxItems - firstAndLastPageCount - ellipsisCount);
+    }
+    showEndEllipsis() {
+        return (this.totalPages > this.maxItems &&
+            (this.totalItems - this.startItem) / this.pageSize >
+                this.maxItems - firstAndLastPageCount - (ellipsisCount - 1));
+    }
+    emitUpdate() {
+        this.calcitePaginationChange.emit();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    //--------------------------------------------------------------------------
+    renderEllipsis(type) {
+        return (h("span", { class: CSS.ellipsis, "data-test-ellipsis": type, key: type }, "\u2026"));
+    }
+    renderItems() {
+        const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } = this;
+        const items = [];
+        if (isXXSmall) {
+            items.push(this.renderPage(startItem));
+            return items;
+        }
+        const renderFirstPage = totalItems > pageSize;
+        const renderStartEllipsis = this.showStartEllipsis();
+        const renderEndEllipsis = this.showEndEllipsis();
+        if (renderFirstPage) {
+            items.push(this.renderPage(1));
+        }
+        if (renderStartEllipsis) {
+            items.push(this.renderEllipsis("start"));
+        }
+        const remainingItems = maxItems -
+            firstAndLastPageCount -
+            (renderEndEllipsis ? 1 : 0) -
+            (renderStartEllipsis ? 1 : 0);
+        let end;
+        let nextStart;
+        // if we don't need ellipses render the whole set
+        if (totalPages - 1 <= remainingItems) {
+            nextStart = 1 + pageSize;
+            end = lastStartItem - pageSize;
+        }
+        else {
+            // if we're within max pages of page 1
+            if (startItem / pageSize < remainingItems) {
+                nextStart = 1 + pageSize;
+                end = 1 + remainingItems * pageSize;
+            }
+            else {
+                // if we're within max pages of last page
+                if (startItem + remainingItems * pageSize >= totalItems) {
+                    nextStart = lastStartItem - remainingItems * pageSize;
+                    end = lastStartItem - pageSize;
+                }
+                else {
+                    // if we're within the center pages
+                    nextStart = startItem - pageSize * ((remainingItems - 1) / 2);
+                    end = startItem + pageSize * ((remainingItems - 1) / 2);
+                }
+            }
+        }
+        for (let i = 0; i < remainingItems && nextStart <= end; i++) {
+            items.push(this.renderPage(nextStart));
+            nextStart = nextStart + pageSize;
+        }
+        if (renderEndEllipsis) {
+            items.push(this.renderEllipsis("end"));
+        }
+        items.push(this.renderPage(lastStartItem));
+        return items;
+    }
+    renderPage(start) {
+        const { pageSize } = this;
+        const page = Math.floor(start / pageSize) + (pageSize === 1 ? 0 : 1);
+        numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            useGrouping: this.groupSeparator,
+        };
+        const displayedPage = numberStringFormatter.localize(page.toString());
+        const selected = start === this.startItem;
+        return (h("button", { "aria-current": selected ? "page" : "false", class: {
+                [CSS.page]: true,
+                [CSS.selected]: selected,
+            }, onClick: this.handlePageClick, value: start }, displayedPage));
+    }
+    renderPreviousChevron() {
+        const { pageSize, startItem, messages } = this;
+        const disabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
+        return (h("button", { "aria-label": messages.previous, class: {
+                [CSS.chevron]: true,
+                [CSS.disabled]: disabled,
+            }, "data-test-chevron": "previous", disabled: disabled, key: "previous", onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.previous, scale: getIconScale(this.scale) })));
+    }
+    renderNextChevron() {
+        const { totalItems, pageSize, startItem, messages } = this;
+        const disabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
+        return (h("button", { "aria-label": messages.next, class: {
+                [CSS.chevron]: true,
+                [CSS.disabled]: disabled,
+            }, "data-test-chevron": "next", disabled: disabled, key: "next-button", onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.next, scale: getIconScale(this.scale) })));
+    }
+    renderFirstChevron() {
+        const { messages, startItem, isXXSmall } = this;
+        const disabled = startItem === 1;
+        return isXXSmall ? (h("button", { "aria-label": messages.first, class: {
+                [CSS.chevron]: true,
+                [CSS.disabled]: disabled,
+            }, disabled: disabled, key: "first-button", onClick: this.firstClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.first, scale: getIconScale(this.scale) }))) : null;
+    }
+    renderLastChevron() {
+        const { messages, startItem, isXXSmall, lastStartItem } = this;
+        const disabled = startItem === lastStartItem;
+        return isXXSmall ? (h("button", { "aria-label": messages.last, class: {
+                [CSS.chevron]: true,
+                [CSS.disabled]: disabled,
+            }, disabled: disabled, key: "last-button", onClick: this.lastClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.last, scale: getIconScale(this.scale) }))) : null;
+    }
+    render() {
+        return (h(Fragment, null, this.renderFirstChevron(), this.renderPreviousChevron(), this.renderItems(), this.renderNextChevron(), this.renderLastChevron()));
+    }
+    static get delegatesFocus() { return true; }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "totalItems": ["handleTotalPages", "handleLastStartItemChange"],
+        "pageSize": ["handleTotalPages", "handleLastStartItemChange"],
+        "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"],
+        "totalPages": ["handleLastStartItemChange"],
+        "maxItems": ["handleIsXXSmall"]
+    }; }
+};
+Pagination.style = paginationCss;
+
+export { Pagination as calcite_pagination };