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

package/fesm2022/byuhbll-components.mjs

@@ -1,6 +1,6 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, LowerCasePipe } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, ViewChild, Input, input, EventEmitter, Output, inject, ViewChildren, Pipe, ElementRef, HostListener, Renderer2, viewChild, computed, ViewEncapsulation } from '@angular/core';
@@ -12,7 +12,7 @@ import { FormBuilder, Validators, ReactiveFormsModule, FormControl, NonNullableF
 import { switchMap, startWith, catchError, tap, map as map$1, filter } from 'rxjs/operators';
 import urlcat from 'urlcat';
 import { jwtDecode } from 'jwt-decode';
-import * as i3$1 from '@angular/material/tooltip';
+import * as i1$1 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4 from '@angular/material/autocomplete';
@@ -590,7 +590,7 @@ class ImpersonateModalComponent {
     set showModal(open) {
         this.isOpen = open;
         if (open) {
-            // Set focus on search input shortly after openeing modal so user notices
+            // Set focus on search input shortly after opening modal so user notices
             // the input receiving focus.
             setTimeout(() => this.eref.nativeElement.querySelector('#searchInput')?.focus(), 250);
         }
@@ -713,6 +713,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
+var AccessStatus;
+(function (AccessStatus) {
+    AccessStatus["OK"] = "ok";
+    AccessStatus["BLOCKED"] = "blocked";
+    AccessStatus["NONE"] = "none";
+})(AccessStatus || (AccessStatus = {}));
+
+class CopyTooltipComponent {
+    constructor() {
+        this.position = 'below';
+        this.clipboardCopyMessage = 'Copy';
+        this.copyToClipboard = async (text) => {
+            // Ensure the tooltip doesn't disappear when button is clicked
+            this.tooltip.show();
+            if (text) {
+                try {
+                    await navigator.clipboard.writeText(text).then(() => {
+                        this.clipboardCopyMessage = 'Copied!';
+                    });
+                }
+                catch {
+                    this.clipboardCopyMessage = 'Failed to copy';
+                }
+            }
+            else
+                this.clipboardCopyMessage = 'Nothing to copy!';
+        };
+        this.handleMouseLeave = () => {
+            // Manually hide in case the user hovers over the tooltip
+            this.tooltip.hide();
+            // Delay to account for tooltip animation
+            setTimeout(() => {
+                this.clipboardCopyMessage = 'Copy';
+            }, 100);
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CopyTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: CopyTooltipComponent, isStandalone: true, selector: "lib-copy-tooltip", inputs: { position: "position", copyText: "copyText" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<div\n  (click)=\"copyToClipboard(copyText)\"\n  [matTooltip]=\"clipboardCopyMessage\"\n  [matTooltipPosition]=\"position\"\n  (mouseleave)=\"handleMouseLeave()\"\n  data-testid=\"tooltip\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CopyTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-copy-tooltip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div\n  (click)=\"copyToClipboard(copyText)\"\n  [matTooltip]=\"clipboardCopyMessage\"\n  [matTooltipPosition]=\"position\"\n  (mouseleave)=\"handleMouseLeave()\"\n  data-testid=\"tooltip\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { position: [{
+                type: Input
+            }], copyText: [{
+                type: Input
+            }], tooltip: [{
+                type: ViewChild,
+                args: [MatTooltip]
+            }] } });
+
+const USER_PHOTO_URL = 'https://y.byu.edu/ry/ae/prod/person/cgi/personPhoto.cgi?n=';
+const PERSON_SUMMARY_PATH = '/summary/:libraryId/';
+const PERSON_BASE_URI = 'https://apps.lib.byu.edu/person/v2/';
+const INDEPENDENT_STUDY_RESPONSE_PATH = '/independent-study/:libraryId/';
+const PATRON_ACCOUNTS_PATH = '/patron/accounts';
+const LIBRARY_API_BASE_URI = 'https://apps.lib.byu.edu/v1';
+class ImpersonationBannerComponent {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.accessTokenPayload = input.required();
+        this.endImpersonation = new EventEmitter();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.parsedToken = computed(() => this.accessTokenPayload().token ? jwtDecode(this.accessTokenPayload().token) : {});
+        this.isImpersonating = computed(() => !!this.parsedToken()['impersonator']);
+        this.libraryId = computed(() => this.parsedToken()['library_id']);
+        this.user = toSignal(combineLatest([toObservable(this.libraryId), toObservable(this.isImpersonating)]).pipe(switchMap(([libraryId, isImpersonating]) => libraryId && isImpersonating
+            ? this.http.get(urlcat(PERSON_BASE_URI, PERSON_SUMMARY_PATH, {
+                libraryId,
+            }), {
+                headers: {
+                    Authorization: `Bearer ${this.accessTokenPayload().token}`,
+                },
+            })
+            : of(null))));
+        this.userFullName = computed(() => this.parsedToken()['given_name']
+            ? `${this.parsedToken()['given_name']} ${this.parsedToken()['family_name']}`
+            : 'Unknown');
+        this.isRestricted = computed(() => this.user()?.restricted);
+        this.userInfoTabs = computed(() => new Map([
+            ['Net ID', this.parsedToken()['net_id'] ?? ''],
+            ['BYU ID', this.parsedToken()['byu_id'] ?? ''],
+            ['Email', this.parsedToken()['email'] ?? ''],
+        ]));
+        this.userPhotoUrl = computed(() => this.parsedToken()['net_id'] ? USER_PHOTO_URL + this.parsedToken()['net_id'] : '');
+        this.activityStatus = computed(() => {
+            if (this.user()?.is_retired)
+                return 'retired';
+            else if (this.user()?.is_employee)
+                return 'active';
+            else if (this.user()?.primary_position_type)
+                return 'inactive';
+            return null;
+        });
+        this.employeeStatusDescription = computed(() => {
+            if (!this.user()) {
+                return null;
+            }
+            let description = '';
+            if (this.user().is_retired) {
+                description = 'Retired';
+            }
+            else if (this.user().is_employee) {
+                description = 'Active';
+            }
+            else if (this.user().primary_position_type) {
+                description = 'Inactive';
+            }
+            if (this.user().primary_position_type_display) {
+                description += ` ${this.user().primary_position_type_display} Employee`;
+            }
+            return description ?? null;
+        });
+        this.independentStudyStatus = toSignal(combineLatest([toObservable(this.libraryId), toObservable(this.isImpersonating)]).pipe(switchMap(([libraryId, isImpersonating]) => libraryId && isImpersonating
+            ? this.http
+                .get(urlcat(PERSON_BASE_URI, INDEPENDENT_STUDY_RESPONSE_PATH, {
+                libraryId,
+            }), {
+                headers: {
+                    Authorization: `Bearer ${this.accessTokenPayload().token}`,
+                },
+            })
+                .pipe(map$1((response) => response?.is_enrolled))
+            : of(null))));
+        this.accountStatuses = toSignal(toObservable(this.isImpersonating).pipe(switchMap((isImpersonating) => {
+            if (!isImpersonating) {
+                return of(null);
+            }
+            return this.http
+                .get(urlcat(LIBRARY_API_BASE_URI, PATRON_ACCOUNTS_PATH), {
+                headers: {
+                    Authorization: `Bearer ${this.accessTokenPayload().token}`,
+                },
+            })
+                .pipe(map$1((accounts) => {
+                const accountStatuses = {
+                    ok: [],
+                    blocked: [],
+                    none: [],
+                };
+                Object.values(accounts.applications).forEach((app) => {
+                    switch (app.access) {
+                        case AccessStatus.OK:
+                            accountStatuses.ok.push(app);
+                            break;
+                        case AccessStatus.BLOCKED:
+                            accountStatuses.blocked.push(app);
+                            break;
+                        case AccessStatus.NONE:
+                            accountStatuses.none.push(app);
+                            break;
+                    }
+                });
+                return accountStatuses;
+            }));
+        })));
+        this.STATUSES = AccessStatus;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: ImpersonationBannerComponent, isStandalone: true, selector: "lib-impersonation-banner", inputs: { accessTokenPayload: { classPropertyName: "accessTokenPayload", publicName: "accessTokenPayload", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { endImpersonation: "endImpersonation" }, ngImport: i0, template: "@if (isImpersonating()) {\n    <div class=\"banner-padding\"></div>\n    <div class=\"top-banner\">\n        <div class=\"banner-group profile-name-container\">\n            <div class=\"profile-avatar\">\n                <div class=\"profile-image\">\n                    <img\n                        [src]=\"userPhotoUrl()\"\n                        [alt]=\"userFullName()\"\n                        alt=\"user photo\"\n                        onerror=\"this.remove()\"\n                    />\n                </div>\n                <span class=\"material-symbols-outlined profile-icon\"> person </span>\n            </div>\n            <div class=\"profile-name-group\">\n                <span class=\"soft\">Impersonating</span>\n                <div class=\"profile-name-wrapper\">\n                    <span class=\"profile-name\">{{ userFullName() }}</span>\n                    @if (accountStatuses()) {\n                        <div class=\"application-status-bar\">\n                            @if (accountStatuses()!.ok.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-ok application-status\">\n                                        <span class=\"material-symbols-outlined icon-checkmark\">\n                                            check\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.ok.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            OK Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.ok;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span class=\"material-symbols-outlined\">\n                                                        check\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.blocked.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-blocked application-status\">\n                                        <span class=\"material-symbols-outlined icon-warning\">\n                                            warning\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.blocked.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            Blocked Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.blocked;\n                                                track application.code\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-warning\"\n                                                    >\n                                                        warning\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.none.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-none application-status\">\n                                        <span class=\"material-symbols-outlined icon-lock\">\n                                            lock\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.none.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            No Account\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.none;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span class=\"material-symbols-outlined\">\n                                                        lock\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n                <div class=\"profile-detail\">\n                    <span class=\"soft label\">{{ detail.key }}</span>\n                    <lib-copy-tooltip [copyText]=\"detail.value\">\n                        <div class=\"profile-detail-tag white-tag clickable\">\n                            {{ detail.value || 'Unknown' }}\n                        </div>\n                    </lib-copy-tooltip>\n                </div>\n            }\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            <div class=\"profile-detail\">\n                <span class=\"soft label\">Status</span>\n                <div class=\"multiple-detail-tags\">\n                    <div\n                        class=\"profile-detail-tag color-tag\"\n                        title=\"{{ employeeStatusDescription() }}\"\n                    >\n                        {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n                        @if (activityStatus()) {\n                            <span\n                                class=\"profile-status-circle\"\n                                [class.status-active]=\"activityStatus() === 'active'\"\n                                [class.status-inactive]=\"activityStatus() === 'inactive'\"\n                                [class.status-retired]=\"activityStatus() === 'retired'\"\n                            ></span>\n                        }\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"spacer\"></div>\n        <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n            <span class=\"material-symbols-outlined icon\"> close </span>\n            <span class=\"exit-text\">Exit</span>\n        </button>\n    </div>\n    @if (isRestricted()) {\n        <div class=\"restricted-bar-padding\"></div>\n        <div class=\"restricted-bar\">\n            <span class=\"title\">restricted person</span>\n            <span class=\"text\">\n                If anyone asks about this person, you are instructed to respond,\n                <span class=\"emphasize\">\"We have no records for this person.\"</span>\n            </span>\n        </div>\n    }\n    <div class=\"right-border\"></div>\n    <div class=\"bottom-border\"></div>\n    <div class=\"left-border\"></div>\n}\n", styles: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;box-sizing:content-box;border:none;position:fixed;z-index:6000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;box-sizing:border-box;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.status-tooltip{text-align:left;font-size:1.4em;padding:.8em;line-height:2em;width:100%;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.end-impersonation-button .exit-text{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "component", type: CopyTooltipComponent, selector: "lib-copy-tooltip", inputs: ["position", "copyText"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ImpersonationBannerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, CopyTooltipComponent], selector: 'lib-impersonation-banner', template: "@if (isImpersonating()) {\n    <div class=\"banner-padding\"></div>\n    <div class=\"top-banner\">\n        <div class=\"banner-group profile-name-container\">\n            <div class=\"profile-avatar\">\n                <div class=\"profile-image\">\n                    <img\n                        [src]=\"userPhotoUrl()\"\n                        [alt]=\"userFullName()\"\n                        alt=\"user photo\"\n                        onerror=\"this.remove()\"\n                    />\n                </div>\n                <span class=\"material-symbols-outlined profile-icon\"> person </span>\n            </div>\n            <div class=\"profile-name-group\">\n                <span class=\"soft\">Impersonating</span>\n                <div class=\"profile-name-wrapper\">\n                    <span class=\"profile-name\">{{ userFullName() }}</span>\n                    @if (accountStatuses()) {\n                        <div class=\"application-status-bar\">\n                            @if (accountStatuses()!.ok.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-ok application-status\">\n                                        <span class=\"material-symbols-outlined icon-checkmark\">\n                                            check\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.ok.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            OK Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.ok;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span class=\"material-symbols-outlined\">\n                                                        check\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.blocked.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-blocked application-status\">\n                                        <span class=\"material-symbols-outlined icon-warning\">\n                                            warning\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.blocked.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            Blocked Applications\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.blocked;\n                                                track application.code\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span\n                                                        class=\"material-symbols-outlined icon-warning\"\n                                                    >\n                                                        warning\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                            @if (accountStatuses()!.none.length) {\n                                <div class=\"application-status-indicator\">\n                                    <span class=\"application-status-none application-status\">\n                                        <span class=\"material-symbols-outlined icon-lock\">\n                                            lock\n                                        </span>\n                                        <span class=\"application-count\">{{\n                                            accountStatuses()!.none.length\n                                        }}</span>\n                                    </span>\n                                    <div class=\"status-tooltip-container\">\n                                        <div class=\"status-tooltip\">\n                                            No Account\n                                            <hr />\n                                            @for (\n                                                application of accountStatuses()!.none;\n                                                track application.label\n                                            ) {\n                                                <div class=\"application-status\">\n                                                    <span class=\"material-symbols-outlined\">\n                                                        lock\n                                                    </span>\n                                                    <span>{{ application.label }}</span>\n                                                </div>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </div>\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            @for (detail of userInfoTabs() | keyvalue; track detail.key) {\n                <div class=\"profile-detail\">\n                    <span class=\"soft label\">{{ detail.key }}</span>\n                    <lib-copy-tooltip [copyText]=\"detail.value\">\n                        <div class=\"profile-detail-tag white-tag clickable\">\n                            {{ detail.value || 'Unknown' }}\n                        </div>\n                    </lib-copy-tooltip>\n                </div>\n            }\n        </div>\n        <div class=\"profile-details-container banner-group\">\n            <div class=\"profile-detail\">\n                <span class=\"soft label\">Status</span>\n                <div class=\"multiple-detail-tags\">\n                    <div\n                        class=\"profile-detail-tag color-tag\"\n                        title=\"{{ employeeStatusDescription() }}\"\n                    >\n                        {{ user()?.primary_position_type_display ?? 'Non-employee' }}\n                        @if (activityStatus()) {\n                            <span\n                                class=\"profile-status-circle\"\n                                [class.status-active]=\"activityStatus() === 'active'\"\n                                [class.status-inactive]=\"activityStatus() === 'inactive'\"\n                                [class.status-retired]=\"activityStatus() === 'retired'\"\n                            ></span>\n                        }\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ (user()?.undergrad_graduate_status | titlecase) || 'Non-student' }}\n                    </div>\n                    <div class=\"profile-detail-tag color-tag\">\n                        {{ independentStudyStatus() ? 'Independent Study' : 'No Ind. Study' }}\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"spacer\"></div>\n        <button class=\"end-impersonation-button shadow\" (click)=\"this.endImpersonation.emit()\">\n            <span class=\"material-symbols-outlined icon\"> close </span>\n            <span class=\"exit-text\">Exit</span>\n        </button>\n    </div>\n    @if (isRestricted()) {\n        <div class=\"restricted-bar-padding\"></div>\n        <div class=\"restricted-bar\">\n            <span class=\"title\">restricted person</span>\n            <span class=\"text\">\n                If anyone asks about this person, you are instructed to respond,\n                <span class=\"emphasize\">\"We have no records for this person.\"</span>\n            </span>\n        </div>\n    }\n    <div class=\"right-border\"></div>\n    <div class=\"bottom-border\"></div>\n    <div class=\"left-border\"></div>\n}\n", styles: [".top-banner,.bottom-border,.right-border,.left-border{background-color:#9070bf;box-sizing:content-box;border:none;position:fixed;z-index:6000}lib-copy-tooltip{z-index:10000;display:block}.top-banner,.bottom-border{left:0;right:0}.right-border,.left-border{width:7px;top:0;bottom:0}.top-banner{top:0;height:5em;display:flex;justify-content:space-between;width:100%;align-items:center;padding:2.5em;box-sizing:border-box;color:#f3f3f3}.bottom-border{bottom:0;height:7px}.right-border{right:0}.left-border{left:0}.banner-padding{padding-top:5em}.banner-group{display:flex;margin-right:1.6em}.profile-details-container{height:2.4em;display:flex;min-width:0}.profile-details-container .profile-detail{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:space-between;margin-right:.6em;font-weight:600;min-width:0}.profile-details-container .profile-detail .label{font-size:.75em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag{font-size:.8em;padding:.2em .4em;border-radius:5px;display:inline-flex;align-items:center;gap:.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%}.profile-details-container .profile-detail .profile-detail-tag:hover{min-width:max-content;z-index:1000}.profile-details-container .profile-detail .profile-detail-tag:last-of-type{margin-right:0}.profile-details-container .profile-detail .multiple-detail-tags{display:flex;flex-flow:row nowrap;min-width:0;max-width:100%}.profile-details-container .profile-detail .multiple-detail-tags .profile-detail-tag{margin-right:.6em}.profile-name-container{display:flex;align-items:center}.profile-name-container .profile-avatar{border-radius:50%;background-color:#fff;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:#a9a9a9;align-self:center;font-size:15px;overflow:hidden;height:3.5em;width:3.5em;margin-right:.6em;flex-shrink:0}.profile-name-container .profile-avatar .profile-icon{margin:-.25em}.profile-name-container .profile-avatar .profile-image{height:100%;width:100%;object-fit:cover;font-size:1em}.profile-name-container .profile-avatar .profile-image+.profile-icon{display:none;font-size:3.5em}.profile-name-container .profile-avatar .profile-image:empty{display:none}.profile-name-container .profile-avatar .profile-image:empty+.profile-icon{display:block}.profile-name-container .profile-name-group{font-size:1em;font-weight:600}.profile-name-container .profile-name-group .profile-name-wrapper{display:flex;align-items:center;white-space:nowrap}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar{margin-left:1em;opacity:1;display:flex;align-items:center}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator{position:relative;margin-right:.8em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator .application-count{margin-left:.5em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-indicator:last-child{margin-right:0}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status:hover+.status-tooltip-container{opacity:1}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok{color:#87ed8f}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-ok .icon-checkmark{background-color:#87ed8f;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked{color:#e9ce34}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .icon-warning{font-size:1.7em;vertical-align:middle}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-blocked .application-count{margin-left:.1em}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none{color:#f4785b}.profile-name-container .profile-name-group .profile-name-wrapper .application-status-bar .application-status-none .icon-lock{background-color:#f4785b;color:#9070bf;border-radius:50%;padding:.2em;font-size:1em;vertical-align:middle}.profile-status-circle{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-active{background-color:#00e732}.status-retired{background-color:#ffba38}.status-inactive{border:2px white solid}.soft{opacity:.7}.end-impersonation-button{height:2.4em;cursor:pointer;border-radius:2em;font-size:1em;padding:0 1.4em 0 1em;border:none;outline:none;flex-shrink:0;background-color:#fff;color:#c63d3d;font-weight:600;transition:box-shadow .2s;display:flex;align-items:center}.end-impersonation-button:hover{box-shadow:#0003 0 8px 10px}.end-impersonation-button .icon{font-size:1.2em;margin-right:.2em}.spacer{flex-grow:1}.shadow{box-shadow:#0003 0 2px 10px}.white-tag{cursor:pointer;background-color:#ffffff26}.white-tag:hover{background-color:#614979}.color-tag:nth-of-type(1){background-color:#26acffcc}.color-tag:nth-of-type(2){background-color:#9394ffcc}.color-tag:nth-of-type(3){background-color:#a28ceecc}.status-tooltip-container{color:#fff;background-color:#2e2e2e;opacity:0;transition:all .1s ease-in-out;position:absolute;top:calc(100% + 1em);left:50%;transform:translate(-50%);border-radius:.4em}.status-tooltip-container:before{content:\"\";position:absolute;top:-.5em;left:50%;transform:translate(-50%);border-style:solid;border-width:0 1em 1em 1em;border-color:transparent transparent rgb(46,46,46) transparent}.status-tooltip{text-align:left;font-size:1.4em;padding:.8em;line-height:2em;width:100%;font-weight:700}.status-tooltip .application-status{display:flex;align-items:center;font-weight:400}.status-tooltip .application-status .icon-checkmark{color:#87ed8f}.status-tooltip .application-status .icon-warning{color:#e9ce34}.status-tooltip .application-status .icon-lock{color:#f4785b}.restricted-bar-padding{padding-top:40px}.restricted-bar{position:fixed;top:5em;left:7px;right:7px;height:40px;display:flex;align-items:center;color:#f3f3f3;background:repeating-linear-gradient(315deg,#c23737,#c23737 35px,#c25050 35px 70px);z-index:6000;font-size:1.6em}.restricted-bar .title{text-transform:uppercase;font-weight:600;margin:0 2em}.restricted-bar .text{margin:0 1em}.restricted-bar .text .emphasize{font-weight:600;font-style:italic}@media screen and (max-width: 1100px){.profile-name-group .soft{font-size:.7em}.profile-name-group .profile-name{font-size:1.3em}.end-impersonation-button{border-radius:50%;height:auto;padding:.6em}.end-impersonation-button .icon{margin:0}.end-impersonation-button .exit-text{display:none}}\n"] }]
+        }], propDecorators: { endImpersonation: [{
+                type: Output
+            }] } });
+
 const ADVANCED_SEARCH_QUALIFIER_MAP = {
     contains: 'contains',
     begins_with: 'begins with',
@@ -1341,7 +1509,7 @@ class AdvancedSearchComponent {
         return this.advancedSearchForm.controls.expandResults.controls.applyEquivalentSubjects;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: AdvancedSearchComponent, isStandalone: true, selector: "lib-ss-advanced-search", inputs: { config: "config" }, outputs: { advancedSearch: "advancedSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<form\n    data-testid=\"advancedSearchForm\"\n    (submit)=\"config.scope === 'local' ? doLocalAdvancedSearch() : doExternalAdvancedSearch()\"\n    [formGroup]=\"advancedSearchForm\"\n    class=\"ss-adv-search-wrapper\"\n>\n    <h3>Advanced Search</h3>\n    <!-- Queries -->\n    @for (query of queries.controls; track $index; let queryIndex = $index) {\n        <div class=\"ss-adv-search-row\" [formGroup]=\"query\">\n            <!-- Boolean operator -->\n            <!-- Add boolean for each row except for first -->\n            @if (!$first) {\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'boolean' + queryIndex\"\n                        [formControlName]=\"'boolean'\"\n                        [attr.data-testid]=\"'boolean' + queryIndex\"\n                    >\n                        @for (boolean of advancedSearchOptions.boolean; track boolean) {\n                            <option [ngValue]=\"boolean\">\n                                {{ boolean }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Field -->\n            <label [for]=\"'field' + queryIndex\" class=\"ss-hidden\">Field {{ queryIndex }}</label>\n            <div class=\"ss-select-wrapper\">\n                <select\n                    [id]=\"'field' + queryIndex\"\n                    [formControlName]=\"'field'\"\n                    [attr.data-testid]=\"'field' + queryIndex\"\n                >\n                    @for (field of advancedSearchOptions.fields; track field) {\n                        <option [ngValue]=\"field\">\n                            {{ advancedSearchFieldMap[field] }}\n                        </option>\n                    }\n                    <optgroup\n                        [label]=\"(config.scope === 'external' ? 'Online' : 'Library') + ' Specific'\"\n                    >\n                        @for (\n                            field of config.scope === 'external'\n                                ? advancedSearchOptions.externalFields\n                                : advancedSearchOptions.localFields;\n                            track field\n                        ) {\n                            <option [ngValue]=\"field\">\n                                {{ advancedSearchFieldMap[field] }}\n                            </option>\n                        }\n                    </optgroup>\n                </select>\n            </div>\n            <!-- Qualifiers are only available for local searches -->\n            @if (config.scope === 'local') {\n                <label [for]=\"'qualifier' + queryIndex\" class=\"ss-hidden\"\n                    >Match Criteria {{ queryIndex }}</label\n                >\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'qualifier' + queryIndex\"\n                        [formControlName]=\"'qualifier'\"\n                        [attr.data-testid]=\"'qualifier' + queryIndex\"\n                    >\n                        <!-- $any because a field can technically be local or external, though this block is scoped strictly to local fields -->\n                        @for (\n                            qualifier of $any(advancedSearchOptions.qualifiers)[\n                                query.controls.field.value\n                            ];\n                            track qualifier;\n                            let optionIndex = $index\n                        ) {\n                            <option\n                                [ngValue]=\"qualifier\"\n                                [attr.data-testid]=\"\n                                    'qualifier' + queryIndex + '-option' + optionIndex\n                                \"\n                            >\n                                {{ $any(advancedSearchQualifierMap)[qualifier] }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Query -->\n            <label [for]=\"'query' + queryIndex\" class=\"ss-hidden\">Query {{ queryIndex }}</label>\n            <div class=\"ss-query-input\">\n                <input\n                    #searchInput\n                    [id]=\"'query' + queryIndex\"\n                    [formControlName]=\"'query'\"\n                    [attr.data-testid]=\"'query' + queryIndex\"\n                    required\n                    aria-required=\"true\"\n                    matTooltip=\"Fill out this field\"\n                    [matTooltipPosition]=\"'above'\"\n                    [matTooltipDisabled]=\"true\"\n                    [attr.aria-invalid]=\"isSubmitted && queries.at(0).controls.query.invalid\"\n                    aria-describedby=\"invalidInputDesc\"\n                />\n            </div>\n            @if (!$first) {\n                <button\n                    class=\"ss-row-cancel\"\n                    type=\"button\"\n                    (click)=\"removeQuery(queryIndex)\"\n                    [attr.data-testid]=\"'cancelRow' + queryIndex\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n                </button>\n            }\n        </div>\n    }\n    <button\n        type=\"button\"\n        (click)=\"addQuery()\"\n        id=\"addQueryBtn\"\n        data-testid=\"addQuery\"\n        [disabled]=\"queries.length > 11\"\n    >\n        <span class=\"material-symbols-outlined ss-icon\"> add </span>\n        Add a row\n    </button>\n    <!-- OTHER OPTIONS -->\n    <div class=\"ss-other-options\">\n        <!-- LOCAL -->\n        @if (config.scope === 'local') {\n            <!-- Type -->\n            <div data-testid=\"resourceType\">\n                <h4>Resource Type</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Resource Type'\"\n                        [allOptions]=\"advancedSearchOptions.types[config.institution]\"\n                        [selectedKeys]=\"types.value\"\n                        (selectedKeysChange)=\"types.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Collection -->\n            <div data-testid=\"collection\">\n                <h4>Collection</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Collection'\"\n                        [allOptions]=\"advancedSearchOptions.collections[config.institution]\"\n                        [selectedKeys]=\"collections.value\"\n                        (selectedKeysChange)=\"collections.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Creation Date' }\"\n            ></ng-container>\n        }\n        <!-- EXTERNAL -->\n        @if (config.scope === 'external') {\n            <div formGroupName=\"limitResults\" class=\"ss-checkbox-section\">\n                <h4>For Fewer Results Try</h4>\n                <!-- Peer reviewed -->\n                <label class=\"ss-checkbox-label\" for=\"peerReviewed\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"peerReviewed\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'peerReviewed'\"\n                        data-testid=\"peerReviewed\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"peerReviewed.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Peer reviewed journal articles</span>\n                </label>\n            </div>\n            <div formGroupName=\"expandResults\" class=\"ss-checkbox-section\">\n                <h4>For More Results Try</h4>\n                <!-- Apply equivalent subjects -->\n                <label class=\"ss-checkbox-label\" for=\"applyEquivalentSubjects\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"applyEquivalentSubjects\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'applyEquivalentSubjects'\"\n                        data-testid=\"applyEquivalentSubjects\"\n                    />\n                    <lib-hbll-checkbox\n                        [isChecked]=\"applyEquivalentSubjects.value\"\n                    ></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Apply equivalent subjects</span>\n                </label>\n                <!-- Full text -->\n                <label class=\"ss-checkbox-label\" for=\"fullText\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"fullText\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'fullText'\"\n                        data-testid=\"fullText\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"fullText.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\"\n                        >Include results the library doesn't have access to</span\n                    >\n                </label>\n            </div>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Date Published' }\"\n            ></ng-container>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n        }\n    </div>\n    <div id=\"advSearchFooter\">\n        <a [href]=\"'https://lib.byu.edu/browse/' + config.institution\">Alphabetic Browse</a>\n        <button\n            class=\"pill-btn--components\"\n            [ngClass]=\"{\n                ensign: config.institution === 'ensign',\n            }\"\n            type=\"submit\"\n            data-testid=\"advSearchSubmitButton\"\n        >\n            Search\n        </button>\n    </div>\n</form>\n\n<ng-template #languageBlock>\n    <div>\n        <h4>Language</h4>\n        <lib-hbll-multi-select\n            [label]=\"'language'\"\n            [allOptions]=\"advancedSearchOptions.languages\"\n            [selectedKeys]=\"languages.value\"\n            (selectedKeysChange)=\"languages.setValue($any($event))\"\n        ></lib-hbll-multi-select>\n    </div>\n</ng-template>\n<ng-template #dateBlock let-header=\"header\">\n    <div id=\"dateOptions\" class=\"external\">\n        <h4>{{ header }}</h4>\n        <lib-date-range\n            [from]=\"from.value\"\n            [to]=\"to.value\"\n            (fromChange)=\"from.setValue($event)\"\n            (toChange)=\"to.setValue($event)\"\n        ></lib-date-range>\n    </div>\n</ng-template>\n", styles: ["button.ensign{background-color:#2b6042!important;border-color:#2a6142}button.ensign:hover{background-color:#357551!important}a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}select,textarea,input{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}select:focus,textarea:focus,input:focus{border-color:#3a6093}.ss-select-wrapper{position:relative}.ss-select-wrapper select{cursor:pointer;padding-right:2em}.ss-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}:host{box-sizing:border-box}:host *{box-sizing:inherit}.ss-select-wrapper{margin-right:.3em}.ss-row-cancel{color:#aaa;margin-left:.4em;margin-top:.4em}.ss-row-cancel:hover{color:#666}.ss-row-cancel .ss-icon{font-size:1em}.ss-hidden{display:none}#addQueryBtn{display:flex;align-items:center}#addQueryBtn:disabled{color:#999;pointer-events:none}#addQueryBtn .icon{font-size:1em}.ss-adv-search-wrapper{width:100%}h3{font-size:1.13em;font-weight:300;margin-bottom:.7em;margin-top:0}h4{margin-bottom:.3em;font-weight:600}#dateOptions h4{margin-bottom:.8em}.ss-adv-search-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.6em}.ss-query-input{display:inline-block;width:100%;margin-top:.4rem}.ss-query-input input{width:100%}.ss-other-options{display:grid;grid-template-columns:repeat(1,1fr);gap:.6em 1.6em;grid-auto-rows:minmax(1em,auto);margin-top:1.4em}.ss-other-options label{margin-right:1rem}.ss-checkbox-label{display:inline-flex;align-items:flex-start;cursor:pointer}.ss-checkbox-label:not(:last-of-type){margin-bottom:.75em}.ss-checkbox-label .ss-label-text{margin-top:-.1em;margin-left:.45em}.ss-checkbox-section{margin-bottom:.8em}#advSearchFooter{margin-bottom:.5em;display:flex;justify-content:space-between;align-items:center;font-size:1.2em}#advSearchFooter a{font-size:.8em}@media screen and (min-width: 615px){.ss-adv-search-row{flex-wrap:nowrap}.ss-other-options{grid-template-columns:repeat(2,1fr)}.ss-query-input{margin-top:0}#dateOptions .external{grid-column:span 2}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: HbllMultiSelectComponent, selector: "lib-hbll-multi-select", inputs: ["allOptions", "label", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: HbllCheckboxComponent, selector: "lib-hbll-checkbox", inputs: ["isChecked"] }, { kind: "component", type: DateRangeComponent, selector: "lib-date-range", inputs: ["from", "to"], outputs: ["validDateChange", "fromChange", "toChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: AdvancedSearchComponent, isStandalone: true, selector: "lib-ss-advanced-search", inputs: { config: "config" }, outputs: { advancedSearch: "advancedSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<form\n    data-testid=\"advancedSearchForm\"\n    (submit)=\"config.scope === 'local' ? doLocalAdvancedSearch() : doExternalAdvancedSearch()\"\n    [formGroup]=\"advancedSearchForm\"\n    class=\"ss-adv-search-wrapper\"\n>\n    <h3>Advanced Search</h3>\n    <!-- Queries -->\n    @for (query of queries.controls; track $index; let queryIndex = $index) {\n        <div class=\"ss-adv-search-row\" [formGroup]=\"query\">\n            <!-- Boolean operator -->\n            <!-- Add boolean for each row except for first -->\n            @if (!$first) {\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'boolean' + queryIndex\"\n                        [formControlName]=\"'boolean'\"\n                        [attr.data-testid]=\"'boolean' + queryIndex\"\n                    >\n                        @for (boolean of advancedSearchOptions.boolean; track boolean) {\n                            <option [ngValue]=\"boolean\">\n                                {{ boolean }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Field -->\n            <label [for]=\"'field' + queryIndex\" class=\"ss-hidden\">Field {{ queryIndex }}</label>\n            <div class=\"ss-select-wrapper\">\n                <select\n                    [id]=\"'field' + queryIndex\"\n                    [formControlName]=\"'field'\"\n                    [attr.data-testid]=\"'field' + queryIndex\"\n                >\n                    @for (field of advancedSearchOptions.fields; track field) {\n                        <option [ngValue]=\"field\">\n                            {{ advancedSearchFieldMap[field] }}\n                        </option>\n                    }\n                    <optgroup\n                        [label]=\"(config.scope === 'external' ? 'Online' : 'Library') + ' Specific'\"\n                    >\n                        @for (\n                            field of config.scope === 'external'\n                                ? advancedSearchOptions.externalFields\n                                : advancedSearchOptions.localFields;\n                            track field\n                        ) {\n                            <option [ngValue]=\"field\">\n                                {{ advancedSearchFieldMap[field] }}\n                            </option>\n                        }\n                    </optgroup>\n                </select>\n            </div>\n            <!-- Qualifiers are only available for local searches -->\n            @if (config.scope === 'local') {\n                <label [for]=\"'qualifier' + queryIndex\" class=\"ss-hidden\"\n                    >Match Criteria {{ queryIndex }}</label\n                >\n                <div class=\"ss-select-wrapper\">\n                    <select\n                        [id]=\"'qualifier' + queryIndex\"\n                        [formControlName]=\"'qualifier'\"\n                        [attr.data-testid]=\"'qualifier' + queryIndex\"\n                    >\n                        <!-- $any because a field can technically be local or external, though this block is scoped strictly to local fields -->\n                        @for (\n                            qualifier of $any(advancedSearchOptions.qualifiers)[\n                                query.controls.field.value\n                            ];\n                            track qualifier;\n                            let optionIndex = $index\n                        ) {\n                            <option\n                                [ngValue]=\"qualifier\"\n                                [attr.data-testid]=\"\n                                    'qualifier' + queryIndex + '-option' + optionIndex\n                                \"\n                            >\n                                {{ $any(advancedSearchQualifierMap)[qualifier] }}\n                            </option>\n                        }\n                    </select>\n                </div>\n            }\n            <!-- Query -->\n            <label [for]=\"'query' + queryIndex\" class=\"ss-hidden\">Query {{ queryIndex }}</label>\n            <div class=\"ss-query-input\">\n                <input\n                    #searchInput\n                    [id]=\"'query' + queryIndex\"\n                    [formControlName]=\"'query'\"\n                    [attr.data-testid]=\"'query' + queryIndex\"\n                    required\n                    aria-required=\"true\"\n                    matTooltip=\"Fill out this field\"\n                    [matTooltipPosition]=\"'above'\"\n                    [matTooltipDisabled]=\"true\"\n                    [attr.aria-invalid]=\"isSubmitted && queries.at(0).controls.query.invalid\"\n                    aria-describedby=\"invalidInputDesc\"\n                />\n            </div>\n            @if (!$first) {\n                <button\n                    class=\"ss-row-cancel\"\n                    type=\"button\"\n                    (click)=\"removeQuery(queryIndex)\"\n                    [attr.data-testid]=\"'cancelRow' + queryIndex\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n                </button>\n            }\n        </div>\n    }\n    <button\n        type=\"button\"\n        (click)=\"addQuery()\"\n        id=\"addQueryBtn\"\n        data-testid=\"addQuery\"\n        [disabled]=\"queries.length > 11\"\n    >\n        <span class=\"material-symbols-outlined ss-icon\"> add </span>\n        Add a row\n    </button>\n    <!-- OTHER OPTIONS -->\n    <div class=\"ss-other-options\">\n        <!-- LOCAL -->\n        @if (config.scope === 'local') {\n            <!-- Type -->\n            <div data-testid=\"resourceType\">\n                <h4>Resource Type</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Resource Type'\"\n                        [allOptions]=\"advancedSearchOptions.types[config.institution]\"\n                        [selectedKeys]=\"types.value\"\n                        (selectedKeysChange)=\"types.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Collection -->\n            <div data-testid=\"collection\">\n                <h4>Collection</h4>\n                <div class=\"ss-multi-select-wrapper\">\n                    <lib-hbll-multi-select\n                        [label]=\"'Collection'\"\n                        [allOptions]=\"advancedSearchOptions.collections[config.institution]\"\n                        [selectedKeys]=\"collections.value\"\n                        (selectedKeysChange)=\"collections.setValue($event)\"\n                    ></lib-hbll-multi-select>\n                </div>\n            </div>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Creation Date' }\"\n            ></ng-container>\n        }\n        <!-- EXTERNAL -->\n        @if (config.scope === 'external') {\n            <div formGroupName=\"limitResults\" class=\"ss-checkbox-section\">\n                <h4>For Fewer Results Try</h4>\n                <!-- Peer reviewed -->\n                <label class=\"ss-checkbox-label\" for=\"peerReviewed\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"peerReviewed\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'peerReviewed'\"\n                        data-testid=\"peerReviewed\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"peerReviewed.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Peer reviewed journal articles</span>\n                </label>\n            </div>\n            <div formGroupName=\"expandResults\" class=\"ss-checkbox-section\">\n                <h4>For More Results Try</h4>\n                <!-- Apply equivalent subjects -->\n                <label class=\"ss-checkbox-label\" for=\"applyEquivalentSubjects\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"applyEquivalentSubjects\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'applyEquivalentSubjects'\"\n                        data-testid=\"applyEquivalentSubjects\"\n                    />\n                    <lib-hbll-checkbox\n                        [isChecked]=\"applyEquivalentSubjects.value\"\n                    ></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\">Apply equivalent subjects</span>\n                </label>\n                <!-- Full text -->\n                <label class=\"ss-checkbox-label\" for=\"fullText\" tabindex=\"0\">\n                    <input\n                        class=\"ss-hidden\"\n                        id=\"fullText\"\n                        type=\"checkbox\"\n                        [formControlName]=\"'fullText'\"\n                        data-testid=\"fullText\"\n                    />\n                    <lib-hbll-checkbox [isChecked]=\"fullText.value\"></lib-hbll-checkbox>\n                    <span class=\"ss-label-text\"\n                        >Include results the library doesn't have access to</span\n                    >\n                </label>\n            </div>\n            <!-- Date -->\n            <ng-container\n                *ngTemplateOutlet=\"dateBlock; context: { header: 'Date Published' }\"\n            ></ng-container>\n            <!-- Language -->\n            <ng-container *ngTemplateOutlet=\"languageBlock\"></ng-container>\n        }\n    </div>\n    <div id=\"advSearchFooter\">\n        <a [href]=\"'https://lib.byu.edu/browse/' + config.institution\">Alphabetic Browse</a>\n        <button\n            class=\"pill-btn--components\"\n            [ngClass]=\"{\n                ensign: config.institution === 'ensign',\n            }\"\n            type=\"submit\"\n            data-testid=\"advSearchSubmitButton\"\n        >\n            Search\n        </button>\n    </div>\n</form>\n\n<ng-template #languageBlock>\n    <div>\n        <h4>Language</h4>\n        <lib-hbll-multi-select\n            [label]=\"'language'\"\n            [allOptions]=\"advancedSearchOptions.languages\"\n            [selectedKeys]=\"languages.value\"\n            (selectedKeysChange)=\"languages.setValue($any($event))\"\n        ></lib-hbll-multi-select>\n    </div>\n</ng-template>\n<ng-template #dateBlock let-header=\"header\">\n    <div id=\"dateOptions\" class=\"external\">\n        <h4>{{ header }}</h4>\n        <lib-date-range\n            [from]=\"from.value\"\n            [to]=\"to.value\"\n            (fromChange)=\"from.setValue($event)\"\n            (toChange)=\"to.setValue($event)\"\n        ></lib-date-range>\n    </div>\n</ng-template>\n", styles: ["button.ensign{background-color:#2b6042!important;border-color:#2a6142}button.ensign:hover{background-color:#357551!important}a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}select,textarea,input{appearance:none;font-family:inherit;padding:.38em;border:solid 1px #707070;border-radius:4px;font-size:1em;background-color:#fff}select:focus,textarea:focus,input:focus{border-color:#3a6093}.ss-select-wrapper{position:relative}.ss-select-wrapper select{cursor:pointer;padding-right:2em}.ss-select-wrapper:after{font-family:Material Symbols Outlined;content:\"arrow_drop_down\";pointer-events:none;top:0;font-size:1.5em;right:.2em;height:100%;position:absolute;display:flex;align-items:center;opacity:70%}.pill-btn--components{background-color:#4070b0;font-size:1em;transition:all .15s;color:#fff;cursor:pointer;font-weight:600;text-align:center}.pill-btn--components:disabled{color:#707070;background-color:#e6e6e6;pointer-events:none}.pill-btn--components:hover{background-color:#6892ca;color:#fff}.destructive.pill-btn--components{background-color:#b04940}.destructive.pill-btn--components:hover{background-color:#c7574d}.pill-btn--components{border-radius:100em;padding:.4em 1.3em}:host{box-sizing:border-box}:host *{box-sizing:inherit}.ss-select-wrapper{margin-right:.3em}.ss-row-cancel{color:#aaa;margin-left:.4em;margin-top:.4em}.ss-row-cancel:hover{color:#666}.ss-row-cancel .ss-icon{font-size:1em}.ss-hidden{display:none}#addQueryBtn{display:flex;align-items:center}#addQueryBtn:disabled{color:#999;pointer-events:none}#addQueryBtn .icon{font-size:1em}.ss-adv-search-wrapper{width:100%}h3{font-size:1.13em;font-weight:300;margin-bottom:.7em;margin-top:0}h4{margin-bottom:.3em;font-weight:600}#dateOptions h4{margin-bottom:.8em}.ss-adv-search-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.6em}.ss-query-input{display:inline-block;width:100%;margin-top:.4rem}.ss-query-input input{width:100%}.ss-other-options{display:grid;grid-template-columns:repeat(1,1fr);gap:.6em 1.6em;grid-auto-rows:minmax(1em,auto);margin-top:1.4em}.ss-other-options label{margin-right:1rem}.ss-checkbox-label{display:inline-flex;align-items:flex-start;cursor:pointer}.ss-checkbox-label:not(:last-of-type){margin-bottom:.75em}.ss-checkbox-label .ss-label-text{margin-top:-.1em;margin-left:.45em}.ss-checkbox-section{margin-bottom:.8em}#advSearchFooter{margin-bottom:.5em;display:flex;justify-content:space-between;align-items:center;font-size:1.2em}#advSearchFooter a{font-size:.8em}@media screen and (min-width: 615px){.ss-adv-search-row{flex-wrap:nowrap}.ss-other-options{grid-template-columns:repeat(2,1fr)}.ss-query-input{margin-top:0}#dateOptions .external{grid-column:span 2}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: HbllMultiSelectComponent, selector: "lib-hbll-multi-select", inputs: ["allOptions", "label", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: HbllCheckboxComponent, selector: "lib-hbll-checkbox", inputs: ["isChecked"] }, { kind: "component", type: DateRangeComponent, selector: "lib-date-range", inputs: ["from", "to"], outputs: ["validDateChange", "fromChange", "toChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
             type: Component,
@@ -1423,7 +1591,7 @@ class SimpleSearchComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SimpleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SimpleSearchComponent, isStandalone: true, selector: "lib-ss-simple-search", inputs: { config: "config" }, outputs: { simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<div class=\"ss-container\">\n    <form [formGroup]=\"searchForm\" (submit)=\"emitSimpleSearch()\" data-testid=\"searchForm\">\n        <input\n            #searchInput\n            data-testid=\"searchInput\"\n            id=\"q\"\n            name=\"q\"\n            type=\"text\"\n            required\n            aria-required=\"true\"\n            aria-label=\"search input\"\n            autocapitalize=\"off\"\n            formControlName=\"simpleQuery\"\n            matTooltip=\"Fill out this field\"\n            [matTooltipPosition]=\"'above'\"\n            [matTooltipDisabled]=\"true\"\n            [attr.aria-invalid]=\"isSubmitted && simpleQuery.invalid\"\n        />\n        <label for=\"q\" data-testid=\"label\">{{\n            config.scope === 'local'\n                ? 'Books, media, special collections and more'\n                : 'Ebooks, articles, journals, databases, streaming media and more'\n        }}</label>\n        <button\n            type=\"submit\"\n            aria-label=\"search\"\n            data-testid=\"searchBtn\"\n            [ngClass]=\"{ ensign: config.institution === 'ensign' }\"\n        >\n            <span class=\"material-symbols-outlined ss-icon\"> search </span>\n        </button>\n    </form>\n\n    @if (simpleQuery.value) {\n        <button id=\"clear\" (click)=\"clearQuery()\" data-testid=\"clearBtn\">\n            <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n        </button>\n    }\n</div>\n", styles: ["a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}.ss-container{position:relative}form{display:flex}.ss-icon{font-size:1em}button[type=submit]{background:#fff;border-radius:0 4px 4px 0;margin:0;width:3em;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:color .2s,background-color .2s}button[type=submit] .ss-icon{color:#0047ba;font-size:1.7em}button[type=submit]:hover .ss-icon{color:#6892ca}button[type=submit].ensign .ss-icon{color:#2b6042}button[type=submit].ensign .ss-icon:hover{color:#357551}#clear{position:absolute;right:3em;top:0%;height:100%;display:flex;justify-content:center;align-items:center;padding:0 0 0 .6rem}#clear .ss-icon{height:auto;color:#acacac;transition:color ease-in-out .05s}#clear:hover .ss-icon{color:#666}input[type=text]{background-color:#fff;color:#000;font-family:inherit;border:none;font-weight:600;margin:0;overflow:hidden;cursor:text;width:calc(100% - 3em);font-size:1em;border-radius:4px 0 0 4px;padding:.56em 2em .56em .56em}input[type=text]:focus{outline:none}input[type=text]:valid+label,input[type=text]:focus+label{font-size:.75em;top:-.8em;padding-top:0;padding-bottom:0;pointer-events:none;margin-top:0;margin-left:.56em;cursor:default}input[type=text]:valid+label:before,input[type=text]:focus+label:before{opacity:1}label{cursor:text;transition:all .1s ease-in-out;position:absolute;padding:.5em .28em;margin-left:.28em;left:0;color:#707070;z-index:1;max-width:calc(100% - 3.4em);white-space:nowrap;line-height:normal;overflow:hidden;text-overflow:ellipsis;border-radius:4px}label:before{transition:all .1s ease-in-out;background-color:#fff;content:\"\";position:absolute;inset:0;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SimpleSearchComponent, isStandalone: true, selector: "lib-ss-simple-search", inputs: { config: "config" }, outputs: { simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }], ngImport: i0, template: "<div class=\"ss-container\">\n    <form [formGroup]=\"searchForm\" (submit)=\"emitSimpleSearch()\" data-testid=\"searchForm\">\n        <input\n            #searchInput\n            data-testid=\"searchInput\"\n            id=\"q\"\n            name=\"q\"\n            type=\"text\"\n            required\n            aria-required=\"true\"\n            aria-label=\"search input\"\n            autocapitalize=\"off\"\n            formControlName=\"simpleQuery\"\n            matTooltip=\"Fill out this field\"\n            [matTooltipPosition]=\"'above'\"\n            [matTooltipDisabled]=\"true\"\n            [attr.aria-invalid]=\"isSubmitted && simpleQuery.invalid\"\n        />\n        <label for=\"q\" data-testid=\"label\">{{\n            config.scope === 'local'\n                ? 'Books, media, special collections and more'\n                : 'Ebooks, articles, journals, databases, streaming media and more'\n        }}</label>\n        <button\n            type=\"submit\"\n            aria-label=\"search\"\n            data-testid=\"searchBtn\"\n            [ngClass]=\"{ ensign: config.institution === 'ensign' }\"\n        >\n            <span class=\"material-symbols-outlined ss-icon\"> search </span>\n        </button>\n    </form>\n\n    @if (simpleQuery.value) {\n        <button id=\"clear\" (click)=\"clearQuery()\" data-testid=\"clearBtn\">\n            <span class=\"material-symbols-outlined ss-icon\"> cancel </span>\n        </button>\n    }\n</div>\n", styles: ["a,button{border:none;background:none;font-family:inherit;padding:0;margin:0;font-size:inherit;color:#1c7ec9;text-decoration:none;cursor:pointer}a:hover,button:hover{color:#8ab6f0}.ss-container{position:relative}form{display:flex}.ss-icon{font-size:1em}button[type=submit]{background:#fff;border-radius:0 4px 4px 0;margin:0;width:3em;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:color .2s,background-color .2s}button[type=submit] .ss-icon{color:#0047ba;font-size:1.7em}button[type=submit]:hover .ss-icon{color:#6892ca}button[type=submit].ensign .ss-icon{color:#2b6042}button[type=submit].ensign .ss-icon:hover{color:#357551}#clear{position:absolute;right:3em;top:0%;height:100%;display:flex;justify-content:center;align-items:center;padding:0 0 0 .6rem}#clear .ss-icon{height:auto;color:#acacac;transition:color ease-in-out .05s}#clear:hover .ss-icon{color:#666}input[type=text]{background-color:#fff;color:#000;font-family:inherit;border:none;font-weight:600;margin:0;overflow:hidden;cursor:text;width:calc(100% - 3em);font-size:1em;border-radius:4px 0 0 4px;padding:.56em 2em .56em .56em}input[type=text]:focus{outline:none}input[type=text]:valid+label,input[type=text]:focus+label{font-size:.75em;top:-.8em;padding-top:0;padding-bottom:0;pointer-events:none;margin-top:0;margin-left:.56em;cursor:default}input[type=text]:valid+label:before,input[type=text]:focus+label:before{opacity:1}label{cursor:text;transition:all .1s ease-in-out;position:absolute;padding:.5em .28em;margin-left:.28em;left:0;color:#707070;z-index:1;max-width:calc(100% - 3.4em);white-space:nowrap;line-height:normal;overflow:hidden;text-overflow:ellipsis;border-radius:4px}label:before{transition:all .1s ease-in-out;background-color:#fff;content:\"\";position:absolute;inset:0;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SimpleSearchComponent, decorators: [{
             type: Component,
@@ -1572,5 +1740,5 @@ const isSearchScope = (scope) => searchScopeValues.includes(scope);
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, HbllHeaderComponent, LIBRARY_HOURS_API_URL, SsSearchBarComponent, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
+export { ADVANCED_SEARCH_FIELD_MAP, ADVANCED_SEARCH_OPTIONS, ADVANCED_SEARCH_QUALIFIER_MAP, HbllHeaderComponent, ImpersonationBannerComponent, LIBRARY_HOURS_API_URL, SsSearchBarComponent, isAdvancedSearchExternalFieldOption, isAdvancedSearchFieldOption, isAdvancedSearchLocalFieldOption, isSearchScope };
 //# sourceMappingURL=byuhbll-components.mjs.map