jpf 5.0.3 → 5.0.7

package/src/controls/kendo/Grid/Grid.ts

@@ -1,24 +1,22 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.grid.js";
-import { View, registerView } from "../../../framework/View";
-import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
-import { ObservableArrayProperty, ObservableProperty } from "../../../framework/observable";
-import { unwrap, utils, Subscribable, isSubscribable } from "knockout";
-import { ChangedItem } from "../DataSource/DataSource";
-import { knockoutObservableToKendoObservableArray, getUnderlyingObject } from "../ObservableObject/ObservableObject";
-
-export interface GridProperties<TItem> extends Properties {
-    items?: Array<TItem> | Subscribable<Array<TItem>>;
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { isObservableArray, isObservableValue, unwrap, ISubscribable, isSubscribable } from "../../../framework/observable";
+import { IChangedItem as ChangedItem } from "../DataSource/DataSource";
+
+export interface IGridProperties<TItem> extends IProperties {
+    items?: Array<TItem> | ISubscribable<Array<TItem>>;
     idProperty?: keyof TItem;
     columns?: Array<kendo.ui.GridColumn>;
     pageSize?: number;
     sortable?: boolean | kendo.ui.GridSortable;
     scrollable?: kendo.ui.GridScrollable;
     editable?: kendo.ui.GridEditable;
-    filterable?: boolean | kendo.ui.GridFilterable | Subscribable<boolean | kendo.ui.GridFilterable>;
+    filterable?: boolean | kendo.ui.GridFilterable | ISubscribable<boolean | kendo.ui.GridFilterable>;
     toolbar?: string | Array<string>;
     selectable?: boolean | string;
-    selectedItem?: TItem | Subscribable<TItem>;
-    selectedItems?: Array<TItem> | Subscribable<Array<TItem>>;
+    selectedItem?: TItem | ISubscribable<TItem>;
+    selectedItems?: Array<TItem> | ISubscribable<Array<TItem>>;
     onDataSourceChange?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
     onDataSourceAdd?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
     onDataSourceRemove?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
@@ -26,16 +24,16 @@ export interface GridProperties<TItem> extends Properties {
     onRowContextMenu?: (event: PointerEvent, dataItem: any) => void;
 }
 
-export class GridView<TItem = any> extends View<GridProperties<TItem>> {
-    constructor(properties: GridProperties<TItem>) {
+export class GridElement<TItem = any> extends Element<IGridProperties<TItem>> {
+    constructor(properties: IGridProperties<TItem>) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "KendoGrid"
-                    },
-                    properties
+                        elementType: "KendoGrid"
+                    }
                 )
             }
         );
@@ -47,7 +45,9 @@ export class GridView<TItem = any> extends View<GridProperties<TItem>> {
     private getItemById(id) {
         if (this.properties.idProperty) {
             const items = this.dataSource.data() as any as Array<any>;
-            return utils.arrayFirst(items, (item) => { return item[this.properties.idProperty] === id });
+            return items.find((item) => {
+                return item[this.properties.idProperty] === id;
+            });
         }
 
         throw "Can only getItem when idProperty is set";
@@ -56,29 +56,29 @@ export class GridView<TItem = any> extends View<GridProperties<TItem>> {
     build(): void {
         super.build();
 
-        const viewModel = this.properties;
+        const properties = this.properties;
 
         this.dataSource = new kendo.data.DataSource({
-            data: knockoutObservableToKendoObservableArray(viewModel.items),
+            data: unwrap(properties.items),
             pageSize: this.properties.pageSize || 30,
             change: (event: kendo.data.DataSourceChangeEvent) => {
                 var items = event.items as Array<ChangedItem>;
                 switch (event.action) {
                     case "itemchange":
-                        if (viewModel.onDataSourceChange) {
-                            viewModel.onDataSourceChange(items, event.sender);
+                        if (properties.onDataSourceChange) {
+                            properties.onDataSourceChange(items, event.sender);
                         }
                         break;
 
                     case "add":
-                        if (viewModel.onDataSourceAdd) {
-                            viewModel.onDataSourceAdd(items, event.sender);
+                        if (properties.onDataSourceAdd) {
+                            properties.onDataSourceAdd(items, event.sender);
                         }
                         break;
 
                     case "remove":
-                        if (viewModel.onDataSourceRemove) {
-                            viewModel.onDataSourceRemove(items, event.sender);
+                        if (properties.onDataSourceRemove) {
+                            properties.onDataSourceRemove(items, event.sender);
                         }
                         break;
                 }
@@ -94,29 +94,23 @@ export class GridView<TItem = any> extends View<GridProperties<TItem>> {
             editable: this.properties.editable,
             filterable: unwrap(this.properties.filterable),
             change: (event: kendo.ui.GridChangeEvent) => {
-                if (this.properties.selectedItem) {
-                    const selectedItem = getSelectedDataItem(event.sender);
-                    const observableProperty = this.properties.selectedItem as ObservableProperty;
-                    if (observableProperty.set) {
-                        observableProperty.set(selectedItem);
-                    }
+                if (isObservableValue(properties.selectedItem)) {
+                    const selectedItem = getSelectedDataItem(event.sender) as TItem;
+                    properties.selectedItem.setValue(selectedItem);
                 }
-                if (this.properties.selectedItems) {
-                    const selectedItems = getSelectedDataItems<TItem>(event.sender);
-                    const observableArrayProperty = this.properties.selectedItems as ObservableArrayProperty<TItem>;
-                    if (observableArrayProperty.set) {
-                        observableArrayProperty.set(selectedItems);
-                    }
+
+                if (isObservableArray(properties.selectedItems)) {
+                    properties.selectedItems.setItems(getSelectedDataItems<TItem>(event.sender));
                 }
 
-                if (this.properties.onGridChange) {
-                    this.properties.onGridChange(getSelectedDataItems<TItem>(event.sender), event.sender);
+                if (properties.onGridChange) {
+                    properties.onGridChange(getSelectedDataItems<TItem>(event.sender), event.sender);
                 }
             },
             selectable: this.properties.selectable
         });
 
-        if (viewModel.onRowContextMenu) {
+        if (properties.onRowContextMenu) {
             this.grid.table.contextmenu((event: PointerEvent) => {
                 event.preventDefault();
                 var target = event.target;
@@ -137,70 +131,73 @@ export class GridView<TItem = any> extends View<GridProperties<TItem>> {
                 if (row) {
                     let dataItem = this.grid.dataItem(row);
                     if (dataItem) {
-                        const underlyingObject = getUnderlyingObject(dataItem);
-                        if (underlyingObject) {
-                            dataItem = underlyingObject as any;
-                        }
+                        //const underlyingObject = getUnderlyingObject(dataItem);
+                        //if (underlyingObject) {
+                        //    dataItem = underlyingObject as any;
+                        //}
                         setTimeout(() => {
-                            viewModel.onRowContextMenu(event, dataItem);
+                            properties.onRowContextMenu(event, dataItem);
                         });
 
                     };
                 }
             });
         }
-        if (isSubscribable(viewModel.items)) {
-            this.subscriptions.push(
-                viewModel.items.subscribe((items) => {
+
+        if (isSubscribable(properties.items)) {
+            this.disposers.push(
+                properties.items.subscribe((items) => {
                     if (items) {
-                        this.dataSource.data(new kendo.data.ObservableArray(knockoutObservableToKendoObservableArray(items)));
+                        this.dataSource.data(items);
                     } else {
                         this.dataSource.data([]);
                     }
                 })
             );
         }
-        if (isSubscribable(viewModel.filterable)) {
-            this.subscriptions.push(
-                viewModel.filterable.subscribe((filterable) => {
+
+        if (isSubscribable(properties.filterable)) {
+            this.disposers.push(
+                properties.filterable.subscribe((filterable) => {
                     this.grid.setOptions({ filterable: filterable });
                 })
             );
         }
 
-        if (isSubscribable(viewModel.selectedItem)) {
-            this.subscriptions.push(
-                viewModel.selectedItem.subscribe((selectedItem: TItem) => {
-                    if (selectedItem && viewModel.idProperty) {
+        if (isSubscribable(properties.selectedItem)) {
+            this.disposers.push(
+                properties.selectedItem.subscribe((selectedItem) => {
+                    if (selectedItem && properties.idProperty) {
                         setTimeout(
                             () => {
-                                const id = selectedItem[viewModel.idProperty];
+                                const id = selectedItem[properties.idProperty];
                                 const item = this.getItemById(id);
-                                //Remove previous selected row
-                                this.grid.tbody.find("tr.k-state-selected").removeClass("k-state-selected");
+
+                                this.grid.clearSelection();
+
                                 //Add the selected class to the newly selected row
                                 this.grid.tbody.find("tr[data-uid='" + item.uid + "']").addClass("k-state-selected");
                             },
                             10
                         );
-                    } else {
-                        this.grid.select();
                     }
                 })
             );
         }
 
-        if (isSubscribable(viewModel.selectedItems)) {
-            this.subscriptions.push(
-                viewModel.selectedItems.subscribe((selectedItems: Array<TItem>) => {
-                    if (selectedItems && selectedItems.length > 0 && viewModel.idProperty) {
+        if (isSubscribable(properties.selectedItems)) {
+            this.disposers.push(
+                properties.selectedItems.subscribe((selectedItems) => {
+                    if (selectedItems && selectedItems.length > 0 && properties.idProperty) {
                         setTimeout(
                             () => {
                                 //Remove all previous selected rows
-                                this.grid.tbody.find("tr.k-state-selected").removeClass("k-state-selected");
+                                this.grid.clearSelection();
+
+                                //Select all new selected rows
                                 for (let index = 0; index < selectedItems.length; index++) {
                                     const selectedItem = selectedItems[index];
-                                    const id = selectedItem[viewModel.idProperty];
+                                    const id = selectedItem[properties.idProperty];
                                     const item = this.getItemById(id);
 
                                     //Add the selected class to the newly selected row
@@ -223,18 +220,18 @@ export class GridView<TItem = any> extends View<GridProperties<TItem>> {
     }
 }
 
-export function gridView<TItem>(properties: GridProperties<TItem>) {
-    return new GridView(properties);
+export function createGrid<TItem>(properties: IGridProperties<TItem>) {
+    return new GridElement(properties);
 }
 
 export function getSelectedDataItem<TDataItem>(grid: kendo.ui.Grid): TDataItem {
     const selection = grid.select() as any as Array<any>;
     if (selection.length === 1) {
         const dataItem = grid.dataItem(selection[0]);
-        const underlyingObject = getUnderlyingObject(dataItem);
-        if (underlyingObject) {
-            return underlyingObject as any as TDataItem;
-        }
+        //const underlyingObject = getUnderlyingObject(dataItem);
+        //if (underlyingObject) {
+        //    return underlyingObject as any as TDataItem;
+        //}
         return dataItem.toJSON() as TDataItem;
     }
 
@@ -247,7 +244,7 @@ export function getSelectedDataItems<TItem>(grid: kendo.ui.Grid): Array<TItem> {
     if (selection && selection.length > 0) {
         for (let index = 0; index < selection.length; index++) {
             const dataItem = grid.dataItem(selection[index]);
-            const underlyingObject = getUnderlyingObject(dataItem);
+            const underlyingObject = null; // getUnderlyingObject(dataItem);
             if (underlyingObject) {
                 selectedDataItems.push(underlyingObject);
             } else {
@@ -259,25 +256,25 @@ export function getSelectedDataItems<TItem>(grid: kendo.ui.Grid): Array<TItem> {
     return selectedDataItems;
 }
 
-export class GridViewModel<TItem = any> extends ViewModel implements GridProperties<TItem>
+export class GridProperties<TItem = any> extends Properties implements IGridProperties<TItem>
 {
-    constructor(properties: GridProperties<TItem>) {
+    constructor(properties: IGridProperties<TItem>) {
         super();
         this.setProperties(this, properties);
     }
 
-    items?: Array<TItem> | Subscribable<Array<TItem>>;
+    items?: Array<TItem> | ISubscribable<Array<TItem>>;
     idProperty?: keyof TItem;
     columns?: Array<kendo.ui.GridColumn>;
     pageSize?: number;
     sortable?: boolean | kendo.ui.GridSortable;
     scrollable?: kendo.ui.GridScrollable;
     editable?: kendo.ui.GridEditable;
-    filterable?: boolean | kendo.ui.GridFilterable | Subscribable<boolean | kendo.ui.GridFilterable>;
+    filterable?: boolean | kendo.ui.GridFilterable | ISubscribable<boolean | kendo.ui.GridFilterable>;
     toolbar?: string | Array<string>;
     selectable?: boolean | string;
-    selectedItem?: TItem | Subscribable<TItem>;
-    selectedItems?: Array<TItem> | Subscribable<Array<TItem>>;
+    selectedItem?: TItem | ISubscribable<TItem>;
+    selectedItems?: Array<TItem> | ISubscribable<Array<TItem>>;
     onDataSourceChange?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
     onDataSourceAdd?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
     onDataSourceRemove?: (items: Array<ChangedItem>, dataSource: kendo.data.DataSource) => void;
@@ -285,7 +282,7 @@ export class GridViewModel<TItem = any> extends ViewModel implements GridPropert
     onRowContextMenu?: (event: PointerEvent, dataItem: any) => void;
 }
 
-registerView(
-    GridViewModel,
-    GridView
+registerElement(
+    GridProperties.prototype.constructor,
+    GridElement
 );

package/src/controls/kendo/Menu/Menu.ts

@@ -1,25 +1,25 @@
 import * as  kendo from "@progress/kendo-ui/js/kendo.menu.js";
-import { isObservable, unwrap, Subscribable } from "knockout";
-import { View, render } from "../../../framework/View";
-import { ViewModel, Properties, applyBindings as applyViewModelToElement, extendProperties } from "../../../framework/ViewModel";
-import { HierarchicalListItemProperties , HierarchicalListItemViewModel} from "../../custom/ListItem/ListItem";
+import { isSubscribable, unwrap, ISubscribable } from "../../../framework/observable";
+import { Element, render } from "../../../framework/element";
+import { Properties, IProperties, applyBindings as applyViewModelToElement, extendProperties } from "../../../framework/properties";
+import { HierarchicalListItemProperties, IHierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
 const getContent = "getContent";
 
-export interface MenuProperties extends Properties {
-    items?: Array<HierarchicalListItemProperties| HierarchicalListItemViewModel > | Subscribable<Array<HierarchicalListItemProperties| HierarchicalListItemViewModel>>;
+export interface IMenuProperties extends IProperties {
+    items?: Array<IHierarchicalListItemProperties> | ISubscribable<Array<IHierarchicalListItemProperties>>;
 }
 
-export class MenuView extends View<MenuProperties> {
-    constructor(properties: MenuProperties) {
+export class MenuElement extends Element<IMenuProperties> {
+    constructor(properties: IMenuProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        classNames: ["Menu"],
-                        viewType: "KendoMenu"
-                    },
-                    properties
+                        classNames: ["jpf-menu"],
+                        elementType: "KendoMenu"
+                    }
                 )
             }
         );
@@ -47,12 +47,12 @@ export class MenuView extends View<MenuProperties> {
                     const uid = element.getAttribute("data-uid");
                     const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as any as HierarchicalListItemProperties;
                     if (hierarchicalListItemViewModel) {
-                        applyViewModelToElement(hierarchicalListItemViewModel, element, this.subscriptions);
+                        applyViewModelToElement(hierarchicalListItemViewModel, element, this.disposers);
 
 
                         if (hierarchicalListItemViewModel[getContent]) {
                             const content = hierarchicalListItemViewModel[getContent]();
-                            if (content instanceof ViewModel) {
+                            if (content instanceof Properties) {
                                 const firstChild = element.firstElementChild as HTMLElement;
                                 firstChild.style.padding = "0";
                                 firstChild.innerHTML = "";
@@ -66,23 +66,23 @@ export class MenuView extends View<MenuProperties> {
         );
 
         this.buildItems(unwrap(viewModel.items));
-        if (isObservable(viewModel.items)) {
-            this.subscriptions.push(
-                viewModel.items.subscribe((items) => {
-                    this.buildItems(items);
+        if (isSubscribable(viewModel.items)) {
+            this.disposers.push(
+                viewModel.items.subscribe((items)=>{
+                       this.buildItems(items);
                 })
             );
         }
     }
 
-    private buildItems(listItems: Array<HierarchicalListItemProperties| HierarchicalListItemViewModel>) {
-        const itemDictionary: { [id: string]: HierarchicalListItemProperties } = {};
-        const topLevelItems = new Array<HierarchicalListItemProperties>();
+    private buildItems(listItems: Array<IHierarchicalListItemProperties>) {
+        const itemDictionary: { [id: string]: IHierarchicalListItemProperties } = {};
+        const topLevelItems = new Array<IHierarchicalListItemProperties>();
 
         if (listItems) {
             //Add all visible menuItems to a dictionary
             listItems.forEach((listItem) => {
-                if (listItem as any instanceof ViewModel) {
+                if (listItem as any instanceof Properties) {
                     listItem["attr"] = { postrender: true };
                 }
 
@@ -120,6 +120,6 @@ export class MenuView extends View<MenuProperties> {
     }
 }
 
-export function menuView(properties: MenuProperties) {
-    return new MenuView(properties);
+export function createMenu(properties: IMenuProperties) {
+    return new MenuElement(properties);
 }

package/src/controls/kendo/ObservableObject/ObservableObject.ts

@@ -1,45 +1,45 @@
-import { Subscribable, isObservable, unwrap } from "knockout";
-import * as kendo from "@progress/kendo-ui/js/kendo.data.js";
-
-var getUnderlyingObjectFunctionName = "getUnderlyingObject";
-
-export function knockoutObservableToKendoObservable(object: object): kendo.data.ObservableObject {
-    var observableObject = new kendo.data.ObservableObject();
-    observableObject[getUnderlyingObjectFunctionName] = () => {
-        return object;
-    }
-    Object.keys(object).forEach((key: string) => {
-        var value = object[key];
-
-        observableObject[key] = unwrap(value);
-
-        if (isObservable(value)) {
-            value.subscribe(
-                (newValue) => {
-                    observableObject.set(key, newValue);
-                }
-            );
-        }
-    });
-
-    return observableObject;
-}
-
-export function getUnderlyingObject(observableObject: kendo.data.ObservableObject): object {
-    if (observableObject[getUnderlyingObjectFunctionName]) {
-        return observableObject[getUnderlyingObjectFunctionName]();
-    }
-    return null;
-}
-
-export function knockoutObservableToKendoObservableArray(array: Array<any> | Subscribable<Array<any>>): Array<kendo.data.ObservableObject> {
-
-    var observableObjects = new Array<kendo.data.ObservableObject>();
-    if (array) {
-        unwrap(array).forEach((object) => {
-            observableObjects.push(knockoutObservableToKendoObservable(object));
-        });
-    }
-
-    return observableObjects;
-}
+//import { Subscribable, isSubscribable, unwrap , action} from "../../../framework/observable";
+//import * as kendo from "@progress/kendo-ui/js/kendo.data.js";
+
+//var getUnderlyingObjectFunctionName = "getUnderlyingObject";
+
+//export function knockoutObservableToKendoObservable(object: object): kendo.data.ObservableObject {
+//    var observableObject = new kendo.data.ObservableObject();
+//    observableObject[getUnderlyingObjectFunctionName] = () => {
+//        return object;
+//    }
+//    Object.keys(object).forEach((key: string) => {
+//        var value = object[key];
+
+//        observableObject[key] = unwrap(value);
+
+//        if (isSubscribable(value)) {
+//            value.subscribe(
+//                (newValue) => {
+//                    observableObject.set(key, newValue);
+//                }
+//            );
+//        }
+//    });
+
+//    return observableObject;
+//}
+
+//export function getUnderlyingObject(observableObject: kendo.data.ObservableObject): object {
+//    if (observableObject[getUnderlyingObjectFunctionName]) {
+//        return observableObject[getUnderlyingObjectFunctionName]();
+//    }
+//    return null;
+//}
+
+//export function knockoutObservableToKendoObservableArray(array: Array<any> | Subscribable<Array<any>>): Array<kendo.data.ObservableObject> {
+
+//    var observableObjects = new Array<kendo.data.ObservableObject>();
+//    if (array) {
+//        unwrap(array).forEach((object) => {
+//            observableObjects.push(knockoutObservableToKendoObservable(object));
+//        });
+//    }
+
+//    return observableObjects;
+//}

package/src/controls/kendo/{Tree/Tree.ts → Treeview/Treeview.ts}

@@ -1,26 +1,26 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.treeview.js";
-import { isObservable, unwrap, Subscribable } from "knockout";
-import { View, render } from "../../../framework/View";
-import { ViewModel, Properties, applyBindings as applyViewModelToElement, extendProperties } from "../../../framework/ViewModel";
+import { Element, render } from "../../../framework/element";
+import { Properties, IProperties, applyBindings as applyViewModelToElement, extendProperties } from "../../../framework/properties";
 import { HierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
+import { ISubscribable, unwrap, isSubscribable } from "../../../framework/observable";
 const getContent = "getContent";
 
-export interface TreeProperties extends Properties {
-    items?: Array<HierarchicalListItemProperties> | Subscribable<Array<HierarchicalListItemProperties>>;
-    selectedItem?: HierarchicalListItemProperties | Subscribable<HierarchicalListItemProperties>;
+export interface ITreeviewProperties extends IProperties {
+    items?: Array<HierarchicalListItemProperties> | ISubscribable<Array<HierarchicalListItemProperties>>;
+    selectedItem?: HierarchicalListItemProperties | ISubscribable<HierarchicalListItemProperties>;
     select?: (dataItem: any) => void;
 }
 
-export class TreeView extends View<TreeProperties> {
-    constructor(properties: TreeProperties) {
+export class TreeviewElement extends Element<ITreeviewProperties> {
+    constructor(properties: ITreeviewProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "KendoTree"
-                    },
-                    properties
+                        elementType: "KendoTree"
+                    }
                 )
             }
         );
@@ -73,11 +73,11 @@ export class TreeView extends View<TreeProperties> {
                     const uid = element.getAttribute("data-uid");
                     const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as any as HierarchicalListItemProperties;
                     if (hierarchicalListItemViewModel) {
-                        applyViewModelToElement(hierarchicalListItemViewModel, element, this.subscriptions);
+                        applyViewModelToElement(hierarchicalListItemViewModel, element, this.disposers);
 
                         if (hierarchicalListItemViewModel[getContent]) {
                             const content = hierarchicalListItemViewModel[getContent]();
-                            if (content instanceof ViewModel) {
+                            if (content instanceof Properties) {
                                 const firstChild = element.firstElementChild as HTMLElement;
                                 firstChild.style.padding = "0";
                                 firstChild.innerHTML = "";
@@ -91,8 +91,8 @@ export class TreeView extends View<TreeProperties> {
         );
 
         this.buildItems(unwrap(viewModel.items));
-        if (isObservable(viewModel.items)) {
-            this.subscriptions.push(
+        if (isSubscribable(viewModel.items)) {
+            this.disposers.push(
                 viewModel.items.subscribe((items) => {
                     this.buildItems(items);
                 })
@@ -142,6 +142,6 @@ export class TreeView extends View<TreeProperties> {
     }
 }
 
-export function treeView(properties: TreeProperties) {
-    return new TreeView(properties);
+export function treeviewElement(properties: ITreeviewProperties) {
+    return new TreeviewElement(properties);
 }

package/src/controls/kendo/{Dialog/Dialog.ts → Window/Window.ts}

@@ -1,19 +1,19 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.window.js";
-import { View } from "../../../framework/View";
-import { DivView } from "../../html/Div/Div";
-import { ButtonView } from "../../html/Button/Button";
+import { Element } from "../../../framework/element";
+import { createDiv } from "../../html/Div/Div";
+import { ButtonElement } from "../../html/Button/Button";
 
-export interface DialogOptions {
-    content?: View;
-    buttons?: Array<ButtonView>;
+export interface IWindowOptions {
+    content?: Element;
+    buttons?: Array<ButtonElement>;
 }
 
-export class Dialog {
-    constructor(options: DialogOptions) {
+export class WindowDialog {
+    constructor(options: IWindowOptions) {
         this.options = options;
     }
 
-    private options: DialogOptions;
+    private readonly options: IWindowOptions;
     private dialog: kendo.ui.Window;
 
     open() {
@@ -34,15 +34,17 @@ export class Dialog {
                         }
                     }
                     if (this.options.buttons) {
-                        const footer = new DivView({
-                            children: this.options.buttons,
-                            style: {
-                                display: "flex",
-                                justifyContent: "flex-end",
-                                borderTop: "1px solid gray",
-                                padding: "5px"
+                        const footer = createDiv(
+                            {
+                                style: {
+                                    display: "flex",
+                                    justifyContent: "flex-end",
+                                    borderTop: "1px solid gray",
+                                    padding: "5px"
+                                },
+                                children: this.options.buttons
                             }
-                        });
+                        );
                         wrapper.appendChild(footer.render());
                     }
                 }
@@ -59,6 +61,6 @@ export class Dialog {
     }
 }
 
-export function dialog(options: DialogOptions) {
-    return new Dialog(options);
+export function windowDialog(options: IWindowOptions) {
+    return new WindowDialog(options);
 }