You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Rewrote the hacky programmatic sizing. Replaced with simply programmatically setting known stepper width and step count, and let CSS use `calc()` to figure out stepper control widths and step title widths
`)),this._container=i('<div class="progress-steps"></div>'),this._shadowRoot.appendChild(this._container),this._container.classList.add("progress-steps"),this._defaultOptions={steps:[],allowStepZero:!0,events:{onStepChanged:function(e,t){}},style:{}};lete=this;vart;this._recalculateStepperTitleWidths(e);functions(){clearTimeout(t),t=setTimeout(function(){e._recalculateStepperTitleWidths(e)},300)}window.addEventListener("resize",s,!1),window.addEventListener("orientationchange",s,!1)}_recalculateStepperTitleWidths(e){vart;0<e._options?.steps.length&&(t=e._container.getBoundingClientRect().width/(e._options.steps.length-1)-6,e._container.style.setProperty("--step-title-width",`${t}px`))}init(e){if(this._options=o({},this._defaultOptions,e),this._options.steps.forEach((e,t)=>{e.number=t+1}),this._options.steps.length?this._stepNumber=1:(this._stepNumber=-1,console.warn("You must provide at least 1 step")),void0!==this._options.style){lets="";for(varrinthis._options.style){lete="",t=this._options.style[r];if("stepWidth"===r)e="--step-width",isNaN(t)||(t+="px");elseif("fontSize"===r)e="--font-size",isNaN(t)||(t+="px");elseif("borderRadius"===r)e="--step-border-radius",isNaN(t)||(t+="px");elseif("lineThickness"===r)e="--bar-thickness",isNaN(t)||(t+="px");elseif("animationSpeed"===r)e="--animation-speed",isNaN(t)||(t+="ms");elseif("showLabels"===r){if(e="--step-title-display",t)continue;t="none"}else"labelSpacing"===r?(e="--step-title-top-padding",isNaN(t)||(t+="px")):"progressFillColor"===r?e="--fill-color":"currentStepFontColor"===r?e="--current-font-color":"currentStepLabelFontWeight"===r?e="--current-step-label-weight":"stepLabelFontWeight"===r?e="--step-title-weight":"futureStepFillColor"===r?e="--step-color":"disabledStepFontColor"===r?e="--disabled-font-color":"previousLabelFontColor"===r?e="--previous-label-font-color":"currentLabelFontColor"===r?e="--current-label-font-color":"futureLabelFontColor"===r?e="--future-label-font-color":"disabledLabelFontColor"===r?e="--disabled-label-font-color":"progressUnfilledColor"===r?e="--unfilled-color":"disabledStepFillColor"===r&&(e="--disabled-fill-color");s+=`
176
+
`)),this._container=i('<div class="progress-steps"></div>'),this._shadowRoot.appendChild(this._container),this._container.classList.add("progress-steps"),this._defaultOptions={steps:[],allowStepZero:!0,events:{onStepChanged:function(e,t){}},style:{}};lete=this;vart;this._updateKnownControlSize=function(){clearTimeout(t),t=setTimeout(function(){null!==e._options&&null!==e._options.steps&&(e._container.style.setProperty("--known-step-count",e._options.steps.length),e._container.style.setProperty("--known-available-width",e.getBoundingClientRect().width))},100)},this._updateKnownControlSize(),window.addEventListener("resize",this._updateKnownControlSize,!1),window.addEventListener("orientationchange",this._updateKnownControlSize,!1)}init(e){if(this._options=r({},this._defaultOptions,e),this._options.steps.forEach((e,t)=>{e.number=t+1}),this._options.steps.length?this._stepNumber=1:(this._stepNumber=-1,console.warn("You must provide at least 1 step")),void0!==this._options.style){lets="";for(varointhis._options.style){lete="",t=this._options.style[o];if("stepWidth"===o)e="--step-width",isNaN(t)||(t+="px");elseif("fontSize"===o)e="--font-size",isNaN(t)||(t+="px");elseif("borderRadius"===o)e="--step-border-radius",isNaN(t)||(t+="px");elseif("lineThickness"===o)e="--bar-thickness",isNaN(t)||(t+="px");elseif("animationSpeed"===o)e="--animation-speed",isNaN(t)||(t+="ms");elseif("showLabels"===o){if(e="--step-title-display",t)continue;t="none"}else"labelSpacing"===o?(e="--step-title-top-padding",isNaN(t)||(t+="px")):"progressFillColor"===o?e="--fill-color":"currentStepFontColor"===o?e="--current-font-color":"currentStepLabelFontWeight"===o?e="--current-step-label-weight":"stepLabelFontWeight"===o?e="--step-title-weight":"futureStepFillColor"===o?e="--step-color":"disabledStepFontColor"===o?e="--disabled-font-color":"previousLabelFontColor"===o?e="--previous-label-font-color":"currentLabelFontColor"===o?e="--current-label-font-color":"futureLabelFontColor"===o?e="--future-label-font-color":"disabledLabelFontColor"===o?e="--disabled-label-font-color":"progressUnfilledColor"===o?e="--unfilled-color":"disabledStepFillColor"===o&&(e="--disabled-fill-color");s+=`
173
177
${e}: ${t} !important;
174
178
`}this._shadowRoot.appendChild(i(`
175
179
<style>
176
180
.progress-steps{
177
181
${s}
178
182
}
179
183
</style>
180
-
`))}this._render()}_render(){for(;this._container.firstChild;)this._container.removeChild(this._container.firstChild);this._container.appendChild(i('<div class="completion-bar"></div>'));vare=this._options.steps.filter(e=>void0!==e.numberDisplay).length;lets=1<e,r=1;if(e!==this._options.steps.length&&0!==e)throw"Either all or none of your steps can have numberDisplay specified";this._options.steps.forEach(e=>{lett=i(`
`))}this._render()}_render(){for(;this._container.firstChild;)this._container.removeChild(this._container.firstChild);this._container.appendChild(i('<div class="completion-bar"></div>'));vare=this._options.steps.filter(e=>void0!==e.numberDisplay).length;lets=1<e,o=1;if(e!==this._options.steps.length&&0!==e)throw"Either all or none of your steps can have numberDisplay specified";this._options.steps.forEach(e=>{lett=i(`
`);""!=e.name&&t.setAttribute("title",e.name),e.disabled&&t.classList.add("disabled"),this._container.appendChild(t)});lett=this;this._container.querySelectorAll(".progress-step:not(.disabled)").forEach(e=>{e.addEventListener("click",function(e){e=e.target.closest(".progress-step");null!=e&&(e=Array.from(t._container.querySelectorAll(".progress-step")).indexOf(e)+1,t._setStepInternal(e))})}),void0!==this&&this._setStepInternal(),this._recalculateStepperTitleWidths(t)}getStep(){returnthis._getStepInternal()}setStep(e){0!==e||this._options.allowStepZero||console.warn("Cannot set to step 0"),-1<e&&e<=this._options.steps.length?0<e&&this._options.steps[e-1].disabled?console.warn("Cant set to disabled step"):(this._stepNumber=e,this._setStepInternal()):console.warn("Step out of range")}stepUp(){this._stepUpInternal()}stepDown(){this._stepDownInternal()}disableStep(e){if(this._options.steps[e-1].disabled=!0,this._stepNumber===e){lete=!1;for(;!e&&!0===this._options.steps[this._stepNumber-1].disabled;)this._stepNumber--,0===this._stepNumber&&(e=!0)}this._render()}enableStep(e){this._options.steps[e-1].disabled=!1,this._render()}_getStepInternal(){return0<this._stepNumber?this._options.steps[this._stepNumber-1]:null}_stepUpInternal(){this._stepNumber<this._options.steps.length&&!this._options.steps[this._stepNumber].disabled&&(this._stepNumber++,this._setStepInternal())}_stepDownInternal(){0<this._stepNumber&&(this._stepNumber--,0!==this._stepNumber||this._options.allowStepZero||(this._stepNumber=1),this._setStepInternal())}_setStepInternal(s){void0===s?s=this._stepNumber:this._stepNumber=s;vare=(s-1)/(this._options.steps.length-1)*100;this._container.querySelector(".completion-bar").style.width=`calc(${e}% - (var(--step-width)/2))`,this._container.querySelectorAll(".progress-step").forEach(e=>{e.classList.remove("previous"),e.classList.remove("current"),e.classList.remove("future")}),this._container.querySelectorAll(".progress-step").forEach(function(e,t){t+1<s&&e.classList.add("previous"),t+1===s&&e.classList.add("current"),s<t+1&&e.classList.add("future")}),this._options.events.onStepChanged&&"function"==typeofthis._options.events.onStepChanged&&(e=this._getStepInternal(),this._options.events.onStepChanged(s,e))}}customElements.define("progress-steps",e);
188
+
`);""!=e.name&&t.setAttribute("title",e.name),e.disabled&&t.classList.add("disabled"),this._container.appendChild(t)});lett=this;this._container.querySelectorAll(".progress-step:not(.disabled)").forEach(e=>{e.addEventListener("click",function(e){e=e.target.closest(".progress-step");null!=e&&(e=Array.from(t._container.querySelectorAll(".progress-step")).indexOf(e)+1,t._setStepInternal(e))})}),void0!==this&&this._setStepInternal(),setTimeout(this._updateKnownControlSize,100)}getStep(){returnthis._getStepInternal()}setStep(e){0!==e||this._options.allowStepZero||console.warn("Cannot set to step 0"),-1<e&&e<=this._options.steps.length?0<e&&this._options.steps[e-1].disabled?console.warn("Cant set to disabled step"):(this._stepNumber=e,this._setStepInternal()):console.warn("Step out of range")}stepUp(){this._stepUpInternal()}stepDown(){this._stepDownInternal()}disableStep(e){if(this._options.steps[e-1].disabled=!0,this._stepNumber===e){lete=!1;for(;!e&&!0===this._options.steps[this._stepNumber-1].disabled;)this._stepNumber--,0===this._stepNumber&&(e=!0)}this._render()}enableStep(e){this._options.steps[e-1].disabled=!1,this._render()}_getStepInternal(){return0<this._stepNumber?this._options.steps[this._stepNumber-1]:null}_stepUpInternal(){this._stepNumber<this._options.steps.length&&!this._options.steps[this._stepNumber].disabled&&(this._stepNumber++,this._setStepInternal())}_stepDownInternal(){0<this._stepNumber&&(this._stepNumber--,0!==this._stepNumber||this._options.allowStepZero||(this._stepNumber=1),this._setStepInternal())}_setStepInternal(s){void0===s?s=this._stepNumber:this._stepNumber=s;vare=(s-1)/(this._options.steps.length-1)*100;this._container.querySelector(".completion-bar").style.width=`calc(${e}% - (var(--step-width)/2))`,this._container.querySelectorAll(".progress-step").forEach(e=>{e.classList.remove("previous"),e.classList.remove("current"),e.classList.remove("future")}),this._container.querySelectorAll(".progress-step").forEach(function(e,t){t+1<s&&e.classList.add("previous"),t+1===s&&e.classList.add("current"),s<t+1&&e.classList.add("future")}),this._options.events.onStepChanged&&"function"==typeofthis._options.events.onStepChanged&&(e=this._getStepInternal(),this._options.events.onStepChanged(s,e))}}customElements.define("progress-steps",e);
0 commit comments