'use strict';

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

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

const CorejamEditable = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  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 (index.h(index.Host, null, index.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") && (index.h("corejam-box", null, index.h("corejam-box", null, index.h("corejam-type", null, "Padding")), index.h("corejam-box", { flex: true, mt: 4 }, index.h("corejam-box", null, "All:", index.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) => (index.h("option", { value: i, selected: this.node.p === i }, i))))), index.h("corejam-box", null, "Top:", index.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) => (index.h("option", { value: i, selected: this.node.pt === i }, i))))), index.h("corejam-box", null, "Right:", index.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) => (index.h("option", { value: i, selected: this.node.pr === i }, i))))), index.h("corejam-box", null, "Bottom:", index.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) => (index.h("option", { value: i, selected: this.node.pb === i }, i))))), index.h("corejam-box", null, "Left:", index.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) => (index.h("option", { value: i, selected: this.node.pl === i }, i)))))), index.h("corejam-box", null, index.h("corejam-type", null, "Margin")), index.h("corejam-box", { flex: true, mt: 4 }, index.h("corejam-box", null, "Top:", index.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) => (index.h("option", { value: i, selected: this.node.mt === i }, i))))), index.h("corejam-box", null, "Right:", index.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) => (index.h("option", { value: i, selected: this.node.mr === i }, i))))), index.h("corejam-box", null, "Bottom:", index.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) => (index.h("option", { value: i, selected: this.node.mb === i }, i))))), index.h("corejam-box", null, "Left:", index.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) => (index.h("option", { value: i, selected: this.node.ml === i }, i)))))))), this.node.localName.includes("type") && (index.h("corejam-box", null, index.h("corejam-box", null, index.h("corejam-type", null, "Size")), index.h("select", { name: "size", size: 1, onChange: (e) => this.edit(e) }, ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"].map((i) => (index.h("option", { value: i, selected: this.node.size === i }, i)))))))));
  }
};

exports.corejam_edit = CorejamEditable;
