'use strict';

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

const core = require('./core-0dcf683d.js');

const ColorPicker = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.colors = ["red", "#232345", "#458596"];
        this.selectedOne = -1;
        this.hovered = false;
        this.handleClick = (color, index) => {
            this.selectedOne = index;
            this.activeColor = color;
            this.onChange.emit(color);
        };
        this.fetch = ev => {
            this.selectedOne = -2;
            this.inputValue = ev.target.value;
            this.activeColor = this.inputValue;
            this.onChange.emit(this.inputValue);
        };
        this.handleJSXColors = () => {
            this.colors =
                typeof this.colors === "string" ? JSON.parse(this.colors) : this.colors;
        };
        this.onChange = core.createEvent(this, "colorPickedEvent", 7);
    }
    componentDidLoad() {
        this.handleJSXColors();
    }
    render() {
        const colors = typeof this.colors === "string" ? JSON.parse(this.colors) : this.colors;
        return (core.h("span", null, colors.map((color, index) => (core.h("button", { name: "button", class: this.selectedOne === index || this.activeColor === color
                ? "active colorCell"
                : "colorCell", style: {
                backgroundColor: color
            }, onClick: () => this.handleClick(color, index) }))), core.h("input", { type: "color", class: this.selectedOne === -2 ? "paletteActive colors" : "colors", value: this.activeColor, onChange: this.fetch.bind(this) }), core.h("i", { class: "icon" }, "\uD83D\uDD8C")));
    }
    static get style() { return ".colorCell {\n  width: 20px;\n  height: 20px;\n  margin: 4px;\n  opacity: 0.7;\n  cursor: pointer;\n  border-radius: 75%;\n  display: inline-block;\n  border: 1.2px solid rgb(115, 130, 132);\n}\n\n.color-picker {\n  border-radius: 100px;\n}\n\n.colors {\n  -webkit-appearance: none;\n  margin: 7px 4px 4px 4px;\n  padding: 0;\n  border: none;\n  border-radius: 10px;\n  width: 20px;\n  height: 20px;\n}\n.colors::-webkit-color-swatch {\n  border: none;\n  border-radius: 10px;\n  padding: 0;\n}\n.colors::-webkit-color-swatch-wrapper {\n  border: none;\n  border-radius: 10px;\n  padding: 0;\n}\n.paletteActive {\n  border: 1.5px solid rgb(242, 247, 253);\n  width: 19px;\n  height: 19px;\n}\n\n.active {\n  width: 21px;\n  height: 21px;\n  border: 2px solid rgb(230, 242, 255);\n}\n\n.icon {\n  position: relative;\n  left: -24px;\n  top: -3px;\n  pointer-events: none;\n}\n/*\n\@keyframes colorchange {\n  0% {\n    border: 3px solid rgb(151, 156, 162);\n  }\n  50% {\n    border: 3px solid rgb(255, 255, 255);\n  }\n  100% {\n    border: 3px solid rgb(151, 156, 162);\n  }\n}\n*/\n\n.palette {\n  width: 25px;\n  height: 25px;\n  opacity: 0.7;\n  cursor: pointer;\n  border-radius: 75%;\n  display: inline-block;\n}"; }
};

exports.color_picker = ColorPicker;
