@progressive-development/pd-page/dist/pd-footer/PdFooter.js

Progressive development page helper, teaser, menu, footer.

import { css, LitElement, html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { localized, msg } from '@lit/localize';
import { SOCIAL_PROVIDERS } from '@progressive-development/pd-composite';
import { pdIcons } from '@progressive-development/pd-icon';
import '@progressive-development/pd-icon/pd-icon';
import { defaultBrandIcon, brandIconMap } from '@progressive-development/pd-icon-brands';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let PdFooter = class extends LitElement {
  constructor() {
    super(...arguments);
    this.sections = [];
    this.socialLinks = [];
    this.legalLinks = [];
    this.copyright = "";
    this.version = "";
    this.showVersion = false;
    this.bgImage = "";
    this._isMobile = false;
    this._openSections = /* @__PURE__ */ new Set();
    this._boundMediaQueryHandler = this._handleMediaQuery.bind(this);
  }
  connectedCallback() {
    super.connectedCallback();
    this._mediaQueryList = window.matchMedia("(max-width: 767px)");
    this._mediaQueryList.addEventListener(
      "change",
      this._boundMediaQueryHandler
    );
    this._isMobile = this._mediaQueryList.matches;
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this._mediaQueryList?.removeEventListener(
      "change",
      this._boundMediaQueryHandler
    );
  }
  render() {
    const hasBrand = this.querySelector("[slot=logo]") || this.querySelector("[slot=extra]");
    return html`
      ${this.bgImage ? html`
            <div
              class="footer-bg"
              style="background-image: url('${this.bgImage}')"
            ></div>
            <div class="footer-bg-gradient"></div>
          ` : ""}
      <footer>
        <div class="footer-main ${classMap({ "no-brand": !hasBrand })}">
          <div class="footer-brand">
            <slot name="logo"></slot>
            <slot name="extra"></slot>
          </div>

          ${this._renderSections()} ${this._renderSocialLinks()}
        </div>

        <hr class="footer-divider" aria-hidden="true" />

        ${this._renderBottomBar()}
      </footer>
    `;
  }
  /* ── Section rendering ── */
  _renderSections() {
    if (this.sections.length === 0) return nothing;
    return html`
      <nav
        class="footer-sections ${classMap({ mobile: this._isMobile })}"
        aria-label="${msg("Footer Navigation", { id: "pd.footer.nav.aria" })}"
      >
        ${this._isMobile ? this.sections.map((section, i) => this._renderAccordion(section, i)) : this.sections.map(
      (section) => html`
                <div class="footer-section">
                  <h3 class="section-heading">${section.heading}</h3>
                  <ul class="section-links" role="list">
                    ${section.links.map(
        (link) => html`
                        <li
                          role="button"
                          tabindex="0"
                          data-link="${link.key}"
                          @click="${this._footerLinkClicked}"
                          @keydown="${this._handleLinkKeydown}"
                        >
                          ${link.name}
                        </li>
                      `
      )}
                  </ul>
                </div>
              `
    )}
      </nav>
    `;
  }
  _renderAccordion(section, index) {
    const isOpen = this._openSections.has(index);
    return html`
      <div class="footer-section-mobile">
        <div
          class="section-trigger"
          role="button"
          tabindex="0"
          aria-expanded="${isOpen}"
          @click="${() => this._toggleSection(index)}"
          @keydown="${(e) => this._handleSectionKeydown(e, index)}"
        >
          <span class="section-heading">${section.heading}</span>
          <pd-icon
            icon="${pdIcons.ICON_TOGGLE_COLLAPSE}"
            ?activeIcon="${isOpen}"
            aria-hidden="true"
          ></pd-icon>
        </div>
        <div class="section-content ${classMap({ open: isOpen })}">
          <div class="section-content-inner">
            <ul class="section-links" role="list">
              ${section.links.map(
      (link) => html`
                  <li
                    role="button"
                    tabindex="${isOpen ? "0" : "-1"}"
                    data-link="${link.key}"
                    @click="${this._footerLinkClicked}"
                    @keydown="${this._handleLinkKeydown}"
                  >
                    ${link.name}
                  </li>
                `
    )}
            </ul>
          </div>
        </div>
      </div>
    `;
  }
  /* ── Social links ── */
  _renderSocialLinks() {
    if (this.socialLinks.length === 0) return nothing;
    return html`
      <div
        class="footer-social"
        role="list"
        aria-label="${msg("Social Media", { id: "pd.footer.social.aria" })}"
      >
        ${this.socialLinks.map((entry) => {
      const provider = this._findProvider(entry.providerId);
      const url = this._toSocialUrl(provider, entry.value);
      const label = entry.label || provider?.label || entry.providerId;
      return html`
            <a
              role="listitem"
              href="${url || "#"}"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="${label}"
              class="social-link"
              title="${label}"
              >${brandIconMap.get(provider?.id) ?? defaultBrandIcon}</a
            >
          `;
    })}
      </div>
    `;
  }
  /* ── Bottom bar ── */
  _renderBottomBar() {
    return html`
      <div class="bottom-bar">
        <div class="bottom-bar-left">
          ${this.copyright ? html`<span class="copyright">&copy; ${this.copyright}</span>` : nothing}
          ${this.showVersion && this.version ? html`<span class="version">${this.version}</span>` : nothing}
        </div>

        ${this.legalLinks.length > 0 ? html`
              <nav
                class="bottom-bar-links"
                aria-label="${msg("Legal Navigation", {
      id: "pd.footer.legal.aria"
    })}"
              >
                <ul role="list">
                  ${this.legalLinks.map(
      (link) => html`
                      <li
                        role="button"
                        tabindex="0"
                        data-link="${link.key}"
                        @click="${this._footerLinkClicked}"
                        @keydown="${this._handleLinkKeydown}"
                      >
                        ${link.name}
                      </li>
                    `
    )}
                </ul>
              </nav>
            ` : nothing}
        ${this.madeBy ? html`<span
              class="made-by"
              role="button"
              tabindex="0"
              @click="${this._clickMadeBy}"
              @keydown="${this._handleMadeByKeydown}"
              >${this.madeBy.txt}</span
            >` : nothing}
      </div>
    `;
  }
  /* ── Event handlers ── */
  _footerLinkClicked(e) {
    const target = e.currentTarget;
    const linkKey = target.dataset.link;
    const allLinks = [
      ...this.sections.flatMap((s) => s.links),
      ...this.legalLinks
    ];
    const linkObj = allLinks.find((fl) => fl.key === linkKey);
    if (linkObj) {
      this.dispatchEvent(
        new CustomEvent("footer-link", {
          detail: { linkObj },
          bubbles: true,
          composed: true
        })
      );
    }
  }
  _handleLinkKeydown(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      this._footerLinkClicked(e);
    }
  }
  _toggleSection(index) {
    const next = new Set(this._openSections);
    if (next.has(index)) {
      next.delete(index);
    } else {
      next.add(index);
    }
    this._openSections = next;
  }
  _handleSectionKeydown(e, index) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      this._toggleSection(index);
    }
  }
  _clickMadeBy() {
    if (this.madeBy?.email) {
      window.location.href = `mailto:${this.madeBy.email}`;
    } else if (this.madeBy?.link) {
      const url = this.madeBy.link;
      if (url.startsWith("https://") || url.startsWith("http://")) {
        window.open(url, "_blank", "noopener,noreferrer");
      }
    }
  }
  _handleMadeByKeydown(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      this._clickMadeBy();
    }
  }
  /* ── Helpers ── */
  _handleMediaQuery(e) {
    this._isMobile = e.matches;
  }
  _findProvider(id) {
    return SOCIAL_PROVIDERS.find((p) => p.id === id);
  }
  _toSocialUrl(provider, raw) {
    const v = raw?.trim();
    if (!v) return null;
    if (provider?.toUrl) return provider.toUrl(v);
    if (/^https?:\/\//i.test(v)) return v;
    return null;
  }
};
PdFooter.styles = [
  css`
      :host {
        display: flex;
        flex-direction: column;
        background: var(--pd-footer-bg-col, var(--pd-default-col));
        color: var(--pd-footer-font-col, var(--pd-on-primary-col));
        font-family: var(
          --pd-footer-font-family,
          var(--pd-default-font-link-family)
        );
        font-size: var(--pd-footer-font-size, 1em);
        text-shadow: var(--pd-footer-text-shadow, none);
        width: 100%;
      }

      /* ── Background image layers ── */

      .footer-bg {
        position: absolute;
        inset: 0;
        background-size: var(--pd-footer-bg-size, cover);
        background-repeat: var(--pd-footer-bg-repeat, no-repeat);
        background-attachment: var(--pd-footer-bg-attachment, scroll);
        background-position: var(--pd-footer-bg-position, center);
        z-index: 0;
      }

      .footer-bg-gradient {
        position: absolute;
        inset: 0;
        background: var(--pd-footer-gradient, none);
        z-index: 1;
      }

      :host([bg-image]) {
        position: relative;
      }

      :host([bg-image]) footer {
        position: relative;
        z-index: 2;
      }

      /* ── Main content area ── */

      .footer-main {
        display: grid;
        grid-template-areas:
          "brand sections"
          "social social";
        grid-template-columns: auto 1fr;
        row-gap: var(--pd-spacing-sm);
        column-gap: var(--pd-footer-section-gap, var(--pd-spacing-lg));
        max-width: var(
          --pd-footer-max-width,
          var(--pd-content-max-width, 1170px)
        );
        width: 100%;
        margin: 0 auto;
        padding: var(--pd-spacing-lg) var(--pd-spacing-md) var(--pd-spacing-sm);
        box-sizing: border-box;
      }

      .footer-main.no-brand {
        grid-template-areas:
          "sections"
          "social";
        grid-template-columns: 1fr;
      }

      .footer-brand {
        grid-area: brand;
        display: flex;
        flex-direction: column;
        gap: var(--pd-spacing-md);
      }

      /* ── Sections (desktop) ── */

      .footer-sections {
        grid-area: sections;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: var(--pd-footer-section-gap, var(--pd-spacing-lg));
      }

      .section-heading {
        font-size: var(--pd-footer-heading-font-size, 1.1em);
        font-weight: var(--pd-footer-heading-font-weight, bold);
        margin: 0 0 var(--pd-spacing-sm) 0;
        color: var(
          --pd-footer-heading-font-col,
          var(--pd-footer-font-col, var(--pd-on-primary-col))
        );
      }

      .section-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--pd-spacing-xs);
      }

      .section-links li {
        cursor: pointer;
        font-size: var(--pd-footer-link-font-size, 0.95em);
        padding: var(--pd-spacing-xs) 0;
        opacity: 0.85;
        transition:
          opacity 0.15s ease,
          color 0.15s ease;
      }

      .section-links li:hover {
        color: var(--pd-footer-link-hover-col, var(--pd-default-hover-col));
        opacity: 1;
      }

      .section-links li:focus-visible {
        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
        outline-offset: 2px;
        border-radius: var(--pd-radius-sm);
      }

      /* ── Mobile accordion ── */

      .footer-sections.mobile {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .section-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--pd-spacing-sm) 0;
        cursor: pointer;
        border-bottom: 1px solid
          var(--pd-footer-divider-col, rgba(255, 255, 255, 0.15));
        user-select: none;
      }

      .section-trigger:focus-visible {
        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
        outline-offset: 2px;
        border-radius: var(--pd-radius-sm);
      }

      .section-trigger pd-icon {
        --pd-icon-size: 1.2rem;
        --pd-icon-col: var(--pd-footer-font-col, var(--pd-on-primary-col));
        transition: transform 0.25s ease;
      }

      .section-content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.25s ease;
      }

      .section-content.open {
        grid-template-rows: 1fr;
      }

      .section-content-inner {
        overflow: hidden;
      }

      .section-content.open .section-content-inner {
        padding-bottom: var(--pd-spacing-sm);
      }

      /* ── Social icons ── */

      .footer-social {
        grid-area: social;
        display: flex;
        flex-wrap: wrap;
        gap: var(--pd-footer-social-gap, var(--pd-spacing-sm));
        align-items: center;
      }

      .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--pd-footer-social-icon-size, 2.5rem);
        height: var(--pd-footer-social-icon-size, 2.5rem);
        text-decoration: none;
        border-radius: var(--pd-radius-md);
        color: inherit;
        transition:
          transform 0.2s ease,
          opacity 0.2s ease;
        min-width: 44px;
        min-height: 44px;
      }

      .social-link svg {
        width: calc(var(--pd-footer-social-icon-size, 2.5rem) * 0.65);
        height: calc(var(--pd-footer-social-icon-size, 2.5rem) * 0.65);
      }

      .social-link:hover {
        transform: scale(1.15);
        opacity: 0.8;
      }

      .social-link:focus-visible {
        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
        outline-offset: 2px;
      }

      /* ── Divider ── */

      .footer-divider {
        border: none;
        border-top: 1px solid
          var(--pd-footer-divider-col, rgba(255, 255, 255, 0.15));
        margin: 0;
      }

      /* ── Bottom bar ── */

      .bottom-bar {
        background-color: var(
          --pd-footer-bottom-col,
          var(--pd-default-light-col)
        );
        font-size: var(--pd-footer-bottom-font-size, 0.9em);
        color: var(--pd-footer-bottom-font-col, var(--pd-default-dark-col));
        padding: var(--pd-spacing-sm) var(--pd-spacing-md);
        display: flex;
        gap: var(--pd-spacing-md);
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }

      .bottom-bar-left {
        display: flex;
        gap: var(--pd-spacing-sm);
        align-items: center;
        flex-wrap: wrap;
      }

      .copyright {
        font-weight: bold;
      }

      .version {
        font-weight: normal;
        opacity: 0.7;
      }

      .bottom-bar-links ul {
        display: flex;
        list-style: none;
        gap: var(--pd-spacing-md);
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
      }

      .bottom-bar-links li {
        cursor: pointer;
        opacity: 0.85;
      }

      .bottom-bar-links li:hover {
        opacity: 1;
        text-decoration: underline;
      }

      .bottom-bar-links li:focus-visible {
        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
        outline-offset: 2px;
        border-radius: var(--pd-radius-sm);
      }

      .made-by {
        cursor: pointer;
        font-style: italic;
        font-size: 0.85em;
        opacity: 0.7;
      }

      .made-by:hover {
        opacity: 1;
      }

      .made-by:focus-visible {
        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
        outline-offset: 2px;
        border-radius: var(--pd-radius-sm);
      }

      /* ── Mobile adjustments ── */

      @media (max-width: 767px) {
        .footer-main {
          grid-template-areas:
            "brand"
            "sections"
            "social";
          grid-template-columns: 1fr;
          padding: var(--pd-spacing-md) var(--pd-spacing-sm);
        }

        .bottom-bar {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--pd-spacing-xs);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .section-content {
          transition: none;
        }
        .social-link {
          transition: none;
        }
      }
    `
];
__decorateClass([
  property({ type: Array })
], PdFooter.prototype, "sections", 2);
__decorateClass([
  property({ type: Array })
], PdFooter.prototype, "socialLinks", 2);
__decorateClass([
  property({ type: Array })
], PdFooter.prototype, "legalLinks", 2);
__decorateClass([
  property({ type: String })
], PdFooter.prototype, "copyright", 2);
__decorateClass([
  property({ type: String })
], PdFooter.prototype, "version", 2);
__decorateClass([
  property({ type: Boolean, attribute: "show-version" })
], PdFooter.prototype, "showVersion", 2);
__decorateClass([
  property({ type: Object })
], PdFooter.prototype, "madeBy", 2);
__decorateClass([
  property({ type: String, reflect: true, attribute: "bg-image" })
], PdFooter.prototype, "bgImage", 2);
__decorateClass([
  state()
], PdFooter.prototype, "_isMobile", 2);
__decorateClass([
  state()
], PdFooter.prototype, "_openSections", 2);
PdFooter = __decorateClass([
  localized()
], PdFooter);

export { PdFooter };