jpf 4.2.18 → 5.0.6

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

@@ -1,33 +1,33 @@
-import { isObservable, unwrap } from "knockout";
-import { View, getView, registerView } from "../../../framework/View";
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+import { Element, getElement, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { isSubscribable, ISubscribable, unwrap } 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 ListItemProperties extends Properties {
+export interface IListItemProperties extends IProperties {
     id: number | string;
-    text?: string | ViewModel;
+    text?: string | ISubscribable<string> | Properties;
     select?: () => void;
     order?: number | string;
 }
 
-export interface HierarchicalListItemProperties extends ListItemProperties {
+export interface IHierarchicalListItemProperties extends IListItemProperties {
     parentId?: number | string;
     expanded?: boolean;
-    items?: Array<HierarchicalListItemProperties>;
+    items?: Array<IHierarchicalListItemProperties>;
 }
 
-export class ListItemView extends View<ListItemProperties> {
-    constructor(properties: ListItemProperties) {
+export class ListItemElement extends Element<IListItemProperties> {
+    constructor(properties: IListItemProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "ListItem"
-                    },
-                    properties
+                        elementType: "ListItem"
+                    }
                 )
             }
         );
@@ -36,64 +36,64 @@ export class ListItemView extends View<ListItemProperties> {
     build(): void {
         super.build();
 
-        const viewModel = this.properties;
+        const properties = this.properties;
 
-        if (isObservable(viewModel.text)) {
-            this.setContent(unwrap(viewModel.text));
+        if (isSubscribable(properties.text)) {
+            this.setContent(unwrap(properties.text));
             this.subscriptions.push(
-                viewModel.text.subscribe((content) => {
-                    this.setContent(content);
+                properties.text.subscribe((text)=>{
+                      this.setContent(text);
                 })
             );
         } else {
-            this.setContent(viewModel.text);
+            this.setContent(properties.text);
         }
     }
 
-    private setContent(content: string | ViewModel) {
+    private setContent(content: string | Properties) {
         if (typeof content === "string") {
             this.element.innerHTML = content;
-        } else if (content instanceof ViewModel) {
-            this.setChildren(getView(content));
+        } else if (content instanceof Properties) {
+            this.setChildren(getElement(content));
         }
     }
 }
 
-export function listItemView(properties: ListItemProperties) {
-    return new ListItemView(properties);
+export function createListItem(properties: IListItemProperties) {
+    return new ListItemElement(properties);
 }
 
-export class ListItemViewModel extends ViewModel implements ListItemProperties {
-    constructor(properties: ListItemProperties) {
+export class ListItemProperties extends Properties implements IListItemProperties {
+    constructor(properties: IListItemProperties) {
         super();
         this.setProperties(this, properties);
     }
     id: number | string;
-    text?: string | ViewModel;
+    text?: string | Properties;
     select?: () => void;
     order?: number | string;
 }
 
-registerView(
-    ListItemViewModel,
-    ListItemView
+registerElement(
+    ListItemProperties.prototype.constructor,
+    ListItemElement
 );
 
-export class HierarchicalListItemViewModel extends ViewModel implements HierarchicalListItemProperties{
-    constructor(properties: HierarchicalListItemProperties) {
+export class HierarchicalListItemProperties extends Properties implements IHierarchicalListItemProperties {
+    constructor(properties: IHierarchicalListItemProperties) {
         super();
         this.setProperties(this, properties);
     }
     id: number | string;
-    text?: string | ViewModel;
+    text?: string | Properties;
     select?: () => void;
     order?: number | string;
     parentId?: number | string;
     expanded?: boolean;
-    items?: Array<HierarchicalListItemProperties>;
+    items?: Array<IHierarchicalListItemProperties>;
 }
 
-registerView(
-    HierarchicalListItemViewModel,
-    ListItemView
+registerElement(
+    HierarchicalListItemProperties,
+    ListItemElement
 )

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

@@ -1,21 +1,21 @@
-import { unwrap, Subscribable, isSubscribable } from "knockout";
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel"
-import { View, getView, registerView } from "../../../framework/View";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties"
+import { Element, getElement, registerElement } from "../../../framework/element";
+import { ISubscribable, isSubscribable, unwrap } from "../../../framework/observable";
 
-export interface ButtonProperties extends Properties {
-    content?: string | ViewModel | Subscribable<string | ViewModel>;
+export interface IButtonProperties extends IProperties {
+    content?: string | Properties | ISubscribable<string | Properties>;
 }
 
-export class ButtonView extends View<ButtonProperties> {
-    constructor(properties: ButtonProperties) {
+export class ButtonElement extends Element<IButtonProperties> {
+    constructor(properties: IButtonProperties) {
         super(
             {
                 tagName: "button",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Button"
-                    },
-                    properties
+                        elementType: "Button"
+                    }
                 )
             }
         );
@@ -24,47 +24,54 @@ export class ButtonView extends View<ButtonProperties> {
     build(): void {
         super.build();
 
-        const viewModel = this.properties;
-        if (viewModel.content) {
-            if (isSubscribable(viewModel.content)) {
-                this.buildContent(unwrap(viewModel.content));
+        const properties = this.properties;
+        if (properties.content) {
+            this.buildContent(unwrap(properties.content));
+
+            if (isSubscribable(properties.content)) {
                 this.subscriptions.push(
-                    viewModel.content.subscribe((content) => {
-                        this.buildContent(content);
+                    properties.content.subscribe((content)=>{
+                             this.buildContent(content);
                     })
+                    //reaction(
+                    //    () => {
+                    //        return unwrap(properties.content);
+                    //    },
+                    //    (content) => {
+                    //        this.buildContent(content);
+                    //    }
+                    //)
                 );
-            } else {
-                this.buildContent(viewModel.content);
             }
         }
     }
 
-    private buildContent(content: string | ViewModel) {
+    private buildContent(content: string | Properties) {
         if (content == null || content === undefined) {
             this.element.innerText = null;
         }
         else if (typeof content === "string") {
             this.element.innerText = content;
         }
-        else if (content instanceof ViewModel) {
-            this.setChildren(getView(content as ViewModel));
+        else if (content instanceof Properties) {
+            this.setChildren(getElement(content as Properties));
         }
     }
 }
 
-export function buttonView(properties: ButtonProperties): ButtonView {
-    return new ButtonView(properties);
+export function createButton(properties: IButtonProperties) {
+    return new ButtonElement(properties);
 }
 
-export class ButtonViewModel extends ViewModel implements ButtonProperties{
-    constructor(properties: ButtonProperties) {
+export class ButtonProperties extends Properties implements IButtonProperties {
+    constructor(properties: IButtonProperties) {
         super();
         this.setProperties(this, properties);
     }
-    content?: string | ViewModel | Subscribable<string | ViewModel>;
+    content?: string | Properties | ISubscribable<string | Properties>;
 }
 
-registerView(
-    ButtonViewModel,
-    ButtonView
+registerElement(
+    ButtonProperties.prototype.constructor,
+    ButtonElement
 );

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

@@ -1,41 +1,40 @@
-import { View, IView, registerView } from "../../../framework/View";
-import { Properties , extendProperties, ViewModel } from "../../../framework/ViewModel";
-import { Subscribable } from "knockout";
+import { Element, IElement, registerElement } from "../../../framework/element";
+import { IProperties, extendProperties, Properties } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
 
-export interface DivProperties extends Properties {
-    children?: Array<IView> | Subscribable<Array<IView>>;
+export interface IDivProperties extends IProperties {
+    children?: Array<IElement> | ISubscribable<Array<IElement>>;
 }
-
-export class DivView extends View<DivProperties> {
-    constructor(properties: DivProperties) {
+export class DivElement extends Element<IDivProperties> {
+    constructor(properties: IDivProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Div"
-                    },
-                    properties
-                ),
-                children: properties.children
+                        elementType: "Div"
+                    }
+                )
             },
+            properties.children
         );
     }
 }
 
-export function divView(properties: DivProperties): DivView {
-    return new DivView(properties);
+export function createDiv(properties: IDivProperties) {
+    return new DivElement(properties);
 }
 
-export class DivViewModel extends ViewModel implements DivProperties{
-    constructor(properties: DivProperties) {
+export class DivProperties extends Properties implements IDivProperties {
+    constructor(properties: IDivProperties) {
         super();
         this.setProperties(this, properties);
     }
-    children?: Array<IView> | Subscribable<Array<IView>>;
+    children?: Array<IElement> | ISubscribable<Array<IElement>>;
 }
 
-registerView(
-    DivViewModel,
-    DivView
+registerElement(
+    DivProperties.prototype.constructor,
+    DivElement
 )

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

@@ -1,46 +1,48 @@
-import { View, registerView } from "../../../framework/View";
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
-import { Subscribable } from "knockout";
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
 
-export interface ImageProperties extends Properties {
-    src: string | Subscribable<string>;
-    alt: string | Subscribable<string>;
+export interface IImageProperties extends IProperties {
+    src: string | ISubscribable<string>;
+    alt: string | ISubscribable<string>;
 }
 
-export class ImageView extends View<ImageProperties> {
-    constructor(properties: ImageProperties) {
+export class ImageElement extends Element<IImageProperties> {
+    constructor(properties: IImageProperties) {
         super(
             {
                 tagName: "img",
                 properties: extendProperties(
+                    properties,
+                    {
+                        elementType: "Image",
+                    },
                     {
-                        viewType: "Image",
                         attributes: {
                             src: properties.src,
                             alt: properties.alt
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
     }
 }
 
-export function imageView(properties: ImageProperties) {
-    return new ImageView(properties);
+export function createImage(properties: IImageProperties) {
+    return new ImageElement(properties);
 }
 
-export class ImageViewModel extends ViewModel implements ImageProperties{
-    constructor(properties: ImageProperties) {
+export class ImageProperties extends Properties implements IImageProperties {
+    constructor(properties: IImageProperties) {
         super();
         this.setProperties(this, properties);
     }
-    src: string | Subscribable<string>;
-    alt: string | Subscribable<string>;
+    src: string | ISubscribable<string>;
+    alt: string | ISubscribable<string>;
 }
 
-registerView(
-    ImageViewModel,
-    ImageView
+registerElement(
+    ImageProperties.prototype.constructor,
+    ImageElement
 );

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

@@ -1,7 +1,6 @@
-import { isSubscribable, unwrap, isObservable } from "knockout";
-import { View, registerView } from "../../../framework/View";
-import { ViewModel, Properties, extendProperties, isNullOrUndefined } from "../../../framework/ViewModel";
-import { ObservableProperty, observableProperty, isObservableProperty } from "../../../framework/observable";
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties, isNullOrUndefined } from "../../../framework/properties";
+import { ISubscribable, isSubscribable, unwrap, isObservableValue } from "../../../framework/observable";
 import { isInteger } from "../../../utilities/integer/integer";
 import { isFloat } from "../../../utilities/float/float";
 
@@ -13,10 +12,10 @@ export enum ValueUpdateModeEnum {
     OnInput = 2
 }
 
-export interface InputProperties<TValue> extends Properties {
-    value?: TValue | ObservableProperty<TValue>;
-    inputValidator?: (event: Event, inputViewModel: InputProperties<TValue>, value: string) => Promise<boolean>;
-    placeholder?: string | ObservableProperty<string>;
+export interface IInputProperties<TValue> extends IProperties {
+    value?: TValue | ISubscribable<TValue>;
+    inputValidator?: (event: Event, inputViewModel: IInputProperties<TValue>, value: string) => Promise<boolean>;
+    placeholder?: string | ISubscribable<string>;
     valueUpdateMode?: ValueUpdateModeEnum;
     min?: number;
     max?: number;
@@ -24,16 +23,16 @@ export interface InputProperties<TValue> extends Properties {
     type?: InputType;
 }
 
-export class InputView<TValue> extends View<InputProperties<TValue>> {
-    constructor(properties: InputProperties<TValue>) {
+export class InputElement<TValue> extends Element<IInputProperties<TValue>> {
+    constructor(properties: IInputProperties<TValue>) {
         super(
             {
                 tagName: "input",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Input"
-                    },
-                    properties
+                        elementType: "Input"
+                    }
                 )
             }
         );
@@ -44,30 +43,30 @@ export class InputView<TValue> extends View<InputProperties<TValue>> {
         super.build();
 
         const element = this.element;
-        const viewModel = this.properties;
-        if (!viewModel.valueUpdateMode) {
-            viewModel.valueUpdateMode = ValueUpdateModeEnum.OnChange;
+        const properties = this.properties;
+        if (!properties.valueUpdateMode) {
+            properties.valueUpdateMode = ValueUpdateModeEnum.OnChange;
         }
 
         const input = this.element as HTMLInputElement;
-        input.type = viewModel.type;
+        input.type = properties.type;
 
-        if (!isNullOrUndefined(viewModel.min)) {
-            input.min = viewModel.min as any;
+        if (!isNullOrUndefined(properties.min)) {
+            input.min = properties.min as any;
         }
-        if (!isNullOrUndefined(viewModel.max)) {
-            input.max = viewModel.max as any;
+        if (!isNullOrUndefined(properties.max)) {
+            input.max = properties.max as any;
         }
-        if (!isNullOrUndefined(viewModel.step)) {
-            input.step = viewModel.step as any;
+        if (!isNullOrUndefined(properties.step)) {
+            input.step = properties.step as any;
         }
 
-        switch (viewModel.type) {
+        switch (properties.type) {
             case "checkbox":
-                input.checked = unwrap(viewModel.value) as unknown as boolean;
-                if (isObservable(viewModel.value)) {
+                input.checked = unwrap(properties.value) as unknown as boolean;
+                if (isSubscribable(properties.value)) {
                     this.subscriptions.push(
-                        viewModel.value.subscribe((value: TValue) => {
+                        properties.value.subscribe((value) => {
                             input.checked = value as unknown as boolean;
                         })
                     );
@@ -80,10 +79,10 @@ export class InputView<TValue> extends View<InputProperties<TValue>> {
                 break;
 
             case "radio":
-                input.checked = input.value === unwrap(viewModel.value);
-                if (isSubscribable(viewModel.value)) {
+                input.checked = input.value === ((unwrap(properties.value)) as any as string);
+                if (isSubscribable(properties.value)) {
                     this.subscriptions.push(
-                        viewModel.value.subscribe((value) => {
+                        properties.value.subscribe((value) => {
                             input.checked = input.value === (value as any as string);
                         })
                     );
@@ -91,26 +90,26 @@ export class InputView<TValue> extends View<InputProperties<TValue>> {
                 break;
 
             default:
-                const value = unwrap(viewModel.value);
+                const value = unwrap(properties.value);
                 if (value) {
                     input.value = value as unknown as string;
                 }
-                if (isObservable(viewModel.value)) {
+                if (isSubscribable(properties.value)) {
                     this.subscriptions.push(
-                        viewModel.value.subscribe((value: TValue) => {
+                        properties.value.subscribe((value) => {
                             input.value = value as unknown as string;
                         })
                     );
                 }
         }
 
-        const placeholder = unwrap(viewModel.placeholder) as unknown as string;
+        const placeholder = unwrap(properties.placeholder) as unknown as string;
         if (placeholder) {
             input.placeholder = placeholder;
         }
-        if (isSubscribable(viewModel.placeholder)) {
+        if (isSubscribable(properties.placeholder)) {
             this.subscriptions.push(
-                viewModel.placeholder.subscribe((placeholder) => {
+                properties.placeholder.subscribe((placeholder) => {
                     if (placeholder) {
                         input.placeholder = placeholder;
                     } else {
@@ -127,7 +126,7 @@ export class InputView<TValue> extends View<InputProperties<TValue>> {
             );
         }
 
-        if (this.properties.valueUpdateMode === ValueUpdateModeEnum.OnInput || viewModel.inputValidator) {
+        if (this.properties.valueUpdateMode === ValueUpdateModeEnum.OnInput || properties.inputValidator) {
             this.element.addEventListener(
                 "input",
                 handleEvent
@@ -136,7 +135,7 @@ export class InputView<TValue> extends View<InputProperties<TValue>> {
 
         async function handleEvent(event: Event) {
             let newValue = null;
-            switch (viewModel.type) {
+            switch (properties.type) {
                 case "checkbox":
                     newValue = input.checked;
                     break;
@@ -162,59 +161,58 @@ export class InputView<TValue> extends View<InputProperties<TValue>> {
                     }
             }
 
-            if (viewModel.inputValidator) {
-                if (!await viewModel.inputValidator(event, viewModel, newValue as any as string)) {
-                    input.value = unwrap(viewModel.value) as any as string;
+            if (properties.inputValidator) {
+                if (!await properties.inputValidator(event, properties, newValue as any as string)) {
+                    input.value = unwrap(properties.value) as any as string;
                     return;
                 };
             }
 
-            if (viewModel.type === "integer") {
+            if (properties.type === "integer") {
                 if (isInteger(newValue)) {
                     newValue = parseInt(newValue);
                 } else {
-                    input.value = unwrap(viewModel.value) as any as string;
+                    input.value = unwrap(properties.value) as any as string;
                     return;
                 }
             }
 
-            if (viewModel.type === "float") {
+            if (properties.type === "float") {
                 if (isFloat(newValue)) {
                     newValue = parseFloat(newValue);
                 } else {
-                    input.value = unwrap(viewModel.value) as any as string;
+                    input.value = unwrap(properties.value) as any as string;
                     return;
                 }
             }
 
             //if validation has succeeded we set the viewModel value
-            if (isObservableProperty(viewModel.value)) {
-                if ((event.type === "change" && viewModel.valueUpdateMode === ValueUpdateModeEnum.OnChange) ||
-                    (event.type === "input" && viewModel.valueUpdateMode === ValueUpdateModeEnum.OnInput)) {
-                    viewModel.value.set(newValue);
+            if (isObservableValue(properties.value)) {
+                if ((event.type === "change" && properties.valueUpdateMode === ValueUpdateModeEnum.OnChange) ||
+                    (event.type === "input" && properties.valueUpdateMode === ValueUpdateModeEnum.OnInput)) {
+
+                    properties.value.setValueInAction(newValue);
                 } else {
-                    viewModel.value.set(newValue, false);
+                    properties.value.setInternal(newValue);
                 }
-            } else if (isObservable(viewModel.value)) {
-                viewModel.value(newValue);
             }
         }
     }
 }
 
-export function inputView<TValue>(properties: InputProperties<TValue>) {
-    return new InputView<TValue>(properties);
+export function createInput<TValue>(properties: IInputProperties<TValue>) {
+    return new InputElement<TValue>(properties);
 }
 
-export class InputViewModel<TValue> extends ViewModel implements InputProperties<TValue> {
-    constructor(properties: InputProperties<TValue>) {
+export class InputProperties<TValue> extends Properties implements IInputProperties<TValue> {
+    constructor(properties: IInputProperties<TValue>) {
         super();
         this.setProperties(this, properties);
     }
 
-    value?: TValue | ObservableProperty<TValue>;
+    value?: TValue | ISubscribable<TValue>;
     inputValidator?: (event: Event, inputViewModel: InputProperties<TValue>, value: string) => Promise<boolean>;
-    placeholder?: string | ObservableProperty<string>;
+    placeholder?: string | ISubscribable<string>;
     valueUpdateMode?: ValueUpdateModeEnum;
     min?: number;
     max?: number;
@@ -222,7 +220,7 @@ export class InputViewModel<TValue> extends ViewModel implements InputProperties
     type?: InputType;
 }
 
-registerView(
-    InputViewModel,
-    InputView
+registerElement(
+    InputProperties.prototype.constructor,
+    InputElement
 );