class ColorSelector extends HTMLElement{
    constructor(){
        super();
    }

    connectedCallback(){
        this.render();
    }

    setValue(value){
        let options = this.querySelectorAll("select option");

        for(let option of options){
            if(option.value == value){
                option.selected = true;
            }
        }
    }

    getValue(){
        return this.getElementsByTagName("select")[0].value;
    }

    render(){
        this.innerHTML = `
        <link rel="stylesheet" href="components/curves_settings_popup/color_selector/color_selector.css"/>
        <select class="color-selector-select">
            <option value=""></option>
            <option value="-1">Auto</option>
            <option value="1">Red</option>
            <option value="2">Lime</option>
            <option value="3">Blue</option>
            <option value="4">Magenta</option>
            <option value="5">Yellow</option>
            <option value="6">Cyan</option>
            <option value="7">Black</option>
            <option value="8">Orange</option>
            <option value="9">Dark green</option>
            <option value="10">Dark violet</option>
            <option value="11">Brown</option>
            <option value="12">Sky blue</option>
            <option value="14">Hot pink</option>
            <option value="15">Light yellow</option>
        </select>
        `;
    }
}

customElements.define("sea-color-selector", ColorSelector);