@kelvininc/ui-components
Version:
Kelvin UI Components
142 lines (141 loc) • 4.94 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EIconName } from "../icon/icon.types";
export class KvStepIndicator {
constructor() {
this.onIndicatorClick = () => {
if (this.enabled) {
this.indicatorClicked.emit();
}
};
}
render() {
return (h(Host, { key: 'e4d1e45c0f8adc4dd5cacb6fbd5dad820d023efc' }, h("div", { key: 'd88c63544fef726669c7ffdf987e01763dbc1f5a', class: {
'indicator': true,
'indicator--state-enabled': this.enabled,
'indicator--state-active': this.active,
'indicator--state-error': this.hasError
}, onClick: this.onIndicatorClick }, !this.isCurrent && this.active && h("kv-icon", { key: '74869c1dab6814c36ed4f4e064416cc8d252274c', name: this.hasError ? EIconName.Error : EIconName.Success }))));
}
static get is() { return "kv-step-indicator"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["step-indicator.scss"]
};
}
static get styleUrls() {
return {
"$": ["step-indicator.css"]
};
}
static get properties() {
return {
"enabled": {
"type": "boolean",
"attribute": "enabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the step is interactable and emits clicks"
},
"getter": false,
"setter": false,
"reflect": true
},
"active": {
"type": "boolean",
"attribute": "active",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the step is active"
},
"getter": false,
"setter": false,
"reflect": true
},
"hasError": {
"type": "boolean",
"attribute": "has-error",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the step has an error and applies the border styling"
},
"getter": false,
"setter": false,
"reflect": true
},
"isCurrent": {
"type": "boolean",
"attribute": "is-current",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines if the step is the current step"
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get events() {
return [{
"method": "indicatorClicked",
"name": "indicatorClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Fires when the step is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
}