v4web-components/dist/stencil-library/p-86a488c2.entry.js

Stencil Component Starter

import{r as e,h as a,c as s,g as l}from"./p-c2aeec95.js";const t=":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 i=class{constructor(a){e(this,a);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 a("div",{class:`${this.variant} ${this.state} ${this.size} badge`},a("span",{class:"label"},this.label),this.variant==="dot"?a("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}):a("lab-ds-icon-not-selectable",{class:"holder",size:`small`,icon:this.states[this.state].icon,color:this.states[this.state].color}))}};i.style=t;const o=".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 r=class{constructor(a){e(this,a);this.handleCounterValue=s(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 a("div",{class:"v4-quantify"},a("button",{disabled:this.value<1,onClick:()=>this.handleDecreaseValueEmit()},a("lab-ds-icon-not-selectable",{icon:"remove",size:"small"})),a("div",{class:"v4-quantify-counter"},a("span",{class:"v4-quantify-option-counter"},this.value),this.maxValue&&a("span",{class:"v4-quantify-option-divides"},"/"),this.maxValue&&a("span",{class:"v4-quantify-option-max-item"},this.maxValue)),a("button",{disabled:this.value>=this.maxValue,onClick:()=>this.handleIncreaseValueEmit()},a("lab-ds-icon-not-selectable",{icon:"add",size:"small"})))}};r.style=o;const c=".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 d=class{constructor(a){e(this,a);this.finalLineNextPage=s(this,"finalLineNextPage",7);this.changeInputOptions=s(this,"changeInputOptions",7);this.changeInputSearch=s(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(e){if(this.type==="radioButton"){this.optionsState.forEach((a=>{if(a.key===e){a.isChecked=true}else{a.isChecked=false}}));this.isOptionsVisible=false}if(this.type==="checkbox"){this.optionsState=this.optionsState.map((a=>Object.assign(Object.assign({},a),{isChecked:a.key===e?!a.isChecked:a.isChecked})))}this.optionsSelected=this.optionsState.filter((e=>e.isChecked));this.optionsFiltered=this.optionsState;this.value="";this.changeInputOptions.emit(this.optionsSelected)}handleRemoveOption(e){this.optionsSelected=this.optionsSelected.filter((a=>a.key!==e));this.optionsState.forEach((a=>{if(a.key===e){a.isChecked=false}}));this.optionsFiltered=this.optionsState;this.changeInputOptions.emit(this.optionsSelected)}handleSearch({detail:e}){if(this.searcheableWithQuery){this.changeInputSearch.emit(e);return}this.optionsFiltered=this.optionsState.filter((a=>a.label.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").includes(e.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,""))))}watchOptions(){this.optionsState=this.options;this.optionsFiltered=this.options;this.optionsSelected=this.options.filter((e=>e.isChecked))}checkForClickOutside(e){if(this.el.contains(e.target)){return}this.isOptionsVisible=false}componentDidUpdate(){const e=this.el.shadowRoot.querySelector(".hints");if(e){e.addEventListener("scroll",(()=>{if(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<1){this.finalLineNextPage.emit(true)}}),{passive:true})}}render(){var e,s,l,t,i,o;const r=this.isOptionsVisible?"expand_less":"expand_more";const c=this.el.shadowRoot.querySelector(".chip-selected");let d=false;let n;let b;if(c){c.addEventListener("mousedown",(e=>{d=true;c.classList.add("active");n=e.pageX-c.offsetLeft;b=c.scrollLeft}));c.addEventListener("mouseleave",(()=>{d=false;c.classList.remove("active")}));c.addEventListener("mouseup",(()=>{d=false;c.classList.remove("active")}));c.addEventListener("mousemove",(e=>{if(!d)return;e.preventDefault();const a=e.pageX-c.offsetLeft;const s=(a-n)*3;c.scrollLeft=b-s}))}return a("div",{class:`v4-input ${this.state} ${this.size} ${this.disabled&&"disabled"} ${((e=this.optionsSelected)===null||e===void 0?void 0:e.length)>0&&this.type==="checkbox"?"chip-select":""}`},a("div",{class:"input-title-container"},this.titleInput&&a("span",{class:"title-text"},this.titleInput),a("div",{onClick:e=>{e.stopPropagation();this.handleSelect()},class:`input-icon ${this.isOptionsVisible?"active":""} `},a("span",{class:"input-field"},a("div",{class:"chip-selected"},((s=this.optionsSelected)===null||s===void 0?void 0:s.length)>0&&this.type==="checkbox"?this.optionsSelected.map((e=>a("lab-ds-chip",{size:"small",class:"chip",avatar:this.avatar,nameAvatar:e.nameAvatar,imageSRCAvatar:e.imgSRCAvatar,label:e.label,onHandleCloseChip:()=>this.handleRemoveOption(e.key)}))):(l=this.optionsSelected)===null||l===void 0?void 0:l.map((e=>e.label)),!(((t=this.optionsSelected)===null||t===void 0?void 0:t.length)>0)&&a("span",{class:"select-placeholder"},this.label))),this.state==="error"&&a("lab-ds-icon-not-selectable",{class:"icon error",size:"small",icon:"error"}),a("lab-ds-icon-not-selectable",{class:`icon right`,size:"small",icon:r}))),this.isOptionsVisible&&a("div",{class:"options"},a("div",{class:"hints"},a("div",{class:"hints-container"},this.isSearchable&&a("lab-ds-search-bar",{class:"search-bar",value:this.value,onChangeInput:e=>{this.handleSearch(e)},label:this.placeholderSearch}),((i=this.optionsFiltered)===null||i===void 0?void 0:i.length)>0&&((o=this.optionsFiltered)===null||o===void 0?void 0:o.map((e=>a("div",{key:e.key,class:"option"},this.type==="checkbox"?a("lab-ds-checkbox",{checked:e.isChecked,onHandleCheckbox:()=>this.handleSelectOption(e.key),avatar:this.avatar,label:e.label}):a("lab-ds-radio-button",{checked:e.isChecked,onClick:()=>this.handleSelectOption(e.key),avatar:this.avatar,label:e.label}))))),this.loading&&a("lab-ds-skeleton",null)))),this.helperText&&a("span",{class:"helper-text"},this.helperText))}get el(){return l(this)}static get watchers(){return{options:["watchOptions"]}}};d.style=c;export{i as lab_ds_badge,r as lab_ds_quantify,d as lab_ds_select};
//# sourceMappingURL=p-86a488c2.entry.js.map