@esri/calcite-components 6.0.0-next.16 → 6.0.0-next.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "6.0.0-next.16",
+  "version": "6.0.0-next.18",
   "description": "Web Components for Esri's Calcite Design System.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -35,7 +35,7 @@
   "dependencies": {
     "@arcgis/lumina": ">=6.0.0-next.16 <7.0.0",
     "@arcgis/toolkit": ">=6.0.0-next.16 <7.0.0",
-    "@esri/calcite-design-tokens": "4.2.1-next.1",
+    "@esri/calcite-design-tokens": "5.0.0-next.0",
     "@esri/calcite-ui-icons": "4.7.0-next.1",
     "@floating-ui/dom": "^1.8.0",
     "@floating-ui/utils": "^0.2.8",
@@ -57,7 +57,7 @@
     "@arcgis/eslint-config": ">=6.0.0-next.16 <7.0.0",
     "@arcgis/lumina-compiler": ">=6.0.0-next.16 <7.0.0",
     "@cloudfour/simple-svg-placeholder": "1.2.0",
-    "@esri/calcite-tailwind-preset": "1.2.0-next.1",
+    "@esri/calcite-tailwind-preset": "1.2.0-next.2",
     "@esri/calcite-typescript-config": "0.0.1-next.7",
     "@esri/eslint-config-calcite": "0.0.1-next.14",
     "@esri/eslint-plugin-calcite-components": "2.0.5-next.0",

package/dist/cdn/4DQBCTK5.js

@@ -1,2 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import{a as t,b as e,c as a,d as n,e as m}from"./B3OV6FHO.js";var l={width:{large:i(m.max),medium:i(n.max),small:i(a.max),xsmall:i(e.max),xxsmall:i(t.max)}};function i(r){return parseInt(r,10)}export{l as a};

package/dist/cdn/B3OV6FHO.js

@@ -1,2 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-var e={min:"0",max:"320px"};var t={min:"321px",max:"476px"},o={min:"477px",max:"768px"},c={min:"769px",max:"1152px"},i={min:"1153px",max:"1440px"};var r="8px",n="12px";var a="16px";var p="2px",l="0.25rem";var x="0.5rem";export{e as a,t as b,o as c,c as d,i as e,r as f,n as g,a as h,p as i,l as j,x as k};

package/dist/cdn/D6T2YJFD.js

@@ -1,2 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import{a as p}from"./4DQBCTK5.js";import"./B3OV6FHO.js";import{a as w}from"./FDHY2TZA.js";import{j as b}from"./GHBIFC5D.js";import{a as d}from"./BQFXKCUG.js";import{a as L}from"./AR2G33MM.js";import"./JN6YLTUP.js";import{a as E}from"./I2CHKYB5.js";import{a as u}from"./VMHJHFFS.js";import"./PZNRNV2R.js";import"./SL7C7M4R.js";import"./G4SOANDF.js";import{G as P,H as r,T as X,g as $,h as o,l as y,p as C}from"./FYY4XFX7.js";var s={list:"list",listItem:"list-item",hiddenItem:"hidden-item",page:"page",selected:"selected",chevron:"chevron",disabled:"disabled",ellipsis:"ellipsis"},f={next:"chevron-right",previous:"chevron-left",first:"chevron-start",last:"chevron-end"},O=$`:host{display:flex;writing-mode:horizontal-tb}.list{margin:0;display:flex;list-style-type:none;padding:0;column-gap:var(--calcite-theme-space-base, var(--calcite-spacing-base))}.list-item{margin:0;display:flex;padding:0}.hidden-item{display:none}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);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-relative-md);line-height:var(--calcite-font-line-height-md);min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:var(--calcite-space-sm-plus)}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:.75rem}:host button{outline-color:transparent}:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-theme-space-base, var(--calcite-spacing-base))) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron,.page,.ellipsis{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity: 0;background-color:transparent;padding:0;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);color:var(--calcite-pagination-color, var(--calcite-color-text-3))}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.chevron:active,.page:active{color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.page:hover{border-block-end-color:var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2))}.page:active{background-color:var(--calcite-pagination-background-color, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)))}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1));border-block-end-color:var(--calcite-pagination-color-border-active, var(--calcite-color-brand))}.page.selected:focus{border-block-end-width:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));padding-block-start:var(--calcite-theme-space-base, var(--calcite-spacing-base))}.chevron:hover{background-color:var(--calcite-pagination-icon-color-background-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}.chevron:active{background-color:var(--calcite-pagination-background-color, var(--calcite-theme-color-surface-4, 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}`,I=2,M=2,m={large:11,medium:9,small:7,xsmall:5,xxsmall:1},x=class extends P{constructor(){super(...arguments),this.resizeHandler=({contentRect:{width:e}})=>this.setMaxItemsToBreakpoint(e),this.resizeObserver=w("resize",e=>e.forEach(this.resizeHandler)),this.messages=L({blocking:!0}),this.focusSetter=E()(this),this.isXXSmall=!1,this.lastStartItem=1,this.maxItems=m.xxsmall,this.totalPages=1,this.groupSeparator=!1,this.pageSize=20,this.scale="m",this.startItem=1,this.totalItems=0,this.calcitePaginationChange=C({cancelable:!1})}static{this.properties={isXXSmall:[16,{},{state:!0}],lastStartItem:[16,{},{state:!0}],maxItems:[16,{},{state:!0}],totalPages:[16,{},{state:!0}],groupSeparator:[7,{},{reflect:!0,type:Boolean}],messageOverrides:[0,{},{attribute:!1}],numberingSystem:1,pageSize:[11,{},{reflect:!0,type:Number}],scale:[3,{},{reflect:!0}],startItem:[11,{},{reflect:!0,type:Number}],totalItems:[11,{},{reflect:!0,type:Number}]}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=O}async goTo(e){switch(e){case"start":this.startItem=1;break;case"end":this.startItem=this.lastStartItem;break;default:e>=Math.ceil(this.totalPages)?this.startItem=this.lastStartItem:e<=0?this.startItem=1:this.startItem=(e-1)*this.pageSize+1}}async nextPage(){this.startItem=Math.min(this.lastStartItem,this.startItem+this.pageSize)}async previousPage(){this.startItem=Math.max(1,this.startItem-this.pageSize)}async setFocus(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),this.resizeObserver?.observe(this.el)}async load(){this.handleTotalPages(),this.handleLastStartItemChange(),this.handleIsXXSmall()}willUpdate(e){(e.has("totalItems")&&(this.hasUpdated||this.totalItems!==0)||e.has("pageSize")&&(this.hasUpdated||this.pageSize!==20))&&this.handleTotalPages(),(e.has("totalItems")&&(this.hasUpdated||this.totalItems!==0)||e.has("pageSize")&&(this.hasUpdated||this.pageSize!==20)||e.has("totalPages"))&&this.handleLastStartItemChange(),e.has("maxItems")&&(this.hasUpdated||this.maxItems!==m.xxsmall)&&this.handleIsXXSmall(),e.has("messages")&&this.effectiveLocaleChange()}loaded(){this.setMaxItemsToBreakpoint(this.el.clientWidth)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}handleTotalPages(){this.pageSize=Math.max(1,this.pageSize),this.totalPages=Math.max(1,this.totalItems/this.pageSize)}effectiveLocaleChange(){b.numberFormatOptions={locale:this.messages._lang,numberingSystem:this.numberingSystem,useGrouping:this.groupSeparator}}handleLastStartItemChange(){let{totalItems:e,pageSize:t}=this;this.lastStartItem=Math.max(1,Math.floor((e-1)/t)*t+1)}handleIsXXSmall(){this.isXXSmall=this.maxItems===m.xxsmall}setMaxItemsToBreakpoint(e){if(!(!p||!e)){if(e>=p.width.medium){this.maxItems=m.large;return}if(e>=p.width.small){this.maxItems=m.medium;return}if(e>=p.width.xsmall){this.maxItems=m.small;return}if(e>=p.width.xxsmall){this.maxItems=m.xsmall;return}this.maxItems=m.xxsmall}}firstClicked(){this.startItem=1,this.emitUpdate()}lastClicked(){this.startItem=this.lastStartItem,this.emitUpdate()}async previousClicked(){await this.previousPage(),this.emitUpdate()}async nextClicked(){await this.nextPage(),this.emitUpdate()}showStartEllipsis(){return this.totalPages>this.maxItems&&Math.floor(this.startItem/this.pageSize)>this.maxItems-I-M}showEndEllipsis(){return this.totalPages>this.maxItems&&(this.totalItems-this.startItem)/this.pageSize>this.maxItems-I-(M-1)}emitUpdate(){this.calcitePaginationChange.emit()}handlePageClick(e){let t=e.target;this.startItem=parseInt(t.value,10),this.emitUpdate()}renderEllipsis(e){return o`<li aria-hidden=true role=presentation>${d(e,o`<span class=${r(s.ellipsis)}>&hellip;</span>`)}</li>`}renderItems(){let{totalItems:e,pageSize:t,startItem:a,maxItems:i,totalPages:l,lastStartItem:v,isXXSmall:U}=this,n=[];if(U)return n.push(this.renderPage(a)),n;let F=e>t,S=this.showStartEllipsis(),k=this.showEndEllipsis();F&&n.push(this.renderPage(1)),S&&n.push(this.renderEllipsis("start"));let c=i-I-(k?1:0)-(S?1:0),g,h;l-1<=c?(h=1+t,g=v-t):a/t<c?(h=1+t,g=1+c*t):a+c*t>=e?(h=v-c*t,g=v-t):(h=a-t*((c-1)/2),g=a+t*((c-1)/2));for(let z=0;z<c&&h<=g;z++)n.push(this.renderPage(h)),h=h+t;return k&&n.push(this.renderEllipsis("end")),n.push(this.renderPage(v)),n}renderPage(e){let{pageSize:t}=this,a=Math.floor(e/t)+(t===1?0:1);b.numberFormatOptions={locale:this.messages._lang,numberingSystem:this.numberingSystem,useGrouping:this.groupSeparator};let i=b.localize(a.toString()),l=e===this.startItem;return o`<li class=${r(s.listItem)}><button .ariaCurrent=${l?"page":"false"} class=${r({[s.page]:!0,[s.selected]:l})} @click=${this.handlePageClick} value=${e??y}>${i}</button></li>`}renderPreviousChevron(){let{pageSize:e,startItem:t,messages:a}=this,i=e===1?t<=e:t<e;return d("previous",o`<button .ariaLabel=${a.previous} class=${r({[s.chevron]:!0,[s.disabled]:i})} .disabled=${i} @click=${this.previousClicked}><calcite-icon flip-rtl .icon=${f.previous} .scale=${u(this.scale)}></calcite-icon></button>`)}renderNextChevron(){let{totalItems:e,pageSize:t,startItem:a,messages:i}=this,l=a+t>e;return d("next-button",o`<button .ariaLabel=${i.next} class=${r({[s.chevron]:!0,[s.disabled]:l})} .disabled=${l} @click=${this.nextClicked}><calcite-icon flip-rtl .icon=${f.next} .scale=${u(this.scale)}></calcite-icon></button>`)}renderFirstChevron(){let{messages:e,startItem:t,isXXSmall:a}=this,i=t===1;return a?d("first-button",o`<button .ariaLabel=${e.first} class=${r({[s.chevron]:!0,[s.disabled]:i})} .disabled=${i} @click=${this.firstClicked}><calcite-icon flip-rtl .icon=${f.first} .scale=${u(this.scale)}></calcite-icon></button>`):null}renderLastChevron(){let{messages:e,startItem:t,isXXSmall:a,lastStartItem:i}=this,l=t===i;return a?d("last-button",o`<button .ariaLabel=${e.last} class=${r({[s.chevron]:!0,[s.disabled]:l})} .disabled=${l} @click=${this.lastClicked}><calcite-icon flip-rtl .icon=${f.last} .scale=${u(this.scale)}></calcite-icon></button>`):null}render(){let e=this.renderFirstChevron(),t=this.renderLastChevron();return o`<ul class=${r(s.list)}><li class=${r({[s.listItem]:!0,[s.hiddenItem]:!e})}>${e}</li><li class=${r(s.listItem)}>${this.renderPreviousChevron()}</li>${this.renderItems()}<li class=${r(s.listItem)}>${this.renderNextChevron()}</li><li class=${r({[s.listItem]:!0,[s.hiddenItem]:!t})}>${t}</li></ul>`}};X("calcite-pagination",x);export{x as Pagination};

package/dist/cdn/Y2U5725B.js

@@ -1,2 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import{a as k}from"./4DQBCTK5.js";import{a as V}from"./4QIXH4ZJ.js";import"./B3OV6FHO.js";import{a as q}from"./UH5KCS6M.js";import{a as K}from"./URA5UYWO.js";import{a as M}from"./FDHY2TZA.js";import{a as D}from"./BBZC3BBE.js";import{a as j}from"./CASNTUXN.js";import{j as I}from"./GHBIFC5D.js";import{a as N}from"./AR2G33MM.js";import"./JN6YLTUP.js";import{a as W}from"./I2CHKYB5.js";import"./VMHJHFFS.js";import{e as L}from"./PZNRNV2R.js";import"./SL7C7M4R.js";import{C as v,E as U,y as B}from"./G4SOANDF.js";import{E as b,F as y,G as H,H as l,M as E,T as F,g as O,h as s,l as u,p as h}from"./FYY4XFX7.js";var J=6e3,i={container:"container",containerOverlaid:"container--overlaid",containerEdged:"container--edged",itemContainer:"item-container",itemContainerForward:"item-container--forward",itemContainerBackward:"item-container--backward",controlsArea:"controls-area",pagination:"pagination",paginationItems:"pagination-items",paginationItem:"pagination-item",paginationItemIndividual:"pagination-item--individual",paginationItemVisible:"pagination-item--visible",paginationItemOutOfRange:"pagination-item--out-of-range",paginationItemSelected:"pagination-item--selected",paginationItemRangeEdge:"pagination-item--range-edge",pageNext:"page-next",pagePrevious:"page-previous",autoplayControl:"autoplay-control",autoplayProgress:"autoplay-progress"},g={chevronLeft:"chevron-left",chevronRight:"chevron-right",inactive:"bullet-point",active:"bullet-point-large",pause:"pause-f",play:"play-f"},f={medium:7,small:5,xsmall:3,xxsmall:1},Q="calcite-carousel-container",X={host:$=>`${Q}-${$}`},ee=O`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-carousel-pagination-space: 1.5rem;--calcite-internal-carousel-pagination-space-wide: 3.5rem;--calcite-internal-carousel-pagination-background-color: var( --calcite-carousel-pagination-background-color, transparent );--calcite-internal-carousel-pagination-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, transparent );--calcite-internal-carousel-pagination-background-color-press: var( --calcite-carousel-pagination-background-color-press, transparent );--calcite-internal-carousel-pagination-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, transparent );--calcite-internal-carousel-pagination-overlay-background-color: var( --calcite-carousel-pagination-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)) );--calcite-internal-carousel-pagination-overlay-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)) );--calcite-internal-carousel-pagination-overlay-background-color-active: var( --calcite-carousel-pagination-background-color-press, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)) );--calcite-internal-carousel-pagination-overlay-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)) );--calcite-internal-carousel-pagination-icon-color-hover: var( --calcite-carousel-pagination-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-carousel-pagination-icon-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-border-1) );--calcite-internal-carousel-pagination-icon-color-selected: var( --calcite-carousel-pagination-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-carousel-control-icon-color-hover: var( --calcite-carousel-control-icon-color-hover, var(--calcite-internal-carousel-pagination-icon-color-hover) );--calcite-internal-carousel-control-icon-color: var( --calcite-carousel-control-icon-color, var(--calcite-carousel-pagination-icon-color, var(--calcite-color-text-3)) );--calcite-internal-carousel-autoplay-progress-background-color: var( --calcite-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-carousel-autoplay-progress-fill-color: var( --calcite-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) );--calcite-internal-carousel-autoplay-control-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-text-3) )}.container{outline-color:transparent;position:relative;display:flex;flex-direction:column;overflow:hidden;color:var(--calcite-color-text-2);inline-size:100%;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-carousel-pagination-space-wide);inline-size:calc(100% - var(--calcite-internal-carousel-pagination-space-wide) * 2)}.item-container{display:flex;align-items:flex-start;justify-content:center;overflow:auto;flex:1 1 auto;padding:var(--calcite-space-2xs);animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.controls-area{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--calcite-space-md);inline-size:auto}.pagination{display:flex;flex-direction:row;align-items:center;justify-content:center}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .controls-area{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-carousel-control-icon-color);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-carousel-control-icon-color-hover);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:var(--calcite-size-xl);inline-size:var(--calcite-size-xl);position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .controls-area{inset-block-start:unset;inset-block-end:0;inset-inline:0}:host([pagination-position=top]) .container--overlaid .controls-area{inset-block-start:0;inset-block-end:unset}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-carousel-autoplay-control-color);--calcite-progress-fill-color: var(--calcite-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent;margin:0;block-size:var(--calcite-space-3xl);inline-size:var(--calcite-space-3xl);cursor:pointer;align-items:center;border-style:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;background-color:var(--calcite-internal-carousel-pagination-background-color);color:var(--calcite-internal-carousel-pagination-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-background-color-hover);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-background-color-press);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-background-color-press);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}.pagination-item--individual{inline-size:0;padding:0;opacity:0;pointer-events:none;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{inline-size:var(--calcite-space-3xl);opacity:1;pointer-events:auto;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`,w=class extends H{constructor(){super(...arguments),this.autoplayHandler=()=>{this.clearIntervals(),this.slideDurationInterval=setInterval(this.timer,this.autoplayDuration/100)},this.containerRef=b(),this.containerId=X.host(j()),this.direction=L(),this.itemContainerRef=b(),this.resizeHandler=({contentRect:{width:e}})=>{this.setMaxItemsToBreakpoint(e)},this.resizeObserver=M("resize",e=>e.forEach(this.resizeHandler)),this.tabListRef=b(),this.timer=()=>{let e=this.slideDurationRemaining;(!this.suspendedDueToFocus&&!this.suspendedDueToHover||this.userPreventsSuspend)&&(e<=.01?(e=1,this.itemDirection="forward",this.nextItem(!1)):e=e-.01),e>0&&(this.slideDurationRemaining=e)},this.messages=N({blocking:!0}),this.focusSetter=W()(this),this.interactiveContainer=K(this),this.itemDirection="standby",this.hasMultiple=!1,this.items=[],this.maxItems=f.xxsmall,this.playing=!1,this.selectedIndex=0,this.slideDurationRemaining=1,this.suspendedDueToFocus=!1,this.suspendedDueToHover=!1,this.suspendedSlideDurationRemaining=1,this.userPreventsSuspend=!1,this.arrowType="inline",this.autoplay=!1,this.autoplayDuration=J,this.controlOverlay=!1,this.disabled=!1,this.paginationDisabled=!1,this.paginationPosition="bottom",this.calciteCarouselChange=h({cancelable:!1}),this.calciteCarouselPause=h({cancelable:!1}),this.calciteCarouselPlay=h({cancelable:!1}),this.calciteCarouselResume=h({cancelable:!1}),this.calciteCarouselStop=h({cancelable:!1})}static{this.properties={itemDirection:[16,{},{state:!0}],hasMultiple:[16,{},{state:!0}],items:[16,{},{state:!0}],maxItems:[16,{},{state:!0}],playing:[16,{},{state:!0}],selectedIndex:[16,{},{state:!0}],slideDurationRemaining:[16,{},{state:!0}],suspendedDueToFocus:[16,{},{state:!0}],suspendedDueToHover:[16,{},{state:!0}],suspendedSlideDurationRemaining:[16,{},{state:!0}],userPreventsSuspend:[16,{},{state:!0}],arrowType:[3,{},{reflect:!0}],autoplay:[3,{},{reflect:!0}],autoplayDuration:[11,{},{type:Number,reflect:!0}],controlOverlay:[7,{},{reflect:!0,type:Boolean}],disabled:[7,{},{reflect:!0,type:Boolean}],label:1,messageOverrides:[0,{},{attribute:!1}],paginationDisabled:[5,{},{type:Boolean}],paginationPosition:[3,{},{reflect:!0}],paused:[5,{},{type:Boolean}],selectedItem:[0,{},{attribute:!1}]}}static{this.styles=[ee,q]}async play(){this.playing||!this.hasMultiple||this.autoplay!==""&&this.autoplay!==!0&&this.autoplay!=="paused"||this.handlePlay(!0)}async setFocus(e){return this.focusSetter(()=>this.containerRef.value,e)}async stop(){this.playing&&this.handlePause(!0)}connectedCallback(){super.connectedCallback(),this.resizeObserver?.observe(this.el)}async load(){(this.autoplay===""||this.autoplay)&&this.autoplay!=="paused"?this.handlePlay(!1):this.autoplay==="paused"&&(this.paused=!0)}willUpdate(e){this.hasUpdated&&!this.hasMultiple&&this.handlePause(!1),e.has("autoplay")&&this.hasUpdated&&this.autoplayWatcher(this.autoplay),e.has("itemDirection")&&(this.hasUpdated||this.itemDirection!=="standby")&&this.itemDirectionWatcher(this.itemDirection),e.has("playing")&&(this.hasUpdated||this.playing!==!1)&&(this.paused=!this.playing),(e.has("suspendedDueToFocus")&&(this.hasUpdated||this.suspendedDueToFocus!==!1)||e.has("suspendedDueToHover")&&(this.hasUpdated||this.suspendedDueToHover!==!1))&&this.suspendWatcher()}disconnectedCallback(){super.disconnectedCallback(),this.clearIntervals(),this.resizeObserver?.disconnect()}autoplayWatcher(e){e||this.handlePause(!1)}async itemDirectionWatcher(e){e==="standby"||!this.itemContainerRef.value||(await U(this.itemContainerRef.value,e==="forward"?"item-forward":"item-backward"),this.itemDirection="standby")}suspendWatcher(){!this.suspendedDueToFocus&&!this.suspendedDueToHover?this.suspendEnd():this.suspendStart()}setMaxItemsToBreakpoint(e){if(e){if(e>=k.width.small){this.maxItems=f.medium;return}if(e>=k.width.xsmall){this.maxItems=f.small;return}if(e>=k.width.xxsmall){this.maxItems=f.xsmall;return}this.maxItems=f.xxsmall}}clearIntervals(){clearInterval(this.slideDurationInterval),clearInterval(this.slideInterval)}nextItem(e){this.playing&&e&&(this.playing=!1);let t=D(this.selectedIndex+1,this.items.length);this.setSelectedItem(t,e)}previousItem(){this.playing=!1;let e=D(Math.max(this.selectedIndex-1,-1),this.items.length);this.setSelectedItem(e,!0)}handlePlay(e){this.playing=!0,this.autoplayHandler(),this.slideInterval=setInterval(this.autoplayHandler,this.autoplayDuration),e&&this.calciteCarouselPlay.emit()}handlePause(e){this.playing=!1,this.clearIntervals(),this.slideDurationRemaining=1,this.suspendedSlideDurationRemaining=1,e&&this.calciteCarouselStop.emit()}suspendStart(){this.suspendedSlideDurationRemaining=this.slideDurationRemaining}suspendEnd(){this.slideDurationRemaining=this.suspendedSlideDurationRemaining}handleSlotChange(e){let t=B(e),a=t.findIndex(c=>c.selected),n=a>-1?a:0;this.items=t,this.hasMultiple=t.length>1,this.setSelectedItem(n,!1)}setSelectedItem(e,t){let a=this.selectedIndex;this.items.forEach((n,c)=>{let r=e===c;n.selected=r,r&&(this.selectedItem=n,this.selectedIndex=c)}),t&&(this.playing=!1,a!==this.selectedIndex&&this.calciteCarouselChange.emit())}handleArrowClick(e){let t=e.target.dataset.itemDirection;this.playing&&this.handlePause(!0),t==="next"?(this.itemDirection="forward",this.nextItem(!0)):t==="previous"&&(this.itemDirection="backward",this.previousItem())}handleItemSelection(e){let t=e.currentTarget,a=parseInt(t.dataset.index,10);a!==this.selectedIndex&&(this.playing&&this.handlePause(!0),this.itemDirection=a>this.selectedIndex?"forward":"backward",this.setSelectedItem(a,!0))}toggleRotation(){this.userPreventsSuspend=!0,this.playing?this.handlePause(!0):this.handlePlay(!0)}handleFocusIn(){let e=this.playing;e&&(this.suspendedDueToFocus=!0),(!this.suspendedDueToFocus||!this.suspendedDueToHover)&&e&&this.calciteCarouselPause.emit()}handleMouseIn(){let e=this.playing;e&&(this.suspendedDueToHover=!0),(!this.suspendedDueToFocus||!this.suspendedDueToHover)&&e&&this.calciteCarouselPause.emit()}handleMouseOut(e){let t=!this.el.contains(e.relatedTarget),a=this.playing;t&&a&&(this.suspendedDueToHover=!1),t&&a&&!this.suspendedDueToFocus&&(this.userPreventsSuspend=!1,this.calciteCarouselResume.emit())}handleFocusOut(e){let t=!e.composedPath().includes(e.relatedTarget),a=this.playing;t&&a&&(this.suspendedDueToFocus=!1),t&&a&&!this.suspendedDueToHover&&(this.userPreventsSuspend=!1,this.calciteCarouselResume.emit())}containerKeyDownHandler(e){if(e.target!==this.containerRef.value)return;let t=this.items.length-1;switch(e.key){case" ":case"Enter":e.preventDefault(),(this.autoplay===""||this.autoplay===!0||this.autoplay==="paused")&&this.toggleRotation();break;case"ArrowRight":if(e.preventDefault(),!this.hasMultiple)return;this.itemDirection="forward",this.nextItem(!0);break;case"ArrowLeft":if(e.preventDefault(),!this.hasMultiple)return;this.itemDirection="backward",this.previousItem();break;case"Home":if(e.preventDefault(),this.selectedIndex===0)return;this.itemDirection="backward",this.setSelectedItem(0,!0);break;case"End":if(e.preventDefault(),this.selectedIndex===t)return;this.itemDirection="forward",this.setSelectedItem(t,!0);break}}tabListKeyDownHandler(e){let t=Array(...this.tabListRef.value.querySelectorAll(`button:not(.${i.paginationItemOutOfRange})`)),a=e.target;switch(e.key){case"ArrowRight":v(t,a,"next");break;case"ArrowLeft":v(t,a,"previous");break;case"Home":e.preventDefault(),v(t,a,"first");break;case"End":e.preventDefault(),v(t,a,"last");break}}renderRotationControl(){let e=this.playing?this.messages.pause:this.messages.play,t=this.slideDurationRemaining*100;return s`<button .ariaLabel=${e} class=${l({[i.paginationItem]:!0,[i.autoplayControl]:!0})} @click=${this.toggleRotation} title=${e??u}><calcite-icon .icon=${this.playing?g.pause:g.play} scale=s></calcite-icon>${this.playing&&s`<calcite-progress class=${l(i.autoplayProgress)} .label=${this.messages.carouselItemProgress} .value=${t}></calcite-progress>`||""}</button>`}renderControlsArea(){let e=(this.playing||this.autoplay===""||this.autoplay===!0||this.autoplay==="paused")&&this.hasMultiple,t=this.arrowType==="inline"&&this.hasMultiple;if(!(this.paginationDisabled&&!e&&!t))return s`<div class=${l({[i.controlsArea]:!0})}>${e&&this.renderRotationControl()||""}${t&&this.renderArrow("previous")||""}${!this.paginationDisabled&&s`<div class=${l(i.pagination)}>${this.renderPaginationItems()}</div>`||""}${t&&this.renderArrow("next")||""}</div>`}renderPaginationItems(){let{selectedIndex:e,maxItems:t,items:a,label:n,handleItemSelection:c}=this;return s`<div .ariaLabel=${n} class=${l(i.paginationItems)} @keydown=${this.tabListKeyDownHandler} role=tablist ${y(this.tabListRef)}>${V(a,r=>r.id,(r,o)=>{let d=a.length,p=o===e,m=o===0,_=o===d-1,R=d-t-1,x=e<t,C=e>=R,S=x?0:e-Math.floor(t/2),G=C?d:S+t,P=x?0:C?R:S,T=x?t+1:G,Y=!m&&!_&&!p&&(o===P-1||o===T),z=p||o<=T&&o>=P-1,A=d-1<=t,Z=p?g.active:g.inactive;return s`<button aria-controls=${(p?void 0:r.id)??u} .ariaSelected=${p} class=${l({[i.paginationItem]:!0,[i.paginationItemIndividual]:!0,[i.paginationItemSelected]:p,[i.paginationItemRangeEdge]:d-1>t&&Y,[i.paginationItemOutOfRange]:!(A||z),[i.paginationItemVisible]:A||z})} data-index=${o??u} @click=${c} role=tab title=${r.label??u}><calcite-icon .icon=${Z} scale=l></calcite-icon></button>`})}</div>`}renderPaginationAriaLive(){let{messages:e,messages:{_lang:t},selectedIndex:a,items:n}=this;if(!e._loading)return I.numberFormatOptions={locale:t},s`<div aria-live=off class=${l(E.screenReaderText)} role=status>${e.paginationStatus.replace("{current}",I.localize(`${a+1}`)).replace("{total}",I.localize(`${n.length}`))}</div>`}renderArrow(e){let t=e==="previous",a=this.direction,n=this.arrowType==="edge"?"m":"s",c=t?i.pagePrevious:i.pageNext,r=t?this.messages.previous:this.messages.next,o=t?g.chevronLeft:g.chevronRight;return s`<button aria-controls=${this.containerId??u} class=${l({[i.paginationItem]:!0,[c]:!0})} data-item-direction=${e??u} @click=${this.handleArrowClick} title=${r??u}><calcite-icon .flipRtl=${a==="rtl"} .icon=${o} .scale=${n}></calcite-icon></button>`}render(){let{arrowType:e,hasMultiple:t,itemDirection:a,items:n,paginationDisabled:c,paginationPosition:r}=this,o=n.length>0?this.renderControlsArea():void 0,d=c&&n.length>0?this.renderPaginationAriaLive():void 0,m=[s`<section class=${l({[i.itemContainer]:!0,[i.itemContainerForward]:a==="forward",[i.itemContainerBackward]:a==="backward"})} id=${this.containerId??u} ${y(this.itemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>`,o,d];return r==="top"&&m.reverse(),e==="edge"&&t&&m.push(this.renderArrow("previous"),this.renderArrow("next")),this.interactiveContainer({disabled:this.disabled,children:s`<div .ariaLabel=${this.label} .ariaLive=${this.playing?"off":"polite"} .ariaRoleDescription=${this.messages.carousel} class=${l({[i.container]:!0,[i.containerOverlaid]:this.controlOverlay,[i.containerEdged]:e==="edge"})} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${y(this.containerRef)}>${m}</div>`})}};F("calcite-carousel",w);export{w as Carousel};