@progressive-development/pd-wizard 0.0.7 → 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.7",
+  "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);