@codeperate/opgl-ui-library/dist/esm/opgl-toggle.entry.js

Opengamela UI Library

import { r as registerInstance, h, H as Host } from './index-51ebf678.js';

const OpglToggle = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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"]
  }; }
};

export { OpglToggle as opgl_toggle };