[ACS-8065][ADF] Unify components in TagModule (#10226)

* [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-8065] fix position of view more button for pagination

* [ACS-8065] Fix imports

* [ACS-8065] Unit test fixes

---------

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

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

@@ -18,6 +18,7 @@
             <mat-icon *ngIf="showDelete"
                       id="adf-dynamic-chip-list-delete-{{ chip.name }}"
                       class="adf-dynamic-chip-list-delete-icon"
+                      [disabled]="disableDelete"
                       matChipRemove>
                 close
             </mat-icon>
@@ -26,9 +27,9 @@
     <button
         data-automation-id="adf-dynamic-chip-list-view-more-button"
         mat-button
-        [hidden]="chipsToDisplay.length === 0 || !limitChipsDisplayed"
+        [hidden]="chipsToDisplay?.length === 0 || !limitChipsDisplayed"
         [style.left.px]="viewMoreButtonLeftOffset"
-        [style.top.px]="viewMoreButtonTop"
+        [style.top.px]="!!pagination ? viewMoreButtonTop : ''"
         class="adf-dynamic-chip-list-view-more-button"
         [class.adf-dynamic-chip-list-hidden-btn]="!calculationsDone"
         (click)="displayNextChips($event)">

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

@@ -10,7 +10,6 @@
     .adf-dynamic-chip-list-view-more-button {
         margin-left: 5px;
         position: absolute;
-        width: auto;
         padding: 0 16px;
 
         &[hidden] {
@@ -27,27 +26,14 @@
     }
 
     &.adf-dynamic-chip-list-paginated {
-        /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
-        mat-chip-list {
-            width: 100%;
-
-            & > div {
-                width: 100%;
-            }
-        }
-
         .adf-dynamic-chip-list-view-more-button {
-            margin: -2px 4px 4px 24px;
+            margin-left: 24px;
         }
     }
 
     &.adf-dynamic-chip-list-button-in-next-line {
         align-items: unset;
         padding-bottom: 54px;
-
-        .adf-dynamic-chip-list-view-more-button {
-            margin-top: 4px;
-        }
     }
 
     &:not(.adf-dynamic-chip-list-paginated) {
@@ -55,7 +41,6 @@
 
         &:not(.adf-dynamic-chip-list-flex-column) {
             .adf-dynamic-chip-list-view-more-button {
-                margin-top: 18px;
                 margin-left: 4px;
             }
         }
@@ -70,7 +55,6 @@
     }
 
     .adf-dynamic-chip-list-chip {
-        height: auto;
         word-break: break-word;
         margin-top: 0;
         margin-bottom: 0;
@@ -84,14 +68,4 @@
             }
         }
     }
-
-    .adf-dynamic-chip-list-delete-icon {
-        font-size: var(--theme-title-font-size);
-        background-repeat: no-repeat;
-        display: inline-block;
-        fill: currentcolor;
-        height: 20px;
-        width: 20px;
-        color: var(--theme-primary-color-default-contrast);
-    }
 }

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

@@ -146,6 +146,19 @@ describe('DynamicChipListComponent', () => {
             expect(getComputedStyle(chip.nativeElement).borderRadius).toBe('20px');
         });
 
+        it('should disable the delete button if disableDelete is true', async () => {
+            component.disableDelete = true;
+
+            component.ngOnChanges({
+                chips: new SimpleChange(undefined, component.chips, true)
+            });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const chip = fixture.debugElement.query(By.css('.adf-dynamic-chip-list-delete-icon'));
+            expect(Object.keys(chip.attributes)).toContain('disabled');
+        });
+
         it('should not render view more button by default', async () => {
             component.ngOnChanges({
                 chips: new SimpleChange(undefined, component.chips, true)

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

@@ -65,6 +65,10 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
     @Input()
     showDelete = true;
 
+    /** Disable delete button. */
+    @Input()
+    disableDelete = false;
+
     /** Should limit number of chips displayed. */
     @Input()
     limitChipsDisplayed = false;
@@ -101,8 +105,10 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
     private viewMoreButtonLeftOffsetBeforeFlexDirection: number;
     private requestedDisplayingAllChips = false;
     private resizeObserver = new ResizeObserver(() => {
-        this.calculateChipsToDisplay();
-        this.changeDetectorRef.detectChanges();
+        if (this.initialLimitChipsDisplayed && this.chipsToDisplay.length) {
+            this.calculateChipsToDisplay();
+            this.changeDetectorRef.detectChanges();
+        }
     });
 
     constructor(private changeDetectorRef: ChangeDetectorRef) {}
@@ -117,10 +123,8 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
             this.initialChips = this.chips;
             this.chipsToDisplay = this.initialChips;
             if (this.limitChipsDisplayed && this.chipsToDisplay.length) {
-                setTimeout(() => {
-                    this.calculateChipsToDisplay();
-                    this.changeDetectorRef.detectChanges();
-                });
+                this.calculateChipsToDisplay();
+                this.changeDetectorRef.detectChanges();
             }
         }
     }
@@ -230,5 +234,9 @@ export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewIni
         } else {
             this.viewMoreButtonLeftOffset = this.columnFlexDirection ? 0 : this.viewMoreButtonLeftOffsetBeforeFlexDirection;
         }
+
+        if (!this.pagination) {
+            this.viewMoreButtonTop = null;
+        }
     }
 }