@codeperate/opgl-ui-library/dist/opgl-ui-library/p-03ac22b6.entry.js

Opengamela UI Library

import{r as t,f as o,h as i,H as a,g as r}from"./p-68d67f25.js";const n=class{constructor(o){t(this,o),this.validate=!1,this._props={}}async onInputHandler(t){this.validate=!0,this.props.onInput&&this.props.onInput(t),o(this.rootEl)}async onInvalidHandler(t){this.validate=!0,this.props.onInvalid&&this.props.onInvalid(t),o(this.rootEl)}async refHandler(t){this.inputEl=t,this.props.ref&&this.props.ref(t)}componentWillLoad(){this._props=Object.assign({},this.props)}togglePassword(){"password"==this._props.type?this._props=Object.assign(Object.assign({},this._props),{type:"text"}):"text"==this._props.type&&(this._props=Object.assign(Object.assign({},this._props),{type:"password"}))}propChangeHandler(){this._props=Object.assign({},this.props)}render(){var t,o,r;return i(a,{class:"relative block"},i("input",Object.assign({},this._props,{onInput:t=>this.onInputHandler(t),onInvalid:t=>this.onInvalidHandler(t),ref:t=>this.refHandler(t),class:this.validate?"validate":""})),"password"==(null===(t=this.props)||void 0===t?void 0:t.type)?i("button",{type:"button",onClick:()=>this.togglePassword()}):null,i("span",null),this.validate&&(null===(o=this.inputEl)||void 0===o?void 0:o.validationMessage)?i("small",null,null===(r=this.inputEl)||void 0===r?void 0:r.validationMessage):null)}get rootEl(){return r(this)}static get watchers(){return{props:["propChangeHandler"]}}};n.style='@charset "UTF-8";opgl-input input,opgl-input button{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}opgl-input input::placeholder{opacity:1;color:#a1a1aa}opgl-input input::webkit-input-placeholder{opacity:1;color:#a1a1aa}opgl-input input::-moz-placeholder{opacity:1;color:#a1a1aa}opgl-input input:-ms-input-placeholder{opacity:1;color:#a1a1aa}opgl-input input::-ms-input-placeholder{opacity:1;color:#a1a1aa}opgl-input :host{display:-ms-grid;display:grid;position:relative;grid-gap:0.5rem;gap:0.5rem;grid-template-columns:repeat(1, minmax(0, 1fr))}opgl-input input.validate~button{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity));--tw-bg-opacity:0;cursor:pointer;outline:2px solid transparent;outline-offset:2px;position:absolute;top:0.75rem;right:2.5rem;z-index:10}opgl-input input[type=password].validate~button::before{font-family:"Font Awesome 5 Pro";content:""}opgl-input input.validate~button::before{font-family:"Font Awesome 5 Pro";content:""}opgl-input input.validate:valid~button{--tw-text-opacity:1;color:rgba(5, 150, 105, var(--tw-text-opacity))}opgl-input input.validate:invalid~button{--tw-text-opacity:1;color:rgba(248, 113, 113, var(--tw-text-opacity))}opgl-input input{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity));--tw-bg-opacity:0.8;border-radius:0.5rem;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0.75rem;padding-right:2.5rem;--tw-shadow-color:0, 0, 0;--tw-shadow:0 1px 3px 0 rgba(var(--tw-shadow-color), 0.1), 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.06);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-ring-opacity:0.8;width:100%}opgl-input input.validate:invalid{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(248, 113, 113, var(--tw-ring-opacity))}opgl-input input.validate:valid:required{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(5, 150, 105, var(--tw-ring-opacity))}opgl-input input:focus{outline:2px solid transparent !important;outline-offset:2px !important;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important}opgl-input input[type=password]{padding-right:4.5rem}opgl-input span{position:absolute;top:0.75rem;right:0.75rem;z-index:10}opgl-input input.validate:required:valid~span::before{font-family:"Font Awesome 5 Pro";--tw-text-opacity:1;color:rgba(5, 150, 105, var(--tw-text-opacity));content:""}opgl-input input.validate:invalid~span::before{font-family:"Font Awesome 5 Pro";--tw-text-opacity:1;color:rgba(248, 113, 113, var(--tw-text-opacity));content:""}opgl-input input.validate:invalid~small{--tw-text-opacity:1;color:rgba(248, 113, 113, var(--tw-text-opacity))}opgl-input input[type=password]::-ms-reveal,opgl-input input[type=password]::-ms-clear{display:none}';export{n as opgl_input}