jsl-ui 9.29.0 → 10.0.0

package/lib/components/time/TimeComponent.d.ts

@@ -7,6 +7,7 @@ export interface ITimeComponentOptions<T> {
     class?: string;
     style?: string;
     placeholder?: string;
+    ariaLabel?: string;
     value?: Date;
     onChange?: EventHandler<Date> | ((v?: Date) => void);
     bindTo?: T;
@@ -19,11 +20,15 @@ export interface ITimeComponentOptions<T> {
 export declare class TimeComponent<T = any> implements IJSLComponent {
     private options;
     private currentDom;
+    private modelValue;
     constructor(options: ITimeComponentOptions<T>);
     render(): IJSLVNode;
     onCreate(node: IJSLVNode): void;
     onUpdate(node: IJSLVNode): void;
     getValue(): string;
     getValueAsDate(datePart: Date): Date;
+    /** Updates the input without raising onChange. */
+    setValue(value: Date): void;
+    private readModel;
     private raiseChangeEvent;
 }

package/lib/components/time/TimeComponent.js

@@ -6,97 +6,89 @@ export class TimeComponent {
     constructor(options) {
         var _a;
         this.options = {
-            ...{
-                enabled: true,
-                id: helper.newDomGuid(),
-                inputMode: "HourMinute",
-                bindMode: "toModel",
-                placeholder: (options === null || options === void 0 ? void 0 : options.inputMode) === "HourMinuteSecond" ? "__:__:__" : "__:__"
-            }, ...options
+            enabled: true, id: helper.newDomGuid(), inputMode: "HourMinute", bindMode: "toModel",
+            placeholder: (options === null || options === void 0 ? void 0 : options.inputMode) === "HourMinuteSecond" ? "HH:MM:SS" : "HH:MM",
+            ...options
         };
-        if (this.options.bindTo != null && this.options.bindMode !== "fromModel" && this.options.property != null && this.options.value == null) {
-            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
+        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
+            this.options.value = this.readModel();
         }
+        this.modelValue = (_a = this.options.value) === null || _a === void 0 ? void 0 : _a.getTime();
         this.options.onChange = EventHandler.Create(this.options.onChange);
     }
     render() {
-        var _a, _b;
-        let val = this.options.value;
+        var _a;
         if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            const current = this.getValue();
-            const newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
-                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-                this.options.bindTo[this.options.property]);
-            const newValStr = date.formatTime(newVal, this.options.inputMode);
-            val = newVal;
-            if (newValStr !== current) {
-                if (this.currentDom != null) {
-                    this.currentDom.value = newValStr;
-                }
+            const value = this.readModel();
+            if ((value === null || value === void 0 ? void 0 : value.getTime()) !== this.modelValue) {
+                this.setValue(value);
+                this.modelValue = value === null || value === void 0 ? void 0 : value.getTime();
             }
         }
         return {
             tag: "input", attr: {
-                id: this.options.id,
-                enabled: this.options.enabled,
-                value: date.formatTime(val, this.options.inputMode),
-                class: "time-comp " + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
-                style: this.options.style,
-                placeholder: this.options.placeholder,
+                id: this.options.id, type: "text", inputmode: "numeric", autocomplete: "off",
+                disabled: !this.options.enabled ? "disabled" : undefined,
+                value: date.formatTime(this.options.value, this.options.inputMode),
+                class: "jsl-date-input time-comp " + (this.options.inputMode === "HourMinuteSecond" ? "time-comp-seconds " : "") + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
+                style: this.options.style, placeholder: this.options.placeholder,
+                "aria-label": this.options.ariaLabel,
                 change: this.raiseChangeEvent
             }
         };
     }
-    onCreate(node) {
-        this.currentDom = node.dom;
-    }
-    onUpdate(node) {
-        this.currentDom = node.dom;
-    }
+    onCreate(node) { this.currentDom = node.dom; }
+    onUpdate(node) { this.currentDom = node.dom; }
     getValue() {
-        if (this.currentDom == null) {
-            return "";
-        }
-        return this.currentDom.value;
+        var _a, _b;
+        return (_b = (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : date.formatTime(this.options.value, this.options.inputMode);
     }
     getValueAsDate(datePart) {
-        const x = datePart ? new Date(datePart.getTime()) : new Date();
-        try {
-            const parts = this.getValue().split(":");
-            x.setHours(parseInt(parts[0], 10));
-            if (parts.length > 1) {
-                x.setMinutes(parseInt(parts[1], 10));
-            }
-            else {
-                x.setMinutes(0);
-            }
-            if (this.options.inputMode === "HourMinuteSecond" && parts.length > 2) {
-                x.setSeconds(parseInt(parts[2], 10));
-            }
-            else {
-                x.setSeconds(0);
-            }
+        var _a, _b;
+        const text = this.getValue().trim();
+        const pattern = this.options.inputMode === "HourMinuteSecond" ? /^(\d{1,2}):(\d{2}):(\d{2})$/ : /^(\d{1,2}):(\d{2})$/;
+        const parts = pattern.exec(text);
+        if (!parts || +parts[1] > 23 || +parts[2] > 59 || +((_a = parts[3]) !== null && _a !== void 0 ? _a : 0) > 59) {
+            return null;
         }
-        catch (e) {
-            console.log(e);
-            this.currentDom.value = "";
-            x.setHours(0);
-            x.setMinutes(0);
-            x.setSeconds(0);
+        const value = datePart ? new Date(datePart.getTime()) : new Date();
+        value.setHours(+parts[1], +parts[2], +((_b = parts[3]) !== null && _b !== void 0 ? _b : 0), 0);
+        return isNaN(value.getTime()) ? null : value;
+    }
+    /** Updates the input without raising onChange. */
+    setValue(value) {
+        this.options.value = value ? new Date(value.getTime()) : null;
+        if (this.currentDom) {
+            this.currentDom.value = date.formatTime(value, this.options.inputMode);
+            this.currentDom.setCustomValidity("");
+            this.currentDom.removeAttribute("aria-invalid");
         }
-        return x;
+    }
+    readModel() {
+        var _a;
+        const value = this.options.bindTo[this.options.property];
+        return ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ? this.options.converter.toUI(value) : value;
     }
     raiseChangeEvent(e, node) {
         var _a;
-        if (this.options.enabled) {
-            const val = this.getValueAsDate(this.options.value);
-            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
-                this.options.bindTo[this.options.property] =
-                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
-            }
-            this.options.onChange.notify(val);
+        if (!this.options.enabled) {
+            return;
+        }
+        this.currentDom = node.dom;
+        const value = this.getValueAsDate(this.options.value);
+        const invalid = this.getValue().trim() !== "" && !value;
+        this.currentDom.setCustomValidity(invalid ? "Enter a valid time." : "");
+        if (invalid) {
+            this.currentDom.setAttribute("aria-invalid", "true");
+            return false;
+        }
+        this.currentDom.removeAttribute("aria-invalid");
+        this.options.value = value;
+        if (this.options.bindTo != null && this.options.bindMode !== "fromModel" && this.options.property != null) {
+            this.options.bindTo[this.options.property] =
+                ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+            this.modelValue = value === null || value === void 0 ? void 0 : value.getTime();
         }
+        this.options.onChange.notify(value);
     }
 }

package/lib/components/time/TimeComponent.scss

@@ -1,4 +1,4 @@
-.time-comp {
-    width: 4em;
-    text-align: right;
-}
+@import "../../ui/date-input.css";
+
+.time-comp { width: 6rem; text-align: center; }
+.time-comp-seconds { width: 7.5rem; }

package/lib/components/tree-view/TreeViewComponent.d.ts

@@ -1,10 +1,12 @@
 import "./TreeViewStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 export interface ITreeViewComponentOptions {
     data: ITreeViewChild;
     renderItem?: (data: any) => IJSLVNode;
     style?: string;
     class?: string;
+    ariaLabel?: string;
+    onSelect?: (item: ITreeViewChild) => void;
 }
 export interface ITreeViewChild {
     id: string;
@@ -14,10 +16,14 @@ export interface ITreeViewChild {
 }
 export declare class TreeViewComponent implements IJSLComponent {
     private options;
-    private filteredData;
+    State: {
+        selected: string;
+        id: string;
+        renderer?: JSLRender;
+    };
     constructor(options: ITreeViewComponentOptions);
     isEqual(node: IJSLComponent): boolean;
+    onInit(renderer: JSLRender): void;
     render(): IJSLVNode;
-    private renderNode;
-    private addChild;
+    private node;
 }

package/lib/components/tree-view/TreeViewComponent.js

@@ -1,42 +1,75 @@
 import "./TreeViewStyle.scss";
+import { helper } from "../../core/helper";
 export class TreeViewComponent {
     constructor(options) {
         this.options = options;
+        this.State = { selected: "", id: helper.newDomGuid() };
     }
-    isEqual(node) {
-        return this.__proto__ === node.__proto__;
-    }
+    isEqual(node) { return Object.getPrototypeOf(node) === Object.getPrototypeOf(this); }
+    onInit(renderer) { this.State.renderer = renderer; }
     render() {
         var _a, _b;
-        return {
-            tag: "div", attr: { style: this.options.style, class: "treeview-comp hover " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") }, children: [
-                { tag: "ul", attr: { class: "tv-ul" }, children: [this.renderNode((_b = this.filteredData) !== null && _b !== void 0 ? _b : this.options.data)] }
-            ]
-        };
-    }
-    renderNode(el) {
-        function getInput() {
-            const res = { tag: "input", attr: { class: "tv-input", type: "checkbox", id: el.id } };
-            if (el.collapsed) {
-                res.attr.checked = "checked";
-            }
-            return res;
-        }
-        return (el.children && el.children.length > 0) ?
-            { tag: "li", children: [
-                    getInput(),
-                    this.addChild({ tag: "label", attr: { for: el.id } }, this.options.renderItem != null ? this.options.renderItem(el) : el.content),
-                    { tag: "ul", attr: { class: "tv-ul" }, children: el.children.map((c) => this.renderNode(c)) }
-                ] } :
-            this.addChild({ tag: "li" }, this.options.renderItem != null ? this.options.renderItem(el) : el.content);
+        return { tag: "div", attr: { class: "treeview-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""), style: this.options.style }, children: [
+                { tag: "ul", attr: { class: "tv-ul", role: "tree", "aria-label": (_b = this.options.ariaLabel) !== null && _b !== void 0 ? _b : "Tree" }, children: this.options.data ? [this.node(this.options.data, "0")] : [] }
+            ] };
     }
-    addChild(parent, content) {
-        if (typeof content === "string") {
-            parent.content = content;
-        }
-        else {
-            parent.children = [content];
-        }
-        return parent;
+    node(item, path) {
+        var _a, _b, _c, _d;
+        const branch = !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length), content = (_d = (_c = (_b = this.options).renderItem) === null || _c === void 0 ? void 0 : _c.call(_b, item)) !== null && _d !== void 0 ? _d : item.content;
+        return { tag: "li", attr: { role: "none" }, children: [
+                { tag: "div", attr: { role: "treeitem", class: "tv-row" + (this.State.selected === item.id ? " is-selected" : ""), tabindex: path === "0" ? "0" : "-1",
+                        "aria-expanded": branch ? String(!item.collapsed) : undefined, "aria-selected": String(this.State.selected === item.id), "aria-owns": branch ? this.State.id + "-" + path : undefined,
+                        click: () => { var _a, _b, _c; this.State.selected = item.id; if (branch) {
+                            item.collapsed = !item.collapsed;
+                        } (_b = (_a = this.options).onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, item); (_c = this.State.renderer) === null || _c === void 0 ? void 0 : _c.refresh(); return false; },
+                        keydown: (e) => {
+                            var _a, _b;
+                            const row = e.currentTarget, root = row.closest('[role=tree]');
+                            const rows = Array.from(root.querySelectorAll('.tv-row')).filter(x => x.getClientRects().length > 0), index = rows.indexOf(row);
+                            let next;
+                            if (e.key === "ArrowDown") {
+                                next = rows[Math.min(rows.length - 1, index + 1)];
+                            }
+                            else if (e.key === "ArrowUp") {
+                                next = rows[Math.max(0, index - 1)];
+                            }
+                            else if (e.key === "Home") {
+                                next = rows[0];
+                            }
+                            else if (e.key === "End") {
+                                next = rows[rows.length - 1];
+                            }
+                            else if (e.key === "ArrowRight" && branch) {
+                                if (item.collapsed) {
+                                    item.collapsed = false;
+                                }
+                                else {
+                                    next = rows[index + 1];
+                                }
+                            }
+                            else if (e.key === "ArrowLeft") {
+                                if (branch && !item.collapsed) {
+                                    item.collapsed = true;
+                                }
+                                else {
+                                    next = (_a = row.parentElement.parentElement.closest('li')) === null || _a === void 0 ? void 0 : _a.querySelector(':scope > .tv-row');
+                                }
+                            }
+                            else if (e.key === "Enter" || e.key === " ") {
+                                row.click();
+                            }
+                            else {
+                                return false;
+                            }
+                            e.preventDefault();
+                            e.stopPropagation();
+                            next === null || next === void 0 ? void 0 : next.focus();
+                            (_b = this.State.renderer) === null || _b === void 0 ? void 0 : _b.refresh();
+                            return false;
+                        },
+                        focus: (e) => { const row = e.currentTarget; row.closest('[role=tree]').querySelectorAll('.tv-row').forEach(x => x.setAttribute('tabindex', x === row ? '0' : '-1')); return false; }
+                    }, children: [{ tag: "span", attr: { class: "tv-chevron" + (branch ? "" : " tv-leaf"), "aria-hidden": "true" } }, typeof content === "string" ? { tag: "span", content } : content] },
+                ...(branch ? [{ tag: "ul", attr: { id: this.State.id + "-" + path, class: "tv-ul", role: "group", hidden: item.collapsed ? "hidden" : undefined }, children: item.children.map((child, index) => this.node(child, path + "-" + index)) }] : [])
+            ] };
     }
 }

package/lib/components/tree-view/TreeViewStyle.scss

@@ -1,96 +1,12 @@
-
-$defaultColor: rgba(50,50,50, 0.5);
-// $hoverColor: #3B99FF;
-
-// @mixin transition-duration($duration: 1s){
-//   -webkit-transition-duration: $duration;
-//   -moz-transition-duration: $duration;
-//   -ms-transition-duration: $duration;
-//   -o-transition-duration: $duration;
-//   transition-duration: $duration;
-// }
-
-// @mixin transition-property($property){
-//   -webkit-transition-property: $property;
-//   -moz-transition-property: $property;
-//   -ms-transition-property: $property;
-//   -o-transition-property: $property;
-//   transition-property: $property;
-// }
-
-// @mixin user-select($select: none){
-//   -webkit-user-select: $select;
-//   -moz-user-select: $select;
-//   -ms-user-select: $select;
-//   -o-user-select: $select;
-//   user-select: $select;
-// }
-
-.treeview-comp {
-  // float: left;
-  // @include user-select;
-
-  // &:hover input ~ label:before,
-  // &.hover input ~ label:before{
-  //   opacity: 1.0;
-  //   @include transition-duration(0.5s);
-  // }
-  
-  .tv-ul {
-    // @include transition-duration;
-    list-style: none;
-    padding-left: 1em;
-    
-    // li {
-    //   span{
-    //     @include transition-property(color);
-    //     @include transition-duration;
-      
-    //     &:hover {
-    //       color: $hoverColor;
-    //       @include transition-duration(0.3s);
-    //     }
-    //   }
-    // }
-  }
-  
-  .tv-input{
-    display: none;
-    
-    &:checked ~ ul {
-      display: none;
-    }
-    
-    & ~ label {
-      cursor: pointer;
-      position: relative;
-    }
-    
-    & ~ label:before {
-      content: '';
-      width: 0;
-      height: 0;
-      position: absolute;
-      margin-left: -1em;
-      margin-top: 0.4em;
-      border-width: 4px;
-      border-style: solid;
-      border-top-color: transparent;
-      border-right-color: $defaultColor;
-      border-bottom-color: $defaultColor;
-      border-left-color: transparent;
-      // opacity: 0.0;
-      // @include transition-property(opacity);
-      // @include transition-duration;
-    }
-
-    &:checked ~ label:before {
-      margin-left: -0.8em;
-      border-width: 5px;
-      border-top-color: transparent;
-      border-right-color: transparent;
-      border-bottom-color: transparent;
-      border-left-color: $defaultColor;
-    }
-  }
-}
+@import "../../ui/theme.css";
+.treeview-comp { color: var(--jsl-color-text); font: inherit; font-size: .875rem; line-height: 1.5; }
+.treeview-comp .tv-ul { list-style: none; padding: 0; margin: 0; }
+.treeview-comp .tv-ul .tv-ul { margin-left: 1rem; padding-left: .5rem; border-left: 1px solid var(--jsl-color-border-subtle); }
+.treeview-comp [hidden] { display: none; }
+.tv-row { display: flex; align-items: center; gap: .625rem; padding: .375rem .625rem; border-radius: .375rem; cursor: pointer; overflow-wrap: anywhere; }
+.tv-row:hover { background: var(--jsl-color-surface-hover); }
+.tv-row.is-selected { background: var(--jsl-color-surface-selected); }
+.tv-row:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: -2px; }
+.tv-chevron { flex: 0 0 .375rem; width: .375rem; height: .375rem; border-right: 1.5px solid var(--jsl-color-text-muted); border-bottom: 1.5px solid var(--jsl-color-text-muted); transform: rotate(-45deg); margin-right: .25rem; }
+.tv-row[aria-expanded=true] > .tv-chevron { transform: translateY(-.125rem) rotate(45deg); }
+.tv-leaf { border-color: transparent; }

package/lib/core/jq.js

@@ -78,12 +78,14 @@ function jQWrapper(elements) {
                 if (!_elements.length) {
                     return undefined;
                 }
-                const computed = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight",
-                    "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
-                if (computed.indexOf(key) < 0) {
-                    return _elements[0].style[key];
-                }
-                return window.getComputedStyle(_elements[0])[key];
+                const element = _elements[0];
+                const view = element.ownerDocument.defaultView || window;
+                const computed = view.getComputedStyle(element);
+                // Read stylesheet and inherited values, supporting both CSS names
+                // (box-sizing, --custom-property) and camelCase (boxSizing).
+                // Detached elements may need the inline fallback.
+                return computed.getPropertyValue(key) || computed[key] ||
+                    element.style.getPropertyValue(key) || element.style[key];
             }
             else {
                 for (const keyEl in key) {
@@ -228,9 +230,10 @@ function jQWrapper(elements) {
             return undefined;
         let el = _elements[0];
         let rect = el.getBoundingClientRect();
+        const view = el.ownerDocument.defaultView || window;
         return {
-            top: rect.top + document.body.scrollTop,
-            left: rect.left + document.body.scrollLeft
+            top: rect.top + view.pageYOffset,
+            left: rect.left + view.pageXOffset
         };
     };
     _elements.children = function () {