jpf 3.0.19 → 4.0.1

package/dist/event.d.ts

@@ -0,0 +1,59 @@
+export declare const mouseEvents: {
+    contextmenu: boolean;
+    mousedown: boolean;
+    mouseenter: boolean;
+    mouseleave: boolean;
+    mousemove: boolean;
+    mouseout: boolean;
+    mouseover: boolean;
+    mouseup: boolean;
+};
+export declare const touchEvents: {
+    touchcancel: boolean;
+    touchend: boolean;
+    touchmove: boolean;
+    touchstart: boolean;
+    longtap: boolean;
+    swipeleft: boolean;
+    swiperight: boolean;
+    swipeup: boolean;
+    swipedown: boolean;
+};
+export declare function isGlobalEvent(event: keyof UiElementEventMap): boolean;
+export interface UiElementEventMap extends HTMLElementEventMap {
+    "tap": Event;
+    "dbltap": Event;
+    "longtap": Event;
+    "swipeleft": Event;
+    "swiperight": Event;
+    "swipeup": Event;
+    "swipedown": Event;
+    "textInput": Event;
+}
+interface IMouseEventListener extends IEventListener {
+    listener: (event: MouseEvent) => void;
+}
+interface IFocusEventListener extends IEventListener {
+    listener: (event: FocusEvent) => void;
+}
+export interface IGenericEventListener extends IEventListener {
+    listener: (event: Event) => void;
+}
+interface IEventListener {
+    options?: IEventListenerOptions;
+}
+export interface EventListeners {
+    click?: IMouseEventListener;
+    focusout?: IFocusEventListener;
+}
+declare type EventKey = "Enter" | "ArrowDown" | "ArrowUp" | "ArrowLeft" | "ArrowRight";
+export interface IEventListenerOptions extends AddEventListenerOptions {
+    eventKey?: EventKey;
+    altKey?: boolean;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    mouseLeft?: boolean;
+    mouseMiddle?: boolean;
+    mouseRight?: boolean;
+}
+export {};

package/dist/event.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isGlobalEvent = exports.touchEvents = exports.mouseEvents = void 0;
+exports.mouseEvents = {
+    contextmenu: true,
+    mousedown: true,
+    mouseenter: true,
+    mouseleave: true,
+    mousemove: true,
+    mouseout: true,
+    mouseover: true,
+    mouseup: true
+};
+exports.touchEvents = {
+    touchcancel: true,
+    touchend: true,
+    touchmove: true,
+    touchstart: true,
+    longtap: true,
+    swipeleft: true,
+    swiperight: true,
+    swipeup: true,
+    swipedown: true
+};
+function isGlobalEvent(event) {
+    return !(exports.mouseEvents[event] || exports.touchEvents[event]);
+}
+exports.isGlobalEvent = isGlobalEvent;
+//# sourceMappingURL=event.js.map

package/dist/event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event.js","sourceRoot":"","sources":["../src/event.ts"],"names":[],"mappings":";;;AAAa,QAAA,WAAW,GAAG;IACvB,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;CAChB,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;CAClB,CAAC;AAEF,SAAgB,aAAa,CAAC,KAA8B;IACxD,OAAO,CAAC,CAAC,mBAAW,CAAC,KAAK,CAAC,IAAI,mBAAW,CAAC,KAAK,CAAC,CAAC,CAAC;AACvD,CAAC;AAFD,sCAEC"}

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/index.d.ts

@@ -1,6 +1,7 @@
 import * as Types from "./types";
-export * from "./eventListener";
-export * from "./uiElement";
+export * from "./attributes";
+export * from "./event";
+export * from "./View";
 export * from "./style";
 export { userAgent } from "./userAgent";
 export { Types };

package/dist/index.js

@@ -1,13 +1,22 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var Types = require("./types");
+exports.Types = exports.userAgent = void 0;
+const Types = require("./types");
 exports.Types = Types;
-__export(require("./eventListener"));
-__export(require("./uiElement"));
-__export(require("./style"));
+__exportStar(require("./attributes"), exports);
+__exportStar(require("./event"), exports);
+__exportStar(require("./View"), exports);
+__exportStar(require("./style"), exports);
 var userAgent_1 = require("./userAgent");
-exports.userAgent = userAgent_1.userAgent;
+Object.defineProperty(exports, "userAgent", { enumerable: true, get: function () { return userAgent_1.userAgent; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,+BAAgC;AAMvB,sBAAK;AAJd,qCAAgC;AAChC,iCAA4B;AAC5B,6BAAwB;AACxB,yCAAwC;AAA/B,gCAAA,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,iCAAgC;AAOvB,sBAAK;AALd,+CAA6B;AAC7B,0CAAwB;AACxB,yCAAuB;AACvB,0CAAwB;AACxB,yCAAwC;AAA/B,sGAAA,SAAS,OAAA"}

package/dist/src/View.d.ts

@@ -0,0 +1,29 @@
+import "tocca";
+import { ObservableArray, Computed } from "knockout";
+import { ViewModelOptions, ViewModel } from "./ViewModel";
+export interface IView {
+    render(): HTMLElement;
+}
+export interface ViewOptions<TViewModel> {
+    tagName: string;
+    viewModel?: TViewModel;
+    children?: Array<IView> | ObservableArray<IView> | Computed<Array<IView>>;
+}
+export declare class View<TViewModel extends ViewModelOptions = ViewModelOptions> 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 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;

package/dist/src/View.js

@@ -0,0 +1,96 @@
+"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;
+        }
+    }
+    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":"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"}

package/dist/src/ViewModel.d.ts

@@ -0,0 +1,61 @@
+import { Subscribable, ObservableArray, Observable } from "knockout";
+import { CssProperty } from "./types";
+import { EventListeners } from "./event";
+import { Attributes, AttributesSubscribable } from "./attributes";
+import { Style, StyleSubscribable } from "./style";
+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 interface IObservableProperty<TValue, TSetter = TValue> extends Subscribable<TValue> {
+    (): TValue;
+    set: (value: TSetter) => void;
+}
+export interface IObservableArrayProperty<TItem, TSetter> extends ObservableArray<TItem> {
+    set: (items: Array<TSetter>) => 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;
+    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;
+    protected setObservableProperty(property: any, value: any): void;
+    protected createObservableProperty<TValue, TSetter = TValue>(value?: TValue | Observable<TValue>, setter?: (value: TSetter) => void, notifyAlways?: boolean): IObservableProperty<TValue, TSetter>;
+    protected createObservableArrayProperty<TItem, TSetter = TItem>(items?: Array<TItem> | ObservableArray<TItem>, setter?: (items: Array<TSetter>) => void): IObservableArrayProperty<TItem, TSetter>;
+}
+export declare function extendViewModel<TResult = ViewModelOptions, TTarget = ViewModelOptions, TSource = ViewModelOptions>(target: TTarget, source: TSource): TResult;
+export declare function applyViewModelToElement(viewModel: ViewModelOptions, element: HTMLElement): void;