@progressive-development/pd-content 0.6.0 → 0.6.2

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

@@ -0,0 +1,17 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel-viewer.d.ts","sourceRoot":"","sources":["../src/pd-panel-viewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,OAAO,0CAA0C,CAAC;AAIlD,qBACa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAGd,MAAM,SAAK;IAIX,QAAQ,EAAE,GAAG,CAAM;IAGnB,OAAO,KAAM;IAEb,MAAM,CAAC,MAAM,0BAkEX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IAmCN,YAAY;IAoBZ,MAAM,CAAC,iBAAiB,EAAE,GAAG;IAkC7B,IAAI;IASJ,QAAQ;CAOT"}

package/dist/pd-panel-viewer.js

@@ -0,0 +1,207 @@
+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);
+    }
+
+    .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/pd-panel.d.ts

@@ -0,0 +1,6 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-panel.d.ts","sourceRoot":"","sources":["../src/pd-panel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAO,MAAM,KAAK,CAAC;AAG5C,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BAsBX;IAEF,MAAM;CAOP"}

package/dist/pd-panel.js

@@ -0,0 +1,48 @@
+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/pd-tab.d.ts

@@ -0,0 +1,13 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { TabHeader } from './types';
+export declare class PdTab extends LitElement {
+    tabs: TabHeader[];
+    defaultTab?: string;
+    _activeTab?: string;
+    static styles: CSSResultGroup;
+    protected update(changedProperties: any): void;
+    render(): import('lit-html').TemplateResult<1>;
+    reset(): void;
+    private _tabSelected;
+}
+//# sourceMappingURL=pd-tab.d.ts.map

package/dist/pd-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-tab.d.ts","sourceRoot":"","sources":["../src/pd-tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAO5D,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,qBACa,KAAM,SAAQ,UAAU;IAEnC,IAAI,EAAE,SAAS,EAAE,CAAM;IAGvB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,MAAM,EAmGR,cAAc,CAAC;IAEpB,SAAS,CAAC,MAAM,CAAC,iBAAiB,EAAE,GAAG,GAAG,IAAI;IAQ9C,MAAM;IAgCN,KAAK;IAKL,OAAO,CAAC,YAAY;CAQrB"}

package/dist/pd-tab.js

@@ -0,0 +1,182 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
+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 PdTab = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tabs = [];
+  }
+  update(changedProperties) {
+    if (changedProperties.has("defaultTab") && this.defaultTab) {
+      console.log("PdTab: Set active from default selection", this.defaultTab);
+      this._activeTab = this.defaultTab;
+    }
+    super.update(changedProperties);
+  }
+  render() {
+    return html`
+      <div class="header-container">
+        ${this.tabs.map(
+      (t) => html`
+            <div
+              class="tab-header ${this._activeTab === t.key ? "active-header" : ""} ${t.disabled ? "disabled-header" : ""}"
+              data-key="${t.key}"
+              @click="${this._tabSelected}"
+            >
+              ${t.name}
+            </div>
+          `
+    )}
+      </div>
+      ${this.tabs.map(
+      (t) => html`
+          <div
+            id="${`slot${t.key}`}"
+            class="slot-container ${this._activeTab === t.key ? "active-slot" : ""}"
+          >
+            <slot name="${t.key}"></slot>
+          </div>
+        `
+    )}
+    `;
+  }
+  reset() {
+    this._activeTab = this.defaultTab;
+  }
+  // eslint-disable-next-line class-methods-use-this
+  _tabSelected(e) {
+    var _a, _b;
+    this._activeTab = (_b = (_a = e.target) == null ? void 0 : _a.dataset) == null ? void 0 : _b.key;
+    this.dispatchEvent(
+      new CustomEvent("tab-selected", {
+        detail: this._activeTab
+      })
+    );
+  }
+};
+PdTab.styles = [
+  PdColorStyles,
+  PdFontStyles,
+  css`
+      :host {
+        display: block;
+      }
+
+      .header-container {
+        display: flex;
+      }
+
+      .tab-header {
+        padding: var(--pd-tab-header-padding, 0.8em 1.5em);
+        background-color: var(--pd-tab-bg-col, var(--pd-default-light-col));
+        font-family: var(--pd-default-font-title-family);
+        color: var(--pd-tab-text-col, var(--pd-default-font-title-col));
+        cursor: pointer;
+        border: 2px solid var(--pd-tab-border-col, #ccc); /* Dünner Rahmen */
+        border-bottom: none; /* Tabs sollen nahtlos an den Inhalt anschließen */
+        border-radius: 8px 8px 0 0; /* Abgerundete obere Ecken */
+        display: inline-block; /* Tabs nebeneinander anzeigen */
+        margin-right: 5px; /* Abstand zwischen Tabs */
+        box-shadow: var(
+          --pd-tab-shadow,
+          0 2px 4px rgba(0, 0, 0, 0.1)
+        ); /* Leichter Schatten für Tiefe */
+        transition:
+          background-color 0.3s,
+          box-shadow 0.3s; /* Weiche Übergänge bei Hover */
+      }
+
+      .tab-header:hover {
+        background-color: var(
+          --pd-tab-bg-hover-col,
+          var(--pd-default-hover-col)
+        );
+        box-shadow: var(
+          --pd-tab-shadow-hover,
+          0 4px 8px rgba(0, 0, 0, 0.2)
+        ); /* Schattenintensität bei Hover erhöhen */
+      }
+
+      .tab-header.active-header {
+        background-color: var(--pd-tab-bg-active-col, var(--pd-default-col));
+        border-bottom: 2px solid
+          var(--pd-tab-border-active-col, var(--pd-default-col));
+        color: var(
+          --pd-tab-active-text-col,
+          var(--pd-default-bg-col)
+        ); /* Textfarbe für aktiven Tab */
+        box-shadow: none; /* Schatten entfernen, wenn Tab aktiv ist */
+      }
+
+      .tab-header.disabled-header {
+        background-color: var(--pd-tab-bg-active-col, var(--pd-default-col));
+        border-bottom: 2px solid
+          var(--pd-tab-border-active-col, var(--pd-default-col));
+        color: var(
+          --pd-tab-active-text-col,
+          var(--pd-default-bg-col)
+        ); /* Textfarbe für aktiven Tab */
+        box-shadow: none; /* Schatten entfernen, wenn Tab aktiv ist */
+      }
+
+      .tab-header.disabled-header {
+        pointer-events: none; /* Deaktiviert die Klickbarkeit */
+        background-color: var(
+          --pd-tab-disabled-bg-col,
+          #f0f0f0
+        ); /* Hellere Farbe für deaktivierte Tabs */
+        color: var(--pd-tab-disabled-text-col, #999); /* Hellere Textfarbe */
+        border-color: var(
+          --pd-tab-disabled-border-col,
+          #ddd
+        ); /* Angepasste Rahmenfarbe */
+        cursor: not-allowed; /* Zeigt an, dass der Tab nicht interaktiv ist */
+        opacity: 0.6; /* Reduziert die Sichtbarkeit für einen "deaktivierten" Look */
+      }
+
+      .tab-header:focus {
+        outline: none; /* Entfernt den Standardfokusrahmen */
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Fokusring für Tastaturnavigation */
+      }
+
+      .slot-container {
+        display: none;
+      }
+
+      .active-slot {
+        padding: var(--pd-tab-content-padding, 1em);
+        display: block;
+        border: var(--pd-tab-content-border, 1px solid var(--pd-default-col));
+        border-top: var(
+          --pd-tab-content-border-top,
+          3px solid var(--pd-default-col)
+        );
+      }
+    `
+];
+__decorateClass([
+  property({ type: Array })
+], PdTab.prototype, "tabs", 2);
+__decorateClass([
+  property({ type: String })
+], PdTab.prototype, "defaultTab", 2);
+__decorateClass([
+  property({ type: String, state: true })
+], PdTab.prototype, "_activeTab", 2);
+PdTab = __decorateClass([
+  customElement("pd-tab")
+], PdTab);
+export {
+  PdTab
+};

package/dist/stories/pd-tab.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    render: (args: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+        onClick: {
+            action: string;
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const TabDefault: Story;
+//# sourceMappingURL=pd-tab.stories.d.ts.map

package/dist/stories/pd-tab.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-tab.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-tab.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,cAAc,CAAC;AAGtB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC"}

package/dist/types.d.ts

@@ -18,4 +18,11 @@ export interface PdEditContentDataEntry {
     name: string;
     val: string;
 }
+export interface TabHeader {
+    key: string;
+    name: string;
+    disabled?: boolean;
+    pdIcon?: string;
+    otherIcon?: any;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-content",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Progressive Development content components. ",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
@@ -14,6 +14,9 @@
     "./pd-edit-content": "./dist/pd-edit-content.js",
     "./pd-more-info": "./dist/pd-more-info.js",
     "./pd-resize-content": "./dist/pd-resize-content.js",
+    "./pd-tab": "./dist/pd-tab.js",
+    "./pd-panel-viewer": "./dist/pd-panel-viewer.js",
+    "./pd-panel": "./dist/pd-panel.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -46,10 +49,12 @@
     "@progressive-development/pd-dialog": "^0.6.0",
     "@progressive-development/pd-icon": "^0.6.1",
     "@progressive-development/pd-shared-styles": "^0.2.1",
+    "hammerjs": "^2.0.8",
     "lit": "^3.3.0",
     "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
+    "@types/hammerjs": "^2.0.46",
     "@chromatic-com/storybook": "^1.9.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.6.10",