@scania/tegel
Version:
Tegel Design System
219 lines (218 loc) • 7.93 kB
JavaScript
import { Host, h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
/**
* @slot <default> - <b>Unnamed slot.</b> For the step elements.
*/
export class TdsStepper {
constructor() {
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' }))));
}
static get is() { return "tds-stepper"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["stepper.scss"]
};
}
static get styleUrls() {
return {
"$": ["stepper.css"]
};
}
static get properties() {
return {
"orientation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'horizontal' | 'vertical'",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The orientation the Steps"
},
"attribute": "orientation",
"reflect": false,
"defaultValue": "'horizontal'"
},
"labelPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'aside' | 'below'",
"resolved": "\"aside\" | \"below\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Text position, only available on a direction: horizontal"
},
"attribute": "label-position",
"reflect": false,
"defaultValue": "'below'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'sm' | 'lg'",
"resolved": "\"lg\" | \"sm\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size of the component and it's children."
},
"attribute": "size",
"reflect": false,
"defaultValue": "'lg'"
},
"hideLabels": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hides the label for the child components if true."
},
"attribute": "hide-labels",
"reflect": false,
"defaultValue": "false"
},
"stepperId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID used for internal Stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\nas the default ID is random and will be different every time."
},
"attribute": "stepper-id",
"reflect": false,
"defaultValue": "generateUniqueId()"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label for the stepper component, for screen reader users"
},
"attribute": "tds-aria-label",
"reflect": false,
"defaultValue": "'Progress steps'"
}
};
}
static get events() {
return [{
"method": "internalTdsPropsChange",
"name": "internalTdsPropsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": "Broadcasts changes in props to the Stepper children"
}],
"text": ""
},
"complexType": {
"original": "InternalTdsStepperPropChange",
"resolved": "{ stepperId: string; changed: (keyof TdsStepperProps)[]; } & Partial<TdsStepperProps>",
"references": {
"InternalTdsStepperPropChange": {
"location": "local",
"path": "/home/runner/work/tegel/tegel/packages/core/src/components/stepper/stepper.tsx",
"id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
}
}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "orientation",
"methodName": "handleDirectionChange"
}, {
"propName": "labelPosition",
"methodName": "handleLabelPositionChange"
}, {
"propName": "size",
"methodName": "handleSizeChange"
}, {
"propName": "hideLabels",
"methodName": "handleHideLabelsChange"
}];
}
}