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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/esm2022/lib/copy-tooltip/copy-tooltip.component.mjs +49 -0
  2. package/esm2022/lib/hbll-header/hbll-header.component.mjs +3 -3
  3. package/esm2022/lib/hbll-header/impersonate-modal/impersonate-modal.component.mjs +2 -2
  4. package/esm2022/lib/hbll-header/models/application-access.mjs +7 -0
  5. package/esm2022/lib/hbll-header/models/person-summary.mjs +15 -0
  6. package/esm2022/lib/impersonation-banner/impersonation-banner.component.mjs +129 -0
  7. package/esm2022/public-api.mjs +2 -1
  8. package/fesm2022/byuhbll-components.mjs +176 -8
  9. package/fesm2022/byuhbll-components.mjs.map +1 -1
  10. package/lib/copy-tooltip/copy-tooltip.component.d.ts +12 -0
  11. package/lib/hbll-header/models/application-access.d.ts +15 -0
  12. package/lib/hbll-header/models/person-summary.d.ts +33 -0
  13. package/lib/impersonation-banner/impersonation-banner.component.d.ts +30 -0
  14. package/package.json +1 -1
  15. package/public-api.d.ts +1 -0
package/fesm2022/byuhbll-components.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i1 from '@angular/common';
2
2
  import { CommonModule, DatePipe, LowerCasePipe } from '@angular/common';
3
- import { toSignal } from '@angular/core/rxjs-interop';
3
+ import { toSignal, toObservable } from '@angular/core/rxjs-interop';
4
4
  import { HttpClient } from '@angular/common/http';
5
5
  import * as i0 from '@angular/core';
6
6
  import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, ViewChildren, Pipe, ElementRef, HostListener, Renderer2, viewChild, computed, ViewEncapsulation } from '@angular/core';
@@ -12,7 +12,7 @@ import { FormBuilder, Validators, ReactiveFormsModule, FormControl, NonNullableF
12
12
  import { switchMap, startWith, catchError, tap, map as map$1, filter } from 'rxjs/operators';
13
13
  import urlcat from 'urlcat';
14
14
  import { jwtDecode } from 'jwt-decode';
15
- import * as i3$1 from '@angular/material/tooltip';
15
+ import * as i1$1 from '@angular/material/tooltip';
16
16
  import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
17
17
  import { MatIconModule } from '@angular/material/icon';
18
18
  import * as i4 from '@angular/material/autocomplete';
@@ -590,7 +590,7 @@ class ImpersonateModalComponent {
590
590
  set showModal(open) {
591
591
  this.isOpen = open;
592
592
  if (open) {
593
- // Set focus on search input shortly after openeing modal so user notices
593
+ // Set focus on search input shortly after opening modal so user notices
594
594
  // the input receiving focus.
595
595
  setTimeout(() => this.eref.nativeElement.querySelector('#searchInput')?.focus(), 250);
596
596
  }
@@ -686,7 +686,7 @@ class HbllHeaderComponent {
686
686
  this.setMobileSidebarHeight();
687
687
  }
688
688
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
689
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", endImpersonation: "endImpersonation" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LibraryHoursPipe, name: "libraryHours" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NavBarComponent, selector: "lib-nav-bar", inputs: ["height"] }, { kind: "component", type: ImpersonateModalComponent, selector: "lib-impersonate-modal", inputs: ["showModal", "oidcBaseUri", "oidcDefaultIdp", "accessTokenPayload"], outputs: ["dismiss", "init"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
689
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", endImpersonation: "endImpersonation" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;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"] }, { kind: "component", type: ImpersonateModalComponent, selector: "lib-impersonate-modal", inputs: ["showModal", "oidcBaseUri", "oidcDefaultIdp", "accessTokenPayload"], outputs: ["dismiss", "init"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
690
690
  }
691
691
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, decorators: [{
692
692
  type: Component,
@@ -698,7 +698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
698
698
  NavBarComponent,
699
699
  ExpandCollapseComponent,
700
700
  ImpersonateModalComponent,
701
- ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"] }]
701
+ ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;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"] }]
702
702
  }], propDecorators: { header: [{
703
703
  type: ViewChild,
704
704
  args: ['header']
@@ -713,6 +713,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
713
713
  args: ['window:resize', ['$event']]
714
714
  }] } });
715
715
 
716
+ var AccessStatus;
717
+ (function (AccessStatus) {
718
+ AccessStatus["OK"] = "ok";
719
+ AccessStatus["BLOCKED"] = "blocked";
720
+ AccessStatus["NONE"] = "none";
721
+ })(AccessStatus || (AccessStatus = {}));
722
+
723
+ class CopyTooltipComponent {
724
+ constructor() {
725
+ this.position = 'below';
726
+ this.clipboardCopyMessage = 'Copy';
727
+ this.copyToClipboard = async (text) => {
728
+ // Ensure the tooltip doesn't disappear when button is clicked
729
+ this.tooltip.show();
730
+ if (text) {
731
+ try {
732
+ await navigator.clipboard.writeText(text).then(() => {
733
+ this.clipboardCopyMessage = 'Copied!';
734
+ });
735
+ }
736
+ catch {
737
+ this.clipboardCopyMessage = 'Failed to copy';
738
+ }
739
+ }
740
+ else
741
+ this.clipboardCopyMessage = 'Nothing to copy!';
742
+ };
743
+ this.handleMouseLeave = () => {
744
+ // Manually hide in case the user hovers over the tooltip
745
+ this.tooltip.hide();
746
+ // Delay to account for tooltip animation
747
+ setTimeout(() => {
748
+ this.clipboardCopyMessage = 'Copy';
749
+ }, 100);
750
+ };
751
+ }
752
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CopyTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
753
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CopyTooltipComponent, isStandalone: true, selector: "lib-copy-tooltip", inputs: { position: "position", copyText: "copyText" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<div\n (click)=\"copyToClipboard(copyText)\"\n [matTooltip]=\"clipboardCopyMessage\"\n [matTooltipPosition]=\"position\"\n (mouseleave)=\"handleMouseLeave()\"\n data-testid=\"tooltip\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
754
+ }
755
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CopyTooltipComponent, decorators: [{
756
+ type: Component,
757
+ args: [{ selector: 'lib-copy-tooltip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div\n (click)=\"copyToClipboard(copyText)\"\n [matTooltip]=\"clipboardCopyMessage\"\n [matTooltipPosition]=\"position\"\n (mouseleave)=\"handleMouseLeave()\"\n data-testid=\"tooltip\"\n>\n <ng-content></ng-content>\n</div>\n" }]
758
+ }], propDecorators: { position: [{
759
+ type: Input
760
+ }], copyText: [{
761
+ type: Input
762
+ }], tooltip: [{
763
+ type: ViewChild,
764
+ args: [MatTooltip]
765
+ }] } });
766
+
767
+ const USER_PHOTO_URL = 'https://y.byu.edu/ry/ae/prod/person/cgi/personPhoto.cgi?n=';
768
+ const PERSON_SUMMARY_PATH = '/summary/:libraryId/';
769
+ const PERSON_BASE_URI = 'https://apps.lib.byu.edu/person/v2/';
770
+ const INDEPENDENT_STUDY_RESPONSE_PATH = '/independent-study/:libraryId/';
771
+ const PATRON_ACCOUNTS_PATH = '/patron/accounts';
772
+ const LIBRARY_API_BASE_URI = 'https://apps.lib.byu.edu/v1';
773
+ class ImpersonationBannerComponent {
774
+ constructor() {
775
+ this.http = inject(HttpClient);
776
+ this.accessTokenPayload = input.required();
777
+ this.endImpersonation = new EventEmitter();
778
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
779
+ this.parsedToken = computed(() => this.accessTokenPayload().token ? jwtDecode(this.accessTokenPayload().token) : {});
780
+ this.isImpersonating = computed(() => !!this.parsedToken()['impersonator']);
781
+ this.libraryId = computed(() => this.parsedToken()['library_id']);
782
+ this.user = toSignal(combineLatest([toObservable(this.libraryId), toObservable(this.isImpersonating)]).pipe(switchMap(([libraryId, isImpersonating]) => libraryId && isImpersonating
783
+ ? this.http.get(urlcat(PERSON_BASE_URI, PERSON_SUMMARY_PATH, {
784
+ libraryId,
785
+ }), {
786
+ headers: {
787
+ Authorization: `Bearer ${this.accessTokenPayload().token}`,
788
+ },
789
+ })
790
+ : of(null))));
791
+ this.userFullName = computed(() => this.parsedToken()['given_name']
792
+ ? `${this.parsedToken()['given_name']} ${this.parsedToken()['family_name']}`
793
+ : 'Unknown');
794
+ this.isRestricted = computed(() => this.user()?.restricted);
795
+ this.userInfoTabs = computed(() => new Map([
796
+ ['Net ID', this.parsedToken()['net_id'] ?? ''],
797
+ ['BYU ID', this.parsedToken()['byu_id'] ?? ''],
798
+ ['Email', this.parsedToken()['email'] ?? ''],
799
+ ]));
800
+ this.userPhotoUrl = computed(() => this.parsedToken()['net_id'] ? USER_PHOTO_URL + this.parsedToken()['net_id'] : '');
801
+ this.activityStatus = computed(() => {
802
+ if (this.user()?.is_retired)
803
+ return 'retired';
804
+ else if (this.user()?.is_employee)
805
+ return 'active';
806
+ else if (this.user()?.primary_position_type)
807
+ return 'inactive';
808
+ return null;
809
+ });
810
+ this.employeeStatusDescription = computed(() => {
811
+ if (!this.user()) {
812
+ return null;
813
+ }
814
+ let description = '';
815
+ if (this.user().is_retired) {
816
+ description = 'Retired';
817
+ }
818
+ else if (this.user().is_employee) {
819
+ description = 'Active';
820
+ }
821
+ else if (this.user().primary_position_type) {
822
+ description = 'Inactive';
823
+ }
824
+ if (this.user().primary_position_type_display) {
825
+ description += ` ${this.user().primary_position_type_display} Employee`;
826
+ }
827
+ return description ?? null;
828
+ });
829
+ this.independentStudyStatus = toSignal(combineLatest([toObservable(this.libraryId), toObservable(this.isImpersonating)]).pipe(switchMap(([libraryId, isImpersonating]) => libraryId && isImpersonating
830
+ ? this.http
831
+ .get(urlcat(PERSON_BASE_URI, INDEPENDENT_STUDY_RESPONSE_PATH, {
832
+ libraryId,
833
+ }), {
834
+ headers: {
835
+ Authorization: `Bearer ${this.accessTokenPayload().token}`,
836
+ },
837
+ })
838
+ .pipe(map$1((response) => response?.is_enrolled))
839
+ : of(null))));
840
+ this.accountStatuses = toSignal(toObservable(this.isImpersonating).pipe(switchMap((isImpersonating) => {
841
+ if (!isImpersonating) {
842
+ return of(null);
843
+ }
844
+ return this.http
845
+ .get(urlcat(LIBRARY_API_BASE_URI, PATRON_ACCOUNTS_PATH), {
846
+ headers: {
847
+ Authorization: `Bearer ${this.accessTokenPayload().token}`,
848
+ },
849
+ })
850
+ .pipe(map$1((accounts) => {
851
+ const accountStatuses = {
852
+ ok: [],
853
+ blocked: [],
854
+ none: [],
855
+ };
856
+ Object.values(accounts.applications).forEach((app) => {
857
+ switch (app.access) {
858
+ case AccessStatus.OK:
859
+ accountStatuses.ok.push(app);
860
+ break;
861
+ case AccessStatus.BLOCKED:
862
+ accountStatuses.blocked.push(app);
863
+ break;
864
+ case AccessStatus.NONE:
865
+ accountStatuses.none.push(app);
866
+ break;
867
+ }
868
+ });
869
+ return accountStatuses;
870
+ }));
871
+ })));
872
+ this.STATUSES = AccessStatus;
873
+ }
874
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
875
+ 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 } }, 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: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:6000;font-size:1em}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}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.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}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.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}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.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}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.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}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.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}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.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}.status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.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}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.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"] }] }); }
876
+ }
877
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, decorators: [{
878
+ type: Component,
879
+ 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: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:6000;font-size:1em}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}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.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}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.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}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.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}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.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}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.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}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.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}.status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.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}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.end-impersonation-button .exit-text{display:none}}\n"] }]
880
+ }], propDecorators: { endImpersonation: [{
881
+ type: Output
882
+ }] } });
883
+
716
884
  const ADVANCED_SEARCH_QUALIFIER_MAP = {
717
885
  contains: 'contains',
718
886
  begins_with: 'begins with',
@@ -1341,7 +1509,7 @@ class AdvancedSearchComponent {
1341
1509
  return this.advancedSearchForm.controls.expandResults.controls.applyEquivalentSubjects;
1342
1510
  }
1343
1511
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1344
- 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: i3$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"] }] }); }
1512
+ 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"] }] }); }
1345
1513
  }
1346
1514
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
1347
1515
  type: Component,
@@ -1423,7 +1591,7 @@ class SimpleSearchComponent {
1423
1591
  this.subscription.unsubscribe();
1424
1592
  }
1425
1593
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SimpleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1426
- 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: i3$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"] }] }); }
1594
+ 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"] }] }); }
1427
1595
  }
1428
1596
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SimpleSearchComponent, decorators: [{
1429
1597
  type: Component,
@@ -1572,5 +1740,5 @@ const isSearchScope = (scope) => searchScopeValues.includes(scope);
1572
1740
  * Generated bundle index. Do not edit.
1573
1741
  */
1574
1742
 
1575
- export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, HbllHeaderComponent, LIBRARY_HOURS_API_URL, SsSearchBarComponent, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
1743
+ export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, HbllHeaderComponent, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, SsSearchBarComponent, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
1576
1744
  //# sourceMappingURL=byuhbll-components.mjs.map