jsl-ui 9.28.7 → 10.0.0

package/lib/interaction/moveable.d.ts

@@ -31,6 +31,7 @@ export declare class MoveableContainer {
     private startSize;
     constructor(container: HTMLElement, options: IMoveableOptions);
     private init;
+    destroy(): void;
     private mouseDownContainer;
     private mouseMove;
     private mouseUp;

package/lib/interaction/moveable.js

@@ -149,6 +149,14 @@ export class MoveableContainer {
         this.container.addEventListener("mousedown", this.mouseDownContainer, false);
         this.container.addEventListener("touchstart", this.mouseDownContainer, false);
     }
+    destroy() {
+        this.container.removeEventListener("mousedown", this.mouseDownContainer);
+        this.container.removeEventListener("touchstart", this.mouseDownContainer);
+        window.removeEventListener("mousemove", this.mouseMove);
+        window.removeEventListener("mouseup", this.mouseUp);
+        window.removeEventListener("touchmove", this.mouseMove);
+        window.removeEventListener("touchend", this.mouseUp);
+    }
     extractArg(evt, key) {
         return evt[key] != null ? evt[key] : (evt.touches.length > 0 ? evt.touches : evt.changedTouches)[0][key];
     }

package/lib/interaction/resizable.d.ts

@@ -29,6 +29,7 @@ export declare class ResizeContainer {
     private startSize;
     constructor(container: HTMLElement, options: IResizeOptions);
     private init;
+    destroy(): void;
     private mouseDownContainer;
     private mouseMove;
     private mouseUp;

package/lib/interaction/resizable.js

@@ -98,6 +98,15 @@ export class ResizeContainer {
         this.container.addEventListener("mousedown", this.mouseDownContainer, false);
         this.container.addEventListener("touchstart", this.mouseDownContainer, false);
     }
+    destroy() {
+        this.container.removeEventListener("mousedown", this.mouseDownContainer);
+        this.container.removeEventListener("touchstart", this.mouseDownContainer);
+        window.removeEventListener("mousemove", this.mouseMove);
+        window.removeEventListener("mouseup", this.mouseUp);
+        window.removeEventListener("touchmove", this.mouseMove);
+        window.removeEventListener("touchend", this.mouseUp);
+        this.container.classList.remove("resizable");
+    }
     extractArg(evt, key) {
         return evt[key] != null ? evt[key] : (evt.touches.length > 0 ? evt.touches : evt.changedTouches)[0][key];
     }

package/lib/ui/auto.suggest.css

@@ -1,14 +1,31 @@
-.autocomplete-suggestions {
-    text-align: left;
-    cursor: default;
-    border: 1px solid #ccc;
-    border-top: 0;
-    background: #fff;
-    box-shadow: -1px 1px 3px rgba(0,0,0,.1);
-
-    /* core styles should not be changed */
-    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
-}
-.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
-.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
-.autocomplete-suggestion.selected { background: #f0f0f0; }
+@import "./theme.css";
+
+.autocomplete-suggestions {
+    display: none;
+    position: absolute;
+    z-index: 2200;
+    max-height: min(16rem, calc(100dvh - 1rem));
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 4px;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .625rem;
+    background: var(--jsl-color-surface);
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .8125rem;
+    text-align: left;
+    box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
+}
+.autocomplete-suggestion {
+    position: relative;
+    padding: .5rem .625rem;
+    border-radius: .375rem;
+    line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+.autocomplete-suggestion b { color: inherit; font-weight: 600; }
+.autocomplete-suggestion.selected, .autocomplete-suggestion:hover { background: var(--jsl-color-surface-selected); }

package/lib/ui/auto.suggest.d.ts

@@ -1,5 +1,6 @@
 import "./auto.suggest.css";
 export interface IAutoSuggestOptions {
+    appendTo?: HTMLElement;
     selector?: HTMLElement | string;
     source: (val: string, suggest: (items: any[]) => void) => void;
     minChars?: number;

package/lib/ui/auto.suggest.js

@@ -1,4 +1,5 @@
 import "./auto.suggest.css";
+import { helper } from "../core/helper";
 let autoComplete = (function () {
     function autoComplete(options) {
         // helpers
@@ -32,10 +33,12 @@ let autoComplete = (function () {
             cache: false,
             menuClass: '',
             renderItem: function (item, search) {
+                var escape = value => String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
                 // 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>';
+                var highlighted = search ? String(item).split(re).map((part, index) => index % 2 ? '<b>' + escape(part) + '</b>' : escape(part)).join('') : escape(item);
+                return '<div class="autocomplete-suggestion" data-val="' + escape(item) + '">' + highlighted + '</div>';
             },
             onSelect: function (e, term, item) { }
         };
@@ -48,23 +51,49 @@ let autoComplete = (function () {
         let elems = typeof o.selector === 'object' ? [o.selector] : document.querySelectorAll(o.selector);
         for (let i = 0; i < elems.length; i++) {
             let that = elems[i];
+            that.destroyed = false;
             // create suggestions container "sc"
             that.sc = document.createElement('div');
             that.sc.className = 'autocomplete-suggestions ' + o.menuClass;
+            that.sc.id = helper.newDomGuid();
+            that.sc.setAttribute('role', 'listbox');
+            that.originalAria = {};
+            ['role', 'aria-autocomplete', 'aria-controls', 'aria-expanded', 'aria-activedescendant'].forEach(name => { that.originalAria[name] = that.getAttribute(name); });
+            that.setAttribute('role', 'combobox');
+            that.setAttribute('aria-autocomplete', 'list');
+            that.setAttribute('aria-controls', that.sc.id);
+            that.setAttribute('aria-expanded', 'false');
+            that.hideSuggestions = function () {
+                that.sc.style.display = 'none';
+                that.setAttribute('aria-expanded', 'false');
+                that.removeAttribute('aria-activedescendant');
+            };
+            that.syncAria = function () {
+                var selected = that.sc.querySelector('.autocomplete-suggestion.selected');
+                that.sc.querySelectorAll('.autocomplete-suggestion').forEach(item => item.setAttribute('aria-selected', String(item === selected)));
+                if (selected) {
+                    that.setAttribute('aria-activedescendant', selected.id);
+                }
+                else {
+                    that.removeAttribute('aria-activedescendant');
+                }
+            };
             that.autocompleteAttr = that.getAttribute('autocomplete');
             that.setAttribute('autocomplete', 'off');
             that.cache = {};
             that.last_val = '';
             that.updateSC = function (resize, next) {
+                if (that.destroyed) {
+                    return;
+                }
                 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
+                that.sc.style.left = '0px';
+                that.sc.style.top = '0px';
+                that.sc.style.width = Math.min(rect.width, window.innerWidth - 16) + 'px';
                 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);
-                    }
+                    that.setAttribute('aria-expanded', 'true');
+                    that.sc.maxHeight = that.sc.clientHeight;
                     if (!that.sc.suggestionHeight) {
                         that.sc.suggestionHeight = that.sc.querySelector('.autocomplete-suggestion').offsetHeight;
                     }
@@ -83,13 +112,23 @@ let autoComplete = (function () {
                         }
                     }
                 }
+                var origin = that.sc.getBoundingClientRect();
+                var left = Math.max(8, Math.min(rect.left + o.offsetLeft, window.innerWidth - that.sc.offsetWidth - 8));
+                var top = rect.bottom + o.offsetTop + 5;
+                if (top + that.sc.offsetHeight > window.innerHeight && rect.top > that.sc.offsetHeight + 5) {
+                    top = rect.top - that.sc.offsetHeight - 5;
+                }
+                that.sc.style.left = (left - origin.left) + 'px';
+                that.sc.style.top = (Math.max(8, top) - origin.top) + 'px';
+                that.syncAria();
             };
             addEvent(window, 'resize', that.updateSC);
-            document.body.appendChild(that.sc);
+            window.addEventListener('scroll', that.updateSC, true);
+            (o.appendTo || that.closest('.jsl-dialog') || document.body).appendChild(that.sc);
             live('autocomplete-suggestion', 'mouseleave', function (e) {
                 const sel = that.sc.querySelector('.autocomplete-suggestion.selected');
                 if (sel) {
-                    setTimeout(function () { sel.className = sel.className.replace('selected', ''); }, 20);
+                    setTimeout(function () { sel.className = sel.className.replace('selected', ''); that.syncAria(); }, 20);
                 }
             }, that.sc);
             live('autocomplete-suggestion', 'mouseover', function (e) {
@@ -98,14 +137,16 @@ let autoComplete = (function () {
                     sel.className = sel.className.replace('selected', '');
                 }
                 this.className += ' selected';
+                that.syncAria();
             }, that.sc);
             live('autocomplete-suggestion', 'mousedown', function (e) {
+                e.preventDefault();
                 // window.setTimeout(() => {
                 if (hasClass(this, 'autocomplete-suggestion')) { // else outside click
                     const v = this.getAttribute('data-val');
                     that.value = v;
                     o.onSelect(e, v, this);
-                    that.sc.style.display = 'none';
+                    that.hideSuggestions();
                 }
                 // }, 1000);
             }, that.sc);
@@ -114,16 +155,20 @@ let autoComplete = (function () {
                 //try { over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch (e) { over_sb = 0; }
                 //if (!over_sb) {
                 that.last_val = that.value;
-                that.sc.style.display = 'none';
+                that.hideSuggestions();
                 //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);
             that.inputHandler = function () {
-                options.onChange(that.value);
+                var _a;
+                (_a = o.onChange) === null || _a === void 0 ? void 0 : _a.call(o, that.value);
             };
             addEvent(that, 'input', that.inputHandler);
             var suggest = function (data) {
+                if (that.destroyed) {
+                    return;
+                }
                 var val = that.value;
                 that.cache[val] = data;
                 if (data.length && val.length >= o.minChars) {
@@ -132,16 +177,23 @@ let autoComplete = (function () {
                         s += o.renderItem(data[i], val);
                     }
                     that.sc.innerHTML = s;
+                    that.sc.querySelectorAll('.autocomplete-suggestion').forEach((item, index) => {
+                        item.id = that.sc.id + '-option-' + index;
+                        item.setAttribute('role', 'option');
+                        item.setAttribute('aria-selected', 'false');
+                    });
                     that.updateSC(0);
                 }
                 else {
-                    that.sc.style.display = 'none';
+                    that.hideSuggestions();
                 }
             };
             that.keydownHandler = function (e) {
                 var key = window.event ? e.keyCode : e.which;
                 // down (40), up (38)
                 if ((key === 40 || key === 38) && that.sc.innerHTML) {
+                    e.preventDefault();
+                    e.stopPropagation();
                     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
@@ -164,15 +216,21 @@ let autoComplete = (function () {
                     that.updateSC(0, next);
                     return false;
                 }
-                else if (key == 27) {
+                else if (key == 27 && that.sc.style.display !== 'none') {
+                    e.preventDefault();
+                    e.stopPropagation();
                     that.value = that.last_val;
-                    that.sc.style.display = 'none';
+                    that.hideSuggestions();
                 }
                 else if (key == 13 || key == 9) {
                     var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
                     if (sel && that.sc.style.display != 'none') {
+                        if (key == 13) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
                         o.onSelect(e, sel.getAttribute('data-val'), sel);
-                        setTimeout(function () { that.sc.style.display = 'none'; }, 20);
+                        setTimeout(function () { that.hideSuggestions(); }, 20);
                     }
                 }
             };
@@ -204,7 +262,7 @@ let autoComplete = (function () {
                     }
                     else {
                         that.last_val = val;
-                        that.sc.style.display = 'none';
+                        that.hideSuggestions();
                     }
                 }
             };
@@ -221,18 +279,30 @@ let autoComplete = (function () {
         this.destroy = function () {
             for (var i = 0; i < elems.length; i++) {
                 var that = elems[i];
+                that.destroyed = true;
+                clearTimeout(that.timer);
                 removeEvent(window, 'resize', that.updateSC);
+                window.removeEventListener('scroll', that.updateSC, true);
                 removeEvent(that, 'blur', that.blurHandler);
                 removeEvent(that, 'focus', that.focusHandler);
                 removeEvent(that, 'keydown', that.keydownHandler);
                 removeEvent(that, 'keyup', that.keyupHandler);
+                removeEvent(that, 'input', that.inputHandler);
+                Object.keys(that.originalAria).forEach(name => {
+                    if (that.originalAria[name] == null) {
+                        that.removeAttribute(name);
+                    }
+                    else {
+                        that.setAttribute(name, that.originalAria[name]);
+                    }
+                });
                 if (that.autocompleteAttr) {
                     that.setAttribute('autocomplete', that.autocompleteAttr);
                 }
                 else {
                     that.removeAttribute('autocomplete');
                 }
-                document.body.removeChild(that.sc);
+                that.sc.remove();
                 that = null;
             }
         };

package/lib/ui/base.css

@@ -1,3 +1,5 @@
+@import "./button.css";
+
 /* reset some browser inconsistencies */
 
 html
@@ -87,54 +89,6 @@ html {
 	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;
 }

package/lib/ui/button.css

@@ -0,0 +1,134 @@
+@import "./theme.css";
+
+/* Shared by ButtonComponent and vanilla buttons using .jsl-button.
+   Override --jsl-button-* variables on a container or individual button. */
+.jsl-button {
+    --jsl-button-height: 2rem;
+    --jsl-button-padding: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    position: relative;
+    box-sizing: border-box;
+    height: var(--jsl-button-height);
+    padding: 0 var(--jsl-button-padding);
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: var(--jsl-button-radius, 0.375rem);
+    background: var(--jsl-button-primary, var(--jsl-color-accent));
+    color: var(--jsl-button-on-primary, var(--jsl-color-on-accent));
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+    letter-spacing: normal;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.jsl-button:where(:hover) {
+    background: var(--jsl-button-primary-hover, var(--jsl-color-accent-hover));
+}
+
+.jsl-button:where(:active, .active, [aria-pressed="true"]) {
+    background: var(--jsl-button-primary-active, var(--jsl-color-accent-active));
+    box-shadow: inset 0 0 0 1px currentColor;
+}
+
+.jsl-button.jsl-button-outline {
+    border-color: var(--jsl-button-border, var(--jsl-color-border));
+    background: var(--jsl-button-surface, var(--jsl-color-surface));
+    color: var(--jsl-button-text, var(--jsl-color-text));
+}
+
+.jsl-button.jsl-button-ghost {
+    background: transparent;
+    color: var(--jsl-button-text, var(--jsl-color-text));
+}
+
+.jsl-button.jsl-button-outline:where(:hover),
+.jsl-button.jsl-button-ghost:where(:hover) {
+    background: var(--jsl-button-hover-surface, var(--jsl-color-surface-hover));
+    border-color: var(--jsl-button-border, var(--jsl-color-border));
+}
+
+.jsl-button.jsl-button-outline:where(:active, .active, [aria-pressed="true"]),
+.jsl-button.jsl-button-ghost:where(:active, .active, [aria-pressed="true"]) {
+    background: var(--jsl-button-selected-surface, var(--jsl-color-surface-selected));
+    border-color: var(--jsl-button-primary, var(--jsl-color-accent));
+    color: var(--jsl-button-selected-text, var(--jsl-color-text));
+    box-shadow: none;
+}
+
+.jsl-button:focus-visible {
+    outline: 2px solid var(--jsl-button-focus, var(--jsl-color-focus));
+    outline-offset: 3px;
+}
+
+.jsl-button.jsl-button-small {
+    --jsl-button-height: 1.75rem;
+    --jsl-button-padding: 0.625rem;
+    gap: 0.375rem;
+    font-size: 0.8125rem;
+}
+
+.jsl-button.jsl-button-large {
+    --jsl-button-height: 2.5rem;
+    --jsl-button-padding: 1rem;
+    font-size: 0.9375rem;
+}
+
+.jsl-button.jsl-button-icon-only {
+    width: var(--jsl-button-height);
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.jsl-button-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 1.125em;
+    height: 1.125em;
+    line-height: 1;
+    pointer-events: none;
+}
+
+.jsl-button-icon > img,
+.jsl-button-icon > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.jsl-button-label-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
+.jsl-button:disabled,
+.jsl-button.disabled {
+    background: var(--jsl-button-disabled-surface, var(--jsl-color-disabled-surface));
+    border-color: var(--jsl-button-disabled-border, var(--jsl-color-border-subtle));
+    color: var(--jsl-button-disabled-text, var(--jsl-color-disabled-text));
+    box-shadow: none;
+    cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .jsl-button { transition: none; }
+}
+

package/lib/ui/date-input.css

@@ -0,0 +1,11 @@
+@import "./input.css";
+
+.jsl-date-input { width: 11rem; font-variant-numeric: tabular-nums; }
+.date-comp {
+    padding-right: 2.4rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='13' height='12' rx='2'/%3E%3Cpath d='M6 2v4M12 2v4M3 8h12'/%3E%3C/svg%3E");
+    background-position: right .7rem center;
+    background-repeat: no-repeat;
+}
+.jsl-date-input:disabled { opacity: .75; }
+.jsl-date-input[aria-invalid="true"] { border-style: dashed; border-width: 2px; }