@kelvininc/ui-components
Version:
Kelvin UI Components
285 lines (284 loc) • 11.4 kB
JavaScript
import { h } from "@stencil/core";
import { EIconName } from "../icon/icon.types";
import { EActionButtonType } from "../action-button/action-button.types";
import { EComponentSize } from "../../types";
import { isEmpty } from "lodash-es";
/**
* @part create-button - The create action button element.
* @part cancel-button - The cancel action button element.
* @part text-field - The text field element.
*/
export class KvSelectCreateOption {
constructor() {
/** @inheritdoc */
this.value = '';
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.size = EComponentSize.Small;
/** @inheritdoc */
this.inputConfig = {};
this.onKeyPress = (event) => {
if (event.key === 'Enter') {
this.onCreate(event);
}
};
this.onCreate = (event) => {
if (!this.canSubmit) {
return;
}
this.clickCreate.emit(event);
};
this.onCancel = (event) => {
this.clickCancel.emit(event);
};
}
/** Focus the input */
async focusInput() {
this.input.focus();
}
/** Blur the input */
async blurInput() {
this.input.blur();
}
get canSubmit() {
return !isEmpty(this.value) && !this.disabled;
}
componentDidLoad() {
this.input.focusInput();
}
render() {
return (h("div", { key: 'f20feed8fd2ae01a278d014cbd458d0df5ab9f90', class: "select-create-option" }, h("div", { key: '7ec9a6729bbbfa9ee1fa816d62482c14958b94ed', class: "form" }, h("kv-text-field", Object.assign({ key: 'c32c84f6b693e6d5e56adce4206b1a00a20780e8', ref: element => (this.input = element), inputDisabled: this.disabled, size: this.size, value: this.value }, this.inputConfig, { onKeyPress: this.onKeyPress, onTextChange: ({ detail: newValue }) => this.valueChanged.emit(newValue), part: "text-field" }))), h("div", { key: 'dc6d04fd4a9e3acf873f9b29236e441febb10bd6', class: "actions" }, h("kv-action-button-icon", { key: '0cc04c37b03005d34f31efcbde277fc9f672e16b', type: EActionButtonType.Tertiary, icon: EIconName.Close, size: this.size, onClickButton: ({ detail: event }) => this.onCancel(event), part: "cancel-button" }), h("kv-action-button-icon", { key: 'abdb94566f88a5a9d435f00f7d4d3d040eed6d35', type: EActionButtonType.Primary, icon: EIconName.DoneAll, size: this.size, disabled: !this.canSubmit, onClickButton: ({ detail: event }) => this.onCreate(event), part: "create-button" }))));
}
static get is() { return "kv-select-create-option"; }
static get originalStyleUrls() {
return {
"$": ["select-create-option.scss"]
};
}
static get styleUrls() {
return {
"$": ["select-create-option.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The new option value."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the input and actions will be disabled. Default: `false`."
},
"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": "../../types",
"id": "src/types.ts::EComponentSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The input and actions size. Default: `small\u00B4"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EComponentSize.Small"
},
"inputConfig": {
"type": "unknown",
"attribute": "input-config",
"mutable": false,
"complexType": {
"original": "Partial<ITextField>",
"resolved": "{ type?: EInputFieldType; label?: string; icon?: EIconName; actionIcon?: EIconName; inputName?: string; examples?: string[]; placeholder?: string; maxLength?: number; minLength?: number; max?: string | number; min?: string | number; step?: string | number; size?: EComponentSize; inputDisabled?: boolean; inputRequired?: boolean; loading?: boolean; state?: EValidationState; helpText?: string | string[]; value?: string | number; valuePrefix?: string; badge?: string; inputReadonly?: boolean; forcedFocus?: boolean; tooltipConfig?: Partial<ITooltip>; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; hideBadge?: boolean; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ITextField": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::ITextField"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text field custom config."
},
"getter": false,
"setter": false,
"defaultValue": "{}"
}
};
}
static get events() {
return [{
"method": "clickCreate",
"name": "clickCreate",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the create button is pressed"
},
"complexType": {
"original": "MouseEvent | KeyboardEvent",
"resolved": "KeyboardEvent | MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
},
"KeyboardEvent": {
"location": "global",
"id": "global::KeyboardEvent"
}
}
}
}, {
"method": "clickCancel",
"name": "clickCancel",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the cancel button is pressed"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "valueChanged",
"name": "valueChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the value changes"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get methods() {
return {
"focusInput": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Focus the input",
"tags": []
}
},
"blurInput": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Blur the input",
"tags": []
}
}
};
}
}