import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as l,customElement as r}from"lit/decorators.js";import{s as p}from"./nile-vertical-stepper-item.css.esm.js";import{N as n}from"../internal/nile-element.esm.js";import{classMap as o}from"lit/directives/class-map.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 _=class extends n{constructor(){super(...arguments),this.title="",this.subtitle="",this.completed=!1,this.current=!1,this.contentBelow=!1,this.size="lg",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.isManualMode=!1,this.haveFlex=!0}static get styles(){return[p]}render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");const t=this.isManualMode?this.current:this.isCurrent,s=this.isManualMode?this.completed:this.isComplete;let l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);let r=!1;return s&&(r=!0,this.calculatedCompletedStepValue==this.value&&(r=!1)),"sm"==this.size||this.size,e`
			<div 
			part="item"
			class="${o({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size})}">
				<div part="connector" class="stepper-item__connector-content">
					<div part="bulletin" class="stepper__item__bulletin">
						${l?e`<div part="bulletin-icon" class="${o({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t})}">${this.getSvg()}</div>`:e`<div part="bulletin-dot" class="${o({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
					</div>
					<div part="line-container" class="stepper__item__line__container">
						${this.isLast?i:e`<div part="line" class="${o({stepper__item__line:!0,"stepper__item__line--active":r})}"></div>`}
					</div>
				</div>
				<div part="content" class="stepper__item__content">
					<div part="title" class="${o({stepper__content__title:!0,"stepper__content__title--alone":!this.subtitle,"stepper__content__title--active":t})}">${this.title}</div>
					<div part="subtitle" class="${o({stepper__content__subtitle:!0,"stepper__content__subtitle--alone":!this.title,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
				</div>
			</div>
			`}getSvg(){let t="sm"==this.size?20:"lg"==this.size?24:28;return e`
		<svg part="bulletin-svg" width="${t}" height="${t}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
		</svg>
		`}};t([s({attribute:!0,reflect:!0})],_.prototype,"title",void 0),t([s({attribute:!0,reflect:!0})],_.prototype,"subtitle",void 0),t([s({attribute:!0,reflect:!0})],_.prototype,"completed",void 0),t([s({attribute:!0,reflect:!0})],_.prototype,"current",void 0),t([l()],_.prototype,"contentBelow",void 0),t([l()],_.prototype,"size",void 0),t([l()],_.prototype,"icon",void 0),t([l()],_.prototype,"isFirst",void 0),t([l()],_.prototype,"isLast",void 0),t([l()],_.prototype,"isComplete",void 0),t([l()],_.prototype,"isCurrent",void 0),t([l()],_.prototype,"isManualMode",void 0),t([l()],_.prototype,"currentStepValue",void 0),t([l()],_.prototype,"completedStepValue",void 0),t([l()],_.prototype,"calculatedCompletedStepValue",void 0),t([l()],_.prototype,"value",void 0),t([l()],_.prototype,"haveFlex",void 0),_=t([r("nile-vertical-stepper-item")],_);export{_ as N};
