@trimble-oss/moduswebcomponents/components/modus-wc-breadcrumbs.js

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

import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';

const convertPropsToClasses = ({ size, }) => {
    let classes = '';
    if (size) {
        classes = `${classes} modus-wc-text-${size}`;
    }
    return classes.trim();
};

const modusWcBreadcrumbsCss = "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)}";

const ModusWcBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcBreadcrumbs extends H {
    constructor() {
        super();
        this.__registerHost();
        this.breadcrumbClick = createEvent(this, "breadcrumbClick");
        this.inheritedAttributes = {};
        /** The breadcrumbs to render. */
        this.items = [];
        /** Custom CSS class to apply to the inner div. */
        this.customClass = '';
        /** The size of the breadcrumbs. */
        this.size = 'md';
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Breadcrumbs';
        }
        if (!this.items || this.items.length === 0) {
            console.error('ModusWcBreadcrumbs: breadcrumb items data is required.');
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-breadcrumbs'];
        const propClasses = convertPropsToClasses({
            size: this.size,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    handleClick(event, crumb) {
        if (!crumb.url) {
            event.preventDefault();
        }
        this.breadcrumbClick.emit(crumb);
    }
    render() {
        return (h(Host, { key: '30045a42718a7d982092995fbc469e72294098ef' }, h("nav", Object.assign({ key: '4bacf9cacb9375bdb3c3791453e98e0718b2c5f0', class: this.getClasses() }, this.inheritedAttributes), h("ol", { key: '47f0e6fa8eb10421ac8fa72b26aefcef16770077' }, this.items.map((item, index) => {
            const isCurrentPage = index === this.items.length - 1;
            return (h("li", Object.assign({ key: item.label }, (isCurrentPage ? { 'aria-current': 'page' } : {})), isCurrentPage ? (h("span", null, item.label)) : (h("a", { href: item.url, onClick: (event) => this.handleClick(event, item) }, item.label))));
        })))));
    }
    get el() { return this; }
    static get style() { return modusWcBreadcrumbsCss; }
}, [0, "modus-wc-breadcrumbs", {
        "items": [16],
        "customClass": [1, "custom-class"],
        "size": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-breadcrumbs"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-breadcrumbs":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcBreadcrumbs$1);
            }
            break;
    } });
}

const ModusWcBreadcrumbs = ModusWcBreadcrumbs$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcBreadcrumbs, defineCustomElement };