import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8dc1a0b7.js';

const CorejamFormContainer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.formEvent = createEvent(this, "formEvent", 7);
    this.formSubmit = createEvent(this, "formSubmit", 7);
    this.sendForm = createEvent(this, "sendForm", 7);
    this.formData = {};
  }
  handleSubmit(e) {
    if (e.detail.name == this.name) {
      console.info("form submit");
      const data = Object.assign({}, this.formData);
      if (this.submitHandler)
        this.submitHandler(data);
      this.sendForm.emit(data);
    }
  }
  receivedFormEvent(event) {
    if (event.detail.name == this.name) {
      const formData = Object.assign(Object.assign({}, this.formData), { formId: this.name });
      console.log(formData);
      formData[event.detail.key] = event.detail;
      this.formData = formData;
    }
  }
  render() {
    return (h(Host, { as: "form" }, h("form", { name: this.name }, h("slot", null))));
  }
};

const CorejamFormInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.formEvent = 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 import('./style-2713ffe3.js').then(function (n) { return n.s; })).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 (h(Host, { style: { display: "block", width: "100%" } }, h("corejam-box", { flex: true, direction: "col", w: "12", mb: 3 }, this.label && (h("corejam-box", { mb: 4 }, h("label", { htmlFor: this.name }, h("corejam-type", { size: "sm", color: "gray-500" }, this.label)))), 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 getElement(this); }
};

const CorejamFormSubmit = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.formSubmit = createEvent(this, "formSubmit", 7);
  }
  onClick(e) {
    e.preventDefault(),
      this.formSubmit.emit({
        name: this.formId,
        type: "submit",
      });
  }
  render() {
    return (h(Host, { onClick: (e) => this.onClick(e), "data-cy": `submit-${this.formId}` }, h("slot", null)));
  }
};

const CorejamType = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.as = "span";
    this.droppableElements = ["corejam-box"];
  }
  async componentWillRender() {
    const hash = await (await import('./style-2713ffe3.js').then(function (n) { return n.s; })).calculateStyles(this);
    this.hash = hash;
  }
  render() {
    const Type = this.as;
    return (h(Type, { class: this.hash }, h("slot", null)));
  }
};

export { CorejamFormContainer as corejam_form_container, CorejamFormInput as corejam_form_input, CorejamFormSubmit as corejam_form_submit, CorejamType as corejam_type };
