@progressive-development/pd-dialog 0.1.83 → 0.5.0

package/dist/index.js

@@ -0,0 +1,17 @@
+import { PdPopup } from "./src/PdPopup.js";
+import { PdPopupDialog } from "./src/PdPopupDialog.js";
+import { PdSubmitDialog, STATUS_SEND, STATUS_SEND_FAILED, STATUS_SEND_SUCCESS } from "./src/PdSubmitDialog.js";
+import { templates } from "./locales/be.js";
+import { templates as templates2 } from "./locales/de.js";
+import { templates as templates3 } from "./locales/en.js";
+export {
+  PdPopup,
+  PdPopupDialog,
+  PdSubmitDialog,
+  STATUS_SEND,
+  STATUS_SEND_FAILED,
+  STATUS_SEND_SUCCESS,
+  templates as beTemplates,
+  templates2 as deTemplates,
+  templates3 as enTemplates
+};

package/dist/locales/be.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.submit.dialog.closeStay": `Bewerk gegevens`,
+  "pd.submit.dialog.startPage": `Naar startpagina`
+};
+export {
+  templates
+};

package/dist/locales/de.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.submit.dialog.closeStay": `Daten bearbeiten`,
+  "pd.submit.dialog.startPage": `Zur Startseite`
+};
+export {
+  templates
+};

package/dist/locales/en.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.submit.dialog.closeStay": `Edit data`,
+  "pd.submit.dialog.startPage": `Go to homepage`
+};
+export {
+  templates
+};

package/dist/pd-popup-dialog.js

@@ -0,0 +1,4 @@
+import { PdPopupDialog } from "./src/PdPopupDialog.js";
+if (!customElements.get("pd-popup-dialog")) {
+  window.customElements.define("pd-popup-dialog", PdPopupDialog);
+}

package/dist/pd-popup.js

@@ -0,0 +1,4 @@
+import { PdPopup } from "./src/PdPopup.js";
+if (!customElements.get("pd-popup")) {
+  window.customElements.define("pd-popup", PdPopup);
+}

package/dist/pd-submit-dialog.js

@@ -0,0 +1,4 @@
+import { PdSubmitDialog } from "./src/PdSubmitDialog.js";
+if (!customElements.get("pd-submit-dialog")) {
+  window.customElements.define("pd-submit-dialog", PdSubmitDialog);
+}

package/{src → dist/src}/PdPopup.js

@@ -1,24 +1,12 @@
+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.
  */
-
-import { LitElement, html, css } from 'lit';
-import { ICON_CLOSE as CLOSEICON } from '@progressive-development/pd-icon/src/PdIcon.js';
-
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import { PDColorStyles } from '@progressive-development/pd-shared-styles';
-
-
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdPopup extends LitElement {
+class PdPopup extends LitElement {
   static get styles() {
     return [
       PDColorStyles,
@@ -68,9 +56,8 @@ export class PdPopup extends LitElement {
         right: 1.2em;
         top: 1.2em;
       }`
-      ];
+    ];
   }
-
   render() {
     return html`
       <!-- Trigger/Open The Modal -->
@@ -82,7 +69,7 @@ export class PdPopup extends LitElement {
       <div id="modalId" class="modal">
         <!-- Modal content -->
         <div class="modal-content">
-          <pd-icon icon="${CLOSEICON}" class="close-icon"
+          <pd-icon icon="${ICON_CLOSE}" class="close-icon"
             @click="${this._closePopup}"></pd-icon>          
           <div class="modal-content-slot">
             <slot name="content"></slot>
@@ -91,40 +78,35 @@ export class PdPopup extends LitElement {
       </div>
     `;
   }
-
   showPopup() {
     this._activatePopup();
   }
-
   hidePopup() {
     this._closePopup();
   }
-
   _activatePopup() {
-    //    $('.hover_bkgr_fricc').show();
-    const modal = this.shadowRoot.getElementById('modalId');
-    modal.style.display = 'block';
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "block";
   }
-
   _closePopup() {
-    // $('.hover_bkgr_fricc').hide();
-    const modal = this.shadowRoot.getElementById('modalId');
-    modal.style.display = 'none';
-
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "none";
     this.dispatchEvent(
-      new CustomEvent('popup-close', {
+      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";
+    // 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
+};

package/{src → dist/src}/PdPopupDialog.js

@@ -1,28 +1,18 @@
+import { LitElement, css, html } from "lit";
+import "@progressive-development/pd-forms/pd-button";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { LitElement, html, css } from 'lit';
-
-import '@progressive-development/pd-forms/pd-button.js';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdPopupDialog extends LitElement {
+class PdPopupDialog extends LitElement {
   /**
    * @event submit-button-clicked - fired if one of the configured buttons was clicked.
    */
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {
         display: block;
@@ -103,24 +93,22 @@ export class PdPopupDialog extends LitElement {
         align-items: center;
         justify-content: space-around;
       }
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
       type: { type: String },
       title: { type: String },
-      buttons: { type: Array },
+      buttons: { type: Array }
     };
   }
-
   constructor() {
     super();
-    this.type = 'info';
-    this.title = 'Popup Title';
+    this.type = "info";
+    this.title = "Popup Title";
     this.buttons = [];
   }
-
   render() {
     return html`
       <!-- The Modal -->
@@ -136,7 +124,7 @@ export class PdPopupDialog extends LitElement {
           </div>
           <div class="footer">
             ${this.buttons.map(
-              bt => html`
+      (bt) => html`
                 <pd-button
                   data-key="${bt.key}"
                   @button-clicked="${this._handleButtonEvent}"
@@ -145,61 +133,56 @@ export class PdPopupDialog extends LitElement {
                   text="${bt.name}"
                 ></pd-button>
               `
-            )}
+    )}
           </div>
         </div>
       </div>
     `;
   }
-
   _handleButtonEvent(e) {
     this.dispatchEvent(
-      new CustomEvent('submit-button-clicked', {
+      new CustomEvent("submit-button-clicked", {
         detail: {
-          button: e.target.dataset.key,
-        },
+          button: e.target.dataset.key
+        }
       })
     );
   }
-
   _getIconForType() {
     if (!this.type || this.type === "") {
       return "";
     }
     switch (this.type) {
-      case 'warn':
+      case "warn":
         return html`<pd-icon icon="warningIconFld" class="info-logo warn"></pd-icon>`;
-      case 'error':
+      case "error":
         return html`<pd-icon icon="errorIconFld" class="info-logo error"></pd-icon>`;
-      case 'help':
+      case "help":
         return html`<pd-icon icon="helpIconFld" class="info-logo help"></pd-icon>`;
       default:
         return html`<pd-icon icon="infoIconFld" class="info-logo info"></pd-icon>`;
     }
   }
-
   showPopup() {
     this._activatePopup();
   }
-
   _activatePopup() {
-    //    $('.hover_bkgr_fricc').show();
-    const modal = this.shadowRoot.getElementById('modalId');
-    modal.style.display = 'block';
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "block";
   }
-
   _closePopup() {
-    // $('.hover_bkgr_fricc').hide();
-    const modal = this.shadowRoot.getElementById('modalId');
-    modal.style.display = 'none';
+    const modal = this.shadowRoot.getElementById("modalId");
+    modal.style.display = "none";
   }
-
   /*
-  // When the user clicks anywhere outside of the modal, close it
-window.onclick = function(event) {
-  if (event.target == modal) {
-    modal.style.display = "none";
+    // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
   }
+  */
 }
-*/
-}
+export {
+  PdPopupDialog
+};

package/{src → dist/src}/PdSubmitDialog.js

@@ -1,31 +1,19 @@
+import { LitElement, css, html } from "lit";
+import { msg } from "@lit/localize";
+import "@progressive-development/pd-icon/pd-icon";
+import { PDColorStyles } from "@progressive-development/pd-shared-styles";
+import "../pd-popup-dialog.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { LitElement, html, css } from 'lit';
-
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import { PDColorStyles } from '@progressive-development/pd-shared-styles';
-
-import '../pd-popup-dialog.js';
-
-export const STATUS_SEND = 1;
-export const STATUS_SEND_SUCCESS = 2;
-export const STATUS_SEND_FAILED = 3;
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdSubmitDialog extends LitElement {
+const STATUS_SEND = 1;
+const STATUS_SEND_SUCCESS = 2;
+const STATUS_SEND_FAILED = 3;
+class PdSubmitDialog extends LitElement {
   /**
    * @event button-clicked - navigate to start page or close popup (failure case).
    */
-
   static get styles() {
     return [
       PDColorStyles,
@@ -83,60 +71,44 @@ export class PdSubmitDialog extends LitElement {
           transform: rotate(360deg);
         }
       }
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
       title: { type: String },
-      type: { type: String }, // mail, editDate, order (default)
+      type: { type: String },
+      // mail, editDate, order (default)
       status: { type: Number },
       statusMsg: { type: String },
       confirmMail: { type: String },
       progressTxtMap: { type: Object },
-      _buttons: { type: Array },
+      _buttons: { type: Array }
     };
   }
-
   constructor() {
     super();
-    this.title = 'Order Submit Title';
-    this.type = 'order';
+    this.title = "Order Submit Title";
+    this.type = "order";
     this.status = 0;
-    this.statusMsg = '';
-    this.confirmMail = '';
+    this.statusMsg = "";
+    this.confirmMail = "";
     this._buttons = [];
   }
-
   updated(changedProps) {
-    if (changedProps.has('status')) {
+    if (changedProps.has("status")) {
       if (this.status === STATUS_SEND_SUCCESS) {
-        
         this._buttons = [
-          {name: 'Close', key: 2},];
-
-        /*
-        if (this.type === 'mail') {
-          this._buttons = [
-            {name: 'Close Popup'},];
-
-        } else {
-          this._buttons = [
-            {
-              name: 'Terug naar de startpagina',
-              key: 10
-            },];
-        }
-        */
-
+          { name: "Close", key: 2 }
+        ];
       } else if (this.status === STATUS_SEND_FAILED) {
         this._buttons = [];
-        if (this.type === 'mail') {
-          this._buttons = [{ name: 'Close' }];
+        if (this.type === "mail") {
+          this._buttons = [{ name: "Close" }];
         } else {
           this._buttons = [
-            { name: 'Bewerk gegevens', key: 2 },
-            { name: 'Naar startpagina' },
+            { name: msg("Daten bearbeiten", { id: "pd.submit.dialog.closeStay" }), key: 2 },
+            { name: msg("Zur Startseite", { id: "pd.submit.dialog.startPage" }) }
           ];
         }
       } else {
@@ -144,7 +116,6 @@ export class PdSubmitDialog extends LitElement {
       }
     }
   }
-
   render() {
     return html`
       <pd-popup-dialog
@@ -163,7 +134,6 @@ export class PdSubmitDialog extends LitElement {
       </pd-popup-dialog>
     `;
   }
-
   _renderProgressRow() {
     let value;
     switch (this.status) {
@@ -192,19 +162,24 @@ export class PdSubmitDialog extends LitElement {
           <span class="progress-txt">${this.progressTxtMap.get(STATUS_SEND_FAILED)}</span>`;
         break;
       default:
-        console.warn('Unexpected value');
+        console.warn("Unexpected value");
     }
     return value;
   }
-
   _goToStartpage() {
     this.dispatchEvent(
-      new CustomEvent('submit-button-clicked', {
+      new CustomEvent("submit-button-clicked", {
         detail: {
           // TODO: Get index from event
-          button: this._buttons[0].key,
-        },
+          button: this._buttons[0].key
+        }
       })
     );
   }
 }
+export {
+  PdSubmitDialog,
+  STATUS_SEND,
+  STATUS_SEND_FAILED,
+  STATUS_SEND_SUCCESS
+};

package/package.json

@@ -1,46 +1,73 @@
 {
-  "name": "@progressive-development/pd-dialog",
-  "description": "Progressive Development dialog components.",
-  "license": "SEE LICENSE IN LICENSE",
+   "name": "@progressive-development/pd-dialog",
+  "description": "Progressive Development dialog components.",  
   "author": "PD Progressive Development",
-  "version": "0.1.83",
-  "main": "index.js",
-  "module": "index.js",
+  "license": "SEE LICENSE IN LICENSE",
+  "version": "0.5.0",
+  "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": "web-dev-server",
-    "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "test": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch",
-    "storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
-    "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
+    "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": {
-    "@progressive-development/pd-forms": "^0.2.15",
-    "@progressive-development/pd-icon": "^0.1.22",
-    "@progressive-development/pd-price": "^0.1.10",
+  "dependencies": {    
+    "@progressive-development/pd-forms": "^0.5.0",
+    "@progressive-development/pd-icon": "^0.5.0",
+    "@progressive-development/pd-price": "^0.5.0",
     "@progressive-development/pd-shared-styles": "0.1.1",
-    "lit": "^2.2.0"
+    "@lit/localize": "^0.12.2",
+    "lit": "^2.8.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "next",
-    "@web/dev-server": "^0.1.30",
-    "@web/dev-server-storybook": "next",
-    "@web/test-runner": "^0.13.27",
+    "@lit/localize-tools": "^0.7.2",
+    "@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.4.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.5.1"
+    "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"
+      "prettier",
+      "plugin:storybook/recommended"
     ]
   },
   "prettier": {

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../pd-dialog.js';
-
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <pd-dialog .title=${title}>
-          some light-dom
-        </pd-dialog>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/index.js

@@ -1 +0,0 @@
-

package/pd-book-date-popup.js

@@ -1,5 +0,0 @@
-import { PdBookDatePopup } from './src/PdBookDatePopup.js';
-
-window.customElements.define('pd-book-date-popup', PdBookDatePopup);
-
-export { PdBookDatePopup };

package/pd-popup-dialog.js

@@ -1,5 +0,0 @@
-import { PdPopupDialog } from './src/PdPopupDialog.js';
-
-window.customElements.define('pd-popup-dialog', PdPopupDialog);
-
-export { PdPopupDialog };

package/pd-popup.js

@@ -1,3 +0,0 @@
-import { PdPopup } from './src/PdPopup.js';
-
-window.customElements.define('pd-popup', PdPopup);

package/pd-submit-dialog.js

@@ -1,5 +0,0 @@
-import { PdSubmitDialog, STATUS_SEND, STATUS_SEND_FAILED, STATUS_SEND_SUCCESS} from './src/PdSubmitDialog.js';
-
-window.customElements.define('pd-submit-dialog', PdSubmitDialog);
-
-export { PdSubmitDialog, STATUS_SEND, STATUS_SEND_FAILED, STATUS_SEND_SUCCESS };

package/src/PdBookDatePopup.js

@@ -1,92 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit';
-
-import '@progressive-development/pd-price/pd-price.js';
-
-import { PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-import '../pd-popup-dialog.js';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdBookDatePopup extends LitElement {
-  /**
-   * @event date-approval - fired if date approved
-   */
-
-  /**
-   * @event close-popup - fired if date canceled
-   */
-
-  static get styles() {
-    return [
-      PDFontStyles,
-      css`
-      p {
-          color: var(--pd-default-font-content-col);
-          font-size: var(--pd-default-font-content-size);
-          font-family: var(--pd-default-font-content-family);
-          max-width: 600px;
-      }
-    `];
-  }
-
-  static get properties() {
-    return {
-      date: { type: String },
-      price: { type: Number },
-    };
-  }
-
-  constructor() {
-    super();
-    this.date = '';
-    this.price = 0;
-    this._buttons = [
-      { name: 'Akkoord', key: 1 },
-      { name: 'Cancel', key: 2 },
-    ];
-  }
-
-  render() {
-    return html`
-      <pd-popup-dialog
-        class="popup-dialog"
-        title="Akkoord datum"
-        .buttons="${this._buttons}"
-        @submit-button-clicked="${this._buttonClicked}"
-      >
-        <div slot="content">
-          <p><b>Datum van herstelling: </b>${this.date}</p>
-          <p>
-            Als uw woning ouder is dan 10 jaar, hebt U als particulier recht op
-            een verlaagd BTW-tarief van 6%, na het eenmalig invullen van een
-            BTW-attest. Anders geldt het normale tarief van 21%.
-          </p>
-          <pd-price
-            nettoPrice="${this.price}"
-            .taxArray="${[0.06, 0.21]}"
-          ></pd-price>
-        </div>
-      </pd-popup-dialog>
-    `;
-  }
-
-  _buttonClicked(e) {
-    let eventName;
-    if (e.detail.button === '1') {
-      eventName = 'date-approval';
-    } else {
-      eventName = 'close-popup';
-    }
-    this.dispatchEvent(new CustomEvent(eventName));
-  }
-}

package/stories/index.stories.js

@@ -1,16 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'PdDialog',
-  component: 'pd-dialog',
-  argTypes: {    
-  },
-};
-
-function Template() {
-  return html`
-    <p>ToDo: Summary</p>
-  `;
-}
-
-export const Examples = Template.bind({});

package/stories/popup-dialog.stories.js

@@ -1,47 +0,0 @@
-import { html } from 'lit';
-import '../pd-popup-dialog.js';
-
-export default {
-  title: 'PdDialog/Popup Dialog',
-  component: 'pd-popup-dialog',
-  argTypes: {},
-};
-
-function PopupTemplate({type}) {
-  return html`
-    <h1>Dialog Test</h1>
-    <button>Ok</button>
-    <pd-popup-dialog title="Title Information" type="${type}">
-      <div slot="content">
-        <p>
-          Tank you for your order. And another prima text here. Maybe more than
-          one line.
-        </p>
-      </div>
-    </pd-popup-dialog>
-  `;
-}
-
-export const PopupDialog = PopupTemplate.bind({});
-PopupDialog.args = {  
-};
-
-export const PopupInfoDialog = PopupTemplate.bind({});
-PopupInfoDialog.args = {
-  type: "info",
-};
-
-export const PopupHelpDialog = PopupTemplate.bind({});
-PopupHelpDialog.args = {
-  type: "help",
-};
-
-export const PopupWarnDialog = PopupTemplate.bind({});
-PopupWarnDialog.args = {
-  type: "warn",
-};
-
-export const PopupErrorDialog = PopupTemplate.bind({});
-PopupErrorDialog.args = {
-  type: "error",
-};

package/stories/popup.stories.js

@@ -1,34 +0,0 @@
-import { html } from 'lit';
-import '../pd-popup.js';
-
-export default {
-  title: 'PdDialog/Popup',
-  component: 'pd-popup',
-  argTypes: {},
-};
-
-function PopupTemplate() {
-  return html`
-
-  <style>
-  .image-div {    
-    background-image: url('https://mobimg.b-cdn.net/v3/fetch/4a/4a6da09ed52fc9f8f0a98dceba2d5fc2.jpeg');    
-    width: 100vw;
-    height: 100vh;
-  }
-  </style>
-  <div class="image-div">
-    <pd-popup>
-      <div slot="small-view">Open Popup</div>
-      <div slot="content">
-        <h2>Test PopUp Content</h2>
-        <p>Hier steht dann etwas....</p>
-      </div>
-    </pd-popup>
-
-    </div>
-  `;
-}
-
-export const Popup = PopupTemplate.bind({});
-Popup.args = {};

package/stories/submit-dialog.stories.js

@@ -1,90 +0,0 @@
-import { html } from 'lit';
-import {
-  PdSubmitDialog,
-  STATUS_SEND,
-  STATUS_SEND_FAILED,
-  STATUS_SEND_SUCCESS,
-} from '../pd-submit-dialog.js';
-
-export default {
-  title: 'PdDialog/Submit Dialog',
-  component: 'pd-submit-dialog',
-  argTypes: {},
-};
-
-const STATUS_TXT_MAP = new Map();
-STATUS_TXT_MAP.set(STATUS_SEND, "Text for status send");
-STATUS_TXT_MAP.set(STATUS_SEND_SUCCESS, "Text for status send success");
-STATUS_TXT_MAP.set(STATUS_SEND_FAILED, "Text for status send failed");
-
-function PopupTemplate({ status, statusMsg, progressTxtMapParam }) {
-  return html`
-    <pd-submit-dialog
-      title="Service informatie"
-      status="${status}"
-      confirmMail="myemail@web.de"
-      statusMsg="${statusMsg}"
-      .progressTxtMap="${progressTxtMapParam}"
-    >
-    <p slot="submit-content">
-      Hier steht dann etwas spezifisches.
-    </p>
-    </pd-submit-dialog>
-  `;
-}
-
-function PopupTemplatePr({ status, statusMsg, progressTxtMapParam }) {
-    
-  const popupEl = new PdSubmitDialog();
-  popupEl.title = "Test Dialog Title"
-  popupEl.status = status;
-  popupEl.statusMsg = statusMsg;
-  popupEl.confirmMail = "test@progressive-development.com";
-  popupEl.progressTxtMap = progressTxtMapParam;
-
-  const slotElement = document.createElement("p");
-  slotElement.setAttribute("slot", "submit-content")  
-  slotElement.innerHTML = `Bedankt voor uw e-mail. Deze wordt nu verzonden. Je ontvangt reactie op uw mail per e-mail naar <em>${popupEl.confirmMail}</em>.`;
-  popupEl.appendChild(slotElement);  
-  
-  // popupEl.type = 'mail';
-
-  popupEl.addEventListener('submit-button-clicked', () => {
-    this.shadowRoot.removeChild(popupEl);
-    this.shadowRoot.getElementById('contactUsId').clear();
-  });
-
-  return popupEl;
-}
-  
-
-      
-
-export const SubmitDialogSend = PopupTemplate.bind({});
-SubmitDialogSend.args = {
-  status: STATUS_SEND,
-  statusMsg: '',
-  progressTxtMapParam: STATUS_TXT_MAP,
-};
-
-export const SubmitDialogSuccess = PopupTemplate.bind({});
-SubmitDialogSuccess.args = {
-  status: STATUS_SEND_SUCCESS,
-  statusMsg: '',
-  progressTxtMapParam: STATUS_TXT_MAP,
-};
-
-export const SubmitDialogFailed = PopupTemplate.bind({});
-SubmitDialogFailed.args = {
-  status: STATUS_SEND_FAILED,
-  statusMsg:
-    'Sorry, there was a technical failure during order post. The order was not submitted, please try again later or contact us directly.',
-  progressTxtMapParam: STATUS_TXT_MAP,
-};
-
-export const SubmitDialogSendPr = PopupTemplatePr.bind({});
-SubmitDialogSendPr.args = {
-  status: STATUS_SEND,
-  statusMsg: '',
-  progressTxtMapParam: STATUS_TXT_MAP,
-};

package/test/pd-dialog.test.js

@@ -1,32 +0,0 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-
-import '../pd-dialog.js';
-
-describe('PdDialog', () => {
-  it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture(html`<pd-dialog></pd-dialog>`);
-
-    expect(el.title).to.equal('Hey there');
-    expect(el.counter).to.equal(5);
-  });
-
-  it('increases the counter on button click', async () => {
-    const el = await fixture(html`<pd-dialog></pd-dialog>`);
-    el.shadowRoot.querySelector('button').click();
-
-    expect(el.counter).to.equal(6);
-  });
-
-  it('can override the title via attribute', async () => {
-    const el = await fixture(html`<pd-dialog title="attribute title"></pd-dialog>`);
-
-    expect(el.title).to.equal('attribute title');
-  });
-
-  it('passes the a11y audit', async () => {
-    const el = await fixture(html`<pd-dialog></pd-dialog>`);
-
-    await expect(el).shadowDom.to.be.accessible();
-  });
-});

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});