import { Component, h, Host, Prop } from "@stencil/core";
export class CorejamEditable {
  componentWillLoad() {
    //@ts-ignore
    this.attributes = this.node.constructor.observedAttributes;
  }
  camelCase(input) {
    return input.toLowerCase().replace(/-(.)/g, function (_match, group1) {
      return group1.toUpperCase();
    });
  }
  edit(e) {
    this.node[this.camelCase(e.target.name)] = e.target.value;
  }
  render() {
    return (h(Host, null,
      h("corejam-box", { position: "fixed", bottom: 0, z: 100, shadow: "2xl", h: "300px", p: 4, flex: true, w: "12", direction: "col" },
        this.node.localName.includes("box") && (h("corejam-box", null,
          h("corejam-box", null,
            h("corejam-type", null, "Padding")),
          h("corejam-box", { flex: true, mt: 4 },
            h("corejam-box", null,
              "All:",
              h("select", { name: "p", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.p === i }, i))))),
            h("corejam-box", null,
              "Top:",
              h("select", { name: "pt", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.pt === i }, i))))),
            h("corejam-box", null,
              "Right:",
              h("select", { name: "pr", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.pr === i }, i))))),
            h("corejam-box", null,
              "Bottom:",
              h("select", { name: "pb", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.pb === i }, i))))),
            h("corejam-box", null,
              "Left:",
              h("select", { name: "pl", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.pl === i }, i)))))),
          h("corejam-box", null,
            h("corejam-type", null, "Margin")),
          h("corejam-box", { flex: true, mt: 4 },
            h("corejam-box", null,
              "Top:",
              h("select", { name: "mt", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.mt === i }, i))))),
            h("corejam-box", null,
              "Right:",
              h("select", { name: "mr", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.mr === i }, i))))),
            h("corejam-box", null,
              "Bottom:",
              h("select", { name: "mb", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.mb === i }, i))))),
            h("corejam-box", null,
              "Left:",
              h("select", { name: "ml", size: 1, onChange: (e) => this.edit(e) }, [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 63].map((i) => (h("option", { value: i, selected: this.node.ml === i }, i)))))))),
        this.node.localName.includes("type") && (h("corejam-box", null,
          h("corejam-box", null,
            h("corejam-type", null, "Size")),
          h("select", { name: "size", size: 1, onChange: (e) => this.edit(e) }, ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"].map((i) => (h("option", { value: i, selected: this.node.size === i }, i)))))))));
  }
  static get is() { return "corejam-edit"; }
  static get properties() { return {
    "node": {
      "type": "any",
      "mutable": true,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "node",
      "reflect": false
    }
  }; }
}
