@esri/calcite-components/dist/calcite/YXYJCSFV.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-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as S}from"./M7EAHGE3.js";import{d as x}from"./CKRTMNFR.js";import{b as I}from"./5RDOSP2E.js";import{v as A,z as c}from"./3ADX47DD.js";import{c as m}from"./HPN2C7M6.js";import"./JOSABGK6.js";import{a as y}from"./NNVH7JUI.js";import{E as f,F as r,R as v,c as b,d as n,e as g,h,q as o}from"./BJZTU5BQ.js";var p={actionIcon:"action-icon",actionContainer:"action-container",stepBarContainer:"step-bar-container",singleView:"single-view"},l={stepBar:"step-bar",stepBarActive:"step-bar--active",stepBarComplete:"step-bar--complete",stepBarDisabled:"step-bar--disabled",stepBarError:"step-bar--error",stepBarInActive:"step-bar--inactive"},P=({disabled:u,active:e,complete:t,error:i})=>n`<svg class=${r({[l.stepBar]:!0})}>${g`<rect class=${r({[l.stepBarActive]:e,[l.stepBarComplete]:t,[l.stepBarDisabled]:u,[l.stepBarError]:i,[l.stepBarInActive]:!0})} width=100% x=0 y=0 />`}</svg>`,$=b`:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-action-block-size: 2.75rem;--calcite-internal-stepper-action-inline-size: 2rem;--calcite-internal-step-bar-gap: .25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .5rem;--calcite-internal-stepper-action-block-size: 3.25rem;--calcite-internal-stepper-action-inline-size: 2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s: .75rem;--calcite-internal-stepper-action-block-size: 4rem;--calcite-internal-stepper-action-inline-size: 3rem;--calcite-internal-step-bar-gap: .75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:"items" "content";gap:.5rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:.25rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:.75rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:.125rem;inline-size:100%;gap:var(--calcite-stepper-bar-gap, var(--calcite-internal-step-bar-gap, .5rem))}.step-bar--inactive{fill:var(--calcite-stepper-bar-inactive-fill-color, var(--calcite-color-border-3, #dfdfdf));fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-stepper-bar-active-fill-color, var(--calcite-color-brand))}.step-bar--complete{fill:var(--calcite-stepper-bar-complete-fill-color, var(--calcite-color-brand));fill-opacity:.5}.step-bar--error{fill:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}.step-bar--disabled{opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`,d=class extends f{constructor(){super(),this.enabledItems=[],this.guid=`calcite-stepper-action-${y()}`,this.itemMap=new Map,this.items=[],this.multipleViewMode=!1,this.mutationObserver=S("mutation",()=>this.updateItems()),this.messages=x(),this.icon=!1,this.layout="horizontal",this.numbered=!1,this.scale="m",this.selectedItem=null,this.calciteInternalStepperItemChange=o({cancelable:!1}),this.calciteStepperChange=o({cancelable:!1}),this.calciteStepperItemChange=o({cancelable:!1}),this.listen("calciteInternalStepperItemKeyEvent",this.calciteInternalStepperItemKeyEvent),this.listen("calciteInternalStepperItemRegister",this.registerItem),this.listen("calciteInternalStepperItemSelect",this.updateItem),this.listen("calciteStepperItemSelect",this.handleItemSelect)}static{this.properties={currentActivePosition:[16,{},{state:!0}],icon:[7,{},{reflect:!0,type:Boolean}],layout:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],numbered:[7,{},{reflect:!0,type:Boolean}],numberingSystem:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}],selectedItem:[0,{},{attribute:!1}]}}static{this.styles=$}async endStep(){let e=this.getEnabledStepIndex(this.items.length-1,"previous");typeof e=="number"&&this.updateStep(e)}async goToStep(e){let t=e-1;this.currentActivePosition!==t&&this.updateStep(t)}async nextStep(){let e=this.getEnabledStepIndex(this.currentActivePosition+1,"next");typeof e=="number"&&this.updateStep(e)}async prevStep(){let e=this.getEnabledStepIndex(this.currentActivePosition-1,"previous");typeof e=="number"&&this.updateStep(e)}async startStep(){let e=this.getEnabledStepIndex(0,"next");typeof e=="number"&&this.updateStep(e)}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0}),this.updateItems()}willUpdate(e){(e.has("icon")&&(this.hasUpdated||this.icon!==!1)||e.has("layout")&&(this.hasUpdated||this.layout!=="horizontal")||e.has("numbered")&&(this.hasUpdated||this.numbered!==!1)||e.has("scale")&&(this.hasUpdated||this.scale!=="m"))&&(this.updateItems(),this.determineActiveStepper()),e.has("numberingSystem")&&this.setStepperItemNumberingSystem(),e.has("currentActivePosition")&&requestAnimationFrame(()=>{this.determineActiveStepper()})}loaded(){if(typeof this.currentActivePosition!="number"){let e=this.getFirstEnabledStepperPosition();e===0&&(this.currentActivePosition=e),this.calciteInternalStepperItemChange.emit({position:e})}}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect()}calciteInternalStepperItemKeyEvent(e){let t=e.detail.item,i=e.target;switch(t.key){case"ArrowDown":case"ArrowRight":c(this.enabledItems,i,"next");break;case"ArrowUp":case"ArrowLeft":c(this.enabledItems,i,"previous");break;case"Home":c(this.enabledItems,i,"first");break;case"End":c(this.enabledItems,i,"last");break}e.stopPropagation()}registerItem(e){let t=e.target,{content:i,position:s}=e.detail;this.itemMap.set(t,{position:s,content:i}),this.enabledItems=this.filterItems(),e.stopPropagation()}updateItem(e){let{position:t}=e.detail;typeof t=="number"&&(this.currentActivePosition=t,this.selectedItem=e.target),this.calciteInternalStepperItemChange.emit({position:t})}handleItemSelect(){this.emitItemSelect()}emitItemSelect(){this.calciteStepperItemChange.emit(),this.calciteStepperChange.emit()}updateItems(){this.el.querySelectorAll("calcite-stepper-item").forEach(e=>{e.icon=this.icon,e.numbered=this.numbered,e.layout=this.layout,e.scale=this.scale})}determineActiveStepper(){let{items:e}=this;if(e.length<2)return;let{currentActivePosition:t,layout:i}=this;this.multipleViewMode=i!=="horizontal-single",e.forEach((s,a)=>{s.itemHidden=i==="horizontal-single"&&a!==(t||0)})}getEnabledStepIndex(e,t="next"){let{items:i,currentActivePosition:s}=this,a=e;for(;i[a]?.disabled&&this.layout!=="horizontal-single";)a=a+(t==="previous"?-1:1);return a!==s&&a<i.length&&a>=0?a:null}updateStep(e){this.currentActivePosition=e,this.calciteInternalStepperItemChange.emit({position:e})}filterItems(){return this.items.filter(e=>!e.disabled&&!m(e))}setStepperItemNumberingSystem(){this.items.forEach(e=>{e.numberingSystem=this.numberingSystem})}handleActionClick(e){let t=this.currentActivePosition;e.target.getAttribute("data-position")==="start"?this.prevStep():this.nextStep(),typeof this.currentActivePosition=="number"&&t!==this.currentActivePosition&&!this.items[this.currentActivePosition].disabled&&this.emitItemSelect()}getFirstEnabledStepperPosition(){let e=this.items.findIndex(t=>!t.disabled);return e>-1?e:0}setContainerEl(e){this.containerEl=e}handleDefaultSlotChange(e){let t=A(e).filter(s=>s?.tagName==="CALCITE-STEPPER-ITEM"&&!m(s));this.items=t;let i=Array(t.length).fill("1fr").join(" ");this.containerEl.style.gridTemplateAreas=i,this.containerEl.style.gridTemplateColumns=i,this.setStepperItemNumberingSystem()}render(){return this.el.ariaLabel=this.messages.label,this.el.role="region",n`<div class=${r({container:!0,[p.singleView]:this.layout==="horizontal-single"})} ${I(this.setContainerEl)}>${this.layout==="horizontal-single"&&n`<div class=${r({[p.stepBarContainer]:!0})}>${this.items.map((e,t)=>P({active:t===this.currentActivePosition,complete:e.complete&&t!==this.currentActivePosition&&!e.error,disabled:e.disabled&&t!==this.currentActivePosition,error:e.error&&t!==this.currentActivePosition}))}</div>`||""}${this.layout==="horizontal-single"&&n`<div class=${r({[p.actionContainer]:!0})}>${this.renderAction("start")}${this.renderAction("end")}</div>`||""}<slot @slotchange=${this.handleDefaultSlotChange}></slot></div>`}renderAction(e){let t=e==="start",i=t?"chevron-left":"chevron-right",{currentActivePosition:s,multipleViewMode:a,layout:z}=this,C=this.items.length,E=`${this.guid}-${t?"start":"end"}`;return z==="horizontal-single"&&!a?n`<calcite-action alignment=center appearance=transparent class=${r({[p.actionIcon]:!0})} compact data-position=${e??h} .disabled=${s===0&&t||s===C-1&&!t} .icon=${i} icon-flip-rtl id=${E??h} @click=${this.handleActionClick} .scale=${this.scale} .text=${t?this.messages.previousStep:this.messages.nextStep}></calcite-action>`:null}};v("calcite-stepper",d);export{d as Stepper};