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

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

@@ -1,6 +1,8 @@
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { Slider, SliderModel, SliderChangeEventArgs } from "@syncfusion/ej2-inputs";
 export declare class Ej2Slider extends SyncfusionWrapper<Slider, SliderModel> {
+    private containerResizeObserver;
+    private resize;
     protected syncfusionWidgetType: typeof Slider;
     protected onWrapperCreated(): void;
     protected onWidgetCreated(): void;

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

@@ -5,6 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Ej2Slider = void 0;
 const constants_1 = require("./../../common/constants");
@@ -12,12 +15,23 @@ const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
 const ej2_inputs_1 = require("@syncfusion/ej2-inputs");
 const decorator_1 = require("../../utilities/decorator");
 const aurelia_framework_1 = require("aurelia-framework");
+const lodash_1 = __importDefault(require("lodash"));
 let Ej2Slider = class Ej2Slider extends syncfusionWrapper_1.SyncfusionWrapper {
     constructor() {
         super(...arguments);
+        this.containerResizeObserver = null;
+        this.resize = lodash_1.default.debounce(() => {
+            this.taskQueue.queueTask(() => {
+                this.widget.refresh();
+            });
+        }, 100);
         this.syncfusionWidgetType = ej2_inputs_1.Slider;
     }
     onWrapperCreated() {
+        this.containerResizeObserver = new ResizeObserver((entries) => {
+            this.resize();
+        });
+        this.containerResizeObserver.observe(this.widgetElement);
     }
     onWidgetCreated() {
         let _this = this;
@@ -29,9 +43,9 @@ let Ej2Slider = class Ej2Slider extends syncfusionWrapper_1.SyncfusionWrapper {
         this[`${constants_1.constants.bindablePrefix}value`] = event.value;
     }
 };
-Ej2Slider = __decorate([
-    decorator_1.generateBindables("slider"),
-    aurelia_framework_1.inlineView(`<template><div element.ref="widgetElement"></div></template>`),
-    aurelia_framework_1.customElement('ej2-slider')
-], Ej2Slider);
 exports.Ej2Slider = Ej2Slider;
+exports.Ej2Slider = Ej2Slider = __decorate([
+    (0, decorator_1.generateBindables)("slider"),
+    (0, aurelia_framework_1.inlineView)(`<template><div element.ref="widgetElement"></div></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-slider')
+], Ej2Slider);

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

@@ -17,15 +17,13 @@ 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([
-    decorator_1.generateBindables("splitter"),
-    aurelia_framework_1.inlineView(`<template><div element.ref="widgetElement"><slot></slot></div></template>`),
-    aurelia_framework_1.customElement('ej2-splitter')
-], Ej2Splitter);
 exports.Ej2Splitter = Ej2Splitter;
+exports.Ej2Splitter = Ej2Splitter = __decorate([
+    (0, decorator_1.generateBindables)("splitter"),
+    (0, aurelia_framework_1.inlineView)(`<template><div element.ref="widgetElement"><slot></slot></div></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-splitter')
+], Ej2Splitter);

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,10 +40,13 @@ 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"),
-    aurelia_framework_1.inlineView(`<template><slot></slot><input element.ref="widgetElement" type="checkbox" /></template>`),
-    aurelia_framework_1.customElement('ej2-switch')
-], Ej2Switch);
 exports.Ej2Switch = Ej2Switch;
+exports.Ej2Switch = Ej2Switch = __decorate([
+    (0, decorator_1.generateBindables)("switch"),
+    (0, aurelia_framework_1.inlineView)(`<template><slot></slot><input element.ref="widgetElement" type="checkbox" /></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-switch')
+], Ej2Switch);

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

@@ -13,7 +13,7 @@ const ej2_inputs_1 = require("@syncfusion/ej2-inputs");
 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);
+(0, ej2_base_1.enableRipple)(true);
 let Ej2TextBox = class Ej2TextBox extends syncfusionWrapper_1.SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -29,9 +29,9 @@ let Ej2TextBox = class Ej2TextBox extends syncfusionWrapper_1.SyncfusionWrapper
         this[`${constants_1.constants.bindablePrefix}value`] = args.value;
     }
 };
-Ej2TextBox = __decorate([
-    decorator_1.generateBindables("textBox"),
-    aurelia_framework_1.inlineView(`<template><input element.ref="widgetElement" /></template>`),
-    aurelia_framework_1.customElement('ej2-text-box')
-], Ej2TextBox);
 exports.Ej2TextBox = Ej2TextBox;
+exports.Ej2TextBox = Ej2TextBox = __decorate([
+    (0, decorator_1.generateBindables)("textBox"),
+    (0, aurelia_framework_1.inlineView)(`<template><input element.ref="widgetElement" /></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-text-box')
+], Ej2TextBox);

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

@@ -27,9 +27,9 @@ let Ej2TimePicker = class Ej2TimePicker extends syncfusionWrapper_1.SyncfusionWr
         this[`${constants_1.constants.bindablePrefix}value`] = args.value;
     }
 };
-Ej2TimePicker = __decorate([
-    decorator_1.generateBindables("timePicker"),
-    aurelia_framework_1.inlineView(`<template><input element.ref="widgetElement" /></template>`),
-    aurelia_framework_1.customElement('ej2-time-picker')
-], Ej2TimePicker);
 exports.Ej2TimePicker = Ej2TimePicker;
+exports.Ej2TimePicker = Ej2TimePicker = __decorate([
+    (0, decorator_1.generateBindables)("timePicker"),
+    (0, aurelia_framework_1.inlineView)(`<template><input element.ref="widgetElement" /></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-time-picker')
+], Ej2TimePicker);

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

@@ -21,9 +21,9 @@ let Ej2TreeView = class Ej2TreeView extends syncfusionWrapper_1.SyncfusionWrappe
     onWidgetCreated() {
     }
 };
-Ej2TreeView = __decorate([
-    decorator_1.generateBindables("treeView"),
-    aurelia_framework_1.inlineView(`<template><div element.ref="widgetElement"></div></template>`),
-    aurelia_framework_1.customElement('ej2-tree-view')
-], Ej2TreeView);
 exports.Ej2TreeView = Ej2TreeView;
+exports.Ej2TreeView = Ej2TreeView = __decorate([
+    (0, decorator_1.generateBindables)("treeView"),
+    (0, aurelia_framework_1.inlineView)(`<template><div element.ref="widgetElement"></div></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-tree-view')
+], Ej2TreeView);

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 = (0, 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] = (0, 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", {
@@ -270,6 +302,7 @@ let Ej2Uploader = class Ej2Uploader extends syncfusionWrapper_1.SyncfusionWrappe
         return _metadata;
     }
 };
+exports.Ej2Uploader = Ej2Uploader;
 __decorate([
     aurelia_framework_1.bindable,
     __metadata("design:type", Object)
@@ -298,13 +331,16 @@ __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)
 ], Ej2Uploader.prototype, "serverDelete", void 0);
-Ej2Uploader = __decorate([
-    decorator_1.generateBindables("uploader"),
-    aurelia_framework_2.inlineView(`<template><input element.ref="widgetElement" type="file" name="UploadFiles" /></template>`),
-    aurelia_framework_2.customElement('ej2-uploader')
+exports.Ej2Uploader = Ej2Uploader = __decorate([
+    (0, decorator_1.generateBindables)("uploader"),
+    (0, aurelia_framework_2.inlineView)(`<template><input element.ref="widgetElement" type="file" name="UploadFiles" /></template>`),
+    (0, aurelia_framework_2.customElement)('ej2-uploader')
 ], Ej2Uploader);
-exports.Ej2Uploader = Ej2Uploader;

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

@@ -14,6 +14,9 @@ import { constants } from "./constants";
 import { EventAggregator } from 'aurelia-event-aggregator';
 let logger = LogManager.getLogger("SyncfusionBridge");
 let ControlBase = class ControlBase {
+    get controlType() {
+        throw "syncfusionControlType is not set";
+    }
     constructor(bindingEngine, controlContainer, taskQueue, eventAggregator, element) {
         this.bindingEngine = bindingEngine;
         this.controlContainer = controlContainer;
@@ -21,19 +24,18 @@ 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;

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

@@ -1,22 +1,27 @@
 import { ControlBase } from "./controlBase";
 export class SyncfusionWrapper extends ControlBase {
-    constructor() {
-        super(...arguments);
-        this.syncfusionWidgetType = null;
-    }
     onCreateControl() {
         this.onBeforeWidgetInstantiation();
-        this.widget = new this.syncfusionWidgetType(this.eModel);
+        this.widget = new this.syncfusionWidgetType(this._eModel);
         this.widget.created = () => { this.onWidgetCreated(); };
         this.onWrapperCreated();
         this.createControlEvents(this.getBindables());
     }
     recreate() {
-        this.debug("recreate");
+        this.onRecreate();
         this.widget.destroy();
+        this.widget = null;
+        this.recreating();
         this.setInitialBindings();
         this.onCreateControl();
         this.appendWidget();
+        this.recreated();
+    }
+    onRecreate() {
+    }
+    recreating() {
+    }
+    recreated() {
     }
     refresh() {
         this.widget.refresh();

package/dist/native-modules/configBuider.d.ts

@@ -22,10 +22,12 @@ export declare class ConfigBuilder {
     ej2Grid(): ConfigBuilder;
     ej2ListView(): ConfigBuilder;
     ej2MaskedTextBox(): ConfigBuilder;
+    ej2MultiSelect(): ConfigBuilder;
     ej2NumericTextBox(): ConfigBuilder;
     ej2Pager(): ConfigBuilder;
     ej2ProgressButton(): ConfigBuilder;
     ej2Radio(): ConfigBuilder;
+    ej2Schedule(): ConfigBuilder;
     ej2Sidebar(): ConfigBuilder;
     ej2Slider(): ConfigBuilder;
     ej2Splitter(): ConfigBuilder;

package/dist/native-modules/configBuider.js

@@ -1,7 +1,8 @@
+import { Ej2MultiSelect } from './widgets/multiSelect/ej2-multiSelect';
+import { Ej2Schedule } from './widgets/schedule/ej2-schedule';
 import { Ej2FileManager } from './widgets/fileManager/ej2-fileManager';
 import { Ej2Sidebar } from './widgets/sidebar/ej2-sidebar';
 import { Ej2DatePicker } from './widgets/datePicker/ej2-DatePicker';
-import { PLATFORM } from "aurelia-pal";
 import { Ej2TextBox } from './widgets/textBox/ej2-textBox';
 import { Ej2DateRangePicker } from './widgets/dateRangePicker/ej2-dateRangePicker';
 import { Ej2DateTimePicker } from './widgets/dateTimePicker/ej2-dateTimePicker';
@@ -50,10 +51,12 @@ export class ConfigBuilder {
             .ej2Grid()
             .ej2ListView()
             .ej2MaskedTextBox()
+            .ej2MultiSelect()
             .ej2NumericTextBox()
             .ej2Pager()
             .ej2ProgressButton()
             .ej2Radio()
+            .ej2Schedule()
             .ej2Sidebar()
             .ej2Slider()
             .ej2Splitter()
@@ -76,7 +79,6 @@ export class ConfigBuilder {
         }
     }
     materialTheme() {
-        this.resources.push(PLATFORM.moduleName("@syncfusion/ej2/material.css"));
         return this;
     }
     withoutGlobalResources() {
@@ -147,6 +149,10 @@ export class ConfigBuilder {
         this.resources.push(Ej2MaskedTextBox);
         return this;
     }
+    ej2MultiSelect() {
+        this.resources.push(Ej2MultiSelect);
+        return this;
+    }
     ej2NumericTextBox() {
         this.resources.push(Ej2NumericTextBox);
         return this;
@@ -163,6 +169,10 @@ export class ConfigBuilder {
         this.resources.push(Ej2Radio);
         return this;
     }
+    ej2Schedule() {
+        this.resources.push(Ej2Schedule);
+        return this;
+    }
     ej2Sidebar() {
         this.resources.push(Ej2Sidebar);
         return this;