catalog/ts_web/elements/consentsoftware-mainselection.ts

import { cssManager, colors } from './shared.js';

import {
  DeesElement,
  customElement,
  html,
  css,
  type TemplateResult,
  property,
} from '@design.estate/dees-element';

@customElement('consentsoftware-mainselection')
export class ConsentsoftwareMainSelection extends DeesElement {
  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 = [
    cssManager.defaultStyles,
    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 ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
      }

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

      @media (max-width: 560px) {
        .itemBox {
          padding: 10px 8px;
          border-right: none;
          border-bottom: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
        }

        .itemBox:nth-child(odd) {
          border-right: 1px solid ${cssManager.bdTheme(colors.light.border, colors.dark.border)};
        }

        .itemBox:nth-last-child(-n+2) {
          border-bottom: none;
        }
      }
    `,
  ];

  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() {}
}