aurelia-syncfusion-ej2-bridge 1.0.8 → 1.0.10

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

@@ -0,0 +1,55 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2Button = void 0;
+const ej2_buttons_1 = require("@syncfusion/ej2-buttons");
+const aurelia_framework_1 = require("aurelia-framework");
+const decorator_1 = require("../../utilities/decorator");
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+let Ej2Button = class Ej2Button extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.clickEvent = null;
+        this._onClick = null;
+        this.syncfusionWidgetType = ej2_buttons_1.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
+        });
+    }
+    refresh() {
+        this.widget.refresh();
+    }
+    focusIn() {
+        this.widget.focusIn();
+    }
+    click() {
+        this.widget.click();
+    }
+    dataBind() {
+        this.widget.dataBind();
+    }
+    detached() {
+        this.widget.element.removeEventListener("click", this._onClick, false);
+    }
+};
+exports.Ej2Button = Ej2Button;
+exports.Ej2Button = Ej2Button = __decorate([
+    (0, decorator_1.generateBindables)("button"),
+    (0, aurelia_framework_1.inlineView)('<template><button element.ref="widgetElement"><slot></slot></button></template>'),
+    (0, aurelia_framework_1.customElement)('ej2-button')
+], Ej2Button);

package/dist/commonjs/widgets/checkbox/ej2-checkbox-list.d.ts

@@ -0,0 +1,17 @@
+import { Ej2Checkbox } from "./ej2-checkbox";
+export declare class Ej2CheckboxList {
+    dataSource: any[];
+    selectedItems: any[];
+    optionModel: IOptionModel;
+    orientation: "horizontal" | "vertical";
+    matcher: (a: any, b: any) => boolean;
+    viewModels: Ej2Checkbox[];
+    attached(): void;
+    checkboxClick(option: any, ej2Checkbox: Ej2Checkbox): void;
+    isMatch(option: any): boolean;
+}
+export interface IOptionModel {
+    name: string;
+    value: string;
+    label: string;
+}

package/dist/commonjs/widgets/checkbox/ej2-checkbox-list.js

@@ -0,0 +1,77 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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.Ej2CheckboxList = void 0;
+const aurelia_framework_1 = require("aurelia-framework");
+const constants_1 = require("../../common/constants");
+let Ej2CheckboxList = class Ej2CheckboxList {
+    constructor() {
+        this.dataSource = [];
+        this.selectedItems = [];
+        this.optionModel = null;
+        this.orientation = "horizontal";
+        this.matcher = null;
+        this.viewModels = [];
+    }
+    attached() {
+    }
+    checkboxClick(option, ej2Checkbox) {
+        if (ej2Checkbox[`${constants_1.constants.bindablePrefix}checked`]) {
+            if ((this.matcher && this.selectedItems.find((x) => this.matcher(x, option))) || !this.selectedItems.includes(option)) {
+                this.selectedItems.push(option);
+            }
+        }
+        else {
+            let index = this.matcher ? this.selectedItems.findIndex((x) => this.matcher(x, option)) : this.selectedItems.indexOf(option);
+            if (index !== -1) {
+                this.selectedItems.splice(index, 1);
+            }
+            else {
+            }
+        }
+    }
+    isMatch(option) {
+        return this.selectedItems.findIndex((x) => this.matcher(x, option)) !== -1;
+    }
+};
+exports.Ej2CheckboxList = Ej2CheckboxList;
+__decorate([
+    aurelia_framework_1.bindable,
+    __metadata("design:type", Array)
+], Ej2CheckboxList.prototype, "dataSource", void 0);
+__decorate([
+    aurelia_framework_1.bindable,
+    __metadata("design:type", Array)
+], Ej2CheckboxList.prototype, "selectedItems", void 0);
+__decorate([
+    aurelia_framework_1.bindable,
+    __metadata("design:type", Object)
+], Ej2CheckboxList.prototype, "optionModel", void 0);
+__decorate([
+    aurelia_framework_1.bindable,
+    __metadata("design:type", String)
+], Ej2CheckboxList.prototype, "orientation", void 0);
+__decorate([
+    aurelia_framework_1.bindable,
+    __metadata("design:type", Function)
+], Ej2CheckboxList.prototype, "matcher", void 0);
+exports.Ej2CheckboxList = Ej2CheckboxList = __decorate([
+    (0, aurelia_framework_1.customElement)("ej2-checkbox-list"),
+    (0, aurelia_framework_1.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);

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

@@ -0,0 +1,12 @@
+import { Disposable } from 'aurelia-binding';
+import { CheckBox, CheckBoxModel } from '@syncfusion/ej2-buttons';
+import { SyncfusionWrapper } from '../../common/syncfusionWrapper';
+export declare class Ej2Checkbox extends SyncfusionWrapper<CheckBox, CheckBoxModel> {
+    protected onWidgetCreated(): void;
+    protected onWrapperCreated(): void;
+    protected syncfusionWidgetType: typeof CheckBox;
+    checkedSubscription: Disposable;
+    onBind(): void;
+    _onClick(event: Event): void;
+    detached(): void;
+}

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

@@ -0,0 +1,58 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2Checkbox = void 0;
+const ej2_buttons_1 = require("@syncfusion/ej2-buttons");
+const aurelia_framework_1 = require("aurelia-framework");
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+const decorator_1 = require("../../utilities/decorator");
+const constants_1 = require("../../common/constants");
+let Ej2Checkbox = class Ej2Checkbox extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_buttons_1.CheckBox;
+        this.checkedSubscription = null;
+    }
+    onWidgetCreated() {
+        this.widget.element.addEventListener("click", this._onClick.bind(this));
+    }
+    onWrapperCreated() {
+    }
+    onBind() {
+        this.widget.change = () => {
+            this[`${constants_1.constants.bindablePrefix}checked`] = this.widget.checked;
+        };
+        this.checkedSubscription = this.bindingEngine.propertyObserver(this, "checked").subscribe((newValue) => {
+            this.widget.checked = newValue;
+        });
+    }
+    _onClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.taskQueue.queueTask(() => {
+            let clickEvent = new CustomEvent("on-click", {
+                bubbles: true,
+                detail: { checked: this[`${constants_1.constants.bindablePrefix}checked`] }
+            });
+            this.element.dispatchEvent(clickEvent);
+        });
+    }
+    detached() {
+        this.checkedSubscription.dispose();
+        this.widget.element.removeEventListener("click", this._onClick);
+        super.detached();
+    }
+};
+exports.Ej2Checkbox = Ej2Checkbox;
+exports.Ej2Checkbox = Ej2Checkbox = __decorate([
+    aurelia_framework_1.autoinject,
+    (0, aurelia_framework_1.transient)(),
+    (0, decorator_1.generateBindables)("checkbox"),
+    (0, aurelia_framework_1.customElement)("ej2-checkbox"),
+    (0, aurelia_framework_1.inlineView)(`<template><input element.ref="widgetElement" type="checkbox" /></template>`)
+], Ej2Checkbox);

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2ColorPicker = void 0;
+const constants_1 = require("../../common/constants");
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+const decorator_1 = require("../../utilities/decorator");
+const aurelia_framework_1 = require("aurelia-framework");
+const inputs_1 = require("@syncfusion/ej2/inputs");
+let Ej2ColorPicker = class Ej2ColorPicker extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = inputs_1.ColorPicker;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+        let _this = this;
+        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
+    }
+    onChange(args) {
+        this[`${constants_1.constants.bindablePrefix}value`] = args.value;
+    }
+};
+exports.Ej2ColorPicker = Ej2ColorPicker;
+exports.Ej2ColorPicker = Ej2ColorPicker = __decorate([
+    (0, decorator_1.generateBindables)("colorPicker"),
+    (0, aurelia_framework_1.inlineView)(`<template><input type="type="color""  element.ref="widgetElement" /></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-color-picker')
+], Ej2ColorPicker);

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { SyncfusionWrapper } from "../../common/syncfusionWrapper";
+import { DashboardLayout, DashboardLayoutModel } from '@syncfusion/ej2-layouts';
+export declare class Ej2DashboardLayout extends SyncfusionWrapper<DashboardLayout, DashboardLayoutModel> {
+    protected syncfusionWidgetType: typeof DashboardLayout;
+    protected onWrapperCreated(): void;
+    protected onWidgetCreated(): void;
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2DashboardLayout = void 0;
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+const ej2_layouts_1 = require("@syncfusion/ej2-layouts");
+const decorator_1 = require("../../utilities/decorator");
+const aurelia_framework_1 = require("aurelia-framework");
+let Ej2DashboardLayout = class Ej2DashboardLayout extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_layouts_1.DashboardLayout;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+    }
+};
+exports.Ej2DashboardLayout = Ej2DashboardLayout;
+exports.Ej2DashboardLayout = Ej2DashboardLayout = __decorate([
+    (0, decorator_1.generateBindables)("dashboardLayout"),
+    (0, aurelia_framework_1.inlineView)(`<template><div class="dashboard-container"><div element.ref="widgetElement"><slot></slot></div></div></template>`),
+    (0, aurelia_framework_1.customElement)("ej2-dashboard-layout")
+], Ej2DashboardLayout);

package/dist/commonjs/widgets/datePicker/ej2-DatePicker.d.ts

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

package/dist/commonjs/widgets/datePicker/ej2-DatePicker.js

@@ -0,0 +1,35 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2DatePicker = void 0;
+const constants_1 = require("./../../common/constants");
+const ej2_calendars_1 = require("@syncfusion/ej2-calendars");
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+const decorator_1 = require("../../utilities/decorator");
+const aurelia_framework_1 = require("aurelia-framework");
+let Ej2DatePicker = class Ej2DatePicker extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_calendars_1.DatePicker;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+        let _this = this;
+        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
+    }
+    onChange(args) {
+        this[`${constants_1.constants.bindablePrefix}value`] = args.value;
+    }
+};
+exports.Ej2DatePicker = Ej2DatePicker;
+exports.Ej2DatePicker = Ej2DatePicker = __decorate([
+    (0, decorator_1.generateBindables)("datePicker"),
+    (0, aurelia_framework_1.inlineView)(`<template><input element.ref="widgetElement" /></template>`),
+    (0, aurelia_framework_1.customElement)("ej2-date-picker")
+], Ej2DatePicker);

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2DateRangePicker = 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 Ej2DateRangePicker = class Ej2DateRangePicker extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_calendars_1.DateRangePicker;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+        let _this = this;
+        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
+    }
+    onChange(args) {
+        this[`${constants_1.constants.bindablePrefix}value`] = args.value;
+        this[`${constants_1.constants.bindablePrefix}startDate`] = args.startDate;
+        this[`${constants_1.constants.bindablePrefix}endDate`] = args.endDate;
+    }
+};
+exports.Ej2DateRangePicker = Ej2DateRangePicker;
+exports.Ej2DateRangePicker = Ej2DateRangePicker = __decorate([
+    (0, decorator_1.generateBindables)("dateRangePicker"),
+    (0, aurelia_framework_1.customElement)('ej2-date-range-picker'),
+    (0, aurelia_framework_1.inlineView)(`<template><input element.ref="widgetElement" /></template>`)
+], Ej2DateRangePicker);

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2DateTimePicker = 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 Ej2DateTimePicker = class Ej2DateTimePicker extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_calendars_1.DateTimePicker;
+    }
+    onWrapperCreated() {
+    }
+    onWidgetCreated() {
+        let _this = this;
+        this.widget.addEventListener("change", (args) => { _this.onChange(args); });
+    }
+    onChange(args) {
+        this[`${constants_1.constants.bindablePrefix}value`] = args.value;
+    }
+};
+exports.Ej2DateTimePicker = Ej2DateTimePicker;
+exports.Ej2DateTimePicker = Ej2DateTimePicker = __decorate([
+    (0, decorator_1.generateBindables)("dateTimePicker"),
+    (0, aurelia_framework_1.inlineView)(`<template><input element.ref="widgetElement" /></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-date-time-picker')
+], Ej2DateTimePicker);

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

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

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

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

package/dist/commonjs/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/commonjs/widgets/dropDownTree/ej2-dropDownTree.js

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

package/dist/commonjs/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/commonjs/widgets/fileManager/ej2-fileManager.js

@@ -0,0 +1,34 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ej2FileManager = void 0;
+const syncfusionWrapper_1 = require("../../common/syncfusionWrapper");
+const decorator_1 = require("../../utilities/decorator");
+const aurelia_framework_1 = require("aurelia-framework");
+const ej2_filemanager_1 = require("@syncfusion/ej2-filemanager");
+const uuid_1 = require("uuid");
+let Ej2FileManager = class Ej2FileManager extends syncfusionWrapper_1.SyncfusionWrapper {
+    constructor() {
+        super(...arguments);
+        this.syncfusionWidgetType = ej2_filemanager_1.FileManager;
+        this.id = `fm-${(0, uuid_1.v4)()}`;
+    }
+    onBeforeWidgetInstantiation() {
+        ej2_filemanager_1.FileManager.Inject(ej2_filemanager_1.Toolbar, ej2_filemanager_1.NavigationPane, ej2_filemanager_1.DetailsView, ej2_filemanager_1.ContextMenu);
+    }
+    onWidgetCreated() {
+    }
+    onWrapperCreated() {
+    }
+};
+exports.Ej2FileManager = Ej2FileManager;
+exports.Ej2FileManager = Ej2FileManager = __decorate([
+    (0, decorator_1.generateBindables)("fileManager"),
+    (0, aurelia_framework_1.inlineView)(`<template><div id.bind="id" element.ref="widgetElement"></div></template>`),
+    (0, aurelia_framework_1.customElement)('ej2-file-manager')
+], Ej2FileManager);