@progressive-development/pd-contact 0.1.63 → 0.1.65

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,8 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-forms": "^0.2.14",
+    "@progressive-development/pd-forms": "^0.2.15",
+    "@progressive-development/pd-icon": "^0.1.21",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.2.0"
   },

package/src/PdContact.js

@@ -7,13 +7,51 @@
 
  import { PDFontStyles } from '@progressive-development/pd-shared-styles';
 
+ import '@progressive-development/pd-icon/pd-icon.js';
+
  import '@progressive-development/pd-forms/pd-checkbox.js';
  import '@progressive-development/pd-forms/pd-form-container.js';
  import '@progressive-development/pd-forms/pd-form-row.js';
  import '@progressive-development/pd-forms/pd-input.js';
  import '@progressive-development/pd-forms/pd-radio-group.js';
 
- 
+ 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 ""; // Ungültige Eingabe zurücksetzen
+  }
+
+  // Hol das Länderpräfix basierend auf dem übergebenen Land
+  const countryPrefix = countryPrefixes[country];
+  if (!countryPrefix) {
+    throw new Error(`Unbekanntes Land: ${country}`);
+  }
+
+  // Entferne alle Leerzeichen und Sonderzeichen (außer "+")
+  const cleanedPhone = phone.replace(/\s+/g, "").replace(/[^0-9+]/g, "");
+
+  // Prüfe, ob die Nummer mit "+" beginnt (internationale Nummer)
+  if (cleanedPhone.startsWith("+")) {
+    return cleanedPhone; // Nummer ist bereits international
+  }
+
+  // Prüfe, ob die Nummer mit "0" beginnt und füge das Ländercode-Präfix hinzu
+  if (cleanedPhone.startsWith("0")) {
+    return countryPrefix + cleanedPhone.slice(1); // "0" durch Präfix ersetzen
+  }
+
+  // Wenn die Nummer weder mit "+" noch "0" beginnt, ist sie ungültig
+  return "";
+}
+
+
  export class PdContact extends LitElement {
    static get styles() {
      return [
@@ -55,6 +93,10 @@
        .contact-form {
          --row-padding-top: 10px;
        }
+
+       .phone-icon {
+
+       }
      `];
    }
 
@@ -63,6 +105,10 @@
        
        addressTitle: { type: String },
        addressRef: { type: String },       
+       /**
+        * show (true) or not (false) tel number as link
+        */
+       phoneCallLink: { type: Boolean },
        /**
         * summary (true) or view (false) contact data
         */
@@ -140,7 +186,7 @@
        <pd-form-container id="contactContainerId" requiredFieldInfo>
          <pd-form-row id="testFormId">
            <pd-radio-group
-             class="quarter4"
+             class="quarter3"
              label="Type"
              required
              value="${this._getRadioValue()}"
@@ -159,16 +205,18 @@
                <pd-form-row class="contact-form">
                  <pd-input
                    id="compNameId"
-                   class="quarter2"
+                   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="quarter2"
+                   class="quarter3"
                    label="Ondernemingsnr"
                    ?required="${this._isRequired("vatNr")}"
                    field-type="vat"
@@ -182,16 +230,18 @@
                <pd-form-row class="contact-form">
                  <pd-input
                    id="firstNameId"
-                   class="quarter2"
+                   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="quarter2"
+                   class="quarter3"
                    label="Naam"
                    valueName="lastName"
                    value="${this.contact ? this.contact.lastName : ""}"
@@ -203,7 +253,7 @@
          <pd-form-row class="contact-form">
            <pd-input
              id="streetId"
-             class="quarter3"
+             class="quarter2"
              label="Straat"
              valueName="street"
              value="${this.contact ? this.contact.street : ""}"
@@ -218,22 +268,14 @@
              value="${this.contact ? this.contact.streetNr : ""}"
              ?required="${this._isRequired("streetNr")}"
            ></pd-input>
-         </pd-form-row>
-         <pd-form-row class="contact-form">
-           <pd-input
-             class="quarter4"
-             id="additionalHintId"
-             label="Extra informatie"
-             value="${this.contact ? this.contact.additionalHint : ""}"
-           ></pd-input>
-         </pd-form-row>
+         </pd-form-row>         
          <pd-form-row class="contact-form">
            ${this.match && this.match.zip
              ? html`
                  <pd-input
                    readonly
                    id="zipId"
-                   class="quarter2"
+                   class="quarter1"
                    label="Postcode"
                    valueName="zip"
                    value="${this.match ? this.match.zip || '' : ''}"
@@ -242,7 +284,7 @@
              : html`
                  <pd-input
                    id="zipId"
-                   class="quarter2"
+                   class="quarter1"
                    label="Postcode"
                    field-type="number"
                    valueName="zip"
@@ -261,10 +303,18 @@
              ?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="quarter2"
+             class="quarter3"
              label="Telefoon"
              name="phone"
              valueName="phone1"
@@ -273,9 +323,11 @@
              autoCompleteName="tel"
              ?required="${this._isRequired("phone1")}"
            ></pd-input>
+          </pd-form-row>
+          <pd-form-row class="contact-form">
            <pd-input
              id="mailId"
-             class="quarter2"
+             class="quarter3"
              label="E-mail"
              field-type="mail"
              valueName="email"
@@ -296,6 +348,7 @@
   }
 
    _renderViewContact() {
+     const trPhoneNr = transformPhone(this.contact.phone1, this.contact.country || "de");
      return html`
        <address>
          <dl>
@@ -307,8 +360,16 @@
                  <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>
-                 <dd>${this.contact.phone1}</dd>
+                 <dd>${this.phoneCallLink && trPhoneNr ? html`
+                  <a href="${`tel:${trPhoneNr}`}" 
+                    aria-label="${`Phone call: ${this.contact.phone1}`}" 
+                    style="display: flex; align-items: center; text-decoration: none; color: inherit;">
+                    <span style="margin-right: 8px;">${this.contact.phone1}</span>
+                    <pd-icon icon="phoneIcon" class="round small phone-icon"></pd-icon>
+                  </a>
+                  ` : this.contact.phone1}</dd>
                  <dd>${this.contact.email}</dd>
 
                  ${this.contact.btw

package/stories/index.stories.js

@@ -15,11 +15,11 @@ function Template() {
   `;
 }
 
-function TemplateView({summary}) {
+function TemplateView({summary, phoneCallLink}) {
   console.log(summary);
   return html`    
     <h3>View Contact</h3>
-    <pd-contact ?summary="${summary}" .contact="${{
+    <pd-contact ?summary="${summary}" ?phoneCallLink="${phoneCallLink}" .contact="${{
                            firstName: 'Peter', 
                            lastName: 'Musterman',
                            street: 'Musterstrasse',
@@ -59,6 +59,12 @@ ContactView.args = {
   summary: "true"
 };
 
+export const ContactViewPhone = TemplateView.bind({});
+ContactViewPhone.args = {  
+  summary: "true",
+  phoneCallLink: "true"
+};
+
 export const ContactPreparedForm = TemplateView.bind({});
 ContactView.args = {  
   summary: "false"
@@ -66,5 +72,7 @@ ContactView.args = {
 
 export const ContactPreparedFormCompany = TemplateViewBusiness.bind({});
 ContactView.args = {  
-  summary: "false"
+  summary: "false",
+  phoneCallLink: "false"
 };
+