feat(ui): allow creating custom tags

libs/ui/src/lib/tags-selector/tags-selector.component.html

@@ -42,6 +42,11 @@
               {{ tag.name }}
             </mat-option>
           }
+          @if ((filteredOptions | async)?.length === 0) {
+            <mat-option [value]="tagInputControl.value">
+              Create new tag "{{ tagInputControl.value }}"
+            </mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     }

libs/ui/src/lib/tags-selector/tags-selector.component.ts

@@ -42,6 +42,7 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
   templateUrl: 'tags-selector.component.html'
 })
 export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() hasPermissionToCreateTags = false;
   @Input() readonly = false;
   @Input() tags: Tag[];
   @Input() tagsAvailable: Tag[];
@@ -76,10 +77,18 @@ export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   public onAddTag(event: MatAutocompleteSelectedEvent) {
-    const tag = this.tagsAvailable.find(({ id }) => {
+    let tag = this.tagsAvailable.find(({ id }) => {
       return id === event.option.value;
     });
 
+    if (!tag && this.hasPermissionToCreateTags) {
+      tag = {
+        id: undefined,
+        name: event.option.value as string,
+        userId: null
+      };
+    }
+
     this.tagsSelected.update((tags) => {
       return [...(tags ?? []), tag];
     });