v4web-components/dist/stencil-library/p-cea5cf54.entry.js

Stencil Component Starter

import{r as e,c as s,h as a}from"./p-c2aeec95.js";const i="input{border:none;outline:none;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default);width:100%}.v4-input{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s);color:var(--lab-ds-semantic-color-fg-default)}.v4-input .title-text{text-align:left;font:var(--lab-ds-semantic-typography-heading-h7)}.v4-input .input-helper{display:flex;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.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)}.input-field{width:100%;min-width:30%}.chips{display:flex;width:100%;gap:var(--lab-ds-semantic-selectable-space-gap-xs)}.chip{width:100%}.chip-group{margin-top:-0.5rem;margin-bottom:-0.5rem;max-width:70%;overflow-x:auto;overflow-y:hidden}.chip-group::-webkit-scrollbar{display:none}.input-icon{display:flex;align-items:center;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-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);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)}.input-icon .input-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.input-icon .icon.right{display:none}.input-icon:focus-within{box-shadow:var(--lab-ds-semantic-selectable-shadow-m);border-color:var(--lab-ds-semantic-selectable-color-primary-press)}.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.error .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.error .input-icon .icon.right{display:flex}.v4-input.error .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.error .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-error)}.v4-input.success .input-icon{border-color:var(--lab-ds-semantic-selectable-color-border-dark-success);color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-icon .icon.right{display:flex}.v4-input.success .input-field{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .icon{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.v4-input.success .input-helper{color:var(--lab-ds-semantic-selectable-color-bg-dark-success)}.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);box-shadow:none}.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 .input-helper{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-input.disabled .chip-group{display:none}";const l=class{constructor(a){e(this,a);this.changeInput=s(this,"changeInput",7);this.changeInputOption=s(this,"changeInputOption",7);this.optionsSelected=undefined;this.value=undefined;this.titleInput="";this.label="";this.avatar=true;this.labelIcon="";this.disabled=false;this.helperText="";this.state="default"}handleChange(e){this.changeInput.emit(e.target.value);this.value=e.target.value}handleRemoveOption(e){this.optionsSelected=this.optionsSelected.filter((s=>s.label!==e));this.changeInputOption.emit(this.optionsSelected)}handleSubmitInput(e){var s;e.preventDefault();const a={label:this.value,key:"string"};((s=this.optionsSelected)===null||s===void 0?void 0:s.length)>0?this.optionsSelected=[...this.optionsSelected,a]:this.optionsSelected=[a];this.changeInput.emit("");this.changeInputOption.emit(this.optionsSelected);this.value=""}render(){var e,s;const i={error:{icon:"error"},success:{icon:"check_circle"},default:{icon:""}};const l=document.querySelector("lab-ds-text-field-with-tag").shadowRoot.querySelector(".chip-group");let t=false;let o;let c;if(l){l.addEventListener("mousedown",(e=>{t=true;l.classList.add("active");o=e.pageX-l.offsetLeft;c=l.scrollLeft}));l.addEventListener("mouseleave",(()=>{t=false;l.classList.remove("active")}));l.addEventListener("mouseup",(()=>{t=false;l.classList.remove("active")}));l.addEventListener("mousemove",(e=>{if(!t)return;e.preventDefault();const s=e.pageX-l.offsetLeft;const a=(s-o)*3;l.scrollLeft=c-a}))}return a("div",{class:`v4-input ${this.state} ${this.disabled&&"disabled"}`},a("span",{class:"title-text"},this.titleInput),a("div",{class:"input-helper"},a("div",{class:"input-icon"},this.labelIcon&&a("lab-ds-icon-not-selectable",{class:"icon left",size:"small",icon:this.labelIcon}),((e=this.optionsSelected)===null||e===void 0?void 0:e.length)>0&&a("div",{class:"chip-group"},a("div",{class:"chips"},(s=this.optionsSelected)===null||s===void 0?void 0:s.map((e=>a("lab-ds-chip",{size:"small",class:"chip",avatar:this.avatar,label:e.label,nameAvatar:e.nameAvatar,imageSRCAvatar:e.imgSRCAvatar,onHandleCloseChip:()=>this.handleRemoveOption(e.label)}))))),a("form",{class:"input-field",onSubmit:e=>{this.handleSubmitInput(e)}},a("input",{disabled:this.disabled,placeholder:this.label,type:"text",value:this.value,onInput:e=>{this.handleChange(e)}})),a("lab-ds-icon-not-selectable",{class:"icon right",size:"small",icon:i[this.state].icon})),this.helperText&&a("span",{class:"helper-text"},i[this.state].icon&&a("lab-ds-icon-not-selectable",{class:"icon",size:"x-small",icon:i[this.state].icon}),this.helperText)))}};l.style=i;export{l as lab_ds_text_field_with_tag};
//# sourceMappingURL=p-cea5cf54.entry.js.map