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

Tegel Design System

import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.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 TdsStepper = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.internalTdsPropsChange = createEvent(this, "internalTdsPropsChange", 6);
        /** The orientation the Steps */
        this.orientation = 'horizontal';
        /** Text position, only available on a direction: horizontal */
        this.labelPosition = 'below';
        /** Size of the component and it's children. */
        this.size = 'lg';
        /** Hides the label for the child components if true. */
        this.hideLabels = false;
        /** ID used for internal Stepper functionality and events, must be unique.
         *
         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
         * as the default ID is random and will be different every time.
         */
        this.stepperId = generateUniqueId();
        /** Label for the stepper component, for screen reader users */
        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: 'a62077cf8b1936e7109eea64cad0ceb67a45c676' }, h("div", { key: 'f958fcd53b074ac8ac72d055162e738116e94956', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'e9dfa6c14ec134baafe5a58394337b09ca091809' }))));
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "orientation": [{
                "handleDirectionChange": 0
            }],
        "labelPosition": [{
                "handleLabelPositionChange": 0
            }],
        "size": [{
                "handleSizeChange": 0
            }],
        "hideLabels": [{
                "handleHideLabelsChange": 0
            }]
    }; }
};
TdsStepper.style = stepperCss();

export { TdsStepper as tds_stepper };