jsl-ui 9.28.7 → 10.0.0

package/lib/components/form-field/FormFieldComponent.js

@@ -1,138 +1,291 @@
 import "./FormFieldStyle.scss";
-import { DatePicker } from "../../ui/date.picker";
-import { NumberInput } from "../../ui/number.input";
 import { helper } from "../../core/helper";
-import { AutoSuggest } from "../../ui/auto.suggest";
+import { createFormFieldControl } from "./create-control";
 export class FormFieldComponent {
     constructor(options) {
         this.options = options;
+        this.validated = false;
+        this.disposed = false;
+        this.syncQueued = false;
+        this.hasPendingValue = false;
+        this.ownedInvalid = false;
+        this.onFocusEvent = (event) => {
+            var _a, _b, _c;
+            this.dom.classList.add("form-field--is-active");
+            (_b = (_a = this.options).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event, this.callbackNode(event));
+            if (this.options.onFocus) {
+                (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
+            }
+        };
+        this.onBlurEvent = (event) => {
+            var _a, _b, _c;
+            this.dom.classList.remove("form-field--is-active");
+            (_b = (_a = this.options).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event, this.callbackNode(event));
+            if (this.options.onBlur) {
+                (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
+            }
+            this.queueSync();
+        };
+        this.onInputEvent = (event) => {
+            var _a, _b, _c;
+            (_b = (_a = this.options).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, event, this.callbackNode(event));
+            if (this.options.onInput) {
+                (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
+            }
+            this.queueSync();
+        };
+        this.onChangeEvent = () => { if (this.validated) {
+            this.validate();
+        } this.queueSync(); };
+        this.options = { ...options };
         this.id = options.id || helper.newDomGuid();
-        this.type = this.options.type === "password" ? "password" : "text";
+        if (options.control) {
+            this.control = options.control;
+        }
+        else {
+            const legacy = createFormFieldControl(this.options, this.id);
+            this.control = legacy.control;
+            this.legacySetter = legacy.setValue;
+        }
+        if (options.control && options.value !== undefined) {
+            this.setValue(options.value);
+        }
+        if (!options.control && options.value != null) {
+            // Retain the legacy raw string, including a draft that cannot yet be parsed.
+            this.pendingValue = options.value;
+            this.hasPendingValue = true;
+        }
     }
     render() {
         var _a, _b;
+        this.queueSync();
         return {
-            tag: "div",
-            attr: { class: "form-field " + (this.options.value ? "form-field--is-filled " : "") + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") },
-            children: [{
-                    tag: "div",
-                    attr: { class: "form-field__control" + (this.validationMessage ? " failed__valid" : "") },
-                    children: [
-                        {
-                            tag: "label",
-                            attr: { for: this.id, class: "form-field__label" },
-                            content: this.options.label +
-                                (this.options.required ? " *" : "") +
-                                (this.validationMessage ? (" " + ((_b = this.validationMessage) !== null && _b !== void 0 ? _b : "")) : "")
-                        },
-                        {
-                            tag: "input",
-                            attr: {
-                                id: this.id,
-                                type: this.type,
-                                value: this.options.value,
-                                maxLength: this.options.maxLength,
-                                class: "form-field__input",
-                                blur: this.setInActive,
-                                focus: this.setActive,
-                                input: this.onInput,
-                                disabled: this.options.disabled ? "disabled" : undefined
-                            }
-                        }
-                    ]
-                }]
+            tag: "div", attr: {
+                class: "form-field " + (this.options.labelPosition === "floating" ? "form-field--floating " : "") +
+                    (this.validationMessage ? "form-field--invalid " : "") + ((_a = this.options.class) !== null && _a !== void 0 ? _a : ""),
+                style: this.options.style
+            }, children: [
+                { tag: "label", attr: {
+                        for: (_b = this.options.controlId) !== null && _b !== void 0 ? _b : this.id, id: this.id + "-label", class: "form-field__label"
+                    }, children: [
+                        { tag: "span", content: this.options.label },
+                        { tag: "span", content: " *", attr: { class: "form-field__required", "aria-hidden": "true", hidden: this.options.required ? undefined : "hidden" } }
+                    ] },
+                { tag: "fieldset", attr: {
+                        class: "form-field__control", disabled: this.options.disabled ? "disabled" : undefined
+                    }, children: [this.control] },
+                { tag: "div", content: this.options.description, attr: {
+                        id: this.id + "-description", class: "form-field__description", hidden: this.options.description ? undefined : "hidden"
+                    } },
+                { tag: "div", content: this.validationMessage, attr: {
+                        id: this.id + "-error", class: "form-field__error", role: "status", "aria-live": "polite",
+                        hidden: this.validationMessage ? undefined : "hidden"
+                    } }
+            ]
         };
     }
+    onInit(renderer) { this.renderer = renderer; }
     onCreate(node) {
-        const InputDom = node.dom.firstElementChild.children[1];
-        if (this.options.type === "number") {
-            NumberInput(InputDom, this.options.numberOptions);
-        }
-        else if (this.options.type === "date") {
-            this.datepickerRef = DatePicker(InputDom, this.options.dateOptions);
+        this.dom = node.dom;
+        this.disposed = false;
+        this.dom.addEventListener("focus", this.onFocusEvent, true);
+        this.dom.addEventListener("blur", this.onBlurEvent, true);
+        this.dom.addEventListener("input", this.onInputEvent);
+        this.dom.addEventListener("change", this.onChangeEvent);
+        this.syncDom();
+    }
+    onRemove() {
+        var _a, _b, _c, _d;
+        this.disposed = true;
+        (_a = this.dom) === null || _a === void 0 ? void 0 : _a.removeEventListener("focus", this.onFocusEvent, true);
+        (_b = this.dom) === null || _b === void 0 ? void 0 : _b.removeEventListener("blur", this.onBlurEvent, true);
+        (_c = this.dom) === null || _c === void 0 ? void 0 : _c.removeEventListener("input", this.onInputEvent);
+        (_d = this.dom) === null || _d === void 0 ? void 0 : _d.removeEventListener("change", this.onChangeEvent);
+        this.removeDecorations();
+        this.input = null;
+        this.dom = null;
+    }
+    getControl() { return this.control; }
+    getValue() {
+        var _a, _b;
+        if (this.hasPendingValue) {
+            return this.pendingValue;
         }
-        else if (this.options.type === "autosuggest") {
-            AutoSuggest(InputDom, this.options.autoSuggestOptions);
+        const control = this.control;
+        if (typeof control.getValue === "function") {
+            return control.getValue();
         }
+        return ((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.options.value);
     }
-    onRemove(node) {
-        if (this.datepickerRef != null) {
-            this.datepickerRef.destroy();
+    setValue(value) {
+        const control = this.control;
+        if (this.legacySetter) {
+            this.legacySetter(value);
+        }
+        else if (typeof control.setValue === "function") {
+            control.setValue(value);
         }
+        if (!this.options.control || typeof control.setValue !== "function") {
+            this.pendingValue = value;
+            this.hasPendingValue = true;
+        }
+        this.syncDom();
+        this.queueSync();
     }
     validate() {
+        var _a, _b, _c, _d;
         const value = this.getValue();
-        if (this.options.required && !value) {
-            this.validationMessage = " ";
-            return false;
-        }
-        if (this.options.onValidate) {
-            const validationResult = this.options.onValidate(value);
-            if (validationResult === false) {
-                this.validationMessage = " ";
-                return false;
+        const input = this.input;
+        const empty = value == null || typeof value === "string" && value.trim() === "" || Array.isArray(value) && value.length === 0;
+        this.validated = true;
+        this.validationMessage = null;
+        if (!this.options.disabled && !(input === null || input === void 0 ? void 0 : input.matches(":disabled"))) {
+            if (this.options.required && empty) {
+                this.validationMessage = (_a = this.options.requiredMessage) !== null && _a !== void 0 ? _a : "This field is required.";
+            }
+            else if (typeof this.control.isValid === "function" && !this.control.isValid() ||
+                (input === null || input === void 0 ? void 0 : input.validity) && !input.validity.valid) {
+                this.validationMessage = (_b = this.options.invalidMessage) !== null && _b !== void 0 ? _b : "Enter a valid value.";
             }
-            if (validationResult !== true) {
-                this.validationMessage = validationResult;
-                return false;
+            else if (this.options.onValidate) {
+                const result = this.options.onValidate(value);
+                if (result !== true && result !== undefined) {
+                    this.validationMessage = typeof result === "string" && result.trim() ? result : (_c = this.options.invalidMessage) !== null && _c !== void 0 ? _c : "Enter a valid value.";
+                }
             }
         }
-        this.validationMessage = null;
-        return true;
+        this.syncDom();
+        (_d = this.renderer) === null || _d === void 0 ? void 0 : _d.refresh();
+        return !this.validationMessage;
     }
-    getValue() {
-        var _a;
-        return (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.value;
+    queueSync() {
+        if (this.syncQueued) {
+            return;
+        }
+        this.syncQueued = true;
+        Promise.resolve().then(() => { this.syncQueued = false; if (!this.disposed) {
+            this.syncDom();
+        } });
     }
-    setValue(value) {
-        const el = document.getElementById(this.id);
-        if (el == null) {
+    syncDom() {
+        var _a, _b, _c, _d;
+        if (!this.dom) {
+            return;
+        }
+        const container = this.dom.querySelector(".form-field__control");
+        const explicit = this.options.controlId ? document.getElementById(this.options.controlId) : null;
+        const target = explicit && container.contains(explicit) ? explicit :
+            container.querySelector('input:not([type=hidden]),textarea,select,button[role=combobox],[role=combobox],[tabindex]');
+        if (target !== this.input) {
+            this.removeDecorations();
+            this.input = target;
+            this.originalInvalid = target === null || target === void 0 ? void 0 : target.getAttribute("aria-invalid");
+            this.originalRequired = target === null || target === void 0 ? void 0 : target.getAttribute("required");
+            this.originalAriaRequired = target === null || target === void 0 ? void 0 : target.getAttribute("aria-required");
+            this.originalLabelledBy = target === null || target === void 0 ? void 0 : target.getAttribute("aria-labelledby");
+        }
+        if (!target) {
             return;
         }
-        el.value = value || "";
-        if (value) {
-            el.parentElement.classList.add("form-field--is-filled");
+        target.id = (_b = (_a = this.options.controlId) !== null && _a !== void 0 ? _a : this.options.id) !== null && _b !== void 0 ? _b : (target.id || this.id);
+        this.dom.querySelector(".form-field__label").htmlFor = target.id;
+        if (!("labels" in target) && !target.hasAttribute("aria-labelledby")) {
+            target.setAttribute("aria-labelledby", this.id + "-label");
+        }
+        if (this.hasPendingValue && "value" in target) {
+            target.value = this.pendingValue == null ? "" : String(this.pendingValue);
+            this.hasPendingValue = false;
+        }
+        if (this.options.maxLength != null && "maxLength" in target) {
+            target.maxLength = this.options.maxLength;
+        }
+        if (this.options.required) {
+            target.setAttribute("aria-required", "true");
+            if ("required" in target) {
+                target.required = true;
+            }
+        }
+        const descriptions = ((_c = target.getAttribute("aria-describedby")) !== null && _c !== void 0 ? _c : "").split(/\s+/).filter(id => id && id !== this.id + "-description" && id !== this.id + "-error");
+        if (this.options.description) {
+            descriptions.push(this.id + "-description");
+        }
+        if (this.validationMessage) {
+            descriptions.push(this.id + "-error");
+        }
+        if (descriptions.length) {
+            target.setAttribute("aria-describedby", descriptions.join(" "));
         }
         else {
-            el.parentElement.classList.remove("form-field--is-filled");
+            target.removeAttribute("aria-describedby");
         }
-    }
-    setInActive(evt, node) {
-        const formField = node.dom.parentElement.parentElement;
-        if (formField == null) {
-            return;
+        if (this.validationMessage) {
+            target.setAttribute("aria-invalid", "true");
+            this.ownedInvalid = true;
         }
-        setTimeout(() => {
-            formField.classList.remove("form-field--is-active");
-            if (node.dom.value === "") {
-                formField.classList.remove("form-field--is-filled");
+        else if (this.ownedInvalid) {
+            if (this.originalInvalid == null) {
+                target.removeAttribute("aria-invalid");
             }
             else {
-                formField.classList.add("form-field--is-filled");
+                target.setAttribute("aria-invalid", this.originalInvalid);
             }
-        }, 250);
-        if (this.options.onBlur) {
-            this.options.onBlur(evt, node);
-            return;
+            this.ownedInvalid = false;
         }
-        return false;
+        const value = this.getValue();
+        this.dom.classList.toggle("form-field--is-filled", value != null && (!Array.isArray(value) || value.length > 0) && String(value) !== "");
+        this.dom.classList.toggle("form-field--invalid", !!this.validationMessage);
+        const error = this.dom.querySelector(".form-field__error");
+        error.textContent = (_d = this.validationMessage) !== null && _d !== void 0 ? _d : "";
+        error.hidden = !this.validationMessage;
     }
-    setActive(evt, node) {
-        const formField = node.dom.parentElement.parentElement;
-        if (formField == null) {
+    removeDecorations() {
+        var _a;
+        if (!this.input) {
             return;
         }
-        formField.classList.add("form-field--is-active");
-        if (this.options.onFocus) {
-            this.options.onFocus(evt, node);
-            return;
+        const ids = ((_a = this.input.getAttribute("aria-describedby")) !== null && _a !== void 0 ? _a : "").split(/\s+/).filter(id => id && id !== this.id + "-description" && id !== this.id + "-error");
+        if (ids.length) {
+            this.input.setAttribute("aria-describedby", ids.join(" "));
         }
-        return false;
-    }
-    onInput(evt, node) {
-        if (this.options.onInput) {
-            this.options.onInput(evt, node);
-            return;
+        else {
+            this.input.removeAttribute("aria-describedby");
+        }
+        if (this.ownedInvalid) {
+            if (this.originalInvalid == null) {
+                this.input.removeAttribute("aria-invalid");
+            }
+            else {
+                this.input.setAttribute("aria-invalid", this.originalInvalid);
+            }
         }
+        this.ownedInvalid = false;
+        if (this.options.required) {
+            if (this.originalAriaRequired == null) {
+                this.input.removeAttribute("aria-required");
+            }
+            else {
+                this.input.setAttribute("aria-required", this.originalAriaRequired);
+            }
+            if ("required" in this.input) {
+                if (this.originalRequired == null) {
+                    this.input.removeAttribute("required");
+                }
+                else {
+                    this.input.setAttribute("required", this.originalRequired);
+                }
+            }
+        }
+        if (this.input.getAttribute("aria-labelledby") === this.id + "-label") {
+            if (this.originalLabelledBy == null) {
+                this.input.removeAttribute("aria-labelledby");
+            }
+            else {
+                this.input.setAttribute("aria-labelledby", this.originalLabelledBy);
+            }
+        }
+    }
+    callbackNode(event) {
+        const target = event.target;
+        return { tag: target.tagName.toLowerCase(), dom: target, attr: { id: target.id } };
     }
 }

package/lib/components/form-field/FormFieldStyle.scss

@@ -1,87 +1,36 @@
-
-$primary-color: #3B99FF;
-$animation-duration: 0.4s;
-
-@mixin label-active() {
-  font-size: 0.7em;
-  transform: translateY(-14px);
-}
-
-.form-field {
-  display: block;
-  margin-bottom: 16px;
-
-  .failed__valid {
-    .form-field__input {
-      border-color: #cc0000!important;
-    }
-    .form-field__label {
-      color: #aa0000!important;
-    }
-  }
-  
-  &--is-active {
-    .form-field__control {
-      &::after {
-        border-bottom: 2px solid $primary-color;
-        transform: scaleX(150);
-      }
-    }
-    .form-field__label {
-      color: $primary-color;
-      @include label-active();
-    }
-  }
-  &--is-filled {
-    .form-field__label {
-      @include label-active();
-    }
-  }
-}
-.form-field__label {
-  color:#606060;
-  display: block;
-  font-weight: normal;
-  left: 0;
-  margin: 0;
-  padding: 1rem 0.5rem 0 ;
-  position: absolute;
-  top: 0;
-  transition: all $animation-duration;
-  width: 100%;
-}
-.form-field__control {
-  background: #f6f6f6;
-  border-radius: 0.3rem 0.3rem 0 0;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  
-  &::after {
-    border-bottom: 2px solid $primary-color;
-    bottom: 0;
-    content: "";
-    display: block;
-    left: 0;
-    margin: 0 auto;
-    position: absolute;
-    right: 0;
-    transform: scaleX(0);
-    transition: all $animation-duration;
-    width: 1%;
-  }
-}
-.form-field__input,
-.form-field__textarea {
-  box-sizing: border-box;
-  border:none;
-  appearance: none;
-  background: transparent;
-  border-bottom: 1px solid #999;
-  color: #333;
-  display: block;
-  margin-top: 1.3rem;
-  outline: 0;
-  padding: 0 0.3rem 0.2rem 0.3rem;
-  width: 100%;
-}
+@import "../../ui/theme.css";
+
+.form-field {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: .375rem;
+    min-width: 0;
+    max-width: 100%;
+    margin: 0 0 1rem;
+    color: var(--jsl-color-text);
+    font: inherit;
+    font-size: .875rem;
+}
+.form-field__label { display: block; color: var(--jsl-color-text-secondary); font-size: .75rem; font-weight: 500; line-height: 1.5; }
+.form-field__required { color: var(--jsl-color-text-muted); }
+.form-field__required[hidden] { display: none; }
+.form-field__control { display: block; min-width: 0; border: 0; margin: 0; padding: 0; }
+.form-field__control > .jsl-input, .form-field__control > .jsl-date-input,
+.form-field__control > .select-comp, .form-field__control > .date-time-comp { width: 100%; }
+.form-field__description, .form-field__error { color: var(--jsl-color-text-muted); font-size: .75rem; line-height: 1.5; }
+.form-field__error { color: var(--jsl-color-danger); }
+.form-field__description[hidden], .form-field__error[hidden] { display: none; }
+.form-field--invalid > .form-field__label { color: var(--jsl-color-danger); }
+.form-field--invalid > .form-field__control .sel-expander { border-color: var(--jsl-color-danger); }
+.form-field--floating { padding-top: .5rem; }
+.form-field--floating > .form-field__label {
+    position: absolute;
+    top: 0;
+    left: .625rem;
+    z-index: 1;
+    max-width: calc(100% - 1.25rem);
+    padding: 0 .25rem;
+    background: var(--jsl-color-surface);
+}
+.form-field:has(.form-field__control:disabled) > .form-field__label { color: var(--jsl-color-disabled-text); }

package/lib/components/form-field/create-control.d.ts

@@ -0,0 +1,7 @@
+import { IJSLComponent } from "jsl-render";
+import type { IFormFieldOptions } from "./FormFieldComponent";
+/** Compatibility factory; editing behavior lives in the individual controls. */
+export declare function createFormFieldControl(options: IFormFieldOptions<any>, id: string): {
+    control: IJSLComponent;
+    setValue(value: any): void;
+};

package/lib/components/form-field/create-control.js

@@ -0,0 +1,48 @@
+import { InputComponent } from "../input/InputComponent";
+import { NumberComponent } from "../number/NumberComponent";
+import { DateComponent } from "../date/DateComponent";
+import { AutoSuggestComponent } from "../auto-suggest/AutoSuggestComponent";
+import { date } from "../../core/date";
+import { numeric } from "../../core/numeric";
+/** Compatibility factory; editing behavior lives in the individual controls. */
+export function createFormFieldControl(options, id) {
+    var _a, _b, _c;
+    const common = { id, enabled: !options.disabled, ...(options.placeholder != null ? { placeholder: options.placeholder } : {}) };
+    const text = options.value == null ? "" : String(options.value);
+    switch (options.type) {
+        case "number": {
+            const control = new NumberComponent({
+                ...options.numberOptions, ...common,
+                enabled: !options.disabled && ((_a = options.numberOptions) === null || _a === void 0 ? void 0 : _a.enabled) !== false,
+                value: options.value != null ? numeric.parse(text) : (_b = options.numberOptions) === null || _b === void 0 ? void 0 : _b.value
+            });
+            return { control, setValue: value => control.setValue(value == null ? undefined : numeric.parse(String(value))) };
+        }
+        case "date": {
+            const parse = (value) => {
+                var _a, _b;
+                try {
+                    return value ? ((_b = (_a = options.dateOptions) === null || _a === void 0 ? void 0 : _a.parse) !== null && _b !== void 0 ? _b : date.parse)(String(value)) : null;
+                }
+                catch (_c) {
+                    return null;
+                }
+            };
+            const control = new DateComponent({ ...options.dateOptions, ...common, value: parse(text) });
+            return { control, setValue: value => control.setValue(parse(value)) };
+        }
+        case "autosuggest": {
+            const control = new AutoSuggestComponent({
+                source: (term, suggest) => suggest([]),
+                ...options.autoSuggestOptions, ...common, value: text, maxLength: options.maxLength
+            });
+            return { control, setValue: value => control.setValue(value !== null && value !== void 0 ? value : "") };
+        }
+        default: {
+            const control = new InputComponent({
+                ...common, type: (_c = options.type) !== null && _c !== void 0 ? _c : "text", value: text, maxLength: options.maxLength
+            });
+            return { control, setValue: value => control.setValue(value !== null && value !== void 0 ? value : "") };
+        }
+    }
+}

package/lib/components/input/InputComponent.d.ts

@@ -1,4 +1,5 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import "../../ui/input.css";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 import { EventHandler } from "../../interaction/eventhandler";
 import { IDataConverter } from "../../interaction/dataconverter";
 export interface IInputOptions<T = any> {
@@ -17,17 +18,33 @@ export interface IInputOptions<T = any> {
     bindOnInput?: boolean;
     maxLength?: number;
     type?: "input" | "text" | "password" | "textarea" | "color" | "time" | "email" | "month" | "number" | "search" | "tel" | "url" | "week";
+    unstyled?: boolean;
+    ariaLabel?: string;
+    readOnly?: boolean;
+    rows?: number;
+    autocomplete?: string;
 }
 export declare class InputComponent<T = any> implements IJSLComponent {
     private options;
     private currentDom;
+    private modelValue;
+    private initialTextValue;
+    protected renderer: JSLRender;
     get onChange(): EventHandler<string>;
     get onInput(): EventHandler<string>;
     constructor(options: IInputOptions<T>);
     render(): IJSLVNode;
     getValue(): string;
+    /** Updates the input and writable binding without raising events. */
     setValue(value: string): void;
+    focus(): void;
+    onInit(renderer: JSLRender): void;
     onCreate(node: IJSLVNode): void;
+    onUpdate(node: IJSLVNode): void;
+    onRemove(): void;
+    private hasBinding;
+    private readModel;
+    private writeModel;
     private raiseChangeEvent;
     private raiseInputEvent;
 }