@trimble-oss/moduswebcomponents/esm/modus-wc-stepper.entry.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 { r as registerInstance, h, H as Host, g as getElement } from './index-D_4hbGjA.js';
import { i as inheritAriaAttributes } from './utils-DQvnWXRl.js';

const convertPropsToClasses = ({ orientation, }) => {
    let classes = '';
    if (orientation) {
        switch (orientation) {
            case 'horizontal':
                break; // Default
            case 'vertical':
                classes = `${classes} modus-wc-steps-vertical`;
                break;
        }
    }
    return classes.trim();
};

const modusWcStepperCss = "modus-wc-stepper .modus-wc-steps .modus-wc-step{--fallback-b3:var(--modus-wc-color-base-200)}";

const ModusWcStepper = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the steps element. */
        this.customClass = '';
        /** The steps to display. */
        this.steps = [];
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-steps'];
        const propClasses = convertPropsToClasses({
            orientation: this.orientation,
        });
        // 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(' ');
    }
    getClassesForStep(step) {
        const classList = ['modus-wc-step'];
        // The order CSS classes are added matters to CSS specificity
        if (step.color)
            classList.push(`modus-wc-step-${step.color}`);
        if (step.customClass)
            classList.push(step.customClass);
        return classList.join(' ');
    }
    render() {
        return (h(Host, { key: '99d8209d8e054b6cdb6b597c70830c76c7ce4e71' }, h("div", Object.assign({ key: '1b63bb86f6f3a3aa03df0779c1e798d21fc81ba4', class: this.getClasses() }, this.inheritedAttributes), this.steps.map((step, index) => {
            return (h("li", { class: this.getClassesForStep(step), key: index, "data-content": step.content }, step.label));
        }))));
    }
    get el() { return getElement(this); }
};
ModusWcStepper.style = modusWcStepperCss;

export { ModusWcStepper as modus_wc_stepper };