@progressive-development/pd-contact 0.9.2 → 1.0.0

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"}