@progressive-development/pd-spa-helper 0.3.101 → 0.3.103

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

@@ -0,0 +1,192 @@
+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

@@ -0,0 +1,243 @@
+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

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

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

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

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

@@ -0,0 +1,141 @@
+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
+};