@progressive-development/pd-content 0.5.9 → 0.6.1

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

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

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

@@ -0,0 +1,21 @@
+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>;
+    argTypes: {
+        active: {
+            control: "boolean";
+        };
+        header: {
+            control: "text";
+        };
+        content: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Closed: Story;
+export declare const Open: Story;
+//# sourceMappingURL=pd-collapse.stories.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,11 @@
+import { Meta, StoryFn } from '@storybook/web-components';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn<any>;
+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>;
+//# sourceMappingURL=pd-edit-content.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-edit-content.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-edit-content.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,uBAAuB,CAAC;wBAS1B,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,4CAsDvB,CAAC;AAGF,eAAO,MAAM,iBAAiB,4CA0B7B,CAAC"}

package/dist/stories/pd-more-info.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn } from '@storybook/web-components';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const WithLongContent: StoryFn;
+//# sourceMappingURL=pd-more-info.stories.d.ts.map

package/dist/stories/pd-more-info.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-more-info.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-more-info.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,oBAAoB,CAAC;wBAQvB,IAAI;AANT,wBAMU;AAyCV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAGzC,eAAO,MAAM,eAAe,SAA+B,CAAC"}

package/dist/stories/pd-resize-content.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/web-components';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+//# sourceMappingURL=pd-resize-content.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-resize-content.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-resize-content.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,sBAAsB,CAAC;wBAWzB,IAAI;AATT,wBASU;AAqBV,eAAO,MAAM,OAAO,SAAoB,CAAC"}

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

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    render: (args: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+        onClick: {
+            action: string;
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const TabDefault: Story;
+//# sourceMappingURL=pd-tab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-tab.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-tab.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,cAAc,CAAC;AAGtB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Typdefinitionen für die PdCollapse Komponente
+ */
+export interface PdCollapseToggleEventDetail {
+    /**
+     * Gibt den neuen aktiven Zustand an.
+     * `true` wenn geöffnet, `false` wenn geschlossen.
+     */
+    detail: boolean;
+}
+export interface PdEditLink {
+    key: string;
+    txt: string;
+    icon?: unknown;
+    defaultIcon?: boolean;
+}
+export interface PdEditContentDataEntry {
+    name: string;
+    val: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,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"}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@progressive-development/pd-content",
+  "version": "0.6.1",
   "description": "Progressive Development content components. ",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.9",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./pd-box-view": "./dist/pd-box-view.js",
@@ -13,6 +14,9 @@
     "./pd-edit-content": "./dist/pd-edit-content.js",
     "./pd-more-info": "./dist/pd-more-info.js",
     "./pd-resize-content": "./dist/pd-resize-content.js",
+    "./pd-tab": "./dist/pd-tab.js",
+    "./pd-panel-viewer": "./dist/pd-panel-viewer.js",
+    "./pd-panel": "./dist/pd-panel.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -24,71 +28,56 @@
     "LICENSE"
   ],
   "scripts": {
-    "analyze": "cem analyze --litelement",
+    "analyze": "cem analyze --litelement --exclude dist,demo",
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.{js,html}\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.{js,html}\" --write --ignore-path .gitignore",
+    "clean": "rm -rf dist",
+    "lint": "eslint --ext .ts,.html src --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch",
+    "check": "npm run lint && npm run build",
+    "prepublishOnly": "npm run clean && npm run check",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-dialog": "^0.5.8",
-    "@progressive-development/pd-icon": "^0.5.0",
-    "@progressive-development/pd-shared-styles": "^0.1.1",
-    "lit": "^2.8.0",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-dialog": "^0.6.0",
+    "@progressive-development/pd-icon": "^0.6.1",
+    "@progressive-development/pd-shared-styles": "^0.2.1",
+    "hammerjs": "^2.0.8",
+    "lit": "^3.3.0",
     "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.4",
+    "@types/hammerjs": "^2.0.46",
+    "@chromatic-com/storybook": "^1.9.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.6.10",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
     "@storybook/blocks": "^8.0.10",
-    "@storybook/test": "^8.0.10",
+    "@storybook/test": "^8.6.14",
     "@storybook/web-components": "^8.0.10",
-    "@storybook/web-components-vite": "^8.0.10",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.10.0",
+    "@storybook/web-components-vite": "^8.6.14",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "rollup-plugin-visualizer": "^5.13.1",
-    "storybook": "^8.0.10",
-    "vite": "^5.4.11",
-    "vitest": "^2.1.8"
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "storybook": "^8.6.14",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.9"
   },
   "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc",
-      "prettier",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  },
   "keywords": [
     "pd",
     "progressive",

package/dist/src/PdBoxView.js

@@ -1,24 +0,0 @@
-import { LitElement, css, html } from "lit";
-class PdBoxView extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: grid;
-          grid-template-columns: repeat(
-            var(--pd-box-columns, 4),
-            minmax(var(--pd-box-min-width, 100px), 1fr)
-          );
-          /*grid-auto-rows: minmax(var(--squi-box-min-height, 100px), 1fr); Für mobile 1 cloum auskommentiert, ging auch für große Ansicht, also eher hinderlich?*/
-          gap: var(--pd-box-gap, 25px);
-        }
-      `
-    ];
-  }
-  render() {
-    return html` <slot></slot> `;
-  }
-}
-export {
-  PdBoxView
-};

package/dist/src/PdCollapse.js

@@ -1,135 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { ICON_TOGGLE_COLLAPSE } from "@progressive-development/pd-icon";
-import "@progressive-development/pd-icon/pd-icon";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdCollapse extends LitElement {
-  static get properties() {
-    return {
-      active: { type: Boolean },
-      icon: { type: String }
-    };
-  }
-  constructor() {
-    super();
-    this.active = false;
-  }
-  static get styles() {
-    return [
-      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;
-        }
-      `
-    ];
-  }
-  open() {
-    this.active = true;
-  }
-  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="${ICON_TOGGLE_COLLAPSE}"
-          ?activeIcon="${this.active}"
-          class="small primary"          
-        ></pd-icon>
-      </div>
-      <div class="content ${this.active ? "open" : "closed"}">
-        <slot name="content"></slot>
-      </div> `;
-  }
-}
-export {
-  PdCollapse
-};

package/dist/src/PdEditContent.js

@@ -1,223 +0,0 @@
-import { html, LitElement, css } from "lit";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-const editIcon = html`<svg
-                    class="edit"
-                    id="Layer_1"
-                    version="1.1"
-                    viewBox="0 0 19 19"
-                    xml:space="preserve"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    >
-                    <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>`;
-class PdEditContent extends LitElement {
-  /**
-   * @event edit-content
-   */
-  static get styles() {
-    return [
-      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-top: 0px;
-         margin-bottom: 2px;
-         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));
-       }
- 
-       /* Temporär? Hier noch sehr aufwendig mit div/span? */
- 
-       .label {
-         display: inline-block;
-         font-weight: bold;
-         width: 200px;
-         padding-top: 10px;
-       }
- 
-       /* Temporär */
-       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-top: 5px;
-          padding-bottom: 5px;
-          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;
-         }
-       }
-     `
-    ];
-  }
-  static get properties() {
-    return {
-      stepNumber: { type: Number },
-      contentTitle: { type: String },
-      data: { type: Array },
-      editLinks: { type: Array },
-      // TODO: [TIM-37] Put together with edit icon/editDisabled
-      editDisabled: { type: Boolean }
-    };
-  }
-  constructor() {
-    super();
-    this.stepNumber = void 0;
-    this.contentTitle = "";
-    this.data = [];
-    this.editLinks = [];
-    this.editDisabled = false;
-  }
-  render() {
-    return html`
-       <div class="header">
-         ${this.stepNumber ? html`
-               <div class="circle">
-                 <span class="step-number">${this.stepNumber}</span>
-               </div>
-             ` : ""}
-         <h4>${this.contentTitle}</h4>
-       </div>
-       <div>
-         ${this.data ? html`
-              <div class="param-data">
-                ${this.data.map(
-      (dataEntry) => html`
-                  <div>
-                    <span class="label">${dataEntry.name}</span>
-                    <span class="value">${dataEntry.val}</span>
-                  </div>
-                `
-    )}
-              </div>` : ""}
-         <slot></slot>
-         <div class="link-row">
-           ${this.editDisabled ? "" : html`
-                 <a @click="${this._editContent}">
-                   <div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
-                 </a>
-               `}
-           ${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.target.dataset;
-    this.dispatchEvent(
-      new CustomEvent("edit-content", {
-        detail: {
-          step: this.stepNumber,
-          link
-        },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-}
-export {
-  PdEditContent
-};