@progressive-development/pd-spa-helper 0.4.0 → 0.5.1

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

@@ -1,567 +0,0 @@
-import { LitElement, css, html } from "lit";
-import "../../../../../../pd-shared-styles/src/shared-color-styles.js";
-import { PDFontStyles } from "../../../../../../pd-shared-styles/src/shared-font-styles.js";
-import "../../pd-icon/pd-icon.js";
-import "../../pd-forms/pd-checkbox.js";
-import "../../pd-forms/pd-form-container.js";
-import "../../pd-forms/pd-form-row.js";
-import "../../pd-forms/pd-input.js";
-import "../../pd-forms/pd-radio-group.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-const countryPrefixes = {
-  de: "+49",
-  // Deutschland
-  be: "+32",
-  // Belgien
-  nl: "+31",
-  // Niederland
-  fr: "+33",
-  // Frankreich
-  es: "+34"
-  // Spanien
-};
-function transformPhone(phone, country) {
-  if (!phone || typeof phone !== "string") {
-    return "";
-  }
-  const countryPrefix = countryPrefixes[country];
-  if (!countryPrefix) {
-    throw new Error(`Unbekanntes Land: ${country}`);
-  }
-  const cleanedPhone = phone.replace(/\s+/g, "").replace(/[^0-9+]/g, "");
-  if (cleanedPhone.startsWith("+")) {
-    return cleanedPhone;
-  }
-  if (cleanedPhone.startsWith("0")) {
-    return countryPrefix + cleanedPhone.slice(1);
-  }
-  return "";
-}
-class PdContact extends LitElement {
-  static get styles() {
-    return [
-      PDFontStyles,
-      css`
-       :host {
-         display: block;
-       }
-
-       .contact {
-         display: flex;
-         flex-direction: column;
-       }
-
-       address {
-         color: var(--pd-contact-address-col, var(--pd-default-font-content-col));
-         line-height: 1.8;
-         font-style: normal;
-       }
-
-       dl {
-         margin: 0;
-         padding: 0;
-       }
-
-       dt {
-         font-weight: bold;
-         padding-top: 10px;
-         color: var(--pd-contact-address-title-col, var(--pd-default-font-title-col));
-       }
-
-       dd {
-         font-weight: 400;
-         font-size: 1em;
-         margin: 0;
-         padding: 0;
-       }
-
-       dd.larger {         
-        padding-top: 3px;
-        padding-bottom: 5px;
-       }
-
-       .contact-form {
-         --row-padding-top: 10px;
-       }
-
-       .link-icon {
-        --pd-icon-bg-col-active: #859900;
-        --pd-icon-bg-col-hover: #859900;
-        --pd-icon-size: 14px;
-        --pd-icon-stroke-col-active: white;
-        --pd-icon-col-active: white;
-       }
-
-       .link-item {
-          display: flex; 
-          align-items: center; 
-          text-decoration: none; 
-          color: var(--pd-default-font-link-col, inherit);
-       }
-
-       .link-item:hover {
-        color: var(--pd-default-font-link-col-hover, #451A46) ;
-       }
-
-     `
-    ];
-  }
-  static get properties() {
-    return {
-      addressTitle: { type: String },
-      addressRef: { type: String },
-      /**
-       * show (true) or not (false) tel number as link
-       */
-      phoneMailLink: { type: Boolean },
-      /**
-       * summary (true) or view (false) contact data
-       */
-      summary: { type: Boolean },
-      /**
-       * List with required contact fields, if not set use default (previous existing values to be consitent during update)
-       */
-      requiredFields: { type: Array },
-      contact: { type: Object },
-      match: { type: Object },
-      /**
-       * address type, business (true) or private (false), refactor, ist state internal? => _business, state:true
-       */
-      _business: { type: Boolean, state: true },
-      _errorMap: { type: Object }
-    };
-  }
-  constructor() {
-    super();
-    this.addressTitle = "Adres";
-    this.requiredFields = [];
-    this.summary = false;
-    this.match = {};
-    this._business = false;
-    this._errorMap = /* @__PURE__ */ new Map();
-  }
-  update(changedProperties) {
-    if (changedProperties.has("contact") && this.contact) {
-      this._business = this.contact.business;
-    }
-    super.update(changedProperties);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("validate-form", this._validateForm);
-  }
-  disconnectedCallback() {
-    super.connectedCallback();
-    this.removeEventListener("validate-form", this._validateForm);
-  }
-  firstUpdated() {
-    var _a, _b;
-    this.addEventListener("key-pressed", (e) => {
-      this._errorMap.set(e.detail.name, "");
-      super.requestUpdate();
-    });
-    if (this.contact) {
-      const detail = {
-        errorMap: /* @__PURE__ */ new Map()
-      };
-      (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("contactContainerId")) == null ? void 0 : _b.dispatchEvent(
-        new CustomEvent("validate-form", { detail })
-      );
-    }
-  }
-  render() {
-    return html`
-       <div class="contact">
-         ${this.summary ? this._renderViewContact() : this._renderEditContact()}
-       </div>
-     `;
-  }
-  _renderEditContact() {
-    return html`
-       <pd-form-container id="contactContainerId" requiredFieldInfo>
-         <pd-form-row id="testFormId">
-           <pd-radio-group
-             class="quarter3"
-             label="Type"
-             required
-             value="${this._getRadioValue()}"
-             @field-change="${this._switchAddressType}"
-             style="--group-gap: 20px;"
-           >
-             <pd-checkbox value="${this.contact ? !this.contact.business : true}" valueName="private"
-               >Particulier</pd-checkbox
-             >
-             <pd-checkbox valueName="business" value="${this.contact ? this.contact.business : false}">Onderneming</pd-checkbox>
-           </pd-radio-group>
-         </pd-form-row>
-
-         ${this._business ? html`
-               <pd-form-row class="contact-form">
-                 <pd-input
-                   id="compNameId"
-                   class="quarter3"
-                   label="Naam onderneming"
-                   ?required="${this._isRequired("companyName")}"
-                   value="${this.contact ? this.contact.companyName : ""}"
-                   valueName="companyName"
-                   autoCompleteName="organization"
-                 ></pd-input>
-              </pd-form-row>
-              <pd-form-row class="contact-form">
-                 <pd-input
-                   id="vatId"
-                   class="quarter3"
-                   label="Ondernemingsnr"
-                   ?required="${this._isRequired("vatNr")}"
-                   field-type="vat"
-                   valueName="vatNr"
-                   value="${this.contact ? this.contact.vatNr : ""}"
-                   autoCompleteName="vat"
-                 ></pd-input>
-               </pd-form-row>
-             ` : html`
-               <pd-form-row class="contact-form">
-                 <pd-input
-                   id="firstNameId"
-                   class="quarter3"
-                   label="Voornaam"
-                   valueName="firstName"
-                   value="${this.contact ? this.contact.firstName : ""}"
-                   autoCompleteName="given-name"
-                   ?required="${this._isRequired("firstName")}"
-                 ></pd-input>
-               </pd-form-row>
-               <pd-form-row class="contact-form">
-                 <pd-input
-                   id="lastNameId"
-                   class="quarter3"
-                   label="Naam"
-                   valueName="lastName"
-                   value="${this.contact ? this.contact.lastName : ""}"
-                   autoCompleteName="family-name"
-                   ?required="${this._isRequired("lastName")}"
-                 ></pd-input>
-               </pd-form-row>
-             `}
-         <pd-form-row class="contact-form">
-           <pd-input
-             id="streetId"
-             class="quarter2"
-             label="Straat"
-             valueName="street"
-             value="${this.contact ? this.contact.street : ""}"
-             autoCompleteName="street-address"
-             ?required="${this._isRequired("street")}"
-           ></pd-input>
-           <pd-input
-             id="streetNrId"
-             class="quarter1"
-             label="Nr"
-             valueName="streetNr"
-             value="${this.contact ? this.contact.streetNr : ""}"
-             ?required="${this._isRequired("streetNr")}"
-           ></pd-input>
-         </pd-form-row>         
-         <pd-form-row class="contact-form">
-           ${this.match && this.match.zip ? html`
-                 <pd-input
-                   readonly
-                   id="zipId"
-                   class="quarter1"
-                   label="Postcode"
-                   valueName="zip"
-                   value="${this.match ? this.match.zip || "" : ""}"
-                 ></pd-input>
-               ` : html`
-                 <pd-input
-                   id="zipId"
-                   class="quarter1"
-                   label="Postcode"
-                   field-type="number"
-                   valueName="zip"
-                   value="${this.contact ? this.contact.zip : ""}"
-                   autoCompleteName="postal-code"
-                   ?required="${this._isRequired("zip")}"
-                 ></pd-input>
-               `}
-           <pd-input
-             id="cityId"
-             class="quarter2"
-             label="Plaats"
-             valueName="city"
-             value="${this.contact ? this.contact.city : ""}"
-             autoCompleteName="locality"
-             ?required="${this._isRequired("city")}"
-           ></pd-input>
-         </pd-form-row>
-         <pd-form-row class="contact-form">
-           <pd-input
-             class="quarter3"
-             id="additionalHintId"
-             label="Extra informatie"
-             value="${this.contact ? this.contact.additionalHint : ""}"
-           ></pd-input>
-         </pd-form-row>
-         <pd-form-row class="contact-form">
-           <pd-input
-             id="phoneId"
-             class="quarter3"
-             label="Telefoon"
-             name="phone"
-             valueName="phone1"
-             value="${this.contact ? this.contact.phone1 : ""}"
-             field-type="phone"
-             autoCompleteName="tel"
-             ?required="${this._isRequired("phone1")}"
-           ></pd-input>
-          </pd-form-row>
-          <pd-form-row class="contact-form">
-           <pd-input
-             id="mailId"
-             class="quarter3"
-             label="E-mail"
-             field-type="mail"
-             valueName="email"
-             value="${this.contact ? this.contact.email : ""}"
-             autoCompleteName="email"
-             ?required="${this._isRequired("email")}"
-           ></pd-input>
-         </pd-form-row>
-       </pd-form-container>
-     `;
-  }
-  _getRadioValue() {
-    if (this.contact) {
-      return this.contact.business ? "business" : "private";
-    }
-    return "private";
-  }
-  _renderViewContact() {
-    if (!this.contact) {
-      return html`<p>Contact undefined</p>`;
-    }
-    const trPhoneNr = transformPhone(this.contact.phone1, this.contact.country || "be");
-    return html`
-       <address>
-         <dl>
-           <dt>${this.addressTitle}</dt>
-           ${this.contact ? html`
-                 <dd>${this.contact.companyName}</dd>
-                 <dd>${this.contact.vatNr}</dd>
-                 <dd>${this._getFullName()}</dd>
-                 <dd>${this._getFullStreet()}</dd>
-                 <dd>${this._getFullLocation()}</dd>
-                 ${this.contact.additionalHint ? html`<dd>${this.contact.additionalHint}</dd>` : ""}
-                 <dd>${this.contact.country}</dd>
-                 
-                 ${this.contact.phone1 ? html`
-                 <dd class="larger">${this.phoneMailLink && trPhoneNr ? html`
-                  <a href="${`tel:${trPhoneNr}`}" 
-                    aria-label="${`Phone call: ${this.contact.phone1}`}" 
-                    class="link-item">
-                    <span style="margin-right: 8px;">${this.contact.phone1}</span>
-                    <pd-icon activeIcon icon="phoneIcon" class="round link-icon"></pd-icon>
-                  </a>
-                  ` : this.contact.phone1}</dd>
-                ` : ""}
-                
-                ${this.contact.email ? html`
-                <dd class="larger">${this.phoneMailLink ? html`
-                  <a href="${`mailto:${this.contact.email}`}" 
-                    aria-label="${`Send mail: ${this.contact.email}`}" 
-                    class="link-item">
-                    <span style="margin-right: 8px;">${this.contact.email}</span>
-                    <pd-icon activeIcon icon="mailIcon" class="round link-icon"></pd-icon>
-                  </a>
-                  ` : this.contact.email}</dd>
-                ` : ""}
-
-                 ${this.contact.btw ? html`<dt>BTW</dt>
-                       <dd>${this.contact.btw}</dd>` : ""}
-                 ${this.contact.kbc ? html`<dt>Bankgegevens</dt>
-                       <dd>${this.contact.kbc}</dd>
-                       <dd>${this.contact.bank}</dd>` : ""}
-               ` : html`${this.addressRef || "--"}`}
-         </dl>
-       </address>
-     `;
-  }
-  _switchAddressType(e) {
-    this._business = e.detail.name === "business";
-  }
-  _isRequired(field) {
-    return this.requiredFields && this.requiredFields.length > 0 ? this.requiredFields.includes(field) : false;
-  }
-  /*
-     validateInput() {
-       const matchForValidate = this.match || {};
-  
-       const companyName = this.business
-         ? this.shadowRoot.getElementById('compNameId').value
-         : undefined;
-       const vatNr = this.business
-         ? this.shadowRoot.getElementById('vatId').value
-         : undefined;
-       const firstName = this.business
-         ? undefined
-         : this.shadowRoot.getElementById('firstNameId').value;
-       const lastName = this.business
-         ? undefined
-         : this.shadowRoot.getElementById('lastNameId').value;
-       const street = this.shadowRoot.getElementById('streetId').value;
-       const streetNr = this.shadowRoot.getElementById('streetNrId').value;
-       const additionalHint =
-         this.shadowRoot.getElementById('additionalHintId').value;
-       const zip = this.shadowRoot.getElementById('zipId').value;
-       const city = this.shadowRoot.getElementById('cityId').value;
-       const phone1 = this.shadowRoot.getElementById('phoneId').value;
-       const email = this.shadowRoot.getElementById('mailId').value;
-  
-       const newErrorMap = new Map();
-  
-       const reqFieldFunc = (field, key, type, mustMatch) => {
-         if (!field || field === '') {
-           newErrorMap.set(
-             key,
-             type !== 'phone'
-               ? 'Vul dit veld in.'
-               : 'Vul dit veld in. Gebruik +32 494 667085.'
-           );
-         } else if (mustMatch && field !== mustMatch) {
-           newErrorMap.set(key, `Not match ${mustMatch}`);
-         } else {
-           switch (type) {
-             case 'vat':
-               // eslint-disable-next-line no-restricted-globals
-               if (!newErrorMap.has(key) && !PdContact._vatIsValid(field)) {
-                 newErrorMap.set(key, 'Formaat BE0123456789 vereist');
-               }
-               break;
-             case 'number':
-               // eslint-disable-next-line no-restricted-globals
-               if (!newErrorMap.has(key) && isNaN(field)) {
-                 newErrorMap.set(key, 'Alleen nummers toegestaan');
-               }
-               break;
-             case 'mail':
-               if (!newErrorMap.has(key) && !PdContact._mailIsValid(field)) {
-                 newErrorMap.set(key, 'Ongeldig e-mailadres');
-               }
-               break;
-             case 'phone':
-               if (!newErrorMap.has(key) && !PdContact._phoneIsValid(field)) {
-                 newErrorMap.set(
-                   key,
-                   'Ongeldig telefoonnummer, gebruik +32 494 667085.'
-                 );
-               }
-               break;
-             default:
-               console.warn('Undefined field: ', type);
-           }
-         }
-       };
-  
-       if (this.business) {
-         reqFieldFunc(companyName, 'companyName');
-         reqFieldFunc(vatNr, 'vatNr', 'vat');
-       } else {
-         reqFieldFunc(firstName, 'firstName');
-         reqFieldFunc(lastName, 'lastName');
-       }
-       reqFieldFunc(street, 'street');
-       reqFieldFunc(streetNr, 'streetNr');
-       reqFieldFunc(zip, 'zip', 'number', matchForValidate.zip);
-       reqFieldFunc(city, 'city');
-       reqFieldFunc(phone1, 'phone1', 'phone');
-       reqFieldFunc(email, 'email', 'mail');
-       this._errorMap = newErrorMap;
-  
-       return new Promise((resolve, reject) => {
-         if (newErrorMap.size > 0) {
-           reject();
-         } else {
-           this.contact = {
-             business: this.business,
-             companyName,
-             vatNr,
-             firstName,
-             lastName,
-             street,
-             streetNr,
-             additionalHint,
-             zip,
-             city,
-             phone1,
-             email,
-           };
-           resolve(this.contact);
-         }
-       });
-     }
-     */
-  _validateForm(e) {
-    if (e.detail && !e.detail.singleElement) {
-      this.shadowRoot.getElementById("contactContainerId").dispatchEvent(
-        new CustomEvent("validate-form", {
-          detail: e.detail
-        })
-      );
-      if (e.detail.errorMap.size === 0 && e.detail.formData) {
-        e.detail.formData[this.id] = this._setFormData();
-      }
-    }
-  }
-  _setFormData() {
-    const companyName = this._business ? this.shadowRoot.getElementById("compNameId").value : void 0;
-    const vatNr = this._business ? this.shadowRoot.getElementById("vatId").value : void 0;
-    const firstName = this._business ? void 0 : this.shadowRoot.getElementById("firstNameId").value;
-    const lastName = this._business ? void 0 : this.shadowRoot.getElementById("lastNameId").value;
-    const street = this.shadowRoot.getElementById("streetId").value;
-    const streetNr = this.shadowRoot.getElementById("streetNrId").value;
-    const additionalHint = this.shadowRoot.getElementById("additionalHintId").value;
-    const zip = this.shadowRoot.getElementById("zipId").value;
-    const city = this.shadowRoot.getElementById("cityId").value;
-    const phone1 = this.shadowRoot.getElementById("phoneId").value;
-    const email = this.shadowRoot.getElementById("mailId").value;
-    return {
-      business: this._business,
-      companyName,
-      vatNr,
-      firstName,
-      lastName,
-      street,
-      streetNr,
-      additionalHint,
-      zip,
-      city,
-      phone1,
-      email
-    };
-  }
-  _getFullName() {
-    return PdContact._getFullVal(this.contact.firstName, this.contact.lastName);
-  }
-  _getFullStreet() {
-    return PdContact._getFullVal(this.contact.street, this.contact.streetNr);
-  }
-  _getFullLocation() {
-    return PdContact._getFullVal(this.contact.zip, this.contact.city);
-  }
-  static _getFullVal(val1, val2, elseStr) {
-    let fullVal = "";
-    if (val1) {
-      fullVal += val1;
-    }
-    if (val2) {
-      fullVal += ` ${val2}`;
-    }
-    return fullVal.length === 0 ? elseStr : fullVal;
-  }
-}
-export {
-  PdContact
-};

package/dist/node_modules/@progressive-development/pd-order/dist/node_modules/@progressive-development/pd-content/pd-collapse.js

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

package/dist/node_modules/@progressive-development/pd-order/dist/node_modules/@progressive-development/pd-content/pd-edit-content.js

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