@progressive-development/pd-dialog 0.5.8 → 0.6.1

package/dist/pd-submit-dialog.js

@@ -1,4 +1,202 @@
-import { PdSubmitDialog } from "./src/PdSubmitDialog.js";
-if (!customElements.get("pd-submit-dialog")) {
-  window.customElements.define("pd-submit-dialog", PdSubmitDialog);
-}
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { msg } from "@lit/localize";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdColorStyles } from "@progressive-development/pd-shared-styles";
+import { PdSubmitDialogStatus } from "./types.js";
+import "./pd-popup-dialog.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 PdSubmitDialog = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "Order Submit Title";
+    this.type = "order";
+    this.status = 0;
+    this.statusMsg = "";
+    this.confirmMail = "";
+    this.progressTxtMap = /* @__PURE__ */ new Map();
+    this._buttons = [];
+  }
+  updated(changedProps) {
+    if (changedProps.has("status")) {
+      this._updateButtonsBasedOnStatus();
+    }
+  }
+  _updateButtonsBasedOnStatus() {
+    if (this.status === PdSubmitDialogStatus.SUCCESS) {
+      this._buttons = [{ name: "Close", key: 2 }];
+    } else if (this.status === PdSubmitDialogStatus.FAILED) {
+      if (this.type === "mail") {
+        this._buttons = [{ name: "Close", key: 2 }];
+      } else {
+        this._buttons = [
+          {
+            name: msg("Daten bearbeiten", { id: "pd.submit.dialog.closeStay" }),
+            key: 2
+          },
+          {
+            name: msg("Zur Startseite", { id: "pd.submit.dialog.startPage" }),
+            key: 1
+          }
+        ];
+      }
+    } else {
+      this._buttons = [];
+    }
+  }
+  render() {
+    return html`
+      <pd-popup-dialog
+        class="popup-dialog"
+        .title=${this.title}
+        .buttons=${this._buttons}
+        @submit-button-clicked=${this._goToStartpage}
+      >
+        <div slot="content">
+          <slot name="submit-content"></slot>
+          <div class="progress-container">
+            <div class="progress-row">${this._renderProgressRow()}</div>
+          </div>
+          <p>${this.statusMsg}</p>
+        </div>
+      </pd-popup-dialog>
+    `;
+  }
+  _renderProgressRow() {
+    switch (this.status) {
+      case PdSubmitDialogStatus.SEND:
+        return html`
+          <div class="first-row-tmp"><div class="loader"></div></div>
+          <span class="progress-txt"
+            >${this.progressTxtMap.get(PdSubmitDialogStatus.SEND)}</span
+          >
+        `;
+      case PdSubmitDialogStatus.SUCCESS:
+        return html`
+          <div class="first-row-tmp">
+            <pd-icon class="success-icon" icon="checkBox" activeIcon></pd-icon>
+          </div>
+          <span class="progress-txt"
+            >${this.progressTxtMap.get(PdSubmitDialogStatus.SUCCESS)}</span
+          >
+        `;
+      case PdSubmitDialogStatus.FAILED:
+        return html`
+          <div class="first-row-tmp">
+            <pd-icon class="error-icon" icon="checkBox"></pd-icon>
+          </div>
+          <span class="progress-txt"
+            >${this.progressTxtMap.get(PdSubmitDialogStatus.FAILED)}</span
+          >
+        `;
+      default:
+        console.warn("Unexpected status:", this.status);
+        return "";
+    }
+  }
+  _goToStartpage(e) {
+    var _a, _b;
+    const clickedKey = ((_a = e.detail) == null ? void 0 : _a.button) ?? ((_b = this._buttons[0]) == null ? void 0 : _b.key) ?? 0;
+    this.dispatchEvent(
+      new CustomEvent("submit-button-clicked", {
+        detail: { button: clickedKey },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+PdSubmitDialog.styles = [
+  PdColorStyles,
+  css`
+      :host {
+        display: block;
+      }
+
+      .progress-container {
+        padding: 20px;
+      }
+
+      .progress-row {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+      }
+
+      .first-row-tmp {
+        width: 80px;
+        height: 40px;
+      }
+
+      .loader {
+        border: 16px solid var(--pd-default-disabled-light-col);
+        border-top: 16px solid var(--pd-default-col);
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        animation: spin 2s linear infinite;
+      }
+
+      .success-icon {
+        padding-top: 5px;
+        --pd-icon-col-active: var(--pd-default-success-light-col);
+        --pd-icon-stroke-col-active: var(--pd-default-success-col);
+      }
+
+      .error-icon {
+        padding-top: 5px;
+        --pd-icon-col: var(--pd-default-error-light-col);
+        --pd-icon-stroke-col: var(--pd-default-error-col);
+      }
+
+      .progress-txt {
+        font-size: 1em;
+        color: var(--pd-default-dark-col);
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], PdSubmitDialog.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], PdSubmitDialog.prototype, "type", 2);
+__decorateClass([
+  property({ type: Number })
+], PdSubmitDialog.prototype, "status", 2);
+__decorateClass([
+  property({ type: String })
+], PdSubmitDialog.prototype, "statusMsg", 2);
+__decorateClass([
+  property({ type: String })
+], PdSubmitDialog.prototype, "confirmMail", 2);
+__decorateClass([
+  property({ type: Object })
+], PdSubmitDialog.prototype, "progressTxtMap", 2);
+__decorateClass([
+  state()
+], PdSubmitDialog.prototype, "_buttons", 2);
+PdSubmitDialog = __decorateClass([
+  customElement("pd-submit-dialog")
+], PdSubmitDialog);
+export {
+  PdSubmitDialog
+};

package/dist/stories/pd-popup-dialog.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    render: ({ title, type, buttons }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        title: {
+            control: "text";
+        };
+        type: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Info: Story;
+export declare const Error: Story;
+export declare const Warn: Story;
+//# sourceMappingURL=pd-popup-dialog.stories.d.ts.map

package/dist/stories/pd-popup-dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-popup-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-popup-dialog.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,OAAO,uBAAuB,CAAC;AAE/B,QAAA,MAAM,IAAI;;;;;;;;;;;;CAcM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAOtB,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}

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

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    component: string;
+    render: ({ smallViewSlot, contentSlot }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        smallViewSlot: {
+            control: "text";
+            description: string;
+            defaultValue: string;
+        };
+        contentSlot: {
+            control: "text";
+            description: string;
+            defaultValue: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const DefaultPopup: Story;
+export declare const LongContent: Story;
+export declare const CustomStyledContent: Story;
+//# sourceMappingURL=pd-popup.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-popup.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-popup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,gBAAgB,CAAC;AAGxB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC"}

package/dist/stories/pd-submit-dialog.stories.d.ts

@@ -0,0 +1,33 @@
+import { StoryObj } from '@storybook/web-components';
+import { PdSubmitDialogStatus } from '../types.js';
+declare const meta: {
+    title: string;
+    component: string;
+    render: ({ title, status, statusMsg, confirmMail }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
+    argTypes: {
+        title: {
+            control: "text";
+        };
+        status: {
+            control: "select";
+            options: PdSubmitDialogStatus[];
+            mapping: {
+                SEND: PdSubmitDialogStatus;
+                SUCCESS: PdSubmitDialogStatus;
+                FAILED: PdSubmitDialogStatus;
+            };
+        };
+        statusMsg: {
+            control: "text";
+        };
+        confirmMail: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Send: Story;
+export declare const Success: Story;
+export declare const Failed: Story;
+//# sourceMappingURL=pd-submit-dialog.stories.d.ts.map

package/dist/stories/pd-submit-dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-submit-dialog.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-submit-dialog.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,wBAAwB,CAAC;AAahC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAmCM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Interface für konfigurierbare Buttons im Dialog
+ */
+export interface PdDialogButton {
+    key: string | number;
+    name: string;
+    disabled?: boolean;
+    primary?: boolean;
+}
+/**
+ * Enum für mögliche Statuswerte im SubmitDialog.
+ */
+export declare enum PdSubmitDialogStatus {
+    SEND = 1,
+    SUCCESS = 2,
+    FAILED = 3
+}
+/**
+ * Interface für die Properties des SubmitDialogs.
+ */
+export interface PdSubmitDialogProps {
+    title: string;
+    type?: "order" | "mail" | string;
+    status: PdSubmitDialogStatus;
+    statusMsg?: string;
+    confirmMail?: string;
+    progressTxtMap?: Map<PdSubmitDialogStatus, 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;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,oBAAY,oBAAoB;IAC9B,IAAI,IAAI;IACR,OAAO,IAAI;IACX,MAAM,IAAI;CACX;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;CACpD"}

package/dist/types.js

@@ -0,0 +1,9 @@
+var PdSubmitDialogStatus = /* @__PURE__ */ ((PdSubmitDialogStatus2) => {
+  PdSubmitDialogStatus2[PdSubmitDialogStatus2["SEND"] = 1] = "SEND";
+  PdSubmitDialogStatus2[PdSubmitDialogStatus2["SUCCESS"] = 2] = "SUCCESS";
+  PdSubmitDialogStatus2[PdSubmitDialogStatus2["FAILED"] = 3] = "FAILED";
+  return PdSubmitDialogStatus2;
+})(PdSubmitDialogStatus || {});
+export {
+  PdSubmitDialogStatus
+};

package/package.json

@@ -1,97 +1,83 @@
 {
-   "name": "@progressive-development/pd-dialog",
-   "description": "Progressive Development dialog components.",
-   "author": "PD Progressive Development",
-   "license": "SEE LICENSE IN LICENSE",
-   "version": "0.5.8",
-   "main": "./dist/index.js",
-   "module": "./dist/index.js",
-   "exports": {
-      ".": "./dist/index.js",
-      "./pd-popup-dialog": "./dist/pd-popup-dialog.js",
-      "./pd-popup": "./dist/pd-popup.js",
-      "./pd-submit-dialog": "./dist/pd-submit-dialog.js",
-      "./locales/be": "./dist/locales/be.js",
-      "./locales/de": "./dist/locales/de.js",
-      "./locales/en": "./dist/locales/en.js"
-   },
-   "files": [
-      "dist/",
-      "package.json",
-      "README.md",
-      "LICENSE"
-   ],
-   "scripts": {
-      "analyze": "cem analyze --litelement",
-      "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",
-      "test": "vitest run --coverage",
-      "test:watch": "vitest --watch",
-      "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-forms": "^0.5.7",
-      "@progressive-development/pd-icon": "^0.5.0",
-      "@progressive-development/pd-price": "^0.5.1",
-      "@progressive-development/pd-shared-styles": "0.1.1",
-      "lit": "^2.8.0"
-   },
-   "devDependencies": {
-      "@custom-elements-manifest/analyzer": "^0.4.17",
-      "@lit/localize-tools": "^0.6.10",
-      "@storybook/addon-essentials": "^7.6.20",
-      "@storybook/addon-links": "^7.6.20",
-      "@storybook/blocks": "^7.5.3",
-      "@storybook/web-components": "^7.5.3",
-      "@storybook/web-components-vite": "^7.6.20",
-      "eslint": "^7.32.0",
-      "eslint-config-prettier": "^8.10.0",
-      "eslint-plugin-storybook": "^0.6.15",
-      "husky": "^4.3.8",
-      "lint-staged": "^10.5.4",
-      "prettier": "^2.8.8",
-      "rollup-plugin-visualizer": "^5.13.1",
-      "storybook": "^7.6.20",
-      "vite": "^5.4.11",
-      "vitest": "^2.1.8"
-   },
-   "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",
-      "development",
-      "dialog",
-      "popup",
-      "submit",
-      "send"
-   ]
+  "name": "@progressive-development/pd-dialog",
+  "version": "0.6.1",
+  "description": "Progressive Development dialog components.",
+  "author": "PD Progressive Development",
+  "license": "SEE LICENSE IN LICENSE",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./pd-popup-dialog": "./dist/pd-popup-dialog.js",
+    "./pd-popup": "./dist/pd-popup.js",
+    "./pd-submit-dialog": "./dist/pd-submit-dialog.js",
+    "./locales/be": "./dist/locales/be.js",
+    "./locales/de": "./dist/locales/de.js",
+    "./locales/en": "./dist/locales/en.js"
+  },
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement --exclude dist,demo",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "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.12.2",
+    "@progressive-development/pd-forms": "^0.6.3",
+    "@progressive-development/pd-icon": "^0.6.1",
+    "@progressive-development/pd-price": "^0.6.0",
+    "@progressive-development/pd-shared-styles": "^0.2.1",
+    "lit": "^3.3.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@lit/localize-tools": "^0.6.10",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/test": "^8.6.14",
+    "@storybook/web-components": "^8.0.10",
+    "@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",
+    "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",
+  "keywords": [
+    "pd",
+    "progressive",
+    "development",
+    "dialog",
+    "popup",
+    "submit",
+    "send"
+  ]
 }

package/dist/src/PdPopup.js

@@ -1,112 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { ICON_CLOSE } from "@progressive-development/pd-icon";
-import "@progressive-development/pd-icon/pd-icon";
-import { PDColorStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdPopup extends LitElement {
-  static get styles() {
-    return [
-      PDColorStyles,
-      css`
-      :host {
-        display: block;
-      }
-
-      /* The Modal (background) */
-      .modal {
-        position: fixed; /* Stay in place */
-        z-index: 100; /* Sit on top */        
-        left: 0;
-        top: 0;
-        width: 100%; /* Full width */
-        height: 100%; /* Full height */
-        overflow: auto; /* Enable scroll if needed */
-        /* RGBA Wert muss hier verwendet werden #AFC1D2 to rgba for opacity */
-        background-color: var(--pd-popup-modal-bg-rgba, rgba(175, 193, 210, 0.8)); 
-
-        /* specific for PdPopup, abobe also used for PdPopupDialog */
-        display: var(--pd-popup-default-display, none); /* Hidden by default */
-        padding-top: 100px; /* Location of the box */        
-      }
-
-      /* Modal Content */
-      .modal-content {        
-        background-color: var(--pd-default-bg-col);
-        opacity: 1;
-        margin: auto;
-        padding: var(--pd-popup-modal-padding, 20px);
-        padding-bottom: 130px;
-        border: 2px solid var(--pd-default-col);
-        width: 80%;
-        max-width: 1200px;
-        position: relative;
-      }
-
-      .modal-content-slot {
-        max-width: var(--pd-popup-modal-slot-max-width, 1000px);
-        margin: var(--pd-popup-modal-slot-margin, 0 30px);
-      }
-
-      .close-icon {        
-        position: absolute;        
-        cursor: pointer;
-        right: 1.2em;
-        top: 1.2em;
-      }`
-    ];
-  }
-  render() {
-    return html`
-      <!-- Trigger/Open The Modal -->
-      <span @click="${this._activatePopup}" @keypress="${this._activatePopup}"
-        ><slot name="small-view"></slot
-      ></span>
-
-      <!-- The Modal -->
-      <div id="modalId" class="modal">
-        <!-- Modal content -->
-        <div class="modal-content">
-          <pd-icon icon="${ICON_CLOSE}" class="close-icon"
-            @click="${this._closePopup}"></pd-icon>          
-          <div class="modal-content-slot">
-            <slot name="content"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  showPopup() {
-    this._activatePopup();
-  }
-  hidePopup() {
-    this._closePopup();
-  }
-  _activatePopup() {
-    const modal = this.shadowRoot.getElementById("modalId");
-    modal.style.display = "block";
-  }
-  _closePopup() {
-    const modal = this.shadowRoot.getElementById("modalId");
-    modal.style.display = "none";
-    this.dispatchEvent(
-      new CustomEvent("popup-close", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  /*
-    // When the user clicks anywhere outside of the modal, close it
-  window.onclick = function(event) {
-    if (event.target == modal) {
-      modal.style.display = "none";
-    }
-  }
-  */
-}
-export {
-  PdPopup
-};