@progressive-development/pd-spa-helper 0.9.0 → 0.9.1

package/dist/components/pd-spa-helper/PdSpaHelper.js

@@ -0,0 +1,651 @@
+import { LitElement, css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '@progressive-development/pd-page/pd-menu';
+import '@progressive-development/pd-page/pd-footer';
+import '@progressive-development/pd-content/pd-panel-viewer';
+import '@progressive-development/pd-content/pd-panel';
+import { pdStore } from '../../store/mini-rx.store.js';
+import { services } from '../../service-provider/ServiceRegistry.js';
+import { getLoadingSelector } from '../../store/spa-app-selector.js';
+import { setRouteElement } from '../../store/spa-app-effects.js';
+import { loginSuccess, nologin } from '../../store/spa-app-actions.js';
+import { setCurrentFormatLocale } from '@progressive-development/pd-utils';
+import { pdRouterService, POST_LOGIN_REDIRECT_KEY } from '../../router/PdRouterService.js';
+import { createLogger } from '../../helper/logger.js';
+import { toastBus } from '@progressive-development/pd-page';
+import { spaConfig } from './spa-config.js';
+import { SPA_EVENTS, dispatchInit } from './spa-events.js';
+import { ScrollController } from './controllers/ScrollController.js';
+import { fireOnceService } from '../../services/fire-once-service.js';
+import '../default-login/DefaultLogin.js';
+import '../default-not-found/DefaultNotFound.js';
+import '@progressive-development/pd-page/pd-toast';
+import '@progressive-development/pd-content/pd-loading-state';
+import '@progressive-development/pd-dialog/pd-popup';
+
+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;
+};
+const MADE_BY = {
+  txt: "made by PD Progressive Development",
+  email: "info@progressive-development.com"
+};
+const spaLogger = createLogger("PdSpaHelper");
+const startInit = (config) => {
+  spaLogger.debug("Starting SPA initialization", config);
+  spaConfig.initialize(config);
+  dispatchInit();
+  spaLogger.debug("SPA initialization complete");
+};
+const THRESHOLD_DEFAULT = 100;
+class PdSpaHelper extends LitElement {
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+  constructor() {
+    super();
+    // ---------------------------------------------------------------------------
+    // Controllers
+    // ---------------------------------------------------------------------------
+    /** Controller for scroll threshold detection (teaser collapse) */
+    this.scrollController = new ScrollController(this, {
+      threshold: THRESHOLD_DEFAULT,
+      // Default, synced with teaserCollapseThreshold property
+      onScrolledDown: () => {
+        this.teaserCollapsed = true;
+      },
+      onScrolledUp: () => {
+        this.teaserCollapsed = false;
+      }
+    });
+    this.title = "PD SPA";
+    this.teaserCollapseThreshold = THRESHOLD_DEFAULT;
+    this._loadingState = [];
+    this._route = "";
+    this._params = {};
+    this._query = {};
+    this.teaserCollapsed = false;
+    this._skipTeaserTransition = false;
+    /** Pending section ID for navigate-and-scroll (stored until init-menu-sections fires) */
+    this._pendingScrollSectionId = null;
+    this._claims = {};
+    /** Whether to show locale selector in single menu only */
+    this._singleLocaleMenu = false;
+    /** Track previous auth state to detect real transitions (not initial load) */
+    this._previousAuthState = "unknown";
+    // ---------------------------------------------------------------------------
+    // Section Actions (lazy loading via section visibility)
+    // ---------------------------------------------------------------------------
+    /** Map of section IDs to action creator functions */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this._sectionActions = /* @__PURE__ */ new Map();
+    setRouteElement(this);
+    document.addEventListener(SPA_EVENTS.INIT, () => {
+      spaLogger.debug("SPA init event received");
+    });
+    if (spaConfig.includesLogin) {
+      spaLogger.debug("Login included, activating login handler");
+      this._activateLoginHandler();
+    }
+    this.addEventListener(
+      "route-event",
+      this._handleRouteEvent
+    );
+  }
+  static {
+    // ---------------------------------------------------------------------------
+    // Styles
+    // ---------------------------------------------------------------------------
+    this.styles = css`
+    /* ═══════════════════════════════════════════════════════════════════════
+       CSS CUSTOM PROPERTIES - Mobile First (configurable by host application)
+       ═══════════════════════════════════════════════════════════════════════ */
+    :host {
+      /* Header heights - Mobile defaults */
+      --pd-top-menu-height: 30px;
+      --pd-teaser-height: 200px;
+      --pd-menu-height: 50px;
+
+      /* Transition timing */
+      --pd-header-transition: 300ms ease-out;
+
+      /* Layout */
+      display: flex;
+      flex-flow: column;
+      height: 100%;
+    }
+
+    /* Tablet (768px+) */
+    @media (min-width: 768px) {
+      :host {
+        --pd-teaser-height: 280px;
+        --pd-menu-height: 56px;
+      }
+    }
+
+    /* Desktop (1024px+) */
+    @media (min-width: 1024px) {
+      :host {
+        --pd-teaser-height: 380px;
+        --pd-menu-height: 60px;
+      }
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       HEADER
+       ═══════════════════════════════════════════════════════════════════════ */
+    header {
+      flex-grow: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 99;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       FOOTER
+       ═══════════════════════════════════════════════════════════════════════ */
+    footer {
+      flex-grow: 0;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       TEASER
+       ═══════════════════════════════════════════════════════════════════════ */
+    .teaser {
+      --pd-panel-overflow: hidden;
+      --pd-panel-height: var(--pd-teaser-height);
+      --pd-panel-width: 100%;
+      --pd-panel-border-radius: 0;
+      --pd-panel-bg: var(--pd-default-col);
+      --pd-panel-viewer-bg-col: var(--pd-default-col);
+
+      height: var(--pd-teaser-height);
+      overflow: hidden;
+      transition: height var(--pd-header-transition);
+    }
+
+    /* Teaser collapsed */
+    :host([teaser-collapsed]) .teaser {
+      height: 0;
+      pointer-events: none; /* Prevent Hammer.js from processing swipe events while collapsed */
+    }
+
+    :host([teaser-collapsed]) {
+      --pd-teaser-height: 0px;
+    }
+
+    /* No menu: set height to 0 for correct padding calculations */
+    :host([no-menu]) {
+      --pd-menu-height: 0px;
+    }
+
+    /* No top-menu: set height to 0 for correct padding calculations */
+    :host([no-top-menu]) {
+      --pd-top-menu-height: 0px;
+    }
+
+    /* Skip teaser transition during navigate-and-scroll */
+    :host([skip-teaser-transition]) .teaser {
+      transition: none !important;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       MAIN MENU
+       ═══════════════════════════════════════════════════════════════════════ */
+    .menu {
+      transition: background-color var(--pd-header-transition);
+    }
+
+    /* Menu colors when teaser is visible (has teaser AND not collapsed) */
+    :host(:not([teaser-collapsed])) .menu.with-teaser {
+      --pd-menu-bg-col: var(--pd-spa-menu-change-col, #afc1d2);
+      --pd-menu-font-col: var(--pd-spa-menu-change-font-col, #0a3a48);
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       TOP MENU
+       ═══════════════════════════════════════════════════════════════════════ */
+    .top-menu {
+      --pd-menu-height: var(--pd-top-menu-height);
+      --pd-menu-font-size: 0.8em;
+      --pd-menu-shadow: 0;
+    }
+
+    /* Top-menu colors when teaser is visible */
+    :host(:not([teaser-collapsed])) .top-menu.with-teaser {
+      --pd-menu-bg-col: var(--pd-teaser-bg-col);
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       MAIN CONTENT
+       ═══════════════════════════════════════════════════════════════════════ */
+    main {
+      flex-grow: 1;
+      flex-basis: max-content;
+      padding-top: calc(var(--pd-menu-height) + var(--pd-top-menu-height));
+    }
+
+    /* When teaser is visible (has teaser AND not collapsed), add teaser height */
+    :host(:not([teaser-collapsed])) main.with-teaser {
+      padding-top: calc(
+        var(--pd-menu-height) + var(--pd-top-menu-height) +
+          var(--pd-teaser-height)
+      );
+    }
+
+    /* ═══════════════════════════════════════════════════════════════════════
+       LOGIN MODAL
+       ═══════════════════════════════════════════════════════════════════════ */
+    .login-modal {
+      --pd-popup-default-display: block;
+      --pd-popup-content-bg: var(--pd-default-bg-light-col);
+    }
+  `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    pdRouterService.onRouteChange(({ route, params, query }) => {
+      const isRouteChange = route !== this._route;
+      const isLoginModal = route === "login";
+      if (isRouteChange && !isLoginModal) {
+        this.scrollController.scrollToTop();
+      }
+      this._route = route;
+      this._params = params;
+      this._query = query;
+    });
+    this._subscription = pdStore().select(getLoadingSelector).subscribe((loadingState) => {
+      this._loadingState = loadingState;
+    });
+    this.addEventListener(
+      SPA_EVENTS.APP_CONFIG,
+      this._handleAppConfigEvent
+    );
+    this.addEventListener(
+      "section-activated",
+      this._handleSectionActivated
+    );
+    this.scrollController.setThreshold(this.teaserCollapseThreshold);
+  }
+  disconnectedCallback() {
+    this._subscription?.unsubscribe();
+    this.removeEventListener(
+      SPA_EVENTS.APP_CONFIG,
+      this._handleAppConfigEvent
+    );
+    this.removeEventListener(
+      "section-activated",
+      this._handleSectionActivated
+    );
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProps) {
+    super.willUpdate(changedProps);
+    if (changedProps.has("_route") && this._route) {
+      const pageConf = spaConfig.getNavigationPage(this._route);
+      const hasTeaser = !!(pageConf?.withTeaser && this._getTeaserContent().length > 0);
+      this.toggleAttribute("no-menu", !!pageConf?.hideMenu);
+      this.toggleAttribute(
+        "no-top-menu",
+        !!pageConf?.hideTopMenu || !pageConf?.topMenuItems?.length
+      );
+      this.scrollController.setTeaserCollapseEnabled(hasTeaser);
+      if (this._pendingScrollSectionId) {
+        this.teaserCollapsed = true;
+        this._skipTeaserTransition = true;
+      } else {
+        this._skipTeaserTransition = false;
+        this.teaserCollapsed = !hasTeaser;
+      }
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  render() {
+    if (this._route === "") {
+      return this._renderLoading();
+    }
+    const isLoginModal = this._route === "login";
+    const configRoute = isLoginModal ? pdRouterService.previousRoute || "home" : this._route;
+    const pageConf = spaConfig.getNavigationPage(configRoute);
+    const showTeaser = !!(pageConf?.withTeaser && this._getTeaserContent().length > 0);
+    return this._renderLayout(pageConf, showTeaser);
+  }
+  /**
+   * Render the loading state while route is being resolved
+   * Can be overridden by subclass
+   */
+  _renderLoading() {
+    return html`<slot name="loading"><p>Loading...</p></slot>`;
+  }
+  /**
+   * Render the main layout
+   * Can be overridden by subclass for custom layouts
+   */
+  _renderLayout(pageConf, showTeaser) {
+    const isLoginModal = this._route === "login";
+    const backgroundRoute = pdRouterService.previousRoute || "home";
+    const contentRoute = isLoginModal ? backgroundRoute : this._route;
+    return html`
+      <header>
+        ${pageConf?.hideTopMenu ? "" : this._renderTopMenu(pageConf, showTeaser)}
+        ${showTeaser ? this._renderTeaser() : ""}
+        ${pageConf?.hideMenu ? "" : this._renderMenu(pageConf, showTeaser)}
+      </header>
+
+      <main
+        class="${this._getMainClass(pageConf, showTeaser)}"
+        @init-menu-sections="${this._handleInitMenuSections}"
+      >
+        ${this._loadingState.map(
+      (ls) => html`<pd-loading-state .loadingState="${ls}"></pd-loading-state>`
+    )}
+        ${this._renderRoutePages(contentRoute)}
+        ${this._route === "not-found" ? html`<default-not-found></default-not-found>` : ""}
+      </main>
+
+      ${isLoginModal ? this._renderLoginModal() : ""}
+      ${pageConf?.withFooter ? html`<footer>${this._renderFooter()}</footer>` : ""}
+
+      <pd-toast></pd-toast>
+    `;
+  }
+  /**
+   * Render the login modal popup
+   */
+  _renderLoginModal() {
+    return html`
+      <pd-popup
+        class="login-modal"
+        closeByEscape
+        popupLabel="Anmeldung"
+        @popup-close="${this._handleLoginPopupClose}"
+      >
+        <default-login slot="content"></default-login>
+      </pd-popup>
+    `;
+  }
+  /**
+   * Handle login popup close (user aborted login via Escape or backdrop click)
+   */
+  _handleLoginPopupClose() {
+    const backRoute = pdRouterService.previousRoute || "/";
+    pdRouterService.navigate(backRoute);
+  }
+  // ---------------------------------------------------------------------------
+  // Layout Rendering Methods (can be overridden)
+  // ---------------------------------------------------------------------------
+  _renderMenu(pageConfig, showTeaser) {
+    const menuForPage = pageConfig?.menu || [];
+    if (!menuForPage.length) return "";
+    const showLogo = !showTeaser || this.teaserCollapsed;
+    const visibleMenuItems = menuForPage.filter(
+      (item) => !item.requiredRoles?.length || item.requiredRoles.some((role) => this._claims?.[role] === true)
+    );
+    if (!visibleMenuItems.length) return "";
+    return html`
+      <pd-menu
+        id="pdHelperMenuId"
+        class="menu ${showTeaser ? "with-teaser" : ""}"
+        @locale-change="${this._handleLocaleChange}"
+        selectedLocale="${this._selectedLocale}"
+        .locales=${this._singleLocaleMenu ? this._availableLocales : []}
+        .menuItems=${visibleMenuItems}
+        .topMenuItems=${[]}
+        activeRoute="${this._route}"
+        logoRoute="${pageConfig?.menuLogoRoute || ""}"
+      >
+        ${showLogo ? this._getAppLogo() : ""}
+      </pd-menu>
+    `;
+  }
+  _renderTopMenu(pageConfig, showTeaser) {
+    const topMenuForPage = pageConfig?.topMenuItems;
+    if (!topMenuForPage) return "";
+    const visibleTopMenuItems = topMenuForPage.filter(
+      (item) => !item.requiredRoles?.length || item.requiredRoles.some((role) => this._claims?.[role] === true)
+    );
+    if (!visibleTopMenuItems.length) return "";
+    return html`
+      <pd-menu
+        id="pdHelperTopMenuId"
+        noBurgerMenu
+        class="top-menu ${showTeaser ? "with-teaser" : ""}"
+        @locale-change="${this._handleLocaleChange}"
+        .locales=${this._availableLocales}
+        selectedLocale="${this._selectedLocale}"
+        .topMenuItems=${visibleTopMenuItems}
+        activeRoute="${this._route}"
+      >
+      </pd-menu>
+    `;
+  }
+  _renderTeaser() {
+    const teaserContent = this._getTeaserContent();
+    if (!teaserContent || teaserContent.length === 0) {
+      return "";
+    }
+    return html`
+      <pd-panel-viewer class="teaser" id="teaserPanelViewerId" deltaCalc="4">
+        ${teaserContent.map((content) => html`<pd-panel>${content}</pd-panel>`)}
+      </pd-panel-viewer>
+    `;
+  }
+  _renderFooter() {
+    const footer = this._getFooter();
+    return html`
+      <pd-footer
+        .footerLinks="${footer.links}"
+        version="${footer.version}"
+        copyright="${footer.copyright || "PD Progressive Development UG"}"
+        .madeBy="${MADE_BY}"
+        @footer-link="${this._handleFooterLink}"
+      >
+      </pd-footer>
+    `;
+  }
+  // ---------------------------------------------------------------------------
+  // Optional Override Methods (have default implementations)
+  // ---------------------------------------------------------------------------
+  /**
+   * Get teaser content panels
+   * Override to provide teaser content, or return empty array for no teaser
+   */
+  _getTeaserContent() {
+    return [];
+  }
+  // ---------------------------------------------------------------------------
+  // Event Handlers
+  // ---------------------------------------------------------------------------
+  _handleRouteEvent(e) {
+    if (e.detail.el && !e.detail.route) {
+      this._scrollToSection(e.detail.el);
+    } else if (e.detail.route) {
+      if (e.detail.sectionId) {
+        this._pendingScrollSectionId = e.detail.sectionId;
+      }
+      this._navigateToPage(e.detail.route);
+    }
+  }
+  _handleFooterLink(e) {
+    const { linkObj } = e.detail;
+    if (linkObj.link) {
+      this._navigateToPage(linkObj.link);
+    }
+    if (linkObj.action) {
+      linkObj.action();
+    }
+  }
+  _handleInitMenuSections(e) {
+    const pageConf = spaConfig.getNavigationPage(this._route);
+    if (pageConf?.menu) {
+      pageConf.menu = pageConf.menu.map((menuElement) => ({
+        ...menuElement,
+        ref: menuElement.sec ? e.detail.menuRefs[menuElement.sec] ?? void 0 : void 0
+      }));
+      this.requestUpdate();
+    }
+    if (e.detail.sectionActions) {
+      for (const [sectionId, actionCreator] of Object.entries(
+        e.detail.sectionActions
+      )) {
+        this._sectionActions.set(sectionId, actionCreator);
+      }
+    }
+    if (this._pendingScrollSectionId) {
+      const element = this._findSectionElement(this._pendingScrollSectionId);
+      if (element) {
+        requestAnimationFrame(() => {
+          this._scrollToSection(element);
+          this._skipTeaserTransition = false;
+        });
+      } else {
+        this._skipTeaserTransition = false;
+      }
+      this._pendingScrollSectionId = null;
+    }
+  }
+  /**
+   * Handle section-activated event from pd-menu.
+   * Dispatches the registered action for a section (once per session).
+   */
+  _handleSectionActivated(e) {
+    const { sectionId } = e.detail;
+    const actionCreator = this._sectionActions.get(sectionId);
+    if (actionCreator) {
+      fireOnceService.fireOnce(sectionId, actionCreator());
+    }
+  }
+  _handleLocaleChange(e) {
+    spaLogger.debug("Handle change locale", e);
+    const newLocale = e.detail;
+    this._setLocale(newLocale);
+    this._selectedLocale = newLocale;
+    setCurrentFormatLocale(newLocale);
+  }
+  _handleAppConfigEvent(event) {
+    const customEvent = event;
+    if (customEvent.detail) {
+      customEvent.detail.appConf = this._getAppConfiguration();
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // Private Methods
+  // ---------------------------------------------------------------------------
+  _activateLoginHandler() {
+    spaLogger.debug("Activating login handler");
+    services.auth.onAuthStateChanged(async (user) => {
+      spaLogger.debug("Auth state changed", user?.email);
+      const newState = user ? "logged-in" : "logged-out";
+      if (user) {
+        const tokenResult = await services.auth.getIdTokenResult();
+        const claims = tokenResult?.claims || {};
+        this._claims = claims;
+        pdStore().dispatch(
+          loginSuccess({
+            uid: user.uid,
+            email: user.email,
+            emailVerified: user.emailVerified,
+            claims,
+            providerId: "unknown"
+            // Provider ID is Firebase-specific, not in interface
+          })
+        );
+        const redirectRoute = sessionStorage.getItem(POST_LOGIN_REDIRECT_KEY);
+        if (redirectRoute) {
+          const routeToNavigate = redirectRoute && redirectRoute !== "/login" ? redirectRoute : "";
+          sessionStorage.removeItem(POST_LOGIN_REDIRECT_KEY);
+          spaLogger.debug("Redirecting after login to:", routeToNavigate);
+          this._navigateToPage(routeToNavigate);
+        }
+        if (this._previousAuthState === "logged-out") {
+          toastBus.success(`Angemeldet als ${user.email}`);
+        }
+      } else {
+        pdStore().dispatch(nologin());
+        this._claims = {};
+        if (this._previousAuthState === "logged-in") {
+          toastBus.info("Abgemeldet");
+          this._navigateToPage(spaConfig.logoutRedirect);
+        }
+      }
+      this._previousAuthState = newState;
+    });
+  }
+  _getMainClass(pageConf, showTeaser) {
+    if (pageConf?.mainClass) {
+      return pageConf.mainClass;
+    }
+    return showTeaser ? "with-teaser" : "";
+  }
+  _navigateToPage(routeURL) {
+    pdRouterService.navigate(routeURL);
+  }
+  /**
+   * Scroll to a section element. Collapses teaser if expanded.
+   */
+  _scrollToSection(element) {
+    if (!this.teaserCollapsed) {
+      this.teaserCollapsed = true;
+    }
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+  /**
+   * Find section element by sectionId from current page's menu refs.
+   */
+  _findSectionElement(sectionId) {
+    const pageConf = spaConfig.getNavigationPage(this._route);
+    if (!pageConf?.menu) return null;
+    const menuItem = pageConf.menu.find(
+      (item) => item.sec === sectionId
+    );
+    return menuItem?.ref ?? null;
+  }
+  // ---------------------------------------------------------------------------
+  // Responsive Handling
+  // ---------------------------------------------------------------------------
+}
+__decorateClass([
+  property({ type: String })
+], PdSpaHelper.prototype, "title");
+__decorateClass([
+  property({ type: Number, attribute: "teaser-collapse-threshold" })
+], PdSpaHelper.prototype, "teaserCollapseThreshold");
+__decorateClass([
+  state()
+], PdSpaHelper.prototype, "_loadingState");
+__decorateClass([
+  state()
+], PdSpaHelper.prototype, "_route");
+__decorateClass([
+  state()
+], PdSpaHelper.prototype, "_params");
+__decorateClass([
+  state()
+], PdSpaHelper.prototype, "_query");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "teaser-collapsed" })
+], PdSpaHelper.prototype, "teaserCollapsed");
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true,
+    attribute: "skip-teaser-transition"
+  })
+], PdSpaHelper.prototype, "_skipTeaserTransition");
+__decorateClass([
+  state()
+], PdSpaHelper.prototype, "_selectedLocale");
+__decorateClass([
+  state()
+], PdSpaHelper.prototype, "_claims");
+
+export { PdSpaHelper, startInit };