jsl-ui 9.18.2 → 9.18.3

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

@@ -1,155 +0,0 @@
-/**
- * @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

@@ -1,26 +0,0 @@
-/**
- * @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

@@ -1,65 +0,0 @@
-/**
- * @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

@@ -1,20 +0,0 @@
-/**
- * @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

@@ -1,66 +0,0 @@
-/**
- * @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

@@ -1,66 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,109 +0,0 @@
-.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;
-  cursor: pointer;
-  height: 2rem;
-  box-sizing: border-box;
-  letter-spacing: .1rem;
-  text-align: center;
-  white-space: nowrap;
-  background-color: #3b99ff;
-  border: 1px solid #3b99ff;
-  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

@@ -1,22 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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;
-}