@progressive-development/pd-spa-helper 0.7.5 → 0.8.0

package/dist/index.d.ts

@@ -1,10 +1,15 @@
 import { TemplateResult } from 'lit';
-export { PdSpaHelper, startInit, } from './PdSpaHelper.js';
+export { PdSpaHelper, startInit } from './PdSpaHelper.js';
 export * as pdSpaModel from './service-provider/service-provider-model.js';
 export * as pdSpaModel2 from './model/spa-model.js';
-export * as pdSpaHelper from './helper/helper-utils.js';
+export * as pdOfflineWatcher from './helper/offline-watcher-helper.js';
+export * as pdFileHelper from './helper/blob-helper.js';
+export * as pdDateHelper from './helper/date-helper.js';
+export * as pdPriceHelper from './helper/price-helper.js';
+export * as pdNumberHelper from './helper/number-helper.js';
+export * as pdTextHelper from './helper/text-helper.js';
 export { DefaultViewPage } from './defaultpage/default-view-page.js';
-export { DefaultConfirmPopup, ABORT_EVENT_NAME, STORE_EVENT_NAME } from './defaultpage/default-confirm-popup.js';
+export { DefaultConfirmPopup, ABORT_EVENT_NAME, STORE_EVENT_NAME, } from './defaultpage/default-confirm-popup.js';
 export type { PopupType } from './defaultpage/default-confirm-popup.js';
 export { DefaultDialogPopup } from './defaultpage/default-dialog-popup.js';
 export { DefaultPopup } from './defaultpage/default-popup.js';
@@ -13,7 +18,6 @@ export { DefaultWizardStep } from './defaultpage/default-wizard-step.js';
 export { DefaultStepAddress } from './defaultpage/default-step-address.js';
 export { DefaultStepSummary } from './defaultpage/default-step-summary.js';
 export type { OrderStep } from './defaultpage/default-step-summary.js';
-export type { TabHeader } from './tmpown/pd-tab.js';
 export { loginImpl, logoutImpl, getUser, isAuthenticatedImpl, callFunctionImpl, uploadFile, downloadFile, deleteFile, getStorageFileList, getStorageFile, getStorageConfiguration, activateCollectionListener, registerAppDeviceForNotification, getApp, getMessagingImpl, getUserIdToken, } from './service-provider/service-provider-impl.js';
 export { refreshAndPersistUserIdToken } from './helper/refresh-id-token.js';
 export { pdStore } from './store/mini-rx.store.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,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EACL,WAAW,EACX,SAAS,GACV,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,UAAU,MAAM,8CAA8C,CAAC;AAC3E,OAAO,KAAK,WAAW,MAAM,sBAAsB,CAAC;AAEpD,OAAO,KAAK,WAAW,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAC,eAAe,EAAC,MAAM,oCAAoC,CAAC;AAEnE,OAAO,EAAC,mBAAmB,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,MAAM,wCAAwC,CAAC;AAC/G,YAAY,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAExE,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAEzE,OAAO,EAAC,YAAY,EAAC,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAC,aAAa,EAAC,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAC,iBAAiB,EAAC,MAAM,sCAAsC,CAAC;AAEvE,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAEzE,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,YAAY,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAEvE,YAAY,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,0BAA0B,EAC1B,gCAAgC,EAChC,MAAM,EACN,gBAAgB,EAChB,cAAc,GACf,MAAM,6CAA6C,CAAA;AAEpD,OAAO,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,KAAK,QAAQ,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAE1D,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAE1C,OAAO,EAAE,SAAS,IAAI,UAAU,EAAC,MAAM,0CAA0C,CAAA;AACjF,OAAO,EAAE,SAAS,IAAI,UAAU,EAAC,MAAM,0CAA0C,CAAA;AACjF,OAAO,EAAE,SAAS,IAAI,UAAU,EAAC,MAAM,0CAA0C,CAAA;AAEjF,eAAO,MAAM,kBAAkB,YAAY,GAAG,OAAM,MAAM,GAAG,cAAc,aAAY,OAAO,WAAU,OAAO,SAU9G,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,UAAU,MAAM,8CAA8C,CAAC;AAC3E,OAAO,KAAK,WAAW,MAAM,sBAAsB,CAAC;AAEpD,OAAO,KAAK,gBAAgB,MAAM,oCAAoC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,cAAc,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,wCAAwC,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAExE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAC3E,YAAY,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAEvE,OAAO,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,mBAAmB,EACnB,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,0BAA0B,EAC1B,gCAAgC,EAChC,MAAM,EACN,gBAAgB,EAChB,cAAc,GACf,MAAM,6CAA6C,CAAC;AAErD,OAAO,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,KAAK,QAAQ,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAE1D,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,SAAS,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,SAAS,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,SAAS,IAAI,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEnF,eAAO,MAAM,kBAAkB,GAC7B,SAAS,GAAG,EACZ,KAAK,MAAM,GAAG,cAAc,EAC5B,WAAW,OAAO,EAClB,SAAS,OAAO,SAajB,CAAC"}

package/dist/index.js

@@ -1,7 +1,12 @@
 import { PdSpaHelper, startInit } from "./src/PdSpaHelper.js";
 import * as serviceProviderModel from "./src/service-provider/service-provider-model.js";
 import * as spaModel from "./src/model/spa-model.js";
-import * as helperUtils from "./src/helper/helper-utils.js";
+import * as offlineWatcherHelper from "./src/helper/offline-watcher-helper.js";
+import * as blobHelper from "./src/helper/blob-helper.js";
+import * as dateHelper from "./src/helper/date-helper.js";
+import * as priceHelper from "./src/helper/price-helper.js";
+import * as numberHelper from "./src/helper/number-helper.js";
+import * as textHelper from "./src/helper/text-helper.js";
 import { DefaultViewPage } from "./src/defaultpage/default-view-page.js";
 import { ABORT_EVENT_NAME, DefaultConfirmPopup, STORE_EVENT_NAME } from "./src/defaultpage/default-confirm-popup.js";
 import { DefaultDialogPopup } from "./src/defaultpage/default-dialog-popup.js";
@@ -21,15 +26,17 @@ import { templates } from "./src/generated/locale-wrapper/be-wrapper.js";
 import { templates as templates2 } from "./src/generated/locale-wrapper/de-wrapper.js";
 import { templates as templates3 } from "./src/generated/locale-wrapper/en-wrapper.js";
 const dispatchToastEvent = (element, txt, isSuccess, isError) => {
-  element.dispatchEvent(new CustomEvent("toast-event", {
-    detail: {
-      txt,
-      isSuccess,
-      isError
-    },
-    bubbles: true,
-    composed: true
-  }));
+  element.dispatchEvent(
+    new CustomEvent("toast-event", {
+      detail: {
+        txt,
+        isSuccess,
+        isError
+      },
+      bubbles: true,
+      composed: true
+    })
+  );
 };
 export {
   ABORT_EVENT_NAME,
@@ -63,11 +70,16 @@ export {
   logoutImpl,
   spaAppActions as pdAction,
   indexDB as pdDB,
+  dateHelper as pdDateHelper,
+  blobHelper as pdFileHelper,
+  numberHelper as pdNumberHelper,
+  offlineWatcherHelper as pdOfflineWatcher,
+  priceHelper as pdPriceHelper,
   spaAppSelector as pdSelector,
-  helperUtils as pdSpaHelper,
   serviceProviderModel as pdSpaModel,
   spaModel as pdSpaModel2,
   pdStore,
+  textHelper as pdTextHelper,
   refreshAndPersistUserIdToken,
   registerAppDeviceForNotification,
   setRouteElement,

package/dist/model/spa-model.d.ts

@@ -1,5 +1,6 @@
 export declare const APP_CONF_EVENT = "get-app-conf";
 export declare const RUNNING_WIZARD_STORAGE_ELEMENTS = "pd.spa.local.wizard.storage";
+export declare const UNDEF = "UNDEF";
 export interface LoadingSubTask {
     actionKey: string;
     completed: boolean;

package/dist/model/spa-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spa-model.d.ts","sourceRoot":"","sources":["../../src/model/spa-model.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAE7C,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAE7E,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B"}
+{"version":3,"file":"spa-model.d.ts","sourceRoot":"","sources":["../../src/model/spa-model.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAE7C,eAAO,MAAM,+BAA+B,gCAAgC,CAAC;AAE7E,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B"}

package/dist/node_modules/@progressive-development/pd-content/dist/locales/be.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.moreInfo.less": `Minder informatie`,
+  "pd.moreInfo.more": `Meer informatie`
+};
+export {
+  templates
+};

package/dist/node_modules/@progressive-development/pd-content/dist/locales/de.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.moreInfo.more": `Mehr Informationen`,
+  "pd.moreInfo.less": `Text ausblenden`
+};
+export {
+  templates
+};

package/dist/node_modules/@progressive-development/pd-content/dist/locales/en.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.moreInfo.less": `Less information`,
+  "pd.moreInfo.more": `More information`
+};
+export {
+  templates
+};

package/dist/{src/router/AppMain.js → node_modules/@progressive-development/pd-content/dist/pd-box-view.js}

@@ -1,6 +1,5 @@
-import { LitElement, html } from "lit";
+import { css, LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { outlet } from "lit-element-router";
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
@@ -9,14 +8,26 @@ var __decorateClass = (decorators, target, key, kind) => {
       result = decorator(result) || result;
   return result;
 };
-let AppMain = class extends outlet(LitElement) {
+let PdBoxView = class extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
 };
-AppMain = __decorateClass([
-  customElement("app-main")
-], AppMain);
+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 {
-  AppMain
+  PdBoxView
 };

package/dist/node_modules/@progressive-development/pd-content/dist/pd-collapse.js

@@ -0,0 +1,152 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { pdIcons } from "@progressive-development/pd-icon";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdColorStyles } from "../../pd-shared-styles/dist/src/pd-color-styles.js";
+import { PdFontStyles } from "../../pd-shared-styles/dist/src/pd-font-styles.js";
+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.active = false;
+    this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
+  }
+  /**
+   * Öffnet den Collapse-Bereich
+   */
+  open() {
+    this.active = true;
+  }
+  /**
+   * Schließt den Collapse-Bereich
+   */
+  close() {
+    this.active = false;
+  }
+  _onClick() {
+    this.active = !this.active;
+    this.dispatchEvent(
+      new CustomEvent("toggle-accordion", {
+        bubbles: true,
+        composed: true,
+        detail: this.active
+      })
+    );
+  }
+  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>
+    `;
+  }
+};
+PdCollapse.styles = [
+  PdColorStyles,
+  PdFontStyles,
+  css`
+      :host {
+        display: block;
+        width: 100%;
+        position: relative;
+        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;
+        position: relative;
+        overflow: visible;
+      }
+
+      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 {
+        background: var(--pd-collapse-bg-col, var(--pd-default-col));
+        font-family: var(--pd-default-font-title-family);
+        font-weight: bold;
+        color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
+        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;
+      }
+
+      ::slotted(.header) {
+        display: flex;
+        align-items: center;
+      }
+
+      .trigger:hover {
+        background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));
+      }
+
+      .trigger.closed {
+        margin-bottom: 1rem;
+      }
+
+      .content {
+        will-change: transform;
+        height: 0;
+        overflow: hidden;
+        transition-property: visibility, transform;
+        transition-duration: 0.2s;
+        visibility: hidden;
+        transform: translate3d(0, -100%, 0);
+        box-sizing: border-box;
+        padding: 0.5em;
+      }
+
+      .content.open {
+        visibility: visible;
+        height: auto;
+        transform: translate3d(0, 0, 0);
+        overflow-y: auto;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean })
+], PdCollapse.prototype, "active", 2);
+__decorateClass([
+  property({ type: String })
+], PdCollapse.prototype, "icon", 2);
+PdCollapse = __decorateClass([
+  customElement("pd-collapse")
+], PdCollapse);
+export {
+  PdCollapse
+};

package/dist/node_modules/@progressive-development/pd-content/dist/pd-edit-content.js

@@ -0,0 +1,225 @@
+import { html, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { PdColorStyles } from "../../pd-shared-styles/dist/src/pd-color-styles.js";
+import { PdFontStyles } from "../../pd-shared-styles/dist/src/pd-font-styles.js";
+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;
+};
+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>`;
+let PdEditContent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.contentTitle = "";
+    this.data = [];
+    this.editLinks = [];
+    this.editDisabled = false;
+  }
+  render() {
+    var _a;
+    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>
+        ${((_a = this.data) == null ? void 0 : _a.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) {
+    var _a, _b;
+    const link = (_b = (_a = e.currentTarget) == null ? void 0 : _a.dataset) == null ? void 0 : _b.link;
+    this.dispatchEvent(
+      new CustomEvent("edit-content", {
+        detail: { step: this.stepNumber, link },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+PdEditContent.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;
+        }
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], PdEditContent.prototype, "stepNumber", 2);
+__decorateClass([
+  property({ type: String })
+], PdEditContent.prototype, "contentTitle", 2);
+__decorateClass([
+  property({ type: Array })
+], PdEditContent.prototype, "data", 2);
+__decorateClass([
+  property({ type: Array })
+], PdEditContent.prototype, "editLinks", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdEditContent.prototype, "editDisabled", 2);
+PdEditContent = __decorateClass([
+  customElement("pd-edit-content")
+], PdEditContent);
+export {
+  PdEditContent
+};

package/dist/node_modules/@progressive-development/pd-content/dist/pd-more-info.js

@@ -0,0 +1,84 @@
+import { css, LitElement, html } from "lit";
+import { state, customElement } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import "../../pd-shared-styles/dist/src/pd-color-styles.js";
+import { PdFontStyles } from "../../pd-shared-styles/dist/src/pd-font-styles.js";
+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 PdMoreInfo = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._lessInfo = true;
+  }
+  render() {
+    return html`
+      <p>
+        ${this._lessInfo ? html`
+              <slot name="small-view"></slot>
+              <a @click=${this._showMoreInfo}>
+                ${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}
+              </a>
+            ` : html`
+              <slot name="large-view"></slot>
+              <a @click=${this._showLessInfo}>
+                ${msg("Text ausblenden", { id: "pd.moreInfo.less" })}
+              </a>
+            `}
+      </p>
+    `;
+  }
+  _showMoreInfo() {
+    this._lessInfo = false;
+  }
+  _showLessInfo() {
+    this._lessInfo = true;
+    const rect = this.getBoundingClientRect();
+    window.scrollBy({
+      top: rect.top - 150,
+      left: 0,
+      behavior: "smooth"
+    });
+  }
+};
+PdMoreInfo.styles = [
+  PdFontStyles,
+  css`
+      :host {
+        display: block;
+      }
+
+      p {
+        color: var(--pd-default-font-content-col);
+        font-size: var(--pd-default-font-content-size);
+      }
+
+      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);
+      }
+
+      a:hover {
+        color: var(--pd-default-font-link-col-hover);
+      }
+    `
+];
+__decorateClass([
+  state()
+], PdMoreInfo.prototype, "_lessInfo", 2);
+PdMoreInfo = __decorateClass([
+  customElement("pd-more-info"),
+  localized()
+], PdMoreInfo);
+export {
+  PdMoreInfo
+};