jsl-ui 9.28.7 → 10.0.0

package/lib/components/expander/ExpanderComponent.js

@@ -1,87 +1,108 @@
 import "./ExpanderStyle.scss";
+import { helper } from "../../core/helper";
 export class ExpanderComponent {
     constructor(optionsOrHeader, body, expanded) {
-        var _a;
-        this.State = { expanded: false, waitingForAnimation: false };
-        if (body != null) {
-            // old syntax
-            this.options = { header: optionsOrHeader, body, expanded: expanded !== null && expanded !== void 0 ? expanded : true };
-        }
-        else {
-            this.options = optionsOrHeader;
-            this.options.expanded = (_a = this.options.expanded) !== null && _a !== void 0 ? _a : true;
-        }
-        this.State.expanded = this.options.expanded;
+        var _a, _b;
+        this.State = { expanded: false, waitingForAnimation: false, id: helper.newDomGuid() };
+        this.options = body != null ?
+            { header: optionsOrHeader, body, expanded: expanded !== null && expanded !== void 0 ? expanded : true } :
+            { ...optionsOrHeader };
+        this.options = { enabled: true, expanded: true, isToggleOnHeader: true, ...this.options };
+        this.options.isToggleOnHeader = (_a = this.options.isToggleOnHeader) !== null && _a !== void 0 ? _a : true;
+        this.State.expanded = (_b = this.options.expanded) !== null && _b !== void 0 ? _b : true;
     }
     getIcon(expanded) {
-        var _a, _b, _c, _d;
         return {
             tag: "span", attr: {
-                class: "expand-collapse-icon", style: "padding:0 0.2rem 0 0.2rem;"
-            },
-            raw: true,
-            content: "<svg style='" +
-                "min-width:" + ((_a = this.options.iconSize) !== null && _a !== void 0 ? _a : "1.5rem") + "; min-height:" + ((_b = this.options.iconSize) !== null && _b !== void 0 ? _b : "1.5rem") +
-                ";max-width:" + ((_c = this.options.iconSize) !== null && _c !== void 0 ? _c : "1.5rem") + "; max-height:" + ((_d = this.options.iconSize) !== null && _d !== void 0 ? _d : "1.5rem") + ";' " +
-                "xml:space='preserve' width='1024px' height='1024px' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='nonzero' clip-rule='evenodd' viewBox='0 0 10240 10240'>" +
-                (expanded
-                    ? "<path id='curve0' fill='#FFFFFF' d='M1273 3989l3621 3620c124,125 328,125 452,0l3621 -3620c124,-125 124,-328 0,-453l-905 -905c-125,-125 -328,-125 -453,0l-2489 2489 -2489 -2489c-125,-125 -328,-125 -453,0l-905 905c-124,125 -124,328 0,453z'/>"
-                    : "<path id='curve0' fill='#FFFFFF' d='M3989 1273l3620 3621c125,124 125,328 0,452l-3620 3621c-125,124 -328,124 -453,0l-905 -905c-125,-125 -125,-328 0,-453l2489 -2489 -2489 -2489c-125,-125 -125,-328 0,-453l905 -905c125,-124 328,-124 453,0z'/>") +
-                "</svg>"
+                class: "expand-collapse-icon" + (expanded ? " is-expanded" : ""),
+                style: this.options.iconSize ? "width:" + this.options.iconSize + ";height:" + this.options.iconSize : undefined,
+                "aria-hidden": "true"
+            }, children: [{ tag: "span", attr: { class: "expander-chevron" } }]
         };
     }
-    isEqual(node) {
-        return this.__proto__ === node.__proto__;
-    }
+    isEqual(node) { return this.__proto__ === node.__proto__; }
     render() {
-        var _a, _b, _c;
-        const animate = this.State.waitingForAnimation;
+        var _a, _b, _c, _d;
+        if (!this.State.expanded) {
+            this.restoreFocusFromBody();
+        }
         this.State.waitingForAnimation = false;
+        const id = (_a = this.State.id) !== null && _a !== void 0 ? _a : (this.State.id = helper.newDomGuid());
         return {
-            tag: "div", attr: { class: "expander-comp " + (this.options.class || ""), style: (_a = this.options.style) !== null && _a !== void 0 ? _a : "" }, children: [
-                {
-                    tag: "div", attr: {
+            tag: "div", attr: {
+                id: this.options.id,
+                class: "expander-comp " + (this.State.expanded ? "expanded " : "") +
+                    (this.options.isToggleOnHeader ? "toggle-on-header " : "") + (!this.options.enabled ? "disabled " : "") + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
+                style: this.options.style
+            }, children: [
+                { tag: "div", attr: {
                         class: "header",
-                        click: (evt) => { var _a; if ((_a = this.options.isToggleOnHeader) !== null && _a !== void 0 ? _a : true) {
-                            evt.stopPropagation();
-                            this.toggleExpand();
-                        } },
-                    },
-                    children: [
-                        {
-                            tag: "span", attr: { class: "toggler", click: (evt) => { evt.stopPropagation(); this.toggleExpand(); } },
-                            children: [this.State.expanded
-                                    ? ((_b = this.options.expandedIcon) !== null && _b !== void 0 ? _b : this.getIcon(true))
-                                    : ((_c = this.options.collapsedIcon) !== null && _c !== void 0 ? _c : this.getIcon(false))
-                            ]
-                        },
-                        { tag: "span", attr: { class: "content" }, children: [this.toNode(this.options.header)] }
-                    ]
-                },
-                {
-                    tag: "div", attr: { class: "body", style: this.State.expanded ? undefined : { display: "none" } },
-                    animation: (animate ? { attr: "opacity", from: "0", to: "1", duration: 500 } : undefined),
-                    children: [this.toNode(this.options.body)]
-                }
+                        click: (event) => {
+                            var _a, _b;
+                            if (!this.options.enabled || !this.options.isToggleOnHeader ||
+                                event.target.closest("button,a,input,select,textarea,[role=button],[contenteditable]:not([contenteditable=false])")) {
+                                return false;
+                            }
+                            event.stopPropagation();
+                            (_b = (_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.querySelector(".toggler")) === null || _b === void 0 ? void 0 : _b.focus();
+                            this.toggle();
+                            return false;
+                        }
+                    }, children: [
+                        { tag: "button", attr: {
+                                id: id + "-toggle", type: "button", class: "toggler",
+                                "aria-controls": id + "-body", "aria-expanded": String(this.State.expanded),
+                                "aria-label": this.options.ariaLabel,
+                                "aria-labelledby": this.options.ariaLabel ? undefined : id + "-title",
+                                disabled: this.options.enabled ? undefined : "disabled",
+                                click: (event) => { event.stopPropagation(); this.toggle(); return false; }
+                            }, children: [{ tag: "span", attr: { class: "expander-icon", "aria-hidden": "true" }, children: [
+                                        this.State.expanded ? (_c = this.options.expandedIcon) !== null && _c !== void 0 ? _c : this.getIcon(true) : (_d = this.options.collapsedIcon) !== null && _d !== void 0 ? _d : this.getIcon(false)
+                                    ] }] },
+                        { tag: "div", attr: { class: "content", id: id + "-title" }, children: [this.toNode(this.options.header)] }
+                    ] },
+                { tag: "div", attr: {
+                        class: "body", id: id + "-body", role: "region", "aria-labelledby": id + "-toggle",
+                        hidden: this.State.expanded ? undefined : "hidden"
+                    }, children: [this.toNode(this.options.body)] }
             ]
         };
     }
+    onInit(renderer) { this.State.renderer = renderer; }
+    onCreate(node) { this.State.dom = node.dom; }
+    onRemove() { this.State.dom = null; this.State.renderer = null; }
+    isExpanded() { return this.State.expanded; }
+    /** Updates expansion silently. User activation and toggle() consult onToggle. */
+    setExpanded(expanded) {
+        var _a;
+        if (!expanded) {
+            this.restoreFocusFromBody();
+        }
+        this.State.expanded = !!expanded;
+        (_a = this.State.renderer) === null || _a === void 0 ? void 0 : _a.refresh();
+    }
+    toggle() { this.toggleExpand(); }
     toggleExpand() {
-        const newVal = !this.State.expanded;
-        if (this.options.onToggle != null) {
-            if (this.options.onToggle(newVal) === false) {
-                return;
-            }
+        var _a, _b, _c;
+        if (!this.options.enabled) {
+            return;
         }
-        if (newVal) {
-            this.State.waitingForAnimation = true;
+        const expanded = !this.State.expanded;
+        if (((_b = (_a = this.options).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, expanded)) === false) {
+            (_c = this.State.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
+            return;
         }
-        this.State.expanded = newVal;
+        this.State.waitingForAnimation = expanded;
+        this.setExpanded(expanded);
     }
-    toNode(content) {
-        if (typeof content === "string") {
-            return { tag: "div", content };
+    restoreFocusFromBody() {
+        var _a, _b;
+        const body = (_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.querySelector(":scope > .body");
+        if (body === null || body === void 0 ? void 0 : body.contains(document.activeElement)) {
+            (_b = this.State.dom.querySelector(".toggler")) === null || _b === void 0 ? void 0 : _b.focus();
         }
-        return content;
+    }
+    toNode(content) {
+        return typeof content === "string" ? { tag: "div", content } : content;
     }
 }

package/lib/components/expander/ExpanderStyle.scss

@@ -1,47 +1,61 @@
-.expander-comp {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
-    .header {
-        background: #3B99FF;
-        color: #fff;
-        border-radius: 0.3rem;
-        display: flex;
-        align-content: center;
-        min-height: 1.5rem;
-        line-height: 1.5rem;
-        align-items: center;
-
-        .toggler {
-            border-top-left-radius: 0.3rem;
-            border-bottom-left-radius: 0.3rem;
-            cursor: pointer;
-            display: inline-block;
-            background: #3B99FF;
-            
-            &:hover {
-                background: #6bb1fc;
-                color: black;
-            }
-        }
-
-        .content {
-            border-top-right-radius: 0.3rem;
-            border-bottom-right-radius: 0.3rem;
-            cursor: pointer;
-            display: inline-block;
-            flex-grow: 1;
-            padding-left: 0.6em;
-        }
-        
-            
-        &:hover {
-            background: #6bb1fc;
-            color: black;
-        }
-    }
-    .expand-collapse-icon {
-        top: 0.2rem;
-        color: #fff;
-        opacity: 0.8;
-        padding:0 0.2rem 0 0.2rem;
-    }
-}
+@import "../../ui/theme.css";
+
+.expander-comp {
+    box-sizing: border-box;
+    max-width: 100%;
+    border: 1px solid var(--jsl-color-border-subtle);
+    border-radius: .625rem;
+    background: var(--jsl-color-surface);
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .875rem;
+    line-height: 1.5;
+}
+.expander-comp > .header {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    min-height: 3rem;
+    padding: .5rem .875rem .5rem .625rem;
+    border-radius: inherit;
+}
+.expander-comp.toggle-on-header > .header { cursor: pointer; }
+.expander-comp.toggle-on-header:not(.disabled) > .header:hover { background: var(--jsl-color-surface-hover); }
+.expander-comp > .header > .toggler {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 auto;
+    min-width: 2rem;
+    min-height: 2rem;
+    padding: .25rem;
+    margin: 0;
+    border: 0;
+    border-radius: .375rem;
+    background: transparent;
+    color: var(--jsl-color-text-secondary);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+}
+.expander-comp > .header > .toggler:hover:not(:disabled) { background: var(--jsl-color-surface-selected); }
+.expander-comp > .header > .toggler:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 2px; }
+.expander-comp > .header > .content { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.expander-icon, .expand-collapse-icon { display: inline-grid; place-items: center; }
+.expand-collapse-icon { width: 1rem; height: 1rem; }
+.expander-chevron {
+    display: block;
+    width: 37.5%;
+    height: 37.5%;
+    border: solid currentColor;
+    border-width: 0 1.5px 1.5px 0;
+    transform: rotate(-45deg);
+}
+.expand-collapse-icon.is-expanded .expander-chevron { transform: rotate(45deg) translate(-1px, -1px); }
+.expander-comp > .body { border-top: 1px solid var(--jsl-color-border-subtle); padding: 1rem 1.125rem; overflow-wrap: anywhere; }
+.expander-comp > .body[hidden] { display: none; }
+.expander-comp.expanded > .body { animation: jsl-expander-appear .14s ease-out; }
+.expander-comp.disabled > .header { color: var(--jsl-color-disabled-text); cursor: default; background: var(--jsl-color-disabled-surface); }
+.expander-comp > .header > .toggler:disabled { color: var(--jsl-color-disabled-text); cursor: not-allowed; }
+@keyframes jsl-expander-appear { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .expander-comp.expanded > .body { animation: none; } }

package/lib/components/form-field/FormFieldComponent.d.ts

@@ -1,39 +1,69 @@
 import "./FormFieldStyle.scss";
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 import { IDatePickerOptions } from "../../ui/date.picker";
 import { INumberInputOptions } from "../../ui/number.input";
 import { IAutoSuggestOptions } from "../../ui/auto.suggest";
-export interface IFormFieldOptions {
+import { IInputOptions } from "../input/InputComponent";
+export interface IFormFieldOptions<TValue = string> {
     disabled?: boolean;
     id?: string;
     label: string;
-    type?: "text" | "password" | "date" | "number" | "autosuggest";
+    /** Legacy convenience factory. A supplied control takes precedence. */
+    type?: IInputOptions["type"] | "date" | "autosuggest";
     dateOptions?: IDatePickerOptions;
     numberOptions?: INumberInputOptions;
     autoSuggestOptions?: IAutoSuggestOptions;
-    value?: string;
+    value?: TValue;
     maxLength?: number;
     class?: string;
     required?: boolean;
-    onValidate?: (val: string) => boolean | string;
+    onValidate?: (val: TValue) => boolean | string;
     onBlur?: (evt: any, input: IJSLVNode) => void;
     onFocus?: (evt: any, input: IJSLVNode) => void;
     onInput?: (evt: any, input: IJSLVNode) => void;
+    control?: IJSLComponent | IJSLVNode;
+    controlId?: string;
+    description?: string;
+    placeholder?: string;
+    style?: string;
+    labelPosition?: "above" | "floating";
+    requiredMessage?: string;
+    invalidMessage?: string;
 }
-export declare class FormFieldComponent implements IJSLComponent {
+export declare class FormFieldComponent<TValue = string> implements IJSLComponent {
     private options;
     private id;
-    private type;
-    private datepickerRef;
+    private control;
+    private dom;
+    private input;
+    private renderer;
     private validationMessage;
-    constructor(options: IFormFieldOptions);
+    private validated;
+    private disposed;
+    private syncQueued;
+    private pendingValue;
+    private hasPendingValue;
+    private ownedInvalid;
+    private originalInvalid;
+    private originalRequired;
+    private originalAriaRequired;
+    private originalLabelledBy;
+    private legacySetter;
+    constructor(options: IFormFieldOptions<TValue>);
     render(): IJSLVNode;
+    onInit(renderer: JSLRender): void;
     onCreate(node: IJSLVNode): void;
-    onRemove(node: IJSLVNode): void;
+    onRemove(): void;
+    getControl(): IJSLComponent | IJSLVNode;
+    getValue(): TValue;
+    setValue(value: any): void;
     validate(): boolean;
-    getValue(): string;
-    setValue(value: string): void;
-    private setInActive;
-    private setActive;
-    private onInput;
+    private queueSync;
+    private syncDom;
+    private removeDecorations;
+    private callbackNode;
+    private onFocusEvent;
+    private onBlurEvent;
+    private onInputEvent;
+    private onChangeEvent;
 }