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

Stencil Component Starter

import{r as e,c as a,h as s}from"./p-c2aeec95.js";const l="input{border:none;outline:none;padding:0;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-default)}.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%}.currency-field{color:var(--lab-ds-semantic-color-fg-enabled);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular)}.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)}";const t=class{constructor(s){e(this,s);this.changeInput=a(this,"changeInput",7);this.value=undefined;this.valueState=this.value;this.titleInput="";this.label="";this.labelIcon="";this.type="text";this.mask=undefined;this.maxLength=undefined;this.disabled=false;this.helperText="";this.state="default"}handleChange(e){let a=e.target.value;const s=e=>e.replace(/[^0-9]/g,"");const l=e=>new Intl.NumberFormat("pt-BR",{minimumFractionDigits:2}).format(parseFloat(e.replace(/[^0-9]/g,""))/100||0);if(this.mask){const e={CPF:s(a).replace(/(\d{3})(\d{3})(\d{3})(\d{2})/,"$1.$2.$3-$4"),phone:s(a).replace(/^(\d{2})(\d{5})(\d{4})/,"($1) $2-$3"),CEP:s(a).replace(/(\d{5})(\d{3})/,"$1-$2"),CNPJ:s(a).replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/,"$1.$2.$3/$4-$5"),credit_card:s(a).replace(/(\d{4})(\d{4})(\d{4})(\d{4})/,"$1 $2 $3 $4"),hour:s(a).replace(/(\d{2})(\d{2})/,"$1:$2"),currency:l(a)};this.valueState=e[this.mask];a=e[this.mask]}this.changeInput.emit(a)}watchHandler(e){this.valueState=e}render(){const e={error:{icon:"error"},success:{icon:"check_circle"},default:{icon:""}};return s("div",{class:`v4-input ${this.state} ${this.disabled&&"disabled"}`},s("span",{class:"title-text"},this.titleInput),s("div",{class:"input-helper"},s("div",{class:"input-icon"},this.labelIcon&&s("lab-ds-icon-not-selectable",{class:"icon left",size:"small",icon:this.labelIcon}),this.mask==="currency"&&s("span",{class:"currency-field"},"R$"),s("input",{maxLength:this.maxLength,disabled:this.disabled,placeholder:this.label,class:"input-field",type:!this.mask?this.type:"text",value:this.valueState,onInput:e=>this.handleChange(e)}),s("lab-ds-icon-not-selectable",{class:"icon right",size:"small",icon:e[this.state].icon})),this.helperText&&s("span",{class:"helper-text"},e[this.state].icon&&s("lab-ds-icon-not-selectable",{class:"icon",size:"x-small",icon:e[this.state].icon}),this.helperText)))}static get watchers(){return{value:["watchHandler"]}}};t.style=l;export{t as lab_ds_text_field};
//# sourceMappingURL=p-fbcdd825.entry.js.map