@kelvininc/ui-components
Version:
Kelvin UI Components
254 lines (253 loc) • 9.21 kB
JavaScript
import { h, Host } from "@stencil/core";
import { EComponentSize } from "../../utils/types";
/**
* @part button - The action button.
*/
export class KvActionButton {
constructor() {
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
this.onClickButton = (event) => {
if (this.disabled) {
return;
}
this.clickButton.emit(event);
};
this.onFocusButton = (event) => {
this.focusButton.emit(event);
};
this.onBlurButton = (event) => {
this.blurButton.emit(event);
};
}
render() {
return (h(Host, { key: '3e18d5791a3b2fccac940f8be92c319014ab0982', "aria-disabled": this.disabled, onClick: this.onClickButton }, h("div", { key: 'feb959be50e3e33455d8b8395fdb32e030456348', class: {
'action-button': true,
'action-button--disabled': this.disabled,
'action-button--active': this.active,
'action-button--loading': this.loading,
[`action-button--type-${this.type}`]: true,
[`action-button--size-${this.size}`]: true
}, tabIndex: this.disabled ? -1 : 0, part: "button", onFocus: this.onFocusButton, onBlur: this.onBlurButton }, h("slot", { key: '4bf1f9c8c8cf6179c7204a16b51600eb984010e7' }))));
}
static get is() { return "kv-action-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["action-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["action-button.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "EActionButtonType",
"resolved": "EActionButtonType.Danger | EActionButtonType.Ghost | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary",
"references": {
"EActionButtonType": {
"location": "import",
"path": "./action-button.types",
"id": "src/components/action-button/action-button.types.ts::EActionButtonType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Button's type"
},
"getter": false,
"setter": false,
"reflect": true
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the button is disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"active": {
"type": "boolean",
"attribute": "active",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the button is active"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"attribute": "loading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the button is of type loading"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../utils/types",
"id": "src/utils/types/index.ts::EComponentSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Button's size"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Large"
}
};
}
static get events() {
return [{
"method": "clickButton",
"name": "clickButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when action button is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "focusButton",
"name": "focusButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when action button is focused"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "blurButton",
"name": "blurButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when action button is blur"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}];
}
}