v4web-components
Version:
Stencil Component Starter
165 lines (164 loc) • 4.65 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsSearchBar {
constructor() {
this.value = undefined;
this.hints = undefined;
this.isHintVisible = false;
this.valueState = this.value;
this.label = '';
this.disabled = false;
}
handleChange(event) {
if (event === '') {
this.changeInput.emit('');
this.value = '';
this.valueState = '';
}
else {
this.changeInput.emit(event.value);
this.valueState = event.value;
}
}
checkForClickOutside(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.isHintVisible = false;
}
render() {
var _a, _b, _c;
return (h("div", { class: `v4-input ${this.disabled && 'disabled'}` }, h("div", { onFocusin: () => (this.isHintVisible = true), class: "input-icon" }, h("lab-ds-icon-not-selectable", { class: "icon left", size: "small", icon: "search" }), h("input", { disabled: this.disabled, placeholder: this.label, class: "input-field", type: "text", value: this.value, onInput: event => this.handleChange(event.target) }), ((_a = this.valueState) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("lab-ds-icon-selectable", { onClick: () => {
this.handleChange('');
}, class: `icon right`, size: "small", icon: "close" }))), ((_b = this.hints) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.isHintVisible && (h("div", { class: "options" }, h("div", { class: "hints" }, (_c = this.hints) === null || _c === void 0 ? void 0 : _c.map((hint, index) => {
if (index > 4)
return null;
return (h("div", { onClick: () => {
this.handleChange({ value: hint.name });
this.isHintVisible = false;
}, class: 'hint-container' }, h("lab-ds-icon-not-selectable", { class: 'icon', size: "small", icon: "history" }), hint.name, ' '));
}))))));
}
static get is() { return "lab-ds-search-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-search-bar.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-search-bar.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"hints": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<{ name: string }>",
"resolved": "{ name: string; }[]",
"references": {
"Array": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"isHintVisible": {},
"valueState": {}
};
}
static get events() {
return [{
"method": "changeInput",
"name": "changeInput",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "click",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=lab-ds-search-bar.js.map