@progressive-development/pd-wizard 0.0.21 → 0.0.23

package/package.json

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

package/src/PdSteps.js

@@ -45,7 +45,10 @@ class PdSteps extends LitElement {
         --my-hr-bg-color: var(--squi-hr-bg-color, #fefefe);
 
         display: block;
-        background-color: var(--my-bg-color);
+        background-color: var(--my-bg-color);        
+
+        border-bottom-left-radius: var(--pd-step-borderradius, 0);
+        border-bottom-right-radius: var(--pd-step-borderradius, 0);
 
         /* 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;

package/src/PdWizard.js

@@ -8,7 +8,7 @@ import { LitElement, html, css } from 'lit';
 import '@progressive-development/pd-forms/pd-button.js';
 import './PdSteps.js';
 
-// TODO: dont get it running with attribute???
+// TODO: dont get it running with attribute??? Nachtrag: Use slot here now
 export const ticomiLogo = html`
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -112,8 +112,8 @@ export class PdWizard extends LitElement {
       :host {
         --my-font: var(--app-font, Oswald);
 
-        --my-header-background-color: var(--squi-test, #084c61);
-        --my-header-text-color: var(--squi-test, white);
+        --my-header-background-color: var(--pd-wizard-header-bg-color, #084c61);
+        --my-header-text-color: var(--pd-wizard-header-txt-color, white);
 
         --my-footer-background-color: var(--squi-test, #fefefe);
 
@@ -122,6 +122,13 @@ export class PdWizard extends LitElement {
         height: 100%;
       }
 
+      :host([roundedFullContent]) .layout-container {
+        grid-template-areas:
+          'header header header'
+          'content content content'
+          'footer footer footer';
+      }      
+
       /* 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...
        */
@@ -143,7 +150,7 @@ export class PdWizard extends LitElement {
 
       /* Grid Area positions for layout container above */
       .wiz-header {
-        grid-area: header;
+        grid-area: header;        
       }
       .wiz-content {
         grid-area: content;
@@ -162,13 +169,14 @@ export class PdWizard extends LitElement {
         background-color: var(--my-footer-background-color);
       }
 
-      .wiz-breadcrumbs {
+      .wiz-breadcrumbs {        
       }
 
       .wiz-title {
+        position: relative;
         text-align: center;
         background-color: var(--my-header-background-color);
-        height: 80px;
+        height: var(--pd-wizard-title-height, 80px);
         line-height: 80px;
         padding-left: 80px;
       }
@@ -178,21 +186,12 @@ export class PdWizard extends LitElement {
         font-size: 1.8em;
         font-weight: bolder;
         color: var(--my-header-text-color);
-      }
-
-      /* in Umstellung, Logo als Slot übergeben... */
-      .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;
+        color: var(--my-header-text-color, white);
         font-size: 2.5em;
         font-weight: bold;
         line-height: 1em;
@@ -246,6 +245,7 @@ export class PdWizard extends LitElement {
       currentNumber: { type: Number },
       wizardSteps: { Array },
       logo: { type: Object },
+      roundedFullContent: { type: Boolean, reflect: true },
     };
   }
 
@@ -253,6 +253,7 @@ export class PdWizard extends LitElement {
     super();
     this.currentNumber = -99;
     this.wizardSteps = [];
+    this.roundedFullContent = false;
   }
 
   render() {
@@ -261,8 +262,7 @@ export class PdWizard extends LitElement {
         <div class="layout-container">
           <div class="wiz-header">
             <div class="wiz-title">
-              ${ticomiLogo}
-
+              <slot name="slotLogo"></slot>
               <span class="title"
                 >${this.currentNumber >= 1 && this.wizardSteps
                   ? this.wizardSteps[this.currentNumber - 1].title