@progressive-development/pd-page 0.1.127 → 0.5.0

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

@@ -1,26 +1,15 @@
+import { LitElement, css, html } from "lit";
+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 '@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 PdTeaser extends LitElement {
+class PdTeaser extends LitElement {
   /**
    * Fired when free date clicked => At the moment only for freeDates
    * @event close-teaser
    */
-
   static get styles() {
     return [
       PDColorStyles,
@@ -156,9 +145,9 @@ export class PdTeaser extends LitElement {
         }      
       }
       
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
       teaserObjects: { type: Array },
@@ -166,35 +155,28 @@ export class PdTeaser extends LitElement {
       _hideContent: { type: Boolean },
       _currentNumber: { type: Number },
       _slideDirection: { type: String },
-      _visible: { type: Boolean },
+      _visible: { type: Boolean }
     };
   }
-
   constructor() {
     super();
     this.teaserObjects = [];
-    this.resizeWidth = '1232px';
+    this.resizeWidth = "1232px";
     this._hideContent = false;
     this._currentNumber = 0;
-
-    this._slideDirection = 'slide-rigth';
+    this._slideDirection = "slide-rigth";
     this._visible = true;
   }
-
   firstUpdated() {
-    // dummy um content zu wechseln
-    // window.setTimeout(() => this._nextContent(), 6000);
-
-    const doSomething = scrollPos => {
+    const doSomething = (scrollPos) => {
       if (scrollPos <= 50) {
         this._visible = true;
       } else {
         this._visible = false;
       }
     };
-
     let ticking = false;
-    document.addEventListener('scroll', () => {
+    document.addEventListener("scroll", () => {
       const lastKnownScrollPosition = window.scrollY;
       if (!ticking) {
         window.requestAnimationFrame(() => {
@@ -205,26 +187,21 @@ export class PdTeaser extends LitElement {
       }
     });
   }
-
   updated(changedProps) {
-    if (changedProps.has('_visible')) {
-      if (
-        (changedProps.get('_visible') === true && this._visible === false) ||
-        (changedProps.get('_visible') === false && this._visible === true)
-      )
+    if (changedProps.has("_visible")) {
+      if (changedProps.get("_visible") === true && this._visible === false || changedProps.get("_visible") === false && this._visible === true)
         this.dispatchEvent(
-          new CustomEvent('close-teaser', {
+          new CustomEvent("close-teaser", {
             detail: {
-              value: this._visible,
-            },
+              value: this._visible
+            }
           })
         );
     }
   }
-
   render() {
     return html`
-      <div class="teaser-flex ${this._visible ? '' : 'in-active'}">
+      <div class="teaser-flex ${this._visible ? "" : "in-active"}">
         <pd-icon
           icon="previousArrow"
           class="previous"
@@ -237,31 +214,27 @@ export class PdTeaser extends LitElement {
         ></pd-icon>
 
         ${this.teaserObjects.map(
-          (teaserObj, index) => html`
+      (teaserObj, index) => html`
             <div
-              class="content ${this._currentNumber === index
-                ? this._slideDirection
-                : 'not-visible'}"
+              class="content ${this._currentNumber === index ? this._slideDirection : "not-visible"}"
             >
               <slot name="${teaserObj.name}"></slot>
             </div>
           `
-        )}
+    )}
       </div>
     `;
   }
-
   _prevContent() {
-    this._slideDirection = 'slide-left';
+    this._slideDirection = "slide-left";
     if (this._currentNumber === 0) {
       this._currentNumber = this.teaserObjects.length - 1;
     } else {
       this._currentNumber -= 1;
     }
   }
-
   _nextContent() {
-    this._slideDirection = 'slide-rigth';
+    this._slideDirection = "slide-rigth";
     if (this._currentNumber === this.teaserObjects.length - 1) {
       this._currentNumber = 0;
     } else {
@@ -269,3 +242,6 @@ export class PdTeaser extends LitElement {
     }
   }
 }
+export {
+  PdTeaser
+};

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

@@ -1,27 +1,18 @@
+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.
  */
-
-import { LitElement, html, css } from 'lit';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdTeaserContent extends LitElement {
+class PdTeaserContent extends LitElement {
   /**
    * Fired when free date clicked => At the moment only for freeDates
    * @event book-date
    */
-
-  static get styles() {    
+  static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
       :host {
         --my-background: var(--pd-teaser-image);
@@ -190,22 +181,20 @@ export class PdTeaserContent extends LitElement {
           line-height: 1;
         }
       }
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
       primaryTxt: { type: String },
-      secondaryTxt: { type: String },
+      secondaryTxt: { type: String }
     };
   }
-
   constructor() {
     super();
-    this.primaryTxt = '';
-    this.secondaryTxt = '';
+    this.primaryTxt = "";
+    this.secondaryTxt = "";
   }
-
   render() {
     return html`
       <div class="t1">
@@ -217,3 +206,6 @@ export class PdTeaserContent extends LitElement {
     `;
   }
 }
+export {
+  PdTeaserContent
+};

package/package.json

@@ -1,54 +1,71 @@
 {
   "name": "@progressive-development/pd-page",
-  "description": "Progressive development page helper, teaser, menu, footer.",
-  "license": "SEE LICENSE IN LICENSE",
+  "description": "Progressive development page helper, teaser, menu, footer.",  
   "author": "PD Progressive Development",
-  "version": "0.1.127",
-  "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-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"
+  },
+  "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",
+    "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-contact": "^0.1.69",
-    "@progressive-development/pd-dialog": "^0.1.84",
-    "@progressive-development/pd-forms": "^0.2.16",
-    "@progressive-development/pd-icon": "^0.1.23",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-contact": "^0.5.2",
+    "@progressive-development/pd-dialog": "^0.5.0",
+    "@progressive-development/pd-forms": "^0.5.0",
+    "@progressive-development/pd-icon": "^0.5.0",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.8.0",
     "pwa-helpers": "^0.9.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.4",
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@lit/localize-tools": "^0.6.10",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^3.0.0-next.5",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/web-components": "^7.5.3",
-    "@storybook/web-components-vite": "^7.5.3",
-    "@web/dev-server": "^0.1.38",
-    "@web/test-runner": "^0.13.31",
+    "@lit/localize-tools": "^0.7.2",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/test": "^8.0.10",
+    "@storybook/web-components": "^8.0.10",
+    "@storybook/web-components-vite": "^8.0.10",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.5.3"
+    "rollup-plugin-visualizer": "^5.13.1",
+    "storybook": "^8.0.10",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

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,13 +0,0 @@
-/** @type { import('@storybook/web-components-vite').StorybookConfig } */
-const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;

package/.storybook/preview.js

@@ -1,14 +0,0 @@
-/** @type { import('@storybook/web-components').Preview } */
-const preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

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-page.js';
-
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <pd-page .title=${title}>
-          some light-dom
-        </pd-page>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/lit-localize.json

@@ -1,18 +0,0 @@
-{
-    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
-    "sourceLocale": "de",
-    "targetLocales": ["en", "be"],
-    "inputFiles": [
-      "src/**/*.js"
-    ],
-    "output": {
-        "mode": "runtime",
-        "localeCodesModule": "src/generated/locale-codes.js",
-        "outputDir": "src/generated/locale"
-        
-    },
-    "interchange": {
-      "format": "xliff",
-      "xliffDir": "./xliff/"
-    }
-  }

package/pd-contact-us.js

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

package/pd-footer.js

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

package/pd-menu.js

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

package/pd-teaser.js

@@ -1,5 +0,0 @@
-import { PdTeaser } from './src/PdTeaser.js';
-import { PdTeaserContent } from './src/PdTeaserContent.js';
-
-window.customElements.define('pd-teaser', PdTeaser);
-window.customElements.define('pd-teaser-content', PdTeaserContent);

package/src/generated/locale/be.js

@@ -1,20 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      's0830a1e0d2456d9b': `Type uw bericht hier`,
-'sab1114a5f102dedc': `Telefoon Nummer`,
-'sc7dbfe3251f9a8db': `Verzenden`,
-'sd1f44f1a8bc20e67': `Email`,
-'sdd2fffdf86bf5b6e': `Adres`,
-'sef49aec68fd1dc66': `Naam`,
-'sfb4410b48e95fa73': `Contacteer ons`,
-    };
-  

package/src/generated/locale/en.js

@@ -1,20 +0,0 @@
-
-    // Do not modify this file by hand!
-    // Re-generate this file by running lit-localize
-
-    
-    
-
-    /* eslint-disable no-irregular-whitespace */
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-
-    export const templates = {
-      'sfb4410b48e95fa73': `Kontakt`,
-'sdd2fffdf86bf5b6e': `Adresse`,
-'sef49aec68fd1dc66': `Name`,
-'sd1f44f1a8bc20e67': `Email`,
-'sab1114a5f102dedc': `Telefon`,
-'s0830a1e0d2456d9b': `Nachricht`,
-'sc7dbfe3251f9a8db': `Absenden`,
-    };
-  

package/src/generated/locale-codes.js

@@ -1,25 +0,0 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize.
-
-/**
- * The locale code that templates in this source code are written in.
- */
-export const sourceLocale = `de`;
-
-/**
- * The other locale codes that this application is localized into. Sorted
- * lexicographically.
- */
-export const targetLocales = [
-  `be`,
-  `en`,
-];
-
-/**
- * All valid project locale codes. Sorted lexicographically.
- */
-export const allLocales = [
-  `be`,
-  `de`,
-  `en`,
-];