@huntsman-cancer-institute/navigation 17.2.6 → 17.3.1

package/fesm2022/huntsman-cancer-institute-navigation.mjs

@@ -1859,11 +1859,24 @@ var __metadata$2 = (this && this.__metadata) || function (k, v) {
  * but it can only handle paging internally.
  */
 let SearchListControllerComponent = class SearchListControllerComponent extends NavComponent {
+    getCustomStyles(styles) {
+        let customStyleObject = "";
+        for (let style of styles.split(" ")) {
+            let styleObject = this.customStyles[style];
+            if (styleObject) {
+                customStyleObject = Object.assign({}, customStyleObject, styleObject);
+            }
+        }
+        return customStyleObject;
+    }
     constructor(elementRef, renderer, resolver, navigationGlobalService, navigationService, http, changeDetectorRef) {
         super(elementRef, renderer, resolver, navigationService, changeDetectorRef);
         this.http = http;
         this.showTitle = true;
+        this.inputMultiline = false;
+        this.searchOptionsWidth = "";
         this.fields = [];
+        this.customStyles = {};
         this.basicSearch = {};
         this.advancedSearch = {};
         this.filterByAllowedFields = [];
@@ -1877,6 +1890,8 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         this.searchType = "";
         this.searchTypeSelected = "";
         this.basicSearchHeader = "";
+        this.globalSearchPlaceholder = "";
+        this.globalSearchValidator = "";
         this.searchListChange = new EventEmitter();
         this.activeTab = 1;
         this.activeTab1 = 1;
@@ -1899,6 +1914,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         this.performedBasicSearchSubject = new Subject();
         this.performedAdvancedSearchSubject = new Subject();
         this.disableLocalFiltering = false;
+        this.advancedSearchAllowFilter = false;
         this.allowSearchSubject$ = new BehaviorSubject(undefined);
         this.searchAllowedSubject$ = new BehaviorSubject(undefined);
         this.allowToggleSubject$ = new BehaviorSubject(undefined);
@@ -1908,6 +1924,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         this.allowSearch = true;
         this.allowToggle = true;
         this.showToggleOptions = true;
+        this.quickSearchEnabled = true;
         if (!navigationService) {
             this.navigationService = new NavigationService(navigationGlobalService);
         }
@@ -1926,11 +1943,12 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         }
     }
     doGlobalSearch(event) {
-        let searchString = event.target.value;
+        let searchString = (event.target.value).trim();
         if (event.keyCode === 13) {
             // Send a message with search-text
             console.debug("In SearchListController enter was detected");
-            this.searchStringSubject.next(searchString);
+            this.globalSearch = searchString;
+            this.searchStringSubject.next(this.getSearchString(searchString));
             this.searchButtonClicked();
             return;
         }
@@ -1944,13 +1962,17 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                     for (let field of this.filterByAllowedFields) {
                         filterField = (filterField) ? filterField + " or " + field : field;
                     }
-                    this.filtersSubject.next([new HciFilterDto(filterField, "string", searchString, undefined, "L", true)]);
+                    this.filtersSubject.next([new HciFilterDto(filterField, "string", this.getSearchString(searchString), undefined, "L", true)]);
                 }
             }
         }
         this.globalSearch = searchString;
     }
     searchButtonClicked() {
+        // Validation Check: if invalid, do not search.
+        if (this.globalSearchValidator && this.isInvalid()) {
+            return;
+        }
         this.subscriptions.add(this.allowSearchSubject$.subscribe(val => {
             if (val === "allowSearch") {
                 this.allowSearch = true;
@@ -1964,7 +1986,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         this.searchAllowedSubject$.next(this.allowSearch);
         if (this.allowSearch) {
             if (this.globalSearch) {
-                this.searchStringSubject.next(this.globalSearch);
+                this.searchStringSubject.next(this.getSearchString(this.globalSearch));
                 if (this.globalSearch.length === 0) {
                     this.filtersSubject.next([]);
                 }
@@ -1980,7 +2002,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                             filterField = (filterField) ? filterField + " or " + field : field;
                         }
                     }
-                    this.filtersSubject.next([new HciFilterDto(filterField, "string", this.globalSearch, undefined, "L", true)]);
+                    this.filtersSubject.next([new HciFilterDto(filterField, "string", this.getSearchString(this.globalSearch), undefined, "L", true)]);
                 }
             }
             this.selectedSearchTypeSubject.next(this.selectedSearchType);
@@ -2012,6 +2034,9 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             this.selectedSearchListSubject.next(this.selectedSearchList);
         }
     }
+    enableQuickSearch(enabled = true) {
+        this.quickSearchEnabled = enabled;
+    }
     /**
      * Updates the config with options and re-fetches data.
      *
@@ -2038,10 +2063,16 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             if (config.showQuickSearchOptions) {
                 this.showQuickSearchOptions = config.showQuickSearchOptions;
             }
+            if (config.inputMultiline) {
+                this.inputMultiline = config.inputMultiline;
+            }
+            if (config.searchOptionsWidth) {
+                this.searchOptionsWidth = config.searchOptionsWidth;
+            }
             if (config.searchTypeArray) {
                 this.searchTypeArray = config.searchTypeArray;
                 if (config.searchType) {
-                    this.selectedSearchType = this.searchTypeArray[this.searchTypeArray.findIndex(x => x == config.searchType)];
+                    this.selectedSearchType = this.searchTypeArray[this.searchTypeArray.findIndex(x => x === config.searchType)];
                 }
                 else {
                     this.selectedSearchType = this.searchTypeArray[0];
@@ -2050,6 +2081,9 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             if (config.disableLocalFiltering) {
                 this.disableLocalFiltering = config.disableLocalFiltering;
             }
+            if (config.advancedSearchAllowFilter) {
+                this.advancedSearchAllowFilter = config.advancedSearchAllowFilter;
+            }
             if (config.selectedSearchString) {
                 this.globalSearch = config.selectedSearchString;
             }
@@ -2068,6 +2102,15 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             if (config.basicSearchHeader != null) {
                 this.basicSearchHeader = config.basicSearchHeader;
             }
+            if (config.globalSearchPlaceholder) {
+                this.globalSearchPlaceholder = config.globalSearchPlaceholder;
+            }
+            if (config.globalSearchValidator) {
+                this.globalSearchValidator = config.globalSearchValidator;
+            }
+            if (config.customStyles) {
+                this.customStyles = config.customStyles;
+            }
             if (config.fields != null) {
                 this.fields = config.fields;
                 if (this.fields) {
@@ -2253,6 +2296,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                 filter.valid = false;
             }
         }
+        this.globalSearch = "";
         this.filtersSubject.next(this.boundFilters);
         //Setting a flag on buttonClick event.
         if (event && (event.keyCode === 13 || event.type === "click")) {
@@ -2271,10 +2315,14 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         for (let filter of this.boundAdvancedSearchFilters) {
             filter.valid = (filter.value && filter.value.length > 0);
         }
-        for (let filter of this.boundAdvancedSearchFilters) {
-            this.updatedAdvanceSearchFilters.push(new HciFilterDto(filter.field, "string", filter.value, undefined, "L", false));
+        this.updatedAdvanceSearchFilters = this.boundAdvancedSearchFilters;
+        this.globalSearch = "";
+        if (this.advancedSearchAllowFilter) {
+            this.filtersSubject.next(this.updatedAdvanceSearchFilters);
+        }
+        else {
+            this.filtersSubject.next([]);
         }
-        this.filtersSubject.next([]);
         this.advancedSearchFiltersSubject.next(this.updatedAdvanceSearchFilters);
         if (event && (event.keyCode === 13 || event.type === "click")) {
             this.performedAdvancedSearchSubject.next("advancedSearchClicked");
@@ -2427,18 +2475,79 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                 if (target.parentElement.getAttribute("class").includes("closeable")) {
                     this.showOptions = false;
                 }
-                if (this.showOptions && !this.elementRef.nativeElement.querySelector("#search-title").contains(target)
-                    && !target.getAttribute("class").includes("mat")) {
-                    this.showOptions = false;
-                }
                 this.toggleShowSubject$.next(this.showOptions);
             }
             catch (error) {
             }
         }
     }
+    isInvalid() {
+        let invalid = false;
+        if (this.globalSearchValidator) {
+            let searchString = this.getSearchString(this.globalSearch);
+            let globalSearchStrList = searchString.split(",");
+            if (typeof this.globalSearchValidator === "string") {
+                for (let globalSearchStr of globalSearchStrList) {
+                    if (!globalSearchStr.match(this.globalSearchValidator)) {
+                        invalid = true;
+                        break;
+                    }
+                }
+            }
+            else if (typeof this.globalSearchValidator === "object") {
+                if (this.globalSearchValidator.required && globalSearchStrList.length === 0) {
+                    invalid = true;
+                }
+                if (this.globalSearchValidator.minRange && !isNaN(Number(this.globalSearchValidator.minRange))) {
+                    for (let globalSearchStr of globalSearchStrList) {
+                        if ((!globalSearchStr && Number(this.globalSearchValidator.minRange) > 0)
+                            || (globalSearchStr && globalSearchStr.length < Number(this.globalSearchValidator.minRange))) {
+                            invalid = true;
+                            break;
+                        }
+                    }
+                }
+                if (this.globalSearchValidator.maxRange && !isNaN(Number(this.globalSearchValidator.maxRange))) {
+                    for (let globalSearchStr of globalSearchStrList) {
+                        if (globalSearchStr && globalSearchStr.length > Number(this.globalSearchValidator.maxRange)) {
+                            invalid = true;
+                            break;
+                        }
+                    }
+                }
+                if (this.globalSearchValidator.pattern) {
+                    for (let globalSearchStr of globalSearchStrList) {
+                        if (!globalSearchStr.match(this.globalSearchValidator.pattern)) {
+                            invalid = true;
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                invalid = true;
+            }
+        }
+        return invalid;
+    }
+    getSearchString(searchString) {
+        searchString = searchString.replace(/\n/g, ",");
+        if (searchString.length > 0) {
+            let strList = searchString.split(",");
+            searchString = "";
+            for (let str of strList) {
+                str = str.trim();
+                searchString = searchString ? (str ? searchString + "," + str : searchString) : str;
+            }
+        }
+        return searchString;
+    }
+    get hasAdvancedSearchVerticalScrollbar() {
+        const divPanel = document.getElementById("advancedSearch-scroll-panel");
+        return divPanel.scrollHeight > divPanel.clientHeight;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SearchListControllerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: NavigationGlobalService }, { token: NavigationService, optional: true }, { token: i3$3.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SearchListControllerComponent, selector: "hci-search-list-controller", inputs: { showTitle: "showTitle", fields: "fields", basicSearch: "basicSearch", advancedSearch: "advancedSearch", filterByAllowedFields: "filterByAllowedFields", quickSearchFields: "quickSearchFields", advancedSearchFields: "advancedSearchFields", sortByAllowedFields: "sortByAllowedFields", sorts: "sorts", showQuickSearchOptions: "showQuickSearchOptions", showAdvancedSearchOptions: "showAdvancedSearchOptions", searchTypeArray: "searchTypeArray", searchType: "searchType", searchTypeSelected: "searchTypeSelected", basicSearchHeader: "basicSearchHeader" }, outputs: { searchListChange: "searchListChange" }, host: { listeners: { "document:click": "documentClick($event,$event.target)" } }, exportAs: ["searchListControllerComponent"], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SearchListControllerComponent, selector: "hci-search-list-controller", inputs: { showTitle: "showTitle", inputMultiline: "inputMultiline", searchOptionsWidth: "searchOptionsWidth", fields: "fields", customStyles: "customStyles", basicSearch: "basicSearch", advancedSearch: "advancedSearch", filterByAllowedFields: "filterByAllowedFields", quickSearchFields: "quickSearchFields", advancedSearchFields: "advancedSearchFields", sortByAllowedFields: "sortByAllowedFields", sorts: "sorts", showQuickSearchOptions: "showQuickSearchOptions", showAdvancedSearchOptions: "showAdvancedSearchOptions", searchTypeArray: "searchTypeArray", searchType: "searchType", searchTypeSelected: "searchTypeSelected", basicSearchHeader: "basicSearchHeader", globalSearchPlaceholder: "globalSearchPlaceholder", globalSearchValidator: "globalSearchValidator" }, outputs: { searchListChange: "searchListChange" }, host: { listeners: { "document:click": "documentClick($event,$event.target)" } }, exportAs: ["searchListControllerComponent"], usesInheritance: true, ngImport: i0, template: `
         <div id="search-title" class="d-flex flex-column">
           <div *ngIf="showTitle" class="d-flex ps-2">
             <div *ngIf="showBackButton" class="me-auto ms-1 backButton">
@@ -2450,7 +2559,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             <div class="ms-auto me-2" (click)="toggleShowOptions($event)">
               <i class="fas fa-cog"></i>
             </div>
-            <div class="search-options" [class.expanded]="showOptions">
+            <div class="search-options" [class.expanded]="showOptions" [ngStyle]="{'width': (searchOptionsWidth !== '') ? searchOptionsWidth : 'auto'}">
               <div class="flex-grow-1">
                 <div *ngIf="showToggleOptions">
                   <div class="card-header-component">
@@ -2482,6 +2591,14 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                                              (keydown)="applyFilters($event)"/>
                                     </mat-form-field>
                                   </div>
+<!--                                  Double check if the textarea needed in Basic Search-->
+<!--                                  <div *ngIf="getFieldType(filter.field) === 'textarea' ">-->
+<!--                                    <mat-form-field appearance="none">-->
+<!--                                      <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>-->
+<!--                                      <textarea [ngModel]="globalSearch" class= "search-box" (keyup)="doGlobalSearch($event)"-->
+<!--                                                style="background-color: #f2f2f2"></textarea>-->
+<!--                                    </mat-form-field>-->
+<!--                                  </div>-->
                                   <div *ngIf="getFieldType(filter.field) === 'dropdown' ">
                                     <mat-form-field appearance="none">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
@@ -2526,9 +2643,9 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
 
                           <div class="ri-modal-footer ri-full-width">
                             <div class="ri-modal-header-right-container ri-full-width">
-                              <button class="ri-btn-cancel ri-btn-cancel-dirty" (click)="setupFilters(false)">CLEAR
+                              <button [ngClass]="{'ri-btn-cancel': !this.changed, 'ri-btn-cancel-dirty': this.changed}" [disabled] ="!this.changed" (click)="setupFilters(false)">CLEAR
                               </button>
-                              <button class="ri-btn-save" [ngClass]="{'ri-btn-save-dirty': this.changed}"
+                              <button [ngClass]="{'ri-btn-save': !this.changed, 'ri-btn-save-dirty': this.changed}"
                                       [disabled]="!this.changed " (click)="applyFilters($event)">SEARCH
                               </button>
                             </div>
@@ -2539,9 +2656,10 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                                     *ngIf="advancedSearchFields.length > 0">
                         <a ngbNavLink>ADVANCED SEARCH</a>
                         <ng-template ngbNavContent>
-                          <div class="advancedSearch-scroll">
+                          <div class="advancedSearch-scroll" id="advancedSearch-scroll-panel">
+                            <div class="advancedSearch-panel">
                             <div *ngFor="let param of this.advancedSearch; index as j">
-                              <div class="advanced-search">
+                                <div [ngClass]="{'advanced-search': !this.hasAdvancedSearchVerticalScrollbar, 'advanced-search-scrolled': this.hasAdvancedSearchVerticalScrollbar}">
                                 <div class="advanced-search-classification-header">
                                   {{param.header}}
                                 </div>
@@ -2602,15 +2720,16 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                               </div>
                             </div>
                           </div>
+                          </div>
                           <div class="search-msg-holder">
                             <div id="advanced-search-msg-holder"></div>
                           </div>
 
                           <div class="ri-modal-footer ri-full-width">
                             <div class="ri-modal-header-right-container ri-full-width">
-                              <button class="ri-btn-cancel ri-btn-cancel-dirty" (click)="setupFilters(false)">CLEAR
+                              <button [ngClass]="{'ri-btn-cancel': !this.changed, 'ri-btn-cancel-dirty': this.changed}" [disabled]="!this.changed" (click)="setupFilters(false)">CLEAR
                               </button>
-                              <button class="ri-btn-save" [ngClass]="{'ri-btn-save-dirty': this.changed}"
+                              <button [ngClass] ="{'ri-btn-save': !this.changed, 'ri-btn-save-dirty': this.changed}"
                                       [disabled]="!this.changed " (click)="applyAdvancedSearchFilters($event)">SEARCH
                               </button>
                             </div>
@@ -2622,16 +2741,16 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                   </div>
 
                   <ng-template #display>
-                    <nav ngbNav #nav1="ngbNav" [(activeId)]="activeTab1">
-                      <ng-container ngbNavItem [ngbNavItem]="1" *ngIf="filterByAllowedFields.length > 0">
+                    <nav ngbNav #nav1="ngbNav" [(activeId)]="activeTab1" [ngStyle]="getCustomStyles('nav')">
+                      <ng-container ngbNavItem [ngbNavItem]="1" class="tab-title-class" *ngIf="filterByAllowedFields.length > 0">
                         <a ngbNavLink>FILTER</a>
                         <ng-template ngbNavContent>
-                          <div class="basic-search sidebar-filter">
-                            <div class="row search-content-body">
+                          <div class="basic-search sidebar-filter filter-sorting-panel" [ngStyle]="getCustomStyles('basic-search sidebar-filter filter-sorting-panel')">
+                            <div class="row search-content-body" [ngStyle]="getCustomStyles('row search-content-body')">
                               <ng-container *ngFor="let filter of boundFilters; index as i">
-                                <div class="col-6">
+                                <div class="col-6" [ngStyle]="getCustomStyles('col-6')">
                                   <div *ngIf="getFieldType(filter.field) === 'input' ">
-                                    <mat-form-field appearance="none">
+                                    <mat-form-field appearance="none" [ngStyle]="getCustomStyles('mat-form-field')">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
                                       <input matInput [ngModel]="filter.value"
                                              (ngModelChange)="setFilter($event, filter)"
@@ -2639,7 +2758,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                                     </mat-form-field>
                                   </div>
                                   <div *ngIf="getFieldType(filter.field) === 'dropdown' ">
-                                    <mat-form-field appearance="none">
+                                    <mat-form-field appearance="none" [ngStyle]="getCustomStyles('mat-form-field')">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
                                       <mat-select [ngModel]="filter.value"
                                                   (ngModelChange)="setFilter($event, filter)"
@@ -2660,14 +2779,14 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                                     </mat-form-field>
                                   </div>
                                   <div *ngIf="getFieldType(filter.field) === 'date' ">
-                                    <mat-form-field appearance="none">
+                                    <mat-form-field appearance="none" [ngStyle]="getCustomStyles('mat-form-field')">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
                                       <input [ngModel]="filter.value"
                                              (ngModelChange)="setFilter($event, filter)"
                                              (keydown)="applyFilters($event)" matInput [matDatepicker]="myPicker"
                                              placeholder="mm/dd/yyyy">
                                       <mat-datepicker-toggle matSuffix [for]="myPicker">
-                                        <mat-icon fontSet="fa" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
+                                        <mat-icon fontSet="fas" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
                                       </mat-datepicker-toggle>
                                       <mat-datepicker #myPicker></mat-datepicker>
                                     </mat-form-field>
@@ -2676,7 +2795,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                               </ng-container>
                             </div>
                           </div>
-                          <div class="search-msg-holder">
+                          <div class="search-msg-holder" [ngStyle]="getCustomStyles('search-msg-holder')">
                             <div id="basic-search-msg-holder"></div>
                           </div>
 
@@ -2691,14 +2810,14 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                           </div>
                         </ng-template>
                       </ng-container>
-                      <ng-container ngbNavItem [ngbNavItem]="2" *ngIf="sortByAllowedFields.length > 0">
+                      <ng-container ngbNavItem [ngbNavItem]="2" class="tab-title-class" *ngIf="sortByAllowedFields.length > 0">
                         <a ngbNavLink>SORTING</a>
                         <ng-template ngbNavContent>
-                          <div class="basic-search sidebar-filter">
+                          <div class="basic-search sidebar-filter filter-sorting-panel" [ngStyle]="getCustomStyles('basic-search sidebar-filter filter-sorting-panel')">
                             <div class="row search-content-body">
                               <ng-container *ngFor="let sortField of sortByAllowedFields">
-                                <div class="col-6 sort-item">
-                                  <div class="sort-icon">
+                                <div class="col-6 sort-item" [ngStyle]="getCustomStyles('col-6 sort-item')">
+                                  <div class="sort-icon" [ngStyle]="getCustomStyles('sort-icon')">
                                     <div *ngIf="isSort(sortField) && isSortAsc(sortField)"
                                          [ngClass]="{'sort-arrow':isFirstSort(sortField)}">
                                       <i class="fas fa-arrow-circle-up fa-lg"></i>
@@ -2708,7 +2827,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                                       <i class="fas fa-arrow-circle-down fa-lg"></i>
                                     </div>
                                   </div>
-                                  <div class="sort-text" (click)="setSort($event, sortField)">
+                                  <div class="sort-text" (click)="setSort($event, sortField)" [ngStyle]="getCustomStyles('sort-text')">
                                     {{getFieldDisplay(sortField)}}
                                   </div>
                                 </div>
@@ -2735,8 +2854,8 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
 
             </div>
           </div>
-          <div class="d-flex mb-1 global-search">
-            <input [ngModel]="globalSearch" class="search-box" (keyup)="doGlobalSearch($event)"/>
+          <div class="d-flex mb-1 global-search" *ngIf="inputMultiline === false">
+            <input [disabled] = "!quickSearchEnabled" [ngModel]="globalSearch" class="search-box" (keyup)="doGlobalSearch($event)" [placeholder]="globalSearchPlaceholder"/>
             <select *ngIf="showQuickSearchOptions" [(ngModel)]="selectedSearchType" (change)="selectSearchType()"
                     id="search-identifier" style="width: 100%; border-radius: 0px; border-color: black; ">
               <option *ngFor="let searchType of searchTypeArray"
@@ -2744,7 +2863,21 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                 {{searchType}}
               </option>
             </select>
-            <button class="ps-1 pe-1 search-button" (click)="searchButtonClicked()">
+            <button class="pl-1 pr-1 search-button" style="height: 100%" [disabled] = "!quickSearchEnabled" [ngClass] = "{'disabled-button':!quickSearchEnabled}" (click)="searchButtonClicked()">
+              <i class="fas fa-search"></i>
+            </button>
+          </div>
+          <div class="d-flex mb-1 global-search" *ngIf="inputMultiline === true">
+            <textarea [disabled] = "!quickSearchEnabled" [ngModel]="globalSearch" class="search-box textarea-search-box"
+                      [ngStyle]="getCustomStyles('search-box textarea-search-box')"  (keyup)="doGlobalSearch($event)" [placeholder]="globalSearchPlaceholder"></textarea>
+            <select *ngIf="showQuickSearchOptions" [(ngModel)]="selectedSearchType" (change)="selectSearchType()"
+                    id="search-identifier" style="width: 100%; border-radius: 0px; border-color: black; ">
+              <option *ngFor="let searchType of searchTypeArray"
+                      [value]="searchType">
+                {{searchType}}
+              </option>
+            </select>
+            <button class="ps-1 pe-1 search-button multiline-search-button" [ngStyle]="getCustomStyles('search-button multiline-search-button')" [disabled] = "!quickSearchEnabled" [ngClass] = "{'disabled-button':!quickSearchEnabled}" (click)="searchButtonClicked()">
               <i class="fas fa-search"></i>
             </button>
           </div>
@@ -2774,7 +2907,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             </mat-button-toggle-group>
           </div>
         </div>
-      `, isInline: true, styles: ["select{padding:.25em 0 .25em .25em;outline-offset:-1px;border:0;color:#8a9499;font-size:.8rem;background-color:#fff}.search-box{border:none;border-right:.1px solid #5B6266;padding-left:.5rem!important;color:#8a9499;font-size:.8rem}.search-options{border-radius:10px}.search-button{width:30%;height:2rem;background-image:linear-gradient(#6da9c7,#3d7a99);margin:0;color:#fff;border:none}.global-search{align-items:center;width:100%;border-radius:2px;border:.04em solid #727b80}.tab-title-class{display:flex;height:50px;background:#d3d3d3}.tab-pane{width:min-content!important}.search-options.expanded{height:fit-content}.backButton .fa-angle-double-left{color:#fff}.svg-inline--fa fa-angle-double-left{color:#fff}.sort-item{display:flex;color:#000}.sort-icon{width:1.5rem}.sort-text:hover{cursor:pointer}.hci-white{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i12.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
+      `, isInline: true, styles: ["select{padding:.25em 0 .25em .25em;outline-offset:-1px;border:0;color:#8a9499;font-size:.8rem;background-color:#fff}.search-box{border:none;border-right:.1px solid #5B6266;padding-left:.5rem!important;color:#8a9499;font-size:.8rem}.search-options{border-radius:10px}.search-button{width:30%;height:2rem;background-image:linear-gradient(#6da9c7,#3d7a99);margin:0;color:#fff;border:none}.global-search{align-items:center;width:100%;border-radius:2px;border:.04em solid #727b80}.tab-title-class{display:flex;height:50px;background:#d3d3d3}.tab-pane{width:min-content!important}.search-options.expanded{height:fit-content}.backButton .fa-angle-double-left{color:#fff}.svg-inline--fas fa-angle-double-left{color:#fff}.sort-item{display:flex;color:#000}.sort-icon{width:1.5rem}.sort-text:hover{cursor:pointer}.hci-white{color:#fff!important}.textarea-search-box{align-content:center;width:100%;min-height:30px}.multiline-search-button{height:100%;max-width:3rem;min-width:3rem}.filter-sorting-panel{margin-top:30px}.disabled-button{cursor:not-allowed;background-image:linear-gradient(var(--greywarm-light),var(--greywarm-medlight))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i12.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }] }); }
 };
 SearchListControllerComponent = __decorate$3([
     ComponentType("SearchListControllerComponent"),
@@ -2800,7 +2933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             <div class="ms-auto me-2" (click)="toggleShowOptions($event)">
               <i class="fas fa-cog"></i>
             </div>
-            <div class="search-options" [class.expanded]="showOptions">
+            <div class="search-options" [class.expanded]="showOptions" [ngStyle]="{'width': (searchOptionsWidth !== '') ? searchOptionsWidth : 'auto'}">
               <div class="flex-grow-1">
                 <div *ngIf="showToggleOptions">
                   <div class="card-header-component">
@@ -2832,6 +2965,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                                              (keydown)="applyFilters($event)"/>
                                     </mat-form-field>
                                   </div>
+<!--                                  Double check if the textarea needed in Basic Search-->
+<!--                                  <div *ngIf="getFieldType(filter.field) === 'textarea' ">-->
+<!--                                    <mat-form-field appearance="none">-->
+<!--                                      <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>-->
+<!--                                      <textarea [ngModel]="globalSearch" class= "search-box" (keyup)="doGlobalSearch($event)"-->
+<!--                                                style="background-color: #f2f2f2"></textarea>-->
+<!--                                    </mat-form-field>-->
+<!--                                  </div>-->
                                   <div *ngIf="getFieldType(filter.field) === 'dropdown' ">
                                     <mat-form-field appearance="none">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
@@ -2876,9 +3017,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
                           <div class="ri-modal-footer ri-full-width">
                             <div class="ri-modal-header-right-container ri-full-width">
-                              <button class="ri-btn-cancel ri-btn-cancel-dirty" (click)="setupFilters(false)">CLEAR
+                              <button [ngClass]="{'ri-btn-cancel': !this.changed, 'ri-btn-cancel-dirty': this.changed}" [disabled] ="!this.changed" (click)="setupFilters(false)">CLEAR
                               </button>
-                              <button class="ri-btn-save" [ngClass]="{'ri-btn-save-dirty': this.changed}"
+                              <button [ngClass]="{'ri-btn-save': !this.changed, 'ri-btn-save-dirty': this.changed}"
                                       [disabled]="!this.changed " (click)="applyFilters($event)">SEARCH
                               </button>
                             </div>
@@ -2889,9 +3030,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                                     *ngIf="advancedSearchFields.length > 0">
                         <a ngbNavLink>ADVANCED SEARCH</a>
                         <ng-template ngbNavContent>
-                          <div class="advancedSearch-scroll">
+                          <div class="advancedSearch-scroll" id="advancedSearch-scroll-panel">
+                            <div class="advancedSearch-panel">
                             <div *ngFor="let param of this.advancedSearch; index as j">
-                              <div class="advanced-search">
+                                <div [ngClass]="{'advanced-search': !this.hasAdvancedSearchVerticalScrollbar, 'advanced-search-scrolled': this.hasAdvancedSearchVerticalScrollbar}">
                                 <div class="advanced-search-classification-header">
                                   {{param.header}}
                                 </div>
@@ -2952,15 +3094,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                               </div>
                             </div>
                           </div>
+                          </div>
                           <div class="search-msg-holder">
                             <div id="advanced-search-msg-holder"></div>
                           </div>
 
                           <div class="ri-modal-footer ri-full-width">
                             <div class="ri-modal-header-right-container ri-full-width">
-                              <button class="ri-btn-cancel ri-btn-cancel-dirty" (click)="setupFilters(false)">CLEAR
+                              <button [ngClass]="{'ri-btn-cancel': !this.changed, 'ri-btn-cancel-dirty': this.changed}" [disabled]="!this.changed" (click)="setupFilters(false)">CLEAR
                               </button>
-                              <button class="ri-btn-save" [ngClass]="{'ri-btn-save-dirty': this.changed}"
+                              <button [ngClass] ="{'ri-btn-save': !this.changed, 'ri-btn-save-dirty': this.changed}"
                                       [disabled]="!this.changed " (click)="applyAdvancedSearchFilters($event)">SEARCH
                               </button>
                             </div>
@@ -2972,16 +3115,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                   </div>
 
                   <ng-template #display>
-                    <nav ngbNav #nav1="ngbNav" [(activeId)]="activeTab1">
-                      <ng-container ngbNavItem [ngbNavItem]="1" *ngIf="filterByAllowedFields.length > 0">
+                    <nav ngbNav #nav1="ngbNav" [(activeId)]="activeTab1" [ngStyle]="getCustomStyles('nav')">
+                      <ng-container ngbNavItem [ngbNavItem]="1" class="tab-title-class" *ngIf="filterByAllowedFields.length > 0">
                         <a ngbNavLink>FILTER</a>
                         <ng-template ngbNavContent>
-                          <div class="basic-search sidebar-filter">
-                            <div class="row search-content-body">
+                          <div class="basic-search sidebar-filter filter-sorting-panel" [ngStyle]="getCustomStyles('basic-search sidebar-filter filter-sorting-panel')">
+                            <div class="row search-content-body" [ngStyle]="getCustomStyles('row search-content-body')">
                               <ng-container *ngFor="let filter of boundFilters; index as i">
-                                <div class="col-6">
+                                <div class="col-6" [ngStyle]="getCustomStyles('col-6')">
                                   <div *ngIf="getFieldType(filter.field) === 'input' ">
-                                    <mat-form-field appearance="none">
+                                    <mat-form-field appearance="none" [ngStyle]="getCustomStyles('mat-form-field')">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
                                       <input matInput [ngModel]="filter.value"
                                              (ngModelChange)="setFilter($event, filter)"
@@ -2989,7 +3132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                                     </mat-form-field>
                                   </div>
                                   <div *ngIf="getFieldType(filter.field) === 'dropdown' ">
-                                    <mat-form-field appearance="none">
+                                    <mat-form-field appearance="none" [ngStyle]="getCustomStyles('mat-form-field')">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
                                       <mat-select [ngModel]="filter.value"
                                                   (ngModelChange)="setFilter($event, filter)"
@@ -3010,14 +3153,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                                     </mat-form-field>
                                   </div>
                                   <div *ngIf="getFieldType(filter.field) === 'date' ">
-                                    <mat-form-field appearance="none">
+                                    <mat-form-field appearance="none" [ngStyle]="getCustomStyles('mat-form-field')">
                                       <mat-label>{{getFieldDisplay(filter.field)}}</mat-label>
                                       <input [ngModel]="filter.value"
                                              (ngModelChange)="setFilter($event, filter)"
                                              (keydown)="applyFilters($event)" matInput [matDatepicker]="myPicker"
                                              placeholder="mm/dd/yyyy">
                                       <mat-datepicker-toggle matSuffix [for]="myPicker">
-                                        <mat-icon fontSet="fa" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
+                                        <mat-icon fontSet="fas" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
                                       </mat-datepicker-toggle>
                                       <mat-datepicker #myPicker></mat-datepicker>
                                     </mat-form-field>
@@ -3026,7 +3169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                               </ng-container>
                             </div>
                           </div>
-                          <div class="search-msg-holder">
+                          <div class="search-msg-holder" [ngStyle]="getCustomStyles('search-msg-holder')">
                             <div id="basic-search-msg-holder"></div>
                           </div>
 
@@ -3041,14 +3184,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                           </div>
                         </ng-template>
                       </ng-container>
-                      <ng-container ngbNavItem [ngbNavItem]="2" *ngIf="sortByAllowedFields.length > 0">
+                      <ng-container ngbNavItem [ngbNavItem]="2" class="tab-title-class" *ngIf="sortByAllowedFields.length > 0">
                         <a ngbNavLink>SORTING</a>
                         <ng-template ngbNavContent>
-                          <div class="basic-search sidebar-filter">
+                          <div class="basic-search sidebar-filter filter-sorting-panel" [ngStyle]="getCustomStyles('basic-search sidebar-filter filter-sorting-panel')">
                             <div class="row search-content-body">
                               <ng-container *ngFor="let sortField of sortByAllowedFields">
-                                <div class="col-6 sort-item">
-                                  <div class="sort-icon">
+                                <div class="col-6 sort-item" [ngStyle]="getCustomStyles('col-6 sort-item')">
+                                  <div class="sort-icon" [ngStyle]="getCustomStyles('sort-icon')">
                                     <div *ngIf="isSort(sortField) && isSortAsc(sortField)"
                                          [ngClass]="{'sort-arrow':isFirstSort(sortField)}">
                                       <i class="fas fa-arrow-circle-up fa-lg"></i>
@@ -3058,7 +3201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                                       <i class="fas fa-arrow-circle-down fa-lg"></i>
                                     </div>
                                   </div>
-                                  <div class="sort-text" (click)="setSort($event, sortField)">
+                                  <div class="sort-text" (click)="setSort($event, sortField)" [ngStyle]="getCustomStyles('sort-text')">
                                     {{getFieldDisplay(sortField)}}
                                   </div>
                                 </div>
@@ -3085,8 +3228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
             </div>
           </div>
-          <div class="d-flex mb-1 global-search">
-            <input [ngModel]="globalSearch" class="search-box" (keyup)="doGlobalSearch($event)"/>
+          <div class="d-flex mb-1 global-search" *ngIf="inputMultiline === false">
+            <input [disabled] = "!quickSearchEnabled" [ngModel]="globalSearch" class="search-box" (keyup)="doGlobalSearch($event)" [placeholder]="globalSearchPlaceholder"/>
             <select *ngIf="showQuickSearchOptions" [(ngModel)]="selectedSearchType" (change)="selectSearchType()"
                     id="search-identifier" style="width: 100%; border-radius: 0px; border-color: black; ">
               <option *ngFor="let searchType of searchTypeArray"
@@ -3094,7 +3237,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 {{searchType}}
               </option>
             </select>
-            <button class="ps-1 pe-1 search-button" (click)="searchButtonClicked()">
+            <button class="pl-1 pr-1 search-button" style="height: 100%" [disabled] = "!quickSearchEnabled" [ngClass] = "{'disabled-button':!quickSearchEnabled}" (click)="searchButtonClicked()">
+              <i class="fas fa-search"></i>
+            </button>
+          </div>
+          <div class="d-flex mb-1 global-search" *ngIf="inputMultiline === true">
+            <textarea [disabled] = "!quickSearchEnabled" [ngModel]="globalSearch" class="search-box textarea-search-box"
+                      [ngStyle]="getCustomStyles('search-box textarea-search-box')"  (keyup)="doGlobalSearch($event)" [placeholder]="globalSearchPlaceholder"></textarea>
+            <select *ngIf="showQuickSearchOptions" [(ngModel)]="selectedSearchType" (change)="selectSearchType()"
+                    id="search-identifier" style="width: 100%; border-radius: 0px; border-color: black; ">
+              <option *ngFor="let searchType of searchTypeArray"
+                      [value]="searchType">
+                {{searchType}}
+              </option>
+            </select>
+            <button class="ps-1 pe-1 search-button multiline-search-button" [ngStyle]="getCustomStyles('search-button multiline-search-button')" [disabled] = "!quickSearchEnabled" [ngClass] = "{'disabled-button':!quickSearchEnabled}" (click)="searchButtonClicked()">
               <i class="fas fa-search"></i>
             </button>
           </div>
@@ -3124,13 +3281,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             </mat-button-toggle-group>
           </div>
         </div>
-      `, styles: ["select{padding:.25em 0 .25em .25em;outline-offset:-1px;border:0;color:#8a9499;font-size:.8rem;background-color:#fff}.search-box{border:none;border-right:.1px solid #5B6266;padding-left:.5rem!important;color:#8a9499;font-size:.8rem}.search-options{border-radius:10px}.search-button{width:30%;height:2rem;background-image:linear-gradient(#6da9c7,#3d7a99);margin:0;color:#fff;border:none}.global-search{align-items:center;width:100%;border-radius:2px;border:.04em solid #727b80}.tab-title-class{display:flex;height:50px;background:#d3d3d3}.tab-pane{width:min-content!important}.search-options.expanded{height:fit-content}.backButton .fa-angle-double-left{color:#fff}.svg-inline--fa fa-angle-double-left{color:#fff}.sort-item{display:flex;color:#000}.sort-icon{width:1.5rem}.sort-text:hover{cursor:pointer}.hci-white{color:#fff!important}\n"] }]
+      `, styles: ["select{padding:.25em 0 .25em .25em;outline-offset:-1px;border:0;color:#8a9499;font-size:.8rem;background-color:#fff}.search-box{border:none;border-right:.1px solid #5B6266;padding-left:.5rem!important;color:#8a9499;font-size:.8rem}.search-options{border-radius:10px}.search-button{width:30%;height:2rem;background-image:linear-gradient(#6da9c7,#3d7a99);margin:0;color:#fff;border:none}.global-search{align-items:center;width:100%;border-radius:2px;border:.04em solid #727b80}.tab-title-class{display:flex;height:50px;background:#d3d3d3}.tab-pane{width:min-content!important}.search-options.expanded{height:fit-content}.backButton .fa-angle-double-left{color:#fff}.svg-inline--fas fa-angle-double-left{color:#fff}.sort-item{display:flex;color:#000}.sort-icon{width:1.5rem}.sort-text:hover{cursor:pointer}.hci-white{color:#fff!important}.textarea-search-box{align-content:center;width:100%;min-height:30px}.multiline-search-button{height:100%;max-width:3rem;min-width:3rem}.filter-sorting-panel{margin-top:30px}.disabled-button{cursor:not-allowed;background-image:linear-gradient(var(--greywarm-light),var(--greywarm-medlight))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: NavigationGlobalService }, { type: NavigationService, decorators: [{
                     type: Optional
                 }] }, { type: i3$3.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { showTitle: [{
                 type: Input
+            }], inputMultiline: [{
+                type: Input
+            }], searchOptionsWidth: [{
+                type: Input
             }], fields: [{
                 type: Input
+            }], customStyles: [{
+                type: Input
             }], basicSearch: [{
                 type: Input
             }], advancedSearch: [{
@@ -3157,6 +3320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], basicSearchHeader: [{
                 type: Input
+            }], globalSearchPlaceholder: [{
+                type: Input
+            }], globalSearchValidator: [{
+                type: Input
             }], searchListChange: [{
                 type: Output
             }], documentClick: [{
@@ -3193,6 +3360,8 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
         this.closeOthers = true;
         // The list of fields to group by.
         this.groupingFields = [];
+        // delimiter for getGroupDisplay
+        this.delimiter = ", ";
         // TODO: Reimplement if we want users to be able to control grouping.
         this.groupByAllowedFields = [];
         // The page size of rows in a selected group.
@@ -3430,6 +3599,9 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
             if (config.groupDisplay) {
                 this.groupDisplay = config.groupDisplay;
             }
+            if (config.delimiter) {
+                this.delimiter = config.delimiter;
+            }
             if (config.closeOthers !== undefined) {
                 this.closeOthers = config.closeOthers;
             }
@@ -3620,52 +3792,58 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
             if (this.filters && this.filters.length > 0) {
                 let include = true;
                 for (let filter of this.filters) {
-                    if (filter.getField().indexOf(" or ") !== -1) {
+                    if (!filter.valid) {
+                        continue;
+                    }
+                    else if (this.controller.advancedSearch && this.controller.advancedSearch.length > 0 && !this.controller.advancedSearchAllowFilter) {
+                        //  Advanced search does not auto filter by default
+                        continue;
+                    }
+                    else {
+                        let filterValues = filter.getValue().split(",");
+                        let filterFields = filter.getField().split(" or ");
                         let innerInclude = false;
-                        for (let field of filter.getField().split(" or ")) {
-                            // check row[field] is a number and if yes, skip applying the toLowerCase() function.
-                            // * to cover the handling of the search by person id scenario from within the quick search functionality.
+                        for (let field of filterFields) {
                             if (row[field] && typeof row[field] == "number") {
-                                if (row[field] == filter.getValue()) {
-                                    innerInclude = true;
+                                for (let value of filterValues) {
+                                    if (row[field] == value) {
+                                        innerInclude = true;
+                                        break;
+                                    }
                                 }
                             }
-                            else if (row[field] instanceof Date || filter.getValue() instanceof Date || filter.getDataType() == "date") {
-                                if (row[field] && filter.getValue() && (new Date(row[field])).getTime() == (new Date(filter.getValue())).getTime()) {
-                                    filter.getValue();
-                                    innerInclude = true;
+                            else if (row[field] && row[field] instanceof Date || filter.getDataType() == "date") {
+                                for (let value of filterValues) {
+                                    if (value instanceof Date) {
+                                        if ((new Date(row[field])).getTime() == (new Date(value)).getTime()) {
+                                            innerInclude = true;
+                                            break;
+                                        }
+                                    }
                                 }
                             }
-                            else if (row[field] && row[field].toLowerCase().indexOf(filter.getValue().toLowerCase()) !== -1) {
-                                innerInclude = true;
+                            else if (row[field] && typeof row[field] == "string") {
+                                // Check if it is multiple search strings
+                                for (let value of filterValues) {
+                                    if (typeof value == "string") {
+                                        if (row[field].toLowerCase().indexOf(value.toLowerCase()) !== -1) {
+                                            innerInclude = true;
+                                            break;
+                                        }
+                                    }
+                                }
                             }
-                        }
-                        if (!innerInclude) {
-                            include = false;
-                        }
-                    }
-                    else {
-                        if (!filter.valid || !filter.getValue()) {
-                        }
-                        else if ((filter.valid || filter.getValue()) && (this.controller.advancedSearch.length !== undefined && this.controller.advancedSearch.length > 0)) {
-                            break;
-                        }
-                        else if (!row[filter.field]) {
-                            include = false;
-                            break;
-                        }
-                        else if (row[filter.field] instanceof Date || filter.getValue() instanceof Date || filter.getDataType() == "date") {
-                            filter.getValue();
-                            if ((new Date(row[filter.field])).getTime() != (new Date(filter.getValue())).getTime()) {
-                                include = false;
+                            if (innerInclude) {
                                 break;
                             }
                         }
-                        else if (row[filter.field].toLowerCase().indexOf(filter.getValue().toLowerCase()) === -1) {
+                        if (!innerInclude) {
                             include = false;
-                            break;
                         }
                     }
+                    if (include) {
+                        break;
+                    }
                 }
                 if (!include) {
                     continue;
@@ -4061,7 +4239,8 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
         }
     }
     /**
-     * Concat group by fields to comma delimited words.
+     * Concat group by fields to comma delimited words
+     * or delimiter delimited words if the deliminator has its default value set.
      *
      * @param {RowGroup} rowGroup
      * @returns {string}
@@ -4076,7 +4255,9 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
         }
         else {
             for (let field of this.grouping.fields) {
-                display = (display) ? display + ", " + rowGroup[field] : rowGroup[field];
+                if (rowGroup[field] !== null && rowGroup[field] !== "") {
+                    display = (display) ? display + this.delimiter + rowGroup[field] : rowGroup[field];
+                }
             }
         }
         return display;
@@ -4211,8 +4392,8 @@ let SearchListComponent = class SearchListComponent extends NavComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SearchListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: NavigationGlobalService }, { token: NavigationService, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SearchListComponent, selector: "hci-search-list", inputs: { controller: "controller", boundData: ["data", "boundData"], dataSubject: "dataSubject", externalDataCall: ["dataCall", "externalDataCall"], loadingSubjects: "loadingSubjects", loading: "loading", route: "route", inlineExpand: "inlineExpand", rowId: "rowId", groupClass: "groupClass", rowClass: "rowClass", groupDisplay: "groupDisplay", closeOthers: "closeOthers", groupingFields: "groupingFields", groupByAllowedFields: "groupByAllowedFields", pageSize: "pageSize", groupPageSize: "groupPageSize", groupCacheNumPages: "groupCacheNumPages", dropdown: "dropdown", busyIcon: "busyIcon", showResultsCount: "showResultsCount", onGroupClick: "onGroupClick", onRowClick: "onRowClick", groupTemplate: "groupTemplate", groupSelectedTemplate: "groupSelectedTemplate", itemTemplate: "itemTemplate", onGroupClose: "onGroupClose" }, outputs: { groupClick: "groupClick", rowClick: "rowClick", dataChange: "dataChange" }, viewQueries: [{ propertyName: "defaultGroupTemplate", first: true, predicate: ["defaultGroupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupSelectedTemplate", first: true, predicate: ["defaultGroupSelectedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "selectedRowGroupContainerSetter", first: true, predicate: ["selectedRowGroupContainer"], descendants: true, read: ElementRef }, { propertyName: "rowParents", predicate: ["rowParent"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SearchListComponent, selector: "hci-search-list", inputs: { controller: "controller", boundData: ["data", "boundData"], dataSubject: "dataSubject", externalDataCall: ["dataCall", "externalDataCall"], loadingSubjects: "loadingSubjects", loading: "loading", route: "route", inlineExpand: "inlineExpand", rowId: "rowId", groupClass: "groupClass", rowClass: "rowClass", groupDisplay: "groupDisplay", closeOthers: "closeOthers", groupingFields: "groupingFields", delimiter: "delimiter", groupByAllowedFields: "groupByAllowedFields", pageSize: "pageSize", groupPageSize: "groupPageSize", groupCacheNumPages: "groupCacheNumPages", dropdown: "dropdown", busyIcon: "busyIcon", showResultsCount: "showResultsCount", onGroupClick: "onGroupClick", onRowClick: "onRowClick", groupTemplate: "groupTemplate", groupSelectedTemplate: "groupSelectedTemplate", itemTemplate: "itemTemplate", onGroupClose: "onGroupClose" }, outputs: { groupClick: "groupClick", rowClick: "rowClick", dataChange: "dataChange" }, viewQueries: [{ propertyName: "defaultGroupTemplate", first: true, predicate: ["defaultGroupTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupSelectedTemplate", first: true, predicate: ["defaultGroupSelectedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "selectedRowGroupContainerSetter", first: true, predicate: ["selectedRowGroupContainer"], descendants: true, read: ElementRef }, { propertyName: "rowParents", predicate: ["rowParent"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div *ngIf="showResultsCount && searchResultMessage"
           class="results-count" [ngClass]="{ 'format-bottom-padding': this.searchResultMessage === '' }">
           {{ this.searchResultMessage }}
         </div>
@@ -4386,7 +4567,7 @@ SearchListComponent = __decorate$2([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SearchListComponent, decorators: [{
             type: Component,
             args: [{ selector: "hci-search-list", template: `
-        <div
+        <div *ngIf="showResultsCount && searchResultMessage"
           class="results-count" [ngClass]="{ 'format-bottom-padding': this.searchResultMessage === '' }">
           {{ this.searchResultMessage }}
         </div>
@@ -4580,6 +4761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], groupingFields: [{
                 type: Input
+            }], delimiter: [{
+                type: Input
             }], groupByAllowedFields: [{
                 type: Input
             }], pageSize: [{