@progressive-development/pd-page 0.1.127 → 0.5.0

package/dist/index.js

@@ -0,0 +1,18 @@
+import { PdContactUs } from "./src/PdContactUs.js";
+import { PdFooter } from "./src/PdFooter.js";
+import { PdMenu } from "./src/PdMenu.js";
+import { PdTeaser } from "./src/PdTeaser.js";
+import { PdTeaserContent } from "./src/PdTeaserContent.js";
+import { templates } from "./locales/be.js";
+import { templates as templates2 } from "./locales/de.js";
+import { templates as templates3 } from "./locales/en.js";
+export {
+  PdContactUs,
+  PdFooter,
+  PdMenu,
+  PdTeaser,
+  PdTeaserContent,
+  templates as beTemplates,
+  templates2 as deTemplates,
+  templates3 as enTemplates
+};

package/dist/locales/be.js

@@ -0,0 +1,12 @@
+const templates = {
+  "pd.contactus.address.email": `E-mail`,
+  "pd.contactus.address.message": `Boodschap`,
+  "pd.contactus.address.name": `Naam`,
+  "pd.contactus.address.phone": `Telefoon`,
+  "pd.contactus.address.send": `Verzenden`,
+  "pd.contactus.address.title": `Adres`,
+  "pd.contactus.title": `Contact`
+};
+export {
+  templates
+};

package/dist/locales/de.js

@@ -0,0 +1,12 @@
+const templates = {
+  "pd.contactus.title": `Kontakt`,
+  "pd.contactus.address.title": `Adresse`,
+  "pd.contactus.address.name": `Name`,
+  "pd.contactus.address.email": `Email`,
+  "pd.contactus.address.phone": `Telefon`,
+  "pd.contactus.address.message": `Nachricht`,
+  "pd.contactus.address.send": `Absenden`
+};
+export {
+  templates
+};

package/dist/locales/en.js

@@ -0,0 +1,12 @@
+const templates = {
+  "pd.contactus.address.email": `Email`,
+  "pd.contactus.address.message": `Message`,
+  "pd.contactus.address.name": `Name`,
+  "pd.contactus.address.phone": `Phone`,
+  "pd.contactus.address.send": `Send`,
+  "pd.contactus.address.title": `Address`,
+  "pd.contactus.title": `Contact`
+};
+export {
+  templates
+};

package/dist/pd-contact-us.js

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

package/dist/pd-footer.js

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

package/dist/pd-menu.js

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

package/dist/pd-teaser.js

@@ -0,0 +1,4 @@
+import { PdTeaser } from "./src/PdTeaser.js";
+import { PdTeaserContent } from "./src/PdTeaserContent.js";
+window.customElements.define("pd-teaser", PdTeaser);
+window.customElements.define("pd-teaser-content", PdTeaserContent);

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

@@ -1,35 +1,25 @@
+import { LitElement, css, html } from "lit";
+import { updateWhenLocaleChanges, msg } from "@lit/localize";
+import "@progressive-development/pd-forms/pd-button";
+import "@progressive-development/pd-forms/pd-form-container";
+import "@progressive-development/pd-forms/pd-form-row";
+import "@progressive-development/pd-forms/pd-input";
+import "@progressive-development/pd-forms/pd-input-area";
+import "@progressive-development/pd-contact/pd-contact";
+import { PDColorStyles, 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 { msg, updateWhenLocaleChanges } from '@lit/localize';
-
-import '@progressive-development/pd-forms/pd-button.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-input-area.js';
-import '@progressive-development/pd-contact/pd-contact.js';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdContactUs extends LitElement {
+class PdContactUs extends LitElement {
   /**
    * Fired when free date clicked => At the moment only for freeDates
    * @event send-contact-request
    */
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {                     
 
@@ -95,31 +85,29 @@ export class PdContactUs extends LitElement {
           justify-content: left;
         }
       }
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
-      contact: { type: Object },
+      contact: { type: Object }
     };
   }
-
   constructor() {
     super();
     updateWhenLocaleChanges(this);
-    this.contact = {};    
+    this.contact = {};
   }
-
   render() {
     return html`
       <div class="content-block">
-        <h2>${msg('Kontakt',{desc: '#contactus.title#',})}</h2>
+        <h2>${msg("Kontakt", { id: "pd.contactus.title" })}</h2>
         <div class="contact-block">
           <div class="left-content">
             <pd-contact
               class="company-contact"
               .contact="${this.contact}"
-              addressTitle="${msg('Adresse',{desc: '#contactus.address.title#',})}"
+              addressTitle="${msg("Adresse", { id: "pd.contactus.address.title" })}"
               summary
             ></pd-contact>
           </div>
@@ -130,7 +118,7 @@ export class PdContactUs extends LitElement {
                 <pd-input
                   id="nameInputId"
                   class="quarter3"
-                  placeHolder="${msg('Name',{desc: '#contactus.address.name#',})}"
+                  placeHolder="${msg("Name", { id: "pd.contactus.address.name" })}"
                   valueName="name"
                   autoCompleteName="full-name"
                   required
@@ -141,7 +129,7 @@ export class PdContactUs extends LitElement {
                 <pd-input
                   id="mailInputId"
                   class="quarter3"
-                  placeHolder="${msg('Email',{desc: '#contactus.address.email#',})}"
+                  placeHolder="${msg("Email", { id: "pd.contactus.address.email" })}"
                   valueName="mail"
                   autoCompleteName="email"                  
                   name="email"
@@ -154,7 +142,7 @@ export class PdContactUs extends LitElement {
                 <pd-input
                   id="phoneInputId"
                   class="quarter3"
-                  placeHolder="${msg('Telefon',{desc: '#contactus.address.phone#',})}"
+                  placeHolder="${msg("Telefon", { id: "pd.contactus.address.phone" })}"
                   valueName="phone"
                   field-type="phone"
                   autoCompleteName="tel"
@@ -166,7 +154,7 @@ export class PdContactUs extends LitElement {
                 <pd-input-area
                   id="msgInputId"
                   class="quarter3-area"
-                  placeHolder="${msg('Nachricht',{desc: '#contactus.address.message#',})}"
+                  placeHolder="${msg("Nachricht", { id: "pd.contactus.address.message" })}"
                   rows="15"
                   required
                   valueName="msg"
@@ -174,7 +162,7 @@ export class PdContactUs extends LitElement {
               </pd-form-row>
 
               <pd-form-row>
-                <pd-button class="quarter3" text="${msg('Absenden',{desc: '#contactus.address.send#',})}" @click="${this._sendMail}" primary></pd-button>
+                <pd-button class="quarter3" text="${msg("Absenden", { id: "pd.contactus.address.send" })}" @click="${this._sendMail}" primary></pd-button>
               </pd-form-row>
 
             </pd-form-container>            
@@ -184,38 +172,33 @@ export class PdContactUs extends LitElement {
       </div>
     `;
   }
-
   clear() {
-    this.shadowRoot.getElementById('nameInputId').clear();
-    this.shadowRoot.getElementById('mailInputId').clear();
-    this.shadowRoot.getElementById('phoneInputId').clear();
-    this.shadowRoot.getElementById('msgInputId').clear();
+    this.shadowRoot.getElementById("nameInputId").clear();
+    this.shadowRoot.getElementById("mailInputId").clear();
+    this.shadowRoot.getElementById("phoneInputId").clear();
+    this.shadowRoot.getElementById("msgInputId").clear();
   }
-
-  _sendMail() {    
-
+  _sendMail() {
     const detail = {
-      errorMap: new Map()
+      errorMap: /* @__PURE__ */ new Map()
     };
-
-    // current wizard element
     const curentStepEl = this.shadowRoot.getElementById("contactFormId");
-    curentStepEl.dispatchEvent(new CustomEvent('validate-form', { detail }));
-
+    curentStepEl.dispatchEvent(new CustomEvent("validate-form", { detail }));
     if (detail.errorMap.size === 0) {
-
-      const name = this.shadowRoot.getElementById('nameInputId').value;
-      const email = this.shadowRoot.getElementById('mailInputId').value;
-      const phone = this.shadowRoot.getElementById('phoneInputId').value;
-      const msg1 = this.shadowRoot.getElementById('msgInputId').value;
+      const name = this.shadowRoot.getElementById("nameInputId").value;
+      const email = this.shadowRoot.getElementById("mailInputId").value;
+      const phone = this.shadowRoot.getElementById("phoneInputId").value;
+      const msg1 = this.shadowRoot.getElementById("msgInputId").value;
       this.dispatchEvent(
-        new CustomEvent('send-contact-request', {
+        new CustomEvent("send-contact-request", {
           detail: {
-            msgObj: { name, email, phone, msg1 },
-          },
+            msgObj: { name, email, phone, msg1 }
+          }
         })
       );
     }
   }
-
 }
+export {
+  PdContactUs
+};

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

@@ -1,25 +1,14 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/anchor-is-valid */
+import { LitElement, css, html } from "lit";
+import { PDColorStyles, 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 { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdFooter extends LitElement {
+class PdFooter extends LitElement {
   /**
    * Fired when footer link clicked.
    * @event footer-link
    */
-
   static get properties() {
     return {
       version: { type: String },
@@ -28,10 +17,10 @@ export class PdFooter extends LitElement {
       footerLinks: { type: Array }
     };
   }
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {
         display: flex;
@@ -97,23 +86,22 @@ export class PdFooter extends LitElement {
       .madeBy:hover {
         color: var(--pd-default-col);
       }
-    `];
-  }  
-
+    `
+    ];
+  }
   constructor() {
-    super();    
+    super();
     this.footerLinks = [];
-    this._mailTo = 'info@progressive-development.com';
+    this._mailTo = "info@progressive-development.com";
+  }
+  firstUpdated() {
   }
-
-  firstUpdated() {}
-
   render() {
     return html`
       
         <div class="footer-links">
             <ul>
-            ${this.footerLinks.map(link => html`
+            ${this.footerLinks.map((link) => html`
               <li class="item">
                 <a @click="${this._footerLinkClicked}" data-link="${link.key}">${link.name}</a>
               </li>
@@ -122,30 +110,31 @@ export class PdFooter extends LitElement {
         </div>
         <div class="bottom-line">
           <div>
-            ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : ''}          
-            ${this.version ? html`<span class="version">${this.version}</span>` : ''}
+            ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : ""}          
+            ${this.version ? html`<span class="version">${this.version}</span>` : ""}
           </div>
-          ${this.madeBy ? html`<span class="madeBy" @click="${this._clickMadeby}">${this.madeBy.txt}</span>` : ''}
+          ${this.madeBy ? html`<span class="madeBy" @click="${this._clickMadeby}">${this.madeBy.txt}</span>` : ""}
         </div>
       `;
   }
-
   _clickMadeby() {
     if (this.madeBy.email) {
       window.location.href = `mailto:${this.madeBy.email}`;
     } else if (this.madeBy.link) {
-      window.open(this.madeBy.link, '_blank');
+      window.open(this.madeBy.link, "_blank");
     }
   }
-
   _footerLinkClicked(e) {
     const linkKey = e.target.dataset.link;
     this.dispatchEvent(
-      new CustomEvent('footer-link', {
+      new CustomEvent("footer-link", {
         detail: {
-          linkObj: this.footerLinks.filter(fl => fl.key === linkKey)[0]
+          linkObj: this.footerLinks.filter((fl) => fl.key === linkKey)[0]
         }
       })
-    );    
+    );
   }
 }
+export {
+  PdFooter
+};

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

@@ -1,33 +1,23 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
+import { LitElement, css, html } from "lit";
+import { updateWhenLocaleChanges } from "@lit/localize";
+import { installMediaQueryWatcher } from "pwa-helpers/media-query.js";
+import { ICON_TOOGLE_ARROW, ICON_BURGER_MENU } from "@progressive-development/pd-icon";
+import "@progressive-development/pd-icon/pd-icon";
+import { PDColorStyles, 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 { updateWhenLocaleChanges } from '@lit/localize';
-import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
-import { ICON_TOOGLE_ARROW as toggleArrow, ICON_BURGER_MENU as burgerIcon } from '@progressive-development/pd-icon/src/PdIcon.js';
-import '@progressive-development/pd-icon/pd-icon.js';
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdMenu extends LitElement {
-
+class PdMenu extends LitElement {
   /**
    * Fired when route menu item clicked
    * @event route-event
    */
-
   static get styles() {
     return [
-    PDColorStyles, PDFontStyles,
-    css`
+      PDColorStyles,
+      PDFontStyles,
+      css`
 
       :host {        
         display: block;        
@@ -260,42 +250,39 @@ export class PdMenu extends LitElement {
         pointer-events: none;
       }
           
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
       activeRoute: { type: String },
       selectedLocale: { type: String },
       locales: { type: Array },
       menuItems: { type: Array },
-      topMenuItems: { type: Array },      
-      noBurgerMenu: { type: Boolean },      
+      topMenuItems: { type: Array },
+      noBurgerMenu: { type: Boolean },
       // At the moment needed for scroll to pistion => Refactor possible?
       headerSize: { type: Number },
       _activeSecIndex: { type: Number },
       _smallScreen: { type: Boolean, state: true },
       _activeBurgerMenu: { type: Boolean, reflect: true },
-      _activeLocaleMenu: { type: Boolean, reflect: true },
+      _activeLocaleMenu: { type: Boolean, reflect: true }
     };
   }
-
   constructor() {
-    super();    
+    super();
     this.menuItems = [];
     this.topMenuItems = [];
     this.noBurgerMenu = false;
     this._activeSecIndex = 0;
     this._activeBurgerMenu = false;
     this.headerSize = 0;
-
     updateWhenLocaleChanges(this);
   }
-
   firstUpdated() {
     const doSomething = (scrollPos) => {
       let activeSecIndex = -1;
-      let distance = scrollPos > 300 ? 5000 : 300; // start value, define when first item is active
+      let distance = scrollPos > 300 ? 5e3 : 300;
       this.menuItems.forEach((item, index) => {
         if (item.ref) {
           let distTmp = item.ref.getBoundingClientRect().top;
@@ -308,9 +295,8 @@ export class PdMenu extends LitElement {
       });
       this._activeSecIndex = activeSecIndex >= 0 ? activeSecIndex + 1 : 0;
     };
-
     let ticking = false;
-    document.addEventListener('scroll', () => {
+    document.addEventListener("scroll", () => {
       const lastKnownScrollPosition = window.scrollY;
       if (!ticking) {
         window.requestAnimationFrame(() => {
@@ -320,8 +306,7 @@ export class PdMenu extends LitElement {
         ticking = true;
       }
     });
-
-    installMediaQueryWatcher(`(max-width: 700px)`, matches => {
+    installMediaQueryWatcher(`(max-width: 700px)`, (matches) => {
       if (matches) {
         this._smallScreen = !this.noBurgerMenu;
       } else {
@@ -329,9 +314,7 @@ export class PdMenu extends LitElement {
       }
     });
   }
-
-  render() {    
-
+  render() {
     return html`    
     <div class="menu-container"> 
       
@@ -348,9 +331,9 @@ export class PdMenu extends LitElement {
           ${(this.locales && this.locales.length) > 1 ? html`
             <li class="item menu-li locale-li" @click="${this._toggleLocaleSelection}">
               ${this.selectedLocale}
-              <pd-icon class="locale-selection-logo" icon="${toggleArrow}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
+              <pd-icon class="locale-selection-logo" icon="${ICON_TOOGLE_ARROW}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
               <ul class="menu-ul locale-ul">
-                ${this.locales.filter(l => l !== this.selectedLocale).map(locale => html`
+                ${this.locales.filter((l) => l !== this.selectedLocale).map((locale) => html`
                 <li class="item menu-li burger-li burger-item locale-item"
                   data-key="${locale}"
                   @click="${this._localeClicked}"
@@ -360,13 +343,13 @@ export class PdMenu extends LitElement {
                 `)}                
               </ul>
             </li>
-          ` : ''}
+          ` : ""}
         </ul>
       ` : html`
         <div class="menu-wrapper">
           <div class="burger-menu" @click="${this._toggleBurgerMenu}">
-            <pd-icon class="burgerLogo" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
-            <span class="item ${this._activeBurgerMenu ? 'active' : ''}">Menu</span>
+            <pd-icon class="burgerLogo" icon="${ICON_BURGER_MENU}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
+            <span class="item ${this._activeBurgerMenu ? "active" : ""}">Menu</span>
           </div>
         </div>
       `}
@@ -374,114 +357,93 @@ export class PdMenu extends LitElement {
     </div>
     `;
   }
-
   _renderItems(items, checkActiveClass, disableIcons) {
     return html`
     ${items.map(
-          (item, index) => html`
+      (item, index) => html`
             <li
               class="item menu-li ${this._smallScreen ? "burger-li burger-item" : ""}
-                ${(checkActiveClass && this._activeSecIndex === index + 1) || (item.route && item.route === this.activeRoute) 
-                ? 'active'
-                : ''}"
+                ${checkActiveClass && this._activeSecIndex === index + 1 || item.route && item.route === this.activeRoute ? "active" : ""}"
               data-key="${item.key}"              
               @click="${this._menuItemClicked}"
             >
-            ${item.icon && !disableIcons
-                ? html`<pd-icon
+            ${item.icon && !disableIcons ? html`<pd-icon
                     class="topItemLogo"
                     icon="${item.icon}"
-                  ></pd-icon>`
-                : ''}
+                  ></pd-icon>` : ""}
               ${item.name}
             </li>       
           `
-        )}
+    )}
     `;
   }
-
   _toggleBurgerMenu() {
     this._activeBurgerMenu = !this._activeBurgerMenu;
   }
-
   _toggleLocaleSelection() {
     this._activeLocaleMenu = !this._activeLocaleMenu;
   }
-
   _localeClicked(e) {
     const keyParam = e.target.dataset.key;
     this.dispatchEvent(new CustomEvent("locale-change", {
       detail: keyParam
     }));
   }
-
-  _menuItemClicked(e) {   
-
-    // get menu item
+  _menuItemClicked(e) {
     const keyParam = e.target.dataset.key;
-    const menuItem = this.menuItems.filter(mi => mi.key === keyParam)[0] 
-      || this.topMenuItems.filter(mi => mi.key === keyParam)[0];   
-
-    if (menuItem.sec && menuItem.sec !== '') {
-      // TODO: Check if element exists
+    const menuItem = this.menuItems.filter((mi) => mi.key === keyParam)[0] || this.topMenuItems.filter((mi) => mi.key === keyParam)[0];
+    if (menuItem.sec && menuItem.sec !== "") {
       this._scrollToContent(menuItem.sec);
-    } else if (menuItem.route && menuItem.route !== '') {
+    } else if (menuItem.route && menuItem.route !== "") {
       this.dispatchEvent(
-        new CustomEvent('route-event', {
+        new CustomEvent("route-event", {
           detail: {
-            route: menuItem.route === 'back' ? '' : menuItem.route,
+            route: menuItem.route === "back" ? "" : menuItem.route
           },
           composed: true,
-          bubbles: true,
+          bubbles: true
         })
       );
     } else if (menuItem.action) {
-      // call action
       menuItem.action();
     }
-
-    // close menu if open
     if (this._activeBurgerMenu) {
       this._activeBurgerMenu = !this._activeBurgerMenu;
     }
   }
-
   static _scrollToTop() {
     window.scrollTo({
       top: 0,
       left: 0,
-      behavior: 'smooth',
+      behavior: "smooth"
     });
   }
-
   _scrollToContent(section) {
-    
-    // check reference
-    const selMenuItem =
-      this.menuItems.filter(item => item.sec === section)[0] || {};
+    const selMenuItem = this.menuItems.filter((item) => item.sec === section)[0] || {};
     const el = selMenuItem.ref;
     if (el) {
       const rect = el.getBoundingClientRect();
-      // https://www.mediaevent.de/javascript/scroll.html
       window.scrollBy({
-        top: rect.top - (this.headerSize),
+        top: rect.top - this.headerSize,
         left: 0,
-        behavior: 'smooth',
+        behavior: "smooth"
       });
     }
   }
-
   // eslint-disable-next-line class-methods-use-this
   _logoClicked() {
     PdMenu._scrollToTop();
     this.dispatchEvent(
-      new CustomEvent('route-event', {
+      new CustomEvent("route-event", {
         detail: {
-          route: '',
+          route: ""
         },
         composed: true,
-        bubbles: true,
+        bubbles: true
       })
     );
   }
 }
+export {
+  PdMenu
+};