jsl-ui 9.18.2 → 9.18.3

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

@@ -1,23 +0,0 @@
-/**
- * @file Utility functions for function manipulation.
- */
-/**
- * bufferFn buffers calls to fn so they only happen every ms milliseconds
- *
- * @param {number} ms number of milliseconds
- * @param {function} fn the function to be buffered
- * @returns {function}
- */
-export declare function bufferFn(ms: any, fn: any): () => void;
-/**
- * noop is a function which does nothing at all.
- */
-export declare function noop(): void;
-/**
- * copy properties from object o2 to object o1.
- *
- * @params {Object} o1
- * @params {Object} o2
- * @returns {Object}
- */
-export declare function cp(...params: any[]): any;

package/lib/ui/date.picker/lib/fns.js

@@ -1,43 +0,0 @@
-/**
- * @file Utility functions for function manipulation.
- */
-/**
- * bufferFn buffers calls to fn so they only happen every ms milliseconds
- *
- * @param {number} ms number of milliseconds
- * @param {function} fn the function to be buffered
- * @returns {function}
- */
-export function bufferFn(ms, fn) {
-    var timeout = undefined;
-    return function () {
-        clearTimeout(timeout);
-        timeout = setTimeout(fn, ms);
-    };
-}
-/**
- * noop is a function which does nothing at all.
- */
-export function noop() { }
-/**
- * copy properties from object o2 to object o1.
- *
- * @params {Object} o1
- * @params {Object} o2
- * @returns {Object}
- */
-export function cp() {
-    var params = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        params[_i] = arguments[_i];
-    }
-    var args = arguments;
-    var o1 = args[0];
-    for (var i = 1; i < args.length; ++i) {
-        var o2 = args[i] || {};
-        for (var key in o2) {
-            o1[key] = o2[key];
-        }
-    }
-    return o1;
-}

package/lib/ui/date.picker/mode/base-mode.d.ts

@@ -1,26 +0,0 @@
-import { noop } from '../lib/fns';
-export default function BaseMode(input: any, emit: any, opts: any): {
-    el: any;
-    opts: any;
-    shouldFocusOnBlur: boolean;
-    shouldFocusOnRender: boolean;
-    state: {
-        selectedDate: Date;
-        view: string;
-        hilightedDate: any;
-    };
-    adjustPosition: typeof noop;
-    containerHTML: string;
-    attachToDom: () => void;
-    updateInput: (selectedDate: any) => void;
-    computeSelectedDate: () => any;
-    currentView: () => any;
-    open: () => void;
-    isVisible: () => boolean;
-    hasFocus: () => boolean;
-    shouldHide: () => boolean;
-    close: (becauseOfBlur?: boolean) => void;
-    destroy: () => void;
-    render: () => void;
-    setState: (state: any) => void;
-};

package/lib/ui/date.picker/mode/base-mode.js

@@ -1,248 +0,0 @@
-/**
- * @file Defines the base date picker behavior, overridden by various modes.
- */
-import dayPicker from '../views/day-picker';
-import monthPicker from '../views/month-picker';
-import yearPicker from '../views/year-picker';
-import { bufferFn, noop } from '../lib/fns';
-import { on, CustomEvent, Key } from '../lib/dom';
-import { constrainDate } from '../lib/date-manip';
-var views = {
-    day: dayPicker,
-    year: yearPicker,
-    month: monthPicker
-};
-export default function BaseMode(input, emit, opts) {
-    var detatchInputEvents; // A function that detaches all events from the input
-    var closing = false; // A hack to prevent calendar from re-opening when closing.
-    var selectedDate; // The currently selected date
-    var dp = {
-        // The root DOM element for the date picker, initialized on first open.
-        el: undefined,
-        opts: opts,
-        shouldFocusOnBlur: true,
-        shouldFocusOnRender: true,
-        state: initialState(),
-        adjustPosition: noop,
-        containerHTML: '<div class="dp"></div>',
-        attachToDom: function () {
-            opts.appendTo.appendChild(dp.el);
-        },
-        updateInput: function (selectedDate) {
-            var e = new CustomEvent('change', { bubbles: true });
-            e.simulated = true;
-            input.value = selectedDate ? opts.format(selectedDate) : '';
-            input.dispatchEvent(e);
-        },
-        computeSelectedDate: function () {
-            return opts.parse(input.value);
-        },
-        currentView: function () {
-            return views[dp.state.view];
-        },
-        open: function () {
-            if (closing) {
-                return;
-            }
-            if (!dp.el) {
-                dp.el = createContainerElement(opts, dp.containerHTML);
-                attachContainerEvents(dp);
-            }
-            selectedDate = constrainDate(dp.computeSelectedDate(), opts.min, opts.max);
-            dp.state.hilightedDate = selectedDate || opts.hilightedDate;
-            dp.state.view = 'day';
-            dp.attachToDom();
-            dp.render();
-            emit('open');
-        },
-        isVisible: function () {
-            return !!dp.el && !!dp.el.parentNode;
-        },
-        hasFocus: function () {
-            var focused = document.activeElement;
-            return dp.el &&
-                dp.el.contains(focused) &&
-                focused.className.indexOf('dp-focuser') < 0;
-        },
-        shouldHide: function () {
-            return dp.isVisible();
-        },
-        close: function (becauseOfBlur) {
-            var el = dp.el;
-            if (!dp.isVisible()) {
-                return;
-            }
-            if (el) {
-                var parent = el.parentNode;
-                parent && parent.removeChild(el);
-            }
-            closing = true;
-            if (becauseOfBlur && dp.shouldFocusOnBlur) {
-                focusInput(input);
-            }
-            // When we close, the input often gains refocus, which
-            // can then launch the date picker again, so we buffer
-            // a bit and don't show the date picker within N ms of closing
-            setTimeout(function () {
-                closing = false;
-            }, 100);
-            emit('close');
-        },
-        destroy: function () {
-            dp.close();
-            detatchInputEvents();
-        },
-        render: function () {
-            if (!dp.el) {
-                return;
-            }
-            var hadFocus = dp.hasFocus();
-            var html = dp.currentView().render(dp);
-            html && (dp.el.firstChild.innerHTML = html);
-            dp.adjustPosition();
-            if (hadFocus || dp.shouldFocusOnRender) {
-                focusCurrent(dp);
-            }
-        },
-        // Conceptually similar to setState in React, updates
-        // the view state and re-renders.
-        setState: function (state) {
-            for (var key in state) {
-                dp.state[key] = state[key];
-            }
-            emit('statechange');
-            dp.render();
-        },
-    };
-    detatchInputEvents = attachInputEvents(input, dp);
-    // Builds the initial view state
-    // selectedDate is a special case and causes changes to hilightedDate
-    // hilightedDate is set on open, so remains undefined initially
-    // view is the current view (day, month, year)
-    function initialState() {
-        return {
-            get selectedDate() {
-                return selectedDate;
-            },
-            set selectedDate(dt) {
-                if (dt && !opts.inRange(dt)) {
-                    return;
-                }
-                if (dt) {
-                    selectedDate = new Date(dt);
-                    dp.state.hilightedDate = selectedDate;
-                }
-                else {
-                    selectedDate = dt;
-                }
-                dp.updateInput(selectedDate);
-                emit('select');
-                dp.close();
-            },
-            view: 'day',
-            hilightedDate: undefined
-        };
-    }
-    return dp;
-}
-function createContainerElement(opts, containerHTML) {
-    var el = document.createElement('div');
-    el.className = opts.mode;
-    el.innerHTML = containerHTML;
-    return el;
-}
-function attachInputEvents(input, dp) {
-    var bufferShow = bufferFn(5, function () {
-        if (dp.shouldHide()) {
-            dp.close();
-        }
-        else {
-            dp.open();
-        }
-    });
-    var off = [
-        on('blur', input, bufferFn(150, function () {
-            if (!dp.hasFocus()) {
-                dp.close(true);
-            }
-        })),
-        on('mousedown', input, function () {
-            if (input === document.activeElement && !dp.isVisible()) {
-                bufferShow();
-            }
-        }),
-        on('focus', input, bufferShow),
-        on('input', input, function (e) {
-            try {
-                var date = dp.opts.parse(e.target.value);
-                dp.setState({
-                    hilightedDate: date
-                });
-            }
-            catch (e) {
-                //ignore invalid dates while input
-            }
-        }),
-    ];
-    // Unregister all events that were registered above.
-    return function () {
-        off.forEach(function (f) {
-            f();
-        });
-    };
-}
-function focusCurrent(dp) {
-    var current = dp.el.querySelector('.dp-current');
-    return current && current.focus();
-}
-function attachContainerEvents(dp) {
-    var el = dp.el;
-    var calEl = el.querySelector('.dp');
-    // Hack to get iOS to show active CSS states
-    el.ontouchstart = noop;
-    function onClick(e) {
-        e.target.className.split(' ').forEach(function (evt) {
-            var handler = dp.currentView().onClick[evt];
-            handler && handler(e, dp);
-        });
-    }
-    // The calender fires a blur event *every* time we redraw
-    // this means we need to buffer the blur event to see if
-    // it still has no focus after redrawing, and only then
-    // do we return focus to the input. A possible other approach
-    // would be to set context.redrawing = true on redraw and
-    // set it to false in the blur event.
-    on('blur', calEl, bufferFn(150, function () {
-        if (!dp.hasFocus()) {
-            dp.close(true);
-        }
-    }));
-    on('keydown', el, function (e) {
-        if (e.keyCode === Key.enter) {
-            onClick(e);
-        }
-        else {
-            dp.currentView().onKeyDown(e, dp);
-        }
-    });
-    // If the user clicks in non-focusable space, but
-    // still within the date picker, we don't want to
-    // hide, so we need to hack some things...
-    on('mousedown', calEl, function (e) {
-        e.target.focus && e.target.focus(); // IE hack
-        if (document.activeElement !== e.target) {
-            e.preventDefault();
-            focusCurrent(dp);
-        }
-    });
-    on('click', el, onClick);
-}
-function focusInput(input) {
-    // When the modal closes, we need to focus the original input so the
-    // user can continue tabbing from where they left off.
-    input.focus();
-    // iOS zonks out if we don't blur the input, so...
-    if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
-        input.blur();
-    }
-}

package/lib/ui/date.picker/mode/dropdown-mode.d.ts

@@ -1,28 +0,0 @@
-/**
- * @file Defines the dropdown date picker behavior.
- */
-export default function DropdownMode(input: any, emit: any, opts: any): {
-    el: any;
-    opts: any;
-    shouldFocusOnBlur: boolean;
-    shouldFocusOnRender: boolean;
-    state: {
-        selectedDate: Date;
-        view: string;
-        hilightedDate: any;
-    };
-    adjustPosition: typeof import("../lib/fns").noop;
-    containerHTML: string;
-    attachToDom: () => void;
-    updateInput: (selectedDate: any) => void;
-    computeSelectedDate: () => any;
-    currentView: () => any;
-    open: () => void;
-    isVisible: () => boolean;
-    hasFocus: () => boolean;
-    shouldHide: () => boolean;
-    close: (becauseOfBlur?: boolean) => void;
-    destroy: () => void;
-    render: () => void;
-    setState: (state: any) => void;
-};

package/lib/ui/date.picker/mode/dropdown-mode.js

@@ -1,50 +0,0 @@
-/**
- * @file Defines the dropdown date picker behavior.
- */
-import BaseMode from './base-mode';
-export default function DropdownMode(input, emit, opts) {
-    var dp = BaseMode(input, emit, opts);
-    dp.shouldFocusOnBlur = false;
-    Object.defineProperty(dp, 'shouldFocusOnRender', {
-        get: function () {
-            return input !== document.activeElement;
-        }
-    });
-    dp.adjustPosition = function () {
-        autoPosition(input, dp);
-    };
-    return dp;
-}
-function autoPosition(input, dp) {
-    var inputPos = input.getBoundingClientRect();
-    var win = window;
-    adjustCalY(dp, inputPos, win);
-    adjustCalX(dp, inputPos, win);
-    dp.el.style.visibility = '';
-}
-function adjustCalX(dp, inputPos, win) {
-    var cal = dp.el;
-    var scrollLeft = win.pageXOffset;
-    var inputLeft = inputPos.left + scrollLeft;
-    var maxRight = win.innerWidth + scrollLeft;
-    var offsetWidth = cal.offsetWidth;
-    var calRight = inputLeft + offsetWidth;
-    var shiftedLeft = maxRight - offsetWidth;
-    var left = calRight > maxRight && shiftedLeft > 0 ? shiftedLeft : inputLeft;
-    cal.style.left = left + 'px';
-}
-function adjustCalY(dp, inputPos, win) {
-    var cal = dp.el;
-    var scrollTop = win.pageYOffset;
-    var inputTop = scrollTop + inputPos.top;
-    var calHeight = cal.offsetHeight;
-    var belowTop = inputTop + inputPos.height + 8;
-    var aboveTop = inputTop - calHeight - 8;
-    var isAbove = (aboveTop > 0 && belowTop + calHeight > scrollTop + win.innerHeight);
-    var top = isAbove ? aboveTop : belowTop;
-    if (cal.classList) {
-        cal.classList.toggle('dp-is-above', isAbove);
-        cal.classList.toggle('dp-is-below', !isAbove);
-    }
-    cal.style.top = top + 'px';
-}

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

@@ -1,28 +0,0 @@
-/**
- * @file Defines the various date picker modes (modal, dropdown, permanent)
- */
-export default function Mode(input: any, emit: any, opts: any): {
-    el: any;
-    opts: any;
-    shouldFocusOnBlur: boolean;
-    shouldFocusOnRender: boolean;
-    state: {
-        selectedDate: Date;
-        view: string;
-        hilightedDate: any;
-    };
-    adjustPosition: typeof import("../lib/fns").noop;
-    containerHTML: string;
-    attachToDom: () => void;
-    updateInput: (selectedDate: any) => void;
-    computeSelectedDate: () => any;
-    currentView: () => any;
-    open: () => void;
-    isVisible: () => boolean;
-    hasFocus: () => boolean;
-    shouldHide: () => boolean;
-    close: (becauseOfBlur?: boolean) => void;
-    destroy: () => void;
-    render: () => void;
-    setState: (state: any) => void;
-};

package/lib/ui/date.picker/mode/index.js

@@ -1,18 +0,0 @@
-/**
- * @file Defines the various date picker modes (modal, dropdown, permanent)
- */
-import ModalMode from './modal-mode';
-import DropdownMode from './dropdown-mode';
-import PermanentMode from './permanent-mode';
-export default function Mode(input, emit, opts) {
-    input = input && input.tagName ? input : document.querySelector(input);
-    if (opts.mode === 'dp-modal') {
-        return ModalMode(input, emit, opts);
-    }
-    if (opts.mode === 'dp-below') {
-        return DropdownMode(input, emit, opts);
-    }
-    if (opts.mode === 'dp-permanent') {
-        return PermanentMode(input, emit, opts);
-    }
-}

package/lib/ui/date.picker/mode/modal-mode.d.ts

@@ -1,25 +0,0 @@
-export default function ModalMode(input: any, emit: any, opts: any): {
-    el: any;
-    opts: any;
-    shouldFocusOnBlur: boolean;
-    shouldFocusOnRender: boolean;
-    state: {
-        selectedDate: Date;
-        view: string;
-        hilightedDate: any;
-    };
-    adjustPosition: typeof import("../lib/fns").noop;
-    containerHTML: string;
-    attachToDom: () => void;
-    updateInput: (selectedDate: any) => void;
-    computeSelectedDate: () => any;
-    currentView: () => any;
-    open: () => void;
-    isVisible: () => boolean;
-    hasFocus: () => boolean;
-    shouldHide: () => boolean;
-    close: (becauseOfBlur?: boolean) => void;
-    destroy: () => void;
-    render: () => void;
-    setState: (state: any) => void;
-};

package/lib/ui/date.picker/mode/modal-mode.js

@@ -1,17 +0,0 @@
-/**
- * @file Defines the modal date picker behavior.
- */
-import BaseMode from './base-mode';
-export default function ModalMode(input, emit, opts) {
-    var dp = BaseMode(input, emit, opts);
-    // In modal mode, users really shouldn't be able to type in
-    // the input, as all input is done via the calendar.
-    input.readonly = true;
-    // In modal mode, we need to know when the user has tabbed
-    // off the end of the calendar, and set focus to the original
-    // input. To do this, we add a special element to the DOM.
-    // When the user tabs off the bottom of the calendar, they
-    // will tab onto this element.
-    dp.containerHTML += '<a href="#" class="dp-focuser">.</a>';
-    return dp;
-}

package/lib/ui/date.picker/mode/permanent-mode.d.ts

@@ -1,29 +0,0 @@
-/**
- * @file Defines the permanent date picker behavior.
- */
-import { noop } from '../lib/fns';
-export default function PermanentMode(root: any, emit: any, opts: any): {
-    el: any;
-    opts: any;
-    shouldFocusOnBlur: boolean;
-    shouldFocusOnRender: boolean;
-    state: {
-        selectedDate: Date;
-        view: string;
-        hilightedDate: any;
-    };
-    adjustPosition: typeof noop;
-    containerHTML: string;
-    attachToDom: () => void;
-    updateInput: (selectedDate: any) => void;
-    computeSelectedDate: () => any;
-    currentView: () => any;
-    open: () => void;
-    isVisible: () => boolean;
-    hasFocus: () => boolean;
-    shouldHide: () => boolean;
-    close: (becauseOfBlur?: boolean) => void;
-    destroy: () => void;
-    render: () => void;
-    setState: (state: any) => void;
-};

package/lib/ui/date.picker/mode/permanent-mode.js

@@ -1,19 +0,0 @@
-/**
- * @file Defines the permanent date picker behavior.
- */
-import { noop } from '../lib/fns';
-import BaseMode from './base-mode';
-export default function PermanentMode(root, emit, opts) {
-    var dp = BaseMode(root, emit, opts);
-    dp.close = noop;
-    dp.updateInput = noop;
-    dp.shouldFocusOnRender = opts.shouldFocusOnRender;
-    dp.computeSelectedDate = function () {
-        return opts.hilightedDate;
-    };
-    dp.attachToDom = function () {
-        root.appendChild(dp.el);
-    };
-    dp.open();
-    return dp;
-}

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

@@ -1,40 +0,0 @@
-/**
- * @file Manages the calendar / day-picker view.
- */
-declare const _default: {
-    onKeyDown: typeof keyDown;
-    onClick: {
-        'dp-day': typeof selectDay;
-        'dp-next': typeof gotoNextMonth;
-        'dp-prev': typeof gotoPrevMonth;
-        'dp-today': typeof selectToday;
-        'dp-clear': typeof clear;
-        'dp-close': typeof close;
-        'dp-cal-month': typeof showMonthPicker;
-        'dp-cal-year': typeof showYearPicker;
-    };
-    render: typeof render;
-};
-export default _default;
-/**
- * view renders the calendar (day picker) as an HTML string.
- *
- * @param {DatePickerContext} context the date picker being rendered
- * @returns {string}
- */
-declare function render(dp: any): string;
-/**
- * keyDown handles the key down event for the day-picker
- *
- * @param {Event} e
- * @param {DatePickerContext} dp
- */
-declare function keyDown(e: any, dp: any): void;
-declare function selectToday(e: any, dp: any): void;
-declare function clear(e: any, dp: any): void;
-declare function close(e: any, dp: any): void;
-declare function showMonthPicker(e: any, dp: any): void;
-declare function showYearPicker(e: any, dp: any): void;
-declare function gotoNextMonth(e: any, dp: any): void;
-declare function gotoPrevMonth(e: any, dp: any): void;
-declare function selectDay(e: any, dp: any): void;