jsl-ui 9.18.3 → 9.19.0

package/lib/ui/date.picker/views/day-picker.js

@@ -0,0 +1,155 @@
+/**
+ * @file Manages the calendar / day-picker view.
+ */
+import { Key } from '../lib/dom';
+import { now, datesEq, shiftMonth, shiftDay } from '../lib/date-manip';
+export default {
+    onKeyDown: keyDown,
+    onClick: {
+        'dp-day': selectDay,
+        'dp-next': gotoNextMonth,
+        'dp-prev': gotoPrevMonth,
+        'dp-today': selectToday,
+        'dp-clear': clear,
+        'dp-close': close,
+        'dp-cal-month': showMonthPicker,
+        'dp-cal-year': showYearPicker,
+    },
+    render: render
+};
+/**
+ * view renders the calendar (day picker) as an HTML string.
+ *
+ * @param {DatePickerContext} context the date picker being rendered
+ * @returns {string}
+ */
+function render(dp) {
+    var opts = dp.opts;
+    var lang = opts.lang;
+    var state = dp.state;
+    var dayNames = lang.days;
+    var dayOffset = opts.dayOffset || 0;
+    var selectedDate = state.selectedDate;
+    var hilightedDate = state.hilightedDate;
+    var hilightedMonth = hilightedDate.getMonth();
+    var today = now().getTime();
+    return ('<div class="dp-cal">' +
+        '<header class="dp-cal-header">' +
+        '<button tabindex="-1" type="button" class="dp-prev">Prev</button>' +
+        '<button tabindex="-1" type="button" class="dp-cal-month">' +
+        lang.months[hilightedMonth] +
+        '</button>' +
+        '<button tabindex="-1" type="button" class="dp-cal-year">' +
+        hilightedDate.getFullYear() +
+        '</button>' +
+        '<button tabindex="-1" type="button" class="dp-next">Next</button>' +
+        '</header>' +
+        '<div class="dp-days">' +
+        dayNames.map(function (name, i) {
+            return ('<span class="dp-col-header">' + dayNames[(i + dayOffset) % dayNames.length] + '</span>');
+        }).join('') +
+        mapDays(hilightedDate, dayOffset, function (date) {
+            var isNotInMonth = date.getMonth() !== hilightedMonth;
+            var isDisabled = !opts.inRange(date);
+            var isToday = date.getTime() === today;
+            var className = 'dp-day';
+            className += (isNotInMonth ? ' dp-edge-day' : '');
+            className += (datesEq(date, hilightedDate) ? ' dp-current' : '');
+            className += (datesEq(date, selectedDate) ? ' dp-selected' : '');
+            className += (isDisabled ? ' dp-day-disabled' : '');
+            className += (isToday ? ' dp-day-today' : '');
+            className += ' ' + opts.dateClass(date, dp);
+            return ('<button tabindex="-1" type="button" class="' + className + '" data-date="' + date.getTime() + '">' +
+                date.getDate() +
+                '</button>');
+        }) +
+        '</div>' +
+        '<footer class="dp-cal-footer">' +
+        '<button tabindex="-1" type="button" class="dp-today">' + lang.today + '</button>' +
+        '<button tabindex="-1" type="button" class="dp-clear">' + lang.clear + '</button>' +
+        '<button tabindex="-1" type="button" class="dp-close">' + lang.close + '</button>' +
+        '</footer>' +
+        '</div>');
+}
+/**
+ * keyDown handles the key down event for the day-picker
+ *
+ * @param {Event} e
+ * @param {DatePickerContext} dp
+ */
+function keyDown(e, dp) {
+    var key = e.keyCode;
+    var shiftBy = (key === Key.left) ? -1 :
+        (key === Key.right) ? 1 :
+            (key === Key.up) ? -7 :
+                (key === Key.down) ? 7 :
+                    0;
+    if (key === Key.esc) {
+        dp.close();
+    }
+    else if (shiftBy) {
+        e.preventDefault();
+        dp.setState({
+            hilightedDate: shiftDay(dp.state.hilightedDate, shiftBy)
+        });
+    }
+}
+function selectToday(e, dp) {
+    dp.setState({
+        selectedDate: now(),
+    });
+}
+function clear(e, dp) {
+    dp.setState({
+        selectedDate: null,
+    });
+}
+function close(e, dp) {
+    dp.close();
+}
+function showMonthPicker(e, dp) {
+    dp.setState({
+        view: 'month'
+    });
+}
+function showYearPicker(e, dp) {
+    dp.setState({
+        view: 'year'
+    });
+}
+function gotoNextMonth(e, dp) {
+    var hilightedDate = dp.state.hilightedDate;
+    dp.setState({
+        hilightedDate: shiftMonth(hilightedDate, 1)
+    });
+}
+function gotoPrevMonth(e, dp) {
+    var hilightedDate = dp.state.hilightedDate;
+    dp.setState({
+        hilightedDate: shiftMonth(hilightedDate, -1)
+    });
+}
+function selectDay(e, dp) {
+    dp.setState({
+        selectedDate: new Date(parseInt(e.target.getAttribute('data-date'))),
+    });
+}
+function mapDays(currentDate, dayOffset, fn) {
+    var result = '';
+    var iter = new Date(currentDate);
+    iter.setDate(1);
+    iter.setDate(1 - iter.getDay() + dayOffset);
+    // If we are showing monday as the 1st of the week,
+    // and the monday is the 2nd of the month, the sunday won't
+    // show, so we need to shift backwards
+    if (dayOffset && iter.getDate() === dayOffset + 1) {
+        iter.setDate(dayOffset - 6);
+    }
+    // We are going to have 6 weeks always displayed to keep a consistent
+    // calendar size
+    for (var day = 0; day < (6 * 7); ++day) {
+        result += fn(iter);
+        iter.setDate(iter.getDate() + 1);
+    }
+    return result;
+}

package/lib/ui/date.picker/views/month-picker.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file Manages the month-picker view.
+ */
+declare const _default: {
+    onKeyDown: typeof keyDown;
+    onClick: {
+        'dp-month': typeof onChooseMonth;
+    };
+    render: typeof render;
+};
+export default _default;
+declare function onChooseMonth(e: any, dp: any): void;
+/**
+ * render renders the month picker as an HTML string
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+declare function render(dp: any): string;
+/**
+ * keyDown handles keydown events that occur in the month picker
+ *
+ * @param {Event} e
+* @param {DatePickerContext} dp
+ */
+declare function keyDown(e: any, dp: any): void;

package/lib/ui/date.picker/views/month-picker.js

@@ -0,0 +1,65 @@
+/**
+ * @file Manages the month-picker view.
+ */
+import { Key } from '../lib/dom';
+import { shiftMonth, setMonth } from '../lib/date-manip';
+export default {
+    onKeyDown: keyDown,
+    onClick: {
+        'dp-month': onChooseMonth
+    },
+    render: render
+};
+function onChooseMonth(e, dp) {
+    dp.setState({
+        hilightedDate: setMonth(dp.state.hilightedDate, parseInt(e.target.getAttribute('data-month'))),
+        view: 'day',
+    });
+}
+/**
+ * render renders the month picker as an HTML string
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+function render(dp) {
+    var opts = dp.opts;
+    var lang = opts.lang;
+    var months = lang.months;
+    var currentDate = dp.state.hilightedDate;
+    var currentMonth = currentDate.getMonth();
+    return ('<div class="dp-months">' +
+        months.map(function (month, i) {
+            var className = 'dp-month';
+            className += (currentMonth === i ? ' dp-current' : '');
+            return ('<button tabindex="-1" type="button" class="' + className + '" data-month="' + i + '">' +
+                month +
+                '</button>');
+        }).join('') +
+        '</div>');
+}
+/**
+ * keyDown handles keydown events that occur in the month picker
+ *
+ * @param {Event} e
+* @param {DatePickerContext} dp
+ */
+function keyDown(e, dp) {
+    var key = e.keyCode;
+    var shiftBy = (key === Key.left) ? -1 :
+        (key === Key.right) ? 1 :
+            (key === Key.up) ? -3 :
+                (key === Key.down) ? 3 :
+                    0;
+    if (key === Key.esc) {
+        dp.setState({
+            view: 'day',
+        });
+    }
+    else if (shiftBy) {
+        e.preventDefault();
+        dp.setState({
+            hilightedDate: shiftMonth(dp.state.hilightedDate, shiftBy, true)
+        });
+    }
+}

package/lib/ui/date.picker/views/year-picker.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file Manages the year-picker view.
+ */
+declare const _default: {
+    render: typeof render;
+    onKeyDown: typeof keyDown;
+    onClick: {
+        'dp-year': typeof onChooseYear;
+    };
+};
+export default _default;
+/**
+ * view renders the year picker as an HTML string.
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+declare function render(dp: any): string;
+declare function onChooseYear(e: any, dp: any): void;
+declare function keyDown(e: any, dp: any): void;

package/lib/ui/date.picker/views/year-picker.js

@@ -0,0 +1,66 @@
+/**
+ * @file Manages the year-picker view.
+ */
+import { Key } from '../lib/dom';
+import { setYear, shiftYear, constrainDate } from '../lib/date-manip';
+export default {
+    render: render,
+    onKeyDown: keyDown,
+    onClick: {
+        'dp-year': onChooseYear
+    },
+};
+/**
+ * view renders the year picker as an HTML string.
+ *
+ * @param {DatePickerContext} dp the date picker context
+ * @returns {string}
+ */
+function render(dp) {
+    var state = dp.state;
+    var currentYear = state.hilightedDate.getFullYear();
+    var selectedYear = state.selectedDate.getFullYear();
+    return ('<div class="dp-years">' +
+        mapYears(dp, function (year) {
+            var className = 'dp-year';
+            className += (year === currentYear ? ' dp-current' : '');
+            className += (year === selectedYear ? ' dp-selected' : '');
+            return ('<button tabindex="-1" type="button" class="' + className + '" data-year="' + year + '">' +
+                year +
+                '</button>');
+        }) +
+        '</div>');
+}
+function onChooseYear(e, dp) {
+    dp.setState({
+        hilightedDate: setYear(dp.state.hilightedDate, parseInt(e.target.getAttribute('data-year'))),
+        view: 'day',
+    });
+}
+function keyDown(e, dp) {
+    var key = e.keyCode;
+    var opts = dp.opts;
+    var shiftBy = (key === Key.left || key === Key.up) ? 1 :
+        (key === Key.right || key === Key.down) ? -1 :
+            0;
+    if (key === Key.esc) {
+        dp.setState({
+            view: 'day',
+        });
+    }
+    else if (shiftBy) {
+        e.preventDefault();
+        var shiftedYear = shiftYear(dp.state.hilightedDate, shiftBy);
+        dp.setState({
+            hilightedDate: constrainDate(shiftedYear, opts.min, opts.max),
+        });
+    }
+}
+function mapYears(dp, fn) {
+    var result = '';
+    var max = dp.opts.max.getFullYear();
+    for (var i = max; i >= dp.opts.min.getFullYear(); --i) {
+        result += fn(i);
+    }
+    return result;
+}

package/lib/ui/date.picker.d.ts

@@ -0,0 +1,66 @@
+import './date.picker/css/tiny-date-picker.css';
+export interface IDatePickerLangOptions {
+    days: string[];
+    months: string[];
+    today: string;
+    close: string;
+    clear: string;
+}
+export interface IDatePickerOptions {
+    lang?: IDatePickerLangOptions;
+    mode?: 'dp-modal' | 'dp-below' | 'dp-permanent';
+    hilightedDate?: string | Date;
+    min?: string | Date;
+    max?: string | Date;
+    format?: (d: Date) => string;
+    parse?: (s: string) => Date;
+    dateClass?: (d: Date) => string;
+    inRange?: (d: Date) => boolean;
+    dayOffset?: number;
+}
+/**
+* The state values for the date picker
+*
+* @typedef {Object} DatePickerState
+* @property {string} view - The current view 'day' | 'month' | 'year'
+* @property {Date} selectedDate - The date which has been selected by the user
+* @property {Date} hilightedDate - The date which is currently hilighted / active
+*/
+/**
+* An instance of TinyDatePicker
+*
+* @typedef {Object} DatePicker
+* @property {DatePickerState} state - The values currently displayed.
+* @property {function} on - Adds an event handler
+* @property {function} off - Removes an event handler
+* @property {function} setState - Changes the current state of the date picker
+* @property {function} open - Opens the date picker
+* @property {function} close - Closes the date picker
+* @property {function} destroy - Destroys the date picker (removing all handlers from the input, too)
+*/
+export interface IDatePicker {
+    on(name: "open" | "close" | "statechange" | "select", handler: (e: any, dp: IDatePicker) => void): any;
+    off(name?: "open" | "close" | "statechange" | "select", handler?: any): void;
+    open(): void;
+    close(): void;
+    destroy(): void;
+    setState(state: {
+        selectedDate?: Date;
+        view?: string;
+        hilightedDate?: Date;
+    }): void;
+    readonly state: {
+        selectedDate?: Date;
+        view?: string;
+        hilightedDate?: Date;
+    };
+    isVisible(): boolean;
+}
+/**
+ * TinyDatePicker constructs a new date picker for the specified input
+ *
+ * @param {HTMLElement | string} input The input or CSS selector associated with the datepicker
+ * @param {DatePickerOptions} opts The options for initializing the date picker
+ * @returns {DatePicker}
+ */
+export declare function DatePicker(input: HTMLElement | string, opts?: IDatePickerOptions): IDatePicker;

package/lib/ui/date.picker.js

@@ -0,0 +1,32 @@
+import DatePickerOptions from './date.picker/date-picker-options';
+import Mode from './date.picker/mode/index';
+import Emitter from './date.picker/lib/emitter';
+import './date.picker/css/tiny-date-picker.css';
+/**
+ * TinyDatePicker constructs a new date picker for the specified input
+ *
+ * @param {HTMLElement | string} input The input or CSS selector associated with the datepicker
+ * @param {DatePickerOptions} opts The options for initializing the date picker
+ * @returns {DatePicker}
+ */
+export function DatePicker(input, opts) {
+    var emitter = Emitter();
+    var options = DatePickerOptions(opts);
+    var mode = Mode(input, emit, options);
+    var me = {
+        get state() {
+            return mode.state;
+        },
+        on: emitter.on,
+        off: emitter.off,
+        setState: mode.setState,
+        open: mode.open,
+        close: mode.close,
+        destroy: mode.destroy,
+        isVisible: mode.isVisible
+    };
+    function emit(evt) {
+        emitter.emit(evt, me);
+    }
+    return me;
+}

package/lib/ui/dialog.css

@@ -0,0 +1,109 @@
+.jsl-dialog {
+    position: relative;
+    z-index: 2002;
+    background:white;
+    border-radius: 0.8rem;
+    pointer-events: all;
+    border: 2px solid #dddddd;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.jsl-dialog .jsl-button {
+  vertical-align: middle;
+  /* color: #fff;
+  background-color: #3b99ff;
+  border: 1px solid #3b99ff; */
+  cursor: pointer;
+  height: 2rem;
+  box-sizing: border-box;
+  letter-spacing: .1rem;
+  text-align: center;
+  white-space: nowrap;
+  border-radius: .3rem;
+  padding: 0 1rem;
+  line-height: 2rem;
+  text-decoration: none;
+  display: inline-block;
+}
+
+/* .jsl-dialog .jsl-button.jsl-button-outline {
+  color: #444;
+  background: #fff;
+} */
+
+.dlg-close-btn {
+    color: #555555;
+    font-size: 2rem;
+    line-height: 2.8rem;
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    width: 2.5rem;
+    box-sizing: border-box;
+    border-top-right-radius: 0.8rem;
+    cursor: pointer;
+    background: #d8d8d8;
+}
+
+.dlg-close-btn:hover {
+    background: #B22121;
+    color: white;
+}
+
+.jsl-dialog-overlay {
+    position: fixed;
+    left:0;
+    top:0;
+    bottom:0;
+    right:0;
+    z-index: 2001;
+    background:rgba(0,0,0,0.8);
+    height: 100vh;
+}
+
+.jsl-dialog > .dlg-header {
+	box-sizing: content-box;
+    position: relative;
+    height: 2rem;
+    padding: 0.6rem;
+    border-bottom: 1px solid #ededed;
+    background: #f8f8f8;
+    font-size: 1.5rem;
+    border-top-right-radius: 0.8rem;
+    border-top-left-radius: 0.8rem;
+    text-align: center;
+}
+
+.jsl-dialog > .dlg-body {
+    padding: 1rem;
+    box-sizing: border-box;
+    overflow: auto;
+    margin-bottom: 3rem;
+}
+
+.jsl-dialog > .dlg-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3rem;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    border-top: 1px solid #ededed;
+    background: #f8f8f8;
+    border-bottom-right-radius: 0.8rem;
+    border-bottom-left-radius: 0.8rem;
+    text-align: right;
+}
+
+.jsl-dialog > .dlg-footer button {
+    margin-left: 1rem;
+}
+
+.jsl-dialog .slickgrid {
+    border-radius: 0;
+}

package/lib/ui/dialog.d.ts

@@ -0,0 +1,22 @@
+import "./dialog.css";
+export interface IDialogOptions {
+    autoOpen?: boolean;
+    autoFocus?: string;
+    modal?: boolean;
+    closeOnEscape?: boolean;
+    OkOnEnter?: boolean;
+    closeOnOverlayClick?: boolean;
+    onClose?: () => void | boolean;
+    onOpen?: () => void;
+}
+export declare class JSLDialog {
+    private options;
+    private overlay;
+    private el;
+    private onKeydownEvent;
+    constructor(el: HTMLElement, options: IDialogOptions);
+    open(modal?: boolean): void;
+    close(): void;
+    getOverlay(): HTMLElement;
+}
+export declare function Dialog(input: HTMLElement | string, options?: IDialogOptions): JSLDialog;

package/lib/ui/dialog.js

@@ -0,0 +1,113 @@
+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 "./dialog.css";
+var defaultOptions = {
+    autoOpen: false,
+    autoFocus: "input,button,textarea",
+    closeOnOverlayClick: true,
+    modal: true,
+    closeOnEscape: true
+};
+var JSLDialog = /** @class */ (function () {
+    function JSLDialog(el, options) {
+        var _this = this;
+        this.options = options;
+        this.overlay = el;
+        this.el = el.firstElementChild;
+        if (this.options.closeOnOverlayClick) {
+            this.overlay.addEventListener("mousedown", function (evt) {
+                if (evt.target === _this.overlay) {
+                    _this.close();
+                }
+            });
+            this.overlay.addEventListener("touchstart", function (evt) {
+                if (evt.target === _this.overlay) {
+                    _this.close();
+                }
+            });
+        }
+    }
+    JSLDialog.prototype.open = function (modal) {
+        var _this = this;
+        if ((modal !== undefined && !modal) || !this.options.modal) {
+            this.overlay.style.background = "transparent";
+            this.overlay.style.pointerEvents = "none";
+        }
+        this.overlay.style.display = "block";
+        var $footer = this.el.querySelector(".dlg-footer");
+        var $body = this.el.querySelector(".dlg-body");
+        if ($footer != null && $body != null) {
+            // TODO ?
+        }
+        if (this.options.autoFocus) {
+            setTimeout(function () {
+                var firstInput = _this.el.querySelector(_this.options.autoFocus);
+                if (firstInput != null) {
+                    firstInput.focus();
+                }
+            }, 0);
+        }
+        if (this.options.closeOnEscape || this.options.OkOnEnter) {
+            this.onKeydownEvent = function (args) {
+                var _a;
+                if (args.keyCode === 27 && _this.options.closeOnEscape) { // escape
+                    _this.close();
+                }
+                else if (args.keyCode === 13 && _this.options.OkOnEnter) { // ok
+                    var ok_btn = _this.el.querySelector(".dlg-ok-btn");
+                    if (ok_btn != null) {
+                        (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+                        ok_btn.click();
+                    }
+                }
+            };
+            document.addEventListener("keydown", this.onKeydownEvent);
+        }
+        if (this.options.onOpen) {
+            this.options.onOpen();
+        }
+    };
+    JSLDialog.prototype.close = function () {
+        if (this.options.onClose) {
+            if (this.options.onClose() === false) {
+                return;
+            }
+        }
+        this.overlay.style.display = "none";
+        if (this.onKeydownEvent != null) {
+            document.removeEventListener("keydown", this.onKeydownEvent);
+        }
+    };
+    JSLDialog.prototype.getOverlay = function () {
+        return this.overlay;
+    };
+    return JSLDialog;
+}());
+export { JSLDialog };
+export function Dialog(input, options) {
+    var o = __assign(__assign({}, defaultOptions), options);
+    var el;
+    if (typeof input === "string") {
+        el = document.querySelector(input);
+    }
+    else {
+        el = input;
+    }
+    var result = new JSLDialog(el, o);
+    if (!o.autoOpen) {
+        el.style.display = "none";
+    }
+    else {
+        result.open();
+    }
+    return result;
+}