catalog/ts_web/elements/consentsoftware-mainselection.ts

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 accessor required = false;

  @property({ type: Boolean })
  public accessor selected = false;

  public static styles = css`
    :host {
      display: block;
      position: relative;
    }

    .maincontainer {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 8px 0;
    }

    @media (max-width: 560px) {
      .maincontainer {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
      }
    }

    .itemBox {
      padding: 12px 8px;
      text-align: center;
      border-right: 1px solid var(--border, hsl(0 0% 18%));
    }

    .itemBox:last-child {
      border-right: none;
    }

    @media (max-width: 560px) {
      .itemBox {
        padding: 10px 8px;
        border-right: none;
        border-bottom: 1px solid var(--border, hsl(0 0% 18%));
      }

      .itemBox:nth-child(odd) {
        border-right: 1px solid var(--border, hsl(0 0% 18%));
      }

      .itemBox:nth-last-child(-n+2) {
        border-bottom: 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) {}
}