@progressive-development/pd-contact 0.9.2 → 1.0.1

package/LICENSE

@@ -1,2 +1,21 @@
-No License, all rights reserved
-@2021 - PD Progressive Development UG
+MIT License
+
+Copyright (c) 2021-present PD Progressive Development UG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,76 +1,49 @@
-# \<pd-contact>
+# @progressive-development/pd-contact
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-contact.svg)](https://www.npmjs.com/package/@progressive-development/pd-contact)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+Contact form and address display component for managing personal and business contacts.
+
+## Features
+
+- **Lit 3 & TypeScript** – Modern, type-safe web components
+- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
+- **Themeable** – CSS Custom Properties for easy customization
+- **Localized** – Built-in i18n support (EN, DE, BE)
+- **Lightweight** – No heavy dependencies, tree-shakeable
+- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
+- **Dual Contact Types** – Switch between personal and business contacts with automatic field adaptation
+- **Flexible Field Configuration** – Control visible and required fields via simple arrays
+- **Smart Phone Normalization** – Auto-transforms local phone numbers to international format based on country
+- **Edit & View Modes** – Same component for form input and formatted address display with clickable links
 
 ## Installation
 
 ```bash
-npm i pd-contact
+npm install @progressive-development/pd-contact
 ```
 
-## Usage
+## Quick Start
 
 ```html
 <script type="module">
-  import 'pd-contact/pd-contact.js';
+  import '@progressive-development/pd-contact';
 </script>
 
 <pd-contact></pd-contact>
 ```
 
-## Linting and formatting
+## Components
 
-To scan the project for linting and formatting errors, run
+| Component | Description |
+|-----------|-------------|
+| `<pd-contact>` | Contact form with edit and view modes |
 
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
+## Documentation
 
-## Testing with Web Test Runner
-
-To execute a single test run:
-
-```bash
-npm run test
-```
-
-To run the tests in interactive watch mode run:
-
-```bash
-npm run test:watch
-```
+📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)
 
-## Demoing with Storybook
-
-To run a local instance of Storybook for your component, run
-
-```bash
-npm run storybook
-```
-
-To build a production version of Storybook, run
-
-```bash
-npm run storybook:build
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
-```
+## License
 
-To run a local development server that serves the basic demo located in `demo/index.html`
+MIT © [PD Progressive Development UG](https://progressive-development.com)

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { PdContact } from './pd-contact/pd-contact.js';
-export type { PdContactData, PdContactFormOptions, PdContactMatch, C_ADDITIONAL, C_BTWNR, C_CITY, C_COMPANY, C_EMAIL, C_FIRSTNAME, C_LASTNAME, C_PHONE1, C_PROPERTY_DATE, C_STREET, C_STREET_NR, C_TYPE, C_ZIP, } from './types.js';
+export type { PdContactData, PdContactFormOptions, PdContactMatch, SocialEntry, C_ADDITIONAL, C_BTWNR, C_CITY, C_COMPANY, C_EMAIL, C_FIRSTNAME, C_LASTNAME, C_LOGO, C_PHONE1, C_PROPERTY_DATE, C_SOCIAL_MEDIA, C_STREET, C_STREET_NR, C_TITLE_NAME, C_TYPE, C_WEBSITE, C_ZIP, } from './types.js';
 export { templates as beTemplates } from './generated/locales/be.js';
 export { templates as deTemplates } from './generated/locales/de.js';
 export { templates as enTemplates } from './generated/locales/en.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,WAAW,EACX,MAAM,EACN,KAAK,GACN,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,EACR,eAAe,EACf,cAAc,EACd,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,GACN,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/pd-contact/PdContact.d.ts

@@ -1,46 +1,52 @@
 import { LitElement, PropertyValues, CSSResultGroup } from 'lit';
 import { PdContactData, PdContactMatch } from '../types';
 /**
+ * Contact component for displaying and editing contact information.
+ *
  * @tagname pd-contact
+ * @summary Contact form/view with private/business support and validation.
+ *
+ * @csspart card-wrapper - Outer container for the card view layout, provides container query context.
+ *
+ * @cssprop --pd-contact-address-col - Text color for address content. Default: `var(--pd-default-font-content-col)`.
+ * @cssprop --pd-contact-address-title-col - Text color for address title. Default: `var(--pd-default-font-title-col)`.
+ * @cssprop --pd-contact-icon-col - Icon fill color. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-contact-card-bg - Card view background color. Default: `var(--pd-default-bg-col)`.
+ * @cssprop --pd-contact-card-divider-col - Card divider line color. Default: `var(--pd-default-disabled-light-col)`.
+ * @cssprop --pd-contact-card-padding - Card inner padding. Default: `2rem`.
+ * @cssprop --pd-contact-card-radius - Card border radius. Default: `var(--pd-radius-lg)`.
+ * @cssprop --pd-contact-card-shadow - Card box shadow. Default: `var(--pd-shadow-xl)`.
+ * @cssprop --pd-contact-card-subtitle-col - Card subtitle (real name) text color. Default: `var(--pd-default-font-muted-col)`.
+ * @cssprop --pd-contact-card-title-col - Card title (display name) text color. Default: `var(--pd-default-font-title-col)`.
  */
 export declare class PdContact extends LitElement {
-    /**
-     * Title shown above address block.
-     */
+    /** Title shown above address block. */
     addressTitle: string;
-    /**
-     * If true, phone and email are rendered as clickable links with icons.
-     */
+    /** Render phone and email as clickable links with icons. */
     phoneMailLink: boolean;
-    /**
-     * If true, render only summary view instead of full editable form.
-     */
+    /** Render only summary view instead of full editable form. */
     summary: boolean;
-    /**
-     * Whether the Baujahr / propertyDate should be shown in the form.
+    /** View type: 'detail' shows existing behavior, 'card' shows business card. */
+    viewType: "detail" | "card";
+    /** Layout mode for card view. */
+    cardLayout: "auto" | "horizontal" | "vertical";
+    /** Show property date selection field.
      * TODO: Refactor, give selectable property dates from outside, show if set
      */
     withPropertyDate: boolean;
-    /**
-     * List of required input field keys (optional).
-     */
+    /** List of required input field keys. */
     requiredFields: string[];
-    /**
-     * List of fields to be rendered (optional).
-     */
+    /** List of fields to be rendered (empty = all fields). */
     inputFields: string[];
-    /**
-     * Contact object to show or edit.
-     */
+    /** Contact data object to show or edit. */
     contact?: PdContactData;
-    /**
-     * Optional location match data.
-     */
+    /** Optional location match data for auto-fill. */
     match?: PdContactMatch;
     /**
      * Business or private contact (internal flag).
-     */
+     * @ignore */
     private _business;
+    /** @ignore */
     private _contactForm;
     static styles: CSSResultGroup;
     willUpdate(changedProps: PropertyValues<this>): void;
@@ -48,6 +54,15 @@ export declare class PdContact extends LitElement {
     private _renderEditContact;
     private _getRadioValue;
     private _renderViewContact;
+    private _renderCardView;
+    private _renderCardLogo;
+    private _renderCardNames;
+    private _renderCardContactInfo;
+    private _renderCardDivider;
+    private _renderCardSocialMedia;
+    private _hasCardContactInfo;
+    private _ensureHttps;
+    private _formatWebsiteDisplay;
     get valid(): boolean;
     triggerValidate(): Promise<boolean>;
     getValues(): PdContactData;

package/dist/pd-contact/PdContact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdContact.d.ts","sourceRoot":"","sources":["../../src/pd-contact/PdContact.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,0CAA0C,CAAC;AAGlD,OAAO,+CAA+C,CAAC;AACvD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,kDAAkD,CAAC;AAE1D,OAAO,EAaL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AAmClB;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IAEH,YAAY,SAAsD;IAElE;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,gBAAgB,UAAS;IAEzB;;OAEG;IAEH,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B;;OAEG;IAEH,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IAEH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAgB,MAAM,EAAE,cAAc,CAoEpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IAQf,OAAO,CAAC,kBAAkB;IAiP1B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAiF1B,IAAI,KAAK,YAER;IAEY,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIzC,SAAS,IAAI,aAAa;IAiCjC,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,MAAM,CAAC,WAAW;CAG3B"}
+{"version":3,"file":"PdContact.d.ts","sourceRoot":"","sources":["../../src/pd-contact/PdContact.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,0CAA0C,CAAC;AAClD,OAAO,iDAAiD,CAAC;AAGzD,OAAO,+CAA+C,CAAC;AACvD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,kDAAkD,CAAC;AAE1D,OAAO,EAaL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AAmClB;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,uCAAuC;IAEvC,YAAY,SAAsD;IAElE,4DAA4D;IAE5D,aAAa,UAAS;IAEtB,8DAA8D;IAE9D,OAAO,UAAS;IAEhB,+EAA+E;IAE/E,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEvC,iCAAiC;IAEjC,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAU;IAExD;;OAEG;IAEH,gBAAgB,UAAS;IAEzB,yCAAyC;IAEzC,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B,0DAA0D;IAE1D,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B,2CAA2C;IAE3C,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,kDAAkD;IAElD,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;iBAEa;IAEb,OAAO,CAAC,SAAS,CAAS;IAE1B,cAAc;IAEd,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAgB,MAAM,EAAE,cAAc,CAuYpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMpD,MAAM;IAYf,OAAO,CAAC,kBAAkB;IAwO1B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAgI1B,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,sBAAsB;IAoD9B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,qBAAqB;IAQ7B,IAAI,KAAK,YAER;IAEY,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAIzC,SAAS,IAAI,aAAa;IAgCjC,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,MAAM,CAAC,WAAW;CAG3B"}

package/dist/pd-contact/PdContact.js

@@ -1,7 +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 '@progressive-development/pd-icon/pd-icon';
+import '@progressive-development/pd-page/pd-socialmedia';
 import '@progressive-development/pd-forms/pd-checkbox';
 import '@progressive-development/pd-forms/pd-form-container';
 import '@progressive-development/pd-forms/pd-form-row';
@@ -59,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 = [];
@@ -132,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;
+      }
     `
     ];
   }
@@ -143,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>
     `;
   }
@@ -154,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()}"
@@ -185,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"
     })}"
@@ -200,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"
     })}"
@@ -217,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"
     })}"
@@ -232,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"
     })}"
@@ -248,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 || ""}"
@@ -257,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 || ""}"
@@ -271,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}"
@@ -279,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"
@@ -290,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 || ""}"
@@ -302,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"
@@ -316,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"
@@ -331,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"
@@ -346,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"
@@ -369,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;
   }
@@ -437,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,
@@ -465,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";
     }
@@ -520,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");

package/dist/pd-contact/pd-contact-edit.stories.d.ts

@@ -1,18 +1,53 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ inputFields, requiredFields, withPropertyDate, contact }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdContactData } from '../types.js';
+/**
+ * Story arguments interface for pd-contact (edit mode).
+ * Maps to the component's public API when used as an editable form.
+ */
+interface PdContactEditArgs {
+    /** List of input fields to display (empty = all fields) */
+    inputFields: string[];
+    /** List of required field keys for validation */
+    requiredFields: string[];
+    /** Show property date selection field */
+    withPropertyDate: boolean;
+    /** Pre-populated contact data */
+    contact?: PdContactData;
+}
+/**
+ * ## pd-contact (Edit Mode)
+ *
+ * Contact form component for creating and editing contact information with
+ * built-in validation support.
+ *
+ * ### Features
+ * - Private/Business contact type toggle via radio group
+ * - Configurable visible fields via `inputFields` array
+ * - Required field validation via `requiredFields` array
+ * - Optional property/building year selection
+ * - Auto-complete hints for browser autofill
+ * - Integration with pd-form-container for validation lifecycle
+ *
+ * ### Form Methods
+ * - `triggerValidate()` — triggers validation and returns Promise<boolean>
+ * - `getValues()` — returns current form data as PdContactData
+ * - `valid` — getter for current validation state
+ */
+declare const meta: Meta<PdContactEditArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const ContactForm: Story;
-export declare const ContactFormRequiredFields: Story;
-export declare const ContactFormRequiredFields2: Story;
-export declare const ContactFormPropertyDate: Story;
-export declare const ContactFormWithInputFields1: Story;
-export declare const ContactFormWithInputFields2: Story;
-export declare const ContactPreparedForm: Story;
-export declare const ContactPreparedFormCompany: Story;
-export declare const ContactPreparedFormPropertyDate: Story;
+type Story = StoryObj<PdContactEditArgs>;
+/** Default empty contact form with all fields visible. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Contact form pre-filled with private person data (first name, last name, address). */
+export declare const PrepopulatedPrivate: Story;
+/** Contact form pre-filled with company data (company name, VAT number). */
+export declare const PrepopulatedCompany: Story;
+/** Form with all fields marked as required — shows validation indicators. */
+export declare const AllFieldsRequired: Story;
+/** Demonstrates showing only a subset of fields using the inputFields array. */
+export declare const CustomFieldSelection: Story;
+/** Form with the optional property/building year selection field enabled. */
+export declare const WithPropertyDate: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-contact-edit.stories.d.ts.map

package/dist/pd-contact/pd-contact-edit.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-contact-edit.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-edit.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAehE,OAAO,iBAAiB,CAAC;AAGzB,QAAA,MAAM,IAAI;;;;CAmCM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AA2BtB,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAevC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAIxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAIrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAIzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAIzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAIxC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAQ7C,CAAC"}
+{"version":3,"file":"pd-contact-edit.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-edit.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAWL,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB,OAAO,iBAAiB,CAAC;AACzB,OAAO,6CAA6C,CAAC;AAMrD;;;GAGG;AACH,UAAU,iBAAiB;IACzB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iDAAiD;IACjD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,yCAAyC;IACzC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iCAAiC;IACjC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAuED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAmFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,0FAA0F;AAC1F,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,EAAE,KAoClC,CAAC;AAMF,6EAA6E;AAC7E,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAuE3B,CAAC"}

package/dist/pd-contact/pd-contact-view.stories.d.ts

@@ -1,13 +1,55 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ summary, phoneMailLink, contact, withPropertyDate }: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdContactData } from '../types.js';
+/**
+ * Story arguments interface for pd-contact (view mode).
+ * Maps to the component's public API when used as a read-only display.
+ */
+interface PdContactViewArgs {
+    /** Show summary view (read-only display) */
+    summary: boolean;
+    /** Render phone and email as clickable links */
+    phoneMailLink: boolean;
+    /** View type: 'detail' or 'card' (business card) */
+    viewType: "detail" | "card";
+    /** Card layout mode: 'auto', 'horizontal', or 'vertical' */
+    cardLayout: "auto" | "horizontal" | "vertical";
+    /** Contact data to display */
+    contact: PdContactData;
+}
+/**
+ * ## pd-contact (View Mode)
+ *
+ * Contact display component for showing contact information in read-only mode.
+ * Supports two view types: detail (structured list) and card (business card layout).
+ *
+ * ### Features
+ * - Detail view with structured address, phone, email, and social media display
+ * - Business card view with logo, responsive layout, and social media integration
+ * - Private and business contact support (company name, VAT number)
+ * - Clickable phone/email links with icons
+ * - Card view with container-query-based responsive layout (auto/horizontal/vertical)
+ * - CSS custom properties for full visual customization
+ * - CSS part `card-wrapper` for external card styling
+ *
+ * ### View Types
+ * - `detail` — Traditional structured contact display (default)
+ * - `card` — Business card layout with logo and social media
+ */
+declare const meta: Meta<PdContactViewArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const ContactView: Story;
-export declare const ContactCompanyView: Story;
-export declare const ContactViewPropertyDate: Story;
-export declare const ContactViewPhone: Story;
+type Story = StoryObj<PdContactViewArgs>;
+/** Default contact view showing a private person. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All detail view variants at a glance: private, company, with title/social media. */
+export declare const AllDetailVariants: Story;
+/** Detail view with titleName as header, website link, and social media integration. */
+export declare const DetailWithTitleAndSocialMedia: Story;
+/** Business card with auto-responsive layout — switches between horizontal (>500px) and vertical (<500px). */
+export declare const CardDefault: Story;
+/** Card view with all three layout modes side by side. */
+export declare const CardLayouts: Story;
+/** Card view with different content configurations: without logo, without social media, minimal. */
+export declare const CardContentVariations: Story;
+/** CSS Custom Properties — Branded and Redesigned card variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-contact-view.stories.d.ts.map

package/dist/pd-contact/pd-contact-view.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-contact-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-view.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,iBAAiB,CAAC;AAGzB,QAAA,MAAM,IAAI;;;;CAYM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AA2BtB,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAQrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}
+{"version":3,"file":"pd-contact-view.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact/pd-contact-view.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,iBAAiB,CAAC;AAMzB;;;GAGG;AACH,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4DAA4D;IAC5D,UAAU,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;IAC/C,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;CACxB;AAyED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAgFjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,qFAAqF;AACrF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,EAAE,KA0C/B,CAAC;AAMF,wFAAwF;AACxF,eAAO,MAAM,6BAA6B,EAAE,KAY3C,CAAC;AAMF,8GAA8G;AAC9G,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAMF,0DAA0D;AAC1D,eAAO,MAAM,WAAW,EAAE,KAwCzB,CAAC;AAMF,oGAAoG;AACpG,eAAO,MAAM,qBAAqB,EAAE,KA+CnC,CAAC;AAMF,oEAAoE;AACpE,eAAO,MAAM,aAAa,EAAE,KAuF3B,CAAC"}

package/dist/types.d.ts

@@ -1,3 +1,5 @@
+import { SocialEntry } from '@progressive-development/pd-page';
+export type { SocialEntry };
 export declare const C_TYPE = "type";
 export declare const C_COMPANY = "companyName";
 export declare const C_BTWNR = "vatNr";
@@ -11,6 +13,10 @@ export declare const C_ADDITIONAL = "additionalHint";
 export declare const C_PROPERTY_DATE = "propertyDate";
 export declare const C_PHONE1 = "phone1";
 export declare const C_EMAIL = "email";
+export declare const C_TITLE_NAME = "titleName";
+export declare const C_LOGO = "logo";
+export declare const C_WEBSITE = "website";
+export declare const C_SOCIAL_MEDIA = "socialMedia";
 export interface PdContactData {
     business?: boolean;
     companyName?: string;
@@ -29,6 +35,10 @@ export interface PdContactData {
     btw?: string;
     kbc?: string;
     bank?: string;
+    titleName?: string;
+    logo?: string;
+    website?: string;
+    socialMedia?: SocialEntry[];
 }
 export interface PdContactMatch {
     zip?: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,eAAO,MAAM,SAAS,gBAAgB,CAAC;AACvC,eAAO,MAAM,OAAO,UAAU,CAAC;AAC/B,eAAO,MAAM,WAAW,cAAc,CAAC;AACvC,eAAO,MAAM,UAAU,aAAa,CAAC;AACrC,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,WAAW,aAAa,CAAC;AACtC,eAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,eAAO,MAAM,KAAK,QAAQ,CAAC;AAC3B,eAAO,MAAM,YAAY,mBAAmB,CAAC;AAC7C,eAAO,MAAM,eAAe,iBAAiB,CAAC;AAC9C,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,OAAO,UAAU,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,kCAAkC,CAAC;AACpE,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B,eAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,eAAO,MAAM,SAAS,gBAAgB,CAAC;AACvC,eAAO,MAAM,OAAO,UAAU,CAAC;AAC/B,eAAO,MAAM,WAAW,cAAc,CAAC;AACvC,eAAO,MAAM,UAAU,aAAa,CAAC;AACrC,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,WAAW,aAAa,CAAC;AACtC,eAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,eAAO,MAAM,KAAK,QAAQ,CAAC;AAC3B,eAAO,MAAM,YAAY,mBAAmB,CAAC;AAC7C,eAAO,MAAM,eAAe,iBAAiB,CAAC;AAC9C,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,OAAO,UAAU,CAAC;AAG/B,eAAO,MAAM,YAAY,cAAc,CAAC;AACxC,eAAO,MAAM,MAAM,SAAS,CAAC;AAC7B,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,cAAc,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB"}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@progressive-development/pd-contact",
-  "version": "0.9.2",
+  "version": "1.0.1",
   "description": "Progressive Development Contact component",
   "author": "PD Progressive Development",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -21,23 +24,6 @@
     "README.md",
     "LICENSE"
   ],
-  "dependencies": {
-    "lit": "^3.3.1",
-    "@lit/localize": "^0.12.2",
-    "tslib": "^2.8.1",
-    "@progressive-development/pd-shared-styles": "0.3.0",
-    "@progressive-development/pd-icon": "0.9.2",
-    "@progressive-development/pd-forms": "0.9.2"
-  },
-  "customElements": "custom-elements.json",
-  "keywords": [
-    "pd",
-    "progressive",
-    "development",
-    "contact",
-    "form",
-    "view"
-  ],
   "scripts": {
     "analyze": "cem analyze --litelement --exclude dist,demo",
     "start": "vite",
@@ -51,9 +37,27 @@
     "test": "vitest run --coverage",
     "test:watch": "vitest --watch",
     "check": "pnpm run lint && pnpm run lint:lit && pnpm run build",
+    "prepublishOnly": "pnpm run clean && pnpm run check",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
-  }
-}
+  },
+  "dependencies": {
+    "lit": "^3.3.1",
+    "@lit/localize": "^0.12.2",
+    "@progressive-development/pd-shared-styles": "workspace:*",
+    "@progressive-development/pd-icon": "workspace:*",
+    "@progressive-development/pd-forms": "workspace:*",
+    "tslib": "^2.8.1"
+  },
+  "customElements": "custom-elements.json",
+  "keywords": [
+    "pd",
+    "progressive",
+    "development",
+    "contact",
+    "form",
+    "view"
+  ]
+}