@kelvininc/ui-components
Version:
Kelvin UI Components
320 lines (319 loc) • 12 kB
JavaScript
import { h, Host } from "@stencil/core";
import { EComponentSize } from "../../utils/types";
import { isEmpty } from "lodash-es";
/**
* @part button-text - The text button.
* @part icon - The icon button.
*/
export class KvActionButtonText {
constructor() {
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
}
render() {
return (h(Host, { key: '53629f03126894b16733ad9a76b6e5f8a5bca049' }, h("kv-action-button", { key: 'cfb2cbbe3d02ecee82cc8bee00958e34efe004ec', active: this.active, loading: this.loading, type: this.type, disabled: this.disabled, size: this.size, exportparts: "button" }, this.icon && h("kv-icon", { key: 'b9c4df734e4458cae7b412d6e483c4c559017ddc', name: this.icon, exportparts: "icon" }), !isEmpty(this.text) && (h("span", { key: '62e671cc9ad0d90196c5462cc19264a0d8733ba2', class: {
'action-button-text': true,
'action-button-text--disabled': this.disabled,
'action-button-text--active': this.active,
[`action-button-text--type-${this.type}`]: true
}, part: "button-text" }, this.text)), this.rightIcon && h("kv-icon", { key: '0d2e1dac1a4950989c4b0fc49a6a4ec073753aad', name: this.rightIcon, exportparts: "icon" }))));
}
static get is() { return "kv-action-button-text"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["action-button-text.scss"]
};
}
static get styleUrls() {
return {
"$": ["action-button-text.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"attribute": "text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Button's text"
},
"getter": false,
"setter": false,
"reflect": true
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Button's left icon symbol name"
},
"getter": false,
"setter": false,
"reflect": true
},
"rightIcon": {
"type": "string",
"attribute": "right-icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Button's right icon symbol name"
},
"getter": false,
"setter": false,
"reflect": true
},
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "EActionButtonType",
"resolved": "EActionButtonType.Danger | EActionButtonType.Primary | EActionButtonType.Secondary | EActionButtonType.Tertiary | EActionButtonType.Text",
"references": {
"EActionButtonType": {
"location": "import",
"path": "../action-button/action-button.types",
"id": "src/components/action-button/action-button.types.ts::EActionButtonType"
}
}
},
"required": true,
"optional": false,
"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"
}
}
}
}];
}
}