jpf 4.2.18 → 5.0.6

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

@@ -1,28 +1,26 @@
-import { unwrap, isSubscribable } from "knockout";
-import { View, registerView } from "../../../framework/View";
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
-import { ObservableProperty, ObservableArrayProperty, isObservableProperty, observableArrayProperty, observableProperty } from "../../../framework/observable";
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable, unwrap, isSubscribable, isObservableValue } from "../../../framework/observable";
 
-export interface SelectProperties<TItem, TValue, TSetter = TValue> extends Properties {
-    value?: TValue | ObservableProperty<TValue, TSetter>;
-    items?: Array<TItem> | ObservableArrayProperty<TItem>;
+export interface ISelectProperties<TItem, TValue, TSetter = TValue> extends IProperties {
+    value?: TValue | ISubscribable<TValue>;
+    items?: Array<TItem> | ISubscribable<Array<TItem>>;
     textFunction: (item: TItem) => string;
     valueFunction: (item: TItem) => TValue;
     setFunction?: (item: TItem) => TSetter;
-    inputValidator?: (event: Event, selectViewModel: SelectProperties<TItem, TValue, TSetter>, value: TValue) => Promise<boolean>;
+    inputValidator?: (event: Event, selectViewModel: ISelectProperties<TItem, TValue, TSetter>, value: TValue) => Promise<boolean>;
     emptyItemText?: string;
 }
-
-export class SelectView<TItem, TValue, TSetter = TValue> extends View<SelectProperties<TItem, TValue, TSetter>> {
-    constructor(properties: SelectProperties<TItem, TValue, TSetter>) {
+export class SelectElement<TItem, TValue, TSetter = TValue> extends Element<ISelectProperties<TItem, TValue, TSetter>> {
+    constructor(properties: ISelectProperties<TItem, TValue, TSetter>) {
         super(
             {
                 tagName: "select",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Select"
-                    },
-                    properties
+                        elementType: "Select"
+                    }
                 )
             }
         );
@@ -33,21 +31,21 @@ export class SelectView<TItem, TValue, TSetter = TValue> extends View<SelectProp
         super.build();
         const select = this.element as HTMLSelectElement;
 
-        const viewModel = this.properties;
+        const properties = this.properties;
 
-        this.setItems(unwrap(viewModel.items) as Array<TItem>);
-        if (isSubscribable(viewModel.items)) {
+        this.setItems(unwrap(properties.items) as Array<TItem>);
+        if (isSubscribable(properties.items)) {
             this.subscriptions.push(
-                viewModel.items.subscribe((items) => {
+                properties.items.subscribe((items) => {
                     this.setItems(items);
                 })
             );
         }
 
-        this.setSelectedValue(unwrap(viewModel.value) as TValue);
-        if (isSubscribable(viewModel.value)) {
+        this.setSelectedValue(unwrap(properties.value) as TValue);
+        if (isSubscribable(properties.value)) {
             this.subscriptions.push(
-                viewModel.value.subscribe((value) => {
+                properties.value.subscribe((value) => {
                     this.setSelectedValue(value);
                 })
             );
@@ -64,19 +62,19 @@ export class SelectView<TItem, TValue, TSetter = TValue> extends View<SelectProp
                     selectedItem = this.itemDictionary[selectedValue.toString()];
                     selectedValue = this.properties.valueFunction(selectedItem);
                 }
-                if (viewModel.inputValidator) {
-                    if (!await viewModel.inputValidator(event, viewModel, selectedValue)) {
-                        select.value = unwrap(viewModel.value) as any as string;
+                if (properties.inputValidator) {
+                    if (!await properties.inputValidator(event, properties, selectedValue)) {
+                        select.value = unwrap(properties.value) as any as string;
                         return;
                     };
                 }
 
-                if (isObservableProperty(viewModel.value)) {
-                    if (viewModel.setFunction) {
-                        const setValue = viewModel.setFunction(selectedItem);
-                        viewModel.value.set(setValue);
+                if (isObservableValue(properties.value)) {
+                    if (properties.setFunction) {
+                        const setValue = properties.setFunction(selectedItem) as any as TValue;
+                        properties.value.setValueInAction(setValue);
                     } else {
-                        viewModel.value.set(selectedValue as any);
+                        properties.value.setValueInAction(selectedValue);
                     }
                 }
             }
@@ -122,25 +120,25 @@ export class SelectView<TItem, TValue, TSetter = TValue> extends View<SelectProp
     }
 }
 
-export function selectView<TItem, TValue, TSetter = TValue>(properties: SelectProperties<TItem, TValue, TSetter>) {
-    return new SelectView(properties);
+export function createSelect<TItem, TValue, TSetter = TValue>(properties: ISelectProperties<TItem, TValue, TSetter>) {
+    return new SelectElement(properties);
 }
 
-export class SelectViewModel<TItem, TValue, TSetter = TValue> extends ViewModel implements SelectProperties<TItem, TValue, TSetter> {
-    constructor(properties: SelectProperties<TItem, TValue, TSetter>) {
+export class SelectProperties<TItem, TValue, TSetter = TValue> extends Properties implements ISelectProperties<TItem, TValue, TSetter> {
+    constructor(properties: ISelectProperties<TItem, TValue, TSetter>) {
         super();
         this.setProperties(this, properties);
     }
-    value?: TValue | ObservableProperty<TValue, TSetter>;
-    items?: Array<TItem> | ObservableArrayProperty<TItem>;
+    value?: TValue | ISubscribable<TValue>;
+    items?: Array<TItem> | ISubscribable<Array<TItem>>;
     textFunction: (item: TItem) => string;
     valueFunction: (item: TItem) => TValue;
     setFunction?: (item: TItem) => TSetter;
-    inputValidator?: (event: Event, selectViewModel: SelectProperties<TItem, TValue, TSetter>, value: TValue) => Promise<boolean>;
+    inputValidator?: (event: Event, selectViewModel: ISelectProperties<TItem, TValue, TSetter>, value: TValue) => Promise<boolean>;
     emptyItemText?: string;
 }
 
-registerView(
-    SelectViewModel,
-    SelectView
+registerElement(
+    SelectProperties.prototype.constructor,
+    SelectElement
 );

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

@@ -1,38 +1,38 @@
-import { View, registerView } from "../../../framework/View";
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
 
-export interface SpanProperties extends Properties {
+export interface ISpanProperties extends IProperties {
 
 }
 
-export class SpanView extends View<SpanProperties> {
-    constructor(properties: SpanProperties) {
+export class SpanElement extends Element<ISpanProperties> {
+    constructor(properties: ISpanProperties) {
         super(
             {
                 tagName: "span",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Span"
-                    },
-                    properties
+                        elementType: "Span"
+                    }
                 )
             }
         );
     }
 }
 
-export function spanView(properties: SpanProperties) {
-    return new SpanView(properties);
+export function createSpan(properties: ISpanProperties) {
+    return new SpanElement(properties);
 }
 
-export class SpanViewModel extends ViewModel implements SpanProperties {
+export class SpanProperties extends Properties implements ISpanProperties {
     constructor(properties: SpanProperties) {
         super();
         this.setProperties(this, properties);
     }
 }
 
-registerView(
-    SpanViewModel,
-    SpanView
+registerElement(
+    SpanProperties.prototype.constructor,
+    SpanElement
 );

package/src/controls/index.ts

@@ -1,7 +1,7 @@
 import * as codeMirror from "./codeMirror/index";
 import * as custom from "./custom/index";
 import * as html from "./html/index";
-import * as jsonViewAwesome from "./jsonViewAwesome/index";
+import * as jsonViewerAwesome from "./jsonViewerAwesome/index";
 import * as kendo from "./kendo/index";
 import * as leaflet from "./leaflet/index";
 import * as svg from "./svg/index";
@@ -9,7 +9,7 @@ import * as svg from "./svg/index";
 export { codeMirror };
 export { custom };
 export { html };
-export { jsonViewAwesome };
+export { jsonViewerAwesome };
 export { kendo };
 export { leaflet };
 export { svg };

package/src/controls/{jsonViewAwesome → jsonViewerAwesome}/jsonFormatter/JsonFormatter.ts

@@ -1,10 +1,10 @@
-import { View, registerView } from "../../../framework/View";
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
-import { Subscribable, unwrap, isObservable } from "knockout";
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable, unwrap, isSubscribable } from "../../../framework/observable";
 import { JSONFormatter } from "json-viewer-awesome/lib/json-formatter";
 
-export interface JsonFormatterProperties extends Properties {
-    json: object | Subscribable<object>;
+export interface IJsonFormatterProperties extends IProperties {
+    json: object | ISubscribable<object>;
     showArrayIndex?: boolean;
     quotesOnKeys?: boolean;
     displayDataTypes?: boolean;
@@ -13,16 +13,16 @@ export interface JsonFormatterProperties extends Properties {
     collapsed?: boolean;
 }
 
-export class JsonFormatterView extends View<JsonFormatterProperties> {
-    constructor(properties: JsonFormatterProperties) {
+export class JsonFormatterElement extends Element<IJsonFormatterProperties> {
+    constructor(properties: IJsonFormatterProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "JsonFormatter"
-                    },
-                    properties
+                        elementType: "JsonFormatter"
+                    }
                 )
             }
         );
@@ -31,12 +31,12 @@ export class JsonFormatterView extends View<JsonFormatterProperties> {
     build(): void {
         super.build();
 
-        const viewModel = this.properties;
-        this.setJson(unwrap(viewModel.json));
-        if (isObservable(viewModel.json)) {
+        const properties = this.properties;
+        this.setJson(unwrap(properties.json));
+        if (isSubscribable(properties.json)) {
             this.subscriptions.push(
-                viewModel.json.subscribe((json) => {
-                    this.setJson(json);
+                properties.json.subscribe((json)=>{
+                      this.setJson(json as any as object);
                 })
             );
         }
@@ -67,16 +67,16 @@ export class JsonFormatterView extends View<JsonFormatterProperties> {
     }
 }
 
-export function jsonFormatterView(properties: JsonFormatterProperties) {
-    return new JsonFormatterView(properties);
+export function createJsonFormatter(properties: IJsonFormatterProperties) {
+    return new JsonFormatterElement(properties);
 }
 
-export class JsonFormatterViewModel extends ViewModel implements JsonFormatterProperties {
-    constructor(properties: JsonFormatterProperties) {
+export class JsonFormatterProperties extends Properties implements IJsonFormatterProperties {
+    constructor(properties: IJsonFormatterProperties) {
         super();
         this.setProperties(this, properties);
     }
-    json: object | Subscribable<object>;
+    json: object | ISubscribable<object>;
     showArrayIndex?: boolean;
     quotesOnKeys?: boolean;
     displayDataTypes?: boolean;
@@ -85,7 +85,7 @@ export class JsonFormatterViewModel extends ViewModel implements JsonFormatterPr
     collapsed?: boolean;
 }
 
-registerView(
-    JsonFormatterViewModel,
-    JsonFormatterView
+registerElement(
+    JsonFormatterProperties.prototype.constructor,
+    JsonFormatterElement
 );

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

@@ -1,27 +1,27 @@
-import * as kendo from "@progress/kendo-ui/js/dataviz/chart/chart.js";
-import { View } from "../../../framework/View";
-import { Properties, extendProperties} from "../../../framework/ViewModel";
-import { Subscribable, unwrap, isSubscribable } from "knockout";
+import * as kendo from "@progress/kendo-ui/js/kendo.dataviz.chart";
+import { Element } from "../../../framework/element";
+import { IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable, unwrap, isSubscribable } from "../../../framework/observable";
 
-export interface ChartProperties extends Properties {
-    data?: Array<any> | Subscribable<Array<any>>;
+export interface IChartProperties extends IProperties {
+    data?: Array<any> | ISubscribable<Array<any>>;
     chartArea?: kendo.dataviz.ui.ChartChartArea | undefined;
-    series?: kendo.dataviz.ui.ChartSeriesItem[] | Subscribable<kendo.dataviz.ui.ChartSeriesItem[]>;
-    categoryAxis?: kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[] | Subscribable<kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[]>;
+    series?: kendo.dataviz.ui.ChartSeriesItem[] | ISubscribable<kendo.dataviz.ui.ChartSeriesItem[]>;
+    categoryAxis?: kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[] | ISubscribable<kendo.dataviz.ui.ChartCategoryAxisItem | kendo.dataviz.ui.ChartCategoryAxisItem[]>;
     valueAxis?: kendo.dataviz.ui.ChartValueAxisItem | kendo.dataviz.ui.ChartValueAxisItem[] | undefined;
     legend?: kendo.dataviz.ui.ChartLegend | undefined;
 }
 
-export class ChartView extends View<ChartProperties>{
-    constructor(properties: ChartProperties) {
+export class ChartElement extends Element<IChartProperties>{
+    constructor(properties: IChartProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "KendoChart"
-                    },
-                    properties
+                        elementType: "KendoChart"
+                    }
                 )
             }
         );
@@ -33,19 +33,19 @@ export class ChartView extends View<ChartProperties>{
     build(): void {
         super.build();
 
-        const viewModel = this.properties;
+        const properties = this.properties;
 
-        if (viewModel.data) {
+        if (properties.data) {
             this.dataSource = new kendo.data.DataSource(
                 {
-                    data: unwrap(viewModel.data)
+                    data: unwrap(properties.data)
                 }
             );
         }
 
-        if (isSubscribable(viewModel.data)) {
+        if (isSubscribable(properties.data)) {
             this.subscriptions.push(
-                viewModel.data.subscribe((data) => {
+                properties.data.subscribe((data) => {
                     this.dataSource.data(data);
                 })
             );
@@ -56,19 +56,19 @@ export class ChartView extends View<ChartProperties>{
                 this.element,
                 {
                     autoBind: false,
-                    legend: viewModel.legend,
+                    legend: properties.legend,
                     dataSource: this.dataSource,
-                    chartArea: viewModel.chartArea,
-                    series: unwrap(viewModel.series),
-                    categoryAxis: unwrap(viewModel.categoryAxis),
-                    valueAxis: viewModel.valueAxis
+                    chartArea: properties.chartArea,
+                    series: unwrap(properties.series),
+                    categoryAxis: unwrap(properties.categoryAxis),
+                    valueAxis: properties.valueAxis
                 }
             );
         });
 
-        if (isSubscribable(viewModel.series)) {
+        if (isSubscribable(properties.series)) {
             this.subscriptions.push(
-                viewModel.series.subscribe((series) => {
+                properties.series.subscribe((series) => {
                     if (this.chart) {
                         this.chart.setOptions({
                             series: series
@@ -78,20 +78,20 @@ export class ChartView extends View<ChartProperties>{
             );
         }
 
-        if (isSubscribable(viewModel.categoryAxis)) {
+        if (isSubscribable(properties.categoryAxis)) {
             this.subscriptions.push(
-                viewModel.categoryAxis.subscribe((categoryAxis) => {
-                    if (this.chart) {
-                        this.chart.setOptions({
-                            categoryAxis: categoryAxis
-                        });
-                    }
+                properties.categoryAxis.subscribe((categoryAxis)=>{
+                                            if (this.chart) {
+                            this.chart.setOptions({
+                                categoryAxis: categoryAxis
+                            });
+                        }
                 })
             );
         }
     }
 }
 
-export function chartView(properties: ChartProperties) {
-    return new ChartView(properties);
+export function createChart(properties: IChartProperties) {
+    return new ChartElement(properties);
 }

package/src/controls/kendo/DataSource/DataSource.ts

@@ -1,4 +1,4 @@
-export interface ChangedItem {
+export interface IChangedItem {
     key: string;
     dirtyFields: object;
 }

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

@@ -1,31 +1,30 @@
 import * as kendo from "@progress/kendo-ui/js/kendo.editor.js";
-import { View, registerView } from "../../../framework/View";
-import { Properties, ViewModel, extendProperties } from "../../../framework/ViewModel";
-import { unwrap, isObservable, computed, observable } from "knockout";
-import { isObservableProperty, ObservableProperty } from "../../../framework/observable";
-import { DivView } from "../../html/Div/Div";
-import { ButtonView } from "../../html/Button/Button";
-import { prettifyHtml } from "../../../utilities/html/html";
-
-export interface EditorProperties extends Properties {
-    value?: string | ObservableProperty<string>;
+import { Element, element } from "../../../framework/element";
+import { IProperties, extendProperties } from "../../../framework/properties";
+import { isSubscribable, ISubscribable, observableValue, isObservableValue, computed, unwrap } from "../../../framework/observable";
+import { createDiv } from "../../html/Div/Div";
+import { createButton } from "../../html/Button/Button";
+import { formatHtml } from "../../../utilities/formatting/formatting";
+
+export interface IEditorProperties extends IProperties {
+    value?: string | ISubscribable<string>;
     tools?: string[] | kendo.ui.EditorTool[];
 }
 
-export class EditorView extends View<EditorProperties> {
-    constructor(properties: EditorProperties) {
+export class EditorElement extends Element<IEditorProperties> {
+    constructor(properties: IEditorProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "KendoEditor",
+                        elementType: "KendoEditor",
                         style: {
                             display: "flex",
                             flexDirection: "column"
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
@@ -38,30 +37,32 @@ export class EditorView extends View<EditorProperties> {
 
         const viewModel = this.properties;
 
-        const htmlMode = observable<boolean>(false);
-
-        const divHeader = new DivView({
-            children: [
-                new ButtonView({
-                    content: computed<string>(() => {
-                        return htmlMode() ? "wysiwyg" : "view html source";
-                    }),
-                    eventListeners: {
-                        click: {
-                            listener: () => {
-                                htmlMode(!htmlMode());
+        const htmlMode = observableValue<boolean>(false);
+
+        const divHeader = createDiv(
+            {
+                children: [
+                    createButton({
+                        content: computed<string>(() => {
+                            return htmlMode() ? "wysiwyg" : "view html source";
+                        }),
+                        eventListeners: {
+                            click: {
+                                listener: () => {
+                                    htmlMode.setValue(!htmlMode());
+                                }
                             }
+                        },
+                        style: {
+                            width: "120px",
+                            marginTop: "2px"
                         }
-                    },
-                    style: {
-                        width: "120px",
-                        marginTop: "2px"
-                    }
-                })
-            ]
-        }).render();
+                    })
+                ]
+            }
+        ).render();
 
-        const divElement = new DivView({
+        const div = createDiv({
             visible: computed<boolean>(() => {
                 return !htmlMode();
             }),
@@ -70,7 +71,7 @@ export class EditorView extends View<EditorProperties> {
             }
         }).render();
 
-        const textAreaElement = new View({
+        const textAreaElement = element({
             tagName: "textarea",
             properties: {
                 visible: htmlMode,
@@ -82,25 +83,26 @@ export class EditorView extends View<EditorProperties> {
             }
         }).render() as HTMLTextAreaElement;
 
-        this.element.appendChild(divElement);
+        this.element.appendChild(div);
         this.element.appendChild(textAreaElement);
         this.element.appendChild(divHeader);
 
-        const html = unwrap(viewModel.value);
-        divElement.innerHTML = html;
-        textAreaElement.value = prettifyHtml(html);
+        const html = unwrap<string>(viewModel.value);
+        div.innerHTML = html;
+        textAreaElement.value = formatHtml(html);
+
+        if (isSubscribable(viewModel.value)) {
 
-        if (isObservable(viewModel.value)) {
             this.subscriptions.push(
                 viewModel.value.subscribe((value) => {
-                    divElement.innerHTML = value;
+                    div.innerHTML = value;
                     textAreaElement.value = value;
                 })
             );
         }
 
         this.editor = new kendo.ui.Editor(
-            divElement,
+            createDiv,
             {
                 tools: viewModel.tools
             }
@@ -109,34 +111,22 @@ export class EditorView extends View<EditorProperties> {
         this.editor.bind(
             "change",
             () => {
-                if (isObservableProperty(viewModel.value)) {
-                    viewModel.value.set(divElement.innerHTML);
+                if (isObservableValue(viewModel.value)) {
+                    viewModel.value.setValue(div.innerHTML);
                 }
             }
         );
 
-        textAreaElement.addEventListener("change", () => {
-            if (isObservableProperty(viewModel.value)) {
-                viewModel.value.set(textAreaElement.value);
-            }
-        });
-    }
-}
-
-export function editorView(properties: EditorProperties) {
-    return new EditorView(properties);
-}
-
-export class EditorViewModel extends ViewModel implements EditorProperties {
-    constructor(properties: EditorProperties) {
-        super();
-        this.setProperties(this, properties);
+        textAreaElement.addEventListener(
+            "change",
+            () => {
+                if (isObservableValue(viewModel.value)) {
+                    viewModel.value.setValue(textAreaElement.value);
+                }
+            });
     }
-    value?: string | ObservableProperty<string>;
-    tools?: string[] | kendo.ui.EditorTool[];
 }
 
-registerView(
-    EditorViewModel,
-    EditorView
-)
+export function createEditor(properties: IEditorProperties) {
+    return new EditorElement(properties);
+}