@byuhbll/components 4.0.0-alpha.7 → 4.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -686,7 +686,7 @@ class HbllHeaderComponent {
|
|
|
686
686
|
this.setMobileSidebarHeight();
|
|
687
687
|
}
|
|
688
688
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
689
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", endImpersonation: "endImpersonation" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LibraryHoursPipe, name: "libraryHours" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NavBarComponent, selector: "lib-nav-bar", inputs: ["height"] }, { kind: "component", type: ImpersonateModalComponent, selector: "lib-impersonate-modal", inputs: ["showModal", "oidcBaseUri", "oidcDefaultIdp", "accessTokenPayload"], outputs: ["dismiss", "init"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
|
|
689
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: false, transformFunction: null }, oidcBaseUri: { classPropertyName: "oidcBaseUri", publicName: "oidcBaseUri", isSignal: true, isRequired: false, transformFunction: null }, oidcDefaultIdp: { classPropertyName: "oidcDefaultIdp", publicName: "oidcDefaultIdp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout", endImpersonation: "endImpersonation" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;font-size:1em}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: LibraryHoursPipe, name: "libraryHours" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NavBarComponent, selector: "lib-nav-bar", inputs: ["height"] }, { kind: "component", type: ImpersonateModalComponent, selector: "lib-impersonate-modal", inputs: ["showModal", "oidcBaseUri", "oidcDefaultIdp", "accessTokenPayload"], outputs: ["dismiss", "init"] }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
|
|
690
690
|
}
|
|
691
691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, decorators: [{
|
|
692
692
|
type: Component,
|
|
@@ -698,7 +698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
698
698
|
NavBarComponent,
|
|
699
699
|
ExpandCollapseComponent,
|
|
700
700
|
ImpersonateModalComponent,
|
|
701
|
-
], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"] }]
|
|
701
|
+
], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header role=\"banner\" class=\"wrapper\" #header [ngClass]=\"{ desktop: !isScreenSmall() }\">\n <a href=\"https://lib.byu.edu/\">\n <h1>\n <img\n src=\"https://media.lib.byu.edu/web-assets/images/2.0.0/byu-hbll-logo-full.svg\"\n alt=\"BYU Library Logo\"\n />\n </h1>\n </a>\n <div id=\"libraryInfo\" class=\"wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"wrapper\"\n data-testid=\"hoursBtn\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </button>\n @if (!isScreenSmall() && showLibraryHours) {\n <div\n @libHbllFadeInOut\n id=\"libraryHoursDropdown\"\n data-testid=\"libraryHoursDropdown\"\n >\n <section class=\"section\">\n <h2 class=\"header\">Regular Hours</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Monday - Friday</h3>\n <h3 class=\"item\">Saturday</h3>\n <h3 class=\"item\">Sunday</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - midnight</div>\n <div class=\"item\">8 a.m - midnight</div>\n <div class=\"item\">Closed*</div>\n </div>\n <div class=\"hours-note\">\n * Family history ONLY 4 p.m. - 8 p.m\n <ul>\n <li><span>No checkouts after 11:45 p.m.</span></li>\n <li>\n <span>All services closed 10:45 to noon on Tuesdays</span>\n </li>\n </ul>\n </div>\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"item\">{{ exception.exception_title }}</div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"section\">\n <h2 class=\"header\">Library Cafe</h2>\n <div class=\"detail\">\n <h3 class=\"item\">Bagel Bubble</h3>\n <h3 class=\"item\">Provecho</h3>\n </div>\n <div class=\"hours\">\n <div class=\"item\">7 a.m - 11 p.m.</div>\n <div class=\"item\">10:30 a.m - 2 p.m.</div>\n </div>\n </section>\n <a href=\"https:/lib.byu.edu/about/hours\"\n >See all hours\n <span class=\"material-symbols-outlined\"> chevron_right </span></a\n >\n </div>\n }\n </div>\n }\n <div id=\"accountInfo\" #accountInfo>\n <button\n (click)=\"isLoggedIn() ? (showAccountDropdown = !showAccountDropdown) : login.emit()\"\n class=\"wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"name\" data-testid=\"name\">{{\n isLoggedIn() ? name() : 'Login'\n }}</span>\n }\n @if (isLoggedIn()) {\n <span class=\"material-symbols-outlined\" data-testid=\"loginDropdown\">\n arrow_drop_down\n </span>\n }\n </button>\n @if (isLoggedIn() && showAccountDropdown) {\n <div @libHbllFadeInOut id=\"accountDropdown\" data-testid=\"accountDropdown\">\n <a href=\"https://lib.byu.edu/account\">My Account</a>\n <a href=\"https://lib.byu.edu/account\">My Items</a>\n <a href=\"https://lib.byu.edu/account/request\">Request an item</a>\n <a href=\"https://lib.byu.edu/account/saved\">Saved</a>\n <a href=\"https://lib.byu.edu/account/course\">Courses</a>\n <a href=\"https://lib.byu.edu/account/rooms\">Rooms</a>\n <a href=\"https://lib.byu.edu/account/preferences\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n href=\"https://lib.byu.edu/account/preferences\"\n (click)=\"showImpersonationModal = true; showAccountDropdown = false\"\n class=\"impersonate-btn\"\n >\n Impersonate\n </button>\n }\n <button (click)=\"logout.emit()\" data-testid=\"logout\">Logout</button>\n </div>\n }\n </div>\n @if (isScreenSmall()) {\n <div id=\"mobileNav\">\n <button class=\"wrapper\" data-testid=\"mobileNavBtn\" (click)=\"showNavBar = true\">\n <span class=\"material-symbols-outlined icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div id=\"navWrapper\" data-testid=\"mobileNav\" @libHbllSlideInOutRightLeft>\n <button\n id=\"closeMobileNavBtn\"\n class=\"wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"showNavBar = false\"\n >\n <span class=\"material-symbols-outlined icon\"> close </span>\n </button>\n <lib-nav-bar [height]=\"mobileSidebarHeight\" />\n </div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n href=\"https:/lib.byu.edu/about/hours\"\n class=\"wrapper\"\n data-testid=\"mobileHours\"\n >\n <ng-container *ngTemplateOutlet=\"hoursTextBlock\"></ng-container>\n </a>\n}\n\n<ng-template #hoursTextBlock>\n @if (libraryHours()) {\n <span class=\"material-symbols-outlined left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n\n<lib-impersonate-modal\n [showModal]=\"showImpersonationModal\"\n [oidcBaseUri]=\"oidcBaseUri()\"\n [oidcDefaultIdp]=\"oidcDefaultIdp()\"\n [accessTokenPayload]=\"accessTokenPayload()\"\n (dismiss)=\"showImpersonationModal = false\"\n (init)=\"showImpersonationModal = true\"\n></lib-impersonate-modal>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box}.wrapper{display:flex;align-items:center;font-size:1em}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.wrapper{width:100%;justify-content:center;padding:.2em}.icon,.left-icon{font-size:1.2em}.left-icon{margin-right:.4em}header{background-color:#002e5d;display:flex;align-items:center;position:relative}header a h1{font-size:100%;margin:0;height:1.8em}header a h1 img{height:100%;padding:0 0 0 .6em}header #libraryInfo{margin-left:auto;color:#fff}header #libraryInfo a,header #libraryInfo button{transition:color .2s ease-in-out;color:#fffc}header #libraryInfo a:hover,header #libraryInfo button:hover{color:#fff}header #libraryInfo #accountInfo button,header #libraryInfo #mobileNav button{padding:.8em .6em}header #libraryInfo #accountBtn .name{margin-left:.4em}header #libraryInfo #mobileNav{position:relative;z-index:11}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:absolute;width:100vw;top:0;right:0}header #libraryInfo #mobileNav #navWrapper #closeMobileNavBtn{background-color:#0047ba;margin-left:auto;padding-left:.9em}header #libraryInfo :last-child button{padding-right:1em!important}header #libraryInfo .icon{font-size:1.8em}header #libraryInfo #accountInfo{position:relative}header #libraryInfo #accountInfo #accountDropdown{font-size:1em;text-wrap:nowrap;position:absolute;background-color:#002e5d;top:100%;right:-32px;z-index:11;background-color:#233753}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .impersonate-btn:hover{color:#ca7ad1}header #libraryInfo #accountInfo #accountDropdown a,header #libraryInfo #accountInfo #accountDropdown button{display:block;width:100%;text-align:left;padding:.4em 1.2em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;border-bottom:1px solid rgba(255,255,255,.3)}header #libraryInfo #accountInfo #accountDropdown a:last-child,header #libraryInfo #accountInfo #accountDropdown button:last-child{margin-top:.4em;border-top:1px solid rgba(255,255,255,.3);padding-bottom:.6em}header #libraryInfo #accountInfo #accountDropdown:before{content:\"\";width:0;height:0;border-style:solid;border-width:0 .6em .6em .6em;border-color:transparent transparent hsl(214,41%,23%) transparent;position:absolute;bottom:100%;right:50%;transform:translate(50%);z-index:inherit}header.desktop{padding:0 2em}header.desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:11;background-color:#fff;border-radius:4px;border:1px solid #d2d2d2;position:absolute;color:#000;padding:2em;top:100%;max-width:400%;right:50%;transform:translate(50%);margin-top:.6em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section{display:grid;grid-template-columns:repeat(3,9em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section h2{margin:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note{grid-column:2/4;font-size:.8em;margin-top:1em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours-note ul li span{left:-8px;position:relative}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .header{font-weight:600;font-size:1.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail .item+.item,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours .item+.item{margin-top:.2em}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail h3,header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours h3{margin:0;font-size:inherit}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .detail{font-weight:600;white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .section .hours{white-space:nowrap}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.desktop #libraryInfo #accountInfo #accountDropdown{right:auto;left:50%;transform:translate(-50%)}button{background-color:transparent;border:none;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;padding:0}\n"] }]
|
|
702
702
|
}], propDecorators: { header: [{
|
|
703
703
|
type: ViewChild,
|
|
704
704
|
args: ['header']
|
|
@@ -872,11 +872,11 @@ class ImpersonationBannerComponent {
|
|
|
872
872
|
this.STATUSES = AccessStatus;
|
|
873
873
|
}
|
|
874
874
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
875
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonationBannerComponent, isStandalone: true, selector: "lib-impersonation-banner", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { endImpersonation: "endImpersonation" }, ngImport: i0, template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span class=\"material-symbols-outlined\">\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 class=\"material-symbols-outlined\">\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;box-sizing:content-box;border:none;position:fixed;z-index:6000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;box-sizing:border-box;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.status-tooltip{text-align:left;font-size:1.4em;padding:.8em;line-height:2em;width:100%;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.end-impersonation-button .exit-text{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: CopyTooltipComponent, selector: "lib-copy-tooltip", inputs: ["position", "copyText"] }] }); }
|
|
875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonationBannerComponent, isStandalone: true, selector: "lib-impersonation-banner", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { endImpersonation: "endImpersonation" }, ngImport: i0, template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-checkmark\"\n >\n check\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.blocked.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-blocked application-status\">\n <span class=\"material-symbols-outlined icon-warning\">\n warning\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.blocked.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n Blocked Applications\n <hr />\n @for (\n application of accountStatuses()!.blocked;\n track application.code\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-warning\"\n >\n warning\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.none.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-none application-status\">\n <span class=\"material-symbols-outlined icon-lock\">\n lock\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.none.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n No Account\n <hr />\n @for (\n application of accountStatuses()!.none;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-lock\"\n >\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:6000;font-size:1em}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.end-impersonation-button .exit-text{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: CopyTooltipComponent, selector: "lib-copy-tooltip", inputs: ["position", "copyText"] }] }); }
|
|
876
876
|
}
|
|
877
877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, decorators: [{
|
|
878
878
|
type: Component,
|
|
879
|
-
args: [{ standalone: true, imports: [CommonModule, CopyTooltipComponent], selector: 'lib-impersonation-banner', template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span class=\"material-symbols-outlined\">\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 class=\"material-symbols-outlined\">\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;box-sizing:content-box;border:none;position:fixed;z-index:6000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;box-sizing:border-box;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.status-tooltip{text-align:left;font-size:1.4em;padding:.8em;line-height:2em;width:100%;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.end-impersonation-button .exit-text{display:none}}\n"] }]
|
|
879
|
+
args: [{ standalone: true, imports: [CommonModule, CopyTooltipComponent], selector: 'lib-impersonation-banner', template: "@if (isImpersonating()) {\n <div class=\"banner-padding\"></div>\n <div class=\"top-banner\">\n <div class=\"banner-group profile-name-container\">\n <div class=\"profile-avatar\">\n <div class=\"profile-image\">\n <img\n [src]=\"userPhotoUrl()\"\n [alt]=\"userFullName()\"\n alt=\"user photo\"\n onerror=\"this.remove()\"\n />\n </div>\n <span class=\"material-symbols-outlined profile-icon\"> person </span>\n </div>\n <div class=\"profile-name-group\">\n <span class=\"soft\">Impersonating</span>\n <div class=\"profile-name-wrapper\">\n <span class=\"profile-name\">{{ userFullName() }}</span>\n @if (accountStatuses()) {\n <div class=\"application-status-bar\">\n @if (accountStatuses()!.ok.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-ok application-status\">\n <span class=\"material-symbols-outlined icon-checkmark\">\n check\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.ok.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n OK Applications\n <hr />\n @for (\n application of accountStatuses()!.ok;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-checkmark\"\n >\n check\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.blocked.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-blocked application-status\">\n <span class=\"material-symbols-outlined icon-warning\">\n warning\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.blocked.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n Blocked Applications\n <hr />\n @for (\n application of accountStatuses()!.blocked;\n track application.code\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-warning\"\n >\n warning\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (accountStatuses()!.none.length) {\n <div class=\"application-status-indicator\">\n <span class=\"application-status-none application-status\">\n <span class=\"material-symbols-outlined icon-lock\">\n lock\n </span>\n <span class=\"application-count\">{{\n accountStatuses()!.none.length\n }}</span>\n </span>\n <div class=\"status-tooltip-container\">\n <div class=\"status-tooltip\">\n No Account\n <hr />\n @for (\n application of accountStatuses()!.none;\n track application.label\n ) {\n <div class=\"application-status\">\n <span\n class=\"material-symbols-outlined icon-lock\"\n >\n lock\n </span>\n <span>{{ application.label }}</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"profile-details-container banner-group\">\n @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n <div class=\"profile-detail\">\n <span class=\"soft label\">{{ detail.key }}</span>\n <lib-copy-tooltip [copyText]=\"detail.value\">\n <div class=\"profile-detail-tag white-tag clickable\">\n {{ detail.value || 'Unknown' }}\n </div>\n </lib-copy-tooltip>\n </div>\n }\n </div>\n <div class=\"profile-details-container banner-group\">\n <div class=\"profile-detail\">\n <span class=\"soft label\">Status</span>\n <div class=\"multiple-detail-tags\">\n <div\n class=\"profile-detail-tag color-tag\"\n title=\"{{ employeeStatusDescription() }}\"\n >\n {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n @if (activityStatus()) {\n <span\n class=\"profile-status-circle\"\n [class.status-active]=\"activityStatus() === 'active'\"\n [class.status-inactive]=\"activityStatus() === 'inactive'\"\n [class.status-retired]=\"activityStatus() === 'retired'\"\n ></span>\n }\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n </div>\n <div class=\"profile-detail-tag color-tag\">\n {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"spacer\"></div>\n <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n <span class=\"material-symbols-outlined icon\"> close </span>\n <span class=\"exit-text\">Exit</span>\n </button>\n </div>\n @if (isRestricted()) {\n <div class=\"restricted-bar-padding\"></div>\n <div class=\"restricted-bar\">\n <span class=\"title\">restricted person</span>\n <span class=\"text\">\n If anyone asks about this person, you are instructed to respond,\n <span class=\"emphasize\">\"We have no records for this person.\"</span>\n </span>\n </div>\n }\n <div class=\"right-border\"></div>\n <div class=\"bottom-border\"></div>\n <div class=\"left-border\"></div>\n}\n", styles: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;border:none;position:fixed;box-sizing:border-box;z-index:6000;font-size:1em}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .profile-name{font-size:1.6em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.status-tooltip{text-align:left;padding:.8em;line-height:2em;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status [class*=icon-]{font-size:1.2em;margin-right:.2em}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.end-impersonation-button .exit-text{display:none}}\n"] }]
|
|
880
880
|
}], propDecorators: { endImpersonation: [{
|
|
881
881
|
type: Output
|
|
882
882
|
}] } });
|