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

package/dist/native-modules/widgets/button/ej2-button.js

@@ -5,25 +5,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Button } from '@syncfusion/ej2-buttons';
+import { inlineView, customElement } from 'aurelia-framework';
 import { generateBindables } from '../../utilities/decorator';
 import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
 let Ej2Button = class Ej2Button extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
         this.clickEvent = null;
+        this._onClick = null;
         this.syncfusionWidgetType = Button;
     }
     onWidgetCreated() {
+        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();
     }
@@ -36,8 +40,13 @@ let Ej2Button = class Ej2Button extends SyncfusionWrapper {
     dataBind() {
         this.widget.dataBind();
     }
+    detached() {
+        this.widget.element.removeEventListener("click", this._onClick, false);
+    }
 };
 Ej2Button = __decorate([
-    generateBindables("button")
+    generateBindables("button"),
+    inlineView('<template><button element.ref="widgetElement"><slot></slot></button></template>'),
+    customElement('ej2-button')
 ], Ej2Button);
 export { Ej2Button };

package/dist/native-modules/widgets/checkbox/ej2-checkbox-list.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { bindable } from "aurelia-framework";
+import { bindable, customElement, inlineView } from "aurelia-framework";
 import { constants } from "../../common/constants";
-export class Ej2CheckboxList {
+let Ej2CheckboxList = class Ej2CheckboxList {
     constructor() {
         this.dataSource = [];
         this.selectedItems = [];
@@ -21,7 +21,6 @@ export class Ej2CheckboxList {
     attached() {
     }
     checkboxClick(option, ej2Checkbox) {
-        console.log("matcher", this.matcher);
         if (ej2Checkbox[`${constants.bindablePrefix}checked`]) {
             if ((this.matcher && this.selectedItems.find((x) => this.matcher(x, option))) || !this.selectedItems.includes(option)) {
                 this.selectedItems.push(option);
@@ -39,7 +38,7 @@ export class Ej2CheckboxList {
     isMatch(option) {
         return this.selectedItems.findIndex((x) => this.matcher(x, option)) !== -1;
     }
-}
+};
 __decorate([
     bindable,
     __metadata("design:type", Array)
@@ -60,3 +59,16 @@ __decorate([
     bindable,
     __metadata("design:type", Function)
 ], Ej2CheckboxList.prototype, "matcher", void 0);
+Ej2CheckboxList = __decorate([
+    customElement("ej2-checkbox-list"),
+    inlineView(`<template>
+  <div repeat.for="option of dataSource" css="\${orientation === 'horizontal' ? 'display: inline;' : ''}">
+    <ej2-checkbox view-model.ref="viewModels[$index]" e-label.bind="optionModel? option[optionModel.label]: option"
+      e-name.bind="optionModel? option[optionModel.name]: option"
+      click.delegate="checkboxClick(option, viewModels[$index])"
+      e-checked.bind="selectedItems.length >0 && matcher? isMatch(option) : selectedItems.indexOf(option) !== -1">
+    </ej2-checkbox>
+  </div>
+</template>`)
+], Ej2CheckboxList);
+export { Ej2CheckboxList };

package/dist/native-modules/widgets/checkbox/ej2-checkbox.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { CheckBox } from '@syncfusion/ej2-buttons';
-import { autoinject } from 'aurelia-framework';
+import { autoinject, inlineView, customElement, transient } from 'aurelia-framework';
 import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
 import { generateBindables } from '../../utilities/decorator';
 import { constants } from '../../common/constants';
@@ -16,6 +16,7 @@ let Ej2Checkbox = class Ej2Checkbox extends SyncfusionWrapper {
         this.checkedSubscription = null;
     }
     onWidgetCreated() {
+        this.widget.element.addEventListener("click", this._onClick.bind(this));
     }
     onWrapperCreated() {
     }
@@ -40,11 +41,15 @@ let Ej2Checkbox = class Ej2Checkbox extends SyncfusionWrapper {
     }
     detached() {
         this.checkedSubscription.dispose();
+        this.widget.element.removeEventListener("click", this._onClick);
         super.detached();
     }
 };
 Ej2Checkbox = __decorate([
     autoinject,
-    generateBindables("checkbox")
+    transient(),
+    generateBindables("checkbox"),
+    customElement("ej2-checkbox"),
+    inlineView(`<template><input element.ref="widgetElement" type="checkbox" /></template>`)
 ], Ej2Checkbox);
 export { Ej2Checkbox };

package/dist/native-modules/widgets/comboBox/ej2-comboBox.js

@@ -8,6 +8,7 @@ import { constants } from '../../common/constants';
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { ComboBox } from "@syncfusion/ej2-dropdowns";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2ComboBox = class Ej2ComboBox extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -24,6 +25,8 @@ let Ej2ComboBox = class Ej2ComboBox extends SyncfusionWrapper {
     }
 };
 Ej2ComboBox = __decorate([
-    generateBindables("comboBox")
+    generateBindables("comboBox"),
+    inlineView(`<template><input type="text" tabindex="1" element.ref="widgetElement" /></template>`),
+    customElement('ej2-combo-box')
 ], Ej2ComboBox);
 export { Ej2ComboBox };

package/dist/native-modules/widgets/dashboardLayout/ej2-dashboardLayout.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { DashboardLayout } from '@syncfusion/ej2-layouts';
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2DashboardLayout = class Ej2DashboardLayout extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -18,6 +19,8 @@ let Ej2DashboardLayout = class Ej2DashboardLayout extends SyncfusionWrapper {
     }
 };
 Ej2DashboardLayout = __decorate([
-    generateBindables("dashboardLayout")
+    generateBindables("dashboardLayout"),
+    inlineView(`<template><div class="dashboard-container"><div element.ref="widgetElement"><slot></slot></div></div></template>`),
+    customElement("ej2-dashboard-layout")
 ], Ej2DashboardLayout);
 export { Ej2DashboardLayout };

package/dist/native-modules/widgets/datePicker/ej2-DatePicker.js

@@ -8,6 +8,7 @@ import { constants } from './../../common/constants';
 import { DatePicker } from "@syncfusion/ej2-calendars";
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2DatePicker = class Ej2DatePicker extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -24,6 +25,8 @@ let Ej2DatePicker = class Ej2DatePicker extends SyncfusionWrapper {
     }
 };
 Ej2DatePicker = __decorate([
-    generateBindables("datePicker")
+    generateBindables("datePicker"),
+    inlineView(`<template><input element.ref="widgetElement" /></template>`),
+    customElement("ej2-date-picker")
 ], Ej2DatePicker);
 export { Ej2DatePicker };

package/dist/native-modules/widgets/dateRangePicker/ej2-dateRangePicker.js

@@ -8,6 +8,7 @@ import { constants } from './../../common/constants';
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { DateRangePicker } from "@syncfusion/ej2-calendars";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2DateRangePicker = class Ej2DateRangePicker extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -26,6 +27,8 @@ let Ej2DateRangePicker = class Ej2DateRangePicker extends SyncfusionWrapper {
     }
 };
 Ej2DateRangePicker = __decorate([
-    generateBindables("dateRangePicker")
+    generateBindables("dateRangePicker"),
+    customElement('ej2-date-range-picker'),
+    inlineView(`<template><input element.ref="widgetElement" /></template>`)
 ], Ej2DateRangePicker);
 export { Ej2DateRangePicker };

package/dist/native-modules/widgets/dateTimePicker/ej2-dateTimePicker.js

@@ -8,6 +8,7 @@ import { constants } from './../../common/constants';
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { DateTimePicker } from "@syncfusion/ej2-calendars";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2DateTimePicker = class Ej2DateTimePicker extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -24,6 +25,8 @@ let Ej2DateTimePicker = class Ej2DateTimePicker extends SyncfusionWrapper {
     }
 };
 Ej2DateTimePicker = __decorate([
-    generateBindables("dateTimePicker")
+    generateBindables("dateTimePicker"),
+    inlineView(`<template><input element.ref="widgetElement" /></template>`),
+    customElement('ej2-date-time-picker')
 ], Ej2DateTimePicker);
 export { Ej2DateTimePicker };

package/dist/native-modules/widgets/dropDownList/ej2-dropDownList.js

@@ -8,6 +8,7 @@ import { constants } from './../../common/constants';
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { DropDownList } from "@syncfusion/ej2-dropdowns";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2DropDownList = class Ej2DropDownList extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -28,6 +29,8 @@ let Ej2DropDownList = class Ej2DropDownList extends SyncfusionWrapper {
     }
 };
 Ej2DropDownList = __decorate([
-    generateBindables("dropDownList")
+    generateBindables("dropDownList"),
+    inlineView(`<template><div><slot><input /></slot></div></template>`),
+    customElement('ej2-drop-down-list')
 ], Ej2DropDownList);
 export { Ej2DropDownList };

package/dist/native-modules/widgets/dropDownTree/ej2-dropDownTree.d.ts

@@ -0,0 +1,8 @@
+import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
+import { DropDownTree, DropDownTreeModel } from '@syncfusion/ej2-dropdowns';
+export declare class Ej2DropDownTree extends SyncfusionWrapper<DropDownTree, DropDownTreeModel> {
+    protected syncfusionWidgetType: typeof DropDownTree;
+    protected onWrapperCreated(): void;
+    protected onWidgetCreated(): void;
+    onChange(args: any): void;
+}

package/dist/native-modules/widgets/dropDownTree/ej2-dropDownTree.js

@@ -0,0 +1,32 @@
+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;
+};
+import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
+import { DropDownTree } from '@syncfusion/ej2-dropdowns';
+import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
+import { constants } from './../../common/constants';
+let Ej2DropDownTree = class Ej2DropDownTree extends SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = DropDownTree;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+        let _this = this;
+        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
+    }
+    onChange(args) {
+        this[`${constants.bindablePrefix}value`] = args.value;
+    }
+};
+Ej2DropDownTree = __decorate([
+    generateBindables("dropDownTree"),
+    customElement('ej2-drop-down-tree'),
+    inlineView('<template><input type="text" element.ref="widgetElement" /></template>')
+], Ej2DropDownTree);
+export { Ej2DropDownTree };

package/dist/native-modules/widgets/fileManager/ej2-fileManager.d.ts

@@ -0,0 +1,9 @@
+import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
+import { FileManager, FileManagerModel } from "@syncfusion/ej2-filemanager";
+export declare class Ej2FileManager extends SyncfusionWrapper<FileManager, FileManagerModel> {
+    protected syncfusionWidgetType: typeof FileManager;
+    id: string;
+    onBeforeWidgetInstantiation(): void;
+    protected onWidgetCreated(): void;
+    protected onWrapperCreated(): void;
+}

package/dist/native-modules/widgets/fileManager/ej2-fileManager.js

@@ -0,0 +1,31 @@
+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;
+};
+import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
+import { generateBindables } from '../../utilities/decorator';
+import { inlineView, customElement } from "aurelia-framework";
+import { FileManager, Toolbar, NavigationPane, DetailsView, ContextMenu } from "@syncfusion/ej2-filemanager";
+import { v4 as uuidv4 } from "uuid";
+let Ej2FileManager = class Ej2FileManager extends SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = FileManager;
+        this.id = `fm-${uuidv4()}`;
+    }
+    onBeforeWidgetInstantiation() {
+        FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu);
+    }
+    onWidgetCreated() {
+    }
+    onWrapperCreated() {
+    }
+};
+Ej2FileManager = __decorate([
+    generateBindables("fileManager"),
+    inlineView(`<template><div id.bind="id" element.ref="widgetElement"></div></template>`),
+    customElement('ej2-file-manager')
+], Ej2FileManager);
+export { Ej2FileManager };

package/dist/native-modules/widgets/grid/ej2-grid.js

@@ -7,76 +7,77 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
 import { generateBindables } from '../../utilities/decorator';
 import { Grid, Selection, Page, Edit, Reorder, Sort, ColumnChooser, Toolbar, Filter, Group, Aggregate, ColumnMenu, DetailRow, ContextMenu, Freeze, Resize, RowDD, Search, Print, VirtualScroll, ExcelExport, PdfExport } from '@syncfusion/ej2-grids';
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2Grid = class Ej2Grid extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
         this.syncfusionWidgetType = Grid;
     }
     onBeforeWidgetInstantiation() {
-        if (this.eModel.allowPaging) {
+        if (this._eModel.allowPaging) {
             Grid.Inject(Page);
         }
-        if (this.eModel.allowSelection) {
+        if (this._eModel.allowSelection) {
             Grid.Inject(Selection);
         }
-        if (this.eModel.editSettings) {
+        if (this._eModel.editSettings) {
             Grid.Inject(Edit);
         }
-        if (this.eModel.allowReordering) {
+        if (this._eModel.allowReordering) {
             Grid.Inject(Reorder);
         }
-        if (this.eModel.allowSorting) {
+        if (this._eModel.allowSorting) {
             Grid.Inject(Sort);
         }
-        if (this.eModel.showColumnChooser) {
+        if (this._eModel.showColumnChooser) {
             Grid.Inject(ColumnChooser);
         }
-        if (this.eModel.toolbar) {
+        if (this._eModel.toolbar) {
             Grid.Inject(Toolbar);
         }
-        if (this.eModel.editSettings) {
+        if (this._eModel.editSettings) {
             Grid.Inject(Edit);
         }
-        if (this.eModel.filterSettings) {
+        if (this._eModel.filterSettings) {
             Grid.Inject(Filter);
         }
-        if (this.eModel.groupSettings) {
+        if (this._eModel.groupSettings) {
             Grid.Inject(Group);
         }
-        if (this.eModel.aggregates) {
+        if (this._eModel.aggregates) {
             Grid.Inject(Aggregate);
         }
-        if (this.eModel.showColumnMenu) {
+        if (this._eModel.showColumnMenu) {
             Grid.Inject(ColumnMenu);
         }
-        if (this.eModel.detailTemplate) {
+        if (this._eModel.detailTemplate) {
             Grid.Inject(DetailRow);
         }
-        if (this.eModel.contextMenuItems) {
+        if (this._eModel.contextMenuItems) {
             Grid.Inject(ContextMenu);
         }
-        if (this.eModel.frozenColumns || this.eModel.frozenRows) {
+        if (this._eModel.frozenColumns || this._eModel.frozenRows) {
             Grid.Inject(Freeze);
         }
-        if (this.eModel.allowResizing) {
+        if (this._eModel.allowResizing) {
             Grid.Inject(Resize);
         }
-        if (this.eModel.allowRowDragAndDrop) {
+        if (this._eModel.allowRowDragAndDrop) {
             Grid.Inject(RowDD);
         }
-        if (this.eModel.searchSettings) {
+        if (this._eModel.searchSettings) {
             Grid.Inject(Search);
         }
-        if (this.eModel.printMode) {
+        if (this._eModel.printMode) {
             Grid.Inject(Print);
         }
-        if (this.eModel.enableVirtualization) {
+        if (this._eModel.enableVirtualization) {
             Grid.Inject(VirtualScroll);
         }
-        if (this.eModel.allowExcelExport) {
+        if (this._eModel.allowExcelExport) {
             Grid.Inject(ExcelExport);
         }
-        if (this.eModel.allowPdfExport) {
+        if (this._eModel.allowPdfExport) {
             Grid.Inject(PdfExport);
         }
     }
@@ -86,6 +87,8 @@ let Ej2Grid = class Ej2Grid extends SyncfusionWrapper {
     }
 };
 Ej2Grid = __decorate([
-    generateBindables("grid")
+    generateBindables("grid"),
+    inlineView(`<template><div element.ref="widgetElement"></div></template>`),
+    customElement('ej2-grid')
 ], Ej2Grid);
 export { Ej2Grid };

package/dist/native-modules/widgets/listView/ej2-listView.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { ListView, Virtualization } from "@syncfusion/ej2-lists";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from "aurelia-framework";
 let Ej2ListView = class Ej2ListView extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -17,12 +18,14 @@ let Ej2ListView = class Ej2ListView extends SyncfusionWrapper {
     onWidgetCreated() {
     }
     onBeforeWidgetInstantiation() {
-        if (this.eModel.enableVirtualization) {
+        if (this._eModel.enableVirtualization) {
             ListView.Inject(Virtualization);
         }
     }
 };
 Ej2ListView = __decorate([
-    generateBindables("listView")
+    generateBindables("listView"),
+    inlineView(`<template><div element.ref="widgetElement"></div></template>`),
+    customElement('ej2-list-view')
 ], Ej2ListView);
 export { Ej2ListView };

package/dist/native-modules/widgets/maskedTextBox/ej2-maskedTextBox.js

@@ -9,6 +9,7 @@ import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { MaskedTextBox } from "@syncfusion/ej2-inputs";
 import { generateBindables } from "../../utilities/decorator";
 import { enableRipple } from '@syncfusion/ej2-base';
+import { inlineView, customElement } from 'aurelia-framework';
 enableRipple(true);
 let Ej2MaskedTextBox = class Ej2MaskedTextBox extends SyncfusionWrapper {
     constructor() {
@@ -26,6 +27,8 @@ let Ej2MaskedTextBox = class Ej2MaskedTextBox extends SyncfusionWrapper {
     }
 };
 Ej2MaskedTextBox = __decorate([
-    generateBindables("maskedTextBox")
+    generateBindables("maskedTextBox"),
+    inlineView(`<template><input element.ref="widgetElement" /></template>`),
+    customElement('ej2-masked-text-box')
 ], Ej2MaskedTextBox);
 export { Ej2MaskedTextBox };

package/dist/native-modules/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/native-modules/widgets/multiSelect/ej2-multiSelect.js

@@ -0,0 +1,41 @@
+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;
+};
+import { constants } from '../../common/constants';
+import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
+import { MultiSelect } from "@syncfusion/ej2-dropdowns";
+import { generateBindables } from "../../utilities/decorator";
+import { enableRipple } from '@syncfusion/ej2-base';
+import { inlineView, customElement } from 'aurelia-framework';
+enableRipple(true);
+let Ej2MultiSelect = class Ej2MultiSelect extends SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = MultiSelect;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+        let _this = this;
+        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
+    }
+    onInput(args) {
+        this[`${constants.bindablePrefix}value`] = args.value;
+    }
+    onChange(args) {
+        this[`${constants.bindablePrefix}value`] = args.value;
+    }
+    attached() {
+        this.widgetElement = this.element.querySelector("select,input");
+        super.attached();
+    }
+};
+Ej2MultiSelect = __decorate([
+    generateBindables("multiSelect"),
+    inlineView(`<template><div><slot><input /></slot></div></template>`),
+    customElement('ej2-multi-select')
+], Ej2MultiSelect);
+export { Ej2MultiSelect };

package/dist/native-modules/widgets/numericTextBox/ej2-numericTextBox.js

@@ -8,6 +8,7 @@ import { constants } from './../../common/constants';
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { NumericTextBox } from "@syncfusion/ej2-inputs";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from 'aurelia-framework';
 let Ej2NumericTextBox = class Ej2NumericTextBox extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -24,6 +25,8 @@ let Ej2NumericTextBox = class Ej2NumericTextBox extends SyncfusionWrapper {
     }
 };
 Ej2NumericTextBox = __decorate([
-    generateBindables("numericTextBox")
+    generateBindables("numericTextBox"),
+    inlineView(`<template><input element.ref="widgetElement" /></template>`),
+    customElement('ej2-numeric-text-box')
 ], Ej2NumericTextBox);
 export { Ej2NumericTextBox };

package/dist/native-modules/widgets/pager/ej2-pager.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Pager } from "@syncfusion/ej2-grids";
 import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from 'aurelia-framework';
 let Ej2Pager = class Ej2Pager extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
@@ -18,6 +19,8 @@ let Ej2Pager = class Ej2Pager extends SyncfusionWrapper {
     }
 };
 Ej2Pager = __decorate([
-    generateBindables("pager")
+    generateBindables("pager"),
+    inlineView(`<template><div element.ref="widgetElement"></div></template>`),
+    customElement('ej2-pager')
 ], Ej2Pager);
 export { Ej2Pager };

package/dist/native-modules/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;
@@ -13,4 +13,5 @@ export declare class Ej2ProgressButton extends SyncfusionWrapper<ProgressButton,
     progressComplete(): void;
     start(): void;
     stop(): void;
+    detached(): void;
 }

package/dist/native-modules/widgets/progressButton/ej2-progress-button.js

@@ -7,23 +7,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ProgressButton } from '@syncfusion/ej2-splitbuttons';
 import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
 import { generateBindables } from "../../utilities/decorator";
+import { inlineView, customElement } from 'aurelia-framework';
 let Ej2ProgressButton = class Ej2ProgressButton extends SyncfusionWrapper {
     constructor() {
         super(...arguments);
         this.clickEvent = null;
+        this._onClick = null;
         this.syncfusionWidgetType = ProgressButton;
     }
     onWidgetCreated() {
+        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();
     }
@@ -45,8 +49,13 @@ let Ej2ProgressButton = class Ej2ProgressButton extends SyncfusionWrapper {
     stop() {
         this.widget.stop();
     }
+    detached() {
+        this.widget.element.removeEventListener("click", this._onClick, false);
+    }
 };
 Ej2ProgressButton = __decorate([
-    generateBindables("progressButton")
+    generateBindables("progressButton"),
+    inlineView(`<template><button element.ref="widgetElement"><slot></slot></button></template>`),
+    customElement('ej2-progress-button')
 ], Ej2ProgressButton);
 export { Ej2ProgressButton };