@progressive-development/pd-page 0.1.54 → 0.1.56

package/lit-localize.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+    "sourceLocale": "de",
+    "targetLocales": ["en", "be"],
+    "inputFiles": [
+      "src/**/*.js"
+    ],
+    "output": {
+        "mode": "runtime",
+        "localeCodesModule": "src/generated/locale-codes.js",
+        "outputDir": "src/generated/locale"
+        
+    },
+    "interchange": {
+      "format": "xliff",
+      "xliffDir": "./xliff/"
+    }
+  }

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive development page helper, teaser, menu, footer.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -14,9 +14,12 @@
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
-    "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
+    "storybook:build": "npm run analyze -- --exclude dist && build-storybook",
+    "localizeExtract": "lit-localize extract",
+    "localizeBuild": "lit-localize build"
   },
   "dependencies": {
+    "@lit/localize": "^0.11.4",
     "@progressive-development/pd-contact": "^0.1.28",
     "@progressive-development/pd-dialog": "^0.1.31",
     "@progressive-development/pd-forms": "^0.1.33",
@@ -27,6 +30,7 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@lit/localize-tools": "^0.6.9",
     "@open-wc/eslint-config": "^4.3.0",
     "@open-wc/testing": "next",
     "@web/dev-server": "^0.1.30",

package/src/PdContactUs.js

@@ -4,6 +4,7 @@
  */
 
 import { LitElement, html, css } from 'lit';
+import { msg, updateWhenLocaleChanges } from '@lit/localize';
 
 import '@progressive-development/pd-forms/pd-button.js';
 import '@progressive-development/pd-forms/pd-form-container.js';
@@ -104,20 +105,20 @@ export class PdContactUs extends LitElement {
 
   constructor() {
     super();
+    updateWhenLocaleChanges(this);
     this.contact = {};    
   }
 
   render() {
     return html`
       <div class="content-block">
-        <h2>Kontakt</h2>
-
+        <h2>${msg('Kontakt',{desc: '#contactus.title#',})}</h2>
         <div class="contact-block">
           <div class="left-content">
             <pd-contact
               class="company-contact"
               .contact="${this.contact}"
-              addressTitle="Adresse"
+              addressTitle="${msg('Adresse',{desc: '#contactus.address.title#',})}"
               summary
             ></pd-contact>
           </div>
@@ -128,7 +129,7 @@ export class PdContactUs extends LitElement {
                 <pd-input
                   id="nameInputId"
                   class="quarter3"
-                  placeHolder="Name"
+                  placeHolder="${msg('Name',{desc: '#contactus.address.name#',})}"
                   valueName="name"
                   autoCompleteName="full-name"
                   required
@@ -139,7 +140,7 @@ export class PdContactUs extends LitElement {
                 <pd-input
                   id="mailInputId"
                   class="quarter3"
-                  placeHolder="Email"
+                  placeHolder="${msg('Email',{desc: '#contactus.address.email#',})}"
                   valueName="mail"
                   autoCompleteName="email"                  
                   name="email"
@@ -152,7 +153,7 @@ export class PdContactUs extends LitElement {
                 <pd-input
                   id="phoneInputId"
                   class="quarter3"
-                  placeHolder="Telefon"
+                  placeHolder="${msg('Telefon',{desc: '#contactus.address.phone#',})}"
                   valueName="phone"
                   field-type="phone"
                   autoCompleteName="tel"
@@ -164,7 +165,7 @@ export class PdContactUs extends LitElement {
                 <pd-input-area
                   id="msgInputId"
                   class="quarter3-area"
-                  placeHolder="Nachricht"
+                  placeHolder="${msg('Nachricht',{desc: '#contactus.address.message#',})}"
                   rows="15"
                   required
                   valueName="msg"
@@ -172,7 +173,7 @@ export class PdContactUs extends LitElement {
               </pd-form-row>
 
               <pd-form-row>
-                <pd-button class="quarter3" text="Absenden" @click="${this._sendMail}" primary></pd-button>
+                <pd-button class="quarter3" text="${msg('Absenden',{desc: '#contactus.address.send#',})}" @click="${this._sendMail}" primary></pd-button>
               </pd-form-row>
 
             </pd-form-container>            
@@ -205,11 +206,11 @@ export class PdContactUs extends LitElement {
       const name = this.shadowRoot.getElementById('nameInputId').value;
       const email = this.shadowRoot.getElementById('mailInputId').value;
       const phone = this.shadowRoot.getElementById('phoneInputId').value;
-      const msg = this.shadowRoot.getElementById('msgInputId').value;
+      const msg1 = this.shadowRoot.getElementById('msgInputId').value;
       this.dispatchEvent(
         new CustomEvent('send-contact-request', {
           detail: {
-            msgObj: { name, email, phone, msg },
+            msgObj: { name, email, phone, msg1 },
           },
         })
       );

package/src/PdMenu.js

@@ -184,6 +184,7 @@ export class PdMenu extends LitElement {
 
   static get properties() {
     return {
+      activeRoute: { type: String },
       menuItems: { type: Array },
       topMenuItems: { type: Array },      
       // At the moment needed for scroll to pistion => Refactor possible?
@@ -197,7 +198,7 @@ export class PdMenu extends LitElement {
   }
 
   constructor() {
-    super();
+    super();    
     this.menuItems = [];
     this.topMenuItems = [];
     this._activeSecIndex = 0;
@@ -271,7 +272,7 @@ export class PdMenu extends LitElement {
     ${items.map(
           (item, index) => html`
             <li
-              class="item ${checkActiveClass && this._activeSecIndex === index + 1
+              class="item ${(checkActiveClass && this._activeSecIndex === index + 1) || (item.route && item.route === this.activeRoute) 
                 ? 'active'
                 : ''}"
               data-key="${item.key}"              

package/src/generated/locale/be.js

@@ -0,0 +1,20 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's0830a1e0d2456d9b': `Type uw bericht hier`,
+'sab1114a5f102dedc': `Telefoon Nummer`,
+'sc7dbfe3251f9a8db': `Verzenden`,
+'sd1f44f1a8bc20e67': `Email`,
+'sdd2fffdf86bf5b6e': `Adres`,
+'sef49aec68fd1dc66': `Naam`,
+'sfb4410b48e95fa73': `Contacteer ons`,
+    };
+  

package/src/generated/locale/en.js

@@ -0,0 +1,20 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      'sfb4410b48e95fa73': `Kontakt`,
+'sdd2fffdf86bf5b6e': `Adresse`,
+'sef49aec68fd1dc66': `Name`,
+'sd1f44f1a8bc20e67': `Email`,
+'sab1114a5f102dedc': `Telefon`,
+'s0830a1e0d2456d9b': `Nachricht`,
+'sc7dbfe3251f9a8db': `Absenden`,
+    };
+  

package/src/generated/locale-codes.js

@@ -0,0 +1,25 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize.
+
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export const sourceLocale = `de`;
+
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export const targetLocales = [
+  `be`,
+  `en`,
+];
+
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export const allLocales = [
+  `be`,
+  `de`,
+  `en`,
+];

package/xliff/be.xlf

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="be" source-language="de" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="sd1f44f1a8bc20e67">
+  <source>Email</source>
+  <target>Email</target>
+  <note from="lit-localize">#contactus.address.email#</note>
+</trans-unit>
+<trans-unit id="s0830a1e0d2456d9b">
+  <source>Nachricht</source>
+  <target>Type uw bericht hier</target>
+  <note from="lit-localize">#contactus.address.message#</note>
+</trans-unit>
+<trans-unit id="sef49aec68fd1dc66">
+  <source>Name</source>
+  <target>Naam</target>
+  <note from="lit-localize">#contactus.address.name#</note>
+</trans-unit>
+<trans-unit id="sab1114a5f102dedc">
+  <source>Telefon</source>
+  <target>Telefoon Nummer</target>
+  <note from="lit-localize">#contactus.address.phone#</note>
+</trans-unit>
+<trans-unit id="sc7dbfe3251f9a8db">
+  <source>Absenden</source>
+  <target>Verzenden</target>
+  <note from="lit-localize">#contactus.address.send#</note>
+</trans-unit>
+<trans-unit id="sdd2fffdf86bf5b6e">
+  <source>Adresse</source>
+  <target>Adres</target>
+  <note from="lit-localize">#contactus.address.title#</note>
+</trans-unit>
+<trans-unit id="sfb4410b48e95fa73">
+  <source>Kontakt</source>
+  <target>Contacteer ons</target>
+  <note from="lit-localize">#contactus.title#</note>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/xliff/en.xlf

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="en" source-language="de" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="sd1f44f1a8bc20e67">
+  <source>Email</source>
+  <note from="lit-localize">#contactus.address.email#</note>
+</trans-unit>
+<trans-unit id="s0830a1e0d2456d9b">
+  <source>Nachricht</source>
+  <note from="lit-localize">#contactus.address.message#</note>
+</trans-unit>
+<trans-unit id="sef49aec68fd1dc66">
+  <source>Name</source>
+  <note from="lit-localize">#contactus.address.name#</note>
+</trans-unit>
+<trans-unit id="sab1114a5f102dedc">
+  <source>Telefon</source>
+  <note from="lit-localize">#contactus.address.phone#</note>
+</trans-unit>
+<trans-unit id="sc7dbfe3251f9a8db">
+  <source>Absenden</source>
+  <note from="lit-localize">#contactus.address.send#</note>
+</trans-unit>
+<trans-unit id="sdd2fffdf86bf5b6e">
+  <source>Adresse</source>
+  <note from="lit-localize">#contactus.address.title#</note>
+</trans-unit>
+<trans-unit id="sfb4410b48e95fa73">
+  <source>Kontakt</source>
+  <note from="lit-localize">#contactus.title#</note>
+</trans-unit>
+</body>
+</file>
+</xliff>