@kelvininc/ui-components
Version:
Kelvin UI Components
397 lines (396 loc) • 15.1 kB
JavaScript
import { h, Host } from "@stencil/core";
import { EComponentSize } from "../../utils/types";
export class KvActionButtonSplit {
constructor() {
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
this.onClickLeftButton = (event) => {
this.clickLeftButton.emit(event.detail);
};
this.onClickRightButton = (event) => {
this.clickRightButton.emit(event.detail);
};
this.onFocusLeftButton = (event) => {
this.focusLeftButton.emit(event.detail);
};
this.onFocusRightButton = (event) => {
this.focusRightButton.emit(event.detail);
};
this.onBlurLeftButton = (event) => {
this.blurLeftButton.emit(event.detail);
};
this.onBlurRightButton = (event) => {
this.blurRightButton.emit(event.detail);
};
}
render() {
return (h(Host, { key: '6b76c82ff7fce00226146d654edb3825545b0b2c' }, h("div", { key: '83f19a6741d38f4b30bac48b94dd287ab4dbed63', class: "action-button-split" }, h("kv-action-button-text", { key: 'd83a2f2d3118467f5996ddab8bc68a53dcad04ba', type: this.type, text: this.text, icon: this.icon, disabled: this.disabled, size: this.size, loading: this.loading, onClickButton: this.onClickLeftButton, onFocusButton: this.onFocusLeftButton, onBlurButton: this.onBlurLeftButton, exportparts: "button" }), h("kv-action-button", { key: 'f30104f281919cfb44a8a4fac2eb490691adff7f', type: this.type, disabled: this.disabled, size: this.size, loading: this.loading, onClickButton: this.onClickRightButton, onFocusButton: this.onFocusRightButton, onBlurButton: this.onBlurRightButton, exportparts: "button" }, h("kv-icon", { key: 'e3909052a9d97c6c7f550ecd8d0d2ae954b9c11d', name: this.splitIcon, exportparts: "icon" })))));
}
static get is() { return "kv-action-button-split"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["action-button-split.scss"]
};
}
static get styleUrls() {
return {
"$": ["action-button-split.css"]
};
}
static get properties() {
return {
"splitIcon": {
"type": "string",
"attribute": "split-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) Right button icon symbol name"
},
"getter": false,
"setter": false,
"reflect": true
},
"text": {
"type": "string",
"attribute": "text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) (required) 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
},
"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": "(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": "clickLeftButton",
"name": "clickLeftButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when left button is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "clickRightButton",
"name": "clickRightButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when right button is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "focusLeftButton",
"name": "focusLeftButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when left button is focused"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "focusRightButton",
"name": "focusRightButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when right button is focused"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "blurLeftButton",
"name": "blurLeftButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when left button is blur"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "blurRightButton",
"name": "blurRightButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when right button is blur"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}];
}
}