jsl-ui 9.28.3 → 9.28.4

package/lib/components/date/DateComponent.d.ts

@@ -1,32 +1,32 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { IDatePickerOptions, IDatePicker } from "../../ui/date.picker";
-import { EventHandler } from "../../interaction/eventhandler";
-import { IDataConverter } from "../../interaction/dataconverter";
-export interface IDateComponentOptions<T = any> extends IDatePickerOptions {
-    id?: string;
-    class?: string;
-    style?: string;
-    placeholder?: string;
-    value?: Date;
-    onChange?: EventHandler<Date> | ((v?: Date) => void);
-    bindTo?: T;
-    property?: keyof T;
-    bindMode?: "toModel" | "fromModel" | "both";
-    converter?: IDataConverter<any, Date>;
-    enabled?: boolean;
-}
-export declare class DateComponent<T = any> implements IJSLComponent {
-    private options;
-    private ref;
-    private currentDom;
-    constructor(options: IDateComponentOptions<T>);
-    get onChange(): EventHandler<Date>;
-    render(): IJSLVNode;
-    getValue(): string;
-    getValueAsDate(): Date;
-    getRef(): IDatePicker;
-    onCreate(node: IJSLVNode): void;
-    onUpdate(node: IJSLVNode): void;
-    onRemove(): void;
-    private raiseEvent;
-}
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDatePickerOptions, IDatePicker } from "../../ui/date.picker";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface IDateComponentOptions<T = any> extends IDatePickerOptions {
+    id?: string;
+    class?: string;
+    style?: string;
+    placeholder?: string;
+    value?: Date;
+    onChange?: EventHandler<Date> | ((v?: Date) => void);
+    bindTo?: T;
+    property?: keyof T;
+    bindMode?: "toModel" | "fromModel" | "both";
+    converter?: IDataConverter<any, Date>;
+    enabled?: boolean;
+}
+export declare class DateComponent<T = any> implements IJSLComponent {
+    private options;
+    private ref;
+    private currentDom;
+    constructor(options: IDateComponentOptions<T>);
+    get onChange(): EventHandler<Date>;
+    render(): IJSLVNode;
+    getValue(): string;
+    getValueAsDate(): Date;
+    getRef(): IDatePicker;
+    onCreate(node: IJSLVNode): void;
+    onUpdate(node: IJSLVNode): void;
+    onRemove(): void;
+    private raiseEvent;
+}

package/lib/components/date/DateComponent.js

@@ -1,89 +1,89 @@
-import { DatePicker } from "../../ui/date.picker";
-import { date } from "../../core/date";
-import { helper } from "../../core/helper";
-import { EventHandler } from "../../interaction/eventhandler";
-export class DateComponent {
-    constructor(options) {
-        var _a;
-        this.options = { ...{ enabled: true, id: helper.newDomGuid(), bindMode: "toModel" }, ...options };
-        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-        }
-        this.options.onChange = EventHandler.Create(this.options.onChange);
-    }
-    get onChange() {
-        return this.options.onChange;
-    }
-    render() {
-        var _a;
-        let val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            const current = this.getValue();
-            const newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-            const newValStr = date.format(newVal);
-            val = newVal;
-            if (newValStr !== current) {
-                if (this.currentDom != null) {
-                    this.currentDom.value = newValStr;
-                }
-            }
-        }
-        return {
-            tag: "input",
-            attr: {
-                id: this.options.id,
-                class: this.options.class,
-                style: this.options.style,
-                disabled: !this.options.enabled ? "disabled" : undefined,
-                placeholder: this.options.placeholder,
-                value: date.format(val),
-                change: this.raiseEvent,
-            }
-        };
-    }
-    getValue() {
-        if (this.currentDom == null) {
-            return "";
-        }
-        return this.currentDom.value;
-    }
-    getValueAsDate() {
-        if (this.currentDom == null) {
-            return null;
-        }
-        if (this.options.parse) {
-            return this.options.parse(this.currentDom.value);
-        }
-        return date.parse(this.currentDom.value);
-    }
-    getRef() {
-        return this.ref;
-    }
-    onCreate(node) {
-        this.currentDom = node.dom;
-        this.ref = DatePicker(this.currentDom, this.options);
-    }
-    onUpdate(node) {
-        this.currentDom = node.dom;
-    }
-    onRemove() {
-        if (this.ref != null) {
-            this.ref.destroy();
-        }
-    }
-    raiseEvent(e, node) {
-        var _a;
-        if (this.options.enabled) {
-            const val = date.parse(node.dom.value);
-            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
-                this.options.bindTo[this.options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
-            }
-            this.options.onChange.notify(val);
-        }
-    }
-}
+import { DatePicker } from "../../ui/date.picker";
+import { date } from "../../core/date";
+import { helper } from "../../core/helper";
+import { EventHandler } from "../../interaction/eventhandler";
+export class DateComponent {
+    constructor(options) {
+        var _a;
+        this.options = { ...{ enabled: true, id: helper.newDomGuid(), bindMode: "toModel" }, ...options };
+        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
+            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+        }
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+    }
+    get onChange() {
+        return this.options.onChange;
+    }
+    render() {
+        var _a;
+        let val = this.options.value;
+        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+            const current = this.getValue();
+            const newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+            const newValStr = date.format(newVal);
+            val = newVal;
+            if (newValStr !== current) {
+                if (this.currentDom != null) {
+                    this.currentDom.value = newValStr;
+                }
+            }
+        }
+        return {
+            tag: "input",
+            attr: {
+                id: this.options.id,
+                class: this.options.class,
+                style: this.options.style,
+                disabled: !this.options.enabled ? "disabled" : undefined,
+                placeholder: this.options.placeholder,
+                value: date.format(val),
+                change: this.raiseEvent,
+            }
+        };
+    }
+    getValue() {
+        if (this.currentDom == null) {
+            return "";
+        }
+        return this.currentDom.value;
+    }
+    getValueAsDate() {
+        if (this.currentDom == null) {
+            return null;
+        }
+        if (this.options.parse) {
+            return this.options.parse(this.currentDom.value);
+        }
+        return date.parse(this.currentDom.value);
+    }
+    getRef() {
+        return this.ref;
+    }
+    onCreate(node) {
+        this.currentDom = node.dom;
+        this.ref = DatePicker(this.currentDom, this.options);
+    }
+    onUpdate(node) {
+        this.currentDom = node.dom;
+    }
+    onRemove() {
+        if (this.ref != null) {
+            this.ref.destroy();
+        }
+    }
+    raiseEvent(e, node) {
+        var _a;
+        if (this.options.enabled) {
+            const val = date.parse(node.dom.value);
+            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
+                this.options.bindTo[this.options.property] =
+                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
+            }
+            this.options.onChange.notify(val);
+        }
+    }
+}

package/lib/components/date-range/DateRangeComponent.d.ts

@@ -1,35 +1,35 @@
-import "./DateRangeStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { EventHandler } from "../../interaction/eventhandler";
-export interface IDateRangeValue {
-    minValue: Date;
-    maxValue: Date;
-}
-export interface IDateRangeOptions {
-    class?: string;
-    style?: string;
-    min: Date;
-    max: Date;
-    minValue?: Date;
-    maxValue?: Date;
-    increment: "days" | "weeks" | "month" | "years";
-    onChange?: EventHandler<IDateRangeValue> | ((v?: IDateRangeValue) => void);
-}
-export declare class DateRangeComponent implements IJSLComponent {
-    State: {
-        currentMin: any;
-        currentMax: any;
-    };
-    private manualChange;
-    private minDate;
-    private maxDate;
-    private options;
-    private slider;
-    constructor(o: IDateRangeOptions);
-    render(): IJSLVNode;
-    onCreate(node: IJSLVNode): void;
-    onRemove(): void;
-    getMin(): Date;
-    getMax(): Date;
-    private triggerChange;
-}
+import "./DateRangeStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { EventHandler } from "../../interaction/eventhandler";
+export interface IDateRangeValue {
+    minValue: Date;
+    maxValue: Date;
+}
+export interface IDateRangeOptions {
+    class?: string;
+    style?: string;
+    min: Date;
+    max: Date;
+    minValue?: Date;
+    maxValue?: Date;
+    increment: "days" | "weeks" | "month" | "years";
+    onChange?: EventHandler<IDateRangeValue> | ((v?: IDateRangeValue) => void);
+}
+export declare class DateRangeComponent implements IJSLComponent {
+    State: {
+        currentMin: any;
+        currentMax: any;
+    };
+    private manualChange;
+    private minDate;
+    private maxDate;
+    private options;
+    private slider;
+    constructor(o: IDateRangeOptions);
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    getMin(): Date;
+    getMax(): Date;
+    private triggerChange;
+}

package/lib/components/date-range/DateRangeComponent.js

@@ -1,123 +1,121 @@
-import "./DateRangeStyle.scss";
-import { noUiSlider } from "../slider/nouislider";
-import { DateComponent } from "../date/DateComponent";
-import { date } from "../../core/date";
-import { EventHandler } from "../../interaction/eventhandler";
-export class DateRangeComponent {
-    constructor(o) {
-        this.State = { currentMin: null, currentMax: null };
-        this.manualChange = false;
-        this.options = { ...o };
-        if (this.options.minValue == null) {
-            this.options.minValue = this.options.min;
-        }
-        if (this.options.maxValue == null) {
-            this.options.maxValue = this.options.max;
-        }
-        this.options.onChange = EventHandler.Create(this.options.onChange);
-        this.minDate = new DateComponent({
-            min: this.options.min,
-            max: this.options.max,
-            value: this.options.minValue,
-            style: "width:6rem;",
-            onChange: (val) => {
-                if (this.manualChange) {
-                    return;
-                }
-                this.manualChange = true;
-                const min = this.minDate.getValueAsDate();
-                const max = this.maxDate.getValueAsDate();
-                this.slider.set([date.getDaysBetween(this.options.min, min), date.getDaysBetween(this.options.min, max)]);
-                this.manualChange = false;
-                this.triggerChange();
-            }
-        });
-        this.maxDate = new DateComponent({
-            min: this.options.min,
-            max: this.options.max,
-            value: this.options.maxValue,
-            style: "width:6rem;text-align:right;",
-            onChange: (val) => {
-                if (this.manualChange) {
-                    return;
-                }
-                this.manualChange = true;
-                const min = this.minDate.getValueAsDate();
-                const max = this.maxDate.getValueAsDate();
-                this.slider.set([date.getDaysBetween(this.options.min, min), date.getDaysBetween(this.options.min, max)]);
-                this.manualChange = false;
-                this.triggerChange();
-            }
-        });
-    }
-    render() {
-        var _a;
-        return {
-            tag: "div",
-            attr: { style: this.options.style, class: "date-range-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
-            children: [
-                {
-                    tag: "div", children: [
-                        this.minDate,
-                        { tag: "span", content: " - " },
-                        this.maxDate
-                    ]
-                }, {
-                    tag: "div", children: [
-                        { tag: "div", attr: { class: "slider-div" } }
-                    ]
-                }
-            ]
-        };
-    }
-    onCreate(node) {
-        const diffInDays = date.getDaysBetween(this.options.min, this.options.max);
-        if (this.options.increment !== "days") {
-            console.warn(" only days as increments are currently supported");
-        }
-        const min = 0;
-        const max = diffInDays;
-        this.slider = noUiSlider.create(node.dom.querySelector(".slider-div"), {
-            start: [date.getDaysBetween(this.options.min, this.options.minValue),
-                date.getDaysBetween(this.options.min, this.options.maxValue)],
-            connect: true,
-            step: 1,
-            range: {
-                min,
-                max
-            },
-        });
-        this.slider.on("update", (values) => {
-            if (this.manualChange) {
-                return;
-            }
-            this.manualChange = true;
-            this.State.currentMin = values[0];
-            this.State.currentMax = values[1];
-            const minVal = date.addDays(this.options.min, parseFloat(values[0]));
-            const maxVal = date.addDays(this.options.min, parseFloat(values[1]));
-            this.minDate.getRef().setState({ selectedDate: minVal });
-            this.maxDate.getRef().setState({ selectedDate: maxVal });
-            this.manualChange = false;
-            this.triggerChange();
-        });
-    }
-    onRemove() {
-        if (this.slider != null) {
-            this.slider.destroy();
-            this.slider = null;
-        }
-    }
-    getMin() {
-        return this.minDate.getValueAsDate();
-    }
-    getMax() {
-        return this.maxDate.getValueAsDate();
-    }
-    triggerChange() {
-        this.options.onChange.notify({
-            minValue: this.getMin(),
-            maxValue: this.getMin()
-        });
-    }
-}
+import "./DateRangeStyle.scss";
+import { noUiSlider } from "../slider/nouislider";
+import { DateComponent } from "../date/DateComponent";
+import { date } from "../../core/date";
+import { EventHandler } from "../../interaction/eventhandler";
+export class DateRangeComponent {
+    constructor(o) {
+        this.State = { currentMin: null, currentMax: null };
+        this.manualChange = false;
+        this.options = { ...o };
+        if (this.options.minValue == null) {
+            this.options.minValue = this.options.min;
+        }
+        if (this.options.maxValue == null) {
+            this.options.maxValue = this.options.max;
+        }
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+        this.minDate = new DateComponent({
+            min: this.options.min,
+            max: this.options.max,
+            value: this.options.minValue,
+            style: "width:6rem;",
+            onChange: (val) => {
+                if (this.manualChange) {
+                    return;
+                }
+                this.manualChange = true;
+                const min = this.minDate.getValueAsDate();
+                const max = this.maxDate.getValueAsDate();
+                this.slider.set([date.getDaysBetween(this.options.min, min), date.getDaysBetween(this.options.min, max)]);
+                this.manualChange = false;
+                this.triggerChange();
+            }
+        });
+        this.maxDate = new DateComponent({
+            min: this.options.min,
+            max: this.options.max,
+            value: this.options.maxValue,
+            style: "width:6rem;text-align:right;",
+            onChange: (val) => {
+                if (this.manualChange) {
+                    return;
+                }
+                this.manualChange = true;
+                const min = this.minDate.getValueAsDate();
+                const max = this.maxDate.getValueAsDate();
+                this.slider.set([date.getDaysBetween(this.options.min, min), date.getDaysBetween(this.options.min, max)]);
+                this.manualChange = false;
+                this.triggerChange();
+            }
+        });
+    }
+    render() {
+        var _a;
+        return {
+            tag: "div", attr: { style: this.options.style, class: "date-range-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") }, children: [
+                {
+                    tag: "div", children: [
+                        this.minDate,
+                        { tag: "span", content: " - " },
+                        this.maxDate
+                    ]
+                }, {
+                    tag: "div", children: [
+                        { tag: "div", attr: { class: "slider-div" } }
+                    ]
+                }
+            ]
+        };
+    }
+    onCreate(node) {
+        const diffInDays = date.getDaysBetween(this.options.min, this.options.max);
+        if (this.options.increment !== "days") {
+            console.warn(" only days as increments are currently supported");
+        }
+        const min = 0;
+        const max = diffInDays;
+        this.slider = noUiSlider.create(node.dom.querySelector(".slider-div"), {
+            start: [date.getDaysBetween(this.options.min, this.options.minValue),
+                date.getDaysBetween(this.options.min, this.options.maxValue)],
+            connect: true,
+            step: 1,
+            range: {
+                min,
+                max
+            },
+        });
+        this.slider.on("update", (values) => {
+            if (this.manualChange) {
+                return;
+            }
+            this.manualChange = true;
+            this.State.currentMin = values[0];
+            this.State.currentMax = values[1];
+            const minVal = date.addDays(this.options.min, parseFloat(values[0]));
+            const maxVal = date.addDays(this.options.min, parseFloat(values[1]));
+            this.minDate.getRef().setState({ selectedDate: minVal });
+            this.maxDate.getRef().setState({ selectedDate: maxVal });
+            this.manualChange = false;
+            this.triggerChange();
+        });
+    }
+    onRemove() {
+        if (this.slider != null) {
+            this.slider.destroy();
+            this.slider = null;
+        }
+    }
+    getMin() {
+        return this.minDate.getValueAsDate();
+    }
+    getMax() {
+        return this.maxDate.getValueAsDate();
+    }
+    triggerChange() {
+        this.options.onChange.notify({
+            minValue: this.getMin(),
+            maxValue: this.getMin()
+        });
+    }
+}

package/lib/components/date-time/DateTimeComponent.d.ts

@@ -1,15 +1,15 @@
-import "./DateTimeStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
-import { IDateComponentOptions } from "../date/DateComponent";
-import { ITimeComponentOptions } from "../time/TimeComponent";
-export interface IDateTimeComponentOptions<T> extends IDateComponentOptions<T>, ITimeComponentOptions<T> {
-}
-export declare class DateTimeComponent<T = any> implements IJSLComponent {
-    private options;
-    private dateComp;
-    private timeComp;
-    constructor(options: IDateTimeComponentOptions<T>);
-    render(): IJSLVNode;
-    getValue(): string;
-    getValueAsDate(): Date;
-}
+import "./DateTimeStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDateComponentOptions } from "../date/DateComponent";
+import { ITimeComponentOptions } from "../time/TimeComponent";
+export interface IDateTimeComponentOptions<T> extends IDateComponentOptions<T>, ITimeComponentOptions<T> {
+}
+export declare class DateTimeComponent<T = any> implements IJSLComponent {
+    private options;
+    private dateComp;
+    private timeComp;
+    constructor(options: IDateTimeComponentOptions<T>);
+    render(): IJSLVNode;
+    getValue(): string;
+    getValueAsDate(): Date;
+}