v4web-components
Version:
Stencil Component Starter
492 lines (491 loc) • 15.2 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsSelect {
constructor() {
this.options = undefined;
this.optionsSelected = undefined;
this.optionsState = this.options;
this.optionsFiltered = this.optionsState;
this.isOptionsVisible = false;
this.loading = false;
this.type = 'checkbox';
this.avatar = true;
this.value = undefined;
this.titleInput = undefined;
this.label = '';
this.placeholderSearch = 'Digite sua busca';
this.searcheableWithQuery = false;
this.isSearchable = true;
this.disabled = false;
this.helperText = undefined;
this.state = 'default';
this.size = 'small';
}
handleSelect() {
if (this.disabled)
return;
this.isOptionsVisible = !this.isOptionsVisible;
}
handleSelectOption(event) {
if (this.type === 'radioButton') {
this.optionsState.forEach(option => {
if (option.key === event) {
option.isChecked = true;
}
else {
option.isChecked = false;
}
});
this.isOptionsVisible = false;
}
if (this.type === 'checkbox') {
this.optionsState = this.optionsState.map(option => (Object.assign(Object.assign({}, option), { isChecked: option.key === event ? !option.isChecked : option.isChecked })));
}
this.optionsSelected = this.optionsState.filter(option => option.isChecked);
this.optionsFiltered = this.optionsState;
this.value = '';
this.changeInputOptions.emit(this.optionsSelected);
}
handleRemoveOption(event) {
this.optionsSelected = this.optionsSelected.filter(option => option.key !== event);
this.optionsState.forEach(option => {
if (option.key === event) {
option.isChecked = false;
}
});
this.optionsFiltered = this.optionsState;
this.changeInputOptions.emit(this.optionsSelected);
}
handleSearch({ detail }) {
if (this.searcheableWithQuery) {
this.changeInputSearch.emit(detail);
return;
}
this.optionsFiltered = this.optionsState.filter(option => option.label
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.includes(detail
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')));
}
watchOptions() {
this.optionsState = this.options;
this.optionsFiltered = this.options;
this.optionsSelected = this.options.filter(option => option.isChecked);
}
checkForClickOutside(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.isOptionsVisible = false;
}
componentDidUpdate() {
const scroll = this.el.shadowRoot.querySelector('.hints');
if (scroll) {
scroll.addEventListener('scroll', () => {
if (Math.abs(scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop) < 1) {
this.finalLineNextPage.emit(true);
}
}, {
passive: true,
});
}
}
render() {
var _a, _b, _c, _d, _e, _f;
const isOptionsVisibleIcon = this.isOptionsVisible ? 'expand_less' : 'expand_more';
const slider = this.el.shadowRoot.querySelector('.chip-selected');
let isDown = false;
let startX;
let scrollLeft;
if (slider) {
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown)
return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
});
}
return (h("div", { class: `v4-input ${this.state} ${this.size} ${this.disabled && 'disabled'} ${((_a = this.optionsSelected) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.type === 'checkbox' ? 'chip-select' : ''}` }, h("div", { class: "input-title-container" }, this.titleInput && h("span", { class: "title-text" }, this.titleInput), h("div", { onClick: event => {
event.stopPropagation();
this.handleSelect();
}, class: `input-icon ${this.isOptionsVisible ? 'active' : ''} ` }, h("span", { class: "input-field" }, h("div", { class: "chip-selected" }, ((_b = this.optionsSelected) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.type === 'checkbox'
? this.optionsSelected.map(option => (h("lab-ds-chip", { size: "small", class: "chip", avatar: this.avatar, nameAvatar: option.nameAvatar, imageSRCAvatar: option.imgSRCAvatar, label: option.label, onHandleCloseChip: () => this.handleRemoveOption(option.key) })))
: (_c = this.optionsSelected) === null || _c === void 0 ? void 0 : _c.map(option => option.label), !(((_d = this.optionsSelected) === null || _d === void 0 ? void 0 : _d.length) > 0) && h("span", { class: "select-placeholder" }, this.label))), this.state === 'error' && h("lab-ds-icon-not-selectable", { class: "icon error", size: "small", icon: "error" }), h("lab-ds-icon-not-selectable", { class: `icon right`, size: "small", icon: isOptionsVisibleIcon }))), this.isOptionsVisible && (h("div", { class: "options" }, h("div", { class: "hints" }, h("div", { class: "hints-container" }, this.isSearchable && (h("lab-ds-search-bar", { class: "search-bar", value: this.value, onChangeInput: event => {
this.handleSearch(event);
}, label: this.placeholderSearch })), ((_e = this.optionsFiltered) === null || _e === void 0 ? void 0 : _e.length) > 0 &&
((_f = this.optionsFiltered) === null || _f === void 0 ? void 0 : _f.map(hint => {
return (h("div", { key: hint.key, class: "option" }, this.type === 'checkbox' ? (h("lab-ds-checkbox", { checked: hint.isChecked, onHandleCheckbox: () => this.handleSelectOption(hint.key), avatar: this.avatar, label: hint.label })) : (h("lab-ds-radio-button", { checked: hint.isChecked, onClick: () => this.handleSelectOption(hint.key), avatar: this.avatar, label: hint.label }))));
})), this.loading && h("lab-ds-skeleton", null))))), this.helperText && h("span", { class: "helper-text" }, this.helperText)));
}
static get is() { return "lab-ds-select"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-select.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-select.css"]
};
}
static get properties() {
return {
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<IOptionsSelect>",
"resolved": "IOptionsSelect[]",
"references": {
"Array": {
"location": "global"
},
"IOptionsSelect": {
"location": "local",
"path": "/home/runner/work/v4web-component/v4web-component/packages/stencil-library/src/components/input/lab-ds-select/lab-ds-select.tsx"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"optionsSelected": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<IOptionsSelect>",
"resolved": "IOptionsSelect[]",
"references": {
"Array": {
"location": "global"
},
"IOptionsSelect": {
"location": "local",
"path": "/home/runner/work/v4web-component/v4web-component/packages/stencil-library/src/components/input/lab-ds-select/lab-ds-select.tsx"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "loading",
"reflect": false,
"defaultValue": "false"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'checkbox' | 'radioButton'",
"resolved": "\"checkbox\" | \"radioButton\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false,
"defaultValue": "'checkbox'"
},
"avatar": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "avatar",
"reflect": false,
"defaultValue": "true"
},
"titleInput": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "title-input",
"reflect": false
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"placeholderSearch": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder-search",
"reflect": false,
"defaultValue": "'Digite sua busca'"
},
"searcheableWithQuery": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "searcheable-with-query",
"reflect": false,
"defaultValue": "false"
},
"isSearchable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "is-searchable",
"reflect": false,
"defaultValue": "true"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"helperText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "helper-text",
"reflect": false
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'error' | 'default'",
"resolved": "\"default\" | \"error\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "state",
"reflect": false,
"defaultValue": "'default'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium'",
"resolved": "\"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false,
"defaultValue": "'small'"
}
};
}
static get states() {
return {
"optionsState": {},
"optionsFiltered": {},
"isOptionsVisible": {},
"value": {}
};
}
static get events() {
return [{
"method": "finalLineNextPage",
"name": "finalLineNextPage",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "changeInputOptions",
"name": "changeInputOptions",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "Array<{ label: string; isChecked: boolean; key: string }>",
"resolved": "{ label: string; isChecked: boolean; key: string; }[]",
"references": {
"Array": {
"location": "global"
}
}
}
}, {
"method": "changeInputSearch",
"name": "changeInputSearch",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "options",
"methodName": "watchOptions"
}];
}
static get listeners() {
return [{
"name": "click",
"method": "checkForClickOutside",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=lab-ds-select.js.map