[ADF-852] Form style Material 2 (#2151)

* mdl2 transition part form 1

* hyperlink

* radio buttons

* label

* people component

* [ADF-852] moved textarea to new angular material

* number widget

* change error multiline

* [ADF-852] added md desgin for dropdown

* [ADF-852] removed unused css file

* functional widget

* error dropdown

* [ADF-852] - changed to new md date

* remove md-date-time-picker dependency in ng2-alfresco-from

* [ADF-852] conversion dynamic table phase 1

* container widget

* remove test unused

* validation change

* [ADF-852] convert dynamic table phase 2

* [ADF-852] improving style and fixing bugs

* move custom style for form in form.scss

* error footer refactor

* fix models and test

* [ADF-852]- fixed minor twitch on dynamic table

* align fields and fix tests dropdown

* disabling button in readonly
clean mdl form start process form

* align dropdown

* [ADF-1048] Upload widget can manage multiple files. (#2134)

* [ADF-1048] improving upload widget

* [ADF-1048] added ability to upload multiple file on upload widget

* [ADF-1048] added multiple upload elements on upload widget

* [ADF-1048] - show all the files on the completed form

* [ADF-1048] fixed wrong selecion on displya upload

* [ADF-1048] removed fdescribe from upload widget

* date validation and custom moment data adapter

* move content widget in the widget folder

* add style fields and theming

* color primary radio and checkbox

* fix amount widget and colors

* change ViewEncapsulation and fix date style button issue

* empty form customization 1736

* focus label style

* [ADF-224] fix the rendering of custom stencils when form is opened in readonly state. (#2161)

* [ADF-224] Fixed rendering of custom stencil in readonly mode

* [ADF-224] improved variable name

* test fix

* container filter in form model creation

* show display value correctly

* fix change date and test

* fix date editor and add some test coverage for date

* style minor issue

* fix new unused local import rule

* fix test date

* strict date check

* fix analytics failing test

* restore null as default in model

* unify model diagrams and analytics

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

@@ -37,9 +37,6 @@ export * from './src/components/analytics-report-parameters.component';
 export * from './src/services/analytics.service';
 export * from './src/components/widgets/index';
 
-// exporting models
-export * from './src/models/index';
-
 export const ANALYTICS_DIRECTIVES: any[] = [
     AnalyticsComponent,
     AnalyticsReportListComponent,

ng2-components/ng2-activiti-analytics/src/assets/analyticsParamsReportComponent.mock.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ReportParameterDetailsModel } from '../models/report.model';
+import { ReportParameterDetailsModel } from 'ng2-activiti-diagrams';
 
 export let reportDefParamStatus = {
     'id': 2005,

ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts

@@ -23,14 +23,14 @@ import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { ChartsModule } from 'ng2-charts';
 import { Observable } from 'rxjs/Rx';
 
+import { Chart } from 'ng2-activiti-diagrams';
+import { ReportQuery } from 'ng2-activiti-diagrams';
 import * as analyticMock from '../assets/analyticsComponent.mock';
 import { AnalyticsGeneratorComponent } from '../components/analytics-generator.component';
 import { AnalyticsReportHeatMapComponent } from '../components/analytics-report-heat-map.component';
 import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
 import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
 import { WIDGET_DIRECTIVES } from '../components/widgets/index';
-import { Chart } from '../models/chart.model';
-import { ReportQuery } from '../models/report.model';
 import { AnalyticsService } from '../services/analytics.service';
 
 export const ANALYTICS_DIRECTIVES: any[] = [

ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts

@@ -16,9 +16,9 @@
  */
 
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ReportQuery } from 'ng2-activiti-diagrams';
+import { Chart } from 'ng2-activiti-diagrams';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
-import { Chart } from '../models/chart.model';
-import { ReportQuery } from '../models/report.model';
 import { AnalyticsService } from '../services/analytics.service';
 
 @Component({

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts

@@ -17,10 +17,10 @@
 
 import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReportParametersModel } from 'ng2-activiti-diagrams';
 import { AlfrescoTranslationService, AppConfigModule, CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
 import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
-import { ReportParametersModel } from '../models/report.model';
 import { AnalyticsService } from '../services/analytics.service';
 
 declare let jasmine: any;

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

@@ -16,8 +16,8 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ReportParametersModel } from 'ng2-activiti-diagrams';
 import { Observable, Observer } from 'rxjs/Rx';
-import { ReportParametersModel } from '../models/report.model';
 import { AnalyticsService } from '../services/analytics.service';
 
 @Component({

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts

@@ -22,10 +22,10 @@ import * as moment from 'moment';
 import { AlfrescoTranslationService, AppConfigModule, CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
 
+import { ReportParametersModel } from 'ng2-activiti-diagrams';
 import * as analyticParamsMock from '../assets/analyticsParamsReportComponent.mock';
 import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
 import { WIDGET_DIRECTIVES } from '../components/widgets/index';
-import { ReportParametersModel } from '../models/report.model';
 import { AnalyticsService } from '../services/analytics.service';
 
 declare let jasmine: any;
@@ -210,6 +210,7 @@ describe('AnalyticsReportParametersComponent', () => {
                     typeFiltering: true
                 }
             };
+
             component.submit(values);
         });
 

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts

@@ -30,13 +30,13 @@ import {
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import * as moment from 'moment';
-import { AlfrescoTranslationService, ContentService, LogService } from 'ng2-alfresco-core';
 import {
     ParameterValueModel,
     ReportParameterDetailsModel,
     ReportParametersModel,
     ReportQuery
-} from '../models/report.model';
+} from 'ng2-activiti-diagrams';
+import { AlfrescoTranslationService, ContentService, LogService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../services/analytics.service';
 
 declare var componentHandler;

ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts

@@ -16,8 +16,8 @@
  */
 
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { ReportQuery } from 'ng2-activiti-diagrams';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
-import { ReportQuery } from '../models/report.model';
 import { AnalyticsGeneratorComponent } from './analytics-generator.component';
 
 @Component({

ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts

@@ -20,7 +20,7 @@
 /* tslint:disable::no-access-missing-member */
 import { Component, ElementRef, Input, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { ParameterValueModel, ReportParameterDetailsModel } from './../../../models/report.model';
+import { ParameterValueModel, ReportParameterDetailsModel } from 'ng2-activiti-diagrams';
 import { NumberWidgetComponent } from './../number/number.widget';
 
 @Component({

ng2-components/ng2-activiti-analytics/src/models/chart.model.ts

@@ -1,307 +0,0 @@
-/*!
- * @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 * as moment from 'moment';
-
-export class Chart {
-    id: string;
-    type: string;
-    icon: string;
-
-    constructor(obj?: any) {
-        this.id = obj && obj.id || null;
-        if (obj && obj.type) {
-            this.type = this.convertType(obj.type);
-            this.icon = this.getIconType(this.type);
-        }
-    }
-
-    private convertType(type: string) {
-        let chartType = '';
-        switch (type) {
-            case 'pieChart':
-                chartType = 'pie';
-                break;
-            case 'table':
-                chartType = 'table';
-                break;
-            case 'line':
-                chartType = 'line';
-                break;
-            case 'barChart':
-                chartType = 'bar';
-                break;
-            case 'multiBarChart':
-                chartType = 'multiBar';
-                break;
-            case 'processDefinitionHeatMap':
-                chartType = 'HeatMap';
-                break;
-           case 'masterDetailTable':
-                chartType = 'masterDetailTable';
-                break;
-            default:
-                chartType = 'table';
-                break;
-        }
-        return chartType;
-    }
-
-    private getIconType(type: string): string {
-        let typeIcon: string = '';
-        switch (type) {
-            case 'pie':
-                typeIcon = 'pie_chart';
-                break;
-            case 'table':
-                typeIcon = 'web';
-                break;
-            case 'line':
-                typeIcon = 'show_chart';
-                break;
-            case 'bar':
-                typeIcon = 'equalizer';
-                break;
-            case 'multiBar':
-                typeIcon = 'poll';
-                break;
-            case 'HeatMap':
-                typeIcon = 'share';
-                break;
-            case 'masterDetailTable':
-                typeIcon = 'subtitles';
-                break;
-            default:
-                typeIcon = 'web';
-                break;
-        }
-        return typeIcon;
-    }
-}
-
-export class LineChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
-    datasets: any[] = [];
-
-    constructor(obj?: any) {
-        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
-        this.labels = obj && obj.columnNames.slice(1, obj.columnNames.length);
-
-        obj.rows.forEach((value: any) => {
-            this.datasets.push({data: value.slice(1, value.length), label: value[0]});
-        });
-    }
-}
-
-export class BarChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: any = [];
-    datasets: any[] = [];
-    data: any[] = [];
-    xAxisType: string;
-    yAxisType: string;
-    options: any = {
-        responsive: true,
-        scales: {
-            yAxes: [{
-                ticks: {
-                    beginAtZero: true,
-                    stepSize: 1
-                }
-            }],
-            xAxes: [{
-                ticks: {
-                },
-                stacked: false
-            }]
-        }
-    };
-
-    constructor(obj?: any) {
-        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
-        this.xAxisType = obj && obj.xAxisType || null;
-        this.yAxisType = obj && obj.yAxisType || null;
-        this.options.scales.xAxes[0].ticks.callback = this.xAxisTickFormatFunction(this.xAxisType);
-        this.options.scales.yAxes[0].ticks.callback = this.yAxisTickFormatFunction(this.yAxisType);
-        if (obj.values) {
-            obj.values.forEach((params: any) => {
-                let dataValue = [];
-                params.values.forEach((info: any) => {
-                    info.forEach((value: any, index: any) => {
-                        if (index % 2 === 0) {
-                            if (!this.labels.includes(value)) {
-                                this.labels.push(value);
-                            }
-                        } else {
-                            dataValue.push(value);
-                        }
-                    });
-                });
-                if (dataValue && dataValue.length > 0) {
-                    this.datasets.push({data: dataValue, label: params.key});
-                }
-            });
-        }
-    }
-
-    xAxisTickFormatFunction = function (xAxisType) {
-        return function (value) {
-            if (xAxisType !== null && xAxisType !== undefined) {
-                if ('date_day' === xAxisType) {
-                    return moment(new Date(value)).format('DD');
-                } else if ('date_month' === xAxisType) {
-                    return moment(new Date(value)).format('MMMM');
-                } else if ('date_year' === xAxisType) {
-                    return moment(new Date(value)).format('YYYY');
-                }
-            }
-            return value;
-        };
-    };
-
-    yAxisTickFormatFunction = function (yAxisType) {
-        return function (value) {
-            if (yAxisType !== null && yAxisType !== undefined) {
-                if ('count' === yAxisType) {
-                    let label = '' + value;
-                    if (label.indexOf('.') !== -1) {
-                        return '';
-                    }
-                }
-            }
-            return value;
-        };
-    };
-
-    hasDatasets() {
-        return this.datasets && this.datasets.length > 0 ? true : false;
-    }
-}
-
-export class MultiBarChart extends BarChart {
-
-    constructor(obj?: any) {
-        super(obj);
-    }
-}
-
-export class TableChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
-    datasets: any[] = [];
-
-    constructor(obj?: any) {
-        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
-        this.labels = obj && obj.columnNames;
-        if (obj.rows) {
-            this.datasets = obj && obj.rows;
-        }
-    }
-
-    hasDatasets() {
-        return this.datasets && this.datasets.length > 0 ? true : false;
-    }
-}
-
-export class DetailsTableChart extends TableChart {
-    detailsTable: any;
-    showDetails: boolean = false;
-
-    constructor(obj?: any) {
-        super(obj);
-        if (obj.detailTables) {
-            this.detailsTable = new TableChart(obj.detailTables[0]);
-        }
-    }
-
-    hasDetailsTable() {
-        return this.detailsTable ? true : false;
-    }
-}
-
-export class HeatMapChart extends Chart {
-    avgTimePercentages: string;
-    avgTimeValues: string;
-    processDefinitionId: string;
-    titleKey: string;
-    totalCountValues: string;
-    totalCountsPercentages: string;
-    totalTimePercentages: string;
-    totalTimeValues: string;
-
-    constructor(obj?: any) {
-        super(obj);
-        this.avgTimePercentages = obj && obj.avgTimePercentages || null;
-        this.avgTimeValues = obj && obj.avgTimeValues || null;
-        this.processDefinitionId = obj && obj.processDefinitionId || null;
-        this.totalCountValues = obj && obj.totalCountValues || null;
-        this.titleKey = obj && obj.titleKey || null;
-        this.totalCountsPercentages = obj && obj.totalCountsPercentages || null;
-        this.totalTimePercentages = obj && obj.totalTimePercentages || null;
-        this.totalTimeValues = obj && obj.totalTimeValues || null;
-    }
-}
-
-export class PieChart extends Chart {
-    title: string;
-    titleKey: string;
-    labels: string[] = [];
-    data: string[] = [];
-
-    constructor(obj?: any) {
-        super(obj);
-        this.title = obj && obj.title || null;
-        this.titleKey = obj && obj.titleKey || null;
-        if (obj.values) {
-            obj.values.forEach((value: any) => {
-                this.add(value.key, value.y);
-            });
-        }
-    }
-
-    add(label: string, data: string) {
-        this.labels.push(label);
-        this.data.push(data);
-    }
-
-    hasData(): boolean {
-        return this.data && this.data.length > 0 ? true : false;
-    }
-
-    hasZeroValues(): boolean {
-        let isZeroValues: boolean = false;
-        if (this.hasData()) {
-            isZeroValues = true;
-            this.data.forEach((value) => {
-                if (value.toString() !== '0') {
-                    isZeroValues = false;
-                }
-            });
-        }
-        return isZeroValues;
-    }
-}

ng2-components/ng2-activiti-analytics/src/models/index.ts

@@ -1,19 +0,0 @@
-/*!
- * @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.
- */
-
-export * from './chart.model';
-export * from './report.model';

ng2-components/ng2-activiti-analytics/src/models/report.model.ts

@@ -1,144 +0,0 @@
-/*!
- * @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.
- */
-
-/**
- *
- * This object represent the report definition.
- *
- *
- * @returns {ReportParametersModel} .
- */
-export class ReportParametersModel {
-    id: number;
-    name: string;
-    definition: ReportDefinitionModel;
-    created: string;
-
-    constructor(obj?: any) {
-        this.id = obj && obj.id;
-        this.name = obj && obj.name || null;
-        if (obj && obj.definition) {
-            this.definition = new ReportDefinitionModel(JSON.parse(obj.definition));
-        }
-        this.created = obj && obj.created || null;
-    }
-
-    hasParameters() {
-        return (this.definition && this.definition.parameters && this.definition.parameters.length > 0) ? true : false;
-    }
-}
-
-export class ReportDefinitionModel {
-    parameters: ReportParameterDetailsModel[] = [];
-
-    constructor(obj?: any) {
-        obj.parameters.forEach((params: any) => {
-            let reportParamsModel = new ReportParameterDetailsModel(params);
-            this.parameters.push(reportParamsModel);
-        });
-    }
-
-    findParam(name: string): ReportParameterDetailsModel {
-        this.parameters.forEach((param) => {
-            return param.type === name ? param : null;
-        });
-        return null;
-    }
-}
-
-/**
- *
- * This object represent the report parameter definition.
- *
- *
- * @returns {ReportParameterDetailsModel} .
- */
-export class ReportParameterDetailsModel {
-    id: string;
-    name: string;
-    nameKey: string;
-    type: string;
-    value: any;
-    options: ParameterValueModel[];
-    dependsOn: string;
-
-    constructor(obj?: any) {
-        this.id = obj && obj.id;
-        this.name = obj && obj.name || null;
-        this.nameKey = obj && obj.nameKey || null;
-        this.type = obj && obj.type || null;
-        this.value = obj && obj.value || null;
-        this.options = obj && obj.options || null;
-        this.dependsOn = obj && obj.dependsOn || null;
-    }
-}
-
-export class ParameterValueModel {
-    id: string;
-    name: string;
-    version: string;
-    value: string;
-
-    constructor(obj?: any) {
-        this.id = obj && obj.id;
-        this.name = obj && obj.name || null;
-        this.value = obj && obj.value || null;
-        this.version = obj && obj.version || null;
-    }
-
-    get label () {
-        return this.version ? `${this.name} (v ${this.version}) ` : this.name;
-    }
-}
-
-export class ReportQuery {
-    reportName: string;
-    processDefinitionId: string;
-    status: string;
-    taskName: string;
-    typeFiltering: boolean;
-    dateRange: ReportDateRange;
-    dateRangeInterval: string;
-    slowProcessInstanceInteger: number;
-    duration: number;
-
-    constructor(obj?: any) {
-        this.reportName = obj && obj.reportName || null;
-        this.processDefinitionId = obj && obj.processDefinitionId || null;
-        this.status = obj && obj.status || null;
-        this.taskName = obj && obj.taskName || null;
-        this.dateRangeInterval = obj && obj.dateRangeInterval || null;
-        this.typeFiltering = obj && obj.typeFiltering || true;
-        this.slowProcessInstanceInteger = obj && obj.slowProcessInstanceInteger || 0;
-        this.duration = obj && obj.duration || 0;
-        this.dateRange = new ReportDateRange(obj);
-    }
-
-}
-
-export class ReportDateRange {
-    startDate: string;
-    endDate: string;
-    rangeId: string;
-
-    constructor(obj?: any) {
-        this.startDate = obj && obj.startDate || null;
-        this.endDate = obj && obj.endDate || null;
-        this.rangeId = obj && obj.rangeId || null;
-    }
-
-}

ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts

@@ -17,8 +17,7 @@
 
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
-import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
-import { Observable } from 'rxjs/Rx';
+import { ParameterValueModel, ReportParametersModel } from 'ng2-activiti-diagrams';
 import {
     BarChart,
     Chart,
@@ -27,8 +26,9 @@ import {
     MultiBarChart,
     PieChart,
     TableChart
-} from '../models/chart.model';
-import { ParameterValueModel, ReportParametersModel } from '../models/report.model';
+} from 'ng2-activiti-diagrams';
+import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
+import { Observable } from 'rxjs/Rx';
 
 @Injectable()
 export class AnalyticsService {