@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 5.63 kB
JavaScript
import{r,c as e,h as a,H as o}from"./p-WTwLUJcM.js";import{o as t}from"./p-COrzvkrr.js";const s=class{constructor(a){r(this,a),this.stepClicked=e(this,"stepClicked",7),this.label="Progress:",this.hasError=!1,this.onStepClick=r=>{this.stepClicked.emit(r)}}render(){if(this.steps)return a(o,null,a("div",{class:"label-container"},a("span",{class:"label"},this.label),a("span",{class:"step-counter"},this.currentStep+1,"/",this.steps.length," Steps")),a("div",{class:"progress-bar-container"},a("kv-step-progress-bar",{progressPercentage:this.progressPercentage},this.steps.map((({active:r,enabled:e,hasError:o,stepKey:t},s)=>a("div",{class:"step-indicator-container"},a("kv-step-indicator",{class:"step-indicator",key:t,enabled:e,active:r,hasError:o,isCurrent:s===this.currentStep,onIndicatorClicked:this.onStepClick.bind(this,s)})))))))}};s.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--step-label-color:var(--text-surface-neutral-secondary);--step-counter-color:var(--text-surface-neutral-secondary)}.label-container .label{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:0;color:var(--step-label-color)}.label-container .step-counter{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--step-counter-color);margin-left:var(--spacing-xs)}.progress-bar-container{margin-top:var(--spacing-xs)}.progress-bar-container kv-step-progress-bar{--progress-bar-height:2px;--progress-height:14px}.progress-bar-container kv-step-indicator{--indicator-radius:14px}.progress-bar-container .step-indicator-container{display:flex;align-items:center}';const i=class{constructor(a){r(this,a),this.indicatorClicked=e(this,"indicatorClicked",7),this.onIndicatorClick=r=>{this.enabled&&this.indicatorClicked.emit(r)}}render(){return a(o,{key:"9a68db4b4bed9ff56af4d61a9f0065bc8690393c"},a("div",{key:"4d5f5537380224ff06a1babd51f3c055a0a9237a",class:{indicator:!0,"indicator--state-enabled":this.enabled,"indicator--state-active":this.active,"indicator--state-error":this.hasError},onClick:this.onIndicatorClick},!this.isCurrent&&this.active&&a("kv-icon",{key:"351555a981d525036492a0dacdd18bbeadbd1cdf",name:this.hasError?t.Error:t.Success})))}};i.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--indicator-radius:14px;--indicator-default-color:var(--icon-persistent-wizard-default);--indicator-default-border-color:var(--icon-persistent-wizard-default);--indicator-active-color:var(--icon-persistent-wizard-inverse);--indicator-active-border-color:var(--border-persistent-wizard-selected);--indicator-error-border-color:var(--color-red-500)}.indicator{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:var(--indicator-radius);height:var(--indicator-radius);border-radius:50%;background-color:var(--indicator-default-color);border:2px solid var(--indicator-default-border-color);transition:all 0.25s ease}.indicator--state-enabled{cursor:pointer}.indicator--state-active{background-color:var(--indicator-active-color);border-color:var(--indicator-active-border-color)}.indicator--state-active kv-icon{--icon-color:var(--indicator-active-border-color)}.indicator--state-error{border-color:var(--indicator-error-border-color)}.indicator--state-error kv-icon{--icon-color:var(--indicator-error-border-color)}.indicator kv-icon{--icon-width:var(--indicator-radius);--icon-height:var(--indicator-radius)}';const c=class{constructor(e){r(this,e)}render(){return a(o,{key:"d9797b78ada7db2c19a1c94793d0ea59ddc10d28"},a("div",{key:"ad7f943999d0e2cee1670dcd5eb0d112fa038ccb",class:"step-progress-bar-container"},a("div",{key:"39d8465be709626b705b6a4ae11827517d7fc7de",class:"progress-bar"}),a("div",{key:"3b00d8f177653a017e0b3ae622d458af1b980c38",class:{"progress-bar-filler":!0,error:this.hasError},style:{width:this.progressPercentage+"%"}}),a("div",{key:"c81b0fcf249100e04ad191262b9648594f0897bf",class:"steps-container"},a("slot",{key:"57d0e8ee84afe427ae1b9b7d165a45621da5e052"}))))}};c.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--progress-bar-height:2px;--progress-height:14px;--progress-bar-background-color:var(--border-persistent-wizard-default);--progress-bar-filler-success-color:var(--border-persistent-wizard-selected);--progress-bar-filler-error-color:var(--color-red-500)}.step-progress-bar-container{display:flex;height:var(--progress-height);position:relative;align-items:center;justify-content:space-between}.step-progress-bar-container .progress-bar{width:100%;height:var(--progress-bar-height);border-radius:calc(var(--progress-bar-height) / 2);background-color:var(--progress-bar-background-color);padding:0 calc(var(--progress-bar-height) / 2)}.step-progress-bar-container .progress-bar-filler{position:absolute;height:var(--progress-bar-height);background-color:var(--progress-bar-filler-success-color);border-radius:calc(var(--progress-bar-height) / 2)}.step-progress-bar-container .progress-bar-filler.error{background-color:var(--progress-bar-filler-error-color)}.step-progress-bar-container .steps-container{position:absolute;left:0;width:100%;display:flex;justify-content:space-between;align-items:center}';export{s as kv_step_bar,i as kv_step_indicator,c as kv_step_progress_bar}