@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 • 3.43 kB
JavaScript
import{r as s,c,h as d,H as r,g as e}from"./p-D_4hbGjA.js";import{i as a}from"./p-BLBSdonk.js";const o=class{constructor(d){s(this,d),this.breadcrumbClick=c(this,"breadcrumbClick"),this.inheritedAttributes={},this.items=[],this.customClass="",this.size="md"}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Breadcrumbs"),this.items&&0!==this.items.length||console.error("ModusWcBreadcrumbs: breadcrumb items data is required."),this.inheritedAttributes=a(this.el)}getClasses(){const s=["modus-wc-breadcrumbs"],c=(({size:s})=>{let c="";return s&&(c=`${c} modus-wc-text-${s}`),c.trim()})({size:this.size});return c&&s.push(c),this.customClass&&s.push(this.customClass),s.join(" ")}handleClick(s,c){c.url||s.preventDefault(),this.breadcrumbClick.emit(c)}render(){return d(r,{key:"110f8dce9ee1e244077edbc0db10e79adef40a7b"},d("nav",Object.assign({key:"bd9bfbd03c80434931556f9ac57d9399d579db3f",class:this.getClasses()},this.inheritedAttributes),d("ol",{key:"832559c5b1d222e467a08215705c0c2db8d192d1"},this.items.map(((s,c)=>{const r=c===this.items.length-1;return d("li",Object.assign({key:s.label},r?{"aria-current":"page"}:{}),r?d("span",null,s.label):d("a",{href:s.url,onClick:c=>this.handleClick(c,s)},s.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-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-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a{text-decoration:none}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover{text-decoration:underline}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a{color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a: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{color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a: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-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a{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-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active{color:var(--modus-wc-color-white)}[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover{text-decoration:none}";export{o as modus_wc_breadcrumbs}