weg-shared-layout 0.0.52 → 0.0.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-Bq6Rv2aB.js → index-7WCqkJs6.js} +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/weg-footer_2.cjs.entry.js +92 -70
- package/dist/cjs/weg-shared-layout.cjs.js +2 -2
- package/dist/collection/components/weg-header/weg-header.css +48 -20
- package/dist/collection/components/weg-header/weg-header.js +94 -71
- package/dist/components/index.js +1 -1
- package/dist/components/{p-Dgj30LnS.js → p-RYP4pLp1.js} +1 -1
- package/dist/components/weg-footer.js +1 -1
- package/dist/components/weg-header.js +1 -1
- package/dist/esm/{index-B5Q4zIrC.js → index-DeWUZGfb.js} +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/weg-footer_2.entry.js +92 -70
- package/dist/esm/weg-shared-layout.js +3 -3
- package/dist/types/components/weg-header/weg-header.d.ts +12 -9
- package/dist/types/components.d.ts +2 -2
- package/dist/weg-shared-layout/p-699bc3aa.entry.js +1 -0
- package/dist/weg-shared-layout/{p-B5Q4zIrC.js → p-DeWUZGfb.js} +2 -2
- package/dist/weg-shared-layout/weg-shared-layout.esm.js +1 -1
- package/hydrate/index.js +93 -70
- package/hydrate/index.mjs +93 -70
- package/package.json +99 -98
- package/dist/weg-shared-layout/p-14007e56.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -5777,13 +5777,10 @@ const LOGO_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFcCAYAAACQ
|
|
|
5777
5777
|
|
|
5778
5778
|
const sharedCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}:root,:host{--weg-container-breakpoint-sm:40rem;--weg-container-breakpoint-md:48rem;--weg-container-breakpoint-lg:64rem;--weg-container-breakpoint-xl:80rem;--weg-container-breakpoint-2xl:86rem;--weg-container-max-vw:95vw;--weg-container-padding-inline:1rem}@media (width >= 48rem){:root,:host{--weg-container-padding-inline:2rem}}.container{width:100%;max-width:var(--weg-container-max-vw);margin-inline:auto;padding-inline:var(--weg-container-padding-inline)}@media (width >= 40rem){.container{max-width:min(var(--weg-container-breakpoint-sm), var(--weg-container-max-vw))}}@media (width >= 48rem){.container{max-width:min(var(--weg-container-breakpoint-md), var(--weg-container-max-vw))}}@media (width >= 64rem){.container{max-width:min(var(--weg-container-breakpoint-lg), var(--weg-container-max-vw))}}@media (width >= 80rem){.container{max-width:min(var(--weg-container-breakpoint-xl), var(--weg-container-max-vw))}}@media (width >= 86rem){.container{max-width:min(var(--weg-container-breakpoint-xl), var(--weg-container-max-vw))}}*,*::before,*::after{box-sizing:border-box}:host{display:block;--weg-font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';--weg-color-accent:#948eeb;--weg-purple-200:#cdcff8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;
|
|
5779
5779
|
|
|
5780
|
-
const wegHeaderCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}.weg-header-shell{display:contents}.skip-to-content{position:fixed;top:-100%;left:0;z-index:10001;padding:0.75rem 1rem;background:#ffffff;color:#0f172a;font-family:var(--weg-font-family);font-weight:600;text-decoration:none;border:2px solid #312e81;border-radius:0 0 0.25rem 0;box-shadow:0 0.25rem 0.75rem rgba(17, 24, 39, 0.15)}.skip-to-content:focus,.skip-to-content:focus-visible{top:0;outline:2px solid var(--weg-color-accent);outline-offset:2px}.header{width:100%;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}
|
|
5780
|
+
const wegHeaderCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}.weg-header-shell{display:contents}:host{display:block}:host(.weg-header--scroll-mode){min-height:4.25rem}@media (width >= 960px){:host(.weg-header--scroll-mode){min-height:5.75rem}}@media (width >= 1280px){:host(.weg-header--scroll-mode){min-height:7.75rem}}@media (width >= 1440px){:host(.weg-header--scroll-mode){min-height:8.75rem}}.skip-to-content{position:fixed;top:-100%;left:0;z-index:10001;padding:0.75rem 1rem;background:#ffffff;color:#0f172a;font-family:var(--weg-font-family);font-weight:600;text-decoration:none;border:2px solid #312e81;border-radius:0 0 0.25rem 0;box-shadow:0 0.25rem 0.75rem rgba(17, 24, 39, 0.15)}.skip-to-content:focus,.skip-to-content:focus-visible{top:0;outline:2px solid var(--weg-color-accent);outline-offset:2px}.header{width:100%;position:relative;z-index:1000;transition:transform 0.25s ease;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}.header--scroll-mode{position:fixed;top:0;left:0;right:0}.header--scroll-hidden{transform:translateY(-100%)}.header:not(.header--scroll-mode).header--scroll-hidden{transform:none}@media (prefers-reduced-motion: reduce){.header{transition:none}}@media (width >= 960px){.header{border-bottom-width:0.25rem}}.header--menu-open{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;transform:none;display:flex;flex-direction:column;overflow:hidden}.header--menu-open .header-inner{flex:1 1 auto;flex-wrap:wrap;align-content:flex-start;min-height:0}.header--menu-open .main-nav-panel{display:block;flex:1 1 100%;width:100%;min-height:0;overflow-y:auto;border-top:1px solid #d8d4f7}@media (width >= 960px){.header--menu-open{position:static;inset:auto;z-index:auto;display:block;overflow:visible}.header--menu-open .header-inner{flex:unset;flex-wrap:nowrap;align-content:unset;min-height:unset}}.logo-link{display:inline-flex;align-items:center;text-decoration:none;outline:none}.logo-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.logo{height:2.5rem;width:auto}@media (width >= 960px){.logo{height:3rem}}@media (width >= 1280px){.logo{height:5rem}}.header-inner{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:0.75rem;padding-block:0.75rem;padding-inline:var(--weg-container-padding-inline)}@media (width >= 960px){.header-inner{flex-wrap:nowrap;gap:1.5rem;padding-block:1.25rem}}@media (width >= 1440px){.header-inner{padding-block:1.75rem}}.header-inner .logo-link{flex:1 1 auto;min-width:0;justify-content:center}@media (width >= 960px){.header-inner .logo-link{flex:0 0 auto;justify-content:flex-start}}.header-inner .logo{max-width:100%}.header-actions{display:flex;align-items:center;flex-shrink:0}@media (width >= 960px){.header-actions{display:none}}.main-nav-panel{display:none;margin-inline:-0.5rem}@media (width >= 960px){.main-nav-panel{display:flex;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end;overflow:visible;border-top:none}}.main-nav{padding:0 0 1.5rem}@media (width >= 960px){.main-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:1rem;padding:0}}.main-nav__list{list-style:none;margin:0;padding:0}@media (width >= 960px){.main-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem}}@media (width >= 1280px){.main-nav__list{gap:1.5rem}}.main-nav__item{border-bottom:1px solid #d8d4f7}@media (width >= 960px){.main-nav__item{border-bottom:none}}.main-nav__item--dropdown{position:static}.nav-dropdown{position:relative}.nav-link{display:block;width:100%;padding:1rem;font-weight:600;color:inherit;text-decoration:none;outline:none}.nav-link:hover{opacity:0.85}.nav-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;width:100%;padding:1rem;border:none;background:transparent;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;outline:none}.nav-dropdown__trigger:hover{opacity:0.85}.nav-dropdown__trigger:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-dropdown__trigger--open{background:transparent}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}.toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999rem;background:#312e81;color:#ffffff;flex-shrink:0}.nav-dropdown__panel{padding:0 0 0.75rem}@media (width >= 960px){.nav-dropdown__panel{position:absolute;top:calc(100% + 0.5rem);left:0;z-index:500;min-width:17.5rem;padding:0.75rem 0 0.75rem 0.75rem;border:1px solid #e2e8f0;border-radius:0.5rem;background:#f8fafc;box-shadow:0 0.25rem 1rem rgba(15, 23, 42, 0.08)}.nav-dropdown__panel::before{content:'';position:absolute;top:-0.5rem;left:0;right:0;height:0.5rem}}.nav-dropdown__accent{border-left:0.25rem solid var(--weg-color-accent);padding-left:0.75rem}.nav-dropdown__links{display:flex;flex-direction:column;gap:0.25rem;list-style:none;margin:0;padding:0}.nav-dropdown__link{display:block;padding:0.625rem 0;font-weight:400;color:inherit;text-decoration:none;outline:none}.nav-dropdown__link:hover{opacity:0.85}.nav-dropdown__link:focus-visible{outline:0.125rem solid var(--weg-color-accent);outline-offset:0.125rem;border-radius:0.25rem}.nav-dropdown__link--active{background:var(--weg-purple-200)}@media (width >= 960px){.nav-dropdown__link{padding:0.5rem;margin-right:0.75rem;border-radius:0.5rem;font-weight:600}.nav-dropdown__link:hover,.nav-dropdown__link:focus-visible{background:var(--weg-purple-200);opacity:1}.nav-dropdown__link--active{opacity:1}}@media (width >= 1280px){.nav-dropdown__link{padding:0.5rem 0.75rem}}.main-nav__item--auth>a{display:flex;align-items:center;gap:0.5rem;width:100%;padding:1rem}@media (width >= 960px){.nav-link,.nav-dropdown__trigger,.main-nav__item--auth>a{display:inline-flex;align-items:center;width:auto;padding:0.5rem;border-radius:0.5rem}.nav-link--active,.main-nav__item--auth>a.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{gap:0.5rem;cursor:pointer}.nav-dropdown__trigger--open{background:#f1f5f9}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}}@media (width >= 1280px){.main-nav{font-size:1.25rem}.main-nav__item--auth>a{padding:0.5rem 0.75rem}}.sign-in-link,.sign-out-link,.auth-button{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:inherit;text-decoration:none;outline:none}.auth-button{padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.sign-in-link:hover,.sign-out-link:hover,.auth-button:hover{opacity:0.85}.sign-in-link:focus-visible,.sign-out-link:focus-visible,.auth-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:0.5rem;background:transparent;color:inherit;cursor:pointer;text-decoration:none;outline:none}.icon-button:hover{background:#f1f5f9}.icon-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px}.menu-toggle{flex-shrink:0}@media (width >= 960px){.menu-toggle{display:none}}`;
|
|
5781
5781
|
|
|
5782
5782
|
const WEG_HOME = 'https://www.warwickemploymentgroup.com';
|
|
5783
5783
|
const DEFAULT_ACCOUNT_HOME = 'https://account.warwickemploymentgroup.com';
|
|
5784
|
-
/** Stay visible while scrolling down through the first half of the viewport. */
|
|
5785
|
-
const HEADER_SCROLL_HIDE_THRESHOLD_VH = 0.5;
|
|
5786
|
-
const HEADER_SCROLL_DIRECTION_DELTA = 5;
|
|
5787
5784
|
const DEFAULT_LOGO_HREF = `${WEG_HOME}/`;
|
|
5788
5785
|
/** Placeholder href — sign-out is handled via `wegAuthClick`, not navigation. */
|
|
5789
5786
|
const SIGN_OUT_HREF = '#';
|
|
@@ -5842,7 +5839,12 @@ function isManageAccountLink(link, accountHome) {
|
|
|
5842
5839
|
function isFindJobLink(link) {
|
|
5843
5840
|
if (link.label.trim().toLowerCase() === 'find a job')
|
|
5844
5841
|
return true;
|
|
5845
|
-
|
|
5842
|
+
const href = link.href?.trim();
|
|
5843
|
+
if (!href)
|
|
5844
|
+
return false;
|
|
5845
|
+
if (href === `${WEG_HOME}/find-a-job` || href === '/find-a-job')
|
|
5846
|
+
return true;
|
|
5847
|
+
return href.endsWith('/find-a-job');
|
|
5846
5848
|
}
|
|
5847
5849
|
function isDashboardLink(link, accountHome) {
|
|
5848
5850
|
if (link.label.trim().toLowerCase() === 'dashboard')
|
|
@@ -5889,6 +5891,7 @@ class WegHeader {
|
|
|
5889
5891
|
registerInstance(this, hostRef);
|
|
5890
5892
|
this.wegAuthClick = createEvent(this, "wegAuthClick");
|
|
5891
5893
|
}
|
|
5894
|
+
static SCROLL_REVEAL_VIEWPORT_FRACTION = 0.5;
|
|
5892
5895
|
/**
|
|
5893
5896
|
* Layout payload, supplied by the host application.
|
|
5894
5897
|
*
|
|
@@ -5907,7 +5910,9 @@ class WegHeader {
|
|
|
5907
5910
|
*/
|
|
5908
5911
|
layout;
|
|
5909
5912
|
/**
|
|
5910
|
-
*
|
|
5913
|
+
* Session flag from the host app. Enables signed-in UI (icons, compact manage account).
|
|
5914
|
+
* Navigation uses `layout.header.menu` when provided; falls back to the built-in
|
|
5915
|
+
* signed-in menu only when signed in and the layout menu is empty.
|
|
5911
5916
|
*/
|
|
5912
5917
|
signedIn = false;
|
|
5913
5918
|
/**
|
|
@@ -5933,20 +5938,19 @@ class WegHeader {
|
|
|
5933
5938
|
resolved = EMPTY_HEADER;
|
|
5934
5939
|
menuOpen = false;
|
|
5935
5940
|
openDropdown = null;
|
|
5936
|
-
headerHidden = false;
|
|
5937
5941
|
boundHandleDocumentClick = this.handleDocumentClick.bind(this);
|
|
5938
5942
|
boundHandleViewportChange = this.handleViewportChange.bind(this);
|
|
5939
5943
|
boundHandleHoverCapabilityChange = this.handleHoverCapabilityChange.bind(this);
|
|
5940
5944
|
boundHandleScroll = this.handleScroll.bind(this);
|
|
5941
|
-
headerResizeObserver;
|
|
5942
|
-
lastScrollY = 0;
|
|
5943
|
-
scrollTicking = false;
|
|
5944
5945
|
bodyScrollLocked = false;
|
|
5945
5946
|
bodyScrollLockY = 0;
|
|
5946
5947
|
hoverCloseTimer = null;
|
|
5947
5948
|
hoverOpenEnabled = false;
|
|
5948
5949
|
desktopMediaQuery;
|
|
5949
5950
|
hoverCapableMediaQuery;
|
|
5951
|
+
headerScrollMode = false;
|
|
5952
|
+
headerScrollHidden = false;
|
|
5953
|
+
lastScrollY = 0;
|
|
5950
5954
|
resolve() {
|
|
5951
5955
|
if (this.layout === undefined || this.layout === null) {
|
|
5952
5956
|
this.resolved = EMPTY_HEADER;
|
|
@@ -5963,69 +5967,25 @@ class WegHeader {
|
|
|
5963
5967
|
this.updateHoverDropdownEnabled();
|
|
5964
5968
|
this.handleViewportChange();
|
|
5965
5969
|
}
|
|
5966
|
-
componentDidLoad() {
|
|
5967
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
5968
|
-
if (!header)
|
|
5969
|
-
return;
|
|
5970
|
-
this.headerResizeObserver = new ResizeObserver(() => this.syncHeaderHeight());
|
|
5971
|
-
this.headerResizeObserver.observe(header);
|
|
5972
|
-
this.syncHeaderHeight();
|
|
5973
|
-
this.lastScrollY = window.scrollY;
|
|
5974
|
-
this.updateHeaderVisibility();
|
|
5975
|
-
}
|
|
5976
5970
|
connectedCallback() {
|
|
5977
5971
|
document.addEventListener('click', this.boundHandleDocumentClick);
|
|
5972
|
+
}
|
|
5973
|
+
componentDidLoad() {
|
|
5974
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
5978
5975
|
window.addEventListener('scroll', this.boundHandleScroll, { passive: true });
|
|
5976
|
+
this.applyScrollState();
|
|
5977
|
+
}
|
|
5978
|
+
componentDidRender() {
|
|
5979
|
+
this.applyScrollState();
|
|
5979
5980
|
}
|
|
5980
5981
|
disconnectedCallback() {
|
|
5981
5982
|
document.removeEventListener('click', this.boundHandleDocumentClick);
|
|
5982
5983
|
window.removeEventListener('scroll', this.boundHandleScroll);
|
|
5983
5984
|
this.unlockBodyScroll();
|
|
5984
|
-
this.headerResizeObserver?.disconnect();
|
|
5985
5985
|
this.desktopMediaQuery?.removeEventListener('change', this.boundHandleViewportChange);
|
|
5986
5986
|
this.hoverCapableMediaQuery?.removeEventListener('change', this.boundHandleHoverCapabilityChange);
|
|
5987
5987
|
this.cancelScheduledDropdownClose();
|
|
5988
5988
|
}
|
|
5989
|
-
syncHeaderHeight() {
|
|
5990
|
-
if (this.isMobileMenuActive())
|
|
5991
|
-
return;
|
|
5992
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
5993
|
-
if (!header)
|
|
5994
|
-
return;
|
|
5995
|
-
this.el.style.setProperty('--weg-header-height', `${header.offsetHeight}px`);
|
|
5996
|
-
}
|
|
5997
|
-
handleScroll() {
|
|
5998
|
-
if (this.scrollTicking)
|
|
5999
|
-
return;
|
|
6000
|
-
this.scrollTicking = true;
|
|
6001
|
-
requestAnimationFrame(() => {
|
|
6002
|
-
this.scrollTicking = false;
|
|
6003
|
-
this.updateHeaderVisibility();
|
|
6004
|
-
});
|
|
6005
|
-
}
|
|
6006
|
-
updateHeaderVisibility() {
|
|
6007
|
-
if (this.isMobileMenuActive()) {
|
|
6008
|
-
if (this.headerHidden)
|
|
6009
|
-
this.headerHidden = false;
|
|
6010
|
-
return;
|
|
6011
|
-
}
|
|
6012
|
-
const scrollY = window.scrollY;
|
|
6013
|
-
const delta = scrollY - this.lastScrollY;
|
|
6014
|
-
const threshold = window.innerHeight * HEADER_SCROLL_HIDE_THRESHOLD_VH;
|
|
6015
|
-
let nextHidden = this.headerHidden;
|
|
6016
|
-
if (scrollY <= threshold) {
|
|
6017
|
-
nextHidden = false;
|
|
6018
|
-
}
|
|
6019
|
-
else if (Math.abs(delta) >= HEADER_SCROLL_DIRECTION_DELTA) {
|
|
6020
|
-
nextHidden = delta > 0;
|
|
6021
|
-
}
|
|
6022
|
-
this.lastScrollY = scrollY;
|
|
6023
|
-
if (nextHidden === this.headerHidden)
|
|
6024
|
-
return;
|
|
6025
|
-
if (nextHidden)
|
|
6026
|
-
this.closeDropdown();
|
|
6027
|
-
this.headerHidden = nextHidden;
|
|
6028
|
-
}
|
|
6029
5989
|
/**
|
|
6030
5990
|
* Desktop dropdowns open on hover when viewport is md+ and the device reports hover support.
|
|
6031
5991
|
* Uses (hover: hover) only — not (pointer: fine), which breaks in DevTools and hybrid devices.
|
|
@@ -6114,6 +6074,65 @@ class WegHeader {
|
|
|
6114
6074
|
isMobileMenuActive() {
|
|
6115
6075
|
return this.menuOpen && !this.desktopMediaQuery?.matches;
|
|
6116
6076
|
}
|
|
6077
|
+
handleScroll() {
|
|
6078
|
+
this.applyScrollState();
|
|
6079
|
+
}
|
|
6080
|
+
applyScrollState() {
|
|
6081
|
+
if (this.isMobileMenuActive()) {
|
|
6082
|
+
if (this.headerScrollHidden) {
|
|
6083
|
+
this.headerScrollHidden = false;
|
|
6084
|
+
}
|
|
6085
|
+
if (this.headerScrollMode) {
|
|
6086
|
+
this.headerScrollMode = false;
|
|
6087
|
+
}
|
|
6088
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
6089
|
+
return;
|
|
6090
|
+
}
|
|
6091
|
+
const scrollY = Math.max(0, window.scrollY);
|
|
6092
|
+
const threshold = this.getScrollRevealThreshold();
|
|
6093
|
+
const pastRevealThreshold = scrollY >= threshold;
|
|
6094
|
+
let nextScrollMode = this.headerScrollMode;
|
|
6095
|
+
let nextHidden = this.headerScrollHidden;
|
|
6096
|
+
if (!pastRevealThreshold) {
|
|
6097
|
+
if (scrollY === 0) {
|
|
6098
|
+
nextScrollMode = false;
|
|
6099
|
+
nextHidden = false;
|
|
6100
|
+
}
|
|
6101
|
+
else if (this.headerScrollMode && !this.headerScrollHidden) {
|
|
6102
|
+
// Keep a revealed header pinned while scrolling up toward the top.
|
|
6103
|
+
nextScrollMode = true;
|
|
6104
|
+
nextHidden = scrollY > this.lastScrollY;
|
|
6105
|
+
}
|
|
6106
|
+
else {
|
|
6107
|
+
nextScrollMode = false;
|
|
6108
|
+
nextHidden = false;
|
|
6109
|
+
}
|
|
6110
|
+
}
|
|
6111
|
+
else if (scrollY === 0) {
|
|
6112
|
+
nextScrollMode = false;
|
|
6113
|
+
nextHidden = false;
|
|
6114
|
+
}
|
|
6115
|
+
else {
|
|
6116
|
+
nextScrollMode = true;
|
|
6117
|
+
if (scrollY > this.lastScrollY) {
|
|
6118
|
+
nextHidden = true;
|
|
6119
|
+
}
|
|
6120
|
+
else if (scrollY < this.lastScrollY) {
|
|
6121
|
+
nextHidden = false;
|
|
6122
|
+
}
|
|
6123
|
+
}
|
|
6124
|
+
this.lastScrollY = scrollY;
|
|
6125
|
+
if (nextScrollMode !== this.headerScrollMode) {
|
|
6126
|
+
this.headerScrollMode = nextScrollMode;
|
|
6127
|
+
}
|
|
6128
|
+
if (nextHidden !== this.headerScrollHidden) {
|
|
6129
|
+
this.headerScrollHidden = nextHidden;
|
|
6130
|
+
}
|
|
6131
|
+
}
|
|
6132
|
+
getScrollRevealThreshold() {
|
|
6133
|
+
const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
|
|
6134
|
+
return viewportHeight * WegHeader.SCROLL_REVEAL_VIEWPORT_FRACTION;
|
|
6135
|
+
}
|
|
6117
6136
|
watchLayout() {
|
|
6118
6137
|
this.resolve();
|
|
6119
6138
|
}
|
|
@@ -6323,7 +6342,6 @@ class WegHeader {
|
|
|
6323
6342
|
}
|
|
6324
6343
|
openMenu() {
|
|
6325
6344
|
this.menuOpen = true;
|
|
6326
|
-
this.headerHidden = false;
|
|
6327
6345
|
this.closeDropdown();
|
|
6328
6346
|
if (!this.desktopMediaQuery?.matches) {
|
|
6329
6347
|
this.lockBodyScroll();
|
|
@@ -6338,8 +6356,6 @@ class WegHeader {
|
|
|
6338
6356
|
this.menuOpen = false;
|
|
6339
6357
|
this.closeDropdown();
|
|
6340
6358
|
this.unlockBodyScroll();
|
|
6341
|
-
this.syncHeaderHeight();
|
|
6342
|
-
this.updateHeaderVisibility();
|
|
6343
6359
|
if (announce && wasMobileActive) {
|
|
6344
6360
|
this.announceToScreenReader(`${MAIN_NAV_LABEL} closed.`);
|
|
6345
6361
|
}
|
|
@@ -6351,7 +6367,13 @@ class WegHeader {
|
|
|
6351
6367
|
return normalizeAccountBase(this.accountBaseUrl);
|
|
6352
6368
|
}
|
|
6353
6369
|
getActiveMenu() {
|
|
6354
|
-
|
|
6370
|
+
if (this.resolved.menu.length > 0) {
|
|
6371
|
+
return this.resolved.menu;
|
|
6372
|
+
}
|
|
6373
|
+
if (this.signedIn) {
|
|
6374
|
+
return buildSignedInMenu(this.getAccountHome());
|
|
6375
|
+
}
|
|
6376
|
+
return this.resolved.menu;
|
|
6355
6377
|
}
|
|
6356
6378
|
getLogoSrc() {
|
|
6357
6379
|
return this.resolved.logoSrc ?? LOGO_SRC;
|
|
@@ -6522,12 +6544,12 @@ class WegHeader {
|
|
|
6522
6544
|
const logoSrc = this.getLogoSrc();
|
|
6523
6545
|
const closeMenu = () => this.closeMenu();
|
|
6524
6546
|
const mobileMenuActive = this.isMobileMenuActive();
|
|
6525
|
-
return (hAsync("div", { key: '
|
|
6547
|
+
return (hAsync(Host, { key: 'e0ed16abe9a49db723b627ea8bccfde470406f57', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, hAsync("div", { key: '574712a024543f0653f9956949b2796377451847', class: "weg-header-shell" }, hAsync("a", { key: '279c196e293d93db62fc29915f63b7b24b38e6c1', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), hAsync("header", { key: '29bbed6bde5ccf8cd2b4e4df4a7ba58b122c2d6a', class: {
|
|
6526
6548
|
header: true,
|
|
6527
|
-
'header--fixed': !mobileMenuActive,
|
|
6528
|
-
'header--hidden': this.headerHidden && !mobileMenuActive,
|
|
6529
6549
|
'header--menu-open': mobileMenuActive,
|
|
6530
|
-
|
|
6550
|
+
'header--scroll-mode': this.headerScrollMode,
|
|
6551
|
+
'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
|
|
6552
|
+
} }, hAsync("div", { key: '85650e9d0d244fefbd9f216130703de9288baa93', class: "header-inner" }, hAsync("div", { key: '34e7bf3d15733e9acefb12b2c77fee9a4cf7479c', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), hAsync("button", { key: '9e35626afcecc92d93deb2fb25f8f93727f85d4d', type: "button", class: "menu-toggle icon-button", "aria-label": mobileMenuActive ? CLOSE_MAIN_NAV_LABEL : OPEN_MAIN_NAV_LABEL, "aria-expanded": mobileMenuActive ? 'true' : 'false', "aria-controls": "weg-header-main-nav", onClick: () => this.toggleMenu() }, mobileMenuActive ? hAsync(CloseIcon, null) : hAsync(HamburgerIcon, null)), hAsync(Logo, { key: '99ffa62e443e939316b58d36cab8e9e0a10cfa36', href: logoHref, src: logoSrc }), hAsync("div", { key: 'c9b453f5187d5b6ad782ae03400c13f16a31c383', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), hAsync("div", { key: '0f15f985cf4931a9867c341d053f5ebd2b398d42', class: "main-nav-panel", id: "weg-header-main-nav", role: mobileMenuActive ? 'dialog' : undefined, "aria-modal": mobileMenuActive ? 'true' : undefined, "aria-label": mobileMenuActive ? MAIN_NAV_LABEL : undefined }, this.renderNav(mobileMenuActive ? closeMenu : undefined)))))));
|
|
6531
6553
|
}
|
|
6532
6554
|
static get watchers() { return {
|
|
6533
6555
|
"layout": [{
|
|
@@ -6547,7 +6569,8 @@ class WegHeader {
|
|
|
6547
6569
|
"resolved": [32],
|
|
6548
6570
|
"menuOpen": [32],
|
|
6549
6571
|
"openDropdown": [32],
|
|
6550
|
-
"
|
|
6572
|
+
"headerScrollMode": [32],
|
|
6573
|
+
"headerScrollHidden": [32]
|
|
6551
6574
|
},
|
|
6552
6575
|
"$listeners$": [[8, "keydown", "handleKeyDown"]],
|
|
6553
6576
|
"$lazyBundleId$": "-",
|
package/hydrate/index.mjs
CHANGED
|
@@ -5775,13 +5775,10 @@ const LOGO_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFcCAYAAACQ
|
|
|
5775
5775
|
|
|
5776
5776
|
const sharedCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}:root,:host{--weg-container-breakpoint-sm:40rem;--weg-container-breakpoint-md:48rem;--weg-container-breakpoint-lg:64rem;--weg-container-breakpoint-xl:80rem;--weg-container-breakpoint-2xl:86rem;--weg-container-max-vw:95vw;--weg-container-padding-inline:1rem}@media (width >= 48rem){:root,:host{--weg-container-padding-inline:2rem}}.container{width:100%;max-width:var(--weg-container-max-vw);margin-inline:auto;padding-inline:var(--weg-container-padding-inline)}@media (width >= 40rem){.container{max-width:min(var(--weg-container-breakpoint-sm), var(--weg-container-max-vw))}}@media (width >= 48rem){.container{max-width:min(var(--weg-container-breakpoint-md), var(--weg-container-max-vw))}}@media (width >= 64rem){.container{max-width:min(var(--weg-container-breakpoint-lg), var(--weg-container-max-vw))}}@media (width >= 80rem){.container{max-width:min(var(--weg-container-breakpoint-xl), var(--weg-container-max-vw))}}@media (width >= 86rem){.container{max-width:min(var(--weg-container-breakpoint-xl), var(--weg-container-max-vw))}}*,*::before,*::after{box-sizing:border-box}:host{display:block;--weg-font-family:ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';--weg-color-accent:#948eeb;--weg-purple-200:#cdcff8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;
|
|
5777
5777
|
|
|
5778
|
-
const wegHeaderCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}.weg-header-shell{display:contents}.skip-to-content{position:fixed;top:-100%;left:0;z-index:10001;padding:0.75rem 1rem;background:#ffffff;color:#0f172a;font-family:var(--weg-font-family);font-weight:600;text-decoration:none;border:2px solid #312e81;border-radius:0 0 0.25rem 0;box-shadow:0 0.25rem 0.75rem rgba(17, 24, 39, 0.15)}.skip-to-content:focus,.skip-to-content:focus-visible{top:0;outline:2px solid var(--weg-color-accent);outline-offset:2px}.header{width:100%;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}
|
|
5778
|
+
const wegHeaderCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}.weg-header-shell{display:contents}:host{display:block}:host(.weg-header--scroll-mode){min-height:4.25rem}@media (width >= 960px){:host(.weg-header--scroll-mode){min-height:5.75rem}}@media (width >= 1280px){:host(.weg-header--scroll-mode){min-height:7.75rem}}@media (width >= 1440px){:host(.weg-header--scroll-mode){min-height:8.75rem}}.skip-to-content{position:fixed;top:-100%;left:0;z-index:10001;padding:0.75rem 1rem;background:#ffffff;color:#0f172a;font-family:var(--weg-font-family);font-weight:600;text-decoration:none;border:2px solid #312e81;border-radius:0 0 0.25rem 0;box-shadow:0 0.25rem 0.75rem rgba(17, 24, 39, 0.15)}.skip-to-content:focus,.skip-to-content:focus-visible{top:0;outline:2px solid var(--weg-color-accent);outline-offset:2px}.header{width:100%;position:relative;z-index:1000;transition:transform 0.25s ease;border-bottom:2px solid var(--weg-color-accent);background:#ffffff;color:#0f172a;font-family:var(--weg-font-family)}.header--scroll-mode{position:fixed;top:0;left:0;right:0}.header--scroll-hidden{transform:translateY(-100%)}.header:not(.header--scroll-mode).header--scroll-hidden{transform:none}@media (prefers-reduced-motion: reduce){.header{transition:none}}@media (width >= 960px){.header{border-bottom-width:0.25rem}}.header--menu-open{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;transform:none;display:flex;flex-direction:column;overflow:hidden}.header--menu-open .header-inner{flex:1 1 auto;flex-wrap:wrap;align-content:flex-start;min-height:0}.header--menu-open .main-nav-panel{display:block;flex:1 1 100%;width:100%;min-height:0;overflow-y:auto;border-top:1px solid #d8d4f7}@media (width >= 960px){.header--menu-open{position:static;inset:auto;z-index:auto;display:block;overflow:visible}.header--menu-open .header-inner{flex:unset;flex-wrap:nowrap;align-content:unset;min-height:unset}}.logo-link{display:inline-flex;align-items:center;text-decoration:none;outline:none}.logo-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.logo{height:2.5rem;width:auto}@media (width >= 960px){.logo{height:3rem}}@media (width >= 1280px){.logo{height:5rem}}.header-inner{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:0.75rem;padding-block:0.75rem;padding-inline:var(--weg-container-padding-inline)}@media (width >= 960px){.header-inner{flex-wrap:nowrap;gap:1.5rem;padding-block:1.25rem}}@media (width >= 1440px){.header-inner{padding-block:1.75rem}}.header-inner .logo-link{flex:1 1 auto;min-width:0;justify-content:center}@media (width >= 960px){.header-inner .logo-link{flex:0 0 auto;justify-content:flex-start}}.header-inner .logo{max-width:100%}.header-actions{display:flex;align-items:center;flex-shrink:0}@media (width >= 960px){.header-actions{display:none}}.main-nav-panel{display:none;margin-inline:-0.5rem}@media (width >= 960px){.main-nav-panel{display:flex;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end;overflow:visible;border-top:none}}.main-nav{padding:0 0 1.5rem}@media (width >= 960px){.main-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:1rem;padding:0}}.main-nav__list{list-style:none;margin:0;padding:0}@media (width >= 960px){.main-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem}}@media (width >= 1280px){.main-nav__list{gap:1.5rem}}.main-nav__item{border-bottom:1px solid #d8d4f7}@media (width >= 960px){.main-nav__item{border-bottom:none}}.main-nav__item--dropdown{position:static}.nav-dropdown{position:relative}.nav-link{display:block;width:100%;padding:1rem;font-weight:600;color:inherit;text-decoration:none;outline:none}.nav-link:hover{opacity:0.85}.nav-link:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;width:100%;padding:1rem;border:none;background:transparent;font:inherit;font-weight:600;color:inherit;text-align:left;cursor:pointer;outline:none}.nav-dropdown__trigger:hover{opacity:0.85}.nav-dropdown__trigger:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px;border-radius:4px}.nav-dropdown__trigger--open{background:transparent}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}.toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999rem;background:#312e81;color:#ffffff;flex-shrink:0}.nav-dropdown__panel{padding:0 0 0.75rem}@media (width >= 960px){.nav-dropdown__panel{position:absolute;top:calc(100% + 0.5rem);left:0;z-index:500;min-width:17.5rem;padding:0.75rem 0 0.75rem 0.75rem;border:1px solid #e2e8f0;border-radius:0.5rem;background:#f8fafc;box-shadow:0 0.25rem 1rem rgba(15, 23, 42, 0.08)}.nav-dropdown__panel::before{content:'';position:absolute;top:-0.5rem;left:0;right:0;height:0.5rem}}.nav-dropdown__accent{border-left:0.25rem solid var(--weg-color-accent);padding-left:0.75rem}.nav-dropdown__links{display:flex;flex-direction:column;gap:0.25rem;list-style:none;margin:0;padding:0}.nav-dropdown__link{display:block;padding:0.625rem 0;font-weight:400;color:inherit;text-decoration:none;outline:none}.nav-dropdown__link:hover{opacity:0.85}.nav-dropdown__link:focus-visible{outline:0.125rem solid var(--weg-color-accent);outline-offset:0.125rem;border-radius:0.25rem}.nav-dropdown__link--active{background:var(--weg-purple-200)}@media (width >= 960px){.nav-dropdown__link{padding:0.5rem;margin-right:0.75rem;border-radius:0.5rem;font-weight:600}.nav-dropdown__link:hover,.nav-dropdown__link:focus-visible{background:var(--weg-purple-200);opacity:1}.nav-dropdown__link--active{opacity:1}}@media (width >= 1280px){.nav-dropdown__link{padding:0.5rem 0.75rem}}.main-nav__item--auth>a{display:flex;align-items:center;gap:0.5rem;width:100%;padding:1rem}@media (width >= 960px){.nav-link,.nav-dropdown__trigger,.main-nav__item--auth>a{display:inline-flex;align-items:center;width:auto;padding:0.5rem;border-radius:0.5rem}.nav-link--active,.main-nav__item--auth>a.nav-link--active{background:var(--weg-purple-200)}.nav-dropdown__trigger{gap:0.5rem;cursor:pointer}.nav-dropdown__trigger--open{background:#f1f5f9}.nav-dropdown__trigger--active{background:var(--weg-purple-200)}}@media (width >= 1280px){.main-nav{font-size:1.25rem}.main-nav__item--auth>a{padding:0.5rem 0.75rem}}.sign-in-link,.sign-out-link,.auth-button{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:inherit;text-decoration:none;outline:none}.auth-button{padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.sign-in-link:hover,.sign-out-link:hover,.auth-button:hover{opacity:0.85}.sign-in-link:focus-visible,.sign-out-link:focus-visible,.auth-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:4px;border-radius:4px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:0.5rem;background:transparent;color:inherit;cursor:pointer;text-decoration:none;outline:none}.icon-button:hover{background:#f1f5f9}.icon-button:focus-visible{outline:2px solid var(--weg-color-accent);outline-offset:2px}.menu-toggle{flex-shrink:0}@media (width >= 960px){.menu-toggle{display:none}}`;
|
|
5779
5779
|
|
|
5780
5780
|
const WEG_HOME = 'https://www.warwickemploymentgroup.com';
|
|
5781
5781
|
const DEFAULT_ACCOUNT_HOME = 'https://account.warwickemploymentgroup.com';
|
|
5782
|
-
/** Stay visible while scrolling down through the first half of the viewport. */
|
|
5783
|
-
const HEADER_SCROLL_HIDE_THRESHOLD_VH = 0.5;
|
|
5784
|
-
const HEADER_SCROLL_DIRECTION_DELTA = 5;
|
|
5785
5782
|
const DEFAULT_LOGO_HREF = `${WEG_HOME}/`;
|
|
5786
5783
|
/** Placeholder href — sign-out is handled via `wegAuthClick`, not navigation. */
|
|
5787
5784
|
const SIGN_OUT_HREF = '#';
|
|
@@ -5840,7 +5837,12 @@ function isManageAccountLink(link, accountHome) {
|
|
|
5840
5837
|
function isFindJobLink(link) {
|
|
5841
5838
|
if (link.label.trim().toLowerCase() === 'find a job')
|
|
5842
5839
|
return true;
|
|
5843
|
-
|
|
5840
|
+
const href = link.href?.trim();
|
|
5841
|
+
if (!href)
|
|
5842
|
+
return false;
|
|
5843
|
+
if (href === `${WEG_HOME}/find-a-job` || href === '/find-a-job')
|
|
5844
|
+
return true;
|
|
5845
|
+
return href.endsWith('/find-a-job');
|
|
5844
5846
|
}
|
|
5845
5847
|
function isDashboardLink(link, accountHome) {
|
|
5846
5848
|
if (link.label.trim().toLowerCase() === 'dashboard')
|
|
@@ -5887,6 +5889,7 @@ class WegHeader {
|
|
|
5887
5889
|
registerInstance(this, hostRef);
|
|
5888
5890
|
this.wegAuthClick = createEvent(this, "wegAuthClick");
|
|
5889
5891
|
}
|
|
5892
|
+
static SCROLL_REVEAL_VIEWPORT_FRACTION = 0.5;
|
|
5890
5893
|
/**
|
|
5891
5894
|
* Layout payload, supplied by the host application.
|
|
5892
5895
|
*
|
|
@@ -5905,7 +5908,9 @@ class WegHeader {
|
|
|
5905
5908
|
*/
|
|
5906
5909
|
layout;
|
|
5907
5910
|
/**
|
|
5908
|
-
*
|
|
5911
|
+
* Session flag from the host app. Enables signed-in UI (icons, compact manage account).
|
|
5912
|
+
* Navigation uses `layout.header.menu` when provided; falls back to the built-in
|
|
5913
|
+
* signed-in menu only when signed in and the layout menu is empty.
|
|
5909
5914
|
*/
|
|
5910
5915
|
signedIn = false;
|
|
5911
5916
|
/**
|
|
@@ -5931,20 +5936,19 @@ class WegHeader {
|
|
|
5931
5936
|
resolved = EMPTY_HEADER;
|
|
5932
5937
|
menuOpen = false;
|
|
5933
5938
|
openDropdown = null;
|
|
5934
|
-
headerHidden = false;
|
|
5935
5939
|
boundHandleDocumentClick = this.handleDocumentClick.bind(this);
|
|
5936
5940
|
boundHandleViewportChange = this.handleViewportChange.bind(this);
|
|
5937
5941
|
boundHandleHoverCapabilityChange = this.handleHoverCapabilityChange.bind(this);
|
|
5938
5942
|
boundHandleScroll = this.handleScroll.bind(this);
|
|
5939
|
-
headerResizeObserver;
|
|
5940
|
-
lastScrollY = 0;
|
|
5941
|
-
scrollTicking = false;
|
|
5942
5943
|
bodyScrollLocked = false;
|
|
5943
5944
|
bodyScrollLockY = 0;
|
|
5944
5945
|
hoverCloseTimer = null;
|
|
5945
5946
|
hoverOpenEnabled = false;
|
|
5946
5947
|
desktopMediaQuery;
|
|
5947
5948
|
hoverCapableMediaQuery;
|
|
5949
|
+
headerScrollMode = false;
|
|
5950
|
+
headerScrollHidden = false;
|
|
5951
|
+
lastScrollY = 0;
|
|
5948
5952
|
resolve() {
|
|
5949
5953
|
if (this.layout === undefined || this.layout === null) {
|
|
5950
5954
|
this.resolved = EMPTY_HEADER;
|
|
@@ -5961,69 +5965,25 @@ class WegHeader {
|
|
|
5961
5965
|
this.updateHoverDropdownEnabled();
|
|
5962
5966
|
this.handleViewportChange();
|
|
5963
5967
|
}
|
|
5964
|
-
componentDidLoad() {
|
|
5965
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
5966
|
-
if (!header)
|
|
5967
|
-
return;
|
|
5968
|
-
this.headerResizeObserver = new ResizeObserver(() => this.syncHeaderHeight());
|
|
5969
|
-
this.headerResizeObserver.observe(header);
|
|
5970
|
-
this.syncHeaderHeight();
|
|
5971
|
-
this.lastScrollY = window.scrollY;
|
|
5972
|
-
this.updateHeaderVisibility();
|
|
5973
|
-
}
|
|
5974
5968
|
connectedCallback() {
|
|
5975
5969
|
document.addEventListener('click', this.boundHandleDocumentClick);
|
|
5970
|
+
}
|
|
5971
|
+
componentDidLoad() {
|
|
5972
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
5976
5973
|
window.addEventListener('scroll', this.boundHandleScroll, { passive: true });
|
|
5974
|
+
this.applyScrollState();
|
|
5975
|
+
}
|
|
5976
|
+
componentDidRender() {
|
|
5977
|
+
this.applyScrollState();
|
|
5977
5978
|
}
|
|
5978
5979
|
disconnectedCallback() {
|
|
5979
5980
|
document.removeEventListener('click', this.boundHandleDocumentClick);
|
|
5980
5981
|
window.removeEventListener('scroll', this.boundHandleScroll);
|
|
5981
5982
|
this.unlockBodyScroll();
|
|
5982
|
-
this.headerResizeObserver?.disconnect();
|
|
5983
5983
|
this.desktopMediaQuery?.removeEventListener('change', this.boundHandleViewportChange);
|
|
5984
5984
|
this.hoverCapableMediaQuery?.removeEventListener('change', this.boundHandleHoverCapabilityChange);
|
|
5985
5985
|
this.cancelScheduledDropdownClose();
|
|
5986
5986
|
}
|
|
5987
|
-
syncHeaderHeight() {
|
|
5988
|
-
if (this.isMobileMenuActive())
|
|
5989
|
-
return;
|
|
5990
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
5991
|
-
if (!header)
|
|
5992
|
-
return;
|
|
5993
|
-
this.el.style.setProperty('--weg-header-height', `${header.offsetHeight}px`);
|
|
5994
|
-
}
|
|
5995
|
-
handleScroll() {
|
|
5996
|
-
if (this.scrollTicking)
|
|
5997
|
-
return;
|
|
5998
|
-
this.scrollTicking = true;
|
|
5999
|
-
requestAnimationFrame(() => {
|
|
6000
|
-
this.scrollTicking = false;
|
|
6001
|
-
this.updateHeaderVisibility();
|
|
6002
|
-
});
|
|
6003
|
-
}
|
|
6004
|
-
updateHeaderVisibility() {
|
|
6005
|
-
if (this.isMobileMenuActive()) {
|
|
6006
|
-
if (this.headerHidden)
|
|
6007
|
-
this.headerHidden = false;
|
|
6008
|
-
return;
|
|
6009
|
-
}
|
|
6010
|
-
const scrollY = window.scrollY;
|
|
6011
|
-
const delta = scrollY - this.lastScrollY;
|
|
6012
|
-
const threshold = window.innerHeight * HEADER_SCROLL_HIDE_THRESHOLD_VH;
|
|
6013
|
-
let nextHidden = this.headerHidden;
|
|
6014
|
-
if (scrollY <= threshold) {
|
|
6015
|
-
nextHidden = false;
|
|
6016
|
-
}
|
|
6017
|
-
else if (Math.abs(delta) >= HEADER_SCROLL_DIRECTION_DELTA) {
|
|
6018
|
-
nextHidden = delta > 0;
|
|
6019
|
-
}
|
|
6020
|
-
this.lastScrollY = scrollY;
|
|
6021
|
-
if (nextHidden === this.headerHidden)
|
|
6022
|
-
return;
|
|
6023
|
-
if (nextHidden)
|
|
6024
|
-
this.closeDropdown();
|
|
6025
|
-
this.headerHidden = nextHidden;
|
|
6026
|
-
}
|
|
6027
5987
|
/**
|
|
6028
5988
|
* Desktop dropdowns open on hover when viewport is md+ and the device reports hover support.
|
|
6029
5989
|
* Uses (hover: hover) only — not (pointer: fine), which breaks in DevTools and hybrid devices.
|
|
@@ -6112,6 +6072,65 @@ class WegHeader {
|
|
|
6112
6072
|
isMobileMenuActive() {
|
|
6113
6073
|
return this.menuOpen && !this.desktopMediaQuery?.matches;
|
|
6114
6074
|
}
|
|
6075
|
+
handleScroll() {
|
|
6076
|
+
this.applyScrollState();
|
|
6077
|
+
}
|
|
6078
|
+
applyScrollState() {
|
|
6079
|
+
if (this.isMobileMenuActive()) {
|
|
6080
|
+
if (this.headerScrollHidden) {
|
|
6081
|
+
this.headerScrollHidden = false;
|
|
6082
|
+
}
|
|
6083
|
+
if (this.headerScrollMode) {
|
|
6084
|
+
this.headerScrollMode = false;
|
|
6085
|
+
}
|
|
6086
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
6087
|
+
return;
|
|
6088
|
+
}
|
|
6089
|
+
const scrollY = Math.max(0, window.scrollY);
|
|
6090
|
+
const threshold = this.getScrollRevealThreshold();
|
|
6091
|
+
const pastRevealThreshold = scrollY >= threshold;
|
|
6092
|
+
let nextScrollMode = this.headerScrollMode;
|
|
6093
|
+
let nextHidden = this.headerScrollHidden;
|
|
6094
|
+
if (!pastRevealThreshold) {
|
|
6095
|
+
if (scrollY === 0) {
|
|
6096
|
+
nextScrollMode = false;
|
|
6097
|
+
nextHidden = false;
|
|
6098
|
+
}
|
|
6099
|
+
else if (this.headerScrollMode && !this.headerScrollHidden) {
|
|
6100
|
+
// Keep a revealed header pinned while scrolling up toward the top.
|
|
6101
|
+
nextScrollMode = true;
|
|
6102
|
+
nextHidden = scrollY > this.lastScrollY;
|
|
6103
|
+
}
|
|
6104
|
+
else {
|
|
6105
|
+
nextScrollMode = false;
|
|
6106
|
+
nextHidden = false;
|
|
6107
|
+
}
|
|
6108
|
+
}
|
|
6109
|
+
else if (scrollY === 0) {
|
|
6110
|
+
nextScrollMode = false;
|
|
6111
|
+
nextHidden = false;
|
|
6112
|
+
}
|
|
6113
|
+
else {
|
|
6114
|
+
nextScrollMode = true;
|
|
6115
|
+
if (scrollY > this.lastScrollY) {
|
|
6116
|
+
nextHidden = true;
|
|
6117
|
+
}
|
|
6118
|
+
else if (scrollY < this.lastScrollY) {
|
|
6119
|
+
nextHidden = false;
|
|
6120
|
+
}
|
|
6121
|
+
}
|
|
6122
|
+
this.lastScrollY = scrollY;
|
|
6123
|
+
if (nextScrollMode !== this.headerScrollMode) {
|
|
6124
|
+
this.headerScrollMode = nextScrollMode;
|
|
6125
|
+
}
|
|
6126
|
+
if (nextHidden !== this.headerScrollHidden) {
|
|
6127
|
+
this.headerScrollHidden = nextHidden;
|
|
6128
|
+
}
|
|
6129
|
+
}
|
|
6130
|
+
getScrollRevealThreshold() {
|
|
6131
|
+
const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
|
|
6132
|
+
return viewportHeight * WegHeader.SCROLL_REVEAL_VIEWPORT_FRACTION;
|
|
6133
|
+
}
|
|
6115
6134
|
watchLayout() {
|
|
6116
6135
|
this.resolve();
|
|
6117
6136
|
}
|
|
@@ -6321,7 +6340,6 @@ class WegHeader {
|
|
|
6321
6340
|
}
|
|
6322
6341
|
openMenu() {
|
|
6323
6342
|
this.menuOpen = true;
|
|
6324
|
-
this.headerHidden = false;
|
|
6325
6343
|
this.closeDropdown();
|
|
6326
6344
|
if (!this.desktopMediaQuery?.matches) {
|
|
6327
6345
|
this.lockBodyScroll();
|
|
@@ -6336,8 +6354,6 @@ class WegHeader {
|
|
|
6336
6354
|
this.menuOpen = false;
|
|
6337
6355
|
this.closeDropdown();
|
|
6338
6356
|
this.unlockBodyScroll();
|
|
6339
|
-
this.syncHeaderHeight();
|
|
6340
|
-
this.updateHeaderVisibility();
|
|
6341
6357
|
if (announce && wasMobileActive) {
|
|
6342
6358
|
this.announceToScreenReader(`${MAIN_NAV_LABEL} closed.`);
|
|
6343
6359
|
}
|
|
@@ -6349,7 +6365,13 @@ class WegHeader {
|
|
|
6349
6365
|
return normalizeAccountBase(this.accountBaseUrl);
|
|
6350
6366
|
}
|
|
6351
6367
|
getActiveMenu() {
|
|
6352
|
-
|
|
6368
|
+
if (this.resolved.menu.length > 0) {
|
|
6369
|
+
return this.resolved.menu;
|
|
6370
|
+
}
|
|
6371
|
+
if (this.signedIn) {
|
|
6372
|
+
return buildSignedInMenu(this.getAccountHome());
|
|
6373
|
+
}
|
|
6374
|
+
return this.resolved.menu;
|
|
6353
6375
|
}
|
|
6354
6376
|
getLogoSrc() {
|
|
6355
6377
|
return this.resolved.logoSrc ?? LOGO_SRC;
|
|
@@ -6520,12 +6542,12 @@ class WegHeader {
|
|
|
6520
6542
|
const logoSrc = this.getLogoSrc();
|
|
6521
6543
|
const closeMenu = () => this.closeMenu();
|
|
6522
6544
|
const mobileMenuActive = this.isMobileMenuActive();
|
|
6523
|
-
return (hAsync("div", { key: '
|
|
6545
|
+
return (hAsync(Host, { key: 'e0ed16abe9a49db723b627ea8bccfde470406f57', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, hAsync("div", { key: '574712a024543f0653f9956949b2796377451847', class: "weg-header-shell" }, hAsync("a", { key: '279c196e293d93db62fc29915f63b7b24b38e6c1', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), hAsync("header", { key: '29bbed6bde5ccf8cd2b4e4df4a7ba58b122c2d6a', class: {
|
|
6524
6546
|
header: true,
|
|
6525
|
-
'header--fixed': !mobileMenuActive,
|
|
6526
|
-
'header--hidden': this.headerHidden && !mobileMenuActive,
|
|
6527
6547
|
'header--menu-open': mobileMenuActive,
|
|
6528
|
-
|
|
6548
|
+
'header--scroll-mode': this.headerScrollMode,
|
|
6549
|
+
'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
|
|
6550
|
+
} }, hAsync("div", { key: '85650e9d0d244fefbd9f216130703de9288baa93', class: "header-inner" }, hAsync("div", { key: '34e7bf3d15733e9acefb12b2c77fee9a4cf7479c', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), hAsync("button", { key: '9e35626afcecc92d93deb2fb25f8f93727f85d4d', type: "button", class: "menu-toggle icon-button", "aria-label": mobileMenuActive ? CLOSE_MAIN_NAV_LABEL : OPEN_MAIN_NAV_LABEL, "aria-expanded": mobileMenuActive ? 'true' : 'false', "aria-controls": "weg-header-main-nav", onClick: () => this.toggleMenu() }, mobileMenuActive ? hAsync(CloseIcon, null) : hAsync(HamburgerIcon, null)), hAsync(Logo, { key: '99ffa62e443e939316b58d36cab8e9e0a10cfa36', href: logoHref, src: logoSrc }), hAsync("div", { key: 'c9b453f5187d5b6ad782ae03400c13f16a31c383', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), hAsync("div", { key: '0f15f985cf4931a9867c341d053f5ebd2b398d42', class: "main-nav-panel", id: "weg-header-main-nav", role: mobileMenuActive ? 'dialog' : undefined, "aria-modal": mobileMenuActive ? 'true' : undefined, "aria-label": mobileMenuActive ? MAIN_NAV_LABEL : undefined }, this.renderNav(mobileMenuActive ? closeMenu : undefined)))))));
|
|
6529
6551
|
}
|
|
6530
6552
|
static get watchers() { return {
|
|
6531
6553
|
"layout": [{
|
|
@@ -6545,7 +6567,8 @@ class WegHeader {
|
|
|
6545
6567
|
"resolved": [32],
|
|
6546
6568
|
"menuOpen": [32],
|
|
6547
6569
|
"openDropdown": [32],
|
|
6548
|
-
"
|
|
6570
|
+
"headerScrollMode": [32],
|
|
6571
|
+
"headerScrollHidden": [32]
|
|
6549
6572
|
},
|
|
6550
6573
|
"$listeners$": [[8, "keydown", "handleKeyDown"]],
|
|
6551
6574
|
"$lazyBundleId$": "-",
|