[ACS-8899] Undercounted space from the top for view more button (#10403)

* [ACS-8065] tag creator unification

* [ACS-8065] test adjustments and after review fixes

* [ACS-8065] remove unnecessary style

* [ACS-8065] fix style selector

* [ACS-8065] remove transforming pipe and unnecessary styles

* [ACS-8065] fixes

* [ACS-8065] fixes

* [ACS-8065] fixes

* [ACS-8065] fix view more button placement

* [ACS-8065] fix view more button placement

* [ACS-8899] Undercounted space from the top for view more button

* [ACS-8899] Post rebase fixes

---------

Co-authored-by: tamaragruszka <tamara.gruszka@hyland.com>
Co-authored-by: MichalKinas <michal.kinas@hyland.com>

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -15,9 +15,6 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
-import { SimpleChange } from '@angular/core';
-import { By } from '@angular/platform-browser';
 import { Category, CategoryPaging, ClassesApi, Node, Tag, TagBody, TagEntry, TagPaging, TagPagingList } from '@alfresco/js-api';
 import { ContentMetadataComponent } from './content-metadata.component';
 import { ContentMetadataService } from '../../services/content-metadata.service';
@@ -37,6 +34,9 @@ import { PropertyDescriptorsService } from '../../services/property-descriptors.
 import { TagService } from '../../../tag/services/tag.service';
 import { CategoryService } from '../../../category/services/category.service';
 import { CardViewContentUpdateService } from '../../../common/services/card-view-content-update.service';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SimpleChange } from '@angular/core';
 
 describe('ContentMetadataComponent', () => {
     let component: ContentMetadataComponent;
@@ -740,7 +740,7 @@ describe('ContentMetadataComponent', () => {
             const expectedProperties = [];
             component.expanded = true;
 
-            getGroupedPropertiesSpy.and.returnValue(of([{ properties: expectedProperties } as any]));
+            getGroupedPropertiesSpy.and.returnValue(of([{ properties: expectedProperties }]));
             spyOn(component, 'showGroup').and.returnValue(true);
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
@@ -754,7 +754,7 @@ describe('ContentMetadataComponent', () => {
             component.expanded = true;
             component.displayEmpty = false;
 
-            getGroupedPropertiesSpy.and.returnValue(of([{ properties: [] } as any]));
+            getGroupedPropertiesSpy.and.returnValue(of([{ properties: [] }]));
             spyOn(component, 'showGroup').and.returnValue(true);
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -45,13 +45,13 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
+import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { TagsCreatorComponent } from '../../../tag';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TranslateModule } from '@ngx-translate/core';
 import { ContentMetadataHeaderComponent } from './content-metadata-header.component';
 import { CategoriesManagementComponent } from '../../../category/categories-management/categories-management.component';
-import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
 
 const DEFAULT_SEPARATOR = ', ';
 

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts

@@ -181,7 +181,7 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
                     width += val._elementRef.nativeElement.getBoundingClientRect().width + chipMargin;
                     const availableSpace =
                         (index && index === chips.length - 1) || !this.paginationData ? containerWidth - viewMoreBtnWidth : containerWidth;
-                    if (availableSpace >= width) {
+                    if (availableSpace >= width - chipMargin) {
                         chipsToDisplay = (this.paginationData ? chipsToDisplay : index) + 1;
                         lastIndex++;
                         this.viewMoreButtonLeftOffset = width;
@@ -225,11 +225,13 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
         if (this.paginationData?.hasMoreItems) {
             const lastChipTop = this.matChips.last._elementRef.nativeElement.offsetTop;
             if (this.moveLoadMoreButtonToNextRow) {
+                const buttonTopHeightCorrection = 5;
                 this.viewMoreButtonLeftOffset = 0;
-                this.viewMoreButtonTop = lastChipTop + viewMoreButton.offsetHeight;
+                this.viewMoreButtonTop = lastChipTop + viewMoreButton.offsetHeight + buttonTopHeightCorrection;
             } else {
+                const buttonTopHeightCorrection = 3;
                 this.viewMoreButtonLeftOffset = this.viewMoreButtonLeftOffsetBeforeFlexDirection;
-                this.viewMoreButtonTop = lastChipTop;
+                this.viewMoreButtonTop = lastChipTop - buttonTopHeightCorrection;
             }
         } else {
             this.viewMoreButtonLeftOffset = this.columnFlexDirection ? 0 : this.viewMoreButtonLeftOffsetBeforeFlexDirection;