@limetech/lime-elements
Version:
2 lines • 2.84 kB
JavaScript
import{r as t,c as e,h as s,g as i}from"./p-288f0842.js";import{a as o}from"./p-d251f404.js";const r=":host{--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}";const n=class{constructor(i){t(this,i);this.change=e(this,"change",7);this.renderRegularFlowItem=(t,e,i)=>s("limel-progress-flow-item",{class:{"flow-item":true,first:e===0,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":true,"off-progress-item":true,selected:t.selected,"first-off-progress-item":e===0,"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=>()=>{if(!t.selected&&!t.disabled&&!this.disabled){this.change.emit(t)}};this.flowItems=[];this.disabled=false;this.readonly=false}componentDidRender(){this.scrollToSelectedItem()}componentDidLoad(){this.triggerIconColorWarning()}render(){const t=this.flowItems.filter((t=>!t.isOffProgress));const e=this.flowItems.filter((t=>t.isOffProgress));this.selectedItemIndex=t.findIndex((t=>t.selected));return[t.map(this.renderRegularFlowItem),e.map(this.renderEndPhaseItem)]}getItemStyle(t){const e=o(t.icon,t.iconColor);const s={};if(t===null||t===void 0?void 0:t.selectedColor){s["--progress-flow-step-background-color--selected"]=t.selectedColor}if(t===null||t===void 0?void 0:t.passedColor){s["--progress-flow-step-background-color--passed"]=t.passedColor}if(e){s["--progress-flow-icon-color--inactive"]=e}return s}scrollToSelectedItem(){const t=this.getElementForSelectedItem();if(t){const e=t.offsetLeft-this.element.offsetLeft;const s=e-this.element.offsetWidth/2;const i=s+t.offsetWidth/2;this.element.scrollTo({behavior:"smooth",left:i})}}getElementForSelectedItem(){return this.element.shadowRoot.querySelector(".flow-item.selected")}triggerIconColorWarning(){for(const t of this.flowItems){if(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)}};n.style=r;export{n as limel_progress_flow};
//# sourceMappingURL=p-1e4ca584.entry.js.map