@kelvininc/ui-components
Version:
Kelvin UI Components
174 lines (173 loc) • 6.44 kB
JavaScript
import { Host, h } from "@stencil/core";
import { DEFAULT_LABEL } from "./step-bar.config";
export class KvStepBar {
constructor() {
/** @inheritdoc */
this.label = DEFAULT_LABEL;
/** @inheritdoc */
this.hasError = false;
this.onStepClick = (idx) => {
this.stepClicked.emit(idx);
};
}
render() {
if (!this.steps) {
return;
}
return (h(Host, null, h("div", { class: "label-container" }, h("span", { class: "label" }, this.label), h("span", { class: "step-counter" }, this.currentStep + 1, "/", this.steps.length, " Steps")), h("div", { class: "progress-bar-container" }, h("kv-step-progress-bar", { progressPercentage: this.progressPercentage }, this.steps.map(({ active, enabled, hasError, stepKey }, idx) => (h("div", { class: "step-indicator-container" }, h("kv-step-indicator", { class: "step-indicator", key: stepKey, enabled: enabled, active: active, hasError: hasError, isCurrent: idx === this.currentStep, onIndicatorClicked: this.onStepClick.bind(this, idx) }))))))));
}
static get is() { return "kv-step-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["step-bar.scss"]
};
}
static get styleUrls() {
return {
"$": ["step-bar.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines the label to display next to the step counter (defaults to: \"Progress: \")"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "DEFAULT_LABEL"
},
"steps": {
"type": "unknown",
"attribute": "steps",
"mutable": false,
"complexType": {
"original": "IStepBarStep[]",
"resolved": "IStepBarStep[]",
"references": {
"IStepBarStep": {
"location": "import",
"path": "./step-bar.types",
"id": "src/components/step-bar/step-bar.types.ts::IStepBarStep"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the steps array to render"
},
"getter": false,
"setter": false
},
"currentStep": {
"type": "number",
"attribute": "current-step",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the current step index"
},
"getter": false,
"setter": false,
"reflect": true
},
"progressPercentage": {
"type": "number",
"attribute": "progress-percentage",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Defines the percentage of steps completed"
},
"getter": false,
"setter": false,
"reflect": true
},
"hasError": {
"type": "boolean",
"attribute": "has-error",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the progress bar should be in an error state"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "stepClicked",
"name": "stepClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when a step is clicked and emits the index"
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
}