@limetech/lime-elements
Version:
1 lines • 2.75 kB
JavaScript
import{r as t,c as e,h as s,a as i}from"./p-DBTJNfo7.js";import{b as o}from"./p-CgNJbSP4.js";const r=class{constructor(i){t(this,i),this.change=e(this,"change"),this.flowItems=[],this.disabled=!1,this.readonly=!1,this.renderRegularFlowItem=(t,e,i)=>s("limel-progress-flow-item",{class:{"flow-item":!0,first:0===e,last:e===i.length-1,passed:e<this.selectedItemIndex,selected:t.selected},style:this.getItemStyle(t),disabled:this.disabled||this.readonly,readonly:this.readonly,item:t,onInteract:this.handleFlowItemClick(t),"data-tracking-value":t.value,currentStep:e===this.selectedItemIndex}),this.renderEndPhaseItem=(t,e,i)=>s("limel-progress-flow-item",{class:{"flow-item":!0,"off-progress-item":!0,selected:t.selected,"first-off-progress-item":0===e,"last-off-progress-item":e===i.length-1},style:this.getItemStyle(t),disabled:this.disabled||this.readonly,readonly:this.readonly,item:t,onInteract:this.handleFlowItemClick(t),"data-tracking-value":t.value}),this.handleFlowItemClick=t=>()=>{t.selected||t.disabled||this.disabled||this.change.emit(t)}}componentDidRender(){this.scrollToSelectedItem()}componentDidLoad(){this.triggerIconColorWarning()}render(){const t=this.flowItems.filter((t=>!t.isOffProgress)),e=this.flowItems.filter((t=>t.isOffProgress));return this.selectedItemIndex=t.findIndex((t=>t.selected)),[t.map(this.renderRegularFlowItem),e.map(this.renderEndPhaseItem)]}getItemStyle(t){const e=o(t.icon,t.iconColor),s={};return(null==t?void 0:t.selectedColor)&&(s["--progress-flow-step-background-color--selected"]=t.selectedColor),(null==t?void 0:t.passedColor)&&(s["--progress-flow-step-background-color--passed"]=t.passedColor),e&&(s["--progress-flow-icon-color--inactive"]=e),s}scrollToSelectedItem(){const t=this.getElementForSelectedItem();t&&this.element.scrollTo({behavior:"smooth",left:t.offsetLeft-this.element.offsetLeft-this.element.offsetWidth/2+t.offsetWidth/2})}getElementForSelectedItem(){return this.element.shadowRoot.querySelector(".flow-item.selected")}triggerIconColorWarning(){for(const t of this.flowItems)t.iconColor&&console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}get element(){return i(this)}};r.style=":host{--limel-progress-flow-step-content:2;--limel-progress-flow-divider:1;--step-height:2rem;--selected-indicator-right:-0.5rem;--max-text-width:10rem;isolation:isolate;box-sizing:border-box;width:100%;display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0.25rem}:host::-webkit-scrollbar{display:none}:host(.is-narrow){--step-height:1.5rem;--selected-indicator-right:0}";export{r as limel_progress_flow}