@progressive-development/pd-page 0.5.10 → 0.6.0

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@progressive-development/pd-page",
+  "version": "0.6.0",
   "description": "Progressive development page helper, teaser, menu, footer.",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.10",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./pd-contact-us": "./dist/pd-contact-us.js",
     "./pd-footer": "./dist/pd-footer.js",
     "./pd-menu": "./dist/pd-menu.js",
-    "./pd-teaser": "./dist/pd-teaser.js",
     "./locales/be": "./dist/locales/be.js",
     "./locales/de": "./dist/locales/de.js",
     "./locales/en": "./dist/locales/en.js"
@@ -23,73 +23,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-contact": "^0.5.10",
-    "@progressive-development/pd-dialog": "^0.5.8",
-    "@progressive-development/pd-forms": "^0.5.7",
-    "@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-contact": "^0.6.1",
+    "@progressive-development/pd-dialog": "^0.6.0",
+    "@progressive-development/pd-forms": "^0.6.0",
+    "@progressive-development/pd-icon": "^0.6.1",
+    "@progressive-development/pd-shared-styles": "^0.2.1",
+    "lit": "^3.3.0",
     "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.4",
+    "@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/pd-teaser.js

@@ -1,8 +0,0 @@
-import { PdTeaser } from "./src/PdTeaser.js";
-import { PdTeaserContent } from "./src/PdTeaserContent.js";
-if (!customElements.get("pd-teaser")) {
-  window.customElements.define("pd-teaser", PdTeaser);
-}
-if (!customElements.get("pd-teaser-content")) {
-  window.customElements.define("pd-teaser-content", PdTeaserContent);
-}

package/dist/src/PdContactUs.js

@@ -1,204 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { updateWhenLocaleChanges, msg } from "@lit/localize";
-import "@progressive-development/pd-forms/pd-button";
-import "@progressive-development/pd-forms/pd-form-container";
-import "@progressive-development/pd-forms/pd-form-row";
-import "@progressive-development/pd-forms/pd-input";
-import "@progressive-development/pd-forms/pd-input-area";
-import "@progressive-development/pd-contact/pd-contact";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdContactUs extends LitElement {
-  /**
-   * Fired when free date clicked => At the moment only for freeDates
-   * @event send-contact-request
-   */
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-      :host {                     
-
-        display: flex;
-        flex-flow: row;
-        background-color: var(--pd-contactus-bg-col, var(--pd-default-col));
-
-        background-image: var(--pd-contactus-bg-image);
-        background-repeat: no-repeat;
-
-        min-height: 500px; /* Temporär hier... */
-        width: 100%;
-      }
-
-      h2 {
-        font-family: var(--pd-default-font-title-family);
-        font-style: normal;
-        color: var(--pd-contactus-font-col, var(--pd-default-bg-col));
-        margin-top: 1.4em;
-        margin-bottom: 2.5rem;
-        font-size: var(--pd-contactus-font-h2-size, 2.5rem);
-      }
-
-      .content-block {
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        align-items: left;
-        justify-content: flex-start;
-        flex-grow: 1;
-        max-width: 1170px;
-        margin: 0 auto;
-        text-align: left;
-        padding-left: 30px;
-      }
-
-      .contact-block {
-        display: flex;
-        flex-wrap: wrap;
-        padding-bottom: 50px;
-      }
-
-      .left-content {
-        width: 35%;
-        min-width: 230px;
-      }
-
-      .right-content {
-        width: 65%;
-      }
-
-      .company-contact {
-        --app-font-content-col: var(--pd-contactus-font-col, var(--pd-default-bg-col));;
-        --app-font-title-col: var(--pd-contactus-font-col, var(--pd-default-bg-col));;
-      }
-
-      /* Size Elements for small width */
-      @media (max-width: 440px) {
-        .item {
-          display: none;
-        }
-        ul {
-          justify-content: left;
-        }
-      }
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      contact: { type: Object }
-    };
-  }
-  constructor() {
-    super();
-    updateWhenLocaleChanges(this);
-    this.contact = {};
-  }
-  render() {
-    return html`
-      <div class="content-block">
-        <h2>${msg("Kontakt", { id: "pd.contactus.title" })}</h2>
-        <div class="contact-block">
-          <div class="left-content">
-            <pd-contact
-              class="company-contact"
-              .contact="${this.contact}"
-              addressTitle="${msg("Adresse", { id: "pd.contactus.address.title" })}"
-              summary
-            ></pd-contact>
-          </div>
-
-          <div class="right-content">
-            <pd-form-container id="contactFormId">
-              <pd-form-row>
-                <pd-input
-                  id="nameInputId"
-                  class="quarter3"
-                  placeHolder="${msg("Name", { id: "pd.contactus.address.name" })}"
-                  valueName="name"
-                  autoCompleteName="full-name"
-                  required
-                ></pd-input>
-              </pd-form-row>
-
-              <pd-form-row>
-                <pd-input
-                  id="mailInputId"
-                  class="quarter3"
-                  placeHolder="${msg("Email", { id: "pd.contactus.address.email" })}"
-                  valueName="mail"
-                  autoCompleteName="email"                  
-                  name="email"
-                  field-type="mail"
-                  required
-                ></pd-input>
-              </pd-form-row>
-
-              <pd-form-row>
-                <pd-input
-                  id="phoneInputId"
-                  class="quarter3"
-                  placeHolder="${msg("Telefon", { id: "pd.contactus.address.phone" })}"
-                  valueName="phone"
-                  field-type="phone"
-                  autoCompleteName="tel"
-                  required
-                ></pd-input>
-              </pd-form-row>
-
-              <pd-form-row>
-                <pd-input-area
-                  id="msgInputId"
-                  class="quarter3-area"
-                  placeHolder="${msg("Nachricht", { id: "pd.contactus.address.message" })}"
-                  rows="15"
-                  required
-                  valueName="msg"
-                ></pd-input-area>
-              </pd-form-row>
-
-              <pd-form-row>
-                <pd-button class="quarter3" text="${msg("Absenden", { id: "pd.contactus.address.send" })}" @click="${this._sendMail}" primary></pd-button>
-              </pd-form-row>
-
-            </pd-form-container>            
-            
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  clear() {
-    this.shadowRoot.getElementById("nameInputId").clear();
-    this.shadowRoot.getElementById("mailInputId").clear();
-    this.shadowRoot.getElementById("phoneInputId").clear();
-    this.shadowRoot.getElementById("msgInputId").clear();
-  }
-  _sendMail() {
-    const detail = {
-      errorMap: /* @__PURE__ */ new Map()
-    };
-    const curentStepEl = this.shadowRoot.getElementById("contactFormId");
-    curentStepEl.dispatchEvent(new CustomEvent("validate-form", { detail }));
-    if (detail.errorMap.size === 0) {
-      const name = this.shadowRoot.getElementById("nameInputId").value;
-      const email = this.shadowRoot.getElementById("mailInputId").value;
-      const phone = this.shadowRoot.getElementById("phoneInputId").value;
-      const msg1 = this.shadowRoot.getElementById("msgInputId").value;
-      this.dispatchEvent(
-        new CustomEvent("send-contact-request", {
-          detail: {
-            msgObj: { name, email, phone, msg1 }
-          }
-        })
-      );
-    }
-  }
-}
-export {
-  PdContactUs
-};

package/dist/src/PdFooter.js

@@ -1,140 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdFooter extends LitElement {
-  /**
-   * Fired when footer link clicked.
-   * @event footer-link
-   */
-  static get properties() {
-    return {
-      version: { type: String },
-      copyright: { type: String },
-      madeBy: { type: Object },
-      footerLinks: { type: Array }
-    };
-  }
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-      :host {
-        display: flex;
-        flex-flow: column;
-        justify-content: end;
-        background-color: var(--pd-footer-bg-col, var(--pd-default-col));
-        width: 100%;
-        white-space: nowrap;
-      }
-
-      .footer-links {
-        display: flex;        
-        align-items: center;
-        justify-content: right;
-        height: 100%;
-        color: var(--pd-footer-font-col, var(--pd-default-bg-col));
-        font-family: var(--pd-footer-font-family, var(--pd-default-font-link-family));
-        font-size: var(--pd-footer-font-size, 1.1em);
-      }
-
-      .footer-links ul {        
-        display: flex;          
-        flex-wrap: wrap;         
-        list-style: none;
-        gap: 2em;
-        margin: 0px;        
-        padding: 2em 2.5em 2em 2.5em;        
-      }
-
-      .footer-links li {        
-        cursor: pointer;        
-      }
-
-      .footer-links li:hover {        
-        color: var(--pd-default-hover-col);
-      }
-
-      .bottom-line {
-        background-color: var(--pd-footer-bottom-col, var(--pd-default-light-col));
-        font-size: var(--pd-footer-bottom-font-size, 0.9em);
-        color: var(--pd-footer-bottom-font-col, var(--pd-default-dark-col));
-        padding: 0.5em;
-        display: flex;
-        gap: 1em;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .copyright {
-        font-weight: bold;
-      }
-
-      .version {
-        font-weight: normal;
-      }
-
-      .madeBy {
-        cursor: pointer;
-        font-style: italic;
-      }
-
-      .madeBy:hover {
-        color: var(--pd-default-col);
-      }
-    `
-    ];
-  }
-  constructor() {
-    super();
-    this.footerLinks = [];
-    this._mailTo = "info@progressive-development.com";
-  }
-  firstUpdated() {
-  }
-  render() {
-    return html`
-      
-        <div class="footer-links">
-            <ul>
-            ${this.footerLinks.map((link) => html`
-              <li class="item">
-                <a @click="${this._footerLinkClicked}" data-link="${link.key}">${link.name}</a>
-              </li>
-            `)}
-            </ul>
-        </div>
-        <div class="bottom-line">
-          <div>
-            ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : ""}          
-            ${this.version ? html`<span class="version">${this.version}</span>` : ""}
-          </div>
-          ${this.madeBy ? html`<span class="madeBy" @click="${this._clickMadeby}">${this.madeBy.txt}</span>` : ""}
-        </div>
-      `;
-  }
-  _clickMadeby() {
-    if (this.madeBy.email) {
-      window.location.href = `mailto:${this.madeBy.email}`;
-    } else if (this.madeBy.link) {
-      window.open(this.madeBy.link, "_blank");
-    }
-  }
-  _footerLinkClicked(e) {
-    const linkKey = e.target.dataset.link;
-    this.dispatchEvent(
-      new CustomEvent("footer-link", {
-        detail: {
-          linkObj: this.footerLinks.filter((fl) => fl.key === linkKey)[0]
-        }
-      })
-    );
-  }
-}
-export {
-  PdFooter
-};