Title moved to within fieldset as legend.

lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html

@@ -1,21 +1,13 @@
-<div class="checklist">
+<fieldset>
-    <fieldset>
+    <legend class="adf-search-check-list-title">{{ name | translate }}</legend>
-        <mat-checkbox
+    <mat-checkbox *ngFor="let option of options" [checked]="option.checked"
-            *ngFor="let option of options"
+        (keydown.enter)="option.checked = !option.checked" [attr.data-automation-id]="'checkbox-' + (option.name)"
-            [checked]="option.checked"
+        [attr.aria-label]="option.name | translate" (change)="changeHandler($event, option)" class="adf-facet-filter">
-            (keydown.enter)="option.checked = !option.checked"
+        <div matTooltip="{{ option.name | translate }}" matTooltipPosition="right" class="facet-name">
-            [attr.data-automation-id]="'checkbox-' + (option.name)"
-            [attr.aria-label]="option.name | translate"
-            (change)="changeHandler($event, option)"
-            class="adf-facet-filter">
-            <div matTooltip="{{ option.name | translate }}"
-                matTooltipPosition="right"
-                class="facet-name">
             {{ option.name | translate }}
         </div>
     </mat-checkbox>
-    </fieldset>
+</fieldset>
-</div>
 
 <div class="adf-facet-buttons" *ngIf="options.fitsPage && !settings?.hideDefaultAction">
     <button mat-button color="primary" (click)="clear()">
@@ -24,20 +16,14 @@
 </div>
 
 <div class="adf-facet-buttons" *ngIf="!options.fitsPage">
-    <button mat-icon-button
+    <button mat-icon-button title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}" (click)="clear()">
-        title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}"
-        (click)="clear()">
         <mat-icon>clear</mat-icon>
     </button>
-    <button mat-icon-button
+    <button mat-icon-button *ngIf="options.canShowLessItems" title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}"
-        *ngIf="options.canShowLessItems"
-        title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}"
         (click)="options.showLessItems()">
         <mat-icon>keyboard_arrow_up</mat-icon>
     </button>
-    <button mat-icon-button
+    <button mat-icon-button *ngIf="options.canShowMoreItems" title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}"
-        *ngIf="options.canShowMoreItems"
-        title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}"
         (click)="options.showMoreItems()">
         <mat-icon>keyboard_arrow_down</mat-icon>
     </button>

lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss

@@ -1,4 +1,4 @@
-.adf-search-check-list > div {
+.adf-search-check-list > fieldset {
     display: flex;
     flex-direction: column;
 
@@ -25,6 +25,15 @@
     }
 }
 
+.adf-search-check-list {
+    &-title {
+        font-size: 1.1em;
+        padding-bottom: 5px;
+        color: var(--theme-text-bold-color);
+    }
+
+}
+
 fieldset {
     border: 0 none;
 }

lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.ts

@@ -40,6 +40,7 @@ export interface SearchListOption {
 export class SearchCheckListComponent implements SearchWidget, OnInit {
 
     id: string;
+    name: string;
     settings?: SearchWidgetSettings;
     context?: SearchQueryBuilderService;
     options: SearchFilterList<SearchListOption>;

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html

@@ -26,9 +26,9 @@
              (keydown.tab)="$event.stopPropagation();">
             <div (click)="$event.stopPropagation()"
                  class="adf-filter-container">
-                <div class="adf-filter-title">{{ category?.name | translate }}</div>
                 <adf-search-widget-container (keypress)="onKeyPressed($event, menuTrigger)"
                                              [id]="category?.id"
+                                             [name]="category?.name"
                                              [selector]="category?.component?.selector"
                                              [settings]="category?.component?.settings"
                                              [value]="initialValue">

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -47,12 +47,6 @@
         }
     }
 
-    &-title {
-        font-size: 1.1em;
-        padding-bottom: 5px;
-        color: var(--theme-text-bold-color);
-    }
-
     &-actions {
         display: flex;
         justify-content: flex-end;

lib/content-services/src/lib/search/components/search-widget-container/search-widget-container.component.ts

@@ -45,6 +45,9 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan
     @Input()
     id: string;
 
+    @Input()
+    name: string;
+
     @Input()
     selector: string;
 
@@ -87,6 +90,7 @@ export class SearchWidgetContainerComponent implements OnInit, OnDestroy, OnChan
     private setupWidget(ref: ComponentRef<any>) {
         if (ref && ref.instance) {
             ref.instance.id = this.id;
+            ref.instance.name = this.name;
             ref.instance.settings = {...this.settings};
             ref.instance.context = this.queryBuilder;
             if (this.value) {