[ADF-1502] Fixes for AoT checks in Angular CLI (#2282)

* Fixes for AoT checks in Angular CLI

* login fixes

- aot compatibility
- fix copyright symbol
- fix toggling password (operates within the component instead of the whole document)
- remove old MDL calls on error style check

* Search fixes

* login test fixes

* form fixes

- add WidgetComponent to the module
- remove missing 'focus' property from Hyperlink widget template/style

* task-list fixes

* process-list fixes

* analytics fixes

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

@@ -10,35 +10,45 @@
             <md-grid-list cols="2" rowHeight="80px">
                 <md-grid-tile>
                     <md-input-container>
-                        <input mdInput
+                        <input
-                               [min]="minDate"
+                            mdInput
-                               [max]="maxDate"
+                            [min]="minDate"
-                        formControlName="startDate"
+                            [max]="maxDate"
-                        [mdDatepicker]="startDatePicker"
+                            formControlName="startDate"
-                        [value]="startDatePicker"
+                            [mdDatepicker]="startDatePicker"
-                        (keydown)="true"
+                            [value]="startDatePicker"
-                        placeholder="{{'DATE-WIDGET.START-DATE' | translate}}"
+                            (keydown)="true"
-                        id="startDate_id"
+                            placeholder="{{'DATE-WIDGET.START-DATE' | translate}}"
-                        required>
+                            id="startDate_id"
+                            required>
                         <button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
                     </md-input-container>
-                    <md-datepicker #startDatePicker [touchUi]="true" [startAt]="startAt" (selectedChanged)="onGroupValueChanged($event)"></md-datepicker>
+                    <md-datepicker
+                        #startDatePicker
+                        [touchUi]="true"
+                        (selectedChanged)="onGroupValueChanged()">
+                    </md-datepicker>
                 </md-grid-tile>
                 <md-grid-tile>
                     <md-input-container class="adf-start-task-input-container">
-                        <input mdInput
+                        <input
-                               [min]="minDate"
+                            mdInput
-                               [max]="maxDate"
+                            [min]="minDate"
-                        formControlName="endDate"
+                            [max]="maxDate"
-                        [mdDatepicker]="endDatePicker"
+                            formControlName="endDate"
-                        [value]="endDatePicker"
+                            [mdDatepicker]="endDatePicker"
-                        (keydown)="true"
+                            [value]="endDatePicker"
-                        placeholder="{{'DATE-WIDGET.END-DATE' | translate}}"
+                            (keydown)="true"
-                        id="endDate_id"
+                            placeholder="{{'DATE-WIDGET.END-DATE' | translate}}"
-                        required>
+                            id="endDate_id"
+                            required>
                         <button mdSuffix [mdDatepickerToggle]="endDatePicker"></button>
                     </md-input-container>
-                    <md-datepicker #endDatePicker [touchUi]="true" [startAt]="startAt" (selectedChanged)="onGroupValueChanged($event)"></md-datepicker>
+                    <md-datepicker
+                        #endDatePicker
+                        [touchUi]="true"
+                        (selectedChanged)="onGroupValueChanged()">
+                    </md-datepicker>
                 </md-grid-tile>
             </md-grid-list>
 </div>

ng2-components/ng2-activiti-form/index.ts

@@ -26,6 +26,7 @@ import { MaterialModule } from './src/components/material.module';
 import { StartFormComponent } from './src/components/start-form.component';
 import { ContentWidgetComponent } from './src/components/widgets/content/content.widget';
 import { MASK_DIRECTIVE, WIDGET_DIRECTIVES } from './src/components/widgets/index';
+import { WidgetComponent } from './src/components/widgets/widget.component';
 import { ActivitiAlfrescoContentService } from './src/services/activiti-alfresco.service';
 import { ActivitiContentService } from './src/services/activiti-content-service';
 import { EcmModelService } from './src/services/ecm-model.service';
@@ -90,7 +91,8 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
     declarations: [
         ...ACTIVITI_FORM_DIRECTIVES,
         ...DEPRECATED_FORM_DIRECTIVES,
-        ...MASK_DIRECTIVE
+        ...MASK_DIRECTIVE,
+        WidgetComponent
     ],
     entryComponents: [
         ...WIDGET_DIRECTIVES

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

@@ -1,5 +1,5 @@
 <div class="adf-hyperlink-widget {{field.className}}">
-    <label class="adf-label" [attr.for]="field.id" [class.focus]="focus" >{{field.name}}<span *ngIf="isRequired()">*</span></label>
+    <label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
     <div>
         <a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
     </div>

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

@@ -5,10 +5,6 @@
         padding: 0.4375em 0;
         border-top: 0.84375em solid transparent;
 
-        .focus {
-            color: mat-color($primary);
-        }
-
         a {
             color: mat-color($primary);
         }

ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.ts

@@ -19,6 +19,8 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from
 import { ActivitiContentService } from 'ng2-activiti-form';
 import { ContentService, ThumbnailService } from 'ng2-alfresco-core';
 
+declare var require: any;
+
 @Component({
     selector: 'adf-process-attachment-list',
     styleUrls: ['./process-attachment-list.component.scss'],

ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.html

@@ -37,7 +37,7 @@
     <div class="mdl-dialog__content">
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
             <label class="mdl-textfield__label" for="addVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="addVariableName" [readonly]="editMode" />
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="addVariableName" />
         </div>
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
             <label class="mdl-textfield__label" for="addVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>

ng2-components/ng2-activiti-processlist/src/services/process.service.ts

@@ -113,7 +113,7 @@ export class ProcessService extends TaskListService {
      * @param appId
      * @returns {FilterProcessRepresentationModel[]}
      */
-    public createDefaultFilters(appId: string): Observable<FilterProcessRepresentationModel[]> {
+    public createDefaultFilters(appId: string): Observable<any[]> {
         let runnintFilter = this.getRunningFilterInstance(appId);
         let runnintObservable = this.addProcessFilter(runnintFilter);
 

ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.ts

@@ -19,6 +19,8 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from
 import { ActivitiContentService } from 'ng2-activiti-form';
 import { ContentService, ThumbnailService } from 'ng2-alfresco-core';
 
+declare var require: any;
+
 @Component({
     selector: 'adf-task-attachment-list',
     styleUrls: ['./task-attachment-list.component.scss'],

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

@@ -20,7 +20,7 @@
         </i>
     </li>
 </div>
-<div *ngIf="!folderNode && root">
+<div *ngIf="!folderNode && hasRoot">
     <li class="adf-breadcrumb-item">
         <div class="adf-breadcrumb-item-current">
             {{ root }}

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

@@ -41,6 +41,10 @@ export class BreadcrumbComponent implements OnChanges {
 
     route: PathElementEntity[] = [];
 
+    get hasRoot(): boolean {
+        return !!this.root;
+    }
+
     @Output()
     navigate: EventEmitter<PathElementEntity> = new EventEmitter<PathElementEntity>();
 

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

@@ -49,14 +49,13 @@
                     [node]="nodes"
                     [rowFilter]="rowFilter"
                     [imageResolver]="imageResolver"
-                    [permissionsStyle]="permissionsStyle"
                     [currentFolderId]="folderIdToShow"
-                    [selectionMode]="'single'"
+                    selectionMode="single"
                     [contextMenuActions]="false"
                     [contentActions]="false"
                     [allowDropFiles]="false"
                     [enablePagination]="!showingSearchResults"
-                    (folderChange)="onFolderChange($event)"
+                    (folderChange)="onFolderChange()"
                     (ready)="onFolderLoaded()"
                     data-automation-id="content-node-selector-document-list">
             <empty-folder-content>

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

@@ -16,12 +16,12 @@
  */
 
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { MdCheckboxModule, MdIconModule, MdInputModule, MdProgressSpinnerModule } from '@angular/material';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 
 import { LoginComponent } from './src/components/login.component';
 import { LoginFooterDirective } from './src/directives/login-footer.directive';
 import { LoginHeaderDirective } from './src/directives/login-header.directive';
+import { MaterialModule } from './src/material.module';
 
 export { LoginHeaderDirective } from './src/directives/login-header.directive';
 export { LoginFooterDirective } from './src/directives/login-footer.directive';
@@ -43,10 +43,7 @@ export const ALFRESCO_LOGIN_DIRECTIVES: any[] = [
 @NgModule({
     imports: [
         CoreModule,
-        MdInputModule,
+        MaterialModule
-        MdIconModule,
-        MdCheckboxModule,
-        MdProgressSpinnerModule
     ],
     declarations: [
         ...ALFRESCO_LOGIN_DIRECTIVES
@@ -63,9 +60,7 @@ export const ALFRESCO_LOGIN_DIRECTIVES: any[] = [
     ],
     exports: [
         ...ALFRESCO_LOGIN_DIRECTIVES,
-        MdInputModule,
+        MaterialModule
-        MdIconModule,
-        MdCheckboxModule
     ]
 })
 export class LoginModule {

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

@@ -1,7 +1,7 @@
 <div class="adf-login-content"
      [style.background-image]="'url(' + backgroundImageUrl + ')'">
     <md-card class="adf-login-card-wide">
-        <form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
+        <form [formGroup]="form" (submit)="onSubmit(form.value)">
 
             <md-card-header>
                 <md-card-title>

ng2-components/ng2-alfresco-login/src/components/login.component.spec.ts

@@ -161,7 +161,7 @@ describe('AlfrescoLogin', () => {
 
         it('should render the default copyright text', () => {
             expect(element.querySelector('[data-automation-id="login-copyright"]')).toBeDefined();
-            expect(element.querySelector('[data-automation-id="login-copyright"]').innerText).toEqual('© 2016 Alfresco Software, Inc. All Rights Reserved.');
+            expect(element.querySelector('[data-automation-id="login-copyright"]').innerText).toEqual('© 2016 Alfresco Software, Inc. All Rights Reserved.');
         });
 
         it('should render the customised copyright text', () => {

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

@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AlfrescoAuthenticationService, AlfrescoSettingsService, AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
 import { FormSubmitEvent } from '../models/form-submit-event.model';
 
-declare let componentHandler: any;
 declare var require: any;
 
 enum LoginSteps {
@@ -59,7 +58,7 @@ export class LoginComponent implements OnInit {
     backgroundImageUrl: string = require('../assets/images/background.svg');
 
     @Input()
-    copyrightText: string = '© 2016 Alfresco Software, Inc. All Rights Reserved.';
+    copyrightText: string = '© 2016 Alfresco Software, Inc. All Rights Reserved.';
 
     @Input()
     providers: string;
@@ -105,7 +104,8 @@ export class LoginComponent implements OnInit {
                 private authService: AlfrescoAuthenticationService,
                 private settingsService: AlfrescoSettingsService,
                 private translateService: AlfrescoTranslationService,
-                private logService: LogService) {
+                private logService: LogService,
+                private elementRef: ElementRef) {
         this.initFormError();
         this.initFormFieldsMessages();
     }
@@ -258,11 +258,7 @@ export class LoginComponent implements OnInit {
      */
     toggleShowPassword() {
         this.isPasswordShow = !this.isPasswordShow;
-        if (this.isPasswordShow) {
+        this.elementRef.nativeElement.querySelector('#password').type = this.isPasswordShow ? 'text' : 'password';
-            (<HTMLInputElement> document.getElementById('password')).type = 'text';
-        } else {
-            (<HTMLInputElement> document.getElementById('password')).type = 'password';
-        }
     }
 
     /**
@@ -270,10 +266,7 @@ export class LoginComponent implements OnInit {
      * @param field
      * @returns {boolean}
      */
-    isErrorStyle(field: FormGroup) {
+    isErrorStyle(field: AbstractControl) {
-        if (typeof componentHandler !== 'undefined') {
-            componentHandler.upgradeAllRegistered();
-        }
         return !field.valid && field.dirty && !field.pristine;
     }
 

ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.spec.ts

@@ -15,29 +15,40 @@
  * limitations under the License.
  */
 
-import { Injector } from '@angular/core';
+import { async, TestBed } from '@angular/core/testing';
-import { getTestBed, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
+import { MaterialModule } from '../material.module';
+
 import { LoginComponent } from '../components/login.component';
 import { LoginFooterDirective } from './login-footer.directive';
 
 describe('LoginFooterDirective', () => {
-    let injector: Injector;
+    let component: LoginComponent;
-    let loginFooterDirective: LoginFooterDirective;
+    let directive: LoginFooterDirective;
 
-    beforeEach(() => {
+    beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [CoreModule.forRoot()],
+            imports: [
-            providers: [
+                CoreModule,
+                MaterialModule
+            ],
+            declarations: [
                 LoginFooterDirective,
                 LoginComponent
             ]
-        });
+        }).compileComponents();
-        injector = getTestBed();
+    }));
-        loginFooterDirective = injector.get(LoginFooterDirective);
+
+    beforeEach(() => {
+        let fixture = TestBed.createComponent(LoginComponent);
+        component = fixture.componentInstance;
+        directive = new LoginFooterDirective(component);
     });
 
-    it('is defined', () => {
+    it('applies tempalate to Login component', () => {
-        expect(loginFooterDirective).toBeDefined();
+        const template = {};
+        directive.template = template;
+        directive.ngAfterContentInit();
+        expect(component.footerTemplate).toBe(template);
     });
 });

ng2-components/ng2-alfresco-login/src/directives/login-header.directive.spec.ts

@@ -15,29 +15,40 @@
  * limitations under the License.
  */
 
-import { Injector } from '@angular/core';
+import { async, TestBed } from '@angular/core/testing';
-import { getTestBed, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
+import { MaterialModule } from '../material.module';
+
 import { LoginComponent } from '../components/login.component';
 import { LoginHeaderDirective } from './login-header.directive';
 
 describe('LoginHeaderDirective', () => {
-    let injector: Injector;
+    let component: LoginComponent;
-    let loginHeaderDirective: LoginHeaderDirective;
+    let directive: LoginHeaderDirective;
 
-    beforeEach(() => {
+    beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [CoreModule.forRoot()],
+            imports: [
-            providers: [
+                CoreModule,
+                MaterialModule
+            ],
+            declarations: [
                 LoginHeaderDirective,
                 LoginComponent
             ]
-        });
+        }).compileComponents();
-        injector = getTestBed();
+    }));
-        loginHeaderDirective = injector.get(LoginHeaderDirective);
+
+    beforeEach(() => {
+        let fixture = TestBed.createComponent(LoginComponent);
+        component = fixture.componentInstance;
+        directive = new LoginHeaderDirective(component);
     });
 
-    it('is defined', () => {
+    it('applies tempalate to Login component', () => {
-        expect(loginHeaderDirective).toBeDefined();
+        const template = {};
+        directive.template = template;
+        directive.ngAfterContentInit();
+        expect(component.headerTemplate).toBe(template);
     });
 });

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

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

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

@@ -59,7 +59,7 @@ export const ALFRESCO_SEARCH_PROVIDERS: [any] = [
 
 @NgModule({
     imports: [
-        DocumentListModule.forRoot(),
+        DocumentListModule,
         CoreModule,
         FormsModule,
         ReactiveFormsModule

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

@@ -4,33 +4,37 @@
             <i mdl-upgrade class="material-icons">search</i>
         </label>
         <div [class]="getTextFieldHolderClassName()">
-            <input mdl
+            <input
-                   class="mdl-textfield__input"
+                mdl
-                   [type]="inputType"
+                class="mdl-textfield__input"
-                   [autocomplete]="getAutoComplete()"
+                [type]="inputType"
-                   data-automation-id="search_input"
+                [autocomplete]="getAutoComplete()"
-                   #searchInput
+                data-automation-id="search_input"
-                   id="searchControl"
+                #searchInput
-                   [formControl]="searchControl"
+                id="searchControl"
-                   [(ngModel)]="searchTerm"
+                [formControl]="searchControl"
-                   (focus)="onFocus($event)"
+                [(ngModel)]="searchTerm"
-                   (blur)="onBlur($event)"
+                (focus)="onFocus($event)"
-                   (keyup.escape)="onEscape($event)"
+                (blur)="onBlur($event)"
-                   (keyup.arrowdown)="onArrowDown($event)"
+                (keyup.escape)="onEscape()"
-                   aria-labelledby="searchLabel">
+                (keyup.arrowdown)="onArrowDown()"
+                aria-labelledby="searchLabel">
             <label id="searchLabel" class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
         </div>
     </div>
 </form>
-<adf-search-autocomplete #autocomplete *ngIf="liveSearchEnabled"
+<adf-search-autocomplete
-                              [searchTerm]="liveSearchTerm"
+    #autocomplete
-                              [rootNodeId]="liveSearchRoot"
+    *ngIf="liveSearchEnabled"
-                              [resultType]="liveSearchResultType"
+    [searchTerm]="liveSearchTerm"
-                              [resultSort]="liveSearchResultSort"
+    [rootNodeId]="liveSearchRoot"
-                              [maxResults]="liveSearchMaxResults"
+    [resultType]="liveSearchResultType"
-                              [highlight]="highlight"
+    [resultSort]="liveSearchResultSort"
-                              [ngClass]="{active: searchActive, valid: searchValid}"
+    [maxResults]="liveSearchMaxResults"
-                              (fileSelect)="onFileClicked($event)"
+    [highlight]="highlight"
-                              (searchFocus)="onAutoCompleteFocus($event)"
+    [ngClass]="{active: searchActive, valid: searchValid}"
-                              (scrollBack)="onAutoCompleteReturn($event)"
+    (fileSelect)="onFileClicked($event)"
-                              (cancel)="onAutoCompleteCancel($event)"></adf-search-autocomplete>
+    (searchFocus)="onAutoCompleteFocus($event)"
+    (scrollBack)="onAutoCompleteReturn($event)"
+    (cancel)="onAutoCompleteCancel($event)">
+</adf-search-autocomplete>

ng2-components/ng2-alfresco-search/src/components/search.component.ts

@@ -21,6 +21,8 @@ import { NodePaging, Pagination } from 'alfresco-js-api';
 import { AlfrescoTranslationService, NotificationService, SearchOptions, SearchService } from 'ng2-alfresco-core';
 import { PermissionModel } from 'ng2-alfresco-documentlist';
 
+declare var require: any;
+
 @Component({
     selector: 'adf-search, alfresco-search',
     styleUrls: ['./search.component.scss'],