@kelvininc/ui-components
Version:
Kelvin UI Components
70 lines (69 loc) • 2.81 kB
JavaScript
import { Host, h } from "@stencil/core";
export class KvStepProgressBar {
render() {
return (h(Host, { key: 'ca1248bc426c256237986832ba20afbad3c41ce7' }, h("div", { key: 'b8f72823c26cf06bcade80aeb7a09b2c4b611e30', class: "step-progress-bar-container" }, h("div", { key: '2ef5b67f71979fd14f148fae51d000657304a974', class: "progress-bar" }), h("div", { key: '6c8b1989660c2adf21faced6e7dd5d3949ac1130', class: {
'progress-bar-filler': true,
'error': this.hasError
}, style: { width: this.progressPercentage + '%' } }), h("div", { key: '248acdf8385b2f11c46f674a1b02e40bf25fc213', class: "steps-container" }, h("slot", { key: '385e30645a052e9e71df11867540a0124572cb54' })))));
}
static get is() { return "kv-step-progress-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"night": ["step-progress-bar.night.scss"]
};
}
static get styleUrls() {
return {
"night": ["step-progress-bar.night.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
}
};
}
}