bump to angular 14

front-end/package.json

@@ -12,12 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^14.3.0",
-    "@angular/cdk": "^12.0.2",
+    "@angular/cdk": "^14.2.7",
     "@angular/common": "^14.3.0",
     "@angular/compiler": "^14.3.0",
     "@angular/core": "^14.3.0",
     "@angular/forms": "^14.3.0",
-    "@angular/material": "^12.0.2",
+    "@angular/material": "^14.2.7",
     "@angular/platform-browser": "^14.3.0",
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
@@ -48,4 +48,4 @@
     "tslint": "^6.1.3",
     "typescript": "~4.6.4"
   }
-}
+}

front-end/src/app/backlog/item/ui-elements/tags/tags.component.ts

@@ -34,7 +34,7 @@ export class TagsComponent extends CustomFormControlBase<string[]> {
 	}
 
 	add(event: MatChipInputEvent): void {
-		const input = event.input;
+		const input = event.chipInput?.inputElement;
 		const value = event.value;
 
 		// Add a new tag
@@ -59,6 +59,12 @@ export class TagsComponent extends CustomFormControlBase<string[]> {
 	}
 
 	selected(event: MatAutocompleteSelectedEvent): void {
-		this.add({ input: this.tagsInput.nativeElement, value: event.option.viewValue });
+		const value = event.option.viewValue;
+		if ((value || '').trim()) {
+			this.mainControl.setValue([...this.mainControl.value, value.trim()]);
+			this.mainControl.updateValueAndValidity();
+		}
+
+		this.tagsInput.nativeElement.value = '';
 	}
 }

front-end/src/styles/styles.scss

@@ -1,10 +1,10 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import url('//fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined');
 @import url('//fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
 
 @import 'theme';
 
-/* 
+/*
 	Theming guidance - https://material.angular.io/guide/theming-your-components
 */
 // Include non-theme styles for core.