@kelvininc/ui-components
Version:
Kelvin UI Components
739 lines (738 loc) • 27.7 kB
JavaScript
import { h, Host } from "@stencil/core";
import { isEmpty } from "lodash-es";
import { EComponentSize } from "../../types";
import { EIconName } from "../icon/icon.types";
import { EInputFieldType, EValidationState } from "../text-field/text-field.types";
export class KvSearch {
constructor() {
/** @inheritdoc */
this.type = EInputFieldType.Text;
/** @inheritdoc */
this.placeholder = 'Search';
/** @inheritdoc */
this.size = EComponentSize.Large;
/** @inheritdoc */
this.inputDisabled = false;
/** @inheritdoc */
this.inputRequired = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.state = EValidationState.None;
/** @inheritdoc */
this.inputReadonly = false;
/** @inheritdoc */
this.helpText = [];
/** @inheritdoc */
this.forcedFocus = false;
/** @inheritdoc */
this.value = '';
/** @inheritdoc */
this.useInputMask = false;
/** @inheritdoc */
this.inputMaskRegex = '';
this.onTextChange = (event) => {
event.stopPropagation();
this.textChange.emit(event.detail);
};
this.onResetClick = (event) => {
event.stopPropagation();
this.clickResetButton.emit(event.detail);
this.textChange.emit();
};
}
/** Focus input */
async focusInput() {
this.inputRef.focusInput();
}
render() {
const shouldShowResetIcon = !isEmpty(this.value) && !this.inputDisabled;
return (h(Host, { key: 'b3115390fc6d21369673cb6c92ba90b7a710173a' }, h("kv-text-field", { key: 'eafc11f469c34dd631ff974604c233b39b8a5906', ref: el => (this.inputRef = el), actionIcon: shouldShowResetIcon ? EIconName.Close : undefined, onTextChange: this.onTextChange, onRightActionClick: this.onResetClick, type: this.type, label: this.label, examples: this.examples, icon: EIconName.Search, inputName: this.inputName, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, max: this.max, min: this.min, step: this.step, size: this.size, inputDisabled: this.inputDisabled, inputRequired: this.inputRequired, loading: this.loading, state: this.state, inputReadonly: this.inputReadonly, helpText: this.helpText, forcedFocus: this.forcedFocus, tooltipConfig: this.tooltipConfig, value: this.value, useInputMask: this.useInputMask, inputMaskRegex: this.inputMaskRegex, fitContent: false })));
}
static get is() { return "kv-search"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["search.scss"]
};
}
static get styleUrls() {
return {
"$": ["search.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "EInputFieldType",
"resolved": "EInputFieldType.Date | EInputFieldType.DateTime | EInputFieldType.Email | EInputFieldType.Number | EInputFieldType.Password | EInputFieldType.Radio | EInputFieldType.Text",
"references": {
"EInputFieldType": {
"location": "import",
"path": "../text-field/text-field.types",
"id": "src/components/text-field/text-field.types.ts::EInputFieldType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field type"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EInputFieldType.Text"
},
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field label"
},
"getter": false,
"setter": false,
"reflect": true
},
"examples": {
"type": "unknown",
"attribute": "examples",
"mutable": false,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field example values"
},
"getter": false,
"setter": false
},
"inputName": {
"type": "string",
"attribute": "input-name",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field input name"
},
"getter": false,
"setter": false,
"reflect": true
},
"placeholder": {
"type": "string",
"attribute": "placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field place holder"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "'Search'"
},
"maxLength": {
"type": "number",
"attribute": "max-length",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field maximum number of characters required"
},
"getter": false,
"setter": false,
"reflect": true
},
"minLength": {
"type": "number",
"attribute": "min-length",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field minimum number of characters required"
},
"getter": false,
"setter": false,
"reflect": true
},
"max": {
"type": "any",
"attribute": "max",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field maximum value"
},
"getter": false,
"setter": false,
"reflect": true
},
"min": {
"type": "any",
"attribute": "min",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field minimum value"
},
"getter": false,
"setter": false,
"reflect": true
},
"step": {
"type": "any",
"attribute": "step",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field interval between legal numbers"
},
"getter": false,
"setter": false,
"reflect": true
},
"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": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets this tab item to a different styling configuration"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EComponentSize.Large"
},
"inputDisabled": {
"type": "boolean",
"attribute": "input-disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"inputRequired": {
"type": "boolean",
"attribute": "input-required",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field required"
},
"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) Text field loading state"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"state": {
"type": "string",
"attribute": "state",
"mutable": false,
"complexType": {
"original": "EValidationState",
"resolved": "EValidationState.Invalid | EValidationState.None | EValidationState.Valid",
"references": {
"EValidationState": {
"location": "import",
"path": "../text-field/text-field.types",
"id": "src/components/text-field/text-field.types.ts::EValidationState"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field state"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EValidationState.None"
},
"inputReadonly": {
"type": "boolean",
"attribute": "input-readonly",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field is readonly"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"helpText": {
"type": "string",
"attribute": "help-text",
"mutable": false,
"complexType": {
"original": "string | string[]",
"resolved": "string | string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field help text"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "[]"
},
"forcedFocus": {
"type": "boolean",
"attribute": "forced-focus",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field focus state"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"tooltipConfig": {
"type": "unknown",
"attribute": "tooltip-config",
"mutable": false,
"complexType": {
"original": "Partial<ITooltip>",
"resolved": "{ text?: string; position?: ETooltipPosition; allowedPositions?: ETooltipPosition[]; options?: Partial<{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }>; disabled?: boolean; contentElement?: HTMLElement; truncate?: boolean; delay?: number; hideDelay?: number; withArrow?: boolean; customStyle?: { [key: string]: string; }; customClass?: CustomCssClass; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ITooltip": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::ITooltip"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field tooltip configuration"
},
"getter": false,
"setter": false
},
"value": {
"type": "any",
"attribute": "value",
"mutable": false,
"complexType": {
"original": "string | number | null",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Text field value"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
},
"useInputMask": {
"type": "boolean",
"attribute": "use-input-mask",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Use a input mask when the text field type is number (default true)"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"inputMaskRegex": {
"type": "string",
"attribute": "input-mask-regex",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Input mask regex"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "''"
}
};
}
static get events() {
return [{
"method": "textChange",
"name": "textChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when a keyboard input occurred"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "textFieldBlur",
"name": "textFieldBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when text field lost focus"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "textFieldFocus",
"name": "textFieldFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when text field gained focus"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "clickResetButton",
"name": "clickResetButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the reset button is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "rightActionClick",
"name": "rightActionClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when the right icon is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "fieldClick",
"name": "fieldClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emmited when there's a click on this element"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get methods() {
return {
"focusInput": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Focus input",
"tags": []
}
}
};
}
}