v4web-components
Version:
Stencil Component Starter
236 lines (232 loc) • 14.4 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$8 } from './lab-ds-avatar2.js';
import { d as defineCustomElement$7 } from './lab-ds-checkbox2.js';
import { d as defineCustomElement$6 } from './lab-ds-chip2.js';
import { d as defineCustomElement$5 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$4 } from './lab-ds-icon-selectable2.js';
import { d as defineCustomElement$3 } from './lab-ds-radio-button2.js';
import { d as defineCustomElement$2 } from './lab-ds-search-bar2.js';
import { d as defineCustomElement$1 } from './lab-ds-skeleton2.js';
const labDsSelectCss = ".v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-xs);color:var(--lab-ds-semantic-color-fg-default);max-width:100%}.v4-input .input-title-container{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h8)}.v4-input.medium .title-text{font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .helper-text{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular)}.clean-visible{display:none}.input-field{width:95%;text-align:left}.input-field .chip-selected{display:flex;gap:var(--lab-ds-semantic-selectable-space-gap-xs);width:95%;overflow-x:auto;overflow-y:hidden}.select-placeholder{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.input-field .chip-selected::-webkit-scrollbar{display:none}.input-icon{display:flex;align-items:center;justify-content:space-between;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-xs);margin-bottom:0;cursor:pointer}.medium .input-icon{padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm)}.v4-input.chip-select.medium .input-icon{padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s)}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.options{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative;z-index:20}.hints{position:absolute;max-height:21rem;overflow-y:auto;overflow-x:hidden;width:100%;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);gap:var(--lab-ds-semantic-selectable-space-gap-s);box-sizing:border-box;background-color:var(--lab-ds-semantic-selectable-color-bg-pure);border-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-fg-default)}.hints-container{display:flex;flex-direction:column;padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-top:var(--lab-ds-semantic-selectable-space-padding-s);gap:var(--lab-ds-semantic-selectable-space-gap-s)}.hints .option{margin-top:0.5rem}.input-icon.active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.error .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-border-dark-error)}.icon.error{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.error .helper-text{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input:not(.disabled) .input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.v4-input:not(.disabled) .input-icon:hover{box-shadow:var(--lab-ds-semantic-selectable-shadow-s);border-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.input-icon:active{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.icon{display:flex}.v4-input.disabled .input-icon{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.disabled .title-text{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .input-field{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .icon{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .helper-text{color:var(--lab-ds-semantic-color-fg-disabled)}";
const LabDsSelect = /*@__PURE__*/ proxyCustomElement(class LabDsSelect extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.finalLineNextPage = createEvent(this, "finalLineNextPage", 7);
this.changeInputOptions = createEvent(this, "changeInputOptions", 7);
this.changeInputSearch = createEvent(this, "changeInputSearch", 7);
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)));
}
get el() { return this; }
static get watchers() { return {
"options": ["watchOptions"]
}; }
static get style() { return labDsSelectCss; }
}, [1, "lab-ds-select", {
"options": [16],
"optionsSelected": [16],
"loading": [4],
"type": [1],
"avatar": [4],
"titleInput": [1, "title-input"],
"label": [1],
"placeholderSearch": [1, "placeholder-search"],
"searcheableWithQuery": [4, "searcheable-with-query"],
"isSearchable": [4, "is-searchable"],
"disabled": [4],
"helperText": [1, "helper-text"],
"state": [1],
"size": [1],
"optionsState": [32],
"optionsFiltered": [32],
"isOptionsVisible": [32],
"value": [32]
}, [[8, "click", "checkForClickOutside"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-select", "lab-ds-avatar", "lab-ds-checkbox", "lab-ds-chip", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable", "lab-ds-radio-button", "lab-ds-search-bar", "lab-ds-skeleton"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-select":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsSelect);
}
break;
case "lab-ds-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "lab-ds-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "lab-ds-chip":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "lab-ds-icon-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lab-ds-radio-button":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lab-ds-search-bar":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "lab-ds-skeleton":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { LabDsSelect as L, defineCustomElement as d };
//# sourceMappingURL=lab-ds-select2.js.map