@progressive-development/pd-content 0.7.6 → 0.7.7

package/dist/pd-collapse-group.d.ts

@@ -15,7 +15,13 @@ export declare class PdCollapseGroup extends LitElement {
      */
     private _assignedCollapses;
     static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    private _handleToogleEvent;
+    private _onRegister;
+    private _onUnRegister;
+    private _onUnRegisterBound;
+    private _onToggle;
+    private _deactivateOtherCollapses;
 }
 //# sourceMappingURL=pd-collapse-group.d.ts.map

package/dist/pd-collapse-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-collapse-group.d.ts","sourceRoot":"","sources":["../src/pd-collapse-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IAEH,OAAO,CAAC,kBAAkB,CAAuB;IAEjD,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEF,MAAM;IAYN,OAAO,CAAC,kBAAkB;CAW3B"}
+{"version":3,"file":"pd-collapse-group.d.ts","sourceRoot":"","sources":["../src/pd-collapse-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAA6C;IAEvE,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEO,iBAAiB,IAAI,IAAI;IAkBzB,oBAAoB,IAAI,IAAI;IAkBrC,MAAM;IAQN,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,kBAAkB,CAAiC;IAE3D,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,yBAAyB;CAOlC"}

package/dist/pd-collapse-group.js

@@ -1,37 +1,81 @@
 import { css, LitElement, html } from "lit";
-import { queryAssignedElements, customElement } from "lit/decorators.js";
-var __defProp = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = decorator(result) || result;
   return result;
 };
 let PdCollapseGroup = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._assignedCollapses = /* @__PURE__ */ new Map();
+    this._onRegister = (e) => {
+      const { name, collapse } = e.detail;
+      console.debug("###### _onRegister collapse", name);
+      this._assignedCollapses.set(name, collapse);
+      e.stopPropagation();
+    };
+    this._onUnRegister = (e) => {
+      const { name } = e.detail;
+      console.debug("###### _onUnRegister collapse", name);
+      this._assignedCollapses.delete(name);
+      e.stopPropagation();
+    };
+    this._onUnRegisterBound = this._onUnRegister.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener(
+      "pd-collapse-register",
+      this._onRegister
+    );
+    this.addEventListener(
+      "pd-collapse-toggle",
+      this._onToggle
+    );
+    document.addEventListener(
+      "pd-collapse-unregister",
+      this._onUnRegisterBound
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "pd-collapse-register",
+      this._onRegister
+    );
+    this.removeEventListener(
+      "pd-collapse-toogle",
+      this._onToggle
+    );
+    document.removeEventListener(
+      "pd-collapse-unregister",
+      this._onUnRegisterBound
+    );
+  }
   render() {
     return html`
-      <div
-        class="container"
-        part="container"
-        @toggle-accordion="${this._handleToogleEvent}"
-      >
+      <div class="container" part="container">
         <slot></slot>
       </div>
     `;
   }
-  _handleToogleEvent(e) {
-    if (e.detail === true) {
-      this._assignedCollapses.forEach((collapse) => {
-        if (collapse !== e.target) {
-          collapse.active = false;
-        }
-      });
+  _onToggle(e) {
+    if (e.detail.active === true) {
+      this._deactivateOtherCollapses(e.detail.name);
     }
     e.stopPropagation();
   }
+  _deactivateOtherCollapses(targetKey) {
+    this._assignedCollapses.forEach((collapse, key) => {
+      if (key !== targetKey) {
+        collapse.active = false;
+      }
+    });
+  }
 };
 PdCollapseGroup.styles = [
   css`
@@ -45,9 +89,6 @@ PdCollapseGroup.styles = [
       }
     `
 ];
-__decorateClass([
-  queryAssignedElements({ flatten: true })
-], PdCollapseGroup.prototype, "_assignedCollapses", 2);
 PdCollapseGroup = __decorateClass([
   customElement("pd-collapse-group")
 ], PdCollapseGroup);

package/dist/pd-collapse.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement } from 'lit';
+import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
 /**
  * Ein auf- und zuklappbarer Bereich mit Header und Inhalt.
  *
@@ -12,17 +12,25 @@ export declare class PdCollapse extends LitElement {
      * Optionales Icon für den Toggle Button (standardmäßig `ICON_TOGGLE_COLLAPSE`)
      */
     icon: string;
+    startOpen: boolean;
     /**
      * Gibt an, ob der Bereich geöffnet ist.
      */
     _active: boolean;
     static styles: CSSResultGroup;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
     /**
      * Öffnet den Collapse-Bereich
      */
     set active(activeVal: boolean);
     get active(): boolean;
     private _onClick;
-    render(): import('lit-html').TemplateResult<1>;
+    protected _registerAtContainer(): void;
+    protected _unRegisterAtContainer(): void;
+    private _internalId?;
+    private _getInternalId;
 }
 //# sourceMappingURL=pd-collapse.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-collapse.d.ts","sourceRoot":"","sources":["../src/pd-collapse.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,0CAA0C,CAAC;AAOlD;;;;;;;GAOG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAgC;IAE5C;;OAEG;IAEH,OAAO,UAAS;IAEhB,OAAgB,MAAM,EAAE,cAAc,CAiFpC;IAEF;;OAEG;IACH,IAAI,MAAM,CAAC,SAAS,EAAE,OAAO,EAY5B;IAED,IAAI,MAAM,IAdY,OAAO,CAgB5B;IAED,OAAO,CAAC,QAAQ;IAIP,MAAM;CAkBhB"}
+{"version":3,"file":"pd-collapse.d.ts","sourceRoot":"","sources":["../src/pd-collapse.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,0CAA0C,CAAC;AAOlD;;;;;;;GAOG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAgC;IAG5C,SAAS,EAAE,OAAO,CAAS;IAE3B;;OAEG;IAEH,OAAO,UAAS;IAEhB,OAAgB,MAAM,EAAE,cAAc,CAgGpC;IAEO,YAAY,IAAI,IAAI;IAKpB,oBAAoB,IAAI,IAAI;cAKlB,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM9D,MAAM;IAmBf;;OAEG;IACH,IAAI,MAAM,CAAC,SAAS,EAAE,OAAO,EAe5B;IAED,IAAI,MAAM,IAjBY,OAAO,CAmB5B;IAED,OAAO,CAAC,QAAQ;IAIhB,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAatC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAaxC,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,cAAc;CAMvB"}

package/dist/pd-collapse.js

@@ -17,29 +17,20 @@ let PdCollapse = class extends LitElement {
   constructor() {
     super(...arguments);
     this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
+    this.startOpen = false;
     this._active = false;
   }
-  /**
-   * Öffnet den Collapse-Bereich
-   */
-  set active(activeVal) {
-    const oldActive = this._active;
-    this._active = activeVal;
-    if (oldActive !== activeVal) {
-      this.dispatchEvent(
-        new CustomEvent("toggle-accordion", {
-          bubbles: true,
-          composed: true,
-          detail: this._active
-        })
-      );
-    }
+  firstUpdated() {
+    this._registerAtContainer();
   }
-  get active() {
-    return this._active;
+  disconnectedCallback() {
+    this._unRegisterAtContainer();
+    super.disconnectedCallback();
   }
-  _onClick() {
-    this.active = !this._active;
+  willUpdate(_changedProperties) {
+    if (_changedProperties.has("startOpen")) {
+      this._active = this.startOpen;
+    }
   }
   render() {
     return html`
@@ -59,6 +50,60 @@ let PdCollapse = class extends LitElement {
       </div>
     `;
   }
+  /**
+   * Öffnet den Collapse-Bereich
+   */
+  set active(activeVal) {
+    const oldActive = this._active;
+    this._active = activeVal;
+    if (oldActive !== activeVal) {
+      this.dispatchEvent(
+        new CustomEvent("pd-collapse-toggle", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            active: this._active,
+            name: this.id || this._getInternalId()
+          }
+        })
+      );
+    }
+  }
+  get active() {
+    return this._active;
+  }
+  _onClick() {
+    this.active = !this._active;
+  }
+  _registerAtContainer() {
+    this.dispatchEvent(
+      new CustomEvent("pd-collapse-register", {
+        detail: {
+          name: this.id || this._getInternalId(),
+          collapse: this
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _unRegisterAtContainer() {
+    document.dispatchEvent(
+      new CustomEvent("pd-collapse-unregister", {
+        detail: {
+          name: this.id || this._getInternalId()
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _getInternalId() {
+    if (!this._internalId) {
+      this._internalId = `id${(/* @__PURE__ */ new Date()).getMilliseconds()}_${Math.random()}`;
+    }
+    return this._internalId;
+  }
 };
 PdCollapse.styles = [
   PdColorStyles,
@@ -71,46 +116,34 @@ PdCollapse.styles = [
         overflow: visible;
       }
 
-      :host .content.open {
-        border: 2px solid var(--pd-default-light-col);
-        background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
-        margin-bottom: 1rem;
+      .trigger {
         position: relative;
-        overflow: visible;
+        z-index: 2;
 
-        border-radius: 0 0 var(--pd-border-radius) var(--pd-border-radius);
-      }
-
-      pd-icon {
-        --pd-icon-stroke-col-active: var(--pd-default-bg-col);
-        --pd-icon-col-active: var(--pd-default-dark-col);
-        --pd-icon-col-hover: var(--pd-default-dark-col);
-        --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
-        --pd-icon-col-active-hover: var(--pd-default-dark-col);
-        --pd-icon-stroke-col-active-hover: var(--pd-default-hover-col);
-      }
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 0.5rem;
+        cursor: pointer;
 
-      .trigger {
-        background: var(--pd-collapse-bg-col, var(--pd-default-col));
         font-family: var(--pd-default-font-title-family);
+        font-size: var(--pd-collapse-header-font-size, 1rem);
         font-weight: bold;
         color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
+        background: var(--pd-collapse-bg-col, var(--pd-default-col));
+        border-radius: var(--pd-border-radius) var(--pd-border-radius) 0 0;
+
         transition-property: box-shadow, background;
         transition: 0.2s ease-in;
-        cursor: pointer;
-        font-size: var(--pd-collapse-header-font-size, 1rem);
-        padding: 0.5rem;
-        display: flex;
-        justify-content: space-between;
-        box-sizing: border-box;
-        position: relative;
-
-        border-radius: var(--pd-border-radius) var(--pd-border-radius) 0 0;
       }
 
-      ::slotted(.header) {
-        display: flex;
-        align-items: center;
+      .trigger pd-icon {
+        --pd-icon-stroke-col-active: var(--pd-default-bg-col);
+        --pd-icon-col-active: var(--pd-default-dark-col);
+        --pd-icon-col-hover: var(--pd-default-dark-col);
+        --pd-icon-stroke-col-hover: var(--pd-default-hover-col);
+        --pd-icon-col-active-hover: var(--pd-default-dark-col);
+        --pd-icon-stroke-col-active-hover: var(--pd-default-hover-col);
       }
 
       .trigger:hover {
@@ -118,33 +151,63 @@ PdCollapse.styles = [
       }
 
       .trigger.closed {
-        margin-bottom: 1rem;
         border-radius: var(--pd-border-radius);
       }
 
+      ::slotted(.header) {
+        display: flex;
+        align-items: center;
+      }
+
       .content {
-        will-change: transform;
+        position: relative;
+        z-index: 1;
+
         height: 0;
-        overflow: hidden;
-        transition-property: visibility, transform;
-        transition-duration: 0.2s;
         visibility: hidden;
-        transform: translate3d(0, -100%, 0);
+        overflow: hidden;
+        opacity: 0;
         box-sizing: border-box;
         padding: 0.5em;
+
+        border: 2px solid var(--pd-default-light-col);
+        background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
+        border-radius: 0 0 var(--pd-border-radius) var(--pd-border-radius);
+
+        will-change: transform, opacity;
+        transform: translate3d(0, -1.5em, 0);
+        pointer-events: none;
+
+        transform-origin: top;
+        transition:
+          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+          opacity 0.3s ease,
+          visibility 0s linear 0.3s; /* sichtbar wird später deaktiviert */
       }
 
       .content.open {
-        visibility: visible;
         height: auto;
-        transform: translate3d(0, 0, 0);
+        visibility: visible;
+        overflow: visible;
         overflow-y: auto;
+        opacity: 1;
+
+        transform: translate3d(0, 0, 0);
+        pointer-events: auto;
+
+        transition:
+          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+          opacity 0.3s ease,
+          visibility 0s linear 0s; /* sichtbar wird sofort gesetzt */
       }
     `
 ];
 __decorateClass([
   property({ type: String })
 ], PdCollapse.prototype, "icon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdCollapse.prototype, "startOpen", 2);
 __decorateClass([
   state()
 ], PdCollapse.prototype, "_active", 2);

package/dist/stories/pd-collapse-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-collapse-group.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-collapse-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,yBAAyB,CAAC;wBAQ5B,IAAI;AANT,wBAMU;AA0BV,eAAO,MAAM,OAAO,SAAoB,CAAC"}
+{"version":3,"file":"pd-collapse-group.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-collapse-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,yBAAyB,CAAC;wBAQ5B,IAAI;AANT,wBAMU;AAiCV,eAAO,MAAM,OAAO,SAAoB,CAAC"}

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

@@ -18,4 +18,6 @@ export default meta;
 type Story = StoryObj;
 export declare const Closed: Story;
 export declare const Open: Story;
+export declare const OpenHugeContent: Story;
+export declare const OpenMiddleContent: Story;
 //# sourceMappingURL=pd-collapse.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-collapse.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-collapse.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAiBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}
+{"version":3,"file":"pd-collapse.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-collapse.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,mBAAmB,CAAC;AAE3B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAiBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkD7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC"}

package/dist/types.d.ts

@@ -1,4 +1,6 @@
-import { PdCollapse } from './pd-collapse';
+/**
+ * Typdefinitionen für die PdCollapse Komponente
+ */
 export interface PdCollapseToggleEventDetail {
     /**
      * Gibt den neuen aktiven Zustand an.
@@ -23,5 +25,9 @@ export interface TabHeader {
     pdIcon?: string;
     otherIcon?: any;
 }
-export type PdCollapseElement = PdCollapse & HTMLElement;
+export interface PdCollapseElement {
+    open: () => void;
+    close: () => void;
+    active: boolean;
+}
 //# 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,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,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;AAED,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,WAAW,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,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;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-content",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "Progressive Development content components. ",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",