aurelia-syncfusion-ej2-bridge 0.1.0-beta.3 → 0.1.0-beta.31

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

@@ -6,15 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2Switch = void 0;
 const constants_1 = require("./../../common/constants");
 const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
 const ej2_buttons_1 = require("@syncfusion/ej2-buttons");
 const decorator_1 = require("../../utilities/decorator");
+const aurelia_framework_1 = require("aurelia-framework");
 let Ej2Switch = class Ej2Switch extends syncfusionWrapper_1.SyncfusionWrapper {
     constructor() {
         super(...arguments);
         this.syncfusionWidgetType = ej2_buttons_1.Switch;
         this.id = null;
+        this.onChange = null;
     }
     onWrapperCreated() {
         this.id = this.element.getAttribute("id");
@@ -25,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) {
@@ -37,8 +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")
+    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;

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

@@ -6,11 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2TextBox = void 0;
 const constants_1 = require("../../common/constants");
 const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
 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);
 let Ej2TextBox = class Ej2TextBox extends syncfusionWrapper_1.SyncfusionWrapper {
     constructor() {
@@ -28,6 +30,8 @@ let Ej2TextBox = class Ej2TextBox extends syncfusionWrapper_1.SyncfusionWrapper
     }
 };
 Ej2TextBox = __decorate([
-    decorator_1.generateBindables("textBox")
+    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;

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

@@ -6,10 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2TimePicker = void 0;
 const constants_1 = require("./../../common/constants");
 const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
 const ej2_calendars_1 = require("@syncfusion/ej2-calendars");
 const decorator_1 = require("../../utilities/decorator");
+const aurelia_framework_1 = require("aurelia-framework");
 let Ej2TimePicker = class Ej2TimePicker extends syncfusionWrapper_1.SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -26,6 +28,8 @@ let Ej2TimePicker = class Ej2TimePicker extends syncfusionWrapper_1.SyncfusionWr
     }
 };
 Ej2TimePicker = __decorate([
-    decorator_1.generateBindables("timePicker")
+    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;

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

@@ -6,9 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2TreeView = void 0;
 const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
 const ej2_navigations_1 = require("@syncfusion/ej2-navigations");
 const decorator_1 = require("../../utilities/decorator");
+const aurelia_framework_1 = require("aurelia-framework");
 let Ej2TreeView = class Ej2TreeView extends syncfusionWrapper_1.SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -20,6 +22,8 @@ let Ej2TreeView = class Ej2TreeView extends syncfusionWrapper_1.SyncfusionWrappe
     }
 };
 Ej2TreeView = __decorate([
-    decorator_1.generateBindables("treeView")
+    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;

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

@@ -9,16 +9,19 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2Uploader = void 0;
 const constants_1 = require("../../common/constants");
 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;
@@ -31,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); };
@@ -53,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();
@@ -80,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) => {
@@ -92,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
+                });
             });
         }
     }
@@ -122,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
@@ -147,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);
@@ -156,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") {
@@ -172,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];
@@ -189,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", {
@@ -296,11 +330,17 @@ __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")
+    decorator_1.generateBindables("uploader"),
+    aurelia_framework_2.inlineView(`<template><input element.ref="widgetElement" type="file" name="UploadFiles" /></template>`),
+    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

@@ -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;

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

@@ -6,17 +6,26 @@ export class SyncfusionWrapper extends ControlBase {
     }
     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

@@ -5,10 +5,6 @@ export declare class ConfigBuilder {
     useDefaults(): ConfigBuilder;
     useTheme(theme: "material" | "bootstrap" | "bootstrap4" | "fabric" | "highcontrast"): this;
     materialTheme(): this;
-    fabricTheme(): this;
-    bootstrapTheme(): this;
-    bootstrap4Theme(): this;
-    highcontrastTheme(): this;
     withoutGlobalResources(): ConfigBuilder;
     ej2Accordion(): ConfigBuilder;
     ej2AutoComplete(): ConfigBuilder;
@@ -21,14 +17,20 @@ export declare class ConfigBuilder {
     ej2DateRangePicker(): ConfigBuilder;
     ej2DateTimePicker(): ConfigBuilder;
     ej2DropDownList(): ConfigBuilder;
+    ej2DropDownTree(): ConfigBuilder;
+    ej2FileManager(): 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;
     ej2Switch(): ConfigBuilder;
     ej2TextBox(): ConfigBuilder;
     ej2TimePicker(): ConfigBuilder;