v4web-components
Version:
Stencil Component Starter
118 lines (117 loc) • 4.03 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsProgressIndicator {
constructor() {
this.options = undefined;
this.step = undefined;
this.size = 'medium';
}
handleClick(option) {
if (option.inactive) {
return;
}
option.event();
this.handleStepChange.emit(option.step);
}
setStateIndicator(option) {
return `${option.inactive ? 'inactive' : ''} ${option.step < this.step ? 'completed' : ''} ${option.step === this.step ? 'in-progress' : ''} ${option.step > this.step ? 'active' : ''}`;
}
render() {
var _a;
return (h("div", { class: `v4-progress-indicator ${this.size}` }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => (h("div", { key: index, onClick: () => {
this.handleClick(option);
}, tabIndex: index + 1, class: `progress-indicator ${this.setStateIndicator(option)} ${index === this.options.length - 1 ? 'last' : ''}` }, h("div", { class: `progress-bar-container` }, h("div", { class: `progress-bar-icon` }, option.icon ? (h("lab-ds-icon-not-selectable", { class: "icon", icon: option.icon, size: `${this.size === 'medium' ? 's-medium' : 'x-small'}` })) : (h("div", null, h("div", { class: "dot-icon" }), h("lab-ds-icon-not-selectable", { class: "icon-check", icon: "done", size: `${this.size === 'medium' ? 's-medium' : 'x-small'}` })))), index < this.options.length - 1 && (h("div", { class: "progress-bar-body" }, h("div", { class: "progress-bar-body-completed" })))), h("div", { class: "progress-title-description" }, h("div", { class: "progress-title" }, option.title), h("div", { class: "progress-description" }, option.description)))))));
}
static get is() { return "lab-ds-progress-indicator"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-progress-indicator.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-progress-indicator.css"]
};
}
static get properties() {
return {
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<IProgressOption>",
"resolved": "IProgressOption[]",
"references": {
"Array": {
"location": "global"
},
"IProgressOption": {
"location": "local",
"path": "/home/runner/work/v4web-component/v4web-component/packages/stencil-library/src/components/navigation/lab-ds-progress-indicator/lab-ds-progress-indicator.tsx"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"step": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "step",
"reflect": false
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium'",
"resolved": "\"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'medium'"
}
};
}
static get events() {
return [{
"method": "handleStepChange",
"name": "handleStepChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
}
//# sourceMappingURL=lab-ds-progress-indicator.js.map