Update alfresco tag with the material chips #1499 (#1500)

* Update alfresco tag with the material chips #1499

* remove unused css

ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.css

@@ -6,60 +6,3 @@
 .tags li {
     display: inline;
 }
-
-.tag-name {
-    cursor: default;
-    float:left;
-    max-height: 22px;
-    max-width: 100px;
-    background-color: #8EC44B;
-    -webkit-border-radius: 4px 0px 0px 4px;
-    -moz-border-radius: 4px 0px 0px 4px;
-    border-radius: 4px 0px 0px 4px;
-    position: relative;
-    color: #fff;
-    display: inline-block;
-    text-decoration: none;
-    font-family: arial, helvetica, sans-serif;
-    font-size: 14px;
-    zoom: 1;
-    line-height: 22px;
-    padding: 0 0px 0 10px;
-    margin: 4px 0px 4px 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.tag-delete {
-    cursor: pointer;
-    float:left;
-    max-height: 22px;
-    max-width: 30px;
-    background-color: #8EC44B;
-    -webkit-border-radius: 0px 4px 4px 0px;
-    -moz-border-radius: 0px 4px 4px 0px;
-    border-radius: 0px 4px 4px 0px;
-    position: relative;
-    color: #fff;
-    display: inline-block;
-    text-decoration: none;
-    font-family: arial, helvetica, sans-serif;
-    font-size: 14px;
-    zoom: 1;
-    line-height: 22px;
-    padding: 0 4px 0 6px;
-    margin: 4px 4px 4px 0px;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-
-.tag-delete:hover{
-    color: lightgray;
-}
-
-
-.delete-icon{
-    font-size: 22px!important;
-}

ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.html

@@ -1,8 +1,13 @@
 <div class="tag-list-container">
     <ul class="tags">
         <li *ngFor="let currentEntry of tagsEntries; let idx = index">
-            <div id="tag_name_{{idx}}" class="tag-name">{{currentEntry.entry.tag}}</div>
+            <span class="mdl-chip mdl-chip--deletable">
-            <div id="tag_delete_{{idx}}" class="tag-delete" (click)="removeTag(currentEntry.entry.id)" ><i class="material-icons delete-icon">close</i></div>
+                 <span id="tag_name_{{idx}}" class="mdl-chip__text">{{currentEntry.entry.tag}}</span>
+                      <button id="tag_delete_{{idx}}" type="button" class="mdl-chip__action"
+                              (click)="removeTag(currentEntry.entry.id)">
+                          <i class="material-icons">cancel</i>
+                      </button>
+            </span>
         </li>
     </ul>
 </div>