v4web-components
Version:
Stencil Component Starter
202 lines (192 loc) • 18.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-8b55ea0e.js');
const labDsBadgeCss = ":host{display:block}.badge{display:inline-flex;cursor:default;align-items:center;padding-right:var(--lab-ds-semantic-selectable-space-padding-s);padding-left:var(--lab-ds-semantic-selectable-space-padding-s);gap:var(--lab-ds-semantic-selectable-space-gap-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-style:solid}.badge .label{display:flex;align-items:center;color:var(--lab-ds-semantic-color-fg-default)}.badge.small{padding-top:var(--lab-ds-semantic-selectable-space-padding-xxs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xxs);font:var(--lab-ds-semantic-typography-body-none-decoration-p4-bold)}.badge.medium{padding-top:var(--lab-ds-semantic-selectable-space-padding-xs);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.badge.success{border-color:var(--lab-ds-semantic-placeholder-color-border-dark-success);color:var(--lab-ds-semantic-placeholder-color-bg-dark-success)}.badge.error{border-color:var(--lab-ds-semantic-placeholder-color-border-dark-error);color:var(--lab-ds-semantic-placeholder-color-bg-dark-error)}.badge.warning{border-color:var(--lab-ds-semantic-placeholder-color-border-dark-warning);color:var(--lab-ds-semantic-placeholder-color-bg-dark-warning)}.badge.ghost{border-color:transparent}.badge.dot{border-color:transparent}.badge.dot .success{background-color:var(--lab-ds-semantic-placeholder-color-bg-dark-success)}.badge.dot .error{background-color:var(--lab-ds-semantic-placeholder-color-bg-dark-error)}.badge.dot .warning{background-color:var(--lab-ds-semantic-placeholder-color-bg-dark-warning)}.badge.dot .holder{border-radius:10rem}.badge.dot .label{display:none}";
const LabDsBadge = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.states = {
success: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-success)', icon: 'check_circle' },
error: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-error)', icon: 'error' },
warning: { color: 'var(--lab-ds-semantic-placeholder-color-bg-dark-warning)', icon: 'warning' },
};
this.label = 'badge';
this.variant = 'outlined';
this.state = 'success';
this.size = 'medium';
}
render() {
return (index.h("div", { class: `${this.variant} ${this.state} ${this.size} badge` }, index.h("span", { class: "label" }, this.label), this.variant === 'dot' ? (index.h("lab-ds-icon-not-selectable", { class: `holder ${this.state}`, size: `${this.size === 'medium' ? 'x-small' : 'xx-small'}`, icon: "circle", color: this.states[this.state].color })) : (index.h("lab-ds-icon-not-selectable", { class: "holder", size: `small`, icon: this.states[this.state].icon, color: this.states[this.state].color }))));
}
};
LabDsBadge.style = labDsBadgeCss;
const labDsQuantifyCss = ".v4-quantify{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-quantify button{padding:var(--lab-ds-semantic-selectable-space-padding-sm);cursor:pointer;color:var(--lab-ds-semantic-color-fg-default);outline:none;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default)}.v4-quantify-counter{display:flex;text-align:center;justify-content:center;padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-s);gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);color:var(--lab-ds-semantic-color-fg-default);min-width:5.313rem;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default)}.v4-quantify-option-divides{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-quantify-option-max-item{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-quantify button:hover{background-color:var(--lab-ds-semantic-selectable-color-bg-hover);border-color:var(--lab-ds-semantic-selectable-color-border-default)}.v4-quantify button:active{background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-selectable-color-primary-press);outline:none}.v4-quantify button:focus{outline-style:solid;outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-width:var(--lab-ds-semantic-selectable-border-width-s);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.v4-quantify button:disabled{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-color-fg-disabled);cursor:not-allowed}";
const LabDsQuantify = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.handleCounterValue = index.createEvent(this, "handleCounterValue", 7);
this.maxValue = undefined;
this.value = 0;
}
handleIncreaseValueEmit() {
this.handleCounterValue.emit(this.value + 1);
}
handleDecreaseValueEmit() {
this.handleCounterValue.emit(this.value - 1);
}
render() {
return (index.h("div", { class: "v4-quantify" }, index.h("button", { disabled: this.value < 1, onClick: () => this.handleDecreaseValueEmit() }, index.h("lab-ds-icon-not-selectable", { icon: "remove", size: "small" })), index.h("div", { class: "v4-quantify-counter" }, index.h("span", { class: "v4-quantify-option-counter" }, this.value), this.maxValue && index.h("span", { class: "v4-quantify-option-divides" }, "/"), this.maxValue && index.h("span", { class: "v4-quantify-option-max-item" }, this.maxValue)), index.h("button", { disabled: this.value >= this.maxValue, onClick: () => this.handleIncreaseValueEmit() }, index.h("lab-ds-icon-not-selectable", { icon: "add", size: "small" }))));
}
};
LabDsQuantify.style = labDsQuantifyCss;
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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.finalLineNextPage = index.createEvent(this, "finalLineNextPage", 7);
this.changeInputOptions = index.createEvent(this, "changeInputOptions", 7);
this.changeInputSearch = index.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 (index.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' : ''}` }, index.h("div", { class: "input-title-container" }, this.titleInput && index.h("span", { class: "title-text" }, this.titleInput), index.h("div", { onClick: event => {
event.stopPropagation();
this.handleSelect();
}, class: `input-icon ${this.isOptionsVisible ? 'active' : ''} ` }, index.h("span", { class: "input-field" }, index.h("div", { class: "chip-selected" }, ((_b = this.optionsSelected) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.type === 'checkbox'
? this.optionsSelected.map(option => (index.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) && index.h("span", { class: "select-placeholder" }, this.label))), this.state === 'error' && index.h("lab-ds-icon-not-selectable", { class: "icon error", size: "small", icon: "error" }), index.h("lab-ds-icon-not-selectable", { class: `icon right`, size: "small", icon: isOptionsVisibleIcon }))), this.isOptionsVisible && (index.h("div", { class: "options" }, index.h("div", { class: "hints" }, index.h("div", { class: "hints-container" }, this.isSearchable && (index.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 (index.h("div", { key: hint.key, class: "option" }, this.type === 'checkbox' ? (index.h("lab-ds-checkbox", { checked: hint.isChecked, onHandleCheckbox: () => this.handleSelectOption(hint.key), avatar: this.avatar, label: hint.label })) : (index.h("lab-ds-radio-button", { checked: hint.isChecked, onClick: () => this.handleSelectOption(hint.key), avatar: this.avatar, label: hint.label }))));
})), this.loading && index.h("lab-ds-skeleton", null))))), this.helperText && index.h("span", { class: "helper-text" }, this.helperText)));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"options": ["watchOptions"]
}; }
};
LabDsSelect.style = labDsSelectCss;
exports.lab_ds_badge = LabDsBadge;
exports.lab_ds_quantify = LabDsQuantify;
exports.lab_ds_select = LabDsSelect;
//# sourceMappingURL=lab-ds-badge_3.cjs.entry.js.map