@progressive-development/pd-content 0.7.1 → 0.7.2

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

@@ -10,16 +10,12 @@ import { LitElement, CSSResultGroup } from 'lit';
  * @csspart container - Container der Collapse-Gruppe
  */
 export declare class PdCollapseGroup extends LitElement {
-    static styles: CSSResultGroup;
     /**
      * Enthält alle zugewiesenen <pd-collapse>-Elemente
      */
     private _assignedCollapses;
-    /**
-     * Registriert Event Listener nach dem ersten Render
-     */
-    firstUpdated(): void;
-    private _onToggleAccordion;
+    static styles: CSSResultGroup;
     render(): import('lit-html').TemplateResult<1>;
+    private _handleToogleEvent;
 }
 //# 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,OAAgB,MAAM,EAAE,cAAc,CAWpC;IAEF;;OAEG;IAEH,OAAO,CAAC,kBAAkB,CAAuB;IAEjD;;OAEG;IACM,YAAY;IAUrB,OAAO,CAAC,kBAAkB;IAc1B,MAAM;CAOP"}
+{"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"}

package/dist/pd-collapse-group.js

@@ -11,33 +11,26 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let PdCollapseGroup = class extends LitElement {
-  /**
-   * Registriert Event Listener nach dem ersten Render
-   */
-  firstUpdated() {
-    this._assignedCollapses.forEach((collapse) => {
-      collapse.addEventListener(
-        "toggle-accordion",
-        (e) => this._onToggleAccordion(e, collapse)
-      );
-    });
+  render() {
+    return html`
+      <div
+        class="container"
+        part="container"
+        @toggle-accordion="${this._handleToogleEvent}"
+      >
+        <slot></slot>
+      </div>
+    `;
   }
-  _onToggleAccordion(event, targetCollapse) {
-    const customEvent = event;
-    if (customEvent.detail === true) {
+  _handleToogleEvent(e) {
+    if (e.detail === true) {
       this._assignedCollapses.forEach((collapse) => {
-        if (collapse !== targetCollapse) {
+        if (collapse !== e.target) {
           collapse.active = false;
         }
       });
     }
-  }
-  render() {
-    return html`
-      <div class="container" part="container">
-        <slot></slot>
-      </div>
-    `;
+    e.stopPropagation();
   }
 };
 PdCollapseGroup.styles = [

package/dist/pd-collapse.d.ts

@@ -8,23 +8,20 @@ import { CSSResultGroup, LitElement } from 'lit';
  * @slot content - Slot für den Inhalt, der ein- und ausgeklappt wird
  */
 export declare class PdCollapse extends LitElement {
-    /**
-     * Gibt an, ob der Bereich geöffnet ist.
-     */
-    active: boolean;
     /**
      * Optionales Icon für den Toggle Button (standardmäßig `ICON_TOGGLE_COLLAPSE`)
      */
     icon: string;
-    static styles: CSSResultGroup;
     /**
-     * Öffnet den Collapse-Bereich
+     * Gibt an, ob der Bereich geöffnet ist.
      */
-    open(): void;
+    _active: boolean;
+    static styles: CSSResultGroup;
     /**
-     * Schließt den Collapse-Bereich
+     * Öffnet den Collapse-Bereich
      */
-    close(): void;
+    set active(activeVal: boolean);
+    get active(): boolean;
     private _onClick;
     render(): import('lit-html').TemplateResult<1>;
 }

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,MAAM,UAAS;IAEf;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAgC;IAE5C,OAAgB,MAAM,EAAE,cAAc,CAiFpC;IAEF;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,QAAQ;IAWP,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,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"}

package/dist/pd-collapse.js

@@ -1,5 +1,5 @@
 import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { property, state, customElement } 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";
@@ -16,35 +16,35 @@ var __decorateClass = (decorators, target, key, kind) => {
 let PdCollapse = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.active = false;
     this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
+    this._active = false;
   }
   /**
    * Öffnet den Collapse-Bereich
    */
-  open() {
-    this.active = true;
+  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
+        })
+      );
+    }
   }
-  /**
-   * Schließt den Collapse-Bereich
-   */
-  close() {
-    this.active = false;
+  get active() {
+    return this._active;
   }
   _onClick() {
-    this.active = !this.active;
-    this.dispatchEvent(
-      new CustomEvent("toggle-accordion", {
-        bubbles: true,
-        composed: true,
-        detail: this.active
-      })
-    );
+    this.active = !this._active;
   }
   render() {
     return html`
       <div
-        class="trigger ${this.active ? "open" : "closed"}"
+        class="trigger ${this._active ? "open" : "closed"}"
         @click=${this._onClick}
       >
         <slot name="header"></slot>
@@ -54,7 +54,7 @@ let PdCollapse = class extends LitElement {
           class="small primary"
         ></pd-icon>
       </div>
-      <div class="content ${this.active ? "open" : "closed"}">
+      <div class="content ${this._active ? "open" : "closed"}">
         <slot name="content"></slot>
       </div>
     `;
@@ -142,12 +142,12 @@ PdCollapse.styles = [
       }
     `
 ];
-__decorateClass([
-  property({ type: Boolean })
-], PdCollapse.prototype, "active", 2);
 __decorateClass([
   property({ type: String })
 ], PdCollapse.prototype, "icon", 2);
+__decorateClass([
+  state()
+], PdCollapse.prototype, "_active", 2);
 PdCollapse = __decorateClass([
   customElement("pd-collapse")
 ], PdCollapse);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-content",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Progressive Development content components. ",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@lit/localize": "^0.12.2",
-    "@progressive-development/pd-dialog": "^0.6.9",
+    "@progressive-development/pd-dialog": "^0.6.10",
     "@progressive-development/pd-icon": "^0.7.4",
     "@progressive-development/pd-shared-styles": "^0.2.5",
     "hammerjs": "^2.0.8",