[ADF-970] Create a new Empty list component for the datatable (#2045)

* Create a new empty list component
Share the component between attachment list and document list
Add unit test
Add basic documentation

* Use the adf empty list also in the process attachment component

* Fix unit test

* delete wrong file

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.css

@@ -0,0 +1,44 @@
+.empty-list_empty_template {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.empty-list__this-space-is-empty {
+    height: 32px;
+    opacity: 0.26;
+    font-family: Muli, Helvetica, Arial, sans-serif;
+    font-size: 24px;
+    line-height: 1.33;
+    letter-spacing: -1px;
+    color: #000000;
+}
+
+.empty-list__drag-drop {
+    height: 56px;
+    opacity: 0.54;
+    font-family: Muli, Helvetica, Arial, sans-serif;
+    font-size: 56px;
+    line-height: 1;
+    letter-spacing: -2px;
+    color: #000000;
+    margin-top: 40px;
+}
+
+.empty-list__any-files-here-to-add {
+    height: 24px;
+    opacity: 0.54;
+    font-family: Muli, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: -0.4px;
+    color: #000000;
+    margin-top: 17px;
+}
+
+.empty-list__empty_doc_lib {
+    width: 565px;
+    height: 161px;
+    object-fit: contain;
+    margin-top: 17px;
+}

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.html

@@ -0,0 +1,6 @@
+<div  id="adf-empty-list" class="empty-list_empty_template">
+    <div class="empty-list__this-space-is-empty">{{emptyMsg}}</div>
+    <div class="empty-list__drag-drop">{{dragDropMsg}}</div>
+    <div class="empty-list__any-files-here-to-add">{{additionalMsg}}</div>
+    <img [src]="emptyListImageUrl" class="empty-list__empty_doc_lib">
+</div>

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.spec.ts

@@ -0,0 +1,67 @@
+/*!
+ * @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 { CoreModule } from 'ng2-alfresco-core';
+import { AdfEmptyList } from './adf-empty-list.component';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+
+describe('AdfEmptyListComponent', () => {
+    let component: AdfEmptyList;
+    let fixture: ComponentFixture<AdfEmptyList>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            declarations: [
+                AdfEmptyList
+            ]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AdfEmptyList);
+        component = fixture.componentInstance;
+    }));
+
+    it('should be defined', () => {
+        expect(component).toBeDefined();
+    });
+
+    it('should show the default values', async(() => {
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
+            expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('Drag and drop');
+            expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('any files here to add');
+            expect(fixture.nativeElement.querySelector('.empty-list__empty_doc_lib').src).toContain('empty_doc_lib');
+        });
+    }));
+
+    it('should render the input values', async(() => {
+        component.emptyMsg = 'Fake empty msg';
+        component.dragDropMsg = 'Fake drag drop msg';
+        component.additionalMsg = 'Fake additional msg';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('Fake empty msg');
+            expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('Fake drag drop msg');
+            expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('Fake additional msg');
+        });
+    }));
+});

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.ts

@@ -0,0 +1,43 @@
+/*!
+ * @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 { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'adf-empty-list',
+    styleUrls: ['./adf-empty-list.component.css'],
+    templateUrl: './adf-empty-list.component.html'
+})
+export class AdfEmptyList {
+
+    @Input()
+    emptyListImageUrl: string = require('../../assets/images/empty_doc_lib.svg');
+
+    @Input()
+    emptyMsg: string = 'This list is empty';
+
+    @Input()
+    dragDropMsg: string = 'Drag and drop';
+
+    @Input()
+    additionalMsg: string = 'any files here to add';
+
+    constructor() {
+
+    }
+
+}

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -125,6 +125,7 @@
                              ngFor [ngForOf]="[data]"
                              [ngForTemplate]="noContentTemplate">
                 </ng-template>
+                <ng-content select="adf-empty-list"></ng-content>
             </td>
         </tr>
     </ng-container>