import { Component, Element, Event, h, Host, Prop, State } from "@stencil/core";
export class CorejamFormSelect {
  constructor() {
    this.multiple = false;
    this.extraProps = {};
  }
  onChange(e) {
    this.inputValue = e.currentTarget.value;
    this.formEvent.emit({
      name: this.formId,
      key: this.name,
      type: "select",
      value: this.inputValue,
    });
  }
  componentWillRender() {
    if (this.multiple) {
      this.extraProps["multiple"] = true;
    }
  }
  render() {
    return (h(Host, null,
      h("corejam-box", { flex: true, direction: "col", w: "12", mb: 3 },
        h("corejam-box", { mb: 2 },
          h("label", { htmlFor: this.name },
            h("corejam-type", { size: "sm", color: "gray-500" }, this.label))),
        h("select", Object.assign({ id: this.name, name: this.name }, this.extraProps), this.options.map((option) => {
          const selected = {};
          if (option.selected) {
            selected["selected"] = true;
          }
          return (h("option", Object.assign({ value: option.value }, selected), option.key));
        })))));
  }
  static get is() { return "corejam-form-select"; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": true
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": true
    },
    "formId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "form-id",
      "reflect": true
    },
    "options": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Array<options>",
        "resolved": "options[]",
        "references": {
          "Array": {
            "location": "global"
          },
          "options": {
            "location": "local"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "selected": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selected",
      "reflect": true
    },
    "multiple": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "multiple",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "inputValue": {}
  }; }
  static get events() { return [{
      "method": "formEvent",
      "name": "formEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
