@huntsman-cancer-institute/navigation 17.3.4 → 17.4.0

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

@@ -13,6 +13,7 @@ import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import * as i10 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyRadioModule } from '@angular/material/legacy-radio';
 import * as i5$2 from '@huntsman-cancer-institute/angular-tree-component';
 import { TreeModule } from '@huntsman-cancer-institute/angular-tree-component';
 import * as i11 from '@angular/material/datepicker';
@@ -664,7 +665,7 @@ class NavComponent {
             if (typeof this.type === "string") {
                 this.typeName = this.type;
             }
-            //The componentType decorator was created for uglification. Use it!
+            // The componentType decorator was created for uglification. Use it!
             else if (this.type["componentType"]) {
                 this.typeName = this.type["componentType"];
             }
@@ -737,13 +738,13 @@ class NavComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: NavComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: NavigationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: NavComponent, selector: "hci-nav", inputs: { config: "config", id: ["navId", "id"], isRoot: "isRoot", type: "type", title: "title", rootClass: "rootClass", roleName: "roleName", authenticatedKey: "authenticatedKey", notAuthenticatedKey: "notAuthenticatedKey", inputChildren: ["children", "inputChildren"], isCCR: "isCCR" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: NavComponent, selector: "hci-nav", inputs: { config: "config", id: ["navId", "id"], isRoot: "isRoot", type: "type", title: "title", rootClass: "rootClass", roleName: "roleName", authenticatedKey: "authenticatedKey", notAuthenticatedKey: "notAuthenticatedKey", inputChildren: ["children", "inputChildren"], isCCR: "isCCR" }, usesOnChanges: true, ngImport: i0, template: `
       `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `
+                    template: `
       `,
                     selector: "hci-nav"
                 }]
@@ -1892,6 +1893,9 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         this.basicSearchHeader = "";
         this.globalSearchPlaceholder = "";
         this.globalSearchValidator = "";
+        this.buttonRowTemplate = null;
+        this.searchSortingOptions = [];
+        this.labelText = "";
         this.searchListChange = new EventEmitter();
         this.activeTab = 1;
         this.activeTab1 = 1;
@@ -1925,6 +1929,8 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         this.allowToggle = true;
         this.showToggleOptions = true;
         this.quickSearchEnabled = true;
+        this.searchSortingSelectionChangeSubject$ = new BehaviorSubject(undefined);
+        this.currentSearchSorting = { "value": undefined, "display": undefined, "isAsc": true };
         if (!navigationService) {
             this.navigationService = new NavigationService(navigationGlobalService);
         }
@@ -1942,6 +1948,9 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             this.postInit();
         }
     }
+    setButtonRowTemplate(buttonRowTemplate) {
+        this.buttonRowTemplate = buttonRowTemplate;
+    }
     doGlobalSearch(event) {
         let searchString = (event.target.value).trim();
         if (event.keyCode === 13) {
@@ -2136,10 +2145,17 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                     }
                 }
             }
+            if (config.searchSortingOptions) {
+                this.searchSortingOptions = config.searchSortingOptions;
+            }
+            if (config.initialSearchSortingSelection) {
+                this.currentSearchSorting = config.initialSearchSortingSelection;
+            }
         }
         if (this.sortByAllowedFields.length > 0 && this.sorts.length === 0) {
             this.sorts.push(new HciSortDto(this.sortByAllowedFields[0]));
         }
+        console.log('anotherSorting Field:', this.searchSortingOptions);
         this.setupFilters();
         super.updateConfig(config);
     }
@@ -2344,6 +2360,16 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         }
         this.filtersSubject.next(this.boundFilters);
     }
+    onSearchSortClicked($event, searchSortItem) {
+        if (this.currentSearchSorting.value === searchSortItem.value) {
+            this.currentSearchSorting.isAsc = !this.currentSearchSorting.isAsc;
+        }
+        else {
+            this.currentSearchSorting = Object.assign({}, searchSortItem);
+            this.currentSearchSorting.isAsc = true;
+        }
+        this.searchSortingSelectionChangeSubject$.next(this.currentSearchSorting);
+    }
     /**
      * TODO: If sort in group, reset group data, not overall.
      *
@@ -2547,7 +2573,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
         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", 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: `
+    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", buttonRowTemplate: "buttonRowTemplate", searchSortingOptions: "searchSortingOptions", labelText: "labelText" }, 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">
@@ -2557,7 +2583,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             </div>
             {{title}}
             <div class="ms-auto me-2" (click)="toggleShowOptions($event)">
-              <i class="fas fa-cog"></i>
+              <i class="fas fa-filter"></i>
             </div>
             <div class="search-options" [class.expanded]="showOptions" [ngStyle]="{'width': (searchOptionsWidth !== '') ? searchOptionsWidth : 'auto'}">
               <div class="flex-grow-1">
@@ -2571,10 +2597,10 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                   </div>
 
                   <div *ngIf="disableLocalFiltering; else display">
-                    <nav ngbNav #nav="ngbNav" [(activeId)]="activeTab">
+                    <nav ngbNav #nav="ngbNav" [(activeId)]="activeTab" class = "nav-container">
                       <ng-container ngbNavItem [ngbNavItem]="1" class="tab-title-class"
                                     *ngIf="filterByAllowedFields.length > 0">
-                        <a ngbNavLink>BASIC SEARCH</a>
+                        <a ngbNavLink class ="flex-grow-1">BASIC SEARCH</a>
                         <ng-template ngbNavContent>
                           <div class="basic-search">
                             <div class="classification-header">
@@ -2591,6 +2617,7 @@ 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">-->
@@ -2599,6 +2626,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
 <!--                                                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>
@@ -2654,73 +2682,73 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                       </ng-container>
                       <ng-container ngbNavItem [ngbNavItem]="2" class="tab-title-class"
                                     *ngIf="advancedSearchFields.length > 0">
-                        <a ngbNavLink>ADVANCED SEARCH</a>
+                        <a ngbNavLink class ="flex-grow-1">ADVANCED SEARCH</a>
                         <ng-template ngbNavContent>
                           <div class="advancedSearch-scroll" id="advancedSearch-scroll-panel">
                             <div class="advancedSearch-panel">
-                            <div *ngFor="let param of this.advancedSearch; index as j">
+                              <div *ngFor="let param of this.advancedSearch; index as j">
                                 <div [ngClass]="{'advanced-search': !this.hasAdvancedSearchVerticalScrollbar, 'advanced-search-scrolled': this.hasAdvancedSearchVerticalScrollbar}">
-                                <div class="advanced-search-classification-header">
-                                  {{param.header}}
-                                </div>
-                                <div class="row advanced-search-content-body">
-                                  <ng-container>
-                                    <div *ngFor="let field of this.param.fields; index as k">
-                                      <div class="col-5">
-                                        <div *ngIf="getFieldType(field.field) === 'input' ">
-                                          <mat-form-field appearance="none">
-                                            <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
-                                            <input matInput [ngModel]="getFilterForField(field.field).value"
-                                                   (ngModelChange)="setFilter($event, getFilterForField(field.field))"
-                                                   (keydown)="applyAdvancedSearchFilters($event)"/>
-                                          </mat-form-field>
-                                        </div>
-                                        <div *ngIf="getFieldType(field.field) === 'checkbox'  ">
-                                          <mat-checkbox class="checkboxes"
-                                                        [(ngModel)]="getFilterForField(field.field).value">
-                                            {{getFieldDisplay(field.field)}}
-                                          </mat-checkbox>
-                                        </div>
-                                        <div *ngIf="getFieldType(field.field) === 'dropdown' ">
-                                          <mat-form-field appearance="none">
-                                            <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
-                                            <mat-select [ngModel]="getFilterForField(field.field).value"
-                                                        (ngModelChange)="setFilter($event, getFilterForField(field.field))"
-                                                        (keydown)="applyAdvancedSearchFilters($event)">
-                                              <div *ngIf="this.field.valueURL;else display_raw_value">
-                                                <mat-option>None</mat-option>
-                                                <mat-option *ngFor="let value of this.field.values"
-                                                            [value]="value.id">{{value.display}}</mat-option>
-                                              </div>
-                                              <ng-template #display_raw_value>
-                                                <mat-option>None</mat-option>
-                                                <mat-option *ngFor="let value of this.field.values"
-                                                            [value]="value">{{value}}</mat-option>
-                                              </ng-template>
-                                            </mat-select>
-                                          </mat-form-field>
-                                        </div>
-                                        <div *ngIf="getFieldType(field.field) === 'date' ">
-                                          <mat-form-field appearance="none">
-                                            <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
-                                            <input [ngModel]="getFilterForField(field.field).value"
-                                                   (ngModelChange)="setFilter($event, getFilterForField(field.field))"
-                                                   (keydown)="applyAdvancedSearchFilters($event)" matInput
-                                                   [matDatepicker]="myPicker" placeholder="date">
-                                            <mat-datepicker-toggle matSuffix [for]="myPicker">
-                                              <mat-icon fontSet="fa" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
-                                            </mat-datepicker-toggle>
-                                            <mat-datepicker #myPicker></mat-datepicker>
-                                          </mat-form-field>
+                                  <div class="advanced-search-classification-header">
+                                    {{param.header}}
+                                  </div>
+                                  <div class="row advanced-search-content-body">
+                                    <ng-container>
+                                      <div *ngFor="let field of this.param.fields; index as k">
+                                        <div class="col-5">
+                                          <div *ngIf="getFieldType(field.field) === 'input' ">
+                                            <mat-form-field appearance="none">
+                                              <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
+                                              <input matInput [ngModel]="getFilterForField(field.field).value"
+                                                     (ngModelChange)="setFilter($event, getFilterForField(field.field))"
+                                                     (keydown)="applyAdvancedSearchFilters($event)"/>
+                                            </mat-form-field>
+                                          </div>
+                                          <div *ngIf="getFieldType(field.field) === 'checkbox'  ">
+                                            <mat-checkbox class="checkboxes"
+                                                          [(ngModel)]="getFilterForField(field.field).value">
+                                              {{getFieldDisplay(field.field)}}
+                                            </mat-checkbox>
+                                          </div>
+                                          <div *ngIf="getFieldType(field.field) === 'dropdown' ">
+                                            <mat-form-field appearance="none">
+                                              <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
+                                              <mat-select [ngModel]="getFilterForField(field.field).value"
+                                                          (ngModelChange)="setFilter($event, getFilterForField(field.field))"
+                                                          (keydown)="applyAdvancedSearchFilters($event)">
+                                                <div *ngIf="this.field.valueURL;else display_raw_value">
+                                                  <mat-option>None</mat-option>
+                                                  <mat-option *ngFor="let value of this.field.values"
+                                                              [value]="value.id">{{value.display}}</mat-option>
+                                                </div>
+                                                <ng-template #display_raw_value>
+                                                  <mat-option>None</mat-option>
+                                                  <mat-option *ngFor="let value of this.field.values"
+                                                              [value]="value">{{value}}</mat-option>
+                                                </ng-template>
+                                              </mat-select>
+                                            </mat-form-field>
+                                          </div>
+                                          <div *ngIf="getFieldType(field.field) === 'date' ">
+                                            <mat-form-field appearance="none">
+                                              <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
+                                              <input [ngModel]="getFilterForField(field.field).value"
+                                                     (ngModelChange)="setFilter($event, getFilterForField(field.field))"
+                                                     (keydown)="applyAdvancedSearchFilters($event)" matInput
+                                                     [matDatepicker]="myPicker" placeholder="date">
+                                              <mat-datepicker-toggle matSuffix [for]="myPicker">
+                                                <mat-icon fontSet="fa" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
+                                              </mat-datepicker-toggle>
+                                              <mat-datepicker #myPicker></mat-datepicker>
+                                            </mat-form-field>
+                                          </div>
                                         </div>
                                       </div>
-                                    </div>
-                                  </ng-container>
+                                    </ng-container>
+                                  </div>
                                 </div>
                               </div>
                             </div>
                           </div>
-                          </div>
                           <div class="search-msg-holder">
                             <div id="advanced-search-msg-holder"></div>
                           </div>
@@ -2730,12 +2758,57 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                               <button [ngClass]="{'ri-btn-cancel': !this.changed, 'ri-btn-cancel-dirty': this.changed}" [disabled]="!this.changed" (click)="setupFilters(false)">CLEAR
                               </button>
                               <button [ngClass] ="{'ri-btn-save': !this.changed, 'ri-btn-save-dirty': this.changed}"
-                                      [disabled]="!this.changed " (click)="applyAdvancedSearchFilters($event)">SEARCH
+                                      [disabled]="!this.changed" (click)="applyAdvancedSearchFilters($event)">SEARCH
                               </button>
                             </div>
                           </div>
                         </ng-template>
                       </ng-container>
+
+
+                      <ng-container ngbNavItem [ngbNavItem]="3" class="tab-title-class"
+                                    *ngIf="searchSortingOptions.length>0">
+                        <a ngbNavLink class ="flex-grow-1" >SORTING</a>
+                        <ng-template ngbNavContent>
+                          <div class="basic-search" >
+                            <div class="classification-header">
+                              {{this.basicSearchHeader}}
+                            </div>
+                            <div class="row sidebar-filter">
+                                <ng-container *ngFor="let searchSortItem of searchSortingOptions">
+                                  <div class="col-6 sort-item" [ngStyle]="getCustomStyles('col-6 sort-item')">
+                                    <div class="sort-icon" [ngStyle]="getCustomStyles('sort-icon')">
+                                      <div *ngIf="currentSearchSorting.value==searchSortItem.value && currentSearchSorting.isAsc"
+                                           [ngClass]="{'sort-arrow':true}">
+                                        <i class="fas fa-arrow-circle-up fa-lg"></i>
+                                      </div>
+                                      <div *ngIf="currentSearchSorting.value==searchSortItem.value && !currentSearchSorting.isAsc"
+                                           [ngClass]="{'sort-arrow':true}">
+                                        <i class="fas fa-arrow-circle-down fa-lg"></i>
+                                      </div>
+                                    </div>
+                                    <div class="sort-text no-user-select-text" (click)="onSearchSortClicked($event, searchSortItem)" [ngStyle]="getCustomStyles('sort-text')">
+                                      {{searchSortItem.display}}
+                                    </div>
+                                  </div>
+                                </ng-container>
+
+
+                              </div>
+                          </div>
+
+                          <div class="search-msg-holder">
+                            <div id="basic-search-msg-holder"></div>
+                          </div>
+
+                          <div class="ri-modal-footer ri-full-width">
+                            <div class="ri-modal-header-right-container ri-full-width">
+
+                            </div>
+                          </div>
+
+                        </ng-template>
+                      </ng-container>
                     </nav>
                     <div [ngbNavOutlet]="nav"></div>
                   </div>
@@ -2801,6 +2874,8 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
 
                           <div class="ri-modal-footer ri-full-width sidebar-filter">
                             <div class="ri-modal-header-right-container ri-full-width">
+                              <ng-container *ngTemplateOutlet="buttonRowTemplate">
+                              </ng-container>
                               <button class="ri-btn-cancel ri-btn-cancel-dirty" (click)="setupFilters(true)">RESET
                               </button>
                               <button class="ri-btn-save" [ngClass]="{'ri-btn-save-dirty': this.changed}"
@@ -2868,7 +2943,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
             </button>
           </div>
           <div class="d-flex mb-1 global-search" *ngIf="inputMultiline === true">
-            <textarea [disabled] = "!quickSearchEnabled" [ngModel]="globalSearch" class="search-box textarea-search-box"
+            <textarea aria-label="globalSearch" [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; ">
@@ -2877,7 +2952,7 @@ let SearchListControllerComponent = class SearchListControllerComponent extends
                 {{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()">
+            <button aria-label="searchButton" 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>
@@ -2907,7 +2982,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--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"] }] }); }
+      `, 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))}.nav-container{display:flex!important;flex-wrap:nowrap}.no-user-select-text{-webkit-user-select:none;-ms-user-select:none;user-select:none}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"),
@@ -2931,7 +3006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             </div>
             {{title}}
             <div class="ms-auto me-2" (click)="toggleShowOptions($event)">
-              <i class="fas fa-cog"></i>
+              <i class="fas fa-filter"></i>
             </div>
             <div class="search-options" [class.expanded]="showOptions" [ngStyle]="{'width': (searchOptionsWidth !== '') ? searchOptionsWidth : 'auto'}">
               <div class="flex-grow-1">
@@ -2945,10 +3020,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                   </div>
 
                   <div *ngIf="disableLocalFiltering; else display">
-                    <nav ngbNav #nav="ngbNav" [(activeId)]="activeTab">
+                    <nav ngbNav #nav="ngbNav" [(activeId)]="activeTab" class = "nav-container">
                       <ng-container ngbNavItem [ngbNavItem]="1" class="tab-title-class"
                                     *ngIf="filterByAllowedFields.length > 0">
-                        <a ngbNavLink>BASIC SEARCH</a>
+                        <a ngbNavLink class ="flex-grow-1">BASIC SEARCH</a>
                         <ng-template ngbNavContent>
                           <div class="basic-search">
                             <div class="classification-header">
@@ -2965,6 +3040,7 @@ 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">-->
@@ -2973,6 +3049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 <!--                                                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>
@@ -3028,73 +3105,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                       </ng-container>
                       <ng-container ngbNavItem [ngbNavItem]="2" class="tab-title-class"
                                     *ngIf="advancedSearchFields.length > 0">
-                        <a ngbNavLink>ADVANCED SEARCH</a>
+                        <a ngbNavLink class ="flex-grow-1">ADVANCED SEARCH</a>
                         <ng-template ngbNavContent>
                           <div class="advancedSearch-scroll" id="advancedSearch-scroll-panel">
                             <div class="advancedSearch-panel">
-                            <div *ngFor="let param of this.advancedSearch; index as j">
+                              <div *ngFor="let param of this.advancedSearch; index as j">
                                 <div [ngClass]="{'advanced-search': !this.hasAdvancedSearchVerticalScrollbar, 'advanced-search-scrolled': this.hasAdvancedSearchVerticalScrollbar}">
-                                <div class="advanced-search-classification-header">
-                                  {{param.header}}
-                                </div>
-                                <div class="row advanced-search-content-body">
-                                  <ng-container>
-                                    <div *ngFor="let field of this.param.fields; index as k">
-                                      <div class="col-5">
-                                        <div *ngIf="getFieldType(field.field) === 'input' ">
-                                          <mat-form-field appearance="none">
-                                            <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
-                                            <input matInput [ngModel]="getFilterForField(field.field).value"
-                                                   (ngModelChange)="setFilter($event, getFilterForField(field.field))"
-                                                   (keydown)="applyAdvancedSearchFilters($event)"/>
-                                          </mat-form-field>
-                                        </div>
-                                        <div *ngIf="getFieldType(field.field) === 'checkbox'  ">
-                                          <mat-checkbox class="checkboxes"
-                                                        [(ngModel)]="getFilterForField(field.field).value">
-                                            {{getFieldDisplay(field.field)}}
-                                          </mat-checkbox>
-                                        </div>
-                                        <div *ngIf="getFieldType(field.field) === 'dropdown' ">
-                                          <mat-form-field appearance="none">
-                                            <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
-                                            <mat-select [ngModel]="getFilterForField(field.field).value"
-                                                        (ngModelChange)="setFilter($event, getFilterForField(field.field))"
-                                                        (keydown)="applyAdvancedSearchFilters($event)">
-                                              <div *ngIf="this.field.valueURL;else display_raw_value">
-                                                <mat-option>None</mat-option>
-                                                <mat-option *ngFor="let value of this.field.values"
-                                                            [value]="value.id">{{value.display}}</mat-option>
-                                              </div>
-                                              <ng-template #display_raw_value>
-                                                <mat-option>None</mat-option>
-                                                <mat-option *ngFor="let value of this.field.values"
-                                                            [value]="value">{{value}}</mat-option>
-                                              </ng-template>
-                                            </mat-select>
-                                          </mat-form-field>
-                                        </div>
-                                        <div *ngIf="getFieldType(field.field) === 'date' ">
-                                          <mat-form-field appearance="none">
-                                            <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
-                                            <input [ngModel]="getFilterForField(field.field).value"
-                                                   (ngModelChange)="setFilter($event, getFilterForField(field.field))"
-                                                   (keydown)="applyAdvancedSearchFilters($event)" matInput
-                                                   [matDatepicker]="myPicker" placeholder="date">
-                                            <mat-datepicker-toggle matSuffix [for]="myPicker">
-                                              <mat-icon fontSet="fa" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
-                                            </mat-datepicker-toggle>
-                                            <mat-datepicker #myPicker></mat-datepicker>
-                                          </mat-form-field>
+                                  <div class="advanced-search-classification-header">
+                                    {{param.header}}
+                                  </div>
+                                  <div class="row advanced-search-content-body">
+                                    <ng-container>
+                                      <div *ngFor="let field of this.param.fields; index as k">
+                                        <div class="col-5">
+                                          <div *ngIf="getFieldType(field.field) === 'input' ">
+                                            <mat-form-field appearance="none">
+                                              <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
+                                              <input matInput [ngModel]="getFilterForField(field.field).value"
+                                                     (ngModelChange)="setFilter($event, getFilterForField(field.field))"
+                                                     (keydown)="applyAdvancedSearchFilters($event)"/>
+                                            </mat-form-field>
+                                          </div>
+                                          <div *ngIf="getFieldType(field.field) === 'checkbox'  ">
+                                            <mat-checkbox class="checkboxes"
+                                                          [(ngModel)]="getFilterForField(field.field).value">
+                                              {{getFieldDisplay(field.field)}}
+                                            </mat-checkbox>
+                                          </div>
+                                          <div *ngIf="getFieldType(field.field) === 'dropdown' ">
+                                            <mat-form-field appearance="none">
+                                              <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
+                                              <mat-select [ngModel]="getFilterForField(field.field).value"
+                                                          (ngModelChange)="setFilter($event, getFilterForField(field.field))"
+                                                          (keydown)="applyAdvancedSearchFilters($event)">
+                                                <div *ngIf="this.field.valueURL;else display_raw_value">
+                                                  <mat-option>None</mat-option>
+                                                  <mat-option *ngFor="let value of this.field.values"
+                                                              [value]="value.id">{{value.display}}</mat-option>
+                                                </div>
+                                                <ng-template #display_raw_value>
+                                                  <mat-option>None</mat-option>
+                                                  <mat-option *ngFor="let value of this.field.values"
+                                                              [value]="value">{{value}}</mat-option>
+                                                </ng-template>
+                                              </mat-select>
+                                            </mat-form-field>
+                                          </div>
+                                          <div *ngIf="getFieldType(field.field) === 'date' ">
+                                            <mat-form-field appearance="none">
+                                              <mat-label>{{getFieldDisplay(field.field)}}</mat-label>
+                                              <input [ngModel]="getFilterForField(field.field).value"
+                                                     (ngModelChange)="setFilter($event, getFilterForField(field.field))"
+                                                     (keydown)="applyAdvancedSearchFilters($event)" matInput
+                                                     [matDatepicker]="myPicker" placeholder="date">
+                                              <mat-datepicker-toggle matSuffix [for]="myPicker">
+                                                <mat-icon fontSet="fa" fontIcon="fa-calendar-alt fa-lg"></mat-icon>
+                                              </mat-datepicker-toggle>
+                                              <mat-datepicker #myPicker></mat-datepicker>
+                                            </mat-form-field>
+                                          </div>
                                         </div>
                                       </div>
-                                    </div>
-                                  </ng-container>
+                                    </ng-container>
+                                  </div>
                                 </div>
                               </div>
                             </div>
                           </div>
-                          </div>
                           <div class="search-msg-holder">
                             <div id="advanced-search-msg-holder"></div>
                           </div>
@@ -3104,12 +3181,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                               <button [ngClass]="{'ri-btn-cancel': !this.changed, 'ri-btn-cancel-dirty': this.changed}" [disabled]="!this.changed" (click)="setupFilters(false)">CLEAR
                               </button>
                               <button [ngClass] ="{'ri-btn-save': !this.changed, 'ri-btn-save-dirty': this.changed}"
-                                      [disabled]="!this.changed " (click)="applyAdvancedSearchFilters($event)">SEARCH
+                                      [disabled]="!this.changed" (click)="applyAdvancedSearchFilters($event)">SEARCH
                               </button>
                             </div>
                           </div>
                         </ng-template>
                       </ng-container>
+
+
+                      <ng-container ngbNavItem [ngbNavItem]="3" class="tab-title-class"
+                                    *ngIf="searchSortingOptions.length>0">
+                        <a ngbNavLink class ="flex-grow-1" >SORTING</a>
+                        <ng-template ngbNavContent>
+                          <div class="basic-search" >
+                            <div class="classification-header">
+                              {{this.basicSearchHeader}}
+                            </div>
+                            <div class="row sidebar-filter">
+                                <ng-container *ngFor="let searchSortItem of searchSortingOptions">
+                                  <div class="col-6 sort-item" [ngStyle]="getCustomStyles('col-6 sort-item')">
+                                    <div class="sort-icon" [ngStyle]="getCustomStyles('sort-icon')">
+                                      <div *ngIf="currentSearchSorting.value==searchSortItem.value && currentSearchSorting.isAsc"
+                                           [ngClass]="{'sort-arrow':true}">
+                                        <i class="fas fa-arrow-circle-up fa-lg"></i>
+                                      </div>
+                                      <div *ngIf="currentSearchSorting.value==searchSortItem.value && !currentSearchSorting.isAsc"
+                                           [ngClass]="{'sort-arrow':true}">
+                                        <i class="fas fa-arrow-circle-down fa-lg"></i>
+                                      </div>
+                                    </div>
+                                    <div class="sort-text no-user-select-text" (click)="onSearchSortClicked($event, searchSortItem)" [ngStyle]="getCustomStyles('sort-text')">
+                                      {{searchSortItem.display}}
+                                    </div>
+                                  </div>
+                                </ng-container>
+
+
+                              </div>
+                          </div>
+
+                          <div class="search-msg-holder">
+                            <div id="basic-search-msg-holder"></div>
+                          </div>
+
+                          <div class="ri-modal-footer ri-full-width">
+                            <div class="ri-modal-header-right-container ri-full-width">
+
+                            </div>
+                          </div>
+
+                        </ng-template>
+                      </ng-container>
                     </nav>
                     <div [ngbNavOutlet]="nav"></div>
                   </div>
@@ -3175,6 +3297,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
 
                           <div class="ri-modal-footer ri-full-width sidebar-filter">
                             <div class="ri-modal-header-right-container ri-full-width">
+                              <ng-container *ngTemplateOutlet="buttonRowTemplate">
+                              </ng-container>
                               <button class="ri-btn-cancel ri-btn-cancel-dirty" (click)="setupFilters(true)">RESET
                               </button>
                               <button class="ri-btn-save" [ngClass]="{'ri-btn-save-dirty': this.changed}"
@@ -3242,7 +3366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             </button>
           </div>
           <div class="d-flex mb-1 global-search" *ngIf="inputMultiline === true">
-            <textarea [disabled] = "!quickSearchEnabled" [ngModel]="globalSearch" class="search-box textarea-search-box"
+            <textarea aria-label="globalSearch" [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; ">
@@ -3251,7 +3375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 {{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()">
+            <button aria-label="searchButton" 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>
@@ -3281,7 +3405,7 @@ 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--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"] }]
+      `, 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))}.nav-container{display:flex!important;flex-wrap:nowrap}.no-user-select-text{-webkit-user-select:none;-ms-user-select:none;user-select:none}\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: [{
@@ -3324,6 +3448,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], globalSearchValidator: [{
                 type: Input
+            }], buttonRowTemplate: [{
+                type: Input
+            }], searchSortingOptions: [{
+                type: Input
+            }], labelText: [{
+                type: Input
             }], searchListChange: [{
                 type: Output
             }], documentClick: [{
@@ -5496,7 +5626,7 @@ let SearchTreeControllerComponent = class SearchTreeControllerComponent extends
         {{title}}
         <div class="d-flex flex-row ms-auto">
           <div *ngIf="buttonTemplate"><ng-container *ngTemplateOutlet="buttonTemplate"></ng-container></div>
-          <a (click)="toggleShowOptions($event)"><i class="fas fa-cog"></i></a>
+          <a (click)="toggleShowOptions($event)"><i class="fas fa-filter"></i></a>
         </div>
         <div class="search-options" [class.expanded]="showOptions" *ngIf="filterByAllowedFields.length > 0 && sortByAllowedFields.length > 0">
           <ul ngbNav #nav="ngbNav" class="nav-tabs">
@@ -5594,7 +5724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
         {{title}}
         <div class="d-flex flex-row ms-auto">
           <div *ngIf="buttonTemplate"><ng-container *ngTemplateOutlet="buttonTemplate"></ng-container></div>
-          <a (click)="toggleShowOptions($event)"><i class="fas fa-cog"></i></a>
+          <a (click)="toggleShowOptions($event)"><i class="fas fa-filter"></i></a>
         </div>
         <div class="search-options" [class.expanded]="showOptions" *ngIf="filterByAllowedFields.length > 0 && sortByAllowedFields.length > 0">
           <ul ngbNav #nav="ngbNav" class="nav-tabs">
@@ -6369,6 +6499,7 @@ class NavigationModule {
             MatDatepickerModule,
             MatNativeDateModule,
             MatLegacyCheckboxModule,
+            MatLegacyRadioModule,
             MatLegacySelectModule,
             TreeModule,
             NgbNavModule], exports: [AppHeaderComponent,
@@ -6401,6 +6532,7 @@ class NavigationModule {
             MatDatepickerModule,
             MatNativeDateModule,
             MatLegacyCheckboxModule,
+            MatLegacyRadioModule,
             MatLegacySelectModule,
             TreeModule,
             NgbNavModule] }); }
@@ -6421,6 +6553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         MatDatepickerModule,
                         MatNativeDateModule,
                         MatLegacyCheckboxModule,
+                        MatLegacyRadioModule,
                         MatLegacySelectModule,
                         TreeModule,
                         NgbNavModule