@progressive-development/pd-content 1.0.2 → 1.0.3

package/dist/pd-loading-state/PdLoadingState.js

@@ -1,8 +1,9 @@
-import { css, LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { css, LitElement, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
 import { classMap } from 'lit/directives/class-map.js';
 import '@progressive-development/pd-icon/pd-icon';
+import './register-pd-logo-loader.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,9 +16,14 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let PdLoadingState = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.loaderStyle = "spinner";
+    this.inline = false;
+  }
   render() {
     if (!this.loadingState) {
-      return "";
+      return nothing;
     }
     return this.loadingState.modal ? html`
           <div
@@ -34,56 +40,107 @@ let PdLoadingState = class extends LitElement {
           </div>
         ` : this._renderContent();
   }
+  _renderLoader() {
+    switch (this.loaderStyle) {
+      case "dots":
+        return html`<div
+          class="loader-dots"
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        >
+          <span></span><span></span><span></span>
+        </div>`;
+      case "pulse":
+        return html`<div
+          class="loader-pulse"
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        ></div>`;
+      case "logo":
+        return html`<pd-logo-loader
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        ></pd-logo-loader>`;
+      default:
+        return html`<div
+          class="loader-spinner"
+          role="progressbar"
+          aria-label="${msg("Laden", {
+          id: "pdContent.loadingstate.ariaLoading"
+        })}"
+        ></div>`;
+    }
+  }
+  _renderSubTasks(subTasks) {
+    const completed = subTasks.filter((t) => t.completed).length;
+    return html`
+      <div class="sub-tasks">
+        <div class="sub-task-header">
+          ${completed} von ${subTasks.length} Schritten
+        </div>
+        ${subTasks.map(
+      (task) => html`
+            <div class="sub-task-row">
+              ${task.completed ? html`<pd-icon
+                    class="sub-icon completed"
+                    icon="checkBox"
+                    activeIcon
+                  ></pd-icon>` : html`<pd-icon
+                    class="sub-icon loading"
+                    icon="syncIcon"
+                    activeIcon
+                  ></pd-icon>`}
+              <span>${task.loadingTxt}</span>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
   _renderContent() {
     if (!this.loadingState) {
-      return "";
+      return nothing;
+    }
+    if (this.loadingState.smallBackground) {
+      return html`
+        <div class="background-content" role="status" aria-live="polite">
+          <div
+            class="background-loader"
+            role="progressbar"
+            aria-label="${msg("Laden", {
+        id: "pdContent.loadingstate.ariaLoading"
+      })}"
+          ></div>
+          <span>
+            ${this.loadingState.loadingTxt || msg("Daten werden synchronisiert", {
+        id: "pdContent.loadingstate.syncState"
+      })}
+          </span>
+        </div>
+      `;
     }
     return html`
       <div
         class="${classMap({
-      content: !this.loadingState.smallBackground,
-      "no-modal-content": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,
-      "background-content": this.loadingState.smallBackground === true
+      content: true,
+      "no-modal-content": this.loadingState.modal !== true && !this.inline
     })}"
         role="status"
         aria-live="polite"
       >
-        <div
-          class="${this.loadingState.smallBackground ? "background-loader" : "loader"}"
-          role="progressbar"
-          aria-label="${msg("Laden", {
-      id: "pdContent.loadingstate.ariaLoading"
-    })}"
-        ></div>
+        ${this._renderLoader()}
         <p>
-          ${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? msg("Daten werden synchronisiert", {
-      id: "pdContent.loadingstate.syncState"
-    }) : msg("Bitte warten, Daten werden geladen", {
+          ${this.loadingState.loadingTxt || msg("Bitte warten, Daten werden geladen", {
       id: "pdContent.loadingstate.pleaseWait"
-    }))}
+    })}
         </p>
-        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`
-              <ul class="sub-ul">
-                ${this.loadingState.subTask.map(
-      (task) => html`
-                    <li>
-                      <div class="sub-row">
-                        ${task.loadingTxt}
-                        ${task.completed ? html`<pd-icon
-                              class="sub-icon completed"
-                              icon="checkBox"
-                              activeIcon
-                            ></pd-icon>` : html`<pd-icon
-                              class="sub-icon loading"
-                              icon="syncIcon"
-                              activeIcon
-                            ></pd-icon>`}
-                      </div>
-                    </li>
-                  `
-    )}
-              </ul>
-            ` : ""}
+        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? this._renderSubTasks(this.loadingState.subTask) : nothing}
       </div>
     `;
   }
@@ -124,80 +181,139 @@ PdLoadingState.styles = [
 
       /* Main content box */
       .content {
-        padding: 1em;
+        padding: var(--pd-spacing-lg, 2rem) var(--pd-spacing-lg, 2rem);
         text-align: center;
-        background-color: var(--pd-loading-state-bg-col, #edf7fd);
-        border: 2px solid
+        background-color: var(
+          --pd-loading-state-bg-col,
+          var(--pd-default-bg-light-col, #f2f9fa)
+        );
+        border: var(--pd-border-width, 1px) solid
           var(--pd-loading-state-border-col, var(--pd-default-col, #067394));
+        border-radius: var(--pd-radius-lg, 8px);
+        box-shadow: var(--pd-shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));
+        min-width: 280px;
+        max-width: 420px;
         z-index: 101;
       }
 
-      /* Background mode (bottom-right corner) */
+      /* Background mode (bottom-right pill/toast) */
       .background-content {
         position: fixed;
-        right: 0em;
-        bottom: 0em;
-
-        padding: 1em;
+        right: var(--pd-spacing-md, 1rem);
+        bottom: var(--pd-spacing-md, 1rem);
+        padding: var(--pd-spacing-sm, 0.5rem) var(--pd-spacing-md, 1rem);
         z-index: 600;
-
         display: flex;
-        gap: 0.5em;
+        gap: var(--pd-spacing-sm, 0.5rem);
         align-items: center;
-
-        background-color: var(--pd-loading-state-background-bg, white);
+        background: var(
+          --pd-loading-state-background-bg,
+          var(--pd-default-bg-col, #fff)
+        );
+        border-radius: var(--pd-radius-lg, 8px);
+        box-shadow: var(--pd-shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.15));
+        font-size: 0.8125rem;
+        color: var(--pd-default-font-content-col, #353738);
       }
 
-      /* Main spinner */
-      .loader {
-        border: 16px solid var(--pd-loading-state-loader-bg, #0a3a48);
-        border-top: 16px solid var(--pd-loading-state-loader-fg, #067394);
+      /* ====== Spinner loader ====== */
+      .loader-spinner {
+        border: 4px solid
+          var(--pd-loading-state-loader-bg, var(--pd-default-dark-col, #0a3a48));
+        border-top: 4px solid
+          var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394));
         border-radius: 50%;
-        width: 30px;
-        height: 30px;
+        width: 40px;
+        height: 40px;
         animation: spin 2s linear infinite;
-
         margin-left: auto;
         margin-right: auto;
       }
 
-      /* Small spinner for background mode */
-      .background-loader {
-        border: 10px solid var(--pd-loading-state-loader-bg, #0a3a48);
-        border-top: 10px solid var(--pd-loading-state-loader-fg, #067394);
-        border-radius: 50%;
+      /* ====== Dots loader ====== */
+      .loader-dots {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+      }
+      .loader-dots span {
         width: 10px;
         height: 10px;
-        animation: spin 2s linear infinite;
+        border-radius: 50%;
+        background: var(
+          --pd-loading-state-loader-fg,
+          var(--pd-default-col, #067394)
+        );
+        animation: dot-pulse 1.4s ease-in-out infinite;
+      }
+      .loader-dots span:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+      .loader-dots span:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+
+      /* ====== Pulse loader ====== */
+      .loader-pulse {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        margin: 0 auto;
+        border: 3px solid
+          var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394));
+        animation: pulse-ring 1.5s ease-in-out infinite;
       }
 
-      /* Sub-task list */
-      .sub-ul {
-        text-align: start;
+      /* ====== Background spinner (small) ====== */
+      .background-loader {
+        border: 2px solid
+          var(--pd-loading-state-loader-bg, var(--pd-default-dark-col, #0a3a48));
+        border-top: 2px solid
+          var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394));
+        border-radius: 50%;
+        width: 16px;
+        height: 16px;
+        animation: spin 2s linear infinite;
+        flex-shrink: 0;
       }
 
-      .sub-row {
+      /* ====== Sub-tasks ====== */
+      .sub-tasks {
+        margin-top: var(--pd-spacing-md, 1rem);
+        text-align: left;
+      }
+      .sub-task-header {
+        font-size: 0.75rem;
+        color: var(--pd-default-font-muted-col, #6b7280);
+        margin-bottom: var(--pd-spacing-sm, 0.5rem);
+      }
+      .sub-task-row {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding-right: 10px;
+        gap: var(--pd-spacing-sm, 0.5rem);
+        padding: var(--pd-spacing-xs, 0.25rem) 0;
       }
-
-      .sub-icon {
+      .sub-task-row .sub-icon {
         --pd-icon-size: 1rem;
         padding: 0;
-        vertical-align: baseline;
-        margin: 0 0.25rem 0 0;
+        margin: 0;
+        flex-shrink: 0;
       }
-
-      .completed {
-        --pd-icon-col-active: var(--pd-loading-state-completed-col, green);
+      .sub-task-row .completed {
+        --pd-icon-col-active: var(
+          --pd-loading-state-completed-col,
+          var(--pd-default-success-col, #348b11)
+        );
       }
-
-      .loading {
-        --pd-icon-col-active: var(--pd-loading-state-loading-col, orange);
+      .sub-task-row .loading {
+        --pd-icon-col-active: var(
+          --pd-loading-state-loading-col,
+          var(--pd-default-warning-col, #ffbf00)
+        );
+        animation: spin 2s linear infinite;
       }
 
+      /* ====== Keyframes ====== */
       @keyframes spin {
         0% {
           transform: rotate(0deg);
@@ -206,14 +322,43 @@ PdLoadingState.styles = [
           transform: rotate(360deg);
         }
       }
+
+      @keyframes dot-pulse {
+        0%,
+        80%,
+        100% {
+          opacity: 0.3;
+          transform: scale(0.8);
+        }
+        40% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      @keyframes pulse-ring {
+        0% {
+          transform: scale(0.8);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1.4);
+          opacity: 0;
+        }
+      }
     `
 ];
 __decorateClass([
   property({ type: Object })
 ], PdLoadingState.prototype, "loadingState", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdLoadingState.prototype, "loaderStyle", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdLoadingState.prototype, "inline", 2);
 PdLoadingState = __decorateClass([
-  localized(),
-  customElement("pd-loading-state")
+  localized()
 ], PdLoadingState);
 
 export { PdLoadingState };

package/dist/pd-loading-state/pd-loading-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-loading-state.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-loading-state.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"pd-loading-state.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-loading-state.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,EACL,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,qBAAqB,CAAC"}

package/dist/pd-loading-state/pd-logo-loader.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Animated PD logo symbol used as a loading indicator.
+ *
+ * Renders only the intertwined P/D symbol (no company text) and loops
+ * the stroke-draw animation continuously: lines draw forward, then
+ * erase backward, creating a smooth "breathing" loading effect.
+ *
+ * @tagname pd-logo-loader
+ * @cssprop --pd-logo-loader-col - Stroke color. Default: `var(--pd-loading-state-loader-fg)`.
+ * @cssprop --pd-logo-loader-size - Width and height. Default: `56px`.
+ * @cssprop --pd-logo-loader-stroke-width - SVG stroke width. Default: `5`.
+ * @cssprop --pd-logo-loader-duration - Full draw+erase cycle. Default: `2.5s`.
+ */
+export declare class PdLogoLoader extends LitElement {
+    static styles: import('lit').CSSResult;
+    firstUpdated(): void;
+    render(): import('lit').TemplateResult<2>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "pd-logo-loader": PdLogoLoader;
+    }
+}
+//# sourceMappingURL=pd-logo-loader.d.ts.map

package/dist/pd-loading-state/pd-logo-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-logo-loader.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/pd-logo-loader.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAsCpB;IAEO,YAAY,IAAI,IAAI;IAQpB,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/pd-loading-state/pd-logo-loader.js

@@ -0,0 +1,63 @@
+import { LitElement, css, svg } from 'lit';
+
+class PdLogoLoader extends LitElement {
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: var(--pd-logo-loader-size, 56px);
+      height: var(--pd-logo-loader-size, 56px);
+      margin: 0 auto;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .pd-path {
+      stroke: var(
+        --pd-logo-loader-col,
+        var(--pd-loading-state-loader-fg, var(--pd-default-col, #067394))
+      );
+      stroke-width: var(--pd-logo-loader-stroke-width, 5);
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-miterlimit: 10;
+      fill: none;
+      stroke-dasharray: var(--_path-len);
+      stroke-dashoffset: var(--_path-len);
+      animation: logo-draw var(--pd-logo-loader-duration, 2.5s) ease-in-out
+        infinite alternate;
+    }
+
+    .pd-path-b {
+      animation-delay: 0.15s;
+    }
+
+    @keyframes logo-draw {
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+  `;
+  }
+  firstUpdated() {
+    const path = this.shadowRoot?.querySelector(".pd-path");
+    if (path) {
+      const len = path.getTotalLength();
+      this.style.setProperty("--_path-len", `${len}`);
+    }
+  }
+  render() {
+    return svg`<svg viewBox="0 0 166.68 212.6" aria-hidden="true">
+      <path class="pd-path" d="M123.9,80.5l3.6,0.1c6.7,0,12.2-5.5,12.2-12.2s-5.5-12.2-12.2-12.2c-6.7,0-12.2,5.5-12.2,12.2v75.8
+        c0,15-12.2,27.2-27.2,27.2s-27.2-12.2-27.2-27.2c0-14.1,10.7-25.7,24.4-27.1V74.7c0-4.4-3.5-8-7.9-8c-4.4,0-8,3.6-8,8
+        c0,4.4,3.6,8,8,8"/>
+      <path class="pd-path pd-path-b" d="M91.7,132.1l-3.6-0.1c-6.7,0-12.2,5.5-12.2,12.2c0,6.7,5.5,12.2,12.2,12.2s12.2-5.5,12.2-12.2V68.4
+        c0-15,12.2-27.2,27.2-27.2s27.2,12.2,27.2,27.2c0,14.1-10.8,25.7-24.5,27.1v42.1c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8s-3.6-8-8-8"/>
+    </svg>`;
+  }
+}
+
+export { PdLogoLoader };

package/dist/pd-loading-state/register-pd-logo-loader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+export {};
+//# sourceMappingURL=register-pd-logo-loader.d.ts.map

package/dist/pd-loading-state/register-pd-logo-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-pd-logo-loader.d.ts","sourceRoot":"","sources":["../../src/pd-loading-state/register-pd-logo-loader.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

package/dist/pd-loading-state/register-pd-logo-loader.js

@@ -0,0 +1,6 @@
+import { PdLogoLoader } from './pd-logo-loader.js';
+
+const tag = "pd-logo-loader";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdLogoLoader);
+}

package/dist/pd-loading-state.js

@@ -1 +1,8 @@
-export { PdLoadingState } from './pd-loading-state/PdLoadingState.js';
+import { PdLoadingState } from './pd-loading-state/PdLoadingState.js';
+
+const tag = "pd-loading-state";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdLoadingState);
+}
+
+export { PdLoadingState };

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

@@ -1 +1 @@
-{"version":3,"file":"PdPanelViewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanelViewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAEd,cAAc;IAEd,MAAM,SAAK;IAEX,cAAc;IAEd,QAAQ,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAM;IAEtD,cAAc;IAEd,OAAO,KAAM;IAEb,cAAc;IACd,OAAO,CAAC,eAAe,CAA+B;IACtD,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,cAAc;IACd,OAAO,CAAC,aAAa,CAAS;IAC9B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,CAAC,MAAM,0BAiGX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IA0EN,YAAY;IAQH,oBAAoB;IAS7B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAK9C;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAsCrB,IAAI;IASJ,QAAQ;IAUR,OAAO,CAAC,cAAc,CAUpB;IAEF,OAAO,CAAC,cAAc,CAqCpB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAIF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;CAY3B"}
+{"version":3,"file":"PdPanelViewer.d.ts","sourceRoot":"","sources":["../../src/pd-panel-viewer/PdPanelViewer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAKrD,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAE3C,YAAY,UAAS;IAGrB,SAAS,SAAK;IAEd,cAAc;IAEd,MAAM,SAAK;IAEX,cAAc;IAEd,QAAQ,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAM;IAEtD,cAAc;IAEd,OAAO,KAAM;IAEb,cAAc;IACd,OAAO,CAAC,eAAe,CAA+B;IACtD,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,cAAc;IACd,OAAO,CAAC,aAAa,CAAS;IAC9B,cAAc;IACd,OAAO,CAAC,cAAc,CAAK;IAC3B,cAAc;IACd,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,MAAM,CAAC,MAAM,0BAiGX;IAEF,IAAI,KAAK,WAER;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAId;IAED,MAAM;IA0EN,YAAY;IAQH,oBAAoB;IAS7B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAK9C;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAsCrB,IAAI;IASJ,QAAQ;IAUR,OAAO,CAAC,cAAc,CAQpB;IAEF,OAAO,CAAC,cAAc,CAqCpB;IAEF,OAAO,CAAC,YAAY,CAWlB;IAEF,OAAO,CAAC,gBAAgB,CAMtB;IAIF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,kBAAkB;CAY3B"}

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

@@ -43,7 +43,6 @@ class PdPanelViewer extends LitElement {
       this._pointerStartY = e.clientY;
       this._pointerMoved = false;
       this._isHorizontalDrag = null;
-      e.currentTarget.setPointerCapture(e.pointerId);
     };
     this._onPointerMove = (e) => {
       if (e.pointerId !== this._activePointerId) return;
@@ -55,6 +54,7 @@ class PdPanelViewer extends LitElement {
         if (absDx < this._dragThreshold && absDy < this._dragThreshold) return;
         this._isHorizontalDrag = absDx > absDy;
         if (this._isHorizontalDrag) {
+          e.currentTarget.setPointerCapture(e.pointerId);
           this.style.userSelect = "none";
           window.getSelection()?.removeAllRanges();
         }

package/dist/types.d.ts

@@ -47,6 +47,9 @@ export interface WizardStep {
     state?: PointState;
     labelSide?: LabelSide;
 }
+export type { PdBadge, PdBadgeChangeDetail, PdBadgeReorderDetail, } from './pd-badge-order/types.js';
+export { TEXT_LIMIT_TITLE, TEXT_LIMIT_DESC, DEFAULT_BADGE_COLOR, } from './pd-badge-order/types.js';
+export type { GalleryImage, GalleryMode, GalleryOpenDetail, GalleryCloseDetail, GalleryNavigateDetail, } from './pd-gallery/types.js';
 /**
  * Notice types for different message contexts.
  */

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;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACjE,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAGD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAGD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,CAAC"}
+{"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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACjE,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAGD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAGD,YAAY,EACV,OAAO,EACP,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAG/B;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-content",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Progressive Development content components. ",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -27,6 +27,9 @@
     "./pd-loading-state": "./dist/pd-loading-state.js",
     "./pd-notice-box": "./dist/pd-notice-box/pd-notice-box.js",
     "./pd-code-snippet": "./dist/pd-code-snippet/pd-code-snippet.js",
+    "./pd-badge-order": "./dist/pd-badge-order.js",
+    "./pd-gallery": "./dist/pd-gallery.js",
+    "./pd-gallery-lightbox": "./dist/pd-gallery-lightbox.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -44,9 +47,11 @@
     "prismjs": "^1.30.0",
     "pwa-helpers": "^0.9.1",
     "tslib": "^2.8.1",
-    "@progressive-development/pd-dialog": "1.0.2",
+    "@progressive-development/pd-dialog": "1.0.3",
+    "@progressive-development/pd-icon": "1.0.2",
     "@progressive-development/pd-shared-styles": "0.3.2",
-    "@progressive-development/pd-icon": "1.0.2"
+    "@progressive-development/pd-forms": "1.0.3",
+    "@progressive-development/pd-model": "1.1.1"
   },
   "customElements": "custom-elements.json",
   "keywords": [

package/dist/pd-box-view/pd-box-view.stories.d.ts

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-/**
- * Story arguments interface for pd-box-view component.
- * Maps to the component's public API via CSS custom properties.
- */
-interface PdBoxViewArgs {
-    /** Number of columns in the grid */
-    columns: number;
-    /** Gap between items */
-    gap: string;
-    /** Minimum width of each box */
-    minWidth: string;
-}
-/**
- * ## pd-box-view
- *
- * A responsive CSS Grid container for displaying content in configurable columns.
- *
- * ### Features
- * - Pure CSS Grid layout with no JavaScript logic
- * - Configurable column count via `--pd-box-columns`
- * - Configurable gap spacing via `--pd-box-gap`
- * - Minimum item width via `--pd-box-min-width` for responsive wrapping
- * - Items automatically wrap when they cannot maintain minimum width
- * - Lightweight: zero properties, zero events, all configuration via CSS
- *
- * ### Accessibility
- * - Pure layout component with no interactive behavior
- * - Content is fully accessible via standard HTML in the default slot
- * - Grid layout does not affect reading order for screen readers
- */
-declare const meta: Meta<PdBoxViewArgs>;
-export default meta;
-type Story = StoryObj<PdBoxViewArgs>;
-/** Default 4-column grid layout. Interactive via Controls panel. */
-export declare const Default: Story;
-/** Visual comparison of 1, 2, 3, and 4 column layouts. */
-export declare const AllVariants: Story;
-/** Demonstrates responsive wrapping when items cannot maintain minimum width. */
-export declare const ResponsiveMinWidth: Story;
-/** CSS Custom Properties -- Tight grid vs. spacious grid. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-box-view.stories.d.ts.map

package/dist/pd-box-view/pd-box-view.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-box-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/pd-box-view.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kBAAkB,CAAC;AAM1B;;;GAGG;AACH,UAAU,aAAa;IACrB,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AA2CD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAmC7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAMrC,oEAAoE;AACpE,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,WAAW,EAAE,KA6CzB,CAAC;AAMF,iFAAiF;AACjF,eAAO,MAAM,kBAAkB,EAAE,KA4BhC,CAAC;AAMF,6DAA6D;AAC7D,eAAO,MAAM,aAAa,EAAE,KA0D3B,CAAC"}