@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 5.62 kB
JavaScript
import{r,c as e,h as a,H as t}from"./p-D-JVwta2.js";import{E as o}from"./p-SVedE_O8.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(t,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:t,stepKey:o},s)=>a("div",{class:"step-indicator-container"},a("kv-step-indicator",{class:"step-indicator",key:o,enabled:e,active:r,hasError:t,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}}:host{--step-label-color:var(--kv-neutral-0, #fff);--step-counter-color:var(--kv-neutral-1, #f2f2f6)}.label-container .label{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;color:var(--step-label-color)}.label-container .step-counter{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;color:var(--step-counter-color);margin-left:var(--kv-spacing, 4px)}.progress-bar-container{margin-top:var(--kv-spacing, 4px)}.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=()=>{this.enabled&&this.indicatorClicked.emit()}}render(){return a(t,{key:"e4d1e45c0f8adc4dd5cacb6fbd5dad820d023efc"},a("div",{key:"d88c63544fef726669c7ffdf987e01763dbc1f5a",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:"74869c1dab6814c36ed4f4e064416cc8d252274c",name:this.hasError?o.Error:o.Success})))}};i.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--indicator-radius:14px;--indicator-default-color:var(--kv-neutral-6, #3f3f3f);--indicator-default-border-color:var(--kv-neutral-6, #3f3f3f);--indicator-active-color:var(--kv-neutral-3, #ddd);--indicator-active-border-color:var(--kv-success, #05a357);--indicator-error-border-color:var(--kv-error, #e11900)}.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(t,{key:"ca1248bc426c256237986832ba20afbad3c41ce7"},a("div",{key:"b8f72823c26cf06bcade80aeb7a09b2c4b611e30",class:"step-progress-bar-container"},a("div",{key:"2ef5b67f71979fd14f148fae51d000657304a974",class:"progress-bar"}),a("div",{key:"6c8b1989660c2adf21faced6e7dd5d3949ac1130",class:{"progress-bar-filler":!0,error:this.hasError},style:{width:this.progressPercentage+"%"}}),a("div",{key:"248acdf8385b2f11c46f674a1b02e40bf25fc213",class:"steps-container"},a("slot",{key:"385e30645a052e9e71df11867540a0124572cb54"}))))}};c.style={night:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--progress-bar-height:2px;--progress-height:14px}.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}:host{--progress-bar-background-color:var(--kv-neutral-6, #3f3f3f);--progress-bar-filler-success-color:var(--kv-success, #05a357);--progress-bar-filler-error-color:var(--kv-error, #e11900)}'};export{s as kv_step_bar,i as kv_step_indicator,c as kv_step_progress_bar}