@byuhbll/components 4.0.0-alpha.13 → 4.0.0-alpha.15

package/fesm2022/byuhbll-components.mjs

@@ -3,23 +3,23 @@ import { CommonModule, DatePipe, LowerCasePipe } from '@angular/common';
 import { toSignal, toObservable } 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, Renderer2, viewChild, computed, HostListener, ViewEncapsulation } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, ViewChildren, Pipe, Renderer2, viewChild, HostListener, ElementRef, 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, of, switchMap, shareReplay, combineLatest, Subscription } from 'rxjs';
-import { switchMap as switchMap$1, map as map$1, startWith, filter, tap } from 'rxjs/operators';
-import { jwtDecode } from 'jwt-decode';
+import { map, of, switchMap, shareReplay, Subject, Subscription, combineLatest } from 'rxjs';
+import * as i2 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, FormControl, NonNullableFormBuilder } from '@angular/forms';
+import { switchMap as switchMap$1, startWith, catchError, tap, map as map$1, filter } from 'rxjs/operators';
 import urlcat from 'urlcat';
+import { jwtDecode } from 'jwt-decode';
 import * as i1$1 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, NonNullableFormBuilder, Validators, FormBuilder } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2 from '@angular/material/chips';
+import * as i2$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i5 from '@angular/material/core';
@@ -454,7 +454,8 @@ class HbllHeaderComponent {
         this.http = inject(HttpClient);
         this.bo = inject(BreakpointObserver);
         // --- API ---
-        this.name = input('');
+        // TODO: Convert this to a signal input: https://github.com/angular/angular/issues/57755
+        this.name = '';
         this.showImpersonateButton = input(false);
         this.openImpersonationModal = new EventEmitter();
         this.login = new EventEmitter();
@@ -463,7 +464,6 @@ class HbllHeaderComponent {
         this.formatDateForHours = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
         this.accountInfoEl = viewChild('accountInfo');
         this.hoursEl = viewChild('hours');
-        this.isLoggedIn = computed(() => !!this.name());
         // Hours
         this.libraryHours = toSignal(this.http.get(LIBRARY_HOURS_API_URL));
         this.hoursExceptions$ = of(null).pipe(map(() => {
@@ -485,6 +485,9 @@ class HbllHeaderComponent {
         this.setMobileSidebarHeight = () => (this.mobileSidebarHeight =
             window.innerHeight - this.header.nativeElement.getBoundingClientRect().height);
     }
+    get isLoggedIn() {
+        return !!this.name;
+    }
     ngAfterViewInit() {
         this.r2.listen('window', 'click', (e) => {
             if (!this.accountInfoEl()?.nativeElement.contains(e.target))
@@ -498,7 +501,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: { name: { classPropertyName: "name", publicName: "name", isSignal: true, 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 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)=\"openImpersonationModal.emit(); 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", 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;font-size:1em}#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"] }], 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: { name: { classPropertyName: "name", publicName: "name", 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 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)=\"openImpersonationModal.emit(); 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", 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;font-size:1em}#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"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, decorators: [{
             type: Component,
@@ -509,10 +512,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         CommonModule,
                         NavBarComponent,
                         ExpandCollapseComponent,
-                    ], 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)=\"openImpersonationModal.emit(); 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", 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;font-size:1em}#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\">{{ 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)=\"openImpersonationModal.emit(); 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", 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;font-size:1em}#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']
+            }], name: [{
+                type: Input
             }], openImpersonationModal: [{
                 type: Output
             }], login: [{
@@ -524,6 +529,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+class ImpersonateUserPipe {
+    transform(user) {
+        return `${user.name} (${user.netId || 'Unknown'})${user.restricted ? ' — Restricted' : ''}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonateUserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: ImpersonateUserPipe, isStandalone: true, name: "impersonateUser" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonateUserPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'impersonateUser',
+                    standalone: true,
+                }]
+        }] });
+const SEARCH_USERS_PATH = '/impersonate/api/search/';
+const START_IMPERSONATE_PATH = '/impersonate/:username';
+class ImpersonateModalComponent {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.fb = inject(FormBuilder);
+        this.eref = inject(ElementRef);
+        this.oidcBaseUri = input('https://keycloak.lib.byu.edu/');
+        this.oidcDefaultIdp = input('byu-realm');
+        // 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;
+        this.hasError = false;
+        this.form = this.fb.nonNullable.group({
+            search: this.fb.control('', { validators: Validators.minLength(3) }),
+        });
+        this.loading = false;
+        this.handleSearchSubject = new Subject();
+        this.results = toSignal(this.form.controls.search.valueChanges.pipe(switchMap$1((search) => this.handleSearchSubject.pipe(startWith(false), switchMap$1((handleSearch) => {
+            this.selectedUsername = undefined;
+            this.hasError = false;
+            if (!search || !handleSearch) {
+                return of(null);
+            }
+            this.loading = true;
+            const results = this.searchUsers(search);
+            return results.pipe(catchError((e) => {
+                this.hasError = true;
+                console.error(e);
+                return of(null);
+            }));
+        }))), tap(() => {
+            this.loading = false;
+        })));
+        this.subs = new Subscription();
+        this.handleKeyDown = (event) => {
+            switch (event.key) {
+                case 'Esc':
+                case 'Escape': {
+                    this.close();
+                    break;
+                }
+                case 'I':
+                case 'i': {
+                    if (event.ctrlKey || event.metaKey) {
+                        if (this.isOpen) {
+                            this.close();
+                        }
+                        else {
+                            this.init.emit();
+                        }
+                        event.preventDefault();
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+        /** Redirect to Keycloak impersonate page, which will redirect back
+         * after impersonation begins.
+         */
+        this.startImpersonation = (username) => {
+            const _username = username ?? this.selectedUsername;
+            if (!_username) {
+                return;
+            }
+            const url = urlcat(this.oidcBaseUri(), START_IMPERSONATE_PATH, {
+                username,
+                returnUri: window.location.href,
+                defaultIdp: this.oidcDefaultIdp(),
+            });
+            this.replaceUrl(url);
+        };
+        this.handleSelectUser = (event) => {
+            this.selectedUsername = event.target.value;
+        };
+        this.clearSearch = () => {
+            this.form.reset();
+        };
+        this.close = () => {
+            this.dismiss.emit();
+            this.clearSearch();
+        };
+        this.handleFormSubmit = (event) => {
+            event.preventDefault();
+            if (this.form.valid) {
+                this.handleSearchSubject.next(true);
+            }
+        };
+        this.handleSearchKeyPress = (event) => {
+            if (!['ArrowDown', 'Down'].includes(event.key)) {
+                return;
+            }
+            event.preventDefault();
+            if (this.results()?.length) {
+                const firstResult = this.eref.nativeElement.querySelector(`#result_0`);
+                firstResult?.click();
+                firstResult?.focus();
+            }
+        };
+        this.handleResultKeyPress = (event) => {
+            if (['ArrowUp', 'Up'].includes(event.key) &&
+                event.target?.id === 'result_0') {
+                event.preventDefault();
+                this.eref.nativeElement.querySelector('#searchInput')?.focus();
+            }
+            else if (event.key === 'Enter') {
+                event.preventDefault();
+                this.startImpersonation();
+            }
+        };
+        /** Search Keycloak users using a generic search query. */
+        this.searchUsers = (query) => {
+            const uri = urlcat(this.oidcBaseUri(), SEARCH_USERS_PATH, {
+                query,
+            });
+            return this.http.get(uri, {
+                headers: {
+                    Authorization: `Bearer ${this.accessTokenPayload().token}`,
+                },
+            });
+        };
+        this.replaceUrl = (url) => window.location.replace(url);
+    }
+    set showModal(open) {
+        this.isOpen = open;
+        if (open) {
+            // Set focus on search input shortly after opening modal so user notices
+            // the input receiving focus.
+            setTimeout(() => this.eref.nativeElement.querySelector('#searchInput')?.focus(), 250);
+        }
+    }
+    outsideClick(event) {
+        if (event.target?.id === 'modalBackdrop') {
+            this.close();
+        }
+    }
+    ngOnDestroy() {
+        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: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, 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)}}*{box-sizing:border-box}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,
+            args: [{ standalone: true, imports: [CommonModule, ReactiveFormsModule, ImpersonateUserPipe], selector: 'lib-impersonate-modal', animations: [libHbllFadeInOut], 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)}}*{box-sizing:border-box}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"] }]
+        }], propDecorators: { showModal: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }], init: [{
+                type: Output
+            }], outsideClick: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
 var AccessStatus;
 (function (AccessStatus) {
     AccessStatus["OK"] = "ok";
@@ -683,11 +865,11 @@ class ImpersonationBannerComponent {
         this.STATUSES = AccessStatus;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonationBannerComponent, isStandalone: true, selector: "lib-impersonation-banner", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null }, personBaseUri: { classPropertyName: "personBaseUri", publicName: "personBaseUri", isSignal: true, isRequired: false, transformFunction: null }, libraryApiBaseUri: { classPropertyName: "libraryApiBaseUri", publicName: "libraryApiBaseUri", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endImpersonation: "endImpersonation" }, ngImport: i0, template: "@if (isImpersonating()) {\n    <div class=\"banner-padding\"></div>\n    <div class=\"top-banner\">\n        <div class=\"banner-group profile-name-container\">\n            <div class=\"profile-avatar\">\n                <div class=\"profile-image\">\n                    <img\n                        [src]=\"userPhotoUrl()\"\n                        [alt]=\"userFullName()\"\n                        alt=\"user photo\"\n                        onerror=\"this.remove()\"\n                    />\n                </div>\n                <span class=\"material-symbols-outlined profile-icon\"> person </span>\n            </div>\n            <div class=\"profile-name-group\">\n                <span class=\"soft\">Impersonating</span>\n                <div class=\"profile-name-wrapper\">\n                    <span class=\"profile-name\">{{ userFullName() }}</span>\n                    @if (accountStatuses()) {\n                        <div class=\"application-status-bar\">\n                            @if (accountStatuses()!.ok.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-ok application-status\">\n                                        <span class=\"material-symbols-outlined icon-checkmark\">\n                                            check\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.ok.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            OK Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.ok;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-checkmark\"\n                                                    >\n                                                        check\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.blocked.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-blocked application-status\">\n                                        <span class=\"material-symbols-outlined icon-warning\">\n                                            warning\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.blocked.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            Blocked Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.blocked;\n                                                track application.code\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-warning\"\n                                                    >\n                                                        warning\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.none.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-none application-status\">\n                                        <span class=\"material-symbols-outlined icon-lock\">\n                                            lock\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.none.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            No Account\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.none;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-lock\"\n                                                    >\n                                                        lock\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n                <div class=\"profile-detail\">\n                    <span class=\"soft label\">{{ detail.key }}</span>\n                    <lib-copy-tooltip [copyText]=\"detail.value\">\n                        <div class=\"profile-detail-tag white-tag clickable\">\n                            {{ detail.value || 'Unknown' }}\n                        </div>\n                    </lib-copy-tooltip>\n                </div>\n            }\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            <div class=\"profile-detail\">\n                <span class=\"soft label\">Status</span>\n                <div class=\"multiple-detail-tags\">\n                    <div\n                        class=\"profile-detail-tag color-tag\"\n                        title=\"{{ employeeStatusDescription() }}\"\n                    >\n                        {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n                        @if (activityStatus()) {\n                            <span\n                                class=\"profile-status-circle\"\n                                [class.status-active]=\"activityStatus() === 'active'\"\n                                [class.status-inactive]=\"activityStatus() === 'inactive'\"\n                                [class.status-retired]=\"activityStatus() === 'retired'\"\n                            ></span>\n                        }\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"spacer\"></div>\n        <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n            <span class=\"material-symbols-outlined icon\"> close </span>\n            <span class=\"exit-text\">Exit</span>\n        </button>\n    </div>\n    @if (isRestricted()) {\n        <div class=\"restricted-bar-padding\"></div>\n        <div class=\"restricted-bar\">\n            <span class=\"title\">restricted person</span>\n            <span class=\"text\">\n                If anyone asks about this person, you are instructed to respond,\n                <span class=\"emphasize\">\"We have no records for this person.\"</span>\n            </span>\n        </div>\n    }\n    <div class=\"right-border\"></div>\n    <div class=\"bottom-border\"></div>\n    <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: CopyTooltipComponent, selector: "lib-copy-tooltip", inputs: ["position", "copyText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonationBannerComponent, isStandalone: true, selector: "lib-impersonation-banner", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null }, personBaseUri: { classPropertyName: "personBaseUri", publicName: "personBaseUri", isSignal: true, isRequired: false, transformFunction: null }, libraryApiBaseUri: { classPropertyName: "libraryApiBaseUri", publicName: "libraryApiBaseUri", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endImpersonation: "endImpersonation" }, ngImport: i0, template: "@if (isImpersonating()) {\n    <div class=\"banner-padding\"></div>\n    <div class=\"top-banner\" data-testid=\"banner\">\n        <div class=\"banner-group profile-name-container\">\n            <div class=\"profile-avatar\">\n                <div class=\"profile-image\">\n                    <img\n                        [src]=\"userPhotoUrl()\"\n                        [alt]=\"userFullName()\"\n                        alt=\"user photo\"\n                        onerror=\"this.remove()\"\n                    />\n                </div>\n                <span class=\"material-symbols-outlined profile-icon\"> person </span>\n            </div>\n            <div class=\"profile-name-group\">\n                <span class=\"soft\">Impersonating</span>\n                <div class=\"profile-name-wrapper\">\n                    <span class=\"profile-name\">{{ userFullName() }}</span>\n                    @if (accountStatuses()) {\n                        <div class=\"application-status-bar\">\n                            @if (accountStatuses()!.ok.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-ok application-status\">\n                                        <span class=\"material-symbols-outlined icon-checkmark\">\n                                            check\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.ok.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            OK Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.ok;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-checkmark\"\n                                                    >\n                                                        check\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.blocked.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-blocked application-status\">\n                                        <span class=\"material-symbols-outlined icon-warning\">\n                                            warning\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.blocked.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            Blocked Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.blocked;\n                                                track application.code\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-warning\"\n                                                    >\n                                                        warning\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.none.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-none application-status\">\n                                        <span class=\"material-symbols-outlined icon-lock\">\n                                            lock\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.none.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            No Account\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.none;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-lock\"\n                                                    >\n                                                        lock\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n                <div class=\"profile-detail\">\n                    <span class=\"soft label\">{{ detail.key }}</span>\n                    <lib-copy-tooltip [copyText]=\"detail.value\">\n                        <div class=\"profile-detail-tag white-tag clickable\">\n                            {{ detail.value || 'Unknown' }}\n                        </div>\n                    </lib-copy-tooltip>\n                </div>\n            }\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            <div class=\"profile-detail\">\n                <span class=\"soft label\">Status</span>\n                <div class=\"multiple-detail-tags\">\n                    <div\n                        class=\"profile-detail-tag color-tag\"\n                        title=\"{{ employeeStatusDescription() }}\"\n                    >\n                        {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n                        @if (activityStatus()) {\n                            <span\n                                class=\"profile-status-circle\"\n                                [class.status-active]=\"activityStatus() === 'active'\"\n                                [class.status-inactive]=\"activityStatus() === 'inactive'\"\n                                [class.status-retired]=\"activityStatus() === 'retired'\"\n                            ></span>\n                        }\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"spacer\"></div>\n        <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n            <span class=\"material-symbols-outlined icon\"> close </span>\n            <span class=\"exit-text\">Exit</span>\n        </button>\n    </div>\n    @if (isRestricted()) {\n        <div class=\"restricted-bar-padding\"></div>\n        <div class=\"restricted-bar\">\n            <span class=\"title\">restricted person</span>\n            <span class=\"text\">\n                If anyone asks about this person, you are instructed to respond,\n                <span class=\"emphasize\">\"We have no records for this person.\"</span>\n            </span>\n        </div>\n    }\n    <div class=\"right-border\"></div>\n    <div class=\"bottom-border\"></div>\n    <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: CopyTooltipComponent, selector: "lib-copy-tooltip", inputs: ["position", "copyText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, CopyTooltipComponent], selector: 'lib-impersonation-banner', template: "@if (isImpersonating()) {\n    <div class=\"banner-padding\"></div>\n    <div class=\"top-banner\">\n        <div class=\"banner-group profile-name-container\">\n            <div class=\"profile-avatar\">\n                <div class=\"profile-image\">\n                    <img\n                        [src]=\"userPhotoUrl()\"\n                        [alt]=\"userFullName()\"\n                        alt=\"user photo\"\n                        onerror=\"this.remove()\"\n                    />\n                </div>\n                <span class=\"material-symbols-outlined profile-icon\"> person </span>\n            </div>\n            <div class=\"profile-name-group\">\n                <span class=\"soft\">Impersonating</span>\n                <div class=\"profile-name-wrapper\">\n                    <span class=\"profile-name\">{{ userFullName() }}</span>\n                    @if (accountStatuses()) {\n                        <div class=\"application-status-bar\">\n                            @if (accountStatuses()!.ok.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-ok application-status\">\n                                        <span class=\"material-symbols-outlined icon-checkmark\">\n                                            check\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.ok.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            OK Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.ok;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-checkmark\"\n                                                    >\n                                                        check\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.blocked.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-blocked application-status\">\n                                        <span class=\"material-symbols-outlined icon-warning\">\n                                            warning\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.blocked.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            Blocked Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.blocked;\n                                                track application.code\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-warning\"\n                                                    >\n                                                        warning\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.none.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-none application-status\">\n                                        <span class=\"material-symbols-outlined icon-lock\">\n                                            lock\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.none.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            No Account\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.none;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-lock\"\n                                                    >\n                                                        lock\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n                <div class=\"profile-detail\">\n                    <span class=\"soft label\">{{ detail.key }}</span>\n                    <lib-copy-tooltip [copyText]=\"detail.value\">\n                        <div class=\"profile-detail-tag white-tag clickable\">\n                            {{ detail.value || 'Unknown' }}\n                        </div>\n                    </lib-copy-tooltip>\n                </div>\n            }\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            <div class=\"profile-detail\">\n                <span class=\"soft label\">Status</span>\n                <div class=\"multiple-detail-tags\">\n                    <div\n                        class=\"profile-detail-tag color-tag\"\n                        title=\"{{ employeeStatusDescription() }}\"\n                    >\n                        {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n                        @if (activityStatus()) {\n                            <span\n                                class=\"profile-status-circle\"\n                                [class.status-active]=\"activityStatus() === 'active'\"\n                                [class.status-inactive]=\"activityStatus() === 'inactive'\"\n                                [class.status-retired]=\"activityStatus() === 'retired'\"\n                            ></span>\n                        }\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"spacer\"></div>\n        <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n            <span class=\"material-symbols-outlined icon\"> close </span>\n            <span class=\"exit-text\">Exit</span>\n        </button>\n    </div>\n    @if (isRestricted()) {\n        <div class=\"restricted-bar-padding\"></div>\n        <div class=\"restricted-bar\">\n            <span class=\"title\">restricted person</span>\n            <span class=\"text\">\n                If anyone asks about this person, you are instructed to respond,\n                <span class=\"emphasize\">\"We have no records for this person.\"</span>\n            </span>\n        </div>\n    }\n    <div class=\"right-border\"></div>\n    <div class=\"bottom-border\"></div>\n    <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, CopyTooltipComponent], selector: 'lib-impersonation-banner', template: "@if (isImpersonating()) {\n    <div class=\"banner-padding\"></div>\n    <div class=\"top-banner\" data-testid=\"banner\">\n        <div class=\"banner-group profile-name-container\">\n            <div class=\"profile-avatar\">\n                <div class=\"profile-image\">\n                    <img\n                        [src]=\"userPhotoUrl()\"\n                        [alt]=\"userFullName()\"\n                        alt=\"user photo\"\n                        onerror=\"this.remove()\"\n                    />\n                </div>\n                <span class=\"material-symbols-outlined profile-icon\"> person </span>\n            </div>\n            <div class=\"profile-name-group\">\n                <span class=\"soft\">Impersonating</span>\n                <div class=\"profile-name-wrapper\">\n                    <span class=\"profile-name\">{{ userFullName() }}</span>\n                    @if (accountStatuses()) {\n                        <div class=\"application-status-bar\">\n                            @if (accountStatuses()!.ok.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-ok application-status\">\n                                        <span class=\"material-symbols-outlined icon-checkmark\">\n                                            check\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.ok.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            OK Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.ok;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-checkmark\"\n                                                    >\n                                                        check\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.blocked.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-blocked application-status\">\n                                        <span class=\"material-symbols-outlined icon-warning\">\n                                            warning\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.blocked.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            Blocked Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.blocked;\n                                                track application.code\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-warning\"\n                                                    >\n                                                        warning\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.none.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-none application-status\">\n                                        <span class=\"material-symbols-outlined icon-lock\">\n                                            lock\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.none.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            No Account\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.none;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-lock\"\n                                                    >\n                                                        lock\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n                <div class=\"profile-detail\">\n                    <span class=\"soft label\">{{ detail.key }}</span>\n                    <lib-copy-tooltip [copyText]=\"detail.value\">\n                        <div class=\"profile-detail-tag white-tag clickable\">\n                            {{ detail.value || 'Unknown' }}\n                        </div>\n                    </lib-copy-tooltip>\n                </div>\n            }\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            <div class=\"profile-detail\">\n                <span class=\"soft label\">Status</span>\n                <div class=\"multiple-detail-tags\">\n                    <div\n                        class=\"profile-detail-tag color-tag\"\n                        title=\"{{ employeeStatusDescription() }}\"\n                    >\n                        {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n                        @if (activityStatus()) {\n                            <span\n                                class=\"profile-status-circle\"\n                                [class.status-active]=\"activityStatus() === 'active'\"\n                                [class.status-inactive]=\"activityStatus() === 'inactive'\"\n                                [class.status-retired]=\"activityStatus() === 'retired'\"\n                            ></span>\n                        }\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"spacer\"></div>\n        <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n            <span class=\"material-symbols-outlined icon\"> close </span>\n            <span class=\"exit-text\">Exit</span>\n        </button>\n    </div>\n    @if (isRestricted()) {\n        <div class=\"restricted-bar-padding\"></div>\n        <div class=\"restricted-bar\">\n            <span class=\"title\">restricted person</span>\n            <span class=\"text\">\n                If anyone asks about this person, you are instructed to respond,\n                <span class=\"emphasize\">\"We have no records for this person.\"</span>\n            </span>\n        </div>\n    }\n    <div class=\"right-border\"></div>\n    <div class=\"bottom-border\"></div>\n    <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"] }]
         }], propDecorators: { endImpersonation: [{
                 type: Output
             }] } });
@@ -989,7 +1171,7 @@ class HbllMultiSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllMultiSelectComponent, isStandalone: true, selector: "lib-hbll-multi-select", inputs: { allOptions: "allOptions", label: "label", selectedKeys: "selectedKeys" }, outputs: { selectedKeysChange: "selectedKeysChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"components-multi-select\">\n    <mat-form-field appearance=\"outline\">\n        <mat-chip-grid #chipGrid [attr.aria-label]=\"label + ' selection'\">\n            @for (key of selectedKeys; track key) {\n                @if (allOptions[key]) {\n                    <mat-chip-row (removed)=\"removeOption(key)\" data-testid=\"matChipRow\">\n                        {{ allOptions[key] }}\n                        <button\n                            matChipRemove\n                            [attr.aria-label]=\"'remove ' + allOptions[key]\"\n                            [attr.data-testid]=\"'remove' + key\"\n                        >\n                            <span class=\"material-symbols-outlined components-icon\"> cancel </span>\n                        </button>\n                    </mat-chip-row>\n                }\n            }\n        </mat-chip-grid>\n        <label class=\"components-hidden\" for=\"input\">{{ label }}</label>\n        <input\n            [placeholder]=\"label | titlecase\"\n            #input\n            id=\"input\"\n            [formControl]=\"inputControl\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addOption($event)\"\n            data-testid=\"input\"\n        />\n        <mat-autocomplete\n            #auto=\"matAutocomplete\"\n            (optionSelected)=\"selectOption($event)\"\n            data-testid=\"autocomplete\"\n        >\n            @for (key of filteredOptions$ | async; track key) {\n                <mat-option [value]=\"key\" data-testid=\"autocompleteOption\">\n                    {{ allOptions[key] }}\n                </mat-option>\n            }\n        </mat-autocomplete>\n    </mat-form-field>\n</div>\n", styles: [".components-multi-select{font:inherit}.components-multi-select mat-form-field{font:inherit;background-color:#fff;width:100%}.components-multi-select mat-form-field .mat-mdc-form-field-infix{padding:.35em 0;min-height:0}.components-multi-select mat-form-field .mat-mdc-chip-input{font:inherit;margin-left:0}.components-multi-select mat-form-field .mat-mdc-chip-input::placeholder{opacity:.75}.components-multi-select mat-form-field .mat-mdc-text-field-wrapper{padding:0 .5em}.components-multi-select .components-icon{font-size:1em}.components-multi-select .mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{font:inherit}.components-multi-select .components-hidden{display:none}.mat-mdc-option.mdc-list-item{background-color:#fff;font:inherit}.mat-mdc-autocomplete-panel{background-color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllMultiSelectComponent, isStandalone: true, selector: "lib-hbll-multi-select", inputs: { allOptions: "allOptions", label: "label", selectedKeys: "selectedKeys" }, outputs: { selectedKeysChange: "selectedKeysChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"components-multi-select\">\n    <mat-form-field appearance=\"outline\">\n        <mat-chip-grid #chipGrid [attr.aria-label]=\"label + ' selection'\">\n            @for (key of selectedKeys; track key) {\n                @if (allOptions[key]) {\n                    <mat-chip-row (removed)=\"removeOption(key)\" data-testid=\"matChipRow\">\n                        {{ allOptions[key] }}\n                        <button\n                            matChipRemove\n                            [attr.aria-label]=\"'remove ' + allOptions[key]\"\n                            [attr.data-testid]=\"'remove' + key\"\n                        >\n                            <span class=\"material-symbols-outlined components-icon\"> cancel </span>\n                        </button>\n                    </mat-chip-row>\n                }\n            }\n        </mat-chip-grid>\n        <label class=\"components-hidden\" for=\"input\">{{ label }}</label>\n        <input\n            [placeholder]=\"label | titlecase\"\n            #input\n            id=\"input\"\n            [formControl]=\"inputControl\"\n            [matChipInputFor]=\"chipGrid\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"addOption($event)\"\n            data-testid=\"input\"\n        />\n        <mat-autocomplete\n            #auto=\"matAutocomplete\"\n            (optionSelected)=\"selectOption($event)\"\n            data-testid=\"autocomplete\"\n        >\n            @for (key of filteredOptions$ | async; track key) {\n                <mat-option [value]=\"key\" data-testid=\"autocompleteOption\">\n                    {{ allOptions[key] }}\n                </mat-option>\n            }\n        </mat-autocomplete>\n    </mat-form-field>\n</div>\n", styles: [".components-multi-select{font:inherit}.components-multi-select mat-form-field{font:inherit;background-color:#fff;width:100%}.components-multi-select mat-form-field .mat-mdc-form-field-infix{padding:.35em 0;min-height:0}.components-multi-select mat-form-field .mat-mdc-chip-input{font:inherit;margin-left:0}.components-multi-select mat-form-field .mat-mdc-chip-input::placeholder{opacity:.75}.components-multi-select mat-form-field .mat-mdc-text-field-wrapper{padding:0 .5em}.components-multi-select .components-icon{font-size:1em}.components-multi-select .mat-mdc-chip.mdc-evolution-chip--with-trailing-action .mat-mdc-chip-action-label{font:inherit}.components-multi-select .components-hidden{display:none}.mat-mdc-option.mdc-list-item{background-color:#fff;font:inherit}.mat-mdc-autocomplete-panel{background-color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllMultiSelectComponent, decorators: [{
             type: Component,
@@ -1073,7 +1255,7 @@ class DateRangeComponent {
             this.dateForm.controls.to.setValue(to);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: DateRangeComponent, isStandalone: true, selector: "lib-date-range", inputs: { from: "from", to: "to" }, outputs: { validDateChange: "validDateChange", fromChange: "fromChange", toChange: "toChange" }, ngImport: i0, template: "<form id=\"fromTo\" data-testid=\"fromTo\" [formGroup]=\"dateForm\">\n    <label for=\"fromFacet\">Between</label>\n    <input\n        formControlName=\"from\"\n        id=\"fromFacet\"\n        name=\"fromFacet\"\n        data-testid=\"from\"\n        placeholder=\"YYYY\"\n        inputmode=\"numeric\"\n        minlength=\"4\"\n        maxlength=\"4\"\n        (input)=\"onFromChange()\"\n        [class.error]=\"\n            dateForm.errors?.['fromInvalid'] || dateForm.controls.from.errors?.['pattern']\n        \"\n    />\n    <label for=\"toFacet\">and</label>\n    <input\n        formControlName=\"to\"\n        id=\"toFacet\"\n        name=\"toFacet\"\n        data-testid=\"to\"\n        placeholder=\"YYYY\"\n        inputmode=\"numeric\"\n        minlength=\"4\"\n        maxlength=\"4\"\n        (input)=\"onToChange()\"\n        [class.error]=\"dateForm.errors?.['toInvalid'] || dateForm.controls.to.errors?.['pattern']\"\n    />\n</form>\n", styles: ["input{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}input:focus{border-color:#3a6093}#fromTo{margin-top:.6rem;margin-bottom:.8rem}#fromTo label{margin-right:.7em}#fromTo label:not(:first-of-type){margin-left:.7em}#fromTo input{font-size:inherit;width:3.5em}#fromTo input.error{border-color:#b04940}@media screen and (min-width: 690px){#fromTo{margin-bottom:1.4rem}#fromTo label{margin-right:.65em}#fromTo label:not(:first-of-type){margin-left:.65em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], animations: [libHbllFadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: DateRangeComponent, isStandalone: true, selector: "lib-date-range", inputs: { from: "from", to: "to" }, outputs: { validDateChange: "validDateChange", fromChange: "fromChange", toChange: "toChange" }, ngImport: i0, template: "<form id=\"fromTo\" data-testid=\"fromTo\" [formGroup]=\"dateForm\">\n    <label for=\"fromFacet\">Between</label>\n    <input\n        formControlName=\"from\"\n        id=\"fromFacet\"\n        name=\"fromFacet\"\n        data-testid=\"from\"\n        placeholder=\"YYYY\"\n        inputmode=\"numeric\"\n        minlength=\"4\"\n        maxlength=\"4\"\n        (input)=\"onFromChange()\"\n        [class.error]=\"\n            dateForm.errors?.['fromInvalid'] || dateForm.controls.from.errors?.['pattern']\n        \"\n    />\n    <label for=\"toFacet\">and</label>\n    <input\n        formControlName=\"to\"\n        id=\"toFacet\"\n        name=\"toFacet\"\n        data-testid=\"to\"\n        placeholder=\"YYYY\"\n        inputmode=\"numeric\"\n        minlength=\"4\"\n        maxlength=\"4\"\n        (input)=\"onToChange()\"\n        [class.error]=\"dateForm.errors?.['toInvalid'] || dateForm.controls.to.errors?.['pattern']\"\n    />\n</form>\n", styles: ["input{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}input:focus{border-color:#3a6093}#fromTo{margin-top:.6rem;margin-bottom:.8rem}#fromTo label{margin-right:.7em}#fromTo label:not(:first-of-type){margin-left:.7em}#fromTo input{font-size:inherit;width:3.5em}#fromTo input.error{border-color:#b04940}@media screen and (min-width: 690px){#fromTo{margin-bottom:1.4rem}#fromTo label{margin-right:.65em}#fromTo label:not(:first-of-type){margin-left:.65em}}\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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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"] }], animations: [libHbllFadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
@@ -1320,7 +1502,7 @@ class AdvancedSearchComponent {
         return this.advancedSearchForm.controls.expandResults.controls.applyEquivalentSubjects;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: AdvancedSearchComponent, isStandalone: true, selector: "lib-ss-advanced-search", inputs: { config: "config" }, outputs: { advancedSearch: "advancedSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<form\n    data-testid=\"advancedSearchForm\"\n    (submit)=\"config.scope === 'local' ? doLocalAdvancedSearch() : doExternalAdvancedSearch()\"\n    [formGroup]=\"advancedSearchForm\"\n    class=\"ss-adv-search-wrapper\"\n>\n    <h3>Advanced Search</h3>\n    <!-- Queries -->\n    @for (query of queries.controls; track $index; let queryIndex = $index) {\n        <div class=\"ss-adv-search-row\" [formGroup]=\"query\">\n            <!-- Boolean operator -->\n            <!-- Add boolean for each row except for first -->\n            @if (!$first) {\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'boolean' + queryIndex\"\n                        [formControlName]=\"'boolean'\"\n                        [attr.data-testid]=\"'boolean' + queryIndex\"\n                    >\n                        @for (boolean of advancedSearchOptions.boolean; track boolean) {\n                            <option [ngValue]=\"boolean\">\n                                {{ boolean }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Field -->\n            <label [for]=\"'field' + queryIndex\" class=\"ss-hidden\">Field {{ queryIndex }}</label>\n            <div class=\"ss-select-wrapper\">\n                <select\n                    [id]=\"'field' + queryIndex\"\n                    [formControlName]=\"'field'\"\n                    [attr.data-testid]=\"'field' + queryIndex\"\n                >\n                    @for (field of advancedSearchOptions.fields; track field) {\n                        <option [ngValue]=\"field\">\n                            {{ advancedSearchFieldMap[field] }}\n                        </option>\n                    }\n                    <optgroup\n                        [label]=\"(config.scope === 'external' ? 'Online' : 'Library') + ' Specific'\"\n                    >\n                        @for (\n                            field of config.scope === 'external'\n                                ? advancedSearchOptions.externalFields\n                                : advancedSearchOptions.localFields;\n                            track field\n                        ) {\n                            <option [ngValue]=\"field\">\n                                {{ advancedSearchFieldMap[field] }}\n                            </option>\n                        }\n                    </optgroup>\n                </select>\n            </div>\n            <!-- Qualifiers are only available for local searches -->\n            @if (config.scope === 'local') {\n                <label [for]=\"'qualifier' + queryIndex\" class=\"ss-hidden\"\n                    >Match Criteria {{ queryIndex }}</label\n                >\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'qualifier' + queryIndex\"\n                        [formControlName]=\"'qualifier'\"\n                        [attr.data-testid]=\"'qualifier' + queryIndex\"\n                    >\n                        <!-- $any because a field can technically be local or external, though this block is scoped strictly to local fields -->\n                        @for (\n                            qualifier of $any(advancedSearchOptions.qualifiers)[\n                                query.controls.field.value\n                            ];\n                            track qualifier;\n                            let optionIndex = $index\n                        ) {\n                            <option\n                                [ngValue]=\"qualifier\"\n                                [attr.data-testid]=\"\n                                    'qualifier' + queryIndex + '-option' + optionIndex\n                                \"\n                            >\n                                {{ $any(advancedSearchQualifierMap)[qualifier] }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Query -->\n            <label [for]=\"'query' + queryIndex\" class=\"ss-hidden\">Query {{ queryIndex }}</label>\n            <div class=\"ss-query-input\">\n                <input\n                    #searchInput\n                    [id]=\"'query' + queryIndex\"\n                    [formControlName]=\"'query'\"\n                    [attr.data-testid]=\"'query' + queryIndex\"\n                    required\n                    aria-required=\"true\"\n                    matTooltip=\"Fill out this field\"\n                    [matTooltipPosition]=\"'above'\"\n                    [matTooltipDisabled]=\"true\"\n                    [attr.aria-invalid]=\"isSubmitted && queries.at(0).controls.query.invalid\"\n                    aria-describedby=\"invalidInputDesc\"\n                />\n            </div>\n            @if (!$first) {\n                <button\n                    class=\"ss-row-cancel\"\n                    type=\"button\"\n                    (click)=\"removeQuery(queryIndex)\"\n                    [attr.data-testid]=\"'cancelRow' + queryIndex\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n                </button>\n            }\n        </div>\n    }\n    <button\n        type=\"button\"\n        (click)=\"addQuery()\"\n        id=\"addQueryBtn\"\n        data-testid=\"addQuery\"\n        [disabled]=\"queries.length > 11\"\n    >\n        <span class=\"material-symbols-outlined ss-icon\"> add </span>\n        Add a row\n    </button>\n    <!-- OTHER OPTIONS -->\n    <div class=\"ss-other-options\">\n        <!-- LOCAL -->\n        @if (config.scope === 'local') {\n            <!-- Type -->\n            <div data-testid=\"resourceType\">\n                <h4>Resource Type</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Resource Type'\"\n                        [allOptions]=\"advancedSearchOptions.types[config.institution]\"\n                        [selectedKeys]=\"types.value\"\n                        (selectedKeysChange)=\"types.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Collection -->\n            <div data-testid=\"collection\">\n                <h4>Collection</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Collection'\"\n                        [allOptions]=\"advancedSearchOptions.collections[config.institution]\"\n                        [selectedKeys]=\"collections.value\"\n                        (selectedKeysChange)=\"collections.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Creation Date' }\"\n            ></ng-container>\n        }\n        <!-- EXTERNAL -->\n        @if (config.scope === 'external') {\n            <div formGroupName=\"limitResults\" class=\"ss-checkbox-section\">\n                <h4>For Fewer Results Try</h4>\n                <!-- Peer reviewed -->\n                <label class=\"ss-checkbox-label\" for=\"peerReviewed\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"peerReviewed\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'peerReviewed'\"\n                        data-testid=\"peerReviewed\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"peerReviewed.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Peer reviewed journal articles</span>\n                </label>\n            </div>\n            <div formGroupName=\"expandResults\" class=\"ss-checkbox-section\">\n                <h4>For More Results Try</h4>\n                <!-- Apply equivalent subjects -->\n                <label class=\"ss-checkbox-label\" for=\"applyEquivalentSubjects\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"applyEquivalentSubjects\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'applyEquivalentSubjects'\"\n                        data-testid=\"applyEquivalentSubjects\"\n                    />\n                    <lib-hbll-checkbox\n                        [isChecked]=\"applyEquivalentSubjects.value\"\n                    ></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Apply equivalent subjects</span>\n                </label>\n                <!-- Full text -->\n                <label class=\"ss-checkbox-label\" for=\"fullText\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"fullText\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'fullText'\"\n                        data-testid=\"fullText\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"fullText.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\"\n                        >Include results the library doesn't have access to</span\n                    >\n                </label>\n            </div>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Date Published' }\"\n            ></ng-container>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n        }\n    </div>\n    <div id=\"advSearchFooter\">\n        <a [href]=\"'https://lib.byu.edu/browse/' + config.institution\">Alphabetic Browse</a>\n        <button\n            class=\"pill-btn--components\"\n            [ngClass]=\"{\n                ensign: config.institution === 'ensign',\n            }\"\n            type=\"submit\"\n            data-testid=\"advSearchSubmitButton\"\n        >\n            Search\n        </button>\n    </div>\n</form>\n\n<ng-template #languageBlock>\n    <div>\n        <h4>Language</h4>\n        <lib-hbll-multi-select\n            [label]=\"'language'\"\n            [allOptions]=\"advancedSearchOptions.languages\"\n            [selectedKeys]=\"languages.value\"\n            (selectedKeysChange)=\"languages.setValue($any($event))\"\n        ></lib-hbll-multi-select>\n    </div>\n</ng-template>\n<ng-template #dateBlock let-header=\"header\">\n    <div id=\"dateOptions\" class=\"external\">\n        <h4>{{ header }}</h4>\n        <lib-date-range\n            [from]=\"from.value\"\n            [to]=\"to.value\"\n            (fromChange)=\"from.setValue($event)\"\n            (toChange)=\"to.setValue($event)\"\n        ></lib-date-range>\n    </div>\n</ng-template>\n", styles: ["button.ensign{background-color:#2b6042!important;border-color:#2a6142}button.ensign:hover{background-color:#357551!important}a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}select,textarea,input{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}select:focus,textarea:focus,input:focus{border-color:#3a6093}.ss-select-wrapper{position:relative}.ss-select-wrapper select{cursor:pointer;padding-right:2em}.ss-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}:host{box-sizing:border-box}:host *{box-sizing:inherit}.ss-select-wrapper{margin-right:.3em}.ss-row-cancel{color:#aaa;margin-left:.4em;margin-top:.4em}.ss-row-cancel:hover{color:#666}.ss-row-cancel .ss-icon{font-size:1em}.ss-hidden{display:none}#addQueryBtn{display:flex;align-items:center}#addQueryBtn:disabled{color:#999;pointer-events:none}#addQueryBtn .icon{font-size:1em}.ss-adv-search-wrapper{width:100%}h3{font-size:1.13em;font-weight:300;margin-bottom:.7em;margin-top:0}h4{margin-bottom:.3em;font-weight:600}#dateOptions h4{margin-bottom:.8em}.ss-adv-search-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.6em}.ss-query-input{display:inline-block;width:100%;margin-top:.4rem}.ss-query-input input{width:100%}.ss-other-options{display:grid;grid-template-columns:repeat(1,1fr);gap:.6em 1.6em;grid-auto-rows:minmax(1em,auto);margin-top:1.4em}.ss-other-options label{margin-right:1rem}.ss-checkbox-label{display:inline-flex;align-items:flex-start;cursor:pointer}.ss-checkbox-label:not(:last-of-type){margin-bottom:.75em}.ss-checkbox-label .ss-label-text{margin-top:-.1em;margin-left:.45em}.ss-checkbox-section{margin-bottom:.8em}#advSearchFooter{margin-bottom:.5em;display:flex;justify-content:space-between;align-items:center;font-size:1.2em}#advSearchFooter a{font-size:.8em}@media screen and (min-width: 615px){.ss-adv-search-row{flex-wrap:nowrap}.ss-other-options{grid-template-columns:repeat(2,1fr)}.ss-query-input{margin-top:0}#dateOptions .external{grid-column:span 2}}\n"], dependencies: [{ 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: HbllMultiSelectComponent, selector: "lib-hbll-multi-select", inputs: ["allOptions", "label", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: HbllCheckboxComponent, selector: "lib-hbll-checkbox", inputs: ["isChecked"] }, { kind: "component", type: DateRangeComponent, selector: "lib-date-range", inputs: ["from", "to"], outputs: ["validDateChange", "fromChange", "toChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: AdvancedSearchComponent, isStandalone: true, selector: "lib-ss-advanced-search", inputs: { config: "config" }, outputs: { advancedSearch: "advancedSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<form\n    data-testid=\"advancedSearchForm\"\n    (submit)=\"config.scope === 'local' ? doLocalAdvancedSearch() : doExternalAdvancedSearch()\"\n    [formGroup]=\"advancedSearchForm\"\n    class=\"ss-adv-search-wrapper\"\n>\n    <h3>Advanced Search</h3>\n    <!-- Queries -->\n    @for (query of queries.controls; track $index; let queryIndex = $index) {\n        <div class=\"ss-adv-search-row\" [formGroup]=\"query\">\n            <!-- Boolean operator -->\n            <!-- Add boolean for each row except for first -->\n            @if (!$first) {\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'boolean' + queryIndex\"\n                        [formControlName]=\"'boolean'\"\n                        [attr.data-testid]=\"'boolean' + queryIndex\"\n                    >\n                        @for (boolean of advancedSearchOptions.boolean; track boolean) {\n                            <option [ngValue]=\"boolean\">\n                                {{ boolean }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Field -->\n            <label [for]=\"'field' + queryIndex\" class=\"ss-hidden\">Field {{ queryIndex }}</label>\n            <div class=\"ss-select-wrapper\">\n                <select\n                    [id]=\"'field' + queryIndex\"\n                    [formControlName]=\"'field'\"\n                    [attr.data-testid]=\"'field' + queryIndex\"\n                >\n                    @for (field of advancedSearchOptions.fields; track field) {\n                        <option [ngValue]=\"field\">\n                            {{ advancedSearchFieldMap[field] }}\n                        </option>\n                    }\n                    <optgroup\n                        [label]=\"(config.scope === 'external' ? 'Online' : 'Library') + ' Specific'\"\n                    >\n                        @for (\n                            field of config.scope === 'external'\n                                ? advancedSearchOptions.externalFields\n                                : advancedSearchOptions.localFields;\n                            track field\n                        ) {\n                            <option [ngValue]=\"field\">\n                                {{ advancedSearchFieldMap[field] }}\n                            </option>\n                        }\n                    </optgroup>\n                </select>\n            </div>\n            <!-- Qualifiers are only available for local searches -->\n            @if (config.scope === 'local') {\n                <label [for]=\"'qualifier' + queryIndex\" class=\"ss-hidden\"\n                    >Match Criteria {{ queryIndex }}</label\n                >\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'qualifier' + queryIndex\"\n                        [formControlName]=\"'qualifier'\"\n                        [attr.data-testid]=\"'qualifier' + queryIndex\"\n                    >\n                        <!-- $any because a field can technically be local or external, though this block is scoped strictly to local fields -->\n                        @for (\n                            qualifier of $any(advancedSearchOptions.qualifiers)[\n                                query.controls.field.value\n                            ];\n                            track qualifier;\n                            let optionIndex = $index\n                        ) {\n                            <option\n                                [ngValue]=\"qualifier\"\n                                [attr.data-testid]=\"\n                                    'qualifier' + queryIndex + '-option' + optionIndex\n                                \"\n                            >\n                                {{ $any(advancedSearchQualifierMap)[qualifier] }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Query -->\n            <label [for]=\"'query' + queryIndex\" class=\"ss-hidden\">Query {{ queryIndex }}</label>\n            <div class=\"ss-query-input\">\n                <input\n                    #searchInput\n                    [id]=\"'query' + queryIndex\"\n                    [formControlName]=\"'query'\"\n                    [attr.data-testid]=\"'query' + queryIndex\"\n                    required\n                    aria-required=\"true\"\n                    matTooltip=\"Fill out this field\"\n                    [matTooltipPosition]=\"'above'\"\n                    [matTooltipDisabled]=\"true\"\n                    [attr.aria-invalid]=\"isSubmitted && queries.at(0).controls.query.invalid\"\n                    aria-describedby=\"invalidInputDesc\"\n                />\n            </div>\n            @if (!$first) {\n                <button\n                    class=\"ss-row-cancel\"\n                    type=\"button\"\n                    (click)=\"removeQuery(queryIndex)\"\n                    [attr.data-testid]=\"'cancelRow' + queryIndex\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n                </button>\n            }\n        </div>\n    }\n    <button\n        type=\"button\"\n        (click)=\"addQuery()\"\n        id=\"addQueryBtn\"\n        data-testid=\"addQuery\"\n        [disabled]=\"queries.length > 11\"\n    >\n        <span class=\"material-symbols-outlined ss-icon\"> add </span>\n        Add a row\n    </button>\n    <!-- OTHER OPTIONS -->\n    <div class=\"ss-other-options\">\n        <!-- LOCAL -->\n        @if (config.scope === 'local') {\n            <!-- Type -->\n            <div data-testid=\"resourceType\">\n                <h4>Resource Type</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Resource Type'\"\n                        [allOptions]=\"advancedSearchOptions.types[config.institution]\"\n                        [selectedKeys]=\"types.value\"\n                        (selectedKeysChange)=\"types.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Collection -->\n            <div data-testid=\"collection\">\n                <h4>Collection</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Collection'\"\n                        [allOptions]=\"advancedSearchOptions.collections[config.institution]\"\n                        [selectedKeys]=\"collections.value\"\n                        (selectedKeysChange)=\"collections.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Creation Date' }\"\n            ></ng-container>\n        }\n        <!-- EXTERNAL -->\n        @if (config.scope === 'external') {\n            <div formGroupName=\"limitResults\" class=\"ss-checkbox-section\">\n                <h4>For Fewer Results Try</h4>\n                <!-- Peer reviewed -->\n                <label class=\"ss-checkbox-label\" for=\"peerReviewed\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"peerReviewed\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'peerReviewed'\"\n                        data-testid=\"peerReviewed\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"peerReviewed.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Peer reviewed journal articles</span>\n                </label>\n            </div>\n            <div formGroupName=\"expandResults\" class=\"ss-checkbox-section\">\n                <h4>For More Results Try</h4>\n                <!-- Apply equivalent subjects -->\n                <label class=\"ss-checkbox-label\" for=\"applyEquivalentSubjects\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"applyEquivalentSubjects\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'applyEquivalentSubjects'\"\n                        data-testid=\"applyEquivalentSubjects\"\n                    />\n                    <lib-hbll-checkbox\n                        [isChecked]=\"applyEquivalentSubjects.value\"\n                    ></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Apply equivalent subjects</span>\n                </label>\n                <!-- Full text -->\n                <label class=\"ss-checkbox-label\" for=\"fullText\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"fullText\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'fullText'\"\n                        data-testid=\"fullText\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"fullText.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\"\n                        >Include results the library doesn't have access to</span\n                    >\n                </label>\n            </div>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Date Published' }\"\n            ></ng-container>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n        }\n    </div>\n    <div id=\"advSearchFooter\">\n        <a [href]=\"'https://lib.byu.edu/browse/' + config.institution\">Alphabetic Browse</a>\n        <button\n            class=\"pill-btn--components\"\n            [ngClass]=\"{\n                ensign: config.institution === 'ensign',\n            }\"\n            type=\"submit\"\n            data-testid=\"advSearchSubmitButton\"\n        >\n            Search\n        </button>\n    </div>\n</form>\n\n<ng-template #languageBlock>\n    <div>\n        <h4>Language</h4>\n        <lib-hbll-multi-select\n            [label]=\"'language'\"\n            [allOptions]=\"advancedSearchOptions.languages\"\n            [selectedKeys]=\"languages.value\"\n            (selectedKeysChange)=\"languages.setValue($any($event))\"\n        ></lib-hbll-multi-select>\n    </div>\n</ng-template>\n<ng-template #dateBlock let-header=\"header\">\n    <div id=\"dateOptions\" class=\"external\">\n        <h4>{{ header }}</h4>\n        <lib-date-range\n            [from]=\"from.value\"\n            [to]=\"to.value\"\n            (fromChange)=\"from.setValue($event)\"\n            (toChange)=\"to.setValue($event)\"\n        ></lib-date-range>\n    </div>\n</ng-template>\n", styles: ["button.ensign{background-color:#2b6042!important;border-color:#2a6142}button.ensign:hover{background-color:#357551!important}a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}select,textarea,input{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}select:focus,textarea:focus,input:focus{border-color:#3a6093}.ss-select-wrapper{position:relative}.ss-select-wrapper select{cursor:pointer;padding-right:2em}.ss-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}:host{box-sizing:border-box}:host *{box-sizing:inherit}.ss-select-wrapper{margin-right:.3em}.ss-row-cancel{color:#aaa;margin-left:.4em;margin-top:.4em}.ss-row-cancel:hover{color:#666}.ss-row-cancel .ss-icon{font-size:1em}.ss-hidden{display:none}#addQueryBtn{display:flex;align-items:center}#addQueryBtn:disabled{color:#999;pointer-events:none}#addQueryBtn .icon{font-size:1em}.ss-adv-search-wrapper{width:100%}h3{font-size:1.13em;font-weight:300;margin-bottom:.7em;margin-top:0}h4{margin-bottom:.3em;font-weight:600}#dateOptions h4{margin-bottom:.8em}.ss-adv-search-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.6em}.ss-query-input{display:inline-block;width:100%;margin-top:.4rem}.ss-query-input input{width:100%}.ss-other-options{display:grid;grid-template-columns:repeat(1,1fr);gap:.6em 1.6em;grid-auto-rows:minmax(1em,auto);margin-top:1.4em}.ss-other-options label{margin-right:1rem}.ss-checkbox-label{display:inline-flex;align-items:flex-start;cursor:pointer}.ss-checkbox-label:not(:last-of-type){margin-bottom:.75em}.ss-checkbox-label .ss-label-text{margin-top:-.1em;margin-left:.45em}.ss-checkbox-section{margin-bottom:.8em}#advSearchFooter{margin-bottom:.5em;display:flex;justify-content:space-between;align-items:center;font-size:1.2em}#advSearchFooter a{font-size:.8em}@media screen and (min-width: 615px){.ss-adv-search-row{flex-wrap:nowrap}.ss-other-options{grid-template-columns:repeat(2,1fr)}.ss-query-input{margin-top:0}#dateOptions .external{grid-column:span 2}}\n"], dependencies: [{ 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: HbllMultiSelectComponent, selector: "lib-hbll-multi-select", inputs: ["allOptions", "label", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: HbllCheckboxComponent, selector: "lib-hbll-checkbox", inputs: ["isChecked"] }, { kind: "component", type: DateRangeComponent, selector: "lib-date-range", inputs: ["from", "to"], outputs: ["validDateChange", "fromChange", "toChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
             type: Component,
@@ -1402,7 +1584,7 @@ class SimpleSearchComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SimpleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SimpleSearchComponent, isStandalone: true, selector: "lib-ss-simple-search", inputs: { config: "config" }, outputs: { simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<div class=\"ss-container\">\n    <form [formGroup]=\"searchForm\" (submit)=\"emitSimpleSearch()\" data-testid=\"searchForm\">\n        <input\n            #searchInput\n            data-testid=\"searchInput\"\n            id=\"q\"\n            name=\"q\"\n            type=\"text\"\n            required\n            aria-required=\"true\"\n            aria-label=\"search input\"\n            autocapitalize=\"off\"\n            formControlName=\"simpleQuery\"\n            matTooltip=\"Fill out this field\"\n            [matTooltipPosition]=\"'above'\"\n            [matTooltipDisabled]=\"true\"\n            [attr.aria-invalid]=\"isSubmitted && simpleQuery.invalid\"\n        />\n        <label for=\"q\" data-testid=\"label\">{{\n            config.scope === 'local'\n                ? 'Books, media, special collections and more'\n                : 'Ebooks, articles, journals, databases, streaming media and more'\n        }}</label>\n        <button\n            type=\"submit\"\n            aria-label=\"search\"\n            data-testid=\"searchBtn\"\n            [ngClass]=\"{ ensign: config.institution === 'ensign' }\"\n        >\n            <span class=\"material-symbols-outlined ss-icon\"> search </span>\n        </button>\n    </form>\n\n    @if (simpleQuery.value) {\n        <button id=\"clear\" (click)=\"clearQuery()\" data-testid=\"clearBtn\">\n            <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n        </button>\n    }\n</div>\n", styles: ["a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}.ss-container{position:relative}form{display:flex}.ss-icon{font-size:1em}button[type=submit]{background:#fff;border-radius:0 4px 4px 0;margin:0;width:3em;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:color .2s,background-color .2s}button[type=submit] .ss-icon{color:#0047ba;font-size:1.7em}button[type=submit]:hover .ss-icon{color:#6892ca}button[type=submit].ensign .ss-icon{color:#2b6042}button[type=submit].ensign .ss-icon:hover{color:#357551}#clear{position:absolute;right:3em;top:0%;height:100%;display:flex;justify-content:center;align-items:center;padding:0 0 0 .6rem}#clear .ss-icon{height:auto;color:#acacac;transition:color ease-in-out .05s}#clear:hover .ss-icon{color:#666}input[type=text]{background-color:#fff;color:#000;font-family:inherit;border:none;font-weight:600;margin:0;overflow:hidden;cursor:text;width:calc(100% - 3em);font-size:1em;border-radius:4px 0 0 4px;padding:.56em 2em .56em .56em}input[type=text]:focus{outline:none}input[type=text]:valid+label,input[type=text]:focus+label{font-size:.75em;top:-.8em;padding-top:0;padding-bottom:0;pointer-events:none;margin-top:0;margin-left:.56em;cursor:default}input[type=text]:valid+label:before,input[type=text]:focus+label:before{opacity:1}label{cursor:text;transition:all .1s ease-in-out;position:absolute;padding:.5em .28em;margin-left:.28em;left:0;color:#707070;z-index:1;max-width:calc(100% - 3.4em);white-space:nowrap;line-height:normal;overflow:hidden;text-overflow:ellipsis;border-radius:4px}label:before{transition:all .1s ease-in-out;background-color:#fff;content:\"\";position:absolute;inset:0;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SimpleSearchComponent, isStandalone: true, selector: "lib-ss-simple-search", inputs: { config: "config" }, outputs: { simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<div class=\"ss-container\">\n    <form [formGroup]=\"searchForm\" (submit)=\"emitSimpleSearch()\" data-testid=\"searchForm\">\n        <input\n            #searchInput\n            data-testid=\"searchInput\"\n            id=\"q\"\n            name=\"q\"\n            type=\"text\"\n            required\n            aria-required=\"true\"\n            aria-label=\"search input\"\n            autocapitalize=\"off\"\n            formControlName=\"simpleQuery\"\n            matTooltip=\"Fill out this field\"\n            [matTooltipPosition]=\"'above'\"\n            [matTooltipDisabled]=\"true\"\n            [attr.aria-invalid]=\"isSubmitted && simpleQuery.invalid\"\n        />\n        <label for=\"q\" data-testid=\"label\">{{\n            config.scope === 'local'\n                ? 'Books, media, special collections and more'\n                : 'Ebooks, articles, journals, databases, streaming media and more'\n        }}</label>\n        <button\n            type=\"submit\"\n            aria-label=\"search\"\n            data-testid=\"searchBtn\"\n            [ngClass]=\"{ ensign: config.institution === 'ensign' }\"\n        >\n            <span class=\"material-symbols-outlined ss-icon\"> search </span>\n        </button>\n    </form>\n\n    @if (simpleQuery.value) {\n        <button id=\"clear\" (click)=\"clearQuery()\" data-testid=\"clearBtn\">\n            <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n        </button>\n    }\n</div>\n", styles: ["a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}.ss-container{position:relative}form{display:flex}.ss-icon{font-size:1em}button[type=submit]{background:#fff;border-radius:0 4px 4px 0;margin:0;width:3em;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:color .2s,background-color .2s}button[type=submit] .ss-icon{color:#0047ba;font-size:1.7em}button[type=submit]:hover .ss-icon{color:#6892ca}button[type=submit].ensign .ss-icon{color:#2b6042}button[type=submit].ensign .ss-icon:hover{color:#357551}#clear{position:absolute;right:3em;top:0%;height:100%;display:flex;justify-content:center;align-items:center;padding:0 0 0 .6rem}#clear .ss-icon{height:auto;color:#acacac;transition:color ease-in-out .05s}#clear:hover .ss-icon{color:#666}input[type=text]{background-color:#fff;color:#000;font-family:inherit;border:none;font-weight:600;margin:0;overflow:hidden;cursor:text;width:calc(100% - 3em);font-size:1em;border-radius:4px 0 0 4px;padding:.56em 2em .56em .56em}input[type=text]:focus{outline:none}input[type=text]:valid+label,input[type=text]:focus+label{font-size:.75em;top:-.8em;padding-top:0;padding-bottom:0;pointer-events:none;margin-top:0;margin-left:.56em;cursor:default}input[type=text]:valid+label:before,input[type=text]:focus+label:before{opacity:1}label{cursor:text;transition:all .1s ease-in-out;position:absolute;padding:.5em .28em;margin-left:.28em;left:0;color:#707070;z-index:1;max-width:calc(100% - 3.4em);white-space:nowrap;line-height:normal;overflow:hidden;text-overflow:ellipsis;border-radius:4px}label:before{transition:all .1s ease-in-out;background-color:#fff;content:\"\";position:absolute;inset:0;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SimpleSearchComponent, decorators: [{
             type: Component,
@@ -1551,5 +1733,5 @@ const isSearchScope = (scope) => searchScopeValues.includes(scope);
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, HbllHeaderComponent, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, SsSearchBarComponent, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
+export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, HbllHeaderComponent, ImpersonateModalComponent, ImpersonateUserPipe, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, SsSearchBarComponent, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
 //# sourceMappingURL=byuhbll-components.mjs.map