@progressive-development/pd-page 0.6.25 → 0.9.1

package/dist/pd-footer/PdFooter.js

@@ -0,0 +1,162 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  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);
+  return result;
+};
+class PdFooter extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.copyright = "";
+    this.version = "";
+    this.footerLinks = [];
+  }
+  static {
+    this.styles = [
+      PdColorStyles,
+      PdFontStyles,
+      css`
+      :host {
+        display: flex;
+        flex-flow: column;
+        justify-content: end;
+        background-color: var(--pd-footer-bg-col, var(--pd-default-col));
+        width: 100%;
+        white-space: nowrap;
+      }
+
+      .footer-links {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+        height: 100%;
+        color: var(--pd-footer-font-col, var(--pd-default-bg-col));
+        font-family: var(
+          --pd-footer-font-family,
+          var(--pd-default-font-link-family)
+        );
+        font-size: var(--pd-footer-font-size, 1.1em);
+      }
+
+      .footer-links ul {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        gap: 2em;
+        margin: 0;
+        padding: 2em 2.5em;
+      }
+
+      .footer-links li {
+        cursor: pointer;
+      }
+
+      .footer-links li:hover {
+        color: var(--pd-default-hover-col);
+      }
+
+      .bottom-line {
+        background-color: var(
+          --pd-footer-bottom-col,
+          var(--pd-default-light-col)
+        );
+        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;
+        display: flex;
+        gap: 1em;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .copyright {
+        font-weight: bold;
+      }
+
+      .version {
+        font-weight: normal;
+      }
+
+      .madeBy {
+        cursor: pointer;
+        font-style: italic;
+      }
+
+      .madeBy: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
+        })
+      );
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdFooter.prototype, "copyright");
+__decorateClass([
+  property({ type: String })
+], PdFooter.prototype, "version");
+__decorateClass([
+  property({ type: Object })
+], PdFooter.prototype, "madeBy");
+__decorateClass([
+  property({ type: Array })
+], PdFooter.prototype, "footerLinks");
+
+export { PdFooter };

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

@@ -0,0 +1,3 @@
+import { PdFooter } from './PdFooter.js';
+export { PdFooter };
+//# sourceMappingURL=pd-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-footer.d.ts","sourceRoot":"","sources":["../../src/pd-footer/pd-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOzC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-footer.stories.d.ts","sourceRoot":"","sources":["../../src/pd-footer/pd-footer.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,gBAAgB,CAAC;wBAcnB,IAAI;AAZT,wBAYU;AAuBV,eAAO,MAAM,OAAO,EAAE,OAA2B,CAAC;AAQlD,eAAO,MAAM,oBAAoB,EAAE,OAA2B,CAAC;AAM/D,eAAO,MAAM,QAAQ,EAAE,OAA2B,CAAC;AAKnD,eAAO,MAAM,gBAAgB,EAAE,OAA2B,CAAC"}

package/dist/pd-footer.d.ts

@@ -1,31 +1,2 @@
-import { LitElement, CSSResultGroup } from 'lit';
-import { PdFooterLink, PdFooterMadeBy } from './types';
-/**
- * Footer-Komponente mit konfigurierbaren Links, Version und Copyright.
- *
- * @fires footer-link - Wird ausgelöst, wenn auf einen Footer-Link geklickt wird.
- * @slot - Standard-Slot nicht verwendet.
- */
-export declare class PdFooter extends LitElement {
-    /**
-     * Optional: Copyright-Zeile, z.B. "2024 PD Progressive Development UG".
-     */
-    copyright: string;
-    /**
-     * Optionale Versionsangabe, z.B. "v1.2.3".
-     */
-    version: string;
-    /**
-     * Optionaler Verweis auf den Entwickler oder die Agentur.
-     */
-    madeBy?: PdFooterMadeBy;
-    /**
-     * Liste von Footer-Links.
-     */
-    footerLinks: PdFooterLink[];
-    static styles: CSSResultGroup;
-    render(): import('lit-html').TemplateResult<1>;
-    private _clickMadeBy;
-    private _footerLinkClicked;
-}
-//# sourceMappingURL=pd-footer.d.ts.map
+export * from './pd-footer/pd-footer'
+export {}

package/dist/pd-footer.js

@@ -1,167 +1,8 @@
-import { css, LitElement, nothing, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdFooter = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.copyright = "";
-    this.version = "";
-    this.footerLinks = [];
-  }
-  render() {
-    var _a;
-    return html`
-      <div class="footer-links">
-        <ul>
-          ${(_a = this.footerLinks) == null ? void 0 : _a.map(
-      (link) => html`
-              <li>
-                <a @click=${this._footerLinkClicked} data-link=${link.key}
-                  >${link.name}</a
-                >
-              </li>
-            `
-    )}
-        </ul>
-      </div>
+import { PdFooter } from './pd-footer/PdFooter.js';
 
-      <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>
+const tag = "pd-footer";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdFooter);
+}
 
-        ${this.madeBy ? html`<span class="madeBy" @click=${this._clickMadeBy}
-              >${this.madeBy.txt}</span
-            >` : nothing}
-      </div>
-    `;
-  }
-  _clickMadeBy() {
-    var _a, _b;
-    if ((_a = this.madeBy) == null ? void 0 : _a.email) {
-      window.location.href = `mailto:${this.madeBy.email}`;
-    } else if ((_b = this.madeBy) == null ? void 0 : _b.link) {
-      window.open(this.madeBy.link, "_blank");
-    }
-  }
-  _footerLinkClicked(e) {
-    var _a;
-    const target = e.currentTarget;
-    const linkKey = target.dataset.link;
-    const linkObj = (_a = this.footerLinks) == null ? void 0 : _a.find((fl) => fl.key === linkKey);
-    if (linkObj) {
-      this.dispatchEvent(
-        new CustomEvent("footer-link", {
-          detail: { linkObj },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-};
-PdFooter.styles = [
-  PdColorStyles,
-  PdFontStyles,
-  css`
-      :host {
-        display: flex;
-        flex-flow: column;
-        justify-content: end;
-        background-color: var(--pd-footer-bg-col, var(--pd-default-col));
-        width: 100%;
-        white-space: nowrap;
-      }
-
-      .footer-links {
-        display: flex;
-        align-items: center;
-        justify-content: right;
-        height: 100%;
-        color: var(--pd-footer-font-col, var(--pd-default-bg-col));
-        font-family: var(
-          --pd-footer-font-family,
-          var(--pd-default-font-link-family)
-        );
-        font-size: var(--pd-footer-font-size, 1.1em);
-      }
-
-      .footer-links ul {
-        display: flex;
-        flex-wrap: wrap;
-        list-style: none;
-        gap: 2em;
-        margin: 0;
-        padding: 2em 2.5em;
-      }
-
-      .footer-links li {
-        cursor: pointer;
-      }
-
-      .footer-links li:hover {
-        color: var(--pd-default-hover-col);
-      }
-
-      .bottom-line {
-        background-color: var(
-          --pd-footer-bottom-col,
-          var(--pd-default-light-col)
-        );
-        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;
-        display: flex;
-        gap: 1em;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .copyright {
-        font-weight: bold;
-      }
-
-      .version {
-        font-weight: normal;
-      }
-
-      .madeBy {
-        cursor: pointer;
-        font-style: italic;
-      }
-
-      .madeBy:hover {
-        color: var(--pd-default-col);
-      }
-    `
-];
-__decorateClass([
-  property({ type: String })
-], PdFooter.prototype, "copyright", 2);
-__decorateClass([
-  property({ type: String })
-], PdFooter.prototype, "version", 2);
-__decorateClass([
-  property({ type: Object })
-], PdFooter.prototype, "madeBy", 2);
-__decorateClass([
-  property({ type: Array })
-], PdFooter.prototype, "footerLinks", 2);
-PdFooter = __decorateClass([
-  customElement("pd-footer")
-], PdFooter);
-export {
-  PdFooter
-};
+export { PdFooter };

package/dist/pd-menu/PdMenu.d.ts

@@ -0,0 +1,72 @@
+import { LitElement, CSSResultGroup } from 'lit';
+import { PdMenuItem } from '../types.js';
+/**
+ * Menü-Komponente zur Navigation in der Anwendung.
+ *
+ * @fires route-event – Wird ausgelöst, wenn ein Menüpunkt mit Route geklickt wird
+ * @fires locale-change – Wird ausgelöst, wenn die Sprache gewechselt wird
+ *
+ * @slot slotLogo – Slot für das App-Logo
+ * @tagname pd-menu
+ */
+export declare class PdMenu extends LitElement {
+    /**
+     * Aktuelle aktive Route (zur Hervorhebung)
+     */
+    activeRoute: string;
+    /**
+     * Aktuell ausgewählte Sprache
+     */
+    selectedLocale: string;
+    /**
+     * Aktuell ausgewählte Sprache
+     */
+    logoRoute?: string;
+    /**
+     * Liste verfügbarer Sprachen
+     */
+    locales: string[];
+    /**
+     * Hauptmenüeinträge
+     */
+    menuItems: PdMenuItem[];
+    /**
+     * Zusätzliche Einträge in der oberen Menüzeile
+     */
+    topMenuItems: PdMenuItem[];
+    /**
+     * Flag, ob Burger-Menü deaktiviert ist
+     */
+    noBurgerMenu: boolean;
+    /**
+     * Größe des Headers (für Scroll-Berechnung)
+     */
+    headerSize: number;
+    /**
+     * Index des aktiven Inhaltsbereichs (bei Scroll)
+     */
+    private _activeSecIndex;
+    /**
+     * Burger-Menü aktiv?
+     */
+    private _activeBurgerMenu;
+    /**
+     * Sprachmenü aktiv?
+     */
+    private _activeLocaleMenu;
+    /**
+     * Zeige mobile Ansicht?
+     */
+    private _smallScreen;
+    static styles: CSSResultGroup;
+    protected firstUpdated(): void;
+    render(): import('lit').TemplateResult<1>;
+    private _renderItems;
+    private _toggleBurgerMenu;
+    private _toggleLocaleSelection;
+    private _localeClicked;
+    private _menuItemClicked;
+    private _logoClicked;
+    private static _scrollToTop;
+}
+//# sourceMappingURL=PdMenu.d.ts.map

package/dist/pd-menu/PdMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdMenu.d.ts","sourceRoot":"","sources":["../../src/pd-menu/PdMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAY5D,OAAO,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C;;;;;;;;GAQG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,OAAO,EAAE,MAAM,EAAE,CAAM;IAEvB;;OAEG;IAEH,SAAS,EAAE,UAAU,EAAE,CAAM;IAE7B;;OAEG;IAEH,YAAY,EAAE,UAAU,EAAE,CAAM;IAEhC;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,UAAU,SAAK;IAEf;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAK;IAE5B;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAS;IAElC;;OAEG;IAEH,OAAO,CAAC,iBAAiB,CAAS;IAElC;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAgB,MAAM,EAAE,cAAc,CAyOpC;IAEF,SAAS,CAAC,YAAY;IAmCtB,MAAM;IAqEN,OAAO,CAAC,YAAY;IAiCpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,MAAM,CAAC,YAAY;CAG5B"}