jsl-ui 9.28.7 → 10.0.0

package/lib/components/input/InputComponent.js

@@ -1,126 +1,101 @@
+import "../../ui/input.css";
 import { EventHandler } from "../../interaction/eventhandler";
-// tslint:disable-next-line: max-classes-per-file
 export class InputComponent {
-    get onChange() {
-        return this.options.onChange;
-    }
-    get onInput() {
-        return this.options.onInput;
-    }
+    get onChange() { return this.options.onChange; }
+    get onInput() { return this.options.onInput; }
     constructor(options) {
         var _a;
-        this.options = { ...{ type: "text", enabled: true, bindMode: "toModel" }, ...options };
-        if (this.options.bindTo != null && 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]);
+        this.options = { type: "text", enabled: true, bindMode: "toModel", ...options };
+        if (this.hasBinding() && this.options.value == null) {
+            this.options.value = this.readModel();
         }
+        this.modelValue = (_a = this.options.value) !== null && _a !== void 0 ? _a : "";
+        this.initialTextValue = this.modelValue;
         this.options.onChange = EventHandler.Create(this.options.onChange);
         this.options.onInput = EventHandler.Create(this.options.onInput);
         if (this.options.type === "input") {
             this.options.type = "text";
         }
     }
-    // public isEqual(node: IJSLComponent): boolean {
-    //     return (this as any).__proto__ === (node as any).__proto__;
-    // }
     render() {
-        var _a;
-        let val = this.options.value;
-        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-            if (this.onInput.count() > 0) {
-                this.options.bindOnInput = true;
-            }
-            // 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]);
-            // if (newVal !== current)
-            {
-                val = newVal;
-                if (this.currentDom != null) {
-                    this.currentDom.value = val !== null && val !== void 0 ? val : "";
+        var _a, _b, _c;
+        if (this.options.bindMode !== "toModel" && this.hasBinding()) {
+            const value = this.readModel();
+            if (value !== this.modelValue) {
+                this.options.value = value;
+                this.modelValue = value;
+                if (this.currentDom && this.currentDom.value !== value) {
+                    this.currentDom.value = value;
                 }
             }
         }
+        const textarea = this.options.type === "textarea";
         return {
-            tag: this.options.type !== "textarea" ? "input" : "textarea",
+            tag: textarea ? "textarea" : "input",
             attr: {
-                type: this.options.type !== "textarea" ? this.options.type : undefined,
-                disabled: !this.options.enabled ? "disabled" : undefined,
-                class: this.options.class,
-                style: this.options.style,
-                change: this.raiseChangeEvent,
-                input: this.raiseInputEvent,
-                value: this.options.type !== "textarea" ? val : undefined,
-                placeholder: this.options.placeholder,
-                id: typeof this.options.id === "string" ? this.options.id : undefined,
-                maxLength: this.options.maxLength
+                type: textarea ? undefined : this.options.type,
+                disabled: this.options.enabled ? undefined : "disabled",
+                readonly: this.options.readOnly ? "readonly" : undefined,
+                class: (this.options.unstyled ? "" : "jsl-input ") + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
+                style: this.options.style, id: this.options.id,
+                change: this.raiseChangeEvent, input: this.raiseInputEvent,
+                value: textarea ? undefined : (_b = this.options.value) !== null && _b !== void 0 ? _b : "",
+                placeholder: this.options.placeholder, maxlength: this.options.maxLength,
+                rows: textarea ? this.options.rows : undefined,
+                "aria-label": this.options.ariaLabel, autocomplete: this.options.autocomplete
             },
-            content: this.options.type === "textarea" ? val : undefined
+            // Keep textarea content stable after mounting; updating textContent can reset the caret.
+            content: textarea ? (this.currentDom ? this.initialTextValue : (this.initialTextValue = (_c = this.options.value) !== null && _c !== void 0 ? _c : "")) : undefined
         };
     }
-    getValue() {
-        if (this.currentDom == null) {
-            return this.options.value || "";
-            // return "";
-        }
-        return this.currentDom.value;
-    }
+    getValue() { var _a, _b, _c; return (_c = (_b = (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.options.value) !== null && _c !== void 0 ? _c : ""; }
+    /** Updates the input and writable binding without raising events. */
     setValue(value) {
-        var _a;
-        this.options.value = value;
-        if (this.currentDom != null) {
-            this.currentDom.value = value;
-        }
-        if (this.options.bindMode !== "fromModel" && this.options.bindTo && 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(value) : value;
+        this.options.value = value !== null && value !== void 0 ? value : "";
+        if (this.currentDom && this.currentDom.value !== this.options.value) {
+            this.currentDom.value = this.options.value;
         }
+        this.writeModel(this.options.value);
     }
-    onCreate(node) {
-        this.currentDom = node.dom;
+    focus() { var _a; (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.focus(); }
+    onInit(renderer) { this.renderer = renderer; }
+    onCreate(node) { this.currentDom = node.dom; }
+    onUpdate(node) { this.currentDom = node.dom; }
+    onRemove() { this.currentDom = null; }
+    hasBinding() { return this.options.bindTo != null && this.options.property != null; }
+    readModel() {
+        var _a, _b;
+        const value = this.options.bindTo[this.options.property];
+        return ((_b = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ? this.options.converter.toUI(value) : value)) !== null && _b !== void 0 ? _b : "");
     }
-    // public onUpdate(node: IJSLVNode) {
-    //     this.currentDom = node.dom as HTMLInputElement;
-    //     if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
-    //         if (this.onInput.count() > 0) {
-    //             this.options.bindOnInput = true;
-    //         }
-    //         const current = this.getValue();
-    //         const newVal = (this.options.converter?.toUI ?
-    //             this.options.converter.toUI(this.options.bindTo[this.options.property]) :
-    //             this.options.bindTo[this.options.property]) as string;
-    //         if (newVal !== current) {
-    //             if (this.currentDom != null) {
-    //                 this.currentDom.value = newVal ?? "";
-    //             }
-    //         }
-    //     }
-    // }
-    raiseChangeEvent(e, node) {
+    writeModel(value) {
         var _a;
-        if (this.options.enabled) {
-            const value = node.dom.value;
-            if (this.options.bindMode !== "fromModel" && this.options.bindTo && 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(value) : value;
-            }
-            this.options.onChange.notify(value);
+        if (this.hasBinding() && this.options.bindMode !== "fromModel") {
+            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;
+        }
+    }
+    raiseChangeEvent(event, node) {
+        if (!this.options.enabled) {
+            return false;
         }
+        const value = node.dom.value;
+        this.options.value = value;
+        this.writeModel(value);
+        this.onChange.notify(value);
     }
-    raiseInputEvent(e, node) {
+    raiseInputEvent(event, node) {
         var _a;
-        if (this.onInput.count() === 0) {
+        if (!this.options.enabled) {
             return false;
         }
-        if (this.options.enabled) {
-            const value = node.dom.value;
-            if (this.options.bindOnInput && this.options.bindMode !== "fromModel" && this.options.bindTo && 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(value) : value;
-            }
-            this.options.onInput.notify(value);
+        const value = node.dom.value;
+        this.options.value = value;
+        const bindOnInput = (_a = this.options.bindOnInput) !== null && _a !== void 0 ? _a : (this.options.bindMode !== "toModel" && this.onInput.count() > 0);
+        if (bindOnInput) {
+            this.writeModel(value);
         }
+        this.onInput.notify(value);
+        return this.onInput.count() ? undefined : false;
     }
 }

package/lib/components/loading/LoadingComponent.d.ts

@@ -1,8 +1,15 @@
 import "./LoadingStyle.css";
 import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface ILoadingOptions {
+    sizeInRem?: number;
+    label?: string;
+    showLabel?: boolean;
+    class?: string;
+    style?: string;
+}
 export declare class LoadingComponent implements IJSLComponent {
-    private sizeInRem?;
-    constructor(sizeInRem?: number);
+    private options;
+    constructor(sizeOrOptions?: number | ILoadingOptions);
     isEqual(node: IJSLComponent): boolean;
     render(): IJSLVNode;
 }

package/lib/components/loading/LoadingComponent.js

@@ -1,20 +1,21 @@
 import "./LoadingStyle.css";
 export class LoadingComponent {
-    constructor(sizeInRem) {
-        this.sizeInRem = sizeInRem;
-        if (sizeInRem == null) {
-            this.sizeInRem = 6;
-        }
-    }
-    isEqual(node) {
-        return this.__proto__ === node.__proto__;
+    constructor(sizeOrOptions) {
+        this.options = typeof sizeOrOptions === "number" ? { sizeInRem: sizeOrOptions } : { ...sizeOrOptions };
+        this.options.sizeInRem = Math.max(.5, Number.isFinite(this.options.sizeInRem) ? this.options.sizeInRem : 6);
     }
+    isEqual(node) { return this.__proto__ === node.__proto__; }
     render() {
+        var _a, _b, _c;
         return {
-            tag: "div",
-            attr: { style: "font-size:" + this.sizeInRem + "rem" },
-            content: "<div class='lds-dual-ring'></div>",
-            raw: true
+            tag: "div", attr: {
+                class: "jsl-loading " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
+                style: "--jsl-loading-size:" + this.options.sizeInRem + "rem;" + ((_b = this.options.style) !== null && _b !== void 0 ? _b : ""),
+                role: "status", "aria-live": "polite", "aria-atomic": "true"
+            }, children: [
+                { tag: "span", attr: { class: "lds-dual-ring", "aria-hidden": "true" } },
+                { tag: "span", content: (_c = this.options.label) !== null && _c !== void 0 ? _c : "Loading…", attr: { class: "jsl-loading-label" + (this.options.showLabel ? "" : " jsl-loading-label-hidden") } }
+            ]
         };
     }
 }

package/lib/components/loading/LoadingStyle.css

@@ -1,29 +1,19 @@
-.lds-dual-ring {
-  display: inline-block;
-  /* width: 80px;
-  height: 80px; */
-  width: 1em;
-  height: 1em;
-}
-.lds-dual-ring:after {
-  content: " ";
-  display: block;
-  width: 0.75em;
-  height: 0.75em;
-  margin: 0.2em;
-  /* width: 64px;
-  height: 64px;
-  margin: 8px; */
-  border-radius: 50%;
-  border: 0.08em solid #444444;
-  border-color: #444444 transparent #444444 transparent;
-  animation: lds-dual-ring 1.2s linear infinite;
-}
-@keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
+@import "../../ui/theme.css";
+
+.jsl-loading { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; max-width: 100%; color: var(--jsl-color-text-secondary); font: inherit; vertical-align: middle; }
+.lds-dual-ring { display: inline-block; position: relative; flex-shrink: 0; width: var(--jsl-loading-size, 1em); height: var(--jsl-loading-size, 1em); max-width: 100%; }
+.lds-dual-ring::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    border: max(2px, calc(var(--jsl-loading-size, 1em) * .08)) solid var(--jsl-color-border-subtle);
+    border-top-color: var(--jsl-loading-color, var(--jsl-color-accent));
+    border-right-color: var(--jsl-loading-color, var(--jsl-color-accent));
+    border-radius: 50%;
+    animation: jsl-loading-spin .85s linear infinite;
+}
+.jsl-loading-label { font-size: .8125rem; line-height: 1.5; }
+.jsl-loading-label-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+@keyframes jsl-loading-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .lds-dual-ring::after { animation: none; } }

package/lib/components/navigation/NavigationComponent.d.ts

@@ -1,17 +1,17 @@
 import "./NavigationStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 export interface INavItemChild {
     content: string | IJSLVNode;
     link?: string;
     target?: string;
     click?: (e: MouseEvent) => void;
-}
-export interface INavItem {
-    content: string | IJSLVNode;
-    link?: string;
-    target?: string;
     children?: INavItemChild[];
-    click?: (e: MouseEvent) => void;
+    enabled?: boolean;
+    active?: boolean;
+    /** Accessible name for a separate submenu button with rich content. */
+    submenuLabel?: string;
+}
+export interface INavItem extends INavItemChild {
 }
 export interface INavigationOptions {
     title: string | IJSLVNode;
@@ -22,13 +22,37 @@ export interface INavigationOptions {
     position?: "default" | "static" | "fixed" | "fixed-bottom";
     alignment?: "right" | "left";
     id?: string;
+    ariaLabel?: string;
+    menuButtonLabel?: string;
+    /** Override location-based selection for applications with their own router. */
+    activeLink?: string;
 }
+/** Responsive navigation using native links and disclosure buttons. */
 export declare class NavigationComponent implements IJSLComponent {
+    State: {
+        id: string;
+        mobileOpen: boolean;
+        openPath: string;
+        dom?: HTMLElement;
+        renderer?: JSLRender;
+        owner?: NavigationComponent;
+        cleanup?: () => void;
+    };
     private options;
     constructor(options: INavigationOptions);
     isEqual(node: IJSLComponent): boolean;
+    onInit(renderer: JSLRender): void;
     render(): IJSLVNode;
-    private itemToNode;
-    private isActive;
-    private toNode;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    private item;
+    private keydown;
+    private rowControls;
+    private disclosure;
+    private isCompact;
+    private close;
+    private activePath;
+    private refresh;
+    private node;
+    private chevron;
 }