@kelvininc/ui-components
Version:
Kelvin UI Components
314 lines (313 loc) • 12 kB
JavaScript
import { h, Host } from "@stencil/core";
import { EComponentSize } from "../../utils/types";
import { isEmpty } from "lodash-es";
export class KvActionButtonIcon {
constructor() {
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.size = EComponentSize.Small;
}
render() {
return (h(Host, { key: '25dbc3f7db60a9da257979cc7282d23cbd5a7cdd' }, h("div", { key: '1b8e9ce8e9592f88e65e65dbe99e845befdd1359', class: {
'action-button-icon': true,
[`action-button-icon--size-${this.size}`]: true
} }, h("kv-action-button", { key: '1e36e61292a0c4d82a3df7fe0f477c13ee4874af', type: this.type, active: this.active, loading: this.loading, size: this.size, disabled: this.disabled, exportparts: "button" }, h("kv-icon", { key: '8ea12e905429bd969581935046dc8bbf5aa7f89f', name: this.icon, exportparts: "icon" }), !isEmpty(this.badgeLabel) && (h("div", { key: '0bcf0b5bef891aaa284b01df38a3cfd346428dcf', class: "button-badge", exportparts: "badge" }, h("kv-badge", { key: 'd4abe78228d53bca4a7bade95f2d6de67712d9b1', state: this.badgeState }, this.badgeLabel)))))));
}
static get is() { return "kv-action-button-icon"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["action-button-icon.scss"]
};
}
static get styleUrls() {
return {
"$": ["action-button-icon.css"]
};
}
static get properties() {
return {
"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": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Button's icon symbol name"
},
"getter": false,
"setter": false,
"reflect": true
},
"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/action-button.types",
"id": "src/components/action-button/action-button.types.ts::EActionButtonType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) 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.Small"
},
"badgeLabel": {
"type": "string",
"attribute": "badge-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines button's badge label. If set, an badge will be displayed in the end of action icon button."
},
"getter": false,
"setter": false,
"reflect": true
},
"badgeState": {
"type": "string",
"attribute": "badge-state",
"mutable": false,
"complexType": {
"original": "EBadgeState",
"resolved": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning",
"references": {
"EBadgeState": {
"location": "import",
"path": "../badge/badge.types",
"id": "src/components/badge/badge.types.ts::EBadgeState"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines button's badge type."
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
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"
}
}
}
}];
}
}