@progressive-development/pd-content 0.1.83 → 0.5.1

package/dist/index.js

@@ -0,0 +1,18 @@
+import { PdBoxView } from "./src/PdBoxView.js";
+import { PdCollapse } from "./src/PdCollapse.js";
+import { PdEditContent } from "./src/PdEditContent.js";
+import { PdMoreInfo } from "./src/PdMoreInfo.js";
+import { PdResizeContent } from "./src/PdResizeContent.js";
+import { templates } from "./locales/be.js";
+import { templates as templates2 } from "./locales/de.js";
+import { templates as templates3 } from "./locales/en.js";
+export {
+  PdBoxView,
+  PdCollapse,
+  PdEditContent,
+  PdMoreInfo,
+  PdResizeContent,
+  templates as beTemplates,
+  templates2 as deTemplates,
+  templates3 as enTemplates
+};

package/dist/locales/be.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.moreInfo.less": `Minder informatie`,
+  "pd.moreInfo.more": `Meer informatie`
+};
+export {
+  templates
+};

package/dist/locales/de.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.moreInfo.more": `Mehr Informationen`,
+  "pd.moreInfo.less": `Text ausblenden`
+};
+export {
+  templates
+};

package/dist/locales/en.js

@@ -0,0 +1,7 @@
+const templates = {
+  "pd.moreInfo.less": `Less information`,
+  "pd.moreInfo.more": `More information`
+};
+export {
+  templates
+};

package/dist/pd-box-view.js

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

package/dist/pd-collapse.js

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

package/dist/pd-edit-content.js

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

package/dist/pd-more-info.js

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

package/dist/pd-resize-content.js

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

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

@@ -1,6 +1,5 @@
-import { html, css, LitElement } from 'lit';
-
-export class PdBoxView extends LitElement {
+import { LitElement, css, html } from "lit";
+class PdBoxView extends LitElement {
   static get styles() {
     return [
       css`
@@ -13,11 +12,13 @@ export class PdBoxView extends LitElement {
           /*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/{src → dist/src}/PdCollapse.js

@@ -1,30 +1,26 @@
+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.
  */
-
-import { css, html, LitElement } from 'lit';
-import { ICON_TOGGLE_COLLAPSE as toogleCollapse } from '@progressive-development/pd-icon/src/PdIcon.js';
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-export class PdCollapse extends LitElement {
+class PdCollapse extends LitElement {
   static get properties() {
     return {
       active: { type: Boolean },
-      icon: { type: String },
+      icon: { type: String }
     };
   }
-
   constructor() {
     super();
-    this.active = false;        
+    this.active = false;
   }
-
   static get styles() {
     return [
-      PDColorStyles, PDFontStyles,
+      PDColorStyles,
+      PDFontStyles,
       css`
         :host {          
           display: block;
@@ -98,44 +94,42 @@ export class PdCollapse extends LitElement {
           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', {
+      new CustomEvent("toggle-accordion", {
         bubbles: true,
         composed: true,
-        detail: this.active,
+        detail: this.active
       })
     );
   }
-
   render() {
-    // eslint-disable-next-line lit-a11y/click-events-have-key-events
     return html`<div
-        class="trigger ${this.active ? 'open' : 'closed'}"
+        class="trigger ${this.active ? "open" : "closed"}"
         @click="${this.onClick}"
       >
         <slot name="header"></slot>
         <pd-icon
-          icon="${toogleCollapse}"
+          icon="${ICON_TOGGLE_COLLAPSE}"
           ?activeIcon="${this.active}"
           class="small primary"          
         ></pd-icon>
       </div>
-      <div class="content ${this.active ? 'open' : 'closed'}">
+      <div class="content ${this.active ? "open" : "closed"}">
         <slot name="content"></slot>
       </div> `;
   }
 }
+export {
+  PdCollapse
+};

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

@@ -1,14 +1,10 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/anchor-is-valid */
+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.
  */
-
- import { LitElement, html, css } from 'lit';
- import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
- const editIcon = html`<svg
+const editIcon = html`<svg
                     class="edit"
                     id="Layer_1"
                     version="1.1"
@@ -32,22 +28,15 @@
                       />
                     </g>
                   </svg>`;
-
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
- export class PdEditContent extends LitElement {
-   /**
-    * @event edit-content
-    */
- 
-   static get styles() {
-     return [
-       PDColorStyles, PDFontStyles,
-       css`
+class PdEditContent extends LitElement {
+  /**
+   * @event edit-content
+   */
+  static get styles() {
+    return [
+      PDColorStyles,
+      PDFontStyles,
+      css`
        :host { 
          display: block;
        }
@@ -146,96 +135,89 @@
            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 = undefined;
-     this.contentTitle = '';
-     this.data = [];
-     this.editLinks = [];
-     this.editDisabled = false;
-   }
- 
-   render() {
-     return html`
+     `
+    ];
+  }
+  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`
+         ${this.stepNumber ? html`
                <div class="circle">
                  <span class="step-number">${this.stepNumber}</span>
                </div>
-             `
-           : ''}
+             ` : ""}
          <h4>${this.contentTitle}</h4>
        </div>
        <div>
-         ${this.data
-           ? html`
+         ${this.data ? html`
               <div class="param-data">
                 ${this.data.map(
-                dataEntry => html`
+      (dataEntry) => html`
                   <div>
                     <span class="label">${dataEntry.name}</span>
                     <span class="value">${dataEntry.val}</span>
                   </div>
                 `
-                )}
-              </div>`
-           : ''}
+    )}
+              </div>` : ""}
          <slot></slot>
          <div class="link-row">
-           ${this.editDisabled
-             ? ''
-             : html`
+           ${this.editDisabled ? "" : html`
                  <a @click="${this._editContent}">
                    <div class="link-item">${editIcon} Bewerk ${this.contentTitle}</div>
                  </a>
                `}
            ${this.editLinks.map(
-             link => html`
+      (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,
-       })
-     );
-   }
+  }
+  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
+};

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

@@ -1,22 +1,11 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/anchor-is-valid */
+import { LitElement, css, html } from "lit";
+import { updateWhenLocaleChanges, msg } from "@lit/localize";
+import { 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 { msg, updateWhenLocaleChanges } from '@lit/localize';
-
-import { PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdMoreInfo extends LitElement {
+class PdMoreInfo extends LitElement {
   static get styles() {
     return [
       PDFontStyles,
@@ -41,52 +30,48 @@ export class PdMoreInfo extends LitElement {
          color: var(--pd-default-font-link-col-hover);
        }
 
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
-      _lessInfo: { type: Boolean },
+      _lessInfo: { type: Boolean }
     };
   }
-
   constructor() {
     super();
     this._lessInfo = true;
     updateWhenLocaleChanges(this);
   }
-
   render() {
     if (this._lessInfo) {
       return html`
         <p>
           <slot name="small-view"></slot>
-          <a @click="${this._showMoreInfo}">${msg("Mehr Informationen", {id: "pd.moreInfo.more"})}</a>
+          <a @click="${this._showMoreInfo}">${msg("Mehr Informationen", { id: "pd.moreInfo.more" })}</a>
         </p>
       `;
     }
     return html`
       <p>
         <slot name="large-view"></slot>
-        <a @click="${this._showLessInfo}">${msg("Text ausblenden", {id: "pd.moreInfo.less"})}</a>
+        <a @click="${this._showLessInfo}">${msg("Text ausblenden", { id: "pd.moreInfo.less" })}</a>
       </p>
     `;
   }
-
   _showMoreInfo() {
     this._lessInfo = false;
   }
-
   _showLessInfo() {
     this._lessInfo = true;
-
-    // scroll to position (otherwise on mobile lost in content...)
     const rect = this.getBoundingClientRect();
-    // https://www.mediaevent.de/javascript/scroll.html
     window.scrollBy({
       top: rect.top - 150,
       left: 0,
-      behavior: 'smooth',
+      behavior: "smooth"
     });
   }
-}
+}
+export {
+  PdMoreInfo
+};

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

@@ -1,33 +1,19 @@
+import { LitElement, css, html } from "lit";
+import { installMediaQueryWatcher } from "pwa-helpers/media-query.js";
+import "@progressive-development/pd-dialog/pd-popup";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { LitElement, html, css } from 'lit';
-
-import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
-
-import '@progressive-development/pd-dialog/pd-popup.js';
-
-/**
- * An example element.
- * 
- * !!! Not refactored at the moment (not in use) !!! (pd-component and css refactoring from 2022/02))
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdResizeContent extends LitElement {
+class PdResizeContent extends LitElement {
   /**
    * Fired when free date clicked => At the moment only for freeDates
    * @event book-date
    */
-
   /**
    * Fired when date or ZIP should edited by the user
    * @event edit-selection
    */
-
   static get styles() {
     return css`
       :host {
@@ -44,22 +30,19 @@ export class PdResizeContent extends LitElement {
       }
     `;
   }
-
   static get properties() {
     return {
       resizeWidth: { type: String },
-      _hideContent: { type: Boolean },
+      _hideContent: { type: Boolean }
     };
   }
-
   constructor() {
     super();
-    this.resizeWidth = '1232px';
+    this.resizeWidth = "1232px";
     this._hideContent = false;
   }
-
   firstUpdated() {
-    installMediaQueryWatcher(`(min-width: ${this.resizeWidth})`, matches => {
+    installMediaQueryWatcher(`(min-width: ${this.resizeWidth})`, (matches) => {
       if (matches) {
         this._hideContent = false;
       } else {
@@ -67,7 +50,6 @@ export class PdResizeContent extends LitElement {
       }
     });
   }
-
   render() {
     if (this._hideContent) {
       return html`
@@ -79,4 +61,7 @@ export class PdResizeContent extends LitElement {
     }
     return html` <slot name="resize-content"></slot> `;
   }
-}
+}
+export {
+  PdResizeContent
+};

package/package.json

@@ -1,27 +1,46 @@
 {
   "name": "@progressive-development/pd-content",
-  "description": "Progressive Development content components. ",
+  "description": "Progressive Development content components. ",  
+  "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "author": "PD Progressive Development UG",
-  "version": "0.1.83",
-  "main": "index.js",
-  "module": "index.js",
+  "version": "0.5.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./pd-box-view": "./dist/pd-box-view.js",
+    "./pd-collapse": "./dist/pd-collapse.js",
+    "./pd-edit-content": "./dist/pd-edit-content.js",
+    "./pd-more-info": "./dist/pd-more-info.js",
+    "./pd-resize-content": "./dist/pd-resize-content.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": "storybook dev -p 6006",
-    "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"
+    "localizeBuild": "lit-localize build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@lit/localize": "^0.12.1",
-    "@progressive-development/pd-dialog": "^0.1.84",
-    "@progressive-development/pd-icon": "^0.1.23",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-dialog": "^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"
@@ -30,23 +49,22 @@
     "@chromatic-com/storybook": "^1.3.4",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.7.2",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^3.2.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",
-    "@web/dev-server": "^0.1.38",
-    "@web/test-runner": "^0.13.31",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.8.8",
-    "storybook": "^8.0.10"
+    "prettier": "^2.8.8",    
+    "rollup-plugin-visualizer": "^5.13.1",
+    "storybook": "^8.0.10",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {