@scania/tegel
Version:
Tegel Design System
135 lines (134 loc) • 5.34 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() {
/** State of the Step */
this.state = 'upcoming';
}
/* Needs to be onload to do this on any updates. */
componentWillLoad() {
this.stepperEl = this.el.closest('tds-stepper');
if (!this.stepperEl)
return;
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: '71ffa72c7207f344cfd9e614354b52c57e133a36' }, h("div", { key: '9e738ad1d10d83c7a3f29fe4602fdb698ff4a574', 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: '6d7c25472829f5459bb97d8f5a1a0cec3343f595', 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: 'bd3f88a33114c3eee0fe6402ad4365ad1d4a5b10', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: 'cc7a809cc19505b21a748fe5eb58cc8900188625', 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 | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Index of the step. Will be displayed in the step if the state is current/upcoming."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "index"
},
"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"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "state",
"defaultValue": "'upcoming'"
},
"tdsAriaCurrent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-current"
}
};
}
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
}];
}
}