jmn-basic-elements/src/lib/labelledIcon.ts

A collection of HMI elements representing P&ID entities made with JS-HMI.

import {hmiElement} from 'jahmin'
import {html, css} from 'jahmin'

export class labeledIcon extends hmiElement {
    orientation = "N";
    top = 0;
    left = 0;

    static get properties()
    {
        let x = super.properties;
        x.orientation = {type:String};
        x.top  = {type:Number};
        x.left = {type:Number};
        return x;
    }
    static get styles() {
        return css `
            :host{
                display:block;
            }
            slot#std::slotted(*)
            {
                width:2.5rem;
                height:2.5rem;
            }
        `;
    }
    render() {
        return html `
            <x-position top="${this.top}" left="${this.left}">
            <hmi-label name="${this.name}"  engine="${this.engine}" system="${this.system}"
                       orientation="${this.orientation}">
    
                <slot name="label" slot="label">${this.name}</slot>
                <bool-color name="${this.name}"  engine="${this.engine}" system="${this.system}"> 
                    <slot id="std"></slot>
                </bool-color>
    
            </hmi-label>
            </x-position>
        `;
    }
}

customElements.define("labeled-icon",labeledIcon);