jpf 5.0.62 → 5.0.63

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

@@ -1,9 +1,7 @@
-import { Element, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap , isObservableValue} from "../../../framework/observablelmplementations";
+import { Element, addElementToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
+import { ISubscribable, observable } from "../../../framework/observable";
 
-export interface ISelectProperties<TItem, TValue, TSetter = TValue> extends IProperties {
+export interface ISelectProperties<TItem, TValue, TSetter = TValue> extends IElementProperties {
     value?: TValue | ISubscribable<TValue>;
     items?: Array<TItem> | ISubscribable<Array<TItem>>;
     textFunction: (item: TItem) => string;
@@ -30,12 +28,12 @@ export class SelectElement<TItem, TValue, TSetter = TValue> extends Element<ISel
     //Protected members
     protected build() {
         super.build();
-        const select = this.element as HTMLSelectElement;
+        const select = this.htmlElement as HTMLSelectElement;
 
         const properties = this.properties;
 
-        this.setItems(unwrap(properties.items) as Array<TItem>);
-        if (isSubscribable(properties.items)) {
+        this.setItems(observable.unwrap(properties.items) as Array<TItem>);
+        if (observable.isSubscribable(properties.items)) {
             this.disposers.push(
                 properties.items.subscribe((items) => {
                     this.setItems(items);
@@ -43,8 +41,8 @@ export class SelectElement<TItem, TValue, TSetter = TValue> extends Element<ISel
             );
         }
 
-        this.setSelectedValue(unwrap(properties.value) as TValue);
-        if (isSubscribable(properties.value)) {
+        this.setSelectedValue(observable.unwrap(properties.value) as TValue);
+        if (observable.isSubscribable(properties.value)) {
             this.disposers.push(
                 properties.value.subscribe((value) => {
                     this.setSelectedValue(value);
@@ -52,7 +50,7 @@ export class SelectElement<TItem, TValue, TSetter = TValue> extends Element<ISel
             );
         }
 
-        this.element.addEventListener(
+        this.htmlElement.addEventListener(
             "change",
             async (event: Event) => {
                 let selectedValue = select.value as unknown as TValue;
@@ -65,12 +63,12 @@ export class SelectElement<TItem, TValue, TSetter = TValue> extends Element<ISel
                 }
                 if (properties.inputValidator) {
                     if (!await properties.inputValidator(event, properties, selectedValue)) {
-                        select.value = unwrap(properties.value) as unknown as string;
+                        select.value = observable.unwrap(properties.value) as unknown as string;
                         return;
                     };
                 }
 
-                if (isObservableValue(properties.value)) {
+                if (observable.isObservableValue(properties.value)) {
                     if (properties.setFunction) {
                         const setValue = properties.setFunction(selectedItem) as unknown as TValue;
                         properties.value.setValueInAction(setValue);
@@ -85,10 +83,10 @@ export class SelectElement<TItem, TValue, TSetter = TValue> extends Element<ISel
     private itemDictionary: { [key: string]: TItem };
 
     private setItems(items: Array<TItem>) {
-        if (this.element) {
+        if (this.htmlElement) {
             this.itemDictionary = {};
             if (items) {
-                const select = this.element as HTMLSelectElement;
+                const select = this.htmlElement as HTMLSelectElement;
                 select.innerHTML = null;
                 if (this.properties.emptyItemText) {
                     const emptyOption = document.createElement("option") as HTMLOptionElement;
@@ -110,8 +108,8 @@ export class SelectElement<TItem, TValue, TSetter = TValue> extends Element<ISel
     }
 
     private setSelectedValue(value: TValue) {
-        if (this.element) {
-            const select = this.element as HTMLSelectElement;
+        if (this.htmlElement) {
+            const select = this.htmlElement as HTMLSelectElement;
             if (value === null || value === undefined) {
                 select.value = "";
             } else {
@@ -125,7 +123,7 @@ export function createSelect<TItem, TValue, TSetter = TValue>(properties: ISelec
     return new SelectElement(properties);
 }
 
-export class SelectProperties<TItem, TValue, TSetter = TValue> extends Properties implements ISelectProperties<TItem, TValue, TSetter> {
+export class SelectProperties<TItem, TValue, TSetter = TValue> extends ElementProperties implements ISelectProperties<TItem, TValue, TSetter> {
     constructor(properties: ISelectProperties<TItem, TValue, TSetter>) {
         super();
         this.setProperties(this, properties);

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

@@ -1,8 +1,7 @@
-import { Element, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { Element, addElementToDictionary,ElementProperties, IElementProperties, extendProperties  } from "../../../framework/element";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface ISpanProperties extends IProperties {
+export interface ISpanProperties extends IElementProperties {
 
 }
 
@@ -26,7 +25,7 @@ export function createSpan(properties: ISpanProperties) {
     return new SpanElement(properties);
 }
 
-export class SpanProperties extends Properties implements ISpanProperties {
+export class SpanProperties extends ElementProperties implements ISpanProperties {
     constructor(properties: SpanProperties) {
         super();
         this.setProperties(this, properties);

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

@@ -1,10 +1,8 @@
-import { Element, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { Element, ElementProperties, IElementProperties, extendProperties, addElementToDictionary } from "../../../framework/element";
 import { JSONFormatter } from "json-viewer-awesome/lib/json-formatter";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap } from "../../../framework/observablelmplementations";
+import { ISubscribable, observable } from "../../../framework/observable";
 
-export interface IJsonFormatterProperties extends IProperties {
+export interface IJsonFormatterProperties extends IElementProperties {
     json: object | ISubscribable<object>;
     showArrayIndex?: boolean;
     quotesOnKeys?: boolean;
@@ -33,11 +31,11 @@ export class JsonFormatterElement extends Element<IJsonFormatterProperties> {
         super.build();
 
         const properties = this.properties;
-        this.setJson(unwrap(properties.json));
-        if (isSubscribable(properties.json)) {
+        this.setJson(observable.unwrap(properties.json));
+        if (observable.isSubscribable(properties.json)) {
             this.disposers.push(
-                properties.json.subscribe((json)=>{
-                      this.setJson(json as unknown as object);
+                properties.json.subscribe((json) => {
+                    this.setJson(json as unknown as object);
                 })
             );
         }
@@ -58,9 +56,9 @@ export class JsonFormatterElement extends Element<IJsonFormatterProperties> {
                     src: json
                 });
 
-                this.element.replaceChildren(jsonFormatter.render());
+                this.htmlElement.replaceChildren(jsonFormatter.render());
             } else {
-                this.element.innerHTML = (json as unknown).toString();
+                this.htmlElement.innerHTML = (json as unknown).toString();
             }
         } else {
             this.empty();
@@ -72,7 +70,7 @@ export function createJsonFormatter(properties: IJsonFormatterProperties) {
     return new JsonFormatterElement(properties);
 }
 
-export class JsonFormatterProperties extends Properties implements IJsonFormatterProperties {
+export class JsonFormatterProperties extends ElementProperties implements IJsonFormatterProperties {
     constructor(properties: IJsonFormatterProperties) {
         super();
         this.setProperties(this, properties);

package/src/controls/kendo/Chart/Chart.ts

@@ -1,10 +1,8 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.dataviz.chart";
-import { Element } from "../../../framework/element";
-import { IProperties, extendProperties } from "../../../framework/properties";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap } from "../../../framework/observablelmplementations";
+import { Element, IElementProperties, extendProperties } from "../../../framework/element";
+import { ISubscribable, observable } from "../../../framework/observable";
 
-export interface IChartProperties extends IProperties {
+export interface IChartProperties extends IElementProperties {
     data?: Array<unknown> | ISubscribable<Array<unknown>>;
     chartArea?: kendo.dataviz.ui.ChartChartArea | undefined;
     series?: kendo.dataviz.ui.ChartSeriesItem[] | ISubscribable<kendo.dataviz.ui.ChartSeriesItem[]>;
@@ -13,7 +11,7 @@ export interface IChartProperties extends IProperties {
     legend?: kendo.dataviz.ui.ChartLegend | undefined;
 }
 
-export class ChartElement extends Element<IChartProperties>{
+export class ChartElement extends Element<IChartProperties> {
     constructor(properties: IChartProperties) {
         super(
             {
@@ -39,12 +37,12 @@ export class ChartElement extends Element<IChartProperties>{
         if (properties.data) {
             this.dataSource = new kendo.data.DataSource(
                 {
-                    data: unwrap(properties.data)
+                    data: observable.unwrap(properties.data)
                 }
             );
         }
 
-        if (isSubscribable(properties.data)) {
+        if (observable.isSubscribable(properties.data)) {
             this.disposers.push(
                 properties.data.subscribe((data) => {
                     this.dataSource.data(data);
@@ -54,20 +52,20 @@ export class ChartElement extends Element<IChartProperties>{
 
         setTimeout(() => {
             this.chart = new kendo.dataviz.ui.Chart(
-                this.element,
+                this.htmlElement,
                 {
                     autoBind: false,
                     legend: properties.legend,
                     dataSource: this.dataSource,
                     chartArea: properties.chartArea,
-                    series: unwrap(properties.series),
-                    categoryAxis: unwrap(properties.categoryAxis),
+                    series: observable.unwrap(properties.series),
+                    categoryAxis: observable.unwrap(properties.categoryAxis),
                     valueAxis: properties.valueAxis
                 }
             );
         });
 
-        if (isSubscribable(properties.series)) {
+        if (observable.isSubscribable(properties.series)) {
             this.disposers.push(
                 properties.series.subscribe((series) => {
                     if (this.chart) {
@@ -79,14 +77,14 @@ export class ChartElement extends Element<IChartProperties>{
             );
         }
 
-        if (isSubscribable(properties.categoryAxis)) {
+        if (observable.isSubscribable(properties.categoryAxis)) {
             this.disposers.push(
-                properties.categoryAxis.subscribe((categoryAxis)=>{
-                                            if (this.chart) {
-                            this.chart.setOptions({
-                                categoryAxis: categoryAxis
-                            });
-                        }
+                properties.categoryAxis.subscribe((categoryAxis) => {
+                    if (this.chart) {
+                        this.chart.setOptions({
+                            categoryAxis: categoryAxis
+                        });
+                    }
                 })
             );
         }

package/src/controls/kendo/Editor/Editor.ts

@@ -1,14 +1,12 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.editor.js";
-import { Element, element } from "../../../framework/element";
+import { Element, createElement, IElementProperties, extendProperties } from "../../../framework/element";
 import { createClickEvent } from "../../../framework/event";
-import { IProperties, extendProperties } from "../../../framework/properties";
 import { createDiv } from "../../html/Div/Div";
 import { createButton } from "../../html/Button/Button";
 import { formatHtml } from "../../../utilities/formatting/formatting";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap, observableValue, computed, isObservableValue } from "../../../framework/observablelmplementations";
+import { ISubscribable, observable } from "../../../framework/observable";
 
-export interface IEditorProperties extends IProperties {
+export interface IEditorProperties extends IElementProperties {
     value?: string | ISubscribable<string>;
     tools?: string[] | kendo.ui.EditorTool[];
 }
@@ -39,13 +37,13 @@ export class EditorElement extends Element<IEditorProperties> {
 
         const viewModel = this.properties;
 
-        const htmlMode = observableValue<boolean>(false);
+        const htmlMode = observable.observableValue<boolean>(false);
 
         const divHeader = createDiv(
             {
                 children: [
                     createButton({
-                        content: computed<string>(() => {
+                        content: observable.computed<string>(() => {
                             return htmlMode.get() ? "wysiwyg" : "view html source";
                         }),
                         eventListeners: [
@@ -63,7 +61,7 @@ export class EditorElement extends Element<IEditorProperties> {
         ).render();
 
         const div = createDiv({
-            visible: computed<boolean>(() => {
+            visible: observable.computed<boolean>(() => {
                 return !htmlMode.get();
             }),
             style: {
@@ -71,7 +69,7 @@ export class EditorElement extends Element<IEditorProperties> {
             }
         }).render();
 
-        const textAreaElement = element({
+        const textAreaElement = createElement({
             tagName: "textarea",
             properties: {
                 visible: htmlMode,
@@ -83,15 +81,15 @@ export class EditorElement extends Element<IEditorProperties> {
             }
         }).render() as HTMLTextAreaElement;
 
-        this.element.appendChild(div);
-        this.element.appendChild(textAreaElement);
-        this.element.appendChild(divHeader);
+        this.htmlElement.appendChild(div);
+        this.htmlElement.appendChild(textAreaElement);
+        this.htmlElement.appendChild(divHeader);
 
-        const html = unwrap<string>(viewModel.value);
+        const html = observable.unwrap<string>(viewModel.value);
         div.innerHTML = html;
         textAreaElement.value = formatHtml(html);
 
-        if (isSubscribable(viewModel.value)) {
+        if (observable.isSubscribable(viewModel.value)) {
 
             this.disposers.push(
                 viewModel.value.subscribe((value) => {
@@ -111,7 +109,7 @@ export class EditorElement extends Element<IEditorProperties> {
         this.editor.bind(
             "change",
             () => {
-                if (isObservableValue(viewModel.value)) {
+                if (observable.isObservableValue(viewModel.value)) {
                     viewModel.value.setValue(div.innerHTML);
                 }
             }
@@ -120,7 +118,7 @@ export class EditorElement extends Element<IEditorProperties> {
         textAreaElement.addEventListener(
             "change",
             () => {
-                if (isObservableValue(viewModel.value)) {
+                if (observable.isObservableValue(viewModel.value)) {
                     viewModel.value.setValue(textAreaElement.value);
                 }
             });

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

@@ -1,11 +1,9 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.grid.js";
-import { Element, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { Element, ElementProperties, IElementProperties, extendProperties, addElementToDictionary } from "../../../framework/element";
 import { IChangedItem } from "../DataSource/DataSource";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap, isObservableValue, isObservableArray } from "../../../framework/observablelmplementations";
+import { ISubscribable, observable } from "../../../framework/observable";
 
-export interface IGridProperties<TItem> extends IProperties {
+export interface IGridProperties<TItem> extends IElementProperties {
     items?: Array<TItem> | ISubscribable<Array<TItem>>;
     idProperty?: keyof TItem;
     columns?: Array<kendo.ui.GridColumn>;
@@ -60,7 +58,7 @@ export class GridElement<TItem> extends Element<IGridProperties<TItem>> {
         const properties = this.properties;
 
         this.dataSource = new kendo.data.DataSource({
-            data: unwrap(properties.items),
+            data: observable.unwrap(properties.items),
             pageSize: this.properties.pageSize || 30,
             change: (event: kendo.data.DataSourceChangeEvent) => {
                 const items = event.items as Array<IChangedItem>;
@@ -86,21 +84,21 @@ export class GridElement<TItem> extends Element<IGridProperties<TItem>> {
             }
         });
 
-        this.grid = new kendo.ui.Grid(this.element, {
+        this.grid = new kendo.ui.Grid(this.htmlElement, {
             dataSource: this.dataSource,
             columns: this.properties.columns,
             toolbar: this.properties.toolbar,
             scrollable: this.properties.scrollable,
             sortable: this.properties.sortable,
             editable: this.properties.editable,
-            filterable: unwrap(this.properties.filterable),
+            filterable: observable.unwrap(this.properties.filterable),
             change: (event: kendo.ui.GridChangeEvent) => {
-                if (isObservableValue(properties.selectedItem)) {
+                if (observable.isObservableValue(properties.selectedItem)) {
                     const selectedItem = getSelectedDataItem(event.sender) as TItem;
                     properties.selectedItem.setValue(selectedItem);
                 }
 
-                if (isObservableArray(properties.selectedItems)) {
+                if (observable.isObservableArray(properties.selectedItems)) {
                     properties.selectedItems.setItems(getSelectedDataItems<TItem>(event.sender));
                 }
 
@@ -145,7 +143,7 @@ export class GridElement<TItem> extends Element<IGridProperties<TItem>> {
             });
         }
 
-        if (isSubscribable(properties.items)) {
+        if (observable.isSubscribable(properties.items)) {
             this.disposers.push(
                 properties.items.subscribe((items) => {
                     if (items) {
@@ -157,7 +155,7 @@ export class GridElement<TItem> extends Element<IGridProperties<TItem>> {
             );
         }
 
-        if (isSubscribable(properties.filterable)) {
+        if (observable.isSubscribable(properties.filterable)) {
             this.disposers.push(
                 properties.filterable.subscribe((filterable) => {
                     this.grid.setOptions({ filterable: filterable });
@@ -165,7 +163,7 @@ export class GridElement<TItem> extends Element<IGridProperties<TItem>> {
             );
         }
 
-        if (isSubscribable(properties.selectedItem)) {
+        if (observable.isSubscribable(properties.selectedItem)) {
             this.disposers.push(
                 properties.selectedItem.subscribe((selectedItem) => {
                     if (selectedItem && properties.idProperty) {
@@ -186,7 +184,7 @@ export class GridElement<TItem> extends Element<IGridProperties<TItem>> {
             );
         }
 
-        if (isSubscribable(properties.selectedItems)) {
+        if (observable.isSubscribable(properties.selectedItems)) {
             this.disposers.push(
                 properties.selectedItems.subscribe((selectedItems) => {
                     if (selectedItems && selectedItems.length > 0 && properties.idProperty) {
@@ -257,7 +255,7 @@ export function getSelectedDataItems<TItem>(grid: kendo.ui.Grid): Array<TItem> {
     return selectedDataItems;
 }
 
-export class GridProperties<TItem = unknown> extends Properties implements IGridProperties<TItem> {
+export class GridProperties<TItem = unknown> extends ElementProperties implements IGridProperties<TItem> {
     constructor(properties: IGridProperties<TItem>) {
         super();
         this.setProperties(this, properties);

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

@@ -1,12 +1,10 @@
 import * as  kendo from "@progress/kendo-ui/js/kendo.menu.js";
-import { Element, render } from "../../../framework/element";
-import { Properties, IProperties, applyBindings, extendProperties } from "../../../framework/properties";
+import { Element,ElementProperties, IElementProperties, extendProperties, render, applyBindings } from "../../../framework/element";
 import { HierarchicalListItemProperties, IHierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap } from "../../../framework/observablelmplementations";
+import { ISubscribable, observable } from "../../../framework/observable";
 const getContent = "getContent";
 
-export interface IMenuProperties extends IProperties {
+export interface IMenuProperties extends IElementProperties {
     items?: Array<IHierarchicalListItemProperties> | ISubscribable<Array<IHierarchicalListItemProperties>>;
 }
 
@@ -35,7 +33,7 @@ export class MenuElement extends Element<IMenuProperties> {
         const viewModel = this.properties;
 
         this.dataSource = new kendo.data.HierarchicalDataSource({});
-        this.menu = new kendo.ui.Menu(this.element, {
+        this.menu = new kendo.ui.Menu(this.htmlElement, {
             dataTextField: "text",
             dataSource: this.dataSource
         });
@@ -53,7 +51,7 @@ export class MenuElement extends Element<IMenuProperties> {
 
                         if (hierarchicalListItemViewModel[getContent]) {
                             const content = hierarchicalListItemViewModel[getContent]();
-                            if (content instanceof Properties) {
+                            if (content instanceof ElementProperties) {
                                 const firstChild = element.firstElementChild as HTMLElement;
                                 firstChild.style.padding = "0";
                                 firstChild.innerHTML = "";
@@ -66,11 +64,11 @@ export class MenuElement extends Element<IMenuProperties> {
             }
         );
 
-        this.buildItems(unwrap(viewModel.items));
-        if (isSubscribable(viewModel.items)) {
+        this.buildItems(observable.unwrap(viewModel.items));
+        if (observable.isSubscribable(viewModel.items)) {
             this.disposers.push(
-                viewModel.items.subscribe((items)=>{
-                       this.buildItems(items);
+                viewModel.items.subscribe((items) => {
+                    this.buildItems(items);
                 })
             );
         }
@@ -83,7 +81,7 @@ export class MenuElement extends Element<IMenuProperties> {
         if (listItems) {
             //Add all visible menuItems to a dictionary
             listItems.forEach((listItem) => {
-                if (listItem as unknown instanceof Properties) {
+                if (listItem as unknown instanceof ElementProperties) {
                     listItem["attr"] = { postrender: true };
                 }
 
@@ -92,7 +90,7 @@ export class MenuElement extends Element<IMenuProperties> {
                     listItem[getContent] = () => { return content };
                     listItem.text = "<post>";
                 }
-                if (unwrap(listItem.visible) !== false) {
+                if (observable.unwrap(listItem.visible) !== false) {
                     itemDictionary[listItem.id] = listItem;
                 }
             });

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

@@ -1,12 +1,10 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.treeview.js";
-import { Element, render } from "../../../framework/element";
-import { Properties, IProperties, applyBindings, extendProperties } from "../../../framework/properties";
+import { Element,ElementProperties, IElementProperties, extendProperties, applyBindings, render } from "../../../framework/element";
 import { HierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap } from "../../../framework/observablelmplementations";
+import { ISubscribable, observable } from "../../../framework/observable";
 const getContent = "getContent";
 
-export interface ITreeviewProperties extends IProperties {
+export interface ITreeviewProperties extends IElementProperties {
     items?: Array<HierarchicalListItemProperties> | ISubscribable<Array<HierarchicalListItemProperties>>;
     selectedItem?: HierarchicalListItemProperties | ISubscribable<HierarchicalListItemProperties>;
     select?: (dataItem: unknown) => void;
@@ -39,7 +37,7 @@ export class TreeviewElement extends Element<ITreeviewProperties> {
             sort: { field: "order", dir: "asc" }
         });
 
-        this.treeView = new kendo.ui.TreeView(this.element, {
+        this.treeView = new kendo.ui.TreeView(this.htmlElement, {
             dataSource: this.dataSource
         });
 
@@ -59,7 +57,7 @@ export class TreeviewElement extends Element<ITreeviewProperties> {
             "dataBound",
             (event) => {
                 //Find all menuitems that needs to be post rendered.
-                const selectedItem = unwrap(viewModel.selectedItem);
+                const selectedItem = observable.unwrap(viewModel.selectedItem);
                 if (selectedItem) {
                     event.sender.wrapper.find(".k-item").each((index, element: HTMLElement) => {
                         const uid = element.getAttribute("data-uid");
@@ -78,7 +76,7 @@ export class TreeviewElement extends Element<ITreeviewProperties> {
 
                         if (hierarchicalListItemViewModel[getContent]) {
                             const content = hierarchicalListItemViewModel[getContent]();
-                            if (content instanceof Properties) {
+                            if (content instanceof ElementProperties) {
                                 const firstChild = element.firstElementChild as HTMLElement;
                                 firstChild.style.padding = "0";
                                 firstChild.innerHTML = "";
@@ -91,8 +89,8 @@ export class TreeviewElement extends Element<ITreeviewProperties> {
             }
         );
 
-        this.buildItems(unwrap(viewModel.items));
-        if (isSubscribable(viewModel.items)) {
+        this.buildItems(observable.unwrap(viewModel.items));
+        if (observable.isSubscribable(viewModel.items)) {
             this.disposers.push(
                 viewModel.items.subscribe((items) => {
                     this.buildItems(items);
@@ -114,7 +112,7 @@ export class TreeviewElement extends Element<ITreeviewProperties> {
                     listItem[getContent] = () => { return content };
                     listItem.text = "<post>";
                 }
-                if (unwrap(listItem.visible) !== false) {
+                if (observable.unwrap(listItem.visible) !== false) {
                     itemDictionary[listItem.id] = listItem;
                 }
             });

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

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

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

@@ -1,10 +1,8 @@
-import { ISubscribable } from "../../../framework/observableInterfaces";
-import { isSubscribable, unwrap } from "../../../framework/observablelmplementations";
+import { ISubscribable, observable } from "../../../framework/observable";
 import * as leaflet from "leaflet";
-import { Element, addElementToDictionary } from "../../../framework/element";
-import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { Element,addElementToDictionary, ElementProperties, IElementProperties, extendProperties } from "../../../framework/element";
 
-export interface IMapProperties extends IProperties {
+export interface IMapProperties extends IElementProperties {
     renderer?: leaflet.Renderer;
     center?: leaflet.LatLngExpression | ISubscribable<leaflet.LatLngExpression>;
     zoom?: number;
@@ -55,7 +53,7 @@ export class MapElement extends Element<IMapProperties> {
         //Leaflet can not handle rendering from an element not attached to the DOM
         setTimeout(
             () => {
-                this.map = leaflet.map(this.element, options).setView(unwrap(properties.center), this.properties.zoom);
+                this.map = leaflet.map(this.htmlElement, options).setView(observable.unwrap(properties.center), this.properties.zoom);
 
                 //Add the language specific zoom element
                 leaflet.control.zoom({
@@ -86,8 +84,8 @@ export class MapElement extends Element<IMapProperties> {
 
                 this.setTileLayers(properties.tileLayers);
 
-                this.setLayers(unwrap(properties.layers));
-                if (isSubscribable(properties.layers)) {
+                this.setLayers(observable.unwrap(properties.layers));
+                if (observable.isSubscribable(properties.layers)) {
                     this.disposers.push(
                         properties.layers.subscribe((layers) => {
                             this.setLayers(layers);
@@ -95,8 +93,8 @@ export class MapElement extends Element<IMapProperties> {
                     );
                 }
 
-                this.setControls(unwrap(properties.controls));
-                if (isSubscribable(properties.controls)) {
+                this.setControls(observable.unwrap(properties.controls));
+                if (observable.isSubscribable(properties.controls)) {
                     this.disposers.push(
                         properties.controls.subscribe((controls) => {
                             this.setControls(controls);
@@ -104,7 +102,7 @@ export class MapElement extends Element<IMapProperties> {
                     );
                 }
 
-                if (isSubscribable(properties.center)) {
+                if (observable.isSubscribable(properties.center)) {
                     this.disposers.push(
                         properties.center.subscribe((center) => {
                             this.map.panTo(center);
@@ -165,7 +163,7 @@ export function createMap(properties: IMapProperties) {
 
 export const burtonville: leaflet.LatLngExpression = [50.283939, 5.964070];
 
-export class MapProperties extends Properties implements IMapProperties {
+export class MapProperties extends ElementProperties implements IMapProperties {
     constructor(properties: IMapProperties) {
         super();
         this.setProperties(this, properties);