@progressive-development/pd-content 0.7.16 → 0.9.1

package/dist/pd-panel-viewer/PdPanelViewer.js

@@ -0,0 +1,206 @@
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import Hammer from 'hammerjs';
+import '@progressive-development/pd-icon/pd-icon';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+let timer;
+class PdPanelViewer extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.withProgress = false;
+    this.deltaCalc = 3;
+    this._index = 0;
+    // eslint-disable-next-line no-undef
+    this._panData = {};
+    this._update = {};
+  }
+  static {
+    this.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;
+    }
+  `;
+  }
+  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;
+  }
+}
+__decorateClass([
+  property({ type: Boolean })
+], PdPanelViewer.prototype, "withProgress");
+__decorateClass([
+  property({ type: Number })
+], PdPanelViewer.prototype, "deltaCalc");
+__decorateClass([
+  property({ type: Number, state: true })
+], PdPanelViewer.prototype, "_index");
+__decorateClass([
+  property({ type: Object, state: true })
+], PdPanelViewer.prototype, "_panData");
+__decorateClass([
+  property({ type: Boolean, state: true })
+], PdPanelViewer.prototype, "_update");
+
+export { PdPanelViewer };

package/dist/pd-panel-viewer/pd-panel-viewer.d.ts

@@ -0,0 +1,3 @@
+import { PdPanelViewer } from './PdPanelViewer.js';
+export { PdPanelViewer };
+//# sourceMappingURL=pd-panel-viewer.d.ts.map

package/dist/pd-panel-viewer/pd-panel-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel-viewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/pd-panel-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/pd-panel-viewer/pd-panel.d.ts

@@ -0,0 +1,3 @@
+import { PdPanel } from './PdPanel.js';
+export { PdPanel };
+//# sourceMappingURL=pd-panel.d.ts.map

package/dist/pd-panel-viewer/pd-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/pd-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/pd-panel-viewer.d.ts

@@ -1,17 +1,2 @@
-import { LitElement } from 'lit';
-export declare class PdPanelViewer extends LitElement {
-    withProgress: boolean;
-    deltaCalc: number;
-    _index: number;
-    _panData: any;
-    _update: {};
-    static styles: import('lit').CSSResult;
-    get index(): number;
-    set index(value: number);
-    render(): import('lit-html').TemplateResult<1>;
-    firstUpdated(): void;
-    update(changedProperties: any): void;
-    next(): void;
-    previous(): void;
-}
-//# sourceMappingURL=pd-panel-viewer.d.ts.map
+export * from './pd-panel-viewer/pd-panel-viewer'
+export {}

package/dist/pd-panel-viewer.js

@@ -1,207 +1,8 @@
-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";
-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);
-    }
+import { PdPanelViewer } from './pd-panel-viewer/PdPanelViewer.js';
 
-    .panel-container {
-      position: relative;
-      height: var(--pd-panel-height, 60vh);
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      padding: 0 2rem;
-      box-sizing: border-box;
-    }
+const tag = "pd-panel-viewer";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdPanelViewer);
+}
 
-    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
-};
+export { PdPanelViewer };

package/dist/pd-panel.d.ts

@@ -1,6 +1,2 @@
-import { LitElement } from 'lit';
-export declare class PdPanel extends LitElement {
-    static styles: import('lit').CSSResult;
-    render(): import('lit-html').TemplateResult<1>;
-}
-//# sourceMappingURL=pd-panel.d.ts.map
+export * from './pd-panel-viewer/pd-panel'
+export {}

package/dist/pd-panel.js

@@ -1,48 +1,8 @@
-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);
-    }
+import { PdPanel } from './pd-panel-viewer/PdPanel.js';
 
-    /* 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
-};
+const tag = "pd-panel";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdPanel);
+}
+
+export { PdPanel };

package/dist/pd-resize-content/PdResizeContent.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @tagname pd-resize-content
+ *
+ * Komponente zur responsiven Darstellung von Inhalten.
+ * Wenn die Bildschirmbreite unter `resizeWidth` liegt, wird ein Popup angezeigt.
+ *
+ * @fires book-date – Wenn ein freier Termin ausgewählt wird (nicht aktiv)
+ * @fires edit-selection – Wenn der Nutzer Datum oder PLZ bearbeiten möchte (nicht aktiv)
+ *
+ * @slot resize-content - Der Hauptinhalt, der bei ausreichender Breite direkt angezeigt wird.
+ * @slot preview-content - Der Vorschauinhalt, der im Popup angezeigt wird, wenn die Breite nicht ausreicht.
+ */
+export declare class PdResizeContent extends LitElement {
+    /**
+     * Minimale Breite, ab der der Inhalt direkt dargestellt wird. Darunter erscheint ein Popup.
+     */
+    resizeWidth: string;
+    /**
+     * Interner Zustand: Gibt an, ob der Inhalt versteckt werden soll und stattdessen ein Popup angezeigt wird.
+     */
+    private _hideContent;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    protected render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=PdResizeContent.d.ts.map

package/dist/pd-resize-content/PdResizeContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdResizeContent.d.ts","sourceRoot":"","sources":["../../src/pd-resize-content/PdResizeContent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,6CAA6C,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IAEH,WAAW,SAAY;IAEvB;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAS;IAE7B,MAAM,CAAC,MAAM,0BAaX;IAEF,iBAAiB,IAAI,IAAI;IAUzB,SAAS,CAAC,MAAM;CAUjB"}

package/dist/pd-resize-content/PdResizeContent.js

@@ -0,0 +1,62 @@
+import { LitElement, css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { installMediaQueryWatcher } from 'pwa-helpers/media-query';
+import '@progressive-development/pd-dialog/pd-popup';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdResizeContent extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.resizeWidth = "1232px";
+    this._hideContent = false;
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+    }
+
+    h3 {
+      color: #084c61;
+      font-family: Oswald;
+    }
+
+    p {
+      color: #084c61;
+    }
+  `;
+  }
+  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>`;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdResizeContent.prototype, "resizeWidth");
+__decorateClass([
+  state()
+], PdResizeContent.prototype, "_hideContent");
+
+export { PdResizeContent };

package/dist/pd-resize-content/pd-resize-content.d.ts

@@ -0,0 +1,3 @@
+import { PdResizeContent } from './PdResizeContent.js';
+export { PdResizeContent };
+//# sourceMappingURL=pd-resize-content.d.ts.map

package/dist/pd-resize-content/pd-resize-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-resize-content.d.ts","sourceRoot":"","sources":["../../src/pd-resize-content/pd-resize-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/pd-resize-content/pd-resize-content.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-resize-content.stories.d.ts","sourceRoot":"","sources":["../../src/pd-resize-content/pd-resize-content.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,qBAAqB,CAAC;wBAWxB,IAAI;AATT,wBASU;AAqBV,eAAO,MAAM,OAAO,SAAoB,CAAC"}

package/dist/pd-resize-content.d.ts

@@ -1,25 +1,2 @@
-import { LitElement } from 'lit';
-/**
- * Komponente zur responsiven Darstellung von Inhalten.
- * Wenn die Bildschirmbreite unter `resizeWidth` liegt, wird ein Popup angezeigt.
- *
- * @fires book-date – Wenn ein freier Termin ausgewählt wird (nicht aktiv)
- * @fires edit-selection – Wenn der Nutzer Datum oder PLZ bearbeiten möchte (nicht aktiv)
- *
- * @slot resize-content - Der Hauptinhalt, der bei ausreichender Breite direkt angezeigt wird.
- * @slot preview-content - Der Vorschauinhalt, der im Popup angezeigt wird, wenn die Breite nicht ausreicht.
- */
-export declare class PdResizeContent extends LitElement {
-    /**
-     * Minimale Breite, ab der der Inhalt direkt dargestellt wird. Darunter erscheint ein Popup.
-     */
-    resizeWidth: string;
-    /**
-     * Interner Zustand: Gibt an, ob der Inhalt versteckt werden soll und stattdessen ein Popup angezeigt wird.
-     */
-    private _hideContent;
-    static styles: import('lit').CSSResult;
-    connectedCallback(): void;
-    protected render(): import('lit-html').TemplateResult<1>;
-}
-//# sourceMappingURL=pd-resize-content.d.ts.map
+export * from './pd-resize-content/pd-resize-content'
+export {}