import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';

/**
 * @class
 * @classdesc Implements and exports the sig-control-image component.
 * @version  01.02.003
 * @extends LasalRuntimeSigElement
 */
export class LasalRuntimeSigImageElement extends LasalRuntimeSigElement {

    /**
     * Returns the component's registered tag name.
     * @readonly
     * @static
     * @returns {String} The component's tag name.
     * @memberof LasalRuntimeSigImageElement
     */
    static get is() {
        return "sig-control-image";
    }

    /**
     * Returns the import path URL used by Polymer.
     * @readonly
     * @static
     * @returns {String} The import path URL.
     * @memberof LasalRuntimeSigImageElement
     */
    static get importMeta() { return import.meta; }

    /**
     * Returns the HTML literal of the component.
     * @readonly
     * @static
     * @returns {HTMLLIElement} The template literal of the component. 
     * @memberof LasalRuntimeSigImageElement
     */
    static get template() {
        return SigPolymer.html`
        <style include="sig-element-css">
        :host {
            /* Basic styling of the component */
            background-color: var(--theme-sig-control-image-background-color, transparent);

            border-width: var(--theme-sig-control-image-border-width, 0);
            border-color: var(--theme-sig-control-image-border-color, inherit);
            border-style: var(--theme-sig-control-image-border-style, none);
            border-radius: var(--theme-sig-control-image-border-radius, 0);

            background-position-x: var(--theme-sig-control-image-background-position-x, center);
            background-position-y: var(--theme-sig-control-image-background-position-y, center);
            background-size: var(--theme-sig-control-image-background-size, contain);
            background-repeat: no-repeat;
            background-image: var(--theme-sig-control-image-background-image, none);

            /* Basic box model settings */
            display: block;
            position: absolute;
            overflow: hidden;
        }

        :host * {
            /* Reset margin and paddings for child elements and turn of text selection */
            @apply --notextselect;
            margin: 0;
            padding: 0;
        }

        .clearfix:after {
            @apply --clearfix
        }

        .sig-control-image {
            position: relative;
            width: 100%;
            height: 100%;
        }

        :host([isdesignmode]) {
            background-image: var(--theme-sig-control-image-background-image, url('preview.svg'));
        }
    </style>
    <div id="image" class="sig-control-image clearfix">
    </div>`;
    }
}
customElements.define(LasalRuntimeSigImageElement.is, LasalRuntimeSigImageElement);