feat(tags-input): added tags input

src/app/features/project/metadata/components/index.ts

@@ -7,4 +7,3 @@ export { ProjectMetadataLicenseComponent } from './project-metadata-license/proj
 export { ProjectMetadataPublicationDoiComponent } from './project-metadata-publication-doi/project-metadata-publication-doi.component';
 export { ProjectMetadataResourceInformationComponent } from './project-metadata-resource-information/project-metadata-resource-information.component';
 export { ProjectMetadataSubjectsComponent } from './project-metadata-subjects/project-metadata-subjects.component';
-export { ProjectMetadataTagsComponent } from './project-metadata-tags/project-metadata-tags.component';

src/app/features/project/metadata/project-metadata.component.html

@@ -92,10 +92,16 @@ <h2>
                       [currentProject]="currentProject()"
                     />
 
-                    <osf-project-metadata-tags
-                      (tagsChanged)="onTagsChanged($event)"
-                      [currentProject]="currentProject()"
-                    />
+                    <p-card>
+                      <div class="flex flex-column gap-3">
+                        <h2>{{ 'project.overview.metadata.tags' | translate }}</h2>
+
+                        <osf-tags-input
+                          (tagsChanged)="onTagsChanged($event)"
+                          [tags]="currentProject()?.tags || []"
+                        ></osf-tags-input>
+                      </div>
+                    </p-card>
 
                     <osf-project-metadata-subjects
                       (subjectsChanged)="onSubjectsChanged($event)"

src/app/features/project/metadata/project-metadata.component.ts

@@ -24,7 +24,6 @@ import {
   ProjectMetadataPublicationDoiComponent,
   ProjectMetadataResourceInformationComponent,
   ProjectMetadataSubjectsComponent,
-  ProjectMetadataTagsComponent,
 } from '@osf/features/project/metadata/components';
 import {
   AffiliatedInstitutionsDialogComponent,
@@ -55,7 +54,7 @@ import {
 } from '@osf/features/project/metadata/store';
 import { ProjectOverviewSubject } from '@osf/features/project/overview/models';
 import { ContributorsSelectors, GetAllContributors } from '@osf/shared/components/contributors/store';
-import { LoadingSpinnerComponent, SubHeaderComponent } from '@shared/components';
+import { LoadingSpinnerComponent, SubHeaderComponent, TagsInputComponent } from '@shared/components';
 import { CustomConfirmationService, ToastService } from '@shared/services';
 import { GetSubjects, SubjectsSelectors, UpdateProjectSubjects } from '@shared/stores/subjects';
 
@@ -70,7 +69,6 @@ import { GetSubjects, SubjectsSelectors, UpdateProjectSubjects } from '@shared/s
     ProjectMetadataResourceInformationComponent,
     ProjectMetadataLicenseComponent,
     ProjectMetadataPublicationDoiComponent,
-    ProjectMetadataTagsComponent,
     ProjectMetadataSubjectsComponent,
     ProjectMetadataFundingComponent,
     ProjectMetadataAffiliatedInstitutionsComponent,
@@ -82,6 +80,7 @@ import { GetSubjects, SubjectsSelectors, UpdateProjectSubjects } from '@shared/s
     TabPanels,
     Tabs,
     LoadingSpinnerComponent,
+    TagsInputComponent,
   ],
   templateUrl: './project-metadata.component.html',
   styleUrl: './project-metadata.component.scss',

src/app/shared/components/index.ts

@@ -24,6 +24,7 @@ export { SearchInputComponent } from './search-input/search-input.component';
 export { SelectComponent } from './select/select.component';
 export { StepperComponent } from './stepper/stepper.component';
 export { SubHeaderComponent } from './sub-header/sub-header.component';
+export { TagsInputComponent } from './tags-input/tags-input.component';
 export { TextInputComponent } from './text-input/text-input.component';
 export { ToastComponent } from './toast/toast.component';
 export { TruncatedTextComponent } from './truncated-text/truncated-text.component';

src/app/shared/components/tags-input/tags-input.component.html

@@ -0,0 +1,10 @@
+<div>
+  <p-chips
+    class="w-full"
+    styleClass="w-full"
+    [ngModel]="tags()"
+    (ngModelChange)="onTagsChange($event)"
+    [placeholder]="'common.placeholder.addTag' | translate"
+    separator=","
+  ></p-chips>
+</div>

src/app/shared/components/tags-input/tags-input.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TagsInputComponent } from './tags-input.component';
+
+describe('TagsInputComponent', () => {
+  let component: TagsInputComponent;
+  let fixture: ComponentFixture<TagsInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TagsInputComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TagsInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/tags-input/tags-input.component.ts

@@ -0,0 +1,22 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Chips } from 'primeng/chips';
+
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'osf-tags-input',
+  imports: [TranslatePipe, FormsModule, Chips],
+  templateUrl: './tags-input.component.html',
+  styleUrl: './tags-input.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TagsInputComponent {
+  tags = input<string[]>([]);
+  tagsChanged = output<string[]>();
+
+  onTagsChange(tags: string[]): void {
+    this.tagsChanged.emit(tags);
+  }
+}

src/assets/i18n/en.json

@@ -43,6 +43,9 @@
     "deleteConfirmation": {
       "header": "Delete",
       "message": "Are you sure you want to proceed?"
+    },
+    "placeholder": {
+      "addTag": "Add tags"
     }
   },
   "navigation": {