jsl-ui 9.18.3 → 9.19.0

package/lib/ui/auto.suggest.js

@@ -0,0 +1,258 @@
+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 "./auto.suggest.css";
+var autoComplete = (function () {
+    function autoComplete(options) {
+        // helpers
+        function hasClass(el, className) { return el.classList.contains(className); }
+        function addEvent(el, type, handler) {
+            el.addEventListener(type, handler);
+        }
+        function removeEvent(el, type, handler) {
+            // if (el.removeEventListener) not working in IE11
+            el.removeEventListener(type, handler);
+        }
+        function live(elClass, event, cb, context) {
+            addEvent(context || document, event, function (e) {
+                var found;
+                var el = e.target || e.srcElement;
+                while (el && !(found = hasClass(el, elClass))) {
+                    el = el.parentElement;
+                }
+                if (found) {
+                    cb.call(el, e);
+                }
+            });
+        }
+        var o = {
+            selector: "",
+            source: function (val, s) { return []; },
+            minChars: 0,
+            delay: 150,
+            offsetLeft: 0,
+            offsetTop: 1,
+            cache: false,
+            menuClass: '',
+            renderItem: function (item, search) {
+                // escape special characters
+                search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+                var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
+                return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
+            },
+            onSelect: function (e, term, item) { }
+        };
+        for (var k in options) {
+            if (options.hasOwnProperty(k)) {
+                o[k] = options[k];
+            }
+        }
+        // init
+        var elems = typeof o.selector === 'object' ? [o.selector] : document.querySelectorAll(o.selector);
+        var _loop_1 = function (i) {
+            var that = elems[i];
+            // create suggestions container "sc"
+            that.sc = document.createElement('div');
+            that.sc.className = 'autocomplete-suggestions ' + o.menuClass;
+            that.autocompleteAttr = that.getAttribute('autocomplete');
+            that.setAttribute('autocomplete', 'off');
+            that.cache = {};
+            that.last_val = '';
+            that.updateSC = function (resize, next) {
+                var rect = that.getBoundingClientRect();
+                that.sc.style.left = Math.round(rect.left + (window.pageXOffset || document.documentElement.scrollLeft) + o.offsetLeft) + 'px';
+                that.sc.style.top = Math.round(rect.bottom + (window.pageYOffset || document.documentElement.scrollTop) + o.offsetTop) + 'px';
+                that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
+                if (!resize) {
+                    that.sc.style.display = 'block';
+                    if (!that.sc.maxHeight) {
+                        that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight, 10);
+                    }
+                    if (!that.sc.suggestionHeight) {
+                        that.sc.suggestionHeight = that.sc.querySelector('.autocomplete-suggestion').offsetHeight;
+                    }
+                    if (that.sc.suggestionHeight) {
+                        if (!next) {
+                            that.sc.scrollTop = 0;
+                        }
+                        else {
+                            var scrTop = that.sc.scrollTop, selTop = next.getBoundingClientRect().top - that.sc.getBoundingClientRect().top;
+                            if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0) {
+                                that.sc.scrollTop = selTop + that.sc.suggestionHeight + scrTop - that.sc.maxHeight;
+                            }
+                            else if (selTop < 0) {
+                                that.sc.scrollTop = selTop + scrTop;
+                            }
+                        }
+                    }
+                }
+            };
+            addEvent(window, 'resize', that.updateSC);
+            document.body.appendChild(that.sc);
+            live('autocomplete-suggestion', 'mouseleave', function (e) {
+                var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
+                if (sel) {
+                    setTimeout(function () { sel.className = sel.className.replace('selected', ''); }, 20);
+                }
+            }, that.sc);
+            live('autocomplete-suggestion', 'mouseover', function (e) {
+                var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
+                if (sel) {
+                    sel.className = sel.className.replace('selected', '');
+                }
+                this.className += ' selected';
+            }, that.sc);
+            live('autocomplete-suggestion', 'mousedown', function (e) {
+                // window.setTimeout(() => {
+                if (hasClass(this, 'autocomplete-suggestion')) { // else outside click
+                    var v = this.getAttribute('data-val');
+                    that.value = v;
+                    o.onSelect(e, v, this);
+                    that.sc.style.display = 'none';
+                }
+                // }, 1000);
+            }, that.sc);
+            that.blurHandler = function () {
+                //var over_sb;
+                //try { over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch (e) { over_sb = 0; }
+                //if (!over_sb) {
+                if (that.last_val !== that.value) {
+                    options.onChange(that.value);
+                }
+                that.last_val = that.value;
+                that.sc.style.display = 'none';
+                //setTimeout(function() { that.sc.style.display = 'none'; }, 350); // hide suggestions on fast input
+                //} else if (that !== document.activeElement) { setTimeout(function() { that.focus(); }, 200); }
+            };
+            addEvent(that, 'blur', that.blurHandler);
+            suggest = function (data) {
+                var val = that.value;
+                that.cache[val] = data;
+                if (data.length && val.length >= o.minChars) {
+                    var s = '';
+                    for (var i = 0; i < data.length; i++) {
+                        s += o.renderItem(data[i], val);
+                    }
+                    that.sc.innerHTML = s;
+                    that.updateSC(0);
+                }
+                else {
+                    that.sc.style.display = 'none';
+                }
+            };
+            that.keydownHandler = function (e) {
+                var key = window.event ? e.keyCode : e.which;
+                // down (40), up (38)
+                if ((key === 40 || key === 38) && that.sc.innerHTML) {
+                    var next, sel = that.sc.querySelector('.autocomplete-suggestion.selected');
+                    if (!sel) {
+                        next = (key == 40) ? that.sc.querySelector('.autocomplete-suggestion') : that.sc.childNodes[that.sc.childNodes.length - 1]; // first : last
+                        next.className += ' selected';
+                        that.value = next.getAttribute('data-val');
+                    }
+                    else {
+                        next = (key == 40) ? sel.nextSibling : sel.previousSibling;
+                        if (next) {
+                            sel.className = sel.className.replace('selected', '');
+                            next.className += ' selected';
+                            that.value = next.getAttribute('data-val');
+                        }
+                        else {
+                            sel.className = sel.className.replace('selected', '');
+                            that.value = that.last_val;
+                            next = 0;
+                        }
+                    }
+                    that.updateSC(0, next);
+                    return false;
+                }
+                else if (key == 27) {
+                    that.value = that.last_val;
+                    that.sc.style.display = 'none';
+                }
+                else if (key == 13 || key == 9) {
+                    var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
+                    if (sel && that.sc.style.display != 'none') {
+                        o.onSelect(e, sel.getAttribute('data-val'), sel);
+                        setTimeout(function () { that.sc.style.display = 'none'; }, 20);
+                    }
+                }
+            };
+            addEvent(that, 'keydown', that.keydownHandler);
+            that.keyupHandler = function (e) {
+                var key = window.event ? e.keyCode : e.which;
+                if (!key || (key < 35 || key > 40) && key != 13 && key != 27) {
+                    var val = that.value;
+                    if (val.length >= o.minChars) {
+                        if (val != that.last_val) {
+                            that.last_val = val;
+                            clearTimeout(that.timer);
+                            if (o.cache) {
+                                if (val in that.cache) {
+                                    suggest(that.cache[val]);
+                                    return;
+                                }
+                                // no requests if previous suggestions were empty
+                                for (var i = 1; i < val.length - o.minChars; i++) {
+                                    var part = val.slice(0, val.length - i);
+                                    if (part in that.cache && !that.cache[part].length) {
+                                        suggest([]);
+                                        return;
+                                    }
+                                }
+                            }
+                            that.timer = setTimeout(function () { o.source(val, suggest); }, o.delay);
+                        }
+                    }
+                    else {
+                        that.last_val = val;
+                        that.sc.style.display = 'none';
+                    }
+                }
+            };
+            addEvent(that, 'keyup', that.keyupHandler);
+            that.focusHandler = function (e) {
+                that.last_val = '\n';
+                that.keyupHandler(e);
+            };
+            if (!o.minChars) {
+                addEvent(that, 'focus', that.focusHandler);
+            }
+        };
+        var suggest;
+        for (var i = 0; i < elems.length; i++) {
+            _loop_1(i);
+        }
+        // public destroy method
+        this.destroy = function () {
+            for (var i = 0; i < elems.length; i++) {
+                var that = elems[i];
+                removeEvent(window, 'resize', that.updateSC);
+                removeEvent(that, 'blur', that.blurHandler);
+                removeEvent(that, 'focus', that.focusHandler);
+                removeEvent(that, 'keydown', that.keydownHandler);
+                removeEvent(that, 'keyup', that.keyupHandler);
+                if (that.autocompleteAttr) {
+                    that.setAttribute('autocomplete', that.autocompleteAttr);
+                }
+                else {
+                    that.removeAttribute('autocomplete');
+                }
+                document.body.removeChild(that.sc);
+                that = null;
+            }
+        };
+    }
+    return autoComplete;
+})();
+export function AutoSuggest(input, opts) {
+    return new autoComplete(__assign({ selector: input }, opts));
+}

package/lib/ui/base.css

@@ -0,0 +1,150 @@
+/* reset some browser inconsistencies */
+
+html
+{
+	/* line-height:1.15; */
+	-ms-text-size-adjust:100%;
+	-webkit-text-size-adjust:100%
+}
+
+hr
+{
+	box-sizing:content-box;
+	height:0;
+	overflow:visible
+}
+
+pre,code
+{
+	font-family:monospace,monospace;
+	font-size:1em
+}
+
+a
+{
+	-webkit-text-decoration-skip:objects
+}
+
+sub,sup
+{
+	font-size:75%;
+	line-height:0;
+	position:relative;
+	vertical-align:baseline
+}
+
+sub
+{
+	bottom:-.25em
+}
+
+sup
+{
+	top:-.5em
+}
+
+input,optgroup,select,textarea
+{
+	font-size:100%;
+	line-height:1.15;
+	margin:0;
+	text-transform:none;
+}
+
+button,input
+{
+	overflow:visible
+}
+
+button,html [type="button"],
+[type="reset"],[type="submit"]
+{
+	-webkit-appearance:button
+}
+
+button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner
+{
+	border-style:none;
+	padding:0
+}
+
+button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring
+{
+	outline:1px dotted ButtonText
+}
+
+textarea
+{
+	overflow:auto
+}
+
+/* 
+html {
+    color: #393939;
+} */
+
+/* html,input,textarea,button,optgroup,select {
+	font-family: Tahoma;
+} */
+
+.jsl-button {
+	background-color: #3B99FF;
+	border: 1px solid #3B99FF;
+	vertical-align:middle;
+	color: white;
+	
+    border-radius: .3rem;
+    /* color: white; */
+    cursor: pointer;
+    display: inline-block;
+    /* font-weight: 700; */
+	height: 2rem;
+	box-sizing: border-box;
+    letter-spacing: .1rem;
+    line-height: 2rem;
+    padding: 0rem 1.0rem;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.jsl-button.jsl-button-outline {
+	background: white;
+	color: #444444;
+}
+
+.jsl-button:active {
+	background-color: #3B99FF;
+	border-color:black;
+}
+
+.jsl-button:hover {
+	background-color: rgba(59, 154, 255, 0.5);
+	border-color: #C0C0C0;
+	color: black;
+    outline: 0;
+}
+
+.jsl-button:focus {
+	outline: 0;
+	border-color: gray;
+}
+
+.jsl-button[disabled] {
+    cursor: default;
+    opacity: .5;
+}
+
+.right {
+	text-align: right;
+}
+
+.center {
+	text-align: center;
+}
+
+div.jsl-fill {
+	height: 100%;
+	box-sizing: border-box;
+	position: relative;
+}

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

@@ -0,0 +1,87 @@
+.dr-cals {
+  display: flex;
+  justify-content: space-between;
+  background: white;
+  box-shadow: 8px 8px 32px -16px rgba(0, 0, 0, 0.5);
+  padding-top: 6px;
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.dr-cals:before {
+  content: ' ';
+  height: 6px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #3B99FF;
+  background: linear-gradient(-90deg, #3B99FF 0%, #8AEFC8 100%);
+}
+
+.dr-cals .dp-edge-day {
+  visibility: hidden;
+}
+
+.dr-cals .dp-cal-footer {
+  display: none;
+}
+
+.dr-cals .dp {
+  border: 0;
+}
+
+.dr-cals .dp-permanent {
+  max-width: 300px;
+}
+
+.dr-cals .dp-selected:focus,
+.dr-cals .dp-selected,
+.dr-cals .dp-current:focus,
+.dr-cals .dp-current {
+  background: transparent;
+  color: inherit;
+  border-radius: 0;
+}
+
+.dr-cals .dp-day-disabled,
+.dr-cals .dp-day-disabled:focus {
+  color: #DDD;
+}
+
+.dr-cal-end .dp {
+  border-left: 8px solid #F5F5F5;
+}
+
+.dr-cal-start .dp-next,
+.dr-cal-end .dp-prev {
+  visibility: hidden;
+}
+
+.dr-cals .dp-current:hover,
+.dr-cals .dr-in-range:hover,
+.dr-cals .dr-in-range:focus,
+.dr-cals .dr-in-range {
+  background: #75BCFC;
+  color: white;
+  border-radius: 0;
+}
+
+.dr-cals .dr-selected:hover,
+.dr-cals .dr-selected:focus,
+.dr-cals .dr-selected {
+  background: #3B99FF;
+  color: white;
+  border-radius: 0;
+}
+
+@media (max-width: 616px), (max-height: 480px) {
+  .dr-cal-end {
+    display: none;
+  }
+
+  .dr-cal-start .dp-next {
+    visibility: visible;
+  }
+}