@codeperate/opgl-ui-library
Version:
Opengamela UI Library
87 lines (86 loc) • 2.88 kB
JavaScript
import { Component, Element, h, Host, Prop, forceUpdate, State, Watch } from '@stencil/core';
export class OpglInput {
constructor() {
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));
}
static get is() { return "opgl-input"; }
static get originalStyleUrls() { return {
"$": ["opgl-input.scss"]
}; }
static get styleUrls() { return {
"$": ["opgl-input.css"]
}; }
static get properties() { return {
"props": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "JSXBase.InputHTMLAttributes<HTMLInputElement>",
"resolved": "InputHTMLAttributes<HTMLInputElement>",
"references": {
"JSXBase": {
"location": "global"
},
"HTMLInputElement": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"validate": {},
"_props": {}
}; }
static get elementRef() { return "rootEl"; }
static get watchers() { return [{
"propName": "props",
"methodName": "propChangeHandler"
}]; }
}