@progressive-development/pd-wizard 0.1.26 → 0.1.28

package/package.json

@@ -14,7 +14,7 @@
     "order",
     "steps"
   ],
-  "version": "0.1.26",
+  "version": "0.1.28",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@lit/localize": "^0.11.2",
-    "@progressive-development/pd-forms": "^0.1.30",
+    "@progressive-development/pd-forms": "^0.1.31",
     "@progressive-development/pd-icon": "^0.1.13",
     "@progressive-development/pd-shared-styles": "0.1.1",
     "lit": "^2.2.0"

package/src/PdWizard.js

@@ -76,7 +76,7 @@ export class PdWizard extends LitElement {
         border-bottom-right-radius: var(--pd-wizard-bottom-borderradius, 5px);
       }
 
-      /* Layout Grid for the Wizard Component 
+      /* 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 {
@@ -92,7 +92,7 @@ export class PdWizard extends LitElement {
         grid-template-areas:
           'header header header'
           'content content content'
-          'footer footer footer'; 
+          'footer footer footer';
       }
 
       /* Grid Area positions for layout container above */
@@ -100,17 +100,17 @@ export class PdWizard extends LitElement {
         grid-area: header;
       }
       .wiz-content {
-        grid-area: content;        
+        grid-area: content;
         display: flex;
         justify-content: center;
-        height: 100%;        
-        background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));        
+        height: 100%;
+        background-color: var(--pd-wizard-content-bg-col, var(--pd-default-bg-col));
       }
 
       /* Hier festlegung ob das innere Element voll ausfüllen soll (width: 100%), oder aber
       zentral als inneres Element innerhalb des content Elements angezeigt werden soll => andere Angabe, vorher war max-width nur angegeben (ticomi) */
       .wiz-content-inner {
-        min-height: 200px;        
+        min-height: 200px;
         background-color: var(--pd-wizard-content-inner-bg-col, var(--pd-default-bg-col));
         max-width: 96%;
         min-width: 850px;
@@ -128,11 +128,11 @@ export class PdWizard extends LitElement {
          padding-right: 50px;*/
         justify-content: var(--pd-wizard-justify-buttons, space-around);
         align-items: center;
-        
+
         height: 80px;
         /*background-color: var(--pd-wizard-footer-bg-col, red);*/
-        background: linear-gradient(to right, 
-          var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%, 
+        background: linear-gradient(to top,
+          var(--pd-wizard-buttons-bg-col1, var(--pd-default-light-col)) 0%,
           var(--pd-wizard-buttons-bg-col2, var(--pd-default-disabled-light-col)) 100%);
       }
 
@@ -162,11 +162,11 @@ export class PdWizard extends LitElement {
         top: 6px;
         right: 6px;
 
-        display: flex;        
+        display: flex;
         align-items: center;
-        gap: 5px;        
+        gap: 5px;
 
-        font-size: 0.8rem;        
+        font-size: 0.8rem;
 
         cursor: pointer;
 
@@ -178,24 +178,24 @@ export class PdWizard extends LitElement {
 
       .close:hover,
       .close:focus {
-        color: var(--pd-default-hover-col);        
+        color: var(--pd-default-hover-col);
         --pd-icon-stroke-col: var(--pd-default-hover-col);
       }
 
       @media (max-width: 1000px) {
         .wiz-content-inner {
           min-width: 95%;
-        } 
+        }
       }
 
       /* Size Elements for small width */
       @media (max-width: 700px) {
-        :host {          
-          --my-height: 60px;                    
+        :host {
+          --my-height: 60px;
         }
 
         .wiz-title {
-          padding-left: 70px;          
+          padding-left: 70px;
         }
 
         .title {
@@ -203,7 +203,7 @@ export class PdWizard extends LitElement {
           line-height: 70px;
         }
 
-        .close {          
+        .close {
           font-size: 0.7rem;
           --pd-icon-size: 1.2rem;
           top: 3px;
@@ -245,7 +245,7 @@ export class PdWizard extends LitElement {
               >
               <div class="close" @click="${this._closeWizard}">
                 <span>Close</span>
-                <pd-icon icon="${CLOSEICON}"></pd-icon>              
+                <pd-icon icon="${CLOSEICON}"></pd-icon>
               </div>
             </div>
             <div class="wiz-breadcrumbs">
@@ -278,7 +278,7 @@ export class PdWizard extends LitElement {
 
           <div class="wiz-buttons">
             ${this.currentNumber >= 1 && this.wizardSteps
-              ? html`              
+              ? html`
                   <pd-button
                     @button-clicked="${this._previousStep}"
                     text="${msg('Zurück', {desc: '#pd.wizard.back#'})}"