@byuhbll/components 4.0.8 → 4.0.10

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.
Files changed (9) hide show
  1. package/esm2022/lib/hbll-header/hbll-header.component.mjs +9 -3
  2. package/esm2022/lib/hbll-header/nav-bar/nav-bar.component.mjs +10 -3
  3. package/esm2022/lib/hbll-header/nav-bar-dropdown/nav-bar-dropdown.component.mjs +32 -4
  4. package/fesm2022/byuhbll-components.mjs +47 -6
  5. package/fesm2022/byuhbll-components.mjs.map +1 -1
  6. package/lib/hbll-header/hbll-header.component.d.ts +1 -0
  7. package/lib/hbll-header/nav-bar/nav-bar.component.d.ts +3 -0
  8. package/lib/hbll-header/nav-bar-dropdown/nav-bar-dropdown.component.d.ts +7 -1
  9. package/package.json +1 -1
package/fesm2022/byuhbll-components.mjs CHANGED
@@ -94,23 +94,51 @@ class NavBarDropdownComponent {
94
94
  this.title = input.required();
95
95
  this.isSmallScreen = input(true);
96
96
  this.openEvent = new EventEmitter();
97
+ this.hoverStarted = new EventEmitter();
97
98
  // Public to be called by parent comp.
98
99
  this.closeDropdown = () => (this.isOpen = false);
100
+ this.isInteracting = false;
99
101
  this.isOpen = false;
102
+ this.hoverTimeout = null;
103
+ this.DROPDOWN_OPEN_DELAY_MS = 300;
100
104
  this.handleClick = () => {
101
105
  if (!this.isOpen)
102
106
  this.openEvent.emit(this.title());
103
107
  this.isOpen = !this.isOpen;
104
108
  };
105
109
  }
110
+ handleMouseEnter() {
111
+ if (this.isSmallScreen())
112
+ return;
113
+ if (this.isInteracting) {
114
+ this.isOpen = true;
115
+ }
116
+ else {
117
+ this.hoverTimeout = setTimeout(() => {
118
+ this.isOpen = true;
119
+ this.hoverStarted.emit();
120
+ }, this.DROPDOWN_OPEN_DELAY_MS);
121
+ }
122
+ }
123
+ handleMouseLeave() {
124
+ if (this.hoverTimeout !== null) {
125
+ clearTimeout(this.hoverTimeout);
126
+ this.hoverTimeout = null;
127
+ }
128
+ this.isOpen = false;
129
+ }
106
130
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
107
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarDropdownComponent, isStandalone: true, selector: "lib-nav-bar-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isSmallScreen: { classPropertyName: "isSmallScreen", publicName: "isSmallScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openEvent: "openEvent" }, ngImport: i0, template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"!isSmallScreen() && (this.isOpen = true)\"\n (mouseleave)=\"!isSmallScreen() && (this.isOpen = false)\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </lib-expand-collapse>\n }\n</span>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".hbll-header-dropdown-wrapper.hbll-header-desktop button{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}.hbll-header-dropdown-wrapper.hbll-header-desktop button .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}.hbll-header-dropdown-wrapper.hbll-header-desktop button:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-dropdown-wrapper button{justify-content:flex-end;font-size:1.3em;color:#fff;display:flex;align-items:center;background-color:#0047ba;width:100%;padding:.6em;border-bottom:1px solid rgba(255,255,255,.3);border-left:none;border-right:none;border-top:none;white-space:nowrap;cursor:pointer}.hbll-header-dropdown-wrapper button .hbll-header-icon{margin-left:.2em}.hbll-header-dropdown-wrapper.hbll-header-desktop:hover button{background-color:#0047ba;color:#fff}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown{position:absolute;z-index:11;width:100%;top:100%;left:0;background-color:#0047ba}\n"], dependencies: [{ kind: "component", type: ExpandCollapseComponent, selector: "lib-expand-collapse", inputs: ["isExpanded"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
131
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarDropdownComponent, isStandalone: true, selector: "lib-nav-bar-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isSmallScreen: { classPropertyName: "isSmallScreen", publicName: "isSmallScreen", isSignal: true, isRequired: false, transformFunction: null }, isInteracting: { classPropertyName: "isInteracting", publicName: "isInteracting", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openEvent: "openEvent", hoverStarted: "hoverStarted" }, ngImport: i0, template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </lib-expand-collapse>\n }\n</span>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".hbll-header-dropdown-wrapper.hbll-header-desktop button{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}.hbll-header-dropdown-wrapper.hbll-header-desktop button .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}.hbll-header-dropdown-wrapper.hbll-header-desktop button:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-dropdown-wrapper button{justify-content:flex-end;font-size:1.3em;color:#fff;display:flex;align-items:center;background-color:#0047ba;width:100%;padding:.6em;border-bottom:1px solid rgba(255,255,255,.3);border-left:none;border-right:none;border-top:none;white-space:nowrap;cursor:pointer}.hbll-header-dropdown-wrapper button .hbll-header-icon{margin-left:.2em}.hbll-header-dropdown-wrapper.hbll-header-desktop:hover button{background-color:#0047ba;color:#fff}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown{position:absolute;z-index:11;width:100%;top:100%;left:0;background-color:#0047ba}\n"], dependencies: [{ kind: "component", type: ExpandCollapseComponent, selector: "lib-expand-collapse", inputs: ["isExpanded"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
108
132
  }
109
133
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, decorators: [{
110
134
  type: Component,
111
- args: [{ selector: 'lib-nav-bar-dropdown', standalone: true, imports: [ExpandCollapseComponent, CommonModule], template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"!isSmallScreen() && (this.isOpen = true)\"\n (mouseleave)=\"!isSmallScreen() && (this.isOpen = false)\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </lib-expand-collapse>\n }\n</span>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".hbll-header-dropdown-wrapper.hbll-header-desktop button{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}.hbll-header-dropdown-wrapper.hbll-header-desktop button .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}.hbll-header-dropdown-wrapper.hbll-header-desktop button:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-dropdown-wrapper button{justify-content:flex-end;font-size:1.3em;color:#fff;display:flex;align-items:center;background-color:#0047ba;width:100%;padding:.6em;border-bottom:1px solid rgba(255,255,255,.3);border-left:none;border-right:none;border-top:none;white-space:nowrap;cursor:pointer}.hbll-header-dropdown-wrapper button .hbll-header-icon{margin-left:.2em}.hbll-header-dropdown-wrapper.hbll-header-desktop:hover button{background-color:#0047ba;color:#fff}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown{position:absolute;z-index:11;width:100%;top:100%;left:0;background-color:#0047ba}\n"] }]
135
+ args: [{ selector: 'lib-nav-bar-dropdown', standalone: true, imports: [ExpandCollapseComponent, CommonModule], template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </lib-expand-collapse>\n }\n</span>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".hbll-header-dropdown-wrapper.hbll-header-desktop button{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}.hbll-header-dropdown-wrapper.hbll-header-desktop button .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}.hbll-header-dropdown-wrapper.hbll-header-desktop button:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-dropdown-wrapper button{justify-content:flex-end;font-size:1.3em;color:#fff;display:flex;align-items:center;background-color:#0047ba;width:100%;padding:.6em;border-bottom:1px solid rgba(255,255,255,.3);border-left:none;border-right:none;border-top:none;white-space:nowrap;cursor:pointer}.hbll-header-dropdown-wrapper button .hbll-header-icon{margin-left:.2em}.hbll-header-dropdown-wrapper.hbll-header-desktop:hover button{background-color:#0047ba;color:#fff}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown{position:absolute;z-index:11;width:100%;top:100%;left:0;background-color:#0047ba}\n"] }]
112
136
  }], propDecorators: { openEvent: [{
113
137
  type: Output
138
+ }], hoverStarted: [{
139
+ type: Output
140
+ }], isInteracting: [{
141
+ type: Input
114
142
  }] } });
115
143
 
116
144
  /**
@@ -123,6 +151,7 @@ class NavBarComponent {
123
151
  this.bo = inject(BreakpointObserver);
124
152
  this.mainSiteBaseUrl = input.required();
125
153
  this.height = input(null);
154
+ this.isInteractingWithNavbar = false;
126
155
  // If any section opens up, close all others. Only one section open at a time.
127
156
  this.handleDropdownOpenEvent = (title) => {
128
157
  this.dropdownComps
@@ -441,12 +470,18 @@ class NavBarComponent {
441
470
  ];
442
471
  });
443
472
  }
473
+ handleHoverStarted() {
474
+ this.isInteractingWithNavbar = true;
475
+ }
476
+ handleNavbarMouseLeave() {
477
+ this.isInteractingWithNavbar = false;
478
+ }
444
479
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
445
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarComponent, isStandalone: true, selector: "lib-nav-bar", inputs: { mainSiteBaseUrl: { classPropertyName: "mainSiteBaseUrl", publicName: "mainSiteBaseUrl", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dropdownComps", predicate: NavBarDropdownComponent, descendants: true }], ngImport: i0, template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NavBarDropdownComponent, selector: "lib-nav-bar-dropdown", inputs: ["title", "isSmallScreen"], outputs: ["openEvent"] }] }); }
480
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarComponent, isStandalone: true, selector: "lib-nav-bar", inputs: { mainSiteBaseUrl: { classPropertyName: "mainSiteBaseUrl", publicName: "mainSiteBaseUrl", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dropdownComps", predicate: NavBarDropdownComponent, descendants: true }], ngImport: i0, template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n (mouseleave)=\"handleNavbarMouseLeave()\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n [isInteracting]=\"isInteractingWithNavbar\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n (hoverStarted)=\"handleHoverStarted()\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NavBarDropdownComponent, selector: "lib-nav-bar-dropdown", inputs: ["title", "isSmallScreen", "isInteracting"], outputs: ["openEvent", "hoverStarted"] }] }); }
446
481
  }
447
482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarComponent, decorators: [{
448
483
  type: Component,
449
- args: [{ selector: 'lib-nav-bar', standalone: true, imports: [CommonModule, NavBarDropdownComponent], template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"] }]
484
+ args: [{ selector: 'lib-nav-bar', standalone: true, imports: [CommonModule, NavBarDropdownComponent], template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n (mouseleave)=\"handleNavbarMouseLeave()\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n [isInteracting]=\"isInteractingWithNavbar\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n (hoverStarted)=\"handleHoverStarted()\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"] }]
450
485
  }], propDecorators: { dropdownComps: [{
451
486
  type: ViewChildren,
452
487
  args: [NavBarDropdownComponent]
@@ -551,8 +586,14 @@ class HbllHeaderComponent {
551
586
  onResize() {
552
587
  this.setMobileSidebarHeight();
553
588
  }
589
+ focusMainContent() {
590
+ const mainContent = document.querySelector('.main-content');
591
+ if (mainContent) {
592
+ mainContent.focus();
593
+ }
594
+ }
554
595
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
555
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, mainsitebaseurl: { classPropertyName: "mainsitebaseurl", publicName: "mainsitebaseurl", isSignal: false, isRequired: false, transformFunction: null }, showImpersonateButton: { classPropertyName: "showImpersonateButton", publicName: "showImpersonateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openImpersonationModal: "openImpersonationModal", login: "login", logout: "logout" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - midnight</div>\n <div class=\"hbll-header-item\">8 a.m - midnight</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\">\n {{ exception.exception_title }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - 11 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/about/hours'\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-name\" data-testid=\"name\">{{\n isLoggedIn ? '&nbsp;' + name : 'Login'\n }}</span>\n }\n @if (isLoggedIn) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a [href]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [@libHbllSlideInOutRightLeft]=\"{\n value: '',\n params: { xOffset: '400px' },\n }\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n @libHbllFadeInOut\n (click)=\"showNavBar = false\"\n class=\"hbll-nav-backdrop\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-top:.6em;padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{left:-8px;position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-header-desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LibraryHoursPipe, name: "libraryHours" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NavBarComponent, selector: "lib-nav-bar", inputs: ["mainSiteBaseUrl", "height"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
596
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, mainsitebaseurl: { classPropertyName: "mainsitebaseurl", publicName: "mainsitebaseurl", isSignal: false, isRequired: false, transformFunction: null }, showImpersonateButton: { classPropertyName: "showImpersonateButton", publicName: "showImpersonateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openImpersonationModal: "openImpersonationModal", login: "login", logout: "logout" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <button (click)=\"focusMainContent()\" class=\"skip-link\">Skip to main content</button>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - midnight</div>\n <div class=\"hbll-header-item\">8 a.m - midnight</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\">\n {{ exception.exception_title }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - 11 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/about/hours'\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-name\" data-testid=\"name\">{{\n isLoggedIn ? '&nbsp;' + name : 'Login'\n }}</span>\n }\n @if (isLoggedIn) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a [href]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [@libHbllSlideInOutRightLeft]=\"{\n value: '',\n params: { xOffset: '400px' },\n }\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n @libHbllFadeInOut\n (click)=\"showNavBar = false\"\n class=\"hbll-nav-backdrop\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;overflow:visible;margin-left:12px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;z-index:1000;text-decoration:none;border:3px solid #0050b7;border-radius:4px;cursor:pointer}.skip-link:hover{color:#00285b;background-color:#e3edf8;border:3px solid #e3edf8}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-top:.6em;padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{left:-8px;position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-header-desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LibraryHoursPipe, name: "libraryHours" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NavBarComponent, selector: "lib-nav-bar", inputs: ["mainSiteBaseUrl", "height"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
556
597
  }
557
598
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, decorators: [{
558
599
  type: Component,
@@ -563,7 +604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
563
604
  CommonModule,
564
605
  NavBarComponent,
565
606
  ExpandCollapseComponent,
566
- ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - midnight</div>\n <div class=\"hbll-header-item\">8 a.m - midnight</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\">\n {{ exception.exception_title }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - 11 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/about/hours'\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-name\" data-testid=\"name\">{{\n isLoggedIn ? '&nbsp;' + name : 'Login'\n }}</span>\n }\n @if (isLoggedIn) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a [href]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [@libHbllSlideInOutRightLeft]=\"{\n value: '',\n params: { xOffset: '400px' },\n }\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n @libHbllFadeInOut\n (click)=\"showNavBar = false\"\n class=\"hbll-nav-backdrop\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-top:.6em;padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{left:-8px;position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-header-desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"] }]
607
+ ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <button (click)=\"focusMainContent()\" class=\"skip-link\">Skip to main content</button>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - midnight</div>\n <div class=\"hbll-header-item\">8 a.m - midnight</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\">\n {{ exception.exception_title }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7 a.m - 11 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/about/hours'\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-name\" data-testid=\"name\">{{\n isLoggedIn ? '&nbsp;' + name : 'Login'\n }}</span>\n }\n @if (isLoggedIn) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a [href]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [@libHbllSlideInOutRightLeft]=\"{\n value: '',\n params: { xOffset: '400px' },\n }\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n @libHbllFadeInOut\n (click)=\"showNavBar = false\"\n class=\"hbll-nav-backdrop\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;overflow:visible;margin-left:12px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;z-index:1000;text-decoration:none;border:3px solid #0050b7;border-radius:4px;cursor:pointer}.skip-link:hover{color:#00285b;background-color:#e3edf8;border:3px solid #e3edf8}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-top:.6em;padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{left:-8px;position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-header-desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"] }]
567
608
  }], propDecorators: { header: [{
568
609
  type: ViewChild,
569
610
  args: ['header']