weg-shared-layout 0.0.38 → 0.0.39

package/docs/angular.md

@@ -16,10 +16,10 @@ Copy this while integrating:
 - [ ] **Step 2** — `tsconfig`: `skipLibCheck`, `resolveJsonModule`, `moduleResolution`
 - [ ] **Step 3** — `defineCustomElements()` in `main.ts` **before** bootstrap
 - [ ] **Step 4** — `layout.types.ts` from package fixture
-- [ ] **Step 5** — `auth.ts` with sign-in URL constants (your app, not the package)
+- [ ] **Step 5** — `auth.ts` with sign-out URL (optional; only if handling `wegAuthClick`)
 - [ ] **Step 6** — `CUSTOM_ELEMENTS_SCHEMA` on the shell component
 - [ ] **Step 7** — Template with **`[layout]`** property binding
-- [ ] **Step 8** — Header: `[signedIn]`, `[userName]`, `(wegAuthClick)`
+- [ ] **Step 8** — Header: `[signedIn]`, `[userName]`, `[accountBaseUrl]` (optional), `(wegAuthClick)`
 - [ ] **Step 9** — Verify in DevTools: `$0.layout` is an object on `<weg-header>`
 
 ---
@@ -96,18 +96,13 @@ import type { LayoutData } from 'weg-shared-layout/layout-data';
 
 ---
 
-## Step 5 — Auth URLs
+## Step 5 — Sign-out URL (optional)
 
-Host apps own sign-in/out URLs — do not import these from the package.
+Sign-in is a normal nav link in your CMS layout — no host constants needed. Only define a sign-out redirect if you handle `wegAuthClick`:
 
 ```ts
 // src/app/auth.ts
-export const HEADER_SIGN_IN = {
-  label: 'Sign in',
-  href: 'https://account.warwickemploymentgroup.com/account/login',
-};
-
-export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
+export const ACCOUNT_SIGN_OUT_HREF = 'https://account.warwickemploymentgroup.com/account/login';
 ```
 
 ---
@@ -122,7 +117,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import layoutFixture from 'weg-shared-layout/dummy-data.json';
 
-import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
+import { ACCOUNT_SIGN_OUT_HREF } from './auth';
 import type { LayoutData } from './layout.types';
 
 @Component({
@@ -140,15 +135,11 @@ export class AppComponent {
 
   onAuthClick(event: Event): void {
     const customEvent = event as CustomEvent<{ action: 'sign-in' | 'sign-out' }>;
-    customEvent.preventDefault();
-
-    if (customEvent.detail.action === 'sign-out') {
-      this.signedIn = false;
-      window.location.href = ACCOUNT_LOGIN_HREF;
-      return;
-    }
+    if (customEvent.detail.action !== 'sign-out') return;
 
-    window.location.href = HEADER_SIGN_IN.href;
+    customEvent.preventDefault();
+    this.signedIn = false;
+    window.location.href = ACCOUNT_SIGN_OUT_HREF;
   }
 }
 ```
@@ -180,7 +171,8 @@ Use **`[layout]="..."`** so Angular sets the JavaScript property, not an HTML at
 | `[layout]` | CMS nav when signed out; same object for header and footer |
 | `[signedIn]` | `true` → built-in signed-in nav (ignores CMS `header.menu`) |
 | `[userName]` | First name on Manage Account when signed in |
-| `(wegAuthClick)` | `detail.action`: `'sign-in'` \| `'sign-out'` — call `preventDefault()` when you handle navigation |
+| `[accountBaseUrl]` | Account portal origin for signed-in links (optional; production default when omitted) |
+| `(wegAuthClick)` | Optional — handle `sign-out` only; sign-in follows the link `href` |
 
 Run the app — you should see header nav and footer.
 
@@ -197,9 +189,13 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 
-import { HEADER_SIGN_IN } from './auth';
 import type { LayoutData } from './layout.types';
 
+const DEFAULT_SIGN_IN = {
+  label: 'Sign in',
+  href: 'https://account.warwickemploymentgroup.com/account/login',
+};
+
 @Injectable({ providedIn: 'root' })
 export class LayoutService {
   constructor(private http: HttpClient) {}
@@ -220,7 +216,7 @@ export class LayoutService {
     if (hasSignIn) return data;
     return {
       ...data,
-      header: { ...data.header, menu: [...menu, HEADER_SIGN_IN] },
+      header: { ...data.header, menu: [...menu, DEFAULT_SIGN_IN] },
     };
   }
 }
@@ -234,7 +230,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { Observable } from 'rxjs';
 
-import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
+import { ACCOUNT_SIGN_OUT_HREF } from './auth';
 import type { LayoutData } from './layout.types';
 import { LayoutService } from './layout.service';
 
@@ -256,15 +252,11 @@ export class AppComponent {
 
   onAuthClick(event: Event): void {
     const customEvent = event as CustomEvent<{ action: 'sign-in' | 'sign-out' }>;
-    customEvent.preventDefault();
-
-    if (customEvent.detail.action === 'sign-out') {
-      this.signedIn = false;
-      window.location.href = ACCOUNT_LOGIN_HREF;
-      return;
-    }
+    if (customEvent.detail.action !== 'sign-out') return;
 
-    window.location.href = HEADER_SIGN_IN.href;
+    customEvent.preventDefault();
+    this.signedIn = false;
+    window.location.href = ACCOUNT_SIGN_OUT_HREF;
   }
 }
 ```
@@ -342,7 +334,7 @@ forkJoin({
   footer: this.http.get<LayoutData['footer']>('/api/footer'),
 }).pipe(
   map(({ menuGroups, flatLinks, footer }) => ({
-    header: { menu: [...menuGroups, ...flatLinks, HEADER_SIGN_IN] },
+    header: { menu: [...menuGroups, ...flatLinks, DEFAULT_SIGN_IN] },
     footer,
   })),
 );
@@ -359,6 +351,7 @@ forkJoin({
 | Nav empty after passing data | `[layout]` must be `{ header, footer }`, not a bare array |
 | Auth always Sign in | Bind `[signedIn]` from session state |
 | Generic Manage Account | Pass `[userName]` when signed in |
+| Staging account portal | Pass `[accountBaseUrl]` (e.g. `https://account-staging.example.com`) |
 | `Mixin<const …>` / TS1139 in `stencil-public-runtime.d.ts` | Add `skipLibCheck: true` and/or upgrade to TypeScript 5.0+ |
 | Cannot resolve `weg-shared-layout/loader` | Set `moduleResolution` to `bundler` or `node16` |
 | SSR: `document is not defined` | Guard: `if (typeof window !== 'undefined') defineCustomElements()` |
@@ -387,7 +380,7 @@ export type LayoutData = typeof layoutFixture; // from dummy-data.json
 | `src/main.ts` | `defineCustomElements()` then bootstrap |
 | `tsconfig.json` | `skipLibCheck`, `resolveJsonModule`, `moduleResolution` |
 | `src/app/layout.types.ts` | `export type LayoutData = typeof layoutFixture` |
-| `src/app/auth.ts` | `HEADER_SIGN_IN`, `ACCOUNT_LOGIN_HREF` |
+| `src/app/auth.ts` | `ACCOUNT_SIGN_OUT_HREF` (optional) |
 | `src/app/layout.service.ts` | HTTP / API mapping (optional) |
 | `src/app/app.component.ts` | Shell: schema, layout, auth handler |
 | `src/app/app.component.html` | `<weg-header>`, `<router-outlet>`, `<weg-footer>` |

package/docs/nextjs.md

@@ -9,7 +9,7 @@ Guide for **Next.js 13+ App Router** (`app/` directory). For Vite/CRA-style clie
 | `<weg-header>` | Site header — bundled logo, CMS nav (signed out), built-in nav (signed in), Sign in / Manage Account / Sign out |
 | `<weg-footer>` | Site footer — social, menu, legal text |
 
-Both accept **`layout`** (JSON string recommended in Next). `<weg-header>` also accepts **`signed-in`**, **`user-name`**, and emits **`wegAuthClick`**.
+Both accept **`layout`** (JSON string recommended in Next). `<weg-header>` also accepts **`signed-in`**, **`user-name`**, **`account-base-url`**, and emits **`wegAuthClick`**.
 
 ## Why Next.js is different
 
@@ -51,18 +51,13 @@ const nextConfig: NextConfig = {
 export default nextConfig;
 ```
 
-## 2. Auth constants (host app)
+## 2. Sign-out URL (optional)
 
-Keep sign-in/out URLs in your app — not imported from `weg-shared-layout`:
+Sign-in comes from your CMS `header.menu` like any other link. Only define a redirect for custom sign-out handling:
 
 ```ts
 // src/auth.ts
-export const HEADER_SIGN_IN = {
-  label: 'Sign in',
-  href: 'https://account.warwickemploymentgroup.com/account/login',
-};
-
-export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
+export const ACCOUNT_SIGN_OUT_HREF = 'https://account.warwickemploymentgroup.com/account/login';
 ```
 
 ## 3. Client layout components
@@ -73,7 +68,7 @@ export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
 
 import { useCallback } from 'react';
 import { defineCustomElements } from 'weg-shared-layout/loader';
-import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from '@/auth';
+import { ACCOUNT_SIGN_OUT_HREF } from '@/auth';
 import 'weg-shared-layout/weg-header';
 
 defineCustomElements();
@@ -95,17 +90,13 @@ export function Header({
 }) {
   const onAuthClick = useCallback(
     (event: CustomEvent<{ action: 'sign-in' | 'sign-out' }>) => {
-      event.preventDefault();
+      if (event.detail.action !== 'sign-out') return;
 
-      if (event.detail.action === 'sign-out') {
-        onSignedInChange?.(false);
-        window.location.href = ACCOUNT_LOGIN_HREF;
-        return;
-      }
-
-      window.location.href = HEADER_SIGN_IN.href;
+      event.preventDefault();
+      onSignedInChange?.(false);
+      window.location.href = ACCOUNT_SIGN_OUT_HREF;
     },
-    [layout, onSignedInChange],
+    [onSignedInChange],
   );
 
   return (
@@ -230,12 +221,13 @@ Wire **`signedIn`** and **`userName`** from your auth provider (session hook / c
 
 | API | Signed out | Signed in |
 | --- | --- | --- |
-| `layout.header.menu` | CMS nav rendered (groups + flat links incl. Sign in) | Ignored — built-in nav used |
+| `layout.header.menu` | CMS nav rendered (groups + flat links incl. sign-in) | Ignored — built-in nav used |
 | `layout.header.logoSrc` | Logo image URL (bundled if omitted) | Built-in bundled logo |
 | `layout.header.logoHref` | Logo link URL | WEG homepage |
 | `signed-in` prop | `false` | `true` — session flag from host app |
 | `user-name` prop | — | User's first name on Manage Account |
-| `wegAuthClick` event | `'sign-in'` on Sign in click | `'sign-out'` on Sign out click |
+| `account-base-url` prop | — | Account portal origin for signed-in links (optional) |
+| `wegAuthClick` event | Sign-in follows link `href` | `'sign-out'` — handle in host if needed |
 | `event.preventDefault()` | Skip default navigation | Skip default redirect |
 
 **Signed-in nav (built into the component):** Find a job, Dashboard, Manage Account, Sign out.
@@ -300,7 +292,7 @@ declare module 'react' {
 - [ ] `weg-shared-layout` installed
 - [ ] `transpilePackages` in `next.config`
 - [ ] Client `Header.tsx` / `Footer.tsx` with loader, tag imports, `JSON.stringify`, `suppressHydrationWarning`
-- [ ] Auth: `signed-in`, `user-name`, and `wegAuthClick` handler on header
+- [ ] Auth: `signed-in`, `user-name`, `account-base-url` (optional), and `wegAuthClick` handler on header
 - [ ] Server `layout.tsx` imports client chrome only (no `defineCustomElements` on server)
 - [ ] Layout fetched or imported server-side, passed as serializable props
 - [ ] TypeScript augmentation for `'weg-header'` and `'weg-footer'`

package/docs/react.md

@@ -11,7 +11,7 @@ Guide for **client-rendered** React apps (Vite, Create React App, etc.). If you
 
 Both are **presentational** [Stencil](https://stenciljs.com/) Web Components. They **do not fetch data** — your app passes a **`layout`** payload (API, CMS, or [`dummy-data.json`](../src/assets/dummy-data.json)).
 
-`<weg-header>` additionally accepts **`signed-in`**, **`user-name`**, and emits **`wegAuthClick`**.
+`<weg-header>` additionally accepts **`signed-in`**, **`user-name`**, **`account-base-url`**, and emits **`wegAuthClick`**.
 
 ## Requirements
 
@@ -75,29 +75,22 @@ export function SiteLayout({ children }: { children: React.ReactNode }) {
 
 ## 3. Header auth
 
-Define auth URLs once in your app:
+Sign-in is a normal `header.menu` link — add it in your CMS like Register. The header recognizes **Sign in** by label or login URL and navigates to `href`.
 
-```ts
-// auth.ts
-export const HEADER_SIGN_IN = {
-  label: 'Sign in',
-  href: 'https://account.warwickemploymentgroup.com/account/login',
-};
-
-export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
-```
-
-### Signed out
+### Signed in
 
-Pass CMS/API layout with unified **`header.menu`**. Use [`dummy-data.json`](../src/assets/dummy-data.json) for the full shape — nav groups use `items`, flat links and Sign in use `href`.
+Set **`signed-in`** and optionally **`user-name`**. The component **ignores CMS nav** and shows built-in links: Find a job, Dashboard, Manage Account, Sign out. Pass **`account-base-url`** when account links should use a non-production portal.
 
-### Signed in
+Handle **`wegAuthClick`** only for custom sign-out behaviour:
 
-Set **`signed-in`** and optionally **`user-name`**. The component **ignores CMS nav** and shows built-in links: Find a job, Dashboard, Manage Account, Sign out.
+```ts
+// auth.ts
+export const ACCOUNT_SIGN_OUT_HREF = 'https://account.warwickemploymentgroup.com/account/login';
+```
 
 ```tsx
 import { useCallback, useState } from 'react';
-import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth';
+import { ACCOUNT_SIGN_OUT_HREF } from './auth';
 import 'weg-shared-layout/weg-header';
 import layout from 'weg-shared-layout/dummy-data.json';
 
@@ -106,15 +99,11 @@ export function SiteHeader() {
   const userName = signedIn ? 'Alex' : undefined;
 
   const onAuthClick = useCallback((event: CustomEvent<{ action: 'sign-in' | 'sign-out' }>) => {
-    event.preventDefault();
+    if (event.detail.action !== 'sign-out') return;
 
-    if (event.detail.action === 'sign-out') {
-      setSignedIn(false);
-      window.location.href = ACCOUNT_LOGIN_HREF;
-      return;
-    }
-
-    window.location.href = HEADER_SIGN_IN.href;
+    event.preventDefault();
+    setSignedIn(false);
+    window.location.href = ACCOUNT_SIGN_OUT_HREF;
   }, []);
 
   return (
@@ -132,7 +121,8 @@ export function SiteHeader() {
 | --- | --- |
 | `signedIn={boolean}` | Switches to signed-in nav when `true` |
 | `userName={string}` | First name beside profile icon on Manage Account |
-| `onWegAuthClick` | Host handles routing / logout; call `event.preventDefault()` to override defaults |
+| `accountBaseUrl={string}` | Account portal origin for signed-in links (optional) |
+| `onWegAuthClick` | Optional — handle `sign-out`; sign-in follows link `href` |
 
 **Ref fallback for the event** (if `onWegAuthClick` does not bind in your React version):
 

package/docs/vanilla.md

@@ -23,7 +23,6 @@ With a bundler that resolves `node_modules` and package **`exports`** (TypeScrip
 <script type="module">
   import { defineCustomElements } from 'weg-shared-layout/loader';
   import layout from 'weg-shared-layout/dummy-data.json';
-  import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
 
   defineCustomElements();
 
@@ -68,54 +67,40 @@ See [`dummy-data.json`](../src/assets/dummy-data.json) for production URL exampl
 
 ## Header auth (Sign in / Sign out)
 
-Define auth URLs in `./auth.js`:
-
-```js
-export const HEADER_SIGN_IN = {
-  label: 'Sign in',
-  href: 'https://account.warwickemploymentgroup.com/account/login',
-};
-
-export const ACCOUNT_LOGIN_HREF = HEADER_SIGN_IN.href;
-```
-
 ### Signed out
 
-Renders `header.menu` from `layout` — dropdown groups, flat links, and the Sign in entry (label **Sign in** fires `wegAuthClick`).
+Renders `header.menu` from `layout`. Add sign-in as a normal link — `{ "label": "Sign in", "href": "…" }` — like Register. The header recognizes it by label or login URL and follows `href` on click.
 
 ### Signed in
 
-Set **`signedIn`** and optionally **`userName`**. CMS nav is ignored; built-in links are shown (Find a job, Dashboard, Manage Account, Sign out).
+Set **`signedIn`** and optionally **`userName`**. CMS nav is ignored; built-in links are shown (Find a job, Dashboard, Manage Account, Sign out). Set **`accountBaseUrl`** when account links should use a non-production portal.
 
 ```js
 header.signedIn = true;
 header.userName = 'Alex';
+// header.accountBaseUrl = 'https://account-staging.example.com';
 // or
 header.setAttribute('signed-in', '');
 header.setAttribute('user-name', 'Alex');
 ```
 
-Listen for **`wegAuthClick`**:
+Listen for **`wegAuthClick`** only when you need custom sign-out handling:
 
 ```js
-import { ACCOUNT_LOGIN_HREF, HEADER_SIGN_IN } from './auth.js';
+import { ACCOUNT_SIGN_OUT_HREF } from './auth.js';
 
 header.addEventListener('wegAuthClick', (event) => {
-  event.preventDefault();
+  if (event.detail.action !== 'sign-out') return;
 
-  if (event.detail.action === 'sign-out') {
-    header.signedIn = false;
-    window.location.href = ACCOUNT_LOGIN_HREF;
-    return;
-  }
-
-  window.location.href = HEADER_SIGN_IN.href;
+  event.preventDefault();
+  header.signedIn = false;
+  window.location.href = ACCOUNT_SIGN_OUT_HREF;
 });
 ```
 
 | `event.detail.action` | Default behaviour if not prevented |
 | --- | --- |
-| `'sign-in'` | Browser follows the Sign in menu entry's `href` |
+| `'sign-in'` | Browser follows the link's `href` |
 | `'sign-out'` | Redirects to built-in sign-out URL |
 
 Logo **image** uses `header.logoSrc` (bundled if omitted). Logo **link** uses `header.logoHref` when provided; otherwise it goes to the WEG homepage.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weg-shared-layout",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "Shared layout Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -18,7 +18,7 @@ Load layout JSON from your CMS/API (e.g. [`GET /api/layout`](https://weg-payload
 
 ### Layout shape (abbreviated)
 
-Full reference: [`src/assets/dummy-data.json`](src/assets/dummy-data.json). Sign-in is a normal `header.menu` entry labelled **Sign in**; it fires `wegAuthClick`. Signed-in nav is built into `<weg-header>` when `signed-in` is true.
+Full reference: [`src/assets/dummy-data.json`](src/assets/dummy-data.json). Sign-in is a normal `header.menu` link (label **Sign in** or login `href`); `<weg-header>` recognizes it automatically. Signed-in nav is built into `<weg-header>` when `signed-in` is true.
 
 ```json
 {
@@ -49,17 +49,17 @@ Full reference: [`src/assets/dummy-data.json`](src/assets/dummy-data.json). Sign
 
 ### Auth (Sign in / Sign out)
 
-**Signed out**: renders `header.menu`. The Sign in entry fires `wegAuthClick` with action `sign-in`.
+**Signed out**: renders `header.menu`. Sign-in is a normal link — add `{ "label": "Sign in", "href": "…" }` like Register or Career advice. The header recognizes it by label or login URL and follows `href` on click.
 
 **Signed in** (`signed-in` true): ignores CMS `header.menu` and shows built-in Find a job, Dashboard, Manage Account, and Sign out.
 
-Set **`signed-in`** from your app session state. Pass **`user-name`** for Manage Account.
+Set **`signed-in`** from your app session state. Pass **`user-name`** for Manage Account. Pass **`account-base-url`** when account links should point at a non-production portal (defaults to production when omitted). Handle **`wegAuthClick`** only when you need custom sign-out behaviour.
 
 ```js
 header.addEventListener('wegAuthClick', (event) => {
+  if (event.detail.action !== 'sign-out') return;
   event.preventDefault();
-  if (event.detail.action === 'sign-out') logout();
-  else window.location.href = HEADER_SIGN_IN.href;
+  logout();
 });
 ```
 

package/src/assets/dummy-data.json

@@ -70,8 +70,7 @@
       },
       {
         "label": "Sign in",
-        "href": "https://account.warwickemploymentgroup.com/account/login",
-        "authAction": "sign-in"
+        "href": "https://account.warwickemploymentgroup.com/account/login"
       }
     ]
   },