Feature/allow creating custom tags in tag selector component (#4305)

* feat(ui): allow creating custom tags

* feat(ui): add new story

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Extended the tags selector component by a `readonly` attribute
+- Extended the tags selector component to support creating custom tags
 - Added global styles to the _Storybook_ setup
 
 ## 2.138.0 - 2025-02-08

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

@@ -42,6 +42,17 @@
               {{ tag.name }}
             </mat-option>
           }
+
+          @if (hasPermissionToCreateTags && tagInputControl.value) {
+            <mat-option [value]="tagInputControl.value.trim()">
+              <span class="align-items-center d-flex">
+                <ion-icon class="mr-2" name="add-circle-outline" />
+                <ng-container i18n>Create</ng-container> "{{
+                  tagInputControl.value.trim()
+                }}"
+              </span>
+            </mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     }

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

@@ -47,6 +47,20 @@ export const Default: Story = {
   }
 };
 
+export const CreateCustomTags: Story = {
+  args: {
+    hasPermissionToCreateTags: true,
+    tags: [
+      {
+        id: 'EMERGENCY_FUND',
+        name: 'Emergency Fund',
+        userId: null
+      }
+    ],
+    tagsAvailable: OPTIONS
+  }
+};
+
 export const Readonly: Story = {
   args: {
     readonly: true,

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];
     });