fix userinfo on mobile devices and small refactoring name scss method (#2558)

demo-shell-ng2/.gitignore

@@ -52,7 +52,9 @@ app/**/*.d.ts
 
 !app/js/Polyline.js
 .idea
-src/versions.json
+**/versions.json
+
+
 dist/
 coverage/
 

demo-shell-ng2/src/styles.scss

@@ -0,0 +1,22 @@
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
+body {
+  font-family: Roboto, Arial, sans-serif;
+  margin: 0;
+}
+
+.basic-container {
+  padding: 5px;
+}
+
+.version-info {
+  font-size: 8pt;
+  float: right;
+}
+
+/**
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */

docs/theming.md

@@ -107,3 +107,18 @@ $dark-theme:   mat-dark-theme($primary, $accent, $warn);
 }
 ```
 Any component with the  `add-dark-theme` class will use the dark theme, while other components will fall back to the default.
+
+
+## Default reusable class
+
+.adf-hide-small                 // Display none vieweport <960px
+.adf-hide-xsmall                // Display none vieweport <600px
+
+.adf-primary-color               // Primary color
+.adf-accent-color                // Accent color
+.adf-warn-color                  // Warn color
+.adf-primary-contrast-text-color // Default contrast color for primary color
+.adf-accent-contrast-text-color  // Default contrast color for accent color
+.adf-background-color            // Dialog background color
+.adf-primary-background-color    // Primary background color
+.adf-accent-background-color     // Default background color for accent

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-analytics-report-list-theme($theme) {
+@mixin adf-analytics-report-list-theme($theme) {
     $primary: map-get($theme, primary);
 
     .adf-analytics-report-list {

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.scss

@@ -1,4 +1,4 @@
-@mixin mat-analytics-date-range-widget-theme($theme) {
+@mixin adf-analytics-date-range-widget-theme($theme) {
     $warn: map-get($theme, warn);
 
     .adf-date-range-analytics-text-danger {

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

@@ -2,6 +2,6 @@
 @import '../src/components/widgets/date-range/date-range.widget';
 
 @mixin alfresco-activity-analytics-theme($theme) {
-    @include mat-analytics-report-list-theme($theme);
-    @include mat-analytics-date-range-widget-theme($theme);
+    @include adf-analytics-report-list-theme($theme);
+    @include adf-analytics-date-range-widget-theme($theme);
 }

ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-diagram-tooltip-theme($theme) {
+@mixin adf-diagram-tooltip-theme($theme) {
 
     .adf {
         &-diagram-tooltip {

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

@@ -1,5 +1,5 @@
 @import '../src/components/tooltip/diagram-tooltip.component';
 
 @mixin alfresco-activity-diagrams-theme($theme) {
-    @include mat-diagram-tooltip-theme($theme);
+    @include adf-diagram-tooltip-theme($theme);
 }

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

@@ -1,5 +1,5 @@
 
-@mixin mat-container-widget-theme($theme) {
+@mixin adf-container-widget-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

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

@@ -1,6 +1,6 @@
 @import './hyperlink/hyperlink.widget';
 
-@mixin mat-form-theme($theme) {
+@mixin adf-form-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

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

@@ -1,4 +1,4 @@
-@mixin mat-people-widget-theme($theme) {
+@mixin adf-people-widget-theme($theme) {
     $primary: map-get($theme, primary);
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);

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

@@ -3,8 +3,8 @@
 @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-people-widget-theme($theme);
+    @include adf-form-theme($theme);
+    @include adf-container-widget-theme($theme);
+    @include adf-people-widget-theme($theme);
 
 }

ng2-components/ng2-activiti-processlist/src/components/process-filters.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-filters-process-theme($theme) {
+@mixin adf-filters-process-theme($theme) {
     $primary: map-get($theme, primary);
 
     .adf {

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

@@ -1,5 +1,5 @@
 @import '../src/components/process-filters.component';
 
 @mixin alfresco-activity-processlist-theme($theme) {
-    @include mat-filters-process-theme($theme);
+    @include adf-filters-process-theme($theme);
 }

ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-comment-list-theme($theme) {
+@mixin adf-comment-list-theme($theme) {
     $primary: map-get($theme, primary);
 
     .adf {

ng2-components/ng2-activiti-tasklist/src/components/people-search.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-people-search-theme($theme) {
+@mixin adf-people-search-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

ng2-components/ng2-activiti-tasklist/src/components/people.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-people-theme($theme) {
+@mixin adf-people-theme($theme) {
     $primary: map-get($theme, primary);
 
     .assignment-header {

ng2-components/ng2-activiti-tasklist/src/components/start-task.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-start-task-theme($theme) {
+@mixin adf-start-task-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
@@ -45,18 +45,18 @@
 
     adf-start-task {
         .adf {
-    
+
             &-start-task-input-container .mat-input-wrapper {
                 padding-top: 8px;
             }
-    
+
             &-error-text-container {
                 position: absolute;
                 width: 81%;
                 height: 20px;
                 margin-top: 30px;
             }
-    
+
             &-error-text {
                 padding: 1px;
                 height: 16px;
@@ -65,35 +65,35 @@
                 float: left;
                 color: mat-color($warn);
             }
-    
+
             &-error-icon {
                 float: right;
                 font-size: 17px;
                 color: mat-color($warn);
             }
-    
+
             &-label {
                 color: rgb(186, 186, 186);;
             }
-    
+
             &-invalid {
-    
+
                 .mat-input-underline {
                     background-color: #f44336 !important;
                 }
-    
+
                 .adf-file {
                     border-color: mat-color($warn);
                 }
-    
+
                 .mat-input-prefix {
                     color: mat-color($warn);
                 }
-    
+
                 .adf-input {
                     border-color: mat-color($warn);
                 }
-    
+
                 .adf-label {
                     color: mat-color($warn);
                     &:after {
@@ -101,6 +101,6 @@
                     }
                 }
             }
-        }            
+        }
     }
 }

ng2-components/ng2-activiti-tasklist/src/components/task-filters.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-filters-task-theme($theme) {
+@mixin adf-filters-task-theme($theme) {
     $primary: map-get($theme, primary);
 
     .adf {

ng2-components/ng2-activiti-tasklist/src/components/task-header.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-header-theme($theme) {
+@mixin adf-header-theme($theme) {
     $primary: map-get($theme, primary);
 
     .adf {

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

@@ -6,10 +6,10 @@
 @import '../src/components/task-header.component';
 
 @mixin alfresco-activity-tasklist-theme($theme) {
-    @include mat-comment-list-theme($theme);
-    @include mat-start-task-theme($theme);
-    @include mat-people-search-theme($theme);
-    @include mat-people-theme($theme);
-    @include mat-filters-task-theme($theme);
-    @include mat-header-theme($theme);
+    @include adf-comment-list-theme($theme);
+    @include adf-start-task-theme($theme);
+    @include adf-people-search-theme($theme);
+    @include adf-people-theme($theme);
+    @include adf-filters-task-theme($theme);
+    @include adf-header-theme($theme);
 }

ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-accordion-theme($theme) {
+@mixin adf-accordion-theme($theme) {
     $primary: map-get($theme, primary);
 
     .adf-panel-heading {
@@ -23,9 +23,9 @@
     }
 
     .adf-panel-collapse {
-        display: inline-block;            
+        display: inline-block;
     }
-    
+
     .adf-panel-heading-text {
         float: left;
         padding-left: 20px;

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-info-drawer-theme($theme) {
+@mixin adf-info-drawer-theme($theme) {
     $primary: map-get($theme, primary);
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss

@@ -1,5 +1,5 @@
 
-@mixin mat-pagination-theme($theme) {
+@mixin adf-pagination-theme($theme) {
     $foreground: map-get($theme, foreground);
 
     $adf-pagination--height: 48px;

ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.scss

@@ -1,5 +1,5 @@
 
-@mixin mat-adf-toolbar-theme($theme) {
+@mixin adf-adf-toolbar-theme($theme) {
     $foreground: map-get($theme, foreground);
     $adf-toolbar-height: 48px;
     $adf-toolbar-font-size: 14px;

ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-card-view-dateitem-theme($theme) {
+@mixin adf-card-view-dateitem-theme($theme) {
 
     .adf {
         &-invisible-date-input {

ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-card-view-textitem-theme($theme) {
+@mixin adf-card-view-textitem-theme($theme) {
 
     .adf {
         &-textitem-icon {

ng2-components/ng2-alfresco-core/src/components/view/card-view.component.scss

@@ -1,5 +1,5 @@
 
-@mixin mat-card-view-theme($theme) {
+@mixin adf-card-view-theme($theme) {
 
     .adf {
         &-property-list {

ng2-components/ng2-alfresco-core/styles/_default-class.scss

@@ -0,0 +1,14 @@
+@mixin adf-default-class($theme) {
+
+    .adf-hide-small {
+        @media screen and ($mat-small) {
+            display: none !important;
+        }
+    }
+
+    .adf-hide-xsmall {
+        @media screen and ($mat-xsmall) {
+            display: none !important;
+        }
+    }
+}

ng2-components/ng2-alfresco-core/styles/_index.scss

@@ -1,4 +1,5 @@
 @import './theme-colors';
+@import './default-class';
 @import '../src/components/collapsable/accordion-group.component';
 @import '../src/components/view/card-view-textitem.component';
 @import '../src/components/view/card-view-dateitem.component';
@@ -8,12 +9,13 @@
 @import '../src/components/info-drawer/info-drawer-layout.component';
 
 @mixin alfresco-core-theme($theme) {
-    @include mat-accordion-theme($theme);
-    @include mat-card-view-textitem-theme($theme);
-    @include mat-card-view-dateitem-theme($theme);
-    @include mat-card-view-theme($theme);
-    @include mat-adf-toolbar-theme($theme);
-    @include mat-info-drawer-theme($theme);
-    @include mat-pagination-theme($theme);
-    @include mat-colors-theme($theme);
+    @include adf-accordion-theme($theme);
+    @include adf-card-view-textitem-theme($theme);
+    @include adf-card-view-dateitem-theme($theme);
+    @include adf-card-view-theme($theme);
+    @include adf-adf-toolbar-theme($theme);
+    @include adf-info-drawer-theme($theme);
+    @include adf-pagination-theme($theme);
+    @include adf-colors-theme($theme);
+    @include adf-default-class($theme);
 }

ng2-components/ng2-alfresco-core/styles/_theme-colors.scss

@@ -1,4 +1,4 @@
-@mixin mat-colors-theme($theme) {
+@mixin adf-colors-theme($theme) {
 
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
@@ -18,7 +18,7 @@
         color: mat-color($warn) !important;
     }
 
-    .adf-background-color {
+    .adf-dialog-background-color {
         background: mat-color($background, dialog) !important;
     }
 

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

@@ -1,5 +1,5 @@
 
-@mixin mat-datatable-theme($theme) {
+@mixin adf-datatable-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
     $primary: map-get($theme, primary);

ng2-components/ng2-alfresco-datatable/styles/index.scss

@@ -1,5 +1,5 @@
 @import '../src/components/datatable/datatable.component';
 
 @mixin alfresco-datatable-theme($theme) {
-    @include mat-datatable-theme($theme);
+    @include adf-datatable-theme($theme);
 }

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.scss

@@ -1,6 +1,6 @@
 $breadcrumb-chevron-spacer: 2px;
 
-@mixin mat-breadcrumb-theme($theme) {
+@mixin adf-breadcrumb-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/dropdown-breadcrumb.component.scss

@@ -1,5 +1,5 @@
 
-@mixin mat-breadcrumb-dropdown-theme($theme) {
+@mixin adf-breadcrumb-dropdown-theme($theme) {
     $primary: map-get($theme, primary);
     $dropdownHorizontalOffset: 30px;
 

ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-content-node-selector-theme($theme) {
+@mixin adf-content-node-selector-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
 

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-document-list-theme($theme) {
+@mixin adf-document-list-theme($theme) {
     $foreground: map-get($theme, foreground);
 
     .document-list_empty_template {

ng2-components/ng2-alfresco-documentlist/styles/index.scss

@@ -4,8 +4,8 @@
 @import '../src/components/document-list.component';
 
 @mixin alfresco-documentlist-theme($theme) {
-    @include mat-breadcrumb-theme($theme);
-    @include mat-breadcrumb-dropdown-theme($theme);
-    @include mat-content-node-selector-theme($theme) ;
-    @include mat-document-list-theme($theme) ;
+    @include adf-breadcrumb-theme($theme);
+    @include adf-breadcrumb-dropdown-theme($theme);
+    @include adf-content-node-selector-theme($theme) ;
+    @include adf-document-list-theme($theme) ;
 }

ng2-components/ng2-alfresco-login/src/components/login.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-login-theme($theme) {
+@mixin adf-login-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

ng2-components/ng2-alfresco-login/styles/index.scss

@@ -1,5 +1,5 @@
 @import '../src/components/login.component';
 
 @mixin alfresco-login-theme($theme) {
-    @include mat-login-theme($theme);
+    @include adf-login-theme($theme);
 }

ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-search-autocomplete-theme($theme) {
+@mixin adf-search-autocomplete-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

ng2-components/ng2-alfresco-search/src/components/search-control.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-search-control-theme($theme) {
+@mixin adf-search-control-theme($theme) {
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 

ng2-components/ng2-alfresco-search/styles/index.scss

@@ -2,6 +2,6 @@
 @import '../src/components/search-control.component';
 
 @mixin alfresco-search-theme($theme) {
-    @include mat-search-control-theme($theme);
-    @include mat-search-autocomplete-theme($theme);
+    @include adf-search-control-theme($theme);
+    @include adf-search-autocomplete-theme($theme);
 }

ng2-components/ng2-alfresco-upload/src/components/file-uploading-dialog.component.scss

@@ -1,5 +1,5 @@
 
-@mixin mat-upload-dialog-theme($theme) {
+@mixin adf-upload-dialog-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 

ng2-components/ng2-alfresco-upload/src/components/file-uploading-list-row.component.scss

@@ -1,5 +1,5 @@
 
-@mixin mat-file-uploading-row-theme($theme) {
+@mixin adf-file-uploading-row-theme($theme) {
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
     $primary: map-get($theme, primary);

ng2-components/ng2-alfresco-upload/styles/index.scss

@@ -2,6 +2,6 @@
 @import '../src/components/file-uploading-dialog.component';
 
 @mixin alfresco-upload-theme($theme) {
-    @include mat-file-uploading-row-theme($theme);
-    @include mat-upload-dialog-theme($theme);
+    @include adf-file-uploading-row-theme($theme);
+    @include adf-upload-dialog-theme($theme);
 }

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html

@@ -26,11 +26,11 @@
     <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY" [overlapTrigger]="false" class="adf-userinfo-menu">
         <mat-tab-group id="tab-group-env" (click)="stopClosing($event)"
             class="adf-userinfo-tab" [class.adf-hide-tab]="!bpmUser || !ecmUser">
-            <mat-tab id="ecm-panel" label="Content Services" *ngIf="ecmUser">
+            <mat-tab id="ecm-panel" label="{{ 'USER_PROFILE.TAB.CS' | translate }}" *ngIf="ecmUser">
                 <mat-card class="adf-userinfo-card">
                     <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + ecmBackgroundImage + ')'">
-                        <div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials'"></div>
-                        <div *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container">
+                        <div [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                        <div  *ngIf="ecmUser.avatarId" class="adf-userinfo-profile-container adf-hide-small">
                             <img class="adf-userinfo-profile-picture" id="ecm-user-detail-image"
                                 alt="ecm-profile-image" [src]="ecmUserImage" />
                         </div>
@@ -52,11 +52,11 @@
                     </mat-card-content>
                 </mat-card>
             </mat-tab>
-            <mat-tab label="Process Services" id="bpm-panel" *ngIf="bpmUser">
+            <mat-tab id="bpm-panel" label="{{ 'USER_PROFILE.TAB.PS' | translate }}" *ngIf="bpmUser">
             <mat-card class="adf-userinfo-card">
                 <mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                    <div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials'"></div>
-                        <img *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-picture" id="bpm-user-detail-image"
+                    <div [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
+                    <img *ngIf="bpmUser.pictureId" class="adf-userinfo-profile-picture adf-hide-small" id="bpm-user-detail-image"
                             alt="bpm-profile-image" [src]="bpmUserImage"/>
                    <div class="adf-userinfo-title" id="bpm-username">{{bpmUser.fullNameDisplay}}</div>
                 </mat-card-header>

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.scss

@@ -1,4 +1,4 @@
-@mixin mat-userinfo-theme($theme) {
+@mixin adf-userinfo-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);
@@ -145,6 +145,7 @@
         }
 
         &-userinfo-profile-initials {
+            text-transform: uppercase;
             background-size: cover;
             background: mat-color($primary, 300);
             border-radius: 50%;
@@ -180,6 +181,7 @@
     @media only screen and (min-device-width: 480px) {
         .mat-menu-panel.adf-userinfo-menu {
             max-height: 450px;
+            min-width: 4500px;
             min-width: 450px;
             overflow: auto;
             padding: 0;

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts

@@ -59,9 +59,6 @@ export class UserInfoComponent implements OnInit {
     constructor(private ecmUserService: EcmUserService,
                 private bpmUserService: BpmUserService,
                 private authService: AlfrescoAuthenticationService) {
-        authService.onLogin.subscribe((response) => {
-            this.getUserInfo();
-        });
     }
 
     ngOnInit() {
@@ -69,15 +66,15 @@ export class UserInfoComponent implements OnInit {
     }
 
     getUserInfo() {
-        this.getEcmUserInfo();
-        this.getBpmUserInfo();
+        this.loadEcmUserInfo();
+        this.loadBpmUserInfo();
     }
 
     isLoggedIn() {
         return this.authService.isLoggedIn();
     }
 
-    getEcmUserInfo(): void {
+    loadEcmUserInfo(): void {
         if (this.authService.isEcmLoggedIn()) {
             this.ecmUserService.getCurrentUserInfo()
                 .subscribe((res) => {
@@ -91,7 +88,7 @@ export class UserInfoComponent implements OnInit {
         }
     }
 
-    getBpmUserInfo(): void {
+    loadBpmUserInfo(): void {
         if (this.authService.isBpmLoggedIn()) {
             this.bpmUserService.getCurrentUserInfo()
                 .subscribe((res) => {

ng2-components/ng2-alfresco-userinfo/src/i18n/en.json

@@ -7,6 +7,10 @@
             "BPM": {
                 "TENANT": "Tenant"
             }
+        },
+        "TAB" : {
+            "CS": "Content Services",
+            "PS": "Process Services"
         }
     }
 }

ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts

@@ -39,7 +39,7 @@ export class EcmUserService {
      * @param userName - the user name
      */
     getUserInfo(userName: string): Observable<EcmUserModel> {
-        return Observable.fromPromise(this.callApiGetPersonInfo(userName))
+        return Observable.fromPromise(this.apiService.getInstance().core.peopleApi.getPerson(userName))
             .map(data => <EcmUserModel> data['entry'])
             .catch(err => this.handleError(err));
     }
@@ -48,10 +48,6 @@ export class EcmUserService {
         return this.getUserInfo('-me-');
     }
 
-    private callApiGetPersonInfo(userName: string, opts?: any) {
-        return this.apiService.getInstance().core.peopleApi.getPerson(userName, opts);
-    }
-
     getUserProfileImage(avatarId: string) {
         if (avatarId) {
             let nodeObj = {entry: {id: avatarId}};

ng2-components/ng2-alfresco-userinfo/styles/index.scss

@@ -1,5 +1,5 @@
 @import '../src/components/user-info.component';
 
 @mixin alfresco-userinfo-theme($theme) {
-    @include mat-userinfo-theme($theme);
+    @include adf-userinfo-theme($theme);
 }