@progressive-development/pd-page 0.9.2 → 1.0.1

package/dist/pd-contact-us/PdContactUs.js

@@ -1,7 +1,7 @@
 import { css, LitElement, html } from 'lit';
 import { localized, msg } from '@lit/localize';
-import { property } from 'lit/decorators.js';
-import '@progressive-development/pd-forms/pd-panel-button';
+import { property, query } from 'lit/decorators.js';
+import '@progressive-development/pd-forms/pd-button';
 import '@progressive-development/pd-forms/pd-form-container';
 import '@progressive-development/pd-forms/pd-form-row';
 import '@progressive-development/pd-forms/pd-input';
@@ -26,117 +26,95 @@ let PdContactUs = class extends LitElement {
   }
   render() {
     return html`
-      <div class="content-block">
-        <h2>${msg("Kontakt", { id: "pd.contactus.title" })}</h2>
-
-        <div class="contact-block">
-          <div class="left-content">
-            <pd-contact
-              class="company-contact"
-              .contact="${this.contact}"
-              addressTitle="${msg("Adresse", {
-      id: "pd.contactus.address.title"
-    })}"
-              summary
-            ></pd-contact>
-          </div>
+      <div class="contact-layout">
+        <div class="contact-card">
+          <pd-contact .contact="${this.contact}" summary></pd-contact>
+        </div>
 
-          <div class="right-content">
-            <pd-form-container id="contactFormId">
-              <pd-form-row>
-                <pd-input
-                  id="nameInputId"
-                  class="quarter3"
-                  minlength="3"
-                  maxlength="100"
-                  placeHolder="${msg("Name", {
+        <div class="contact-form">
+          <pd-form-container id="contactFormId">
+            <pd-form-row>
+              <pd-input
+                id="nameInputId"
+                minlength="3"
+                maxlength="100"
+                placeHolder="${msg("Name", {
       id: "pd.contactus.address.name"
     })}"
-                  valueName="name"
-                  autoCompleteName="full-name"
-                  required
-                ></pd-input>
-              </pd-form-row>
+                valueName="name"
+                autoCompleteName="full-name"
+                required
+              ></pd-input>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-input
-                  id="mailInputId"
-                  class="quarter3"
-                  placeHolder="${msg("Email", {
+            <pd-form-row>
+              <pd-input
+                id="mailInputId"
+                placeHolder="${msg("Email", {
       id: "pd.contactus.address.email"
     })}"
-                  valueName="email"
-                  autoCompleteName="email"
-                  name="email"
-                  fieldType="mail"
-                  required
-                ></pd-input>
-              </pd-form-row>
+                valueName="email"
+                autoCompleteName="email"
+                name="email"
+                fieldType="mail"
+                required
+              ></pd-input>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-input
-                  id="phoneInputId"
-                  class="quarter3"
-                  placeHolder="${msg("Telefon", {
+            <pd-form-row>
+              <pd-input
+                id="phoneInputId"
+                placeHolder="${msg("Telefon", {
       id: "pd.contactus.address.phone"
     })}"
-                  valueName="phone"
-                  fieldType="phone"
-                  autoCompleteName="tel"
-                  required
-                ></pd-input>
-              </pd-form-row>
+                valueName="phone"
+                fieldType="phone"
+                autoCompleteName="tel"
+                required
+              ></pd-input>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-input-area
-                  id="msgInputId"
-                  class="quarter3-area"
-                  minlength="6"
-                  maxlength="500"
-                  placeHolder="${msg("Nachricht", {
+            <pd-form-row>
+              <pd-input-area
+                id="msgInputId"
+                minlength="6"
+                maxlength="500"
+                placeHolder="${msg("Nachricht", {
       id: "pd.contactus.address.message"
     })}"
-                  rows="8"
-                  required
-                  valueName="msg1"
-                ></pd-input-area>
-              </pd-form-row>
+                rows="8"
+                required
+                valueName="msg1"
+              ></pd-input-area>
+            </pd-form-row>
 
-              <pd-form-row>
-                <pd-panel-button
-                  class="quarter3"
-                  pdButtonIcon="${pdIcons.ICON_MAIL}"
-                  buttonText="${msg("Absenden", {
+            <pd-form-row>
+              <pd-button
+                icon="${pdIcons.ICON_MAIL}"
+                text="${msg("Absenden", {
       id: "pd.contactus.address.send"
     })}"
-                  @click="${this._sendMail}"
-                  primary
-                ></pd-panel-button>
-              </pd-form-row>
-            </pd-form-container>
-          </div>
+                @button-clicked="${this._sendMail}"
+                primary
+              ></pd-button>
+            </pd-form-row>
+          </pd-form-container>
         </div>
       </div>
     `;
   }
   clear() {
-    this.shadowRoot?.getElementById("nameInputId")?.["clear"]?.();
-    this.shadowRoot?.getElementById("mailInputId")?.["clear"]?.();
-    this.shadowRoot?.getElementById("phoneInputId")?.["clear"]?.();
-    this.shadowRoot?.getElementById("msgInputId")?.["clear"]?.();
+    this._form?.clear();
   }
   _sendMail() {
-    const form = this.shadowRoot?.getElementById(
-      "contactFormId"
-    );
-    form.triggerValidate().then((result) => {
+    this._form.triggerValidate().then((result) => {
       if (result) {
         this.dispatchEvent(
           new CustomEvent("send-contact-request", {
-            detail: { msgObj: form.getValues().origin }
+            detail: { msgObj: this._form.getValues().origin }
           })
         );
-        form.reset();
+        this._form.reset();
       }
     });
   }
@@ -144,75 +122,60 @@ let PdContactUs = class extends LitElement {
 PdContactUs.styles = [
   css`
       :host {
-        display: flex;
-        flex-flow: row;
+        display: block;
         background-color: var(--pd-contactus-bg-col, var(--pd-default-col));
         background-image: var(--pd-contactus-bg-image);
         background-repeat: no-repeat;
-        min-height: 500px;
         width: 100%;
       }
 
-      h2 {
-        font-family: var(--pd-default-font-title-family);
-        font-style: normal;
-        color: var(--pd-contactus-font-col, var(--pd-default-bg-col));
-        margin-top: 1.4em;
-        margin-bottom: 2.5rem;
-        font-size: var(--pd-contactus-font-h2-size, 2.5rem);
-      }
-
-      .content-block {
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        flex-grow: 1;
-        max-width: 1170px;
-        margin: 0 auto;
-        padding-left: 30px;
-      }
-
-      .contact-block {
+      .contact-layout {
         display: flex;
         flex-wrap: wrap;
-        padding-bottom: 50px;
-      }
-
-      .left-content {
-        width: 35%;
-        min-width: 230px;
-      }
-
-      .right-content {
-        width: 65%;
+        gap: 2rem;
+        align-items: flex-start;
       }
 
-      .company-contact {
-        --app-font-content-col: var(
+      .contact-card {
+        flex: 1 1 300px;
+        min-width: 280px;
+        max-width: 420px;
+        /* Forward --pd-contactus-font-col to pd-contact internals */
+        --pd-contact-address-col: var(
+          --pd-contactus-font-col,
+          var(--pd-default-bg-col)
+        );
+        --pd-contact-address-title-col: var(
+          --pd-contactus-font-col,
+          var(--pd-default-bg-col)
+        );
+        --pd-default-font-content-col: var(
+          --pd-contactus-font-col,
+          var(--pd-default-bg-col)
+        );
+        --pd-default-font-title-col: var(
           --pd-contactus-font-col,
           var(--pd-default-bg-col)
         );
-        --app-font-title-col: var(
+        --pd-contact-icon-col: var(
           --pd-contactus-font-col,
           var(--pd-default-bg-col)
         );
       }
 
-      @media (max-width: 440px) {
-        .item {
-          display: none;
-        }
-        ul {
-          justify-content: flex-start;
-        }
+      .contact-form {
+        flex: 1 1 360px;
+        min-width: 300px;
+        max-width: 520px;
       }
     `
 ];
 __decorateClass([
   property({ type: Object })
 ], PdContactUs.prototype, "contact", 2);
+__decorateClass([
+  query("#contactFormId")
+], PdContactUs.prototype, "_form", 2);
 PdContactUs = __decorateClass([
   localized()
 ], PdContactUs);

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

@@ -1,6 +1,37 @@
-import { Meta, StoryFn } from '@storybook/web-components';
-import { PdContactUs } from './pd-contact-us';
-declare const _default: Meta<PdContactUs>;
-export default _default;
-export declare const Default: StoryFn<PdContactUs>;
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdContactData } from '@progressive-development/pd-contact';
+/**
+ * Story arguments interface for pd-contact-us component.
+ * Maps to the component's public API.
+ */
+interface PdContactUsArgs {
+    /** Contact data for address display */
+    contact: PdContactData;
+}
+/**
+ * ## pd-contact-us
+ *
+ * Contact section with company address card and message form.
+ *
+ * ### Features
+ * - **Address Display**: Shows company contact information via pd-contact card
+ * - **Contact Form**: Name, email, phone, and message fields with validation
+ * - **Responsive Layout**: Card and form wrap below each other on narrow screens
+ * - **Localization**: All labels localized via @lit/localize
+ * - **Email/Phone Types**: Proper input types for better mobile UX
+ *
+ * ### Accessibility
+ * - Form fields use proper input types (email, tel)
+ * - Required fields are marked for screen readers
+ * - Submit button uses native button semantics
+ */
+declare const meta: Meta<PdContactUsArgs>;
+export default meta;
+type Story = StoryObj<PdContactUsArgs>;
+/** Default contact section with company info and message form. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All contact data configurations at a glance: full, standard, and minimal. */
+export declare const AllVariants: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-contact-us.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-contact-us.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact-us/pd-contact-us.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,iBAAiB,CAAC;wBAoBpB,IAAI,CAAC,WAAW,CAAC;AAlBtB,wBAkBuB;AAMvB,eAAO,MAAM,OAAO,sBAAoB,CAAC"}
+{"version":3,"file":"pd-contact-us.stories.d.ts","sourceRoot":"","sources":["../../src/pd-contact-us/pd-contact-us.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAEzE,OAAO,oBAAoB,CAAC;AAM5B;;;GAGG;AACH,UAAU,eAAe;IACvB,uCAAuC;IACvC,OAAO,EAAE,aAAa,CAAC;CACxB;AAoCD;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CA8D/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMvC,kGAAkG;AAClG,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAMjC,gFAAgF;AAChF,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA2D3B,CAAC"}

package/dist/pd-footer/PdFooter.d.ts

@@ -1,31 +1,43 @@
 import { LitElement, CSSResultGroup } from 'lit';
 import { PdFooterLink, PdFooterMadeBy } from '../types';
 /**
- * Footer-Komponente mit konfigurierbaren Links, Version und Copyright.
+ * Application footer with links, version, and copyright.
+ *
+ * @summary Footer with navigation links, copyright, version, and developer reference.
  *
- * @fires footer-link - Wird ausgelöst, wenn auf einen Footer-Link geklickt wird.
- * @slot - Standard-Slot nicht verwendet.
  * @tagname pd-footer
+ *
+ * @event footer-link - Fired when a footer link is clicked.
+ *
+ * @cssprop --pd-footer-bg-col - Footer background. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-footer-font-col - Footer text color. Default: `var(--pd-on-primary-col)`.
+ * @cssprop --pd-footer-font-family - Footer font family. Default: `var(--pd-default-font-link-family)`.
+ * @cssprop --pd-footer-font-size - Footer font size. Default: `1.1em`.
+ * @cssprop --pd-footer-bottom-col - Bottom line background. Default: `var(--pd-default-light-col)`.
+ * @cssprop --pd-footer-bottom-font-size - Bottom line font size. Default: `0.9em`.
+ * @cssprop --pd-footer-bottom-font-col - Bottom line text color. Default: `var(--pd-default-dark-col)`.
  */
 export declare class PdFooter extends LitElement {
-    /**
-     * Optional: Copyright-Zeile, z.B. "2024 PD Progressive Development UG".
-     */
+    /** Copyright text, e.g. "2024 PD Progressive Development UG". */
     copyright: string;
-    /**
-     * Optionale Versionsangabe, z.B. "v1.2.3".
-     */
+    /** Version string, e.g. "v1.2.3". */
     version: string;
-    /**
-     * Optionaler Verweis auf den Entwickler oder die Agentur.
-     */
+    /** Developer or agency reference with text and email/link. */
     madeBy?: PdFooterMadeBy;
-    /**
-     * Liste von Footer-Links.
-     */
+    /** Footer navigation links. */
     footerLinks: PdFooterLink[];
     static styles: CSSResultGroup;
     render(): import('lit').TemplateResult<1>;
+    /**
+     * Handles keyboard events on footer links.
+     * Activates on Enter or Space key.
+     */
+    private _handleLinkKeydown;
+    /**
+     * Handles keyboard events on madeBy element.
+     * Activates on Enter or Space key.
+     */
+    private _handleMadeByKeydown;
     private _clickMadeBy;
     private _footerLinkClicked;
 }

package/dist/pd-footer/PdFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdFooter.d.ts","sourceRoot":"","sources":["../../src/pd-footer/PdFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;OAEG;IAEH,WAAW,EAAE,YAAY,EAAE,CAAM;IAEjC,OAAgB,MAAM,EAAE,cAAc,CAyEpC;IAEO,MAAM;IAmCf,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,kBAAkB;CAe3B"}
+{"version":3,"file":"PdFooter.d.ts","sourceRoot":"","sources":["../../src/pd-footer/PdFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,iEAAiE;IAEjE,SAAS,SAAM;IAEf,qCAAqC;IAErC,OAAO,SAAM;IAEb,8DAA8D;IAE9D,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB,+BAA+B;IAE/B,WAAW,EAAE,YAAY,EAAE,CAAM;IAEjC,OAAgB,MAAM,EAAE,cAAc,CAsFpC;IAEO,MAAM;IA+Cf;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAO1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,kBAAkB;CAe3B"}

package/dist/pd-footer/PdFooter.js

@@ -1,25 +1,111 @@
-import { LitElement, css, nothing, html } from 'lit';
+import { css, LitElement, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class PdFooter extends LitElement {
+let PdFooter = class extends LitElement {
   constructor() {
     super(...arguments);
     this.copyright = "";
     this.version = "";
     this.footerLinks = [];
   }
-  static {
-    this.styles = [
-      css`
+  render() {
+    return html`
+      <nav
+        class="footer-links"
+        aria-label="${msg("Footer Navigation", { id: "pd.footer.nav.aria" })}"
+      >
+        <ul role="list">
+          ${this.footerLinks?.map(
+      (link) => html`
+              <li
+                role="button"
+                tabindex="0"
+                data-link="${link.key}"
+                @click="${this._footerLinkClicked}"
+                @keydown="${this._handleLinkKeydown}"
+              >
+                ${link.name}
+              </li>
+            `
+    )}
+        </ul>
+      </nav>
+
+      <div class="bottom-line">
+        <div>
+          ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : nothing}
+          ${this.version ? html`<span class="version">${this.version}</span>` : nothing}
+        </div>
+
+        ${this.madeBy ? html`<span
+              class="made-by"
+              role="button"
+              tabindex="0"
+              @click="${this._clickMadeBy}"
+              @keydown="${this._handleMadeByKeydown}"
+              >${this.madeBy.txt}</span
+            >` : nothing}
+      </div>
+    `;
+  }
+  /**
+   * Handles keyboard events on footer links.
+   * Activates on Enter or Space key.
+   */
+  _handleLinkKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._footerLinkClicked(e);
+    }
+  }
+  /**
+   * Handles keyboard events on madeBy element.
+   * Activates on Enter or Space key.
+   */
+  _handleMadeByKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._clickMadeBy();
+    }
+  }
+  _clickMadeBy() {
+    if (this.madeBy?.email) {
+      window.location.href = `mailto:${this.madeBy.email}`;
+    } else if (this.madeBy?.link) {
+      const url = this.madeBy.link;
+      if (url.startsWith("https://") || url.startsWith("http://")) {
+        window.open(url, "_blank", "noopener,noreferrer");
+      }
+    }
+  }
+  _footerLinkClicked(e) {
+    const target = e.currentTarget;
+    const linkKey = target.dataset.link;
+    const linkObj = this.footerLinks?.find((fl) => fl.key === linkKey);
+    if (linkObj) {
+      this.dispatchEvent(
+        new CustomEvent("footer-link", {
+          detail: { linkObj },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+};
+PdFooter.styles = [
+  css`
       :host {
         display: flex;
         flex-flow: column;
@@ -34,7 +120,7 @@ class PdFooter extends LitElement {
         align-items: center;
         justify-content: right;
         height: 100%;
-        color: var(--pd-footer-font-col, var(--pd-default-bg-col));
+        color: var(--pd-footer-font-col, var(--pd-on-primary-col));
         font-family: var(
           --pd-footer-font-family,
           var(--pd-default-font-link-family)
@@ -46,9 +132,9 @@ class PdFooter extends LitElement {
         display: flex;
         flex-wrap: wrap;
         list-style: none;
-        gap: 2em;
+        gap: var(--pd-spacing-lg);
         margin: 0;
-        padding: 2em 2.5em;
+        padding: var(--pd-spacing-lg);
       }
 
       .footer-links li {
@@ -59,6 +145,12 @@ class PdFooter extends LitElement {
         color: var(--pd-default-hover-col);
       }
 
+      .footer-links li:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm);
+      }
+
       .bottom-line {
         background-color: var(
           --pd-footer-bottom-col,
@@ -66,9 +158,9 @@ class PdFooter extends LitElement {
         );
         font-size: var(--pd-footer-bottom-font-size, 0.9em);
         color: var(--pd-footer-bottom-font-col, var(--pd-default-dark-col));
-        padding: 0.5em;
+        padding: var(--pd-spacing-sm);
         display: flex;
-        gap: 1em;
+        gap: var(--pd-spacing-md);
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
@@ -82,78 +174,37 @@ class PdFooter extends LitElement {
         font-weight: normal;
       }
 
-      .madeBy {
+      .made-by {
         cursor: pointer;
         font-style: italic;
+        white-space: normal;
       }
 
-      .madeBy:hover {
+      .made-by:hover {
         color: var(--pd-default-col);
       }
-    `
-    ];
-  }
-  render() {
-    return html`
-      <div class="footer-links">
-        <ul>
-          ${this.footerLinks?.map(
-      (link) => html`
-              <li>
-                <a @click=${this._footerLinkClicked} data-link=${link.key}
-                  >${link.name}</a
-                >
-              </li>
-            `
-    )}
-        </ul>
-      </div>
 
-      <div class="bottom-line">
-        <div>
-          ${this.copyright ? html`<span class="copyright">© ${this.copyright}, </span>` : nothing}
-          ${this.version ? html`<span class="version">${this.version}</span>` : nothing}
-        </div>
-
-        ${this.madeBy ? html`<span class="madeBy" @click=${this._clickMadeBy}
-              >${this.madeBy.txt}</span
-            >` : nothing}
-      </div>
-    `;
-  }
-  _clickMadeBy() {
-    if (this.madeBy?.email) {
-      window.location.href = `mailto:${this.madeBy.email}`;
-    } else if (this.madeBy?.link) {
-      window.open(this.madeBy.link, "_blank");
-    }
-  }
-  _footerLinkClicked(e) {
-    const target = e.currentTarget;
-    const linkKey = target.dataset.link;
-    const linkObj = this.footerLinks?.find((fl) => fl.key === linkKey);
-    if (linkObj) {
-      this.dispatchEvent(
-        new CustomEvent("footer-link", {
-          detail: { linkObj },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-}
+      .made-by:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-col));
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-sm);
+      }
+    `
+];
 __decorateClass([
   property({ type: String })
-], PdFooter.prototype, "copyright");
+], PdFooter.prototype, "copyright", 2);
 __decorateClass([
   property({ type: String })
-], PdFooter.prototype, "version");
+], PdFooter.prototype, "version", 2);
 __decorateClass([
   property({ type: Object })
-], PdFooter.prototype, "madeBy");
+], PdFooter.prototype, "madeBy", 2);
 __decorateClass([
   property({ type: Array })
-], PdFooter.prototype, "footerLinks");
+], PdFooter.prototype, "footerLinks", 2);
+PdFooter = __decorateClass([
+  localized()
+], PdFooter);
 
 export { PdFooter };