refactoring autocomplete fields form in order to use the material 2 autocomplete (#2358)

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html

@@ -8,19 +8,19 @@
                type="text"
                [id]="field.id"
                [(ngModel)]="value"
-               (ngModelChange)="checkVisibility(field)"
                (keyup)="onKeyUp($event)"
-               (blur)="onBlur()"
                [disabled]="field.readOnly"
-               placeholder="{{field.placeholder}}">
+               placeholder="{{field.placeholder}}"
+               [mdAutocomplete]="auto">
+        <md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
+            <md-option *ngFor="let item of groups"
+                       [id]="field.id +'-'+item.id"
+                       (click)="onItemClick(item, $event)"  [value]="item">
+                <span>{{item.name}}</span>
+            </md-option>
+        </md-autocomplete>
+
     </md-input-container>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>
-<div class="adf-group-autocomplete mat-elevation-z2" *ngIf="popupVisible">
-    <md-option *ngFor="let item of groups"
-               [id]="field.id +'-'+item.id"
-               (click)="onItemClick(item, $event)">
-        <span>{{item.name}}</span>
-    </md-option>
-</div>

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.scss

@@ -6,29 +6,4 @@
     &-group-widget {
         width: 100%;
     }
-
-    &-group-autocomplete {
-        background-color: #fff;
-        position: inherit;
-        max-height: 200px;
-        overflow-y: auto;
-        z-index: 5;
-        width: 100%;
-        color: #555;
-        margin: -15px 0 0 0;
-        > md-option {
-            list-style-type: none;
-            position: static;
-            height: auto;
-            width: auto;
-            min-width: 124px;
-            padding: 8px 0;
-            margin: 0;
-            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-            border-radius: 2px;
-            > span {
-                opacity: 1;
-            }
-        }
-    }
 }

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.spec.ts

@@ -74,16 +74,6 @@ describe('FunctionalGroupWidgetComponent', () => {
         expect(widget.groupId).toBe('<id>');
     });
 
-    it('should flush value on blur', (done) => {
-        spyOn(widget, 'flushValue').and.stub();
-        widget.onBlur();
-
-        setTimeout(() => {
-            expect(widget.flushValue).toHaveBeenCalled();
-            done();
-        }, 200);
-    });
-
     it('should prevent default behaviour on option item click', () => {
         let event = jasmine.createSpyObj('event', ['preventDefault']);
         widget.onItemClick(null, event);
@@ -98,12 +88,6 @@ describe('FunctionalGroupWidgetComponent', () => {
         expect(widget.value).toBe(item.name);
     });
 
-    it('should hide popup on flush', () => {
-        widget.popupVisible = true;
-        widget.flushValue();
-        expect(widget.popupVisible).toBeFalsy();
-    });
-
     it('should update form on value flush', () => {
         spyOn(widget.field, 'updateForm').and.callThrough();
         widget.flushValue();
@@ -138,12 +122,6 @@ describe('FunctionalGroupWidgetComponent', () => {
         expect(widget.field.value).toBe(groups[1]);
     });
 
-    it('should hide popup on key up', () => {
-        widget.popupVisible = true;
-        widget.onKeyUp(null);
-        expect(widget.popupVisible).toBeFalsy();
-    });
-
     it('should fetch groups and show popup on key up', () => {
         let groups: GroupModel[] = [
             new GroupModel(),
@@ -156,12 +134,12 @@ describe('FunctionalGroupWidgetComponent', () => {
             })
         );
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = 'group';
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group', undefined);
         expect(widget.groups).toBe(groups);
-        expect(widget.popupVisible).toBeTruthy();
     });
 
     it('should fetch groups with a group filter', () => {
@@ -176,13 +154,13 @@ describe('FunctionalGroupWidgetComponent', () => {
             })
         );
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.groupId = 'parentGroup';
         widget.value = 'group';
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group', 'parentGroup');
         expect(widget.groups).toBe(groups);
-        expect(widget.popupVisible).toBeTruthy();
     });
 
     it('should hide popup when fetching empty group list', () => {
@@ -193,32 +171,32 @@ describe('FunctionalGroupWidgetComponent', () => {
             })
         );
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = 'group';
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowGroups).toHaveBeenCalledWith('group', undefined);
         expect(widget.groups.length).toBe(0);
-        expect(widget.popupVisible).toBeFalsy();
     });
 
     it('should not fetch groups when value is missing', () => {
         spyOn(formService, 'getWorkflowGroups').and.stub();
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = null;
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowGroups).not.toHaveBeenCalled();
-        expect(widget.popupVisible).toBeFalsy();
     });
 
     it('should not fetch groups when value violates constraints', () => {
         spyOn(formService, 'getWorkflowGroups').and.stub();
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.minTermLength = 4;
         widget.value = '123';
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowGroups).not.toHaveBeenCalled();
-        expect(widget.popupVisible).toBeFalsy();
     });
 });

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts

@@ -17,6 +17,7 @@
 
  /* tslint:disable:component-selector  */
 
+import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
 import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormService } from '../../../services/form.service';
 import { GroupModel } from './../core/group.model';
@@ -32,7 +33,7 @@ import { baseHost , WidgetComponent } from './../widget.component';
 export class FunctionalGroupWidgetComponent extends WidgetComponent implements OnInit {
 
     value: string;
-    popupVisible: boolean = false;
+    oldValue: string;
     groups: GroupModel[] = [];
     minTermLength: number = 1;
     groupId: string;
@@ -42,8 +43,6 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
          super(formService);
     }
 
-    // TODO: investigate, called 2 times
-    // https://github.com/angular/angular/issues/6782
     ngOnInit() {
         if (this.field) {
             let group = this.field.value;
@@ -67,26 +66,18 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
     }
 
     onKeyUp(event: KeyboardEvent) {
-        if (this.value && this.value.length >= this.minTermLength) {
+        if (this.value && this.value.length >= this.minTermLength  && this.oldValue !== this.value) {
+            if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) {
+                this.oldValue = this.value;
                 this.formService.getWorkflowGroups(this.value, this.groupId)
                     .subscribe((result: GroupModel[]) => {
                         this.groups = result || [];
-                    this.popupVisible = this.groups.length > 0;
                     });
-        } else {
-            this.popupVisible = false;
             }
         }
-
-    onBlur() {
-        setTimeout(() => {
-            this.flushValue();
-        }, 200);
     }
 
     flushValue() {
-        this.popupVisible = false;
-
         let option = this.groups.find(item => item.name.toLocaleLowerCase() === this.value.toLocaleLowerCase());
 
         if (option) {
@@ -100,7 +91,6 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
         this.field.updateForm();
     }
 
-    // TODO: still causes onBlur execution
     onItemClick(item: GroupModel, event: Event) {
         if (item) {
             this.field.value = item;
@@ -110,4 +100,11 @@ export class FunctionalGroupWidgetComponent extends WidgetComponent implements O
             event.preventDefault();
         }
     }
+
+    onItemSelect(item: GroupModel) {
+        if (item) {
+            this.field.value = item;
+            this.value = item.name;
+        }
+    }
 }

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.html

@@ -12,20 +12,15 @@
                type="text"
                [id]="field.id"
                [(ngModel)]="value"
-               (ngModelChange)="checkVisibility(field)"
                (keyup)="onKeyUp($event)"
                [disabled]="field.readOnly"
-               placeholder="{{field.placeholder}}">
+               placeholder="{{field.placeholder}}"
-    </md-input-container>
+               [mdAutocomplete]="auto">
-    <error-widget [error]="field.validationSummary"></error-widget>
+        <md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
-    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-</div>
-<div class="adf-people-autocomplete mat-elevation-z2" [hidden]="!popupVisible || users.length === 0">
             <md-option *ngFor="let user of users; let i = index"
-               [id]="field.id +'-'+user.id"
+                       (click)="onItemClick(user, $event)" [value]="user">
-               (click)="onItemClick(user, $event)">
+                <div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
-        <div class="adf-people-widget-row">
+                    <div class="adf-people-widget-pic">
-            <div id="adf-people-widget-initial-{{i}}" *ngIf="!user.userImage" class="adf-people-widget-pic">
                         {{getInitialUserName(user.firstName, user.lastName)}}
                     </div>
                     <div *ngIf="user.userImage" class="adf-people-widget-image-row">
@@ -36,4 +31,8 @@
                     <span class="adf-people-label-name">{{getDisplayName(user)}}</span>
                 </div>
             </md-option>
+        </md-autocomplete>
+    </md-input-container>
+    <error-widget [error]="field.validationSummary"></error-widget>
+    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.scss

@@ -1,5 +1,9 @@
-@import '~ng2-alfresco-core/styles/theming';
+@import '~@angular/material/theming';
-@import '../form';
+
+@mixin mat-people-widget-theme($theme) {
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
 
     .adf {
 
@@ -7,38 +11,13 @@
             width: 100%;
         }
 
-    &-people-autocomplete {
-        background-color: #fff;
-        position:inherit;
-        max-height: 200px;
-        width: 100%;
-        overflow-y: auto;
-        z-index: 5;
-        border-radius: 3%;
-        color: #555;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-        > md-option {
-            list-style-type: none;
-            position: static;
-            height: auto;
-            width: auto;
-            min-width: 124px;
-            padding: 8px 0 0 20px;
-            margin: 0;
-            border-radius: 2px;
-            > span {
-                opacity: 1;
-            }
-        }
-    }
-
         &-people-widget-pic {
-        background: #ff9800;
+            background: mat-color($primary);
             display: inline-block;
-        width: 30px;
+            width: 40px;
-        padding: 0 9px;
+            height: 40px;
             border-radius: 100px;
-        color: #fff;
+            color: mat-color($foreground, text);
             text-align: center;
             font-weight: bolder;
             font-size: 18px;
@@ -51,12 +30,15 @@
         }
 
         &-people-widget-image {
+            margin-left: -45px;
+            left: 21px;
+            background: mat-color($background, dialog);
             border-radius: 100px;
-        width: 50px;
+            width: 40px;
-        height: 50px;
+            height: 40px;
             vertical-align: middle;
             display: inline-block;
-        padding: 0 0;
+            padding: 0;
         }
 
         &-people-widget-image-row {
@@ -67,3 +49,4 @@
             padding-left: 10px;
         }
     }
+}

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.spec.ts

@@ -142,12 +142,12 @@ describe('PeopleWidgetComponent', () => {
             })
         );
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = 'user1';
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
         expect(widget.users).toBe(users);
-        expect(widget.popupVisible).toBeTruthy();
     });
 
     it('should fetch users by search term and group id', () => {
@@ -159,13 +159,13 @@ describe('PeopleWidgetComponent', () => {
             })
         );
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = 'user1';
         widget.groupId = '1001';
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
         expect(widget.users).toBe(users);
-        expect(widget.popupVisible).toBeTruthy();
     });
 
     it('should fetch users and show no popup', () => {
@@ -176,19 +176,20 @@ describe('PeopleWidgetComponent', () => {
             })
         );
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = 'user1';
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowUsers).toHaveBeenCalledWith(widget.value, widget.groupId);
         expect(widget.users).toEqual([]);
-        expect(widget.popupVisible).toBeFalsy();
     });
 
     it('should require search term to fetch users', () => {
         spyOn(formService, 'getWorkflowUsers').and.stub();
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = null;
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowUsers).not.toHaveBeenCalled();
     });
@@ -196,19 +197,14 @@ describe('PeopleWidgetComponent', () => {
     it('should not fetch users due to constraint violation', () => {
         spyOn(formService, 'getWorkflowUsers').and.stub();
 
+        let keyboardEvent = new KeyboardEvent('keypress');
         widget.value = '123';
         widget.minTermLength = 4;
-        widget.onKeyUp(null);
+        widget.onKeyUp(keyboardEvent);
 
         expect(formService.getWorkflowUsers).not.toHaveBeenCalled();
     });
 
-    it('should hide popup on value flush', () => {
-        widget.popupVisible = true;
-        widget.flushValue();
-        expect(widget.popupVisible).toBeFalsy();
-    });
-
     it('should update form on value flush', () => {
         spyOn(widget.field, 'updateForm').and.callThrough();
         widget.flushValue();
@@ -247,31 +243,4 @@ describe('PeopleWidgetComponent', () => {
         expect(widget.value).toBeNull();
         expect(widget.field.value).toBeNull();
     });
-
-    describe('Image', () => {
-
-        it('should show the initial in the image', () => {
-            widget.users = [
-                new GroupUserModel({firstName: 'Tony', lastName: 'Stark'}),
-                new GroupUserModel({firstName: 'John', lastName: 'Doe'})
-            ];
-
-            fixture.detectChanges();
-
-            expect(element.querySelector('#adf-people-widget-initial-0').innerHTML.trim()).toBe('TS');
-            expect(element.querySelector('#adf-people-widget-initial-1').innerHTML.trim()).toBe('JD');
-        });
-
-        it('should show the the image if user has an image', () => {
-            widget.users = [
-                new GroupUserModel({firstName: 'Tony', lastName: 'Stark', userImage: 'testUrl0'}),
-                new GroupUserModel({firstName: 'John', lastName: 'Doe', userImage: 'testUrl1'})
-            ];
-
-            fixture.detectChanges();
-
-            expect((element.querySelector('#adf-people-widget-pic-0') as any).src).toContain('testUrl0');
-            expect((element.querySelector('#adf-people-widget-pic-1') as any).src).toContain('testUrl1');
-        });
-    });
 });

ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts

@@ -17,8 +17,9 @@
 
 /* tslint:disable:component-selector  */
 
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
-import { Observable } from 'rxjs/Observable';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MdAutocompleteTrigger } from '@angular/material';
 import { FormService } from '../../../services/form.service';
 import { GroupUserModel } from '../core/group-user.model';
 import { GroupModel } from '../core/group.model';
@@ -31,24 +32,21 @@ import { baseHost , WidgetComponent } from './../widget.component';
     host: baseHost,
     encapsulation: ViewEncapsulation.None
 })
-export class PeopleWidgetComponent extends WidgetComponent implements OnInit, AfterViewInit {
+export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
 
-    @ViewChild('inputValue')
+    @ViewChild(MdAutocompleteTrigger)
-    input: ElementRef;
+    input: MdAutocompleteTrigger;
 
-    popupVisible: boolean = false;
     minTermLength: number = 1;
     value: string;
+    oldValue: string;
     users: GroupUserModel[] = [];
     groupId: string;
 
-    constructor(public formService: FormService,
+    constructor(public formService: FormService) {
-                public elementRef: ElementRef) {
         super(formService);
     }
 
-    // TODO: investigate, called 2 times
-    // https://github.com/angular/angular/issues/6782
     ngOnInit() {
         if (this.field) {
             let user: GroupUserModel = this.field.value;
@@ -61,35 +59,25 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
                 let restrictWithGroup = <GroupModel> params['restrictWithGroup'];
                 this.groupId = restrictWithGroup.id;
             }
-
-            // Load auto-completion for previously saved value
-            if (this.value) {
-                this.formService
-                    .getWorkflowUsers(this.value, this.groupId)
-                    .subscribe((result: GroupUserModel[]) => this.users = result || []);
-            }
-        }
-    }
-
-    ngAfterViewInit() {
-        if (this.input) {
-            let onBlurInputEvent = Observable.fromEvent(this.input.nativeElement, 'blur');
-            onBlurInputEvent.debounceTime(200).subscribe((event) => {
-                this.flushValue();
-            });
         }
     }
 
     onKeyUp(event: KeyboardEvent) {
-        if (this.value && this.value.length >= this.minTermLength) {
+        if (this.value && this.value.length >= this.minTermLength  && this.oldValue !== this.value) {
+            if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) {
+                if (this.value.length >= this.minTermLength) {
+                    this.oldValue = this.value;
+                    this.searchUsers();
+                }
+            }
+        }
+    }
+
+    searchUsers() {
         this.formService.getWorkflowUsers(this.value, this.groupId)
             .subscribe((result: GroupUserModel[]) => {
                 this.users = result || [];
-                    this.popupVisible = this.users.length > 0;
             });
-        } else {
-            this.popupVisible = false;
-        }
     }
 
     onErrorImageLoad(user) {
@@ -99,8 +87,6 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
     }
 
     flushValue() {
-        this.popupVisible = false;
-
         let option = this.users.find(item => {
             let fullName = this.getDisplayName(item).toLocaleLowerCase();
             return (this.value && fullName === this.value.toLocaleLowerCase());
@@ -136,6 +122,13 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit, Af
         }
     }
 
+    onItemSelect(item: GroupUserModel) {
+        if (item) {
+            this.field.value = item;
+            this.value = this.getDisplayName(item);
+        }
+    }
+
     getInitialUserName(firstName: string, lastName: string) {
         firstName = (firstName !== null && firstName !== '' ? firstName[0] : '');
         lastName = (lastName !== null && lastName !== '' ? lastName[0] : '');

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.html

@@ -11,16 +11,19 @@
                    [id]="field.id"
                    [(ngModel)]="value"
                    (keyup)="onKeyUp($event)"
-                   (blur)="onBlur()"
                    [disabled]="field.readOnly"
-                   placeholder="{{field.placeholder}}">
+                   placeholder="{{field.placeholder}}"
+                   [mdAutocomplete]="auto">
+            <md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
+
+                <md-option *ngFor="let item of options" (click)="onItemClick(item, $event)"  [value]="item">
+                    <span>{{item.name}}</span>
+                </md-option>
+            </md-autocomplete>
+
         </md-input-container>
+
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
     </div>
-    <div class="adf-typeahead-autocomplete mat-elevation-z2" [hidden]="options.length <= 0 || !popupVisible">
-        <md-option *ngFor="let item of options" (click)="onItemClick(item, $event)">
-            <span>{{item.name}}</span>
-        </md-option>
-    </div>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.scss

@@ -11,30 +11,4 @@
     &-typeahead-widget {
         width: 100%;
     }
-
-    &-typeahead-autocomplete {
-        background-color: #fff;
-        position:absolute;
-        max-height: 200px;
-        width: 100%;
-        overflow-y: auto;
-        z-index: 5;
-        color: #555;
-        margin: -10px 0 0 0;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-        > md-option {
-            list-style-type: none;
-            position: static;
-            height: auto;
-            width: auto;
-            min-width: 124px;
-            padding: 8px 0;
-            margin: 0;
-            border-radius: 2px;
-            > span {
-                opacity: 1;
-                padding-left: 23px;
-            }
-        }
-    }
 }

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts

@@ -108,68 +108,6 @@ describe('TypeaheadWidgetComponent', () => {
         expect(widget.handleError).toHaveBeenCalledWith(err);
     });
 
-    it('should show popup on key up', () => {
-
-        spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
-
-        widget.minTermLength = 1;
-        widget.value = 'some value';
-
-        widget.popupVisible = false;
-        widget.onKeyUp(null);
-        expect(widget.popupVisible).toBeTruthy();
-    });
-
-    it('should require items to show popup', () => {
-        widget.minTermLength = 1;
-        widget.value = 'some value';
-
-        widget.popupVisible = false;
-        widget.onKeyUp(null);
-        expect(widget.popupVisible).toBeFalsy();
-    });
-
-    it('should require value to show popup', () => {
-        widget.minTermLength = 1;
-        widget.value = '';
-
-        widget.popupVisible = false;
-        widget.onKeyUp(null);
-        expect(widget.popupVisible).toBeFalsy();
-    });
-
-    it('should require value to be of min length to show popup', () => {
-        spyOn(widget, 'getOptions').and.returnValue([{}, {}]);
-
-        widget.minTermLength = 3;
-        widget.value = 'v';
-
-        // value less than constraint
-        widget.popupVisible = false;
-        widget.onKeyUp(null);
-        expect(widget.popupVisible).toBeFalsy();
-
-        // value satisfies constraint
-        widget.value = 'value';
-        widget.onKeyUp(null);
-        expect(widget.popupVisible).toBeTruthy();
-
-        // value gets less than allowed again
-        widget.value = 'va';
-        widget.onKeyUp(null);
-        expect(widget.popupVisible).toBeFalsy();
-    });
-
-    it('should flush value on blur', (done) => {
-        spyOn(widget, 'flushValue').and.stub();
-        widget.onBlur();
-
-        setTimeout(() => {
-            expect(widget.flushValue).toHaveBeenCalled();
-            done();
-        }, 200);
-    });
-
     it('should prevent default behaviour on option item click', () => {
         let event = jasmine.createSpyObj('event', ['preventDefault']);
         widget.onItemClick(null, event);
@@ -270,12 +208,6 @@ describe('TypeaheadWidgetComponent', () => {
         expect(filtered[0]).toEqual(options[1]);
     });
 
-    it('should hide popup on flush', () => {
-        widget.popupVisible = true;
-        widget.flushValue();
-        expect(widget.popupVisible).toBeFalsy();
-    });
-
     it('should update form on value flush', () => {
         spyOn(widget.field, 'updateForm').and.callThrough();
         widget.flushValue();
@@ -359,22 +291,6 @@ describe('TypeaheadWidgetComponent', () => {
         });
     });
 
-    it('should emit field change event on blur', (done) => {
-        spyOn(widget, 'flushValue').and.stub();
-        let fakeField = new FormFieldModel(new FormModel(), { id: 'fakeField', value: 'fakeValue' });
-        widget.field = fakeField;
-        widget.onBlur();
-
-        setTimeout(() => {
-            widget.fieldChanged.subscribe((field) => {
-                expect(field).toBeDefined();
-                expect(field.id).toEqual('field-id');
-                expect(field.value).toEqual('field-value');
-            });
-            done();
-        }, 200);
-    });
-
     describe('when template is ready', () => {
         let typeaheadWidgetComponent: TypeaheadWidgetComponent;
         let fixture: ComponentFixture<TypeaheadWidgetComponent>;
@@ -428,8 +344,9 @@ describe('TypeaheadWidgetComponent', () => {
             }));
 
             it('should show typeahead options', async(() => {
+                let keyboardEvent = new KeyboardEvent('keypress');
                 typeaheadWidgetComponent.value = 'F';
-                typeaheadWidgetComponent.onKeyUp(null);
+                typeaheadWidgetComponent.onKeyUp(keyboardEvent);
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     expect(fixture.debugElement.queryAll(By.css('[id="md-option-1"]'))).toBeDefined();
@@ -472,8 +389,9 @@ describe('TypeaheadWidgetComponent', () => {
             }));
 
             it('should show typeahead options', async(() => {
+                let keyboardEvent = new KeyboardEvent('keypress');
                 typeaheadWidgetComponent.value = 'F';
-                typeaheadWidgetComponent.onKeyUp(null);
+                typeaheadWidgetComponent.onKeyUp(keyboardEvent);
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     expect(fixture.debugElement.queryAll(By.css('[id="md-option-1"]'))).toBeDefined();

ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts

@@ -17,6 +17,7 @@
 
  /* tslint:disable:component-selector  */
 
+import { ENTER, ESCAPE } from '@angular/cdk/keycodes';
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { LogService } from 'ng2-alfresco-core';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
@@ -33,9 +34,9 @@ import { baseHost , WidgetComponent } from './../widget.component';
 })
 export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit {
 
-    popupVisible: boolean = false;
     minTermLength: number = 1;
     value: string;
+    oldValue: string;
     options: FormFieldOption[] = [];
 
     constructor(public formService: FormService,
@@ -111,24 +112,17 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit
     }
 
     onKeyUp(event: KeyboardEvent) {
-        if (this.value && this.value.length >= this.minTermLength) {
+        if (this.value && this.value.length >= this.minTermLength  && this.oldValue !== this.value) {
+            if (event.keyCode !== ESCAPE && event.keyCode !== ENTER) {
+                if (this.value.length >= this.minTermLength) {
                     this.options = this.getOptions();
-            this.popupVisible = this.options.length > 0;
+                    this.oldValue = this.value;
-        } else {
+                }
-            this.popupVisible = false;
             }
         }
-
-    onBlur() {
-        setTimeout(() => {
-            this.flushValue();
-            this.checkVisibility();
-        }, 200);
     }
 
     flushValue() {
-        this.popupVisible = false;
-
         let options = this.field.options || [];
         let lValue = this.value ? this.value.toLocaleLowerCase() : null;
 
@@ -141,11 +135,9 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit
             this.value = null;
         }
 
-        // TODO: seems to be not needed as field.value setter calls it
         this.field.updateForm();
     }
 
-    // TODO: still causes onBlur execution
     onItemClick(item: FormFieldOption, event: Event) {
         if (item) {
             this.field.value = item.id;
@@ -157,6 +149,14 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit
         }
     }
 
+    onItemSelect(item: FormFieldOption) {
+        if (item) {
+            this.field.value = item.id;
+            this.value = item.name;
+            this.checkVisibility();
+        }
+    }
+
     handleError(error: any) {
         this.logService.error(error);
     }

ng2-components/ng2-activiti-form/src/components/widgets/widget.component.ts

@@ -122,7 +122,6 @@ export class WidgetComponent implements AfterViewInit {
     }
 
     protected event(event: Event): void {
-        console.log(event);
         this.formService.formEvents.next(event);
     }
 }

ng2-components/ng2-activiti-form/styles/index.scss

@@ -1,9 +1,10 @@
 @import '../src/components/widgets/form';
 @import '../src/components/widgets/container/container.widget';
-@import '../src/components/widgets/dynamic-table/dynamic-table.widget';
+@import '../src/components/widgets/people/people.widget';
 
 @mixin alfresco-activity-form-theme($theme) {
     @include mat-form-theme($theme);
     @include mat-container-widget-theme($theme);
-    @include mat-dynamic-table-theme($theme);
+    @include mat-people-widget-theme($theme);
+
 }

ng2-components/ng2-activiti-tasklist/src/models/user.model.ts

@@ -28,7 +28,7 @@ export class User {
     email: string;
     firstName: string;
     lastName: string;
-    userImage: string;
+    userImage: string = null;
 
     constructor(obj?: any) {
         if (obj) {

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: rgba(0, 0, 0, 0.87); }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(0, 0, 0, 0.38); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #2196f3;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: white;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: rgba(0, 0, 0, 0.87); }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(0, 0, 0, 0.38); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #2196f3;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: white;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: rgba(0, 0, 0, 0.87); }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(0, 0, 0, 0.38); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #00bcd4;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: white;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: rgba(0, 0, 0, 0.87); }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(0, 0, 0, 0.38); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #00bcd4;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: white;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: rgba(0, 0, 0, 0.87); }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(0, 0, 0, 0.38); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #8bc34a;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: white;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: rgba(0, 0, 0, 0.87); }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(0, 0, 0, 0.38); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #8bc34a;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: white;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: rgba(0, 0, 0, 0.87); }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(0, 0, 0, 0.38); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #3f51b5;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: white;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: white;
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(255, 255, 255, 0.07);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: white;
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: white; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(255, 255, 255, 0.3); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #c2185b;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: white;
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: #424242;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css

@@ -17,7 +17,23 @@
  * This mixin contains shared option styles between the select and
  * autocomplete components.
  */
-/* ANIMATION */
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+/* Theme for the ripple elements.*/
+/** The mixins below are shared between md-menu and md-select */
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+/* stylelint-disable material/no-prefixes */
+/* stylelint-enable */
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
 /**
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
@@ -2207,123 +2223,42 @@ container-widget .mat-focused .mat-input-prefix {
 container-widget .mat-grid-tile {
   overflow: visible; }
 
-.adf-dynamic-table {
+.adf-people-widget {
-  width: 100%;
-  position: relative;
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  white-space: nowrap;
-  font-size: 14px;
-  /* Firefox fixes */
-  border-collapse: unset;
-  border-spacing: 0; }
-  .adf-dynamic-table thead {
-    padding-bottom: 3px; }
-  .adf-dynamic-table tbody tr {
-    position: relative;
-    height: 56px;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-property: background-color; }
-    .adf-dynamic-table tbody tr:hover {
-      background-color: #eeeeee; }
-    .adf-dynamic-table tbody tr.is-selected, .adf-dynamic-table tbody tr.is-selected:hover {
-      background-color: #e0f7fa; }
-    .adf-dynamic-table tbody tr:focus {
-      outline-offset: -1px;
-      outline-width: 1px;
-      outline-color: #448aff;
-      outline-style: solid; }
-  .adf-dynamic-table td, .adf-dynamic-table th {
-    padding: 0 18px 12px 18px;
-    text-align: center; }
-    .adf-dynamic-table td:first-of-type, .adf-dynamic-table th:first-of-type {
-      padding-left: 24px; }
-    .adf-dynamic-table td:last-of-type, .adf-dynamic-table th:last-of-type {
-      padding-right: 24px; }
-  .adf-dynamic-table td {
-    color: white;
-    position: relative;
-    vertical-align: middle;
-    height: 56px;
-    border-top: 1px solid rgba(255, 255, 255, 0.07);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-    padding-top: 12px;
-    box-sizing: border-box;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default; }
-  .adf-dynamic-table th {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    vertical-align: bottom;
-    text-overflow: ellipsis;
-    font-weight: bold;
-    line-height: 24px;
-    letter-spacing: 0;
-    height: 56px;
-    font-size: 12px;
-    color: white;
-    padding-bottom: 8px;
-    box-sizing: border-box; }
-    .adf-dynamic-table th.sortable {
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none; }
-      .adf-dynamic-table th.sortable:hover {
-        cursor: pointer; }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc {
-      color: white; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-        font-family: 'Material Icons';
-        font-weight: normal;
-        font-style: normal;
-        font-size: 24px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        word-wrap: normal;
-        font-feature-settings: 'liga';
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        font-size: 16px;
-        content: "\e5d8";
-        margin-right: 5px;
-        vertical-align: sub; }
-      .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover {
-        cursor: pointer; }
-        .adf-dynamic-table th.adf-dynamic-table__header--sorted-asc:hover:before, .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:hover:before {
-          color: rgba(255, 255, 255, 0.3); }
-    .adf-dynamic-table th.adf-dynamic-table__header--sorted-desc:before {
-      content: "\e5db"; }
-  .adf-dynamic-table .adf-dynamic-table-cell {
-    text-align: left;
-    cursor: default; }
-    .adf-dynamic-table .adf-dynamic-table-cell--text {
-      text-align: left; }
-    .adf-dynamic-table .adf-dynamic-table-cell--number {
-      text-align: right; }
-    .adf-dynamic-table .adf-dynamic-table-cell--image {
-      text-align: left; }
-      .adf-dynamic-table .adf-dynamic-table-cell--image img {
-        width: 24px;
-        height: 24px; }
-  .adf-dynamic-table .full-width {
   width: 100%; }
 
+.adf-people-widget-pic {
+  background: #7b1fa2;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  color: white;
+  text-align: center;
+  font-weight: bolder;
+  font-size: 18px;
+  text-transform: uppercase;
+  vertical-align: middle; }
+
+.adf-people-widget-row {
+  padding-bottom: 10px; }
+
+.adf-people-widget-image {
+  margin-left: -45px;
+  left: 21px;
+  background: #424242;
+  border-radius: 100px;
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 0; }
+
+.adf-people-widget-image-row {
+  display: inline-block; }
+
+.adf-people-label-name {
+  padding-left: 10px; }
+
 .adf-filters__entry {
   cursor: pointer;
   font-size: 14px !important;

ng2-components/package-base.json

@@ -6,7 +6,7 @@
     "scripts": {
         "clean": "rimraf node_modules",
         "clean-lock": "rimraf package-lock.json",
-        "build": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style",        
+        "build": "npm run pkg-build && npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style",
         "build-style": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
         "pkg-build": "package-json-merge ng2-alfresco-core/package.json ng2-alfresco-datatable/package.json ng2-activiti-diagrams/package.json ng2-activiti-analytics/package.json ng2-activiti-form/package.json ng2-activiti-tasklist/package.json ng2-activiti-processlist/package.json ng2-alfresco-documentlist/package.json ng2-alfresco-login/package.json ng2-alfresco-search/package.json ng2-alfresco-tag/package.json ng2-alfresco-upload/package.json ng2-alfresco-viewer/package.json ng2-alfresco-webscript/package.json ng2-alfresco-webscript/package.json ng2-alfresco-userinfo/package.json ng2-alfresco-social/package.json package-base.json  > package.json",
         "test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
@@ -14,6 +14,7 @@
         "toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
         "markdownlint": "markdownlint ng2-alfresco-core/README.md && markdownlint ng2-alfresco-datatable/README.md && markdownlint ng2-activiti-diagrams/README.md && markdownlint ng2-activiti-analytics/README.md && markdownlint ng2-activiti-form/README.md && markdownlint ng2-activiti-tasklist/README.md && markdownlint ng2-activiti-processlist/README.md && markdownlint ng2-alfresco-documentlist/README.md && markdownlint ng2-alfresco-login/README.md && markdownlint ng2-alfresco-search/README.md && markdownlint ng2-alfresco-tag/README.md && markdownlint ng2-alfresco-upload/README.md && markdownlint ng2-alfresco-viewer/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-userinfo/README.md && markdownlint ng2-alfresco-social/README.md && markdownlint README.md",
         "doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
+        "docindex": "node config/buildFullDocIndex.js",
         "tslint": "",
         "prepublish": "",
         "tsc": "",

ng2-components/package.json

@@ -17,7 +17,6 @@
     "toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
     "markdownlint": "markdownlint ng2-alfresco-core/README.md && markdownlint ng2-alfresco-datatable/README.md && markdownlint ng2-activiti-diagrams/README.md && markdownlint ng2-activiti-analytics/README.md && markdownlint ng2-activiti-form/README.md && markdownlint ng2-activiti-tasklist/README.md && markdownlint ng2-activiti-processlist/README.md && markdownlint ng2-alfresco-documentlist/README.md && markdownlint ng2-alfresco-login/README.md && markdownlint ng2-alfresco-search/README.md && markdownlint ng2-alfresco-tag/README.md && markdownlint ng2-alfresco-upload/README.md && markdownlint ng2-alfresco-viewer/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-webscript/README.md && markdownlint ng2-alfresco-userinfo/README.md && markdownlint ng2-alfresco-social/README.md && markdownlint README.md",
     "doc": "npm run toc && npm run markdownlint && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
-    "docindex": "node config/buildFullDocIndex.js",
     "tslint": "",
     "prepublish": "",
     "tsc": "",
@@ -76,25 +75,26 @@
     "@angular/router": "4.3.6",
     "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "1.8.0",
-    "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "material-design-lite": "1.2.1",
-    "minimatch": "3.0.4",
     "moment": "2.15.1",
-    "ng2-activiti-diagrams": "1.8.0",
-    "ng2-activiti-form": "1.8.0",
-    "ng2-activiti-tasklist": "1.8.0",
-    "ng2-alfresco-core": "1.8.0",
-    "ng2-alfresco-datatable": "1.8.0",
-    "ng2-alfresco-documentlist": "1.8.0",
-    "ng2-charts": "1.6.0",
-    "pdfjs-dist": "1.5.404",
-    "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.8.12"
+    "zone.js": "0.8.12",
+    "ng2-alfresco-core": "1.8.0",
+    "raphael": "2.2.7",
+    "chart.js": "2.5.0",
+    "ng2-activiti-diagrams": "1.8.0",
+    "ng2-charts": "1.6.0",
+    "@angular/flex-layout": "2.0.0-beta.9",
+    "ng2-activiti-form": "1.8.0",
+    "ng2-alfresco-datatable": "1.8.0",
+    "ng2-activiti-tasklist": "1.8.0",
+    "ng2-alfresco-documentlist": "1.8.0",
+    "minimatch": "3.0.4",
+    "pdfjs-dist": "1.5.404"
   },
   "devDependencies": {
     "@types/hammerjs": "2.0.34",
@@ -129,8 +129,6 @@
     "karma-systemjs": "0.16.0",
     "karma-webpack": "2.0.3",
     "loader-utils": "1.1.0",
-    "markdown-toc": "1.1.0",
-    "markdownlint-cli": "^0.3.1",
     "merge-stream": "1.0.1",
     "node-sass": "4.5.3",
     "null-loader": "0.1.1",
@@ -154,7 +152,9 @@
     "webpack": "2.2.1",
     "webpack-dev-server": "2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "0.1.7"
+    "wsrv": "0.1.7",
+    "markdown-toc": "1.1.0",
+    "markdownlint-cli": "^0.3.1"
   },
   "license": "Apache-2.0",
   "module": "./index.js",