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

Progressive development page helper, teaser, menu, footer.

import { LitElement, css, nothing, html } from 'lit';
import { property } from 'lit/decorators.js';

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 PdFooter extends LitElement {
  constructor() {
    super(...arguments);
    this.copyright = "";
    this.version = "";
    this.footerLinks = [];
  }
  static {
    this.styles = [
      css`
      :host {
        display: flex;
        flex-flow: column;
        justify-content: end;
        background-color: var(--pd-footer-bg-col, var(--pd-default-col));
        width: 100%;
        white-space: nowrap;
      }

      .footer-links {
        display: flex;
        align-items: center;
        justify-content: right;
        height: 100%;
        color: var(--pd-footer-font-col, var(--pd-default-bg-col));
        font-family: var(
          --pd-footer-font-family,
          var(--pd-default-font-link-family)
        );
        font-size: var(--pd-footer-font-size, 1.1em);
      }

      .footer-links ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        gap: 2em;
        margin: 0;
        padding: 2em 2.5em;
      }

      .footer-links li {
        cursor: pointer;
      }

      .footer-links li:hover {
        color: var(--pd-default-hover-col);
      }

      .bottom-line {
        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: 0.5em;
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }

      .copyright {
        font-weight: bold;
      }

      .version {
        font-weight: normal;
      }

      .madeBy {
        cursor: pointer;
        font-style: italic;
      }

      .madeBy:hover {
        color: var(--pd-default-col);
      }
    `
    ];
  }
  render() {
    return html`
      <div class="footer-links">
        <ul>
          ${this.footerLinks?.map(
      (link) => html`
              <li>
                <a @click=${this._footerLinkClicked} data-link=${link.key}
                  >${link.name}</a
                >
              </li>
            `
    )}
        </ul>
      </div>

      <div class="bottom-line">
        <div>
          ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : nothing}
          ${this.version ? html`<span class="version">${this.version}</span>` : nothing}
        </div>

        ${this.madeBy ? html`<span class="madeBy" @click=${this._clickMadeBy}
              >${this.madeBy.txt}</span
            >` : nothing}
      </div>
    `;
  }
  _clickMadeBy() {
    if (this.madeBy?.email) {
      window.location.href = `mailto:${this.madeBy.email}`;
    } else if (this.madeBy?.link) {
      window.open(this.madeBy.link, "_blank");
    }
  }
  _footerLinkClicked(e) {
    const target = e.currentTarget;
    const linkKey = target.dataset.link;
    const linkObj = this.footerLinks?.find((fl) => fl.key === linkKey);
    if (linkObj) {
      this.dispatchEvent(
        new CustomEvent("footer-link", {
          detail: { linkObj },
          bubbles: true,
          composed: true
        })
      );
    }
  }
}
__decorateClass([
  property({ type: String })
], PdFooter.prototype, "copyright");
__decorateClass([
  property({ type: String })
], PdFooter.prototype, "version");
__decorateClass([
  property({ type: Object })
], PdFooter.prototype, "madeBy");
__decorateClass([
  property({ type: Array })
], PdFooter.prototype, "footerLinks");

export { PdFooter };