@progressive-development/pd-page 0.0.14 → 0.0.16

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.0.14",
+  "version": "0.0.16",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -18,10 +18,10 @@
   },
   "dependencies": {
     "lit": "^2.0.2",
-    "@progressive-development/pd-contact": "0.0.3",
-    "@progressive-development/pd-forms": "0.0.14",
-    "@progressive-development/pd-dialog": "0.0.8",
-    "@progressive-development/pd-icon": "0.0.4"
+    "@progressive-development/pd-contact": "0.0.5",
+    "@progressive-development/pd-forms": "0.0.16",
+    "@progressive-development/pd-dialog": "0.0.9",
+    "@progressive-development/pd-icon": "0.0.7"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/src/PdFooter.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 /* eslint-disable lit-a11y/anchor-is-valid */
 /**
  * @license
@@ -83,6 +84,7 @@ export class PdFooter extends LitElement {
       .left-content p {
         color: #2bcadb;
         font-size: 1.1rem;
+        white-space: nowrap;
       }
 
       .version {
@@ -91,19 +93,29 @@ export class PdFooter extends LitElement {
         font-size: 0.9rem;
       }
 
+      .madeBy {
+        color: white;
+        font-size: 0.9rem;
+      }
+
+      .madeBy:hover {
+        border-bottom: 1px solid #ffc857;
+      }
+
+      .madeBy:hover,
       .item a:hover {
         color: #ffc857;
         cursor: pointer;
-        /*border-bottom: 1px solid #ffc857;*/
       }
 
       /* Size Elements for small width */
-      @media (max-width: 440px) {
-        .item {
-          display: none;
+      @media (max-width: 450px) {
+        .right-content ul {
+          height: 40%;
         }
-        ul {
-          justify-content: left;
+
+        .right-content {
+          width: 30%;
         }
       }
     `;
@@ -118,6 +130,7 @@ export class PdFooter extends LitElement {
   constructor() {
     super();
     this.version = undefined;
+    this._mailTo = 'info@progressive-development.com';
   }
 
   firstUpdated() {}
@@ -126,7 +139,11 @@ export class PdFooter extends LitElement {
     return html`
       <div class="left-content">
         <p>
-          © ticomi technics<br /><span class="version">${this.version}</span>
+          © ticomi technics<br />
+          <span class="version">${this.version} development by</span><br />
+          <span class="madeBy" @click="${this._mailToProgressiveDevelopment}"
+            >PD Progressive Development</span
+          >
         </p>
       </div>
 
@@ -138,7 +155,7 @@ export class PdFooter extends LitElement {
                 console.log();
               }}"
               @click="${this._legalClicked}"
-              >Verkoopvoorwaarden</a
+              >Voorwaarden</a
             >
           </li>
           <li class="item">
@@ -167,6 +184,10 @@ export class PdFooter extends LitElement {
     `;
   }
 
+  _mailToProgressiveDevelopment() {
+    window.location.href = `mailto:${this._mailTo}`;
+  }
+
   _legalClicked() {
     this.shadowRoot.getElementById('legalPopupId').showPopup();
   }

package/src/PdMenu.js

@@ -63,7 +63,7 @@ export class PdMenu extends LitElement {
         font-family: Oswald, sans-serif;
         font-size: 1.2rem;
 
-        --squi-icon-fill: var(--my-header-text-color);
+        --pd-icon-fill: var(--my-header-text-color);
       }
       .item.active {
         color: #ffc857;
@@ -76,11 +76,11 @@ export class PdMenu extends LitElement {
         This is also the reason why icon-fill is defined for item, not for topMenuItem
         Erkennbar: Farbe Icon leicht unterschiedlich zu Farbe Text nach hover icon.
         */
-        --squi-icon-fill: #ffc857;
+        --pd-icon-fill: #ffc857;
       }
 
       .topItemLogo {
-        --squi-icon-size: 1.6rem;
+        --pd-icon-size: 1.6rem;
         --icon-transition: none;
         pointer-events: none;
       }
@@ -184,10 +184,10 @@ export class PdMenu extends LitElement {
               @click="${this._menuItemClicked}"
             >
               ${topItem.icon
-                ? html`<squi-icon
+                ? html`<pd-icon
                     class="topItemLogo"
                     icon="${topItem.icon}"
-                  ></squi-icon>`
+                  ></pd-icon>`
                 : ''}
               ${topItem.name}
             </li>

package/src/PdTeaser.js

@@ -66,7 +66,7 @@ export class PdTeaser extends LitElement {
         top: calc(var(--my-height) / 2);        
         left: 10px;        
         z-index: 1;   
-        --squi-icon-fill: white;
+        --pd-icon-fill: white;
       }
 
       .next {                
@@ -74,7 +74,7 @@ export class PdTeaser extends LitElement {
         top: calc(var(--my-height) / 2);        
         right: 10px;   
         z-index: 1;        
-        --squi-icon-fill: white;
+        --pd-icon-fill: white;
       }
       
       .content {
@@ -226,16 +226,16 @@ export class PdTeaser extends LitElement {
   render() {
     return html`
       <div class="teaser-flex ${this._visible ? '' : 'in-active'}">
-        <squi-icon
+        <pd-icon
           icon="previousArrow"
           class="previous"
           @click="${this._prevContent}"
-        ></squi-icon>
-        <squi-icon
+        ></pd-icon>
+        <pd-icon
           icon="nextArrow"
           class="next"
           @click="${this._nextContent}"
-        ></squi-icon>
+        ></pd-icon>
 
         ${this.teaserObjects.map(
           (teaserObj, index) => html`