@kelvininc/ui-components
Version:
Kelvin UI Components
147 lines (146 loc) • 5.16 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EIconName } from "../icon/icon.types";
export class KvStepIndicator {
constructor() {
this.onIndicatorClick = (event) => {
if (this.enabled) {
this.indicatorClicked.emit(event);
}
};
}
render() {
return (h(Host, { key: '9a68db4b4bed9ff56af4d61a9f0065bc8690393c' }, h("div", { key: '4d5f5537380224ff06a1babd51f3c055a0a9237a', 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: '351555a981d525036492a0dacdd18bbeadbd1cdf', 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": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
}