@byuhbll/components 6.1.0 → 6.2.0

package/fesm2022/byuhbll-components.mjs

@@ -3,7 +3,7 @@ import { CommonModule, DatePipe, NgIf, NgClass } from '@angular/common';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Input, ViewChild, ChangeDetectionStrategy, Component, input, EventEmitter, Output, inject, computed, ViewChildren, Pipe, Renderer2, DOCUMENT, viewChild, HostListener, ElementRef, Injector, runInInjectionContext, effect, ViewEncapsulation, booleanAttribute, createComponent, Injectable, signal, ContentChildren } from '@angular/core';
+import { Input, ViewChild, ChangeDetectionStrategy, Component, input, EventEmitter, Output, inject, computed, ViewChildren, Pipe, Renderer2, DOCUMENT, viewChild, HostListener, ElementRef, Injector, runInInjectionContext, effect, ViewEncapsulation, model, booleanAttribute, createComponent, Injectable, signal, ContentChildren } from '@angular/core';
 import { trigger, transition, group, style, query, animate, animateChild } from '@angular/animations';
 import { map, of, switchMap, shareReplay, combineLatest, Subject, Subscription } from 'rxjs';
 import { BreakpointObserver } from '@angular/cdk/layout';
@@ -2050,9 +2050,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class SimpleSearchComponent {
+    set config(config) {
+        this._config = config;
+        this.setupForm();
+    }
+    get config() {
+        return this._config;
+    }
+    get simpleQuery() {
+        return this.searchForm.get('simpleQuery');
+    }
     constructor() {
         this.fb = inject(FormBuilder);
         this.el = inject(ElementRef);
+        this.searchText = model('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
         this.subscription = new Subscription();
         this.supportedSuggestionScopes = [];
         this.suggestions = [];
@@ -2126,7 +2137,10 @@ class SimpleSearchComponent {
             }
         };
         this.setupForm = () => {
-            this.simpleQuery.setValue(this.config.q || this.config.advancedSearchQueryRows[0]?.query || '');
+            if (!this.searchText()) {
+                const initialValue = this.config.q || this.config.advancedSearchQueryRows[0]?.query || '';
+                this.searchText.set(initialValue);
+            }
         };
         this.scrollToSelected = () => {
             const item = this.suggestionItems.toArray()[this.selectedSuggestionIndex];
@@ -2145,16 +2159,10 @@ class SimpleSearchComponent {
             this.expandedSuggestions.clear();
             this.suggestions = [];
         };
-    }
-    set config(config) {
-        this._config = config;
-        this.setupForm();
-    }
-    get config() {
-        return this._config;
-    }
-    get simpleQuery() {
-        return this.searchForm.get('simpleQuery');
+        effect(() => {
+            const signalValue = this.searchText();
+            this.simpleQuery.setValue(signalValue, { emitEvent: false });
+        });
     }
     ngOnInit() {
         // Ensure validation tooltip closes when uses enters a query
@@ -2185,6 +2193,9 @@ class SimpleSearchComponent {
             this.showSuggestions = true;
             this.selectedSuggestionIndex = -1;
         }));
+        this.subscription.add(this.simpleQuery.valueChanges.subscribe((value) => {
+            this.searchText.set(value);
+        }));
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
@@ -2202,12 +2213,12 @@ class SimpleSearchComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SimpleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SimpleSearchComponent, isStandalone: true, selector: "lib-ss-simple-search", inputs: { config: "config", supportedSuggestionScopes: "supportedSuggestionScopes", suggestions: "suggestions" }, outputs: { simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch", suggest: "suggest" }, host: { listeners: { "document:click": "onDocumentClick($event)", "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }, { propertyName: "suggestionItems", predicate: ["suggestionItem"], 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            autocomplete=\"off\"\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            (keydown)=\"onInputKeydown($event)\"\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\n    @if (showSuggestions && suggestions.length > 0) {\n        <ul class=\"suggestions-list\" role=\"listbox\" data-testid=\"suggestionsList\">\n            @for (suggestion of suggestions; track $index; let i = $index) {\n                <li\n                    #suggestionItem\n                    class=\"suggestion-item\"\n                    [class.selected]=\"i === selectedSuggestionIndex\"\n                    (click)=\"selectSuggestion(suggestion)\"\n                    (keydown.enter)=\"selectSuggestion(suggestion)\"\n                    (keydown.space)=\"selectSuggestion(suggestion); $event.preventDefault()\"\n                    role=\"option\"\n                    tabindex=\"0\"\n                    [attr.aria-selected]=\"i === selectedSuggestionIndex\"\n                    data-testid=\"suggestionItem\"\n                >\n                    <span class=\"suggestion-text\" [title]=\"suggestion\">\n                        {{\n                            expandedSuggestions.has(i) || suggestion.length <= 500\n                                ? suggestion\n                                : (suggestion | slice: 0 : 500) + '...'\n                        }}\n                    </span>\n                    @if (suggestion.length > 500) {\n                        <button\n                            class=\"expand-btn\"\n                            (click)=\"toggleExpand(i, $event)\"\n                            [attr.aria-label]=\"\n                                expandedSuggestions.has(i) ? 'Collapse' : 'Expand suggestion'\n                            \"\n                        >\n                            <span class=\"material-symbols-outlined\">\n                                {{ expandedSuggestions.has(i) ? 'expand_less' : 'expand_more' }}\n                            </span>\n                        </button>\n                    }\n                </li>\n            }\n        </ul>\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 .375rem}#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}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d0d0d0;border-top:none;border-radius:0 0 4px 4px;list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;box-shadow:0 4px 6px #0000001a;z-index:1000}.suggestion-item{padding:.75em 1em;cursor:pointer;transition:background-color .15s ease;color:#333;font-size:1em;display:flex;align-items:center;gap:.5em}.suggestion-item:hover,.suggestion-item.selected{background-color:#f0f0f0}.suggestion-item.selected{background-color:#e6f2ff}.suggestion-item:last-child{border-radius:0 0 4px 4px}.suggestion-text{flex:1;overflow-wrap:break-word}.expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;color:#707070;border-radius:50%;transition:background-color .2s}.expand-btn:hover{background-color:#0000000d;color:#0047ba}.expand-btn .material-symbols-outlined{font-size:1.25em}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.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: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SimpleSearchComponent, isStandalone: true, selector: "lib-ss-simple-search", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: true, transformFunction: null }, supportedSuggestionScopes: { classPropertyName: "supportedSuggestionScopes", publicName: "supportedSuggestionScopes", isSignal: false, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch", suggest: "suggest" }, host: { listeners: { "document:click": "onDocumentClick($event)", "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inputTooltip", first: true, predicate: MatTooltip, descendants: true }, { propertyName: "suggestionItems", predicate: ["suggestionItem"], 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            autocomplete=\"off\"\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            (keydown)=\"onInputKeydown($event)\"\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\n    @if (showSuggestions && suggestions.length > 0) {\n        <ul class=\"suggestions-list\" role=\"listbox\" data-testid=\"suggestionsList\">\n            @for (suggestion of suggestions; track $index; let i = $index) {\n                <li\n                    #suggestionItem\n                    class=\"suggestion-item\"\n                    [class.selected]=\"i === selectedSuggestionIndex\"\n                    (click)=\"selectSuggestion(suggestion)\"\n                    (keydown.enter)=\"selectSuggestion(suggestion)\"\n                    (keydown.space)=\"selectSuggestion(suggestion); $event.preventDefault()\"\n                    role=\"option\"\n                    tabindex=\"0\"\n                    [attr.aria-selected]=\"i === selectedSuggestionIndex\"\n                    data-testid=\"suggestionItem\"\n                >\n                    <span class=\"suggestion-text\" [title]=\"suggestion\">\n                        {{\n                            expandedSuggestions.has(i) || suggestion.length <= 500\n                                ? suggestion\n                                : (suggestion | slice: 0 : 500) + '...'\n                        }}\n                    </span>\n                    @if (suggestion.length > 500) {\n                        <button\n                            class=\"expand-btn\"\n                            (click)=\"toggleExpand(i, $event)\"\n                            [attr.aria-label]=\"\n                                expandedSuggestions.has(i) ? 'Collapse' : 'Expand suggestion'\n                            \"\n                        >\n                            <span class=\"material-symbols-outlined\">\n                                {{ expandedSuggestions.has(i) ? 'expand_less' : 'expand_more' }}\n                            </span>\n                        </button>\n                    }\n                </li>\n            }\n        </ul>\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 .375rem}#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}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d0d0d0;border-top:none;border-radius:0 0 4px 4px;list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;box-shadow:0 4px 6px #0000001a;z-index:1000}.suggestion-item{padding:.75em 1em;cursor:pointer;transition:background-color .15s ease;color:#333;font-size:1em;display:flex;align-items:center;gap:.5em}.suggestion-item:hover,.suggestion-item.selected{background-color:#f0f0f0}.suggestion-item.selected{background-color:#e6f2ff}.suggestion-item:last-child{border-radius:0 0 4px 4px}.suggestion-text{flex:1;overflow-wrap:break-word}.expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;color:#707070;border-radius:50%;transition:background-color .2s}.expand-btn:hover{background-color:#0000000d;color:#0047ba}.expand-btn .material-symbols-outlined{font-size:1.25em}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.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: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SimpleSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-ss-simple-search', imports: [MatTooltipModule, MatIconModule, ReactiveFormsModule, CommonModule], 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            autocomplete=\"off\"\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            (keydown)=\"onInputKeydown($event)\"\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\n    @if (showSuggestions && suggestions.length > 0) {\n        <ul class=\"suggestions-list\" role=\"listbox\" data-testid=\"suggestionsList\">\n            @for (suggestion of suggestions; track $index; let i = $index) {\n                <li\n                    #suggestionItem\n                    class=\"suggestion-item\"\n                    [class.selected]=\"i === selectedSuggestionIndex\"\n                    (click)=\"selectSuggestion(suggestion)\"\n                    (keydown.enter)=\"selectSuggestion(suggestion)\"\n                    (keydown.space)=\"selectSuggestion(suggestion); $event.preventDefault()\"\n                    role=\"option\"\n                    tabindex=\"0\"\n                    [attr.aria-selected]=\"i === selectedSuggestionIndex\"\n                    data-testid=\"suggestionItem\"\n                >\n                    <span class=\"suggestion-text\" [title]=\"suggestion\">\n                        {{\n                            expandedSuggestions.has(i) || suggestion.length <= 500\n                                ? suggestion\n                                : (suggestion | slice: 0 : 500) + '...'\n                        }}\n                    </span>\n                    @if (suggestion.length > 500) {\n                        <button\n                            class=\"expand-btn\"\n                            (click)=\"toggleExpand(i, $event)\"\n                            [attr.aria-label]=\"\n                                expandedSuggestions.has(i) ? 'Collapse' : 'Expand suggestion'\n                            \"\n                        >\n                            <span class=\"material-symbols-outlined\">\n                                {{ expandedSuggestions.has(i) ? 'expand_less' : 'expand_more' }}\n                            </span>\n                        </button>\n                    }\n                </li>\n            }\n        </ul>\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 .375rem}#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}.suggestions-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d0d0d0;border-top:none;border-radius:0 0 4px 4px;list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;box-shadow:0 4px 6px #0000001a;z-index:1000}.suggestion-item{padding:.75em 1em;cursor:pointer;transition:background-color .15s ease;color:#333;font-size:1em;display:flex;align-items:center;gap:.5em}.suggestion-item:hover,.suggestion-item.selected{background-color:#f0f0f0}.suggestion-item.selected{background-color:#e6f2ff}.suggestion-item:last-child{border-radius:0 0 4px 4px}.suggestion-text{flex:1;overflow-wrap:break-word}.expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;color:#707070;border-radius:50%;transition:background-color .2s}.expand-btn:hover{background-color:#0000000d;color:#0047ba}.expand-btn .material-symbols-outlined{font-size:1.25em}\n"] }]
-        }], propDecorators: { searchInput: [{
+        }], ctorParameters: () => [], propDecorators: { searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }], searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
             }], suggestionItems: [{
@@ -2269,6 +2280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class SsSearchBarComponent {
     constructor() {
+        this.searchText = model('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
         this.supportedSuggestionScopes = [];
         this.suggestions = [];
         this.simpleSearch = new EventEmitter();
@@ -2327,7 +2339,7 @@ class SsSearchBarComponent {
         return this._config;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SsSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SsSearchBarComponent, isStandalone: true, selector: "lib-ss-search-bar", inputs: { config: "config", supportedSuggestionScopes: "supportedSuggestionScopes", suggestions: "suggestions" }, outputs: { simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch", advancedSearch: "advancedSearch", advancedSearchClosed: "advancedSearchClosed", advancedSearchOpen: "advancedSearchOpen", tabChange: "tabChange", suggest: "suggest" }, providers: [FieldByScopePipe], viewQueries: [{ propertyName: "barWrapperRef", first: true, predicate: ["barWrapperRef"], descendants: true }], ngImport: i0, template: "<div id=\"ssSearchBar\">\n    <div class=\"tabs\">\n        <button\n            (click)=\"emitTabChange('local')\"\n            class=\"ss-tab\"\n            id=\"localTab\"\n            [ngClass]=\"{\n                'ss-active': config.scope === 'local',\n                ensign: config.institution === 'ensign' && config.scope !== 'local',\n            }\"\n            data-testid=\"localTab\"\n            [disabled]=\"config.scope === 'local'\"\n        >\n            In the Library\n        </button>\n        @if (config.institution !== 'law') {\n            <div class=\"tab-spacer\"></div>\n            <button\n                (click)=\"emitTabChange('external')\"\n                class=\"ss-tab\"\n                id=\"externalTab\"\n                [ngClass]=\"{\n                    'ss-active': config.scope === 'external',\n                    ensign: config.institution === 'ensign' && config.scope !== 'external',\n                }\"\n                data-testid=\"externalTab\"\n                [disabled]=\"config.scope === 'external'\"\n            >\n                Available Online\n            </button>\n        }\n        <div class=\"tab-spacer full\"></div>\n    </div>\n    <div\n        class=\"ss-bar-wrapper\"\n        #barWrapperRef\n        [@libHbllExpandCollapse]=\"{\n            value: config.showAdvancedSearch ? (!config.showAdvancedSearchAsText ? 1 : 2) : 3,\n            params: { startHeight: heightOfContainer },\n        }\"\n    >\n        <div class=\"ss-bar-content\" data-testid=\"searchForm\">\n            @if (!config.showAdvancedSearch) {\n                <div class=\"ss-search-bar\">\n                    <lib-ss-simple-search\n                        [config]=\"config\"\n                        [supportedSuggestionScopes]=\"supportedSuggestionScopes\"\n                        [suggestions]=\"suggestions\"\n                        (simpleSearch)=\"emitSimpleSearch($event)\"\n                        (clearSimpleSearch)=\"emitClearSimpleSearch()\"\n                        (suggest)=\"suggest.emit($event)\"\n                    ></lib-ss-simple-search>\n                </div>\n            } @else {\n                <button\n                    id=\"advSearchCloseBtn\"\n                    (click)=\"emitAdvancedSearchClosed()\"\n                    data-testid=\"advSearchCloseBtn\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> close </span>\n                </button>\n                <div id=\"advSearchWrapper\">\n                    @if (config.showAdvancedSearch && !config.showAdvancedSearchAsText) {\n                        <div>\n                            <lib-ss-advanced-search\n                                [config]=\"config\"\n                                (advancedSearch)=\"emitAdvancedSearch($event)\"\n                            ></lib-ss-advanced-search>\n                        </div>\n                    } @else {\n                        <div\n                            class=\"ss-adv-search-text\"\n                            data-testid=\"advancedSearchText\"\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | ssAdvancedQueries: config.scope\n                            \"\n                        ></div>\n                        <div\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | advancedFieldWarning: config.scope\n                            \"\n                        ></div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!config.showAdvancedSearch || config.showAdvancedSearchAsText) {\n            <button\n                data-testid=\"toggleAdvSearchButton\"\n                class=\"ss-adv-search-btn\"\n                id=\"advSearchBtn\"\n                (click)=\"emitAdvancedSearchOpen()\"\n            >\n                Advanced\n                <span class=\"material-symbols-outlined ss-icon\"> keyboard_arrow_down </span>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["#ssSearchBar .tabs .ss-tab.ensign{background-color:#2b6042!important;border-color:#2a6142}#ssSearchBar .tabs .ss-tab.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}.mat-mdc-tooltip-surface{background-color:#333!important;border-radius:3px!important;color:#fff!important;font:inherit!important;font-size:.8em!important}#ssSearchBar{display:flex;align-items:flex-start;flex-wrap:wrap;position:relative;color:#444}#ssSearchBar .tabs{display:flex;width:100%;margin-bottom:-1px;z-index:10;pointer-events:none}#ssSearchBar .tabs .ss-tab{border-radius:4px 4px 0 0;border:#b7b7b7 solid 1px;border-color:#1967e5;border-bottom:none;padding:.3em 1.4em;font-size:.94em;letter-spacing:.4px;font-weight:600;background-color:#0047ba;color:#fff;white-space:nowrap;position:relative;pointer-events:auto}#ssSearchBar .tabs .ss-tab:after{content:\"\";height:1px;width:calc(100% + 2px);position:absolute;bottom:0;left:-1px;background-color:#b7b7b7}#ssSearchBar .tabs .ss-tab:hover{background-color:#1967e5}#ssSearchBar .tabs .ss-tab.ss-active{color:#002e5d;margin-bottom:1px;border-color:#b7b7b7;background-color:#fffffff2}#ssSearchBar .tabs .ss-tab.ss-active:after{display:none}#ssSearchBar .tabs .ss-tab:disabled{cursor:auto}#ssSearchBar .tabs .tab-spacer{width:.3em;border-bottom:#b7b7b7 solid 1px;position:relative}#ssSearchBar .tabs .tab-spacer:before{content:\"\";position:absolute;left:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer:after{content:\"\";position:absolute;right:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer.full{width:100%;margin-right:4px;position:relative}#ssSearchBar .ss-adv-search-text{padding-bottom:1em;padding-right:1.25rem;pointer-events:none}#ssSearchBar .ss-bar-wrapper{padding:1em 1em .25em;border-right:#b7b7b7 solid 1px;border-left:#b7b7b7 solid 1px;border-bottom:#b7b7b7 solid 1px;width:100%;display:flex;align-items:center;flex-wrap:wrap;position:relative;background-color:#fffffff2;border-radius:0 4px 4px}#ssSearchBar .ss-bar-wrapper:after{content:\"\";position:absolute;top:0;right:-1px;background-color:transparent;border-radius:0 4px 0 0;width:4px;height:4px;border-top:#b7b7b7 solid 1px;border-right:#b7b7b7 solid 1px}#ssSearchBar .ss-bar-content{position:relative;width:100%;height:initial}#ssSearchBar .ss-search-bar{border-radius:4px;border:#b7b7b7 solid 1px;width:100%}#ssSearchBar #advSearchCloseBtn{float:right;padding:.4em;margin:-.4em 0;color:#666;transition:all .1s}#ssSearchBar #advSearchCloseBtn:hover{color:#292929}#ssSearchBar #advSearchCloseBtn .ss-icon{font-size:1.2em;font-weight:600}#ssSearchBar .ss-adv-search-btn{font-size:.9em;color:#4070b0;margin:.2em 4em 0 auto;padding-right:.25rem;padding-top:2px;padding-bottom:2px;display:flex;justify-content:center;align-items:center}#ssSearchBar .ss-adv-search-btn .ss-icon{font-size:1.4em;opacity:.75;margin-top:.125rem}#ssSearchBar .ss-adv-search-btn:hover{color:#6892ca}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-ss-advanced-search", inputs: ["config"], outputs: ["advancedSearch"] }, { kind: "component", type: SimpleSearchComponent, selector: "lib-ss-simple-search", inputs: ["config", "supportedSuggestionScopes", "suggestions"], outputs: ["simpleSearch", "clearSimpleSearch", "suggest"] }, { kind: "pipe", type: SsAdvancedQueriesPipe, name: "ssAdvancedQueries" }, { kind: "pipe", type: AdvancedFieldWarningPipe, name: "advancedFieldWarning" }], animations: [libHbllExpandCollapse], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SsSearchBarComponent, isStandalone: true, selector: "lib-ss-search-bar", inputs: { searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: true, transformFunction: null }, supportedSuggestionScopes: { classPropertyName: "supportedSuggestionScopes", publicName: "supportedSuggestionScopes", isSignal: false, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", simpleSearch: "simpleSearch", clearSimpleSearch: "clearSimpleSearch", advancedSearch: "advancedSearch", advancedSearchClosed: "advancedSearchClosed", advancedSearchOpen: "advancedSearchOpen", tabChange: "tabChange", suggest: "suggest" }, providers: [FieldByScopePipe], viewQueries: [{ propertyName: "barWrapperRef", first: true, predicate: ["barWrapperRef"], descendants: true }], ngImport: i0, template: "<div id=\"ssSearchBar\">\n    <div class=\"tabs\">\n        <button\n            (click)=\"emitTabChange('local')\"\n            class=\"ss-tab\"\n            id=\"localTab\"\n            [ngClass]=\"{\n                'ss-active': config.scope === 'local',\n                ensign: config.institution === 'ensign' && config.scope !== 'local',\n            }\"\n            data-testid=\"localTab\"\n            [disabled]=\"config.scope === 'local'\"\n        >\n            In the Library\n        </button>\n        @if (config.institution !== 'law') {\n            <div class=\"tab-spacer\"></div>\n            <button\n                (click)=\"emitTabChange('external')\"\n                class=\"ss-tab\"\n                id=\"externalTab\"\n                [ngClass]=\"{\n                    'ss-active': config.scope === 'external',\n                    ensign: config.institution === 'ensign' && config.scope !== 'external',\n                }\"\n                data-testid=\"externalTab\"\n                [disabled]=\"config.scope === 'external'\"\n            >\n                Available Online\n            </button>\n        }\n        <div class=\"tab-spacer full\"></div>\n    </div>\n    <div\n        class=\"ss-bar-wrapper\"\n        #barWrapperRef\n        [@libHbllExpandCollapse]=\"{\n            value: config.showAdvancedSearch ? (!config.showAdvancedSearchAsText ? 1 : 2) : 3,\n            params: { startHeight: heightOfContainer },\n        }\"\n    >\n        <div class=\"ss-bar-content\" data-testid=\"searchForm\">\n            @if (!config.showAdvancedSearch) {\n                <div class=\"ss-search-bar\">\n                    <lib-ss-simple-search\n                        [config]=\"config\"\n                        [supportedSuggestionScopes]=\"supportedSuggestionScopes\"\n                        [suggestions]=\"suggestions\"\n                        (simpleSearch)=\"emitSimpleSearch($event)\"\n                        (clearSimpleSearch)=\"emitClearSimpleSearch()\"\n                        (suggest)=\"suggest.emit($event)\"\n                        [(searchText)]=\"searchText\"\n                    ></lib-ss-simple-search>\n                </div>\n            } @else {\n                <button\n                    id=\"advSearchCloseBtn\"\n                    (click)=\"emitAdvancedSearchClosed()\"\n                    data-testid=\"advSearchCloseBtn\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> close </span>\n                </button>\n                <div id=\"advSearchWrapper\">\n                    @if (config.showAdvancedSearch && !config.showAdvancedSearchAsText) {\n                        <div>\n                            <lib-ss-advanced-search\n                                [config]=\"config\"\n                                (advancedSearch)=\"emitAdvancedSearch($event)\"\n                            ></lib-ss-advanced-search>\n                        </div>\n                    } @else {\n                        <div\n                            class=\"ss-adv-search-text\"\n                            data-testid=\"advancedSearchText\"\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | ssAdvancedQueries: config.scope\n                            \"\n                        ></div>\n                        <div\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | advancedFieldWarning: config.scope\n                            \"\n                        ></div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!config.showAdvancedSearch || config.showAdvancedSearchAsText) {\n            <button\n                data-testid=\"toggleAdvSearchButton\"\n                class=\"ss-adv-search-btn\"\n                id=\"advSearchBtn\"\n                (click)=\"emitAdvancedSearchOpen()\"\n            >\n                Advanced\n                <span class=\"material-symbols-outlined ss-icon\"> keyboard_arrow_down </span>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["#ssSearchBar .tabs .ss-tab.ensign{background-color:#2b6042!important;border-color:#2a6142}#ssSearchBar .tabs .ss-tab.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}.mat-mdc-tooltip-surface{background-color:#333!important;border-radius:3px!important;color:#fff!important;font:inherit!important;font-size:.8em!important}#ssSearchBar{display:flex;align-items:flex-start;flex-wrap:wrap;position:relative;color:#444}#ssSearchBar .tabs{display:flex;width:100%;margin-bottom:-1px;z-index:10;pointer-events:none}#ssSearchBar .tabs .ss-tab{border-radius:4px 4px 0 0;border:#b7b7b7 solid 1px;border-color:#1967e5;border-bottom:none;padding:.3em 1.4em;font-size:.94em;letter-spacing:.4px;font-weight:600;background-color:#0047ba;color:#fff;white-space:nowrap;position:relative;pointer-events:auto}#ssSearchBar .tabs .ss-tab:after{content:\"\";height:1px;width:calc(100% + 2px);position:absolute;bottom:0;left:-1px;background-color:#b7b7b7}#ssSearchBar .tabs .ss-tab:hover{background-color:#1967e5}#ssSearchBar .tabs .ss-tab.ss-active{color:#002e5d;margin-bottom:1px;border-color:#b7b7b7;background-color:#fffffff2}#ssSearchBar .tabs .ss-tab.ss-active:after{display:none}#ssSearchBar .tabs .ss-tab:disabled{cursor:auto}#ssSearchBar .tabs .tab-spacer{width:.3em;border-bottom:#b7b7b7 solid 1px;position:relative}#ssSearchBar .tabs .tab-spacer:before{content:\"\";position:absolute;left:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer:after{content:\"\";position:absolute;right:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer.full{width:100%;margin-right:4px;position:relative}#ssSearchBar .ss-adv-search-text{padding-bottom:1em;padding-right:1.25rem;pointer-events:none}#ssSearchBar .ss-bar-wrapper{padding:1em 1em .25em;border-right:#b7b7b7 solid 1px;border-left:#b7b7b7 solid 1px;border-bottom:#b7b7b7 solid 1px;width:100%;display:flex;align-items:center;flex-wrap:wrap;position:relative;background-color:#fffffff2;border-radius:0 4px 4px}#ssSearchBar .ss-bar-wrapper:after{content:\"\";position:absolute;top:0;right:-1px;background-color:transparent;border-radius:0 4px 0 0;width:4px;height:4px;border-top:#b7b7b7 solid 1px;border-right:#b7b7b7 solid 1px}#ssSearchBar .ss-bar-content{position:relative;width:100%;height:initial}#ssSearchBar .ss-search-bar{border-radius:4px;border:#b7b7b7 solid 1px;width:100%}#ssSearchBar #advSearchCloseBtn{float:right;padding:.4em;margin:-.4em 0;color:#666;transition:all .1s}#ssSearchBar #advSearchCloseBtn:hover{color:#292929}#ssSearchBar #advSearchCloseBtn .ss-icon{font-size:1.2em;font-weight:600}#ssSearchBar .ss-adv-search-btn{font-size:.9em;color:#4070b0;margin:.2em 4em 0 auto;padding-right:.25rem;padding-top:2px;padding-bottom:2px;display:flex;justify-content:center;align-items:center}#ssSearchBar .ss-adv-search-btn .ss-icon{font-size:1.4em;opacity:.75;margin-top:.125rem}#ssSearchBar .ss-adv-search-btn:hover{color:#6892ca}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-ss-advanced-search", inputs: ["config"], outputs: ["advancedSearch"] }, { kind: "component", type: SimpleSearchComponent, selector: "lib-ss-simple-search", inputs: ["searchText", "config", "supportedSuggestionScopes", "suggestions"], outputs: ["searchTextChange", "simpleSearch", "clearSimpleSearch", "suggest"] }, { kind: "pipe", type: SsAdvancedQueriesPipe, name: "ssAdvancedQueries" }, { kind: "pipe", type: AdvancedFieldWarningPipe, name: "advancedFieldWarning" }], animations: [libHbllExpandCollapse], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SsSearchBarComponent, decorators: [{
             type: Component,
@@ -2337,8 +2349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AdvancedSearchComponent,
                         SimpleSearchComponent,
                         AdvancedFieldWarningPipe,
-                    ], providers: [FieldByScopePipe], animations: [libHbllExpandCollapse], encapsulation: ViewEncapsulation.None, template: "<div id=\"ssSearchBar\">\n    <div class=\"tabs\">\n        <button\n            (click)=\"emitTabChange('local')\"\n            class=\"ss-tab\"\n            id=\"localTab\"\n            [ngClass]=\"{\n                'ss-active': config.scope === 'local',\n                ensign: config.institution === 'ensign' && config.scope !== 'local',\n            }\"\n            data-testid=\"localTab\"\n            [disabled]=\"config.scope === 'local'\"\n        >\n            In the Library\n        </button>\n        @if (config.institution !== 'law') {\n            <div class=\"tab-spacer\"></div>\n            <button\n                (click)=\"emitTabChange('external')\"\n                class=\"ss-tab\"\n                id=\"externalTab\"\n                [ngClass]=\"{\n                    'ss-active': config.scope === 'external',\n                    ensign: config.institution === 'ensign' && config.scope !== 'external',\n                }\"\n                data-testid=\"externalTab\"\n                [disabled]=\"config.scope === 'external'\"\n            >\n                Available Online\n            </button>\n        }\n        <div class=\"tab-spacer full\"></div>\n    </div>\n    <div\n        class=\"ss-bar-wrapper\"\n        #barWrapperRef\n        [@libHbllExpandCollapse]=\"{\n            value: config.showAdvancedSearch ? (!config.showAdvancedSearchAsText ? 1 : 2) : 3,\n            params: { startHeight: heightOfContainer },\n        }\"\n    >\n        <div class=\"ss-bar-content\" data-testid=\"searchForm\">\n            @if (!config.showAdvancedSearch) {\n                <div class=\"ss-search-bar\">\n                    <lib-ss-simple-search\n                        [config]=\"config\"\n                        [supportedSuggestionScopes]=\"supportedSuggestionScopes\"\n                        [suggestions]=\"suggestions\"\n                        (simpleSearch)=\"emitSimpleSearch($event)\"\n                        (clearSimpleSearch)=\"emitClearSimpleSearch()\"\n                        (suggest)=\"suggest.emit($event)\"\n                    ></lib-ss-simple-search>\n                </div>\n            } @else {\n                <button\n                    id=\"advSearchCloseBtn\"\n                    (click)=\"emitAdvancedSearchClosed()\"\n                    data-testid=\"advSearchCloseBtn\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> close </span>\n                </button>\n                <div id=\"advSearchWrapper\">\n                    @if (config.showAdvancedSearch && !config.showAdvancedSearchAsText) {\n                        <div>\n                            <lib-ss-advanced-search\n                                [config]=\"config\"\n                                (advancedSearch)=\"emitAdvancedSearch($event)\"\n                            ></lib-ss-advanced-search>\n                        </div>\n                    } @else {\n                        <div\n                            class=\"ss-adv-search-text\"\n                            data-testid=\"advancedSearchText\"\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | ssAdvancedQueries: config.scope\n                            \"\n                        ></div>\n                        <div\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | advancedFieldWarning: config.scope\n                            \"\n                        ></div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!config.showAdvancedSearch || config.showAdvancedSearchAsText) {\n            <button\n                data-testid=\"toggleAdvSearchButton\"\n                class=\"ss-adv-search-btn\"\n                id=\"advSearchBtn\"\n                (click)=\"emitAdvancedSearchOpen()\"\n            >\n                Advanced\n                <span class=\"material-symbols-outlined ss-icon\"> keyboard_arrow_down </span>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["#ssSearchBar .tabs .ss-tab.ensign{background-color:#2b6042!important;border-color:#2a6142}#ssSearchBar .tabs .ss-tab.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}.mat-mdc-tooltip-surface{background-color:#333!important;border-radius:3px!important;color:#fff!important;font:inherit!important;font-size:.8em!important}#ssSearchBar{display:flex;align-items:flex-start;flex-wrap:wrap;position:relative;color:#444}#ssSearchBar .tabs{display:flex;width:100%;margin-bottom:-1px;z-index:10;pointer-events:none}#ssSearchBar .tabs .ss-tab{border-radius:4px 4px 0 0;border:#b7b7b7 solid 1px;border-color:#1967e5;border-bottom:none;padding:.3em 1.4em;font-size:.94em;letter-spacing:.4px;font-weight:600;background-color:#0047ba;color:#fff;white-space:nowrap;position:relative;pointer-events:auto}#ssSearchBar .tabs .ss-tab:after{content:\"\";height:1px;width:calc(100% + 2px);position:absolute;bottom:0;left:-1px;background-color:#b7b7b7}#ssSearchBar .tabs .ss-tab:hover{background-color:#1967e5}#ssSearchBar .tabs .ss-tab.ss-active{color:#002e5d;margin-bottom:1px;border-color:#b7b7b7;background-color:#fffffff2}#ssSearchBar .tabs .ss-tab.ss-active:after{display:none}#ssSearchBar .tabs .ss-tab:disabled{cursor:auto}#ssSearchBar .tabs .tab-spacer{width:.3em;border-bottom:#b7b7b7 solid 1px;position:relative}#ssSearchBar .tabs .tab-spacer:before{content:\"\";position:absolute;left:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer:after{content:\"\";position:absolute;right:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer.full{width:100%;margin-right:4px;position:relative}#ssSearchBar .ss-adv-search-text{padding-bottom:1em;padding-right:1.25rem;pointer-events:none}#ssSearchBar .ss-bar-wrapper{padding:1em 1em .25em;border-right:#b7b7b7 solid 1px;border-left:#b7b7b7 solid 1px;border-bottom:#b7b7b7 solid 1px;width:100%;display:flex;align-items:center;flex-wrap:wrap;position:relative;background-color:#fffffff2;border-radius:0 4px 4px}#ssSearchBar .ss-bar-wrapper:after{content:\"\";position:absolute;top:0;right:-1px;background-color:transparent;border-radius:0 4px 0 0;width:4px;height:4px;border-top:#b7b7b7 solid 1px;border-right:#b7b7b7 solid 1px}#ssSearchBar .ss-bar-content{position:relative;width:100%;height:initial}#ssSearchBar .ss-search-bar{border-radius:4px;border:#b7b7b7 solid 1px;width:100%}#ssSearchBar #advSearchCloseBtn{float:right;padding:.4em;margin:-.4em 0;color:#666;transition:all .1s}#ssSearchBar #advSearchCloseBtn:hover{color:#292929}#ssSearchBar #advSearchCloseBtn .ss-icon{font-size:1.2em;font-weight:600}#ssSearchBar .ss-adv-search-btn{font-size:.9em;color:#4070b0;margin:.2em 4em 0 auto;padding-right:.25rem;padding-top:2px;padding-bottom:2px;display:flex;justify-content:center;align-items:center}#ssSearchBar .ss-adv-search-btn .ss-icon{font-size:1.4em;opacity:.75;margin-top:.125rem}#ssSearchBar .ss-adv-search-btn:hover{color:#6892ca}\n"] }]
-        }], propDecorators: { config: [{
+                    ], providers: [FieldByScopePipe], animations: [libHbllExpandCollapse], encapsulation: ViewEncapsulation.None, template: "<div id=\"ssSearchBar\">\n    <div class=\"tabs\">\n        <button\n            (click)=\"emitTabChange('local')\"\n            class=\"ss-tab\"\n            id=\"localTab\"\n            [ngClass]=\"{\n                'ss-active': config.scope === 'local',\n                ensign: config.institution === 'ensign' && config.scope !== 'local',\n            }\"\n            data-testid=\"localTab\"\n            [disabled]=\"config.scope === 'local'\"\n        >\n            In the Library\n        </button>\n        @if (config.institution !== 'law') {\n            <div class=\"tab-spacer\"></div>\n            <button\n                (click)=\"emitTabChange('external')\"\n                class=\"ss-tab\"\n                id=\"externalTab\"\n                [ngClass]=\"{\n                    'ss-active': config.scope === 'external',\n                    ensign: config.institution === 'ensign' && config.scope !== 'external',\n                }\"\n                data-testid=\"externalTab\"\n                [disabled]=\"config.scope === 'external'\"\n            >\n                Available Online\n            </button>\n        }\n        <div class=\"tab-spacer full\"></div>\n    </div>\n    <div\n        class=\"ss-bar-wrapper\"\n        #barWrapperRef\n        [@libHbllExpandCollapse]=\"{\n            value: config.showAdvancedSearch ? (!config.showAdvancedSearchAsText ? 1 : 2) : 3,\n            params: { startHeight: heightOfContainer },\n        }\"\n    >\n        <div class=\"ss-bar-content\" data-testid=\"searchForm\">\n            @if (!config.showAdvancedSearch) {\n                <div class=\"ss-search-bar\">\n                    <lib-ss-simple-search\n                        [config]=\"config\"\n                        [supportedSuggestionScopes]=\"supportedSuggestionScopes\"\n                        [suggestions]=\"suggestions\"\n                        (simpleSearch)=\"emitSimpleSearch($event)\"\n                        (clearSimpleSearch)=\"emitClearSimpleSearch()\"\n                        (suggest)=\"suggest.emit($event)\"\n                        [(searchText)]=\"searchText\"\n                    ></lib-ss-simple-search>\n                </div>\n            } @else {\n                <button\n                    id=\"advSearchCloseBtn\"\n                    (click)=\"emitAdvancedSearchClosed()\"\n                    data-testid=\"advSearchCloseBtn\"\n                >\n                    <span class=\"material-symbols-outlined ss-icon\"> close </span>\n                </button>\n                <div id=\"advSearchWrapper\">\n                    @if (config.showAdvancedSearch && !config.showAdvancedSearchAsText) {\n                        <div>\n                            <lib-ss-advanced-search\n                                [config]=\"config\"\n                                (advancedSearch)=\"emitAdvancedSearch($event)\"\n                            ></lib-ss-advanced-search>\n                        </div>\n                    } @else {\n                        <div\n                            class=\"ss-adv-search-text\"\n                            data-testid=\"advancedSearchText\"\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | ssAdvancedQueries: config.scope\n                            \"\n                        ></div>\n                        <div\n                            [innerHTML]=\"\n                                config.advancedSearchQueryRows | advancedFieldWarning: config.scope\n                            \"\n                        ></div>\n                    }\n                </div>\n            }\n        </div>\n        @if (!config.showAdvancedSearch || config.showAdvancedSearchAsText) {\n            <button\n                data-testid=\"toggleAdvSearchButton\"\n                class=\"ss-adv-search-btn\"\n                id=\"advSearchBtn\"\n                (click)=\"emitAdvancedSearchOpen()\"\n            >\n                Advanced\n                <span class=\"material-symbols-outlined ss-icon\"> keyboard_arrow_down </span>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["#ssSearchBar .tabs .ss-tab.ensign{background-color:#2b6042!important;border-color:#2a6142}#ssSearchBar .tabs .ss-tab.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}.mat-mdc-tooltip-surface{background-color:#333!important;border-radius:3px!important;color:#fff!important;font:inherit!important;font-size:.8em!important}#ssSearchBar{display:flex;align-items:flex-start;flex-wrap:wrap;position:relative;color:#444}#ssSearchBar .tabs{display:flex;width:100%;margin-bottom:-1px;z-index:10;pointer-events:none}#ssSearchBar .tabs .ss-tab{border-radius:4px 4px 0 0;border:#b7b7b7 solid 1px;border-color:#1967e5;border-bottom:none;padding:.3em 1.4em;font-size:.94em;letter-spacing:.4px;font-weight:600;background-color:#0047ba;color:#fff;white-space:nowrap;position:relative;pointer-events:auto}#ssSearchBar .tabs .ss-tab:after{content:\"\";height:1px;width:calc(100% + 2px);position:absolute;bottom:0;left:-1px;background-color:#b7b7b7}#ssSearchBar .tabs .ss-tab:hover{background-color:#1967e5}#ssSearchBar .tabs .ss-tab.ss-active{color:#002e5d;margin-bottom:1px;border-color:#b7b7b7;background-color:#fffffff2}#ssSearchBar .tabs .ss-tab.ss-active:after{display:none}#ssSearchBar .tabs .ss-tab:disabled{cursor:auto}#ssSearchBar .tabs .tab-spacer{width:.3em;border-bottom:#b7b7b7 solid 1px;position:relative}#ssSearchBar .tabs .tab-spacer:before{content:\"\";position:absolute;left:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer:after{content:\"\";position:absolute;right:-1px;bottom:-1px;width:1px;height:1px;background-color:#b7b7b7}#ssSearchBar .tabs .tab-spacer.full{width:100%;margin-right:4px;position:relative}#ssSearchBar .ss-adv-search-text{padding-bottom:1em;padding-right:1.25rem;pointer-events:none}#ssSearchBar .ss-bar-wrapper{padding:1em 1em .25em;border-right:#b7b7b7 solid 1px;border-left:#b7b7b7 solid 1px;border-bottom:#b7b7b7 solid 1px;width:100%;display:flex;align-items:center;flex-wrap:wrap;position:relative;background-color:#fffffff2;border-radius:0 4px 4px}#ssSearchBar .ss-bar-wrapper:after{content:\"\";position:absolute;top:0;right:-1px;background-color:transparent;border-radius:0 4px 0 0;width:4px;height:4px;border-top:#b7b7b7 solid 1px;border-right:#b7b7b7 solid 1px}#ssSearchBar .ss-bar-content{position:relative;width:100%;height:initial}#ssSearchBar .ss-search-bar{border-radius:4px;border:#b7b7b7 solid 1px;width:100%}#ssSearchBar #advSearchCloseBtn{float:right;padding:.4em;margin:-.4em 0;color:#666;transition:all .1s}#ssSearchBar #advSearchCloseBtn:hover{color:#292929}#ssSearchBar #advSearchCloseBtn .ss-icon{font-size:1.2em;font-weight:600}#ssSearchBar .ss-adv-search-btn{font-size:.9em;color:#4070b0;margin:.2em 4em 0 auto;padding-right:.25rem;padding-top:2px;padding-bottom:2px;display:flex;justify-content:center;align-items:center}#ssSearchBar .ss-adv-search-btn .ss-icon{font-size:1.4em;opacity:.75;margin-top:.125rem}#ssSearchBar .ss-adv-search-btn:hover{color:#6892ca}\n"] }]
+        }], propDecorators: { searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }], config: [{
                 type: Input,
                 args: [{ required: true }]
             }], supportedSuggestionScopes: [{