@progressive-development/pd-page 0.5.9 → 0.6.0

package/dist/src/PdMenu.js

@@ -1,449 +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 "@progressive-development/pd-icon";
-import "@progressive-development/pd-icon/pd-icon";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @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/src/PdTeaser.js

@@ -1,247 +0,0 @@
-import { LitElement, css, html } from "lit";
-import "@progressive-development/pd-icon/pd-icon";
-import { PDColorStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdTeaser extends LitElement {
-  /**
-   * Fired when free date clicked => At the moment only for freeDates
-   * @event close-teaser
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      css`
-      :host {
-
-        --my-height: var(--pd-teaser-height, 420px);
-
-        display: block;
-        background-color: var(--pd-teaser-bg-col, var(--pd-default-col));
-      }
-
-      .teaser {
-        display: grid;
-        grid-template-columns: minmax(10px, 200px) auto;
-        grid-template-rows: var(--my-height);
-        grid-template-areas: 
-          ". content"          
-      }
-      
-      .teaser-flex {
-        display: flex;     
-        justify-content: left;
-        height: var(--my-height);
-      }
-      .in-active {
-        /* ToDo Ausblenden */
-        display: none;                 
-      }
-
-      .active {
-        /* ToDo Einblenden */        
-      }
-
-      .previous {                
-        position: absolute;                
-        top: calc(var(--my-height) / 2);        
-        left: 10px;        
-        z-index: 1;           
-      }
-
-      .next {                
-        position: absolute;        
-        top: calc(var(--my-height) / 2);        
-        right: 10px;   
-        z-index: 1;                
-      }
-
-      pd-icon {        
-        --pd-icon-stroke-col: var(--pd-default-bg-col);
-        --pd-icon-col: var(--pd-default-dark-col);        
-        --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
-        --pd-icon-col-hover: var(--pd-default-dark-col);
-      }
-      
-      .content {
-        /*grid-area: content;                */
-        flex-grow: 4;
-        overflow: hidden;                
-      }
-
-      .slide-rigth {
-        animation-duration:1s;
-        animation-name: slideFromLeft;                
-      }
-
-      .slide-left {
-        animation-duration:1s;
-        animation-name: slideFromRigth;                
-      }
-
-      @keyframes slideFromRigth {
-        from {
-          margin-right: 100%;          
-        }
-
-        to {
-          margin-right: 0%;          
-        }
-      }
-
-      @keyframes slideFromLeft {
-        from {
-          margin-left: 100%;          
-        }
-
-        to {
-          margin-left: 0%;          
-        }
-      }      
-
-      .not-visible {                        
-        display: none;
-      }
-
-      ::slotted(*) {
-        
-      }
-
-      /* Size Elements for small width */
-      @media (max-width: 1400px) {
-        :host {
-          --my-height: 350px;        
-        }      
-      
-
-      /* Size Elements for small width */
-      @media (max-width: 900px) {
-        :host {
-          --my-height: 300px;        
-        }      
-      }
-
-      /* Size Elements for small width */
-      @media (max-width: 600px) {
-        :host {
-          --my-height: 270px;        
-        }      
-      }
-      
-
-      /* Size Elements for small width */
-      @media (max-width: 350px) {
-        :host {
-          --my-height: 220px;        
-        }      
-      }
-
-      /* Size Elements for small width */
-      @media (max-width: 320px) {
-        :host {
-          --my-height: 250px;        
-        }      
-      }
-      
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      teaserObjects: { type: Array },
-      resizeWidth: { type: String },
-      _hideContent: { type: Boolean },
-      _currentNumber: { type: Number },
-      _slideDirection: { type: String },
-      _visible: { type: Boolean }
-    };
-  }
-  constructor() {
-    super();
-    this.teaserObjects = [];
-    this.resizeWidth = "1232px";
-    this._hideContent = false;
-    this._currentNumber = 0;
-    this._slideDirection = "slide-rigth";
-    this._visible = true;
-  }
-  firstUpdated() {
-    const doSomething = (scrollPos) => {
-      if (scrollPos <= 50) {
-        this._visible = true;
-      } else {
-        this._visible = false;
-      }
-    };
-    let ticking = false;
-    document.addEventListener("scroll", () => {
-      const lastKnownScrollPosition = window.scrollY;
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          doSomething(lastKnownScrollPosition);
-          ticking = false;
-        });
-        ticking = true;
-      }
-    });
-  }
-  updated(changedProps) {
-    if (changedProps.has("_visible")) {
-      if (changedProps.get("_visible") === true && this._visible === false || changedProps.get("_visible") === false && this._visible === true)
-        this.dispatchEvent(
-          new CustomEvent("close-teaser", {
-            detail: {
-              value: this._visible
-            }
-          })
-        );
-    }
-  }
-  render() {
-    return html`
-      <div class="teaser-flex ${this._visible ? "" : "in-active"}">
-        <pd-icon
-          icon="previousArrow"
-          class="previous"
-          @click="${this._prevContent}"
-        ></pd-icon>
-        <pd-icon
-          icon="nextArrow"
-          class="next"
-          @click="${this._nextContent}"
-        ></pd-icon>
-
-        ${this.teaserObjects.map(
-      (teaserObj, index) => html`
-            <div
-              class="content ${this._currentNumber === index ? this._slideDirection : "not-visible"}"
-            >
-              <slot name="${teaserObj.name}"></slot>
-            </div>
-          `
-    )}
-      </div>
-    `;
-  }
-  _prevContent() {
-    this._slideDirection = "slide-left";
-    if (this._currentNumber === 0) {
-      this._currentNumber = this.teaserObjects.length - 1;
-    } else {
-      this._currentNumber -= 1;
-    }
-  }
-  _nextContent() {
-    this._slideDirection = "slide-rigth";
-    if (this._currentNumber === this.teaserObjects.length - 1) {
-      this._currentNumber = 0;
-    } else {
-      this._currentNumber += 1;
-    }
-  }
-}
-export {
-  PdTeaser
-};