@progressive-development/pd-spa-helper 0.3.101 → 0.3.103

package/dist/node_modules/@progressive-development/pd-page/src/PdMenu.js

@@ -0,0 +1,450 @@
+import { LitElement, css, html } from "lit";
+import { updateWhenLocaleChanges } from "@lit/localize";
+import { installMediaQueryWatcher } from "../../../pwa-helpers/media-query.js";
+import { ICON_TOOGLE_ARROW, ICON_BURGER_MENU } from "../../pd-icon/src/PdIcon.js";
+import "../../pd-icon/pd-icon.js";
+import { PDColorStyles } from "../../pd-shared-styles/src/shared-color-styles.js";
+import { PDFontStyles } from "../../pd-shared-styles/src/shared-font-styles.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdMenu extends LitElement {
+  /**
+   * Fired when route menu item clicked
+   * @event route-event
+   */
+  static get styles() {
+    return [
+      PDColorStyles,
+      PDFontStyles,
+      css`
+
+      :host {        
+        display: block;        
+        position: relative;
+        height: var(--pd-menu-height, 100px);
+        background-color: var(--pd-menu-bg-col, var(--pd-default-col));        
+        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
+        
+        /*
+        Add into component, before styled from outside by using element
+        removed fixed again => not fit for the teaser, custom properties possible, but now handle this in SPAHelper header element
+        width: 100%;
+        position: fixed;
+        top: 0;
+        */
+      }
+
+      .menu-container {        
+        height: 100%;
+        padding-left: 10px;
+        padding-right: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        white-space: nowrap;
+        max-width: var(--pd-menu-wax-width, 1170px);
+        margin: 0 auto;
+      }
+
+      .menu-ul {        
+        display: flex;
+        align-items: center;
+        list-style: none;
+        margin: 0;        
+        padding: 0;
+      }
+
+      .burger-ul {
+        visibility: hidden;
+        overflow: hidden;
+        z-index: -1;
+        position: absolute;
+        flex-direction: column;
+        top: calc(var(--pd-menu-height, 100px) * -1);
+        right: 0px;
+        background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
+        
+        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);    
+        border-bottom: var(--pd-menu-burger-bottomborder);
+        padding: var(--pd-menu-burger-padding, 0);
+        width:100%;
+        -moz-border-radius: var(--pd-border-radius);
+        border-radius: var(--pd-border-radius);
+
+        transition: 0.5s;
+        transition-timing-function: ease-out;
+  
+        transform: translateY(0);
+        opacity: 0;
+      }
+
+      .locale-ul {
+        visibility: hidden;
+        position: absolute;
+        flex-direction: column;
+        top: 10px;
+        right: 15px;
+        z-index: 100;
+        background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
+        
+        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);    
+        border-bottom: var(--pd-menu-burger-bottomborder);
+        padding: var(--pd-menu-burger-padding, 0);
+        -moz-border-radius: var(--pd-border-radius);
+        border-radius: var(--pd-border-radius);
+
+        transition: 0.5s;
+        transition-timing-function: ease-out;
+  
+        transform: translateY(0);
+        opacity: 0;
+      }      
+
+      :host([_activeBurgerMenu]) .burger-ul {
+          visibility: visible; 
+          opacity: 1;
+          top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));         
+          transition-timing-function: ease-in;
+      }    
+      
+      
+      :host([_activeLocaleMenu]) .locale-ul {
+          visibility: visible; 
+          opacity: 1;
+          top: 40px;
+          transition-timing-function: ease-in;
+      } 
+
+      .menu-li {
+        display: flex;
+        align-items: center;                
+        cursor: pointer;
+        border-radius: var(--pd-border-radius);
+      }
+
+      .burger-li {
+        border-radius: var(--pd-border-radius);
+        align-self: justify;
+        width:80%;
+        font-size:90% !important;
+        height:1rem;
+      }
+
+      .locale-li {
+        position: relative;        
+      }
+
+      .burger-li:hover {
+          background-color: var(--pd-default-dark-col);
+        }
+
+      .item {
+        color: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        font-family: var(--pd-menu-font-family, var(--pd-default-font-title-family));
+        font-size: var(--pd-menu-font-size, 1.2em);
+        font-weight: var(--pd-menu-font-weight, bold);
+        padding: var(--pd-menu-item-padding, 0.6em);
+      }
+
+      .burger-item {
+        color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
+      }
+
+      .locale-item {
+        padding-left: 1.5em;
+      }
+
+      .item.active,
+      .item:hover {
+        color: var(--pd-default-hover-col);
+      }
+
+      .item:hover {       
+        background-color: var(--pd-menu-item-bg-hover-col);
+      }
+
+      .item:hover .topItemLogo {
+        --pd-icon-stroke-col: var(--pd-default-hover-col);                
+      }
+
+      .topMenu {
+        width: 100%;        
+        justify-content: end;
+        padding-left: 10px;
+      }
+
+      .topItemLogo {
+        --pd-icon-size: 1.4rem;
+        --pd-icon-bg-col: transparent;   
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col: var(--pd-menu-font-col, var(--pd-default-bg-col));        
+        pointer-events: none;
+      }
+
+      .burgerLogo {
+        --pd-icon-size: 2rem;
+        --pd-icon-bg-col: transparent;
+        pointer-events: none;
+      }               
+
+      .menu-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        padding-right: 0.5rem;
+      }
+
+      .burger-menu {
+        display: flex;
+        gap: 0.3rem;
+        align-items: center;        
+        cursor: pointer;
+
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col: var(--pd-default-hover-col);
+
+        --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col-active: lightgrey;
+      }      
+
+      .burger-menu:hover {
+        --pd-icon-col: var(--pd-default-hover-col);
+        --pd-icon-col-active: var(--pd-default-hover-col);
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
+      }
+
+      .burger-menu .item{
+          padding: 0;
+          font-size: 1.5em;
+          transition: color ease 0.5s;
+      }
+
+      .burger-menu:hover .item {
+        color: var(--pd-default-hover-col);        
+      }
+
+
+      /* Doppelt zum logo-container, pd-logo sonst nicht mehr funktional
+        */
+        ::slotted(.logo) {        
+          width: 100%;
+          max-width: var(--pd-menu-logo-maxwidth, 8rem);
+          padding: var(--pd-menu-logo-padding, 2em);        
+          width: 100%;
+          fill: var(--pd-menu-logo-color, #067394);
+          cursor: pointer;              
+        }
+
+
+      .locale-selection-logo {
+        --pd-icon-size: 0.8rem;
+        --pd-icon-bg-col: transparent;
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col: var(--pd-default-hover-col);
+        --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        margin-top: 2px;
+        pointer-events: none;
+      }
+          
+    `
+    ];
+  }
+  static get properties() {
+    return {
+      activeRoute: { type: String },
+      selectedLocale: { type: String },
+      locales: { type: Array },
+      menuItems: { type: Array },
+      topMenuItems: { type: Array },
+      noBurgerMenu: { type: Boolean },
+      // At the moment needed for scroll to pistion => Refactor possible?
+      headerSize: { type: Number },
+      _activeSecIndex: { type: Number },
+      _smallScreen: { type: Boolean, state: true },
+      _activeBurgerMenu: { type: Boolean, reflect: true },
+      _activeLocaleMenu: { type: Boolean, reflect: true }
+    };
+  }
+  constructor() {
+    super();
+    this.menuItems = [];
+    this.topMenuItems = [];
+    this.noBurgerMenu = false;
+    this._activeSecIndex = 0;
+    this._activeBurgerMenu = false;
+    this.headerSize = 0;
+    updateWhenLocaleChanges(this);
+  }
+  firstUpdated() {
+    const doSomething = (scrollPos) => {
+      let activeSecIndex = -1;
+      let distance = scrollPos > 300 ? 5e3 : 300;
+      this.menuItems.forEach((item, index) => {
+        if (item.ref) {
+          let distTmp = item.ref.getBoundingClientRect().top;
+          distTmp = Math.abs(distTmp);
+          if (item.ref && distTmp < distance) {
+            activeSecIndex = index;
+            distance = distTmp;
+          }
+        }
+      });
+      this._activeSecIndex = activeSecIndex >= 0 ? activeSecIndex + 1 : 0;
+    };
+    let ticking = false;
+    document.addEventListener("scroll", () => {
+      const lastKnownScrollPosition = window.scrollY;
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          doSomething(lastKnownScrollPosition);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    });
+    installMediaQueryWatcher(`(max-width: 700px)`, (matches) => {
+      if (matches) {
+        this._smallScreen = !this.noBurgerMenu;
+      } else {
+        this._smallScreen = false;
+      }
+    });
+  }
+  render() {
+    return html`    
+    <div class="menu-container"> 
+      
+      <slot @click="${this._logoClicked}" name="slotLogo"></slot>       
+      
+      <ul class="menu-ul ${this._smallScreen ? "burger-ul" : ""}">
+        ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, true, this._smallScreen)}
+      </ul>
+
+      ${!this._smallScreen ? html`
+        <ul class="menu-ul topMenu">
+          ${this._renderItems(this.topMenuItems, false)}
+          
+          ${(this.locales && this.locales.length) > 1 ? html`
+            <li class="item menu-li locale-li" @click="${this._toggleLocaleSelection}">
+              ${this.selectedLocale}
+              <pd-icon class="locale-selection-logo" icon="${ICON_TOOGLE_ARROW}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
+              <ul class="menu-ul locale-ul">
+                ${this.locales.filter((l) => l !== this.selectedLocale).map((locale) => html`
+                <li class="item menu-li burger-li burger-item locale-item"
+                  data-key="${locale}"
+                  @click="${this._localeClicked}"
+                >
+                  ${locale}
+                </li>
+                `)}                
+              </ul>
+            </li>
+          ` : ""}
+        </ul>
+      ` : html`
+        <div class="menu-wrapper">
+          <div class="burger-menu" @click="${this._toggleBurgerMenu}">
+            <pd-icon class="burgerLogo" icon="${ICON_BURGER_MENU}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
+            <span class="item ${this._activeBurgerMenu ? "active" : ""}">Menu</span>
+          </div>
+        </div>
+      `}
+
+    </div>
+    `;
+  }
+  _renderItems(items, checkActiveClass, disableIcons) {
+    return html`
+    ${items.map(
+      (item, index) => html`
+            <li
+              class="item menu-li ${this._smallScreen ? "burger-li burger-item" : ""}
+                ${checkActiveClass && this._activeSecIndex === index + 1 || item.route && item.route === this.activeRoute ? "active" : ""}"
+              data-key="${item.key}"              
+              @click="${this._menuItemClicked}"
+            >
+            ${item.icon && !disableIcons ? html`<pd-icon
+                    class="topItemLogo"
+                    icon="${item.icon}"
+                  ></pd-icon>` : ""}
+              ${item.name}
+            </li>       
+          `
+    )}
+    `;
+  }
+  _toggleBurgerMenu() {
+    this._activeBurgerMenu = !this._activeBurgerMenu;
+  }
+  _toggleLocaleSelection() {
+    this._activeLocaleMenu = !this._activeLocaleMenu;
+  }
+  _localeClicked(e) {
+    const keyParam = e.target.dataset.key;
+    this.dispatchEvent(new CustomEvent("locale-change", {
+      detail: keyParam
+    }));
+  }
+  _menuItemClicked(e) {
+    const keyParam = e.target.dataset.key;
+    const menuItem = this.menuItems.filter((mi) => mi.key === keyParam)[0] || this.topMenuItems.filter((mi) => mi.key === keyParam)[0];
+    if (menuItem.sec && menuItem.sec !== "") {
+      this._scrollToContent(menuItem.sec);
+    } else if (menuItem.route && menuItem.route !== "") {
+      this.dispatchEvent(
+        new CustomEvent("route-event", {
+          detail: {
+            route: menuItem.route === "back" ? "" : menuItem.route
+          },
+          composed: true,
+          bubbles: true
+        })
+      );
+    } else if (menuItem.action) {
+      menuItem.action();
+    }
+    if (this._activeBurgerMenu) {
+      this._activeBurgerMenu = !this._activeBurgerMenu;
+    }
+  }
+  static _scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth"
+    });
+  }
+  _scrollToContent(section) {
+    const selMenuItem = this.menuItems.filter((item) => item.sec === section)[0] || {};
+    const el = selMenuItem.ref;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      window.scrollBy({
+        top: rect.top - this.headerSize,
+        left: 0,
+        behavior: "smooth"
+      });
+    }
+  }
+  // eslint-disable-next-line class-methods-use-this
+  _logoClicked() {
+    PdMenu._scrollToTop();
+    this.dispatchEvent(
+      new CustomEvent("route-event", {
+        detail: {
+          route: ""
+        },
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+}
+export {
+  PdMenu
+};

package/dist/node_modules/@progressive-development/pd-shared-styles/src/shared-color-styles.js

@@ -0,0 +1,30 @@
+import { css } from "lit";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+const PDColorStyles = css`
+
+  :host {
+
+    /**
+     * Set default colors for all pd-components 
+     */
+    --pd-default-col: var(--app-primary-col, #067394);
+    --pd-default-light-col: var(--app-primary-light-col, #AFC1D2);
+    --pd-default-dark-col: var(--app-primary-dark-col, #0A3A48);
+    --pd-default-bg-col: var(--app-primary-bg-col, #fefefe);
+
+    --pd-default-hover-col: var(--app-hover-col, #ffc857);
+    --pd-default-error-col: var(--app-error-col, #cc2029);
+    --pd-default-error-light-col: var(--app-error-light-col, #ffe8e8);
+    --pd-default-success-col: var(--app-success-col, #42a01c);
+    --pd-default-success-light-col: var(--app-success-light-col, #f5ffe8);    
+    --pd-default-disabled-col: var(--app-disabled-col, #888585);
+    --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);    
+  }
+
+`;
+export {
+  PDColorStyles
+};

package/dist/node_modules/@progressive-development/pd-shared-styles/src/shared-font-styles.js

@@ -0,0 +1,32 @@
+import { css } from "lit";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+const PDFontStyles = css`
+
+  :host {
+    /** 
+     * Set default fonts for all pd-components.
+     * Use content, title and input categories for fonts.
+     */
+    --pd-default-font-title-family: var(--app-font-title-family);
+    --pd-default-font-content-family: var(--app-font-content-family);
+    --pd-default-font-input-family: var(--app-font-input-family);
+    --pd-default-font-link-family: var(--app-font-link-family);
+
+    --pd-default-font-title-col: var(--app-font-title-col, #0A3A48);    
+    --pd-default-font-content-col: var(--app-font-content-col, #353738);
+    --pd-default-font-input-col: var(--app-font-input-col, #353738);
+    --pd-default-font-link-col: var(--app-font-link-col, #067394);
+    --pd-default-font-link-col-hover: var(--app-font-link-col, #451A46);
+
+    --pd-default-font-link-size: var(--app-font-link-size, 0.9em);
+    --pd-default-font-content-size: var(--app-font-content-size, 1em);
+    --pd-default-font-input-size: var(--app-font-input-size, 1em);
+  }
+
+`;
+export {
+  PDFontStyles
+};

package/dist/node_modules/@progressive-development/pd-wizard/pd-wizard.js

@@ -0,0 +1,2 @@
+import { PdWizard } from "./src/PdWizard.js";
+window.customElements.define("pd-wizard", PdWizard);

package/dist/node_modules/@progressive-development/pd-wizard/src/PdSteps.js

@@ -0,0 +1,191 @@
+import { LitElement, css, html } from "lit";
+import { PDColorStyles } from "../../pd-shared-styles/src/shared-color-styles.js";
+import { PDFontStyles } from "../../pd-shared-styles/src/shared-font-styles.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdSteps extends LitElement {
+  /**
+   * Fired when `step` (when not current) clicked.
+   * @event step-clicked
+   */
+  static get styles() {
+    return [
+      PDColorStyles,
+      PDFontStyles,
+      css`
+      :host {
+
+        --circle-size: var(--pd-step-circle-size, 40px);        
+
+        display: block;
+        background-color: var(--pd-steps-bg-color, var(--pd-default-col));
+        
+        padding-top: 0.5em;
+        /* needed for the absolut step name */
+        padding-bottom: calc(var(--pd-step-name-font-size, 1em) * 2.5);
+      }
+
+      .parent {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        position: relative;
+      }
+
+      .step-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        z-index: 51;
+        width: 100%;
+        position: relative;
+      }
+
+      /* Kreis-Styling */
+      .step.circle {
+        width: var(--circle-size);
+        height: var(--circle-size);
+        border-radius: 50%;
+        border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-circle-border-color, white);
+        background-color: var(--pd-step-circle-bg-color, var(--pd-default-col));
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        z-index: 51; /* Ensure the circle is above the hr line */
+      }
+
+      /* Dynamische Schriftgröße der Nummer */
+      .step-nr {
+        font-family: var(--pd-default-font-title-family);
+        font-weight: bold;
+        color: var(--pd-step-circle-nr-color, white);
+        font-size: calc(var(--circle-size) / 1.8);
+        // line-height: 1;
+        position: absolute;
+        pointer-events: none;
+      }
+
+      /* Linien-Styling */
+      hr {
+        background-color: var(--pd-step-hr-color, white);
+        height: 2px;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        z-index: 50; /* Make sure the hr is under the circle */                        
+        border-style: none;
+        border-width: 0em;
+        margin:0;
+      }
+
+      /* Schritt-Name Styling */
+      .step-name {
+        font-family: var(--pd-default-font-title-family);
+        color: var(--pd-step-name-color, white);
+        font-size: var(--pd-step-name-font-size, 1em);
+        font-weight: bold;
+        position: absolute;
+        top: calc(var(--circle-size) + (var(--pd-step-name-font-size, 1em) / 2));
+      }
+
+      .current {
+        color: var(--pd-step-color-current, var(--pd-default-hover-col));
+      }
+      .step.circle.current {
+        border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-color-current, var(--pd-default-hover-col));
+      }
+
+      .passed {
+        color: var(--pd-step-color-passed, var(--pd-default-dark-col));
+      }
+      .step.circle.passed {
+        border: solid var(--pd-step-circle-border-size, 2px) var(--pd-step-color-passed, var(--pd-default-success-col));
+        background-color: var(--pd-default-success-light-col);   
+        cursor: pointer;     
+      }
+
+      /* Dynamische Anpassung für kleine Bildschirme */
+      @media (max-width: 700px) {
+        :host {
+          --circle-size: 30px;
+        }
+        .step-name {
+          font-size: 0.9em;
+        }
+      }
+      
+    `
+    ];
+  }
+  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) {
+      case "circle":
+        return this._renderCircle();
+      case "tab":
+        return this._renderCircle();
+      default:
+        return "";
+    }
+  }
+  _renderCircle() {
+    return html`      
+      <div class="parent ${this.styleTyp}">
+        ${this.styleTyp === "circle" ? html`<hr />` : ""}
+        ${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);