radh-ui/dist/radh-ui/p-4957fa1f.entry.js

Stencil Component Starter

import{r as t,c as e,h as r}from"./p-1a9f3501.js";const n={validate:()=>!0};function s(t,e){let r;return r={validate:n=>{const s=t.validate(n),a=e.validate(n);return s?a||(r.errorMessage=e.errorMessage):r.errorMessage=t.errorMessage,s&&a}},r}const a={validate:t=>!!["banana","apple","cherry"].find(e=>e===t),errorMessage:"You must enter a valid fruit name"};var i;function o(t){return(t||[]).map(t=>"string"==typeof t?u(t,null):t&&t.name?u((t=t).name,t.options):t).reduce(s,n)}function u(t,e){switch(e=e||{},t){case i.fruit:return a;case i.length:return s=e.max,{validate:t=>(t=t||"",r&&s?r<=t.length&&t.length<=s:r?r<=t.length:!s||t.length<=s),errorMessage:(r=e.min)&&s?`You must enter between ${r} and ${s} characters`:r?`You must enter at least ${r} characters`:s?`You must enter less than ${s} characters`:""};default:return n}var r,s}!function(t){t.fruit="fruit",t.length="length"}(i||(i={}));class l{constructor(r){t(this,r),this._validator=n,this.changed=e(this,"changed",7)}componentWillLoad(){this._validator=o(this.validator)}componentWillUpdate(){this._validator=o(this.validator)}handleChange(t){this.value=t.target?t.target.value:null,this.changed.emit(this.value)}render(){return console.log(this._validator,this._validator.validate(this.value)),r("div",null,r("div",{class:"input-container"},r("input",{value:this.value,onInput:t=>this.handleChange(t)})),this._validator.validate(this.value)?null:r("span",{class:"validation-error"},this._validator.errorMessage))}}l.style=".input-container{padding:0.5rem;border-radius:1rem;border:1px solid grey}input{outline:none !important;border:none;width:100%;font-size:0.8rem}.validation-error{font-size:0.8rem;color:red}";export{l as radh_input}