@codeperate/opgl-ui-library/dist/custom-elements/index.js

Opengamela UI Library

import { forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

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$1 = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    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 this; }
  static get watchers() { return {
    "props": ["propChangeHandler"]
  }; }
  static get style() { return opglInputCss; }
};

const OpglToggle$1 = class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.checked = false;
  }
  propsChangeHandler() {
    if (this.inputProps.checked)
      this.checked = this.inputProps.checked;
  }
  componentWillLoad() {
    this.propsChangeHandler();
  }
  changeHandler(e) {
    this.checked = e.target.checked;
    if (this.inputProps.onChange)
      this.inputProps.onChange(e);
  }
  inputElHandler(el) {
    this.inputEl = el;
    if (this.inputProps.ref)
      this.inputProps.ref(el);
  }
  render() {
    let containerClass = 'border block shadow rounded-full w-14 h-7 relative transform transition-all ease-in' + ' ' + (this.checked ? 'bg-blue-500' : '');
    let labelClass = 'absolute z-10 rounded-full h-7 w-7 border transform transition-all ease-in shadow bg-gray-100' + ' ' + (this.checked ? 'translate-x-full' : '');
    return (h(Host, { class: this.inputProps.class + ' ' + containerClass, onClick: e => {
        if (e.target != this.inputEl) {
          this.inputEl.click();
        }
      } }, h("input", Object.assign({}, this.inputProps, { ref: el => this.inputElHandler(el), type: "checkbox", onChange: (e) => this.changeHandler(e), class: "hidden" })), h("div", { class: labelClass })));
  }
  static get watchers() { return {
    "inputProps": ["propsChangeHandler"]
  }; }
};

const OpglInput = /*@__PURE__*/proxyCustomElement(OpglInput$1, [0,"opgl-input",{"props":[16],"validate":[32],"_props":[32]}]);
const OpglToggle = /*@__PURE__*/proxyCustomElement(OpglToggle$1, [0,"opgl-toggle",{"inputProps":[16],"checked":[32]}]);
const defineCustomElements = (opts) => {
  if (typeof customElements !== 'undefined') {
    [
      OpglInput,
  OpglToggle
    ].forEach(cmp => {
      if (!customElements.get(cmp.is)) {
        customElements.define(cmp.is, cmp, opts);
      }
    });
  }
};

export { OpglInput, OpglToggle, defineCustomElements };