jsl-ui 9.18.3 → 9.18.4

package/lib/ui/date.picker/css/tiny-date-picker.css

@@ -0,0 +1,326 @@
+.dp-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.75);
+}
+
+.dp {
+  position: relative;
+  background: #FFF;
+  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
+  line-height: 1.4;
+  border-radius: 0.5rem;
+  max-height: 400px;
+  z-index: 2010;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+}
+
+
+/* .dp:before {
+  content: ' ';
+  height: 6px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #3B99FC;
+  background: linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%); 
+} */
+
+.dp-permanent .dp {
+  padding-top: 0;
+  border: 1px solid #EEE;
+  box-shadow: none;
+}
+
+.dp-permanent .dp:before {
+  display: none;
+}
+
+/* .dp-cal {
+  min-height: 300px;
+} */
+
+.dp-below {
+  position: absolute;
+  width: 20rem;
+  max-width: 100vw;
+}
+
+.dp-permanent {
+  position: relative;
+  width: 20rem;
+  max-width: 100vw;
+  z-index: 2010;
+}
+
+.dp-permanent .dp{
+  z-index: 0;
+}
+
+.dp-modal .dp {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 600px;
+  width: calc(100% - 4em);
+  transform: translate(-50%, -50%);
+  animation: slide-up 0.3s forwards;
+}
+
+.dp-months {
+  padding: 24px;
+}
+
+.dp-years {
+  box-sizing: border-box;
+  max-height: 400px;
+  padding: 8px 0;
+  overflow: auto !important; /* HACK for Chrome on Android */
+}
+
+.dp-cal-month,
+.dp-cal-year,
+.dp-day,
+.dp-month,
+.dp-year {
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  position: relative;
+  color: #3B404D;
+  border-radius: 2px;
+  border: 0;
+  background: transparent;
+  top: 0.2rem;
+}
+
+.dp-cal-header {
+  position: relative;
+  text-align: center;
+  padding-bottom: 0.4rem;
+  background: #f0f0f0;
+}
+
+.dp-next,
+.dp-prev {
+  position: absolute;
+  width: 1.8rem;
+  height: 1.8rem;
+  overflow: hidden;
+  top: 0.3rem;
+  color: #777;
+  border-radius: 2px;
+  border: 0;
+  background: transparent;
+}
+
+.dp-next:focus,
+.dp-prev:focus,
+.dp-next:hover,
+.dp-prev:hover {
+  outline: none;
+  color: inherit;
+}
+
+.dp-prev {
+  left: 24px;
+}
+
+.dp-next {
+  right: 24px;
+}
+
+.dp-prev:before,
+.dp-next:before {
+  content: '';
+  border: 2px solid;
+  width: 0.7rem;
+  height: 0.7rem;
+  display: inline-block;
+  transform: rotate(-45deg);
+  transition: border-color 0.2s;
+  margin: 0.5rem 0 3rem 0.3rem
+}
+
+.dp-prev:before {
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.dp-next:before {
+  border-left: 0;
+  border-top: 0;
+  margin-left: 0;
+  margin-right: 4px;
+}
+
+.dp-cal-month,
+.dp-cal-year {
+  display: inline-block;
+  font-size: 1.1rem;
+  padding: 0.4rem 0.3rem 0.3rem;
+  outline: none;
+}
+
+.dp-cal-footer {
+  text-align: center;
+  background: #f5f5f5;
+}
+
+.dp-day-today:after {
+  content: '';
+  height: 0;
+  width: 0;
+  border: 7px solid #227BD7;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.dp-close,
+.dp-clear,
+.dp-today {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 33%;
+  padding: 8px;
+  text-decoration: none;
+  color: inherit;
+  border: 0;
+  background: transparent;
+}
+
+.dp-permanent .dp-close,
+.dp-permanent .dp-clear {
+  display: none;
+}
+
+.dp-close:active,
+.dp-clear:active,
+.dp-today:active,
+.dp-next:active,
+.dp-prev:active,
+.dp-cal-month:active,
+.dp-cal-year:active {
+  background: #75BCFC;
+  color: white;
+}
+
+@media screen and (min-device-width: 1200px) {
+  .dp-close:hover,
+  .dp-close:focus,
+  .dp-clear:hover,
+  .dp-clear:focus,
+  .dp-today:hover,
+  .dp-today:focus,
+  .dp-next:hover,
+  .dp-next:focus,
+  .dp-prev:hover,
+  .dp-prev:focus,
+  .dp-cal-month:focus,
+  .dp-cal-month:hover,
+  .dp-cal-year:hover,
+  .dp-cal-year:focus {
+    background: #75BCFC;
+    color: white;
+  }
+}
+
+.dp-col-header,
+.dp-day {
+  width: 14.28571429%;
+  display: inline-block;
+  padding: 8px;
+  text-align: center;
+}
+
+.dp-col-header {
+  color: #AAA;
+  text-transform: uppercase;
+  font-weight: 300;
+  font-size: 0.8rem;
+  padding: 8px 0;
+}
+
+.dp-month {
+  width: 33%;
+  display: inline-block;
+  padding: 8px;
+}
+
+.dp-year {
+  display: block;
+  padding: 8px 40px;
+  width: 100%;
+}
+
+.dp-edge-day {
+  color: #AAA;
+}
+
+.dp-day:hover,
+.dp-month:hover,
+.dp-year:hover,
+.dp-current:focus,
+.dp-current,
+.dp-day:focus,
+.dp-month:focus,
+.dp-year:focus {
+  outline: none;
+  background: #75BCFC;
+  color: white;
+}
+
+.dp-selected:hover,
+.dp-selected:focus,
+.dp-selected {
+  background: #3B99FC;
+  color: #FFF;
+}
+
+.dp-day-disabled {
+  background: transparent;
+  color: #DDD;
+}
+
+.dp-day-disabled:focus,
+.dp-day-disabled:hover {
+  background: #DDD;
+}
+
+.dp-focuser {
+  position: absolute;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+}
+
+/* Responsive overrides */
+@media (max-width: 480px), (max-height: 480px) {
+  .dp-modal .dp {
+    /* font-size: 0.9em; */
+    width: auto;
+    width: 100%;
+  }
+
+  .dp-day-of-week,
+  .dp-day {
+    padding: 0.3rem;
+  }
+}
+
+@keyframes slide-up {
+  0% {
+    transform: translate(-50%, 100%);
+  }
+  100% {
+    transform: translate(-50%, -50%);
+  }
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @file Responsible for sanitizing and creating date picker options.
+ */
+/**
+ * DatePickerOptions constructs a new date picker options object, overriding
+ * default values with any values specified in opts.
+ *
+ * @param {DatePickerOptions} opts
+ * @returns {DatePickerOptions}
+ */
+export default function DatePickerOptions(opts: any): any;

package/lib/ui/date.picker/date-picker-options.js

@@ -0,0 +1,76 @@
+/**
+ * @file Responsible for sanitizing and creating date picker options.
+ */
+import { now, shiftYear, dateOrParse } from './lib/date-manip';
+import { cp } from './lib/fns';
+import { date } from './../../core/date';
+var english = {
+    days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    months: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    today: 'Today',
+    clear: 'Clear',
+    close: 'Close',
+};
+/**
+ * DatePickerOptions constructs a new date picker options object, overriding
+ * default values with any values specified in opts.
+ *
+ * @param {DatePickerOptions} opts
+ * @returns {DatePickerOptions}
+ */
+export default function DatePickerOptions(opts) {
+    opts = opts || {};
+    opts = cp(defaults(), opts);
+    var parse = dateOrParse(opts.parse);
+    opts.lang = cp(english, opts.lang);
+    opts.parse = parse;
+    opts.inRange = makeInRangeFn(opts);
+    opts.min = parse(opts.min || shiftYear(now(), -100));
+    opts.max = parse(opts.max || shiftYear(now(), 100));
+    opts.hilightedDate = opts.parse(opts.hilightedDate);
+    return opts;
+}
+function defaults() {
+    return {
+        lang: english,
+        // Possible values: dp-modal, dp-below, dp-permanent
+        mode: 'dp-below',
+        // The date to hilight initially if the date picker has no
+        // initial value.
+        hilightedDate: now(),
+        format: function (dt) {
+            return date.format(dt);
+            //return (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear();
+        },
+        parse: function (str) {
+            //var date = new Date(str);
+            var d = date.parse(str);
+            return !d ? now() : d;
+        },
+        dateClass: function () { },
+        inRange: function () {
+            return true;
+        },
+        appendTo: document.body,
+        dayOffset: 1
+    };
+}
+function makeInRangeFn(opts) {
+    var inRange = opts.inRange; // Cache this version, and return a variant
+    return function (dt, dp) {
+        return inRange(dt, dp) && opts.min <= dt && opts.max >= dt;
+    };
+}

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

@@ -0,0 +1,74 @@
+/**
+ * @file A generic set of mutation-free date functions.
+ */
+/**
+ * now returns the current date without any time values
+ *
+ * @returns {Date}
+ */
+export declare function now(): Date;
+/**
+ * dateEq compares two dates
+ *
+ * @param {Date} date1 the first date
+ * @param {Date} date2 the second date
+ * @returns {boolean}
+ */
+export declare function datesEq(date1: any, date2: any): boolean;
+/**
+ * shiftDay shifts the specified date by n days
+ *
+ * @param {Date} dt
+ * @param {number} n
+ * @returns {Date}
+ */
+export declare function shiftDay(dt: any, n: any): any;
+/**
+ * shiftMonth shifts the specified date by a specified number of months
+ *
+ * @param {Date} dt
+ * @param {number} n
+ * @param {boolean} wrap optional, if true, does not change year
+ *                       value, defaults to false
+ * @returns {Date}
+ */
+export declare function shiftMonth(dt: any, n: any, wrap?: boolean): any;
+/**
+ * shiftYear shifts the specified date by n years
+ *
+ * @param {Date} dt
+ * @param {number} n
+ * @returns {Date}
+ */
+export declare function shiftYear(dt: any, n: any): any;
+/**
+ * setYear changes the specified date to the specified year
+ *
+ * @param {Date} dt
+ * @param {number} year
+ */
+export declare function setYear(dt: any, year: any): any;
+/**
+ * setMonth changes the specified date to the specified month
+ *
+ * @param {Date} dt
+ * @param {number} month
+ */
+export declare function setMonth(dt: any, month: any): any;
+/**
+ * dateOrParse creates a function which, given a date or string, returns a date
+ *
+ * @param {function} parse the function used to parse strings
+ * @returns {function}
+ */
+export declare function dateOrParse(parse: any): (dt: any) => any;
+/**
+ * constrainDate returns dt or min/max depending on whether dt is out of bounds (inclusive)
+ *
+ * @export
+ * @param {Date} dt
+ * @param {Date} min
+ * @param {Date} max
+ * @returns {Date}
+ */
+export declare function constrainDate(dt: any, min: any, max: any): any;

package/lib/ui/date.picker/lib/date-manip.js

@@ -0,0 +1,120 @@
+/**
+ * @file A generic set of mutation-free date functions.
+ */
+/**
+ * now returns the current date without any time values
+ *
+ * @returns {Date}
+ */
+export function now() {
+    var dt = new Date();
+    dt.setHours(0, 0, 0, 0);
+    return dt;
+}
+/**
+ * dateEq compares two dates
+ *
+ * @param {Date} date1 the first date
+ * @param {Date} date2 the second date
+ * @returns {boolean}
+ */
+export function datesEq(date1, date2) {
+    return (date1 && date1.toDateString()) === (date2 && date2.toDateString());
+}
+/**
+ * shiftDay shifts the specified date by n days
+ *
+ * @param {Date} dt
+ * @param {number} n
+ * @returns {Date}
+ */
+export function shiftDay(dt, n) {
+    dt = new Date(dt);
+    dt.setDate(dt.getDate() + n);
+    return dt;
+}
+/**
+ * shiftMonth shifts the specified date by a specified number of months
+ *
+ * @param {Date} dt
+ * @param {number} n
+ * @param {boolean} wrap optional, if true, does not change year
+ *                       value, defaults to false
+ * @returns {Date}
+ */
+export function shiftMonth(dt, n, wrap) {
+    dt = new Date(dt);
+    var dayOfMonth = dt.getDate();
+    var month = dt.getMonth() + n;
+    dt.setDate(1);
+    dt.setMonth(wrap ? (12 + month) % 12 : month);
+    dt.setDate(dayOfMonth);
+    // If dayOfMonth = 31, but the target month only has 30 or 29 or whatever...
+    // head back to the max of the target month
+    if (dt.getDate() < dayOfMonth) {
+        dt.setDate(0);
+    }
+    return dt;
+}
+/**
+ * shiftYear shifts the specified date by n years
+ *
+ * @param {Date} dt
+ * @param {number} n
+ * @returns {Date}
+ */
+export function shiftYear(dt, n) {
+    dt = new Date(dt);
+    dt.setFullYear(dt.getFullYear() + n);
+    return dt;
+}
+/**
+ * setYear changes the specified date to the specified year
+ *
+ * @param {Date} dt
+ * @param {number} year
+ */
+export function setYear(dt, year) {
+    dt = new Date(dt);
+    dt.setFullYear(year);
+    return dt;
+}
+/**
+ * setMonth changes the specified date to the specified month
+ *
+ * @param {Date} dt
+ * @param {number} month
+ */
+export function setMonth(dt, month) {
+    return shiftMonth(dt, month - dt.getMonth());
+}
+/**
+ * dateOrParse creates a function which, given a date or string, returns a date
+ *
+ * @param {function} parse the function used to parse strings
+ * @returns {function}
+ */
+export function dateOrParse(parse) {
+    return function (dt) {
+        return dropTime(typeof dt === 'string' ? parse(dt) : dt);
+    };
+}
+/**
+ * constrainDate returns dt or min/max depending on whether dt is out of bounds (inclusive)
+ *
+ * @export
+ * @param {Date} dt
+ * @param {Date} min
+ * @param {Date} max
+ * @returns {Date}
+ */
+export function constrainDate(dt, min, max) {
+    return (dt < min) ? min :
+        (dt > max) ? max :
+            dt;
+}
+function dropTime(dt) {
+    dt = new Date(dt);
+    dt.setHours(0, 0, 0, 0);
+    return dt;
+}

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

@@ -0,0 +1,23 @@
+import "../../../core/polyfills";
+/**
+ * @file Helper functions for dealing with dom elements.
+ */
+export declare var Key: {
+    left: number;
+    up: number;
+    right: number;
+    down: number;
+    enter: number;
+    esc: number;
+};
+/**
+ * on attaches an event handler to the specified element, and returns an
+ * off function which can be used to remove the handler.
+ *
+ * @param {string} evt the name of the event to handle
+ * @param {HTMLElement} el the element to attach to
+ * @param {function} handler the event handler
+ * @returns {function} the off function
+ */
+export declare function on(evt: any, el: any, handler: any): () => void;
+export declare var CustomEvent: any;

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

@@ -0,0 +1,28 @@
+import "../../../core/polyfills";
+/**
+ * @file Helper functions for dealing with dom elements.
+ */
+export var Key = {
+    left: 37,
+    up: 38,
+    right: 39,
+    down: 40,
+    enter: 13,
+    esc: 27,
+};
+/**
+ * on attaches an event handler to the specified element, and returns an
+ * off function which can be used to remove the handler.
+ *
+ * @param {string} evt the name of the event to handle
+ * @param {HTMLElement} el the element to attach to
+ * @param {function} handler the event handler
+ * @returns {function} the off function
+ */
+export function on(evt, el, handler) {
+    el.addEventListener(evt, handler, true);
+    return function () {
+        el.removeEventListener(evt, handler, true);
+    };
+}
+export var CustomEvent = window.CustomEvent;

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

@@ -0,0 +1,13 @@
+/**
+ * @file Defines simple event emitter behavior.
+ */
+/**
+ * Emitter constructs a new emitter object which has on/off methods.
+ *
+ * @returns {EventEmitter}
+ */
+export default function Emitter(): {
+    on: (name: any, handler: any) => any;
+    emit: (name: any, arg: any) => void;
+    off: (name: any, handler: any) => any;
+};

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

@@ -0,0 +1,49 @@
+/**
+ * @file Defines simple event emitter behavior.
+ */
+/**
+ * Emitter constructs a new emitter object which has on/off methods.
+ *
+ * @returns {EventEmitter}
+ */
+export default function Emitter() {
+    var handlers = {};
+    function onOne(name, handler) {
+        (handlers[name] = (handlers[name] || [])).push(handler);
+    }
+    function onMany(fns) {
+        for (var name in fns) {
+            onOne(name, fns[name]);
+        }
+    }
+    return {
+        on: function (name, handler) {
+            if (handler) {
+                onOne(name, handler);
+            }
+            else {
+                onMany(name);
+            }
+            return this;
+        },
+        emit: function (name, arg) {
+            (handlers[name] || []).forEach(function (handler) {
+                handler(name, arg);
+            });
+        },
+        off: function (name, handler) {
+            if (!name) {
+                handlers = {};
+            }
+            else if (!handler) {
+                handlers[name] = [];
+            }
+            else {
+                handlers[name] = (handlers[name] || []).filter(function (h) {
+                    return h !== handler;
+                });
+            }
+            return this;
+        }
+    };
+}