aurelia-syncfusion-ej2-bridge 0.1.0-beta.9 → 1.0.0

package/dist/commonjs/widgets/grid/ej2-grid.js

@@ -17,70 +17,70 @@ let Ej2Grid = class Ej2Grid extends syncfusionWrapper_1.SyncfusionWrapper {
         this.syncfusionWidgetType = ej2_grids_1.Grid;
     }
     onBeforeWidgetInstantiation() {
-        if (this.eModel.allowPaging) {
+        if (this._eModel.allowPaging) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Page);
         }
-        if (this.eModel.allowSelection) {
+        if (this._eModel.allowSelection) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Selection);
         }
-        if (this.eModel.editSettings) {
+        if (this._eModel.editSettings) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Edit);
         }
-        if (this.eModel.allowReordering) {
+        if (this._eModel.allowReordering) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Reorder);
         }
-        if (this.eModel.allowSorting) {
+        if (this._eModel.allowSorting) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Sort);
         }
-        if (this.eModel.showColumnChooser) {
+        if (this._eModel.showColumnChooser) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.ColumnChooser);
         }
-        if (this.eModel.toolbar) {
+        if (this._eModel.toolbar) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Toolbar);
         }
-        if (this.eModel.editSettings) {
+        if (this._eModel.editSettings) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Edit);
         }
-        if (this.eModel.filterSettings) {
+        if (this._eModel.filterSettings) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Filter);
         }
-        if (this.eModel.groupSettings) {
+        if (this._eModel.groupSettings) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Group);
         }
-        if (this.eModel.aggregates) {
+        if (this._eModel.aggregates) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Aggregate);
         }
-        if (this.eModel.showColumnMenu) {
+        if (this._eModel.showColumnMenu) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.ColumnMenu);
         }
-        if (this.eModel.detailTemplate) {
+        if (this._eModel.detailTemplate) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.DetailRow);
         }
-        if (this.eModel.contextMenuItems) {
+        if (this._eModel.contextMenuItems) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.ContextMenu);
         }
-        if (this.eModel.frozenColumns || this.eModel.frozenRows) {
+        if (this._eModel.frozenColumns || this._eModel.frozenRows) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Freeze);
         }
-        if (this.eModel.allowResizing) {
+        if (this._eModel.allowResizing) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Resize);
         }
-        if (this.eModel.allowRowDragAndDrop) {
+        if (this._eModel.allowRowDragAndDrop) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.RowDD);
         }
-        if (this.eModel.searchSettings) {
+        if (this._eModel.searchSettings) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Search);
         }
-        if (this.eModel.printMode) {
+        if (this._eModel.printMode) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.Print);
         }
-        if (this.eModel.enableVirtualization) {
+        if (this._eModel.enableVirtualization) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.VirtualScroll);
         }
-        if (this.eModel.allowExcelExport) {
+        if (this._eModel.allowExcelExport) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.ExcelExport);
         }
-        if (this.eModel.allowPdfExport) {
+        if (this._eModel.allowPdfExport) {
             ej2_grids_1.Grid.Inject(ej2_grids_1.PdfExport);
         }
     }

package/dist/commonjs/widgets/listView/ej2-listView.js

@@ -21,7 +21,7 @@ let Ej2ListView = class Ej2ListView extends syncfusionWrapper_1.SyncfusionWrappe
     onWidgetCreated() {
     }
     onBeforeWidgetInstantiation() {
-        if (this.eModel.enableVirtualization) {
+        if (this._eModel.enableVirtualization) {
             ej2_lists_1.ListView.Inject(ej2_lists_1.Virtualization);
         }
     }

package/dist/commonjs/widgets/multiSelect/ej2-multiSelect.d.ts

@@ -0,0 +1,10 @@
+import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
+import { MultiSelect, MultiSelectModel } from "@syncfusion/ej2-dropdowns";
+export declare class Ej2MultiSelect extends SyncfusionWrapper<MultiSelect, MultiSelectModel> {
+    protected syncfusionWidgetType: typeof MultiSelect;
+    protected onWrapperCreated(): void;
+    protected onWidgetCreated(): void;
+    onInput(args: any): void;
+    onChange(args: any): void;
+    attached(): void;
+}

package/dist/commonjs/widgets/multiSelect/ej2-multiSelect.js

@@ -0,0 +1,44 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2MultiSelect = void 0;
+const constants_1 = require("../../common/constants");
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+const ej2_dropdowns_1 = require("@syncfusion/ej2-dropdowns");
+const decorator_1 = require("../../utilities/decorator");
+const ej2_base_1 = require("@syncfusion/ej2-base");
+const aurelia_framework_1 = require("aurelia-framework");
+ej2_base_1.enableRipple(true);
+let Ej2MultiSelect = class Ej2MultiSelect extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_dropdowns_1.MultiSelect;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+        let _this = this;
+        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
+    }
+    onInput(args) {
+        this[`${constants_1.constants.bindablePrefix}value`] = args.value;
+    }
+    onChange(args) {
+        this[`${constants_1.constants.bindablePrefix}value`] = args.value;
+    }
+    attached() {
+        this.widgetElement = this.element.querySelector("select,input");
+        super.attached();
+    }
+};
+Ej2MultiSelect = __decorate([
+    decorator_1.generateBindables("multiSelect"),
+    aurelia_framework_1.inlineView(`<template><div><slot><input /></slot></div></template>`),
+    aurelia_framework_1.customElement('ej2-multi-select')
+], Ej2MultiSelect);
+exports.Ej2MultiSelect = Ej2MultiSelect;

package/dist/commonjs/widgets/progressButton/ej2-progress-button.d.ts

@@ -2,10 +2,10 @@ import { ProgressButton, ProgressButtonModel } from '@syncfusion/ej2-splitbutton
 import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
 export declare class Ej2ProgressButton extends SyncfusionWrapper<ProgressButton, ProgressButtonModel> {
     clickEvent: Event;
+    _onClick: (event: Event) => void;
     protected onWidgetCreated(): void;
     protected onWrapperCreated(): void;
     protected syncfusionWidgetType: typeof ProgressButton;
-    _onClick(event: Event): void;
     refresh(): void;
     focusIn(): void;
     click(): void;

package/dist/commonjs/widgets/progressButton/ej2-progress-button.js

@@ -15,20 +15,22 @@ let Ej2ProgressButton = class Ej2ProgressButton extends syncfusionWrapper_1.Sync
     constructor() {
         super(...arguments);
         this.clickEvent = null;
+        this._onClick = null;
         this.syncfusionWidgetType = ej2_splitbuttons_1.ProgressButton;
     }
     onWidgetCreated() {
-        this.widget.element.addEventListener("click", this._onClick.bind(this));
+        let _this = this;
+        this._onClick = (event) => {
+            _this.element.dispatchEvent(_this.clickEvent);
+            event.stopPropagation();
+        };
+        this.widget.element.addEventListener("click", this._onClick, false);
     }
     onWrapperCreated() {
         this.clickEvent = new CustomEvent("on-click", {
             bubbles: true
         });
     }
-    _onClick(event) {
-        this.element.dispatchEvent(this.clickEvent);
-        event.stopPropagation();
-    }
     refresh() {
         this.widget.refresh();
     }
@@ -51,7 +53,7 @@ let Ej2ProgressButton = class Ej2ProgressButton extends syncfusionWrapper_1.Sync
         this.widget.stop();
     }
     detached() {
-        this.widget.element.removeEventListener("click", this._onClick);
+        this.widget.element.removeEventListener("click", this._onClick, false);
     }
 };
 Ej2ProgressButton = __decorate([

package/dist/commonjs/widgets/radio/ej2-radio.js

@@ -24,17 +24,17 @@ let Ej2Radio = class Ej2Radio extends syncfusionWrapper_1.SyncfusionWrapper {
     onWrapperCreated() {
     }
     onBind() {
-        if (!this.eModel.name) {
+        if (!this._eModel.name) {
             throw "Radio e-name is required";
         }
         this.widget.change = () => {
             this[`${constants_1.constants.bindablePrefix}checked`] = this.widget.checked;
-            this.eventAggregator.publish(`ej2-radio-${this.eModel.name}-changed`, this[`${constants_1.constants.bindablePrefix}label`]);
+            this.eventAggregator.publish(`ej2-radio-${this._eModel.name}-changed`, this[`${constants_1.constants.bindablePrefix}label`]);
         };
         this.checkedSubscription = this.bindingEngine.propertyObserver(this, this[`${constants_1.constants.bindablePrefix}checked`]).subscribe((newValue) => {
             this.widget.checked = newValue;
         });
-        this.selectionChangedSubscription = this.eventAggregator.subscribe(`ej2-radio-${this.eModel.name}-changed`, (selectedLabel) => {
+        this.selectionChangedSubscription = this.eventAggregator.subscribe(`ej2-radio-${this._eModel.name}-changed`, (selectedLabel) => {
             if (this[`${constants_1.constants.bindablePrefix}label`] !== selectedLabel) {
                 this[`${constants_1.constants.bindablePrefix}checked`] = false;
             }

package/dist/commonjs/widgets/schedule/ej2-schedule.d.ts

@@ -0,0 +1,8 @@
+import { Schedule, ScheduleModel } from '@syncfusion/ej2-schedule';
+import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
+export declare class Ej2Schedule extends SyncfusionWrapper<Schedule, ScheduleModel> {
+    protected syncfusionWidgetType: any;
+    protected onWrapperCreated(): void;
+    protected onWidgetCreated(): void;
+    onBeforeWidgetInstantiation(): void;
+}

package/dist/commonjs/widgets/schedule/ej2-schedule.js

@@ -0,0 +1,32 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2Schedule = void 0;
+const aurelia_framework_1 = require("aurelia-framework");
+const ej2_schedule_1 = require("@syncfusion/ej2-schedule");
+const decorator_1 = require("../../utilities/decorator");
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+let Ej2Schedule = class Ej2Schedule extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_schedule_1.Schedule;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+    }
+    onBeforeWidgetInstantiation() {
+        ej2_schedule_1.Schedule.Inject(ej2_schedule_1.Day, ej2_schedule_1.Week, ej2_schedule_1.WorkWeek, ej2_schedule_1.Month, ej2_schedule_1.Agenda, ej2_schedule_1.TimelineViews, ej2_schedule_1.TimelineMonth, ej2_schedule_1.TimelineYear, ej2_schedule_1.DragAndDrop, ej2_schedule_1.Resize, ej2_schedule_1.ExcelExport, ej2_schedule_1.ICalendarExport, ej2_schedule_1.ICalendarImport, ej2_schedule_1.Print);
+    }
+};
+Ej2Schedule = __decorate([
+    decorator_1.generateBindables("radio"),
+    aurelia_framework_1.inlineView(`<template><div element.ref="widgetElement"></div></template>`),
+    aurelia_framework_1.customElement('ej2-schedule')
+], Ej2Schedule);
+exports.Ej2Schedule = Ej2Schedule;

package/dist/commonjs/widgets/splitter/ej2-splitter.js

@@ -17,10 +17,8 @@ let Ej2Splitter = class Ej2Splitter extends syncfusionWrapper_1.SyncfusionWrappe
         this.syncfusionWidgetType = ej2_layouts_1.Splitter;
     }
     onWrapperCreated() {
-        this.debug("splitter wrapper created");
     }
     onWidgetCreated() {
-        this.debug("splitter widget created", this.widget);
     }
 };
 Ej2Splitter = __decorate([

package/dist/commonjs/widgets/switch/ej2-switch.d.ts

@@ -3,8 +3,9 @@ import { Switch, SwitchModel } from '@syncfusion/ej2-buttons';
 export declare class Ej2Switch extends SyncfusionWrapper<Switch, SwitchModel> {
     protected syncfusionWidgetType: typeof Switch;
     private id;
+    private onChange;
     protected onWrapperCreated(): void;
     protected onWidgetCreated(): void;
-    onChange(args: any): void;
     recreate(): void;
+    detached(): void;
 }

package/dist/commonjs/widgets/switch/ej2-switch.js

@@ -17,6 +17,7 @@ let Ej2Switch = class Ej2Switch extends syncfusionWrapper_1.SyncfusionWrapper {
         super(...arguments);
         this.syncfusionWidgetType = ej2_buttons_1.Switch;
         this.id = null;
+        this.onChange = null;
     }
     onWrapperCreated() {
         this.id = this.element.getAttribute("id");
@@ -27,10 +28,10 @@ let Ej2Switch = class Ej2Switch extends syncfusionWrapper_1.SyncfusionWrapper {
     }
     onWidgetCreated() {
         let _this = this;
-        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
-    }
-    onChange(args) {
-        this[`${constants_1.constants.bindablePrefix}checked`] = args.checked;
+        this.onChange = (args) => {
+            _this[`${constants_1.constants.bindablePrefix}checked`] = args.checked;
+        };
+        this.widget.addEventListener("change", this.onChange);
     }
     recreate() {
         if (this.id) {
@@ -39,6 +40,9 @@ let Ej2Switch = class Ej2Switch extends syncfusionWrapper_1.SyncfusionWrapper {
         this.element.setAttribute("id", this.id);
         super.recreate();
     }
+    detached() {
+        this.widget.removeEventListener("change", this.onChange);
+    }
 };
 Ej2Switch = __decorate([
     decorator_1.generateBindables("switch"),

package/dist/commonjs/widgets/uploader/ej2-uploader.d.ts

@@ -3,6 +3,7 @@ import { Uploader, UploaderModel, RemovingEventArgs } from "@syncfusion/ej2-inpu
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 export declare class Ej2Uploader extends SyncfusionWrapper<Uploader, UploaderModel> {
     private _filesProperty;
+    private originalFiles;
     private _filesCollectionSubscription;
     private _privateIdProperty;
     protected syncfusionWidgetType: typeof Uploader;
@@ -15,13 +16,18 @@ export declare class Ej2Uploader extends SyncfusionWrapper<Uploader, UploaderMod
     dataAdapter: Ej2UploaderDataAdapter;
     autoRemoveServerFiles: boolean;
     context: any;
+    files: any[];
+    private firstBind;
     private get _files();
     serverDelete: boolean;
     protected onWrapperCreated(): void;
-    filesChanged(): void;
+    onfilesChanged(): void;
+    recreating(): void;
+    recreated(): void;
     initializeFileCollection(): void;
     initializeFile(widgetFile: any, i: any, extraProperties: any): void;
     protected onWidgetCreated(): void;
+    onBind(): void;
     createFilesCollectionSubscription(): Disposable;
     change(): void;
     getFilesThatWereRemoved(): any[];

package/dist/commonjs/widgets/uploader/ej2-uploader.js

@@ -15,12 +15,13 @@ const ej2_inputs_1 = require("@syncfusion/ej2-inputs");
 const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
 const decorator_1 = require("../../utilities/decorator");
 const aurelia_framework_1 = require("aurelia-framework");
-const uid = require("uuid/v4");
+const uuid_1 = require("uuid");
 const aurelia_framework_2 = require("aurelia-framework");
 let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrapper {
     constructor() {
         super(...arguments);
         this._filesProperty = `${constants_1.constants.bindablePrefix}files`;
+        this.originalFiles = null;
         this._filesCollectionSubscription = null;
         this._privateIdProperty = "__id";
         this.syncfusionWidgetType = ej2_inputs_1.Uploader;
@@ -33,13 +34,14 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
         this.dataAdapter = null;
         this.autoRemoveServerFiles = true;
         this.context = null;
+        this.files = null;
+        this.firstBind = true;
         this.serverDelete = true;
     }
     get _files() {
         return this[this._filesProperty];
     }
     onWrapperCreated() {
-        this.debug("wrapper created");
         this.widget.uploading = (args) => { this.onFileUpload(args); };
         this.widget.success = (args) => { this.success(args); };
         this.widget.failure = (args) => { this.failure(args); };
@@ -55,20 +57,28 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
                         _this.widget.removingEventCallback(eventArgs, formData, selectedFiles, file);
                     });
                 };
+                this.widget.asyncSettings.removeUrl = null;
             }
         }
     }
-    filesChanged() {
-        this.debug("files Changed");
-        this.recreate();
+    onfilesChanged() {
+        if (!this.firstBind) {
+            this.widget.clearAll();
+            this.recreate();
+        }
+    }
+    recreating() {
         this._filesCollectionSubscription.dispose();
-        this.taskQueue.queueTask(() => {
-            this.widget.files = this._files;
-            this.initializeFileCollection();
-            this._filesCollectionSubscription = this.createFilesCollectionSubscription();
-        });
+        this[this._filesProperty].splice(0, this[this._filesProperty].length, ...this.originalFiles);
+    }
+    recreated() {
+        this.initializeFileCollection();
+        this._filesCollectionSubscription = this.createFilesCollectionSubscription();
     }
     initializeFileCollection() {
+        if (this.files && Array.isArray(this.files)) {
+            this.widget.files.push(...JSON.parse(JSON.stringify(this.files)));
+        }
         if (this.widget.files) {
             let extraProperties = [];
             let widgetFiles = this.widget.getFilesData();
@@ -82,7 +92,7 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
         }
     }
     initializeFile(widgetFile, i, extraProperties) {
-        let __id = uid();
+        let __id = uuid_1.v4();
         widgetFile[this._privateIdProperty] = __id;
         this._files[i][this._privateIdProperty] = __id;
         extraProperties.forEach((prop) => {
@@ -94,14 +104,34 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
         this._filesCollectionSubscription = this.createFilesCollectionSubscription();
         this.subscriptions.push(this._filesCollectionSubscription);
     }
+    onBind() {
+        this.firstBind = false;
+        this.subscriptions.push(this.bindingEngine.propertyObserver(this, "files").subscribe(() => { this.onfilesChanged(); }));
+        if (this[this._filesProperty] && Array.isArray(this[this._filesProperty])) {
+            this.originalFiles = JSON.parse(JSON.stringify(this[this._filesProperty]));
+        }
+        else if (this.files && Array.isArray(this.files)) {
+            this.originalFiles = JSON.parse(JSON.stringify(this.files));
+        }
+        else {
+            this.originalFiles = [];
+        }
+    }
     createFilesCollectionSubscription() {
-        return this.bindingEngine.collectionObserver(this._files).subscribe((changed) => {
-        });
+        if (!this._files) {
+            this[this._filesProperty] = [];
+        }
+        return this.bindingEngine.collectionObserver(this._files).subscribe((changed) => { });
     }
     change() {
         if (this.autoRemoveServerFiles) {
             this.getFilesThatWereRemoved().forEach((file) => {
-                this.removeFile(file);
+                this.removing({
+                    filesData: [file],
+                    customFormData: null,
+                    event: null,
+                    cancel: false
+                });
             });
         }
     }
@@ -124,11 +154,9 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
         });
     }
     removeFile(file) {
-        this.debug("removeFile", file);
         this.widget.remove(file);
     }
     async removing(args) {
-        this.debug("removing", args);
         let event = new CustomEvent("on-removing", {
             bubbles: true,
             detail: args
@@ -149,7 +177,6 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
                 this.onWidgetRemoveFailed(error, args);
             }
         }
-        this.onRemoveSuccess(args);
     }
     onWidgetRemoveComplete(response, args) {
         this.widget.removeCompleted(response, args.filesData[0], false);
@@ -158,15 +185,16 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
         this.widget.removeFailed(e, args.filesData[0], false);
     }
     onRemoveSuccess(args) {
-        this.debug("onRemoveSuccess", args);
         let _file = args.filesData[0];
         let index = this[this._filesProperty].findIndex((x) => x.__id === _file.__id);
-        this[this._filesProperty].splice(index, 1);
-        let event = new CustomEvent("on-remove-success", {
-            bubbles: true,
-            detail: args
-        });
-        this.element.dispatchEvent(event);
+        if (index !== -1) {
+            const removedFile = this[this._filesProperty].splice(index, 1)[0];
+            let event = new CustomEvent("on-remove-success", {
+                bubbles: true,
+                detail: { args: args, removedFile: removedFile }
+            });
+            this.element.dispatchEvent(event);
+        }
     }
     success(args) {
         if (args.operation === "upload") {
@@ -174,7 +202,7 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
             let _uploadedFile = args.file;
             let fileName = _uploadedFile.name.substr(0, _uploadedFile.name.length - (_uploadedFile.type.length + 1));
             let additionalProperties = {};
-            additionalProperties[this._privateIdProperty] = uid();
+            additionalProperties[this._privateIdProperty] = uuid_1.v4();
             if (this.uploadResultModel) {
                 for (let prop in this.uploadResultModel) {
                     additionalProperties[this.uploadResultModel[prop]] = response[prop];
@@ -191,15 +219,19 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
                 this[this._filesProperty] = [];
             }
             this[this._filesProperty].push(file);
-            let event = new CustomEvent("on-success", {
+            let uploadedEvent = new CustomEvent("on-uploaded", {
                 bubbles: true,
-                detail: args
+                detail: { args: args, uploadedFile: file }
             });
-            console.log("file after upload", _uploadedFile);
-            this.element.dispatchEvent(event);
+            this.element.dispatchEvent(uploadedEvent);
         }
         else if (args.operation === "remove") {
         }
+        let successEvent = new CustomEvent("on-success", {
+            bubbles: true,
+            detail: args
+        });
+        this.element.dispatchEvent(successEvent);
     }
     failure(args) {
         let event = new CustomEvent("on-failure", {
@@ -298,6 +330,10 @@ __decorate([
     aurelia_framework_1.bindable,
     __metadata("design:type", Object)
 ], Ej2Uploader.prototype, "context", void 0);
+__decorate([
+    aurelia_framework_1.bindable,
+    __metadata("design:type", Array)
+], Ej2Uploader.prototype, "files", void 0);
 __decorate([
     aurelia_framework_1.bindable,
     __metadata("design:type", Boolean)

package/dist/native-modules/common/controlBase.d.ts

@@ -8,7 +8,8 @@ export declare class ControlBase<T, U> {
     protected taskQueue: TaskQueue;
     protected eventAggregator: EventAggregator;
     protected element: Element;
-    eModel: U;
+    private eModel;
+    protected _eModel: U;
     protected widgetElement: HTMLElement;
     widget: T;
     protected bindingContext: any;
@@ -18,6 +19,7 @@ export declare class ControlBase<T, U> {
     protected subscriptions: Disposable[];
     constructor(bindingEngine: BindingEngine, controlContainer: ControlContainer, taskQueue: TaskQueue, eventAggregator: EventAggregator, element: Element);
     onBind(): void;
+    onAttached(): void;
     onCreateControl(): void;
     protected debug(message: string, ...rest: any[]): void;
     protected info(message: string, ...rest: any[]): void;

package/dist/native-modules/common/controlBase.js

@@ -21,19 +21,21 @@ let ControlBase = class ControlBase {
         this.eventAggregator = eventAggregator;
         this.element = element;
         this.eModel = null;
+        this._eModel = null;
         this.widgetElement = null;
         this.widget = null;
         this.bindingContext = null;
         this.logName = "";
         this.propertyPriority = true;
         this.subscriptions = [];
-        this.eModel = {};
     }
     get controlType() {
         throw "syncfusionControlType is not set";
     }
     onBind() {
     }
+    onAttached() {
+    }
     onCreateControl() {
         throw "onCreateControl is not implemented";
     }
@@ -52,6 +54,7 @@ let ControlBase = class ControlBase {
     bind(context) {
         this.logName = this.controlType.name;
         this.bindingContext = context;
+        this._eModel = Object.assign({}, this.eModel);
         this.setInitialBindings();
         this.onCreateControl();
         this.onBind();
@@ -62,8 +65,8 @@ let ControlBase = class ControlBase {
         _control.bindableProperties.forEach((property) => {
             if (!property.startsWith(constants.eventPrefix)) {
                 let modelProperty = property.substr(bindablePrefixLength);
-                if (this[property] !== undefined && (this.propertyPriority || this.eModel[modelProperty] === undefined)) {
-                    this.eModel[modelProperty] = this[property];
+                if (this[property] !== undefined && (this.propertyPriority || this._eModel[modelProperty] === undefined)) {
+                    this._eModel[modelProperty] = this[property];
                 }
             }
         });
@@ -121,15 +124,21 @@ let ControlBase = class ControlBase {
     }
     attached() {
         this.appendWidget();
+        this.onAttached();
     }
     appendWidget() {
         this.widget.appendTo(this.widgetElement);
     }
     detached() {
-        this.subscriptions.forEach((subscription) => subscription.dispose());
+        this.subscriptions.forEach((subscription) => { if (subscription) {
+            subscription.dispose();
+        } });
         if (this.widget.destroy) {
             this.widget.destroy();
         }
+        this.widget = null;
+        this._eModel = null;
+        this.widgetElement = null;
     }
 };
 __decorate([

package/dist/native-modules/common/syncfusionWrapper.d.ts

@@ -5,6 +5,9 @@ export declare abstract class SyncfusionWrapper<T, U> extends ControlBase<T, U>
     protected abstract onWidgetCreated(): any;
     onCreateControl(): void;
     recreate(): void;
+    onRecreate(): void;
+    recreating(): void;
+    recreated(): void;
     refresh(): void;
     dataBind(): void;
     protected get controlType(): any;