@esri/calcite-components/dist/calcite/p-13c5d8c5.entry.js

Web Components for Esri's Calcite Design System.

/*!
 * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
 * v1.5.0-next.4
 */
import{r as t,c as i,h as e,F as a,a as s}from"./p-8789682d.js";import{s as n,a as o,c}from"./p-deebcc06.js";import{n as r,c as l,d as h}from"./p-743ed09c.js";import{u as p,c as m,s as d,d as u}from"./p-9dd9a26d.js";import"./p-68f223ec.js";import"./p-d2aa9245.js";import"./p-9280476e.js";import"./p-4929e834.js";import"./p-c8e46b02.js";const f="is-disabled",g="ellipsis",v=class{constructor(e){t(this,e),this.calcitePaginationChange=i(this,"calcitePaginationChange",6),this.previousClicked=()=>{this.previousPage().then(),this.emitUpdate()},this.nextClicked=()=>{this.nextPage(),this.emitUpdate()},this.groupSeparator=!1,this.messageOverrides=void 0,this.pageSize=20,this.numberingSystem=void 0,this.startItem=1,this.totalItems=0,this.scale="m",this.defaultMessages=void 0,this.effectiveLocale="",this.messages=void 0}onMessagesChange(){}effectiveLocaleChange(){p(this,this.effectiveLocale)}effectiveLocaleWatcher(){r.numberFormatOptions={locale:this.effectiveLocale,numberingSystem:this.numberingSystem,useGrouping:this.groupSeparator}}connectedCallback(){l(this),m(this)}async componentWillLoad(){await d(this),n(this)}componentDidLoad(){o(this)}disconnectedCallback(){h(this),u(this)}async setFocus(){await c(this),this.el.focus()}async nextPage(){this.startItem=Math.min(this.getLastStart(),this.startItem+this.pageSize)}async previousPage(){this.startItem=Math.max(1,this.startItem-this.pageSize)}getLastStart(){const{totalItems:t,pageSize:i}=this;return 1+(t%i==0?t-i:Math.floor(t/i)*i)}showLeftEllipsis(){return Math.floor(this.startItem/this.pageSize)>3}showRightEllipsis(){return(this.totalItems-this.startItem)/this.pageSize>3}emitUpdate(){this.calcitePaginationChange.emit()}renderPages(){const t=this.getLastStart();let i,e;this.totalItems/this.pageSize<=5?(e=1+this.pageSize,i=t-this.pageSize):this.startItem/this.pageSize<4?(e=1+this.pageSize,i=1+4*this.pageSize):this.startItem+3*this.pageSize>=this.totalItems?(e=t-4*this.pageSize,i=t-this.pageSize):(e=this.startItem-this.pageSize,i=this.startItem+this.pageSize);const a=[];for(;e<=i;)a.push(e),e+=this.pageSize;return a.map((t=>this.renderPage(t)))}renderPage(t){const i=Math.floor(t/this.pageSize)+(1===this.pageSize?0:1);r.numberFormatOptions={locale:this.effectiveLocale,numberingSystem:this.numberingSystem,useGrouping:this.groupSeparator};const a=r.localize(i.toString()),s=t===this.startItem;return e("button",{"aria-current":s?"page":"false",class:{page:!0,"is-selected":s},onClick:()=>{this.startItem=t,this.emitUpdate()}},a)}renderLeftEllipsis(){if(this.totalItems/this.pageSize>5&&this.showLeftEllipsis())return e("span",{class:`${g} ellipsis--start`},"…")}renderRightEllipsis(){if(this.totalItems/this.pageSize>5&&this.showRightEllipsis())return e("span",{class:`${g} ellipsis--end`},"…")}render(){const{totalItems:t,pageSize:i,startItem:s}=this,n=1===i?s<=i:s<i,o=s+i>t;return e(a,null,e("button",{"aria-label":this.messages.previous,class:{previous:!0,[f]:n},disabled:n,onClick:this.previousClicked},e("calcite-icon",{flipRtl:!0,icon:"chevronLeft",scale:"l"===this.scale?"m":"s"})),t>i?this.renderPage(1):null,this.renderLeftEllipsis(),this.renderPages(),this.renderRightEllipsis(),this.renderPage(this.getLastStart()),e("button",{"aria-label":this.messages.next,class:{next:!0,[f]:o},disabled:o,onClick:this.nextClicked},e("calcite-icon",{flipRtl:!0,icon:"chevronRight",scale:"l"===this.scale?"m":"s"})))}static get delegatesFocus(){return!0}static get assetsDirs(){return["assets"]}get el(){return s(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange","effectiveLocaleWatcher"]}}};v.style="@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([scale=s]){--calcite-pagination-spacing-internal:0.25rem 0.5rem}:host([scale=s]) .previous,:host([scale=s]) .next,:host([scale=s]) .page{block-size:1.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .previous,:host([scale=s]) .next{padding-inline:0.25rem}:host([scale=m]){--calcite-pagination-spacing-internal:0.5rem 0.75rem}:host([scale=m]) .previous,:host([scale=m]) .next,:host([scale=m]) .page{block-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .previous,:host([scale=m]) .next{padding-inline:0.5rem}:host([scale=l]){--calcite-pagination-spacing-internal:0.75rem 1rem}:host([scale=l]) .previous,:host([scale=l]) .next,:host([scale=l]) .page{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .previous,:host([scale=l]) .next{padding-inline:1rem}:host{display:flex;writing-mode:horizontal-tb}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.previous,.next,.page{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;border-style:none;--tw-border-opacity:0;background-color:transparent;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3);border-block:2px solid transparent}.previous:hover,.next:hover,.page:hover{color:var(--calcite-ui-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-ui-border-2)}.page.is-selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}.previous:hover,.next:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}.previous:active,.next:active{background-color:var(--calcite-ui-foreground-3)}.previous.is-disabled,.next.is-disabled{pointer-events:none;background-color:transparent}.previous.is-disabled>calcite-icon,.next.is-disabled>calcite-icon{opacity:var(--calcite-ui-opacity-disabled)}.next{margin-inline-end:0px}.page,.ellipsis{padding:var(--calcite-pagination-spacing-internal)}.ellipsis{display:flex;align-items:flex-end;color:var(--calcite-ui-text-3)}";export{v as calcite_pagination}