@codeperate/opgl-ui-library
Version:
Opengamela UI Library
54 lines (50 loc) • 6.24 kB
JavaScript
import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-51ebf678.js';
const opglInputCss = "@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}";
const OpglInput = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.validate = false;
this._props = {};
}
async onInputHandler(e) {
this.validate = true;
if (this.props.onInput)
this.props.onInput(e);
forceUpdate(this.rootEl);
}
async onInvalidHandler(e) {
this.validate = true;
if (this.props.onInvalid)
this.props.onInvalid(e);
forceUpdate(this.rootEl);
}
async refHandler(el) {
this.inputEl = el;
if (this.props.ref)
this.props.ref(el);
}
componentWillLoad() {
this._props = Object.assign({}, this.props);
}
togglePassword() {
if (this._props.type == 'password')
this._props = Object.assign(Object.assign({}, this._props), { type: 'text' });
else if (this._props.type == 'text')
this._props = Object.assign(Object.assign({}, this._props), { type: 'password' });
}
propChangeHandler() {
this._props = Object.assign({}, this.props);
}
render() {
var _a, _b, _c;
const validateClass = 'validate';
const inputClass = `${this.validate ? validateClass : ''}`;
return (h(Host, { class: "relative block" }, h("input", Object.assign({}, this._props, { onInput: e => this.onInputHandler(e), onInvalid: e => this.onInvalidHandler(e), ref: el => this.refHandler(el), class: inputClass })), ((_a = this.props) === null || _a === void 0 ? void 0 : _a.type) == 'password' ? h("button", { type: "button", onClick: () => this.togglePassword() }) : null, h("span", null), this.validate && ((_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.validationMessage) ? h("small", null, (_c = this.inputEl) === null || _c === void 0 ? void 0 : _c.validationMessage) : null));
}
get rootEl() { return getElement(this); }
static get watchers() { return {
"props": ["propChangeHandler"]
}; }
};
OpglInput.style = opglInputCss;
export { OpglInput as opgl_input };