ACS-7404: tag as standalone

lib/content-services/src/lib/content.module.ts

@@ -20,7 +20,7 @@ import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CoreModule, SearchTextModule, provideTranslations } from '@alfresco/adf-core';
 import { MaterialModule } from './material.module';
-import { TagModule } from './tag/tag.module';
+import { CONTENT_TAG_DIRECTIVES } from './tag/tag.module';
 import { DocumentListModule } from './document-list/document-list.module';
 import { SearchModule } from './search/search.module';
 import { BREADCRUMB_DIRECTIVES } from './breadcrumb/breadcrumb.module';
@@ -52,7 +52,7 @@ import { CONTENT_UPLOAD_DIRECTIVES } from './upload';
     imports: [
         ...CONTENT_PIPES,
         CoreModule,
-        TagModule,
+        ...CONTENT_TAG_DIRECTIVES,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -83,7 +83,7 @@ import { CONTENT_UPLOAD_DIRECTIVES } from './upload';
     providers: [provideTranslations('adf-content-services', 'assets/adf-content-services')],
     exports: [
         ...CONTENT_PIPES,
-        TagModule,
+        ...CONTENT_TAG_DIRECTIVES,
         DocumentListModule,
         ...CONTENT_UPLOAD_DIRECTIVES,
         SearchModule,

lib/content-services/src/lib/tag/tag-actions.component.spec.ts

@@ -50,7 +50,7 @@ describe('TagActionsComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [ContentTestingModule, TagActionsComponent]
         });
         fixture = TestBed.createComponent(TagActionsComponent);
         tagService = TestBed.inject(TagService);

lib/content-services/src/lib/tag/tag-actions.component.ts

@@ -21,6 +21,14 @@ import { TagService } from './services/tag.service';
 import { Subject } from 'rxjs';
 import { TagPaging } from '@alfresco/js-api';
 import { takeUntil } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 
 /**
  *
@@ -29,13 +37,14 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-tag-node-actions-list',
+    standalone: true,
+    imports: [CommonModule, MatListModule, MatIconModule, MatFormFieldModule, MatInputModule, TranslateModule, FormsModule, MatButtonModule],
     templateUrl: './tag-actions.component.html',
     styleUrls: ['./tag-actions.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-tag-node-actions-list' }
 })
 export class TagActionsComponent implements OnChanges, OnInit, OnDestroy {
-
     /** The identifier of a node. */
     @Input()
     nodeId: string;
@@ -59,13 +68,10 @@ export class TagActionsComponent implements OnChanges, OnInit, OnDestroy {
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private tagService: TagService, private translateService: TranslationService) {
-    }
+    constructor(private tagService: TagService, private translateService: TranslationService) {}
 
     ngOnInit() {
-        this.tagService.refresh
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => this.refreshTag());
+        this.tagService.refresh.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.refreshTag());
     }
 
     ngOnChanges() {
@@ -79,15 +85,18 @@ export class TagActionsComponent implements OnChanges, OnInit, OnDestroy {
 
     refreshTag() {
         if (this.nodeId) {
-            this.tagService.getTagsByNodeId(this.nodeId).subscribe((tagPaging: TagPaging) => {
-                this.tagsEntries = tagPaging.list.entries;
-                this.disableAddTag = false;
-                this.result.emit(this.tagsEntries);
-            }, () => {
-                this.tagsEntries = null;
-                this.disableAddTag = true;
-                this.result.emit(this.tagsEntries);
-            });
+            this.tagService.getTagsByNodeId(this.nodeId).subscribe(
+                (tagPaging: TagPaging) => {
+                    this.tagsEntries = tagPaging.list.entries;
+                    this.disableAddTag = false;
+                    this.result.emit(this.tagsEntries);
+                },
+                () => {
+                    this.tagsEntries = null;
+                    this.disableAddTag = true;
+                    this.result.emit(this.tagsEntries);
+                }
+            );
         }
     }
 
@@ -105,7 +114,7 @@ export class TagActionsComponent implements OnChanges, OnInit, OnDestroy {
 
     searchTag(searchTagName: string) {
         if (this.tagsEntries) {
-            return this.tagsEntries.find((currentTag) => (searchTagName === currentTag.entry.tag));
+            return this.tagsEntries.find((currentTag) => searchTagName === currentTag.entry.tag);
         }
     }
 

lib/content-services/src/lib/tag/tag-list.component.spec.ts

@@ -50,7 +50,7 @@ describe('TagList', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [ContentTestingModule, TagListComponent]
         });
 
         tagService = TestBed.inject(TagService);

lib/content-services/src/lib/tag/tag-list.component.ts

@@ -21,19 +21,24 @@ import { PaginationModel } from '@alfresco/adf-core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TagEntry } from '@alfresco/js-api';
+import { CommonModule } from '@angular/common';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 /**
  * This component provide a list of all the tag inside the ECM
  */
 @Component({
     selector: 'adf-tag-list',
+    standalone: true,
+    imports: [CommonModule, MatChipsModule, MatButtonModule, MatIconModule],
     templateUrl: './tag-list.component.html',
     styleUrls: ['./tag-list.component.scss'],
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-tag-list' }
 })
 export class TagListComponent implements OnInit, OnDestroy {
-
     /** Emitted when a tag is selected. */
     @Output()
     result = new EventEmitter();
@@ -57,7 +62,6 @@ export class TagListComponent implements OnInit, OnDestroy {
     private onDestroy$ = new Subject<boolean>();
 
     constructor(private tagService: TagService) {
-
         this.defaultPagination = {
             skipCount: 0,
             maxItems: this.size,
@@ -66,12 +70,10 @@ export class TagListComponent implements OnInit, OnDestroy {
 
         this.pagination = this.defaultPagination;
 
-        this.tagService.refresh
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => {
-                this.tagsEntries = [];
-                this.refreshTag(this.defaultPagination);
-            });
+        this.tagService.refresh.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+            this.tagsEntries = [];
+            this.refreshTag(this.defaultPagination);
+        });
     }
 
     ngOnInit() {

lib/content-services/src/lib/tag/tag-node-list.component.spec.ts

@@ -30,7 +30,7 @@ describe('TagNodeList', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [ContentTestingModule, TagNodeListComponent]
         });
         fixture = TestBed.createComponent(TagNodeListComponent);
         component = fixture.componentInstance;

lib/content-services/src/lib/tag/tag-node-list.component.ts

@@ -20,7 +20,7 @@ import { TagService } from './services/tag.service';
 import { TagEntry } from '@alfresco/js-api';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { Chip } from '@alfresco/adf-core';
+import { Chip, DynamicChipListComponent } from '@alfresco/adf-core';
 
 /**
  *
@@ -29,6 +29,8 @@ import { Chip } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-tag-node-list',
+    standalone: true,
+    imports: [DynamicChipListComponent],
     templateUrl: './tag-node-list.component.html',
     encapsulation: ViewEncapsulation.None
 })
@@ -63,9 +65,7 @@ export class TagNodeListComponent implements OnChanges, OnDestroy, OnInit {
     }
 
     ngOnInit(): void {
-        this.tagService.refresh
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => this.refreshTag());
+        this.tagService.refresh.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.refreshTag());
     }
 
     ngOnDestroy(): void {

lib/content-services/src/lib/tag/tag.module.ts

@@ -15,34 +15,17 @@
  * limitations under the License.
  */
 
-import { CommonModule, NgForOf } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from '../material.module';
 import { TagActionsComponent } from './tag-actions.component';
 import { TagListComponent } from './tag-list.component';
 import { TagNodeListComponent } from './tag-node-list.component';
 import { TagsCreatorComponent } from './tags-creator/tags-creator.component';
-import { ContentDirectiveModule } from '../directives/content-directive.module';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { DynamicChipListModule } from '@alfresco/adf-core';
 
+export const CONTENT_TAG_DIRECTIVES = [TagsCreatorComponent, TagActionsComponent, TagListComponent, TagNodeListComponent] as const;
+
+/** @deprecated use `...CONTENT_TAG_DIRECTIVES` instead or import standalone components directly */
 @NgModule({
-    imports: [
-        CommonModule,
-        ContentDirectiveModule,
-        MaterialModule,
-        FormsModule,
-        ReactiveFormsModule,
-        TranslateModule,
-        DynamicChipListModule,
-        MatChipsModule,
-        MatIconModule,
-        NgForOf
-    ],
-    exports: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent],
-    declarations: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent]
+    imports: [...CONTENT_TAG_DIRECTIVES],
+    exports: [...CONTENT_TAG_DIRECTIVES]
 })
 export class TagModule {}

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts

@@ -20,22 +20,15 @@ import { TagsCreatorComponent } from './tags-creator.component';
 import { NotificationService } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatError, MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { ContentDirectiveModule, TagsCreatorMode, TagService } from '@alfresco/adf-content-services';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatError } from '@angular/material/form-field';
+import { TagsCreatorMode, TagService } from '@alfresco/adf-content-services';
 import { EMPTY, of, throwError } from 'rxjs';
 import { DebugElement } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatListModule } from '@angular/material/list';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing';
 import { MatChipOptionHarness } from '@angular/material/chips/testing';
-import { MatChipsModule } from '@angular/material/chips';
 
 describe('TagsCreatorComponent', () => {
     let fixture: ComponentFixture<TagsCreatorComponent>;
@@ -46,20 +39,7 @@ describe('TagsCreatorComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [TagsCreatorComponent],
-            imports: [
-                ContentDirectiveModule,
-                MatButtonModule,
-                MatFormFieldModule,
-                MatIconModule,
-                MatInputModule,
-                MatProgressSpinnerModule,
-                MatListModule,
-                MatChipsModule,
-                NoopAnimationsModule,
-                ReactiveFormsModule,
-                TranslateModule.forRoot()
-            ],
+            imports: [NoopAnimationsModule, TranslateModule.forRoot(), TagsCreatorComponent],
             providers: [
                 {
                     provide: TagService,

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts

@@ -17,12 +17,21 @@
 
 import { TagEntry, TagPaging } from '@alfresco/js-api';
 import { Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { debounce, distinctUntilChanged, finalize, first, map, takeUntil, tap } from 'rxjs/operators';
 import { EMPTY, forkJoin, Observable, Subject, timer } from 'rxjs';
 import { NotificationService } from '@alfresco/adf-core';
 import { TagsCreatorMode } from './tags-creator-mode';
 import { TagService } from '../services/tag.service';
+import { CommonModule } from '@angular/common';
+import { MatInputModule } from '@angular/material/input';
+import { AutoFocusDirective } from '../../directives';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 interface TagNameControlErrors {
     duplicatedExistingTag?: boolean;
@@ -42,6 +51,19 @@ const DEFAULT_TAGS_SORTING = {
  */
 @Component({
     selector: 'adf-tags-creator',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        AutoFocusDirective,
+        TranslateModule,
+        MatChipsModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatProgressSpinnerModule
+    ],
     templateUrl: './tags-creator.component.html',
     styleUrls: ['./tags-creator.component.scss'],
     encapsulation: ViewEncapsulation.None