weg-shared-layout 0.0.51 → 0.0.53
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 +76 -67
- package/dist/cjs/weg-shared-layout.cjs.js +2 -2
- package/dist/collection/components/weg-header/weg-header.css +52 -20
- package/dist/collection/components/weg-header/weg-header.js +77 -67
- 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 +76 -67
- package/dist/esm/weg-shared-layout.js +3 -3
- package/dist/types/components/weg-header/weg-header.d.ts +9 -8
- package/dist/weg-shared-layout/{p-B5Q4zIrC.js → p-DeWUZGfb.js} +2 -2
- package/dist/weg-shared-layout/p-d7e49e17.entry.js +1 -0
- package/dist/weg-shared-layout/weg-shared-layout.esm.js +1 -1
- package/hydrate/index.js +77 -67
- package/hydrate/index.mjs +77 -67
- package/package.json +1 -1
- package/dist/weg-shared-layout/p-5a26415d.entry.js +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7WCqkJs6.js');
|
|
4
4
|
var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
5
5
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["weg-footer_2.cjs",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}],[513,"weg-header",{"layout":[1],"signedIn":[516,"signed-in"],"userName":[1,"user-name"],"accountBaseUrl":[1,"account-base-url"],"currentPath":[1,"current-path"],"resolved":[32],"menuOpen":[32],"openDropdown":[32],"
|
|
9
|
+
return index.bootstrapLazy([["weg-footer_2.cjs",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}],[513,"weg-header",{"layout":[1],"signedIn":[516,"signed-in"],"userName":[1,"user-name"],"accountBaseUrl":[1,"account-base-url"],"currentPath":[1,"current-path"],"resolved":[32],"menuOpen":[32],"openDropdown":[32],"headerScrollMode":[32],"headerScrollHidden":[32]},[[8,"keydown","handleKeyDown"]],{"layout":[{"watchLayout":0}]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7WCqkJs6.js');
|
|
4
4
|
|
|
5
5
|
const LINK_TARGETS = new Set(['_blank', '_self', '_parent', '_top']);
|
|
6
6
|
function parseJsonProp(value) {
|
|
@@ -377,13 +377,10 @@ const LOGO_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFcCAYAAACQ
|
|
|
377
377
|
|
|
378
378
|
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}`;
|
|
379
379
|
|
|
380
|
-
const wegHeaderCss = () => `:host{--weg-breakpoint-sm:640px;--weg-breakpoint-md:960px;--weg-breakpoint-lg:1280px;--weg-breakpoint-xl:1440px}.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)}
|
|
380
|
+
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}}`;
|
|
381
381
|
|
|
382
382
|
const WEG_HOME = 'https://www.warwickemploymentgroup.com';
|
|
383
383
|
const DEFAULT_ACCOUNT_HOME = 'https://account.warwickemploymentgroup.com';
|
|
384
|
-
/** Stay visible while scrolling down through the first half of the viewport. */
|
|
385
|
-
const HEADER_SCROLL_HIDE_THRESHOLD_VH = 0.5;
|
|
386
|
-
const HEADER_SCROLL_DIRECTION_DELTA = 5;
|
|
387
384
|
const DEFAULT_LOGO_HREF = `${WEG_HOME}/`;
|
|
388
385
|
/** Placeholder href — sign-out is handled via `wegAuthClick`, not navigation. */
|
|
389
386
|
const SIGN_OUT_HREF = '#';
|
|
@@ -489,6 +486,7 @@ const WegHeader = class {
|
|
|
489
486
|
index.registerInstance(this, hostRef);
|
|
490
487
|
this.wegAuthClick = index.createEvent(this, "wegAuthClick");
|
|
491
488
|
}
|
|
489
|
+
static SCROLL_REVEAL_VIEWPORT_FRACTION = 0.5;
|
|
492
490
|
/**
|
|
493
491
|
* Layout payload, supplied by the host application.
|
|
494
492
|
*
|
|
@@ -533,20 +531,19 @@ const WegHeader = class {
|
|
|
533
531
|
resolved = EMPTY_HEADER;
|
|
534
532
|
menuOpen = false;
|
|
535
533
|
openDropdown = null;
|
|
536
|
-
headerHidden = false;
|
|
537
534
|
boundHandleDocumentClick = this.handleDocumentClick.bind(this);
|
|
538
535
|
boundHandleViewportChange = this.handleViewportChange.bind(this);
|
|
539
536
|
boundHandleHoverCapabilityChange = this.handleHoverCapabilityChange.bind(this);
|
|
540
537
|
boundHandleScroll = this.handleScroll.bind(this);
|
|
541
|
-
headerResizeObserver;
|
|
542
|
-
lastScrollY = 0;
|
|
543
|
-
scrollTicking = false;
|
|
544
538
|
bodyScrollLocked = false;
|
|
545
539
|
bodyScrollLockY = 0;
|
|
546
540
|
hoverCloseTimer = null;
|
|
547
541
|
hoverOpenEnabled = false;
|
|
548
542
|
desktopMediaQuery;
|
|
549
543
|
hoverCapableMediaQuery;
|
|
544
|
+
headerScrollMode = false;
|
|
545
|
+
headerScrollHidden = false;
|
|
546
|
+
lastScrollY = 0;
|
|
550
547
|
resolve() {
|
|
551
548
|
if (this.layout === undefined || this.layout === null) {
|
|
552
549
|
this.resolved = EMPTY_HEADER;
|
|
@@ -563,69 +560,25 @@ const WegHeader = class {
|
|
|
563
560
|
this.updateHoverDropdownEnabled();
|
|
564
561
|
this.handleViewportChange();
|
|
565
562
|
}
|
|
566
|
-
componentDidLoad() {
|
|
567
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
568
|
-
if (!header)
|
|
569
|
-
return;
|
|
570
|
-
this.headerResizeObserver = new ResizeObserver(() => this.syncHeaderHeight());
|
|
571
|
-
this.headerResizeObserver.observe(header);
|
|
572
|
-
this.syncHeaderHeight();
|
|
573
|
-
this.lastScrollY = window.scrollY;
|
|
574
|
-
this.updateHeaderVisibility();
|
|
575
|
-
}
|
|
576
563
|
connectedCallback() {
|
|
577
564
|
document.addEventListener('click', this.boundHandleDocumentClick);
|
|
565
|
+
}
|
|
566
|
+
componentDidLoad() {
|
|
567
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
578
568
|
window.addEventListener('scroll', this.boundHandleScroll, { passive: true });
|
|
569
|
+
this.applyScrollState();
|
|
570
|
+
}
|
|
571
|
+
componentDidRender() {
|
|
572
|
+
this.applyScrollState();
|
|
579
573
|
}
|
|
580
574
|
disconnectedCallback() {
|
|
581
575
|
document.removeEventListener('click', this.boundHandleDocumentClick);
|
|
582
576
|
window.removeEventListener('scroll', this.boundHandleScroll);
|
|
583
577
|
this.unlockBodyScroll();
|
|
584
|
-
this.headerResizeObserver?.disconnect();
|
|
585
578
|
this.desktopMediaQuery?.removeEventListener('change', this.boundHandleViewportChange);
|
|
586
579
|
this.hoverCapableMediaQuery?.removeEventListener('change', this.boundHandleHoverCapabilityChange);
|
|
587
580
|
this.cancelScheduledDropdownClose();
|
|
588
581
|
}
|
|
589
|
-
syncHeaderHeight() {
|
|
590
|
-
if (this.isMobileMenuActive())
|
|
591
|
-
return;
|
|
592
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
593
|
-
if (!header)
|
|
594
|
-
return;
|
|
595
|
-
this.el.style.setProperty('--weg-header-height', `${header.offsetHeight}px`);
|
|
596
|
-
}
|
|
597
|
-
handleScroll() {
|
|
598
|
-
if (this.scrollTicking)
|
|
599
|
-
return;
|
|
600
|
-
this.scrollTicking = true;
|
|
601
|
-
requestAnimationFrame(() => {
|
|
602
|
-
this.scrollTicking = false;
|
|
603
|
-
this.updateHeaderVisibility();
|
|
604
|
-
});
|
|
605
|
-
}
|
|
606
|
-
updateHeaderVisibility() {
|
|
607
|
-
if (this.isMobileMenuActive()) {
|
|
608
|
-
if (this.headerHidden)
|
|
609
|
-
this.headerHidden = false;
|
|
610
|
-
return;
|
|
611
|
-
}
|
|
612
|
-
const scrollY = window.scrollY;
|
|
613
|
-
const delta = scrollY - this.lastScrollY;
|
|
614
|
-
const threshold = window.innerHeight * HEADER_SCROLL_HIDE_THRESHOLD_VH;
|
|
615
|
-
let nextHidden = this.headerHidden;
|
|
616
|
-
if (scrollY <= threshold) {
|
|
617
|
-
nextHidden = false;
|
|
618
|
-
}
|
|
619
|
-
else if (Math.abs(delta) >= HEADER_SCROLL_DIRECTION_DELTA) {
|
|
620
|
-
nextHidden = delta > 0;
|
|
621
|
-
}
|
|
622
|
-
this.lastScrollY = scrollY;
|
|
623
|
-
if (nextHidden === this.headerHidden)
|
|
624
|
-
return;
|
|
625
|
-
if (nextHidden)
|
|
626
|
-
this.closeDropdown();
|
|
627
|
-
this.headerHidden = nextHidden;
|
|
628
|
-
}
|
|
629
582
|
/**
|
|
630
583
|
* Desktop dropdowns open on hover when viewport is md+ and the device reports hover support.
|
|
631
584
|
* Uses (hover: hover) only — not (pointer: fine), which breaks in DevTools and hybrid devices.
|
|
@@ -714,6 +667,65 @@ const WegHeader = class {
|
|
|
714
667
|
isMobileMenuActive() {
|
|
715
668
|
return this.menuOpen && !this.desktopMediaQuery?.matches;
|
|
716
669
|
}
|
|
670
|
+
handleScroll() {
|
|
671
|
+
this.applyScrollState();
|
|
672
|
+
}
|
|
673
|
+
applyScrollState() {
|
|
674
|
+
if (this.isMobileMenuActive()) {
|
|
675
|
+
if (this.headerScrollHidden) {
|
|
676
|
+
this.headerScrollHidden = false;
|
|
677
|
+
}
|
|
678
|
+
if (this.headerScrollMode) {
|
|
679
|
+
this.headerScrollMode = false;
|
|
680
|
+
}
|
|
681
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
682
|
+
return;
|
|
683
|
+
}
|
|
684
|
+
const scrollY = Math.max(0, window.scrollY);
|
|
685
|
+
const threshold = this.getScrollRevealThreshold();
|
|
686
|
+
const pastRevealThreshold = scrollY >= threshold;
|
|
687
|
+
let nextScrollMode = this.headerScrollMode;
|
|
688
|
+
let nextHidden = this.headerScrollHidden;
|
|
689
|
+
if (!pastRevealThreshold) {
|
|
690
|
+
if (scrollY === 0) {
|
|
691
|
+
nextScrollMode = false;
|
|
692
|
+
nextHidden = false;
|
|
693
|
+
}
|
|
694
|
+
else if (this.headerScrollMode && !this.headerScrollHidden) {
|
|
695
|
+
// Keep a revealed header pinned while scrolling up toward the top.
|
|
696
|
+
nextScrollMode = true;
|
|
697
|
+
nextHidden = scrollY > this.lastScrollY;
|
|
698
|
+
}
|
|
699
|
+
else {
|
|
700
|
+
nextScrollMode = false;
|
|
701
|
+
nextHidden = false;
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
else if (scrollY === 0) {
|
|
705
|
+
nextScrollMode = false;
|
|
706
|
+
nextHidden = false;
|
|
707
|
+
}
|
|
708
|
+
else {
|
|
709
|
+
nextScrollMode = true;
|
|
710
|
+
if (scrollY > this.lastScrollY) {
|
|
711
|
+
nextHidden = true;
|
|
712
|
+
}
|
|
713
|
+
else if (scrollY < this.lastScrollY) {
|
|
714
|
+
nextHidden = false;
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
this.lastScrollY = scrollY;
|
|
718
|
+
if (nextScrollMode !== this.headerScrollMode) {
|
|
719
|
+
this.headerScrollMode = nextScrollMode;
|
|
720
|
+
}
|
|
721
|
+
if (nextHidden !== this.headerScrollHidden) {
|
|
722
|
+
this.headerScrollHidden = nextHidden;
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
getScrollRevealThreshold() {
|
|
726
|
+
const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
|
|
727
|
+
return viewportHeight * WegHeader.SCROLL_REVEAL_VIEWPORT_FRACTION;
|
|
728
|
+
}
|
|
717
729
|
watchLayout() {
|
|
718
730
|
this.resolve();
|
|
719
731
|
}
|
|
@@ -923,7 +935,6 @@ const WegHeader = class {
|
|
|
923
935
|
}
|
|
924
936
|
openMenu() {
|
|
925
937
|
this.menuOpen = true;
|
|
926
|
-
this.headerHidden = false;
|
|
927
938
|
this.closeDropdown();
|
|
928
939
|
if (!this.desktopMediaQuery?.matches) {
|
|
929
940
|
this.lockBodyScroll();
|
|
@@ -938,8 +949,6 @@ const WegHeader = class {
|
|
|
938
949
|
this.menuOpen = false;
|
|
939
950
|
this.closeDropdown();
|
|
940
951
|
this.unlockBodyScroll();
|
|
941
|
-
this.syncHeaderHeight();
|
|
942
|
-
this.updateHeaderVisibility();
|
|
943
952
|
if (announce && wasMobileActive) {
|
|
944
953
|
this.announceToScreenReader(`${MAIN_NAV_LABEL} closed.`);
|
|
945
954
|
}
|
|
@@ -1122,12 +1131,12 @@ const WegHeader = class {
|
|
|
1122
1131
|
const logoSrc = this.getLogoSrc();
|
|
1123
1132
|
const closeMenu = () => this.closeMenu();
|
|
1124
1133
|
const mobileMenuActive = this.isMobileMenuActive();
|
|
1125
|
-
return (index.h(index.
|
|
1134
|
+
return (index.h(index.Host, { key: 'ce97dfe33ac5f2576e1172ead666cc3e60fea46b', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, index.h("div", { key: '3f79d9212732577f5f701aabfcc8cc8bd0a45646', class: "weg-header-shell" }, index.h("a", { key: '520d8ac6ba79472a23b1e558b02cd1d3b26b60cd', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), index.h("header", { key: '949e5d1505ae2603490391412e1295703d10a930', class: {
|
|
1126
1135
|
header: true,
|
|
1127
|
-
'header--fixed': !mobileMenuActive,
|
|
1128
|
-
'header--hidden': this.headerHidden && !mobileMenuActive,
|
|
1129
1136
|
'header--menu-open': mobileMenuActive,
|
|
1130
|
-
|
|
1137
|
+
'header--scroll-mode': this.headerScrollMode,
|
|
1138
|
+
'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
|
|
1139
|
+
} }, index.h("div", { key: 'f43fcc66f9bd450580b2dcfe03a7daf9b804e573', class: "header-inner" }, index.h("div", { key: '4366f0e0c617e42f07857db3343e5a4d489abe83', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), index.h("button", { key: '4cce3ca0a8a13d182367294ae0223b6c17e7dcba', 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 ? index.h(CloseIcon, null) : index.h(HamburgerIcon, null)), index.h(Logo, { key: 'a2508570f7f2edc2fb2ea93f2cce779e63396422', href: logoHref, src: logoSrc }), index.h("div", { key: 'dbcab901c9eb1bcad0e5b38e3440a63a70b3f7a6', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), index.h("div", { key: 'c6e48c4221bf8d0501c9960ac09857b4b3fcd521', 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)))))));
|
|
1131
1140
|
}
|
|
1132
1141
|
static get watchers() { return {
|
|
1133
1142
|
"layout": [{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7WCqkJs6.js');
|
|
4
4
|
var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
5
5
|
|
|
6
6
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["weg-footer_2.cjs",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}],[513,"weg-header",{"layout":[1],"signedIn":[516,"signed-in"],"userName":[1,"user-name"],"accountBaseUrl":[1,"account-base-url"],"currentPath":[1,"current-path"],"resolved":[32],"menuOpen":[32],"openDropdown":[32],"
|
|
22
|
+
return index.bootstrapLazy([["weg-footer_2.cjs",[[513,"weg-footer",{"layout":[1],"resolved":[32]},null,{"layout":[{"watchLayout":0}]}],[513,"weg-header",{"layout":[1],"signedIn":[516,"signed-in"],"userName":[1,"user-name"],"accountBaseUrl":[1,"account-base-url"],"currentPath":[1,"current-path"],"resolved":[32],"menuOpen":[32],"openDropdown":[32],"headerScrollMode":[32],"headerScrollHidden":[32]},[[8,"keydown","handleKeyDown"]],{"layout":[{"watchLayout":0}]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -16,6 +16,37 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
|
|
19
|
+
.weg-header-shell {
|
|
20
|
+
display: contents;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:host {
|
|
24
|
+
display: block;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host(.weg-header--scroll-mode) {
|
|
28
|
+
/* Reserves flow space while the header is fixed past 50vh. */
|
|
29
|
+
min-height: 4.25rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (width >= 960px) {
|
|
33
|
+
:host(.weg-header--scroll-mode) {
|
|
34
|
+
min-height: 5.75rem;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@media (width >= 1280px) {
|
|
39
|
+
:host(.weg-header--scroll-mode) {
|
|
40
|
+
min-height: 7.75rem;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media (width >= 1440px) {
|
|
45
|
+
:host(.weg-header--scroll-mode) {
|
|
46
|
+
min-height: 8.75rem;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
19
50
|
.skip-to-content {
|
|
20
51
|
position: fixed;
|
|
21
52
|
top: -100%;
|
|
@@ -41,49 +72,50 @@
|
|
|
41
72
|
|
|
42
73
|
.header {
|
|
43
74
|
width: 100%;
|
|
75
|
+
position: relative;
|
|
76
|
+
z-index: 1000;
|
|
77
|
+
transition: transform 0.25s ease;
|
|
44
78
|
border-bottom: 2px solid var(--weg-color-accent);
|
|
45
79
|
background: #ffffff;
|
|
46
80
|
color: #0f172a;
|
|
47
81
|
font-family: var(--weg-font-family);
|
|
48
82
|
}
|
|
49
83
|
|
|
50
|
-
|
|
51
|
-
.header {
|
|
52
|
-
border-bottom-width: 0.25rem;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
:host {
|
|
57
|
-
position: relative;
|
|
58
|
-
z-index: 20;
|
|
59
|
-
display: block;
|
|
60
|
-
height: var(--weg-header-height, auto);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.header--fixed {
|
|
84
|
+
.header--scroll-mode {
|
|
64
85
|
position: fixed;
|
|
65
86
|
top: 0;
|
|
66
87
|
left: 0;
|
|
67
88
|
right: 0;
|
|
68
|
-
z-index: 20;
|
|
69
|
-
transform: translateY(0);
|
|
70
|
-
transition: transform 0.25s ease;
|
|
71
89
|
}
|
|
72
90
|
|
|
73
|
-
.header--
|
|
91
|
+
.header--scroll-hidden {
|
|
74
92
|
transform: translateY(-100%);
|
|
75
93
|
}
|
|
76
94
|
|
|
95
|
+
.header:not(.header--scroll-mode).header--scroll-hidden {
|
|
96
|
+
transform: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
77
99
|
@media (prefers-reduced-motion: reduce) {
|
|
78
|
-
.header
|
|
100
|
+
.header {
|
|
79
101
|
transition: none;
|
|
80
102
|
}
|
|
81
103
|
}
|
|
82
104
|
|
|
105
|
+
@media (width >= 960px) {
|
|
106
|
+
.header {
|
|
107
|
+
border-bottom-width: 0.25rem;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
83
111
|
.header--menu-open {
|
|
84
112
|
position: fixed;
|
|
85
|
-
|
|
113
|
+
top: 0;
|
|
114
|
+
left: 0;
|
|
115
|
+
right: 0;
|
|
116
|
+
bottom: 0;
|
|
86
117
|
z-index: 1000;
|
|
118
|
+
transform: none;
|
|
87
119
|
display: flex;
|
|
88
120
|
flex-direction: column;
|
|
89
121
|
overflow: hidden;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import { h } from "@stencil/core";
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { findAuthMenuLink, isMenuGroup, isNonEmptyString, normalizeHeaderMenu, parseJsonProp, } from "../../utils/layout";
|
|
3
3
|
import { WEG_HOVER_CAPABLE_MEDIA_QUERY, WEG_MD_MEDIA_QUERY } from "../../constants/breakpoints";
|
|
4
4
|
import { isAriaCurrentNavHref, isNavLinkActive, resolveAriaCurrentNavKey, } from "../../utils/nav-active";
|
|
5
5
|
import { LOGO_SRC } from "./logo-data";
|
|
6
6
|
const WEG_HOME = 'https://www.warwickemploymentgroup.com';
|
|
7
7
|
const DEFAULT_ACCOUNT_HOME = 'https://account.warwickemploymentgroup.com';
|
|
8
|
-
/** Stay visible while scrolling down through the first half of the viewport. */
|
|
9
|
-
const HEADER_SCROLL_HIDE_THRESHOLD_VH = 0.5;
|
|
10
|
-
const HEADER_SCROLL_DIRECTION_DELTA = 5;
|
|
11
8
|
const DEFAULT_LOGO_HREF = `${WEG_HOME}/`;
|
|
12
9
|
/** Placeholder href — sign-out is handled via `wegAuthClick`, not navigation. */
|
|
13
10
|
const SIGN_OUT_HREF = '#';
|
|
@@ -109,6 +106,7 @@ function Logo({ href, src }) {
|
|
|
109
106
|
return (h("a", { class: "logo-link", href: href, "aria-label": "Home" }, h("img", { class: "logo", src: src, alt: "Warwick Employment Group logo", width: "225", height: "83" })));
|
|
110
107
|
}
|
|
111
108
|
export class WegHeader {
|
|
109
|
+
static SCROLL_REVEAL_VIEWPORT_FRACTION = 0.5;
|
|
112
110
|
/**
|
|
113
111
|
* Layout payload, supplied by the host application.
|
|
114
112
|
*
|
|
@@ -153,20 +151,19 @@ export class WegHeader {
|
|
|
153
151
|
resolved = EMPTY_HEADER;
|
|
154
152
|
menuOpen = false;
|
|
155
153
|
openDropdown = null;
|
|
156
|
-
headerHidden = false;
|
|
157
154
|
boundHandleDocumentClick = this.handleDocumentClick.bind(this);
|
|
158
155
|
boundHandleViewportChange = this.handleViewportChange.bind(this);
|
|
159
156
|
boundHandleHoverCapabilityChange = this.handleHoverCapabilityChange.bind(this);
|
|
160
157
|
boundHandleScroll = this.handleScroll.bind(this);
|
|
161
|
-
headerResizeObserver;
|
|
162
|
-
lastScrollY = 0;
|
|
163
|
-
scrollTicking = false;
|
|
164
158
|
bodyScrollLocked = false;
|
|
165
159
|
bodyScrollLockY = 0;
|
|
166
160
|
hoverCloseTimer = null;
|
|
167
161
|
hoverOpenEnabled = false;
|
|
168
162
|
desktopMediaQuery;
|
|
169
163
|
hoverCapableMediaQuery;
|
|
164
|
+
headerScrollMode = false;
|
|
165
|
+
headerScrollHidden = false;
|
|
166
|
+
lastScrollY = 0;
|
|
170
167
|
resolve() {
|
|
171
168
|
if (this.layout === undefined || this.layout === null) {
|
|
172
169
|
this.resolved = EMPTY_HEADER;
|
|
@@ -183,69 +180,25 @@ export class WegHeader {
|
|
|
183
180
|
this.updateHoverDropdownEnabled();
|
|
184
181
|
this.handleViewportChange();
|
|
185
182
|
}
|
|
186
|
-
componentDidLoad() {
|
|
187
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
188
|
-
if (!header)
|
|
189
|
-
return;
|
|
190
|
-
this.headerResizeObserver = new ResizeObserver(() => this.syncHeaderHeight());
|
|
191
|
-
this.headerResizeObserver.observe(header);
|
|
192
|
-
this.syncHeaderHeight();
|
|
193
|
-
this.lastScrollY = window.scrollY;
|
|
194
|
-
this.updateHeaderVisibility();
|
|
195
|
-
}
|
|
196
183
|
connectedCallback() {
|
|
197
184
|
document.addEventListener('click', this.boundHandleDocumentClick);
|
|
185
|
+
}
|
|
186
|
+
componentDidLoad() {
|
|
187
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
198
188
|
window.addEventListener('scroll', this.boundHandleScroll, { passive: true });
|
|
189
|
+
this.applyScrollState();
|
|
190
|
+
}
|
|
191
|
+
componentDidRender() {
|
|
192
|
+
this.applyScrollState();
|
|
199
193
|
}
|
|
200
194
|
disconnectedCallback() {
|
|
201
195
|
document.removeEventListener('click', this.boundHandleDocumentClick);
|
|
202
196
|
window.removeEventListener('scroll', this.boundHandleScroll);
|
|
203
197
|
this.unlockBodyScroll();
|
|
204
|
-
this.headerResizeObserver?.disconnect();
|
|
205
198
|
this.desktopMediaQuery?.removeEventListener('change', this.boundHandleViewportChange);
|
|
206
199
|
this.hoverCapableMediaQuery?.removeEventListener('change', this.boundHandleHoverCapabilityChange);
|
|
207
200
|
this.cancelScheduledDropdownClose();
|
|
208
201
|
}
|
|
209
|
-
syncHeaderHeight() {
|
|
210
|
-
if (this.isMobileMenuActive())
|
|
211
|
-
return;
|
|
212
|
-
const header = this.el.shadowRoot?.querySelector('.header');
|
|
213
|
-
if (!header)
|
|
214
|
-
return;
|
|
215
|
-
this.el.style.setProperty('--weg-header-height', `${header.offsetHeight}px`);
|
|
216
|
-
}
|
|
217
|
-
handleScroll() {
|
|
218
|
-
if (this.scrollTicking)
|
|
219
|
-
return;
|
|
220
|
-
this.scrollTicking = true;
|
|
221
|
-
requestAnimationFrame(() => {
|
|
222
|
-
this.scrollTicking = false;
|
|
223
|
-
this.updateHeaderVisibility();
|
|
224
|
-
});
|
|
225
|
-
}
|
|
226
|
-
updateHeaderVisibility() {
|
|
227
|
-
if (this.isMobileMenuActive()) {
|
|
228
|
-
if (this.headerHidden)
|
|
229
|
-
this.headerHidden = false;
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
const scrollY = window.scrollY;
|
|
233
|
-
const delta = scrollY - this.lastScrollY;
|
|
234
|
-
const threshold = window.innerHeight * HEADER_SCROLL_HIDE_THRESHOLD_VH;
|
|
235
|
-
let nextHidden = this.headerHidden;
|
|
236
|
-
if (scrollY <= threshold) {
|
|
237
|
-
nextHidden = false;
|
|
238
|
-
}
|
|
239
|
-
else if (Math.abs(delta) >= HEADER_SCROLL_DIRECTION_DELTA) {
|
|
240
|
-
nextHidden = delta > 0;
|
|
241
|
-
}
|
|
242
|
-
this.lastScrollY = scrollY;
|
|
243
|
-
if (nextHidden === this.headerHidden)
|
|
244
|
-
return;
|
|
245
|
-
if (nextHidden)
|
|
246
|
-
this.closeDropdown();
|
|
247
|
-
this.headerHidden = nextHidden;
|
|
248
|
-
}
|
|
249
202
|
/**
|
|
250
203
|
* Desktop dropdowns open on hover when viewport is md+ and the device reports hover support.
|
|
251
204
|
* Uses (hover: hover) only — not (pointer: fine), which breaks in DevTools and hybrid devices.
|
|
@@ -334,6 +287,65 @@ export class WegHeader {
|
|
|
334
287
|
isMobileMenuActive() {
|
|
335
288
|
return this.menuOpen && !this.desktopMediaQuery?.matches;
|
|
336
289
|
}
|
|
290
|
+
handleScroll() {
|
|
291
|
+
this.applyScrollState();
|
|
292
|
+
}
|
|
293
|
+
applyScrollState() {
|
|
294
|
+
if (this.isMobileMenuActive()) {
|
|
295
|
+
if (this.headerScrollHidden) {
|
|
296
|
+
this.headerScrollHidden = false;
|
|
297
|
+
}
|
|
298
|
+
if (this.headerScrollMode) {
|
|
299
|
+
this.headerScrollMode = false;
|
|
300
|
+
}
|
|
301
|
+
this.lastScrollY = Math.max(0, window.scrollY);
|
|
302
|
+
return;
|
|
303
|
+
}
|
|
304
|
+
const scrollY = Math.max(0, window.scrollY);
|
|
305
|
+
const threshold = this.getScrollRevealThreshold();
|
|
306
|
+
const pastRevealThreshold = scrollY >= threshold;
|
|
307
|
+
let nextScrollMode = this.headerScrollMode;
|
|
308
|
+
let nextHidden = this.headerScrollHidden;
|
|
309
|
+
if (!pastRevealThreshold) {
|
|
310
|
+
if (scrollY === 0) {
|
|
311
|
+
nextScrollMode = false;
|
|
312
|
+
nextHidden = false;
|
|
313
|
+
}
|
|
314
|
+
else if (this.headerScrollMode && !this.headerScrollHidden) {
|
|
315
|
+
// Keep a revealed header pinned while scrolling up toward the top.
|
|
316
|
+
nextScrollMode = true;
|
|
317
|
+
nextHidden = scrollY > this.lastScrollY;
|
|
318
|
+
}
|
|
319
|
+
else {
|
|
320
|
+
nextScrollMode = false;
|
|
321
|
+
nextHidden = false;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
else if (scrollY === 0) {
|
|
325
|
+
nextScrollMode = false;
|
|
326
|
+
nextHidden = false;
|
|
327
|
+
}
|
|
328
|
+
else {
|
|
329
|
+
nextScrollMode = true;
|
|
330
|
+
if (scrollY > this.lastScrollY) {
|
|
331
|
+
nextHidden = true;
|
|
332
|
+
}
|
|
333
|
+
else if (scrollY < this.lastScrollY) {
|
|
334
|
+
nextHidden = false;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
this.lastScrollY = scrollY;
|
|
338
|
+
if (nextScrollMode !== this.headerScrollMode) {
|
|
339
|
+
this.headerScrollMode = nextScrollMode;
|
|
340
|
+
}
|
|
341
|
+
if (nextHidden !== this.headerScrollHidden) {
|
|
342
|
+
this.headerScrollHidden = nextHidden;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
getScrollRevealThreshold() {
|
|
346
|
+
const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
|
|
347
|
+
return viewportHeight * WegHeader.SCROLL_REVEAL_VIEWPORT_FRACTION;
|
|
348
|
+
}
|
|
337
349
|
watchLayout() {
|
|
338
350
|
this.resolve();
|
|
339
351
|
}
|
|
@@ -543,7 +555,6 @@ export class WegHeader {
|
|
|
543
555
|
}
|
|
544
556
|
openMenu() {
|
|
545
557
|
this.menuOpen = true;
|
|
546
|
-
this.headerHidden = false;
|
|
547
558
|
this.closeDropdown();
|
|
548
559
|
if (!this.desktopMediaQuery?.matches) {
|
|
549
560
|
this.lockBodyScroll();
|
|
@@ -558,8 +569,6 @@ export class WegHeader {
|
|
|
558
569
|
this.menuOpen = false;
|
|
559
570
|
this.closeDropdown();
|
|
560
571
|
this.unlockBodyScroll();
|
|
561
|
-
this.syncHeaderHeight();
|
|
562
|
-
this.updateHeaderVisibility();
|
|
563
572
|
if (announce && wasMobileActive) {
|
|
564
573
|
this.announceToScreenReader(`${MAIN_NAV_LABEL} closed.`);
|
|
565
574
|
}
|
|
@@ -742,12 +751,12 @@ export class WegHeader {
|
|
|
742
751
|
const logoSrc = this.getLogoSrc();
|
|
743
752
|
const closeMenu = () => this.closeMenu();
|
|
744
753
|
const mobileMenuActive = this.isMobileMenuActive();
|
|
745
|
-
return (h(
|
|
754
|
+
return (h(Host, { key: 'ce97dfe33ac5f2576e1172ead666cc3e60fea46b', class: { 'weg-header--scroll-mode': this.headerScrollMode } }, h("div", { key: '3f79d9212732577f5f701aabfcc8cc8bd0a45646', class: "weg-header-shell" }, h("a", { key: '520d8ac6ba79472a23b1e558b02cd1d3b26b60cd', class: "skip-to-content", href: "#", title: SKIP_TO_CONTENT_LABEL, onClick: (event) => this.handleSkipToContent(event) }, SKIP_TO_CONTENT_LABEL), h("header", { key: '949e5d1505ae2603490391412e1295703d10a930', class: {
|
|
746
755
|
header: true,
|
|
747
|
-
'header--fixed': !mobileMenuActive,
|
|
748
|
-
'header--hidden': this.headerHidden && !mobileMenuActive,
|
|
749
756
|
'header--menu-open': mobileMenuActive,
|
|
750
|
-
|
|
757
|
+
'header--scroll-mode': this.headerScrollMode,
|
|
758
|
+
'header--scroll-hidden': this.headerScrollHidden && this.headerScrollMode,
|
|
759
|
+
} }, h("div", { key: 'f43fcc66f9bd450580b2dcfe03a7daf9b804e573', class: "header-inner" }, h("div", { key: '4366f0e0c617e42f07857db3343e5a4d489abe83', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", "data-weg-sr-live": true }), h("button", { key: '4cce3ca0a8a13d182367294ae0223b6c17e7dcba', 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 ? h(CloseIcon, null) : h(HamburgerIcon, null)), h(Logo, { key: 'a2508570f7f2edc2fb2ea93f2cce779e63396422', href: logoHref, src: logoSrc }), h("div", { key: 'dbcab901c9eb1bcad0e5b38e3440a63a70b3f7a6', class: "header-actions" }, this.renderCompactAuth(mobileMenuActive ? closeMenu : undefined)), h("div", { key: 'c6e48c4221bf8d0501c9960ac09857b4b3fcd521', 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)))))));
|
|
751
760
|
}
|
|
752
761
|
static get is() { return "weg-header"; }
|
|
753
762
|
static get encapsulation() { return "shadow"; }
|
|
@@ -873,7 +882,8 @@ export class WegHeader {
|
|
|
873
882
|
"resolved": {},
|
|
874
883
|
"menuOpen": {},
|
|
875
884
|
"openDropdown": {},
|
|
876
|
-
"
|
|
885
|
+
"headerScrollMode": {},
|
|
886
|
+
"headerScrollHidden": {}
|
|
877
887
|
};
|
|
878
888
|
}
|
|
879
889
|
static get events() {
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-RYP4pLp1.js";function t(s,t,e){return(s||"")+(t?" "+t:"")+(e?" "+e:"")}export{t as format}
|