@optionfactory/fml 9.0.0-rc16 → 9.0.0-rc18

package/dist/fml.iife.js

@@ -7848,6 +7848,8 @@ var fml = (function (exports) {
 
     const INPUT_MODES = { numeric: 'numeric', decimal: 'decimal' };
 
+    const SEGMENTED = new Set(['date', 'time', 'datetime-local', 'month', 'week']);
+
     const signed = (v, digits) => (v.startsWith('-') ? '-' : '') + digits(v);
 
     const NUMERIC_DIGITS = {
@@ -7909,14 +7911,18 @@ var fml = (function (exports) {
      *   `autocomplete` attribute of the nearest enclosing `<form>`, which the
      *   platform does not pass on because the control carries `form=""`.
      * - `uppercase`, `trim` and `v-type` shape the value as it is read; see `value`.
-     *
-     * The control's native `change` is stopped and republished as the field's own.
+     * - The control's native `change` is stopped and the field dispatches its own
+     *   once the user commits a new value, as a text input does. A date, time,
+     *   datetime-local, month or week control fires its native `change` while its
+     *   segments are typed, as soon as they make a valid value; for those the field
+     *   reports when the control is left or Enter is pressed, at once for a value
+     *   picked from the browser's picker, and never a half-typed value.
      *
      * A subclass template may render more than one control, as the compare filters
      * render the two bounds of a range: the first is `_input`, the one the field is
-     * named by and whose `change` it republishes, and every one of them gets the
-     * inputmode, `autocomplete`, the `input-` passthrough, the keystroke filter and
-     * the placeholder. The passthrough leaves `input-id` to the first alone, so no
+     * named by, and every one of them gets the inputmode, `autocomplete`, the
+     * `input-` passthrough, the keystroke filter, the placeholder and the `change`
+     * reporting. The passthrough leaves `input-id` to the first alone, so no
      * two controls share an id.
      */
     class Input extends Field {
@@ -7983,10 +7989,6 @@ var fml = (function (exports) {
             for (const control of this.#controls) {
                 this.#configure(control, mode, autocomplete, strip);
             }
-            this._input.addEventListener('change', (evt) => {
-                evt.stopPropagation();
-                this._notifyChange();
-            });
             return {
                 fragment,
                 control: this._input,
@@ -8010,6 +8012,7 @@ var fml = (function (exports) {
             if (control !== this._input) {
                 Attributes.set(control, 'id', id || null);
             }
+            this.#reportChanges(control);
             control.addEventListener('input', () => {
                 if (!strip) {
                     return;
@@ -8028,14 +8031,55 @@ var fml = (function (exports) {
                 control.setSelectionRange(caret, caret);
             });
         }
+        /** @param {HTMLInputElement|HTMLTextAreaElement} control */
+        #reportChanges(control) {
+            if (!SEGMENTED.has(control.type)) {
+                control.addEventListener('change', (evt) => {
+                    evt.stopPropagation();
+                    this._notifyChange();
+                });
+                return;
+            }
+            /** @type {string|null} */
+            let committed = null;
+            let typed = false;
+            const commit = () => {
+                typed = false;
+                const now = JSON.stringify(this.value);
+                if (now === committed) {
+                    return;
+                }
+                committed = now;
+                this._notifyChange();
+            };
+            control.addEventListener('focus', () => {
+                committed = JSON.stringify(this.value);
+            });
+            control.addEventListener('keydown', (/** @type any */ evt) => {
+                if (evt.key === 'Enter' && !evt.isComposing) {
+                    commit();
+                    return;
+                }
+                typed = true;
+            });
+            control.addEventListener('blur', commit);
+            control.addEventListener('change', (evt) => {
+                evt.stopPropagation();
+                if (!typed) {
+                    commit();
+                }
+            });
+        }
         /**
          * The control's text, shaped in this order: upper cased under `uppercase`,
          * trimmed under `trim`, `null` when that leaves it empty, every `,` read as
          * `.` for `type="decimal"`, and decoded to a number under
          * `v-type="number"`, where text that does not decode is answered as it is.
          * Writing `null`, `undefined` or `''` empties the control; anything else is
-         * written as its string. Answers a `string`, a `number` or `null`; typed
-         * `any` because subclasses answer other values.
+         * written as its string. Writing the text the control already holds leaves
+         * it untouched, so a date or time control keeps the segments being typed.
+         * Answers a `string`, a `number` or `null`; typed `any` because subclasses
+         * answer other values.
          * @type {any}
          */
         get value() {
@@ -8055,7 +8099,11 @@ var fml = (function (exports) {
             return normalized;
         }
         set value(value) {
-            this._input.value = value === '' || value === undefined ? null : value;
+            const text = value === '' || value === undefined || value === null ? '' : `${value}`;
+            if (this._input.value === text) {
+                return;
+            }
+            this._input.value = text;
         }
         /**
          * The control's placeholder, `null` when there is none. The control always
@@ -8324,7 +8372,7 @@ var fml = (function (exports) {
         }
         /** @param {string|null|undefined} v an ISO instant; a falsy value empties the input */
         set value(v) {
-            this._input.value = v ? Instant.isoToLocal(v) : '';
+            super.value = v ? Instant.isoToLocal(v) : '';
         }
         /**
          * The lower bound as a UTC ISO instant.
@@ -8357,7 +8405,6 @@ var fml = (function (exports) {
         }
         /** @param {string|null} v */
         set step(v) {
-
             this._input.step = v ?? '';
         }
     }
@@ -10234,6 +10281,15 @@ var fml = (function (exports) {
         #query() {
             return this.#editing ? this.#input.value : '';
         }
+        /**
+         * The text typed to search the vocabulary: what the dropdown was last
+         * asked to match. `''` while the field is not being searched, its control
+         * then showing the selection's label rather than a query.
+         * @returns {string}
+         */
+        get query() {
+            return this.#query();
+        }
         #display() {
             const entry = this.#values.values().next().value;
             this.#input.value = this.#multiple ? '' : (entry?.label ?? '');
@@ -11910,10 +11966,6 @@ var fml = (function (exports) {
                 },
             });
             this.operators = this.declared('operators');
-            this._value2.addEventListener('change', (evt) => {
-                evt.stopPropagation();
-                this._notifyChange();
-            });
             if (this._operator.value === null) {
                 this._showDefaultOperator();
             }
@@ -12391,9 +12443,7 @@ var fml = (function (exports) {
          */
         get criterion() {
             const token = this._value.value;
-            return asCriterion(labelTextOf(this), this._operator.value, [
-                token === '' ? '' : booleanValueLabel(token),
-            ]);
+            return asCriterion(labelTextOf(this), this._operator.value, [token === '' ? '' : booleanValueLabel(token)]);
         }
         /**
          * The field's own disabled claim. Setting it disables the value button and
@@ -12682,6 +12732,18 @@ var fml = (function (exports) {
         get section() {
             return this.#section;
         }
+        /**
+         * Dispatches the dismissal on the host and calls `close` unless a listener
+         * prevented it. A dismissal that is not cancelable announces a close the
+         * platform makes whatever the page does, so `close` is not called for it.
+         * @param {CustomEvent} asked
+         * @param {() => void} close
+         */
+        dismiss(asked, close) {
+            if (this.#host.dispatchEvent(asked) && asked.cancelable) {
+                close();
+            }
+        }
         /**
          * Calls `dismiss` when a press and its release both land on the backdrop,
          * so a selection dragged out of the panel and released outside does not.
@@ -12820,6 +12882,18 @@ var fml = (function (exports) {
      * and a press and release both on the backdrop close the dialog, each as a
      * dismissal, as Escape does.
      *
+     * Before any of those three gestures closes it, the element dispatches a
+     * cancelable, non-bubbling `dialog:dismiss` with `detail: { reason }`, the
+     * reason being `button`, `backdrop` or `escape`; a listener calling
+     * `preventDefault()` keeps it open, to guard unsaved edits. A `data-result`
+     * button, `close-on-submit` and `close()` answer rather than dismiss, and
+     * dispatch none.
+     *
+     * The platform lets a page refuse Escape once per user interaction: a second
+     * Escape with no click or keystroke in between closes the dialog whatever the
+     * page does, `requires-answer` included. That close is still announced by a
+     * `dialog:dismiss`, which is then not cancelable.
+     *
      * `requires-answer` withholds the close button and refuses Escape and the
      * backdrop, so the dialog is closed only by a button carrying `data-result`
      * or from code through `close()`.
@@ -12892,21 +12966,32 @@ var fml = (function (exports) {
                     this.#dialog.close(result);
                 }
             });
+            const dismiss = (/** @type {'button'|'backdrop'|'escape'} */ reason, platformCloses = false) =>
+                this.#sections.dismiss(
+                    new CustomEvent('dialog:dismiss', { cancelable: !platformCloses, detail: { reason } }),
+                    () => this.#dialog.close(''),
+                );
             if (!requiresAnswer) {
-                this.#sections.onBackdrop(() => this.#dialog.close(''));
+                this.#sections.onBackdrop(() => dismiss('backdrop'));
             }
-            fragment
-                .querySelector('[data-ref=close]')
-                ?.addEventListener('click', () => this.#dialog.close(''));
+            fragment.querySelector('[data-ref=close]')?.addEventListener('click', () => dismiss('button'));
             if (closeOnSubmit) {
                 this.#sections.onSubmitted((response) => {
                     this.#answer = { dismissed: false, result: null, response };
                     this.#dialog.close('submitted');
                 });
             }
-            if (requiresAnswer) {
-                this.#dialog.addEventListener('cancel', (/** @type any */ e) => e.preventDefault());
-            }
+            this.#dialog.addEventListener('cancel', (/** @type any */ e) => {
+                if (!e.cancelable) {
+                    this.#dialog.returnValue = '';
+                    dismiss('escape', true);
+                    return;
+                }
+                e.preventDefault();
+                if (!requiresAnswer) {
+                    dismiss('escape');
+                }
+            });
             this.replaceChildren(fragment);
             wireTargets();
         }
@@ -13107,7 +13192,14 @@ var fml = (function (exports) {
      * default, when absent) or `start`, following the writing direction.
      *
      * The close button, Escape, and a press and release both on the backdrop all
-     * go through `close()`. Every close dispatches a non-bubbling `close` event on
+     * go through `close()`, once a cancelable, non-bubbling `drawer:dismiss` with
+     * `detail: { reason }` (`button`, `backdrop` or `escape`) has been dispatched
+     * on the element and no listener prevented it: `preventDefault()` keeps the
+     * drawer open, to guard unsaved edits. `close()` and `close-on-submit`
+     * dispatch none. The platform lets a page refuse Escape once per user
+     * interaction: a second Escape with no click or keystroke in between closes
+     * the drawer at once, without the slide, and its `drawer:dismiss` is then not
+     * cancelable. Every close dispatches a non-bubbling `close` event on
      * the element with `detail: { dismissed, response }`: `{ dismissed: false,
      * response }` when a form closed it under `close-on-submit`, and
      * `{ dismissed: true, response: null }` for any other close.
@@ -13163,13 +13255,23 @@ var fml = (function (exports) {
             if (placement) {
                 this.#dialog.setAttribute('placement', placement);
             }
+            const dismiss = (/** @type {'button'|'backdrop'|'escape'} */ reason, platformCloses = false) =>
+                this.#sections.dismiss(
+                    new CustomEvent('drawer:dismiss', { cancelable: !platformCloses, detail: { reason } }),
+                    () => this.close(),
+                );
             /** @type {HTMLElement} */ (fragment.querySelector('[data-ref=close]')).addEventListener('click', () =>
-                this.close(),
+                dismiss('button'),
             );
-            this.#sections.onBackdrop(() => this.close());
+            this.#sections.onBackdrop(() => dismiss('backdrop'));
             this.#dialog.addEventListener('cancel', (e) => {
+                if (!e.cancelable) {
+                    this.#stopSlidingOut();
+                    dismiss('escape', true);
+                    return;
+                }
                 e.preventDefault();
-                this.close();
+                dismiss('escape');
             });
             this.#dialog.addEventListener('close', () => {
                 this.dispatchEvent(
@@ -13852,11 +13954,9 @@ var fml = (function (exports) {
         }
         /**
          * Moves to the section carrying `data-step="<ref>"`. A move makes that step
-         * and section current, moves the focus to the section, dispatches `change`
-         * on the host (not bubbling) with detail `{ index, step }`, then fires the
-         * section requests for it. A native `change` of a control inside a section
-         * bubbles through the host under the same name, so a listener tells the
-         * two apart by `e.target`.
+         * and section current, moves the focus to the section, dispatches
+         * `wizard:change` on the host (not bubbling) with detail `{ index, step }`,
+         * then fires the section requests for it.
          * @param {string} ref the section's `data-step`
          * @returns {Promise<any[] | undefined> | undefined} a promise resolving to
          * the answers once they are delivered, or to undefined when nobody
@@ -13913,7 +14013,7 @@ var fml = (function (exports) {
             this.#apply(clamped);
             this.#sections[this.#index].focus();
             if (this.rendered) {
-                this.dispatchEvent(new CustomEvent('change', { detail: { index: this.#index, step: this.step } }));
+                this.dispatchEvent(new CustomEvent('wizard:change', { detail: { index: this.#index, step: this.step } }));
             }
             return this.#enter(clamped);
         }