@progressive-development/pd-content 0.7.16 → 0.9.1

package/dist/pd-collapse-group.js

@@ -1,97 +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 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">
-        <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;
-      }
-    });
-  }
-};
-PdCollapseGroup.styles = [
-  css`
-      :host {
-        display: block;
-      }
-      .container {
-        display: flex;
-        flex-direction: column;
-        gap: var(--pd-collapse-group-gap, 0.5rem);
-      }
-    `
-];
-PdCollapseGroup = __decorateClass([
-  customElement("pd-collapse-group")
-], PdCollapseGroup);
-export {
-  PdCollapseGroup
-};
+import { PdCollapseGroup } from './pd-collapse-group/PdCollapseGroup.js';
+
+const tag = "pd-collapse-group";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdCollapseGroup);
+}
+
+export { PdCollapseGroup };

package/dist/pd-collapse.d.ts

@@ -1,36 +1,2 @@
-import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
-/**
- * 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-html').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=pd-collapse.d.ts.map
+export * from './pd-collapse/pd-collapse'
+export {}

package/dist/pd-collapse.js

@@ -1,218 +1,8 @@
-import { css, LitElement, html } from "lit";
-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";
-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 PdCollapse = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
-    this.startOpen = false;
-    this._active = false;
-  }
-  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;
-  }
-};
-PdCollapse.styles = [
-  PdColorStyles,
-  PdFontStyles,
-  css`
-      :host {
-        display: block;
-        width: 100%;
-        position: relative;
-        overflow: visible;
-      }
+import { PdCollapse } from './pd-collapse/PdCollapse.js';
 
-      .trigger {
-        position: relative;
-        z-index: 2;
+const tag = "pd-collapse";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdCollapse);
+}
 
-        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 */
-      }
-    `
-];
-__decorateClass([
-  property({ type: String })
-], PdCollapse.prototype, "icon", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdCollapse.prototype, "startOpen", 2);
-__decorateClass([
-  state()
-], PdCollapse.prototype, "_active", 2);
-PdCollapse = __decorateClass([
-  customElement("pd-collapse")
-], PdCollapse);
-export {
-  PdCollapse
-};
+export { PdCollapse };

package/dist/pd-edit-content/PdEditContent.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { PdEditContentDataEntry, PdEditLink } from '../types';
+/**
+ * @tagname pd-edit-content
+ */
+export declare class PdEditContent extends LitElement {
+    /**
+     * Aktuelle Schritt-Nummer (z.B. im Wizard)
+     */
+    stepNumber?: number;
+    /**
+     * Titel des Abschnitts
+     */
+    contentTitle: string;
+    /**
+     * Datenobjekte mit Label + Wert
+     */
+    data: Array<PdEditContentDataEntry>;
+    /**
+     * Liste an editierbaren Links mit Icons
+     */
+    editLinks: PdEditLink[];
+    /**
+     * Bearbeitung generell deaktivieren
+     */
+    editDisabled: boolean;
+    static styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+    private static _getLinkLogo;
+    private _editContent;
+}
+//# sourceMappingURL=PdEditContent.d.ts.map

package/dist/pd-edit-content/PdEditContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdEditContent.d.ts","sourceRoot":"","sources":["../../src/pd-edit-content/PdEditContent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,EAAE,sBAAsB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAuB9D;;GAEG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,IAAI,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAM;IAEzC;;OAEG;IAEH,SAAS,EAAE,UAAU,EAAE,CAAM;IAE7B;;OAEG;IAEH,YAAY,UAAS;IAErB,OAAgB,MAAM,EAAE,cAAc,CAoGpC;IAEO,MAAM;IAmDf,OAAO,CAAC,MAAM,CAAC,YAAY;IAM3B,OAAO,CAAC,YAAY;CAUrB"}

package/dist/pd-edit-content/PdEditContent.js

@@ -0,0 +1,221 @@
+import { html, LitElement, css } from 'lit';
+import { property } from 'lit/decorators.js';
+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;
+};
+const editIcon = html`<svg
+  class="edit"
+  viewBox="0 0 19 19"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g>
+    <path
+      d="M8.44,7.25C8.348,7.342,8.277,7.447,8.215,7.557L8.174,7.516L8.149,7.69 C8.049,7.925,8.014,8.183,8.042,8.442l-0.399,2.796l2.797-0.399c0.259,0.028,0.517-0.007,0.752-0.107l0.174-0.024l-0.041-0.041 c0.109-0.062,0.215-0.133,0.307-0.225l5.053-5.053l-3.191-3.191L8.44,7.25z"
+      fill="var(--edit-fill-color)"
+    />
+    <path
+      d="M18.183,1.568l-0.87-0.87c-0.641-0.641-1.637-0.684-2.225-0.097l-0.797,0.797l3.191,3.191l0.797-0.798 C18.867,3.205,18.824,2.209,18.183,1.568z"
+      fill="var(--edit-fill-color)"
+    />
+    <path
+      d="M15,9.696V17H2V2h8.953l1.523-1.42c0.162-0.161,0.353-0.221,0.555-0.293 c0.043-0.119,0.104-0.18,0.176-0.287H0v19h17V7.928L15,9.696z"
+      fill="var(--edit-fill-color)"
+    />
+  </g>
+</svg>`;
+const _PdEditContent = class _PdEditContent extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.contentTitle = "";
+    this.data = [];
+    this.editLinks = [];
+    this.editDisabled = false;
+  }
+  static {
+    this.styles = [
+      PdColorStyles,
+      PdFontStyles,
+      css`
+      :host {
+        display: block;
+      }
+
+      h4 {
+        font-family: var(--pd-default-font-title-family);
+        font-size: var(--pd-ec-font-title-size, 1.2em);
+        margin: 0 0 2px 0;
+        line-height: 40px;
+        color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
+        padding-left: 5px;
+      }
+
+      .header {
+        display: flex;
+        gap: 5px;
+        background-color: var(--pd-ec-bg-col, var(--pd-default-col));
+        align-items: center;
+      }
+
+      .circle {
+        margin-left: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 27px;
+        height: 27px;
+        border-radius: 50%;
+        background-color: var(--pd-ec-font-title-col, var(--pd-default-bg-col));
+      }
+
+      .step-number {
+        font-family: var(--pd-default-font-title-family);
+        font-size: var(--pd-ec-font-title-size, 1.2em);
+        font-weight: var(--pd-ec-nr-font-weight, bold);
+        color: var(--pd-ec-bg-col, var(--pd-default-col));
+      }
+
+      .label {
+        display: inline-block;
+        font-weight: bold;
+        width: 200px;
+        padding-top: 10px;
+      }
+
+      a {
+        cursor: pointer;
+        font-family: var(--pd-default-font-link-family);
+        font-size: var(--pd-default-font-link-size);
+        color: var(--pd-default-font-link-col);
+        --edit-fill-color: var(--pd-default-font-link-col);
+      }
+
+      a:hover {
+        color: var(--pd-default-font-link-col-hover);
+        --edit-fill-color: var(--pd-default-font-link-col-hover);
+      }
+
+      .edit {
+        width: 1.1em;
+      }
+
+      /* 
+        could used as class for given svg icons, workaround class 
+        hard coded for specific icon => maybe use custom properties here, but not for that hack...
+      */
+      .own-edit-icon {
+        width: 2em;
+        margin-top: -10px;
+      }
+
+      .link-row {
+        padding: 5px 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+      }
+
+      .link-item {
+        display: flex;
+        gap: 2px;
+        white-space: nowrap;
+        align-items: center;
+        pointer-events: none;
+      }
+
+      .param-data {
+        padding-bottom: 10px;
+      }
+
+      @media (max-width: 360px) {
+        .label {
+          width: 130px;
+        }
+      }
+    `
+    ];
+  }
+  render() {
+    return html`
+      <div class="header">
+        ${this.stepNumber ? html`
+              <div class="circle">
+                <span class="step-number">${this.stepNumber}</span>
+              </div>
+            ` : null}
+        <h4>${this.contentTitle}</h4>
+      </div>
+      <div>
+        ${this.data?.length ? html`
+              <div class="param-data">
+                ${this.data.map(
+      (entry) => html`<div>
+                      <span class="label">${entry.name}</span>
+                      <span class="value">${entry.val}</span>
+                    </div>`
+    )}
+              </div>
+            ` : null}
+        <slot></slot>
+        <div class="link-row">
+          ${!this.editDisabled ? html`
+                <a @click="${this._editContent}">
+                  <div class="link-item">
+                    ${editIcon} Bewerk ${this.contentTitle}
+                  </div>
+                </a>
+              ` : null}
+          ${this.editLinks.map(
+      (link) => html`
+              <a data-link="${link.key}" @click="${this._editContent}">
+                <div class="link-item">
+                  ${_PdEditContent._getLinkLogo(link)} ${link.txt}
+                </div>
+              </a>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+  static _getLinkLogo(link) {
+    if (link.icon) return link.icon;
+    if (link.defaultIcon) return editIcon;
+    return "";
+  }
+  _editContent(e) {
+    const link = e.currentTarget?.dataset?.link;
+    this.dispatchEvent(
+      new CustomEvent("edit-content", {
+        detail: { step: this.stepNumber, link },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], _PdEditContent.prototype, "stepNumber");
+__decorateClass([
+  property({ type: String })
+], _PdEditContent.prototype, "contentTitle");
+__decorateClass([
+  property({ type: Array })
+], _PdEditContent.prototype, "data");
+__decorateClass([
+  property({ type: Array })
+], _PdEditContent.prototype, "editLinks");
+__decorateClass([
+  property({ type: Boolean })
+], _PdEditContent.prototype, "editDisabled");
+let PdEditContent = _PdEditContent;
+
+export { PdEditContent };

package/dist/pd-edit-content/pd-edit-content.d.ts

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

package/dist/pd-edit-content/pd-edit-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-edit-content.d.ts","sourceRoot":"","sources":["../../src/pd-edit-content/pd-edit-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -6,6 +6,6 @@ export declare const WithEditLinks: StoryFn<any>;
 export declare const EditDisabled: StoryFn<any>;
 export declare const WithoutStepNumber: StoryFn<any>;
 export declare const CustomSlotContent: StoryFn<any>;
-export declare const EditContent: () => import('lit-html').TemplateResult<1>;
-export declare const NumberEditContent: () => import('lit-html').TemplateResult<1>;
+export declare const EditContent: () => import('lit').TemplateResult<1>;
+export declare const NumberEditContent: () => import('lit').TemplateResult<1>;
 //# sourceMappingURL=pd-edit-content.stories.d.ts.map

package/dist/pd-edit-content/pd-edit-content.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-edit-content.stories.d.ts","sourceRoot":"","sources":["../../src/pd-edit-content/pd-edit-content.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,sBAAsB,CAAC;wBASzB,IAAI;AAPT,wBAOU;AA+FV,eAAO,MAAM,OAAO,cAAoB,CAAC;AASzC,eAAO,MAAM,aAAa,cAAoB,CAAC;AAS/C,eAAO,MAAM,YAAY,cAAoB,CAAC;AAS9C,eAAO,MAAM,iBAAiB,cAAoB,CAAC;AAQnD,eAAO,MAAM,iBAAiB,cAAoB,CAAC;AAenD,eAAO,MAAM,WAAW,uCAsDvB,CAAC;AAGF,eAAO,MAAM,iBAAiB,uCA0B7B,CAAC"}

package/dist/pd-edit-content.d.ts

@@ -1,29 +1,2 @@
-import { LitElement, CSSResultGroup } from 'lit';
-import { PdEditContentDataEntry, PdEditLink } from './types';
-export declare class PdEditContent extends LitElement {
-    /**
-     * Aktuelle Schritt-Nummer (z.B. im Wizard)
-     */
-    stepNumber?: number;
-    /**
-     * Titel des Abschnitts
-     */
-    contentTitle: string;
-    /**
-     * Datenobjekte mit Label + Wert
-     */
-    data: Array<PdEditContentDataEntry>;
-    /**
-     * Liste an editierbaren Links mit Icons
-     */
-    editLinks: PdEditLink[];
-    /**
-     * Bearbeitung generell deaktivieren
-     */
-    editDisabled: boolean;
-    static styles: CSSResultGroup;
-    render(): import('lit-html').TemplateResult<1>;
-    private static _getLinkLogo;
-    private _editContent;
-}
-//# sourceMappingURL=pd-edit-content.d.ts.map
+export * from './pd-edit-content/pd-edit-content'
+export {}