import { LitElement, html, css, type TemplateResult } from 'lit'; import { customElement } from 'lit/decorators.js'; import { property } from 'lit/decorators/property.js'; @customElement('consentsoftware-mainselection') export class ConsentsoftwareMainSelection extends LitElement { public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`; @property({ type: Boolean }) public required = false; @property({ type: Boolean }) public selected = false; public static styles = css` :host { display: block; position: relative; } .maincontainer { display: grid; grid-template-columns: repeat(4, 1fr); } .itemBox { padding: 16px; text-align: center; border-right: 1px solid; border-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) 1; } .itemBox:last-child { border-right: none; } `; constructor() { super(); } public render(): TemplateResult { return html` <div class="maincontainer"> <div class="itemBox"> <consentsoftware-toggle required>Required</consentsoftware-toggle> </div> <div class="itemBox"> <consentsoftware-toggle>Preferences</consentsoftware-toggle> </div> <div class="itemBox"> <consentsoftware-toggle>Statistics</consentsoftware-toggle> </div> <div class="itemBox"> <consentsoftware-toggle>Marketing</consentsoftware-toggle> </div> </div> `; } public async getResults(mouseEvent) {} }