[ADF-2640] remove option configurable (#3772)

* add optional delete button in tag node list

* add demo

* fix lint

demo-shell/src/app/components/tag/tag.component.html

@@ -19,7 +19,18 @@
             <div class="adf-tag-example-title">
                 {{'TAG.NODE_LIST' | translate }}
             </div>
-            <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
+            <adf-tag-node-list [showDelete]="showDelete" [nodeId]="nodeId"></adf-tag-node-list>
         </mat-card>
+
+        <p class="toggle">
+            <mat-slide-toggle
+                id="adf-remove-button-tag"
+                [color]="'primary'"
+                (change)="toggleDeleteButton()"
+                [checked]="isReadOnly">
+                Show Delete Button
+            </mat-slide-toggle>
+        </p>
+
     </div>
 </div>

demo-shell/src/app/components/tag/tag.component.ts

@@ -25,4 +25,9 @@ import { Component } from '@angular/core';
 export class TagComponent {
 
     nodeId = '';
+    showDelete = true;
+
+    toggleDeleteButton() {
+        this.showDelete = !this.showDelete;
+    }
 }

docs/content-services/tag-node-list.component.md

@@ -24,6 +24,7 @@ Shows tags for a node.
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | nodeId | `string` |  | The identifier of a node. |
+| showDelete | `boolean` | true | Show delete button |
 
 ### Events
 

lib/content-services/tag/tag-node-list.component.html

@@ -1,7 +1,7 @@
 <mat-chip-list>
     <mat-chip class="adf-tag-chips adf-primary-background-color" *ngFor="let currentEntry of tagsEntries; let idx = index">
         <span id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</span>
-        <button class="adf-tag-chips-delete" id="tag_chips_delete_{{currentEntry.entry.tag}}" type="button" (click)="removeTag(currentEntry.entry.id)">
+        <button *ngIf="showDelete" class="adf-tag-chips-delete" id="tag_chips_delete_{{currentEntry.entry.tag}}" type="button" (click)="removeTag(currentEntry.entry.id)">
             <mat-icon class="adf-tag-chips-delete-icon adf-primary-contrast-text-color" matChipRemove>cancel</mat-icon>
         </button>
     </mat-chip>

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

@@ -103,5 +103,35 @@ describe('TagNodeList', () => {
 
             component.ngOnChanges();
         });
+
+        it('Should not show the delete tag button if showDelete is false', (done) => {
+            component.nodeId = 'fake-node-id';
+            component.showDelete = false;
+
+            component.results.subscribe(() => {
+                fixture.detectChanges();
+
+                let deleteButton: any = element.querySelector('#tag_chips_delete_test1');
+                expect(deleteButton).toBeNull();
+                done();
+            });
+
+            component.ngOnChanges();
+        });
+
+        it('Should show the delete tag button if showDelete is true', (done) => {
+            component.nodeId = 'fake-node-id';
+            component.showDelete = true;
+
+            component.results.subscribe(() => {
+                fixture.detectChanges();
+
+                let deleteButton: any = element.querySelector('#tag_chips_delete_test1');
+                expect(deleteButton).not.toBeNull();
+                done();
+            });
+
+            component.ngOnChanges();
+        });
     });
 });

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

@@ -34,6 +34,10 @@ export class TagNodeListComponent implements OnChanges {
     @Input()
     nodeId: string;
 
+    /** Show delete button */
+    @Input()
+    showDelete = true;
+
     tagsEntries: any;
 
     /** Emitted when a tag is selected. */