@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.84 kB
JavaScript
import{r as s,c,h as r,H as e,g as a}from"./p-D5XAQERj.js";import{i as d}from"./p-DlW2F98o.js";const o=class{constructor(r){s(this,r),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=d(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 r(e,{key:"30045a42718a7d982092995fbc469e72294098ef"},r("nav",Object.assign({key:"4bacf9cacb9375bdb3c3791453e98e0718b2c5f0",class:this.getClasses()},this.inheritedAttributes),r("ol",{key:"47f0e6fa8eb10421ac8fa72b26aefcef16770077"},this.items.map(((s,c)=>{const e=c===this.items.length-1;return r("li",Object.assign({key:s.label},e?{"aria-current":"page"}:{}),e?r("span",null,s.label):r("a",{href:s.url,onClick:c=>this.handleClick(c,s)},s.label))})))))}get el(){return a(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)}";export{o as modus_wc_breadcrumbs}