import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{s as r}from"./nile-stepper.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{w as n}from"../internal/watch.esm.js";import{classMap as a}from"lit/directives/class-map.js";import{u as p}from"./stepper-utils.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let o=class extends l{constructor(){super(...arguments),this.isVertical=!1,this.contentBelow=!1,this.currentStep=0,this.completedStep=0,this.size="lg",this.icon="tick",this.manual=!1}update(t){super.update(t),(t.has("currentStep")||t.has("completedStep")||t.has("manual"))&&this.updateItems()}handleCurrentStepChanges(){this.updateItems(),this.emit("nile-current-change",{value:this.currentStep})}handleCompletedStepChanges(){this.updateItems(),this.emit("nile-completed-change",{value:this.completedStep})}updateItems(){const t=[...this.querySelectorAll(this.isVertical?"nile-vertical-stepper-item":"nile-stepper-item")];if(!t.length)return;const e=t.length<3;if(this.manual)p(t,{icon:this.icon,size:this.size,contentBelow:this.contentBelow,manual:this.manual,isVertical:this.isVertical},e);else{const i=0==this.currentStep||this.currentStep>t.length?1:this.currentStep,s=this.completedStep>t.length||this.completedStep<i?i:this.completedStep,r=this.completedStep>t.length?0:this.completedStep;t.forEach(((l,n)=>{n+1<i?(l.isComplete=!0,l.isCurrent=!1):n+1==i?(l.isComplete=n+1<=s,l.isCurrent=!0):(l.isComplete=n+1<=s,l.isCurrent=!1),l.isFirst=!1,l.isLast=!1,0==n&&(l.isFirst=!0),n==t.length-1&&(l.isLast=!0),l.currentStepValue=i,l.calculatedCompletedStepValue=s,l.completedStepValue=r,l.icon=this.icon,l.size=this.size,l.value=n+1,l.contentBelow=this.contentBelow,l.isManualMode=this.manual,0!=n&&n!=t.length-1||(l.haveFlex=e)}))}}static get styles(){return[r]}render(){return e`
			<div part="stepper" class=${a({"nile-stepper":!0,"nile-stepper--horizontal":!this.isVertical,"nile-stepper--vertical":this.isVertical})}>
				<slot
					@slotchange=${this.updateItems}
				></slot>
			</div>
			`}};t([i({type:Boolean,attribute:"vertical"})],o.prototype,"isVertical",void 0),t([i({type:Boolean,attribute:!0,reflect:!0})],o.prototype,"contentBelow",void 0),t([i({type:Number,attribute:!0,reflect:!0})],o.prototype,"currentStep",void 0),t([i({type:Number,attribute:!0,reflect:!0})],o.prototype,"completedStep",void 0),t([i({type:String,attribute:!0,reflect:!0})],o.prototype,"size",void 0),t([i({type:String,attribute:!0,reflect:!0})],o.prototype,"icon",void 0),t([i({type:Boolean,attribute:!0,reflect:!0})],o.prototype,"manual",void 0),t([n("currentStep")],o.prototype,"handleCurrentStepChanges",null),t([n("completedStep")],o.prototype,"handleCompletedStepChanges",null),o=t([s("nile-stepper")],o);export{o as N};
