'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-1206254d.js');

const CorejamFormInput = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.formEvent = index.createEvent(this, "formEvent", 7);
    this.type = "text";
    this.autocomplete = "off";
    this.required = false;
    this.checked = false;
    this.autofocus = false;
    /**
     * Style specific prop
     */
    this.w = 12;
    this.bg = "gray-100";
    this.hoverBg = "gray-300";
    this.focusBg = "gray-300";
    this.bWidth = 0;
    this.p = 4;
    this.focusOutline = "none";
    this.extraProps = {};
  }
  async componentWillLoad() {
    await this.computeStyles();
  }
  async computeStyles() {
    const hash = await (await Promise.resolve().then(function () { return require('./style-2b3a6185.js'); }).then(function (n) { return n.style; })).calculateStyles(this);
    this.hash = hash;
  }
  onChange(event) {
    const input = event.currentTarget;
    this.inputValue = input.value;
    if (this.type == "checkbox") {
      this.inputValue = input.checked ? true : false;
    }
    this.formEvent.emit({
      name: this.formId,
      key: this.name,
      type: this.type,
      value: this.inputValue,
    });
  }
  componentWillRender() {
    if (this.type == "checkbox") {
      this.extraProps["checked"] = this.checked ? true : null;
    }
  }
  render() {
    const props = {
      id: this._id,
      name: this.name,
      type: this.type,
      formId: this.formId,
      autocomplete: this.autocomplete,
      required: this.required,
      placeholder: this.placeholder,
      autofocus: this.autofocus,
    };
    const cleanedProps = Object.keys(props)
      .filter((e) => props[e] !== null)
      .reduce((o, e) => {
      o[e] = props[e];
      return o;
    }, {});
    return (index.h(index.Host, { style: { display: "block", width: "100%" } }, index.h("corejam-box", { flex: true, direction: "col", w: "12", mb: 3 }, this.label && (index.h("corejam-box", { mb: 4 }, index.h("label", { htmlFor: this.name }, index.h("corejam-type", { size: "sm", color: "gray-500" }, this.label)))), index.h("input", Object.assign({}, cleanedProps, this.extraProps, { class: this.hash, "data-cy": this.formId + "-" + this.name, value: this.value, onInput: (e) => this.onChange(e) })))));
  }
  get el() { return index.getElement(this); }
};

exports.corejam_form_input = CorejamFormInput;
