import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{query as s,property as l,state as p,customElement as r}from"lit/decorators.js";import{classMap as _}from"lit/directives/class-map.js";import{s as n}from"./nile-stepper-item.css.esm.js";import{N as o}from"../internal/nile-element.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 a=class extends o{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[n]}updated(t){if(t.has("subtitle")&&this.isLast&&!this.contentBelow&&this.subtitle){const t=this.absoluteSubtitle?.scrollWidth??"0";this.absoluteTitle.style.minWidth=t+"px"}}render(){this.haveFlex||this.style.setProperty("--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 p=!1;return s&&(p=!0,this.calculatedCompletedStepValue==this.value&&(p=!1)),e`
			<div part="item" class="${_({stepper__item:!0,"stepper__item--selected":t,"stepper__item--sm":"sm"==this.size,"stepper__item--lg":"lg"==this.size})}">
				<div part="line-content" class="stepper__line__content">
					<div class="stepper__line__container">
						${this.isFirst?i:e`
							<hr class="${_({stepper__line:!0,"stepper__line--active":s||t})}"/>
						`}
					</div>

					<div part="bulletin" class=${_({stepper__item__bulletin:!0,"stepper__item__bulletin--inline":!this.contentBelow})}>
						${l?e`<div part="bulletin-icon" class="${_({"stepper__bulletin--icon":!0,"stepper__bulletin__icon--active":t})}">${this.getSvg()}</div>`:e`<div part="bulletin-dot" class="${_({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
					</div>
					
					<div part="line-container" class="${_({stepper__line__container:!0,"stepper__line--hastitle":!this.contentBelow})}">
						${this.contentBelow||!this.title?i:e`

							<div part="content-above" class="stepper__item__content--above">
								<div part="title_above" class="${_({stepper__content__title:!0,"stepper__content__title--active":t})}">
									${this.title}
								</div>
								<div class="${_({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
							</div>
						`}
						${this.isLast?i:e`
							<hr part="line" class="${_({stepper__line:!0,"stepper__line--active":p})}" style="flex-grow:1;"/>
						`}
					</div>
				</div>
				${this.contentBelow?e`
					<div part="content-below" class="stepper__item__content--below">
						<div part="title_below" class="${_({stepper__content__title:!0,"stepper__content__title--active":t})}">
							${this.title}
						</div>
						<div part="subtitle_below" class="${_({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
					</div>
				`:i}
			</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(".stepper__item__content--above .stepper__content__title")],a.prototype,"absoluteTitle",void 0),t([s(".stepper__item__content--above .stepper__content__subtitle")],a.prototype,"absoluteSubtitle",void 0),t([l({attribute:!0,reflect:!0})],a.prototype,"title",void 0),t([l({attribute:!0,reflect:!0})],a.prototype,"subtitle",void 0),t([l({attribute:!0,reflect:!0})],a.prototype,"completed",void 0),t([l({attribute:!0,reflect:!0})],a.prototype,"current",void 0),t([p()],a.prototype,"contentBelow",void 0),t([p()],a.prototype,"size",void 0),t([p()],a.prototype,"icon",void 0),t([p()],a.prototype,"isFirst",void 0),t([p()],a.prototype,"isLast",void 0),t([p()],a.prototype,"isComplete",void 0),t([p()],a.prototype,"isCurrent",void 0),t([p()],a.prototype,"isManualMode",void 0),t([p()],a.prototype,"currentStepValue",void 0),t([p()],a.prototype,"completedStepValue",void 0),t([p()],a.prototype,"calculatedCompletedStepValue",void 0),t([p()],a.prototype,"value",void 0),t([p()],a.prototype,"haveFlex",void 0),a=t([r("nile-stepper-item")],a);export{a as N};
