Merge pull request DSpace#2675 from atmire/multiline-search-filter-badge_main

Multiline selected facet badge on search page

Author: tdonohue

src/app/shared/search/search-labels/search-label/search-label.component.html

@@ -1,7 +1,9 @@
-<a class="badge badge-primary mr-1 mb-1"
+<a class="badge badge-primary mb-1"
    [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.' + key) | translate, value: normalizeFilterValue(value) }"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters | async)" queryParamsHandling="merge">
-    {{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}
-    <span aria-hidden="true"> ×</span>
+  <span class="d-flex">
+  <span class="flex-grow-1 text-left">{{('search.filters.applied.' + key) | translate}}: {{'search.filters.' + filterName + '.' + value | translate: {default: normalizeFilterValue(value)} }}</span>
+    <span class="pl-1" aria-hidden="true">×</span>
+    </span>
 </a>

src/app/shared/search/search-labels/search-label/search-label.component.scss

@@ -0,0 +1,3 @@
+.badge {
+  white-space: inherit;
+}

src/app/shared/search/search-labels/search-label/search-label.component.ts

@@ -26,6 +26,7 @@ import { stripOperatorFromFilterValue } from '../../search.utils';
 @Component({
   selector: 'ds-search-label',
   templateUrl: './search-label.component.html',
+  styleUrls: ['./search-label.component.scss'],
   standalone: true,
   imports: [RouterLink, AsyncPipe, TranslateModule],
 })

src/app/shared/search/search-labels/search-labels.component.scss

@@ -1,3 +1,10 @@
 :host {
     line-height: 1;
-}
+  .labels {
+    margin: 0 calc(-1 * var(--bs-spacer)/8);
+    ds-search-label {
+      display: inline-block;
+      padding: 0 calc(var(--bs-spacer)/8);
+    }
+  }
+}

src/app/shared/search/search.component.html

@@ -96,8 +96,8 @@
                     [inPlaceSearch]="inPlaceSearch"
                     [searchPlaceholder]="searchFormPlaceholder | translate">
     </ds-themed-search-form>
-    <div class="row mb-3 mb-md-1">
-        <div class="labels col-sm-9">
+    <div class="mb-3 mb-md-1">
+        <div class="labels">
             <ds-search-labels [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
         </div>
     </div>