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

package/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "AureliaEffect.aurelia",
+    "msjsdiag.debugger-for-chrome",
+    "steoates.autoimport",
+    "EditorConfig.EditorConfig",
+    "christian-kohler.path-intellisense",
+    "behzad88.Aurelia"
+  ]
+}

package/.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Chrome Debugger",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:9000",
+      "webRoot": "${workspaceRoot}/src",
+      "userDataDir": "${workspaceRoot}/.chrome",
+      "sourceMapPathOverrides": {
+        "../src/*": "${webRoot}/*"
+      }
+    },
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach Karma Chrome",
+      "address": "localhost",
+      "port": 9333,
+      "sourceMaps": true,
+      "pathMapping": {
+        "/": "${workspaceRoot}",
+        "/base/": "${workspaceRoot}/"
+      },
+      "sourceMapPathOverrides": {
+        "../src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "html.suggest.angular1": false,
+  "html.suggest.ionic": false
+}

package/README.md

@@ -1,29 +1,32 @@
-# `aurelia-syncfusion-ej-2-bridge`
-
-This is an early release and is not recommended for use
-
-# Supported controls
-* Accoridon
-* Auto Complete
-* Button
-* Checkbox
-* Combobox
-* Dashboard Layout
-* Date Picker
-* Date Time Picker
-* Dropdown List
-* Grid
-* List View
-* Masked Textbox
-* Numeric Textbox
-* Pager
-* Progress Button
-* Radio
-* Sidebar
-* Slider
-* Splitter
-* Switch
-* Textbox
-* Time Picker
-* Tree View
-* Uploader
+# `aurelia-syncfusion-ej-2-bridge`
+
+This is an early release and is not recommended for use
+
+# Supported controls
+* Accoridon
+* Auto Complete
+* Button
+* Checkbox
+* Combobox
+* Dashboard Layout
+* Date Picker
+* Date Time Picker
+* Dropdown List
+* Dropdown Tree
+* File Manager
+* Grid
+* List View
+* Masked Textbox
+* Numeric Textbox
+* Pager
+* Progress Button
+* Radio
+* Schedule
+* Sidebar
+* Slider
+* Splitter
+* Switch
+* Textbox
+* Time Picker
+* Tree View
+* Uploader

package/dist/commonjs/common/constants.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.constants = void 0;
 exports.constants = {
     eventPrefix: 'e-on-',
     bindablePrefix: 'e-'

package/dist/commonjs/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/commonjs/common/controlBase.js

@@ -9,6 +9,7 @@ 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.ExcludedProperties = exports.ControlBase = void 0;
 const aurelia_task_queue_1 = require("aurelia-task-queue");
 const aurelia_framework_1 = require("aurelia-framework");
 const controlContainer_1 = require("./controlContainer");
@@ -23,19 +24,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";
     }
@@ -54,6 +57,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();
@@ -64,8 +68,8 @@ let ControlBase = class ControlBase {
         _control.bindableProperties.forEach((property) => {
             if (!property.startsWith(constants_1.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];
                 }
             }
         });
@@ -123,15 +127,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/commonjs/common/controlContainer.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlContainer = void 0;
 class ControlContainer {
     constructor() {
         this.controls = [];

package/dist/commonjs/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/commonjs/common/syncfusionWrapper.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SyncfusionWrapper = void 0;
 const controlBase_1 = require("./controlBase");
 class SyncfusionWrapper extends controlBase_1.ControlBase {
     constructor() {
@@ -8,17 +9,26 @@ class SyncfusionWrapper extends controlBase_1.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/commonjs/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;

package/dist/commonjs/configBuider.js

@@ -1,6 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const aurelia_pal_1 = require("aurelia-pal");
+exports.ConfigBuilder = void 0;
+const ej2_multiSelect_1 = require("./widgets/multiSelect/ej2-multiSelect");
+const ej2_schedule_1 = require("./widgets/schedule/ej2-schedule");
+const ej2_fileManager_1 = require("./widgets/fileManager/ej2-fileManager");
+const ej2_sidebar_1 = require("./widgets/sidebar/ej2-sidebar");
+const ej2_DatePicker_1 = require("./widgets/datePicker/ej2-DatePicker");
+const ej2_textBox_1 = require("./widgets/textBox/ej2-textBox");
+const ej2_dateRangePicker_1 = require("./widgets/dateRangePicker/ej2-dateRangePicker");
+const ej2_dateTimePicker_1 = require("./widgets/dateTimePicker/ej2-dateTimePicker");
+const ej2_dashboardLayout_1 = require("./widgets/dashboardLayout/ej2-dashboardLayout");
+const ej2_comboBox_1 = require("./widgets/comboBox/ej2-comboBox");
+const ej2_checkbox_list_1 = require("./widgets/checkbox/ej2-checkbox-list");
+const ej2_checkbox_1 = require("./widgets/checkbox/ej2-checkbox");
+const ej2_button_1 = require("./widgets/button/ej2-button");
+const ej2_autoComplete_1 = require("./widgets/autoComplete/ej2-autoComplete");
+const ej2_accordion_1 = require("./widgets/accordion/ej2-accordion");
+const ej2_dropDownList_1 = require("./widgets/dropDownList/ej2-dropDownList");
+const ej2_grid_1 = require("./widgets/grid/ej2-grid");
+const ej2_listView_1 = require("./widgets/listView/ej2-listView");
+const ej2_maskedTextBox_1 = require("./widgets/maskedTextBox/ej2-maskedTextBox");
+const ej2_numericTextBox_1 = require("./widgets/numericTextBox/ej2-numericTextBox");
+const ej2_pager_1 = require("./widgets/pager/ej2-pager");
+const ej2_progress_button_1 = require("./widgets/progressButton/ej2-progress-button");
+const ej2_radio_1 = require("./widgets/radio/ej2-radio");
+const ej2_slider_1 = require("./widgets/slider/ej2-slider");
+const ej2_switch_1 = require("./widgets/switch/ej2-switch");
+const ej2_timePicker_1 = require("./widgets/timePicker/ej2-timePicker");
+const ej2_treeView_1 = require("./widgets/treeView/ej2-treeView");
+const ej2_uploader_1 = require("./widgets/uploader/ej2-uploader");
+const ej2_splitter_1 = require("./widgets/splitter/ej2-splitter");
+const ej2_dropDownTree_1 = require("./widgets/dropDownTree/ej2-dropDownTree");
 class ConfigBuilder {
     constructor() {
         this.resources = [];
@@ -19,14 +49,20 @@ class ConfigBuilder {
             .ej2DateTimePicker()
             .ej2DashboardLayout()
             .ej2DropDownList()
+            .ej2DropDownTree()
+            .ej2FileManager()
             .ej2Grid()
             .ej2ListView()
             .ej2MaskedTextBox()
+            .ej2MultiSelect()
             .ej2NumericTextBox()
             .ej2Pager()
             .ej2ProgressButton()
             .ej2Radio()
+            .ej2Schedule()
+            .ej2Sidebar()
             .ej2Slider()
+            .ej2Splitter()
             .ej2Switch()
             .ej2TextBox()
             .ej2TimePicker()
@@ -41,36 +77,11 @@ class ConfigBuilder {
         switch (theme) {
             case "material":
                 return this.materialTheme();
-            case "fabric":
-                return this.fabricTheme();
-            case "bootstrap":
-                return this.bootstrapTheme();
-            case "bootstrap4":
-                return this.bootstrap4Theme();
-            case "highcontrast":
-                return this.highcontrastTheme();
             default:
                 return this;
         }
     }
     materialTheme() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("@syncfusion/ej2/material.css"));
-        return this;
-    }
-    fabricTheme() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("@syncfusion/ej2/fabric.css"));
-        return this;
-    }
-    bootstrapTheme() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("@syncfusion/ej2/bootstrap.css"));
-        return this;
-    }
-    bootstrap4Theme() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("@syncfusion/ej2/bootstrap4.css"));
-        return this;
-    }
-    highcontrastTheme() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("@syncfusion/ej2/highcontrast.css"));
         return this;
     }
     withoutGlobalResources() {
@@ -78,99 +89,123 @@ class ConfigBuilder {
         return this;
     }
     ej2Accordion() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/accordion/ej2-accordion'));
+        this.resources.push(ej2_accordion_1.Ej2Accordion);
         return this;
     }
     ej2AutoComplete() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/autoComplete/ej2-autoComplete'));
+        this.resources.push(ej2_autoComplete_1.Ej2AutoComplete);
         return this;
     }
     ej2Button() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/button/ej2-button"));
+        this.resources.push(ej2_button_1.Ej2Button);
         return this;
     }
     ej2Checkbox() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/checkbox/ej2-checkbox"));
+        this.resources.push(ej2_checkbox_1.Ej2Checkbox);
         return this;
     }
     ej2CheckboxList() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/checkbox/ej2-checkbox-list"));
+        this.resources.push(ej2_checkbox_list_1.Ej2CheckboxList);
         return this;
     }
     ej2ComboBox() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/comboBox/ej2-comboBox'));
+        this.resources.push(ej2_comboBox_1.Ej2ComboBox);
         return this;
     }
     ej2DashboardLayout() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/dashboardLayout/ej2-dashboardLayout'));
+        this.resources.push(ej2_dashboardLayout_1.Ej2DashboardLayout);
         return this;
     }
     ej2DatePicker() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/datePicker/ej2-DatePicker'));
+        this.resources.push(ej2_DatePicker_1.Ej2DatePicker);
         return this;
     }
     ej2DateRangePicker() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/dateRangePicker/ej2-dateRangePicker'));
+        this.resources.push(ej2_dateRangePicker_1.Ej2DateRangePicker);
         return this;
     }
     ej2DateTimePicker() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/dateTimePicker/ej2-dateTimePicker'));
+        this.resources.push(ej2_dateTimePicker_1.Ej2DateTimePicker);
         return this;
     }
     ej2DropDownList() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/dropDownList/ej2-dropDownList'));
+        this.resources.push(ej2_dropDownList_1.Ej2DropDownList);
+        return this;
+    }
+    ej2DropDownTree() {
+        this.resources.push(ej2_dropDownTree_1.Ej2DropDownTree);
+        return this;
+    }
+    ej2FileManager() {
+        this.resources.push(ej2_fileManager_1.Ej2FileManager);
         return this;
     }
     ej2Grid() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/grid/ej2-grid"));
+        this.resources.push(ej2_grid_1.Ej2Grid);
         return this;
     }
     ej2ListView() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/listView/ej2-listView'));
+        this.resources.push(ej2_listView_1.Ej2ListView);
         return this;
     }
     ej2MaskedTextBox() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/maskedTextBox/ej2-maskedTextBox'));
+        this.resources.push(ej2_maskedTextBox_1.Ej2MaskedTextBox);
+        return this;
+    }
+    ej2MultiSelect() {
+        this.resources.push(ej2_multiSelect_1.Ej2MultiSelect);
         return this;
     }
     ej2NumericTextBox() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/numericTextBox/ej2-numericTextBox'));
+        this.resources.push(ej2_numericTextBox_1.Ej2NumericTextBox);
         return this;
     }
     ej2Pager() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/pager/ej2-pager'));
+        this.resources.push(ej2_pager_1.Ej2Pager);
         return this;
     }
     ej2ProgressButton() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/progressButton/ej2-progress-button"));
+        this.resources.push(ej2_progress_button_1.Ej2ProgressButton);
         return this;
     }
     ej2Radio() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/radio/ej2-radio"));
+        this.resources.push(ej2_radio_1.Ej2Radio);
+        return this;
+    }
+    ej2Schedule() {
+        this.resources.push(ej2_schedule_1.Ej2Schedule);
+        return this;
+    }
+    ej2Sidebar() {
+        this.resources.push(ej2_sidebar_1.Ej2Sidebar);
         return this;
     }
     ej2Slider() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/slider/ej2-slider'));
+        this.resources.push(ej2_slider_1.Ej2Slider);
+        return this;
+    }
+    ej2Splitter() {
+        this.resources.push(ej2_splitter_1.Ej2Splitter);
         return this;
     }
     ej2Switch() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/switch/ej2-switch'));
+        this.resources.push(ej2_switch_1.Ej2Switch);
         return this;
     }
     ej2TextBox() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/textBox/ej2-textBox"));
+        this.resources.push(ej2_textBox_1.Ej2TextBox);
         return this;
     }
     ej2TimePicker() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/timePicker/ej2-timePicker'));
+        this.resources.push(ej2_timePicker_1.Ej2TimePicker);
         return this;
     }
     ej2TreeView() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName('./widgets/treeView/ej2-treeView'));
+        this.resources.push(ej2_treeView_1.Ej2TreeView);
         return this;
     }
     ej2Uploader() {
-        this.resources.push(aurelia_pal_1.PLATFORM.moduleName("./widgets/uploader/ej2-uploader"));
+        this.resources.push(ej2_uploader_1.Ej2Uploader);
         return this;
     }
 }

package/dist/commonjs/controlBindings.d.ts

@@ -49,6 +49,16 @@ export declare const ControlBindings: {
         twoWay: string[];
         events: string[];
     };
+    dropDownTree: {
+        oneWay: string[];
+        twoWay: string[];
+        events: string[];
+    };
+    fileManager: {
+        oneWay: string[];
+        twoWay: any[];
+        events: string[];
+    };
     grid: {
         oneWay: string[];
         fromView: string[];
@@ -64,12 +74,18 @@ export declare const ControlBindings: {
         twoWay: string[];
         events: string[];
     };
+    multiSelect: {
+        oneWay: string[];
+        twoWay: string[];
+        events: string[];
+    };
     numericTextBox: {
         oneWay: string[];
         twoWay: string[];
         events: string[];
     };
     pager: {
+        oneWay: string[];
         twoWay: string[];
         events: string[];
     };
@@ -81,11 +97,23 @@ export declare const ControlBindings: {
         oneWay: string[];
         events: string[];
     };
+    schedule: {
+        oneWay: string[];
+        events: string[];
+    };
+    sidebar: {
+        oneWay: string[];
+        events: string[];
+    };
     slider: {
         oneWay: string[];
         twoWay: string[];
         events: string[];
     };
+    splitter: {
+        oneWay: string[];
+        events: string[];
+    };
     switch: {
         oneWay: string[];
         twoWay: string[];