feat(core): Refactor and enhance consent management components

ts_web/elements/consentsoftware-mainselection.ts

@@ -0,0 +1,62 @@
+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;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .maincontainer {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    .itemBox {
+      padding: 16px;
+      text-align: center;
+      border-right: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .itemBox:last-child {
+      border-right: none;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <div class="itemBox">
+          <consentsoftware-toggle>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) {}
+}