@progressive-development/pd-content 0.5.9 → 0.6.0

package/dist/src/PdEditContent.js

@@ -1,223 +0,0 @@
-import { html, LitElement, css } from "lit";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-const editIcon = html`<svg
-                    class="edit"
-                    id="Layer_1"
-                    version="1.1"
-                    viewBox="0 0 19 19"
-                    xml:space="preserve"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    >
-                    <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>`;
-class PdEditContent extends LitElement {
-  /**
-   * @event edit-content
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-       :host { 
-         display: block;
-       }
- 
-       h4 {
-         font-family: var(--pd-default-font-title-family);
-         font-size: var(--pd-ec-font-title-size, 1.2em);
-         margin-top: 0px;
-         margin-bottom: 2px;
-         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));
-       }
- 
-       /* Temporär? Hier noch sehr aufwendig mit div/span? */
- 
-       .label {
-         display: inline-block;
-         font-weight: bold;
-         width: 200px;
-         padding-top: 10px;
-       }
- 
-       /* Temporär */
-       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-top: 5px;
-          padding-bottom: 5px;
-          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;
-         }
-       }
-     `
-    ];
-  }
-  static get properties() {
-    return {
-      stepNumber: { type: Number },
-      contentTitle: { type: String },
-      data: { type: Array },
-      editLinks: { type: Array },
-      // TODO: [TIM-37] Put together with edit icon/editDisabled
-      editDisabled: { type: Boolean }
-    };
-  }
-  constructor() {
-    super();
-    this.stepNumber = void 0;
-    this.contentTitle = "";
-    this.data = [];
-    this.editLinks = [];
-    this.editDisabled = false;
-  }
-  render() {
-    return html`
-       <div class="header">
-         ${this.stepNumber ? html`
-               <div class="circle">
-                 <span class="step-number">${this.stepNumber}</span>
-               </div>
-             ` : ""}
-         <h4>${this.contentTitle}</h4>
-       </div>
-       <div>
-         ${this.data ? html`
-              <div class="param-data">
-                ${this.data.map(
-      (dataEntry) => html`
-                  <div>
-                    <span class="label">${dataEntry.name}</span>
-                    <span class="value">${dataEntry.val}</span>
-                  </div>
-                `
-    )}
-              </div>` : ""}
-         <slot></slot>
-         <div class="link-row">
-           ${this.editDisabled ? "" : html`
-                 <a @click="${this._editContent}">
-                   <div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
-                 </a>
-               `}
-           ${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.target.dataset;
-    this.dispatchEvent(
-      new CustomEvent("edit-content", {
-        detail: {
-          step: this.stepNumber,
-          link
-        },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-}
-export {
-  PdEditContent
-};

package/dist/src/PdMoreInfo.js

@@ -1,77 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { updateWhenLocaleChanges, msg } from "@lit/localize";
-import { PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdMoreInfo extends LitElement {
-  static get styles() {
-    return [
-      PDFontStyles,
-      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);
-       }
-
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      _lessInfo: { type: Boolean }
-    };
-  }
-  constructor() {
-    super();
-    this._lessInfo = true;
-    updateWhenLocaleChanges(this);
-  }
-  render() {
-    if (this._lessInfo) {
-      return html`
-        <p>
-          <slot name="small-view"></slot>
-          <a @click="${this._showMoreInfo}">${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}</a>
-        </p>
-      `;
-    }
-    return html`
-      <p>
-        <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"
-    });
-  }
-}
-export {
-  PdMoreInfo
-};

package/dist/src/PdResizeContent.js

@@ -1,67 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { installMediaQueryWatcher } from "pwa-helpers/media-query.js";
-import "@progressive-development/pd-dialog/pd-popup";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdResizeContent extends LitElement {
-  /**
-   * Fired when free date clicked => At the moment only for freeDates
-   * @event book-date
-   */
-  /**
-   * Fired when date or ZIP should edited by the user
-   * @event edit-selection
-   */
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-
-      h3 {
-        color: #084c61;
-        font-family: Oswald;
-      }
-
-      p {
-        color: #084c61;
-      }
-    `;
-  }
-  static get properties() {
-    return {
-      resizeWidth: { type: String },
-      _hideContent: { type: Boolean }
-    };
-  }
-  constructor() {
-    super();
-    this.resizeWidth = "1232px";
-    this._hideContent = false;
-  }
-  firstUpdated() {
-    installMediaQueryWatcher(`(min-width: ${this.resizeWidth})`, (matches) => {
-      if (matches) {
-        this._hideContent = false;
-      } else {
-        this._hideContent = true;
-      }
-    });
-  }
-  render() {
-    if (this._hideContent) {
-      return html`
-        <pd-popup>
-          <div slot="small-view"><slot name="preview-content"></slot></div>
-          <div slot="content"><slot name="resize-content"></slot></div>
-        </pd-popup>
-      `;
-    }
-    return html` <slot name="resize-content"></slot> `;
-  }
-}
-export {
-  PdResizeContent
-};