@progressive-development/pd-page 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,53 @@
-# \<pd-page>
+# @progressive-development/pd-page
 
-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-page.svg)](https://www.npmjs.com/package/@progressive-development/pd-page)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+Page layout components for navigation, footer, and contact sections.
+
+## 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
+- **Smart Scroll Navigation** – Auto-highlight menu items based on scroll position with smooth scrolling
+- **Responsive Menu** – Desktop navigation with automatic burger menu on mobile
+- **Dual-Mode Social Media** – View mode for icon links, edit mode for managing profiles
+- **Integrated Contact Form** – Split layout with company address and validated contact form
 
 ## Installation
 
 ```bash
-npm i pd-page
+npm install @progressive-development/pd-page
 ```
 
-## Usage
+## Quick Start
 
 ```html
 <script type="module">
-  import 'pd-page/pd-page.js';
+  import '@progressive-development/pd-page';
 </script>
 
-<pd-page></pd-page>
+<pd-menu .menuItems=${items}></pd-menu>
+<pd-footer></pd-footer>
 ```
 
-## Linting and formatting
+## Components
 
-To scan the project for linting and formatting errors, run
+| Component | Description |
+|-----------|-------------|
+| `<pd-menu>` | Responsive navigation menu with scroll tracking |
+| `<pd-footer>` | Page footer |
+| `<pd-contact-us>` | Contact section with form and address |
+| `<pd-socialmedia>` | Social media links (view and edit 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/generated/locales/be.d.ts

@@ -6,6 +6,24 @@ export declare const templates: {
     "pd.contactus.address.send": string;
     "pd.contactus.address.title": string;
     "pd.contactus.title": string;
-    "pd.menu.label": string;
+    "pd.login.email.label": string;
+    "pd.login.forgot.back": string;
+    "pd.login.forgot.info": string;
+    "pd.login.forgot.password": string;
+    "pd.login.forgot.submit": string;
+    "pd.login.password.label": string;
+    "pd.login.submit": string;
+    "pdPage.toast.ariaClose": string;
+    "pd.footer.nav.aria": string;
+    "pd.menu.nav.aria": string;
+    "pd.menu.locale.aria": string;
+    "pd.menu.burger.aria": string;
+    "pd.socialmedia.aria.label": string;
+    "pd.socialmedia.empty": string;
+    "pd.socialmedia.new.entry": string;
+    "pd.socialmedia.placeholder": string;
+    "pd.socialmedia.delete": string;
+    "pd.socialmedia.cancel": string;
+    "pd.socialmedia.save": string;
 };
 //# sourceMappingURL=be.d.ts.map

package/dist/generated/locales/be.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAC"}
+{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC"}

package/dist/generated/locales/de.d.ts

@@ -6,6 +6,24 @@ export declare const templates: {
     "pd.contactus.address.phone": string;
     "pd.contactus.address.message": string;
     "pd.contactus.address.send": string;
-    "pd.menu.label": string;
+    "pd.footer.nav.aria": string;
+    "pd.login.email.label": string;
+    "pd.login.password.label": string;
+    "pd.login.forgot.password": string;
+    "pd.login.submit": string;
+    "pd.login.forgot.info": string;
+    "pd.login.forgot.back": string;
+    "pd.login.forgot.submit": string;
+    "pd.menu.nav.aria": string;
+    "pd.menu.locale.aria": string;
+    "pd.menu.burger.aria": string;
+    "pd.socialmedia.aria.label": string;
+    "pd.socialmedia.empty": string;
+    "pd.socialmedia.new.entry": string;
+    "pd.socialmedia.placeholder": string;
+    "pd.socialmedia.delete": string;
+    "pd.socialmedia.cancel": string;
+    "pd.socialmedia.save": string;
+    "pdPage.toast.ariaClose": string;
 };
 //# sourceMappingURL=de.d.ts.map

package/dist/generated/locales/de.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAC"}
+{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC"}

package/dist/generated/locales/en.d.ts

@@ -6,6 +6,24 @@ export declare const templates: {
     "pd.contactus.address.send": string;
     "pd.contactus.address.title": string;
     "pd.contactus.title": string;
-    "pd.menu.label": string;
+    "pd.login.email.label": string;
+    "pd.login.forgot.back": string;
+    "pd.login.forgot.info": string;
+    "pd.login.forgot.password": string;
+    "pd.login.forgot.submit": string;
+    "pd.login.password.label": string;
+    "pd.login.submit": string;
+    "pdPage.toast.ariaClose": string;
+    "pd.footer.nav.aria": string;
+    "pd.menu.nav.aria": string;
+    "pd.menu.locale.aria": string;
+    "pd.menu.burger.aria": string;
+    "pd.socialmedia.aria.label": string;
+    "pd.socialmedia.empty": string;
+    "pd.socialmedia.new.entry": string;
+    "pd.socialmedia.placeholder": string;
+    "pd.socialmedia.delete": string;
+    "pd.socialmedia.cancel": string;
+    "pd.socialmedia.save": string;
 };
 //# sourceMappingURL=en.d.ts.map

package/dist/generated/locales/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC"}

package/dist/index.d.ts

@@ -1,7 +1,12 @@
 export { PdContactUs } from './pd-contact-us/pd-contact-us.js';
 export { PdFooter } from './pd-footer/pd-footer.js';
+export { PdLogin } from './pd-login/pd-login.js';
 export { PdMenu } from './pd-menu/pd-menu.js';
-export type { PdFooterLink, PdFooterMadeBy, PdMenuItem } from './types.js';
+export { PdSocialmedia } from './pd-socialmedia/pd-socialmedia.js';
+export { PdToast } from './pd-toast/pd-toast.js';
+export type { PdFooterLink, PdFooterMadeBy, PdMenuItem, SocialEntry, LoginAttemptDetail, ForgotPasswordAttemptDetail, } from './types.js';
+export { toastBus } from './toast-bus/toast-bus.js';
+export type { ToastType, ToastDetail } from './toast-bus/toast-bus.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,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE3E,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,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,WAAW,EACX,kBAAkB,EAClB,2BAA2B,GAC5B,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvE,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/index.js

@@ -1,9 +1,16 @@
 import './pd-contact-us.js';
 import './pd-footer.js';
+import './pd-login.js';
 import './pd-menu.js';
+import './pd-socialmedia.js';
+import './pd-toast.js';
+export { toastBus } from './toast-bus/toast-bus.js';
 export { templates as beTemplates } from './locales/be.js';
 export { templates as deTemplates } from './locales/de.js';
 export { templates as enTemplates } from './locales/en.js';
 export { PdContactUs } from './pd-contact-us/PdContactUs.js';
 export { PdFooter } from './pd-footer/PdFooter.js';
+export { PdLogin } from './pd-login/PdLogin.js';
 export { PdMenu } from './pd-menu/PdMenu.js';
+export { PdSocialmedia } from './pd-socialmedia/PdSocialmedia.js';
+export { PdToast } from './pd-toast/PdToast.js';

package/dist/locales/be.js

@@ -6,7 +6,25 @@ const templates = {
   "pd.contactus.address.send": `Verzenden`,
   "pd.contactus.address.title": `Adres`,
   "pd.contactus.title": `Contact`,
-  "pd.menu.label": `Menü`
+  "pd.login.email.label": `E-mail`,
+  "pd.login.forgot.back": `Terug naar aanmelden`,
+  "pd.login.forgot.info": `Voer uw e-mailadres in. U ontvangt een link om uw wachtwoord opnieuw in te stellen.`,
+  "pd.login.forgot.password": `Wachtwoord vergeten?`,
+  "pd.login.forgot.submit": `Link aanvragen`,
+  "pd.login.password.label": `Wachtwoord`,
+  "pd.login.submit": `Aanmelden`,
+  "pdPage.toast.ariaClose": `Sluiten`,
+  "pd.footer.nav.aria": `Footer Navigation`,
+  "pd.menu.nav.aria": `Hauptnavigation`,
+  "pd.menu.locale.aria": `Sprache auswählen`,
+  "pd.menu.burger.aria": `Menü öffnen`,
+  "pd.socialmedia.aria.label": `Social-Media-Profile`,
+  "pd.socialmedia.empty": `Keine Einträge`,
+  "pd.socialmedia.new.entry": `Neuer Eintrag`,
+  "pd.socialmedia.placeholder": `Socialmedia eingeben...`,
+  "pd.socialmedia.delete": `Eintrag löschen`,
+  "pd.socialmedia.cancel": `Abbrechen`,
+  "pd.socialmedia.save": `Speichern`
 };
 
 export { templates };

package/dist/locales/de.js

@@ -6,7 +6,25 @@ const templates = {
   "pd.contactus.address.phone": `Telefon`,
   "pd.contactus.address.message": `Nachricht`,
   "pd.contactus.address.send": `Absenden`,
-  "pd.menu.label": `Menü`
+  "pd.footer.nav.aria": `Footer Navigation`,
+  "pd.login.email.label": `E-Mail`,
+  "pd.login.password.label": `Passwort`,
+  "pd.login.forgot.password": `Passwort vergessen?`,
+  "pd.login.submit": `Anmelden`,
+  "pd.login.forgot.info": `Geben Sie Ihre E-Mail-Adresse ein. Sie erhalten einen Link zum Zurücksetzen Ihres Passworts.`,
+  "pd.login.forgot.back": `Zurück zur Anmeldung`,
+  "pd.login.forgot.submit": `Link anfordern`,
+  "pd.menu.nav.aria": `Hauptnavigation`,
+  "pd.menu.locale.aria": `Sprache auswählen`,
+  "pd.menu.burger.aria": `Menü öffnen`,
+  "pd.socialmedia.aria.label": `Social-Media-Profile`,
+  "pd.socialmedia.empty": `Keine Einträge`,
+  "pd.socialmedia.new.entry": `Neuer Eintrag`,
+  "pd.socialmedia.placeholder": `Socialmedia eingeben...`,
+  "pd.socialmedia.delete": `Eintrag löschen`,
+  "pd.socialmedia.cancel": `Abbrechen`,
+  "pd.socialmedia.save": `Speichern`,
+  "pdPage.toast.ariaClose": `Schließen`
 };
 
 export { templates };

package/dist/locales/en.js

@@ -6,7 +6,25 @@ const templates = {
   "pd.contactus.address.send": `Send`,
   "pd.contactus.address.title": `Address`,
   "pd.contactus.title": `Contact`,
-  "pd.menu.label": `Menü`
+  "pd.login.email.label": `Email`,
+  "pd.login.forgot.back": `Back to Login`,
+  "pd.login.forgot.info": `Enter your email address. You will receive a link to reset your password.`,
+  "pd.login.forgot.password": `Forgot password?`,
+  "pd.login.forgot.submit": `Request Link`,
+  "pd.login.password.label": `Password`,
+  "pd.login.submit": `Sign in`,
+  "pdPage.toast.ariaClose": `Close`,
+  "pd.footer.nav.aria": `Footer Navigation`,
+  "pd.menu.nav.aria": `Hauptnavigation`,
+  "pd.menu.locale.aria": `Sprache auswählen`,
+  "pd.menu.burger.aria": `Menü öffnen`,
+  "pd.socialmedia.aria.label": `Social-Media-Profile`,
+  "pd.socialmedia.empty": `Keine Einträge`,
+  "pd.socialmedia.new.entry": `Neuer Eintrag`,
+  "pd.socialmedia.placeholder": `Socialmedia eingeben...`,
+  "pd.socialmedia.delete": `Eintrag löschen`,
+  "pd.socialmedia.cancel": `Abbrechen`,
+  "pd.socialmedia.save": `Speichern`
 };
 
 export { templates };

package/dist/pd-contact-us/PdContactUs.d.ts

@@ -1,16 +1,26 @@
 import { LitElement, CSSResultGroup } from 'lit';
 import { PdContactData } from '@progressive-development/pd-contact';
 /**
- * Contact form component with company address and message form.
+ * Contact form with company address card and message form.
+ *
+ * Displays a pd-contact card on the left and a message form on the right.
+ * Both sides wrap below each other when the container is too narrow.
+ *
+ * @summary Contact section with card-style address display and message form.
  *
- * @event send-contact-request - Fired when the contact form is valid and submitted.
  * @tagname pd-contact-us
+ *
+ * @event send-contact-request - Fired when form is valid and submitted with `{msgObj}` detail.
+ *
+ * @cssprop --pd-contactus-bg-col - Section background. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-contactus-bg-image - Optional background image.
+ * @cssprop --pd-contactus-font-col - Text color. Default: `var(--pd-default-bg-col)`.
  */
 export declare class PdContactUs extends LitElement {
-    /**
-     * Contact data displayed in the address section.
-     */
+    /** Contact data displayed in the card. */
     contact: PdContactData;
+    /** @ignore */
+    private _form;
     static styles: CSSResultGroup;
     render(): import('lit').TemplateResult<1>;
     clear(): void;

package/dist/pd-contact-us/PdContactUs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdContactUs.d.ts","sourceRoot":"","sources":["../../src/pd-contact-us/PdContactUs.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEpE,OAAO,mDAAmD,CAAC;AAC3D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AAIxD;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAM;IAE5B,OAAgB,MAAM,EAAE,cAAc,CAoEpC;IAEF,MAAM;IAgGN,KAAK,IAAI,IAAI;IAOb,OAAO,CAAC,SAAS;CAelB"}
+{"version":3,"file":"PdContactUs.d.ts","sourceRoot":"","sources":["../../src/pd-contact-us/PdContactUs.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEpE,OAAO,6CAA6C,CAAC;AACrD,OAAO,qDAAqD,CAAC;AAC7D,OAAO,+CAA+C,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AAIxD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,0CAA0C;IAE1C,OAAO,EAAE,aAAa,CAAM;IAE5B,cAAc;IAEd,OAAO,CAAC,KAAK,CAAmB;IAEhC,OAAgB,MAAM,EAAE,cAAc,CAkDpC;IAEF,MAAM;IAgFN,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,SAAS;CAYlB"}