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

Tegel Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca8040ad.js');
const generateUniqueId = require('./generateUniqueId-e3fc9863.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) {
        index.registerInstance(this, hostRef);
        this.internalTdsPropsChange = index.createEvent(this, "internalTdsPropsChange", 6);
        this.orientation = 'horizontal';
        this.labelPosition = 'below';
        this.size = 'lg';
        this.hideLabels = false;
        this.stepperId = generateUniqueId.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 (index.h(index.Host, { key: '83520f04716c1a9314858780bcd31d63b6fd1192' }, index.h("div", { key: '5b024281e8bc253f9790b0670c7c1d78b897e49a', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, index.h("slot", { key: '271835f2b05c6ec8ecf34433897848e23a02da03' }))));
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "orientation": ["handleDirectionChange"],
        "labelPosition": ["handleLabelPositionChange"],
        "size": ["handleSizeChange"],
        "hideLabels": ["handleHideLabelsChange"]
    }; }
};
TdsStepper.style = TdsStepperStyle0;

exports.tds_stepper = TdsStepper;