@progressive-development/pd-content 0.7.16 → 0.9.1

package/dist/index.d.ts

@@ -1,8 +1,12 @@
-export { PdBoxView } from './pd-box-view.js';
-export { PdCollapse } from './pd-collapse.js';
-export { PdEditContent } from './pd-edit-content.js';
-export { PdMoreInfo } from './pd-more-info.js';
-export { PdResizeContent } from './pd-resize-content.js';
+export { PdBoxView } from './pd-box-view/pd-box-view.js';
+export { PdCollapse } from './pd-collapse/pd-collapse.js';
+export { PdCollapseGroup } from './pd-collapse-group/pd-collapse-group.js';
+export { PdEditContent } from './pd-edit-content/pd-edit-content.js';
+export { PdMoreInfo } from './pd-more-info/pd-more-info.js';
+export { PdResizeContent } from './pd-resize-content/pd-resize-content.js';
+export { PdTab } from './pd-tab/pd-tab.js';
+export { PdPanel } from './pd-panel-viewer/pd-panel.js';
+export { PdPanelViewer } from './pd-panel-viewer/pd-panel-viewer.js';
 export type { PdCollapseToggleEventDetail, PdEditLink, PdCollapseElement, } from './types.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,YAAY,EACV,2BAA2B,EAC3B,UAAU,EACV,iBAAiB,GAClB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,YAAY,EACV,2BAA2B,EAC3B,UAAU,EACV,iBAAiB,GAClB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,18 +1,21 @@
-import { PdBoxView } from "./pd-box-view.js";
-import { PdCollapse } from "./pd-collapse.js";
-import { PdEditContent } from "./pd-edit-content.js";
-import { PdMoreInfo } from "./pd-more-info.js";
-import { PdResizeContent } from "./pd-resize-content.js";
-import { templates } from "./locales/be.js";
-import { templates as templates2 } from "./locales/de.js";
-import { templates as templates3 } from "./locales/en.js";
-export {
-  PdBoxView,
-  PdCollapse,
-  PdEditContent,
-  PdMoreInfo,
-  PdResizeContent,
-  templates as beTemplates,
-  templates2 as deTemplates,
-  templates3 as enTemplates
-};
+import './pd-box-view.js';
+import './pd-collapse.js';
+import './pd-collapse-group.js';
+import './pd-edit-content.js';
+import './pd-more-info.js';
+import './pd-resize-content.js';
+import './pd-tab.js';
+import './pd-panel.js';
+import './pd-panel-viewer.js';
+export { templates as beTemplates } from './locales/be.js';
+export { templates as deTemplates } from './locales/de.js';
+export { templates as enTemplates } from './locales/en.js';
+export { PdBoxView } from './pd-box-view/PdBoxView.js';
+export { PdCollapse } from './pd-collapse/PdCollapse.js';
+export { PdCollapseGroup } from './pd-collapse-group/PdCollapseGroup.js';
+export { PdEditContent } from './pd-edit-content/PdEditContent.js';
+export { PdMoreInfo } from './pd-more-info/PdMoreInfo.js';
+export { PdResizeContent } from './pd-resize-content/PdResizeContent.js';
+export { PdTab } from './pd-tab/PdTab.js';
+export { PdPanel } from './pd-panel-viewer/PdPanel.js';
+export { PdPanelViewer } from './pd-panel-viewer/PdPanelViewer.js';

package/dist/locales/be.js

@@ -2,6 +2,5 @@ const templates = {
   "pd.moreInfo.less": `Minder informatie`,
   "pd.moreInfo.more": `Meer informatie`
 };
-export {
-  templates
-};
+
+export { templates };

package/dist/locales/de.js

@@ -2,6 +2,5 @@ const templates = {
   "pd.moreInfo.more": `Mehr Informationen`,
   "pd.moreInfo.less": `Text ausblenden`
 };
-export {
-  templates
-};
+
+export { templates };

package/dist/locales/en.js

@@ -2,6 +2,5 @@ const templates = {
   "pd.moreInfo.less": `Less information`,
   "pd.moreInfo.more": `More information`
 };
-export {
-  templates
-};
+
+export { templates };

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

@@ -0,0 +1,9 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * @tagname pd-box-view
+ */
+export declare class PdBoxView extends LitElement {
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=PdBoxView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdBoxView.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/PdBoxView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEO,MAAM;CAGhB"}

package/dist/pd-box-view/PdBoxView.js

@@ -0,0 +1,23 @@
+import { LitElement, css, html } from 'lit';
+
+class PdBoxView extends LitElement {
+  static {
+    this.styles = [
+      css`
+      :host {
+        display: grid;
+        grid-template-columns: repeat(
+          var(--pd-box-columns, 4),
+          minmax(var(--pd-box-min-width, 100px), 1fr)
+        );
+        gap: var(--pd-box-gap, 25px);
+      }
+    `
+    ];
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+}
+
+export { PdBoxView };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-box-view.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/pd-box-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO3C,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/{stories → pd-box-view}/pd-box-view.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/web-components';
 declare const meta: {
     title: string;
     component: string;
-    render: () => import('lit-html').TemplateResult<1>;
+    render: () => import('lit').TemplateResult<1>;
 };
 export default meta;
 type Story = StoryObj;

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-box-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-box-view/pd-box-view.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI;;;;CA6CM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

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

package/dist/pd-box-view.js

@@ -1,33 +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 PdBoxView = class extends LitElement {
-  render() {
-    return html` <slot></slot> `;
-  }
-};
-PdBoxView.styles = [
-  css`
-      :host {
-        display: grid;
-        grid-template-columns: repeat(
-          var(--pd-box-columns, 4),
-          minmax(var(--pd-box-min-width, 100px), 1fr)
-        );
-        gap: var(--pd-box-gap, 25px);
-      }
-    `
-];
-PdBoxView = __decorateClass([
-  customElement("pd-box-view")
-], PdBoxView);
-export {
-  PdBoxView
-};
+import { PdBoxView } from './pd-box-view/PdBoxView.js';
+
+const tag = "pd-box-view";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdBoxView);
+}
+
+export { PdBoxView };

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

@@ -0,0 +1,38 @@
+import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
+/**
+ * @tagname pd-collapse
+ *
+ * Ein auf- und zuklappbarer Bereich mit Header und Inhalt.
+ *
+ * @fires toggle-accordion - Wird ausgelöst, wenn der Zustand gewechselt wird (true/false).
+ *
+ * @slot header - Slot für den sichtbaren Headerbereich
+ * @slot content - Slot für den Inhalt, der ein- und ausgeklappt wird
+ */
+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;
+    willUpdate(changedProps: PropertyValues<this>): void;
+    render(): import('lit').TemplateResult<1>;
+    /**
+     * Öffnet den Collapse-Bereich
+     */
+    set active(activeVal: boolean);
+    get active(): boolean;
+    private _onClick;
+    protected _registerAtContainer(): void;
+    protected _unRegisterAtContainer(): void;
+    private _internalId?;
+    private _getInternalId;
+}
+//# sourceMappingURL=PdCollapse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdCollapse.d.ts","sourceRoot":"","sources":["../../src/pd-collapse/PdCollapse.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,0CAA0C,CAAC;AAOlD;;;;;;;;;GASG;AACH,qBAAa,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,CA+FpC;IAEO,YAAY,IAAI,IAAI;IAKpB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,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/PdCollapse.js

@@ -0,0 +1,216 @@
+import { LitElement, css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+import '@progressive-development/pd-icon/pd-icon';
+import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+
+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 PdCollapse extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
+    this.startOpen = false;
+    this._active = false;
+  }
+  static {
+    this.styles = [
+      PdColorStyles,
+      PdFontStyles,
+      css`
+      :host {
+        display: block;
+        width: 100%;
+        position: relative;
+        overflow: visible;
+      }
+
+      .trigger {
+        position: relative;
+        z-index: 2;
+
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 0.5rem;
+        cursor: pointer;
+
+        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;
+      }
+
+      .trigger pd-icon {
+        --pd-icon-col-active: var(--pd-default-dark-col);
+        /*
+        --pd-icon-col-hover: var(--pd-default-dark-col);
+        --pd-icon-col-active-hover: var(--pd-default-dark-col);
+        */
+      }
+
+      .trigger:hover {
+        background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));
+      }
+
+      .trigger.closed {
+        border-radius: var(--pd-border-radius);
+      }
+
+      ::slotted(.header) {
+        display: flex;
+        align-items: center;
+      }
+
+      .content {
+        position: relative;
+        z-index: 1;
+
+        height: 0;
+        visibility: hidden;
+        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 {
+        height: auto;
+        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 */
+      }
+    `
+    ];
+  }
+  firstUpdated() {
+    this._registerAtContainer();
+  }
+  disconnectedCallback() {
+    this._unRegisterAtContainer();
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProps) {
+    if (changedProps.has("startOpen")) {
+      this._active = this.startOpen;
+    }
+  }
+  render() {
+    return html`
+      <div
+        class="trigger ${this._active ? "open" : "closed"}"
+        @click=${this._onClick}
+      >
+        <slot name="header"></slot>
+        <pd-icon
+          icon=${this.icon}
+          ?activeIcon=${this.active}
+          class="small primary"
+        ></pd-icon>
+      </div>
+      <div class="content ${this._active ? "open" : "closed"}">
+        <slot name="content"></slot>
+      </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;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdCollapse.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean })
+], PdCollapse.prototype, "startOpen");
+__decorateClass([
+  state()
+], PdCollapse.prototype, "_active");
+
+export { PdCollapse };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-collapse.d.ts","sourceRoot":"","sources":["../../src/pd-collapse/pd-collapse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/{stories → pd-collapse}/pd-collapse.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/web-components';
 declare const meta: {
     title: string;
-    render: ({ active, header, content, }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    render: ({ active, header, content, }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
     argTypes: {
         active: {
             control: "boolean";

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-collapse.stories.d.ts","sourceRoot":"","sources":["../../src/pd-collapse/pd-collapse.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,kBAAkB,CAAC;AAE1B,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/pd-collapse-group/PdCollapseGroup.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, CSSResultGroup } from 'lit';
+/**
+ * @element pd-collapse-group
+ * @tagname pd-collapse-group
+ *
+ * Gruppiert mehrere <pd-collapse> Elemente.
+ * Stellt sicher, dass immer nur ein Element geöffnet (active) ist.
+ *
+ * @slot default - Erwartet eine Liste von <pd-collapse> Elementen
+ *
+ * @csspart container - Container der Collapse-Gruppe
+ */
+export declare class PdCollapseGroup extends LitElement {
+    /**
+     * Enthält alle zugewiesenen <pd-collapse>-Elemente
+     */
+    private _assignedCollapses;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+    private _onRegister;
+    private _onUnRegister;
+    private _onUnRegisterBound;
+    private _onToggle;
+    private _deactivateOtherCollapses;
+}
+//# sourceMappingURL=PdCollapseGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdCollapseGroup.d.ts","sourceRoot":"","sources":["../../src/pd-collapse-group/PdCollapseGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D;;;;;;;;;;GAUG;AACH,qBAAa,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/PdCollapseGroup.js

@@ -0,0 +1,90 @@
+import { LitElement, css, html } from 'lit';
+
+class PdCollapseGroup extends LitElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Enthält alle zugewiesenen <pd-collapse>-Elemente
+     */
+    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);
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        display: block;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-collapse-group-gap, 0.5rem);
+      }
+    `
+    ];
+  }
+  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">
+        <slot></slot>
+      </div>
+    `;
+  }
+  _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;
+      }
+    });
+  }
+}
+
+export { PdCollapseGroup };

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

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

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

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

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

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

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

@@ -1,27 +1,2 @@
-import { LitElement, CSSResultGroup } from 'lit';
-/**
- * @element pd-collapse-group
- *
- * Gruppiert mehrere <pd-collapse> Elemente.
- * Stellt sicher, dass immer nur ein Element geöffnet (active) ist.
- *
- * @slot default - Erwartet eine Liste von <pd-collapse> Elementen
- *
- * @csspart container - Container der Collapse-Gruppe
- */
-export declare class PdCollapseGroup extends LitElement {
-    /**
-     * Enthält alle zugewiesenen <pd-collapse>-Elemente
-     */
-    private _assignedCollapses;
-    static styles: CSSResultGroup;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import('lit-html').TemplateResult<1>;
-    private _onRegister;
-    private _onUnRegister;
-    private _onUnRegisterBound;
-    private _onToggle;
-    private _deactivateOtherCollapses;
-}
-//# sourceMappingURL=pd-collapse-group.d.ts.map
+export * from './pd-collapse-group/pd-collapse-group'
+export {}