import{r as i,c as e,h as r}from"./p-e81f56ed.js";const t=":host{display:block}div{position:relative}input{--padding:calc((var(--klevu-size-m) * 2 - var(--klevu-body-s-size)) / 2);display:block;width:100%;box-sizing:border-box;appearance:none;border:0;height:calc(var(--klevu-size-m) * 2);font-size:var(--klevu-body-m-size);padding:var(--padding)}input:focus{outline:0}input:disabled{opacity:var(--klevu-opacity-disabled);cursor:not-allowed}input.default{border:1px solid var(--klevu-color-neutral-5);margin:0 1px;border-radius:var(--klevu-border-radius-s)}input.default:focus{border-color:var(--klevu-color-primary);margin:0;border-width:2px}input.default.error{border-color:var(--klevu-color-primary);margin:0;border-width:2px}input.pill{border:1px solid var(--klevu-color-neutral-2);margin:1px;background-color:var(--klevu-color-neutral-2);border-radius:1000px}input.hasicon{padding-left:var(--klevu-spacing-07)}span.icon{position:absolute;top:50%;left:var(--klevu-spacing-04);transform:translateY(-50%)}input.hasclear{padding-right:var(--klevu-spacing-07)}span.clear{position:absolute;top:50%;right:var(--klevu-spacing-04);transform:translateY(-50%);cursor:pointer}";const a=class{constructor(r){i(this,r);this.klevuTextChanged=e(this,"klevuTextChanged",7);this.klevuTextFocused=e(this,"klevuTextFocused",7);this.klevuTextEnterPressed=e(this,"klevuTextEnterPressed",7);this.value=undefined;this.disabled=false;this.placeholder=undefined;this.error=undefined;this.variant="default";this.icon=undefined;this.clearButton=undefined}render(){var i;return r("div",null,r("input",{type:"text",ref:i=>this.textInput=i,value:this.value,disabled:this.disabled,placeholder:this.placeholder,class:{error:Boolean(this.error),pill:this.variant==="pill",default:this.variant==="default",hasicon:Boolean(this.icon),hasclear:Boolean(this.clearButton)},onFocus:()=>this.klevuTextFocused.emit(),onKeyPress:i=>{if(i.key==="Enter"){this.klevuTextEnterPressed.emit()}},onInput:i=>{const e=i.target;this.value=e.value;this.klevuTextChanged.emit(e.value)}}),this.icon&&r("span",{class:"icon",part:"material-icon"},this.icon),this.clearButton&&((i=this.value)===null||i===void 0?void 0:i.length)>0&&r("span",{class:"clear",part:"material-icon",onClick:()=>{this.value="";this.klevuTextChanged.emit("")}},"clear"))}};a.style=t;export{a as klevu_textfield};
//# sourceMappingURL=p-f8caede6.entry.js.map