@progressive-development/pd-content/dist/pd-tab/PdTab.js

Progressive Development content components.

import { LitElement, css, html } from 'lit';
import { property } from 'lit/decorators.js';
import '@progressive-development/pd-icon/pd-icon';

var __defProp = Object.defineProperty;
var __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
class PdTab extends LitElement {
  constructor() {
    super(...arguments);
    this.tabs = [];
  }
  static {
    this.styles = [
      css`
      :host {
        display: block;
      }

      .header-container {
        display: flex;
      }

      .tab-header {
        padding: var(--pd-tab-header-padding, 0.8em 1.5em);
        background-color: var(--pd-tab-bg-col, var(--pd-default-light-col));
        font-family: var(--pd-default-font-title-family);
        color: var(--pd-tab-text-col, var(--pd-default-font-title-col));
        cursor: pointer;
        border: 2px solid var(--pd-tab-border-col, #ccc); /* Dünner Rahmen */
        border-bottom: none; /* Tabs sollen nahtlos an den Inhalt anschließen */
        border-radius: 8px 8px 0 0; /* Abgerundete obere Ecken */
        display: inline-block; /* Tabs nebeneinander anzeigen */
        margin-right: 5px; /* Abstand zwischen Tabs */
        box-shadow: var(
          --pd-tab-shadow,
          0 2px 4px rgba(0, 0, 0, 0.1)
        ); /* Leichter Schatten für Tiefe */
        transition:
          background-color 0.3s,
          box-shadow 0.3s; /* Weiche Übergänge bei Hover */
      }

      .tab-header:hover {
        background-color: var(
          --pd-tab-bg-hover-col,
          var(--pd-default-hover-col)
        );
        box-shadow: var(
          --pd-tab-shadow-hover,
          0 4px 8px rgba(0, 0, 0, 0.2)
        ); /* Schattenintensität bei Hover erhöhen */
      }

      .tab-header.active-header {
        background-color: var(--pd-tab-bg-active-col, var(--pd-default-col));
        border-bottom: 2px solid
          var(--pd-tab-border-active-col, var(--pd-default-col));
        color: var(
          --pd-tab-active-text-col,
          var(--pd-default-bg-col)
        ); /* Textfarbe für aktiven Tab */
        box-shadow: none; /* Schatten entfernen, wenn Tab aktiv ist */
      }

      .tab-header.disabled-header {
        background-color: var(--pd-tab-bg-active-col, var(--pd-default-col));
        border-bottom: 2px solid
          var(--pd-tab-border-active-col, var(--pd-default-col));
        color: var(
          --pd-tab-active-text-col,
          var(--pd-default-bg-col)
        ); /* Textfarbe für aktiven Tab */
        box-shadow: none; /* Schatten entfernen, wenn Tab aktiv ist */
      }

      .tab-header.disabled-header {
        pointer-events: none; /* Deaktiviert die Klickbarkeit */
        background-color: var(
          --pd-tab-disabled-bg-col,
          #f0f0f0
        ); /* Hellere Farbe für deaktivierte Tabs */
        color: var(--pd-tab-disabled-text-col, #999); /* Hellere Textfarbe */
        border-color: var(
          --pd-tab-disabled-border-col,
          #ddd
        ); /* Angepasste Rahmenfarbe */
        cursor: not-allowed; /* Zeigt an, dass der Tab nicht interaktiv ist */
        opacity: 0.6; /* Reduziert die Sichtbarkeit für einen "deaktivierten" Look */
      }

      .tab-header:focus {
        outline: none; /* Entfernt den Standardfokusrahmen */
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Fokusring für Tastaturnavigation */
      }

      .slot-container {
        display: none;
      }

      .active-slot {
        padding: var(--pd-tab-content-padding, 1em);
        display: block;
        border: var(--pd-tab-content-border, 1px solid var(--pd-default-col));
        border-top: var(
          --pd-tab-content-border-top,
          3px solid var(--pd-default-col)
        );
      }
    `
    ];
  }
  update(changedProperties) {
    if (changedProperties.has("defaultTab") && this.defaultTab) {
      console.log("PdTab: Set active from default selection", this.defaultTab);
      this._activeTab = this.defaultTab;
    }
    super.update(changedProperties);
  }
  render() {
    return html`
      <div class="header-container">
        ${this.tabs.map(
      (t) => html`
            <div
              class="tab-header ${this._activeTab === t.key ? "active-header" : ""} ${t.disabled ? "disabled-header" : ""}"
              data-key="${t.key}"
              @click="${this._tabSelected}"
            >
              ${t.name}
            </div>
          `
    )}
      </div>
      ${this.tabs.map(
      (t) => html`
          <div
            id="${`slot${t.key}`}"
            class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
          >
            <slot name="${t.key}"></slot>
          </div>
        `
    )}
    `;
  }
  reset() {
    this._activeTab = this.defaultTab;
  }
  // eslint-disable-next-line class-methods-use-this
  _tabSelected(e) {
    this._activeTab = e.target?.dataset?.key;
    this.dispatchEvent(
      new CustomEvent("tab-selected", {
        detail: this._activeTab
      })
    );
  }
}
__decorateClass([
  property({ type: Array })
], PdTab.prototype, "tabs");
__decorateClass([
  property({ type: String })
], PdTab.prototype, "defaultTab");
__decorateClass([
  property({ type: String, state: true })
], PdTab.prototype, "_activeTab");

export { PdTab };