@progressive-development/pd-order 0.1.125 → 0.1.127

package/{src → dist/src}/PdOrderContacts.js

@@ -1,25 +1,13 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/anchor-is-valid */
+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 { PDFontStyles } from "@progressive-development/pd-shared-styles";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
- import { LitElement, html, css } from 'lit';
-
- import '@progressive-development/pd-content/pd-collapse.js';
- import '@progressive-development/pd-contact/pd-contact.js';
- 
- import { PDFontStyles } from '@progressive-development/pd-shared-styles';
-
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
-export class PdOrderContacts extends LitElement {
-
+class PdOrderContacts extends LitElement {
   static get styles() {
     return [
       PDFontStyles,
@@ -59,69 +47,60 @@ export class PdOrderContacts extends LitElement {
        .first-contact {
          min-width: 200px;
        }
-     `];
-   }
- 
-   static get properties() {
-     return {
+     `
+    ];
+  }
+  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() {
+      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();
-    // add validation event listener
-    this.addEventListener('validate-form', this._validateForm);
+    this.addEventListener("validate-form", this._validateForm);
   }
-
   disconnectedCallback() {
     super.connectedCallback();
-    // add validation event listener
-    this.removeEventListener('validate-form', this._validateForm);
+    this.removeEventListener("validate-form", this._validateForm);
   }
- 
   firstUpdated() {
-    // only one of the collapse shoud be open
-    this.addEventListener('toggle-accordion', e => {
-      const origin = e.composedPath()[0]; // Warum geht target nicht?
+    this.addEventListener("toggle-accordion", (e) => {
+      const origin = e.composedPath()[0];
       const collapsiblePanels = this.shadowRoot.querySelectorAll(
-        'pd-collapse'
+        "pd-collapse"
       );
-      collapsiblePanels.forEach(panel => {
+      collapsiblePanels.forEach((panel) => {
         if (panel !== origin) {
           panel.close();
         }
       });
     });
-   }
-
-   render() {
-     if (this.summary) {
-       return this._renderSummary();
-     }
-     return this._renderEditContacts();
-   }
- 
-   _renderEditContacts() {
-     return html`
+  }
+  render() {
+    if (this.summary) {
+      return this._renderSummary();
+    }
+    return this._renderEditContacts();
+  }
+  _renderEditContacts() {
+    return html`
        <pd-collapse id="orderContactCollapseId" active>
-         <div slot="header" class="header">Adres onderhoud</div>
+         <div slot="header" class="header">${msg("Adresse", { id: "pd.order.contacts.orderContact.inputHeader" })}</div>
          <pd-contact
            id="orderContactId"
            class="collapse-contact"
@@ -134,14 +113,15 @@ export class PdOrderContacts extends LitElement {
  
        ${this.withPayment ? html`
         <pd-collapse id="billingContactCollapseId">
-          <div slot="header" class="header">Facturatieadres</div>
+          <div slot="header" class="header">${msg("Rechnungsadresse", { id: "pd.order.contacts.billingContact.inputHeader" })}</div>
           <div slot="content">
-            ${this._ownBillingContact
-              ? html`
+            ${this._ownBillingContact ? html`
                   <p>
-                    <a @click="${() => {this._ownBillingContact = false;}}"
-                      >Gebruik adres onderhoud als facturatieadres</a
-                    >
+                    <a @click="${() => {
+      this._ownBillingContact = false;
+    }}">
+                      ${msg("Gleiche Rechnungsadresse", { id: "pd.order.contacts.billingContact.sameBillingLink" })}
+                    </a>
                   </p>
                   <pd-contact
                     id="billingContactId"
@@ -149,21 +129,22 @@ export class PdOrderContacts extends LitElement {
                     .requiredField="${this.requiredFields}"
                     .contact="${this.billingContact}"
                   ></pd-contact>
-                `
-              : html`
-                <p>Het adres waar het onderhoud plaatsvindt, wordt gebruikt als facturatieadres.</p>
+                ` : html`
+                <p>${msg("Die Adresse, wird auch als Rechnungsadresse verwendet.", { id: "pd.order.contacts.billingContact.sameBillingText" })}</p>
                 <p>
                   <a @click="${() => {
-                    this._ownBillingContact = true;}}">Creëer een ander facturatieadres.</a>
+      this._ownBillingContact = true;
+    }}">
+                    ${msg("Andere Rechnungsadresse verwenden", { id: "pd.order.contacts.billingContact.otherBillingLink" })}
+                  </a>
                 </p>
             `}
           </div>
-        </pd-collapse>`: ''}
+        </pd-collapse>` : ""}
      `;
-   }
- 
-   _renderSummary() {
-     return html`
+  }
+  _renderSummary() {
+    return html`
        <div class="summary-box">
          <pd-contact
            class="first-contact"
@@ -177,26 +158,21 @@ export class PdOrderContacts extends LitElement {
            addressRef="adres onderhoud"
            .contact="${this.billingContact}"
            summary
-         ></pd-contact>` : ''}
+         ></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();
+        this.shadowRoot.getElementById("orderContactCollapseId").open();
       }
-
-      // if billing is set too
       if (this._ownBillingContact) {
         this.shadowRoot.getElementById("billingContactId").dispatchEvent(
           new CustomEvent("validate-form", {
@@ -204,10 +180,12 @@ export class PdOrderContacts extends LitElement {
           })
         );
         if (e.detail.errorMap.size > errorSize) {
-          this.shadowRoot.getElementById('billingContactCollapseId').open();
+          this.shadowRoot.getElementById("billingContactCollapseId").open();
         }
       }
     }
   }
 }
- 
+export {
+  PdOrderContacts
+};

package/{src → dist/src}/PdOrderSummary.js

@@ -1,40 +1,28 @@
-/* eslint-disable lit-a11y/anchor-is-valid */
+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 { PDFontStyles, PDColorStyles } from "@progressive-development/pd-shared-styles";
+import "../pd-order-contacts.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
- import { LitElement, html, css } from 'lit';
- import { format } from 'fecha';
- 
- import '@progressive-development/pd-forms/pd-checkbox.js';
- import '@progressive-development/pd-forms/pd-radio-group.js';
- import '@progressive-development/pd-content/pd-edit-content.js';
- import '@progressive-development/pd-price/pd-pricetable.js';
- import '@progressive-development/pd-dialog/pd-popup.js';
- import '@progressive-development/pd-forms/pd-form-container.js';
- import '@progressive-development/pd-forms/pd-form-row.js';
-
- import { PDFontStyles, PDColorStyles } from '@progressive-development/pd-shared-styles';
-
- import '../pd-order-contacts.js';
-  
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
- export class PdOrderSummary extends LitElement {
-
+class PdOrderSummary extends LitElement {
   /**
     * @event go-to
     */
-
-   static get styles() {
-     return [
-       PDFontStyles, PDColorStyles,
-       css`
+  static get styles() {
+    return [
+      PDFontStyles,
+      PDColorStyles,
+      css`
        :host {
          display: block;
        }
@@ -93,58 +81,52 @@
            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() {
-
+     `
+    ];
+  }
+  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>Overzicht</h3>
+       <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`
+      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}"
@@ -153,13 +135,13 @@
                   <slot name="${step.key}"></slot>
                 </pd-edit-content>
               `;
-          }
-        })}
+      }
+    })}
        </div>
  
        ${this.order.priceData ? html`
         <div class="payment">
-          <h3>Facturatie</h3>
+          <h3>${msg("Rechnung", { id: "pd.order.summary.billing" })}</h3>
           <!--
           <pd-radio-group id="paymentGroupId" style="--group-direction: column;">
             <pd-checkbox name="direct" value="false">
@@ -178,7 +160,7 @@
             .priceData="${this.order.priceData}"
           ></pd-pricetable>
         </div>
-        ` : ''}          
+        ` : ""}          
 
       ${this.withAgreement ? html`
       <pd-form-container id="submitSummaryFormId">
@@ -188,14 +170,12 @@
             valueName="agreeId"
             class="agree-box"
             required
-            requiredMsg="Ga akkoord met de algemene voorwaarden om uw order te bevestigen."
+            requiredMsg="${msg("Bitte stimmen Sie den Allgemeinen Geschäftsbedingungen zu, um fortzufahren.", { id: "pd.order.summary.agree.required" })}"
           >
-            Ga akkoord met onze
-            <a
-              @click="${this._openTermsAndConditions}"
-              @keypress="${this._openTermsAndConditions}"
-              >algemene voorwaarden</a
-            >
+            ${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>
@@ -205,9 +185,8 @@
       </pd-popup>
       ` : ""}      
      `;
-   }
-
-   _validateForm(e) {    
+  }
+  _validateForm(e) {
     if (e.detail && !e.detail.singleElement && this.withAgreement) {
       this.shadowRoot.getElementById("submitSummaryFormId").dispatchEvent(
         new CustomEvent("validate-form", {
@@ -216,18 +195,16 @@
       );
     }
   }
-
-   _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`
+  _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}"
@@ -235,17 +212,15 @@
        >
        </pd-edit-content>
      `;
-   }
- 
-   _getContactsSummary(index, step) {
-     return html`
+  }
+  _getContactsSummary(index, step) {
+    return html`
        <pd-edit-content
          contentTitle="${step.name}"
          stepNumber="${index}"
          ?editDisabled="${this.order.withLogin}"
        >
-         ${this.order.contacts
-           ? html`
+         ${this.order.contacts ? html`
                <pd-order-contacts
                  ?withPayment="${this.withPayment}"
                  .orderContact="${this.order.contacts.orderContact}"
@@ -253,24 +228,15 @@
                  summary
                >
                </pd-order-contacts>
-             `
-           : ''}
+             ` : ""}
        </pd-edit-content>
      `;
-   }
-
- 
-   _openTermsAndConditions(e) {
-     // TODO: [TIM-28] Bei key-pressed event => Auf enter prüfen...
- 
-     // Alternative über eigenen Link: window.open(url, '_blank').focus();
- 
-     // open popup
-     this.shadowRoot.getElementById('agreePopupId').showPopup();
- 
-     // stop event, do not edit check-box, when link is clicked
-     e.stopPropagation();
-   }
-
+  }
+  _openTermsAndConditions(e) {
+    this.shadowRoot.getElementById("agreePopupId").showPopup();
+    e.stopPropagation();
+  }
 }
- 
+export {
+  PdOrderSummary
+};

package/package.json

@@ -3,14 +3,23 @@
   "description": "Progressive Development Order Component",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.1.125",
+  "version": "0.1.127",
   "exports": {
     "./pd-order-contacts": "./dist/pd-order-contacts.js",
-    "./pd-order-summary": "./dist/pd-order-summary.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"
   },
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "dev": "vite",
+    "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.{js,html}\" --check --ignore-path .gitignore",
@@ -31,7 +40,8 @@
     "@progressive-development/pd-price": "^0.1.10",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "fecha": "^4.2.3",
-    "lit": "^2.8.0"
+    "lit": "^2.8.0",
+    "@lit/localize": "^0.11.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -48,7 +58,8 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
     "storybook": "^7.6.4",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../pd-order.js';
-
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <pd-order .title=${title}>
-          some light-dom
-        </pd-order>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/pd-order-contacts.js

@@ -1,3 +0,0 @@
-import { PdOrderContacts } from './src/PdOrderContacts.js';
-
-window.customElements.define('pd-order-contacts', PdOrderContacts);

package/pd-order-summary.js

@@ -1,3 +0,0 @@
-import { PdOrderSummary } from './src/PdOrderSummary.js';
-
-window.customElements.define('pd-order-summary', PdOrderSummary);