@progressive-development/pd-spa-helper 0.7.6 → 0.8.0

package/dist/{pd-panel-viewer.js → node_modules/@progressive-development/pd-content/dist/pd-panel-viewer.js}

@@ -1,7 +1,7 @@
 import { css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import "hammerjs";
+import Hammer from "../../../hammerjs/hammer.js";
 import "@progressive-development/pd-icon/pd-icon";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -33,19 +33,34 @@ let PdPanelViewer = class extends LitElement {
   }
   render() {
     return html`
-            <div class="panel-container">
-                <slot></slot>
-                <pd-icon id="prev" icon="previousArrow" activeIcon ?disabled="${this.index <= 0}" @click=${this.previous}></pd-icon>
-                <pd-icon id="next" icon="nextArrow" activeIcon ?disabled="${this.index === this.children.length - 1}" @click=${this.next}></pd-icon>
-            </div>
-            ${this.withProgress ? html`
-            <div id="progress">
-                ${Array.from(this.children).map((childEl, i) => html`
-                <div @click="${() => {
-      this._index = i;
-    }}" class=${classMap({ watched: i <= this.index })}></div>`)}
-            </div>` : ""}
-        `;
+      <div class="panel-container">
+        <slot></slot>
+        <pd-icon
+          id="prev"
+          icon="previousArrow"
+          activeIcon
+          ?disabled="${this.index <= 0}"
+          @click=${this.previous}
+        ></pd-icon>
+        <pd-icon
+          id="next"
+          icon="nextArrow"
+          activeIcon
+          ?disabled="${this.index === this.children.length - 1}"
+          @click=${this.next}
+        ></pd-icon>
+      </div>
+      ${this.withProgress ? html` <div id="progress">
+            ${Array.from(this.children).map(
+      (childEl, i) => html` <div
+                  @click="${() => {
+        this._index = i;
+      }}"
+                  class=${classMap({ watched: i <= this.index })}
+                ></div>`
+    )}
+          </div>` : ""}
+    `;
   }
   firstUpdated() {
     const hammerVal = new Hammer(this);
@@ -87,83 +102,88 @@ let PdPanelViewer = class extends LitElement {
   }
   /* Advance to the next story card if possible */
   next() {
-    this.index = Math.max(0, Math.min(this.children.length - 1, this.index + 1));
+    this.index = Math.max(
+      0,
+      Math.min(this.children.length - 1, this.index + 1)
+    );
     this._update = false;
   }
   /* Go back to the previous story card if possible */
   previous() {
-    this.index = Math.max(0, Math.min(this.children.length - 1, this.index - 1));
+    this.index = Math.max(
+      0,
+      Math.min(this.children.length - 1, this.index - 1)
+    );
     this._update = false;
   }
 };
 PdPanelViewer.styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: var(--pd-panel-width, 1170px);
+      overflow: var(--pd-panel-overflow, hidden);
+      background-color: var(--pd-panel-viewer-bg-col);
+    }
 
-        :host {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            max-width: var(--pd-panel-width, 1170px);
-            overflow: var(--pd-panel-overflow, hidden);
-            background-color: var(--pd-panel-viewer-bg-col);
-        }
-
-        .panel-container {
-            position: relative;
-            height: var(--pd-panel-height, 60vh);
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            padding: 0 2rem;
-            box-sizing: border-box;
-        }
+    .panel-container {
+      position: relative;
+      height: var(--pd-panel-height, 60vh);
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 0 2rem;
+      box-sizing: border-box;
+    }
 
-        pd-icon {
-            position: absolute;
-            top: calc(50% - 25px);
-            height: 50px;
-            cursor: pointer;
-        }
+    pd-icon {
+      position: absolute;
+      top: calc(50% - 25px);
+      height: 50px;
+      cursor: pointer;
+    }
 
-        #prev {
-            left: 0;
-        }
+    #prev {
+      left: 0;
+    }
 
-        #next {
-            right: 0;
-        }
+    #next {
+      right: 0;
+    }
 
-        #progress {
-            position: relative;
-            height: 20px;
-            width: 50%;
-            margin: .5rem auto;
-            display: grid;
-            grid-auto-flow: column;
-            grid-auto-columns: 1fr;
-            grid-gap: 10px;
-            align-content: center;
-            align-self: flex-end;
-        }
+    #progress {
+      position: relative;
+      height: 20px;
+      width: 50%;
+      margin: 0.5rem auto;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      grid-gap: 10px;
+      align-content: center;
+      align-self: flex-end;
+    }
 
-        #progress > div {
-            background: var(--pd-panel-progress-col, grey);
-            height: 4px;
-            transition: background 0.3s linear;
-            cursor: pointer;
-        }
+    #progress > div {
+      background: var(--pd-panel-progress-col, grey);
+      height: 4px;
+      transition: background 0.3s linear;
+      cursor: pointer;
+    }
 
-        #progress > div.watched {
-            background: var(--pd-panel-progress-col, yellow);
-        }
+    #progress > div.watched {
+      background: var(--pd-panel-progress-col, yellow);
+    }
 
-        ::slotted(*) {
-            position: absolute;
-            width: 100%;
-            height: calc(100%);
-            transition: transform 0.35s ease-out;
-            left: 0;
-        }
-        `;
+    ::slotted(*) {
+      position: absolute;
+      width: 100%;
+      height: calc(100%);
+      transition: transform 0.35s ease-out;
+      left: 0;
+    }
+  `;
 __decorateClass([
   property({ type: Boolean })
 ], PdPanelViewer.prototype, "withProgress", 2);

package/dist/{pd-panel.js → node_modules/@progressive-development/pd-content/dist/pd-panel.js}

@@ -18,28 +18,28 @@ let PdPanel = class extends LitElement {
   }
 };
 PdPanel.styles = css`
-        :host {
-          background: var(--pd-panel-bg, #AFC1D2);
-          border-radius: var(--pd-panel-border-radius, 0.2em);
-        }
+    :host {
+      background: var(--pd-panel-bg, #afc1d2);
+      border-radius: var(--pd-panel-border-radius, 0.2em);
+    }
 
-        /* Default styles for content */
-        #content {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          padding: 2rem;
-          display: flex;
-          flex-direction: column;          
-          align-items: center;
-          justify-content: flex-start;
-        }
-        #content > slot::slotted(*) {
-          margin: 0;
-        }
-      `;
+    /* Default styles for content */
+    #content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    }
+    #content > slot::slotted(*) {
+      margin: 0;
+    }
+  `;
 PdPanel = __decorateClass([
   customElement("pd-panel")
 ], PdPanel);

package/dist/node_modules/@progressive-development/pd-content/dist/pd-resize-content.js

@@ -0,0 +1,64 @@
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { installMediaQueryWatcher } from "pwa-helpers/media-query.js";
+import "@progressive-development/pd-dialog/pd-popup";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdResizeContent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.resizeWidth = "1232px";
+    this._hideContent = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    installMediaQueryWatcher(
+      `(min-width: ${this.resizeWidth})`,
+      (matches) => {
+        this._hideContent = !matches;
+      }
+    );
+  }
+  render() {
+    return this._hideContent ? html`
+          <pd-popup>
+            <div slot="small-view"><slot name="preview-content"></slot></div>
+            <div slot="content"><slot name="resize-content"></slot></div>
+          </pd-popup>
+        ` : html`<slot name="resize-content"></slot>`;
+  }
+};
+PdResizeContent.styles = css`
+    :host {
+      display: block;
+    }
+
+    h3 {
+      color: #084c61;
+      font-family: Oswald;
+    }
+
+    p {
+      color: #084c61;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], PdResizeContent.prototype, "resizeWidth", 2);
+__decorateClass([
+  state()
+], PdResizeContent.prototype, "_hideContent", 2);
+PdResizeContent = __decorateClass([
+  customElement("pd-resize-content")
+], PdResizeContent);
+export {
+  PdResizeContent
+};

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

@@ -1,19 +1,19 @@
 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 
-     */
+const PdColorStyles = css`
+  :host {    
     --pd-default-col: var(--app-primary-col, #067394);
+    
+    --pd-default-lighter-col: var(--app-primary-lighter-col, #89c0d0);
     --pd-default-light-col: var(--app-primary-light-col, #AFC1D2);
+    --pd-default-lightest-col: var(--app-primary-lightest-col, #cde2eb);
+    
+    --pd-default-darker-col: var(--app-primary-darker-col, #045b6b);
     --pd-default-dark-col: var(--app-primary-dark-col, #0A3A48);
+    --pd-default-darkest-col: var(--app-primary-darkest-col, #023d49);
+
     --pd-default-bg-col: var(--app-primary-bg-col, #fefefe);
+    --pd-default-bg-light-col: var(--app-primary-bg-light-col, #f2f9fa);
+    --pd-default-bg-dark-col: var(--app-primary-bg-dark-col, #e3f2f5);
 
     --pd-default-hover-col: var(--app-hover-col, #ffc857);
     --pd-default-error-col: var(--app-error-col, #cc2029);
@@ -21,10 +21,9 @@ const PDColorStyles = css`
     --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);    
+    --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey); 
   }
-
 `;
 export {
-  PDColorStyles
+  PdColorStyles
 };

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

@@ -0,0 +1,25 @@
+import { css } from "lit";
+const PdFontStyles = css`
+  :host {
+    /* Schriftfamilien */
+    --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);
+
+    /* Farben mit app-Override + Fallback auf zentrale Farbpalette */
+    --pd-default-font-title-col: var(--app-font-title-col, var(--pd-default-darkest-col));
+    --pd-default-font-content-col: var(--app-font-content-col, var(--pd-default-dark-col));
+    --pd-default-font-input-col: var(--app-font-input-col, var(--pd-default-dark-col));
+    --pd-default-font-link-col: var(--app-font-link-col, var(--pd-default-col));
+    --pd-default-font-link-col-hover: var(--app-font-link-col-hover, var(--pd-default-hover-col));
+
+    /* Schriftgrößen */
+    --pd-default-font-link-size: var(--app-font-link-size, 0.95rem);
+    --pd-default-font-content-size: var(--app-font-content-size, 1rem);
+    --pd-default-font-input-size: var(--app-font-input-size, 1.05rem);
+  }
+`;
+export {
+  PdFontStyles
+};