@esri/solutions-components 0.8.67 → 0.9.0

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

@@ -1,580 +0,0 @@
-/*!
- * 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-0eecd45f.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5f2ac40f.js';
-import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-1b4d548e.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-2df2d559.js';
-import { c as createObserver } from './observers-81ed4977.js';
-import { g as getIconScale } from './component-960ddabf.js';
-import './dom-1f06a111.js';
-import './guid-f05d01d5.js';
-import './resources-be0262db.js';
-import './key-15222297.js';
-
-/**
- * Do not edit directly
- * Generated on Wed, 01 May 2024 00:07:12 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","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","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","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","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.8.2
- */
-/**
- * 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);
-}
-
-/*!
- * 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.8.2
- */
-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",
-};
-
-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-ui-focus-color, 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:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform 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);
-    }
-    /**
-     * Set a specified page as active.
-     *
-     * @param page
-     */
-    async goTo(page) {
-        switch (page) {
-            case "start":
-                this.startItem = 1;
-                break;
-            case "end":
-                this.startItem = this.lastStartItem;
-                break;
-            default: {
-                if (page >= Math.ceil(this.totalPages)) {
-                    this.startItem = this.lastStartItem;
-                }
-                else if (page <= 0) {
-                    this.startItem = 1;
-                }
-                else {
-                    this.startItem = (page - 1) * this.pageSize + 1;
-                }
-            }
-        }
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  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, { key: '9d37f173bfa3e76e1d7ce4d2b013383d13e1c331' }, 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 };