@limetech/lime-elements
Version:
2 lines • 5.88 kB
JavaScript
import{r as e,c as t,h as r,g as o}from"./p-288f0842.js";import{g as s}from"./p-d251f404.js";const i='@charset "UTF-8";.flow-item{--step-background:var(\n --progress-flow-step-background-color,\n rgb(var(--contrast-600))\n );--step-background--selected:var(\n --progress-flow-step-background-color--selected,\n var(--lime-primary-color, var(--limel-theme-primary-color))\n );--step-background--passed:var(\n --progress-flow-step-background-color--passed,\n var(--step-background--selected)\n );--step-text:var(\n --progress-flow-step-text-color,\n rgb(var(--contrast-1200))\n );--step-text--selected:var(\n --progress-flow-step-text-color--selected,\n var(--lime-on-primary-color, var(--limel-theme-on-primary-color))\n );--step-text--passed:var(\n --progress-flow-step-text-color--passed,\n var(--step-text--selected)\n );--step-divider-color:var(\n --progress-flow-step-divider-color,\n rgb(var(--contrast-100))\n );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:""}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:var(--limel-theme-default-font-size)}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step .lock-icon{pointer-events:none;box-sizing:border-box;z-index:2}.step::before{position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step .lock-icon{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before{content:"";width:0.375rem;height:0.375rem;background-color:rgb(var(--contrast-700));opacity:0.7}.lock-icon{margin-left:0.25rem;margin-right:-0.5rem;width:0.75rem;color:currentColor;scale:0.8}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}';const a=class{constructor(r){e(this,r);this.interact=t(this,"interact",7);this.handleClick=()=>{this.interact.emit()};this.item=null;this.disabled=false;this.readonly=false;this.currentStep=false}render(){var e;if(!this.item){return}return[r("button",{tabindex:"0",title:this.getToolTipText(),type:"button",class:{step:true,selected:(e=this.item)===null||e===void 0?void 0:e.selected,disabled:this.isDisabled(),readonly:this.readonly},onClick:this.handleClick,disabled:this.isDisabled(),"aria-current":this.currentStep?"step":null},this.renderIcon(),r("span",{class:"text"},this.item.text),this.renderDivider(),this.renderLockIcon()),this.renderSecondaryText()]}isDisabled(){var e;return((e=this.item)===null||e===void 0?void 0:e.disabled)||this.readonly||this.disabled}getToolTipText(){if(!this.item.secondaryText){return this.item.text}return[this.item.text,this.item.secondaryText].join(" · ")}renderSecondaryText(){var e;if(!((e=this.item)===null||e===void 0?void 0:e.secondaryText)){return}return r("div",{class:"secondary-text"},this.item.secondaryText)}renderIcon(){if(!this.item.icon){return}const e=s(this.item.icon);return r("limel-icon",{name:e,size:"small",class:"icon"})}renderDivider(){if(this.item.isOffProgress){return}return r("div",{class:"divider"})}renderLockIcon(){if(!this.isDisabled()){return}return r("limel-icon",{name:"lock",class:"lock-icon"})}get element(){return o(this)}};a.style=i;export{a as limel_progress_flow_item};
//# sourceMappingURL=p-d4a220eb.entry.js.map