@progressive-development/pd-page 0.5.10 → 0.6.0

package/dist/src/PdTeaserContent.js

@@ -1,211 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdTeaserContent extends LitElement {
-  /**
-   * Fired when free date clicked => At the moment only for freeDates
-   * @event book-date
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-      :host {
-        --my-background: var(--pd-teaser-image);
-        --my-background-size: var(--pd-teaser-image-size, auto);
-        --my-background-position: var(--pd-teaser-image-position, 100% 50%);
-
-        display: grid;
-        grid-template-columns: repeat(15, 1fr);
-        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
-        grid-template-areas:
-          '. . . . . . . . . . . . . . .'
-          '. . t1 t1 t1 t1 t1 t1 . . . . . . .'
-          '. . t1 t1 t1 t1 t1 t1 . . . . . . .'
-          '. . t1 t1 t1 t1 t1 t1 . . . . . . .'
-          '. . . . . . . . . . . . . . .';
-
-        width: 100%;
-        height: 100%;
-        background: var(--my-background) no-repeat scroll;
-        background-position: var(--my-background-position);
-        background-size: var(--my-background-size);
-      }
-
-      .t1 {
-        grid-area: t1;
-        /*background-color: grey;*/
-      }
-
-      .slide-rigth {
-        animation-duration: 1s;
-        animation-name: slideFromRigth;
-      }
-
-      @keyframes slideFromRigth {
-        from {
-          margin-left: 100%;
-          width: 300%;
-        }
-
-        to {
-          margin-left: 0%;
-          width: 100%;
-        }
-      }
-
-      @keyframes slideFromLeft {
-        from {
-          margin-left: 100%;
-          width: 300%;
-        }
-
-        to {
-          margin-left: 0%;
-          width: 100%;
-        }
-      }
-
-      h1 {
-        color: var(--pd-teaser-font-col, var(--pd-default-bg-col));
-        font-size: var(--pd-teaser-font-title-size, 2.2em);
-        font-family: var(--pd-teaser-font-family, var(--pd-default-font-title-family));
-        line-height: 1.4em;
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-      }
-
-      h1::after {
-        content: ' ';
-        display: block;
-        width: 2.5rem;
-        height: 0.125rem;
-        background: var(--pd-teaser-font-col, var(--pd-default-light-col));
-        margin: 1rem 0;
-      }
-
-      p {
-        color: var(--pd-teaser-font-col, var(--pd-default-bg-col));;
-        font-size: var(--pd-teaser-font-subtitletitle-size, 1.5rem);
-        font-family: var(--pd-teaser-font-family, var(--pd-default-font-content-family));
-        line-height: var(--pd-teaser-font-subtitletitle-size, 1.8rem);
-        margin-top: 0;
-        margin-bottom: 1rem;
-      }
-
-      ::slotted(*) {
-        width: 100%;
-        height: 100%;
-      }
-
-      @media (max-width: 1400px) {
-        :host {
-          grid-template-areas:
-            '. . . . . . . . . . . . . . .'
-            '. t1 t1 t1 t1 t1 t1 t1 . . . . . . .'
-            '. t1 t1 t1 t1 t1 t1 t1 . . . . . . .'
-            '. t1 t1 t1 t1 t1 t1 t1 . . . . . . .'
-            '. . . . . . . . . . . . . . .';
-        }
-        h1 {
-          font-size: 1.8rem;
-          line-height: 1.2;
-        }
-        p {
-          font-size: 1.3rem;
-          line-height: 1.4;
-        }
-      }
-
-      /* Size Elements for small width */
-      @media (max-width: 900px) {
-        :host {
-          grid-template-areas:
-            '. . . . . . . . . . . . . . .'
-            '. t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . . .'
-            '. t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . . .'
-            '. t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . . .'
-            '. . . . . . . . . . . . . . .';
-        }
-        h1 {
-          font-size: 1.7rem;
-          line-height: 1.1;
-        }
-        p {
-          font-size: 1.2rem;
-          line-height: 1.3;
-        }
-      }
-
-      /* Size Elements for small width */
-      @media (max-width: 600px) {
-        :host {
-          grid-template-areas:
-            '. . . . . . . . . . . . . . .'
-            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
-            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
-            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
-            '. . . . . . . . . . . . . . .';
-        }
-        h1 {
-          font-size: 1.3rem;
-          line-height: 1;
-        }
-        p {
-          font-size: 1rem;
-          line-height: 1;
-        }
-      }
-
-      /* Size Elements for small width */
-      @media (max-width: 350px) {
-        :host {
-          grid-template-areas:
-            '. . . . . . . . . . . . . . .'
-            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
-            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
-            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
-            '. . . . . . . . . . . . . . .';
-        }
-
-        h1 {
-          font-size: 1.1rem;
-          line-height: 1;
-        }
-        p {
-          font-size: 0.9rem;
-          line-height: 1;
-        }
-      }
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      primaryTxt: { type: String },
-      secondaryTxt: { type: String }
-    };
-  }
-  constructor() {
-    super();
-    this.primaryTxt = "";
-    this.secondaryTxt = "";
-  }
-  render() {
-    return html`
-      <div class="t1">
-        <h1>${this.primaryTxt}</h1>
-        <p>${this.secondaryTxt}</p>
-      </div>
-
-      <slot></slot>
-    `;
-  }
-}
-export {
-  PdTeaserContent
-};