jsl-ui 9.18.3 → 9.19.0

package/lib/interaction/dataconverter.d.ts

@@ -0,0 +1,4 @@
+export interface IDataConverter<TData, TUI> {
+    toUI?: (value: TData) => TUI;
+    toData?: (value: TUI) => TData;
+}

package/lib/interaction/dataconverter.js

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

package/lib/interaction/eventhandler.d.ts

@@ -0,0 +1,13 @@
+export interface IEvent<T, T2 = void> {
+    subscribe(fnc: (args?: T, args2?: T2) => any): any;
+    notify(val?: T): any;
+}
+export declare class EventHandler<T, T2 = void> implements IEvent<T, T2> {
+    static Create(click: (EventHandler<any, any> | ((p?: any, p2?: any) => any))): EventHandler<any, any>;
+    private handlers;
+    constructor(fnc?: (args?: T, args2?: T2) => any);
+    subscribe(fnc: (args?: T, args2?: T2) => any): void;
+    notify(val?: T, val2?: T2): void;
+    count(): number;
+    unSubscribe(fnc: (args?: T, args2?: T2) => any): void;
+}

package/lib/interaction/eventhandler.js

@@ -0,0 +1,42 @@
+var EventHandler = /** @class */ (function () {
+    function EventHandler(fnc) {
+        this.handlers = [];
+        if (fnc != null) {
+            this.handlers.push(fnc);
+        }
+    }
+    EventHandler.Create = function (click) {
+        if (click == null) {
+            return new EventHandler();
+        }
+        if (typeof click === "function") {
+            var res = new EventHandler();
+            res.subscribe(click);
+            return res;
+        }
+        return click;
+    };
+    EventHandler.prototype.subscribe = function (fnc) {
+        this.handlers.push(fnc);
+    };
+    EventHandler.prototype.notify = function (val, val2) {
+        for (var _i = 0, _a = this.handlers; _i < _a.length; _i++) {
+            var h = _a[_i];
+            h(val, val2);
+        }
+    };
+    EventHandler.prototype.count = function () {
+        return this.handlers.length;
+    };
+    EventHandler.prototype.unSubscribe = function (fnc) {
+        if (this.handlers.indexOf(fnc) >= 0) {
+            this.handlers.splice(this.handlers.indexOf(fnc), 1);
+        }
+        else {
+            // TODO? throw exception?
+            console.warn("handler not found in EventHandler.unSubscribe");
+        }
+    };
+    return EventHandler;
+}());
+export { EventHandler };

package/lib/interaction/moveable.d.ts

@@ -0,0 +1,39 @@
+import "./moveable.css";
+import "../core/polyfills";
+import { EventHandler } from "./eventhandler";
+export interface IMoveEventArg {
+    x: number;
+    y: number;
+    target: HTMLElement;
+    evt: MouseEvent;
+    cancelEvent: () => void;
+}
+export interface IMoveableOptions {
+    moveDelta?: number;
+    onStart?: EventHandler<IMoveEventArg>;
+    onStop?: EventHandler<IMoveEventArg>;
+    onMove?: EventHandler<IMoveEventArg>;
+    gridX?: number;
+    gridY?: number;
+    selector?: string;
+    handleSelector?: string;
+    direction?: "x" | "y" | "both";
+    containInParent?: boolean;
+}
+export declare class MoveableContainer {
+    private container;
+    private options;
+    private element;
+    private resizeX;
+    private resizeY;
+    private initialX;
+    private initialY;
+    private startSize;
+    constructor(container: HTMLElement, options: IMoveableOptions);
+    private init;
+    private mouseDownContainer;
+    private mouseMove;
+    private mouseUp;
+    private extractArg;
+}
+export declare function Moveable(selector: HTMLElement | string, options?: IMoveableOptions): MoveableContainer;

package/lib/interaction/moveable.js

@@ -0,0 +1,172 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./moveable.css";
+import "../core/polyfills";
+import { EventHandler } from "./eventhandler";
+var defaultOptions = {
+    onStart: new EventHandler(),
+    onStop: new EventHandler(),
+    onMove: new EventHandler(),
+    direction: "both",
+    moveDelta: 0,
+    containInParent: true
+};
+var MoveableContainer = /** @class */ (function () {
+    function MoveableContainer(container, options) {
+        var _this = this;
+        this.container = container;
+        this.options = options;
+        this.resizeX = false;
+        this.resizeY = false;
+        this.initialX = null;
+        this.initialY = null;
+        this.startSize = { x: null, y: null };
+        this.mouseDownContainer = function (evt) {
+            var target = evt.target;
+            var directChild = target;
+            while (directChild.parentElement != null && directChild.parentElement !== _this.container) {
+                if (_this.options.selector != null && directChild.matches(_this.options.selector)) {
+                    break;
+                }
+                directChild = directChild.parentElement;
+            }
+            if (directChild.parentElement == null) {
+                return;
+            }
+            if (_this.options.selector != null && !directChild.matches(_this.options.selector)) {
+                return;
+            }
+            _this.element = directChild;
+            var canceled = false;
+            var args = {
+                evt: evt,
+                target: _this.element,
+                x: _this.element.offsetLeft,
+                y: _this.element.offsetTop,
+                cancelEvent: function () { canceled = true; }
+            };
+            _this.options.onStart.notify(args);
+            if (canceled) {
+                return;
+            }
+            evt.preventDefault();
+            evt.stopPropagation();
+            evt.stopImmediatePropagation();
+            _this.initialX = _this.extractArg(evt, "clientX") - _this.element.offsetLeft;
+            _this.initialY = _this.extractArg(evt, "clientY") - _this.element.offsetTop;
+            // register event listeners
+            window.addEventListener("mousemove", _this.mouseMove, false);
+            window.addEventListener("mouseup", _this.mouseUp, false);
+            window.addEventListener("touchmove", _this.mouseMove, false);
+            window.addEventListener("touchend", _this.mouseUp, false);
+        };
+        this.mouseMove = function (evt) {
+            var raiseEvt = false;
+            var x = 0;
+            if (_this.resizeX) {
+                var val = _this.extractArg(evt, "clientX");
+                if (_this.startSize != null && _this.startSize.x == null) {
+                    _this.startSize.x = val;
+                }
+                if (_this.startSize == null || Math.abs(_this.startSize.x - val) >= _this.options.moveDelta) {
+                    //if (!this.options.gridX || Math.round(val) % this.options.gridX === 0) {
+                    x = val - _this.initialX;
+                    if (_this.options.gridX) {
+                        x = Math.round(x / _this.options.gridX) * _this.options.gridX;
+                    }
+                    if (_this.options.containInParent) {
+                        if (x < 0) {
+                            x = 0;
+                        }
+                        var maxX = _this.container.clientWidth - _this.element.offsetWidth;
+                        if (x > maxX) {
+                            x = maxX;
+                        }
+                    }
+                    _this.element.style.left = x + "px";
+                    raiseEvt = true;
+                    _this.startSize = null;
+                    //}
+                }
+            }
+            var y = 0;
+            if (_this.resizeY) {
+                var val = _this.extractArg(evt, "clientY");
+                if (_this.startSize != null && _this.startSize.y == null) {
+                    _this.startSize.y = val;
+                }
+                if (_this.startSize == null || Math.abs(_this.startSize.y - val) >= _this.options.moveDelta) {
+                    //if (!this.options.gridY || Math.round(val) % this.options.gridY === 0) {
+                    y = val - _this.initialY;
+                    if (_this.options.gridY) {
+                        y = Math.round(y / _this.options.gridY) * _this.options.gridY;
+                    }
+                    if (y < 0) {
+                        y = 0;
+                    }
+                    var maxY = _this.container.clientHeight - _this.element.offsetHeight;
+                    if (y > maxY) {
+                        y = maxY;
+                    }
+                    _this.element.style.top = y + "px";
+                    raiseEvt = true;
+                    _this.startSize = null;
+                    //}
+                }
+            }
+            if (raiseEvt) {
+                _this.options.onMove.notify({
+                    evt: evt,
+                    target: _this.element,
+                    x: x,
+                    y: y,
+                    cancelEvent: function () { }
+                });
+            }
+        };
+        this.mouseUp = function (evt) {
+            window.removeEventListener("mousemove", _this.mouseMove, false);
+            window.removeEventListener("mouseup", _this.mouseUp, false);
+            window.removeEventListener("touchmove", _this.mouseMove, false);
+            window.removeEventListener("touchend", _this.mouseUp, false);
+            _this.options.onStop.notify({
+                evt: evt,
+                target: _this.element,
+                x: _this.element.offsetLeft,
+                y: _this.element.offsetTop,
+                cancelEvent: function () { }
+            });
+            _this.startSize = { x: null, y: null };
+        };
+        if (options.direction === "x" || options.direction === "both") {
+            this.resizeX = true;
+        }
+        if (options.direction === "y" || options.direction === "both") {
+            this.resizeY = true;
+        }
+        this.init();
+    }
+    MoveableContainer.prototype.init = function () {
+        this.container.addEventListener("mousedown", this.mouseDownContainer, false);
+        this.container.addEventListener("touchstart", this.mouseDownContainer, false);
+    };
+    MoveableContainer.prototype.extractArg = function (evt, key) {
+        return evt[key] != null ? evt[key] : (evt.touches.length > 0 ? evt.touches : evt.changedTouches)[0][key];
+    };
+    return MoveableContainer;
+}());
+export { MoveableContainer };
+export function Moveable(selector, options) {
+    return new MoveableContainer(typeof selector === "string" ?
+        document.querySelector(selector) :
+        selector, __assign(__assign({}, defaultOptions), options));
+}

package/lib/interaction/resizable.css

@@ -0,0 +1,33 @@
+.resizable {
+    position: relative;
+}
+
+.resizable > .rs-r {
+    position: absolute;
+    top:0;
+    bottom:0;
+    right:0;
+    width:0.5rem;
+    box-sizing:border-box;
+    background:rgba(20,20,20,0.2);
+    cursor: w-resize;
+}
+
+.resizable > .rs-b {
+    position: absolute;
+    left:0;
+    bottom:0;
+    right:0;
+    height:0.5rem;
+    box-sizing:border-box;
+    background:rgba(20,20,20,0.2);
+    cursor: n-resize;
+}
+
+.resizable > .rs-r.rs-b {
+    top: initial;
+    left: initial;
+    right: 0;
+    bottom: 0;
+    cursor: nw-resize;
+}

package/lib/interaction/resizable.d.ts

@@ -0,0 +1,37 @@
+import "./resizable.css";
+import "../core/polyfills";
+import { EventHandler } from "./eventhandler";
+export interface IResizeEventArg {
+    x: number;
+    y: number;
+    target: HTMLElement;
+    evt: MouseEvent;
+}
+export interface IResizeOptions {
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    resizeDelta?: number;
+    resizeHandlePrefix?: string;
+    onStart?: EventHandler<IResizeEventArg>;
+    onStop?: EventHandler<IResizeEventArg>;
+    onResize?: EventHandler<IResizeEventArg>;
+    gridX?: number;
+    gridY?: number;
+}
+export declare class ResizeContainer {
+    private container;
+    private options;
+    private element;
+    private resizeX;
+    private resizeY;
+    private startSize;
+    constructor(container: HTMLElement, options: IResizeOptions);
+    private init;
+    private mouseDownContainer;
+    private mouseMove;
+    private mouseUp;
+    private extractArg;
+}
+export declare function Resizable(selector: HTMLElement | string, options?: IResizeOptions): ResizeContainer;

package/lib/interaction/resizable.js

@@ -0,0 +1,123 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./resizable.css";
+import "../core/polyfills";
+import { EventHandler } from "./eventhandler";
+var defaultOptions = {
+    resizeHandlePrefix: "rs-",
+    onStart: new EventHandler(),
+    onStop: new EventHandler(),
+    onResize: new EventHandler(),
+    resizeDelta: 0
+};
+var ResizeContainer = /** @class */ (function () {
+    function ResizeContainer(container, options) {
+        var _this = this;
+        this.container = container;
+        this.options = options;
+        this.startSize = { x: null, y: null };
+        this.mouseDownContainer = function (evt) {
+            var target = evt.target;
+            if ((" " + target.className).indexOf(" " + _this.options.resizeHandlePrefix) < 0) {
+                return; // not a resize handle
+            }
+            evt.preventDefault();
+            evt.stopPropagation();
+            evt.stopImmediatePropagation();
+            _this.resizeX = target.classList.contains(_this.options.resizeHandlePrefix + "r") ||
+                target.classList.contains(_this.options.resizeHandlePrefix + "l");
+            _this.resizeY = target.classList.contains(_this.options.resizeHandlePrefix + "t") ||
+                target.classList.contains(_this.options.resizeHandlePrefix + "b");
+            _this.element = target.parentElement; // TODO change to closest class
+            _this.options.onStart.notify({ evt: evt, target: _this.element, x: _this.extractArg(evt, "pageX"), y: _this.extractArg(evt, "pageY") });
+            // register event listeners
+            window.addEventListener("mousemove", _this.mouseMove, false);
+            window.addEventListener("mouseup", _this.mouseUp, false);
+            window.addEventListener("touchmove", _this.mouseMove, false);
+            window.addEventListener("touchend", _this.mouseUp, false);
+        };
+        this.mouseMove = function (evt) {
+            var raiseEvt = false;
+            if (_this.resizeX) {
+                var val = _this.extractArg(evt, "clientX") - _this.element.getBoundingClientRect().left;
+                if (_this.options.minWidth && val < _this.options.minWidth) {
+                    val = _this.options.minWidth;
+                }
+                else if (_this.options.maxWidth && val > _this.options.maxWidth) {
+                    val = _this.options.maxWidth;
+                }
+                if (_this.startSize != null && _this.startSize.x == null) {
+                    _this.startSize.x = val;
+                }
+                if (_this.startSize == null || Math.abs(_this.startSize.x - val) >= _this.options.resizeDelta) {
+                    // if (!this.options.gridX || Math.round(val) % this.options.gridX === 0) {
+                    if (_this.options.gridX) {
+                        val = Math.round(val / _this.options.gridX) * _this.options.gridX;
+                    }
+                    _this.element.style.width = Math.round(val) + "px";
+                    raiseEvt = true;
+                    _this.startSize = null;
+                    // }
+                }
+            }
+            if (_this.resizeY) {
+                var val = _this.extractArg(evt, "clientY") - _this.element.getBoundingClientRect().top;
+                if (_this.options.minHeight && val < _this.options.minHeight) {
+                    val = _this.options.minHeight;
+                }
+                else if (_this.options.maxHeight && val > _this.options.maxHeight) {
+                    val = _this.options.maxHeight;
+                }
+                if (_this.startSize != null && _this.startSize.y == null) {
+                    _this.startSize.y = val;
+                }
+                if (_this.startSize == null || Math.abs(_this.startSize.y - val) >= _this.options.resizeDelta) {
+                    // if (!this.options.gridY || Math.round(val) % this.options.gridY === 0) {
+                    if (_this.options.gridY) {
+                        val = Math.round(val / _this.options.gridY) * _this.options.gridY;
+                    }
+                    _this.element.style.height = Math.round(val) + "px";
+                    raiseEvt = true;
+                    _this.startSize = null;
+                    // }
+                }
+            }
+            if (raiseEvt) {
+                _this.options.onResize.notify({ evt: evt, target: _this.element, x: _this.extractArg(evt, "pageX"), y: _this.extractArg(evt, "pageY") });
+            }
+        };
+        this.mouseUp = function (evt) {
+            window.removeEventListener("mousemove", _this.mouseMove, false);
+            window.removeEventListener("mouseup", _this.mouseUp, false);
+            window.removeEventListener("touchmove", _this.mouseMove, false);
+            window.removeEventListener("touchend", _this.mouseUp, false);
+            _this.options.onStop.notify({ evt: evt, target: _this.element, x: _this.extractArg(evt, "pageX"), y: _this.extractArg(evt, "pageY") });
+            _this.startSize = { x: null, y: null };
+        };
+        this.init();
+    }
+    ResizeContainer.prototype.init = function () {
+        this.container.classList.add("resizable");
+        this.container.addEventListener("mousedown", this.mouseDownContainer, false);
+        this.container.addEventListener("touchstart", this.mouseDownContainer, false);
+    };
+    ResizeContainer.prototype.extractArg = function (evt, key) {
+        return evt[key] != null ? evt[key] : (evt.touches.length > 0 ? evt.touches : evt.changedTouches)[0][key];
+    };
+    return ResizeContainer;
+}());
+export { ResizeContainer };
+export function Resizable(selector, options) {
+    return new ResizeContainer(typeof selector === "string" ?
+        document.querySelector(selector) :
+        selector, __assign(__assign({}, defaultOptions), options));
+}

package/lib/ui/auto.suggest.css

@@ -0,0 +1,14 @@
+.autocomplete-suggestions {
+    text-align: left;
+    cursor: default;
+    border: 1px solid #ccc;
+    border-top: 0;
+    background: #fff;
+    box-shadow: -1px 1px 3px rgba(0,0,0,.1);
+
+    /* core styles should not be changed */
+    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
+}
+.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
+.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
+.autocomplete-suggestion.selected { background: #f0f0f0; }

package/lib/ui/auto.suggest.d.ts

@@ -0,0 +1,18 @@
+import "./auto.suggest.css";
+export interface IAutoSuggestOptions {
+    selector?: HTMLElement | string;
+    source: (val: string, suggest: (items: any[]) => void) => void;
+    minChars?: number;
+    delay?: number;
+    offsetLeft?: number;
+    offsetTop?: number;
+    cache?: boolean;
+    menuClass?: string;
+    renderItem?: (item: any, search: string) => string;
+    onSelect?: (e: any, term: string, dom: HTMLElement) => void;
+    onChange?: (val: string) => void;
+}
+export interface IAutoSuggest {
+    destroy: () => void;
+}
+export declare function AutoSuggest(input: HTMLElement | string, opts: IAutoSuggestOptions): IAutoSuggest;