@progressive-development/pd-spa-helper 0.8.0 → 0.8.1-a

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

@@ -1,84 +0,0 @@
-import { css, LitElement, html } from "lit";
-import { state, customElement } from "lit/decorators.js";
-import { localized, msg } from "@lit/localize";
-import "../../pd-shared-styles/dist/src/pd-color-styles.js";
-import { PdFontStyles } from "../../pd-shared-styles/dist/src/pd-font-styles.js";
-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 PdMoreInfo = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._lessInfo = true;
-  }
-  render() {
-    return html`
-      <p>
-        ${this._lessInfo ? html`
-              <slot name="small-view"></slot>
-              <a @click=${this._showMoreInfo}>
-                ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
-              </a>
-            ` : html`
-              <slot name="large-view"></slot>
-              <a @click=${this._showLessInfo}>
-                ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
-              </a>
-            `}
-      </p>
-    `;
-  }
-  _showMoreInfo() {
-    this._lessInfo = false;
-  }
-  _showLessInfo() {
-    this._lessInfo = true;
-    const rect = this.getBoundingClientRect();
-    window.scrollBy({
-      top: rect.top - 150,
-      left: 0,
-      behavior: "smooth"
-    });
-  }
-};
-PdMoreInfo.styles = [
-  PdFontStyles,
-  css`
-      :host {
-        display: block;
-      }
-
-      p {
-        color: var(--pd-default-font-content-col);
-        font-size: var(--pd-default-font-content-size);
-      }
-
-      a {
-        cursor: pointer;
-        font-family: var(--pd-default-font-link-family);
-        font-size: var(--pd-default-font-link-size);
-        color: var(--pd-default-font-link-col);
-      }
-
-      a:hover {
-        color: var(--pd-default-font-link-col-hover);
-      }
-    `
-];
-__decorateClass([
-  state()
-], PdMoreInfo.prototype, "_lessInfo", 2);
-PdMoreInfo = __decorateClass([
-  customElement("pd-more-info"),
-  localized()
-], PdMoreInfo);
-export {
-  PdMoreInfo
-};

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

@@ -1,207 +0,0 @@
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import Hammer from "../../../hammerjs/hammer.js";
-import "@progressive-development/pd-icon/pd-icon";
-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 timer;
-let PdPanelViewer = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.withProgress = false;
-    this.deltaCalc = 3;
-    this._index = 0;
-    this._panData = {};
-    this._update = {};
-  }
-  get index() {
-    return this._index;
-  }
-  set index(value) {
-    this.children[this._index].dispatchEvent(new CustomEvent("exited"));
-    this.children[value].dispatchEvent(new CustomEvent("entered"));
-    this._index = value;
-  }
-  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>` : ""}
-    `;
-  }
-  firstUpdated() {
-    const hammerVal = new Hammer(this);
-    hammerVal.on("pan", (panEvent) => {
-      this._panData = panEvent;
-    });
-    const ro = new ResizeObserver((entries) => {
-      entries.forEach(() => {
-        window.clearTimeout(timer);
-        timer = setTimeout(() => {
-          this.requestUpdate();
-        }, 100);
-      });
-    });
-    ro.observe(this);
-  }
-  update(changedProperties) {
-    const { isFinal = false } = this._panData;
-    let { deltaX = 0 } = this._panData;
-    const width = this.clientWidth;
-    const minScale = 0.8;
-    if (!changedProperties.has("_index") && isFinal) {
-      if (deltaX > width / this.deltaCalc) {
-        this.previous();
-      } else if (deltaX < -width / this.deltaCalc) {
-        this.next();
-      }
-    }
-    deltaX = isFinal ? 0 : deltaX;
-    Array.from(this.children).forEach((el, i) => {
-      const x = (i - this.index) * width + deltaX;
-      const u = deltaX / width + (i - this.index);
-      const v = -Math.abs(u * (1 - minScale)) + 1;
-      const scale = Math.max(v, minScale);
-      el.style.transform = `translate3d(${x}px,0,0) scale(${scale})`;
-      el.style.opacity = scale;
-    });
-    super.update(changedProperties);
-  }
-  /* Advance to the next story card if possible */
-  next() {
-    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._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);
-    }
-
-    .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;
-    }
-
-    #prev {
-      left: 0;
-    }
-
-    #next {
-      right: 0;
-    }
-
-    #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.watched {
-      background: var(--pd-panel-progress-col, yellow);
-    }
-
-    ::slotted(*) {
-      position: absolute;
-      width: 100%;
-      height: calc(100%);
-      transition: transform 0.35s ease-out;
-      left: 0;
-    }
-  `;
-__decorateClass([
-  property({ type: Boolean })
-], PdPanelViewer.prototype, "withProgress", 2);
-__decorateClass([
-  property({ type: Number })
-], PdPanelViewer.prototype, "deltaCalc", 2);
-__decorateClass([
-  property({ type: Number, state: true })
-], PdPanelViewer.prototype, "_index", 2);
-__decorateClass([
-  property({ type: Object, state: true })
-], PdPanelViewer.prototype, "_panData", 2);
-__decorateClass([
-  property({ type: Boolean, state: true })
-], PdPanelViewer.prototype, "_update", 2);
-PdPanelViewer = __decorateClass([
-  customElement("pd-panel-viewer")
-], PdPanelViewer);
-export {
-  PdPanelViewer
-};

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

@@ -1,48 +0,0 @@
-import { css, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-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 = decorator(result) || result;
-  return result;
-};
-let PdPanel = class extends LitElement {
-  render() {
-    return html`
-      <div id="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-PdPanel.styles = css`
-    :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;
-    }
-  `;
-PdPanel = __decorateClass([
-  customElement("pd-panel")
-], PdPanel);
-export {
-  PdPanel
-};

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

@@ -1,64 +0,0 @@
-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/dist/src/pd-color-styles.js

@@ -1,29 +0,0 @@
-import { css } from "lit";
-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);
-    --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/dist/src/pd-font-styles.js

@@ -1,25 +0,0 @@
-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
-};