[ADF-3299] and [ADF-3300] upgrade to Angular and Material 6 (#3579)

* upgrade to HttpClient * upgrade to Renderer2 * upgrade Document reference * remove useless test with deprecated ReflectiveInjector * upgrade to latest typescript * upgrade libs * upgrade package scripts * remove rxjs blacklists and duplicate rules * add rxjs compat to help with migration * fix breaking changes * fix breaking changes in material * fix breaking changes (material 6) * upgrade rxjs, ngx-translate and flex layout * update unit tests * restore providers * upgrade deprecated Observable.error * rebase fix first configuration problems * fix style issues commented * fix core build * fix lib template errors * move lib test execution in angular.json * ignore * karma conf files * fix import statement test * single run option * update packages reporter * restore report * increase timeout * improve karma conf test configuration * fix test issues about lint * fix test analytics * fix process service test * content service fix test * fix logout directive test * fix core test * fix build * update node-sass to latest * update angular cli dependencies * improve build script create directorites and move files only if previous command succeded * upgrade individual libs to 6.0 * remove old webpack files * revert sass change * fix type issues fix style issues * fix tslint demo shell issue * fix peerdependencies * fix test e2e BC * package upate * fix style import issue * extract-text-webpack-plugin beta * fix test dist build command * remove alpha js-api * fix tslint issue add banner tslint rule * upload service fix * change BC script * fix test dist script * increase demo shell timeout test * verbose copy * path absolute * fix script bc * fix copy part * fix path warning fix monaco editor * remove duplicate header * remove unused import * fix align and check ago tests * add missing import * fix notification button selector * [ANGULAR6] fixed core tests * fix CS test * fix cs test step 2 * increase travis_wait for dist * fix attachment PS * fix checklist test * use pdf min
2025-07-24 17:32:15 +00:00 · 2018-08-07 11:58:16 +01:00
parent c510ec864d
commit 6b24bfb1d4
371 changed files with 16287 additions and 24504 deletions
--- a/lib/core/form/components/widgets/amount/amount.widget.scss
+++ b/lib/core/form/components/widgets/amount/amount.widget.scss
@@ -31,11 +31,7 @@
    &-amount-widget__container {
        max-width: 100%;

-        .mat-input-placeholder-wrapper {
-            top: -6px !important;
-        }
-
-        .mat-input-placeholder-wrapper {
+        .mat-form-field-label-wrapper {
            top: 0 !important;
            left: 13px;
        }
--- a/lib/core/form/components/widgets/container/container.widget.scss
+++ b/lib/core/form/components/widgets/container/container.widget.scss
@@ -62,7 +62,7 @@
            width: 100%;
        }

-        .mat-input-placeholder-wrapper {
+        .mat-form-field-label-wrapper {
            top: 5px !important;
        }

@@ -79,7 +79,7 @@
                color: mat-color($primary);
            }

-            .mat-input-prefix {
+            .mat-form-field-prefix {
                color: mat-color($primary);
            }
        }
--- a/lib/core/form/components/widgets/content/content.widget.spec.ts
+++ b/lib/core/form/components/widgets/content/content.widget.spec.ts
@@ -19,7 +19,7 @@ import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TranslationService, ContentService } from '../../../../services';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';

 import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../index';
@@ -105,7 +105,7 @@ describe('ContentWidgetComponent', () => {

        it('should load the thumbnail preview of the png image', (done) => {
            let blob = createFakeImageBlob();
-            spyOn(processContentService, 'getFileRawContent').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getFileRawContent').and.returnValue(of(blob));

            component.thumbnailLoaded.subscribe((res) => {
                fixture.detectChanges();
@@ -148,7 +148,7 @@ describe('ContentWidgetComponent', () => {

        it('should load the thumbnail preview of a pdf', (done) => {
            let blob = createFakePdfBlob();
-            spyOn(processContentService, 'getContentThumbnail').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getContentThumbnail').and.returnValue(of(blob));

            component.thumbnailLoaded.subscribe((res) => {
                fixture.detectChanges();
@@ -230,8 +230,8 @@ describe('ContentWidgetComponent', () => {

        it('should open the viewer when the view button is clicked', (done) => {
            let blob = createFakePdfBlob();
-            spyOn(processContentService, 'getContentPreview').and.returnValue(Observable.of(blob));
-            spyOn(processContentService, 'getFileRawContent').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getContentPreview').and.returnValue(of(blob));
+            spyOn(processContentService, 'getFileRawContent').and.returnValue(of(blob));

            component.content = new ContentLinkModel({
                id: 4004,
@@ -264,7 +264,7 @@ describe('ContentWidgetComponent', () => {

        it('should download the pdf when the download button is clicked', () => {
            let blob = createFakePdfBlob();
-            spyOn(processContentService, 'getFileRawContent').and.returnValue(Observable.of(blob));
+            spyOn(processContentService, 'getFileRawContent').and.returnValue(of(blob));
            spyOn(serviceContent, 'downloadBlob').and.callThrough();

            component.content = new ContentLinkModel({
--- a/lib/core/form/components/widgets/content/content.widget.ts
+++ b/lib/core/form/components/widgets/content/content.widget.ts
@@ -18,7 +18,7 @@
 import { ContentService } from '../../../../services/content.service';
 import { LogService } from '../../../../services/log.service';
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../core/content-link.model';
 import { FormService } from './../../../services/form.service';
--- a/lib/core/form/components/widgets/date-time/date-time.widget.scss
+++ b/lib/core/form/components/widgets/date-time/date-time.widget.scss
@@ -4,7 +4,7 @@

    &-date-time-widget {

-        .mat-input-suffix {
+        .mat-form-field-suffix {
            text-align: right;
            position: absolute;
            margin-top: 30px;
--- a/lib/core/form/components/widgets/date/date.widget.scss
+++ b/lib/core/form/components/widgets/date/date.widget.scss
@@ -3,7 +3,7 @@
 .adf {

    &-date-widget {
-        .mat-input-suffix {
+        .mat-form-field-suffix {
            text-align: right;
            position: absolute;
            margin-top: 30px;
--- a/lib/core/form/components/widgets/date/date.widget.spec.ts
+++ b/lib/core/form/components/widgets/date/date.widget.spec.ts
@@ -151,7 +151,7 @@ describe('DateWidgetComponent', () => {
            widget.field = new FormFieldModel(new FormModel(), {
                id: 'date-field-id',
                name: 'date-name',
-                value:  '12-30-9999';
+                value:  '12-30-9999',
                type: 'date',
                readOnly: 'false'
            });
--- a/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts
+++ b/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts
@@ -17,7 +17,7 @@

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
 import { FormFieldOption } from './../core/form-field-option';
@@ -130,7 +130,7 @@ describe('DropdownWidgetComponent', () => {
            beforeEach(async(() => {
                spyOn(visibilityService, 'refreshVisibility').and.stub();
                spyOn(formService, 'getRestFieldValues').and.callFake(() => {
-                    return Observable.of(fakeOptionList);
+                    return of(fakeOptionList);
                });
                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
                    id: 'dropdown-id',
@@ -194,7 +194,7 @@ describe('DropdownWidgetComponent', () => {
            beforeEach(async(() => {
                spyOn(visibilityService, 'refreshVisibility').and.stub();
                spyOn(formService, 'getRestFieldValuesByProcessId').and.callFake(() => {
-                    return Observable.of(fakeOptionList);
+                    return of(fakeOptionList);
                });
                widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
                    id: 'dropdown-id',
--- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.html
+++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.html
@@ -63,7 +63,6 @@
     <row-editor *ngIf="editMode"
        [table]="content"
        [row]="editRow"
-        [column]="column"
        (save)="onSaveChanges()"
        (cancel)="onCancelChanges()">
     </row-editor>
--- a/lib/core/form/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts
+++ b/lib/core/form/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts
@@ -17,7 +17,7 @@

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of, throwError } from 'rxjs';
 import { FormService } from './../../../../../services/form.service';
 import { FormFieldModel, FormModel } from './../../../core/index';
 import { DynamicTableColumnOption  } from './../../dynamic-table-column-option.model';
@@ -145,7 +145,7 @@ describe('DropdownEditorComponent', () => {
        const error = 'error';

        spyOn(formService, 'getRestFieldValuesColumn').and.returnValue(
-            Observable.throw(error)
+            throwError(error)
        );
        spyOn(component, 'handleError').and.stub();

@@ -161,7 +161,7 @@ describe('DropdownEditorComponent', () => {
        const error = 'error';

        spyOn(formService, 'getRestFieldValuesColumnByProcessId').and.returnValue(
-            Observable.throw(error)
+            throwError(error)
        );
        spyOn(component, 'handleError').and.stub();

@@ -209,7 +209,7 @@ describe('DropdownEditorComponent', () => {

            beforeEach(async(() => {
                stubFormService = fixture.debugElement.injector.get(FormService);
-                spyOn(stubFormService, 'getRestFieldValuesColumn').and.returnValue(Observable.of(fakeOptionList));
+                spyOn(stubFormService, 'getRestFieldValuesColumn').and.returnValue(of(fakeOptionList));
                row = <DynamicTableRow> {value: {dropdown: 'one'}};
                column = <DynamicTableColumn> {
                    id: 'column-id',
@@ -257,7 +257,7 @@ describe('DropdownEditorComponent', () => {

            beforeEach(async(() => {
                stubFormService = fixture.debugElement.injector.get(FormService);
-                spyOn(stubFormService, 'getRestFieldValuesColumnByProcessId').and.returnValue(Observable.of(fakeOptionList));
+                spyOn(stubFormService, 'getRestFieldValuesColumnByProcessId').and.returnValue(of(fakeOptionList));
                row = <DynamicTableRow> {value: {dropdown: 'one'}};
                column = <DynamicTableColumn> {
                    id: 'column-id',
--- a/lib/core/form/components/widgets/form.scss
+++ b/lib/core/form/components/widgets/form.scss
@@ -39,7 +39,7 @@

        &-invalid {

-            .mat-input-underline {
+            .mat-form-field-underline {
                background-color: #f44336 !important;
            }

@@ -47,7 +47,7 @@
                border-color: mat-color($warn);
            }

-            .mat-input-prefix {
+            .mat-form-field-prefix {
                color: mat-color($warn);
            }

--- a/lib/core/form/components/widgets/functional-group/functional-group.widget.spec.ts
+++ b/lib/core/form/components/widgets/functional-group/functional-group.widget.spec.ts
@@ -16,7 +16,7 @@
 */

 import { ElementRef } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { FormFieldModel } from '../core/form-field.model';
 import { FormModel } from '../core/form.model';
--- a/lib/core/form/components/widgets/people/people.widget.spec.ts
+++ b/lib/core/form/components/widgets/people/people.widget.spec.ts
@@ -18,7 +18,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { UserProcessModel } from '../../../../models';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormFieldModel } from '../core/form-field.model';
--- a/lib/core/form/components/widgets/people/people.widget.ts
+++ b/lib/core/form/components/widgets/people/people.widget.ts
@@ -24,7 +24,7 @@ import { FormService } from '../../../services/form.service';
 import { GroupModel } from '../core/group.model';
 import { baseHost, WidgetComponent } from './../widget.component';
 import { FormControl } from '@angular/forms';
-import { Observable } from 'rxjs/Observable';
+import { Observable, empty } from 'rxjs';
 import {
    catchError,
    distinctUntilChanged,
@@ -32,7 +32,6 @@ import {
    switchMap,
    tap
 } from 'rxjs/operators';
-import 'rxjs/add/observable/empty';

@Component({
    selector: 'people-widget',
@@ -62,7 +61,7 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit {
        }),
        distinctUntilChanged(),
        switchMap((searchTerm) => {
-            let userResponse = Observable.empty();
+            let userResponse: any = empty();

            if (typeof searchTerm === 'string') {
                userResponse = this.formService.getWorkflowUsers(searchTerm, this.groupId)
--- a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
+++ b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
@@ -16,7 +16,7 @@
 */

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { ContainerModel } from '../core/container.model';
 import { FormFieldTypes } from '../core/form-field-types';
@@ -123,7 +123,7 @@ describe('RadioButtonsWidgetComponent', () => {
    });

    it('should update the field value when an option is selected', () => {
-        spyOn(widget, 'onFieldChanged').and.returnValue(Observable.of({}));
+        spyOn(widget, 'onFieldChanged').and.returnValue(of({}));
        widget.onOptionClick('fake-opt');

        expect(widget.field.value).toEqual('fake-opt');
@@ -153,7 +153,7 @@ describe('RadioButtonsWidgetComponent', () => {

            beforeEach(async(() => {
                stubFormService = fixture.debugElement.injector.get(FormService);
-                spyOn(stubFormService, 'getRestFieldValues').and.returnValue(Observable.of(restOption));
+                spyOn(stubFormService, 'getRestFieldValues').and.returnValue(of(restOption));
                radioButtonWidget.field = new FormFieldModel(new FormModel({ taskId: 'task-id' }), {
                    id: 'radio-id',
                    name: 'radio-name',
@@ -196,7 +196,7 @@ describe('RadioButtonsWidgetComponent', () => {
                    restUrl: 'rest-url'
                });
                stubFormService = fixture.debugElement.injector.get(FormService);
-                spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(Observable.of(restOption));
+                spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(of(restOption));
                radioButtonWidget.field.isVisible = true;
                fixture.detectChanges();
            }));
--- a/lib/core/form/components/widgets/text/text-mask.component.ts
+++ b/lib/core/form/components/widgets/text/text-mask.component.ts
@@ -24,7 +24,7 @@ import {
    HostListener,
    Input,
    OnChanges,
-    Renderer,
+    Renderer2,
    SimpleChanges
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -59,7 +59,7 @@ export class InputMaskDirective implements OnChanges, ControlValueAccessor {
    private value;
    private invalidCharacters = [];

-    constructor(private el: ElementRef, private render: Renderer) {
+    constructor(private el: ElementRef, private render: Renderer2) {
    }

    _onChange = (_: any) => {
@@ -100,7 +100,7 @@ export class InputMaskDirective implements OnChanges, ControlValueAccessor {
        if (this.byPassKeys.indexOf(keyCode) === -1) {
            let value = this.getMasked(false, actualValue, maskToApply, isMaskReversed);
            let calculatedCaret = this.calculateCaretPosition(startCaret, actualValue, keyCode);
-            this.render.setElementAttribute(this.el.nativeElement, 'value', value);
+            this.render.setAttribute(this.el.nativeElement, 'value', value);
            this.el.nativeElement.value = value;
            this.setValue(value);
            this._onChange(value);
--- a/lib/core/form/components/widgets/typeahead/typeahead.widget.spec.ts
+++ b/lib/core/form/components/widgets/typeahead/typeahead.widget.spec.ts
@@ -16,7 +16,7 @@
 */

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of, throwError } from 'rxjs';

 import { By } from '@angular/platform-browser';
 import { FormService } from '../../../services/form.service';
@@ -99,7 +99,7 @@ describe('TypeaheadWidgetComponent', () => {
            restUrl: 'whateverURL'
        });
        const err = 'Error';
-        spyOn(formService, 'getRestFieldValues').and.returnValue(Observable.throw(err));
+        spyOn(formService, 'getRestFieldValues').and.returnValue(throwError(err));
        spyOn(widget, 'handleError').and.stub();

        widget.ngOnInit();
@@ -121,7 +121,7 @@ describe('TypeaheadWidgetComponent', () => {
            restUrl: 'whateverURL'
        });
        const err = 'Error';
-        spyOn(formService, 'getRestFieldValuesByProcessId').and.returnValue(Observable.throw(err));
+        spyOn(formService, 'getRestFieldValuesByProcessId').and.returnValue(throwError(err));
        spyOn(widget, 'handleError').and.stub();

        widget.ngOnInit();
@@ -270,7 +270,7 @@ describe('TypeaheadWidgetComponent', () => {

            beforeEach(async(() => {
                stubFormService = fixture.debugElement.injector.get(FormService);
-                spyOn(stubFormService, 'getRestFieldValues').and.returnValue(Observable.of(fakeOptionList));
+                spyOn(stubFormService, 'getRestFieldValues').and.returnValue(of(fakeOptionList));
                typeaheadWidgetComponent.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
                    id: 'typeahead-id',
                    name: 'typeahead-name',
@@ -348,7 +348,7 @@ describe('TypeaheadWidgetComponent', () => {

            beforeEach(async(() => {
                stubFormService = fixture.debugElement.injector.get(FormService);
-                spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(Observable.of(fakeOptionList));
+                spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(of(fakeOptionList));
                typeaheadWidgetComponent.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
                    id: 'typeahead-id',
                    name: 'typeahead-name',
--- a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts
+++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.ts
@@ -20,12 +20,12 @@
 import { LogService } from '../../../../services/log.service';
 import { ThumbnailService } from '../../../../services/thumbnail.service';
 import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable, from } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../core/content-link.model';
 import { baseHost, WidgetComponent } from './../widget.component';
-import 'rxjs/add/operator/mergeMap';
+import { mergeMap, map } from 'rxjs/operators';

@Component({
    selector: 'upload-folder-widget',
@@ -75,27 +75,32 @@ export class UploadFolderWidgetComponent extends WidgetComponent implements OnIn
        }

        if (files && files.length > 0) {
-            Observable.from(files).mergeMap(file => this.uploadRawContent(file)).subscribe((res) => {
-                    filesSaved.push(res);
-                },
-                (error) => {
-                    this.logService.error('Error uploading file. See console output for more details.');
-                },
-                () => {
-                    this.field.value = filesSaved;
-                    this.field.json.value = filesSaved;
-                });
+            from(files)
+                .pipe(mergeMap(file => this.uploadRawContent(file)))
+                .subscribe(
+                    (res) => {
+                        filesSaved.push(res);
+                    },
+                    () => {
+                        this.logService.error('Error uploading file. See console output for more details.');
+                    },
+                    () => {
+                        this.field.value = filesSaved;
+                        this.field.json.value = filesSaved;
+                    }
+                );

            this.hasFile = true;
        }
    }

    private uploadRawContent(file): Observable<any> {
-        return this.processContentService.createTemporaryRawRelatedContent(file)
-            .map((response: any) => {
+        return this.processContentService.createTemporaryRawRelatedContent(file).pipe(
+            map((response: any) => {
                this.logService.info(response);
                return response;
-            });
+            })
+        );
    }

    private getMultipleFileParam() {
--- a/lib/core/form/components/widgets/upload/upload.widget.spec.ts
+++ b/lib/core/form/components/widgets/upload/upload.widget.spec.ts
@@ -18,7 +18,7 @@
 import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { ProcessContentService } from '../../../services/process-content.service';
 import { FormFieldTypes } from '../core/form-field-types';
@@ -189,7 +189,7 @@ describe('UploadWidgetComponent', () => {
        }));

        it('should show the list file after upload a new content', async(() => {
-            spyOn(contentService, 'createTemporaryRawRelatedContent').and.returnValue(Observable.of(fakePngAnswer));
+            spyOn(contentService, 'createTemporaryRawRelatedContent').and.returnValue(of(fakePngAnswer));

            uploadWidgetComponent.field.params.multiple = false;
            fixture.detectChanges();
@@ -204,11 +204,11 @@ describe('UploadWidgetComponent', () => {
        it('should update the form after deleted a file', async(() => {
            spyOn(contentService, 'createTemporaryRawRelatedContent').and.callFake((file) => {
                if (file.name === 'file-fake.png') {
-                    return Observable.of(fakePngAnswer);
+                    return of(fakePngAnswer);
                }

                if (file.name === 'file-fake.jpg') {
-                    return Observable.of(fakeJpgAnswer);
+                    return of(fakeJpgAnswer);
                }
            });

@@ -232,11 +232,11 @@ describe('UploadWidgetComponent', () => {
        it('should set has field value all the files uploaded', async(() => {
            spyOn(contentService, 'createTemporaryRawRelatedContent').and.callFake((file) => {
                if (file.name === 'file-fake.png') {
-                    return Observable.of(fakePngAnswer);
+                    return of(fakePngAnswer);
                }

                if (file.name === 'file-fake.jpg') {
-                    return Observable.of(fakeJpgAnswer);
+                    return of(fakeJpgAnswer);
                }
            });

@@ -380,8 +380,8 @@ describe('UploadWidgetComponent', () => {
        }));

        it('should emit form content clicked event on icon click', (done) => {
-            spyOn(contentService, 'getContentPreview').and.returnValue(Observable.of(new Blob()));
-            spyOn(contentService, 'getFileRawContent').and.returnValue(Observable.of(new Blob()));
+            spyOn(contentService, 'getContentPreview').and.returnValue(of(new Blob()));
+            spyOn(contentService, 'getFileRawContent').and.returnValue(of(new Blob()));

            formServiceInstance.formContentClicked.subscribe((content: any) => {
                expect(content.name).toBe(fakeJpgAnswer.name);
--- a/lib/core/form/components/widgets/upload/upload.widget.ts
+++ b/lib/core/form/components/widgets/upload/upload.widget.ts
@@ -20,12 +20,12 @@
 import { LogService } from '../../../../services/log.service';
 import { ThumbnailService } from '../../../../services/thumbnail.service';
 import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable, from } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { ProcessContentService } from '../../../services/process-content.service';
 import { ContentLinkModel } from '../core/content-link.model';
 import { baseHost, WidgetComponent } from './../widget.component';
-import 'rxjs/add/operator/mergeMap';
+import { mergeMap, map } from 'rxjs/operators';

@Component({
    selector: 'upload-widget',
@@ -75,27 +75,29 @@ export class UploadWidgetComponent extends WidgetComponent implements OnInit {
        }

        if (files && files.length > 0) {
-            Observable.from(files).mergeMap(file => this.uploadRawContent(file)).subscribe((res) => {
-                    filesSaved.push(res);
-                },
-                (error) => {
-                    this.logService.error('Error uploading file. See console output for more details.');
-                },
-                () => {
-                    this.field.value = filesSaved;
-                    this.field.json.value = filesSaved;
-                    this.hasFile = true;
-                });
+            from(files)
+                .pipe(mergeMap(file => this.uploadRawContent(file)))
+                .subscribe(
+                    (res) => filesSaved.push(res),
+                    () => this.logService.error('Error uploading file. See console output for more details.'),
+                    () => {
+                        this.field.value = filesSaved;
+                        this.field.json.value = filesSaved;
+                        this.hasFile = true;
+                    }
+                );
        }
    }

    private uploadRawContent(file): Observable<any> {
        return this.processContentService.createTemporaryRawRelatedContent(file)
-            .map((response: any) => {
-                this.logService.info(response);
-                response.contentBlob = file;
-                return response;
-            });
+            .pipe(
+                map((response: any) => {
+                    this.logService.info(response);
+                    response.contentBlob = file;
+                    return response;
+                })
+            );
    }

    getMultipleFileParam() {
--- a/lib/core/form/components/widgets/widget.component.ts
+++ b/lib/core/form/components/widgets/widget.component.ts
@@ -121,7 +121,7 @@ export class WidgetComponent implements AfterViewInit {
        return null;
    }

-    protected event(event: Event): void {
+    event(event: Event): void {
        this.formService.formEvents.next(event);
    }
 }