@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 4.61 kB
JavaScript
import{r as e,c as t,h as i}from"./p-WTwLUJcM.js";import{z as a}from"./p-COrzvkrr.js";import{i as r}from"./p-GpUjqmUL.js";import{i as s}from"./p-DjSNdVAB.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,n;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!==(n=e[t].cancelable)&&void 0!==n&&n,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))}},n=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)}handleKeyDown(e){var t;if("Enter"===e.key){if(document.activeElement instanceof HTMLTextAreaElement||e.target instanceof HTMLTextAreaElement)return;if(this.disabled)return;if((null===(t=this.currentStepState)||void 0===t?void 0:t.state)===a.Error)return;if(!this.currentFooter)return;e.preventDefault();const{completeEnabled:i,showCompleteBtn:r,nextEnabled:s}=this.currentFooter;if(r){if(!i)return;const e=new MouseEvent("click",{bubbles:!0,cancelable:!0});return this.completeClick.emit(e)}if(!s)return;return this.goToStep.emit(this.currentStep+1)}}render(){return i("div",{key:"9dae3fb13799ee4afb6122f8a9434147f80e22ad",class:"wizard"},this.showHeader&&i("div",{key:"aa77f0a0f0e88bebb5e51b39df81295d2298372d",class:"wizard-header"},this.currentHeader&&i("kv-wizard-header",Object.assign({key:"8d826394496b081f3a0f3f4bc1545a690fa9bf5d"},this.currentHeader),i("slot",{key:"0d7fc3a747e1a21ed53fc28afd7aeaf669e7e5b0",slot:"additional-header-actions",name:"additional-header-actions"}))),i("div",{key:"d079888c0a0839362ae94c5aa8e4f0fae153c77c",class:{"wizard-content":!0,"has-header":this.showHeader}},i("slot",{key:"da9d0eac62014bc423267453e961a9b5a619066d",name:"step-content"})),i("div",{key:"6a7a45235e71ae82fc30ca5b63d98451af415c8c",class:"wizard-footer"},i("kv-wizard-footer",Object.assign({key:"92b03edb85808f7179da3b1af48784f416218726",onPrevClick:this.onPrevClick,onNextClick:this.onNextClick,onStepClick:this.onStepClick,showStepBar:this.showStepBar,completeBtnLabel:this.completeBtnLabel,exportparts:"footer-actions-container"},this.currentFooter),i("slot",{key:"1ac6f61adeb68c4bca56853200a4f5b955372f76",slot:"additional-actions",name:"additional-actions"}))))}static get watchers(){return{steps:["stepsChangeHandler"],currentStep:["currentStepChangeHandler"],currentStepState:["hasErrorStepChangeHandler"]}}};n.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{--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(--spacing-md);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{n as kv_wizard}