jpf 4.0.0 → 4.0.2

package/dist/View.d.ts

@@ -9,8 +9,8 @@ export interface ViewOptions<TViewModel> {
     viewModel?: TViewModel;
     children?: Array<IView> | ObservableArray<IView> | Computed<Array<IView>>;
 }
-export declare abstract class View<TViewModel extends ViewModelOptions = ViewModelOptions> implements IView {
-    protected constructor(options: ViewOptions<TViewModel>, designTimeOptions?: ViewModelOptions);
+export declare class View<TViewModel extends ViewModelOptions = ViewModelOptions> implements IView {
+    constructor(options: ViewOptions<TViewModel>, designTimeOptions?: ViewModelOptions);
     private readonly tagName;
     private readonly optionsChildren;
     private children;

package/dist/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sourceRoot":"","sources":["../src/View.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../src/View.ts"],"names":[],"mappings":"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"}

package/dist/ViewModel.d.ts

@@ -4,8 +4,8 @@ import { EventListeners } from "./event";
 import { Attributes, AttributesSubscribable } from "./attributes";
 import { Style, StyleSubscribable } from "./style";
 export interface ViewModelOptions {
-    classNames?: Array<string> | Subscribable<Array<string>>;
     attributes?: Attributes | AttributesSubscribable;
+    classNames?: Array<string> | Subscribable<Array<string>>;
     style?: Style | StyleSubscribable;
     visible?: boolean | Subscribable<boolean>;
     disabled?: boolean | Subscribable<boolean>;

package/dist/examples/example-01.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/examples/example-01.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ViewModel_1 = require("../src/ViewModel");
+const View_1 = require("../src/View");
+const knockout_1 = require("knockout");
+var innerHtml = (0, knockout_1.observable)("Hello world!");
+var borderColor = (0, knockout_1.observable)();
+var title = (0, knockout_1.observable)("my tooltip");
+var classNames = (0, knockout_1.observableArray)();
+var viewModel = new ViewModel_1.ViewModel({
+    innerHtml: innerHtml,
+    attributes: {
+        id: "1",
+        title: title
+    },
+    classNames: classNames,
+    style: {
+        width: "300px",
+        height: "30px",
+        backgroundColor: "green",
+        borderColor: borderColor
+    }
+});
+var view = new View_1.View({
+    tagName: "div",
+    viewModel: viewModel
+}, {
+    eventListeners: {
+        click: {
+            listener: () => {
+                innerHtml("Hello world updated");
+                borderColor("1px solid red");
+                title("my tooltip updated");
+                classNames(["classname1", "className2"]);
+            },
+            options: {
+                shiftKey: true
+            }
+        },
+    }
+});
+document.body.appendChild(view.render());
+//# sourceMappingURL=example-01.js.map

package/dist/examples/example-01.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example-01.js","sourceRoot":"","sources":["../../examples/example-01.ts"],"names":[],"mappings":";;AAAA,gDAA6C;AAC7C,sCAAmC;AACnC,uCAAuD;AAGvD,IAAI,SAAS,GAAG,IAAA,qBAAU,EAAS,cAAc,CAAC,CAAC;AACnD,IAAI,WAAW,GAAG,IAAA,qBAAU,GAAU,CAAC;AACvC,IAAI,KAAK,GAAG,IAAA,qBAAU,EAAS,YAAY,CAAC,CAAC;AAC7C,IAAI,UAAU,GAAG,IAAA,0BAAe,GAAU,CAAC;AAG3C,IAAI,SAAS,GAAG,IAAI,qBAAS,CAAC;IAC1B,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACR,EAAE,EAAE,GAAG;QACP,KAAK,EAAE,KAAK;KAEf;IACD,UAAU,EAAE,UAAU;IACtB,KAAK,EAAE;QACH,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,MAAM;QACd,eAAe,EAAE,OAAO;QACxB,WAAW,EAAE,WAAW;KAC3B;CACJ,CAAC,CAAC;AAEH,IAAI,IAAI,GAAG,IAAI,WAAI,CACf;IACI,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,SAAS;CACvB,EACD;IACI,cAAc,EAAE;QACZ,KAAK,EAAE;YAEH,QAAQ,EAAE,GAAG,EAAE;gBACX,SAAS,CAAC,qBAAqB,CAAC,CAAC;gBACjC,WAAW,CAAC,eAAe,CAAC,CAAC;gBAC7B,KAAK,CAAC,oBAAoB,CAAC,CAAC;gBAC5B,UAAU,CAAC,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;YAC7C,CAAC;YACD,OAAO,EAAE;gBACL,QAAQ,EAAE,IAAI;aACjB;SACJ;KACJ;CACJ,CAAC,CAAC;AAIP,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC"}

package/dist/src/View.d.ts

@@ -0,0 +1,32 @@
+import "tocca";
+import { ObservableArray, Computed } from "knockout";
+import { ViewModelOptions, ViewModel } from "./ViewModel";
+declare type TagName = "div" | "input" | "a" | "button" | "img" | "select" | "pre" | "form" | "span" | "textarea";
+export interface IView {
+    render(): HTMLElement;
+}
+export interface ViewOptions<TViewModel> {
+    tagName: TagName;
+    viewModel?: TViewModel;
+    children?: Array<IView> | ObservableArray<IView> | Computed<Array<IView>>;
+}
+export declare class View<TViewModel = any> implements IView {
+    constructor(options: ViewOptions<TViewModel>, designTimeOptions?: ViewModelOptions);
+    private readonly tagName;
+    private readonly optionsChildren;
+    private children;
+    private buildChildren;
+    protected element: HTMLElement;
+    protected readonly viewModel: TViewModel;
+    protected build(): void;
+    protected remove(): void;
+    protected addChild(child: IView): View<TViewModel>;
+    protected setChildren(...children: Array<IView>): View<TViewModel>;
+    protected empty(): void;
+    render(): HTMLElement;
+}
+export declare var viewDictionary: Map<any, any>;
+export declare function registerView(viewModel: any, resolver: any): void;
+export declare function getView(viewModel: ViewModel): View;
+export declare function render(viewModel: ViewModel): HTMLElement;
+export {};

package/dist/src/View.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = exports.getView = exports.registerView = exports.viewDictionary = exports.View = void 0;
+require("tocca");
+const knockout_1 = require("knockout");
+const ViewModel_1 = require("./ViewModel");
+class View {
+    constructor(options, designTimeOptions) {
+        this.children = new Array();
+        this.tagName = options.tagName;
+        this.viewModel = (0, ViewModel_1.extendViewModel)(options.viewModel, designTimeOptions);
+        this.optionsChildren = options.children;
+        this.children = (0, knockout_1.unwrap)(options.children);
+    }
+    buildChildren() {
+        if (this.element && this.children && this.children.length > 0) {
+            const documentFragment = document.createDocumentFragment();
+            this.children.forEach((childView) => {
+                documentFragment.appendChild(childView.render());
+            });
+            this.element.appendChild(documentFragment);
+        }
+    }
+    build() {
+        (0, ViewModel_1.applyViewModelToElement)(this.viewModel, this.element);
+        if (this.children) {
+            this.buildChildren();
+        }
+        if ((0, knockout_1.isObservable)(this.optionsChildren)) {
+            this.optionsChildren.subscribe((children) => {
+                this.setChildren(...children);
+            });
+        }
+    }
+    remove() {
+        if (this.element) {
+            if (this.element.remove) {
+                this.element.remove();
+            }
+            else {
+                if (this.element.parentElement) {
+                    this.element.parentElement.removeChild(this.element);
+                }
+            }
+            this.element = null;
+        }
+    }
+    addChild(child) {
+        this.children.push(child);
+        this.buildChildren();
+        return this;
+    }
+    setChildren(...children) {
+        this.empty();
+        this.children = children;
+        this.buildChildren();
+        return this;
+    }
+    empty() {
+        this.children = [];
+        if (this.element) {
+            this.element.innerHTML = "";
+            while (this.element.firstChild) {
+                this.element.removeChild(this.element.firstChild);
+            }
+        }
+    }
+    render() {
+        if (this.element) {
+            this.remove();
+        }
+        if (typeof this.build === "function") {
+            this.element = document.createElement(this.tagName);
+            this.build();
+            return this.element;
+        }
+        throw "The build method of this UiElement has not been defined";
+    }
+}
+exports.View = View;
+exports.viewDictionary = new Map();
+function registerView(viewModel, resolver) {
+    exports.viewDictionary.set(viewModel.prototype.constructor, resolver);
+}
+exports.registerView = registerView;
+function getView(viewModel) {
+    const view = exports.viewDictionary.get(viewModel.constructor);
+    if (view.prototype) {
+        return new view(viewModel);
+    }
+    if (typeof view === "function") {
+        return view(viewModel);
+    }
+    throw "View resolver for '" + viewModel.constructor.name + " could not be found";
+}
+exports.getView = getView;
+function render(viewModel) {
+    return getView(viewModel).render();
+}
+exports.render = render;
+//# sourceMappingURL=View.js.map

package/dist/src/View.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../../src/View.ts"],"names":[],"mappings":";;;AAAA,iBAAe;AACf,uCAA2E;AAC3E,2CAAoG;AAepG,MAAa,IAAI;IACb,YAAY,OAAgC,EAAE,iBAAoC;QAU1E,aAAQ,GAAG,IAAI,KAAK,EAAS,CAAC;QATlC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,IAAA,2BAAe,EAAC,OAAO,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;QACvE,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,QAAQ,CAAC;QACxC,IAAI,CAAC,QAAQ,GAAG,IAAA,iBAAM,EAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAQO,aAAa;QACjB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YAE3D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;YAC3D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;gBAChC,gBAAgB,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC;YAGH,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;SAC9C;IACL,CAAC;IAMS,KAAK;QACX,IAAA,mCAAuB,EAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB;QAGD,IAAI,IAAA,uBAAY,EAAC,IAAI,CAAC,eAAe,CAAC,EAAE;YACpC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACxC,IAAI,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IAES,MAAM;QACZ,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;gBACrB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;aACzB;iBAAM;gBACH,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE;oBAC5B,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;iBACxD;aACJ;YAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACvB;IACL,CAAC;IAES,QAAQ,CAAC,KAAY;QAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IAChB,CAAC;IAES,WAAW,CAAC,GAAG,QAAsB;QAC3C,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC;IAChB,CAAC;IAES,KAAK;QACX,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;gBAC5B,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;aACrD;SACJ;IACL,CAAC;IAID,MAAM;QACF,IAAI,IAAI,CAAC,OAAO,EAAE;YAEd,IAAI,CAAC,MAAM,EAAE,CAAC;SACjB;QAGD,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE;YAElC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAGpD,IAAI,CAAC,KAAK,EAAE,CAAC;YAGb,OAAO,IAAI,CAAC,OAAO,CAAC;SACvB;QAED,MAAM,yDAAyD,CAAC;IACpE,CAAC;CAEJ;AA7GD,oBA6GC;AAIU,QAAA,cAAc,GAAG,IAAI,GAAG,EAAY,CAAC;AAEhD,SAAgB,YAAY,CAAC,SAAS,EAAE,QAAa;IACjD,sBAAc,CAAC,GAAG,CAAC,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAClE,CAAC;AAFD,oCAEC;AAED,SAAgB,OAAO,CAAC,SAAoB;IACxC,MAAM,IAAI,GAAG,sBAAc,CAAC,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvD,IAAI,IAAI,CAAC,SAAS,EAAE;QAEhB,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;KAC9B;IACD,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;QAC5B,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;KAC1B;IAED,MAAM,qBAAqB,GAAG,SAAS,CAAC,WAAW,CAAC,IAAI,GAAG,qBAAqB,CAAC;AACrF,CAAC;AAXD,0BAWC;AAED,SAAgB,MAAM,CAAC,SAAoB;IACvC,OAAQ,OAAO,CAAC,SAAS,CAAW,CAAC,MAAM,EAAE,CAAC;AAClD,CAAC;AAFD,wBAEC"}

package/dist/src/ViewModel.d.ts

@@ -0,0 +1,55 @@
+import { Subscribable } from "knockout";
+import { CssProperty } from "./types";
+import { EventListeners, IGenericEventListener, IMouseEventListener, MouseEventListeners } from "./event";
+import { Attributes, AttributesSubscribable } from "./attributes";
+import { Style, StyleSubscribable } from "./style";
+export declare function extend(...objects: any[]): any;
+export declare function isNullOrUndefined(value: any): boolean;
+export interface ViewModelOptions {
+    attributes?: Attributes | AttributesSubscribable;
+    classNames?: Array<string> | Subscribable<Array<string>>;
+    style?: Style | StyleSubscribable;
+    visible?: boolean | Subscribable<boolean>;
+    disabled?: boolean | Subscribable<boolean>;
+    innerHtml?: string | Subscribable<string>;
+    innerText?: string | Subscribable<string>;
+    addViewModelToDataObject?: boolean;
+    userSelectable?: boolean;
+    dispose?: () => void;
+    refresh?: () => void;
+    eventListeners?: EventListeners;
+    viewType?: string;
+    focus?: () => void;
+}
+export declare class ViewModel implements ViewModelOptions {
+    constructor(options?: ViewModelOptions);
+    readonly classNames: string[] | Subscribable<Array<string>>;
+    readonly attributes: Attributes | AttributesSubscribable;
+    readonly style: Style | StyleSubscribable;
+    readonly visible: boolean | Subscribable<boolean>;
+    readonly disabled: boolean | Subscribable<boolean>;
+    readonly innerHtml: string | Subscribable<string>;
+    readonly innerText: string | Subscribable<string>;
+    readonly addViewModelToDataObject: boolean;
+    readonly userSelectable: boolean;
+    readonly dispose: () => void;
+    readonly refresh: () => void;
+    readonly eventListeners: EventListeners;
+    readonly viewType: string;
+    protected getStyle(...cssProperties: Array<CssProperty>): Style;
+    protected getStyleValue(cssProperty: CssProperty): any;
+    addMouseEventListener(event: keyof MouseEventListeners, mouseEventListener: IMouseEventListener): void;
+    addEventListener(event: keyof EventListeners, genericEventListener: IGenericEventListener): void;
+    setClasses(classNames: string[], replace: boolean): void;
+    setAttributes(attributes: Attributes): void;
+    setStyle(style: Style): void;
+    setVisible(visible: boolean): void;
+    setDisabled(disabled: boolean): void;
+    setInnerHtml(innerHtml: string): void;
+    setInnerText(innerText: string): void;
+    removeClasses(classNames: string[]): void;
+    focus(): void;
+    handleWebSocketMessage: (message: any) => void;
+}
+export declare function extendViewModel<TResult = ViewModelOptions, TTarget = ViewModelOptions, TSource = ViewModelOptions>(target: TTarget, source: TSource): TResult;
+export declare function applyViewModelToElement(viewModel: ViewModelOptions, element: HTMLElement): void;

package/dist/src/ViewModel.js

@@ -0,0 +1,387 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyViewModelToElement = exports.extendViewModel = exports.ViewModel = exports.isNullOrUndefined = exports.extend = void 0;
+const knockout_1 = require("knockout");
+const userAgent_1 = require("./userAgent");
+const event_1 = require("./event");
+const style_1 = require("./style");
+function extend(deep, ...objects) {
+    var extended = {};
+    var withChildren = false;
+    let i = 0;
+    const length = arguments.length;
+    if (typeof (arguments[0]) === "boolean") {
+        withChildren = arguments[0];
+        i++;
+    }
+    const merge = obj => {
+        for (let prop in obj) {
+            if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+                if (withChildren && Object.prototype.toString.call(obj[prop]) === "[object Object]") {
+                    extended[prop] = extend(true, extended[prop], obj[prop]);
+                }
+                else {
+                    extended[prop] = obj[prop];
+                }
+            }
+        }
+    };
+    for (; i < length; i++) {
+        const obj = arguments[i];
+        merge(obj);
+    }
+    return extended;
+}
+exports.extend = extend;
+function isNullOrUndefined(value) {
+    return value === null || typeof value === "undefined";
+}
+exports.isNullOrUndefined = isNullOrUndefined;
+class ViewModel {
+    constructor(options) {
+        this.visible = true;
+        this.disabled = false;
+        this.addViewModelToDataObject = false;
+        options = options || {};
+        this.classNames = options.classNames;
+        this.attributes = options.attributes || {};
+        this.style = options.style || {};
+        if (options.hasOwnProperty("visible")) {
+            this.visible = options.visible;
+        }
+        if (options.hasOwnProperty("disabled")) {
+            this.disabled = options.disabled;
+        }
+        this.innerHtml = options.innerHtml;
+        this.innerText = options.innerText;
+        this.addViewModelToDataObject = options.addViewModelToDataObject;
+        this.userSelectable = options.userSelectable;
+        this.dispose = options.dispose;
+        this.refresh = options.refresh;
+        this.eventListeners = options.eventListeners || {};
+        this.viewType = options.viewType;
+    }
+    getStyle(...cssProperties) {
+        if (cssProperties && this.style) {
+            const style = {};
+            cssProperties.forEach((cssProperty) => {
+                style[cssProperty] = this.style[cssProperty];
+            });
+            return style;
+        }
+        return null;
+    }
+    getStyleValue(cssProperty) {
+        if (this.style) {
+            return (0, knockout_1.unwrap)(this.style[cssProperty]);
+        }
+        return null;
+    }
+    addMouseEventListener(event, mouseEventListener) {
+        if (!this.eventListeners[event]) {
+            this.eventListeners[event] = mouseEventListener;
+        }
+    }
+    addEventListener(event, genericEventListener) {
+        if (!this.eventListeners[event]) {
+            this.eventListeners[event] = genericEventListener;
+        }
+    }
+    setClasses(classNames, replace) {
+        if ((0, knockout_1.isSubscribable)(this.classNames)) {
+            var currentClassNames = (0, knockout_1.unwrap)(this.classNames);
+            if (replace) {
+                currentClassNames = new Array();
+            }
+            if (classNames) {
+                classNames.forEach((className) => {
+                    currentClassNames.push(className);
+                });
+            }
+            this.classNames(currentClassNames);
+        }
+    }
+    setAttributes(attributes) {
+        if (attributes) {
+            Object.keys(attributes).forEach((key) => {
+                let newValue = attributes[key];
+                if (newValue === null || newValue === undefined) {
+                    newValue = null;
+                }
+                if ((0, knockout_1.isSubscribable)(this.attributes[key])) {
+                    this.attributes[key]((0, knockout_1.unwrap)(newValue));
+                }
+                else {
+                    this.attributes[key] = newValue;
+                }
+            });
+        }
+    }
+    setStyle(style) {
+        if (style) {
+            Object.keys(style).forEach((key) => {
+                let newValue = style[key];
+                if (newValue === null || newValue === undefined) {
+                    if (userAgent_1.userAgent.browser.isInternetExplorer) {
+                        newValue = style_1.defaultStyle[key];
+                    }
+                    else {
+                        newValue = null;
+                    }
+                }
+                if ((0, knockout_1.isSubscribable)(this.style[key])) {
+                    this.style[key]((0, knockout_1.unwrap)(newValue));
+                }
+                else {
+                    this.style[key] = newValue;
+                }
+            });
+        }
+    }
+    setVisible(visible) {
+        if ((0, knockout_1.isSubscribable)(this.visible)) {
+            this.visible(visible);
+        }
+    }
+    setDisabled(disabled) {
+        if ((0, knockout_1.isSubscribable)(this.disabled)) {
+            this.disabled(disabled);
+        }
+    }
+    setInnerHtml(innerHtml) {
+        if ((0, knockout_1.isSubscribable)(this.innerHtml)) {
+            this.innerHtml(innerHtml);
+        }
+    }
+    setInnerText(innerText) {
+        if ((0, knockout_1.isSubscribable)(this.innerText)) {
+            this.innerText(innerText);
+        }
+    }
+    removeClasses(classNames) {
+        if ((0, knockout_1.isSubscribable)(this.classNames)) {
+            const currentClassNames = (0, knockout_1.unwrap)(this.classNames);
+            for (let i = 0; i < currentClassNames.length; i++) {
+                if (classNames.includes(currentClassNames[i])) {
+                    currentClassNames.splice(i, 1);
+                }
+            }
+            this.classNames(currentClassNames);
+        }
+    }
+    focus() {
+    }
+}
+exports.ViewModel = ViewModel;
+function extendViewModel(target, source) {
+    return extend(true, target, source);
+}
+exports.extendViewModel = extendViewModel;
+function applyViewModelToElement(viewModel, element) {
+    element.setAttribute("viewtype", viewModel.viewType || "View");
+    if (viewModel.classNames) {
+        applyClassesToElement((0, knockout_1.unwrap)(viewModel.classNames), true, element);
+        if ((0, knockout_1.isSubscribable)(viewModel.classNames)) {
+            viewModel.classNames.subscribe((classNames) => {
+                applyClassesToElement(classNames, true, element);
+            });
+        }
+    }
+    if (viewModel.attributes) {
+        Object.keys(viewModel.attributes).forEach((key) => {
+            var value = viewModel.attributes[key];
+            applyAttributeToElement(key, (0, knockout_1.unwrap)(value), element);
+            if ((0, knockout_1.isSubscribable)(value)) {
+                value.subscribe((newValue) => {
+                    applyAttributeToElement(key, newValue, element);
+                });
+            }
+        });
+    }
+    if (viewModel.style) {
+        Object.keys(viewModel.style).forEach((key) => {
+            const style = viewModel.style[key];
+            element.style[key] = (0, knockout_1.unwrap)(style);
+            if ((0, knockout_1.isSubscribable)(style)) {
+                style.subscribe((newStyle) => {
+                    element.style[key] = newStyle;
+                });
+            }
+        });
+    }
+    if (!isNullOrUndefined(viewModel.innerHtml)) {
+        element.innerHTML = (0, knockout_1.unwrap)(viewModel.innerHtml);
+        if ((0, knockout_1.isSubscribable)(viewModel.innerHtml)) {
+            viewModel.innerHtml.subscribe((innerHtml) => {
+                element.innerHTML = innerHtml;
+            });
+        }
+    }
+    if (!isNullOrUndefined(viewModel.innerText)) {
+        element.innerText = (0, knockout_1.unwrap)(viewModel.innerText);
+        if ((0, knockout_1.isSubscribable)(viewModel.innerText)) {
+            viewModel.innerText.subscribe((innerText) => {
+                element.innerText = innerText;
+            });
+        }
+    }
+    if (viewModel.userSelectable === false) {
+        applyEventListenerToElement("selectstart", () => { return false; }, { passive: true }, element);
+        element.style.userSelect = "none";
+    }
+    if (viewModel.addViewModelToDataObject) {
+        if (!element["data"]) {
+            element["data"] = {};
+        }
+        element["data"].viewModel = viewModel;
+    }
+    if (viewModel.eventListeners) {
+        applyEventListenersToElement(viewModel, element);
+    }
+    applyVisibilityToElement((0, knockout_1.unwrap)(viewModel.visible), element);
+    if ((0, knockout_1.isSubscribable)(viewModel.visible)) {
+        viewModel.visible.subscribe((visible) => {
+            applyVisibilityToElement(visible, element);
+        });
+    }
+    applyDisabledToElement((0, knockout_1.unwrap)(viewModel.disabled), element);
+    if ((0, knockout_1.isSubscribable)(viewModel.disabled)) {
+        viewModel.disabled.subscribe((disabled) => {
+            applyDisabledToElement(disabled, element);
+        });
+    }
+    viewModel.focus = () => {
+        element.focus();
+    };
+}
+exports.applyViewModelToElement = applyViewModelToElement;
+function applyVisibilityToElement(visible, element) {
+    if (visible === false) {
+        element.classList.add("hidden");
+    }
+    else {
+        element.classList.remove("hidden");
+    }
+}
+function applyDisabledToElement(disabled, element) {
+    if (disabled) {
+        element.setAttribute("disabled", "disabled");
+    }
+    else {
+        element.removeAttribute("disabled");
+    }
+}
+function applyEventListenersToElement(viewModel, element) {
+    const clickEventListeners = new Array();
+    const doubleClickEventListeners = new Array();
+    Object.entries(viewModel.eventListeners).forEach((entry) => {
+        var eventName = entry[0];
+        var eventListener = entry[1];
+        if (eventName === "click") {
+            clickEventListeners.push(eventListener);
+            return;
+        }
+        if (eventName === "dblclick") {
+            doubleClickEventListeners.push(eventListener);
+            return;
+        }
+        if (eventName === "dragstart") {
+            element.setAttribute("draggable", "true");
+        }
+        if ((0, event_1.isGlobalEvent)(eventName)) {
+            applyEventListenerToElement(eventName, (event) => {
+                if (eventListener.options) {
+                    const options = eventListener.options;
+                    const keyEvent = event;
+                    if (options.altKey && !keyEvent.altKey) {
+                        return;
+                    }
+                    if (options.shiftKey && !keyEvent.shiftKey) {
+                        return;
+                    }
+                    if (options.ctrlKey && !keyEvent.ctrlKey) {
+                        return;
+                    }
+                    if (options.eventKey && options.eventKey !== keyEvent.key) {
+                        return;
+                    }
+                }
+                eventListener.listener.call(viewModel, event);
+            }, eventListener.options, element);
+        }
+        else if (event_1.mouseEvents[eventName] && userAgent_1.userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement(eventName, eventListener.listener, eventListener.options, element);
+        }
+        else if (event_1.touchEvents[eventName] && userAgent_1.userAgent.device.supportsTouchEvents) {
+            applyEventListenerToElement(eventName, eventListener.listener, eventListener.options, element);
+        }
+    });
+    clickEventListeners.forEach((clickEventListener) => {
+        if (userAgent_1.userAgent.device.supportsTouchEvents) {
+            applyEventListenerToElement("tap", clickEventListener.listener, clickEventListener.options, element);
+        }
+        if (userAgent_1.userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement("click", clickEventListener.listener, clickEventListener.options, element);
+        }
+    });
+    doubleClickEventListeners.forEach((doubleClickEventListener) => {
+        if (userAgent_1.userAgent.device.supportsTouchEvents) {
+            applyEventListenerToElement("dbltap", doubleClickEventListener.listener, doubleClickEventListener.options, element);
+        }
+        if (userAgent_1.userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement("dblclick", doubleClickEventListener.listener, doubleClickEventListener.options, element);
+        }
+    });
+}
+function applyEventListenerToElement(type, listener, options, element) {
+    if (!type) {
+        throw new Error("type is mandatory");
+    }
+    if (!listener) {
+        throw new Error("listener is mandatory");
+    }
+    if (!options) {
+        options = {};
+    }
+    if (!options.passive) {
+        options.passive = false;
+    }
+    if (!options.once) {
+        options.once = false;
+    }
+    if (element.addEventListener) {
+        element.addEventListener(type, (event) => {
+            listener(event);
+        }, {
+            passive: options.passive,
+            once: options.once
+        });
+    }
+    else if (element["attachEvent"]) {
+        element["attachEvent"](type, (event) => {
+            listener(event);
+        });
+    }
+    else {
+        throw "Your browser does not support 'addEventListener'";
+    }
+}
+function applyClassesToElement(classNames, replace, element) {
+    if (replace) {
+        element.className = "";
+    }
+    if (classNames) {
+        classNames.forEach((className) => {
+            element.classList.add(className);
+        });
+    }
+}
+function applyAttributeToElement(name, value, element) {
+    if (isNullOrUndefined(value)) {
+        element.removeAttribute(name);
+    }
+    else {
+        element.setAttribute(name, value);
+    }
+}
+//# sourceMappingURL=ViewModel.js.map