[ACS-7979] Fixed UI for create tags dialog

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -8,7 +8,7 @@
             />
         <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
     </div>
-    <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
+    <div class="adf-categories-list" *ngIf="categories?.length > 0" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span
             *ngFor="let category of categories"
             [class.adf-categories-padded]="!isCRUDMode"
@@ -50,7 +50,7 @@
                 <mat-list-item
                     *ngFor="let category of existingCategories"
                     class="adf-category"
-                    (click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'>
+                    (click)='addCategoryToAssign(category)'>
                         {{ category.name }}
                 </mat-list-item>
                 <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -2,20 +2,22 @@
 
 .adf-categories-management {
     .adf-category-name-field {
-        justify-content: space-between;
-        padding: 0 10px;
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        align-items: center;
+        display: flex;
+        flex-direction: column;
+        margin-right: 12px;
 
         input {
-            background-color: transparent;
-            color: var(--adf-metadata-property-panel-text-color);
-            padding: 7px 0;
-            width: 100%;
+            background: var(--adf-metadata-buttons-background-color);
+            border-radius: 12px;
+            padding: 7px 8px;
             border: none;
             outline: none;
+            font: inherit;
+            color: currentcolor;
+            margin: 0;
+            vertical-align: bottom;
+            text-align: inherit;
+            box-sizing: content-box;
         }
 
         #{$mat-form-field-error} {
@@ -76,6 +78,8 @@
 }
 
 .adf-existing-categories-panel {
+    min-height: 22vh;
+
     .adf-create-category-label {
         color: var(--theme-primary-color);
         cursor: pointer;

lib/content-services/src/lib/category/categories-management/categories-management.component.ts

@@ -227,10 +227,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
      * Adds existing category to categories list and removes it from existing categories list.
      *
      * @param category - selection list change containing selected category
-     * @param disableAddCategory - allow or disallow the ability to add a new category for assigning
      */
-    addCategoryToAssign(category: Category, disableAddCategory: boolean) {
-        if (!disableAddCategory) {
+    addCategoryToAssign(category: Category) {
+        if (!(this.isCRUDMode || (!this.multiSelect && this.categories.length > 0))) {
             const selectedCategory: Category = category;
             this.categories.push(selectedCategory);
             this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);

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

@@ -15,17 +15,19 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
+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 { CoreModule } from '@alfresco/adf-core';
 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';
 
 @NgModule({
     imports: [
@@ -34,19 +36,13 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
         MaterialModule,
         FormsModule,
         ReactiveFormsModule,
-        CoreModule
-    ],
-    exports: [
-        TagActionsComponent,
-        TagListComponent,
-        TagNodeListComponent,
-        TagsCreatorComponent
+        TranslateModule,
+        DynamicChipListModule,
+        MatChipsModule,
+        MatIconModule,
+        NgForOf
     ],
-    declarations: [
-        TagActionsComponent,
-        TagListComponent,
-        TagNodeListComponent,
-        TagsCreatorComponent
-    ]
+    exports: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent],
+    declarations: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent]
 })
 export class TagModule {}

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

@@ -16,19 +16,20 @@
         {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
     </p>
     <div class="adf-tags-list" [class.adf-tags-list-fixed]="!tagNameControlVisible" #tagsList>
-        <span *ngFor="let tag of tags" class="adf-tag adf-label-with-icon-button">
-            {{ tag }}
-            <button
-                data-automation-id="remove-tag-button"
-                mat-icon-button
-                (click)="removeTag(tag)"
-                [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate"
-                [disabled]="disabledTagsRemoving"
-                class="adf-remove-tag"
-            >
-                <mat-icon>close</mat-icon>
-            </button>
-        </span>
+        <mat-chip-listbox *ngIf="tags.length > 0" class="adf-tags-chips-container">
+            <mat-chip-option *ngFor="let tag of tags" [disableRipple]="true" [title]="tag" class="adf-tags-chip">
+                {{ tag }}
+                <button
+                    data-automation-id="remove-tag-button"
+                    mat-icon-button
+                    (click)="removeTag(tag)"
+                    [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate"
+                    [disabled]="disabledTagsRemoving"
+                    matChipRemove>
+                    <mat-icon>close</mat-icon>
+                </button>
+            </mat-chip-option>
+        </mat-chip-listbox>
     </div>
 </div>
 <div class="adf-existing-tags-panel" *ngIf="existingTagsPanelVisible">

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

@@ -1,24 +1,8 @@
+@import 'styles/mat-selectors';
+
 adf-tags-creator {
     display: block;
 
-    .adf-label-with-icon-button {
-        background: var(--adf-metadata-buttons-background-color);
-        width: fit-content;
-        min-height: 32px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 16px;
-        padding: 6px 0;
-        padding-left: 12px;
-
-        .adf-remove-tag {
-            line-height: 24px;
-            height: 24px;
-            transform: scale(0.7);
-        }
-    }
-
     .adf-no-tags-message {
         margin-top: 28.5px;
         margin-bottom: 0;
@@ -27,15 +11,23 @@ adf-tags-creator {
 
     .adf-tag-name-field,
     .adf-tag-name-field[hidden] {
-        padding-top: 10px;
+        display: flex;
+        flex-direction: column;
         margin-right: 12px;
     }
 
     .adf-tag-search-field {
         background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
         border-radius: 12px;
-        padding: 0 6px;
+        padding: 5px 6px;
+        border: none;
+        outline: none;
+        font: inherit;
+        color: currentcolor;
+        margin: 0;
+        vertical-align: bottom;
+        text-align: inherit;
+        box-sizing: content-box;
     }
 
     .adf-create-tag-label {
@@ -47,7 +39,6 @@ adf-tags-creator {
         display: inline-block;
         padding-right: 12px;
         overflow: auto;
-        max-height: 7vh;
     }
 
     .adf-tags-list {
@@ -57,19 +48,18 @@ adf-tags-creator {
         gap: 8px;
     }
 
-    .adf-tag {
+    .adf-tags-chips-container {
         margin-top: 8px;
-        overflow-wrap: anywhere;
 
-        & + .adf-tag {
-            margin-top: 8px;
+        .adf-tags-chip {
+            background: var(--adf-metadata-buttons-background-color);
+            height: unset;
         }
     }
 
     .adf-existing-tags-panel {
         border-top-left-radius: 6px;
         border-top-right-radius: 6px;
-        padding-top: 12px;
         width: 100%;
 
         .adf-existing-tags-label {
@@ -87,34 +77,33 @@ adf-tags-creator {
             flex-direction: column;
 
             .adf-tag {
-                margin-bottom: 18px;
-                margin-top: 0;
-                padding-right: 12px;
+                margin: 0;
+                padding: 4px;
                 font-size: 14px;
                 height: auto;
                 width: unset;
                 background-color: inherit;
                 color: inherit;
 
-                &:hover {
+                &:not(#{$mat-list-item-disabled}):hover {
                     cursor: pointer;
                     background: var(--adf-theme-mat-grey-color-a200);
                 }
 
                 & span {
                     padding: 0;
                 }
-
-                & + .adf-tag {
-                    margin-top: -10px;
-                }
             }
 
             .adf-tags-creator-spinner {
                 margin: auto;
                 overflow: unset;
                 min-height: 62px;
             }
+
+            #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+                opacity: 1;
+            }
         }
     }
 

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

@@ -122,7 +122,7 @@ describe('TagsCreatorComponent', () => {
      * @returns list of tags
      */
     function getAddedTags(): string[] {
-        const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tag`));
+        const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tags-chip`));
         return tagElements.map((el) => el.nativeElement.firstChild.nodeValue.trim());
     }
 

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

@@ -260,11 +260,13 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
      * @param selectedTag changes
      */
     addExistingTagToTagsToAssign(selectedTag: TagEntry): void {
-        this.tags.push(selectedTag.entry.tag);
-        this.removeTagFromArray(this.existingTags, selectedTag);
-        this.tagNameControl.updateValueAndValidity();
-        this.exactTagSet$.next();
-        this.tagsChange.emit(this.tags);
+        if (!this.isOnlyCreateMode()) {
+            this.tags.push(selectedTag.entry.tag);
+            this.removeTagFromArray(this.existingTags, selectedTag);
+            this.tagNameControl.updateValueAndValidity();
+            this.exactTagSet$.next();
+            this.tagsChange.emit(this.tags);
+        }
     }
 
     /**