catalog/ts_web/elements/consentsoftware-tabs.ts

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

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

@customElement('consentsoftware-tabs')
export class ConsentsoftwareTabs extends DeesElement {
  public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        position: relative;
        background: ${cssManager.bdTheme(colors.light.muted, colors.dark.muted)};
      }

      .tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .tabs .tab {
        text-align: center;
        padding: 8px 0;
        font-size: 0.8em;
        font-weight: 500;
        color: ${cssManager.bdTheme(colors.light.mutedForeground, colors.dark.mutedForeground)};
        cursor: pointer;
        transition: color 0.15s ease;
      }

      .tabs .tab:hover {
        color: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
      }

      @media (max-width: 560px) {
        .tabs .tab {
          font-size: 0.75em;
          padding: 6px 0;
        }
      }

      .selector {
        position: absolute;
        width: calc(100% / 3);
        height: 2px;
        left: 0;
        bottom: 0;
        background: ${cssManager.bdTheme(colors.light.foreground, colors.dark.foreground)};
        transition: all 0.2s ease-out;
        border-radius: 1px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="tabs">
        <div class="tab" @click=${this.handleClick}>Consent</div>
        <div class="tab" @click=${this.handleClick}>Details</div>
        <div class="tab" @click=${this.handleClick}>Cookie Policy</div>
      </div>
      <div class="selector"></div>
    `;
  }

  public async handleClick(mouseEvent: MouseEvent) {
    const target = mouseEvent.target as HTMLElement;
    const tab: HTMLDivElement = target.closest('.tab');
    if (tab) {
      const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
      if (selector) {
        selector.style.left = `${tab.offsetLeft}px`;
        selector.style.width = `${tab.offsetWidth}px`;
      }
    }
  }
}