[ADF-1240] move from mdl to Material2 from tag component (#2221)

demo-shell-ng2/app/components/tag/tag.component.css

@@ -0,0 +1,9 @@
+.adf-tag-example-area {
+    width: calc(33.3333333333% - 16px);
+    margin: 8px;
+    float: left;
+}
+
+.adf-tag-example-title {
+    padding-bottom: 12px;
+}

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

@@ -0,0 +1,13 @@
+<label for="nodeId"><b>Insert Node Id</b></label><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+<div class="adf-tag-example-area">
+    <alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
+</div>
+<div class="adf-tag-example-area">
+    <div class="adf-tag-example-title">List Tags Content Services</div>
+    <alfresco-tag-list></alfresco-tag-list>
+</div>
+<div class="adf-tag-example-area">
+    <div class="adf-tag-example-title">Tag list By Node ID</div>
+    <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
+</div>

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

@@ -19,18 +19,8 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'alfresco-tag-demo',
-    template: `
-                <label for="nodeId"><b>Insert Node Id</b></label><br>
-                <input id="nodeId" type="text" size="48"  [(ngModel)]="nodeId"><br>
-            <div class="mdl-grid">
-              <div class="mdl-cell mdl-cell--4-col"><alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list></div>
-              <div class="mdl-cell mdl-cell--4-col">List Tags Content Services <alfresco-tag-list></alfresco-tag-list></div>
-              <div class="mdl-cell mdl-cell--4-col">
-                    Tag list By Node ID
-                    <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
-              </div>
-            </div>
-    `
+    templateUrl: 'tag.component.html',
+    styleUrls: ['tag.component.css']
 })
 export class TagComponent {
 

ng2-components/ng2-alfresco-tag/index.ts

@@ -16,7 +16,7 @@
  */
 
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { MdButtonModule, MdInputModule } from '@angular/material';
+import { MaterialModule } from './src/components/material.module';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 
 import { TagActionsComponent } from './src/components/tag-actions.component';
@@ -48,8 +48,7 @@ export const TAG_PROVIDERS: any[] = [
 @NgModule({
     imports: [
         CoreModule,
-        MdInputModule,
-        MdButtonModule
+        MaterialModule
     ],
     declarations: [
         ...TAG_DIRECTIVES
@@ -67,8 +66,7 @@ export const TAG_PROVIDERS: any[] = [
     ],
     exports: [
         ...TAG_DIRECTIVES,
-        MdInputModule,
-        MdButtonModule
+        MaterialModule
     ]
 })
 export class TagModule {

ng2-components/ng2-alfresco-tag/src/components/material.module.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import {
+    MdButtonModule, MdChipsModule, MdIconModule, MdInputModule
+} from '@angular/material';
+
+export function modules() {
+    return [
+        MdButtonModule, MdInputModule, MdChipsModule, MdIconModule
+    ];
+}
+
+@NgModule({
+    imports: modules(),
+    exports: modules()
+})
+export class MaterialModule {}

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css

@@ -1,7 +0,0 @@
-.tag-element {
-    padding: 0px 0px 0px 9px!important;
-}
-
-.adf-full-width {
-    width: 100%;
-}

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html

@@ -1,67 +1,30 @@
-<!--isContextMenu-->
-<div *ngIf="isContextMenu">
-    <li class="mdl-menu__item" *ngFor="let currentEntry of tagsEntries; let idx = index">
-            <span id="tag_name_{{idx}}" class="mdl-list__item-primary-content">
+<md-list>
+    <md-list-item *ngFor="let currentEntry of tagsEntries; let idx = index">
+        <div class="adf-tag-actions-container" id="tag_delete_{{idx}}" (click)="removeTag(currentEntry.entry.id)">
+            <div class="adf-tag-actions-delete-text" id="tag_name_{{idx}}">
                 {{currentEntry.entry.tag}}
-            </span>
-        <div id="tag_delete_{{idx}}" class="mdl-list__item-secondary-action" (click)="removeTag(currentEntry.entry.id)">
-            <i class="material-icons">delete</i>
+            </div>
+            <md-icon class="adf-tag-actions-delete-icon">delete</md-icon>
         </div>
-    </li>
-    <li>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <table class="adf-full-width" cellspacing="0">
-                <tr>
-                    <td>
-                        <md-input-container class="adf-full-width">
-                            <input mdInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
-                                   type="text"
-                                   class="mdl-textfield__input"
-                                   (keypress)="cleanErrorMsg()"
-                                   [(ngModel)]="newTagName"
-                                   id="new-tag-text"/>
-                            <md-hint *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMsg}}</md-hint>
-                        </md-input-container>
-                    </td>
-                    <td>
-                        <button  class="adf-full-width" id="add-tag" (click)="addTag()" [disabled]="disableAddTag" md-raised-button>
-                            {{'TAG.BUTTON.ADD' | translate }}
-                        </button>
-                    </td>
-                </tr>
-            </table>
-        </div>
-    </li>
-</div>
-
-<!--not ContextMenu-->
-<ul *ngIf="!isContextMenu" class="tag-list-control mdl-list">
-    <li class="mdl-list__item tag-element" *ngFor="let currentEntry of tagsEntries; let idx = index">
-        <span id="tag_name_{{idx}}" class="mdl-list__item-primary-content">{{currentEntry.entry.tag}}</span>
-        <div id="tag_delete_{{idx}}" class="mdl-list__item-secondary-action" (click)="removeTag(currentEntry.entry.id)">
-            <i class="material-icons">delete</i>
-        </div>
-    </li>
-    <li>
-        <table class="adf-full-width" cellspacing="0">
-            <tr>
-                <td>
-                    <md-input-container class="adf-full-width">
-                        <input mdInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
-                               type="text"
-                               class="mdl-textfield__input"
-                               (keypress)="cleanErrorMsg()"
-                               [(ngModel)]="newTagName"
-                               id="new-tag-text"/>
-                        <md-hint *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMsg}}</md-hint>
-                    </md-input-container>
-                </td>
-                <td>
-                    <button  class="adf-full-width" id="add-tag" (click)="addTag()" [disabled]="disableAddTag" md-raised-button>
-                        {{'TAG.BUTTON.ADD' | translate }}
-                    </button>
-                </td>
-            </tr>
-        </table>
-    </li>
-</ul>
+    </md-list-item>
+</md-list>
+<table class="adf-full-width" cellspacing="0">
+    <tr>
+        <td>
+            <md-input-container class="adf-full-width">
+                <input mdInput placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
+                       type="text"
+                       (keypress)="cleanErrorMsg()"
+                       [(ngModel)]="newTagName"
+                       id="new-tag-text"/>
+                <md-hint *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMsg}}</md-hint>
+            </md-input-container>
+        </td>
+        <td>
+            <button class="adf-full-width" id="add-tag" (click)="addTag()" [disabled]="disableAddTag"
+                    md-raised-button>
+                {{'TAG.BUTTON.ADD' | translate }}
+            </button>
+        </td>
+    </tr>
+</table>

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.scss

@@ -0,0 +1,18 @@
+.adf-full-width {
+    width: 100%;
+}
+
+.adf-tag-actions-delete-icon {
+    float: right;
+    cursor: pointer;
+}
+
+.adf-tag-actions-delete-text {
+    font-size: 16px;
+    float: left;
+}
+
+.adf-tag-actions-container {
+    padding: 8px 0 8px 0;
+    height: 20px;
+}

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.spec.ts

@@ -17,10 +17,10 @@
 
 import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdInputModule } from '@angular/material';
 import { AppConfigModule, CoreModule } from 'ng2-alfresco-core';
 import { TagActionsComponent } from '../components/tag-actions.component';
 import { TagService } from '../services/tag.service';
+import { MaterialModule } from './material.module';
 
 declare let jasmine: any;
 
@@ -34,7 +34,7 @@ describe('TagActionsComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                MdInputModule,
+                MaterialModule,
                 CoreModule.forRoot(),
                 AppConfigModule.forRoot('app.config.json', {
                     ecmHost: 'http://localhost:9876/ecm'
@@ -91,9 +91,9 @@ describe('TagActionsComponent', () => {
             component.result.subscribe(() => {
                 fixture.detectChanges();
 
-                expect(element.querySelector('#tag_name_0').innerHTML).toBe('test1');
-                expect(element.querySelector('#tag_name_1').innerHTML).toBe('test2');
-                expect(element.querySelector('#tag_name_2').innerHTML).toBe('test3');
+                expect(element.querySelector('#tag_name_0').innerHTML.trim()).toBe('test1');
+                expect(element.querySelector('#tag_name_1').innerHTML.trim()).toBe('test2');
+                expect(element.querySelector('#tag_name_2').innerHTML.trim()).toBe('test3');
 
                 expect(element.querySelector('#tag_delete_0')).not.toBe(null);
                 expect(element.querySelector('#tag_delete_1')).not.toBe(null);

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { TagService } from './../services/tag.service';
 
@@ -29,16 +29,14 @@ import { TagService } from './../services/tag.service';
 @Component({
     selector: 'adf-tag-node-actions-list, alfresco-tag-node-actions-list',
     templateUrl: './tag-actions.component.html',
-    styleUrls: ['./tag-actions.component.css']
+    styleUrls: ['./tag-actions.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TagActionsComponent implements OnChanges {
 
     @Input()
     nodeId: string;
 
-    @Input()
-    isContextMenu: boolean = false;
-
     @Output()
     successAdd: EventEmitter<any> = new EventEmitter();
 

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

@@ -1,9 +1,6 @@
-<div class="tag-container">
-    <div id="table-cards-container">
-        <ul class="tag-list-control mdl-list">
-            <li class="mdl-list__item tag-element" *ngFor="let currentEntry of tagsEntries; let idx = index">
-                <span id="tag_name_{{idx}}"  class="mdl-list__item-primary-content">{{currentEntry.entry.tag}}</span>
-            </li>
-        </ul>
-    </div>
-</div>
+<md-list>
+    <md-list-item *ngFor="let currentEntry of tagsEntries; let idx = index">
+        <div class="adf-list-tag" id="tag_name_{{idx}}">{{currentEntry.entry.tag}}</div>
+    </md-list-item>
+</md-list>
+

ng2-components/ng2-alfresco-tag/src/components/tag-list.component.scss

@@ -0,0 +1,4 @@
+.adf-list-tag{
+    padding: 16px;
+    font-size: 16px;
+}

ng2-components/ng2-alfresco-tag/src/components/tag-list.component.spec.ts

@@ -17,10 +17,10 @@
 
 import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdInputModule } from '@angular/material';
 import { AppConfigModule, CoreModule } from 'ng2-alfresco-core';
 import { TagService } from '../services/tag.service';
 import { TagListComponent } from './../components/tag-list.component';
+import { MaterialModule } from './material.module';
 
 declare let jasmine: any;
 
@@ -51,7 +51,7 @@ describe('TagList', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                MdInputModule,
+                MaterialModule,
                 CoreModule.forRoot(),
                 AppConfigModule.forRoot('app.config.json', {
                     ecmHost: 'http://localhost:9876/ecm'

ng2-components/ng2-alfresco-tag/src/components/tag-list.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { TagService } from '../services/tag.service';
 
 /**
@@ -27,7 +27,9 @@ import { TagService } from '../services/tag.service';
 
 @Component({
     selector: 'adf-tag-list, alfresco-tag-list',
-    templateUrl: './tag-list.component.html'
+    templateUrl: './tag-list.component.html',
+    styleUrls: ['./tag-list.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TagListComponent implements OnInit {
 

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

@@ -1,8 +0,0 @@
-.tags {
-    padding-left: 7px;
-    padding-right: 7px;
-}
-
-.tags li {
-    display: inline;
-}

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

@@ -1,13 +1,8 @@
-<div class="tag-list-container">
-    <ul class="tags">
-        <li *ngFor="let currentEntry of tagsEntries; let idx = index">
-            <span class="mdl-chip mdl-chip--deletable">
-                 <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>
+<md-chip-list>
+    <md-chip class="adf-tag-chips" *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_delete_{{idx}}" type="button" (click)="removeTag(currentEntry.entry.id)">
+            <md-icon class="adf-tag-chips-delete-icon">cancel</md-icon>
+        </button>
+    </md-chip>
+</md-chip-list>

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

@@ -0,0 +1,19 @@
+.adf-tag-chips-delete {
+    cursor: pointer;
+    height: 17px;
+    width: 20px;
+    float: right;
+    border: 0;
+    background: none;
+    padding: 0;
+    margin: -1px 0px 0px 10px;
+}
+
+.adf-tag-chips-delete-icon{
+    font-size: 20px;
+    background-repeat: no-repeat;
+    display: inline-block;
+    fill: currentColor;
+    height: 20px;
+    width: 20px;
+}

ng2-components/ng2-alfresco-tag/src/components/tag-node-list.component.spec.ts

@@ -17,10 +17,10 @@
 
 import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MdInputModule } from '@angular/material';
 import { AppConfigModule, CoreModule } from 'ng2-alfresco-core';
 import { TagNodeListComponent } from '../components/tag-node-list.component';
 import { TagService } from '../services/tag.service';
+import { MaterialModule } from './material.module';
 
 declare let jasmine: any;
 
@@ -51,7 +51,7 @@ describe('TagNodeList', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                MdInputModule,
+                MaterialModule,
                 CoreModule.forRoot(),
                 AppConfigModule.forRoot('app.config.json', {
                     ecmHost: 'http://localhost:9876/ecm'

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
 import { TagService } from '../services/tag.service';
 
 /**
@@ -28,7 +28,8 @@ import { TagService } from '../services/tag.service';
 @Component({
     selector: 'adf-tag-node-list, alfresco-tag-node-list',
     templateUrl: './tag-node-list.component.html',
-    styleUrls: ['./tag-node-list.component.css']
+    styleUrls: ['./tag-node-list.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class TagNodeListComponent implements OnChanges {