Package Exports
- @progressive-development/pd-composite
- @progressive-development/pd-composite/locales/be
- @progressive-development/pd-composite/locales/de
- @progressive-development/pd-composite/locales/en
- @progressive-development/pd-composite/pd-contact
- @progressive-development/pd-composite/pd-icon-picker
- @progressive-development/pd-composite/pd-markdown-input
- @progressive-development/pd-composite/pd-socialmedia
Readme
@progressive-development/pd-contact
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
npm install @progressive-development/pd-contactQuick Start
<script type="module">
import '@progressive-development/pd-contact';
</script>
<pd-contact></pd-contact>Components
| Component | Description |
|---|---|
<pd-contact> |
Contact form with edit and view modes |
Documentation
📖 Full documentation: pd-components.web.app