@progressive-development/pd-contact 0.9.1 → 1.0.0

package/dist/pd-contact/PdContact.js

@@ -1,8 +1,8 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { msg, str } from '@lit/localize';
-import { PdFontStyles, PdColorStyles } from '@progressive-development/pd-shared-styles';
 import '@progressive-development/pd-icon/pd-icon';
+import '../pd-page/dist/pd-socialmedia.js';
 import '@progressive-development/pd-forms/pd-checkbox';
 import '@progressive-development/pd-forms/pd-form-container';
 import '@progressive-development/pd-forms/pd-form-row';
@@ -60,6 +60,8 @@ const _PdContact = class _PdContact extends LitElement {
     this.addressTitle = msg("Adresse", { id: "pd.contact.address.title" });
     this.phoneMailLink = false;
     this.summary = false;
+    this.viewType = "detail";
+    this.cardLayout = "auto";
     this.withPropertyDate = false;
     this.requiredFields = [];
     this.inputFields = [];
@@ -67,8 +69,6 @@ const _PdContact = class _PdContact extends LitElement {
   }
   static {
     this.styles = [
-      PdFontStyles,
-      PdColorStyles,
       css`
       :host {
         display: block;
@@ -135,6 +135,329 @@ const _PdContact = class _PdContact extends LitElement {
       .link-item:hover {
         color: var(--pd-default-font-link-col-hover, #451a46);
       }
+
+      /* ========================================
+         DETAIL VIEW STYLES
+         ======================================== */
+
+      .detail-view {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-md, 1rem);
+      }
+
+      .detail-names {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-xs, 0.25rem);
+      }
+
+      .detail-title {
+        margin: 0;
+        font-family: var(--pd-default-font-title-family, inherit);
+        font-size: 1.25rem;
+        font-weight: 700;
+        color: var(--pd-default-font-title-col, #0a3a48);
+        line-height: 1.3;
+      }
+
+      .detail-company,
+      .detail-vat {
+        margin: 0;
+        color: var(--pd-default-font-content-col, #353738);
+      }
+
+      .detail-name {
+        margin: 0;
+        color: var(--pd-default-font-muted-col, #6b7280);
+        font-weight: 300;
+      }
+
+      .detail-address {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-xs, 0.25rem);
+      }
+
+      .detail-address p {
+        margin: 0;
+        color: var(--pd-default-font-content-col, #353738);
+        line-height: 1.5;
+      }
+
+      .detail-contact-info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-sm, 0.5rem);
+      }
+
+      .detail-bank {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-xs, 0.25rem);
+      }
+
+      .detail-bank p {
+        margin: 0;
+        color: var(--pd-default-font-content-col, #353738);
+      }
+
+      .detail-label {
+        font-weight: 700;
+        color: var(--pd-default-font-title-col, #0a3a48) !important;
+        padding-top: var(--pd-spacing-sm, 0.5rem);
+      }
+
+      .detail-divider {
+        border: none;
+        border-top: 1px solid var(--pd-default-disabled-light-col, #e0e0e0);
+        margin: var(--pd-spacing-sm, 0.5rem) 0;
+        opacity: 0.5;
+      }
+
+      /* ========================================
+         CARD VIEW STYLES
+         ======================================== */
+
+      .card-wrapper {
+        container-type: inline-size;
+        container-name: contact-card;
+      }
+
+      .card {
+        display: grid;
+        background: var(
+          --pd-contact-card-bg,
+          var(--pd-default-bg-col, #fefefe)
+        );
+        border-radius: var(--pd-contact-card-radius, var(--pd-radius-lg, 8px));
+        box-shadow: var(
+          --pd-contact-card-shadow,
+          var(--pd-shadow-xl, 0 8px 16px rgba(0, 0, 0, 0.15))
+        );
+        padding: var(--pd-contact-card-padding, 2rem);
+        overflow: hidden;
+      }
+
+      .card-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-md, 1rem);
+      }
+
+      .card-logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .card-logo img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      .card-names {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-xs, 0.25rem);
+      }
+
+      .title-name {
+        margin: 0;
+        font-family: var(--pd-default-font-title-family, inherit);
+        color: var(
+          --pd-contact-card-title-col,
+          var(--pd-default-font-title-col, #0a3a48)
+        );
+        font-weight: 700;
+        line-height: 1.2;
+      }
+
+      .real-name {
+        margin: 0;
+        font-family: var(--pd-default-font-content-family, inherit);
+        color: var(
+          --pd-contact-card-subtitle-col,
+          var(--pd-default-font-muted-col, #6b7280)
+        );
+        font-weight: 300;
+      }
+
+      .card-contact-info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pd-spacing-sm, 0.5rem);
+      }
+
+      .contact-item {
+        display: flex;
+        align-items: center;
+        gap: var(--pd-spacing-sm, 0.5rem);
+        text-decoration: none;
+        color: var(--pd-default-font-content-col, #353738);
+        font-size: var(--pd-default-font-content-size, 1rem);
+      }
+
+      .contact-item:hover {
+        color: var(--pd-default-font-link-col-hover, #ffc857);
+      }
+
+      .contact-icon {
+        --pd-icon-size: 16px;
+        --pd-icon-col: var(
+          --pd-contact-icon-col,
+          var(--pd-default-col, #067394)
+        );
+        flex-shrink: 0;
+      }
+
+      .card-divider {
+        border: none;
+        border-top: 1px solid
+          var(
+            --pd-contact-card-divider-col,
+            var(--pd-default-disabled-light-col, #e0e0e0)
+          );
+        margin: var(--pd-spacing-sm, 0.5rem) 0;
+        opacity: 0.5;
+      }
+
+      /* VERTICAL LAYOUT (default for narrow containers) */
+      @container contact-card (max-width: 499px) {
+        .card:not(.layout-horizontal) {
+          grid-template-rows: auto 1fr;
+          grid-template-columns: 1fr;
+          text-align: center;
+        }
+
+        .card:not(.layout-horizontal) .card-logo {
+          width: 100%;
+          max-height: 150px;
+          padding-bottom: var(--pd-spacing-md, 1rem);
+        }
+
+        .card:not(.layout-horizontal) .card-names {
+          align-items: center;
+        }
+
+        .card:not(.layout-horizontal) .title-name {
+          font-size: 1.25rem;
+        }
+
+        .card:not(.layout-horizontal) .real-name {
+          font-size: 0.9rem;
+        }
+
+        .card:not(.layout-horizontal) .card-contact-info {
+          align-items: center;
+        }
+
+        .card:not(.layout-horizontal) .contact-item {
+          justify-content: center;
+          font-size: 0.85rem;
+        }
+
+        .card:not(.layout-horizontal) pd-socialmedia {
+          display: flex;
+          justify-content: center;
+        }
+      }
+
+      /* HORIZONTAL LAYOUT (for wider containers) */
+      @container contact-card (min-width: 500px) {
+        .card:not(.layout-vertical) {
+          grid-template-columns: 1fr minmax(120px, 200px);
+          grid-template-rows: 1fr;
+          align-items: start;
+          gap: var(--pd-spacing-md, 1rem);
+        }
+
+        .card:not(.layout-vertical) .card-logo {
+          order: 2;
+          width: 100%;
+        }
+
+        .card:not(.layout-vertical) .card-content {
+          order: 1;
+        }
+
+        .card:not(.layout-vertical) .title-name {
+          font-size: 1.5rem;
+        }
+
+        .card:not(.layout-vertical) .real-name {
+          font-size: 1rem;
+        }
+
+        .card:not(.layout-vertical) .contact-item {
+          font-size: 0.9rem;
+        }
+      }
+
+      /* FORCED HORIZONTAL LAYOUT */
+      .card.layout-horizontal {
+        grid-template-columns: 1fr minmax(120px, 200px) !important;
+        grid-template-rows: 1fr !important;
+        text-align: left !important;
+        align-items: start !important;
+        gap: var(--pd-spacing-md, 1rem) !important;
+      }
+
+      .card.layout-horizontal .card-logo {
+        order: 2 !important;
+        width: 100% !important;
+      }
+
+      .card.layout-horizontal .card-content {
+        order: 1 !important;
+      }
+
+      .card.layout-horizontal .title-name {
+        font-size: 1.5rem;
+      }
+
+      .card.layout-horizontal .real-name {
+        font-size: 1rem;
+      }
+
+      /* FORCED VERTICAL LAYOUT */
+      .card.layout-vertical {
+        grid-template-rows: auto 1fr !important;
+        grid-template-columns: 1fr !important;
+        text-align: center !important;
+      }
+
+      .card.layout-vertical .card-logo {
+        width: 100% !important;
+        max-height: 150px !important;
+        padding-bottom: var(--pd-spacing-md, 1rem);
+      }
+
+      .card.layout-vertical .card-names {
+        align-items: center !important;
+      }
+
+      .card.layout-vertical .card-contact-info {
+        align-items: center !important;
+      }
+
+      .card.layout-vertical .contact-item {
+        justify-content: center;
+      }
+
+      .card.layout-vertical pd-socialmedia {
+        display: flex;
+        justify-content: center;
+      }
+
+      .card.layout-vertical .title-name {
+        font-size: 1.25rem;
+      }
+
+      .card.layout-vertical .real-name {
+        font-size: 0.9rem;
+      }
     `
     ];
   }
@@ -146,7 +469,7 @@ const _PdContact = class _PdContact extends LitElement {
   render() {
     return html`
       <div class="contact">
-        ${this.summary ? this._renderViewContact() : this._renderEditContact()}
+        ${this.viewType === "card" && this.summary ? this._renderCardView() : this.summary ? this._renderViewContact() : this._renderEditContact()}
       </div>
     `;
   }
@@ -157,7 +480,6 @@ const _PdContact = class _PdContact extends LitElement {
               <pd-form-row>
                 <pd-radio-group
                   id="contactTypeRadioId"
-                  class="quarter3"
                   label="${msg("Typ", { id: "pd.contact.label.type" })}"
                   required
                   initValue="${this._getRadioValue()}"
@@ -188,7 +510,6 @@ const _PdContact = class _PdContact extends LitElement {
                     <pd-form-row class="contact-form">
                       <pd-input
                         id="compNameId"
-                        class="quarter3"
                         label="${msg("Name des Unternehmen", {
       id: "pd.contact.label.company"
     })}"
@@ -203,7 +524,6 @@ const _PdContact = class _PdContact extends LitElement {
                     <pd-form-row class="contact-form">
                       <pd-input
                         id="vatId"
-                        class="quarter3"
                         label="${msg("USt-IdNr.", {
       id: "pd.contact.label.btw"
     })}"
@@ -220,7 +540,6 @@ const _PdContact = class _PdContact extends LitElement {
                     <pd-form-row class="contact-form">
                       <pd-input
                         id="firstNameId"
-                        class="quarter3"
                         label="${msg("Vorname", {
       id: "pd.contact.label.firstName"
     })}"
@@ -235,7 +554,6 @@ const _PdContact = class _PdContact extends LitElement {
                     <pd-form-row class="contact-form">
                       <pd-input
                         id="lastNameId"
-                        class="quarter3"
                         label="${msg("Nachname", {
       id: "pd.contact.label.lastName"
     })}"
@@ -251,7 +569,7 @@ const _PdContact = class _PdContact extends LitElement {
               <pd-form-row class="contact-form">
                 <pd-input
                   id="streetId"
-                  class="quarter2"
+                  span="three-quarters"
                   label="${msg("Strasse", { id: "pd.contact.label.street" })}"
                   valueName="street"
                   initValue="${this.contact?.street || ""}"
@@ -260,7 +578,7 @@ const _PdContact = class _PdContact extends LitElement {
                 ></pd-input>
                 <pd-input
                   id="streetNrId"
-                  class="quarter1"
+                  span="quarter"
                   label="${msg("Nr.", { id: "pd.contact.label.streetNr" })}"
                   valueName="streetNr"
                   initValue="${this.contact?.streetNr || ""}"
@@ -274,7 +592,7 @@ const _PdContact = class _PdContact extends LitElement {
                       <pd-input
                         readonly
                         id="zipId"
-                        class="quarter1"
+                        span="third"
                         label="${msg("PLZ", { id: "pd.contact.label.zip" })}"
                         valueName="zip"
                         initValue="${this.match.zip}"
@@ -282,7 +600,7 @@ const _PdContact = class _PdContact extends LitElement {
                     ` : html`
                       <pd-input
                         id="zipId"
-                        class="quarter1"
+                        span="third"
                         label="${msg("PLZ", { id: "pd.contact.label.zip" })}"
                         fieldType="number"
                         valueName="zip"
@@ -293,7 +611,7 @@ const _PdContact = class _PdContact extends LitElement {
                     `}
                 <pd-input
                   id="cityId"
-                  class="quarter2"
+                  span="two-thirds"
                   label="${msg("Ort", { id: "pd.contact.label.city" })}"
                   valueName="city"
                   initValue="${this.contact?.city || ""}"
@@ -305,7 +623,6 @@ const _PdContact = class _PdContact extends LitElement {
         ${this.inputFields.length === 0 || this._showInput(C_ADDITIONAL) ? html`
               <pd-form-row class="contact-form">
                 <pd-input
-                  class="quarter3"
                   id="additionalHintId"
                   label="${msg("Addresszusatz", {
       id: "pd.contact.label.additional"
@@ -319,7 +636,6 @@ const _PdContact = class _PdContact extends LitElement {
         ${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"
@@ -334,7 +650,6 @@ const _PdContact = class _PdContact extends LitElement {
               <pd-form-row class="contact-form">
                 <pd-input
                   id="phoneId"
-                  class="quarter3"
                   label="${msg("Telefon", { id: "pd.contact.label.phone" })}"
                   name="phone"
                   valueName="phone1"
@@ -349,7 +664,6 @@ const _PdContact = class _PdContact extends LitElement {
               <pd-form-row class="contact-form">
                 <pd-input
                   id="mailId"
-                  class="quarter3"
                   label="${msg("E-mail", { id: "pd.contact.label.email" })}"
                   fieldType="mail"
                   valueName="email"
@@ -372,66 +686,195 @@ const _PdContact = class _PdContact extends LitElement {
     if (!this.contact) return html`<p>Contact undefined</p>`;
     const trPhoneNr = transformPhone(
       this.contact.phone1 || "",
-      this.contact.country || "be"
+      this.contact.country || "de"
     );
+    const displayTitle = this.contact.titleName || this.addressTitle;
     return html`
-      <address>
-        <dl>
-          <dt>${this.addressTitle}</dt>
-          <dd>${this.contact.companyName}</dd>
-          <dd>${this.contact.vatNr}</dd>
-          <dd>${this._getFullName()}</dd>
-          <dd>${this._getFullStreet()}</dd>
-          <dd>${this._getFullLocation()}</dd>
-          ${this.contact.additionalHint ? html`<dd>${this.contact.additionalHint}</dd>` : ""}
-          ${this.contact.propertyDate ? html`<dd>
+      <div class="detail-view">
+        <div class="detail-names">
+          ${displayTitle ? html`<h3 class="detail-title">${displayTitle}</h3>` : nothing}
+          ${this.contact.companyName ? html`<p class="detail-company">${this.contact.companyName}</p>` : nothing}
+          ${this.contact.vatNr ? html`<p class="detail-vat">${this.contact.vatNr}</p>` : nothing}
+          ${this._getFullName() && this._getFullName() !== displayTitle ? html`<p class="detail-name">${this._getFullName()}</p>` : nothing}
+        </div>
+
+        <div class="detail-address">
+          ${this._getFullStreet() ? html`<p>${this._getFullStreet()}</p>` : nothing}
+          ${this._getFullLocation() ? html`<p>${this._getFullLocation()}</p>` : nothing}
+          ${this.contact.additionalHint ? html`<p>${this.contact.additionalHint}</p>` : nothing}
+          ${this.contact.country ? html`<p>${this.contact.country}</p>` : nothing}
+          ${this.contact.propertyDate ? html`<p>
                 ${msg(str`Baujahr: ${this.contact.propertyDate}`, {
       id: "pd.contact.label.summary.propertyDate"
     })}
-              </dd>` : ""}
-          <dd>${this.contact.country}</dd>
-
-          ${this.contact.phone1 ? html` <dd class="larger">
-                ${this.phoneMailLink && trPhoneNr ? html` <a
-                      href="tel:${trPhoneNr}"
-                      aria-label="Phone call: ${this.contact.phone1}"
-                      class="link-item"
-                    >
-                      <span style="margin-right: 8px;"
-                        >${this.contact.phone1}</span
-                      >
-                      <pd-icon
-                        activeIcon
-                        icon="phoneIcon"
-                        class="round link-icon"
-                      ></pd-icon>
-                    </a>` : this.contact.phone1}
-              </dd>` : ""}
-          ${this.contact.email ? html` <dd class="larger">
-                ${this.phoneMailLink ? html` <a
-                      href="mailto:${this.contact.email}"
-                      aria-label="Send mail: ${this.contact.email}"
-                      class="link-item"
-                    >
-                      <span style="margin-right: 8px;"
-                        >${this.contact.email}</span
-                      >
-                      <pd-icon
-                        activeIcon
-                        icon="mailIcon"
-                        class="round link-icon"
-                      ></pd-icon>
-                    </a>` : this.contact.email}
-              </dd>` : ""}
-          ${this.contact.btw ? html` <dt>BTW</dt>
-                <dd>${this.contact.btw}</dd>` : ""}
-          ${this.contact.kbc ? html` <dt>Bankgegevens</dt>
-                <dd>${this.contact.kbc}</dd>
-                <dd>${this.contact.bank}</dd>` : ""}
-        </dl>
-      </address>
+              </p>` : nothing}
+        </div>
+
+        <div class="detail-contact-info">
+          ${this.contact.phone1 ? html`
+                <a
+                  href="tel:${trPhoneNr || this.contact.phone1}"
+                  class="contact-item"
+                  aria-label="Phone: ${this.contact.phone1}"
+                >
+                  <pd-icon icon="phoneIcon" class="contact-icon"></pd-icon>
+                  <span>${this.contact.phone1}</span>
+                </a>
+              ` : nothing}
+          ${this.contact.email ? html`
+                <a
+                  href="mailto:${this.contact.email}"
+                  class="contact-item"
+                  aria-label="Email: ${this.contact.email}"
+                >
+                  <pd-icon icon="mailIcon" class="contact-icon"></pd-icon>
+                  <span>${this.contact.email}</span>
+                </a>
+              ` : nothing}
+          ${this.contact.website ? html`
+                <a
+                  href="${this._ensureHttps(this.contact.website)}"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="contact-item"
+                  aria-label="Website: ${this.contact.website}"
+                >
+                  <pd-icon icon="circleIcon" class="contact-icon"></pd-icon>
+                  <span
+                    >${this._formatWebsiteDisplay(this.contact.website)}</span
+                  >
+                </a>
+              ` : nothing}
+        </div>
+
+        ${this.contact.btw || this.contact.kbc ? html`
+              <div class="detail-bank">
+                ${this.contact.btw ? html`
+                      <p class="detail-label">BTW</p>
+                      <p>${this.contact.btw}</p>
+                    ` : nothing}
+                ${this.contact.kbc ? html`
+                      <p class="detail-label">Bankgegevens</p>
+                      <p>${this.contact.kbc}</p>
+                      ${this.contact.bank ? html`<p>${this.contact.bank}</p>` : nothing}
+                    ` : nothing}
+              </div>
+            ` : nothing}
+        ${this.contact.socialMedia && this.contact.socialMedia.length > 0 ? html`
+              <hr class="detail-divider" />
+              <pd-socialmedia
+                summary
+                .initItems="${this.contact.socialMedia}"
+              ></pd-socialmedia>
+            ` : nothing}
+      </div>
+    `;
+  }
+  // ========================================
+  // CARD VIEW RENDER METHODS
+  // ========================================
+  _renderCardView() {
+    if (!this.contact) return html`<p>Contact undefined</p>`;
+    const layoutClass = this.cardLayout !== "auto" ? `layout-${this.cardLayout}` : "";
+    return html`
+      <div class="card-wrapper" part="card-wrapper">
+        <div class="card ${layoutClass}">
+          ${this._renderCardLogo()}
+          <div class="card-content">
+            ${this._renderCardNames()} ${this._renderCardContactInfo()}
+            ${this._hasCardContactInfo() ? this._renderCardDivider() : nothing}
+            ${this._renderCardSocialMedia()}
+          </div>
+        </div>
+      </div>
     `;
   }
+  _renderCardLogo() {
+    if (!this.contact?.logo) return nothing;
+    return html`
+      <div class="card-logo">
+        <img
+          src="${this.contact.logo}"
+          alt="${this.contact.titleName || "Logo"}"
+        />
+      </div>
+    `;
+  }
+  _renderCardNames() {
+    const titleName = this.contact?.titleName;
+    const fullName = this._getFullName();
+    return html`
+      <div class="card-names">
+        ${titleName ? html`<h2 class="title-name">${titleName}</h2>` : nothing}
+        ${fullName ? html`<p class="real-name">${fullName}</p>` : nothing}
+      </div>
+    `;
+  }
+  _renderCardContactInfo() {
+    const phone = this.contact?.phone1;
+    const email = this.contact?.email;
+    const website = this.contact?.website;
+    const trPhoneNr = phone ? transformPhone(phone, this.contact?.country || "de") : "";
+    return html`
+      <div class="card-contact-info">
+        ${phone ? html`
+              <a
+                href="tel:${trPhoneNr || phone}"
+                class="contact-item"
+                aria-label="Phone: ${phone}"
+              >
+                <pd-icon icon="phoneIcon" class="contact-icon"></pd-icon>
+                <span>${phone}</span>
+              </a>
+            ` : nothing}
+        ${email ? html`
+              <a
+                href="mailto:${email}"
+                class="contact-item"
+                aria-label="Email: ${email}"
+              >
+                <pd-icon icon="mailIcon" class="contact-icon"></pd-icon>
+                <span>${email}</span>
+              </a>
+            ` : nothing}
+        ${website ? html`
+              <a
+                href="${this._ensureHttps(website)}"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="contact-item"
+                aria-label="Website: ${website}"
+              >
+                <pd-icon icon="circleIcon" class="contact-icon"></pd-icon>
+                <span>${this._formatWebsiteDisplay(website)}</span>
+              </a>
+            ` : nothing}
+      </div>
+    `;
+  }
+  _renderCardDivider() {
+    return html`<hr class="card-divider" />`;
+  }
+  _renderCardSocialMedia() {
+    const socialItems = this.contact?.socialMedia;
+    if (!socialItems || socialItems.length === 0) return nothing;
+    return html`
+      <pd-socialmedia summary .initItems="${socialItems}"></pd-socialmedia>
+    `;
+  }
+  _hasCardContactInfo() {
+    return !!(this.contact?.phone1 || this.contact?.email || this.contact?.website);
+  }
+  _ensureHttps(url) {
+    if (!url) return "";
+    return /^https?:\/\//i.test(url) ? url : `https://${url}`;
+  }
+  _formatWebsiteDisplay(url) {
+    return url.replace(/^https?:\/\/(www\.)?/i, "").replace(/\/$/, "");
+  }
+  // ========================================
+  // FORM METHODS
+  // ========================================
   get valid() {
     return this._contactForm?.valid === true;
   }
@@ -440,7 +883,6 @@ const _PdContact = class _PdContact extends LitElement {
   }
   getValues() {
     const contactFormValues = this._contactForm?.getValues().origin;
-    console.log("VAlues:", contactFormValues);
     const commonValues = {
       business: this._business,
       street: contactFormValues.street,
@@ -468,7 +910,6 @@ const _PdContact = class _PdContact extends LitElement {
     };
   }
   _switchAddressType(e) {
-    console.log("Do switch", e);
     if (e.detail.name === "contactTypeRadioId") {
       this._business = e.detail.value === "business";
     }
@@ -523,6 +964,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], _PdContact.prototype, "summary");
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "view-type" })
+], _PdContact.prototype, "viewType");
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "card-layout" })
+], _PdContact.prototype, "cardLayout");
 __decorateClass([
   property({ type: Boolean })
 ], _PdContact.prototype, "withPropertyDate");