@byuhbll/components 4.0.7 → 4.0.9
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/hbll-footer/hbll-footer.component.mjs +3 -3
- package/esm2022/lib/hbll-header/nav-bar/nav-bar.component.mjs +10 -3
- package/esm2022/lib/hbll-header/nav-bar-dropdown/nav-bar-dropdown.component.mjs +32 -4
- package/fesm2022/byuhbll-components.mjs +41 -6
- package/fesm2022/byuhbll-components.mjs.map +1 -1
- package/lib/hbll-header/nav-bar/nav-bar.component.d.ts +3 -0
- package/lib/hbll-header/nav-bar-dropdown/nav-bar-dropdown.component.d.ts +7 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, EventEmitter, input, Output } from '@angular/core';
|
|
1
|
+
import { Component, EventEmitter, input, Output, Input } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import { ExpandCollapseComponent } from '../../expand-collapse/expand-collapse.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -8,22 +8,50 @@ export class NavBarDropdownComponent {
|
|
|
8
8
|
this.title = input.required();
|
|
9
9
|
this.isSmallScreen = input(true);
|
|
10
10
|
this.openEvent = new EventEmitter();
|
|
11
|
+
this.hoverStarted = new EventEmitter();
|
|
11
12
|
// Public to be called by parent comp.
|
|
12
13
|
this.closeDropdown = () => (this.isOpen = false);
|
|
14
|
+
this.isInteracting = false;
|
|
13
15
|
this.isOpen = false;
|
|
16
|
+
this.hoverTimeout = null;
|
|
17
|
+
this.DROPDOWN_OPEN_DELAY_MS = 300;
|
|
14
18
|
this.handleClick = () => {
|
|
15
19
|
if (!this.isOpen)
|
|
16
20
|
this.openEvent.emit(this.title());
|
|
17
21
|
this.isOpen = !this.isOpen;
|
|
18
22
|
};
|
|
19
23
|
}
|
|
24
|
+
handleMouseEnter() {
|
|
25
|
+
if (this.isSmallScreen())
|
|
26
|
+
return;
|
|
27
|
+
if (this.isInteracting) {
|
|
28
|
+
this.isOpen = true;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
this.hoverTimeout = setTimeout(() => {
|
|
32
|
+
this.isOpen = true;
|
|
33
|
+
this.hoverStarted.emit();
|
|
34
|
+
}, this.DROPDOWN_OPEN_DELAY_MS);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
handleMouseLeave() {
|
|
38
|
+
if (this.hoverTimeout !== null) {
|
|
39
|
+
clearTimeout(this.hoverTimeout);
|
|
40
|
+
this.hoverTimeout = null;
|
|
41
|
+
}
|
|
42
|
+
this.isOpen = false;
|
|
43
|
+
}
|
|
20
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
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 } }, outputs: { openEvent: "openEvent" }, ngImport: i0, template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"
|
|
45
|
+
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\">\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 @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\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%;top:100%;left:0;background-color:#0047ba}\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"] }] }); }
|
|
22
46
|
}
|
|
23
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, decorators: [{
|
|
24
48
|
type: Component,
|
|
25
|
-
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)=\"
|
|
49
|
+
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\">\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 @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\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%;top:100%;left:0;background-color:#0047ba}\n"] }]
|
|
26
50
|
}], propDecorators: { openEvent: [{
|
|
27
51
|
type: Output
|
|
52
|
+
}], hoverStarted: [{
|
|
53
|
+
type: Output
|
|
54
|
+
}], isInteracting: [{
|
|
55
|
+
type: Input
|
|
28
56
|
}] } });
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2LWJhci1kcm9wZG93bi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvaGJsbC1oZWFkZXIvbmF2LWJhci1kcm9wZG93bi9uYXYtYmFyLWRyb3Bkb3duLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9oYmxsLWhlYWRlci9uYXYtYmFyLWRyb3Bkb3duL25hdi1iYXItZHJvcGRvd24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGlEQUFpRCxDQUFDOzs7QUFTMUYsTUFBTSxPQUFPLHVCQUF1QjtJQVBwQztRQVFJLFVBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7UUFDakMsa0JBQWEsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbEIsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDdkMsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRWxELHNDQUFzQztRQUN0QyxrQkFBYSxHQUFHLEdBQUcsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsQ0FBQztRQUVuQyxrQkFBYSxHQUFZLEtBQUssQ0FBQztRQUM5QixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGlCQUFZLEdBQXlDLElBQUksQ0FBQztRQUNqRCwyQkFBc0IsR0FBRyxHQUFHLENBQUM7UUFFcEMsZ0JBQVcsR0FBRyxHQUFHLEVBQUU7WUFDekIsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNO2dCQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO1lBQ3BELElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQy9CLENBQUMsQ0FBQztLQXVCTDtJQXJCRyxnQkFBZ0I7UUFDWixJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFBRSxPQUFPO1FBRWpDLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ3ZCLENBQUM7YUFBTSxDQUFDO1lBQ0osSUFBSSxDQUFDLFlBQVksR0FBRyxVQUFVLENBQUMsR0FBRyxFQUFFO2dCQUNoQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztnQkFDbkIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUM3QixDQUFDLEVBQUUsSUFBSSxDQUFDLHNCQUFzQixDQUFDLENBQUM7UUFDcEMsQ0FBQztJQUNMLENBQUM7SUFFRCxnQkFBZ0I7UUFDWixJQUFJLElBQUksQ0FBQyxZQUFZLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDN0IsWUFBWSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztZQUNoQyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUM3QixDQUFDO1FBRUQsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDeEIsQ0FBQzs4R0F2Q1EsdUJBQXVCO2tHQUF2Qix1QkFBdUIsdWpCQ1hwQyxtOUJBNkJBLGt0Q0R0QmMsdUJBQXVCLHVGQUFFLFlBQVk7OzJGQUl0Qyx1QkFBdUI7a0JBUG5DLFNBQVM7K0JBQ0ksc0JBQXNCLGNBQ3BCLElBQUksV0FDUCxDQUFDLHVCQUF1QixFQUFFLFlBQVksQ0FBQzs4QkFPdEMsU0FBUztzQkFBbEIsTUFBTTtnQkFDRyxZQUFZO3NCQUFyQixNQUFNO2dCQUtFLGFBQWE7c0JBQXJCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgaW5wdXQsIE91dHB1dCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBFeHBhbmRDb2xsYXBzZUNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2V4cGFuZC1jb2xsYXBzZS9leHBhbmQtY29sbGFwc2UuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdsaWItbmF2LWJhci1kcm9wZG93bicsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbRXhwYW5kQ29sbGFwc2VDb21wb25lbnQsIENvbW1vbk1vZHVsZV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL25hdi1iYXItZHJvcGRvd24uY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsOiAnLi9uYXYtYmFyLWRyb3Bkb3duLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgTmF2QmFyRHJvcGRvd25Db21wb25lbnQge1xuICAgIHRpdGxlID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuICAgIGlzU21hbGxTY3JlZW4gPSBpbnB1dCh0cnVlKTtcbiAgICBAT3V0cHV0KCkgb3BlbkV2ZW50ID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gICAgQE91dHB1dCgpIGhvdmVyU3RhcnRlZCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAgIC8vIFB1YmxpYyB0byBiZSBjYWxsZWQgYnkgcGFyZW50IGNvbXAuXG4gICAgY2xvc2VEcm9wZG93biA9ICgpID0+ICh0aGlzLmlzT3BlbiA9IGZhbHNlKTtcblxuICAgIEBJbnB1dCgpIGlzSW50ZXJhY3Rpbmc6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBwcm90ZWN0ZWQgaXNPcGVuID0gZmFsc2U7XG4gICAgcHJpdmF0ZSBob3ZlclRpbWVvdXQ6IFJldHVyblR5cGU8dHlwZW9mIHNldFRpbWVvdXQ+IHwgbnVsbCA9IG51bGw7XG4gICAgcHJpdmF0ZSByZWFkb25seSBEUk9QRE9XTl9PUEVOX0RFTEFZX01TID0gMzAwO1xuXG4gICAgcHJvdGVjdGVkIGhhbmRsZUNsaWNrID0gKCkgPT4ge1xuICAgICAgICBpZiAoIXRoaXMuaXNPcGVuKSB0aGlzLm9wZW5FdmVudC5lbWl0KHRoaXMudGl0bGUoKSk7XG4gICAgICAgIHRoaXMuaXNPcGVuID0gIXRoaXMuaXNPcGVuO1xuICAgIH07XG5cbiAgICBoYW5kbGVNb3VzZUVudGVyKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5pc1NtYWxsU2NyZWVuKCkpIHJldHVybjtcblxuICAgICAgICBpZiAodGhpcy5pc0ludGVyYWN0aW5nKSB7XG4gICAgICAgICAgICB0aGlzLmlzT3BlbiA9IHRydWU7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmhvdmVyVGltZW91dCA9IHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICB0aGlzLmhvdmVyU3RhcnRlZC5lbWl0KCk7XG4gICAgICAgICAgICB9LCB0aGlzLkRST1BET1dOX09QRU5fREVMQVlfTVMpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgaGFuZGxlTW91c2VMZWF2ZSgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuaG92ZXJUaW1lb3V0ICE9PSBudWxsKSB7XG4gICAgICAgICAgICBjbGVhclRpbWVvdXQodGhpcy5ob3ZlclRpbWVvdXQpO1xuICAgICAgICAgICAgdGhpcy5ob3ZlclRpbWVvdXQgPSBudWxsO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5pc09wZW4gPSBmYWxzZTtcbiAgICB9XG59XG4iLCI8c3BhblxuICAgIGNsYXNzPVwiaGJsbC1oZWFkZXItZHJvcGRvd24td3JhcHBlclwiXG4gICAgZGF0YS10ZXN0aWQ9XCJ3cmFwcGVyXCJcbiAgICBbbmdDbGFzc109XCJ7ICdoYmxsLWhlYWRlci1kZXNrdG9wJzogIWlzU21hbGxTY3JlZW4oKSB9XCJcbiAgICAobW91c2VlbnRlcik9XCJoYW5kbGVNb3VzZUVudGVyKClcIlxuICAgIChtb3VzZWxlYXZlKT1cImhhbmRsZU1vdXNlTGVhdmUoKVwiXG4+XG4gICAgPGJ1dHRvbiAoY2xpY2spPVwiaGFuZGxlQ2xpY2soKVwiIGRhdGEtdGVzdGlkPVwiYnRuXCI+XG4gICAgICAgIHt7IHRpdGxlKCkgfX1cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJtYXRlcmlhbC1zeW1ib2xzLW91dGxpbmVkIGhibGwtaGVhZGVyLWljb25cIj5cbiAgICAgICAgICAgIHt7ICdrZXlib2FyZF9hcnJvd18nICsgKGlzT3BlbiA/ICd1cCcgOiAnZG93bicpIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbiAgICBAaWYgKCFpc1NtYWxsU2NyZWVuKCkpIHtcbiAgICAgICAgQGlmIChpc09wZW4pIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJoYmxsLWhlYWRlci1kcm9wZG93blwiIGRhdGEtdGVzdGlkPVwiZHJvcGRvd25cIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICB9IEBlbHNlIHtcbiAgICAgICAgPGxpYi1leHBhbmQtY29sbGFwc2UgW2lzRXhwYW5kZWRdPVwiaXNPcGVuXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2xpYi1leHBhbmQtY29sbGFwc2U+XG4gICAgfVxuPC9zcGFuPlxuXG48bmctdGVtcGxhdGUgI2NvbnRlbnQ+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -94,23 +94,51 @@ class NavBarDropdownComponent {
|
|
|
94
94
|
this.title = input.required();
|
|
95
95
|
this.isSmallScreen = input(true);
|
|
96
96
|
this.openEvent = new EventEmitter();
|
|
97
|
+
this.hoverStarted = new EventEmitter();
|
|
97
98
|
// Public to be called by parent comp.
|
|
98
99
|
this.closeDropdown = () => (this.isOpen = false);
|
|
100
|
+
this.isInteracting = false;
|
|
99
101
|
this.isOpen = false;
|
|
102
|
+
this.hoverTimeout = null;
|
|
103
|
+
this.DROPDOWN_OPEN_DELAY_MS = 300;
|
|
100
104
|
this.handleClick = () => {
|
|
101
105
|
if (!this.isOpen)
|
|
102
106
|
this.openEvent.emit(this.title());
|
|
103
107
|
this.isOpen = !this.isOpen;
|
|
104
108
|
};
|
|
105
109
|
}
|
|
110
|
+
handleMouseEnter() {
|
|
111
|
+
if (this.isSmallScreen())
|
|
112
|
+
return;
|
|
113
|
+
if (this.isInteracting) {
|
|
114
|
+
this.isOpen = true;
|
|
115
|
+
}
|
|
116
|
+
else {
|
|
117
|
+
this.hoverTimeout = setTimeout(() => {
|
|
118
|
+
this.isOpen = true;
|
|
119
|
+
this.hoverStarted.emit();
|
|
120
|
+
}, this.DROPDOWN_OPEN_DELAY_MS);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
handleMouseLeave() {
|
|
124
|
+
if (this.hoverTimeout !== null) {
|
|
125
|
+
clearTimeout(this.hoverTimeout);
|
|
126
|
+
this.hoverTimeout = null;
|
|
127
|
+
}
|
|
128
|
+
this.isOpen = false;
|
|
129
|
+
}
|
|
106
130
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
107
|
-
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 } }, outputs: { openEvent: "openEvent" }, ngImport: i0, template: "<span\n class=\"hbll-header-dropdown-wrapper\"\n data-testid=\"wrapper\"\n [ngClass]=\"{ 'hbll-header-desktop': !isSmallScreen() }\"\n (mouseenter)=\"
|
|
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\">\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 @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\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%;top:100%;left:0;background-color:#0047ba}\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"] }] }); }
|
|
108
132
|
}
|
|
109
133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarDropdownComponent, decorators: [{
|
|
110
134
|
type: Component,
|
|
111
|
-
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)=\"
|
|
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\">\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 @if (isOpen) {\n <div class=\"hbll-header-dropdown\" data-testid=\"dropdown\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n }\n } @else {\n <lib-expand-collapse [isExpanded]=\"isOpen\">\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%;top:100%;left:0;background-color:#0047ba}\n"] }]
|
|
112
136
|
}], propDecorators: { openEvent: [{
|
|
113
137
|
type: Output
|
|
138
|
+
}], hoverStarted: [{
|
|
139
|
+
type: Output
|
|
140
|
+
}], isInteracting: [{
|
|
141
|
+
type: Input
|
|
114
142
|
}] } });
|
|
115
143
|
|
|
116
144
|
/**
|
|
@@ -123,6 +151,7 @@ class NavBarComponent {
|
|
|
123
151
|
this.bo = inject(BreakpointObserver);
|
|
124
152
|
this.mainSiteBaseUrl = input.required();
|
|
125
153
|
this.height = input(null);
|
|
154
|
+
this.isInteractingWithNavbar = false;
|
|
126
155
|
// If any section opens up, close all others. Only one section open at a time.
|
|
127
156
|
this.handleDropdownOpenEvent = (title) => {
|
|
128
157
|
this.dropdownComps
|
|
@@ -441,12 +470,18 @@ class NavBarComponent {
|
|
|
441
470
|
];
|
|
442
471
|
});
|
|
443
472
|
}
|
|
473
|
+
handleHoverStarted() {
|
|
474
|
+
this.isInteractingWithNavbar = true;
|
|
475
|
+
}
|
|
476
|
+
handleNavbarMouseLeave() {
|
|
477
|
+
this.isInteractingWithNavbar = false;
|
|
478
|
+
}
|
|
444
479
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarComponent, isStandalone: true, selector: "lib-nav-bar", inputs: { mainSiteBaseUrl: { classPropertyName: "mainSiteBaseUrl", publicName: "mainSiteBaseUrl", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dropdownComps", predicate: NavBarDropdownComponent, descendants: true }], ngImport: i0, template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{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}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch: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-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NavBarDropdownComponent, selector: "lib-nav-bar-dropdown", inputs: ["title", "isSmallScreen"], outputs: ["openEvent"] }] }); }
|
|
480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: NavBarComponent, isStandalone: true, selector: "lib-nav-bar", inputs: { mainSiteBaseUrl: { classPropertyName: "mainSiteBaseUrl", publicName: "mainSiteBaseUrl", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dropdownComps", predicate: NavBarDropdownComponent, descendants: true }], ngImport: i0, template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n (mouseleave)=\"handleNavbarMouseLeave()\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n [isInteracting]=\"isInteractingWithNavbar\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n (hoverStarted)=\"handleHoverStarted()\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{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}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch: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-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NavBarDropdownComponent, selector: "lib-nav-bar-dropdown", inputs: ["title", "isSmallScreen", "isInteracting"], outputs: ["openEvent", "hoverStarted"] }] }); }
|
|
446
481
|
}
|
|
447
482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NavBarComponent, decorators: [{
|
|
448
483
|
type: Component,
|
|
449
|
-
args: [{ selector: 'lib-nav-bar', standalone: true, imports: [CommonModule, NavBarDropdownComponent], template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{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}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch: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-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"] }]
|
|
484
|
+
args: [{ selector: 'lib-nav-bar', standalone: true, imports: [CommonModule, NavBarDropdownComponent], template: "<nav\n [style]=\"{ height: height() ? height() + 'px' : 'auto' }\"\n [ngClass]=\"{ 'hbll-header-desktop': !isScreenSmall() }\"\n data-testid=\"nav\"\n (mouseleave)=\"handleNavbarMouseLeave()\"\n>\n <ul class=\"hbll-header-nav-bar\">\n <li id=\"navHome\">\n <a [href]=\"mainSiteBaseUrl()\">\n @if (isScreenSmall()) {\n <span class=\"material-symbols-outlined hbll-header-icon\"> home </span>\n }\n Home\n </a>\n </li>\n @for (navInfo of navInfos(); track navInfo.title) {\n <li>\n <lib-nav-bar-dropdown\n [title]=\"navInfo.title\"\n [isSmallScreen]=\"isScreenSmall() ?? true\"\n [isInteracting]=\"isInteractingWithNavbar\"\n (openEvent)=\"handleDropdownOpenEvent($event)\"\n (hoverStarted)=\"handleHoverStarted()\"\n >\n <div\n class=\"hbll-header-content\"\n [ngStyle]=\"{\n 'background-color': isScreenSmall() ? '#336cc8' : 'inherit',\n }\"\n >\n @if (navInfo.mainSection) {\n <section>\n <h2>{{ navInfo.mainSection.title }}</h2>\n <ul class=\"hbll-header-main hbll-header-links\">\n @for (link of navInfo.mainSection.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n </a>\n </li>\n }\n </ul>\n @if (navInfo.mainSection.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"navInfo.mainSection.auxiliaryLink.url\"\n >\n {{ navInfo.mainSection.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n @for (section of navInfo.otherSections; track section.title) {\n <section>\n <h3>{{ section.title }}</h3>\n <ul class=\"hbll-header-links\">\n @for (link of section.links; track link.label) {\n <li>\n <a [href]=\"link.url\">\n {{ link.label }}\n @if (link.icon) {\n <span\n class=\"material-symbols-outlined hbll-header-icon-right\"\n >\n {{ link.icon }}\n </span>\n }\n </a>\n </li>\n }\n </ul>\n @if (section.auxiliaryLink) {\n <a\n class=\"hbll-header-see-all\"\n [href]=\"section.auxiliaryLink.url\"\n >\n {{ section.auxiliaryLink.label }}\n <span class=\"material-symbols-outlined hbll-header-icon\">\n chevron_right\n </span>\n </a>\n }\n </section>\n }\n </div>\n </lib-nav-bar-dropdown>\n </li>\n }\n <li>\n <a id=\"navSearch\" [href]=\"mainSiteBaseUrl() + '/search'\">\n @if (isScreenSmall()) {\n Search\n }\n <span\n class=\"material-symbols-outlined\"\n [ngClass]=\"{ 'hbll-header-icon': isScreenSmall() }\"\n >\n search\n </span>\n </a>\n </li>\n </ul>\n</nav>\n", styles: ["nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{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}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a .hbll-header-icon,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch .hbll-header-icon{font-size:1.3em;margin-bottom:-.1em}nav.hbll-header-desktop .hbll-header-nav-bar li#navHome a:hover,nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch: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-icon-right{margin-left:.4em;font-size:1.2em}nav{background-color:#0047ba;position:absolute;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;width:100vw;max-width:400px;right:0}nav li{list-style-type:none}nav ::-webkit-scrollbar{display:none}nav .hbll-header-nav-bar{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0}nav .hbll-header-nav-bar .hbll-header-links{padding:0}nav .hbll-header-nav-bar li{width:100%}nav .hbll-header-nav-bar li#navHome .hbll-header-icon{margin-right:.2em}nav .hbll-header-nav-bar li a{color:#fff;display:flex;align-items:center;width:100%;padding:.6em}nav .hbll-header-nav-bar li #navSearch{justify-content:flex-end;font-size:1.3em}nav .hbll-header-nav-bar li #navSearch .hbll-header-icon{margin-left:.2em}nav .hbll-header-nav-bar li .hbll-header-content{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1.4em}nav .hbll-header-nav-bar li .hbll-header-content section{padding-left:3em}nav .hbll-header-nav-bar li .hbll-header-content section:first-of-type{padding-top:1em}nav .hbll-header-nav-bar li .hbll-header-content section h2,nav .hbll-header-nav-bar li .hbll-header-content section h3{font-weight:600;font-size:1.4em;margin-bottom:.4em}nav .hbll-header-nav-bar li .hbll-header-content section+section{margin-top:1.8em}nav .hbll-header-nav-bar li .hbll-header-content section li a{padding:.6em .8em;margin:.2em 0}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{border-top:1px solid rgba(255,255,255,.3);justify-content:flex-end}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-no-see-all{margin-bottom:1em}nav .hbll-header-nav-bar li .hbll-header-content section .hbll-header-main{padding-bottom:.4em}nav.hbll-header-desktop{overflow:initial;background-color:#fff;padding:0 2em;position:relative;max-width:100%}nav.hbll-header-desktop .hbll-header-nav-bar{flex-direction:row;align-items:center}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links{background-color:#0047ba;display:flex;flex-direction:column;align-items:flex-start}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li{width:100%}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a{transition:background-color .1s ease-in-out}nav.hbll-header-desktop .hbll-header-nav-bar .hbll-header-links li a:hover{background-color:#fff3;width:100%}nav.hbll-header-desktop .hbll-header-nav-bar li{width:auto;height:100%}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch{transition:all .2s ease-in-out;font-size:1.2em;background-color:transparent}nav.hbll-header-desktop .hbll-header-nav-bar li #navSearch:hover{background-color:transparent;transform:scale(115%);color:#0047ba}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content{display:flex;justify-content:center;padding-top:1.4em;padding-right:10%;padding-left:10%}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section{padding-top:0;padding-left:5%;width:30em}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section+section{border-left:1px solid rgba(255,255,255,.3);margin-top:0}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all{margin-right:1em;transition:color .1s ease-in-out;width:auto}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content section .hbll-header-see-all:hover{color:#ffffffd9}nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h2,nav.hbll-header-desktop .hbll-header-nav-bar li .hbll-header-content h3{color:#fff}\n"] }]
|
|
450
485
|
}], propDecorators: { dropdownComps: [{
|
|
451
486
|
type: ViewChildren,
|
|
452
487
|
args: [NavBarDropdownComponent]
|
|
@@ -816,11 +851,11 @@ class HbllFooterComponent {
|
|
|
816
851
|
this.emailForm.controls.status.setValue(status);
|
|
817
852
|
}
|
|
818
853
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
819
|
-
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 <div class=\"hbll-footer-links\">\n <section>\n <h3>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\">\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>\n <h3>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>\n <h3>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>\n <h3>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\">\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 <a href=\"https://infosec.byu.edu/cookie-prefs\" target=\"_blank\"\n >Cookie Preferences</a\n >\n </div>\n </section>\n </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=\"hbllFooterEmailEmail\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailEmail\"\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=Public+Sans:ital,wght@0,200..400;1,200..400&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}footer{line-height:1.2em;background-color:#e6e6e6}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center}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:24px!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:Public Sans,sans-serif;font-optical-sizing:auto;font-weight:200;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}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}@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"] }] }); }
|
|
854
|
+
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 <div class=\"hbll-footer-links\">\n <section>\n <h3>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: 0px;\">\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>\n <h3>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>\n <h3>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>\n <h3>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\">\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 <a href=\"https://infosec.byu.edu/cookie-prefs\" target=\"_blank\"\n >Cookie Preferences</a\n >\n </div>\n </section>\n </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=\"hbllFooterEmailEmail\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailEmail\"\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=Public+Sans:ital,wght@0,200..400;1,200..400&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}footer{line-height:1.2em;background-color:#e6e6e6}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center}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:24px!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:Public Sans,sans-serif;font-optical-sizing:auto;font-weight:200;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}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}@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"] }] }); }
|
|
820
855
|
}
|
|
821
856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HbllFooterComponent, decorators: [{
|
|
822
857
|
type: Component,
|
|
823
|
-
args: [{ selector: 'lib-hbll-footer', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <div class=\"hbll-footer-links\">\n <section>\n <h3>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\">\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>\n <h3>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>\n <h3>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>\n <h3>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\">\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 <a href=\"https://infosec.byu.edu/cookie-prefs\" target=\"_blank\"\n >Cookie Preferences</a\n >\n </div>\n </section>\n </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=\"hbllFooterEmailEmail\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailEmail\"\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=Public+Sans:ital,wght@0,200..400;1,200..400&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}footer{line-height:1.2em;background-color:#e6e6e6}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center}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:24px!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:Public Sans,sans-serif;font-optical-sizing:auto;font-weight:200;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}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}@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"] }]
|
|
858
|
+
args: [{ selector: 'lib-hbll-footer', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<footer>\n <div class=\"hbll-footer-wrapper\">\n <div class=\"hbll-footer-links\">\n <section>\n <h3>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: 0px;\">\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>\n <h3>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>\n <h3>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>\n <h3>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\">\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 <a href=\"https://infosec.byu.edu/cookie-prefs\" target=\"_blank\"\n >Cookie Preferences</a\n >\n </div>\n </section>\n </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=\"hbllFooterEmailEmail\">\n Question or comment <span class=\"hbll-footer-email-required\">*</span>\n </label>\n <textarea\n id=\"hbllFooterEmailEmail\"\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=Public+Sans:ital,wght@0,200..400;1,200..400&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}footer{line-height:1.2em;background-color:#e6e6e6}footer .hbll-footer-wrapper{display:flex;flex-direction:column;align-items:center}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:24px!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:Public Sans,sans-serif;font-optical-sizing:auto;font-weight:200;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}footer .hbll-footer-wrapper .hbll-footer-bottom .hbll-footer-privacy a{text-decoration:underline}@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"] }]
|
|
824
859
|
}], propDecorators: { emailDialog: [{
|
|
825
860
|
type: ViewChild,
|
|
826
861
|
args: ['emailDialog']
|