@byuhbll/components 4.5.1-beta-1 → 4.5.2
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.
- package/esm2022/lib/animations/animations.mjs +1 -19
- package/esm2022/lib/contact-utils.mjs +2 -2
- package/esm2022/lib/expand-collapse/expand-collapse.component.mjs +4 -4
- package/esm2022/lib/hbll-footer/hbll-footer.component.mjs +7 -8
- package/esm2022/lib/hbll-header/hbll-header.component.mjs +24 -11
- package/esm2022/lib/hbll-header/nav-bar-dropdown/nav-bar-dropdown.component.mjs +3 -3
- package/esm2022/lib/snackbar/snackbar.component.mjs +3 -3
- package/fesm2022/byuhbll-components.mjs +35 -41
- package/fesm2022/byuhbll-components.mjs.map +1 -1
- package/lib/animations/animations.d.ts +0 -1
- package/lib/contact-utils.d.ts +1 -1
- package/lib/hbll-footer/hbll-footer.component.d.ts +2 -2
- package/lib/hbll-header/hbll-header.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -44,24 +44,6 @@ const libHbllFadeIn = trigger('libHbllFadeIn', [
|
|
|
44
44
|
const libHbllFadeOut = trigger('libHbllFadeOut', [
|
|
45
45
|
transition(':leave', [animate('.15s ease-out', style({ opacity: '0' }))]),
|
|
46
46
|
]);
|
|
47
|
-
const libHbllSlideInOutRightLeft = trigger('libHbllSlideInOutRightLeft', [
|
|
48
|
-
transition(':enter', [
|
|
49
|
-
style({
|
|
50
|
-
transform: 'translateX({{xOffset}})',
|
|
51
|
-
}),
|
|
52
|
-
animate('200ms ease-in-out', style({
|
|
53
|
-
transform: 'translateX(0)',
|
|
54
|
-
})),
|
|
55
|
-
], { params: { xOffset: '100%' } }),
|
|
56
|
-
transition(':leave', [
|
|
57
|
-
style({
|
|
58
|
-
transform: 'translateX(0)',
|
|
59
|
-
}),
|
|
60
|
-
animate('200ms ease-in-out', style({
|
|
61
|
-
transform: 'translateX({{xOffset}})',
|
|
62
|
-
})),
|
|
63
|
-
], { params: { xOffset: '100%' } }),
|
|
64
|
-
]);
|
|
65
47
|
|
|
66
48
|
class ExpandCollapseComponent {
|
|
67
49
|
constructor() {
|
|
@@ -76,11 +58,11 @@ class ExpandCollapseComponent {
|
|
|
76
58
|
return this._isExpanded;
|
|
77
59
|
}
|
|
78
60
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ExpandCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
79
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ExpandCollapseComponent, isStandalone: true, selector: "lib-expand-collapse", inputs: { isExpanded: "isExpanded" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<div\n #contentRef\n [@libHbllExpandCollapse]=\"{\n value: isExpanded,\n params: { startHeight: heightOfContent },\n }\"\n class=\"hbll-expand-collapse-content-wrapper\"\n [ngClass]=\"{ 'hbll-expand-collapse-collapsed': !isExpanded }\"\n>\n <div
|
|
61
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ExpandCollapseComponent, isStandalone: true, selector: "lib-expand-collapse", inputs: { isExpanded: "isExpanded" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<div\n #contentRef\n data-testid=\"contentRef\"\n [@libHbllExpandCollapse]=\"{\n value: isExpanded,\n params: { startHeight: heightOfContent },\n }\"\n class=\"hbll-expand-collapse-content-wrapper\"\n [ngClass]=\"{ 'hbll-expand-collapse-collapsed': !isExpanded }\"\n>\n <div data-testid=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".hbll-expand-collapse-collapsed{height:0}.hbll-expand-collapse-content-wrapper{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [libHbllExpandCollapse], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
80
62
|
}
|
|
81
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ExpandCollapseComponent, decorators: [{
|
|
82
64
|
type: Component,
|
|
83
|
-
args: [{ selector: 'lib-expand-collapse', changeDetection: ChangeDetectionStrategy.OnPush, animations: [libHbllExpandCollapse
|
|
65
|
+
args: [{ selector: 'lib-expand-collapse', changeDetection: ChangeDetectionStrategy.OnPush, animations: [libHbllExpandCollapse], standalone: true, imports: [CommonModule], template: "<div\n #contentRef\n data-testid=\"contentRef\"\n [@libHbllExpandCollapse]=\"{\n value: isExpanded,\n params: { startHeight: heightOfContent },\n }\"\n class=\"hbll-expand-collapse-content-wrapper\"\n [ngClass]=\"{ 'hbll-expand-collapse-collapsed': !isExpanded }\"\n>\n <div data-testid=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".hbll-expand-collapse-collapsed{height:0}.hbll-expand-collapse-content-wrapper{overflow:hidden}\n"] }]
|
|
84
66
|
}], propDecorators: { contentRef: [{
|
|
85
67
|
type: ViewChild,
|
|
86
68
|
args: ['contentRef']
|
|
@@ -128,11 +110,11 @@ class NavBarDropdownComponent {
|
|
|
128
110
|
this.isOpen = false;
|
|
129
111
|
}
|
|
130
112
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarDropdownComponent, isStandalone: true, selector: "lib-nav-bar-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isSmallScreen: { classPropertyName: "isSmallScreen", publicName: "isSmallScreen", isSignal: true, isRequired: false, transformFunction: null }, isInteracting: { classPropertyName: "isInteracting", publicName: "isInteracting", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openEvent: "openEvent", hoverStarted: "hoverStarted" }, ngImport: i0, template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\" aria-haspopup=\"true\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n
|
|
113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarDropdownComponent, isStandalone: true, selector: "lib-nav-bar-dropdown", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isSmallScreen: { classPropertyName: "isSmallScreen", publicName: "isSmallScreen", isSignal: true, isRequired: false, transformFunction: null }, isInteracting: { classPropertyName: "isInteracting", publicName: "isInteracting", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openEvent: "openEvent", hoverStarted: "hoverStarted" }, ngImport: i0, template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\" aria-haspopup=\"true\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n <div [class.collapsed]=\"!isOpen\" [attr.inert]=\"!isOpen ? true : null\" class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\" [attr.inert]=\"!isOpen ? true : null\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </lib-expand-collapse>\n }\n</span>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".hbll-header-dropdown-wrapper.hbll-header-desktop button{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}.hbll-header-dropdown-wrapper.hbll-header-desktop button .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}.hbll-header-dropdown-wrapper.hbll-header-desktop button:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-dropdown-wrapper button{justify-content:flex-end;font-size:1.3em;color:#fff;display:flex;align-items:center;background-color:#0047ba;width:100%;padding:.6em;border-bottom:1px solid rgba(255,255,255,.3);border-left:none;border-right:none;border-top:none;white-space:nowrap;cursor:pointer}.hbll-header-dropdown-wrapper button .hbll-header-icon{margin-left:.2em}.hbll-header-dropdown-wrapper.hbll-header-desktop:hover button{background-color:#0047ba;color:#fff}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown{position:absolute;z-index:11;width:100%;min-width:10em;top:100%;left:0;height:auto;overflow:visible;background-color:#0047ba}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown.collapsed{left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ExpandCollapseComponent, selector: "lib-expand-collapse", inputs: ["isExpanded"] }, { 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"] }] }); }
|
|
132
114
|
}
|
|
133
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, decorators: [{
|
|
134
116
|
type: Component,
|
|
135
|
-
args: [{ selector: 'lib-nav-bar-dropdown', standalone: true, imports: [ExpandCollapseComponent, CommonModule], template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\" aria-haspopup=\"true\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n
|
|
117
|
+
args: [{ selector: 'lib-nav-bar-dropdown', standalone: true, imports: [ExpandCollapseComponent, CommonModule], template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n>\n <button (click)=\"handleClick()\" data-testid=\"btn\" aria-haspopup=\"true\">\n {{ title() }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n {{ 'keyboard_arrow_' + (isOpen ? 'up' : 'down') }}\n </span>\n </button>\n @if (!isSmallScreen()) {\n <div [class.collapsed]=\"!isOpen\" [attr.inert]=\"!isOpen ? true : null\" class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\" [attr.inert]=\"!isOpen ? true : null\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </lib-expand-collapse>\n }\n</span>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".hbll-header-dropdown-wrapper.hbll-header-desktop button{color:#002e5d;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:1.1em;font-weight:500;border:none;padding:.4em 1em;line-height:1.4em}.hbll-header-dropdown-wrapper.hbll-header-desktop button .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}.hbll-header-dropdown-wrapper.hbll-header-desktop button:hover{background-color:#0047ba;color:#fff}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-dropdown-wrapper button{justify-content:flex-end;font-size:1.3em;color:#fff;display:flex;align-items:center;background-color:#0047ba;width:100%;padding:.6em;border-bottom:1px solid rgba(255,255,255,.3);border-left:none;border-right:none;border-top:none;white-space:nowrap;cursor:pointer}.hbll-header-dropdown-wrapper button .hbll-header-icon{margin-left:.2em}.hbll-header-dropdown-wrapper.hbll-header-desktop:hover button{background-color:#0047ba;color:#fff}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown{position:absolute;z-index:11;width:100%;min-width:10em;top:100%;left:0;height:auto;overflow:visible;background-color:#0047ba}.hbll-header-dropdown-wrapper.hbll-header-desktop .hbll-header-dropdown.collapsed{left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}\n"] }]
|
|
136
118
|
}], propDecorators: { openEvent: [{
|
|
137
119
|
type: Output
|
|
138
120
|
}], hoverStarted: [{
|
|
@@ -579,15 +561,22 @@ class HbllHeaderComponent {
|
|
|
579
561
|
this.r2.setStyle(this.doc.body, 'overflow', 'hidden');
|
|
580
562
|
};
|
|
581
563
|
this.closeSidebarNav = () => {
|
|
582
|
-
|
|
583
|
-
this.
|
|
564
|
+
const navWrapper = this.navWrapper?.nativeElement;
|
|
565
|
+
const backdrop = this.backdrop?.nativeElement;
|
|
566
|
+
if (navWrapper) {
|
|
567
|
+
this.r2.addClass(navWrapper, 'is-closing');
|
|
568
|
+
this.r2.addClass(backdrop, 'is-closing');
|
|
569
|
+
navWrapper.addEventListener('animationend', () => {
|
|
570
|
+
this.showNavBar = false;
|
|
571
|
+
this.r2.removeClass(navWrapper, 'is-closing');
|
|
572
|
+
this.r2.removeClass(backdrop, 'is-closing');
|
|
573
|
+
this.r2.removeStyle(this.doc.body, 'overflow');
|
|
574
|
+
}, { once: true });
|
|
575
|
+
}
|
|
584
576
|
};
|
|
585
577
|
this.setMobileSidebarHeight = () => {
|
|
586
578
|
const headerHeight = this.header.nativeElement.getBoundingClientRect().height;
|
|
587
|
-
|
|
588
|
-
const bannerElement = document.querySelector('#beta-navigation-banner');
|
|
589
|
-
const bannerHeight = bannerElement ? bannerElement.getBoundingClientRect().height || 0 : 0;
|
|
590
|
-
this.mobileSidebarHeight = window.innerHeight - headerHeight - bannerHeight;
|
|
579
|
+
this.mobileSidebarHeight = window.innerHeight - headerHeight;
|
|
591
580
|
};
|
|
592
581
|
}
|
|
593
582
|
get isLoggedIn() {
|
|
@@ -600,7 +589,7 @@ class HbllHeaderComponent {
|
|
|
600
589
|
if (!this.hoursEl()?.nativeElement.contains(e.target))
|
|
601
590
|
this.showLibraryHours = false;
|
|
602
591
|
});
|
|
603
|
-
this.setMobileSidebarHeight();
|
|
592
|
+
Promise.resolve().then(() => this.setMobileSidebarHeight());
|
|
604
593
|
}
|
|
605
594
|
onResize() {
|
|
606
595
|
this.setMobileSidebarHeight();
|
|
@@ -618,7 +607,7 @@ class HbllHeaderComponent {
|
|
|
618
607
|
}
|
|
619
608
|
}
|
|
620
609
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
621
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, mainsitebaseurl: { classPropertyName: "mainsitebaseurl", publicName: "mainsitebaseurl", isSignal: false, isRequired: false, transformFunction: null }, showImpersonateButton: { classPropertyName: "showImpersonateButton", publicName: "showImpersonateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openImpersonationModal: "openImpersonationModal", login: "login", logout: "logout" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\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 <button (click)=\"focusMainContent()\" class=\"skip-link\">Skip to main content</button>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">8:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4:00 p.m. - 8:00 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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\"\n [attr.title]=\"exception.exception_title\"\n [attr.aria-label]=\"exception.exception_title\">\n {{ exception.exception_title | truncate:32:'...' }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:00 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m. - 2:00 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/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=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-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]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-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\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [@libHbllSlideInOutRightLeft]=\"{\n value: '',\n params: { xOffset: '400px' },\n }\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n @libHbllFadeInOut\n (click)=\"showNavBar = false\"\n class=\"hbll-nav-backdrop\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-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 hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;overflow:visible;margin-left:1rem;background:#fff;color:#00285b;font-size:1.5rem;font-weight:580;padding:.5rem 1rem;z-index:1000;text-decoration:none;border:.1875rem solid #0050b7;border-radius:.25rem;cursor:pointer}.skip-link:hover{color:#00285b;background-color:#e3edf8;border:.1875rem solid #e3edf8}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}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;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 .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}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 .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-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;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;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-top:.6em;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.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;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;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/-1;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-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: ["mainSiteBaseUrl", "height"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut] }); }
|
|
610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllHeaderComponent, isStandalone: true, selector: "lib-hbll-header", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, mainsitebaseurl: { classPropertyName: "mainsitebaseurl", publicName: "mainsitebaseurl", isSignal: false, isRequired: false, transformFunction: null }, showImpersonateButton: { classPropertyName: "showImpersonateButton", publicName: "showImpersonateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openImpersonationModal: "openImpersonationModal", login: "login", logout: "logout" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "accountInfoEl", first: true, predicate: ["accountInfo"], descendants: true, isSignal: true }, { propertyName: "hoursEl", first: true, predicate: ["hours"], descendants: true, isSignal: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "navWrapper", first: true, predicate: ["navWrapper"], descendants: true }, { propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\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 <button (click)=\"focusMainContent()\" class=\"skip-link\">Skip to main content</button>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">8:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4:00 p.m. - 8:00 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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\"\n [attr.title]=\"exception.exception_title\"\n [attr.aria-label]=\"exception.exception_title\">\n {{ exception.exception_title | truncate:32:'...' }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:00 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m. - 2:00 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/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=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-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]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-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\" [class.collapsed]=\"!showNavBar\">\n <button\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n <div\n #navWrapper\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [class.open]=\"showNavBar\"\n [attr.inert]=\"!showNavBar ? true : null\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n #backdrop\n (click)=\"closeSidebarNav()\"\n class=\"hbll-nav-backdrop\"\n [class.open]=\"showNavBar\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-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 hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;overflow:visible;margin-left:1rem;background:#fff;color:#00285b;font-size:1.5rem;font-weight:580;padding:.5rem 1rem;z-index:1000;text-decoration:none;border:.1875rem solid #0050b7;border-radius:.25rem;cursor:pointer}.skip-link:hover{color:#00285b;background-color:#e3edf8;border:.1875rem solid #e3edf8}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}.hbll-nav-backdrop.open{animation-name:fadeIn;animation-duration:.15s;animation-timing-function:ease-in;animation-fill-mode:forwards}.hbll-nav-backdrop.is-closing{animation-name:fadeOut;animation-duration:.15s;animation-timing-function:ease-out;animation-fill-mode:forwards}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}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.collapsed #navWrapper{left:-9999px;top:auto;overflow:hidden;width:1px;height:1px}header #libraryInfo #mobileNav.collapsed .hbll-nav-backdrop{display:none}header #libraryInfo #mobileNav.collapsed nav{left:-9999px;top:auto;overflow:hidden;width:1px;height:1px}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:fixed;top:0}header #libraryInfo #mobileNav #navWrapper.open{animation-name:slideInFromRight;animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}header #libraryInfo #mobileNav #navWrapper.is-closing{animation-name:slideOutToRight;animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}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 .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}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 .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-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;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;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-top:.6em;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.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;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;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/-1;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-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}@keyframes slideInFromRight{0%{transform:translate(calc(min(100vw,400px) - 55px))}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(min(100vw,400px))}}@keyframes fadeIn{0%{opacity:0}to{opacity:.3}}@keyframes fadeOut{0%{opacity:.3}to{opacity: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: ["mainSiteBaseUrl", "height"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], animations: [libHbllFadeInOut] }); }
|
|
622
611
|
}
|
|
623
612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllHeaderComponent, decorators: [{
|
|
624
613
|
type: Component,
|
|
@@ -630,10 +619,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
630
619
|
NavBarComponent,
|
|
631
620
|
ExpandCollapseComponent,
|
|
632
621
|
TruncatePipe,
|
|
633
|
-
], animations: [libHbllSlideInOutRightLeft, libHbllFadeInOut], template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\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 <button (click)=\"focusMainContent()\" class=\"skip-link\">Skip to main content</button>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">8:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4:00 p.m. - 8:00 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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\"\n [attr.title]=\"exception.exception_title\"\n [attr.aria-label]=\"exception.exception_title\">\n {{ exception.exception_title | truncate:32:'...' }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:00 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m. - 2:00 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/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=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-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]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-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\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n @if (showNavBar) {\n <div\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [@libHbllSlideInOutRightLeft]=\"{\n value: '',\n params: { xOffset: '400px' },\n }\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n @libHbllFadeInOut\n (click)=\"showNavBar = false\"\n class=\"hbll-nav-backdrop\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n }\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-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 hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;overflow:visible;margin-left:1rem;background:#fff;color:#00285b;font-size:1.5rem;font-weight:580;padding:.5rem 1rem;z-index:1000;text-decoration:none;border:.1875rem solid #0050b7;border-radius:.25rem;cursor:pointer}.skip-link:hover{color:#00285b;background-color:#e3edf8;border:.1875rem solid #e3edf8}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}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;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 .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}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 .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-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;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;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-top:.6em;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.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;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;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/-1;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-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"] }]
|
|
622
|
+
], animations: [libHbllFadeInOut], template: "<header\n role=\"banner\"\n class=\"hbll-header-wrapper\"\n #header\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n>\n <a [href]=\"mainsitebaseurl\">\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 <button (click)=\"focusMainContent()\" class=\"skip-link\">Skip to main content</button>\n <div id=\"libraryInfo\" class=\"hbll-header-wrapper\">\n @if (!isScreenSmall()) {\n <div #hours id=\"mainLibraryHours\" data-testid=\"desktopHours\">\n <button\n (click)=\"showLibraryHours = !showLibraryHours\"\n class=\"hbll-header-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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Regular Hours</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Monday - Friday</h3>\n <h3 class=\"hbll-header-item\">Saturday</h3>\n <h3 class=\"hbll-header-item\">Sunday</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">8:00 a.m. - 11:45 p.m.</div>\n <div class=\"hbll-header-item\">Closed*</div>\n </div>\n <div class=\"hbll-header-hours-note\">\n * Family history ONLY 4:00 p.m. - 8:00 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=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Upcoming Exceptions</h2>\n @if (hoursExceptions$ | async; as exceptions) {\n <div class=\"hbll-header-detail\" data-testid=\"exceptionsDetail\">\n @for (exception of exceptions; track exception.date) {\n <h3 class=\"hbll-header-item\">\n {{ exception.date | date: 'MMM. d, YYYY' }}\n </h3>\n } @empty {\n No upcoming exceptions\n }\n </div>\n <div class=\"hbll-header-hours\" data-testid=\"exceptionsHours\">\n @for (exception of exceptions; track exception.date) {\n <div class=\"hbll-header-item\"\n [attr.title]=\"exception.exception_title\"\n [attr.aria-label]=\"exception.exception_title\">\n {{ exception.exception_title | truncate:32:'...' }}\n </div>\n }\n </div>\n } @else {\n <div class=\"lib-spinner\" data-testid=\"exceptionsSpinner\"></div>\n }\n </section>\n <section class=\"hbll-header-section\">\n <h2 class=\"hbll-header-header\">Library Cafe</h2>\n <div class=\"hbll-header-detail\">\n <h3 class=\"hbll-header-item\">Bagel Bubble</h3>\n <h3 class=\"hbll-header-item\">Provecho</h3>\n </div>\n <div class=\"hbll-header-hours\">\n <div class=\"hbll-header-item\">7:00 a.m. - 11:00 p.m.</div>\n <div class=\"hbll-header-item\">10:30 a.m. - 2:00 p.m.</div>\n </div>\n </section>\n <a [href]=\"mainsitebaseurl + '/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=\"hbll-header-wrapper\"\n id=\"accountBtn\"\n data-testid=\"accountBtn\"\n >\n <span class=\"material-symbols-outlined hbll-header-left-icon\"> person </span>\n @if (!isScreenSmall()) {\n <span class=\"hbll-header-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]=\"mainsitebaseurl + '/account'\">My Account</a>\n <a [href]=\"mainsitebaseurl + '/account'\">My Items</a>\n <a [href]=\"mainsitebaseurl + '/account/request'\">Request an item</a>\n <a [href]=\"mainsitebaseurl + '/account/saved'\">Saved</a>\n <a [href]=\"mainsitebaseurl + '/account/course'\">Courses</a>\n <a [href]=\"mainsitebaseurl + '/account/rooms'\">Rooms</a>\n <a [href]=\"mainsitebaseurl + '/account/preferences'\">Preferences</a>\n @if (showImpersonateButton()) {\n <button\n (click)=\"openImpersonationModal.emit(); showAccountDropdown = false\"\n class=\"hbll-header-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\" [class.collapsed]=\"!showNavBar\">\n <button\n class=\"hbll-header-wrapper\"\n data-testid=\"mobileNavBtn\"\n (click)=\"openSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> menu </span>\n </button>\n <div\n #navWrapper\n id=\"navWrapper\"\n data-testid=\"mobileNav\"\n [class.open]=\"showNavBar\"\n [attr.inert]=\"!showNavBar ? true : null\"\n >\n <button\n id=\"closeMobileNavBtn\"\n class=\"hbll-header-wrapper\"\n data-testid=\"closeMobileNavBtn\"\n (click)=\"closeSidebarNav()\"\n >\n <span class=\"material-symbols-outlined hbll-header-icon\"> close </span>\n </button>\n <lib-nav-bar\n [mainSiteBaseUrl]=\"mainsitebaseurl\"\n [height]=\"mobileSidebarHeight\"\n />\n </div>\n <div\n #backdrop\n (click)=\"closeSidebarNav()\"\n class=\"hbll-nav-backdrop\"\n [class.open]=\"showNavBar\"\n data-testid=\"mobileNavBackdrop\"\n ></div>\n </div>\n }\n </div>\n</header>\n\n@if (!isScreenSmall()) {\n <div id=\"mainNav\">\n <lib-nav-bar [mainSiteBaseUrl]=\"mainsitebaseurl\" />\n </div>\n}\n@if (isScreenSmall()) {\n <a\n id=\"mobileLibraryHours\"\n [href]=\"mainsitebaseurl + '/about/hours'\"\n class=\"hbll-header-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 hbll-header-left-icon\"> schedule </span>\n {{\n libraryHours()?.is_closed\n ? 'CLOSED'\n : \"Today's hours: \" +\n (libraryHours()!.date | libraryHours: libraryHours()!.open_time) +\n ' - ' +\n (libraryHours()!.date | libraryHours: libraryHours()!.close_time)\n }}\n }\n</ng-template>\n", styles: [".lib-spinner{border:.3em solid #dfe9f7;border-top:.3em solid #4070b0;border-radius:100%;width:30px;height:30px;animation:loadingSpinnerAnimate 1s ease infinite;position:relative}@keyframes loadingSpinnerAnimate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}.hbll-header-wrapper{display:flex;align-items:center;font-size:1em}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;overflow:visible;margin-left:1rem;background:#fff;color:#00285b;font-size:1.5rem;font-weight:580;padding:.5rem 1rem;z-index:1000;text-decoration:none;border:.1875rem solid #0050b7;border-radius:.25rem;cursor:pointer}.skip-link:hover{color:#00285b;background-color:#e3edf8;border:.1875rem solid #e3edf8}.hbll-nav-backdrop{background-color:#000;opacity:.3;height:100vh;width:100vw;left:0;top:0;transform:translate(-100vw);position:absolute;z-index:-1}.hbll-nav-backdrop.open{animation-name:fadeIn;animation-duration:.15s;animation-timing-function:ease-in;animation-fill-mode:forwards}.hbll-nav-backdrop.is-closing{animation-name:fadeOut;animation-duration:.15s;animation-timing-function:ease-out;animation-fill-mode:forwards}#mobileLibraryHours{color:#141414;background-color:#e6e6e6;font-size:1em;min-height:2em}#mobileLibraryHours.hbll-header-wrapper{width:100%;justify-content:center;padding:.2em}.hbll-header-icon,.hbll-header-left-icon{font-size:1.2em}.hbll-header-left-icon{margin-right:.2em}header{background-color:#002e5d;display:flex;align-items:center}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.collapsed #navWrapper{left:-9999px;top:auto;overflow:hidden;width:1px;height:1px}header #libraryInfo #mobileNav.collapsed .hbll-nav-backdrop{display:none}header #libraryInfo #mobileNav.collapsed nav{left:-9999px;top:auto;overflow:hidden;width:1px;height:1px}header #libraryInfo #mobileNav #navWrapper{color:#fff;position:fixed;top:0}header #libraryInfo #mobileNav #navWrapper.open{animation-name:slideInFromRight;animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}header #libraryInfo #mobileNav #navWrapper.is-closing{animation-name:slideOutToRight;animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}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 .hbll-header-icon,header #libraryInfo .hbll-header-left-icon{font-size:1.6em}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 .hbll-header-impersonate-btn{color:#ca7ad1cc}header #libraryInfo #accountInfo #accountDropdown .hbll-header-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;font-size:1.1em}header #libraryInfo #accountInfo #accountDropdown a:first-child,header #libraryInfo #accountInfo #accountDropdown button:first-child{margin-bottom:.4em;padding-top:.6em;padding-bottom:.6em;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-top:.6em;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.hbll-header-desktop{padding:0 2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours{position:relative;margin-right:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown{z-index:12;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;margin-right:2rem}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section{display:grid;grid-template-columns:repeat(4,7.5em);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;margin-bottom:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section h2{margin:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note{grid-column:2/-1;font-size:.8em;margin-top:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul{list-style-type:disc;list-style-position:inside;margin-left:.8em;padding:0}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours-note ul li span{position:relative}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-header{font-weight:600;font-size:1em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{margin-top:.2em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail .hbll-header-item+.hbll-header-item,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours .hbll-header-item+.hbll-header-item{margin-top:.3em}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail h3,header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours h3{margin:0;font-size:inherit}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-detail{font-weight:600;white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown .hbll-header-section .hbll-header-hours{white-space:nowrap}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a{color:#4070b0;display:flex;align-items:center;float:right}header.hbll-header-desktop #libraryInfo #mainLibraryHours #libraryHoursDropdown a:hover{color:#6892ca}header.hbll-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}@keyframes slideInFromRight{0%{transform:translate(calc(min(100vw,400px) - 55px))}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}to{transform:translate(min(100vw,400px))}}@keyframes fadeIn{0%{opacity:0}to{opacity:.3}}@keyframes fadeOut{0%{opacity:.3}to{opacity:0}}\n"] }]
|
|
634
623
|
}], propDecorators: { header: [{
|
|
635
624
|
type: ViewChild,
|
|
636
625
|
args: ['header']
|
|
626
|
+
}], navWrapper: [{
|
|
627
|
+
type: ViewChild,
|
|
628
|
+
args: ['navWrapper']
|
|
629
|
+
}], backdrop: [{
|
|
630
|
+
type: ViewChild,
|
|
631
|
+
args: ['backdrop']
|
|
637
632
|
}], name: [{
|
|
638
633
|
type: Input
|
|
639
634
|
}], mainsitebaseurl: [{
|
|
@@ -792,7 +787,7 @@ const createContactForm = (fb) => fb.nonNullable.group({
|
|
|
792
787
|
message: ['', Validators.required],
|
|
793
788
|
status: [''],
|
|
794
789
|
});
|
|
795
|
-
const submitEmail = (payload, http, apiBaseUrl) => submitContactForm(payload, http, EMAIL_PATH, apiBaseUrl);
|
|
790
|
+
const submitEmail = (payload, byuid, http, apiBaseUrl) => submitContactForm({ ...payload, byuId: byuid }, http, EMAIL_PATH, apiBaseUrl);
|
|
796
791
|
const submitFeedback = (payload, http, apiBaseUrl) => submitContactForm({ ...payload, origin: location.href }, http, FEEDBACK_PATH, apiBaseUrl);
|
|
797
792
|
const submitContactForm = (payload, http, path, apiBaseUrl) => http.post(`${apiBaseUrl}/${path}`, payload);
|
|
798
793
|
const getUserStatusFromRoles = (roles) => {
|
|
@@ -823,6 +818,7 @@ class HbllFooterComponent {
|
|
|
823
818
|
// TODO: Convert these to signal inputs: https://github.com/angular/angular/issues/57755
|
|
824
819
|
this.mainsitebaseurl = 'https://lib.byu.edu';
|
|
825
820
|
this.libraryapibaseuri = 'https://api.lib.byu.edu/v1';
|
|
821
|
+
this.byuid = '';
|
|
826
822
|
this.date = new Date();
|
|
827
823
|
this.isSubmitted = false;
|
|
828
824
|
this.isLoading = false;
|
|
@@ -835,7 +831,7 @@ class HbllFooterComponent {
|
|
|
835
831
|
if (this.emailForm.invalid)
|
|
836
832
|
return;
|
|
837
833
|
this.isLoading = true;
|
|
838
|
-
submitEmail(this.emailForm.value, this.http, this.libraryapibaseuri).subscribe({
|
|
834
|
+
submitEmail(this.emailForm.value, this.byuid, this.http, this.libraryapibaseuri).subscribe({
|
|
839
835
|
error: () => {
|
|
840
836
|
this.hasConnectionError = true;
|
|
841
837
|
this.isLoading = false;
|
|
@@ -892,16 +888,12 @@ class HbllFooterComponent {
|
|
|
892
888
|
console.warn('Skip footer target not found on the page.');
|
|
893
889
|
}
|
|
894
890
|
}
|
|
895
|
-
setSessionCookie() {
|
|
896
|
-
document.cookie = `betaNavigationPreference=prod2; path=/`;
|
|
897
|
-
window.location.reload();
|
|
898
|
-
}
|
|
899
891
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
900
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllFooterComponent, isStandalone: true, selector: "lib-hbll-footer", inputs: { mainsitebaseurl: "mainsitebaseurl", libraryapibaseuri: "libraryapibaseuri", emailname: "emailname", emailemail: "emailemail", emailmessage: "emailmessage", emailstatus: "emailstatus" }, viewQueries: [{ propertyName: "emailDialog", first: true, predicate: ["emailDialog"], descendants: true }], ngImport: i0, template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <button class=\"skip-link-footer\" (click)=\"skipFooter()\" >Skip footer</button>\n <div class=\"hbll-footer-links\">\n <section aria-labelledby=\"footerContactHeading\">\n <h3 id=\"footerContactHeading\" >Contact</h3>\n <ul>\n <li>\n <address>\n P.O. Box 26800<br />\n Provo, UT 84602-6800\n </address>\n </li>\n <li>\n <a href=\"tel:801-422-6061\">\n <span class=\"material-symbols-outlined hbll-footer-icon\">\n phone_in_talk </span\n > <strong>Call</strong> (801) 422-6061\n </a>\n </li>\n <li>\n <a href=\"sms:801-623-6838\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> sms </span\n > <strong>Text</strong> (801) 623-6838\n </a>\n </li>\n <li>\n <button (click)=\"emailDialog.showModal()\" data-testid=\"emailUsBtn\" style=\"padding: 4px;\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> mail </span\n > \n <strong>Email us</strong>\n </button>\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerResourcesHeading\">\n <h3 id=\"footerResourcesHeading\">Resources</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/site-index/\"\n >A-Z Site Index</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/policies/\">Policies</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/location/\"\n >Parking & Directions</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://uac.byu.edu/accessibility-lab\"\n >Accessibility Resources</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://hr.lib.byu.edu/byu-library-jobs\"\n >Employment Opportunities</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerFriendsHeading\">\n <h3 id=\"footerFriendsHeading\">Friends in the Library</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"https://ctl.byu.edu\"\n >Center for Teaching and Learning</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://copyright.byu.edu\"\n >Copyright Licensing Office</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://facultycenter.byu.edu/aboutus\"\n >Faculty Center</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://dining.byu.edu/library-cafe\"\n >Library Cafe</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerConnectHeading\">\n <h3 id=\"footerConnectHeading\">Connect</h3>\n <ul class=\"hbll-footer-social-list\">\n <li>\n <a target=\"_blank\" href=\"https://www.facebook.com/byuhbll\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/facebook-color-round.svg\"\n alt=\"Facebook\"\n title=\"Facebook\"\n />\n </a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://www.instagram.com/byu_hbll/\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/instagram-color.svg\"\n alt=\"Instagram\"\n title=\"Instagram\"\n />\n </a>\n </li>\n </ul>\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n class=\"toggle toggle-off\"\n role=\"switch\"\n [attr.aria-checked]=\"false\"\n aria-label=\"Toggle Legacy View (off)\"\n (click)=\"setSessionCookie()\"\n >\n <span class=\"toggle-pill\">\n <span class=\"toggle-check\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 2\">\n <line x1=\"1\" y1=\"1\" x2=\"11\" y2=\"1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </span>\n <span class=\"toggle-text\">Toggle Legacy View<sup class=\"superstar\">\u2605</sup></span>\n </button>\n </div>\n <i class=\"toggle-subtext\"><sup class=\"superstar\">\u2605</sup>Available until 10/20/2025</i>\n </section>\n </div>\n <section class=\"hbll-footer-bottom\" aria-label=\"Bottom-most part of the footer\">\n <div class=\"hbll-footer-title\">\n <a href=\"https://byu.edu\" target=\"_blank\">BRIGHAM YOUNG UNIVERSITY</a>\n </div>\n <br />\n PROVO, UT 84602, USA | <a href=\"sms:801-422-6061\">(801) 422-6061</a>\n <br />© {{ date | date: 'yyyy' }}\n ALL RIGHTS RESERVED\n <div class=\"hbll-footer-privacy\">\n <a href=\"https://privacy.byu.edu/\" target=\"_blank\">Privacy Notice</a>\n |\n <span id=\"teconsent\"></span>\n </div>\n </section>\n </div>\n <div id=\"consent-banner\"></div>\n</footer>\n\n<dialog\n #emailDialog\n onmousedown=\"event.target === this && this.close()\"\n (close)=\"handleClose()\"\n data-testid=\"dialog\"\n>\n @if (!isEmailSent) {\n <form [formGroup]=\"emailForm\" (submit)=\"sendEmail()\" data-testid=\"form\">\n <div class=\"hbll-footer-email-top\">\n <h1>Email Us</h1>\n <button (click)=\"emailDialog.close()\" type=\"button\" data-testid=\"closeBtn\">\n <span class=\"material-symbols-outlined\"> close </span>\n </button>\n </div>\n <label for=\"hbllFooterEmailName\">Name</label>\n <input\n id=\"hbllFooterEmailName\"\n type=\"text\"\n formControlName=\"name\"\n data-testid=\"emailNameInput\"\n />\n <label for=\"hbllFooterEmailEmail\">\n Email (please provide if you would like a response)</label\n >\n <input\n id=\"hbllFooterEmailEmail\"\n type=\"text\"\n formControlName=\"email\"\n data-testid=\"emailEmailInput\"\n />\n <label for=\"hbllFooterEmailQuestionComment\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailQuestionComment\"\n type=\"text\"\n formControlName=\"message\"\n data-testid=\"emailMessageInput\"\n ></textarea>\n @if (isSubmitted && emailForm.controls.message.invalid) {\n <div\n class=\"hbll-footer-email-required hbll-footer-email-error\"\n data-testid=\"commentError\"\n >\n <span class=\"material-symbols-outlined hbll-footer-email-error-icon\">\n warning\n </span>\n <strong>Please fill out this field</strong>\n </div>\n }\n <label for=\"hbllFooterEmailStatus\">Role</label>\n <span class=\"hbll-footer-select-wrapper\">\n <select\n id=\"hbllFooterEmailStatus\"\n formControlName=\"status\"\n data-testid=\"emailStatusInput\"\n >\n <option selected value=\"\"></option>\n @for (status of userStatuses | slice: 1; track status) {\n <option [value]=\"status\">{{ status }}</option>\n }\n </select>\n </span>\n <div class=\"hbll-footer-email-bottom-bar\">\n @if (hasConnectionError) {\n <p class=\"hbll-footer-connection-error\" data-testid=\"connectionError\">\n <i>There was an error sending your email. Please try again later.</i>\n </p>\n }\n <button\n class=\"pill-btn--components\"\n type=\"submit\"\n [disabled]=\"isLoading\"\n data-testid=\"sendEmailBtn\"\n >\n Send\n </button>\n </div>\n </form>\n } @else {\n <div class=\"hbll-footer-email-success\" data-testid=\"successMessage\">\n <p>\n Your email was sent successfully. If you supplied your email address, we will get\n back to you shortly.<br />Thank you!\n </p>\n <button class=\"pill-btn--components\" (click)=\"emailDialog.close()\" type=\"button\">\n Close\n </button>\n </div>\n }\n</dialog>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap\";*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}dialog form input,dialog form textarea,dialog form select{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}dialog form input:focus,dialog form textarea:focus,dialog form select:focus{outline-color:#3a6093}dialog form .hbll-footer-select-wrapper{position:relative}dialog form .hbll-footer-select-wrapper select{cursor:pointer;padding-right:2em}dialog form .hbll-footer-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}button{border:none;background-color:transparent;font-size:1em}button :hover{cursor:pointer}.skip-link-footer{position:absolute;top:30px;left:30px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;border:3px solid #0050b7;border-radius:4px;cursor:pointer;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.skip-link-footer:focus{opacity:1;pointer-events:auto;transform:none}.skip-link-footer:hover{color:#00285b;background-color:#e3edf8;border-color:#e3edf8}footer{line-height:1.2em;background-color:#e6e6e6}footer a{padding:4px}footer ::ng-deep #consent-banner{z-index:11;position:fixed}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}footer .hbll-footer-wrapper .hbll-footer-links{max-width:90em;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;padding-bottom:2em;white-space:nowrap}footer .hbll-footer-wrapper .hbll-footer-links strong{font-weight:600}footer .hbll-footer-wrapper .hbll-footer-links address{font-style:normal}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-icon{font-size:2rem!important;margin-right:.2em;color:#002e5d}footer .hbll-footer-wrapper .hbll-footer-links section{padding:2em 1.8em 0;background-color:#e6e6e6;flex:1}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list{display:flex}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list .hbll-footer-social{height:1.5em;margin-right:1em}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list li{margin-bottom:0}footer .hbll-footer-wrapper h3{font-weight:600;color:#002e5d;font-size:1.4em;margin-bottom:1em;margin-top:0}footer .hbll-footer-wrapper ul{list-style:none;margin:.4em 0 0;padding:0}footer .hbll-footer-wrapper ul li{display:flex;align-items:center}footer .hbll-footer-wrapper ul li a,footer .hbll-footer-wrapper ul li button{display:inline-flex;align-items:center;color:#305f9c}footer .hbll-footer-wrapper ul li a:hover,footer .hbll-footer-wrapper ul li button:hover{color:#6892ca}footer .hbll-footer-wrapper ul li:not(:last-of-type){margin-bottom:.6em}footer .hbll-footer-wrapper .hbll-footer-bottom{text-align:center;background-color:#002e5d;color:#fff;font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;font-size:.9em;line-height:1.6em;padding:1.8em;width:100%}footer .hbll-footer-wrapper .hbll-footer-bottom a{color:#fff}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-title{font-size:2em;font-weight:400;line-height:1em}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy{margin-top:.4em;display:flex;align-items:center;justify-content:center;gap:5px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a{color:#fff;text-decoration:underline;padding:4px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a:hover{color:#fff}@media screen and (max-width: 40em){.hbll-footer-links{flex-direction:column;justify-content:flex-start;width:100%}}dialog{border:solid 1px #888;border-radius:4px;width:90%;max-width:50em;padding:0;transition:all 5s ease-in-out}dialog .hbll-footer-email-success,dialog form{padding:1.6em 2em}dialog .hbll-footer-email-success p,dialog form p{text-align:center;line-height:1.4em}dialog .hbll-footer-email-success{display:flex;justify-content:center;align-items:center;flex-direction:column}dialog .hbll-footer-email-success button{margin-top:1em}dialog form{display:flex;flex-direction:column;position:relative}dialog form textarea{min-height:100px;resize:vertical}dialog form input,dialog form textarea,dialog form .hbll-footer-select-wrapper{margin-bottom:.6em}dialog form .hbll-footer-email-bottom-bar{display:flex;align-items:center;justify-content:flex-end}dialog form .hbll-footer-email-bottom-bar .hbll-footer-connection-error{text-align:right;flex-grow:1;margin:0 1em 0 0}dialog form label{margin-bottom:.4em;margin-top:.4em}dialog form .hbll-footer-email-error{display:flex;justify-content:center;align-items:center;margin-right:auto;margin-bottom:.6em;font-size:.8em}dialog form .hbll-footer-email-error .hbll-footer-email-error-icon{font-size:1.2em;margin-right:.2em}dialog form .hbll-footer-email-top{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-bottom:1em}dialog form .hbll-footer-email-top h1{font-size:1.4em;margin:0}dialog form .hbll-footer-email-required-message{float:right}dialog form .hbll-footer-select-wrapper{margin-right:auto}dialog form .hbll-footer-email-required{color:#d03a3a}dialog form button:not([type=submit]){color:#333}dialog form button:not([type=submit]):hover{color:#696969}dialog form button[type=submit]{margin-left:auto}dialog::backdrop{background-color:#000;opacity:.75}footer .hbll-footer-wrapper .toggle-container{display:flex;justify-content:flex-end;margin-top:.6rem}@media screen and (max-width: 43.0625em){footer .hbll-footer-wrapper .toggle-container{justify-content:flex-start}}footer .hbll-footer-wrapper .hbll-footer-social-list+.toggle-container{margin-top:.75rem}footer .hbll-footer-wrapper .toggle{border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;font:inherit;color:#4d535b;line-height:1.3}footer .hbll-footer-wrapper .toggle-text{-webkit-user-select:none;user-select:none;white-space:nowrap;font:inherit;color:#000}footer .hbll-footer-wrapper .toggle-pill{width:3.1em;height:1.75em;background:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:flex-start;padding-left:.375em;box-shadow:inset 0 0 0 1px #00000026}footer .hbll-footer-wrapper .toggle-check{width:1.25em;height:1.25em;border-radius:999px;background:#676f79;display:inline-flex;align-items:center;justify-content:center}footer .hbll-footer-wrapper .toggle-check svg{width:.9em;height:.9em;display:block}footer .hbll-footer-wrapper .toggle:focus-visible .toggle-pill{outline:.1875rem solid rgba(0,0,0,.2);outline-offset:2px}@media (min-width: 63.375em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:5em;align-self:flex-end}}@media (max-width: 63.3125em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:.75rem;align-self:auto;justify-content:flex-start}}.superstar{font-size:.3em}.toggle-subtext{color:#4b4b4b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
892
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HbllFooterComponent, isStandalone: true, selector: "lib-hbll-footer", inputs: { mainsitebaseurl: "mainsitebaseurl", libraryapibaseuri: "libraryapibaseuri", byuid: "byuid", emailname: "emailname", emailemail: "emailemail", emailmessage: "emailmessage", emailstatus: "emailstatus" }, viewQueries: [{ propertyName: "emailDialog", first: true, predicate: ["emailDialog"], descendants: true }], ngImport: i0, template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <button class=\"skip-link-footer\" (click)=\"skipFooter()\">Skip footer</button>\n <div class=\"hbll-footer-links\">\n <section aria-labelledby=\"footerContactHeading\">\n <h3 id=\"footerContactHeading\">Contact</h3>\n <ul>\n <li>\n <address>\n P.O. Box 26800<br />\n Provo, UT 84602-6800\n </address>\n </li>\n <li>\n <a href=\"tel:801-422-6061\">\n <span class=\"material-symbols-outlined hbll-footer-icon\">\n phone_in_talk </span\n > <strong>Call</strong> (801) 422-6061\n </a>\n </li>\n <li>\n <a href=\"sms:801-623-6838\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> sms </span\n > <strong>Text</strong> (801) 623-6838\n </a>\n </li>\n <li>\n <button\n (click)=\"emailDialog.showModal()\"\n data-testid=\"emailUsBtn\"\n style=\"padding: 4px\"\n >\n <span class=\"material-symbols-outlined hbll-footer-icon\"> mail </span\n > \n <strong>Email us</strong>\n </button>\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerResourcesHeading\">\n <h3 id=\"footerResourcesHeading\">Resources</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/site-index/\"\n >A-Z Site Index</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/policies/\">Policies</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/location/\"\n >Parking & Directions</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://uac.byu.edu/accessibility-lab\"\n >Accessibility Resources</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://hr.lib.byu.edu/byu-library-jobs\"\n >Employment Opportunities</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerFriendsHeading\">\n <h3 id=\"footerFriendsHeading\">Friends in the Library</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"https://ctl.byu.edu\"\n >Center for Teaching and Learning</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://copyright.byu.edu\"\n >Copyright Licensing Office</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://facultycenter.byu.edu/aboutus\"\n >Faculty Center</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://dining.byu.edu/library-cafe\"\n >Library Cafe</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerConnectHeading\">\n <h3 id=\"footerConnectHeading\">Connect</h3>\n <ul class=\"hbll-footer-social-list\">\n <li>\n <a target=\"_blank\" href=\"https://www.facebook.com/byuhbll\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/facebook-color-round.svg\"\n alt=\"Facebook\"\n title=\"Facebook\"\n />\n </a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://www.instagram.com/byu_hbll/\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/instagram-color.svg\"\n alt=\"Instagram\"\n title=\"Instagram\"\n />\n </a>\n </li>\n </ul>\n </section>\n </div>\n <section class=\"hbll-footer-bottom\" aria-label=\"Bottom-most part of the footer\">\n <div class=\"hbll-footer-title\">\n <a href=\"https://byu.edu\" target=\"_blank\">BRIGHAM YOUNG UNIVERSITY</a>\n </div>\n <br />\n PROVO, UT 84602, USA | <a href=\"sms:801-422-6061\">(801) 422-6061</a>\n <br />© {{ date | date: 'yyyy' }}\n ALL RIGHTS RESERVED\n <div class=\"hbll-footer-privacy\">\n <a href=\"https://privacy.byu.edu/\" target=\"_blank\">Privacy Notice</a>\n |\n <span id=\"teconsent\"></span>\n </div>\n </section>\n </div>\n <div id=\"consent-banner\"></div>\n</footer>\n\n<dialog\n #emailDialog\n onmousedown=\"event.target === this && this.close()\"\n (close)=\"handleClose()\"\n data-testid=\"dialog\"\n>\n @if (!isEmailSent) {\n <form [formGroup]=\"emailForm\" (submit)=\"sendEmail()\" data-testid=\"form\">\n <div class=\"hbll-footer-email-top\">\n <h1>Email Us</h1>\n <button (click)=\"emailDialog.close()\" type=\"button\" data-testid=\"closeBtn\">\n <span class=\"material-symbols-outlined\"> close </span>\n </button>\n </div>\n <label for=\"hbllFooterEmailName\">Name</label>\n <input\n id=\"hbllFooterEmailName\"\n type=\"text\"\n formControlName=\"name\"\n data-testid=\"emailNameInput\"\n />\n <label for=\"hbllFooterEmailEmail\">\n Email (please provide if you would like a response)</label\n >\n <input\n id=\"hbllFooterEmailEmail\"\n type=\"text\"\n formControlName=\"email\"\n data-testid=\"emailEmailInput\"\n />\n <label for=\"hbllFooterEmailQuestionComment\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailQuestionComment\"\n type=\"text\"\n formControlName=\"message\"\n data-testid=\"emailMessageInput\"\n ></textarea>\n @if (isSubmitted && emailForm.controls.message.invalid) {\n <div\n class=\"hbll-footer-email-required hbll-footer-email-error\"\n data-testid=\"commentError\"\n >\n <span class=\"material-symbols-outlined hbll-footer-email-error-icon\">\n warning\n </span>\n <strong>Please fill out this field</strong>\n </div>\n }\n <label for=\"hbllFooterEmailStatus\">Role</label>\n <span class=\"hbll-footer-select-wrapper\">\n <select\n id=\"hbllFooterEmailStatus\"\n formControlName=\"status\"\n data-testid=\"emailStatusInput\"\n >\n <option selected value=\"\"></option>\n @for (status of userStatuses | slice: 1; track status) {\n <option [value]=\"status\">{{ status }}</option>\n }\n </select>\n </span>\n <div class=\"hbll-footer-email-bottom-bar\">\n @if (hasConnectionError) {\n <p class=\"hbll-footer-connection-error\" data-testid=\"connectionError\">\n <i>There was an error sending your email. Please try again later.</i>\n </p>\n }\n <button\n class=\"pill-btn--components\"\n type=\"submit\"\n [disabled]=\"isLoading\"\n data-testid=\"sendEmailBtn\"\n >\n Send\n </button>\n </div>\n </form>\n } @else {\n <div class=\"hbll-footer-email-success\" data-testid=\"successMessage\">\n <p>\n Your email was sent successfully. If you supplied your email address, we will get\n back to you shortly.<br />Thank you!\n </p>\n <button class=\"pill-btn--components\" (click)=\"emailDialog.close()\" type=\"button\">\n Close\n </button>\n </div>\n }\n</dialog>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap\";*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}dialog form input,dialog form textarea,dialog form select{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}dialog form input:focus,dialog form textarea:focus,dialog form select:focus{outline-color:#3a6093}dialog form .hbll-footer-select-wrapper{position:relative}dialog form .hbll-footer-select-wrapper select{cursor:pointer;padding-right:2em}dialog form .hbll-footer-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}button{border:none;background-color:transparent;font-size:1em}button :hover{cursor:pointer}.skip-link-footer{position:absolute;top:30px;left:30px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;border:3px solid #0050b7;border-radius:4px;cursor:pointer;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.skip-link-footer:focus{opacity:1;pointer-events:auto;transform:none}.skip-link-footer:hover{color:#00285b;background-color:#e3edf8;border-color:#e3edf8}footer{line-height:1.2em;background-color:#e6e6e6}footer a{padding:4px}footer ::ng-deep #consent-banner{z-index:11;position:fixed}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}footer .hbll-footer-wrapper .hbll-footer-links{max-width:90em;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;padding-bottom:2em;white-space:nowrap}footer .hbll-footer-wrapper .hbll-footer-links strong{font-weight:600}footer .hbll-footer-wrapper .hbll-footer-links address{font-style:normal}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-icon{font-size:2rem!important;margin-right:.2em;color:#002e5d}footer .hbll-footer-wrapper .hbll-footer-links section{padding:2em 1.8em 0;background-color:#e6e6e6;flex:1}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list{display:flex}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list .hbll-footer-social{height:1.5em;margin-right:1em}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list li{margin-bottom:0}footer .hbll-footer-wrapper h3{font-weight:600;color:#002e5d;font-size:1.4em;margin-bottom:1em;margin-top:0}footer .hbll-footer-wrapper ul{list-style:none;margin:.4em 0 0;padding:0}footer .hbll-footer-wrapper ul li{display:flex;align-items:center}footer .hbll-footer-wrapper ul li a,footer .hbll-footer-wrapper ul li button{display:inline-flex;align-items:center;color:#305f9c}footer .hbll-footer-wrapper ul li a:hover,footer .hbll-footer-wrapper ul li button:hover{color:#6892ca}footer .hbll-footer-wrapper ul li:not(:last-of-type){margin-bottom:.6em}footer .hbll-footer-wrapper .hbll-footer-bottom{text-align:center;background-color:#002e5d;color:#fff;font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;font-size:.9em;line-height:1.6em;padding:1.8em;width:100%}footer .hbll-footer-wrapper .hbll-footer-bottom a{color:#fff}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-title{font-size:2em;font-weight:400;line-height:1em}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy{margin-top:.4em;display:flex;align-items:center;justify-content:center;gap:5px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a{color:#fff;text-decoration:underline;padding:4px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a:hover{color:#fff}@media screen and (max-width: 40em){.hbll-footer-links{flex-direction:column;justify-content:flex-start;width:100%}}dialog{border:solid 1px #888;border-radius:4px;width:90%;max-width:50em;padding:0;transition:all 5s ease-in-out}dialog .hbll-footer-email-success,dialog form{padding:1.6em 2em}dialog .hbll-footer-email-success p,dialog form p{text-align:center;line-height:1.4em}dialog .hbll-footer-email-success{display:flex;justify-content:center;align-items:center;flex-direction:column}dialog .hbll-footer-email-success button{margin-top:1em}dialog form{display:flex;flex-direction:column;position:relative}dialog form textarea{min-height:100px;resize:vertical}dialog form input,dialog form textarea,dialog form .hbll-footer-select-wrapper{margin-bottom:.6em}dialog form .hbll-footer-email-bottom-bar{display:flex;align-items:center;justify-content:flex-end}dialog form .hbll-footer-email-bottom-bar .hbll-footer-connection-error{text-align:right;flex-grow:1;margin:0 1em 0 0}dialog form label{margin-bottom:.4em;margin-top:.4em}dialog form .hbll-footer-email-error{display:flex;justify-content:center;align-items:center;margin-right:auto;margin-bottom:.6em;font-size:.8em}dialog form .hbll-footer-email-error .hbll-footer-email-error-icon{font-size:1.2em;margin-right:.2em}dialog form .hbll-footer-email-top{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-bottom:1em}dialog form .hbll-footer-email-top h1{font-size:1.4em;margin:0}dialog form .hbll-footer-email-required-message{float:right}dialog form .hbll-footer-select-wrapper{margin-right:auto}dialog form .hbll-footer-email-required{color:#d03a3a}dialog form button:not([type=submit]){color:#333}dialog form button:not([type=submit]):hover{color:#696969}dialog form button[type=submit]{margin-left:auto}dialog::backdrop{background-color:#000;opacity:.75}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
901
893
|
}
|
|
902
894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllFooterComponent, decorators: [{
|
|
903
895
|
type: Component,
|
|
904
|
-
args: [{ selector: 'lib-hbll-footer', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <button class=\"skip-link-footer\" (click)=\"skipFooter()\" >Skip footer</button>\n <div class=\"hbll-footer-links\">\n <section aria-labelledby=\"footerContactHeading\">\n <h3 id=\"footerContactHeading\" >Contact</h3>\n <ul>\n <li>\n <address>\n P.O. Box 26800<br />\n Provo, UT 84602-6800\n </address>\n </li>\n <li>\n <a href=\"tel:801-422-6061\">\n <span class=\"material-symbols-outlined hbll-footer-icon\">\n phone_in_talk </span\n > <strong>Call</strong> (801) 422-6061\n </a>\n </li>\n <li>\n <a href=\"sms:801-623-6838\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> sms </span\n > <strong>Text</strong> (801) 623-6838\n </a>\n </li>\n <li>\n <button (click)=\"emailDialog.showModal()\" data-testid=\"emailUsBtn\" style=\"padding: 4px;\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> mail </span\n > \n <strong>Email us</strong>\n </button>\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerResourcesHeading\">\n <h3 id=\"footerResourcesHeading\">Resources</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/site-index/\"\n >A-Z Site Index</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/policies/\">Policies</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/location/\"\n >Parking & Directions</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://uac.byu.edu/accessibility-lab\"\n >Accessibility Resources</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://hr.lib.byu.edu/byu-library-jobs\"\n >Employment Opportunities</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerFriendsHeading\">\n <h3 id=\"footerFriendsHeading\">Friends in the Library</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"https://ctl.byu.edu\"\n >Center for Teaching and Learning</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://copyright.byu.edu\"\n >Copyright Licensing Office</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://facultycenter.byu.edu/aboutus\"\n >Faculty Center</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://dining.byu.edu/library-cafe\"\n >Library Cafe</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerConnectHeading\">\n <h3 id=\"footerConnectHeading\">Connect</h3>\n <ul class=\"hbll-footer-social-list\">\n <li>\n <a target=\"_blank\" href=\"https://www.facebook.com/byuhbll\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/facebook-color-round.svg\"\n alt=\"Facebook\"\n title=\"Facebook\"\n />\n </a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://www.instagram.com/byu_hbll/\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/instagram-color.svg\"\n alt=\"Instagram\"\n title=\"Instagram\"\n />\n </a>\n </li>\n </ul>\n <div class=\"toggle-container\">\n <button\n type=\"button\"\n class=\"toggle toggle-off\"\n role=\"switch\"\n [attr.aria-checked]=\"false\"\n aria-label=\"Toggle Legacy View (off)\"\n (click)=\"setSessionCookie()\"\n >\n <span class=\"toggle-pill\">\n <span class=\"toggle-check\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 2\">\n <line x1=\"1\" y1=\"1\" x2=\"11\" y2=\"1\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </span>\n <span class=\"toggle-text\">Toggle Legacy View<sup class=\"superstar\">\u2605</sup></span>\n </button>\n </div>\n <i class=\"toggle-subtext\"><sup class=\"superstar\">\u2605</sup>Available until 10/20/2025</i>\n </section>\n </div>\n <section class=\"hbll-footer-bottom\" aria-label=\"Bottom-most part of the footer\">\n <div class=\"hbll-footer-title\">\n <a href=\"https://byu.edu\" target=\"_blank\">BRIGHAM YOUNG UNIVERSITY</a>\n </div>\n <br />\n PROVO, UT 84602, USA | <a href=\"sms:801-422-6061\">(801) 422-6061</a>\n <br />© {{ date | date: 'yyyy' }}\n ALL RIGHTS RESERVED\n <div class=\"hbll-footer-privacy\">\n <a href=\"https://privacy.byu.edu/\" target=\"_blank\">Privacy Notice</a>\n |\n <span id=\"teconsent\"></span>\n </div>\n </section>\n </div>\n <div id=\"consent-banner\"></div>\n</footer>\n\n<dialog\n #emailDialog\n onmousedown=\"event.target === this && this.close()\"\n (close)=\"handleClose()\"\n data-testid=\"dialog\"\n>\n @if (!isEmailSent) {\n <form [formGroup]=\"emailForm\" (submit)=\"sendEmail()\" data-testid=\"form\">\n <div class=\"hbll-footer-email-top\">\n <h1>Email Us</h1>\n <button (click)=\"emailDialog.close()\" type=\"button\" data-testid=\"closeBtn\">\n <span class=\"material-symbols-outlined\"> close </span>\n </button>\n </div>\n <label for=\"hbllFooterEmailName\">Name</label>\n <input\n id=\"hbllFooterEmailName\"\n type=\"text\"\n formControlName=\"name\"\n data-testid=\"emailNameInput\"\n />\n <label for=\"hbllFooterEmailEmail\">\n Email (please provide if you would like a response)</label\n >\n <input\n id=\"hbllFooterEmailEmail\"\n type=\"text\"\n formControlName=\"email\"\n data-testid=\"emailEmailInput\"\n />\n <label for=\"hbllFooterEmailQuestionComment\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailQuestionComment\"\n type=\"text\"\n formControlName=\"message\"\n data-testid=\"emailMessageInput\"\n ></textarea>\n @if (isSubmitted && emailForm.controls.message.invalid) {\n <div\n class=\"hbll-footer-email-required hbll-footer-email-error\"\n data-testid=\"commentError\"\n >\n <span class=\"material-symbols-outlined hbll-footer-email-error-icon\">\n warning\n </span>\n <strong>Please fill out this field</strong>\n </div>\n }\n <label for=\"hbllFooterEmailStatus\">Role</label>\n <span class=\"hbll-footer-select-wrapper\">\n <select\n id=\"hbllFooterEmailStatus\"\n formControlName=\"status\"\n data-testid=\"emailStatusInput\"\n >\n <option selected value=\"\"></option>\n @for (status of userStatuses | slice: 1; track status) {\n <option [value]=\"status\">{{ status }}</option>\n }\n </select>\n </span>\n <div class=\"hbll-footer-email-bottom-bar\">\n @if (hasConnectionError) {\n <p class=\"hbll-footer-connection-error\" data-testid=\"connectionError\">\n <i>There was an error sending your email. Please try again later.</i>\n </p>\n }\n <button\n class=\"pill-btn--components\"\n type=\"submit\"\n [disabled]=\"isLoading\"\n data-testid=\"sendEmailBtn\"\n >\n Send\n </button>\n </div>\n </form>\n } @else {\n <div class=\"hbll-footer-email-success\" data-testid=\"successMessage\">\n <p>\n Your email was sent successfully. If you supplied your email address, we will get\n back to you shortly.<br />Thank you!\n </p>\n <button class=\"pill-btn--components\" (click)=\"emailDialog.close()\" type=\"button\">\n Close\n </button>\n </div>\n }\n</dialog>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap\";*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}dialog form input,dialog form textarea,dialog form select{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}dialog form input:focus,dialog form textarea:focus,dialog form select:focus{outline-color:#3a6093}dialog form .hbll-footer-select-wrapper{position:relative}dialog form .hbll-footer-select-wrapper select{cursor:pointer;padding-right:2em}dialog form .hbll-footer-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}button{border:none;background-color:transparent;font-size:1em}button :hover{cursor:pointer}.skip-link-footer{position:absolute;top:30px;left:30px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;border:3px solid #0050b7;border-radius:4px;cursor:pointer;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.skip-link-footer:focus{opacity:1;pointer-events:auto;transform:none}.skip-link-footer:hover{color:#00285b;background-color:#e3edf8;border-color:#e3edf8}footer{line-height:1.2em;background-color:#e6e6e6}footer a{padding:4px}footer ::ng-deep #consent-banner{z-index:11;position:fixed}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}footer .hbll-footer-wrapper .hbll-footer-links{max-width:90em;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;padding-bottom:2em;white-space:nowrap}footer .hbll-footer-wrapper .hbll-footer-links strong{font-weight:600}footer .hbll-footer-wrapper .hbll-footer-links address{font-style:normal}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-icon{font-size:2rem!important;margin-right:.2em;color:#002e5d}footer .hbll-footer-wrapper .hbll-footer-links section{padding:2em 1.8em 0;background-color:#e6e6e6;flex:1}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list{display:flex}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list .hbll-footer-social{height:1.5em;margin-right:1em}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list li{margin-bottom:0}footer .hbll-footer-wrapper h3{font-weight:600;color:#002e5d;font-size:1.4em;margin-bottom:1em;margin-top:0}footer .hbll-footer-wrapper ul{list-style:none;margin:.4em 0 0;padding:0}footer .hbll-footer-wrapper ul li{display:flex;align-items:center}footer .hbll-footer-wrapper ul li a,footer .hbll-footer-wrapper ul li button{display:inline-flex;align-items:center;color:#305f9c}footer .hbll-footer-wrapper ul li a:hover,footer .hbll-footer-wrapper ul li button:hover{color:#6892ca}footer .hbll-footer-wrapper ul li:not(:last-of-type){margin-bottom:.6em}footer .hbll-footer-wrapper .hbll-footer-bottom{text-align:center;background-color:#002e5d;color:#fff;font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;font-size:.9em;line-height:1.6em;padding:1.8em;width:100%}footer .hbll-footer-wrapper .hbll-footer-bottom a{color:#fff}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-title{font-size:2em;font-weight:400;line-height:1em}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy{margin-top:.4em;display:flex;align-items:center;justify-content:center;gap:5px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a{color:#fff;text-decoration:underline;padding:4px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a:hover{color:#fff}@media screen and (max-width: 40em){.hbll-footer-links{flex-direction:column;justify-content:flex-start;width:100%}}dialog{border:solid 1px #888;border-radius:4px;width:90%;max-width:50em;padding:0;transition:all 5s ease-in-out}dialog .hbll-footer-email-success,dialog form{padding:1.6em 2em}dialog .hbll-footer-email-success p,dialog form p{text-align:center;line-height:1.4em}dialog .hbll-footer-email-success{display:flex;justify-content:center;align-items:center;flex-direction:column}dialog .hbll-footer-email-success button{margin-top:1em}dialog form{display:flex;flex-direction:column;position:relative}dialog form textarea{min-height:100px;resize:vertical}dialog form input,dialog form textarea,dialog form .hbll-footer-select-wrapper{margin-bottom:.6em}dialog form .hbll-footer-email-bottom-bar{display:flex;align-items:center;justify-content:flex-end}dialog form .hbll-footer-email-bottom-bar .hbll-footer-connection-error{text-align:right;flex-grow:1;margin:0 1em 0 0}dialog form label{margin-bottom:.4em;margin-top:.4em}dialog form .hbll-footer-email-error{display:flex;justify-content:center;align-items:center;margin-right:auto;margin-bottom:.6em;font-size:.8em}dialog form .hbll-footer-email-error .hbll-footer-email-error-icon{font-size:1.2em;margin-right:.2em}dialog form .hbll-footer-email-top{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-bottom:1em}dialog form .hbll-footer-email-top h1{font-size:1.4em;margin:0}dialog form .hbll-footer-email-required-message{float:right}dialog form .hbll-footer-select-wrapper{margin-right:auto}dialog form .hbll-footer-email-required{color:#d03a3a}dialog form button:not([type=submit]){color:#333}dialog form button:not([type=submit]):hover{color:#696969}dialog form button[type=submit]{margin-left:auto}dialog::backdrop{background-color:#000;opacity:.75}footer .hbll-footer-wrapper .toggle-container{display:flex;justify-content:flex-end;margin-top:.6rem}@media screen and (max-width: 43.0625em){footer .hbll-footer-wrapper .toggle-container{justify-content:flex-start}}footer .hbll-footer-wrapper .hbll-footer-social-list+.toggle-container{margin-top:.75rem}footer .hbll-footer-wrapper .toggle{border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;font:inherit;color:#4d535b;line-height:1.3}footer .hbll-footer-wrapper .toggle-text{-webkit-user-select:none;user-select:none;white-space:nowrap;font:inherit;color:#000}footer .hbll-footer-wrapper .toggle-pill{width:3.1em;height:1.75em;background:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:flex-start;padding-left:.375em;box-shadow:inset 0 0 0 1px #00000026}footer .hbll-footer-wrapper .toggle-check{width:1.25em;height:1.25em;border-radius:999px;background:#676f79;display:inline-flex;align-items:center;justify-content:center}footer .hbll-footer-wrapper .toggle-check svg{width:.9em;height:.9em;display:block}footer .hbll-footer-wrapper .toggle:focus-visible .toggle-pill{outline:.1875rem solid rgba(0,0,0,.2);outline-offset:2px}@media (min-width: 63.375em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:5em;align-self:flex-end}}@media (max-width: 63.3125em){.hbll-footer-wrapper .hbll-footer-links section[aria-labelledby=footerConnectHeading] .toggle-container{margin-top:.75rem;align-self:auto;justify-content:flex-start}}.superstar{font-size:.3em}.toggle-subtext{color:#4b4b4b}\n"] }]
|
|
896
|
+
args: [{ selector: 'lib-hbll-footer', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <button class=\"skip-link-footer\" (click)=\"skipFooter()\">Skip footer</button>\n <div class=\"hbll-footer-links\">\n <section aria-labelledby=\"footerContactHeading\">\n <h3 id=\"footerContactHeading\">Contact</h3>\n <ul>\n <li>\n <address>\n P.O. Box 26800<br />\n Provo, UT 84602-6800\n </address>\n </li>\n <li>\n <a href=\"tel:801-422-6061\">\n <span class=\"material-symbols-outlined hbll-footer-icon\">\n phone_in_talk </span\n > <strong>Call</strong> (801) 422-6061\n </a>\n </li>\n <li>\n <a href=\"sms:801-623-6838\">\n <span class=\"material-symbols-outlined hbll-footer-icon\"> sms </span\n > <strong>Text</strong> (801) 623-6838\n </a>\n </li>\n <li>\n <button\n (click)=\"emailDialog.showModal()\"\n data-testid=\"emailUsBtn\"\n style=\"padding: 4px\"\n >\n <span class=\"material-symbols-outlined hbll-footer-icon\"> mail </span\n > \n <strong>Email us</strong>\n </button>\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerResourcesHeading\">\n <h3 id=\"footerResourcesHeading\">Resources</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/site-index/\"\n >A-Z Site Index</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/policies/\">Policies</a>\n </li>\n <li>\n <a target=\"_blank\" href=\"{{ mainsitebaseurl }}/about/location/\"\n >Parking & Directions</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://uac.byu.edu/accessibility-lab\"\n >Accessibility Resources</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://hr.lib.byu.edu/byu-library-jobs\"\n >Employment Opportunities</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerFriendsHeading\">\n <h3 id=\"footerFriendsHeading\">Friends in the Library</h3>\n <ul>\n <li>\n <a target=\"_blank\" href=\"https://ctl.byu.edu\"\n >Center for Teaching and Learning</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://copyright.byu.edu\"\n >Copyright Licensing Office</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://facultycenter.byu.edu/aboutus\"\n >Faculty Center</a\n >\n </li>\n <li>\n <a target=\"_blank\" href=\"https://dining.byu.edu/library-cafe\"\n >Library Cafe</a\n >\n </li>\n </ul>\n </section>\n <section aria-labelledby=\"footerConnectHeading\">\n <h3 id=\"footerConnectHeading\">Connect</h3>\n <ul class=\"hbll-footer-social-list\">\n <li>\n <a target=\"_blank\" href=\"https://www.facebook.com/byuhbll\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/facebook-color-round.svg\"\n alt=\"Facebook\"\n title=\"Facebook\"\n />\n </a>\n </li>\n <li>\n <a target=\"_blank\" href=\"https://www.instagram.com/byu_hbll/\">\n <img\n class=\"hbll-footer-social\"\n src=\"https://media.lib.byu.edu/web-assets/images/1.0.0/instagram-color.svg\"\n alt=\"Instagram\"\n title=\"Instagram\"\n />\n </a>\n </li>\n </ul>\n </section>\n </div>\n <section class=\"hbll-footer-bottom\" aria-label=\"Bottom-most part of the footer\">\n <div class=\"hbll-footer-title\">\n <a href=\"https://byu.edu\" target=\"_blank\">BRIGHAM YOUNG UNIVERSITY</a>\n </div>\n <br />\n PROVO, UT 84602, USA | <a href=\"sms:801-422-6061\">(801) 422-6061</a>\n <br />© {{ date | date: 'yyyy' }}\n ALL RIGHTS RESERVED\n <div class=\"hbll-footer-privacy\">\n <a href=\"https://privacy.byu.edu/\" target=\"_blank\">Privacy Notice</a>\n |\n <span id=\"teconsent\"></span>\n </div>\n </section>\n </div>\n <div id=\"consent-banner\"></div>\n</footer>\n\n<dialog\n #emailDialog\n onmousedown=\"event.target === this && this.close()\"\n (close)=\"handleClose()\"\n data-testid=\"dialog\"\n>\n @if (!isEmailSent) {\n <form [formGroup]=\"emailForm\" (submit)=\"sendEmail()\" data-testid=\"form\">\n <div class=\"hbll-footer-email-top\">\n <h1>Email Us</h1>\n <button (click)=\"emailDialog.close()\" type=\"button\" data-testid=\"closeBtn\">\n <span class=\"material-symbols-outlined\"> close </span>\n </button>\n </div>\n <label for=\"hbllFooterEmailName\">Name</label>\n <input\n id=\"hbllFooterEmailName\"\n type=\"text\"\n formControlName=\"name\"\n data-testid=\"emailNameInput\"\n />\n <label for=\"hbllFooterEmailEmail\">\n Email (please provide if you would like a response)</label\n >\n <input\n id=\"hbllFooterEmailEmail\"\n type=\"text\"\n formControlName=\"email\"\n data-testid=\"emailEmailInput\"\n />\n <label for=\"hbllFooterEmailQuestionComment\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailQuestionComment\"\n type=\"text\"\n formControlName=\"message\"\n data-testid=\"emailMessageInput\"\n ></textarea>\n @if (isSubmitted && emailForm.controls.message.invalid) {\n <div\n class=\"hbll-footer-email-required hbll-footer-email-error\"\n data-testid=\"commentError\"\n >\n <span class=\"material-symbols-outlined hbll-footer-email-error-icon\">\n warning\n </span>\n <strong>Please fill out this field</strong>\n </div>\n }\n <label for=\"hbllFooterEmailStatus\">Role</label>\n <span class=\"hbll-footer-select-wrapper\">\n <select\n id=\"hbllFooterEmailStatus\"\n formControlName=\"status\"\n data-testid=\"emailStatusInput\"\n >\n <option selected value=\"\"></option>\n @for (status of userStatuses | slice: 1; track status) {\n <option [value]=\"status\">{{ status }}</option>\n }\n </select>\n </span>\n <div class=\"hbll-footer-email-bottom-bar\">\n @if (hasConnectionError) {\n <p class=\"hbll-footer-connection-error\" data-testid=\"connectionError\">\n <i>There was an error sending your email. Please try again later.</i>\n </p>\n }\n <button\n class=\"pill-btn--components\"\n type=\"submit\"\n [disabled]=\"isLoading\"\n data-testid=\"sendEmailBtn\"\n >\n Send\n </button>\n </div>\n </form>\n } @else {\n <div class=\"hbll-footer-email-success\" data-testid=\"successMessage\">\n <p>\n Your email was sent successfully. If you supplied your email address, we will get\n back to you shortly.<br />Thank you!\n </p>\n <button class=\"pill-btn--components\" (click)=\"emailDialog.close()\" type=\"button\">\n Close\n </button>\n </div>\n }\n</dialog>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap\";*{box-sizing:border-box;text-decoration:none;font-size:1em}*:not(.material-symbols-outlined){font-family:inherit}dialog form input,dialog form textarea,dialog form select{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}dialog form input:focus,dialog form textarea:focus,dialog form select:focus{outline-color:#3a6093}dialog form .hbll-footer-select-wrapper{position:relative}dialog form .hbll-footer-select-wrapper select{cursor:pointer;padding-right:2em}dialog form .hbll-footer-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}button{border:none;background-color:transparent;font-size:1em}button :hover{cursor:pointer}.skip-link-footer{position:absolute;top:30px;left:30px;background:#fff;color:#00285b;font-size:1em;font-weight:580;padding:8px 16px;border:3px solid #0050b7;border-radius:4px;cursor:pointer;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.skip-link-footer:focus{opacity:1;pointer-events:auto;transform:none}.skip-link-footer:hover{color:#00285b;background-color:#e3edf8;border-color:#e3edf8}footer{line-height:1.2em;background-color:#e6e6e6}footer a{padding:4px}footer ::ng-deep #consent-banner{z-index:11;position:fixed}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}footer .hbll-footer-wrapper .hbll-footer-links{max-width:90em;display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;padding-bottom:2em;white-space:nowrap}footer .hbll-footer-wrapper .hbll-footer-links strong{font-weight:600}footer .hbll-footer-wrapper .hbll-footer-links address{font-style:normal}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-icon{font-size:2rem!important;margin-right:.2em;color:#002e5d}footer .hbll-footer-wrapper .hbll-footer-links section{padding:2em 1.8em 0;background-color:#e6e6e6;flex:1}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list{display:flex}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list .hbll-footer-social{height:1.5em;margin-right:1em}footer .hbll-footer-wrapper .hbll-footer-links .hbll-footer-social-list li{margin-bottom:0}footer .hbll-footer-wrapper h3{font-weight:600;color:#002e5d;font-size:1.4em;margin-bottom:1em;margin-top:0}footer .hbll-footer-wrapper ul{list-style:none;margin:.4em 0 0;padding:0}footer .hbll-footer-wrapper ul li{display:flex;align-items:center}footer .hbll-footer-wrapper ul li a,footer .hbll-footer-wrapper ul li button{display:inline-flex;align-items:center;color:#305f9c}footer .hbll-footer-wrapper ul li a:hover,footer .hbll-footer-wrapper ul li button:hover{color:#6892ca}footer .hbll-footer-wrapper ul li:not(:last-of-type){margin-bottom:.6em}footer .hbll-footer-wrapper .hbll-footer-bottom{text-align:center;background-color:#002e5d;color:#fff;font-family:IBM Plex Sans,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;font-size:.9em;line-height:1.6em;padding:1.8em;width:100%}footer .hbll-footer-wrapper .hbll-footer-bottom a{color:#fff}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-title{font-size:2em;font-weight:400;line-height:1em}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy{margin-top:.4em;display:flex;align-items:center;justify-content:center;gap:5px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a{color:#fff;text-decoration:underline;padding:4px}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy ::ng-deep #teconsent a:hover{color:#fff}@media screen and (max-width: 40em){.hbll-footer-links{flex-direction:column;justify-content:flex-start;width:100%}}dialog{border:solid 1px #888;border-radius:4px;width:90%;max-width:50em;padding:0;transition:all 5s ease-in-out}dialog .hbll-footer-email-success,dialog form{padding:1.6em 2em}dialog .hbll-footer-email-success p,dialog form p{text-align:center;line-height:1.4em}dialog .hbll-footer-email-success{display:flex;justify-content:center;align-items:center;flex-direction:column}dialog .hbll-footer-email-success button{margin-top:1em}dialog form{display:flex;flex-direction:column;position:relative}dialog form textarea{min-height:100px;resize:vertical}dialog form input,dialog form textarea,dialog form .hbll-footer-select-wrapper{margin-bottom:.6em}dialog form .hbll-footer-email-bottom-bar{display:flex;align-items:center;justify-content:flex-end}dialog form .hbll-footer-email-bottom-bar .hbll-footer-connection-error{text-align:right;flex-grow:1;margin:0 1em 0 0}dialog form label{margin-bottom:.4em;margin-top:.4em}dialog form .hbll-footer-email-error{display:flex;justify-content:center;align-items:center;margin-right:auto;margin-bottom:.6em;font-size:.8em}dialog form .hbll-footer-email-error .hbll-footer-email-error-icon{font-size:1.2em;margin-right:.2em}dialog form .hbll-footer-email-top{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-bottom:1em}dialog form .hbll-footer-email-top h1{font-size:1.4em;margin:0}dialog form .hbll-footer-email-required-message{float:right}dialog form .hbll-footer-select-wrapper{margin-right:auto}dialog form .hbll-footer-email-required{color:#d03a3a}dialog form button:not([type=submit]){color:#333}dialog form button:not([type=submit]):hover{color:#696969}dialog form button[type=submit]{margin-left:auto}dialog::backdrop{background-color:#000;opacity:.75}\n"] }]
|
|
905
897
|
}], propDecorators: { emailDialog: [{
|
|
906
898
|
type: ViewChild,
|
|
907
899
|
args: ['emailDialog']
|
|
@@ -909,6 +901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
909
901
|
type: Input
|
|
910
902
|
}], libraryapibaseuri: [{
|
|
911
903
|
type: Input
|
|
904
|
+
}], byuid: [{
|
|
905
|
+
type: Input
|
|
912
906
|
}], emailname: [{
|
|
913
907
|
type: Input
|
|
914
908
|
}], emailemail: [{
|
|
@@ -2363,11 +2357,11 @@ class SnackbarComponent {
|
|
|
2363
2357
|
}
|
|
2364
2358
|
}
|
|
2365
2359
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2366
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SnackbarComponent, isStandalone: true, selector: "lib-snackbar", inputs: { purpose: "purpose", title: "title", description: "description", fieldPlaceholder: "fieldPlaceholder", titleIcon: "titleIcon", showTitle: ["showTitle", "showTitle", booleanAttribute], showTitleIcon: ["showTitleIcon", "showTitleIcon", booleanAttribute], titleIconFilled: ["titleIconFilled", "titleIconFilled", booleanAttribute], showClose: ["showClose", "showClose", booleanAttribute], showProgressBar: ["showProgressBar", "showProgressBar", booleanAttribute], showField: ["showField", "showField", booleanAttribute], showButton: ["showButton", "showButton", booleanAttribute], autoDismiss: ["autoDismiss", "autoDismiss", booleanAttribute], visible: ["visible", "visible", booleanAttribute], progressMs: "progressMs", y: "y", statusButtonInputs: "statusButtonInputs" }, outputs: { closed: "closed", visibleChange: "visibleChange", buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n <section\n class=\"snackbar\"\n [ngClass]=\"{\n 'is-default': purpose === 'default',\n 'is-info': purpose === 'info',\n 'is-success': purpose === 'success',\n 'is-error': purpose === 'error',\n 'is-warning': purpose === 'warning',\n 'is-open': isOpen,\n }\"\n role=\"status\"\n aria-live=\"polite\"\n [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n [style.top.px]=\"y\"\n >\n <div class=\"snackbar__left\">\n @if(showTitle) {\n <div class=\"snackbar__title-row\">\n <span \n [ngClass]=\"{\n 'snackbar__title-icon': true,\n 'has-icon': showTitle && showTitleIcon\n }\"\n aria-hidden=\"true\"\n >\n @if (showTitle && showTitleIcon) {\n <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n id=\"snackbar-title-icon\"\n aria-hidden=\"true\"\n >\n {{ titleIcon }}\n </i>\n }\n </span>\n @if (showTitle) {\n <h3 class=\"snackbar__title\">{{ title }}</h3>\n }\n </div>\n }\n <p class=\"snackbar__desc\">\n {{ description }}\n </p>\n @if (showField) {\n <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n }\n @if (showButton) {\n <lib-status-button\n label={{statusButtonInputs?.label}}\n [status]=\"status\"\n leftIcon={{statusButtonInputs?.leftIcon}}\n rightIcon={{statusButtonInputs?.rightIcon}}\n [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n [clearVariant]=\"statusButtonInputs?.clearVariant\"\n (click)=\"close(true)\"\n ></lib-status-button>\n\n }\n </div>\n <button \n type=\"button\"\n (click)=\"close()\"\n class=\"snackbar__close\"\n aria-label=\"Dismiss\"\n [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n >\n \u00D7\n </button>\n @if (showProgressBar) {\n <div class=\"snackbar__progress\">\n <div class=\"snackbar__progress-fill\"></div>\n </div>\n }\n </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:
|
|
2360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SnackbarComponent, isStandalone: true, selector: "lib-snackbar", inputs: { purpose: "purpose", title: "title", description: "description", fieldPlaceholder: "fieldPlaceholder", titleIcon: "titleIcon", showTitle: ["showTitle", "showTitle", booleanAttribute], showTitleIcon: ["showTitleIcon", "showTitleIcon", booleanAttribute], titleIconFilled: ["titleIconFilled", "titleIconFilled", booleanAttribute], showClose: ["showClose", "showClose", booleanAttribute], showProgressBar: ["showProgressBar", "showProgressBar", booleanAttribute], showField: ["showField", "showField", booleanAttribute], showButton: ["showButton", "showButton", booleanAttribute], autoDismiss: ["autoDismiss", "autoDismiss", booleanAttribute], visible: ["visible", "visible", booleanAttribute], progressMs: "progressMs", y: "y", statusButtonInputs: "statusButtonInputs" }, outputs: { closed: "closed", visibleChange: "visibleChange", buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n <section\n class=\"snackbar\"\n [ngClass]=\"{\n 'is-default': purpose === 'default',\n 'is-info': purpose === 'info',\n 'is-success': purpose === 'success',\n 'is-error': purpose === 'error',\n 'is-warning': purpose === 'warning',\n 'is-open': isOpen,\n }\"\n role=\"status\"\n aria-live=\"polite\"\n [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n [style.top.px]=\"y\"\n >\n <div class=\"snackbar__left\">\n @if(showTitle) {\n <div class=\"snackbar__title-row\">\n <span \n [ngClass]=\"{\n 'snackbar__title-icon': true,\n 'has-icon': showTitle && showTitleIcon\n }\"\n aria-hidden=\"true\"\n >\n @if (showTitle && showTitleIcon) {\n <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n id=\"snackbar-title-icon\"\n aria-hidden=\"true\"\n >\n {{ titleIcon }}\n </i>\n }\n </span>\n @if (showTitle) {\n <h3 class=\"snackbar__title\">{{ title }}</h3>\n }\n </div>\n }\n <p class=\"snackbar__desc\">\n {{ description }}\n </p>\n @if (showField) {\n <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n }\n @if (showButton) {\n <lib-status-button\n label={{statusButtonInputs?.label}}\n [status]=\"status\"\n leftIcon={{statusButtonInputs?.leftIcon}}\n rightIcon={{statusButtonInputs?.rightIcon}}\n [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n [clearVariant]=\"statusButtonInputs?.clearVariant\"\n (click)=\"close(true)\"\n ></lib-status-button>\n\n }\n </div>\n <button \n type=\"button\"\n (click)=\"close()\"\n class=\"snackbar__close\"\n aria-label=\"Dismiss\"\n [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n >\n \u00D7\n </button>\n @if (showProgressBar) {\n <div class=\"snackbar__progress\">\n <div class=\"snackbar__progress-fill\"></div>\n </div>\n }\n </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:26.25rem;padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: StatusButtonComponent, selector: "lib-status-button", inputs: ["label", "status", "leftIcon", "rightIcon", "hideLeftIcon", "hideRightIcon", "clearVariant"] }] }); }
|
|
2367
2361
|
}
|
|
2368
2362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SnackbarComponent, decorators: [{
|
|
2369
2363
|
type: Component,
|
|
2370
|
-
args: [{ selector: 'lib-snackbar', standalone: true, imports: [NgClass, StatusButtonComponent], template: "@if (visible) {\n <section\n class=\"snackbar\"\n [ngClass]=\"{\n 'is-default': purpose === 'default',\n 'is-info': purpose === 'info',\n 'is-success': purpose === 'success',\n 'is-error': purpose === 'error',\n 'is-warning': purpose === 'warning',\n 'is-open': isOpen,\n }\"\n role=\"status\"\n aria-live=\"polite\"\n [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n [style.top.px]=\"y\"\n >\n <div class=\"snackbar__left\">\n @if(showTitle) {\n <div class=\"snackbar__title-row\">\n <span \n [ngClass]=\"{\n 'snackbar__title-icon': true,\n 'has-icon': showTitle && showTitleIcon\n }\"\n aria-hidden=\"true\"\n >\n @if (showTitle && showTitleIcon) {\n <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n id=\"snackbar-title-icon\"\n aria-hidden=\"true\"\n >\n {{ titleIcon }}\n </i>\n }\n </span>\n @if (showTitle) {\n <h3 class=\"snackbar__title\">{{ title }}</h3>\n }\n </div>\n }\n <p class=\"snackbar__desc\">\n {{ description }}\n </p>\n @if (showField) {\n <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n }\n @if (showButton) {\n <lib-status-button\n label={{statusButtonInputs?.label}}\n [status]=\"status\"\n leftIcon={{statusButtonInputs?.leftIcon}}\n rightIcon={{statusButtonInputs?.rightIcon}}\n [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n [clearVariant]=\"statusButtonInputs?.clearVariant\"\n (click)=\"close(true)\"\n ></lib-status-button>\n\n }\n </div>\n <button \n type=\"button\"\n (click)=\"close()\"\n class=\"snackbar__close\"\n aria-label=\"Dismiss\"\n [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n >\n \u00D7\n </button>\n @if (showProgressBar) {\n <div class=\"snackbar__progress\">\n <div class=\"snackbar__progress-fill\"></div>\n </div>\n }\n </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:
|
|
2364
|
+
args: [{ selector: 'lib-snackbar', standalone: true, imports: [NgClass, StatusButtonComponent], template: "@if (visible) {\n <section\n class=\"snackbar\"\n [ngClass]=\"{\n 'is-default': purpose === 'default',\n 'is-info': purpose === 'info',\n 'is-success': purpose === 'success',\n 'is-error': purpose === 'error',\n 'is-warning': purpose === 'warning',\n 'is-open': isOpen,\n }\"\n role=\"status\"\n aria-live=\"polite\"\n [style.--snackbar-progress-duration]=\"progressMs + 'ms'\"\n [style.top.px]=\"y\"\n >\n <div class=\"snackbar__left\">\n @if(showTitle) {\n <div class=\"snackbar__title-row\">\n <span \n [ngClass]=\"{\n 'snackbar__title-icon': true,\n 'has-icon': showTitle && showTitleIcon\n }\"\n aria-hidden=\"true\"\n >\n @if (showTitle && showTitleIcon) {\n <i [ngClass]=\"titleIconFilled ? 'material-icons' : 'material-icons-outlined'\"\n id=\"snackbar-title-icon\"\n aria-hidden=\"true\"\n >\n {{ titleIcon }}\n </i>\n }\n </span>\n @if (showTitle) {\n <h3 class=\"snackbar__title\">{{ title }}</h3>\n }\n </div>\n }\n <p class=\"snackbar__desc\">\n {{ description }}\n </p>\n @if (showField) {\n <input class=\"snackbar__input\" type=\"text\" [placeholder]=\"fieldPlaceholder\" />\n }\n @if (showButton) {\n <lib-status-button\n label={{statusButtonInputs?.label}}\n [status]=\"status\"\n leftIcon={{statusButtonInputs?.leftIcon}}\n rightIcon={{statusButtonInputs?.rightIcon}}\n [hideLeftIcon]=\"statusButtonInputs?.hideLeftIcon\"\n [hideRightIcon]=\"statusButtonInputs?.hideRightIcon\"\n [clearVariant]=\"statusButtonInputs?.clearVariant\"\n (click)=\"close(true)\"\n ></lib-status-button>\n\n }\n </div>\n <button \n type=\"button\"\n (click)=\"close()\"\n class=\"snackbar__close\"\n aria-label=\"Dismiss\"\n [style.visibility]=\"showClose ? 'visible' : 'hidden'\"\n >\n \u00D7\n </button>\n @if (showProgressBar) {\n <div class=\"snackbar__progress\">\n <div class=\"snackbar__progress-fill\"></div>\n </div>\n }\n </section>\n}\n", styles: [":root{--border-radius-md: 4px;--colors-border-primary: #d0d0d0;--colors-surface-primary: white;--colors-border-information: #457fa6;--colors-surface-information: #ecf2f6;--colors-border-success: #3ba35a;--colors-surface-success: #ebf6ee;--colors-border-warning: #d1c844;--colors-surface-warning: #faf9ec;--colors-border-error: #c73e3d;--colors-surface-error: #f9ecec}.snackbar{--snackbar-border-color: var(--colors-border-primary);--snackbar-bg: var(--colors-surface-primary);--snackbar-text: #141414;--snackbar-title-color: var(--snackbar-text);--snackbar-icon-bg: #e5edf8;--snackbar-accent: #0047ba;--snackbar-input-border: var(--snackbar-border-color);--snackbar-progress: var(--snackbar-accent);display:flex;width:26.25rem;padding:1.25rem 1rem;justify-content:space-between;align-items:flex-start;gap:.25rem;position:relative;border-radius:var(--border-radius-md, 4px);border:1px solid var(--snackbar-border-color);background:var(--snackbar-bg);box-shadow:1px 1px 4px #00000040;color:var(--snackbar-text)}.snackbar__left{display:grid;gap:.5rem;flex:1 1 auto}.snackbar__left>.snackbar__title-row~*{margin-left:var(--snackbar-right-gutter, 1.85rem)}.snackbar__title-row{display:flex;align-items:center;gap:.25rem}.snackbar__title{margin:0;font-weight:400;font-size:1.2rem;line-height:1.2;color:var(--snackbar-title-color)}.snackbar__title-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}.snackbar__title-icon.has-icon{border-radius:50%;color:var(--snackbar-accent)}.snackbar__icon{font-weight:700;font-size:1rem;line-height:1}.snackbar__desc{margin:0;opacity:.9}.snackbar__input{width:100%;max-width:100%;box-sizing:border-box;padding:.5em;border-radius:4px;border:1px solid var(--snackbar-input-border);background:#fff;color:inherit}.snackbar__close{margin-left:.5em;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.5rem;padding:.25rem;line-height:1;cursor:pointer}.snackbar__progress{position:absolute;left:0;right:0;bottom:-1px;height:4px;overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.snackbar__progress-fill{height:100%;width:0%;background:var(--snackbar-progress);animation:fill var(--snackbar-progress-duration, 4s) linear forwards}@keyframes fill{to{width:100%}}.snackbar.is-default{--snackbar-border-color: var(--colors-border-primary, #d0d0d0);--snackbar-bg: var(--colors-surface-primary, white);--snackbar-text: #141414;--snackbar-title-color: #003995;--snackbar-icon-bg: #e5edf8;--snackbar-accent: #003995;--snackbar-input-border: #d0d0d0;--snackbar-progress: #003995}.snackbar.is-info{--snackbar-border-color: var(--colors-border-information, #457fa6);--snackbar-bg: var(--colors-surface-information, #ecf2f6);--snackbar-text: #24495c;--snackbar-title-color: #24495c;--snackbar-icon-bg: #a2bfd3;--snackbar-accent: #306a88;--snackbar-input-border: #a2bfd3;--snackbar-progress: #306a88}.snackbar.is-success{--snackbar-border-color: var(--colors-border-success, #3ba35a);--snackbar-bg: var(--colors-surface-success, #ebf6ee);--snackbar-text: #20522e;--snackbar-title-color: #20522e;--snackbar-icon-bg: #9dd1ac;--snackbar-accent: #2e7d3f;--snackbar-input-border: #9dd1ac;--snackbar-progress: #2e7d3f}.snackbar.is-warning{--snackbar-border-color: var(--colors-border-warning, #d1c844);--snackbar-bg: var(--colors-surface-warning, #faf9ec);--snackbar-text: #514a18;--snackbar-title-color: #514a18;--snackbar-icon-bg: #e8e3a1;--snackbar-accent: #7a6f13;--snackbar-input-border: #d1c844;--snackbar-progress: #7a6f13}.snackbar.is-error{--snackbar-border-color: var(--colors-border-error, #c73e3d);--snackbar-bg: var(--colors-surface-error, #f9ecec);--snackbar-text: #611a1a;--snackbar-title-color: #611a1a;--snackbar-icon-bg: #e39e9e;--snackbar-accent: #912525;--snackbar-input-border: #c73e3d;--snackbar-progress: #912525}.snackbar{position:fixed;top:24px;right:24px;z-index:1000;transform:translate(120%);transition:transform .6s ease}.snackbar.is-open{transform:translate(0)}lib-status-button{--status-button-padding: .25em .5em .25em 0}\n"] }]
|
|
2371
2365
|
}], propDecorators: { purpose: [{
|
|
2372
2366
|
type: Input
|
|
2373
2367
|
}], title: [{
|