v4web-components/dist/stencil-library/p-81172238.entry.js

Stencil Component Starter

import{r as e,c as r,h as s}from"./p-c2aeec95.js";const a=".v4-progress-indicator{display:flex;justify-content:space-between;align-items:flex-start}.progress-indicator{display:flex;width:100%;outline:none;flex-direction:column;cursor:pointer;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.last.progress-indicator{width:fit-content}.progress-bar-container{display:flex;align-items:center}.progress-bar-icon{display:flex;justify-content:center;align-items:center;border-style:solid;z-index:1;border-radius:var(--lab-ds-semantic-container-border-radius-pill);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);color:var(--lab-ds-semantic-color-fg-default)}.medium .progress-bar-icon{padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.icon{color:var(--lab-ds-semantic-color-fg-default)}.icon-check{display:none;color:var(--lab-ds-semantic-color-fg-default)}.dot-icon{opacity:0;width:var(--lab-ds-semantic-selectable-size-xs);height:var(--lab-ds-semantic-selectable-size-xs);margin:var(--lab-ds-semantic-selectable-space-padding-xs);background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-container-border-radius-pill)}.progress-bar-body{height:var(--lab-ds-semantic-selectable-size-xxs);width:100%;z-index:0;margin-inline:-1px;border-style:solid;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-color:var(--lab-ds-semantic-selectable-color-border-default);border-left-width:0;border-right-width:0}.progress-title-description{display:flex;flex-direction:column;width:fit-content;text-align:left;color:var(--lab-ds-semantic-color-fg-default);gap:var(--lab-ds-semantic-selectable-space-gap-s);white-space:nowrap}.progress-title{font:var(--lab-ds-semantic-typography-heading-h6)}.progress-description{font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.inactive.progress-indicator{cursor:not-allowed;opacity:var(--lab-ds-core-opacity-80)}.inactive .progress-title-description{color:var(--lab-ds-semantic-color-fg-disabled)}.inactive .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);background-color:var(--lab-ds-semantic-selectable-color-bg-disabled)}.inactive .progress-bar-body{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);background-color:var(--lab-ds-semantic-selectable-color-bg-disabled)}.inactive .icon{color:var(--lab-ds-semantic-color-fg-contrast-primary)}.in-progress .dot-icon{opacity:1;transition-duration:300ms;transition-delay:700ms;transition-property:opacity}.in-progress .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.in-progress .icon{color:var(--lab-ds-semantic-selectable-color-primary-default)}.completed .dot-icon{display:none}.completed .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-primary-default);background-color:var(--lab-ds-semantic-selectable-color-primary-default)}.completed .icon-check{display:flex}.completed .progress-bar-body{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.completed .progress-bar-body-completed{width:100%;height:100%;background-color:var(--lab-ds-semantic-selectable-color-primary-default);animation:completed-progress 700ms reverse}@keyframes completed-progress{0%{width:100%}100%{width:0%}}.medium .progress-indicator:hover:not(.inactive) .progress-title-description{color:var(--lab-ds-semantic-selectable-color-primary-hover);transition:color 100ms ease-in-out}.medium .progress-indicator:hover:not(.inactive) .progress-title{font:var(--lab-ds-component-button-typography-underlined-large);text-decoration:var(--lab-ds-core-font-decoration-01);transition:font 300ms ease-in-out}.progress-indicator:hover:not(.inactive) .progress-bar-icon{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.medium .progress-indicator:focus:not(.inactive) .progress-title-description{outline-style:solid;outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);color:var(--lab-ds-semantic-selectable-color-primary-hover);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);transition:all 100ms ease-in-out}.medium .progress-indicator:focus:not(.inactive) .progress-title{font:var(--lab-ds-component-button-typography-underlined-large);text-decoration:var(--lab-ds-core-font-decoration-01)}.small .progress-bar-icon{border-width:var(--lab-ds-semantic-selectable-border-width-s)}.small .dot-icon{width:var(--lab-ds-semantic-selectable-size-xxs);height:var(--lab-ds-semantic-selectable-size-xxs)}.small .icon{padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.small .icon-check{padding:var(--lab-ds-semantic-selectable-space-padding-xxs)}.small .progress-bar-body{height:6px;border-width:var(--lab-ds-semantic-selectable-border-width-s);border-left-width:0;border-right-width:0}.small .progress-title{font:var(--lab-ds-semantic-typography-heading-h7)}.small .progress-description{font:var(--lab-ds-semantic-typography-body-none-decoration-p4-bold)}";const o=class{constructor(s){e(this,s);this.handleStepChange=r(this,"handleStepChange",7);this.options=undefined;this.step=undefined;this.size="medium"}handleClick(e){if(e.inactive){return}e.event();this.handleStepChange.emit(e.step)}setStateIndicator(e){return`${e.inactive?"inactive":""} ${e.step<this.step?"completed":""} ${e.step===this.step?"in-progress":""} ${e.step>this.step?"active":""}`}render(){var e;return s("div",{class:`v4-progress-indicator ${this.size}`},(e=this.options)===null||e===void 0?void 0:e.map(((e,r)=>s("div",{key:r,onClick:()=>{this.handleClick(e)},tabIndex:r+1,class:`progress-indicator ${this.setStateIndicator(e)} ${r===this.options.length-1?"last":""}`},s("div",{class:`progress-bar-container`},s("div",{class:`progress-bar-icon`},e.icon?s("lab-ds-icon-not-selectable",{class:"icon",icon:e.icon,size:`${this.size==="medium"?"s-medium":"x-small"}`}):s("div",null,s("div",{class:"dot-icon"}),s("lab-ds-icon-not-selectable",{class:"icon-check",icon:"done",size:`${this.size==="medium"?"s-medium":"x-small"}`}))),r<this.options.length-1&&s("div",{class:"progress-bar-body"},s("div",{class:"progress-bar-body-completed"}))),s("div",{class:"progress-title-description"},s("div",{class:"progress-title"},e.title),s("div",{class:"progress-description"},e.description))))))}};o.style=a;export{o as lab_ds_progress_indicator};
//# sourceMappingURL=p-81172238.entry.js.map