@scania/tegel/dist/esm/tds-stepper.entry.js

Tegel Design System

import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
import { g as generateUniqueId } from './generateUniqueId-7934d315.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 getElement(this); }
    static get watchers() { return {
        "orientation": ["handleDirectionChange"],
        "labelPosition": ["handleLabelPositionChange"],
        "size": ["handleSizeChange"],
        "hideLabels": ["handleHideLabelsChange"]
    }; }
};
TdsStepper.style = TdsStepperStyle0;

export { TdsStepper as tds_stepper };