@progressive-development/pd-order 0.1.129 → 0.5.0

package/dist/index.js

@@ -0,0 +1,12 @@
+import { PdOrderContacts } from "./src/PdOrderContacts.js";
+import { PdOrderSummary } from "./src/PdOrderSummary.js";
+import { templates } from "./locales/be.js";
+import { templates as templates2 } from "./locales/de.js";
+import { templates as templates3 } from "./locales/en.js";
+export {
+  PdOrderContacts,
+  PdOrderSummary,
+  templates as beTemplates,
+  templates2 as deTemplates,
+  templates3 as enTemplates
+};

package/dist/locales/be.js

@@ -1,10 +1,20 @@
 import { html } from "lit";
 const templates = {
+  "pd.order.contacts.adminContact.inputHeader": `Adres van de administratie (optioneel)`,
+  "pd.order.contacts.adminContact.otherAdminLink": `Nieuw administratieadres toevoegen`,
+  "pd.order.contacts.adminContact.sameAdminLink": `Klantadres gebruiken als administratieadres`,
+  "pd.order.contacts.adminContact.sameAdminText": `Het administratieadres is hetzelfde als het klantadres.`,
   "pd.order.contacts.billingContact.inputHeader": `Facturatieadres`,
   "pd.order.contacts.billingContact.otherBillingLink": `Gebruik een ander facturatieadres`,
   "pd.order.contacts.billingContact.sameBillingLink": `Gebruik hetzelfde facturatieadres`,
   "pd.order.contacts.billingContact.sameBillingText": `Het adres wordt ook gebruikt als facturatieadres.`,
   "pd.order.contacts.orderContact.inputHeader": `Adres`,
+  "pd.order.contacts.propertyContact.checkBox": `Is de klant een verhuurder?`,
+  "pd.order.contacts.propertyContact.inputHeader": `Adres van het pand`,
+  "pd.order.contacts.summary.adminContact.title": `Administratie`,
+  "pd.order.contacts.summary.billingContact.title": `Factuuradres`,
+  "pd.order.contacts.summary.orderContact.title": `Adres`,
+  "pd.order.contacts.summary.propertyContact.title": `Pand`,
   "pd.order.summary.agree.link": html`Ga akkoord met onze <a @click="${0}" @keypress="${1}">algemene voorwaarden</a>.`,
   "pd.order.summary.agree.required": `Ga akkoord met de algemene voorwaarden om verder te gaan.`,
   "pd.order.summary.billing": `Factuur`,

package/dist/locales/de.js

@@ -1,10 +1,20 @@
 import { html } from "lit";
 const templates = {
   "pd.order.contacts.orderContact.inputHeader": `Adresse`,
-  "pd.order.contacts.billingContact.inputHeader": `Rechnungsadresse`,
-  "pd.order.contacts.billingContact.sameBillingLink": `Gleiche Rechnungsadresse`,
-  "pd.order.contacts.billingContact.sameBillingText": `Die Adresse, wird auch als Rechnungsadresse verwendet.`,
-  "pd.order.contacts.billingContact.otherBillingLink": `Andere Rechnungsadresse verwenden`,
+  "pd.order.contacts.billingContact.inputHeader": `Rechnungsadresse (optional)`,
+  "pd.order.contacts.billingContact.sameBillingLink": `Kundenadresse als Rechnungsadresse verwenden`,
+  "pd.order.contacts.billingContact.sameBillingText": `Rechnungsadresse entspricht der Kundenadresse.`,
+  "pd.order.contacts.billingContact.otherBillingLink": `Neue Rechnungsadresse hinzufügen`,
+  "pd.order.contacts.propertyContact.checkBox": `Ist der Kunde Vermieter?`,
+  "pd.order.contacts.propertyContact.inputHeader": `Adresse der Immobilie`,
+  "pd.order.contacts.adminContact.inputHeader": `Adresse der Verwaltung (optional)`,
+  "pd.order.contacts.adminContact.sameAdminLink": `Kundenadresse als Verwaltungsadresse verwenden`,
+  "pd.order.contacts.adminContact.sameAdminText": `Verwaltungsadresse entspricht der Kundenadresse.`,
+  "pd.order.contacts.adminContact.otherAdminLink": `Neue Verwaltungsadresse hinzufügen`,
+  "pd.order.contacts.summary.orderContact.title": `Adresse`,
+  "pd.order.contacts.summary.billingContact.title": `Rechnungsadresse`,
+  "pd.order.contacts.summary.propertyContact.title": `Immobilie`,
+  "pd.order.contacts.summary.adminContact.title": `Verwaltung`,
   "pd.order.summary.title": `Übersicht`,
   "pd.order.summary.billing": `Rechnung`,
   "pd.order.summary.agree.required": `Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.`,

package/dist/locales/en.js

@@ -1,10 +1,20 @@
 import { html } from "lit";
 const templates = {
+  "pd.order.contacts.adminContact.inputHeader": `Administration address (optional)`,
+  "pd.order.contacts.adminContact.otherAdminLink": `Add a new administration address`,
+  "pd.order.contacts.adminContact.sameAdminLink": `Use customer address as administration address`,
+  "pd.order.contacts.adminContact.sameAdminText": `The administration address matches the customer address.`,
   "pd.order.contacts.billingContact.inputHeader": `Billing Address`,
   "pd.order.contacts.billingContact.otherBillingLink": `Use a different billing address`,
   "pd.order.contacts.billingContact.sameBillingLink": `Use the same billing address`,
   "pd.order.contacts.billingContact.sameBillingText": `The address will also be used as the billing address.`,
   "pd.order.contacts.orderContact.inputHeader": `Address`,
+  "pd.order.contacts.propertyContact.checkBox": `Is the customer a landlord?`,
+  "pd.order.contacts.propertyContact.inputHeader": `Property address`,
+  "pd.order.contacts.summary.adminContact.title": `Administration`,
+  "pd.order.contacts.summary.billingContact.title": `Billing address`,
+  "pd.order.contacts.summary.orderContact.title": `Address`,
+  "pd.order.contacts.summary.propertyContact.title": `Property`,
   "pd.order.summary.agree.link": html`Agree to our <a @click="${0}" @keypress="${1}">terms and conditions</a>.`,
   "pd.order.summary.agree.required": `Please agree to the terms and conditions to proceed.`,
   "pd.order.summary.billing": `Invoice`,

package/dist/pd-order-contacts.js

@@ -1,2 +1,4 @@
 import { PdOrderContacts } from "./src/PdOrderContacts.js";
-window.customElements.define("pd-order-contacts", PdOrderContacts);
+if (!customElements.get("pd-order-contacts")) {
+  window.customElements.define("pd-order-contacts", PdOrderContacts);
+}

package/dist/pd-order-summary.js

@@ -1,2 +1,4 @@
 import { PdOrderSummary } from "./src/PdOrderSummary.js";
-window.customElements.define("pd-order-summary", PdOrderSummary);
+if (!customElements.get("pd-order-summary")) {
+  window.customElements.define("pd-order-summary", PdOrderSummary);
+}

package/dist/src/PdOrderContacts.js

@@ -1,13 +1,36 @@
 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 "@progressive-development/pd-content/pd-collapse";
+import "@progressive-development/pd-contact/pd-contact";
+import "@progressive-development/pd-forms/pd-checkbox";
+import "@progressive-development/pd-forms/pd-form-row";
+import "@progressive-development/pd-forms/pd-radio-group";
 import { PDFontStyles } from "@progressive-development/pd-shared-styles";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 class PdOrderContacts extends LitElement {
+  static get properties() {
+    return {
+      /**
+        * List with required contact fields, if not set use default (previous existing values to be consitent during update)
+        */
+      summary: { type: Boolean },
+      contactTitle: { type: Object },
+      requiredFields: { type: Array },
+      orderContact: { type: Object },
+      billingContact: { type: Object },
+      adminContact: { type: Object },
+      propertyContact: { type: Object },
+      withPayment: { type: Boolean },
+      withPropertyOwner: { type: Boolean },
+      match: { type: Object },
+      _ownBillingContact: { type: Boolean, state: true },
+      _ownAdminContact: { type: Boolean, state: true },
+      _isPropertyOwner: { type: Boolean, state: true }
+    };
+  }
   static get styles() {
     return [
       PDFontStyles,
@@ -43,33 +66,44 @@ class PdOrderContacts extends LitElement {
          flex-wrap: wrap;
          gap: 10px;
        }
- 
-       .first-contact {
-         min-width: 200px;
+
+       .summary-box pd-contact {
+          min-width: 150px;
        }
+
+      .property-owner-box {
+        border: 2px solid #007B8F; /* Dezenter, moderner Rahmen in einer angenehmen Farbe */
+        border-radius: 8px; /* Abgerundete Ecken für eine weiche Optik */
+        padding: 16px; /* Innenabstand, damit der Inhalt nicht direkt am Rahmen klebt */
+        margin: 16px 0; /* Abstand nach oben und unten für bessere Trennung */
+        background-color: #F8FAFB; /* Heller Hintergrund für visuelle Abgrenzung */
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten für ein modernes Design */
+      }
+
      `
     ];
   }
-  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._ownAdminContact = false;
+    this._isPropertyOwner = false;
     this.requiredFields = [];
+    this.contactTitle = {};
     this.match = {};
   }
+  update(changedProperties) {
+    if (changedProperties.has("billingContact")) {
+      this._ownBillingContact = this.billingContact !== void 0 && this.billingContact !== null;
+    }
+    if (changedProperties.has("adminContact")) {
+      this._ownAdminContact = this.adminContact !== void 0 && this.adminContact !== null;
+    }
+    if (changedProperties.has("propertyContact")) {
+      this._isPropertyOwner = this.propertyContact !== void 0 && this.propertyContact !== null;
+    }
+    super.update(changedProperties);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("validate-form", this._validateForm);
@@ -98,9 +132,10 @@ class PdOrderContacts extends LitElement {
     return this._renderEditContacts();
   }
   _renderEditContacts() {
-    return html`
+    return html`       
+
        <pd-collapse id="orderContactCollapseId" active>
-         <div slot="header" class="header">${msg("Adresse", { id: "pd.order.contacts.orderContact.inputHeader" })}</div>
+         <div slot="header" class="header">${this.contactTitle.orderInputContact || msg("Adresse", { id: "pd.order.contacts.orderContact.inputHeader" })}</div>
          <pd-contact
            id="orderContactId"
            class="collapse-contact"
@@ -109,18 +144,18 @@ class PdOrderContacts extends LitElement {
            .contact="${this.orderContact}"
            .match="${this.match}"
          ></pd-contact>
-       </pd-collapse>
+       </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="header" class="header">${this.contactTitle.billingInputContact || msg("Rechnungsadresse (optional)", { 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" })}
+                      ${msg("Kundenadresse als Rechnungsadresse verwenden", { id: "pd.order.contacts.billingContact.sameBillingLink" })}
                     </a>
                   </p>
                   <pd-contact
@@ -130,35 +165,102 @@ class PdOrderContacts extends LitElement {
                     .contact="${this.billingContact}"
                   ></pd-contact>
                 ` : html`
-                <p>${msg("Die Adresse, wird auch als Rechnungsadresse verwendet.", { id: "pd.order.contacts.billingContact.sameBillingText" })}</p>
+                <p>${msg("Rechnungsadresse entspricht der Kundenadresse.", { id: "pd.order.contacts.billingContact.sameBillingText" })}</p>
                 <p>
                   <a @click="${() => {
       this._ownBillingContact = true;
     }}">
-                    ${msg("Andere Rechnungsadresse verwenden", { id: "pd.order.contacts.billingContact.otherBillingLink" })}
+                    ${msg("Neue Rechnungsadresse hinzufügen", { id: "pd.order.contacts.billingContact.otherBillingLink" })}
                   </a>
                 </p>
             `}
           </div>
         </pd-collapse>` : ""}
-     `;
+
+      ${this.withPropertyOwner ? html`        
+        
+      <div class="property-owner-box">
+        
+        <pd-checkbox id="isPropertyOwnerId" value="${this._isPropertyOwner}"
+          @field-change="${(e) => this._isPropertyOwner = e.detail.value === "true"}">${msg("Ist der Kunde Vermieter?", { id: "pd.order.contacts.propertyContact.checkBox" })}</pd-checkbox>
+
+        ${this._isPropertyOwner ? html`
+        
+        <pd-collapse id="propertyContactCollapseId" style="padding-top: 20px;">
+          <div slot="header" class="header">${this.contactTitle.propertyInputContact || msg("Adresse der Immobilie", { id: "pd.order.contacts.propertyContact.inputHeader" })}</div>
+          <div slot="content">
+            <pd-contact
+              id="propertyContactId"
+              class="collapse-contact"
+              .requiredField="${this.requiredFields}"
+              .inputFields="${["street", "city", "additionalHint"]}"
+              .contact="${this.propertyContact}"
+            ></pd-contact>          
+          </div>
+        </pd-collapse>
+
+        <pd-collapse id="adminContactCollapseId">
+          <div slot="header" class="header">${this.contactTitle.adminInputContact || msg("Adresse der Verwaltung (optional)", { id: "pd.order.contacts.adminContact.inputHeader" })}</div>
+          <div slot="content">
+            ${this._ownAdminContact ? html`
+                <p>
+                  <a @click="${() => {
+      this._ownAdminContact = false;
+    }}">
+                    ${msg("Kundenadresse als Verwaltungsadresse verwenden", { id: "pd.order.contacts.adminContact.sameAdminLink" })}
+                  </a>
+                </p>
+                <pd-contact
+                  id="adminContactId"
+                  class="collapse-contact"
+                  .requiredField="${this.requiredFields}"
+                  .contact="${this.adminContact}"
+                ></pd-contact>
+              ` : html`
+              <p>${msg("Verwaltungsadresse entspricht der Kundenadresse.", { id: "pd.order.contacts.adminContact.sameAdminText" })}</p>
+              <p>
+                <a @click="${() => {
+      this._ownAdminContact = true;
+    }}">
+                  ${msg("Neue Verwaltungsadresse hinzufügen", { id: "pd.order.contacts.adminContact.otherAdminLink" })}
+                </a>
+              </p>
+          `}
+          </div>
+        </pd-collapse>        
+        ` : ""}
+           
+      </div>` : ""}      
+      `;
   }
   _renderSummary() {
     return html`
        <div class="summary-box">
-         <pd-contact
-           class="first-contact"
-           addressTitle="Onderhoud"
+        ${this.orderContact ? html` 
+        <pd-contact
+           addressTitle="${this.contactTitle.orderSummaryContact || msg("Adresse", { id: "pd.order.contacts.summary.orderContact.title" })}"
            .contact="${this.orderContact}"
            summary
-         ></pd-contact>
+         ></pd-contact>` : ""}
          ${this.billingContact ? html`
          <pd-contact
-           addressTitle="Facturatie"
-           addressRef="adres onderhoud"
+           addressTitle="${this.contactTitle.billingSummaryContact || msg("Rechnungsadresse", { id: "pd.order.contacts.summary.billingContact.title" })}"           
            .contact="${this.billingContact}"
            summary
          ></pd-contact>` : ""}
+         ${this.propertyContact ? html`
+         <pd-contact
+           addressTitle="${this.contactTitle.propertySummaryContact || msg("Immobilie", { id: "pd.order.contacts.summary.propertyContact.title" })}"           
+           .contact="${this.propertyContact}"
+           summary
+         ></pd-contact>` : ""}
+         ${this.adminContact ? html`
+         <pd-contact
+           addressTitle="${this.contactTitle.adminSummaryContact || msg("Verwaltung", { id: "pd.order.contacts.summary.adminContact.title" })}"
+           .contact="${this.adminContact}"
+           summary
+         ></pd-contact>` : ""}
+         
        </div>
      `;
   }
@@ -183,6 +285,26 @@ class PdOrderContacts extends LitElement {
           this.shadowRoot.getElementById("billingContactCollapseId").open();
         }
       }
+      if (this._isPropertyOwner) {
+        this.shadowRoot.getElementById("propertyContactId").dispatchEvent(
+          new CustomEvent("validate-form", {
+            detail: e.detail
+          })
+        );
+        if (e.detail.errorMap.size > errorSize) {
+          this.shadowRoot.getElementById("propertyContactCollapseId").open();
+        }
+      }
+      if (this._isPropertyOwner && this._ownAdminContact) {
+        this.shadowRoot.getElementById("adminContactId").dispatchEvent(
+          new CustomEvent("validate-form", {
+            detail: e.detail
+          })
+        );
+        if (e.detail.errorMap.size > errorSize) {
+          this.shadowRoot.getElementById("adminContactCollapseId").open();
+        }
+      }
     }
   }
 }

package/dist/src/PdOrderSummary.js

@@ -1,13 +1,13 @@
 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 { format } from "fecha";
+import "@progressive-development/pd-forms/pd-checkbox";
+import "@progressive-development/pd-forms/pd-radio-group";
+import "@progressive-development/pd-forms/pd-form-container";
+import "@progressive-development/pd-forms/pd-form-row";
+import "@progressive-development/pd-price/pd-pricetable";
+import "@progressive-development/pd-dialog/pd-popup";
+import "@progressive-development/pd-content/pd-edit-content";
 import { PDFontStyles, PDColorStyles } from "@progressive-development/pd-shared-styles";
 import "../pd-order-contacts.js";
 /**

package/package.json

@@ -3,16 +3,16 @@
   "description": "Progressive Development Order Component",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.1.129",
+  "version": "0.5.0",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./pd-order-contacts": "./dist/pd-order-contacts.js",
     "./pd-order-summary": "./dist/pd-order-summary.js",
-    "./locales/be": "./dist/generated/locales/be.js",
-    "./locales/de": "./dist/generated/locales/de.js",
-    "./locales/en": "./dist/generated/locales/en.js"
+    "./locales/be": "./dist/locales/be.js",
+    "./locales/de": "./dist/locales/de.js",
+    "./locales/en": "./dist/locales/en.js"
   },
   "files": [
     "dist/",
@@ -35,32 +35,34 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@progressive-development/pd-calendar": "^0.2.21",
-    "@progressive-development/pd-contact": "^0.1.69",
-    "@progressive-development/pd-content": "^0.1.83",
-    "@progressive-development/pd-dialog": "^0.1.84",
-    "@progressive-development/pd-forms": "^0.2.16",
-    "@progressive-development/pd-price": "^0.1.10",
+    "@progressive-development/pd-content": "^0.5.1",
+    "@progressive-development/pd-dialog": "^0.5.0",
+    "@progressive-development/pd-price": "^0.5.0",
+    "@progressive-development/pd-forms": "^0.5.0",
+    "@progressive-development/pd-contact": "^0.5.2",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "fecha": "^4.2.3",
     "lit": "^2.8.0",
-    "@lit/localize": "^0.11.4"
+    "@lit/localize": "^0.12.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.4",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.7.2",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/web-components": "^7.5.1",
-    "@storybook/web-components-vite": "^7.6.4",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "@storybook/web-components": "^8.0.10",
+    "@storybook/web-components-vite": "^8.0.10",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "storybook": "^7.6.4",
+    "prettier": "^2.8.8",    
+    "rollup-plugin-visualizer": "^5.13.1",
+    "storybook": "^8.0.10",
     "vite": "^5.4.11",
     "vitest": "^2.1.8"
   },

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

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