tp-logic-canvas/tp-lc-in.js

/**
@license
Copyright (c) 2022 trading_peter
This program is available under Apache License Version 2.0
*/

import { LitElement, html, css } from 'lit';

class TpLcIn extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: flex;
          align-items: center;
        }

        .circle {
          border-radius: 50px;
          border: 3px solid green;
          width: 10px;
          height: 10px;
          cursor: pointer;
        }

        .circle:hover {
          background: green;
        }

        label {
          margin-left: 5px;
        }
      `
    ];
  }

  render() {
    const { name } = this;

    return html`
      <div class="circle"></div>
      <label>${name}</label>
    `;
  }

  static get properties() {
    return {
      name: { type: String },
    };
  }
}

window.customElements.define('tp-lc-in', TpLcIn);