@progressive-development/pd-wizard 0.1.59 → 0.1.60

package/package.json

@@ -14,7 +14,7 @@
     "order",
     "steps"
   ],
-  "version": "0.1.59",
+  "version": "0.1.60",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdSteps.js

@@ -100,7 +100,7 @@ class PdSteps extends LitElement {
         z-index: 51;
         width: 100%;
 
-        padding-top: 10px;
+        padding-top: var(--pd-steps-padding-top, 10px);
       }
 
       .step {
@@ -220,7 +220,7 @@ class PdSteps extends LitElement {
         background-color: var(--my-hr-bg-color);
         height: 3px;
         position: relative;
-        top: 43px;
+        top: calc(33px + var(--pd-steps-padding-top, 10px));
         z-index: 50;
       }
 

package/src/PdWizard.js

@@ -7,7 +7,7 @@
 import { LitElement, html, css } from 'lit';
 import { msg, updateWhenLocaleChanges } from '@lit/localize';
 
-import { ICON_CLOSE as CLOSEICON } from '@progressive-development/pd-icon/src/PdIcon.js';
+import { ICON_CLOSE as CLOSEICON, ICON_ARROW_BACK, ICON_CAMERA, ICON_NEXT, ICON_PREVIOUS, ICON_XCLOSE } from '@progressive-development/pd-icon/src/PdIcon.js';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 import '@progressive-development/pd-forms/pd-button.js';
@@ -89,12 +89,6 @@ export class PdWizard extends LitElement {
         top: 6px;
         right: 6px;
 
-        display: flex;
-        align-items: center;
-        gap: 5px;
-
-        font-size: 0.8rem;
-
         cursor: pointer;
 
         --pd-icon-col: var(--my-header-bg-col);
@@ -117,7 +111,6 @@ export class PdWizard extends LitElement {
         display: flex;
         justify-content: var(--pd-wizard-justify-content, center);        
         flex-grow: 1;
-        height: 100%;
 
         background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));
         padding: var(--pd-wizard-content-padding, 1em);
@@ -145,6 +138,42 @@ export class PdWizard extends LitElement {
         border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
       }
 
+      /* 
+       * CSS for panel wizard 
+       */
+      .wiz-panel-h {
+        padding: 0.5em 2.5em 0.5em 2.5em;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .wiz-panel-h h1 {
+        color: var(--pd-default-col);
+        padding: 0;
+        margin: 0;
+        font-size: 1.6em;
+      }
+
+      .header-icons {
+        display: flex;
+        align-items: center;
+        gap: 0.2em;
+      }
+
+      .header-icons pd-icon {        
+        --pd-icon-stroke-col-active: var(--pd-default-col);
+        --pd-icon-col-active: var(--pd-default-light-col);
+        --pd-icon-stroke-col: var(--pd-default-col);
+        --pd-icon-col: var(--pd-default-light-col);
+        cursor: pointer;
+      }
+
+      .panel-close-icon {
+        --pd-icon-size: 3em;
+        padding-left: 1.8em;
+      }
+
 
       /* Size Elements for small width */
       @media (max-width: 700px) {
@@ -164,6 +193,7 @@ export class PdWizard extends LitElement {
       currentNumber: { type: Number },
       wizardSteps: { Array },
       logo: { type: Object },      
+      panelWizard: { type: Boolean },      
     };
   }
 
@@ -172,6 +202,7 @@ export class PdWizard extends LitElement {
     updateWhenLocaleChanges(this);
     this.currentNumber = -99;
     this.wizardSteps = [];    
+    this.panelWizard = false;    
   }
 
   render() {
@@ -180,18 +211,38 @@ export class PdWizard extends LitElement {
 
         <div class="wiz-header">
 
-          <div class="wiz-title">
-            <slot name="slotLogo"></slot>
-            <span class="title"
-              >${this.currentNumber >= 1 && this.wizardSteps
-                ? this.wizardSteps[this.currentNumber - 1].title
-                : 'No-Title'}</span
-            >
-            <div class="close" @click="${this._closeWizard}">
-              <span>Close</span>
-              <pd-icon icon="${CLOSEICON}"></pd-icon>
+        ${this.panelWizard ? html`
+          <div class="wiz-panel-h">
+            <h1>${this.currentNumber >= 1 && this.wizardSteps
+                  ? this.wizardSteps[this.currentNumber - 1].title
+                  : 'No-Title'}</h1>
+            <div class="header-icons">
+              <pd-icon icon="${ICON_ARROW_BACK}" ?disabled="${this.currentNumber === 1}" 
+                title="Previous Step" activeIcon @click="${this._previousStep}"></pd-icon>
+
+              ${this.currentNumber !== this.wizardSteps.length ? html`
+              <pd-icon style="transform: rotate(180deg);" icon="${ICON_ARROW_BACK}" ?disabled="${this.wizardSteps[this.currentNumber - 1].next === false}"
+                title="Next Step" activeIcon @click="${this._nextStep}"></pd-icon>
+              ` : html`
+              <pd-icon icon="${ICON_CAMERA}"
+                title="Submit" activeIcon @click="${this._submit}"></pd-icon>
+              `} 
+            
+              <pd-icon class="panel-close-icon" 
+                title="Close" activeIcon icon="${ICON_XCLOSE}" @click="${this._closeWizard}"></pd-icon>
             </div>
           </div>
+          ` : html`
+            <div class="wiz-title">
+              <slot name="slotLogo"></slot>
+              <span class="title"
+                >${this.currentNumber >= 1 && this.wizardSteps
+                  ? this.wizardSteps[this.currentNumber - 1].title
+                  : 'No-Title'}</span
+              >                          
+              <pd-icon class="close" icon="${CLOSEICON}" @click="${this._closeWizard}"></pd-icon>            
+            </div>          
+          `}
 
           <div class="wiz-breadcrumbs">
             <pd-steps
@@ -199,7 +250,7 @@ export class PdWizard extends LitElement {
               currentStepNr="${this.currentNumber}"
             ></pd-steps>
           </div>
-          
+
         </div>
 
         <div class="wiz-content">
@@ -224,6 +275,7 @@ export class PdWizard extends LitElement {
 
         </div>
 
+        ${!this.panelWizard ? html`
         <div class="wiz-buttons">
           ${this.currentNumber >= 1 && this.wizardSteps
             ? html`
@@ -251,6 +303,7 @@ export class PdWizard extends LitElement {
               `
             : ''}
         </div>
+        ` : ''}        
       `;
     }
     return '';

package/src/stories/wizard.stories.js

@@ -59,6 +59,10 @@ function WizardPanelTemplate({ wizardSteps, currentNumber }) {
         display: block;
       }
 
+      :host {
+        display: block;
+      }
+
       /* The Modal (background) */
       .modal {        
         position: fixed; /* Stay in place */      
@@ -72,26 +76,42 @@ function WizardPanelTemplate({ wizardSteps, currentNumber }) {
                 
         width: 100%; /* Full width */
         height: 100%; /* Full height */        
-        overflow: auto;
+        overflow: hidden;
         /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
-        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8)); 
+        background-color: var(--pd-modal-panel-bg-rgba, rgba(175, 193, 210, 0.8)); 
       }
 
       .content {
-        background-color: var(--pd-loading-state-bg-col, #edf7fd);
-        border: 2px solid var(--pd-loading-state-bg-col, var(--pd-default-col, #067394));
-        z-index: 101; /* Sit on top */
+        background-color: var(--pd-modal-panel-content-bg-col, var(--pd-default-bg-col, #edf7fd));
+        border: 2px solid var(--pd-modal-panel-content-border-col, var(--pd-default-col, #067394));
+        border-radius: 5px;
+
+        height: var(--pd-modal-panel-content-height, auto);
+        height: var(--pd-modal-panel-content-min-height, auto);
+        max-height: var(--pd-modal-panel-content-max-height, auto);
+        min-width: var(--pd-modal-panel-content-min-width, auto);
+        padding: var(--pd-modal-panel-content-padding, 0);
+        margin: var(--pd-modal-panel-content-margin, 1em);
+      }
+
+      .event-details-panel {
+        --pd-modal-panel-content-bg-col: white;
+        --pd-modal-panel-content-max-height: 90%;
+      }
 
-        height: 90%;
-        margin: 1em;
+      .event-wizard-panel {
+        --pd-modal-panel-content-min-width: 60%;
+        --pd-modal-panel-content-min-height: 45em;
+        --pd-steps-padding-top: 0px;
       }
     </style>
 
-    <div id="modalId" class="modal">
+    <div id="modalId" class="modal event-wizard-panel">
       <div class="content">    
 
         <pd-wizard
           id="wizardId"
+          panelWizard
           .wizardSteps="${wizardSteps}"
           currentNumber="${currentNr}"
           @previous-step="${() => {currentNr -= 1; console.log("Hier hin");}}"