@progressive-development/pd-order 0.5.17 → 0.6.1

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import { PdContactData } from '@progressive-development/pd-contact';
+export interface PdOrderStep {
+    /** Der eindeutige Schlüssel des Schritts (z.B. "zip", "contacts") */
+    key: string;
+    /** Der übersetzte Name des Schritts für die Anzeige */
+    name: string;
+    /** Beliebige Zusatzdaten, z.B. für PdEditContent */
+    data?: {
+        name: string;
+        val: string;
+    }[];
+}
+export interface PdOrderData {
+    /** Die vom Nutzer ausgewählte Postleitzahl */
+    zip?: string;
+    /** Das vom Nutzer gewählte Datum, z.B. für einen Servicetermin */
+    selectedDate?: Date;
+    /** Gibt an, ob ein Benutzerlogin vorliegt (steuert z.B. Bearbeitbarkeit) */
+    withLogin?: boolean;
+    /** Optionale Kontaktinformationen für alle Kontaktrollen */
+    contacts?: {
+        orderContact?: PdContactData;
+        billingContact?: PdContactData;
+        adminContact?: PdContactData;
+        propertyContact?: PdContactData;
+    };
+    /** Preisstruktur für die Bestellung */
+    priceData?: unknown;
+}
+//# 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,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,GAAG,EAAE,MAAM,CAAC;IACZ,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,WAAW;IAC1B,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE;QACT,YAAY,CAAC,EAAE,aAAa,CAAC;QAC7B,cAAc,CAAC,EAAE,aAAa,CAAC;QAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;QAC7B,eAAe,CAAC,EAAE,aAAa,CAAC;KACjC,CAAC;IACF,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@progressive-development/pd-order",
+  "version": "0.6.1",
   "description": "Progressive Development Order Component",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.17",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./pd-order-contacts": "./dist/pd-order-contacts.js",
@@ -21,75 +22,58 @@
     "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-calendar": "^0.5.4",
-    "@progressive-development/pd-contact": "^0.5.10",
-    "@progressive-development/pd-content": "^0.5.9",
-    "@progressive-development/pd-dialog": "^0.5.8",
-    "@progressive-development/pd-forms": "^0.5.7",
-    "@progressive-development/pd-price": "^0.5.1",
-    "@progressive-development/pd-shared-styles": "^0.1.1",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-calendar": "^0.6.0",
+    "@progressive-development/pd-contact": "^0.6.2",
+    "@progressive-development/pd-content": "^0.6.3",
+    "@progressive-development/pd-dialog": "^0.6.1",
+    "@progressive-development/pd-forms": "^0.6.3",
+    "@progressive-development/pd-price": "^0.6.0",
+    "@progressive-development/pd-shared-styles": "^0.2.1",
     "fecha": "^4.2.3",
-    "lit": "^2.8.0"
+    "lit": "^3.3.0"
   },
   "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/src/PdOrderContacts.js

@@ -1,316 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { msg } from "@lit/localize";
-import "@progressive-development/pd-content/pd-collapse";
-import "@progressive-development/pd-contact/pd-contact";
-import "@progressive-development/pd-forms/pd-checkbox";
-import "@progressive-development/pd-forms/pd-form-row";
-import "@progressive-development/pd-forms/pd-radio-group";
-import { PDFontStyles } from "@progressive-development/pd-shared-styles";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdOrderContacts extends LitElement {
-  static get properties() {
-    return {
-      /**
-        * List with required contact fields, if not set use default (previous existing values to be consitent during update)
-        */
-      summary: { type: Boolean },
-      contactTitle: { type: Object },
-      requiredFields: { type: Array },
-      orderContact: { type: Object },
-      billingContact: { type: Object },
-      adminContact: { type: Object },
-      propertyContact: { type: Object },
-      withPayment: { type: Boolean },
-      withPropertyOwner: { type: Boolean },
-      withPropertyDate: { type: Boolean },
-      match: { type: Object },
-      _ownBillingContact: { type: Boolean, state: true },
-      _ownAdminContact: { type: Boolean, state: true },
-      _isPropertyOwner: { type: Boolean, state: true }
-    };
-  }
-  static get styles() {
-    return [
-      PDFontStyles,
-      css`
-        :host {
-          display: block;
-        }
- 
-        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: 1000px;
-        }
-
-        a {
-          cursor: pointer; 
-          font-family: var(--pd-default-font-link-family);
-          font-size: var(--pd-default-font-link-size);
-          color: var(--pd-default-font-link-col);
-        }
-
-        a:hover {
-          color: var(--pd-default-font-link-col-hover);
-        }
- 
-       .collapse-contact {
-         padding: 10px;
-       }
- 
-       .summary-box {
-         display: flex;
-         flex-wrap: wrap;
-         gap: 10px;
-       }
-
-       .summary-box pd-contact {
-          min-width: 150px;
-       }
-
-      .property-owner-box {
-        border: 2px solid #007B8F; /* Dezenter, moderner Rahmen in einer angenehmen Farbe */
-        border-radius: 8px; /* Abgerundete Ecken für eine weiche Optik */
-        padding: 16px; /* Innenabstand, damit der Inhalt nicht direkt am Rahmen klebt */
-        margin: 16px 0; /* Abstand nach oben und unten für bessere Trennung */
-        background-color: #F8FAFB; /* Heller Hintergrund für visuelle Abgrenzung */
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten für ein modernes Design */
-      }
-
-     `
-    ];
-  }
-  constructor() {
-    super();
-    this._ownBillingContact = false;
-    this._ownAdminContact = false;
-    this._isPropertyOwner = false;
-    this.requiredFields = [];
-    this.contactTitle = {};
-    this.match = {};
-  }
-  update(changedProperties) {
-    if (changedProperties.has("billingContact")) {
-      this._ownBillingContact = this.billingContact !== void 0 && this.billingContact !== null;
-    }
-    if (changedProperties.has("adminContact")) {
-      this._ownAdminContact = this.adminContact !== void 0 && this.adminContact !== null;
-    }
-    if (changedProperties.has("propertyContact")) {
-      this._isPropertyOwner = this.propertyContact !== void 0 && this.propertyContact !== null;
-    }
-    super.update(changedProperties);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("validate-form", this._validateForm);
-  }
-  disconnectedCallback() {
-    super.connectedCallback();
-    this.removeEventListener("validate-form", this._validateForm);
-  }
-  firstUpdated() {
-    this.addEventListener("toggle-accordion", (e) => {
-      const origin = e.composedPath()[0];
-      const collapsiblePanels = this.shadowRoot.querySelectorAll(
-        "pd-collapse"
-      );
-      collapsiblePanels.forEach((panel) => {
-        if (panel !== origin) {
-          panel.close();
-        }
-      });
-    });
-  }
-  render() {
-    if (this.summary) {
-      return this._renderSummary();
-    }
-    return this._renderEditContacts();
-  }
-  _renderEditContacts() {
-    return html`       
-
-       <pd-collapse id="orderContactCollapseId" active>
-         <div slot="header" class="header">${this.contactTitle.orderInputContact || msg("Adresse", { id: "pd.order.contacts.orderContact.inputHeader" })}</div>
-         <pd-contact
-           id="orderContactId"
-           class="collapse-contact"
-           slot="content"
-           .requiredFields="${this.requiredFields}"
-           .contact="${this.orderContact}"
-           .match="${this.match}"
-           ?withPropertyDate="${!this._isPropertyOwner && this.withPropertyDate}"
-         ></pd-contact>
-       </pd-collapse>       
- 
-       ${this.withPayment ? html`
-        <pd-collapse id="billingContactCollapseId">
-          <div slot="header" class="header">${this.contactTitle.billingInputContact || msg("Rechnungsadresse (optional)", { id: "pd.order.contacts.billingContact.inputHeader" })}</div>
-          <div slot="content">
-            ${this._ownBillingContact ? html`
-                  <p>
-                    <a @click="${() => {
-      this._ownBillingContact = false;
-    }}">
-                      ${msg("Kundenadresse als Rechnungsadresse verwenden", { id: "pd.order.contacts.billingContact.sameBillingLink" })}
-                    </a>
-                  </p>
-                  <pd-contact
-                    id="billingContactId"
-                    class="collapse-contact"
-                    .requiredFields="${this.requiredFields}"
-                    .contact="${this.billingContact}"
-                  ></pd-contact>
-                ` : html`
-                <p>${msg("Rechnungsadresse entspricht der Kundenadresse.", { id: "pd.order.contacts.billingContact.sameBillingText" })}</p>
-                <p>
-                  <a @click="${() => {
-      this._ownBillingContact = true;
-    }}">
-                    ${msg("Neue Rechnungsadresse hinzufügen", { id: "pd.order.contacts.billingContact.otherBillingLink" })}
-                  </a>
-                </p>
-            `}
-          </div>
-        </pd-collapse>` : ""}
-
-      ${this.withPropertyOwner ? html`        
-        
-      <div class="property-owner-box">
-        
-        <pd-checkbox id="isPropertyOwnerId" value="${this._isPropertyOwner}"
-          @field-change="${(e) => this._isPropertyOwner = e.detail.value === "true"}">${msg("Ist der Kunde Vermieter?", { id: "pd.order.contacts.propertyContact.checkBox" })}</pd-checkbox>
-
-        ${this._isPropertyOwner ? html`
-        
-        <pd-collapse id="propertyContactCollapseId" style="padding-top: 20px;">
-          <div slot="header" class="header">${this.contactTitle.propertyInputContact || msg("Adresse der Immobilie", { id: "pd.order.contacts.propertyContact.inputHeader" })}</div>
-          <div slot="content">
-            <pd-contact
-              id="propertyContactId"
-              class="collapse-contact"
-              .requiredFields="${["street", "streetNr", "zip", "city"]}"
-              .inputFields="${["street", "city", "additionalHint"]}"
-              .contact="${this.propertyContact}"
-              ?withPropertyDate="${this.withPropertyDate}"
-            ></pd-contact>          
-          </div>
-        </pd-collapse>
-
-        <pd-collapse id="adminContactCollapseId">
-          <div slot="header" class="header">${this.contactTitle.adminInputContact || msg("Adresse der Verwaltung (optional)", { id: "pd.order.contacts.adminContact.inputHeader" })}</div>
-          <div slot="content">
-            ${this._ownAdminContact ? html`
-                <p>
-                  <a @click="${() => {
-      this._ownAdminContact = false;
-    }}">
-                    ${msg("Kundenadresse als Verwaltungsadresse verwenden", { id: "pd.order.contacts.adminContact.sameAdminLink" })}
-                  </a>
-                </p>
-                <pd-contact
-                  id="adminContactId"
-                  class="collapse-contact"
-                  .requiredFields="${this.requiredFields}"
-                  .contact="${this.adminContact}"
-                ></pd-contact>
-              ` : html`
-              <p>${msg("Verwaltungsadresse entspricht der Kundenadresse.", { id: "pd.order.contacts.adminContact.sameAdminText" })}</p>
-              <p>
-                <a @click="${() => {
-      this._ownAdminContact = true;
-    }}">
-                  ${msg("Neue Verwaltungsadresse hinzufügen", { id: "pd.order.contacts.adminContact.otherAdminLink" })}
-                </a>
-              </p>
-          `}
-          </div>
-        </pd-collapse>        
-        ` : ""}
-           
-      </div>` : ""}      
-      `;
-  }
-  _renderSummary() {
-    return html`
-       <div class="summary-box">
-        ${this.orderContact ? html` 
-        <pd-contact
-           addressTitle="${this.contactTitle.orderSummaryContact || msg("Adresse", { id: "pd.order.contacts.summary.orderContact.title" })}"
-           .contact="${this.orderContact}"
-           summary
-         ></pd-contact>` : ""}
-         ${this.billingContact ? html`
-         <pd-contact
-           addressTitle="${this.contactTitle.billingSummaryContact || msg("Rechnungsadresse", { id: "pd.order.contacts.summary.billingContact.title" })}"           
-           .contact="${this.billingContact}"
-           summary
-         ></pd-contact>` : ""}
-         ${this.propertyContact ? html`
-         <pd-contact
-           addressTitle="${this.contactTitle.propertySummaryContact || msg("Immobilie", { id: "pd.order.contacts.summary.propertyContact.title" })}"           
-           .contact="${this.propertyContact}"
-           summary
-         ></pd-contact>` : ""}
-         ${this.adminContact ? html`
-         <pd-contact
-           addressTitle="${this.contactTitle.adminSummaryContact || msg("Verwaltung", { id: "pd.order.contacts.summary.adminContact.title" })}"
-           .contact="${this.adminContact}"
-           summary
-         ></pd-contact>` : ""}
-         
-       </div>
-     `;
-  }
-  _validateForm(e) {
-    if (e.detail && !e.detail.singleElement) {
-      this.shadowRoot.getElementById("orderContactId").dispatchEvent(
-        new CustomEvent("validate-form", {
-          detail: e.detail
-        })
-      );
-      const errorSize = e.detail.errorMap.size;
-      if (errorSize > 0) {
-        this.shadowRoot.getElementById("orderContactCollapseId").open();
-      }
-      if (this._ownBillingContact) {
-        this.shadowRoot.getElementById("billingContactId").dispatchEvent(
-          new CustomEvent("validate-form", {
-            detail: e.detail
-          })
-        );
-        if (e.detail.errorMap.size > errorSize) {
-          this.shadowRoot.getElementById("billingContactCollapseId").open();
-        }
-      }
-      if (this._isPropertyOwner) {
-        this.shadowRoot.getElementById("propertyContactId").dispatchEvent(
-          new CustomEvent("validate-form", {
-            detail: e.detail
-          })
-        );
-        if (e.detail.errorMap.size > errorSize) {
-          this.shadowRoot.getElementById("propertyContactCollapseId").open();
-        }
-      }
-      if (this._isPropertyOwner && this._ownAdminContact) {
-        this.shadowRoot.getElementById("adminContactId").dispatchEvent(
-          new CustomEvent("validate-form", {
-            detail: e.detail
-          })
-        );
-        if (e.detail.errorMap.size > errorSize) {
-          this.shadowRoot.getElementById("adminContactCollapseId").open();
-        }
-      }
-    }
-  }
-}
-export {
-  PdOrderContacts
-};