@progressive-development/pd-contact 0.1.64 → 0.1.66

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.64",
+  "version": "0.1.66",
   "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.16",
+    "@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
         */
@@ -302,6 +348,7 @@
   }
 
    _renderViewContact() {
+     const trPhoneNr = transformPhone(this.contact.phone1, this.contact.country || "de");
      return html`
        <address>
          <dl>
@@ -313,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"
 };
+