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

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 (6) hide show
  1. package/esm2022/lib/hbll-header/hbll-header.component.mjs +11 -6
  2. package/esm2022/lib/impersonation-banner/impersonation-banner.component.mjs +3 -3
  3. package/fesm2022/byuhbll-components.mjs +12 -7
  4. package/fesm2022/byuhbll-components.mjs.map +1 -1
  5. package/lib/hbll-header/hbll-header.component.d.ts +3 -3
  6. package/package.json +1 -1
package/fesm2022/byuhbll-components.mjs CHANGED
@@ -3,7 +3,7 @@ import { CommonModule, DatePipe, LowerCasePipe } from '@angular/common';
3
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
- import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, ViewChildren, Pipe, Renderer2, viewChild, computed, HostListener, ElementRef, ViewEncapsulation } from '@angular/core';
6
+ import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, ViewChildren, Pipe, Renderer2, viewChild, HostListener, ElementRef, computed, ViewEncapsulation } from '@angular/core';
7
7
  import { trigger, transition, group, style, query, animateChild, animate } from '@angular/animations';
8
8
  import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
9
9
  import { map, of, switchMap, shareReplay, Subject, Subscription, combineLatest } from 'rxjs';
@@ -454,7 +454,8 @@ class HbllHeaderComponent {
454
454
  this.http = inject(HttpClient);
455
455
  this.bo = inject(BreakpointObserver);
456
456
  // --- API ---
457
- this.name = input('');
457
+ // TODO: Convert this to a signal input: https://github.com/angular/angular/issues/57755
458
+ this.name = '';
458
459
  this.showImpersonateButton = input(false);
459
460
  this.openImpersonationModal = new EventEmitter();
460
461
  this.login = new EventEmitter();
@@ -463,7 +464,6 @@ class HbllHeaderComponent {
463
464
  this.formatDateForHours = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
464
465
  this.accountInfoEl = viewChild('accountInfo');
465
466
  this.hoursEl = viewChild('hours');
466
- this.isLoggedIn = computed(() => !!this.name());
467
467
  // Hours
468
468
  this.libraryHours = toSignal(this.http.get(LIBRARY_HOURS_API_URL));
469
469
  this.hoursExceptions$ = of(null).pipe(map(() => {
@@ -485,6 +485,9 @@ class HbllHeaderComponent {
485
485
  this.setMobileSidebarHeight = () => (this.mobileSidebarHeight =
486
486
  window.innerHeight - this.header.nativeElement.getBoundingClientRect().height);
487
487
  }
488
+ get isLoggedIn() {
489
+ return !!this.name;
490
+ }
488
491
  ngAfterViewInit() {
489
492
  this.r2.listen('window', 'click', (e) => {
490
493
  if (!this.accountInfoEl()?.nativeElement.contains(e.target))
@@ -498,7 +501,7 @@ class HbllHeaderComponent {
498
501
  this.setMobileSidebarHeight();
499
502
  }
500
503
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
501
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showImpersonateButton: { classPropertyName: "showImpersonateButton", publicName: "showImpersonateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openImpersonationModal: "openImpersonationModal", login: "login", logout: "logout" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;font-size:1em}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LibraryHoursPipe, name: "libraryHours" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NavBarComponent, selector: "lib-nav-bar", inputs: ["height"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
504
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, showImpersonateButton: { classPropertyName: "showImpersonateButton", publicName: "showImpersonateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openImpersonationModal: "openImpersonationModal", login: "login", logout: "logout" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{ isLoggedIn ? name : 'Login' }}</span>\n }\n @if (isLoggedIn) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;font-size:1em}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LibraryHoursPipe, name: "libraryHours" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NavBarComponent, selector: "lib-nav-bar", inputs: ["height"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
502
505
  }
503
506
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, decorators: [{
504
507
  type: Component,
@@ -509,10 +512,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
509
512
  CommonModule,
510
513
  NavBarComponent,
511
514
  ExpandCollapseComponent,
512
- ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;font-size:1em}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"] }]
515
+ ], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{ isLoggedIn ? name : 'Login' }}</span>\n }\n @if (isLoggedIn) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;font-size:1em}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"] }]
513
516
  }], propDecorators: { header: [{
514
517
  type: ViewChild,
515
518
  args: ['header']
519
+ }], name: [{
520
+ type: Input
516
521
  }], openImpersonationModal: [{
517
522
  type: Output
518
523
  }], login: [{
@@ -860,11 +865,11 @@ class ImpersonationBannerComponent {
860
865
  this.STATUSES = AccessStatus;
861
866
  }
862
867
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
863
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonationBannerComponent, isStandalone: true, selector: "lib-impersonation-banner", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null }, personBaseUri: { classPropertyName: "personBaseUri", publicName: "personBaseUri", isSignal: true, isRequired: false, transformFunction: null }, libraryApiBaseUri: { classPropertyName: "libraryApiBaseUri", publicName: "libraryApiBaseUri", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endImpersonation: "endImpersonation" }, ngImport: i0, template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-checkmark\"\n >\n check\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.blocked.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-blocked application-status\">\n <span class=\"material-symbols-outlined icon-warning\">\n warning\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.blocked.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n Blocked Applications\n <hr />\n @for (\n application of accountStatuses()!.blocked;\n track application.code\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-warning\"\n >\n warning\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.none.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-none application-status\">\n <span class=\"material-symbols-outlined icon-lock\">\n lock\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.none.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n No Account\n <hr />\n @for (\n application of accountStatuses()!.none;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-lock\"\n >\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: CopyTooltipComponent, selector: "lib-copy-tooltip", inputs: ["position", "copyText"] }] }); }
868
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonationBannerComponent, isStandalone: true, selector: "lib-impersonation-banner", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null }, personBaseUri: { classPropertyName: "personBaseUri", publicName: "personBaseUri", isSignal: true, isRequired: false, transformFunction: null }, libraryApiBaseUri: { classPropertyName: "libraryApiBaseUri", publicName: "libraryApiBaseUri", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endImpersonation: "endImpersonation" }, ngImport: i0, template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\" data-testid=\"banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-checkmark\"\n >\n check\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.blocked.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-blocked application-status\">\n <span class=\"material-symbols-outlined icon-warning\">\n warning\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.blocked.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n Blocked Applications\n <hr />\n @for (\n application of accountStatuses()!.blocked;\n track application.code\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-warning\"\n >\n warning\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.none.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-none application-status\">\n <span class=\"material-symbols-outlined icon-lock\">\n lock\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.none.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n No Account\n <hr />\n @for (\n application of accountStatuses()!.none;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-lock\"\n >\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: CopyTooltipComponent, selector: "lib-copy-tooltip", inputs: ["position", "copyText"] }] }); }
864
869
  }
865
870
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, decorators: [{
866
871
  type: Component,
867
- args: [{ standalone: true, imports: [CommonModule, CopyTooltipComponent], selector: 'lib-impersonation-banner', template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-checkmark\"\n >\n check\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.blocked.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-blocked application-status\">\n <span class=\"material-symbols-outlined icon-warning\">\n warning\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.blocked.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n Blocked Applications\n <hr />\n @for (\n application of accountStatuses()!.blocked;\n track application.code\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-warning\"\n >\n warning\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.none.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-none application-status\">\n <span class=\"material-symbols-outlined icon-lock\">\n lock\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.none.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n No Account\n <hr />\n @for (\n application of accountStatuses()!.none;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-lock\"\n >\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"] }]
872
+ args: [{ standalone: true, imports: [CommonModule, CopyTooltipComponent], selector: 'lib-impersonation-banner', template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\" data-testid=\"banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-checkmark\"\n >\n check\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.blocked.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-blocked application-status\">\n <span class=\"material-symbols-outlined icon-warning\">\n warning\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.blocked.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n Blocked Applications\n <hr />\n @for (\n application of accountStatuses()!.blocked;\n track application.code\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-warning\"\n >\n warning\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.none.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-none application-status\">\n <span class=\"material-symbols-outlined icon-lock\">\n lock\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.none.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n No Account\n <hr />\n @for (\n application of accountStatuses()!.none;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-lock\"\n >\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: ["*{box-sizing:border-box}.top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:1000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3;font-size:1em}.top-banner .banner-group{display:flex;margin-right:1.6em}.top-banner .profile-details-container{height:2.4em;display:flex;min-width:0}.top-banner .profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0;position:relative;z-index:6001}.top-banner .profile-details-container .profile-detail .label{font-size:.75em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.top-banner .profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .profile-status-circle{font-size:1em;width:10px;height:10px;border-radius:50%;flex-shrink:0}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-active{background-color:#00e732}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-retired{background-color:#ffba38}.top-banner .profile-details-container .profile-detail .profile-detail-tag .status-inactive{border:2px white solid}.top-banner .profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.top-banner .profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.top-banner .profile-name-container{display:flex;align-items:center}.top-banner .profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.top-banner .profile-name-container .profile-avatar .profile-icon{margin:-.25em}.top-banner .profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.top-banner .profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.top-banner .profile-name-container .profile-avatar .profile-image:empty{display:none}.top-banner .profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.top-banner .profile-name-container .profile-name-group{font-size:1em;font-weight:600}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em;line-height:1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{display:block}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.top-banner .profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.top-banner .soft{opacity:.7}.top-banner .end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.top-banner .end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.top-banner .end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.top-banner .spacer{flex-grow:1}.top-banner .shadow{box-shadow:#0003 0 2px 10px}.top-banner .white-tag{cursor:pointer;background-color:#ffffff26}.top-banner .white-tag:hover{background-color:#614979}.top-banner .color-tag:nth-of-type(1){background-color:#26acffcc}.top-banner .color-tag:nth-of-type(2){background-color:#9394ffcc}.top-banner .color-tag:nth-of-type(3){background-color:#a28ceecc}.top-banner .status-tooltip-container{color:#fff;background-color:#2e2e2e;display:none;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.top-banner .status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.top-banner .status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.top-banner .status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.top-banner .status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.top-banner .status-tooltip .application-status .icon-checkmark{color:#87ed8f}.top-banner .status-tooltip .application-status .icon-warning{color:#e9ce34}.top-banner .status-tooltip .application-status .icon-lock{color:#f4785b}@media screen and (max-width: 1100px){.top-banner .profile-name-group .soft{font-size:.7em}.top-banner .profile-name-group .profile-name{font-size:1.3em}.top-banner .end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.top-banner .end-impersonation-button .icon{margin:0}.top-banner .end-impersonation-button .exit-text{display:none}}\n"] }]
868
873
  }], propDecorators: { endImpersonation: [{
869
874
  type: Output
870
875
  }] } });