@scania/tegel/dist/components/tds-stepper.js

Tegel Design System

import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.js';

const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
const TdsStepperStyle0 = stepperCss;

const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.internalTdsPropsChange = createEvent(this, "internalTdsPropsChange", 6);
        this.orientation = 'horizontal';
        this.labelPosition = 'below';
        this.size = 'lg';
        this.hideLabels = false;
        this.stepperId = generateUniqueId();
        this.tdsAriaLabel = 'Progress steps';
    }
    componentWillLoad() {
        if (this.orientation === 'vertical') {
            this.labelPosition = 'aside';
        }
    }
    handleDirectionChange() {
        this.internalTdsPropsChange.emit({
            stepperId: this.stepperId,
            changed: ['orientation'],
            orientation: this.orientation,
        });
    }
    handleLabelPositionChange() {
        this.internalTdsPropsChange.emit({
            stepperId: this.stepperId,
            changed: ['labelPosition'],
            labelPosition: this.labelPosition,
        });
    }
    handleSizeChange() {
        this.internalTdsPropsChange.emit({
            stepperId: this.stepperId,
            changed: ['size'],
            size: this.size,
        });
    }
    handleHideLabelsChange() {
        this.internalTdsPropsChange.emit({
            stepperId: this.stepperId,
            changed: ['hideLabels'],
            hideLabels: this.hideLabels,
        });
    }
    render() {
        return (h(Host, { key: '83520f04716c1a9314858780bcd31d63b6fd1192' }, h("div", { key: '5b024281e8bc253f9790b0670c7c1d78b897e49a', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: '271835f2b05c6ec8ecf34433897848e23a02da03' }))));
    }
    get host() { return this; }
    static get watchers() { return {
        "orientation": ["handleDirectionChange"],
        "labelPosition": ["handleLabelPositionChange"],
        "size": ["handleSizeChange"],
        "hideLabels": ["handleHideLabelsChange"]
    }; }
    static get style() { return TdsStepperStyle0; }
}, [1, "tds-stepper", {
        "orientation": [1],
        "labelPosition": [1, "label-position"],
        "size": [1],
        "hideLabels": [4, "hide-labels"],
        "stepperId": [1, "stepper-id"],
        "tdsAriaLabel": [1, "tds-aria-label"]
    }, undefined, {
        "orientation": ["handleDirectionChange"],
        "labelPosition": ["handleLabelPositionChange"],
        "size": ["handleSizeChange"],
        "hideLabels": ["handleHideLabelsChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-stepper"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-stepper":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsStepper$1);
            }
            break;
    } });
}
defineCustomElement$1();

const TdsStepper = TdsStepper$1;
const defineCustomElement = defineCustomElement$1;

export { TdsStepper, defineCustomElement };