jpf 5.0.95 → 5.0.96

package/src/controls/html/Button/Button.ts

@@ -1,8 +1,8 @@
-import { Element, getElement, addToDictionary,ElementProperties, IElementProperties, extendProperties  } from "../../../framework/element";
+import { Element, getElement, addToDictionary, IElementProperties, extendProperties, isRegisteredViewModel } from "../../../framework/element";
 import { ISubscribable, observable } from "../../../framework/observable";
 
 export interface IButtonProperties extends IElementProperties {
-    content?: string | ElementProperties | ISubscribable<string | ElementProperties>;
+    content?: string | object | ISubscribable<string | object>;
 }
 
 export class ButtonElement extends Element<IButtonProperties> {
@@ -12,8 +12,8 @@ export class ButtonElement extends Element<IButtonProperties> {
                 tagName: "button",
                 properties: extendProperties(
                     {
-                        target:properties,
-                        preserveExisting:{
+                        target: properties,
+                        preserveExisting: {
                             elementType: "ButtonElement"
                         }
                     }
@@ -39,15 +39,18 @@ export class ButtonElement extends Element<IButtonProperties> {
         }
     }
 
-    private buildContent(content: string | ElementProperties) {
+    private buildContent(content) {
         if (content == null || content === undefined) {
             this.htmlElement.innerText = null;
         }
         else if (typeof content === "string") {
             this.htmlElement.innerText = content;
         }
-        else if (content instanceof ElementProperties) {
-            this.setChildren(getElement(content as ElementProperties));
+        else if (isRegisteredViewModel(content)) {
+            const element = getElement(content)
+            if (element) {
+                this.setChildren(element);
+            }
         }
     }
 }
@@ -56,12 +59,11 @@ export function createButton(properties: IButtonProperties) {
     return new ButtonElement(properties);
 }
 
-export class ButtonProperties extends ElementProperties implements IButtonProperties {
+export class ButtonProperties implements IButtonProperties {
     constructor(properties: IButtonProperties) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
-    content?: string | ElementProperties | ISubscribable<string | ElementProperties>;
+    content?: string | object | ISubscribable<string | object>;
 }
 
 addToDictionary(

package/src/controls/html/Div/Div.ts

@@ -1,4 +1,4 @@
-import { Element, ElementProperties, IElement, IElementProperties, extendProperties, addToDictionary } from "../../../framework/element";
+import { Element, IElement, IElementProperties, extendProperties, addToDictionary } from "../../../framework/element";
 import { ISubscribable } from "../../../framework/observable";
 
 export interface IDivProperties extends IElementProperties {
@@ -27,10 +27,9 @@ export function createDiv(properties: IDivProperties) {
     return new DivElement(properties);
 }
 
-export class DivProperties extends ElementProperties implements IDivProperties {
+export class DivProperties implements IDivProperties {
     constructor(properties: IDivProperties) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
     children?: Array<IElement> | ISubscribable<Array<IElement>>;
 }

package/src/controls/html/Image/Image.ts

@@ -1,4 +1,4 @@
-import { Element, addToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
+import { Element, addToDictionary, IElementProperties, extendProperties } from "../../../framework/element";
 import { ISubscribable } from "../../../framework/observable";
 
 export interface IImageProperties extends IElementProperties {
@@ -34,10 +34,9 @@ export function createImage(properties: IImageProperties) {
     return new ImageElement(properties);
 }
 
-export class ImageProperties extends ElementProperties implements IImageProperties {
+export class ImageProperties implements IImageProperties {
     constructor(properties: IImageProperties) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
     src: string | ISubscribable<string>;
     alt: string | ISubscribable<string>;

package/src/controls/html/Input/Input.ts

@@ -1,4 +1,4 @@
-import { Element, addToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
+import { Element, addToDictionary, IElementProperties, extendProperties } from "../../../framework/element";
 import { isInteger } from "../../../utilities/integer/integer";
 import { isFloat } from "../../../utilities/float/float";
 import { ISubscribable, observable } from "../../../framework/observable";
@@ -206,10 +206,9 @@ export function createInput<TValue>(properties: IInputProperties<TValue>) {
     return new InputElement<TValue>(properties);
 }
 
-export class InputProperties<TValue> extends ElementProperties implements IInputProperties<TValue> {
+export class InputProperties<TValue>  implements IInputProperties<TValue> {
     constructor(properties: IInputProperties<TValue>) {
-        super();
-        this.setProperties(this, properties);
+       Object.assign(this, properties);
     }
 
     value?: TValue | ISubscribable<TValue>;

package/src/controls/html/Select/Select.ts

@@ -1,4 +1,4 @@
-import { Element, addToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
+import { Element, addToDictionary, IElementProperties, extendProperties } from "../../../framework/element";
 import { ISubscribable, observable } from "../../../framework/observable";
 
 export interface ISelectProperties<TItem, TValue, TSetter = TValue> extends IElementProperties {
@@ -129,10 +129,9 @@ export function createSelect<TItem, TValue, TSetter = TValue>(properties: ISelec
     return new SelectElement(properties);
 }
 
-export class SelectProperties<TItem, TValue, TSetter = TValue> extends ElementProperties implements ISelectProperties<TItem, TValue, TSetter> {
+export class SelectProperties<TItem, TValue, TSetter = TValue> implements ISelectProperties<TItem, TValue, TSetter> {
     constructor(properties: ISelectProperties<TItem, TValue, TSetter>) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
     name: string;
     value?: TValue | ISubscribable<TValue>;

package/src/controls/html/Span/Span.ts

@@ -1,4 +1,4 @@
-import { Element, addToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
+import { Element, addToDictionary, IElementProperties, extendProperties } from "../../../framework/element";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ISpanProperties extends IElementProperties {
@@ -27,10 +27,9 @@ export function createSpan(properties: ISpanProperties) {
     return new SpanElement(properties);
 }
 
-export class SpanProperties extends ElementProperties implements ISpanProperties {
+export class SpanProperties implements ISpanProperties {
     constructor(properties: SpanProperties) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
 }
 

package/src/controls/jsonViewerAwesome/jsonFormatter/JsonFormatter.ts

@@ -1,4 +1,4 @@
-import { Element, ElementProperties, IElementProperties, extendProperties, addToDictionary } from "../../../framework/element";
+import { Element, IElementProperties, extendProperties, addToDictionary } from "../../../framework/element";
 import { JSONFormatter } from "json-viewer-awesome/lib/json-formatter";
 import { ISubscribable, observable } from "../../../framework/observable";
 
@@ -72,10 +72,9 @@ export function createJsonFormatter(properties: IJsonFormatterProperties) {
     return new JsonFormatterElement(properties);
 }
 
-export class JsonFormatterProperties extends ElementProperties implements IJsonFormatterProperties {
+export class JsonFormatterProperties implements IJsonFormatterProperties {
     constructor(properties: IJsonFormatterProperties) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
     json: object | ISubscribable<object>;
     showArrayIndex?: boolean;

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

@@ -1,5 +1,5 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.grid.js";
-import { Element, ElementProperties, IElementProperties, extendProperties, addToDictionary } from "../../../framework/element";
+import { Element, IElementProperties, extendProperties, addToDictionary } from "../../../framework/element";
 import { ISubscribable, observable } from "../../../framework/observable";
 
 export interface IGridProperties<TItem> extends IElementProperties {
@@ -259,10 +259,9 @@ export function getSelectedDataItems<TItem>(grid: kendo.ui.Grid): Array<TItem> {
     return selectedDataItems;
 }
 
-export class GridProperties<TItem = unknown> extends ElementProperties implements IGridProperties<TItem> {
+export class GridProperties<TItem = unknown> implements IGridProperties<TItem> {
     constructor(properties: IGridProperties<TItem>) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
 
     items?: Array<TItem> | ISubscribable<Array<TItem>>;

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

@@ -1,6 +1,6 @@
 import * as  kendo from "@progress/kendo-ui/js/kendo.menu.js";
-import { Element, ElementProperties, IElementProperties, extendProperties, render, applyBindings } from "../../../framework/element";
-import { HierarchicalListItemProperties, IHierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
+import { Element, IElementProperties, extendProperties, applyBindings, getElement, isRegisteredViewModel } from "../../../framework/element";
+import { IHierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
 import { ISubscribable, observable } from "../../../framework/observable";
 const getContent = "getContent";
 
@@ -43,24 +43,26 @@ export class MenuElement extends Element<IMenuProperties> {
             "dataBound",
             (event) => {
                 //Find all menuitems that needs to be post rendered.
-                event.sender.wrapper.find(".k-menu-item[postrender]").each((index, element: HTMLElement) => {
-                    const uid = element.getAttribute("data-uid");
-                    const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as unknown as HierarchicalListItemProperties;
+                event.sender.wrapper.find(".k-menu-item[postrender]").each((index, htmlElement: HTMLElement) => {
+                    const uid = htmlElement.getAttribute("data-uid");
+                    const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as unknown as IHierarchicalListItemProperties;
                     if (hierarchicalListItemViewModel) {
-                        applyBindings(hierarchicalListItemViewModel, element);
-
+                        applyBindings(hierarchicalListItemViewModel, htmlElement);
 
                         if (hierarchicalListItemViewModel[getContent]) {
                             const content = hierarchicalListItemViewModel[getContent]();
-                            if (content instanceof ElementProperties) {
-                                const firstChild = element.firstElementChild as HTMLElement;
-                                firstChild.style.padding = "0";
-                                firstChild.innerHTML = "";
-                                firstChild.appendChild(render(content));
+                            if (isRegisteredViewModel(content)) {
+                                const element = getElement(content);
+                                if (element) {
+                                    const firstChild = htmlElement.firstElementChild as HTMLElement;
+                                    firstChild.style.padding = "0";
+                                    firstChild.innerHTML = "";
+                                    firstChild.appendChild(element.render());
+                                }
                             }
                         }
                     }
-                    element.removeAttribute("postrender");
+                    htmlElement.removeAttribute("postrender");
                 });
             }
         );
@@ -82,7 +84,7 @@ export class MenuElement extends Element<IMenuProperties> {
         if (listItems) {
             //Add all visible menuItems to a dictionary
             listItems.forEach((listItem) => {
-                if (listItem as unknown instanceof ElementProperties) {
+                if (isRegisteredViewModel(listItem)) {
                     listItem["attr"] = { postrender: true };
                 }
 

package/src/controls/kendo/Treeview/Treeview.ts

@@ -1,12 +1,12 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.treeview.js";
-import { Element, ElementProperties, IElementProperties, extendProperties, applyBindings, render } from "../../../framework/element";
-import { HierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
+import { Element, IElementProperties, extendProperties, applyBindings, isRegisteredViewModel, getElement } from "../../../framework/element";
+import { IHierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
 import { ISubscribable, observable } from "../../../framework/observable";
 const getContent = "getContent";
 
 export interface ITreeviewProperties extends IElementProperties {
-    items?: Array<HierarchicalListItemProperties> | ISubscribable<Array<HierarchicalListItemProperties>>;
-    selectedItem?: HierarchicalListItemProperties | ISubscribable<HierarchicalListItemProperties>;
+    items?: Array<IHierarchicalListItemProperties> | ISubscribable<Array<IHierarchicalListItemProperties>>;
+    selectedItem?: IHierarchicalListItemProperties | ISubscribable<IHierarchicalListItemProperties>;
     select?: (dataItem: unknown) => void;
 }
 export class TreeviewElement extends Element<ITreeviewProperties> {
@@ -62,30 +62,33 @@ export class TreeviewElement extends Element<ITreeviewProperties> {
                 if (selectedItem) {
                     event.sender.wrapper.find(".k-treeview-item").each((index, element: HTMLElement) => {
                         const uid = element.getAttribute("data-uid");
-                        const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as unknown as HierarchicalListItemProperties;
+                        const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as unknown as IHierarchicalListItemProperties;
                         if (hierarchicalListItemViewModel.id === selectedItem.id) {
                             event.sender.select(element);
                         }
                     });
                 }
 
-                event.sender.wrapper.find(".k-treeview-item[postrender]").each((index, element: HTMLElement) => {
-                    const uid = element.getAttribute("data-uid");
-                    const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as unknown as HierarchicalListItemProperties;
+                event.sender.wrapper.find(".k-treeview-item[postrender]").each((index, htmlElement: HTMLElement) => {
+                    const uid = htmlElement.getAttribute("data-uid");
+                    const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as unknown as IHierarchicalListItemProperties;
                     if (hierarchicalListItemViewModel) {
-                        applyBindings(hierarchicalListItemViewModel, element);
+                        applyBindings(hierarchicalListItemViewModel, htmlElement);
 
                         if (hierarchicalListItemViewModel[getContent]) {
                             const content = hierarchicalListItemViewModel[getContent]();
-                            if (content instanceof ElementProperties) {
-                                const firstChild = element.firstElementChild as HTMLElement;
-                                firstChild.style.padding = "0";
-                                firstChild.innerHTML = "";
-                                firstChild.appendChild(render(content));
+                            if (isRegisteredViewModel(content)) {
+                                const element = getElement(content);
+                                if (element) {
+                                    const firstChild = htmlElement.firstElementChild as HTMLElement;
+                                    firstChild.style.padding = "0";
+                                    firstChild.innerHTML = "";
+                                    firstChild.appendChild(element.render());
+                                }
                             }
                         }
                     }
-                    element.removeAttribute("postrender");
+                    htmlElement.removeAttribute("postrender");
                 });
             }
         );
@@ -100,9 +103,9 @@ export class TreeviewElement extends Element<ITreeviewProperties> {
         }
     }
 
-    private buildItems(listItems: Array<HierarchicalListItemProperties>) {
-        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

package/src/controls/leaflet/LabelControl/LabelControl.ts

@@ -1,8 +1,8 @@
 import * as leaflet from "leaflet";
-import { IElement, getElement, ElementProperties } from "../../../framework/element";
+import { IElement, getElement, IElementProperties, isRegisteredViewModel } from "../../../framework/element";
 
 export interface ILeafletLabelControlOptions extends leaflet.ControlOptions {
-    content: string | IElement | ElementProperties
+    content: string | IElement | IElementProperties
 }
 
 export class LeafletLabelControl extends leaflet.Control {
@@ -12,23 +12,23 @@ export class LeafletLabelControl extends leaflet.Control {
         this.content = options.content;
     }
 
-    private readonly content: string | IElement | ElementProperties;
+    private readonly content: string | IElement | IElementProperties;
 
     onAdd(): HTMLElement {
         const div = document.createElement("div");
 
-        let view;
-        if (this.content instanceof ElementProperties) {
-            view = getElement(this.content);
-            if (view) {
-                div.appendChild(view.render());
+        let element;
+        if (typeof this.content === "object" && isRegisteredViewModel(this.content)) {
+            element = getElement(this.content);
+            if (element) {
+                div.appendChild(element.render());
             }
         } else if (typeof this.content === "string") {
             div.innerText = this.content;
         } else {
-            view = this.content as IElement;
-            if (view.render) {
-                div.appendChild(view.render());
+            element = this.content as IElement;
+            if (element.render) {
+                div.appendChild(element.render());
             }
         }
 

package/src/controls/leaflet/Map/Map.ts

@@ -1,6 +1,6 @@
 import { ISubscribable, observable } from "../../../framework/observable";
 import * as leaflet from "leaflet";
-import { Element, addToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
+import { Element, addToDictionary, IElementProperties, extendProperties } from "../../../framework/element";
 
 export interface IMapProperties extends IElementProperties {
     renderer?: leaflet.Renderer;
@@ -164,10 +164,9 @@ export function createMap(properties: IMapProperties) {
 
 export const burtonville: leaflet.LatLngExpression = [50.283939, 5.964070];
 
-export class MapProperties extends ElementProperties implements IMapProperties {
+export class MapProperties implements IMapProperties {
     constructor(properties: IMapProperties) {
-        super();
-        this.setProperties(this, properties);
+        Object.assign(this, properties);
     }
 
     renderer?: leaflet.Renderer;

package/src/framework/element.ts

@@ -255,28 +255,28 @@ export class Element<TElementProperties extends IElementProperties = IElementPro
 // #endregion
 
 // #region ElementProperties Class definition
-export abstract class ElementProperties implements IElementProperties {
-    protected setProperties<TProperties>(object: object, properties?: TProperties) {
-        if (properties) {
-            Object.keys(properties).forEach((property) => {
-                object[property] = properties[property];
-            });
-        }
-    }
-
-    attributes?: IAttributes;
-    classNames?: Array<string> | IClassNames | ISubscribable<IClassNames>;
-    style?: IStyle;
-    visible?: boolean | ISubscribable<boolean>;
-    disabled?: boolean | ISubscribable<boolean>;
-    innerHtml?: string | ISubscribable<string>;
-    textContent?: string | ISubscribable<string>;
-    addViewModelToDataObject?: boolean;
-    userSelectable?: boolean;
-    eventListeners?: Array<IEventListener>;
-    elementType?: string;
-    focused?: boolean | ISubscribable<boolean>;
-}
+//export abstract class ElementProperties implements IElementProperties {
+//    protected setProperties<TProperties>(object: object, properties?: TProperties) {
+//        if (properties) {
+//            Object.keys(properties).forEach((property) => {
+//                object[property] = properties[property];
+//            });
+//        }
+//    }
+
+//    attributes?: IAttributes;
+//    classNames?: Array<string> | IClassNames | ISubscribable<IClassNames>;
+//    style?: IStyle;
+//    visible?: boolean | ISubscribable<boolean>;
+//    disabled?: boolean | ISubscribable<boolean>;
+//    innerHtml?: string | ISubscribable<string>;
+//    textContent?: string | ISubscribable<string>;
+//    addViewModelToDataObject?: boolean;
+//    userSelectable?: boolean;
+//    eventListeners?: Array<IEventListener>;
+//    elementType?: string;
+//    focused?: boolean | ISubscribable<boolean>;
+//}
 // #endregion
 
 //#region Element helper functions
@@ -593,11 +593,15 @@ export function addToDictionary(viewModel: Function, view: Function) {
     elementDictionary.set(viewModel, view);
 }
 
+export function isRegisteredViewModel(viewModel: object): boolean {
+    return viewModel && viewModel.constructor && elementDictionary.has(viewModel.constructor);
+}
+
 export function getElement(viewModel: object): IElement {
     if (viewModel && viewModel.constructor) {
-        const element = elementDictionary.get(viewModel.constructor);
-        if (element.prototype) {
-            return new element(viewModel);
+        const view = elementDictionary.get(viewModel.constructor);
+        if (view.prototype) {
+            return new view(viewModel);
         }
         //if (typeof element === "function") {
         //    return element(viewModel);
@@ -613,4 +617,12 @@ export function render(viewModel: object): HTMLElement {
     }
     return null;
 }
+
+//export function setProperties(object: object, properties?: object) {
+//    if (properties) {
+//        Object.keys(properties).forEach((property) => {
+//            object[property] = properties[property];
+//        });
+//    }
+//}
 //#endregion