UNPKG

@trimble-oss/moduswebcomponents

Version:

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

1 lines 2.25 kB
import{r as t,d as e,h as s,e as r,g as i}from"./p-C1-Dpkp7.js";import{h as o}from"./p-tWS3Egrk.js";import{i as p}from"./p-DJ2rBB6r.js";const n=class{constructor(s){t(this,s),this.stepClick=e(this,"stepClick",7),this.inheritedAttributes={},this.customClass="",this.steps=[],this.interactive=!1}componentWillLoad(){o(this.el),this.inheritedAttributes=p(this.el)}getClasses(){const t=["modus-wc-steps"],e=(({interactive:t,orientation:e})=>{let s="";if(t&&(s=`${s} modus-wc-stepper-interactive`),e)switch(e){case"horizontal":break;case"vertical":s=`${s} modus-wc-steps-vertical`}return s.trim()})({interactive:this.interactive,orientation:this.orientation});return e&&t.push(e),this.customClass&&t.push(this.customClass),t.join(" ")}getStepLabel(t){var e,s;return null!==(s=null!==(e=t.label)&&void 0!==e?e:t.content)&&void 0!==s?s:""}getStepAriaLabel(t,e){return this.getStepLabel(t)||`Step ${e+1}`}getClassesForStep(t){const e=["modus-wc-step"];return t.color&&e.push(`modus-wc-step-${t.color}`),t.customClass&&e.push(t.customClass),e.join(" ")}handleStepActivate(t){this.interactive&&this.stepClick.emit({index:t})}render(){const t=!!this.interactive;return s(r,{key:"b79de01973e037f929b3690ae60a2ad75a4df821"},s("ul",Object.assign({key:"1e306dd6938240556519b70c4060565474a75745",class:this.getClasses()},this.inheritedAttributes),this.steps.map(((e,r)=>{const i=this.getStepLabel(e);return s("li",{class:this.getClassesForStep(e),key:r,"data-content":e.content},t&&s("button",{type:"button",class:"modus-wc-stepper-step-button","aria-label":this.getStepAriaLabel(e,r),onClick:()=>this.handleStepActivate(r)}),i)}))))}get el(){return i(this)}};n.style="modus-wc-stepper .modus-wc-steps .modus-wc-step{--fallback-b3:var(--modus-wc-color-base-200)}modus-wc-stepper .modus-wc-stepper-interactive .modus-wc-step::before,modus-wc-stepper .modus-wc-stepper-interactive .modus-wc-step::after{pointer-events:none}modus-wc-stepper .modus-wc-stepper-step-button{appearance:none;background:transparent;border:none;cursor:pointer;grid-column-start:1;grid-row-start:1;height:44px;margin:0;padding:0;place-self:center;position:relative;width:44px;z-index:2}modus-wc-stepper .modus-wc-stepper-step-button:focus-visible{outline:none}";export{n as modus_wc_stepper}