jpf 5.0.61 → 5.0.63

package/dist/index.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.css = exports.style = exports.root = exports.properties = exports.event = exports.observableImplementations = exports.observableInterfaces = exports.element = exports.attributes = exports.utilities = exports.controls = void 0;
+exports.css = exports.style = exports.root = exports.properties = exports.event = exports.observable = exports.element = exports.attributes = exports.utilities = exports.controls = void 0;
 const controls = __importStar(require("./controls/index"));
 exports.controls = controls;
 const utilities = __importStar(require("./utilities/index"));
@@ -44,10 +44,8 @@ const element = __importStar(require("./framework/element"));
 exports.element = element;
 const event = __importStar(require("./framework/event"));
 exports.event = event;
-const observableInterfaces = __importStar(require("./framework/observableInterfaces"));
-exports.observableInterfaces = observableInterfaces;
-const observableImplementations = __importStar(require("./framework/observablelmplementations"));
-exports.observableImplementations = observableImplementations;
+const observable = __importStar(require("./framework/observable"));
+exports.observable = observable;
 const properties = __importStar(require("./framework/properties"));
 exports.properties = properties;
 const root = __importStar(require("./framework/root"));

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA6C;AAapC,4BAAQ;AAZjB,6DAA+C;AAatC,8BAAS;AAXlB,mEAAqD;AAa5C,gCAAU;AAZnB,6DAA+C;AAatC,0BAAO;AAZhB,yDAA2C;AAelC,sBAAK;AAdd,uFAAyE;AAYhE,oDAAoB;AAX7B,iGAAmF;AAY1E,8DAAyB;AAXlC,mEAAqD;AAa5C,gCAAU;AAZnB,uDAAyC;AAahC,oBAAI;AAZb,yDAA2C;AAalC,sBAAK;AAZd,qDAAuC;AAa9B,kBAAG"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAA6C;AAYpC,4BAAQ;AAXjB,6DAA+C;AAYtC,8BAAS;AAVlB,mEAAqD;AAY5C,gCAAU;AAXnB,6DAA+C;AAYtC,0BAAO;AAXhB,yDAA2C;AAalC,sBAAK;AAZd,mEAAqD;AAW5C,gCAAU;AAVnB,mEAAqD;AAY5C,gCAAU;AAXnB,uDAAyC;AAYhC,oBAAI;AAXb,yDAA2C;AAYlC,sBAAK;AAXd,qDAAuC;AAY9B,kBAAG"}

package/dist/utilities/object/object.d.ts

@@ -0,0 +1,5 @@
+export interface IWebSocketMessageHandler {
+    handleWebSocketMessage: (message: unknown) => void;
+}
+export declare function handleWebSocketMessage(context: object, message: unknown): void;
+export declare function executeHandlerOnContext(context: object, handler: (context: any) => void, alreadyProcessedContexts?: Set<object>): void;

package/dist/utilities/object/object.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleWebSocketMessage = handleWebSocketMessage;
+exports.executeHandlerOnContext = executeHandlerOnContext;
+const observable_js_1 = require("../../framework/observable.js");
+function handleWebSocketMessage(context, message) {
+    executeHandlerOnContext(context, (context) => {
+        const webSocketMessageHandler = context;
+        if (webSocketMessageHandler.handleWebSocketMessage && typeof webSocketMessageHandler.handleWebSocketMessage === "function") {
+            webSocketMessageHandler.handleWebSocketMessage(message);
+        }
+    });
+}
+function executeHandlerOnContext(context, handler, alreadyProcessedContexts) {
+    if (!alreadyProcessedContexts) {
+        alreadyProcessedContexts = new Set();
+    }
+    if (!context || typeof context !== "object" || alreadyProcessedContexts.has(context)) {
+        return;
+    }
+    alreadyProcessedContexts.add(context);
+    if (Array.isArray(context)) {
+        for (const arrayEntry of context) {
+            if (typeof arrayEntry === "object") {
+                executeHandlerOnContext(arrayEntry, handler, alreadyProcessedContexts);
+            }
+        }
+    }
+    else {
+        if (observable_js_1.observable.isSubscribable(context)) {
+            const unwrapped = observable_js_1.observable.unwrap(context);
+            if (typeof unwrapped === "object") {
+                executeHandlerOnContext(unwrapped, handler, alreadyProcessedContexts);
+            }
+        }
+        else {
+            handler(context);
+            for (const key of Object.keys(context)) {
+                const property = context[key];
+                if (property && typeof property === "object") {
+                    executeHandlerOnContext(property, handler, alreadyProcessedContexts);
+                }
+            }
+        }
+    }
+}
+//# sourceMappingURL=object.js.map

package/dist/utilities/object/object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object.js","sourceRoot":"","sources":["../../../src/utilities/object/object.ts"],"names":[],"mappings":";;AAKA,wDAWC;AACD,0DAsCC;AAvDD,iEAA2D;AAK3D,SAAgB,sBAAsB,CAAC,OAAe,EAAE,OAAgB;IACpE,uBAAuB,CACnB,OAAO,EACP,CAAC,OAAO,EAAE,EAAE;QACR,MAAM,uBAAuB,GAAG,OAAmC,CAAC;QACpE,IAAI,uBAAuB,CAAC,sBAAsB,IAAI,OAAO,uBAAuB,CAAC,sBAAsB,KAAK,UAAU,EAAE,CAAC;YAEzH,uBAAuB,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;QAC5D,CAAC;IACL,CAAC,CACJ,CAAC;AACN,CAAC;AACD,SAAgB,uBAAuB,CAAC,OAAe,EAAE,OAA0B,EAAE,wBAAsC;IACvH,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAC5B,wBAAwB,GAAG,IAAI,GAAG,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACnF,OAAO;IACX,CAAC;IAGD,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAGtC,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QACzB,KAAK,MAAM,UAAU,IAAI,OAAyB,EAAE,CAAC;YACjD,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;gBACjC,uBAAuB,CAAC,UAAU,EAAE,OAAO,EAAE,wBAAwB,CAAC,CAAC;YAC3E,CAAC;QACL,CAAC;IACL,CAAC;SAAM,CAAC;QACJ,IAAI,0BAAU,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;YACrC,MAAM,SAAS,GAAG,0BAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC7C,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;gBAChC,uBAAuB,CAAC,SAAS,EAAE,OAAO,EAAE,wBAAwB,CAAC,CAAC;YAC1E,CAAC;QACL,CAAC;aAAM,CAAC;YAEJ,OAAO,CAAC,OAAO,CAAC,CAAC;YAGjB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;gBACrC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;gBAC9B,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;oBAC3C,uBAAuB,CAAC,QAAQ,EAAE,OAAO,EAAE,wBAAwB,CAAC,CAAC;gBACzE,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;AACL,CAAC"}

package/dist/utilities/value/value.d.ts

@@ -0,0 +1 @@
+export declare function isNullOrUndefined(value: any): boolean;

package/dist/utilities/value/value.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNullOrUndefined = isNullOrUndefined;
+function isNullOrUndefined(value) {
+    return value === null || typeof value === "undefined";
+}
+//# sourceMappingURL=value.js.map

package/dist/utilities/value/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","sourceRoot":"","sources":["../../../src/utilities/value/value.ts"],"names":[],"mappings":";;AAAA,8CAEC;AAFD,SAAgB,iBAAiB,CAAC,KAAK;IACnC,OAAO,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,WAAW,CAAC;AAC1D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jpf",
-    "version": "5.0.61",
+    "version": "5.0.63",
     "description": "Javascript Presentation Foundation base classes and interfaces",
     "keywords": [
         "mvvm",

package/src/controls/codeMirror/Editor/Editor.ts

@@ -1,8 +1,6 @@
-import { Element, addElementToDictionary } from "../../../framework/element";
+import { Element, addElementToDictionary,ElementProperties, IElementProperties, extendProperties  } from "../../../framework/element";
 import { createClickEvent } from "../../../framework/event";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, isObservableValue, unwrap } from "../../../framework/observablelmplementations";
+import { ISubscribable , observable} from "../../../framework/observable";
 import { EditorView, basicSetup } from "codemirror";
 import { EditorState, Extension } from "@codemirror/state";
 import { keymap } from "@codemirror/view";
@@ -18,7 +16,7 @@ import { createDiv } from "../../html/Div/Div";
 
 export type mode = "json" | "html" | "css" | "less" | "javascript" | "typescript";
 
-export interface IEditorProperties extends IProperties {
+export interface IEditorProperties extends IElementProperties {
     mode: mode;
     value?: string | ISubscribable<string>;
 }
@@ -112,7 +110,7 @@ export class EditorElement extends Element<IEditorProperties> {
             },
             eventListeners: [
                 createClickEvent(() => {
-                    if (isObservableValue(properties.value)) {
+                    if (observable.isObservableValue(properties.value)) {
                         properties.value.setValue(this.editor.state.doc.toString());
                     }
                 })
@@ -132,7 +130,7 @@ export class EditorElement extends Element<IEditorProperties> {
             }
         );
 
-        this.element.appendChild(buttons.render());
+        this.htmlElement.appendChild(buttons.render());
         const extensions: Extension[] = [
             basicSetup,
             EditorView.lineWrapping,
@@ -162,17 +160,17 @@ export class EditorElement extends Element<IEditorProperties> {
                     extensions: extensions
                 }
             ),
-            parent: this.element,
+            parent: this.htmlElement,
 
         });
 
         this.editor.dom.style.overflow = "auto";
 
         //Set the initial value;
-        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: unwrap(properties.value) } });
+        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: observable.unwrap(properties.value) } });
 
         //Find out if the viewModel property is observable.
-        if (isSubscribable(properties.value)) {
+        if (observable.isSubscribable(properties.value)) {
             this.disposers.push(
                 properties.value.subscribe(
                     (html) => {
@@ -188,7 +186,7 @@ export function createEditor(properties: IEditorProperties) {
     return new EditorElement(properties);
 }
 
-export class EditorProperties extends Properties implements IEditorProperties {
+export class EditorProperties extends ElementProperties implements IEditorProperties {
     constructor(properties: IEditorProperties) {
         super();
         this.setProperties(this, properties);

package/src/controls/custom/FileSelector/FileSelector.ts

@@ -1,9 +1,8 @@
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
-import { Element, addElementToDictionary } from "../../../framework/element";
+import { Element, addElementToDictionary ,ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
 import { IButtonProperties, createButton} from "../../html/Button/Button";
 import { createInput, IInputProperties } from "../../html/Input/Input";
 
-export interface IFileSelectorProperties extends IProperties {
+export interface IFileSelectorProperties extends IElementProperties {
     button?: IButtonProperties;
     inputFile: IInputProperties<FileList>;
 }
@@ -33,7 +32,7 @@ export class FileSelectorElement extends Element<IFileSelectorProperties>  {
 
         const fileInput = createInput(inputProperties).render();
 
-        this.element.appendChild(fileInput);
+        this.htmlElement.appendChild(fileInput);
 
         if (properties.button) {
             const button = createButton(
@@ -52,7 +51,7 @@ export class FileSelectorElement extends Element<IFileSelectorProperties>  {
                 )
             ).render();
 
-            this.element.appendChild(button);
+            this.htmlElement.appendChild(button);
         }
     }
 }
@@ -61,7 +60,7 @@ export function createFileSelector(properties: IFileSelectorProperties) {
     return new FileSelectorElement(properties);
 }
 
-export class FileSelectorProperties extends Properties implements IFileSelectorProperties {
+export class FileSelectorProperties extends ElementProperties implements IFileSelectorProperties {
     constructor(properties: IFileSelectorProperties) {
         super();
         this.setProperties(this, properties);

package/src/controls/custom/LabeledControl/LabeledControl.ts

@@ -1,9 +1,8 @@
-import { Properties, IProperties, extendProperties } from "../../../framework/properties"
-import { Element, IElement, addElementToDictionary } from "../../../framework/element";
+import { Element, IElement, addElementToDictionary,ElementProperties, IElementProperties, extendProperties  } from "../../../framework/element";
 import { createDiv } from "../../html/Div/Div";
 
-export interface ILabeledViewProperties extends IProperties {
-    labelProperties: IProperties;
+export interface ILabeledViewProperties extends IElementProperties {
+    labelProperties: IElementProperties;
     element: IElement;
 }
 
@@ -39,12 +38,12 @@ export function createLabeledControl(properties: ILabeledViewProperties) {
     return new LabeledControlElement(properties);
 }
 
-export class LabeledControlProperties extends Properties implements ILabeledViewProperties {
+export class LabeledControlProperties extends ElementProperties implements ILabeledViewProperties {
     constructor(properties: ILabeledViewProperties) {
         super();
         this.setProperties(this, properties);
     }
-    labelProperties: Properties;
+    labelProperties: ElementProperties;
     element: IElement;
 }
 

package/src/controls/custom/ListItem/ListItem.ts

@@ -1,14 +1,12 @@
-import { Element, getElement, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
-import { isSubscribable, unwrap } from "../../../framework/observablelmplementations";
-import { ISubscribable } from "../../../framework/observableInterfaces";
+import { Element,ElementProperties, IElementProperties, extendProperties, getElement, addElementToDictionary } from "../../../framework/element";
+import { ISubscribable , observable} from "../../../framework/observable";
 
 //Do not change property names since they have to correspond to kendo listItems
 //so this type can be used in kendo list controls like menu and tree
 
-export interface IListItemProperties extends IProperties {
+export interface IListItemProperties extends IElementProperties {
     id: number | string;
-    text?: string | ISubscribable<string> | Properties;
+    text?: string | ISubscribable<string> | ElementProperties;
     select?: () => void;
     order?: number | string;
 }
@@ -39,8 +37,8 @@ export class ListItemElement extends Element<IListItemProperties> {
 
         const properties = this.properties;
 
-        if (isSubscribable(properties.text)) {
-            this.setContent(unwrap(properties.text));
+        if (observable.isSubscribable(properties.text)) {
+            this.setContent(observable.unwrap(properties.text));
             this.disposers.push(
                 properties.text.subscribe((text) => {
                     this.setContent(text);
@@ -51,10 +49,10 @@ export class ListItemElement extends Element<IListItemProperties> {
         }
     }
 
-    private setContent(content: string | Properties) {
+    private setContent(content: string | ElementProperties) {
         if (typeof content === "string") {
-            this.element.innerHTML = content;
-        } else if (content instanceof Properties) {
+            this.htmlElement.innerHTML = content;
+        } else if (content instanceof ElementProperties) {
             this.setChildren(getElement(content));
         }
     }
@@ -64,13 +62,13 @@ export function createListItem(properties: IListItemProperties) {
     return new ListItemElement(properties);
 }
 
-export class ListItemProperties extends Properties implements IListItemProperties {
+export class ListItemProperties extends ElementProperties implements IListItemProperties {
     constructor(properties: IListItemProperties) {
         super();
         this.setProperties(this, properties);
     }
     id: number | string;
-    text?: string | Properties;
+    text?: string | ElementProperties;
     select?: () => void;
     order?: number | string;
 }
@@ -80,13 +78,13 @@ addElementToDictionary(
     ListItemElement
 );
 
-export class HierarchicalListItemProperties extends Properties implements IHierarchicalListItemProperties {
+export class HierarchicalListItemProperties extends ElementProperties implements IHierarchicalListItemProperties {
     constructor(properties: IHierarchicalListItemProperties) {
         super();
         this.setProperties(this, properties);
     }
     id: number | string;
-    text?: string | Properties;
+    text?: string | ElementProperties;
     select?: () => void;
     order?: number | string;
     parentId?: number | string;

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

@@ -1,10 +1,8 @@
-import { Properties, IProperties, extendProperties } from "../../../framework/properties"
-import { Element, getElement, addElementToDictionary } from "../../../framework/element";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap } from "../../../framework/observablelmplementations";
+import { Element, getElement, addElementToDictionary,ElementProperties, IElementProperties, extendProperties  } from "../../../framework/element";
+import { ISubscribable, observable } from "../../../framework/observable";
 
-export interface IButtonProperties extends IProperties {
-    content?: string | Properties | ISubscribable<string | Properties>;
+export interface IButtonProperties extends IElementProperties {
+    content?: string | ElementProperties | ISubscribable<string | ElementProperties>;
 }
 
 export class ButtonElement extends Element<IButtonProperties> {
@@ -27,9 +25,9 @@ export class ButtonElement extends Element<IButtonProperties> {
 
         const properties = this.properties;
         if (properties.content) {
-            this.buildContent(unwrap(properties.content));
+            this.buildContent(observable.unwrap(properties.content));
 
-            if (isSubscribable(properties.content)) {
+            if (observable.isSubscribable(properties.content)) {
                 this.disposers.push(
                     properties.content.subscribe((content) => {
                         this.buildContent(content);
@@ -39,15 +37,15 @@ export class ButtonElement extends Element<IButtonProperties> {
         }
     }
 
-    private buildContent(content: string | Properties) {
+    private buildContent(content: string | ElementProperties) {
         if (content == null || content === undefined) {
-            this.element.innerText = null;
+            this.htmlElement.innerText = null;
         }
         else if (typeof content === "string") {
-            this.element.innerText = content;
+            this.htmlElement.innerText = content;
         }
-        else if (content instanceof Properties) {
-            this.setChildren(getElement(content as Properties));
+        else if (content instanceof ElementProperties) {
+            this.setChildren(getElement(content as ElementProperties));
         }
     }
 }
@@ -56,12 +54,12 @@ export function createButton(properties: IButtonProperties) {
     return new ButtonElement(properties);
 }
 
-export class ButtonProperties extends Properties implements IButtonProperties {
+export class ButtonProperties extends ElementProperties implements IButtonProperties {
     constructor(properties: IButtonProperties) {
         super();
         this.setProperties(this, properties);
     }
-    content?: string | Properties | ISubscribable<string | Properties>;
+    content?: string | ElementProperties | ISubscribable<string | ElementProperties>;
 }
 
 addElementToDictionary(

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

@@ -1,8 +1,7 @@
-import { Element, IElement, addElementToDictionary } from "../../../framework/element";
-import { IProperties, extendProperties, Properties } from "../../../framework/properties";
-import { ISubscribable } from "../../../framework/observableInterfaces";
+import { Element, ElementProperties, IElement, IElementProperties, extendProperties, addElementToDictionary } from "../../../framework/element";
+import { ISubscribable } from "../../../framework/observable";
 
-export interface IDivProperties extends IProperties {
+export interface IDivProperties extends IElementProperties {
     children?: Array<IElement> | ISubscribable<Array<IElement>>;
 }
 export class DivElement extends Element<IDivProperties> {
@@ -26,7 +25,7 @@ export function createDiv(properties: IDivProperties) {
     return new DivElement(properties);
 }
 
-export class DivProperties extends Properties implements IDivProperties {
+export class DivProperties extends ElementProperties implements IDivProperties {
     constructor(properties: IDivProperties) {
         super();
         this.setProperties(this, properties);

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

@@ -1,8 +1,7 @@
-import { Element, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
-import { ISubscribable } from "../../../framework/observableInterfaces";
+import { Element, addElementToDictionary,ElementProperties, IElementProperties, extendProperties  } from "../../../framework/element";
+import { ISubscribable } from "../../../framework/observable";
 
-export interface IImageProperties extends IProperties {
+export interface IImageProperties extends IElementProperties {
     src: string | ISubscribable<string>;
     alt: string | ISubscribable<string>;
 }
@@ -33,7 +32,7 @@ export function createImage(properties: IImageProperties) {
     return new ImageElement(properties);
 }
 
-export class ImageProperties extends Properties implements IImageProperties {
+export class ImageProperties extends ElementProperties implements IImageProperties {
     constructor(properties: IImageProperties) {
         super();
         this.setProperties(this, properties);

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

@@ -1,9 +1,8 @@
-import { Element, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties, isNullOrUndefined } from "../../../framework/properties";
+import { Element, addElementToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
 import { isInteger } from "../../../utilities/integer/integer";
 import { isFloat } from "../../../utilities/float/float";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap, isObservableValue } from "../../../framework/observablelmplementations";
+import { ISubscribable, observable } from "../../../framework/observable";
+import{isNullOrUndefined} from "../../../utilities/value/value";
 
 
 export type InputType = "text" | "checkbox" | "file" | "integer" | "float" | "range" | "radio";
@@ -13,7 +12,7 @@ export enum ValueUpdateModeEnum {
     OnInput = 2
 }
 
-export interface IInputProperties<TValue> extends IProperties {
+export interface IInputProperties<TValue> extends IElementProperties {
     value?: TValue | ISubscribable<TValue>;
     inputValidator?: (event: Event, inputViewModel: IInputProperties<TValue>, value: string) => Promise<boolean>;
     placeholder?: string | ISubscribable<string>;
@@ -43,13 +42,13 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
     protected build() {
         super.build();
 
-        const element = this.element;
+        const element = this.htmlElement;
         const properties = this.properties;
         if (!properties.valueUpdateMode) {
             properties.valueUpdateMode = ValueUpdateModeEnum.OnChange;
         }
 
-        const input = this.element as HTMLInputElement;
+        const input = this.htmlElement as HTMLInputElement;
         input.type = properties.type;
 
         if (!isNullOrUndefined(properties.min)) {
@@ -64,8 +63,8 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
 
         switch (properties.type) {
             case "checkbox":
-                input.checked = unwrap(properties.value) as unknown as boolean;
-                if (isSubscribable(properties.value)) {
+                input.checked = observable.unwrap(properties.value) as unknown as boolean;
+                if (observable.isSubscribable(properties.value)) {
                     this.disposers.push(
                         properties.value.subscribe((value) => {
                             input.checked = value as unknown as boolean;
@@ -80,8 +79,8 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
                 break;
 
             case "radio":
-                input.checked = input.value === ((unwrap(properties.value)) as unknown as string);
-                if (isSubscribable(properties.value)) {
+                input.checked = input.value === ((observable.unwrap(properties.value)) as unknown as string);
+                if (observable.isSubscribable(properties.value)) {
                     this.disposers.push(
                         properties.value.subscribe((value) => {
                             input.checked = input.value === (value as unknown as string);
@@ -91,11 +90,11 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
                 break;
 
             default:
-                const value = unwrap(properties.value);
+                const value = observable.unwrap(properties.value);
                 if (value) {
                     input.value = value as unknown as string;
                 }
-                if (isSubscribable(properties.value)) {
+                if (observable.isSubscribable(properties.value)) {
                     this.disposers.push(
                         properties.value.subscribe((value) => {
                             input.value = value as unknown as string;
@@ -104,11 +103,11 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
                 }
         }
 
-        const placeholder = unwrap(properties.placeholder) as unknown as string;
+        const placeholder = observable.unwrap(properties.placeholder) as unknown as string;
         if (placeholder) {
             input.placeholder = placeholder;
         }
-        if (isSubscribable(properties.placeholder)) {
+        if (observable.isSubscribable(properties.placeholder)) {
             this.disposers.push(
                 properties.placeholder.subscribe((placeholder) => {
                     if (placeholder) {
@@ -121,14 +120,14 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
         }
 
         if (this.properties.valueUpdateMode === ValueUpdateModeEnum.OnChange) {
-            this.element.addEventListener(
+            this.htmlElement.addEventListener(
                 "change",
                 handleEvent
             );
         }
 
         if (this.properties.valueUpdateMode === ValueUpdateModeEnum.OnInput || properties.inputValidator) {
-            this.element.addEventListener(
+            this.htmlElement.addEventListener(
                 "input",
                 handleEvent
             );
@@ -164,7 +163,7 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
 
             if (properties.inputValidator) {
                 if (!await properties.inputValidator(event, properties, newValue as unknown as string)) {
-                    input.value = unwrap(properties.value) as unknown as string;
+                    input.value = observable.unwrap(properties.value) as unknown as string;
                     return;
                 };
             }
@@ -173,7 +172,7 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
                 if (isInteger(newValue)) {
                     newValue = parseInt(newValue);
                 } else {
-                    input.value = unwrap(properties.value) as unknown as string;
+                    input.value = observable.unwrap(properties.value) as unknown as string;
                     return;
                 }
             }
@@ -182,13 +181,13 @@ export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
                 if (isFloat(newValue)) {
                     newValue = parseFloat(newValue);
                 } else {
-                    input.value = unwrap(properties.value) as unknown as string;
+                    input.value = observable.unwrap(properties.value) as unknown as string;
                     return;
                 }
             }
 
             //if validation has succeeded we set the viewModel value
-            if (isObservableValue(properties.value)) {
+            if (observable.isObservableValue(properties.value)) {
                 if ((event.type === "change" && properties.valueUpdateMode === ValueUpdateModeEnum.OnChange) ||
                     (event.type === "input" && properties.valueUpdateMode === ValueUpdateModeEnum.OnInput)) {
 
@@ -205,7 +204,7 @@ export function createInput<TValue>(properties: IInputProperties<TValue>) {
     return new InputElement<TValue>(properties);
 }
 
-export class InputProperties<TValue> extends Properties implements IInputProperties<TValue> {
+export class InputProperties<TValue> extends ElementProperties implements IInputProperties<TValue> {
     constructor(properties: IInputProperties<TValue>) {
         super();
         this.setProperties(this, properties);