feat: merge html for single and multi select content searchable

Relates to dlcm/ui/dlcm-portal!341 (merged)

projects/solidify-frontend/src/lib/components/presentationals/searchable-abstract-content/searchable-abstract-content.presentational.html

-<form (keydown.escape)="closeByTab($event)"
+<form (keydown.enter)="mode === modeEnum.single ? select(getFocusedResource()) : doNothing()"
+      (keydown.escape)="closeByTab($event)"
       (keydown.shift.tab)="closeByShiftTab($event)"
       (keydown.tab)="closeByTab($event)"
       [formGroup]="form"
@@ -12,6 +13,7 @@
              [autocomplete]="'off'"
              [formControlName]="host.formDefinition.search"
              [placeholder]="labelTranslate.search | translate"
+             [solidifyAutoFocus]="true"
              matInput
       >
     </mat-form-field>
@@ -34,37 +36,9 @@
         *ngFor="let value of this.listLastSelection"
         [value]="value[host.valueKey]"
     >
-      <div class="first-line">
-
-        <span [innerHTML]="computeHighlightText(host.labelCallback(value))"
-              class="label"
-              solidifyTooltipOnEllipsis
-        ></span>
-        <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
-              class="extra-info"
-              solidifyTooltipOnEllipsis
-        >
-            <solidify-icon *ngIf="host.extraInfoImage"
-                              [iconName]="host.extraInfoImage"
-                              [matTooltip]="value[host.extraInfoLabelKey]"
-                              class="sm"
-            ></solidify-icon>
-            <span *ngIf="host.extraInfoDisplayOnContent"
-                  [innerHTML]="computeHighlightText(value[host.extraInfoLabelKey])"
-            ></span>
-          </span>
-      </div>
-
-      <ng-template [ngIf]="host.extraInfoSecondLineLabelCallback | isFunction">
-        <ng-container *ngIf="host.extraInfoSecondLineLabelCallback(value) as value">
-          <div *ngIf="value | isNonEmptyString"
-               class="second-line"
-               solidifyTooltipOnEllipsis
-          >
-            {{value}}
-          </div>
-        </ng-container>
-      </ng-template>
+      <span [innerHTML]="computeHighlightText(host.labelCallback(value))"
+            class="label"
+      ></span>
     </li>
   </ul>
 </div>
@@ -74,7 +48,7 @@
 >
   <span class="title">{{host.displayCommonValuesLabel | translate}}</span>
   <ul>
-    <li (click)="select(value)"
+    <li (click)="mode === modeEnum.single ? select(value, true) : select(value)"
         *ngFor="let value of this.listCommonValues"
         [value]="value[host.valueKey]"
     >
@@ -90,28 +64,44 @@
 >
   <ul>
     <ng-container *ngFor="let value of (listObs | async)">
-      <li (click)="select(value)"
-          *ngIf="!host.hideItemSelected || !isActive(value)"
+      <li *ngIf="mode === modeEnum.single || (!host.hideItemSelected || !isActive(value))"
+          (click)="select(value)"
+          (keydown.enter)="mode === modeEnum.single ? select(getFocusedResource()) : doNothing()"
           [class.is-active]="isActive(value)"
           [class.is-keyboard-selected]="value.resId === navigationResId"
           [solidifyAutoScrollIntoView]="value.resId === navigationResId"
           [value]="value[host.valueKey]"
       >
-        <span [innerHTML]="computeHighlightText(host.labelCallback(value))"
-              class="label"
-        ></span>
-        <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
-              class="extra-info"
-        >
-          <solidify-icon *ngIf="host.extraInfoImage"
-                         [iconName]="host.extraInfoImage"
-                         [matTooltip]="value[host.extraInfoLabelKey]"
-                         class="sm"
-          ></solidify-icon>
-          <span *ngIf="host.extraInfoDisplayOnContent"
-                [innerHTML]="computeHighlightText(value[host.extraInfoLabelKey])"
+        <div class="first-line">
+          <span [innerHTML]="computeHighlightText(host.labelCallback(value))"
+                solidifyTooltipOnEllipsis
+                class="label"
           ></span>
-        </span>
+          <span *ngIf="value[host.extraInfoLabelKey] | isNonEmptyString"
+                solidifyTooltipOnEllipsis
+                class="extra-info"
+          >
+            <solidify-icon *ngIf="host.extraInfoImage"
+                           [iconName]="host.extraInfoImage"
+                           [matTooltip]="value[host.extraInfoLabelKey]"
+                           class="sm"
+            ></solidify-icon>
+            <span *ngIf="host.extraInfoDisplayOnContent"
+                  [innerHTML]="computeHighlightText(value[host.extraInfoLabelKey])"
+            ></span>
+          </span>
+        </div>
+
+        <ng-template [ngIf]="host.extraInfoSecondLineLabelCallback | isFunction">
+          <ng-container *ngIf="host.extraInfoSecondLineLabelCallback(value) as value">
+            <div *ngIf="value | isNonEmptyString"
+                 solidifyTooltipOnEllipsis
+                 class="second-line"
+            >
+              {{value}}
+            </div>
+          </ng-container>
+        </ng-template>
       </li>
     </ng-container>
   </ul>