@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 • 5.22 kB
JavaScript
import{r as c,d as s,h as d,e as r,g as e}from"./p-C1-Dpkp7.js";import{h as a}from"./p-tWS3Egrk.js";import{i as m,s as u}from"./p-DJ2rBB6r.js";const o=class{constructor(d){c(this,d),this.breadcrumbClick=s(this,"breadcrumbClick",7),this.inheritedAttributes={},this.items=[],this.customClass="",this.size="md"}componentWillLoad(){a(this.el),this.el.ariaLabel||(this.el.ariaLabel="Breadcrumbs"),this.items&&0!==this.items.length||console.error("ModusWcBreadcrumbs: breadcrumb items data is required."),this.inheritedAttributes=m(this.el)}getClasses(){const c=["modus-wc-breadcrumbs"],s=(({size:c})=>{let s="";return c&&(s=`${s} modus-wc-text-${c}`),s.trim()})({size:this.size});return s&&c.push(s),this.customClass&&c.push(this.customClass),c.join(" ")}handleClick(c,s){u(s.url)||c.preventDefault(),this.breadcrumbClick.emit(s)}render(){return d(r,{key:"7ec02ea2af19e523552cbf582e0b0a78055972e7"},d("nav",Object.assign({key:"70df2be81ea919967706d0e414b56a73eca8c2f1",class:this.getClasses()},this.inheritedAttributes),d("ol",{key:"a770f39cc3ed10579bf72da16cb3e77d88ea8c45"},this.items.map(((c,s)=>{const r=s===this.items.length-1,e=u(c.url);return d("li",Object.assign({key:c.label},r?{"aria-current":"page"}:{}),r?d("span",null,c.label):e?d("a",{href:e,onClick:s=>this.handleClick(s,c)},c.label):d("button",{class:"modus-wc-breadcrumb-button",type:"button",onClick:s=>this.handleClick(s,c)},c.label))})))))}get el(){return e(this)}};o.style="modus-wc-breadcrumbs .modus-wc-breadcrumbs ol{list-style:none}modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:0}modus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-xs{font-size:var(--modus-wc-font-size-xs)}modus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-sm{font-size:var(--modus-wc-font-size-sm)}modus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-md{font-size:var(--modus-wc-font-size-md)}modus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-lg{font-size:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button,[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button{text-decoration:none}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover,[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover{text-decoration:underline}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button{color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active{color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs span{color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button{color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active{color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs span{color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button,[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button{color:var(--modus-wc-color-base-content);opacity:0.5;text-decoration:none}[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active,[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active{color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover,[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover{text-decoration:none}";export{o as modus_wc_breadcrumbs}