@byuhbll/components 4.0.0-alpha.5 → 4.0.0-alpha.6

package/fesm2022/byuhbll-components.mjs

@@ -3,7 +3,7 @@ import { CommonModule, DatePipe, LowerCasePipe } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, ViewChildren, Pipe, ElementRef, HostListener, Renderer2, viewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, ViewChildren, Pipe, ElementRef, HostListener, Renderer2, viewChild, computed, ViewEncapsulation } from '@angular/core';
 import { trigger, transition, group, style, query, animateChild, animate } from '@angular/animations';
 import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
 import { map, Subject, of, Subscription, switchMap as switchMap$1, shareReplay, combineLatest } from 'rxjs';
@@ -469,7 +469,8 @@ class ImpersonateModalComponent {
         this.eref = inject(ElementRef);
         this.oidcBaseUri = input.required();
         this.oidcDefaultIdp = input.required();
-        this.accessToken = input.required();
+        // Require an object here so that access tokens are not visible/extractable from the DOM in consuming applications. Instead they are only stored in memory.
+        this.accessTokenPayload = input.required();
         this.dismiss = new EventEmitter();
         this.init = new EventEmitter();
         this.isOpen = false;
@@ -580,7 +581,7 @@ class ImpersonateModalComponent {
             });
             return this.http.get(uri, {
                 headers: {
-                    Authorization: `Bearer ${this.accessToken()}`,
+                    Authorization: `Bearer ${this.accessTokenPayload().token}`,
                 },
             });
         };
@@ -603,7 +604,7 @@ class ImpersonateModalComponent {
         this.subs.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonateModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonateModalComponent, isStandalone: true, selector: "lib-impersonate-modal", inputs: { showModal: { classPropertyName: "showModal", publicName: "showModal", isSignal: false, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: true, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: true, transformFunction: null }, accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss", init: "init" }, host: { listeners: { "document:mousedown": "outsideClick($event)", "document:keydown": "handleKeyDown($event)" } }, ngImport: i0, template: "@if (isOpen) {\n    <div @libHbllFadeInOut class=\"modal-wrapper\" id=\"modalBackdrop\" data-testid=\"backdrop\">\n        <div class=\"modal-container\" data-testid=\"modal\">\n            <div class=\"modal-header\">\n                <h2>Impersonate</h2>\n                <button type=\"button\" (click)=\"close()\" aria-label=\"Close\" data-testid=\"close\">\n                    <span class=\"material-symbols-outlined icon-close\"> close </span>\n                </button>\n            </div>\n            <form [formGroup]=\"form\" (submit)=\"handleFormSubmit($event)\" data-testid=\"searchForm\">\n                <div class=\"search-header\">\n                    <div class=\"secondary\" [class.disabled]=\"!form.valid\">\n                        <span class=\"keyboard-key\">Enter</span> to search\n                    </div>\n                </div>\n                <label\n                    for=\"searchInput\"\n                    class=\"search-wrapper\"\n                    [class.invalid]=\"form.invalid && form.dirty\"\n                >\n                    <span class=\"material-symbols-outlined icon-search\"> search </span>\n                    <input\n                        id=\"searchInput\"\n                        type=\"text\"\n                        autocomplete=\"off\"\n                        formControlName=\"search\"\n                        placeholder=\"Search patrons...\"\n                        (keydown)=\"handleSearchKeyPress($event)\"\n                        #searchBox\n                        data-testid=\"searchInput\"\n                    />\n                    @if (!!searchBox.value && form.valid) {\n                        <span class=\"material-symbols-outlined icon-checkmark\"> check </span>\n                    }\n                    @if (searchBox.value.length) {\n                        <span\n                            (click)=\"clearSearch()\"\n                            @libHbllFadeInOut\n                            class=\"material-symbols-outlined icon-close\"\n                        >\n                            close\n                        </span>\n                    }\n                </label>\n            </form>\n            <fieldset\n                class=\"search-results-wrapper\"\n                id=\"resultsScrollContainer\"\n                (change)=\"handleSelectUser($event)\"\n            >\n                @if (!loading && results()) {\n                    @for (user of results(); track user.netId; let idx = $index) {\n                        <div\n                            class=\"result-field result\"\n                            [class.focus]=\"user.username === selectedUsername\"\n                            data-testid=\"result\"\n                        >\n                            <label\n                                [for]=\"'result_' + idx\"\n                                [class.warning]=\"user.restricted\"\n                                (mouseover)=\"selectedUsername = user.username\"\n                            >\n                                @if (user.restricted) {\n                                    <span class=\"material-symbols-outlined icon\"> warning </span>\n                                } @else {\n                                    <span class=\"material-symbols-outlined icon\"> person </span>\n                                }\n                                &nbsp; &nbsp;\n                                <span [title]=\"user\" data-testid=\"resultText\">{{\n                                    user | impersonateUser\n                                }}</span>\n                                <input\n                                    type=\"radio\"\n                                    [value]=\"user.username\"\n                                    class=\"hidden\"\n                                    [id]=\"'result_' + idx\"\n                                    name=\"resultSelect\"\n                                    (keydown)=\"handleResultKeyPress($event)\"\n                                />\n                            </label>\n                            <button\n                                class=\"impersonate-button\"\n                                data-testid=\"impersonateBtn\"\n                                (click)=\"startImpersonation(user.username)\"\n                            >\n                                Impersonate\n                            </button>\n                        </div>\n                    } @empty {\n                        <div class=\"result-field\">\n                            No results. Try searching by Net ID or BYU ID.\n                        </div>\n                    }\n                }\n                @if (loading) {\n                    <div class=\"result-field\">\n                        <div class=\"lib-spinner\"></div>\n                    </div>\n                }\n                @if (hasError) {\n                    <div class=\"result-field\">Something went wrong. We'll keep trying.</div>\n                }\n            </fieldset>\n        </div>\n    </div>\n}\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)}}h2{font-size:1.2em;font-weight:600;margin:0;color:#404040}.warning{color:#b04940}.modal-wrapper{position:fixed;inset:0;background-color:#0000007f;z-index:6001;display:grid;place-items:center}.modal-container{color:#404040;padding:1.2em 1.4em;width:90%;max-width:30em;border-radius:4px;border:1px solid #b7b7b7;box-shadow:0 3px 6px #002e5d20;background-color:#fff;display:grid;grid-template-columns:1fr;gap:1em}.modal-container .modal-header{display:flex;justify-content:space-between;border-bottom:1px solid #e6e6e6;padding-bottom:.8em}.modal-container .modal-header .icon-close{transition:opacity .15s;color:#707070;opacity:1;cursor:pointer}.modal-container .modal-header .icon-close:hover{opacity:.8}.modal-container .hidden{opacity:0;width:0;height:0}.modal-container .search-header{display:flex;align-items:center;justify-content:flex-end;margin-bottom:.8em}.modal-container .search-header .secondary{color:#70707095}.modal-container .search-header .keyboard-key{padding:.1em .4em;border:1px solid currentColor;border-radius:4px}.modal-container .search-wrapper{display:flex;align-items:center;border-radius:4px;border:solid 1px currentColor;color:#ca7ad1cc;background-color:#e6e6e655;padding:.1em .3em .1em .5em;transition:background-color .15s,color .15s}.modal-container .search-wrapper.invalid{background-color:#b0494022}.modal-container .search-wrapper .icon-search{font-size:1.2em}.modal-container .search-wrapper .icon-checkmark{color:#1dce7b}.modal-container .search-wrapper .icon-close{color:#ca7ad1cc;cursor:pointer}.modal-container .search-wrapper .icon-close:hover{color:#ca7ad1}.modal-container .search-wrapper input[type=text]{background:transparent;border:none;outline:none;width:100%;color:#404040;padding:.5em .4em;font-size:1em}.modal-container .search-wrapper input[type=text]:focus{background-color:transparent}.modal-container .search-results-wrapper{border:none;margin:0;padding:0;max-height:25em;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;display:flex;flex-direction:column;align-items:stretch;min-width:0}.modal-container .search-results-wrapper::-webkit-scrollbar{width:6px}.modal-container .search-results-wrapper::-webkit-scrollbar-track{background:#e6e6e6}.modal-container .search-results-wrapper::-webkit-scrollbar-thumb{background-color:#b3b3b3;border-radius:5px}.modal-container .search-results-wrapper::-webkit-scrollbar-thumb:hover{background-color:#888}.modal-container .search-results-wrapper .result-field{font-style:italic;display:flex;align-items:center;justify-content:space-between;padding:.8em}.modal-container .search-results-wrapper .result-field .lib-spinner{margin:auto;display:grid;place-items:center}.modal-container .search-results-wrapper .result-field.result{font-style:normal;padding:0}.modal-container .search-results-wrapper .result-field.result label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;padding:.8em;display:flex;align-items:center}.modal-container .search-results-wrapper .result-field.result label .icon{font-size:1.2em;margin-right:.4em}.modal-container .search-results-wrapper .result-field.result .impersonate-button{cursor:pointer;display:none;color:#ca7ad1cc;padding:.1em .6em;border:1px solid currentColor;border-radius:4px;background-color:#fff;flex-shrink:0;margin-block:.6em;margin-right:.8em}.modal-container .search-results-wrapper .result-field.result .impersonate-button:hover{color:#ca7ad1;background-color:#fff8}.modal-container .search-results-wrapper .result-field.result:active,.modal-container .search-results-wrapper .result-field.result.focus{background:#f2f2f2}.modal-container .search-results-wrapper .result-field.result.focus .impersonate-button{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ImpersonateUserPipe, name: "impersonateUser" }], animations: [libHbllFadeInOut] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonateModalComponent, isStandalone: true, selector: "lib-impersonate-modal", inputs: { showModal: { classPropertyName: "showModal", publicName: "showModal", isSignal: false, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: true, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: true, transformFunction: null }, accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss", init: "init" }, host: { listeners: { "document:mousedown": "outsideClick($event)", "document:keydown": "handleKeyDown($event)" } }, ngImport: i0, template: "@if (isOpen) {\n    <div @libHbllFadeInOut class=\"modal-wrapper\" id=\"modalBackdrop\" data-testid=\"backdrop\">\n        <div class=\"modal-container\" data-testid=\"modal\">\n            <div class=\"modal-header\">\n                <h2>Impersonate</h2>\n                <button type=\"button\" (click)=\"close()\" aria-label=\"Close\" data-testid=\"close\">\n                    <span class=\"material-symbols-outlined icon-close\"> close </span>\n                </button>\n            </div>\n            <form [formGroup]=\"form\" (submit)=\"handleFormSubmit($event)\" data-testid=\"searchForm\">\n                <div class=\"search-header\">\n                    <div class=\"secondary\" [class.disabled]=\"!form.valid\">\n                        <span class=\"keyboard-key\">Enter</span> to search\n                    </div>\n                </div>\n                <label\n                    for=\"searchInput\"\n                    class=\"search-wrapper\"\n                    [class.invalid]=\"form.invalid && form.dirty\"\n                >\n                    <span class=\"material-symbols-outlined icon-search\"> search </span>\n                    <input\n                        id=\"searchInput\"\n                        type=\"text\"\n                        autocomplete=\"off\"\n                        formControlName=\"search\"\n                        placeholder=\"Search patrons...\"\n                        (keydown)=\"handleSearchKeyPress($event)\"\n                        #searchBox\n                        data-testid=\"searchInput\"\n                    />\n                    @if (!!searchBox.value && form.valid) {\n                        <span class=\"material-symbols-outlined icon-checkmark\"> check </span>\n                    }\n                    @if (searchBox.value.length) {\n                        <span\n                            (click)=\"clearSearch()\"\n                            @libHbllFadeInOut\n                            class=\"material-symbols-outlined icon-close\"\n                        >\n                            close\n                        </span>\n                    }\n                </label>\n            </form>\n            <fieldset\n                class=\"search-results-wrapper\"\n                id=\"resultsScrollContainer\"\n                (change)=\"handleSelectUser($event)\"\n            >\n                @if (!loading && results()) {\n                    @for (user of results(); track user.netId; let idx = $index) {\n                        <div\n                            class=\"result-field result\"\n                            [class.focus]=\"user.username === selectedUsername\"\n                            data-testid=\"result\"\n                        >\n                            <label\n                                [for]=\"'result_' + idx\"\n                                [class.warning]=\"user.restricted\"\n                                (mouseover)=\"selectedUsername = user.username\"\n                            >\n                                @if (user.restricted) {\n                                    <span class=\"material-symbols-outlined icon\"> warning </span>\n                                } @else {\n                                    <span class=\"material-symbols-outlined icon\"> person </span>\n                                }\n                                &nbsp; &nbsp;\n                                <span [title]=\"user\" data-testid=\"resultText\">{{\n                                    user | impersonateUser\n                                }}</span>\n                                <input\n                                    type=\"radio\"\n                                    [value]=\"user.username\"\n                                    class=\"hidden\"\n                                    [id]=\"'result_' + idx\"\n                                    name=\"resultSelect\"\n                                    (keydown)=\"handleResultKeyPress($event)\"\n                                />\n                            </label>\n                            <button\n                                class=\"impersonate-button\"\n                                data-testid=\"impersonateBtn\"\n                                (click)=\"startImpersonation(user.username)\"\n                            >\n                                Impersonate\n                            </button>\n                        </div>\n                    } @empty {\n                        <div class=\"result-field\">\n                            No results. Try searching by Net ID or BYU ID.\n                        </div>\n                    }\n                }\n                @if (loading) {\n                    <div class=\"result-field\">\n                        <div class=\"lib-spinner\"></div>\n                    </div>\n                }\n                @if (hasError) {\n                    <div class=\"result-field\">Something went wrong. We'll keep trying.</div>\n                }\n            </fieldset>\n        </div>\n    </div>\n}\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)}}h2{font-size:1.2em;font-weight:600;margin:0;color:#404040}.warning{color:#b04940}.modal-wrapper{position:fixed;inset:0;background-color:#0000007f;z-index:6001;display:grid;place-items:center}.modal-container{color:#404040;padding:1.2em 1.4em;width:90%;max-width:30em;border-radius:4px;border:1px solid #b7b7b7;box-shadow:0 3px 6px #002e5d20;background-color:#fff;display:grid;grid-template-columns:1fr;gap:1em}.modal-container .modal-header{display:flex;justify-content:space-between;border-bottom:1px solid #e6e6e6;padding-bottom:.8em}.modal-container .modal-header .icon-close{transition:opacity .15s;color:#707070;opacity:1;cursor:pointer}.modal-container .modal-header .icon-close:hover{opacity:.8}.modal-container .hidden{opacity:0;width:0;height:0}.modal-container .search-header{display:flex;align-items:center;justify-content:flex-end;margin-bottom:.8em}.modal-container .search-header .secondary{color:#70707095}.modal-container .search-header .keyboard-key{padding:.1em .4em;border:1px solid currentColor;border-radius:4px}.modal-container .search-wrapper{display:flex;align-items:center;border-radius:4px;border:solid 1px currentColor;color:#ca7ad1cc;background-color:#e6e6e655;padding:.1em .3em .1em .5em;transition:background-color .15s,color .15s}.modal-container .search-wrapper.invalid{background-color:#b0494022}.modal-container .search-wrapper .icon-search{font-size:1.2em}.modal-container .search-wrapper .icon-checkmark{color:#1dce7b}.modal-container .search-wrapper .icon-close{color:#ca7ad1cc;cursor:pointer}.modal-container .search-wrapper .icon-close:hover{color:#ca7ad1}.modal-container .search-wrapper input[type=text]{background:transparent;border:none;outline:none;width:100%;color:#404040;padding:.5em .4em;font-size:1em}.modal-container .search-wrapper input[type=text]:focus{background-color:transparent}.modal-container .search-results-wrapper{border:none;margin:0;padding:0;max-height:25em;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;display:flex;flex-direction:column;align-items:stretch;min-width:0}.modal-container .search-results-wrapper::-webkit-scrollbar{width:6px}.modal-container .search-results-wrapper::-webkit-scrollbar-track{background:#e6e6e6}.modal-container .search-results-wrapper::-webkit-scrollbar-thumb{background-color:#b3b3b3;border-radius:5px}.modal-container .search-results-wrapper::-webkit-scrollbar-thumb:hover{background-color:#888}.modal-container .search-results-wrapper .result-field{font-style:italic;display:flex;align-items:center;justify-content:space-between;padding:.8em}.modal-container .search-results-wrapper .result-field .lib-spinner{margin:auto;display:grid;place-items:center}.modal-container .search-results-wrapper .result-field.result{font-style:normal;padding:0}.modal-container .search-results-wrapper .result-field.result label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;padding:.8em;display:flex;align-items:center}.modal-container .search-results-wrapper .result-field.result label .icon{font-size:1.2em;margin-right:.4em}.modal-container .search-results-wrapper .result-field.result .impersonate-button{cursor:pointer;display:none;color:#ca7ad1cc;padding:.1em .6em;border:1px solid currentColor;border-radius:4px;background-color:#fff;flex-shrink:0;margin-block:.6em;margin-right:.8em}.modal-container .search-results-wrapper .result-field.result .impersonate-button:hover{color:#ca7ad1;background-color:#fff8}.modal-container .search-results-wrapper .result-field.result:active,.modal-container .search-results-wrapper .result-field.result.focus{background:#f2f2f2}.modal-container .search-results-wrapper .result-field.result.focus .impersonate-button{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ImpersonateUserPipe, name: "impersonateUser" }], animations: [libHbllFadeInOut] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonateModalComponent, decorators: [{
             type: Component,
@@ -629,7 +630,9 @@ class HbllHeaderComponent {
         // TODO: does this increase bundle size more than it's worth? vs fetch?
         this.http = inject(HttpClient);
         this.bo = inject(BreakpointObserver);
-        this._accessToken = '';
+        // --- API ---
+        // Require an object here so that access tokens are not visible/extractable from the DOM in consuming applications. Instead they are only stored in memory.
+        this.accessTokenPayload = input({ token: '' });
         this.oidcBaseUri = input('https://keycloak.lib.byu.edu/');
         this.oidcDefaultIdp = input('byu-realm');
         this.login = new EventEmitter();
@@ -641,11 +644,13 @@ class HbllHeaderComponent {
         this.hoursEl = viewChild('hours');
         // Auth info
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.parsedToken = {};
-        this.isLoggedIn = false;
-        this.isImpersonating = false;
-        this.showImpersonateButton = false;
-        this.name = '';
+        this.parsedToken = computed(() => this.accessTokenPayload().token ? jwtDecode(this.accessTokenPayload().token) : {});
+        this.isLoggedIn = computed(() => !!this.accessTokenPayload().token &&
+            this.parsedToken().exp > Math.floor(new Date().getTime() / 1000));
+        this.isImpersonating = computed(() => !!this.parsedToken()['impersonator']);
+        this.showImpersonateButton = computed(() => this.parsedToken()['resource_access']['realm-management']?.['roles']?.includes('impersonation') && !this.isImpersonating());
+        this.name = computed(() => this.parsedToken()['given_name']);
+        // Hours
         // Hours
         this.libraryHours = toSignal(this.http.get(LIBRARY_HOURS_API_URL));
         this.hoursExceptions$ = of(null).pipe(map(() => {
@@ -668,20 +673,6 @@ class HbllHeaderComponent {
         this.setMobileSidebarHeight = () => (this.mobileSidebarHeight =
             window.innerHeight - this.header.nativeElement.getBoundingClientRect().height);
     }
-    // --- API ---
-    set accessToken(token) {
-        this._accessToken = token;
-        this.parsedToken = this.accessToken ? jwtDecode(this.accessToken) : {};
-        this.isLoggedIn =
-            !!this.accessToken && this.parsedToken.exp > Math.floor(new Date().getTime() / 1000);
-        this.isImpersonating = !!this.parsedToken['impersonator'];
-        this.showImpersonateButton =
-            this.parsedToken['resource_access']?.['realm-management']?.['roles']?.includes('impersonation') && !this.isImpersonating;
-        this.name = this.parsedToken['given_name'] ?? '';
-    }
-    get accessToken() {
-        return this._accessToken;
-    }
     ngAfterViewInit() {
         this.r2.listen('window', 'click', (e) => {
             if (!this.accountInfoEl()?.nativeElement.contains(e.target))
@@ -695,7 +686,7 @@ class HbllHeaderComponent {
         this.setMobileSidebarHeight();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { accessToken: { classPropertyName: "accessToken", publicName: "accessToken", isSignal: false, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", endImpersonation: "endImpersonation" }, 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 role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n    <a href=\"https://lib.byu.edu/\">\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=\"wrapper\">\n        @if (!isScreenSmall()) {\n            <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n                <button\n                    (click)=\"showLibraryHours = !showLibraryHours\"\n                    class=\"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=\"section\">\n                            <h2 class=\"header\">Regular Hours</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Monday - Friday</h3>\n                                <h3 class=\"item\">Saturday</h3>\n                                <h3 class=\"item\">Sunday</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - midnight</div>\n                                <div class=\"item\">8 a.m - midnight</div>\n                                <div class=\"item\">Closed*</div>\n                            </div>\n                            <div class=\"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=\"section\">\n                            <h2 class=\"header\">Upcoming Exceptions</h2>\n                            @if (hoursExceptions$ | async; as exceptions) {\n                                <div class=\"detail\" data-testid=\"exceptionsDetail\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <h3 class=\"item\">\n                                            {{ exception.date | date: 'MMM. d, YYYY' }}\n                                        </h3>\n                                    } @empty {\n                                        No upcoming exceptions\n                                    }\n                                </div>\n                                <div class=\"hours\" data-testid=\"exceptionsHours\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <div class=\"item\">{{ exception.exception_title }}</div>\n                                    }\n                                </div>\n                            } @else {\n                                <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n                            }\n                        </section>\n                        <section class=\"section\">\n                            <h2 class=\"header\">Library Cafe</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Bagel Bubble</h3>\n                                <h3 class=\"item\">Provecho</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - 11 p.m.</div>\n                                <div class=\"item\">10:30 a.m - 2 p.m.</div>\n                            </div>\n                        </section>\n                        <a href=\"https:/lib.byu.edu/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=\"wrapper\"\n                id=\"accountBtn\"\n                data-testid=\"accountBtn\"\n            >\n                <span class=\"material-symbols-outlined icon\"> person </span>\n                @if (!isScreenSmall()) {\n                    <span class=\"name\" data-testid=\"name\">{{ isLoggedIn ? name : 'Login' }}</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=\"https://lib.byu.edu/account\">My Account</a>\n                    <a href=\"https://lib.byu.edu/account\">My Items</a>\n                    <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n                    <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n                    <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n                    <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n                    <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n                    @if (showImpersonateButton) {\n                        <button\n                            href=\"https://lib.byu.edu/account/preferences\"\n                            (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n                            class=\"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 class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n                    <span class=\"material-symbols-outlined icon\"> menu </span>\n                </button>\n                @if (showNavBar) {\n                    <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n                        <button\n                            id=\"closeMobileNavBtn\"\n                            class=\"wrapper\"\n                            data-testid=\"closeMobileNavBtn\"\n                            (click)=\"showNavBar = false\"\n                        >\n                            <span class=\"material-symbols-outlined icon\"> close </span>\n                        </button>\n                        <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</header>\n\n@if (!isScreenSmall()) {\n    <div id=\"mainNav\">\n        <lib-nav-bar />\n    </div>\n}\n@if (isScreenSmall()) {\n    <a\n        id=\"mobileLibraryHours\"\n        href=\"https:/lib.byu.edu/about/hours\"\n        class=\"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 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\n<lib-impersonate-modal\n    [showModal]=\"showImpersonationModal\"\n    [oidcBaseUri]=\"oidcBaseUri()\"\n    [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n    [accessToken]=\"accessToken\"\n    (dismiss)=\"showImpersonationModal = false\"\n    (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\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}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}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;width:100vw;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 .icon{font-size:1.8em}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 .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .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}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;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-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.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;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}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}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: ["height"] }, { kind: "component", type: ImpersonateModalComponent, selector: "lib-impersonate-modal", inputs: ["showModal", "oidcBaseUri", "oidcDefaultIdp", "accessToken"], outputs: ["dismiss", "init"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", endImpersonation: "endImpersonation" }, 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 role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n    <a href=\"https://lib.byu.edu/\">\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=\"wrapper\">\n        @if (!isScreenSmall()) {\n            <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n                <button\n                    (click)=\"showLibraryHours = !showLibraryHours\"\n                    class=\"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=\"section\">\n                            <h2 class=\"header\">Regular Hours</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Monday - Friday</h3>\n                                <h3 class=\"item\">Saturday</h3>\n                                <h3 class=\"item\">Sunday</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - midnight</div>\n                                <div class=\"item\">8 a.m - midnight</div>\n                                <div class=\"item\">Closed*</div>\n                            </div>\n                            <div class=\"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=\"section\">\n                            <h2 class=\"header\">Upcoming Exceptions</h2>\n                            @if (hoursExceptions$ | async; as exceptions) {\n                                <div class=\"detail\" data-testid=\"exceptionsDetail\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <h3 class=\"item\">\n                                            {{ exception.date | date: 'MMM. d, YYYY' }}\n                                        </h3>\n                                    } @empty {\n                                        No upcoming exceptions\n                                    }\n                                </div>\n                                <div class=\"hours\" data-testid=\"exceptionsHours\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <div class=\"item\">{{ exception.exception_title }}</div>\n                                    }\n                                </div>\n                            } @else {\n                                <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n                            }\n                        </section>\n                        <section class=\"section\">\n                            <h2 class=\"header\">Library Cafe</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Bagel Bubble</h3>\n                                <h3 class=\"item\">Provecho</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - 11 p.m.</div>\n                                <div class=\"item\">10:30 a.m - 2 p.m.</div>\n                            </div>\n                        </section>\n                        <a href=\"https:/lib.byu.edu/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=\"wrapper\"\n                id=\"accountBtn\"\n                data-testid=\"accountBtn\"\n            >\n                <span class=\"material-symbols-outlined icon\"> person </span>\n                @if (!isScreenSmall()) {\n                    <span class=\"name\" data-testid=\"name\">{{\n                        isLoggedIn() ? 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=\"https://lib.byu.edu/account\">My Account</a>\n                    <a href=\"https://lib.byu.edu/account\">My Items</a>\n                    <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n                    <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n                    <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n                    <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n                    <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n                    @if (showImpersonateButton()) {\n                        <button\n                            href=\"https://lib.byu.edu/account/preferences\"\n                            (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n                            class=\"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 class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n                    <span class=\"material-symbols-outlined icon\"> menu </span>\n                </button>\n                @if (showNavBar) {\n                    <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n                        <button\n                            id=\"closeMobileNavBtn\"\n                            class=\"wrapper\"\n                            data-testid=\"closeMobileNavBtn\"\n                            (click)=\"showNavBar = false\"\n                        >\n                            <span class=\"material-symbols-outlined icon\"> close </span>\n                        </button>\n                        <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</header>\n\n@if (!isScreenSmall()) {\n    <div id=\"mainNav\">\n        <lib-nav-bar />\n    </div>\n}\n@if (isScreenSmall()) {\n    <a\n        id=\"mobileLibraryHours\"\n        href=\"https:/lib.byu.edu/about/hours\"\n        class=\"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 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\n<lib-impersonate-modal\n    [showModal]=\"showImpersonationModal\"\n    [oidcBaseUri]=\"oidcBaseUri()\"\n    [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n    [accessTokenPayload]=\"accessTokenPayload()\"\n    (dismiss)=\"showImpersonationModal = false\"\n    (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\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}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}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;width:100vw;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 .icon{font-size:1.8em}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 .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .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}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;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-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.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;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}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}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: ["height"] }, { kind: "component", type: ImpersonateModalComponent, selector: "lib-impersonate-modal", inputs: ["showModal", "oidcBaseUri", "oidcDefaultIdp", "accessTokenPayload"], outputs: ["dismiss", "init"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, decorators: [{
             type: Component,
@@ -707,12 +698,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         NavBarComponent,
                         ExpandCollapseComponent,
                         ImpersonateModalComponent,
-                    ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n    <a href=\"https://lib.byu.edu/\">\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=\"wrapper\">\n        @if (!isScreenSmall()) {\n            <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n                <button\n                    (click)=\"showLibraryHours = !showLibraryHours\"\n                    class=\"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=\"section\">\n                            <h2 class=\"header\">Regular Hours</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Monday - Friday</h3>\n                                <h3 class=\"item\">Saturday</h3>\n                                <h3 class=\"item\">Sunday</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - midnight</div>\n                                <div class=\"item\">8 a.m - midnight</div>\n                                <div class=\"item\">Closed*</div>\n                            </div>\n                            <div class=\"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=\"section\">\n                            <h2 class=\"header\">Upcoming Exceptions</h2>\n                            @if (hoursExceptions$ | async; as exceptions) {\n                                <div class=\"detail\" data-testid=\"exceptionsDetail\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <h3 class=\"item\">\n                                            {{ exception.date | date: 'MMM. d, YYYY' }}\n                                        </h3>\n                                    } @empty {\n                                        No upcoming exceptions\n                                    }\n                                </div>\n                                <div class=\"hours\" data-testid=\"exceptionsHours\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <div class=\"item\">{{ exception.exception_title }}</div>\n                                    }\n                                </div>\n                            } @else {\n                                <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n                            }\n                        </section>\n                        <section class=\"section\">\n                            <h2 class=\"header\">Library Cafe</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Bagel Bubble</h3>\n                                <h3 class=\"item\">Provecho</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - 11 p.m.</div>\n                                <div class=\"item\">10:30 a.m - 2 p.m.</div>\n                            </div>\n                        </section>\n                        <a href=\"https:/lib.byu.edu/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=\"wrapper\"\n                id=\"accountBtn\"\n                data-testid=\"accountBtn\"\n            >\n                <span class=\"material-symbols-outlined icon\"> person </span>\n                @if (!isScreenSmall()) {\n                    <span class=\"name\" data-testid=\"name\">{{ isLoggedIn ? name : 'Login' }}</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=\"https://lib.byu.edu/account\">My Account</a>\n                    <a href=\"https://lib.byu.edu/account\">My Items</a>\n                    <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n                    <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n                    <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n                    <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n                    <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n                    @if (showImpersonateButton) {\n                        <button\n                            href=\"https://lib.byu.edu/account/preferences\"\n                            (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n                            class=\"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 class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n                    <span class=\"material-symbols-outlined icon\"> menu </span>\n                </button>\n                @if (showNavBar) {\n                    <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n                        <button\n                            id=\"closeMobileNavBtn\"\n                            class=\"wrapper\"\n                            data-testid=\"closeMobileNavBtn\"\n                            (click)=\"showNavBar = false\"\n                        >\n                            <span class=\"material-symbols-outlined icon\"> close </span>\n                        </button>\n                        <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</header>\n\n@if (!isScreenSmall()) {\n    <div id=\"mainNav\">\n        <lib-nav-bar />\n    </div>\n}\n@if (isScreenSmall()) {\n    <a\n        id=\"mobileLibraryHours\"\n        href=\"https:/lib.byu.edu/about/hours\"\n        class=\"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 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\n<lib-impersonate-modal\n    [showModal]=\"showImpersonationModal\"\n    [oidcBaseUri]=\"oidcBaseUri()\"\n    [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n    [accessToken]=\"accessToken\"\n    (dismiss)=\"showImpersonationModal = false\"\n    (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\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}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}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;width:100vw;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 .icon{font-size:1.8em}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 .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .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}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;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-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.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;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}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}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"] }]
+                    ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n    <a href=\"https://lib.byu.edu/\">\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=\"wrapper\">\n        @if (!isScreenSmall()) {\n            <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n                <button\n                    (click)=\"showLibraryHours = !showLibraryHours\"\n                    class=\"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=\"section\">\n                            <h2 class=\"header\">Regular Hours</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Monday - Friday</h3>\n                                <h3 class=\"item\">Saturday</h3>\n                                <h3 class=\"item\">Sunday</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - midnight</div>\n                                <div class=\"item\">8 a.m - midnight</div>\n                                <div class=\"item\">Closed*</div>\n                            </div>\n                            <div class=\"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=\"section\">\n                            <h2 class=\"header\">Upcoming Exceptions</h2>\n                            @if (hoursExceptions$ | async; as exceptions) {\n                                <div class=\"detail\" data-testid=\"exceptionsDetail\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <h3 class=\"item\">\n                                            {{ exception.date | date: 'MMM. d, YYYY' }}\n                                        </h3>\n                                    } @empty {\n                                        No upcoming exceptions\n                                    }\n                                </div>\n                                <div class=\"hours\" data-testid=\"exceptionsHours\">\n                                    @for (exception of exceptions; track exception.date) {\n                                        <div class=\"item\">{{ exception.exception_title }}</div>\n                                    }\n                                </div>\n                            } @else {\n                                <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n                            }\n                        </section>\n                        <section class=\"section\">\n                            <h2 class=\"header\">Library Cafe</h2>\n                            <div class=\"detail\">\n                                <h3 class=\"item\">Bagel Bubble</h3>\n                                <h3 class=\"item\">Provecho</h3>\n                            </div>\n                            <div class=\"hours\">\n                                <div class=\"item\">7 a.m - 11 p.m.</div>\n                                <div class=\"item\">10:30 a.m - 2 p.m.</div>\n                            </div>\n                        </section>\n                        <a href=\"https:/lib.byu.edu/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=\"wrapper\"\n                id=\"accountBtn\"\n                data-testid=\"accountBtn\"\n            >\n                <span class=\"material-symbols-outlined icon\"> person </span>\n                @if (!isScreenSmall()) {\n                    <span class=\"name\" data-testid=\"name\">{{\n                        isLoggedIn() ? 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=\"https://lib.byu.edu/account\">My Account</a>\n                    <a href=\"https://lib.byu.edu/account\">My Items</a>\n                    <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n                    <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n                    <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n                    <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n                    <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n                    @if (showImpersonateButton()) {\n                        <button\n                            href=\"https://lib.byu.edu/account/preferences\"\n                            (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n                            class=\"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 class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n                    <span class=\"material-symbols-outlined icon\"> menu </span>\n                </button>\n                @if (showNavBar) {\n                    <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n                        <button\n                            id=\"closeMobileNavBtn\"\n                            class=\"wrapper\"\n                            data-testid=\"closeMobileNavBtn\"\n                            (click)=\"showNavBar = false\"\n                        >\n                            <span class=\"material-symbols-outlined icon\"> close </span>\n                        </button>\n                        <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n                    </div>\n                }\n            </div>\n        }\n    </div>\n</header>\n\n@if (!isScreenSmall()) {\n    <div id=\"mainNav\">\n        <lib-nav-bar />\n    </div>\n}\n@if (isScreenSmall()) {\n    <a\n        id=\"mobileLibraryHours\"\n        href=\"https:/lib.byu.edu/about/hours\"\n        class=\"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 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\n<lib-impersonate-modal\n    [showModal]=\"showImpersonationModal\"\n    [oidcBaseUri]=\"oidcBaseUri()\"\n    [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n    [accessTokenPayload]=\"accessTokenPayload()\"\n    (dismiss)=\"showImpersonationModal = false\"\n    (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\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}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}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;width:100vw;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 .icon{font-size:1.8em}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 .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .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}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;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-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.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;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}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}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"] }]
         }], propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
-            }], accessToken: [{
-                type: Input
             }], login: [{
                 type: Output
             }], logout: [{