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

Stencil Component Starter

import{r as e,c as a,h as s}from"./p-c2aeec95.js";const l="textarea{border:none;outline:none;background-color:rgba(0, 0, 0, 0);color:var(--lab-ds-semantic-color-fg-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)}.v4-input{display:inline-block;max-width:100%;flex-direction:column;gap:var(--lab-ds-semantic-selectable-space-gap-s);color:var(--lab-ds-semantic-color-fg-default)}.v4-input .title-count{display:flex;justify-content:space-between;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-icon{display:flex;align-items:start;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)}.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: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;margin-left:-1.5rem;padding-right:0.5rem;padding-top:0.75rem}.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;margin-left:-1.5rem;padding-right:0.5rem;padding-top:0.75rem}.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-count{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 r=class{constructor(s){e(this,s);this.changeInput=a(this,"changeInput",7);this.value=undefined;this.valueState=this.value;this.maxLength=100;this.minLength=0;this.rows=5;this.cols=30;this.titleInput="";this.label="";this.disabled=false;this.helperText="";this.state="default"}handleChange(e){this.changeInput.emit(e.target.value);this.valueState=e.target.value}render(){var e;const a={error:{icon:"error"},success:{icon:"check_circle"},default:{icon:""}};return s("div",{class:`v4-input ${this.state} ${this.disabled&&"disabled"}`},s("div",{class:"title-count"},s("span",{class:"title-text"},this.titleInput),s("span",{class:"title-counter"},this.valueState?(e=this.valueState)===null||e===void 0?void 0:e.length:"0","/",this.maxLength)),s("div",{class:"input-helper"},s("div",{class:"input-icon"},s("textarea",{rows:this.rows,cols:this.cols,disabled:this.disabled,placeholder:this.label,class:"input-field",maxLength:this.maxLength,minLength:this.minLength,value:this.value,onInput:e=>this.handleChange(e)}),a[this.state].icon&&s("lab-ds-icon-not-selectable",{class:"icon right",size:"small",icon:a[this.state].icon})),this.helperText&&s("span",{class:"helper-text"},a[this.state].icon&&s("lab-ds-icon-not-selectable",{class:"icon",size:"x-small",icon:a[this.state].icon}),this.helperText)))}};r.style=l;export{r as lab_ds_text_area};
//# sourceMappingURL=p-f4b1d8a2.entry.js.map