@progressive-development/pd-content/dist/pd-more-info/PdMoreInfo.js

Progressive Development content components.

import { css, LitElement, html } from 'lit';
import { state } from 'lit/decorators.js';
import { localized, msg } from '@lit/localize';

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 PdMoreInfo = class extends LitElement {
  constructor() {
    super(...arguments);
    this._lessInfo = true;
  }
  render() {
    return html`
      <p>
        ${this._lessInfo ? html`
              <slot name="small-view"></slot>
              <a @click=${this._showMoreInfo}>
                ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
              </a>
            ` : html`
              <slot name="large-view"></slot>
              <a @click=${this._showLessInfo}>
                ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
              </a>
            `}
      </p>
    `;
  }
  _showMoreInfo() {
    this._lessInfo = false;
  }
  _showLessInfo() {
    this._lessInfo = true;
    const rect = this.getBoundingClientRect();
    window.scrollBy({
      top: rect.top - 150,
      left: 0,
      behavior: "smooth"
    });
  }
};
PdMoreInfo.styles = [
  css`
      :host {
        display: block;
      }

      p {
        color: var(--pd-default-font-content-col);
        font-size: var(--pd-default-font-content-size);
      }

      a {
        cursor: pointer;
        font-family: var(--pd-default-font-link-family);
        font-size: var(--pd-default-font-link-size);
        color: var(--pd-default-font-link-col);
      }

      a:hover {
        color: var(--pd-default-font-link-col-hover);
      }
    `
];
__decorateClass([
  state()
], PdMoreInfo.prototype, "_lessInfo", 2);
PdMoreInfo = __decorateClass([
  localized()
], PdMoreInfo);

export { PdMoreInfo };