jsl-ui 9.28.7 → 10.0.0

package/lib/components/auto-suggest/AutoSuggestComponent.js

@@ -1,47 +1,34 @@
 import { AutoSuggest } from "../../ui/auto.suggest";
-export class AutoSuggestComponent {
+import { InputComponent } from "../input/InputComponent";
+export class AutoSuggestComponent extends InputComponent {
     constructor(options) {
-        this.options = options;
-        // this.id = this.options.id ?? helper.newDomGuid();
+        super({ ...options, type: "text", onChange: undefined });
+        this.suggestOptions = { ...options };
     }
-    render() {
-        var _a;
-        return {
-            tag: "input",
-            attr: { value: this.options.value, class: this.options.class, style: this.options.style, placeholder: (_a = this.options.placeholder) !== null && _a !== void 0 ? _a : "" }
-        };
-    }
-    getRef() {
-        return this.ref;
-    }
-    getValue() {
-        if (this.dom == null) {
-            return "";
-        }
-        return this.dom.value;
-    }
-    setValue(val) {
-        if (this.dom == null) {
-            return;
-        }
-        this.dom.value = val;
-    }
-    focus() {
-        if (this.dom == null) {
+    getRef() { return this.ref; }
+    onCreate(node) {
+        super.onCreate(node);
+        this.input = node.dom;
+        if (this.suggestOptions.enabled === false || this.suggestOptions.readOnly) {
             return;
         }
-        this.dom.focus();
-    }
-    onCreate(node) {
-        this.dom = node.dom;
-        AutoSuggest(node.dom, this.options);
-    }
-    onUpdate(node) {
-        this.dom = node.dom;
+        this.ref = AutoSuggest(this.input, {
+            ...this.suggestOptions,
+            onChange: value => { var _a, _b, _c; this.setValue(value); (_b = (_a = this.suggestOptions).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value); (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.refresh(); },
+            onSelect: (event, term, element) => {
+                var _a, _b, _c;
+                this.setValue(term);
+                (_b = (_a = this.suggestOptions).onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event, term, element);
+                this.input.dispatchEvent(new Event("change", { bubbles: true }));
+                (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
+            }
+        });
     }
     onRemove() {
-        if (this.ref != null) {
-            this.ref.destroy();
-        }
+        var _a;
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.ref = null;
+        this.input = null;
+        super.onRemove();
     }
 }

package/lib/components/button/ButtonComponent.d.ts

@@ -1,18 +1,47 @@
+import "../../ui/button.css";
 import { IJSLComponent, IJSLVNode } from "jsl-render";
 import { EventHandler } from "../../interaction/eventhandler";
 export interface IButtonOptions {
-    content: string | IJSLVNode | IJSLComponent;
+    content?: string | IJSLVNode | IJSLComponent;
     enabled?: boolean;
     class?: string;
     outlined?: boolean;
     style?: string;
     click?: EventHandler<MouseEvent> | ((evt?: MouseEvent) => void);
+    /** Optional decorative icon. Strings are text, not HTML or an icon-library class. */
+    icon?: string | IJSLVNode | IJSLComponent;
+    iconPosition?: "start" | "end";
+    /** Hide the content visually, keeping it as the accessible name. */
+    iconOnly?: boolean;
+    /** Supply an accessible name when there is no text content. */
+    ariaLabel?: string;
+    title?: string;
+    variant?: "solid" | "outline" | "ghost";
+    size?: "small" | "medium" | "large";
+    toggle?: boolean;
+    /** Initial toggle state. Use the component's pressed property to update it. */
+    pressed?: boolean;
+    onToggle?: EventHandler<boolean> | ((pressed?: boolean) => void);
+    /** Omitted by default to preserve native form-submit behavior. */
+    type?: "button" | "submit" | "reset";
 }
 export declare class ButtonComponent implements IJSLComponent {
+    State: {
+        pressed?: boolean;
+        dom?: HTMLButtonElement;
+    };
     private options;
     get click(): EventHandler<MouseEvent>;
+    get onToggle(): EventHandler<boolean>;
+    get pressed(): boolean;
+    /** Programmatic updates do not raise click or onToggle. */
+    set pressed(value: boolean);
     constructor(options: IButtonOptions);
     isEqual(node: IJSLComponent): boolean;
     render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    onUpdate(node: IJSLVNode): void;
+    onRemove(): void;
+    private toNode;
     private raiseEvent;
 }

package/lib/components/button/ButtonComponent.js

@@ -1,28 +1,109 @@
+import "../../ui/button.css";
 import { EventHandler } from "../../interaction/eventhandler";
 export class ButtonComponent {
     get click() {
         return this.options.click;
     }
+    get onToggle() {
+        return this.options.onToggle;
+    }
+    get pressed() {
+        var _a;
+        return (_a = this.State.pressed) !== null && _a !== void 0 ? _a : !!this.options.pressed;
+    }
+    /** Programmatic updates do not raise click or onToggle. */
+    set pressed(value) {
+        this.State.pressed = !!value;
+        if (this.State.dom != null && this.options.toggle) {
+            this.State.dom.setAttribute("aria-pressed", String(this.pressed));
+            this.State.dom.classList.toggle("active", this.pressed);
+        }
+    }
     constructor(options) {
+        // jsl-render carries State across replacement component instances.
+        this.State = {};
         this.options = { ...{ enabled: true, class: "" }, ...options };
         this.options.click = EventHandler.Create(this.options.click);
+        this.options.onToggle = EventHandler.Create(this.options.onToggle);
     }
     isEqual(node) {
         return this.__proto__ === node.__proto__;
     }
     render() {
+        const variant = this.options.variant || (this.options.outlined ? "outline" : "solid");
+        const hasContent = this.options.content != null && this.options.content !== "";
+        const iconOnly = this.options.iconOnly || (!hasContent && this.options.icon != null);
+        const classes = ["jsl-button"];
+        if (variant !== "solid") {
+            classes.push("jsl-button-" + variant);
+        }
+        if (this.options.size && this.options.size !== "medium") {
+            classes.push("jsl-button-" + this.options.size);
+        }
+        if (iconOnly) {
+            classes.push("jsl-button-icon-only");
+        }
+        if (this.options.toggle && this.pressed) {
+            classes.push("active");
+        }
+        if (!this.options.enabled) {
+            classes.push("disabled");
+        }
+        classes.push(this.options.class);
+        const children = [];
+        if (hasContent) {
+            children.push(this.toNode(this.options.content, iconOnly ? "jsl-button-label-hidden" : "jsl-button-label"));
+        }
+        if (this.options.icon != null) {
+            const icon = this.toNode(this.options.icon, "jsl-button-icon");
+            icon.attr["aria-hidden"] = "true";
+            if (this.options.iconPosition === "end") {
+                children.push(icon);
+            }
+            else {
+                children.unshift(icon);
+            }
+        }
         return {
             tag: "button",
             attr: {
-                class: "jsl-button " + (this.options.outlined ? "jsl-button-outline " : "") +
-                    this.options.class + (!this.options.enabled ? " disabled" : ""), style: this.options.style, click: this.raiseEvent
+                class: classes.filter(Boolean).join(" "),
+                style: this.options.style,
+                click: this.raiseEvent,
+                disabled: !this.options.enabled ? "disabled" : undefined,
+                "aria-pressed": this.options.toggle ? String(this.pressed) : undefined,
+                "aria-label": this.options.ariaLabel,
+                title: this.options.title,
+                type: this.options.type
             },
-            content: typeof this.options.content === "string" ? this.options.content : "",
-            children: typeof this.options.content !== "string" ? [this.options.content] : []
+            // Preserve the original DOM structure for existing text-only and custom-content buttons.
+            content: this.options.icon == null && !iconOnly && typeof this.options.content === "string" ? this.options.content : "",
+            children: this.options.icon == null && !iconOnly ?
+                (hasContent && typeof this.options.content !== "string" ? [this.options.content] : []) : children
+        };
+    }
+    onCreate(node) {
+        this.State.dom = node.dom;
+    }
+    onUpdate(node) {
+        this.State.dom = node.dom;
+    }
+    onRemove() {
+        this.State.dom = undefined;
+    }
+    toNode(content, className) {
+        return {
+            tag: "span", attr: { class: className },
+            content: typeof content === "string" ? content : "",
+            children: typeof content === "string" ? [] : [content]
         };
     }
     raiseEvent(evt) {
         if (this.options.enabled) {
+            if (this.options.toggle) {
+                this.pressed = !this.pressed;
+                this.onToggle.notify(this.pressed);
+            }
             this.options.click.notify(evt);
         }
     }

package/lib/components/checkbox/CheckBoxComponent.d.ts

@@ -14,6 +14,9 @@ export interface ICheckBoxOptions<T = any> {
     property?: keyof T;
     bindMode?: "toModel" | "fromModel" | "both";
     converter?: IDataConverter<any, boolean>;
+    description?: string;
+    ariaLabel?: string;
+    indeterminate?: boolean;
 }
 export declare class CheckBoxComponent<T = any> implements IJSLComponent {
     private options;
@@ -22,7 +25,14 @@ export declare class CheckBoxComponent<T = any> implements IJSLComponent {
     constructor(options: ICheckBoxOptions<T>);
     render(): IJSLVNode;
     getValue(): boolean;
-    setValue(val: boolean): void;
+    /** Updates checked state and writable bindings without raising onChange. */
+    setValue(value: boolean): void;
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
     onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    private hasBinding;
+    private readModel;
+    private writeModel;
     private raiseEvent;
 }

package/lib/components/checkbox/CheckBoxComponent.js

@@ -2,80 +2,90 @@ import "./CheckBoxStyle.scss";
 import { EventHandler } from "../../interaction/eventhandler";
 import { helper } from "../../core/helper";
 export class CheckBoxComponent {
-    get onChange() {
-        return this.options.onChange;
-    }
+    get onChange() { return this.options.onChange; }
     constructor(options) {
-        var _a;
-        this.options = { ...{ enabled: true, class: "", bindMode: "toModel" }, ...options };
-        if (!this.options.id) {
-            this.options.id = helper.newDomGuid();
-        }
-        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 = { enabled: true, class: "", bindMode: "toModel", ...options };
+        this.options.id = this.options.id || helper.newDomGuid();
+        if (this.hasBinding() && this.options.value == null) {
+            this.options.value = this.readModel();
         }
         this.options.onChange = EventHandler.Create(this.options.onChange);
     }
-    // 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) {
-            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]);
-            val = newVal;
-            if (newVal !== current) {
-                if (this.currentDom != null) {
-                    this.currentDom.checked = val;
-                }
-            }
+        if (this.options.bindMode !== "toModel" && this.hasBinding()) {
+            this.options.value = this.readModel();
+        }
+        if (this.currentDom) {
+            this.currentDom.checked = !!this.options.value;
+            this.currentDom.indeterminate = !!this.options.indeterminate;
         }
         return {
-            tag: "span",
-            attr: { style: this.options.style },
-            children: [{
-                    tag: "input",
-                    attr: {
-                        type: "checkbox",
-                        disabled: !this.options.enabled ? "disabled" : undefined,
-                        class: "checkbox-comp " + (this.options.class || ""),
-                        change: this.raiseEvent,
-                        checked: val ? "checked" : undefined,
-                        id: typeof this.options.id === "string" ? this.options.id : undefined
+            tag: "span", attr: {
+                class: "jsl-checkbox" + (!this.options.enabled ? " disabled" : ""),
+                style: this.options.style
+            }, children: [
+                {
+                    tag: "input", attr: {
+                        type: "checkbox", disabled: this.options.enabled ? undefined : "disabled",
+                        class: "checkbox-comp " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
+                        checked: this.options.value ? "checked" : undefined,
+                        id: this.options.id, "aria-label": this.options.ariaLabel,
+                        "aria-describedby": this.options.description ? this.options.id + "-description" : undefined,
+                        change: this.raiseEvent
                     }
-                }, { tag: "label", content: this.options.label, attr: { for: this.options.id } }]
+                },
+                { tag: "span", attr: { class: "checkbox-copy" }, children: [
+                        { tag: "label", content: this.options.label, attr: { for: this.options.id, class: "checkbox-label" } },
+                        { tag: "span", content: this.options.description, attr: {
+                                id: this.options.id + "-description", class: "checkbox-description",
+                                hidden: this.options.description ? undefined : "hidden"
+                            } }
+                    ] }
+            ]
         };
     }
-    getValue() {
-        var _a;
-        return ((_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.checked) || false;
-    }
-    setValue(val) {
-        var _a;
-        if (this.currentDom != null) {
-            this.currentDom.checked = val;
+    getValue() { var _a, _b; return (_b = (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : !!this.options.value; }
+    /** Updates checked state and writable bindings without raising onChange. */
+    setValue(value) {
+        this.options.value = !!value;
+        if (this.currentDom) {
+            this.currentDom.checked = !!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.writeModel(!!value);
+    }
+    get indeterminate() { var _a, _b; return (_b = (_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.indeterminate) !== null && _b !== void 0 ? _b : !!this.options.indeterminate; }
+    set indeterminate(value) {
+        this.options.indeterminate = !!value;
+        if (this.currentDom) {
+            this.currentDom.indeterminate = !!value;
         }
     }
     onCreate(node) {
         this.currentDom = node.dom.querySelector("input");
+        this.currentDom.indeterminate = !!this.options.indeterminate;
+    }
+    onRemove() { this.currentDom = null; }
+    hasBinding() { return this.options.bindTo != null && this.options.property != null; }
+    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);
     }
-    raiseEvent(e, node) {
+    writeModel(value) {
         var _a;
-        if (this.options.enabled) {
-            const value = node.dom.checked;
-            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(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;
+        }
+    }
+    raiseEvent(event, node) {
+        if (!this.options.enabled) {
+            return false;
         }
+        this.currentDom = node.dom;
+        this.options.value = this.currentDom.checked;
+        this.options.indeterminate = this.currentDom.indeterminate;
+        this.writeModel(this.options.value);
+        this.onChange.notify(this.options.value);
     }
 }

package/lib/components/checkbox/CheckBoxStyle.scss

@@ -1,86 +1,73 @@
-@keyframes checkbox-comp-hover-color{
-    from{
-        border-color:#C0C0C0;
-    }
-    to{
-        border-color:#3B99FF;
-    }
-}
-.checkbox-comp{
-    position:absolute;
-    display:none;
-}
-.checkbox-comp[disabled]{
-    cursor:not-allowed
-}
-.checkbox-comp+label{
-    position:relative;
-    // display:block;
-    padding-left:1.5em;
-    cursor:pointer;
-    vertical-align:middle;
-}
-.checkbox-comp+label:hover:before{
-    animation-duration:.4s;
-    animation-fill-mode:both;
-    animation-name:checkbox-comp-hover-color;
-}
-.checkbox-comp+label:before{
-    position:absolute;
-    top:0;
-    left:0;
-    display:inline-block;
-    width:1em;
-    height:1em;
-    content:'';
-    border:1px solid #C0C0C0;
-}
-.checkbox-comp+label:after{
-    position:absolute;
-    display:none;
-    content:''
-}
-.checkbox-comp[disabled]+label{
-    cursor:not-allowed;
-    // color:#C0C0C0;
-}
-.checkbox-comp[disabled]+label:hover,.checkbox-comp[disabled]+label:before,.checkbox-comp[disabled]+label:after{
-    cursor:not-allowed
-}
-.checkbox-comp[disabled]+label:hover:before{
-    border:1px solid #C0C0C0;
-    animation-name:none
-}
-.checkbox-comp[disabled]+label:before{
-    border-color:#C0C0C0;
-}
-.checkbox-comp:checked+label:before{
-    animation-name:none
-}
-.checkbox-comp:checked+label:after{
-    display:block
-}
-.checkbox-comp+label:before{
-    border-radius:0.2em;
-}
-.checkbox-comp+label:after{
-    top:0.1em; //2px;
-    left:0.3em; //7px;
-    box-sizing:border-box;
-    width:0.5em; //6px;
-    height:0.7em; //12px;
-    transform:rotate(45deg);
-    border-width:0.15em;
-    border-style:solid;
-    border-color:#fff;
-    border-top:0;
-    border-left:0
-}
-.checkbox-comp:checked+label:before{
-    border-color:#3B99FF;
-    background:#3B99FF;
-}
-.checkbox-comp:checked[disabled]+label:before{
-    border-color:#c9e2f9;
-    background:#c9e2f9
+@import "../../ui/theme.css";
+
+.jsl-checkbox {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: .625rem;
+    max-width: 100%;
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .875rem;
+    line-height: 1.5;
+    vertical-align: middle;
+}
+.checkbox-comp {
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    position: relative;
+    display: inline-grid;
+    place-content: center;
+    flex: 0 0 1.125rem;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: calc((1.5em - 1.125rem) / 2) 0 0;
+    border: 1px solid var(--jsl-color-border);
+    border-radius: .25rem;
+    background: var(--jsl-color-surface);
+    color: var(--jsl-color-on-accent);
+    font: inherit;
+    cursor: pointer;
+    transition: background-color .12s, border-color .12s;
+}
+.checkbox-comp::after {
+    content: "";
+    width: 4px;
+    height: 8px;
+    margin-top: -2px;
+    border: solid currentColor;
+    border-width: 0 1.5px 1.5px 0;
+    transform: rotate(45deg);
+    opacity: 0;
+}
+.checkbox-comp:checked, .checkbox-comp:indeterminate {
+    border-color: var(--jsl-color-accent);
+    background: var(--jsl-color-accent);
+}
+.checkbox-comp:checked::after, .checkbox-comp:indeterminate::after { opacity: 1; }
+.checkbox-comp:indeterminate::after {
+    width: 8px;
+    height: 0;
+    margin-top: 0;
+    border-width: 0 0 2px;
+    transform: none;
+}
+.checkbox-comp:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 3px; }
+.jsl-checkbox:has(.checkbox-comp:not(:disabled)):hover .checkbox-comp { border-color: var(--jsl-color-text-muted); }
+.jsl-checkbox:has(.checkbox-comp:checked:not(:disabled)):hover .checkbox-comp,
+.jsl-checkbox:has(.checkbox-comp:indeterminate:not(:disabled)):hover .checkbox-comp {
+    border-color: var(--jsl-color-accent-hover);
+    background: var(--jsl-color-accent-hover);
+}
+.checkbox-copy { min-width: 0; }
+.checkbox-label { display: block; cursor: pointer; overflow-wrap: anywhere; }
+.checkbox-description { display: block; margin-top: .1875rem; color: var(--jsl-color-text-muted); font-size: .75rem; line-height: 1.5; }
+.checkbox-description[hidden] { display: none; }
+.checkbox-comp:disabled { background: var(--jsl-color-disabled-surface); border-color: var(--jsl-color-border-subtle); cursor: not-allowed; }
+.checkbox-comp:disabled:checked, .checkbox-comp:disabled:indeterminate { background: var(--jsl-color-disabled-text); border-color: var(--jsl-color-disabled-text); color: var(--jsl-color-disabled-surface); opacity: .65; }
+.jsl-checkbox.disabled .checkbox-label { color: var(--jsl-color-disabled-text); cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) { .checkbox-comp { transition: none; } }
+@media (forced-colors: active) {
+    .checkbox-comp { appearance: auto; }
+    .checkbox-comp::after { display: none; }
 }

package/lib/components/date/DateComponent.d.ts

@@ -1,3 +1,4 @@
+import "../../ui/date-input.css";
 import { IJSLComponent, IJSLVNode } from "jsl-render";
 import { IDatePickerOptions, IDatePicker } from "../../ui/date.picker";
 import { EventHandler } from "../../interaction/eventhandler";
@@ -7,6 +8,7 @@ export interface IDateComponentOptions<T = any> extends IDatePickerOptions {
     class?: string;
     style?: string;
     placeholder?: string;
+    ariaLabel?: string;
     value?: Date;
     onChange?: EventHandler<Date> | ((v?: Date) => void);
     bindTo?: T;
@@ -19,14 +21,22 @@ export declare class DateComponent<T = any> implements IJSLComponent {
     private options;
     private ref;
     private currentDom;
+    private modelValue;
     constructor(options: IDateComponentOptions<T>);
     get onChange(): EventHandler<Date>;
     render(): IJSLVNode;
     getValue(): string;
     getValueAsDate(): Date;
+    isValid(): boolean;
+    /** Updates the input and calendar without raising onChange. */
+    setValue(value: Date): void;
     getRef(): IDatePicker;
     onCreate(node: IJSLVNode): void;
     onUpdate(node: IJSLVNode): void;
     onRemove(): void;
+    private format;
+    private hasBinding;
+    private readModel;
     private raiseEvent;
+    private parseBoundary;
 }