jahmin/src/HMI_ELEMENTS/positioning.ts

A JavaScript framework to build browser friendly Human Machine Interfaces for automation

import {LitElement,css, html} from 'lit-element'


export class positionElement extends LitElement
{
    orientation = "N";
    top = 0;
    left = 0;

    static get styles()
    {
        return [css`
        :host{
            display:block;
        }
        :host{
            position: relative;
        }
        :host([orientation="E"]) 
        {
            transform: rotate(90deg); 
        }
        :host([orientation="S"]) 
        {
            transform: rotate(180deg); 
        }
        :host([orientation="W"]) 
        {
            transform: rotate(270deg); 
        }
        
        `];
    }
    
    static get properties()
    {
        return {
            orientation : {type:String},
            top: {type: Number},
            left: {type: Number}
        };
    }
    
    render()
    {
        return html`
            <style>
                :host
                {
                    top : ${this.top}%;
                    left : ${this.left}%;
                }
            </style>
            <slot></slot>
        `
    }
}
customElements.define("x-position",positionElement);