@progressive-development/pd-content/dist/pd-edit-content/PdEditContent.js

Progressive Development content components.

import { html, LitElement, css } 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;
};
const editIcon = html`<svg
  class="edit"
  viewBox="0 0 19 19"
  xmlns="http://www.w3.org/2000/svg"
>
  <g>
    <path
      d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69 C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041 c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
      fill="var(--edit-fill-color)"
    />
    <path
      d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798 C18.867,3.205,18.824,2.209,18.183,1.568z"
      fill="var(--edit-fill-color)"
    />
    <path
      d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293 c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
      fill="var(--edit-fill-color)"
    />
  </g>
</svg>`;
const _PdEditContent = class _PdEditContent extends LitElement {
  constructor() {
    super(...arguments);
    this.contentTitle = "";
    this.data = [];
    this.editLinks = [];
    this.editDisabled = false;
  }
  static {
    this.styles = [
      css`
      :host {
        display: block;
      }

      h4 {
        font-family: var(--pd-default-font-title-family);
        font-size: var(--pd-ec-font-title-size, 1.2em);
        margin: 0 0 2px 0;
        line-height: 40px;
        color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
        padding-left: 5px;
      }

      .header {
        display: flex;
        gap: 5px;
        background-color: var(--pd-ec-bg-col, var(--pd-default-col));
        align-items: center;
      }

      .circle {
        margin-left: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
      }

      .step-number {
        font-family: var(--pd-default-font-title-family);
        font-size: var(--pd-ec-font-title-size, 1.2em);
        font-weight: var(--pd-ec-nr-font-weight, bold);
        color: var(--pd-ec-bg-col, var(--pd-default-col));
      }

      .label {
        display: inline-block;
        font-weight: bold;
        width: 200px;
        padding-top: 10px;
      }

      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);
        --edit-fill-color: var(--pd-default-font-link-col);
      }

      a:hover {
        color: var(--pd-default-font-link-col-hover);
        --edit-fill-color: var(--pd-default-font-link-col-hover);
      }

      .edit {
        width: 1.1em;
      }

      /* 
        could used as class for given svg icons, workaround class 
        hard coded for specific icon => maybe use custom properties here, but not for that hack...
      */
      .own-edit-icon {
        width: 2em;
        margin-top: -10px;
      }

      .link-row {
        padding: 5px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
      }

      .link-item {
        display: flex;
        gap: 2px;
        white-space: nowrap;
        align-items: center;
        pointer-events: none;
      }

      .param-data {
        padding-bottom: 10px;
      }

      @media (max-width: 360px) {
        .label {
          width: 130px;
        }
      }
    `
    ];
  }
  render() {
    return html`
      <div class="header">
        ${this.stepNumber ? html`
              <div class="circle">
                <span class="step-number">${this.stepNumber}</span>
              </div>
            ` : null}
        <h4>${this.contentTitle}</h4>
      </div>
      <div>
        ${this.data?.length ? html`
              <div class="param-data">
                ${this.data.map(
      (entry) => html`<div>
                      <span class="label">${entry.name}</span>
                      <span class="value">${entry.val}</span>
                    </div>`
    )}
              </div>
            ` : null}
        <slot></slot>
        <div class="link-row">
          ${!this.editDisabled ? html`
                <a @click="${this._editContent}">
                  <div class="link-item">
                    ${editIcon} Bewerk ${this.contentTitle}
                  </div>
                </a>
              ` : null}
          ${this.editLinks.map(
      (link) => html`
              <a data-link="${link.key}" @click="${this._editContent}">
                <div class="link-item">
                  ${_PdEditContent._getLinkLogo(link)} ${link.txt}
                </div>
              </a>
            `
    )}
        </div>
      </div>
    `;
  }
  static _getLinkLogo(link) {
    if (link.icon) return link.icon;
    if (link.defaultIcon) return editIcon;
    return "";
  }
  _editContent(e) {
    const link = e.currentTarget?.dataset?.link;
    this.dispatchEvent(
      new CustomEvent("edit-content", {
        detail: { step: this.stepNumber, link },
        bubbles: true,
        composed: true
      })
    );
  }
};
__decorateClass([
  property({ type: Number })
], _PdEditContent.prototype, "stepNumber");
__decorateClass([
  property({ type: String })
], _PdEditContent.prototype, "contentTitle");
__decorateClass([
  property({ type: Array })
], _PdEditContent.prototype, "data");
__decorateClass([
  property({ type: Array })
], _PdEditContent.prototype, "editLinks");
__decorateClass([
  property({ type: Boolean })
], _PdEditContent.prototype, "editDisabled");
let PdEditContent = _PdEditContent;

export { PdEditContent };