@progressive-development/pd-spa-helper 0.4.0 → 0.5.1

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

@@ -1,450 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,191 +0,0 @@
-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);