/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <slot></slot>
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-origin: content-box;
        flex-grow: 0;
        flex-shrink: 0;
        min-height: auto;
        white-space: normal;
        padding: 0;
        user-select: none;
        cursor: pointer;
    }
    :host(:not([value])),
    :host([value][disabled]) {
        display: none;
    }
`);

/* ======================================================================= */

import CustomElement from "../element/CustomElement.js";

/**
 * @deprecated
 */
export default class Option extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
    }

    get value() {
        return this.getAttribute("value");
    }

    set value(val) {
        this.setAttribute("value", val);
    }

    static createOption(value, content = value, style = {}) {
        const opt = document.createElement("emc-option");
        opt.setAttribute("value", value);
        if (content instanceof HTMLElement) {
            opt.append(content);
        } else {
            opt.innerHTML = content;
        }
        for (const i in style) {
            opt.style[i] = style[i];
        }
        return opt;
    }

}

customElements.define("emc-option", Option);
