add search field to choose template dialog

src/app/components/experiment/experiment.component.ts

@@ -172,7 +172,7 @@ export class ExperimentComponent implements OnInit, OnDestroy {
 
     showSelectDefaultTemplateDialog() {
         const dialogRef = this.dialog.open(ChooseTemplateDialog, {
-            minWidth: "20rem", maxWidth: "40rem", width: "60%", maxHeight: "95%",
+            minWidth: "20rem", maxWidth: "40rem", width: "20%", maxHeight: "95%",
             data: this.uiTemplate
         });
         dialogRef.afterClosed().subscribe(templateId => {

src/app/dialogs/choose-template/choose-template.component.html

@@ -1,12 +1,19 @@
-<h1 mat-dialog-title>Select a default template:</h1>
+<h1 mat-dialog-title>Select Default Template</h1>
 <div mat-dialog-content>
-    <div class="template-list">
-        <qhana-growing-list [rels]="['ui-template', 'collection']" [newItemRels]="['ui-template']" 
+    <mat-form-field class="full-width" color="primary">
+        <mat-label>Search templates</mat-label>
+        <input matInput placeholder="search" autocomplete="off" #searchInput>
+        <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+    <div class="template-list mat-elevation-z2">
+        <qhana-growing-list [rels]="['ui-template', 'collection']" [newItemRels]="['ui-template']" [search]="searchInput.value"
             [highlighted]="highlightedTemplateSet" [highlightByKey]="'uiTemplateId'" (clickItem)="selectTemplate($event)">
         </qhana-growing-list>
     </div>
-    <span class="t-title">Selected Template: {{template?.name ?? 'All Plugins'}}</span><br>
-    <span><i>{{template?.description ?? 'This template contains all plugins that are available in Qhana.'}}</i></span>
+    <div class="selected-template">
+        <span class="t-title">Selected Template: {{template?.name ?? 'All Plugins'}}</span><br>
+        <span><i>{{template?.description ?? 'This template contains all plugins that are available in Qhana.'}}</i></span>
+    </div>
 </div>
 <div class="dialog-actions" mat-dialog-actions>
     <button mat-button [mat-dialog-close]="'all-plugins'">Unset</button>

src/app/dialogs/choose-template/choose-template.component.sass

@@ -1,6 +1,13 @@
 .template-list
-    max-height: 33rem
+    max-height: 14rem
     overflow-y: auto
+    border-radius: 0.25rem
 
 .dialog-actions
-    justify-content: flex-end
+    justify-content: flex-end
+
+.selected-template
+    padding-top: 1rem
+
+.full-width
+    width: 100%