@trimble-oss/moduswebcomponents/components/modus-wc-stepper.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, d as createEvent, h, c as Host } from './p-Blhe_h6i.js';
import { h as handleShadowDOMStyles } from './p-tWS3Egrk.js';
import { i as inheritAriaAttributes } from './p-DUWn6PrQ.js';

const convertPropsToClasses = ({ interactive, orientation, }) => {
    let classes = '';
    if (interactive) {
        classes = `${classes} modus-wc-stepper-interactive`;
    }
    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)}modus-wc-stepper .modus-wc-stepper-interactive .modus-wc-step::before,modus-wc-stepper .modus-wc-stepper-interactive .modus-wc-step::after{pointer-events:none}modus-wc-stepper .modus-wc-stepper-step-button{appearance:none;background:transparent;border:none;cursor:pointer;grid-column-start:1;grid-row-start:1;height:44px;margin:0;padding:0;place-self:center;position:relative;width:44px;z-index:2}modus-wc-stepper .modus-wc-stepper-step-button:focus-visible{outline:none}";

const ModusWcStepper$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcStepper extends H {
    constructor() {
        super();
        this.__registerHost();
        this.stepClick = createEvent(this, "stepClick", 7);
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the steps element. */
        this.customClass = '';
        /** The steps to display. */
        this.steps = [];
        /** If true, steps will be rendered as buttons and emit `stepClick` when activated. */
        this.interactive = false;
    }
    componentWillLoad() {
        handleShadowDOMStyles(this.el);
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-steps'];
        const propClasses = convertPropsToClasses({
            interactive: this.interactive,
            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(' ');
    }
    getStepLabel(step) {
        var _a, _b;
        return (_b = (_a = step.label) !== null && _a !== void 0 ? _a : step.content) !== null && _b !== void 0 ? _b : '';
    }
    getStepAriaLabel(step, index) {
        const stepLabel = this.getStepLabel(step);
        return stepLabel || `Step ${index + 1}`;
    }
    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(' ');
    }
    handleStepActivate(index) {
        if (!this.interactive) {
            return;
        }
        this.stepClick.emit({ index });
    }
    render() {
        const isInteractive = !!this.interactive;
        return (h(Host, { key: 'b79de01973e037f929b3690ae60a2ad75a4df821' }, h("ul", Object.assign({ key: '1e306dd6938240556519b70c4060565474a75745', class: this.getClasses() }, this.inheritedAttributes), this.steps.map((step, index) => {
            const stepLabel = this.getStepLabel(step);
            return (h("li", { class: this.getClassesForStep(step), key: index, "data-content": step.content }, isInteractive && (h("button", { type: "button", class: "modus-wc-stepper-step-button", "aria-label": this.getStepAriaLabel(step, index), onClick: () => this.handleStepActivate(index) })), stepLabel));
        }))));
    }
    get el() { return this; }
    static get style() { return modusWcStepperCss; }
}, [0, "modus-wc-stepper", {
        "customClass": [1, "custom-class"],
        "orientation": [1],
        "steps": [16],
        "interactive": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-stepper"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-stepper":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcStepper$1);
            }
            break;
    } });
}

const ModusWcStepper = ModusWcStepper$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcStepper, defineCustomElement };