@scania/tegel
Version:
Tegel Design System
132 lines (131 loc) • 5.26 kB
JavaScript
import { Host, h } from "@stencil/core";
const propToStateMap = {
orientation: 'orientation',
labelPosition: 'labelPosition',
size: 'size',
hideLabels: 'hideLabels',
};
/**
* @slot label - Slot for the label text.
*/
export class TdsStep {
constructor() {
this.index = undefined;
this.state = 'upcoming';
this.tdsAriaCurrent = undefined;
this.hideLabels = undefined;
this.size = undefined;
this.orientation = undefined;
this.labelPosition = undefined;
}
/* Needs to be onload to do this on any updates. */
componentWillLoad() {
this.stepperEl = this.el.closest('tds-stepper');
this.orientation = this.stepperEl.orientation;
this.labelPosition = this.stepperEl.labelPosition;
this.size = this.stepperEl.size;
this.hideLabels = this.stepperEl.hideLabels;
this.stepperId = this.stepperEl.stepperId;
}
handlePropsChange(event) {
if (this.stepperId === event.detail.stepperId) {
event.detail.changed.forEach((changedProp) => {
if (typeof this[changedProp] === 'undefined') {
throw new Error(`Stepper prop is not supported: ${changedProp}`);
}
else if (changedProp in propToStateMap) {
this[propToStateMap[changedProp]] = event.detail[changedProp];
}
});
}
}
render() {
return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '1f961578e8e54ffc9e0d0c2966c86e3e32f8ddd8', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'f83033e0a0761227d911ac77cac9c64c31fe4c11', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '83c92f388cfebe37e0fb94c81d14adc391fbbbfa', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '1c6381a25f8af42afe54c0c8eaff4090bf14ee80', name: "label" }))))));
}
static get is() { return "tds-step"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["step.scss"]
};
}
static get styleUrls() {
return {
"$": ["step.css"]
};
}
static get properties() {
return {
"index": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Index of the step. Will be displayed in the step if the state is current/upcoming."
},
"attribute": "index",
"reflect": false
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'current' | 'error' | 'success' | 'upcoming'",
"resolved": "\"current\" | \"error\" | \"success\" | \"upcoming\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "State of the Step"
},
"attribute": "state",
"reflect": false,
"defaultValue": "'upcoming'"
},
"tdsAriaCurrent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "tds-aria-current",
"reflect": false
}
};
}
static get states() {
return {
"hideLabels": {},
"size": {},
"orientation": {},
"labelPosition": {}
};
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "internalTdsPropsChange",
"method": "handlePropsChange",
"target": "body",
"capture": false,
"passive": false
}];
}
}