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

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

@@ -1,651 +0,0 @@
-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 };