@progressive-development/pd-contact 0.5.1 → 0.5.2

package/dist/locales/be.js

@@ -1,3 +1,4 @@
+import { str } from "@lit/localize";
 const templates = {
   "pd.contact.address.title": `Adres`,
   "pd.contact.check.company": `Bedrijf`,
@@ -10,10 +11,13 @@ const templates = {
   "pd.contact.label.firstName": `Voornaam`,
   "pd.contact.label.lastName": `Achternaam`,
   "pd.contact.label.phone": `Telefoon`,
+  "pd.contact.label.propertyDate": `Datum van het pand`,
   "pd.contact.label.street": `Straat`,
   "pd.contact.label.streetNr": `Nr.`,
+  "pd.contact.label.summary.propertyDate": str`Bouwjaar: ${0}`,
   "pd.contact.label.type": `Type`,
-  "pd.contact.label.zip": `Postcode`
+  "pd.contact.label.zip": `Postcode`,
+  "pd.contact.property.year.selection": `Bouwjaar selecteren`
 };
 export {
   templates

package/dist/locales/de.js

@@ -1,4 +1,6 @@
+import { str } from "@lit/localize";
 const templates = {
+  "pd.contact.property.year.selection": `Baujahr auswählen`,
   "pd.contact.address.title": `Adresse`,
   "pd.contact.label.type": `Typ`,
   "pd.contact.check.private": `Privatperson`,
@@ -12,8 +14,10 @@ const templates = {
   "pd.contact.label.zip": `PLZ`,
   "pd.contact.label.city": `Ort`,
   "pd.contact.label.additional": `Addresszusatz`,
+  "pd.contact.label.propertyDate": `Datum der Immobilie`,
   "pd.contact.label.phone": `Telefon`,
-  "pd.contact.label.email": `E-mail`
+  "pd.contact.label.email": `E-mail`,
+  "pd.contact.label.summary.propertyDate": str`Baujahr: ${0}`
 };
 export {
   templates

package/dist/locales/en.js

@@ -1,3 +1,4 @@
+import { str } from "@lit/localize";
 const templates = {
   "pd.contact.address.title": `Address`,
   "pd.contact.check.company": `Company`,
@@ -10,10 +11,13 @@ const templates = {
   "pd.contact.label.firstName": `First Name`,
   "pd.contact.label.lastName": `Last Name`,
   "pd.contact.label.phone": `Phone`,
+  "pd.contact.label.propertyDate": `Property date`,
   "pd.contact.label.street": `Street`,
   "pd.contact.label.streetNr": `No.`,
+  "pd.contact.label.summary.propertyDate": str`Year of construction: ${0}`,
   "pd.contact.label.type": `Type`,
-  "pd.contact.label.zip": `ZIP Code`
+  "pd.contact.label.zip": `ZIP Code`,
+  "pd.contact.property.year.selection": `Select year of construction`
 };
 export {
   templates

package/dist/pd-contact.js

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

package/dist/src/PdContact.js

@@ -1,11 +1,12 @@
 import { LitElement, css, html } from "lit";
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { PDFontStyles } from "@progressive-development/pd-shared-styles";
 import "@progressive-development/pd-icon/pd-icon";
 import "@progressive-development/pd-forms/pd-checkbox";
 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-select";
 import "@progressive-development/pd-forms/pd-radio-group";
 /**
  * @license
@@ -50,75 +51,23 @@ const C_CITY = "city";
 const C_ADDITIONAL = "additionalHint";
 const C_PHONE1 = "phone1";
 const C_EMAIL = "email";
+const yearSelection = [
+  { value: "UNDEF", name: msg("Baujahr auswählen", { id: "pd.contact.property.year.selection" }) },
+  { value: "<2014", name: "< 2014" },
+  { value: "2014", name: "2014" },
+  { value: "2015", name: "2015" },
+  { value: "2016", name: "2016" },
+  { value: "2017", name: "2017" },
+  { value: "2018", name: "2018" },
+  { value: "2019", name: "2019" },
+  { value: "2020", name: "2020" },
+  { value: "2021", name: "2021" },
+  { value: "2022", name: "2022" },
+  { value: "2023", name: "2023" },
+  { value: "2024", name: "2024" },
+  { value: "2025", name: "2025" }
+];
 class PdContact extends LitElement {
-  static get styles() {
-    return [
-      PDFontStyles,
-      css`
-       :host {
-         display: block;
-       }
-
-       .contact {
-         display: flex;
-         flex-direction: column;
-       }
-
-       address {
-         color: var(--pd-contact-address-col, var(--pd-default-font-content-col));
-         line-height: 1.8;
-         font-style: normal;
-       }
-
-       dl {
-         margin: 0;
-         padding: 0;
-       }
-
-       dt {
-         font-weight: bold;
-         padding-top: 10px;
-         color: var(--pd-contact-address-title-col, var(--pd-default-font-title-col));
-       }
-
-       dd {
-         font-weight: 400;
-         font-size: 1em;
-         margin: 0;
-         padding: 0;
-       }
-
-       dd.larger {         
-        padding-top: 3px;
-        padding-bottom: 5px;
-       }
-
-       .contact-form {
-         --row-padding-top: 10px;
-       }
-
-       .link-icon {
-        --pd-icon-bg-col-active: #859900;
-        --pd-icon-bg-col-hover: #859900;
-        --pd-icon-size: 14px;
-        --pd-icon-stroke-col-active: white;
-        --pd-icon-col-active: white;
-       }
-
-       .link-item {
-          display: flex; 
-          align-items: center; 
-          text-decoration: none; 
-          color: var(--pd-default-font-link-col, inherit);
-       }
-
-       .link-item:hover {
-        color: var(--pd-default-font-link-col-hover, #451A46) ;
-       }
-
-     `
-    ];
-  }
   static get properties() {
     return {
       addressTitle: { type: String },
@@ -131,6 +80,10 @@ class PdContact extends LitElement {
        * summary (true) or view (false) contact data
        */
       summary: { type: Boolean },
+      /**
+       * withPropertyDate (true) input for property date
+       */
+      withPropertyDate: { type: Boolean },
       /**
        * List with required contact fields, if not set use default (previous existing values to be consitent during update)
        */
@@ -148,6 +101,74 @@ class PdContact extends LitElement {
       _errorMap: { type: Object }
     };
   }
+  static get styles() {
+    return [
+      PDFontStyles,
+      css`
+      :host {
+        display: block;
+      }
+
+      .contact {
+        display: flex;
+        flex-direction: column;
+      }
+
+      address {
+        color: var(--pd-contact-address-col, var(--pd-default-font-content-col));
+        line-height: 1.8;
+        font-style: normal;
+      }
+
+      dl {
+        margin: 0;
+        padding: 0;
+      }
+
+      dt {
+        font-weight: bold;
+        padding-top: 10px;
+        color: var(--pd-contact-address-title-col, var(--pd-default-font-title-col));
+      }
+
+      dd {
+        font-weight: 400;
+        font-size: 1em;
+        margin: 0;
+        padding: 0;
+      }
+
+      dd.larger {         
+       padding-top: 3px;
+       padding-bottom: 5px;
+      }
+
+      .contact-form {
+        --row-padding-top: 10px;
+      }
+
+      .link-icon {
+       --pd-icon-bg-col-active: #859900;
+       --pd-icon-bg-col-hover: #859900;
+       --pd-icon-size: 14px;
+       --pd-icon-stroke-col-active: white;
+       --pd-icon-col-active: white;
+      }
+
+      .link-item {
+         display: flex; 
+         align-items: center; 
+         text-decoration: none; 
+         color: var(--pd-default-font-link-col, inherit);
+      }
+
+      .link-item:hover {
+       color: var(--pd-default-font-link-col-hover, #451A46) ;
+      }
+
+    `
+    ];
+  }
   constructor() {
     super();
     this.addressTitle = msg("Adresse", { id: "pd.contact.address.title" });
@@ -337,6 +358,18 @@ class PdContact extends LitElement {
            ></pd-input>
          </pd-form-row>
          ` : ""}
+         ${this.withPropertyDate ? html`
+         <pd-form-row class="contact-form">
+           <pd-select
+             class="quarter3"
+             id="propertyDateId"
+             label="${msg("Datum der Immobilie", { id: "pd.contact.label.propertyDate" })}"
+             value="${this.contact ? this.contact.propertyDate : ""}"
+             .values="${yearSelection}"
+             required
+           ></pd-select>
+         </pd-form-row>
+         ` : ""}
          ${this.inputFields.length === 0 || this._showInput(C_PHONE1) ? html`
          <pd-form-row class="contact-form">
            <pd-input
@@ -391,6 +424,7 @@ class PdContact extends LitElement {
                  <dd>${this._getFullStreet()}</dd>
                  <dd>${this._getFullLocation()}</dd>
                  ${this.contact.additionalHint ? html`<dd>${this.contact.additionalHint}</dd>` : ""}
+                 ${this.contact.propertyDate ? html`<dd>${msg(str`Baujahr: ${this.contact.propertyDate}`, { id: "pd.contact.label.summary.propertyDate" })}</dd>` : ""}
                  <dd>${this.contact.country}</dd>
                  
                  ${this.contact.phone1 ? html`
@@ -555,17 +589,30 @@ class PdContact extends LitElement {
     }
   }
   _setFormData() {
-    const companyName = this._business ? this.shadowRoot.getElementById("compNameId").value : void 0;
-    const vatNr = this._business ? this.shadowRoot.getElementById("vatId").value : void 0;
-    const firstName = this._business ? void 0 : this.shadowRoot.getElementById("firstNameId").value;
-    const lastName = this._business ? void 0 : this.shadowRoot.getElementById("lastNameId").value;
-    const street = this.shadowRoot.getElementById("streetId").value;
-    const streetNr = this.shadowRoot.getElementById("streetNrId").value;
-    const additionalHint = this.shadowRoot.getElementById("additionalHintId").value;
-    const zip = this.shadowRoot.getElementById("zipId").value;
-    const city = this.shadowRoot.getElementById("cityId").value;
-    const phone1 = this.shadowRoot.getElementById("phoneId").value;
-    const email = this.shadowRoot.getElementById("mailId").value;
+    const elCompanyName = this._business ? this.shadowRoot.getElementById("compNameId") : void 0;
+    const companyName = elCompanyName ? elCompanyName.value : void 0;
+    const elVatNr = this._business ? this.shadowRoot.getElementById("vatId") : void 0;
+    const vatNr = elVatNr ? elVatNr.value : void 0;
+    const elFirstName = this._business ? void 0 : this.shadowRoot.getElementById("firstNameId");
+    const firstName = elFirstName ? elFirstName.value : void 0;
+    const elLastName = this._business ? void 0 : this.shadowRoot.getElementById("lastNameId");
+    const lastName = elLastName ? elLastName.value : void 0;
+    const elStreet = this.shadowRoot.getElementById("streetId");
+    const street = elStreet ? elStreet.value : void 0;
+    const elStreetNr = this.shadowRoot.getElementById("streetNrId");
+    const streetNr = elStreetNr ? elStreetNr.value : void 0;
+    const elAdditionalHint = this.shadowRoot.getElementById("additionalHintId");
+    const additionalHint = elAdditionalHint ? elAdditionalHint.value : void 0;
+    const elPropertyDate = this.withPropertyDate ? this.shadowRoot.getElementById("propertyDateId") : void 0;
+    const propertyDate = elPropertyDate ? elPropertyDate.value : void 0;
+    const elZip = this.shadowRoot.getElementById("zipId");
+    const zip = elZip ? elZip.value : void 0;
+    const elCity = this.shadowRoot.getElementById("cityId");
+    const city = elCity ? elCity.value : void 0;
+    const elPhone1 = this.shadowRoot.getElementById("phoneId");
+    const phone1 = elPhone1 ? elPhone1.value : void 0;
+    const elEmail = this.shadowRoot.getElementById("mailId");
+    const email = elEmail ? elEmail.value : void 0;
     return {
       business: this._business,
       companyName,
@@ -575,6 +622,7 @@ class PdContact extends LitElement {
       street,
       streetNr,
       additionalHint,
+      propertyDate,
       zip,
       city,
       phone1,

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -34,28 +34,30 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@lit/localize": "^0.11.4",
+    "@lit/localize": "^0.12.2",
     "@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"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.4",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@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",
+    "@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",
     "rollup-plugin-visualizer": "^5.13.1",
-    "storybook": "^7.6.20",
+    "storybook": "^8.0.10",
     "vite": "^5.4.11",
     "vitest": "^2.1.8"
   },