@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 4.06 kB
JavaScript
import{r as e,c as t,h as i}from"./p-D-JVwta2.js";import{E as a}from"./p-7ioMFMb5.js";import{i as r}from"./p-BA_npyc9.js";import{i as s}from"./p-DjSNdVAB.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";const h=(e,t)=>r(e)||s(t)||t<0||t>e.length-1?null:{label:`Step ${t+1}`,description:e[t].title,tip:e[t].tip},d=(e,t,i,h=!1)=>{var d,o;return r(e)||s(t)||t<0||t>e.length-1?null:{steps:e.map(((r,s)=>({stepKey:r.title,enabled:!h&&(s===t+1&&(null==i?void 0:i.state)===a.Success||s<t&&e[s+1].allowGoBack),active:s<=t,hasError:s===t&&(null==i?void 0:i.state)===a.Error}))),currentStep:t,hasError:!1,showPrevBtn:null!==(d=e[t].allowGoBack)&&void 0!==d&&d,prevEnabled:!h&&t>0,showNextBtn:t<e.length-1,nextEnabled:!h&&(null==i?void 0:i.state)===a.Success,nextTooltip:null==i?void 0:i.error,showCancelBtn:null!==(o=e[t].cancelable)&&void 0!==o&&o,cancelEnabled:!0,showCompleteBtn:t===e.length-1,completeEnabled:!h&&(null==i?void 0:i.state)===a.Success,completeTooltip:null==i?void 0:i.error,progressPercentage:t*(100/(e.length-1))}},o=class{constructor(i){e(this,i),this.goToStep=t(this,"goToStep",7),this.completeClick=t(this,"completeClick",7),this.cancelClick=t(this,"cancelClick",7),this.showHeader=!0,this.showStepBar=!0,this.disabled=!1,this.onPrevClick=()=>{this.goToStep.emit(this.currentStep-1)},this.onNextClick=()=>{this.goToStep.emit(this.currentStep+1)},this.onStepClick=({detail:e})=>{this.goToStep.emit(e)}}stepsChangeHandler(e){this.currentHeader=h(e,this.currentStep),this.currentFooter=d(e,this.currentStep,this.currentStepState,this.disabled)}currentStepChangeHandler(e){this.currentHeader=h(this.steps,e),this.currentFooter=d(this.steps,e,this.currentStepState,this.disabled)}hasErrorStepChangeHandler(e){this.currentFooter=d(this.steps,this.currentStep,e,this.disabled)}componentWillLoad(){this.currentHeader=h(this.steps,this.currentStep),this.currentFooter=d(this.steps,this.currentStep,this.currentStepState,this.disabled)}render(){return i("div",{key:"f340163196c108f1690108898e44a302489cd0c0",class:"wizard"},this.showHeader&&i("div",{key:"4765a77e2deb6bcdfee7518424ceb361612bcdb2",class:"wizard-header"},this.currentHeader&&i("kv-wizard-header",Object.assign({key:"124e10f5f794de5b7ba3d19c4c0f0d0e2d88ac28"},this.currentHeader),i("slot",{key:"548e004533fa5742d5496b2e55711072503a4ffa",slot:"additional-header-actions",name:"additional-header-actions"}))),i("div",{key:"1f83368d3f8c61b575e49b23b887f005ca97b4e0",class:{"wizard-content":!0,"has-header":this.showHeader}},i("slot",{key:"c10faaf1a135d8eaaa7ce784b086c043b26d564e",name:"step-content"})),i("div",{key:"c643d60871c4a8298b2de2c39dd3042e6f15a4ee",class:"wizard-footer"},i("kv-wizard-footer",Object.assign({key:"a4dface500a7ec36b0bfaa66745012c479868e4a",onPrevClick:this.onPrevClick,onNextClick:this.onNextClick,onStepClick:this.onStepClick,showStepBar:this.showStepBar,completeBtnLabel:this.completeBtnLabel,exportparts:"footer-actions-container"},this.currentFooter),i("slot",{key:"a70f587b16e03e31013b4a75d56029b71f3590e9",slot:"additional-actions",name:"additional-actions"}))))}static get watchers(){return{steps:["stepsChangeHandler"],currentStep:["currentStepChangeHandler"],currentStepState:["hasErrorStepChangeHandler"]}}};o.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--wizard-stepper-width:100%;--wizard-header-height:66px;--wizard-footer-height:68px}.wizard{height:100%;width:100%;display:flex;flex-direction:column}.wizard .wizard-header{width:100%;height:var(--wizard-header-height);padding:var(--kv-spacing-2x, 8px);box-sizing:border-box}.wizard .wizard-content{width:100%;height:calc(100% - var(--wizard-footer-height))}.wizard .wizard-content.has-header{height:calc(100% - var(--wizard-footer-height) - var(--wizard-header-height))}.wizard .wizard-footer{width:100%;height:var(--wizard-footer-height);display:flex;align-items:flex-end}.wizard .wizard-footer kv-wizard-footer{--stepper-width:var(--wizard-stepper-width);width:100%}';export{o as kv_wizard}