@progressive-development/pd-wizard 0.0.6 → 0.0.8

package/LICENSE

@@ -1,21 +1,2 @@
-MIT License
-
-Copyright (c) 2021 pd-wizard
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+No License, all rights reserved
+@2021 - PD Progressive Development UG

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressive-development/pd-wizard",
   "description": "Webcomponent pd-wizard following open-wc recommendations",
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
   "directories": {
     "test": "test"
@@ -14,7 +14,7 @@
     "order",
     "steps"
   ],
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdSteps.js

@@ -1,306 +1,308 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
 /**
  * @license
- * Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
- import {LitElement, html, css} from 'lit';
+import { LitElement, html, css } from 'lit';
 
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
 class PdSteps extends LitElement {
- 
-   /**
-    * Fired when `step` (when not current) clicked.
-    * @event step-clicked
-    */
- 
-   static get styles() {
-     return css`
-       :host {
- 
-         --my-font: var(--app-font, Oswald);
-         --my-step-text-color: var(--squi-test, #177E89);
-         --my-step-current-text-color: var(--squi-test, #fefefe);
- 
-         --my-step-current-name-circle-color: var(--squi-test, #FFC857);
-         --my-step-passed-name-circle-color: var(--squi-test, #fefefe);
-         --my-step-name-circle-color: var(--squi-test, #fefefe);
- 
-         --my-step-unfinished-border-color: var(--squi-test, #fefefe);
-         --my-step-passed-border-color: var(--squi-test, #fefefe);
-         --my-step-current-border-color: var(--squi-test, #fefefe);
- 
-         --my-step-unfinished-color: var(--squi-test, #fefefe);
-         --my-step-passed-color: var(--squi-test, #fefefe);
-         --my-step-passed-gradient-color: var(--squi-test, #084c61);
-         --my-step-current-color: var(--squi-test, #177E89);
-         --my-step-current-gradient-color: var(--squi-test, #f3d7a0);
- 
-         --my-step-hover-color: var(--squi-test, #3ab6db);
- 
-         --my-bg-color: var(--squi-step-bg-color, #177E89);
-         --my-hr-bg-color: var(--squi-hr-bg-color, #fefefe);
-                 
-         display: block;
-         background-color: var(--my-bg-color);
- 
-         /* Hack => Wegen HR Linie wird das elemt 10 nach oben geschoben, sonst immer Abstand <hr> block display etc. => wie zu lösen? */
-         margin-top: -10px;
-         
-       }
- 
-       .parent {
-         display: flex;        
-         /*
+  /**
+   * Fired when `step` (when not current) clicked.
+   * @event step-clicked
+   */
+
+  static get styles() {
+    return css`
+      :host {
+        --my-font: var(--app-font, Oswald);
+        --my-step-text-color: var(--squi-test, #177e89);
+        --my-step-current-text-color: var(--squi-test, #fefefe);
+
+        --my-step-current-name-circle-color: var(--squi-test, #ffc857);
+        --my-step-passed-name-circle-color: var(--squi-test, #fefefe);
+        --my-step-name-circle-color: var(--squi-test, #fefefe);
+
+        --my-step-unfinished-border-color: var(--squi-test, #fefefe);
+        --my-step-passed-border-color: var(--squi-test, #fefefe);
+        --my-step-current-border-color: var(--squi-test, #fefefe);
+
+        --my-step-unfinished-color: var(--squi-test, #fefefe);
+        --my-step-passed-color: var(--squi-test, #fefefe);
+        --my-step-passed-gradient-color: var(--squi-test, #084c61);
+        --my-step-current-color: var(--squi-test, #177e89);
+        --my-step-current-gradient-color: var(--squi-test, #f3d7a0);
+
+        --my-step-hover-color: var(--squi-test, #3ab6db);
+
+        --my-bg-color: var(--squi-step-bg-color, #177e89);
+        --my-hr-bg-color: var(--squi-hr-bg-color, #fefefe);
+
+        display: block;
+        background-color: var(--my-bg-color);
+
+        /* Hack => Wegen HR Linie wird das elemt 10 nach oben geschoben, sonst immer Abstand <hr> block display etc. => wie zu lösen? */
+        margin-top: -10px;
+      }
+
+      .parent {
+        display: flex;
+        /*
          flex-direction: row; /* default *
          flex-wrap: nowrap;   /* default *
          */
-         /* short hand for above lines => default, not needed */
-         flex-flow: row nowrap;        
-         align-items: center;
-         /*height: 50px; /* Or whatever */                
-         padding-bottom: 10px;        
-         
-       }
- 
-       .parent.circle {
-         justify-content: space-around;        
-       }
- 
-       .parent.tab {
-         justify-content: start;        
-       }
- 
-       /* Eingeführt, um den Text unter dem Circle zentral darzustellen => !Funktioniert nur für circle im Augenblick*/
-       .step-container {        
-         display: flex;
-         flex-direction: column;
-         align-items: center;
-         
-         text-align: center;
-         z-index: 51;
-         width: 100%;
-       }
- 
-       .step {        
-         /*margin: auto;  /* Magic!/*/        
-         
-       }
- 
-       .step.circle {
-         width: 40px;  /* Or whatever */        
-         height: 40px;  /* Or whatever */        
-         border-radius: 50%;
- 
-         border: solid 1px var(--my-step-unfinished-border-color);
-         box-shadow: 1px 1px grey;
-         /*background-image: linear-gradient(to right, var(--my-step-unfinished-color), lightgrey);*/
-         background-color: var(--my-step-unfinished-color);
-       }
- 
-       .step.tab {
-         width: 100%;
-         max-width: 250px;
-         height: 40px;             
-         border: solid 1px var(--my-step-unfinished-border-color);
-         box-shadow: 1px 1px grey;
-         background-image: linear-gradient(to right, var(--my-step-unfinished-color) , grey);
-         cursor: pointer;
-       }      
- 
-       .step.tab:hover:not(.current) {        
-         border: solid 1px yellow;        
-         background-image: linear-gradient(to right, var(--my-step-hover-color), grey);
-       }
- 
-       .circle.passed {
-         /*background-image: linear-gradient(to right, var(--my-step-passed-color) , var(--my-step-passed-gradient-color));      */
-         background-color: var(--my-step-passed-color);
-         border: solid 2px var(--my-step-passed-border-color);
-         cursor: pointer;
-       }
- 
-       .circle.passed:hover {        
-         background-color: var(--my-step-current-name-circle-color);        
-       }
- 
-       .circle.current {
-         /*background-image: linear-gradient(to right, var(--my-step-current-color) , var(--my-step-current-gradient-color)); */
-         background-color: var(--my-step-current-color);
-         border: solid 2px var(--my-step-current-border-color);        
-       }
- 
-       .tab.current {
-         background-image: linear-gradient(to right, var(--my-step-current-color), grey);                                      
-         box-shadow: 1px 1px grey;
-         border-color: var(--my-step-current-border-color);
-         cursor: auto;
-       }
- 
-       .step-nr {        
-         font-family: var(--my-font);
-         color: var(--my-step-text-color);        
-         font-weight: bold;
-         font-size: 1.5em;                
-         line-height: 37px;        
-         pointer-events: none;
-       }
- 
-       /* Style Tab ohne Step Nr /*/
-       .tab .step-nr {        
-         display: none;
-       }
- 
-       .step-name {                
-         color: var(--my-step-text-color);
-         font-family: var(--my-font);
-         font-size: 1em;                       
-       }
- 
-       /* Style Circle ohne Step Name => ToDo: Nur ab bestimmter Breite /*/
-       .circle .step-name {       
-         white-space: nowrap;    
-         color: var(--my-step-name-circle-color);
-         /* display: none; */        
-         font-weight: bold;
-         padding-top: 8px;
-       }
- 
-       .circle .step-name.passed {
-         color: var(--my-step-passed-name-circle-color);        
-       }          
- 
-       .circle .step-name.current {
-         color: var(--my-step-current-name-circle-color);        
-       }  
- 
-       .circle .step-nr.current {
-         color: var(--my-step-current-text-color);        
-       }  
-             
-       /* used for circle style */
-       hr {
-         /*background: linear-gradient(to right, var(--my-step-passed-color) , var(--my-step-unfinished-color));*/
-         background-color: var(--my-hr-bg-color);
-         height: 3px;
-         position: relative;
-         top: 33px;
-         z-index: 50;
-         width: 100%;        
-       }
- 
-       /* Size Elements for small width */
-       @media (max-width: 600px) {
-         .parent {
-           /*height: 30px; /* Or whatever */
-         }
-         .step.circle {          
-           height: 30px; /* Or whatever */
-           width: 30px;
-         }
-         .step.tab {          
-           height: 30px; /* Or whatever */          
-         }
-         hr {          
-           height: 2px;
-           top: 28px;
-         }        
-         .step-nr {
-           font-size: 1.2em;        
-           text-align: center;
-           line-height: 28px;        
-         }
-         .step-name {
-           font-size: 0.9em;                            
-         }
- 
-         .circle .step-name {       
-           padding-top: 3px;
-         }
-       }
-     `;
-   }
- 
-   static get properties() {
-     return {
-       /**
-        * The steps for this component
-        */
-       steps: {type: Array},
-       currentStepNr: {type: Number},
-       styleTyp: {type: String}
-     };
-   }
- 
-   constructor() {
-     super();
-     this.steps = [];
-     this.currentStepNr = -99;
-     this.styleTyp = 'circle';
-   }
- 
-   render() {
-     switch (this.styleTyp) {
-       // TODO: Noch das gleiche, ggf. später gebraucht...
-       case 'circle':
-         return this._renderCircle();
-       case 'tab':
-         return this._renderCircle();
-        default:
-            return '';
-     }
-   }
- 
-   _renderCircle() {
-     return html`
-     ${this.styleTyp === 'circle' ? html`<hr/>` : ''}
-      <div class="parent ${this.styleTyp}">     
-      ${this.steps.map((st, index) => {
-       let pClass = ''
-       if (this.currentStepNr > index) {
-         pClass = this.currentStepNr === (index + 1) ? 'current' : 'passed';
-       }       
-       return  html`
-       <div class="step-container">
-         <div class="step ${this.styleTyp} ${pClass}" data-step="${index + 1}" @click="${this._stepClicked}">
-           <span class="step-nr ${pClass}">${index + 1}</span>          
-         </div> 
-         <span class="step-name ${pClass}">${st.name}</span>  
-       </div>
-       
-      `})}
+        /* short hand for above lines => default, not needed */
+        flex-flow: row nowrap;
+        align-items: center;
+        /*height: 50px; /* Or whatever */
+        padding-bottom: 10px;
+      }
+
+      .parent.circle {
+        justify-content: space-around;
+      }
+
+      .parent.tab {
+        justify-content: start;
+      }
+
+      /* Eingeführt, um den Text unter dem Circle zentral darzustellen => !Funktioniert nur für circle im Augenblick*/
+      .step-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        text-align: center;
+        z-index: 51;
+        width: 100%;
+      }
+
+      .step {
+        /*margin: auto;  /* Magic!/*/
+      }
+
+      .step.circle {
+        width: 40px; /* Or whatever */
+        height: 40px; /* Or whatever */
+        border-radius: 50%;
+
+        border: solid 1px var(--my-step-unfinished-border-color);
+        box-shadow: 1px 1px grey;
+        /*background-image: linear-gradient(to right, var(--my-step-unfinished-color), lightgrey);*/
+        background-color: var(--my-step-unfinished-color);
+      }
+
+      .step.tab {
+        width: 100%;
+        max-width: 250px;
+        height: 40px;
+        border: solid 1px var(--my-step-unfinished-border-color);
+        box-shadow: 1px 1px grey;
+        background-image: linear-gradient(
+          to right,
+          var(--my-step-unfinished-color),
+          grey
+        );
+        cursor: pointer;
+      }
+
+      .step.tab:hover:not(.current) {
+        border: solid 1px yellow;
+        background-image: linear-gradient(
+          to right,
+          var(--my-step-hover-color),
+          grey
+        );
+      }
+
+      .circle.passed {
+        /*background-image: linear-gradient(to right, var(--my-step-passed-color) , var(--my-step-passed-gradient-color));      */
+        background-color: var(--my-step-passed-color);
+        border: solid 2px var(--my-step-passed-border-color);
+        cursor: pointer;
+      }
+
+      .circle.passed:hover {
+        background-color: var(--my-step-current-name-circle-color);
+      }
+
+      .circle.current {
+        /*background-image: linear-gradient(to right, var(--my-step-current-color) , var(--my-step-current-gradient-color)); */
+        background-color: var(--my-step-current-color);
+        border: solid 2px var(--my-step-current-border-color);
+      }
+
+      .tab.current {
+        background-image: linear-gradient(
+          to right,
+          var(--my-step-current-color),
+          grey
+        );
+        box-shadow: 1px 1px grey;
+        border-color: var(--my-step-current-border-color);
+        cursor: auto;
+      }
+
+      .step-nr {
+        font-family: var(--my-font);
+        color: var(--my-step-text-color);
+        font-weight: bold;
+        font-size: 1.5em;
+        line-height: 37px;
+        pointer-events: none;
+      }
+
+      /* Style Tab ohne Step Nr /*/
+      .tab .step-nr {
+        display: none;
+      }
+
+      .step-name {
+        color: var(--my-step-text-color);
+        font-family: var(--my-font);
+        font-size: 1em;
+      }
+
+      /* Style Circle ohne Step Name => ToDo: Nur ab bestimmter Breite /*/
+      .circle .step-name {
+        white-space: nowrap;
+        color: var(--my-step-name-circle-color);
+        /* display: none; */
+        font-weight: bold;
+        padding-top: 8px;
+      }
+
+      .circle .step-name.passed {
+        color: var(--my-step-passed-name-circle-color);
+      }
+
+      .circle .step-name.current {
+        color: var(--my-step-current-name-circle-color);
+      }
+
+      .circle .step-nr.current {
+        color: var(--my-step-current-text-color);
+      }
+
+      /* used for circle style */
+      hr {
+        /*background: linear-gradient(to right, var(--my-step-passed-color) , var(--my-step-unfinished-color));*/
+        background-color: var(--my-hr-bg-color);
+        height: 3px;
+        position: relative;
+        top: 33px;
+        z-index: 50;
+        width: 100%;
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 600px) {
+        .parent {
+          /*height: 30px; /* Or whatever */
+        }
+        .step.circle {
+          height: 30px; /* Or whatever */
+          width: 30px;
+        }
+        .step.tab {
+          height: 30px; /* Or whatever */
+        }
+        hr {
+          height: 2px;
+          top: 28px;
+        }
+        .step-nr {
+          font-size: 1.2em;
+          text-align: center;
+          line-height: 28px;
+        }
+        .step-name {
+          font-size: 0.9em;
+        }
+
+        .circle .step-name {
+          padding-top: 3px;
+        }
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The steps for this component
+       */
+      steps: { type: Array },
+      currentStepNr: { type: Number },
+      styleTyp: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.steps = [];
+    this.currentStepNr = -99;
+    this.styleTyp = 'circle';
+  }
+
+  render() {
+    switch (this.styleTyp) {
+      // TODO: Noch das gleiche, ggf. später gebraucht...
+      case 'circle':
+        return this._renderCircle();
+      case 'tab':
+        return this._renderCircle();
+      default:
+        return '';
+    }
+  }
+
+  _renderCircle() {
+    return html`
+      ${this.styleTyp === 'circle' ? html`<hr />` : ''}
+      <div class="parent ${this.styleTyp}">
+        ${this.steps.map((st, index) => {
+          let pClass = '';
+          if (this.currentStepNr > index) {
+            pClass = this.currentStepNr === index + 1 ? 'current' : 'passed';
+          }
+          return html`
+            <div class="step-container">
+              <div
+                class="step ${this.styleTyp} ${pClass}"
+                data-step="${index + 1}"
+                @click="${this._stepClicked}"
+              >
+                <span class="step-nr ${pClass}">${index + 1}</span>
+              </div>
+              <span class="step-name ${pClass}">${st.name}</span>
+            </div>
+          `;
+        })}
       </div>
-     `;
-   }
-  
-   _stepClicked(e) {    
-     const stepNr = e.target.dataset.step;    
-     if (stepNr < this.currentStepNr) {      
-       this.dispatchEvent(new CustomEvent('go-to', {
-         detail: {
-           step: stepNr
-         },
-         bubbles: true,
-         composed: true
-       }));
-     }
-   }
- 
- }
- 
- window.customElements.define('pd-steps', PdSteps);
- 
+    `;
+  }
+
+  _stepClicked(e) {
+    const stepNr = e.target.dataset.step;
+    if (stepNr < this.currentStepNr) {
+      this.dispatchEvent(
+        new CustomEvent('go-to', {
+          detail: {
+            step: stepNr,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+}
+
+window.customElements.define('pd-steps', PdSteps);

package/src/PdWizard.js

@@ -1,300 +1,358 @@
 /**
  * @license
- * Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { LitElement, html, css, svg } from 'lit';
+import { LitElement, html, css } from 'lit';
 
 import '@progressive-development/pd-forms/PdButton.js';
 import './PdSteps.js';
-  
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
- export class PdWizard extends LitElement {
-   /**
-    * Fired when next step clicked
-    * @event next-step
-    */
- 
-   /**
-    * Fired when previous step clicked
-    * @event previous-step
-    */
- 
-   /**
-    * Fired when wizard submited
-    * @event submit-wizard
-    */
-   /**
-    * Fired when wizard submited
-    * @event close-wizard
-    */
- 
-   static get styles() {
-     return css`
-       :host {
-         --my-font: var(--app-font, Oswald);
- 
-         --my-header-background-color: var(--squi-test, #084c61);
-         --my-header-text-color: var(--squi-test, white);
- 
-         --my-footer-background-color: var(--squi-test, #fefefe);
- 
-         display: block;
-         /*min-height: 100%;*/
-         height: 100%;
-       }
- 
-       /* Layout Grid for the Wizard Component 
+
+// TODO: dont get it running with attribute???
+export const ticomiLogo = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 298.09 120.94"
+    class="logo"
+  >
+    <g id="Ebene_2" data-name="Ebene 2">
+      <!--g style="fill: var(--logo-fill-1,#15a1dc)"-->
+      <g id="Ebene_1-2" data-name="Ebene 1">
+        <path
+          d="M115.21,72.59c-2,0-3.5-1.46-3.5-4.68V48.68h7.2V44h-7.17l.12-9.64h-7l-3.49,9.6-5,.65v4.1h4.44V61.75c0,2.68-.07,4.52-.07,6.91,0,6.78,3.64,9.55,9.87,9.55,5,0,8.23-2,10.05-5.49l-1.68-1.65A6.16,6.16,0,0,1,115.21,72.59Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M136.92,62.74V53.63l.21-10L136,42.92l-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74L137,73.26C137,69.89,136.92,65.66,136.92,62.74Z"
+          style="fill:#fff"
+        ></path>
+        <ellipse
+          cx="131.35"
+          cy="32.37"
+          rx="5.82"
+          ry="5.47"
+          style="fill:#fff"
+        ></ellipse>
+        <path
+          d="M163.55,46.46a10.9,10.9,0,0,1,1.29.08l.44,3.46c.33,4.84,2.56,6.51,5.27,6.51,2.47,0,3.89-1.12,4.63-3.58-.5-5.48-5.58-10-12.83-10-10.25,0-18.55,6.51-18.55,17.74,0,11.55,7.74,17.55,17.1,17.55,6.5,0,11.44-2.67,14.09-8.27l-2.39-2.11a9.87,9.87,0,0,1-7.73,3.82c-5.77,0-9.57-4.34-9.57-12.25C155.3,50.11,159.6,46.46,163.55,46.46Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M196.07,42.92c-9.83,0-17.44,6.95-17.44,17.51s6.72,17.78,17.44,17.78,17.44-7.07,17.44-17.78S205.86,42.92,196.07,42.92Zm0,31.7c-3.88,0-5.81-4.24-5.81-14s1.93-14.07,5.81-14.07,5.81,4.32,5.81,14.07S199.92,74.62,196.07,74.62Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M272.87,62.74V55.07c0-8.16-3.08-12.15-10-12.15-3.92,0-7.26,1.47-11.09,6.12-1.35-4.09-4.39-6.12-9.07-6.12-4.13,0-7.47,1.94-10.76,5.8l-.41-5.06-1.18-.74L216.8,47.49v2.7l4.2.62c.19,2.75.21,4.18.21,8v4c0,2.89,0,7.07-.1,10.43l-3.7.8v3.2h18.07V74l-3.23-.69c-.06-3.37-.1-7.62-.1-10.54V52.07a9.42,9.42,0,0,1,5.68-2.5c3,0,4,1.76,4,6.56v6.61c0,3,0,7.1-.09,10.43l-3.56.8v3.2h17.73V74l-3.23-.7c-.07-3.34-.1-7.52-.1-10.53v-8a22.71,22.71,0,0,0-.15-2.69,9.14,9.14,0,0,1,5.8-2.48c2.82,0,3.91,1.36,3.91,6.52v6.65c0,3,0,7.11-.09,10.44l-3.32.79v3.2H276.4V74L273,73.24C272.9,69.91,272.87,65.74,272.87,62.74Z"
+          style="fill:#fff"
+        ></path>
+        <ellipse
+          cx="288.99"
+          cy="32.37"
+          rx="5.82"
+          ry="5.47"
+          style="fill:#fff"
+        ></ellipse>
+        <path
+          d="M294.66,73.26c-.06-3.37-.09-7.6-.09-10.52V53.63l.2-10-1.18-.74-14.38,4.57v2.7l4.24.62c.14,2.75.21,4.88.21,8.66v3.27c0,2.89,0,7.08-.1,10.43l-3.69.8v3.2h18.22V74Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M100.27,113.34V97.1H96.33V95.29l4-.22.29-7.31h2v7.31h7.32v2H102.6v16.42c0,3.22.81,5.4,4.29,5.4a9.14,9.14,0,0,0,3.17-.8l.61,1.88a14.75,14.75,0,0,1-4.13.94C101.69,120.94,100.27,117.87,100.27,113.34Zm17-5.6c0-8.24,5.36-13.3,11-13.3,6,0,9.67,4.25,9.67,11.68a10.92,10.92,0,0,1-.13,1.89H119.71c.09,6.37,3.82,10.93,9.51,10.93A11.4,11.4,0,0,0,136,116.7l1,1.76a13.84,13.84,0,0,1-8,2.48C122.55,120.94,117.32,116,117.32,107.74Zm18.49-1.64c0-6.45-2.92-9.66-7.46-9.66-4.26,0-8.12,3.62-8.65,9.66Zm10.84,1.64c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15A10,10,0,0,0,165,116l1.2,1.63a12,12,0,0,1-8.06,3.33C151.59,120.94,146.65,116.09,146.65,107.74Zm29.67-25.25h2.32v11l0,5.56c2.64-2.62,5.26-4.59,8.74-4.59,5.21,0,7.63,3.16,7.63,9.68v16.19h-2.32V104.43c0-5.36-1.69-7.9-5.75-7.9-3,0-5.19,1.59-8.26,4.74v19h-2.32ZM208,95.07h2l.25,3.91h.12c2.57-2.57,5.2-4.54,8.68-4.54,5.22,0,7.64,3.16,7.64,9.68v16.19h-2.32V104.43c0-5.36-1.7-7.9-5.76-7.9-3,0-5.18,1.59-8.25,4.74v19H208Zm31-8.16a2.12,2.12,0,0,1,4.23,0,2.12,2.12,0,0,1-4.23,0Zm.91,8.16h2.32v25.24h-2.32Zm13.85,12.67c0-8.44,5.4-13.3,11.54-13.3a10.35,10.35,0,0,1,7.39,3.11l-1.37,1.62a8.57,8.57,0,0,0-6-2.68c-5.16,0-9.15,4.6-9.15,11.25s3.63,11.15,9.12,11.15a10,10,0,0,0,6.76-2.91l1.2,1.63a12,12,0,0,1-8.06,3.33C258.71,120.94,253.77,116.09,253.77,107.74Zm26.53,9.71,1.34-1.69a11.7,11.7,0,0,0,8,3.2c4,0,6-2.33,6-5,0-3.16-3.27-4.55-6.18-5.6-3.81-1.35-8-2.9-8-7.22,0-3.63,2.88-6.71,8.13-6.71a11.89,11.89,0,0,1,7.22,2.61l-1.25,1.68a9.6,9.6,0,0,0-6-2.31c-3.94,0-5.72,2.27-5.72,4.6,0,2.88,3,4,6,5.11,3.91,1.49,8.24,2.78,8.24,7.7,0,3.8-3,7.11-8.51,7.11A14.39,14.39,0,0,1,280.3,117.45Z"
+          style="fill:#fff"
+        ></path>
+        <path
+          d="M74,70.68C74,27.21,29.57,0,29.57,0a121.75,121.75,0,0,1-9,30.61C13.35,46.77,0,57.83,0,76.72c0,24.43,17.1,44.22,37.18,44.22S74,98.27,74,70.68Z"
+          style="fill:#db3a34"
+        ></path>
+        <path
+          d="M67.14,78.6C67.14,42,31,19.07,31,19.07a105.49,105.49,0,0,1-7.34,25.78C17.74,58.46,6.86,67.78,6.86,83.7c0,20.57,13.93,37.24,30.29,37.24S67.14,101.84,67.14,78.6Z"
+          style="fill:#f7931e"
+        ></path>
+        <path
+          d="M57.92,88.46c0-28.09-25.12-45.67-25.12-45.67a87.16,87.16,0,0,1-5.1,19.78C23.63,73,16.08,80.16,16.08,92.37c0,15.78,9.67,28.57,21,28.57S57.92,106.29,57.92,88.46Z"
+          style="fill:#ffc857"
+        ></path>
+        <path
+          d="M47.44,104.74c0-14-12.53-22.77-12.53-22.77a43.35,43.35,0,0,1-2.55,9.86c-2,5.21-5.79,8.77-5.79,14.86,0,7.87,4.82,14.25,10.48,14.25S47.44,113.64,47.44,104.74Z"
+          style="fill:#fff"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdWizard extends LitElement {
+  /**
+   * Fired when next step clicked
+   * @event next-step
+   */
+
+  /**
+   * Fired when previous step clicked
+   * @event previous-step
+   */
+
+  /**
+   * Fired when wizard submited
+   * @event submit-wizard
+   */
+  /**
+   * Fired when wizard submited
+   * @event close-wizard
+   */
+
+  static get styles() {
+    return css`
+      :host {
+        --my-font: var(--app-font, Oswald);
+
+        --my-header-background-color: var(--squi-test, #084c61);
+        --my-header-text-color: var(--squi-test, white);
+
+        --my-footer-background-color: var(--squi-test, #fefefe);
+
+        display: block;
+        /*min-height: 100%;*/
+        height: 100%;
+      }
+
+      /* Layout Grid for the Wizard Component 
           Wird hier für die "Text-Bildschirmgröße" verwendet, umstellen/gleichziehen => verschiedene Implementierungen, die Flex Variante (ticomi-web) scheint am schlankesten...
        */
-       .layout-container {
-         /*min-height: 100%;*/
-         height: 100%;
-         display: grid;
-         grid-template-columns: minmax(10px, auto) minmax(300px, 1000px) minmax(
-             5px,
-             auto
-           );
-         /*grid-template-rows: auto minmax(30em, 1fr) 4.166rem; /* ToDo wie 100% hoch????* für content, damit footer unten ist?*/
-         gap: 1px;
-         grid-template-areas:
-           'header header header'
-           '. content .'
-           '. footer .';
-       }
- 
-       /* Grid Area positions for layout container above */
-       .wiz-header {
-         grid-area: header;
-       }
-       .wiz-content {
-         grid-area: content;
-         margin-top: 20px; /* ToDo: Steps sind verschoben, daher hier mehr*/
-         /*min-height: 100%;*/
-         height: 100%;
-         max-width: 1200px;
-       }
- 
-       .wiz-buttons {
-         grid-area: footer;
-         display: flex;
-         /*padding-left: 50px;
+      .layout-container {
+        /*min-height: 100%;*/
+        height: 100%;
+        display: grid;
+        grid-template-columns: minmax(10px, auto) minmax(300px, 1000px) minmax(
+            5px,
+            auto
+          );
+        /*grid-template-rows: auto minmax(30em, 1fr) 4.166rem; /* ToDo wie 100% hoch????* für content, damit footer unten ist?*/
+        gap: 1px;
+        grid-template-areas:
+          'header header header'
+          '. content .'
+          '. footer .';
+      }
+
+      /* Grid Area positions for layout container above */
+      .wiz-header {
+        grid-area: header;
+      }
+      .wiz-content {
+        grid-area: content;
+        margin-top: 20px; /* ToDo: Steps sind verschoben, daher hier mehr*/
+        /*min-height: 100%;*/
+        height: 100%;
+        max-width: 1200px;
+      }
+
+      .wiz-buttons {
+        grid-area: footer;
+        display: flex;
+        /*padding-left: 50px;
          padding-right: 50px;*/
-         justify-content: space-between;
-         background-color: var(--my-footer-background-color);
-       }
- 
-       .wiz-breadcrumbs {
-       }
- 
-       .wiz-title {
-         text-align: center;
-         background-color: var(--my-header-background-color);
-         height: 80px;
-         line-height: 80px;
-         padding-left: 80px;
-       }
- 
-       .title {
-         font-family: var(--my-font);
-         font-size: 1.8em;
-         font-weight: bolder;
-         color: var(--my-header-text-color);
-       }
- 
-       .logo {
-         max-width: 8rem;
-         width: 8rem; /* wird sonst im Chrome nicht angezeigt*/
-         position: absolute;
-         left: 20px;
-         top: 10px;
-       }
- 
-       /* The Close Button */
-       .close {
-         position: absolute;
-         color: #fefefe;
-         font-size: 2.5em;
-         font-weight: bold;
-         line-height: 1em;
-         top: 5px;
-         right: 10px;
-       }
- 
-       .close:hover,
-       .close:focus {
-         color: rgb(247, 211, 8);
-         text-decoration: none;
-         cursor: pointer;
-       }
- 
-       /* Size Elements for small width */
-       @media (max-width: 550px) {
-         .wiz-title {
-           height: 60px;
-           line-height: 60px;
-         }
- 
-         .wiz-breadcrumbs {
-         }
- 
-         .title {
-           font-size: 1.5em;
-         }
- 
-         .logo {
-           max-width: 6rem;
-           width: 6rem; /* wird sonst im Chrome nicht angezeigt*/
-         }
- 
-         .close {
-           font-size: 1.5em;
-           right: 5px;
-         }
-       }
- 
-       /* Size Elements for small width */
-       @media (max-width: 380px) {
-         .wiz-title {
-           text-align: right;
-           padding-right: 20px;
-         }
- 
-         .title {
-           font-size: 1.2em;
-         }
-       }
-     `;
-   }
- 
-   static get properties() {
-     return {
-       currentNumber: { type: Number },
-       wizardSteps: { Array },
-       logo: { type: Object }
-     };
-   }
- 
-   constructor() {
-     super();
-     this.currentNumber = -99;
-     this.wizardSteps = [];
-     this.logo = {};
-   }
- 
-   render() {
-     if (this.wizardSteps && this.wizardSteps.length > 0) {
-       return html`
-         <div class="layout-container">
-           <div class="wiz-header">
-             <div class="wiz-title">
-
-              ${this.logo && (this.logo.src || this.logo.svg)
-                ? html`
-                  ${this.logo.src
-                    ? html` <img src="${this.logo.src}" alt="" /> `
-                    : svg`${this.logo.svg}`}
-              ` : ''}
-
-               <span class="title"
-                 >${this.currentNumber >= 1 && this.wizardSteps
-                   ? this.wizardSteps[this.currentNumber - 1].title
-                   : 'No-Title'}</span
-               >
-               <span
-                 class="close"
-                 @click="${this._closeWizard}"
-                 @keypress="${this._closeWizard}"
-                 >&times;</span
-               >
-             </div>
-             <div class="wiz-breadcrumbs">
-               <pd-steps
-                 .steps="${this.wizardSteps}"
-                 currentStepNr="${this.currentNumber}"
-               ></pd-steps>
-             </div>
-           </div>
- 
-           <div class="wiz-content">
-             <div style="${this.currentNumber === 1 ? '' : 'display:none'}">
-               <slot name="step-1"></slot>
-             </div>
-             <div style="${this.currentNumber === 2 ? '' : 'display:none'}">
-               <slot name="step-2"></slot>
-             </div>
-             <div style="${this.currentNumber === 3 ? '' : 'display:none'}">
-               <slot name="step-3"></slot>
-             </div>
-             <div style="${this.currentNumber === 4 ? '' : 'display:none'}">
-               <slot name="step-4"></slot>
-             </div>
-           </div>
- 
-           <div class="wiz-buttons">
-             ${this.currentNumber >= 1 && this.wizardSteps
-               ? html`
-                   <squi-button
-                     @click="${this._previousStep}"
-                     text="Terug"
-                     style="visibility: ${this.currentNumber === 1
-                       ? 'hidden'
-                       : 'visible'};"
-                   ></squi-button>
-                   ${this.currentNumber !== this.wizardSteps.length &&
-                   this.wizardSteps[this.currentNumber - 1].next !== false
-                     ? html`<squi-button
-                         @click="${this._nextStep}"
-                         text="Volgende"
-                       ></squi-button>`
-                     : ''}
-                   ${this.currentNumber === this.wizardSteps.length
-                     ? html`<squi-button
-                         primary
-                         @click="${this._submit}"
-                         text="Order"
-                       ></squi-button>`
-                     : ''}
-                 `
-               : ''}
-           </div>
-         </div>
-       `;
-     }
-     return '';
-   }
- 
-   _previousStep() {
-     this.dispatchEvent(new CustomEvent('previous-step'));
-   }
- 
-   _nextStep() {
-     this.dispatchEvent(new CustomEvent('next-step'));
-   }
- 
-   _submit() {
-     this.dispatchEvent(new CustomEvent('submit-wizard'));
-   }
- 
-   _closeWizard() {
-     // eslint-disable-next-line no-restricted-globals
-     const r = confirm('Data will be lost, abort current order?');
-     if (r === true) {
-       this.dispatchEvent(new CustomEvent('close-wizard'));
-     }
-   }
- }
+        justify-content: space-between;
+        background-color: var(--my-footer-background-color);
+      }
+
+      .wiz-breadcrumbs {
+      }
+
+      .wiz-title {
+        text-align: center;
+        background-color: var(--my-header-background-color);
+        height: 80px;
+        line-height: 80px;
+        padding-left: 80px;
+      }
+
+      .title {
+        font-family: var(--my-font);
+        font-size: 1.8em;
+        font-weight: bolder;
+        color: var(--my-header-text-color);
+      }
+
+      .logo {
+        max-width: 8rem;
+        width: 8rem; /* wird sonst im Chrome nicht angezeigt*/
+        position: absolute;
+        left: 20px;
+        top: 10px;
+      }
+
+      /* The Close Button */
+      .close {
+        position: absolute;
+        color: #fefefe;
+        font-size: 2.5em;
+        font-weight: bold;
+        line-height: 1em;
+        top: 5px;
+        right: 10px;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: rgb(247, 211, 8);
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 550px) {
+        .wiz-title {
+          height: 60px;
+          line-height: 60px;
+        }
+
+        .wiz-breadcrumbs {
+        }
+
+        .title {
+          font-size: 1.5em;
+        }
+
+        .logo {
+          max-width: 6rem;
+          width: 6rem; /* wird sonst im Chrome nicht angezeigt*/
+        }
+
+        .close {
+          font-size: 1.5em;
+          right: 5px;
+        }
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 380px) {
+        .wiz-title {
+          text-align: right;
+          padding-right: 20px;
+        }
+
+        .title {
+          font-size: 1.2em;
+        }
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      currentNumber: { type: Number },
+      wizardSteps: { Array },
+      logo: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.currentNumber = -99;
+    this.wizardSteps = [];
+    this.logo = {};
+  }
+
+  render() {
+    if (this.wizardSteps && this.wizardSteps.length > 0) {
+      return html`
+        <div class="layout-container">
+          <div class="wiz-header">
+            <div class="wiz-title">
+              ${ticomiLogo}
+
+              <span class="title"
+                >${this.currentNumber >= 1 && this.wizardSteps
+                  ? this.wizardSteps[this.currentNumber - 1].title
+                  : 'No-Title'}</span
+              >
+              <span
+                class="close"
+                @click="${this._closeWizard}"
+                @keypress="${this._closeWizard}"
+                >&times;</span
+              >
+            </div>
+            <div class="wiz-breadcrumbs">
+              <pd-steps
+                .steps="${this.wizardSteps}"
+                currentStepNr="${this.currentNumber}"
+              ></pd-steps>
+            </div>
+          </div>
+
+          <div class="wiz-content">
+            <div style="${this.currentNumber === 1 ? '' : 'display:none'}">
+              <slot name="step-1"></slot>
+            </div>
+            <div style="${this.currentNumber === 2 ? '' : 'display:none'}">
+              <slot name="step-2"></slot>
+            </div>
+            <div style="${this.currentNumber === 3 ? '' : 'display:none'}">
+              <slot name="step-3"></slot>
+            </div>
+            <div style="${this.currentNumber === 4 ? '' : 'display:none'}">
+              <slot name="step-4"></slot>
+            </div>
+          </div>
+
+          <div class="wiz-buttons">
+            ${this.currentNumber >= 1 && this.wizardSteps
+              ? html`
+                  <squi-button
+                    @click="${this._previousStep}"
+                    text="Terug"
+                    style="visibility: ${this.currentNumber === 1
+                      ? 'hidden'
+                      : 'visible'};"
+                  ></squi-button>
+                  ${this.currentNumber !== this.wizardSteps.length &&
+                  this.wizardSteps[this.currentNumber - 1].next !== false
+                    ? html`<squi-button
+                        @click="${this._nextStep}"
+                        text="Volgende"
+                      ></squi-button>`
+                    : ''}
+                  ${this.currentNumber === this.wizardSteps.length
+                    ? html`<squi-button
+                        primary
+                        @click="${this._submit}"
+                        text="Order"
+                      ></squi-button>`
+                    : ''}
+                `
+              : ''}
+          </div>
+        </div>
+      `;
+    }
+    return '';
+  }
+
+  _previousStep() {
+    this.dispatchEvent(new CustomEvent('previous-step'));
+  }
+
+  _nextStep() {
+    this.dispatchEvent(new CustomEvent('next-step'));
+  }
+
+  _submit() {
+    this.dispatchEvent(new CustomEvent('submit-wizard'));
+  }
+
+  _closeWizard() {
+    // eslint-disable-next-line no-restricted-globals
+    const r = confirm('Data will be lost, abort current order?');
+    if (r === true) {
+      this.dispatchEvent(new CustomEvent('close-wizard'));
+    }
+  }
+}

package/test/pd-wizard.test.js

@@ -19,7 +19,9 @@ describe('PdWizard', () => {
   });
 
   it('can override the title via attribute', async () => {
-    const el = await fixture(html`<pd-wizard title="attribute title"></pd-wizard>`);
+    const el = await fixture(
+      html`<pd-wizard title="attribute title"></pd-wizard>`
+    );
 
     expect(el.title).to.equal('attribute title');
   });