@progressive-development/pd-spa-helper 0.3.104 → 0.5.0

package/dist/node_modules/@progressive-development/pd-order/dist/src/PdOrderContacts.js

@@ -1,192 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { msg } from "@lit/localize";
-import "../node_modules/@progressive-development/pd-content/pd-collapse.js";
-import "../node_modules/@progressive-development/pd-contact/pd-contact.js";
-import "../../../pd-shared-styles/src/shared-color-styles.js";
-import { PDFontStyles } from "../../../pd-shared-styles/src/shared-font-styles.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdOrderContacts 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);
-          font-family: var(--pd-default-font-content-family);
-          max-width: 1000px;
-        }
-
-        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);
-        }
- 
-       .collapse-contact {
-         padding: 10px;
-       }
- 
-       .summary-box {
-         display: flex;
-         flex-wrap: wrap;
-         gap: 10px;
-       }
- 
-       .first-contact {
-         min-width: 200px;
-       }
-     `
-    ];
-  }
-  static get properties() {
-    return {
-      /**
-        * List with required contact fields, if not set use default (previous existing values to be consitent during update)
-        */
-      requiredFields: { type: Array },
-      orderContact: { type: Object },
-      billingContact: { type: Object },
-      summary: { type: Boolean },
-      withPayment: { type: Boolean },
-      match: { type: Object },
-      _ownBillingContact: { type: Boolean }
-    };
-  }
-  constructor() {
-    super();
-    this._ownBillingContact = false;
-    this.requiredFields = [];
-    this.match = {};
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("validate-form", this._validateForm);
-  }
-  disconnectedCallback() {
-    super.connectedCallback();
-    this.removeEventListener("validate-form", this._validateForm);
-  }
-  firstUpdated() {
-    this.addEventListener("toggle-accordion", (e) => {
-      const origin = e.composedPath()[0];
-      const collapsiblePanels = this.shadowRoot.querySelectorAll(
-        "pd-collapse"
-      );
-      collapsiblePanels.forEach((panel) => {
-        if (panel !== origin) {
-          panel.close();
-        }
-      });
-    });
-  }
-  render() {
-    if (this.summary) {
-      return this._renderSummary();
-    }
-    return this._renderEditContacts();
-  }
-  _renderEditContacts() {
-    return html`
-       <pd-collapse id="orderContactCollapseId" active>
-         <div slot="header" class="header">${msg("Adresse", { id: "pd.order.contacts.orderContact.inputHeader" })}</div>
-         <pd-contact
-           id="orderContactId"
-           class="collapse-contact"
-           slot="content"
-           .requiredFields="${this.requiredFields}"
-           .contact="${this.orderContact}"
-           .match="${this.match}"
-         ></pd-contact>
-       </pd-collapse>
- 
-       ${this.withPayment ? html`
-        <pd-collapse id="billingContactCollapseId">
-          <div slot="header" class="header">${msg("Rechnungsadresse", { id: "pd.order.contacts.billingContact.inputHeader" })}</div>
-          <div slot="content">
-            ${this._ownBillingContact ? html`
-                  <p>
-                    <a @click="${() => {
-      this._ownBillingContact = false;
-    }}">
-                      ${msg("Gleiche Rechnungsadresse", { id: "pd.order.contacts.billingContact.sameBillingLink" })}
-                    </a>
-                  </p>
-                  <pd-contact
-                    id="billingContactId"
-                    class="collapse-contact"
-                    .requiredField="${this.requiredFields}"
-                    .contact="${this.billingContact}"
-                  ></pd-contact>
-                ` : html`
-                <p>${msg("Die Adresse, wird auch als Rechnungsadresse verwendet.", { id: "pd.order.contacts.billingContact.sameBillingText" })}</p>
-                <p>
-                  <a @click="${() => {
-      this._ownBillingContact = true;
-    }}">
-                    ${msg("Andere Rechnungsadresse verwenden", { id: "pd.order.contacts.billingContact.otherBillingLink" })}
-                  </a>
-                </p>
-            `}
-          </div>
-        </pd-collapse>` : ""}
-     `;
-  }
-  _renderSummary() {
-    return html`
-       <div class="summary-box">
-         <pd-contact
-           class="first-contact"
-           addressTitle="Onderhoud"
-           .contact="${this.orderContact}"
-           summary
-         ></pd-contact>
-         ${this.billingContact ? html`
-         <pd-contact
-           addressTitle="Facturatie"
-           addressRef="adres onderhoud"
-           .contact="${this.billingContact}"
-           summary
-         ></pd-contact>` : ""}
-       </div>
-     `;
-  }
-  _validateForm(e) {
-    if (e.detail && !e.detail.singleElement) {
-      this.shadowRoot.getElementById("orderContactId").dispatchEvent(
-        new CustomEvent("validate-form", {
-          detail: e.detail
-        })
-      );
-      const errorSize = e.detail.errorMap.size;
-      if (errorSize > 0) {
-        this.shadowRoot.getElementById("orderContactCollapseId").open();
-      }
-      if (this._ownBillingContact) {
-        this.shadowRoot.getElementById("billingContactId").dispatchEvent(
-          new CustomEvent("validate-form", {
-            detail: e.detail
-          })
-        );
-        if (e.detail.errorMap.size > errorSize) {
-          this.shadowRoot.getElementById("billingContactCollapseId").open();
-        }
-      }
-    }
-  }
-}
-export {
-  PdOrderContacts
-};

package/dist/node_modules/@progressive-development/pd-order/dist/src/PdOrderSummary.js

@@ -1,243 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { msg } from "@lit/localize";
-import { format } from "../node_modules/fecha/lib/fecha.js";
-import "../node_modules/@progressive-development/pd-forms/pd-checkbox.js";
-import "../node_modules/@progressive-development/pd-forms/pd-radio-group.js";
-import "../node_modules/@progressive-development/pd-content/pd-edit-content.js";
-import "../node_modules/@progressive-development/pd-price/pd-pricetable.js";
-import "../node_modules/@progressive-development/pd-dialog/pd-popup.js";
-import "../node_modules/@progressive-development/pd-forms/pd-form-container.js";
-import "../node_modules/@progressive-development/pd-forms/pd-form-row.js";
-import { PDColorStyles } from "../../../pd-shared-styles/src/shared-color-styles.js";
-import { PDFontStyles } from "../../../pd-shared-styles/src/shared-font-styles.js";
-import "../pd-order-contacts.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdOrderSummary extends LitElement {
-  /**
-    * @event go-to
-    */
-  static get styles() {
-    return [
-      PDFontStyles,
-      PDColorStyles,
-      css`
-       :host {
-         display: block;
-       }
-
-       h3 {
-         color: var(--pd-default-font-title-col);
-         font-family: var(--pd-default-font-title-family);
-         font-size: 1.5em;
-         /*margin-top: 10px;
-         margin-bottom: 20px;*/
-       }
-
-       .edit-summary-container {
-         display: flex;
-         flex-flow: column;
-         flex-wrap: wrap;
-         gap: 1em;
-       }
- 
-       .payment {
-         margin-top: 30px;
-         padding: 5px;
-         background-color: var(--pd-order-summary-payment-bg-col, var(--pd-default-light-col));
-       }
- 
-       .pay-logo-box {
-         display: flex;
-       }
- 
-       .pay-logo {
-         max-width: 6rem;
-       }
- 
-       .pricetable {
-         padding-top: 20px;
-       }
- 
-       /* 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);
-       }
-       a:hover {
-         color: var(--pd-default-font-link-col-hover);
-       }
- 
-       .agree-box {
-         padding-top: 20px;
-       }
- 
-       /* Size Elements for small width */
-       @media (max-width: 380px) {
-         .pay-logo {
-           max-width: 5rem;
-         }
-       }
-     `
-    ];
-  }
-  static get properties() {
-    return {
-      orderSteps: { type: Array },
-      withPayment: { type: Boolean },
-      withAgreement: { type: Boolean },
-      order: { type: Object }
-    };
-  }
-  constructor() {
-    super();
-    this.orderSteps = [];
-    this.order = {};
-  }
-  firstUpdated() {
-    this.addEventListener("edit-content", (e) => {
-      this.dispatchEvent(
-        new CustomEvent("go-to", {
-          detail: {
-            step: e.detail.step
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    });
-    this.addEventListener("validate-form", this._validateForm);
-  }
-  render() {
-    if (!this.order) {
-      return html`<p>No order is set</p>`;
-    }
-    return html`
-       <h3>${msg("Übersicht", { id: "pd.order.summary.title" })}</h3>
-       <div class="edit-summary-container">
-        ${this.orderSteps.map((step, index) => {
-      switch (step.key) {
-        case "zip":
-        case "booking":
-          return this._getBookingSummary(index + 1, step);
-        case "contacts":
-          return this._getContactsSummary(index + 1, step);
-        default:
-          return html`
-                <pd-edit-content
-                  contentTitle="${step.name}"
-                  stepNumber="${index + 1}"
-                  .data="${step.data}"
-                >
-                  <slot name="${step.key}"></slot>
-                </pd-edit-content>
-              `;
-      }
-    })}
-       </div>
- 
-       ${this.order.priceData ? html`
-        <div class="payment">
-          <h3>${msg("Rechnung", { id: "pd.order.summary.billing" })}</h3>
-          <!--
-          <pd-radio-group id="paymentGroupId" style="--group-direction: column;">
-            <pd-checkbox name="direct" value="false">
-              Pay direct, you will redirected after submit the order
-              <div class="pay-logo-box">
-                <img class="pay-logo" src="/images/paypal.svg"> 
-                <img class="pay-logo" src="/images/visa.svg">
-                <img class="pay-logo" src="/images/mastercard.svg">
-              </div>
-            </pd-checkbox>
-            <pd-checkbox name="bill" value="false">Pay with bill (5€ additional fee)</pd-checkbox>
-          </pd-radio-group>    
-          -->
-          <pd-pricetable
-            class="pricetable"
-            .priceData="${this.order.priceData}"
-          ></pd-pricetable>
-        </div>
-        ` : ""}          
-
-      ${this.withAgreement ? html`
-      <pd-form-container id="submitSummaryFormId">
-        <pd-form-row>
-          <pd-checkbox
-            id="agreeConditionsId"
-            valueName="agreeId"
-            class="agree-box"
-            required
-            requiredMsg="${msg("Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.", { id: "pd.order.summary.agree.required" })}"
-          >
-            ${msg(
-      html`Stimmen Sie unseren <a @click="${this._openTermsAndConditions}" @keypress="${this._openTermsAndConditions}">Allgemeinen Geschäftsbedingungen</a> zu`,
-      { id: "pd.order.summary.agree.link" }
-    )}
-          </pd-checkbox>
-        </pd-form-row>        
-      </pd-form-container>
-
-      <pd-popup id="agreePopupId">
-        <div slot="content"><slot name="legal"></slot></div>
-      </pd-popup>
-      ` : ""}      
-     `;
-  }
-  _validateForm(e) {
-    if (e.detail && !e.detail.singleElement && this.withAgreement) {
-      this.shadowRoot.getElementById("submitSummaryFormId").dispatchEvent(
-        new CustomEvent("validate-form", {
-          detail: e.detail
-        })
-      );
-    }
-  }
-  _getBookingSummary(index, step) {
-    let date;
-    if (this.order.selectedDate) {
-      date = format(this.order.selectedDate, "DD/MM/YYYY");
-    }
-    const bookingData = [{ name: "Postcode:", val: this.order.zip }];
-    if (date) {
-      bookingData.push({ name: "Datum van herstelling:", val: date });
-    }
-    return html`
-       <pd-edit-content
-         contentTitle="${step.name}"
-         stepNumber="${index}"
-         .data="${bookingData}"
-       >
-       </pd-edit-content>
-     `;
-  }
-  _getContactsSummary(index, step) {
-    return html`
-       <pd-edit-content
-         contentTitle="${step.name}"
-         stepNumber="${index}"
-         ?editDisabled="${this.order.withLogin}"
-       >
-         ${this.order.contacts ? html`
-               <pd-order-contacts
-                 ?withPayment="${this.withPayment}"
-                 .orderContact="${this.order.contacts.orderContact}"
-                 .billingContact="${this.order.contacts.billingContact}"
-                 summary
-               >
-               </pd-order-contacts>
-             ` : ""}
-       </pd-edit-content>
-     `;
-  }
-  _openTermsAndConditions(e) {
-    this.shadowRoot.getElementById("agreePopupId").showPopup();
-    e.stopPropagation();
-  }
-}
-export {
-  PdOrderSummary
-};

package/dist/node_modules/@progressive-development/pd-page/pd-footer.js

@@ -1,2 +0,0 @@
-import { PdFooter } from "./src/PdFooter.js";
-window.customElements.define("pd-footer", PdFooter);

package/dist/node_modules/@progressive-development/pd-page/pd-menu.js

@@ -1,2 +0,0 @@
-import { PdMenu } from "./src/PdMenu.js";
-window.customElements.define("pd-menu", PdMenu);

package/dist/node_modules/@progressive-development/pd-page/src/PdFooter.js

@@ -1,141 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { PDColorStyles } from "../../pd-shared-styles/src/shared-color-styles.js";
-import { PDFontStyles } from "../../pd-shared-styles/src/shared-font-styles.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdFooter extends LitElement {
-  /**
-   * Fired when footer link clicked.
-   * @event footer-link
-   */
-  static get properties() {
-    return {
-      version: { type: String },
-      copyright: { type: String },
-      madeBy: { type: Object },
-      footerLinks: { type: Array }
-    };
-  }
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      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: 0px;        
-        padding: 2em 2.5em 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);
-      }
-    `
-    ];
-  }
-  constructor() {
-    super();
-    this.footerLinks = [];
-    this._mailTo = "info@progressive-development.com";
-  }
-  firstUpdated() {
-  }
-  render() {
-    return html`
-      
-        <div class="footer-links">
-            <ul>
-            ${this.footerLinks.map((link) => html`
-              <li class="item">
-                <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>` : ""}          
-            ${this.version ? html`<span class="version">${this.version}</span>` : ""}
-          </div>
-          ${this.madeBy ? html`<span class="madeBy" @click="${this._clickMadeby}">${this.madeBy.txt}</span>` : ""}
-        </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 linkKey = e.target.dataset.link;
-    this.dispatchEvent(
-      new CustomEvent("footer-link", {
-        detail: {
-          linkObj: this.footerLinks.filter((fl) => fl.key === linkKey)[0]
-        }
-      })
-    );
-  }
-}
-export {
-  PdFooter
-};