@kelvininc/ui-components
Version:
Kelvin UI Components
70 lines (69 loc) • 2.79 kB
JavaScript
import { Host, h } from "@stencil/core";
export class KvStepProgressBar {
render() {
return (h(Host, { key: 'd9797b78ada7db2c19a1c94793d0ea59ddc10d28' }, h("div", { key: 'ad7f943999d0e2cee1670dcd5eb0d112fa038ccb', class: "step-progress-bar-container" }, h("div", { key: '39d8465be709626b705b6a4ae11827517d7fc7de', class: "progress-bar" }), h("div", { key: '3b00d8f177653a017e0b3ae622d458af1b980c38', class: {
'progress-bar-filler': true,
'error': this.hasError
}, style: { width: this.progressPercentage + '%' } }), h("div", { key: 'c81b0fcf249100e04ad191262b9648594f0897bf', class: "steps-container" }, h("slot", { key: '57d0e8ee84afe427ae1b9b7d165a45621da5e052' })))));
}
static get is() { return "kv-step-progress-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["step-progress-bar.scss"]
};
}
static get styleUrls() {
return {
"$": ["step-progress-bar.css"]
};
}
static get properties() {
return {
"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 how much space the progress bar should fill"
},
"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 bar should be in an error state, setting to `true` will change the background color to the defined error color"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
}