@optionfactory/fml 9.0.0-rc10 → 9.0.0-rc11

package/dist/fml.iife.js

@@ -7636,6 +7636,22 @@ var fml = (function (exports) {
      */
     const inheritedAutocomplete = (el) => el.closest('form')?.getAttribute('autocomplete') ?? null;
 
+    /** Rendering a text input is what costs these the native min/max/step enforcement. */
+    const INPUT_MODES = { numeric: 'numeric', decimal: 'decimal' };
+
+    const signed = (v, digits) => (v.startsWith('-') ? '-' : '') + digits(v);
+
+    const NUMERIC_FILTERS = {
+        numeric: (v) => signed(v, (t) => t.replace(/\D/g, '')),
+        //one separator, the first: the rest are a slip while typing, not a value
+        decimal: (v) =>
+            signed(v, (t) => {
+                const kept = t.replace(/[^\d.,]/g, '');
+                const at = kept.search(/[.,]/);
+                return at === -1 ? kept : kept.slice(0, at + 1) + kept.slice(at + 1).replace(/[.,]/g, '');
+            }),
+    };
+
     const warnedBoth = new WeakSet();
     const filterOf = (el) => {
         const keep = el.declared('keep');
@@ -7655,7 +7671,7 @@ var fml = (function (exports) {
             const re = compiled('reject', reject);
             return re && ((v) => v.replace(re, ''));
         }
-        return null;
+        return NUMERIC_FILTERS[el._type()] ?? null;
     };
 
     /** A labelled text input over any native type or textarea; the temporal inputs are its subclasses. */
@@ -7691,9 +7707,17 @@ var fml = (function (exports) {
             return this.declared('type') ?? (this.declared('v-type') === 'number' ? 'number' : 'text');
         }
         _build({ slots }) {
-            const type = this._type();
+            const declared = this._type();
+            const mode = INPUT_MODES[declared];
+            //a numeric widget is a text input: the type names the keyboard, not the
+            //control, so the rendered markup stays valid html
+            const type = mode ? 'text' : declared;
             const fragment = this.template().withOverlay({ type, slots }).render();
             this._input = fragment.querySelector('input,textarea');
+            if (mode) {
+                //before the passthrough, which stays the last word
+                Attributes.set(this._input, 'inputmode', mode);
+            }
 
             //the browser reads autocomplete off the control it is classifying, so the
             //field's own token, or the form's where it declares none, is put there.
@@ -7745,13 +7769,15 @@ var fml = (function (exports) {
             if (trimmed === '') {
                 return null;
             }
+            //the wire carries a dot wherever the comma is what the keyboard shows
+            const normalized = this._type() === 'decimal' ? trimmed.replaceAll(',', '.') : trimmed;
             if (this.declared('v-type') === 'number') {
                 //typed values are an explicit opt in, as the select's k-type: blank
                 //stays null, and a value that does not decode is kept as it is
-                const n = Number(trimmed);
-                return Number.isNaN(n) ? trimmed : n;
+                const n = Number(normalized);
+                return Number.isNaN(n) ? normalized : n;
             }
-            return trimmed;
+            return normalized;
         }
         set value(value) {
             this._input.value = value === '' || value === undefined ? null : value;
@@ -8743,10 +8769,27 @@ var fml = (function (exports) {
                 method: el.declared('method') ?? 'POST',
                 mode: el.declared('mode'),
                 prefetch: el.declared('preload'),
-                revision: el.declared('revision'),
+                revision: SelectLoader.#revisionFrom(el),
                 responseMapper: SelectLoader.#responseMapperFrom(el),
             });
         }
+        static #revisionFrom(el) {
+            const declared = el.declared('revision');
+            if (declared !== '') {
+                return declared;
+            }
+            const configured = el.component('revision');
+            if (configured === undefined || configured === null) {
+                //not caching while the markup says to cache is the quiet failure
+                //this branch exists to make loud
+                console.warn(
+                    "a valueless revision asks the registry for one, and no 'revision' component is defined: the vocabulary will not be cached",
+                    el,
+                );
+                return null;
+            }
+            return typeof configured === 'function' ? configured() : configured;
+        }
         static #responseMapperFrom(el) {
             if (el.declared('k-expr') && el.declared('l-expr')) {
                 return (response) => {
@@ -8779,7 +8822,7 @@ var fml = (function (exports) {
         static slots = true;
         static template = `
         <ful-spinner class="centered" role="status" hidden><span class="ful-sr-only">{{ #l10n:t('spinner.loading') }}</span></ful-spinner>
-        <p data-ref="empty" aria-live="polite" hidden>{{ #l10n:t('dropdown.empty') }}</p>
+        <ful-empty data-ref="empty" aria-live="polite" hidden>{{ #l10n:t('dropdown.empty') }}</ful-empty>
         <menu tabindex="-1" role="listbox" hidden></menu>
     `;
         static templates = {
@@ -8801,7 +8844,7 @@ var fml = (function (exports) {
                 ? this.template('options')
                 : Templates.fromFragment(slots.default);
             this.#spinner = fragment.querySelector('ful-spinner');
-            this.#empty = fragment.querySelector('p[data-ref=empty]');
+            this.#empty = fragment.querySelector('[data-ref=empty]');
             this.#menu = fragment.querySelector('menu');
             //the listbox is named so a combobox can point aria-controls and
             //aria-activedescendant at it: a reference to an unnamed element resolves
@@ -9161,7 +9204,7 @@ var fml = (function (exports) {
                     return;
                 }
                 this.#abortdload();
-                this.#close();
+                this.#close(true);
             });
             this.#input.addEventListener('keydown', (e) => {
                 if (!this._interactive()) {
@@ -9194,7 +9237,6 @@ var fml = (function (exports) {
                 this.#editing = false;
                 this.#values.set(this.#coerceKey(e.detail.entry.key), e.detail.entry);
                 this.#changed();
-                this.#syncBadges();
                 this.#input.focus();
                 this.#ddmenu.hide();
                 if (!this.#multiple) {
@@ -9251,7 +9293,6 @@ var fml = (function (exports) {
             }
             this.#values.delete(key);
             this.#changed();
-            this.#syncBadges();
         }
         #chipKeydown(e, badge) {
             switch (e.code) {
@@ -9347,7 +9388,7 @@ var fml = (function (exports) {
                 }
                 case 'Tab': {
                     this.#abortdload();
-                    this.#close();
+                    this.#close(true);
                     break;
                 }
             }
@@ -9363,12 +9404,25 @@ var fml = (function (exports) {
                 }
                 return;
             }
-            this.#browse();
-            this.#ddmenu.moveOrShow(forward, () => this.#loader.load(this.#input.value), [...this.#values.keys()]);
+            this.#ddmenu.moveOrShow(forward, () => this.#loader.load(this.#query()), [...this.#values.keys()]);
         }
-        #close() {
+        /**
+         * @param commit whether the user is leaving the field, which only a blur or
+         * a Tab is: Escape cancels, and closing the list or a claim landing leaves
+         * the edit in progress
+         */
+        #close(commit = false) {
             this.#ddmenu.hide();
+            //emptying the box and leaving is a clear: redisplaying the label would
+            //discard the edit without a word. A multiple select keeps its box empty
+            //by design, so only a single one can mean it
+            const cleared =
+                commit && this.#editing && !this.#multiple && this.#input.value === '' && this.#values.size !== 0;
             this.#editing = false;
+            if (cleared) {
+                this.#values.clear();
+                this.#changed();
+            }
             this.#display();
         }
         /**
@@ -9377,14 +9431,15 @@ var fml = (function (exports) {
          * highlighted.
          */
         #open() {
-            this.#browse();
-            return this.#ddmenu.show(() => this.#loader.load(this.#input.value), [...this.#values.keys()]);
+            return this.#ddmenu.show(() => this.#loader.load(this.#query()), [...this.#values.keys()]);
         }
-        #browse() {
-            if (this.#editing) {
-                return;
-            }
-            this.#input.value = '';
+        /**
+         * Browsing is the whole vocabulary, not the label already chosen, and the
+         * label stays on screen while it happens: a select showing nothing reads as
+         * an empty one.
+         */
+        #query() {
+            return this.#editing ? this.#input.value : '';
         }
         #display() {
             const entry = this.#values.values().next().value;
@@ -9395,6 +9450,9 @@ var fml = (function (exports) {
             return [...this.#values.values()];
         }
         #changed() {
+            //settled before the event: a listener reading the control during it has to
+            //see the selection that caused it
+            this.#syncBadges();
             //the detail carries the keys the value property answers with, as every
             //other field's does, and the labeled selection beside them
             this._notifyChange({ entry: this.entry });
@@ -10041,6 +10099,7 @@ var fml = (function (exports) {
         static slots = true;
         static config = {
             searchIcon: 'search',
+            emptyIcon: 'inbox',
         };
         static template = `
         <ful-form data-tpl-if="slots.filters">
@@ -10054,10 +10113,21 @@ var fml = (function (exports) {
                 <tbody data-ref="initial">
                     <tr>
                         <td data-tpl-colspan="schema.length">
-                            <div>
-                                <p data-tpl-if="config.searchIcon"><ful-icon data-tpl-name="config.searchIcon" aria-hidden="true"></ful-icon></p>
+                            <ful-empty>
+                                <ful-icon data-tpl-if="config.searchIcon" data-tpl-name="config.searchIcon" aria-hidden="true"></ful-icon>
                                 {{ #l10n:t('table.initial') }}
-                            </div>
+                            </ful-empty>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="empty" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length">
+                            <ful-empty data-tpl-if="slots.empty">{{{{ slots.empty }}}}</ful-empty>
+                            <ful-empty data-tpl-if="!slots.empty">
+                                <ful-icon data-tpl-if="config.emptyIcon" data-tpl-name="config.emptyIcon" aria-hidden="true"></ful-icon>
+                                {{ #l10n:t('table.no-data') }}
+                            </ful-empty>
                         </td>
                     </tr>
                 </tbody>
@@ -10087,11 +10157,6 @@ var fml = (function (exports) {
     `;
         static templates = {
             row: `
-            <tr data-tpl-if="pageResponse.data.length == 0">
-                <td data-tpl-colspan="schema.length">
-                    {{ #l10n:t('table.no-data') }}
-                </td>
-            </tr>
             {{{{ schema.rowsTemplate.withOverlay({'rows': pageResponse.data}).render() }}}}
         `,
         };
@@ -10100,6 +10165,7 @@ var fml = (function (exports) {
         #body;
         #loading;
         #noAutoload;
+        #empty;
         #feedback;
         #paginator;
         #sorters;
@@ -10150,6 +10216,7 @@ var fml = (function (exports) {
             this.#body = table.querySelector(':scope > tbody');
             this.#loading = table.querySelector(':scope > tbody[data-ref=loading]');
             this.#noAutoload = table.querySelector(':scope > tbody[data-ref=initial]');
+            this.#empty = table.querySelector(':scope > tbody[data-ref=empty]');
             this.#feedback = table.querySelector(':scope > tbody[data-ref=feedback]');
             this.#paginator = Nodes.queryChildren(fragment, 'ful-pagination');
             this.replaceChildren(fragment);
@@ -10240,6 +10307,7 @@ var fml = (function (exports) {
             this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
             this.#feedback.setAttribute('hidden', '');
             this.#noAutoload.setAttribute('hidden', '');
+            this.#empty.setAttribute('hidden', '');
             this.setAttribute('aria-busy', 'true');
             try {
                 const pageResponse = await this.#loader.load(pageRequest, sortRequest, filterRequest);
@@ -10248,6 +10316,16 @@ var fml = (function (exports) {
                 }
                 this.#latestRequest = { pageRequest, sortRequest, filterRequest };
                 this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
+                //settled before the event: a listener counting what loaded has to
+                //see the table as it now is
+                this.removeAttribute('aria-busy');
+                this.dispatchEvent(
+                    new CustomEvent('load:success', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, response: pageResponse },
+                    }),
+                );
             } catch (/** @type any */ error) {
                 if (claim.stale) {
                     //the newer load owns the table and its outcome: a superseded
@@ -10264,12 +10342,15 @@ var fml = (function (exports) {
                     error,
                     `${error}`,
                 );
+                this.removeAttribute('aria-busy');
+                this.dispatchEvent(
+                    new CustomEvent('load:failure', {
+                        bubbles: true,
+                        cancelable: false,
+                        detail: { pageRequest, sortRequest, filterRequest, exception: error },
+                    }),
+                );
                 throw error;
-            } finally {
-                //a superseded load owns nothing, the newer one's busy state included
-                if (!claim.stale) {
-                    this.removeAttribute('aria-busy');
-                }
             }
         }
         /** Hands the loader to the callback, for runtime reconfigurations. */
@@ -10306,6 +10387,7 @@ var fml = (function (exports) {
                     })
                     .render(),
             );
+            this.#empty.toggleAttribute('hidden', pageResponse.data.length !== 0);
             //one move, one repaint: the page and the count are the same state
             this.#paginator.update({ current: pageRequest.page, total: pages });
         }
@@ -10559,6 +10641,19 @@ var fml = (function (exports) {
     const sensitivityLabel = (sensitivity) => t(`filters.sensitivity.${sensitivity}`);
     const booleanValueLabel = (token) => t(token === '' ? 'filters.boolean.any' : `filters.boolean.${token}`);
 
+    /**
+     * The operands are the words the reader chose, not the keys the wire carries.
+     * @typedef {{ label: string|null, operator: string|null, operands: string[] }} FilterCriterion
+     */
+
+    const labelTextOf = (filter) => filter.querySelector(':scope > label')?.textContent.trim() || null;
+
+    /** @returns {FilterCriterion|null} */
+    const asCriterion = (label, operator, operands) => {
+        const shown = operands.filter((o) => o !== null && o !== undefined && `${o}` !== '');
+        return shown.length === 0 ? null : { label, operator, operands: shown.map((o) => `${o}`) };
+    };
+
     /**
      * The shared shape of every operator-and-operands filter: an operator menu, one
      * or two operands of the type the subclass declares, and a tuple that mirrors
@@ -10698,6 +10793,18 @@ var fml = (function (exports) {
         _syncBetween() {
             this._value2.toggleAttribute('hidden', this._operator.value !== 'BETWEEN');
         }
+        /**
+         * The operands as shown rather than as serialized: a date filter describes
+         * what is in its control, not the iso string it sends.
+         * @returns {FilterCriterion|null}
+         */
+        get criterion() {
+            const operands =
+                this._operator.value === 'BETWEEN'
+                    ? [this._value1.value, this._value2.value]
+                    : [this._value1.value];
+            return asCriterion(labelTextOf(this), this._operator.value, operands);
+        }
         get disabled() {
             return super.disabled;
         }
@@ -10933,6 +11040,13 @@ var fml = (function (exports) {
             this._operator.value = this._operator.pinned ? this._operator.allowed[0] : v[0];
             this._value.value = v[1] ?? '';
         }
+        /** @returns {FilterCriterion|null} */
+        get criterion() {
+            const token = this._value.value;
+            return asCriterion(labelTextOf(this), this._operator.value, [
+                token === '' ? '' : booleanValueLabel(token),
+            ]);
+        }
         get disabled() {
             return super.disabled;
         }
@@ -10945,6 +11059,37 @@ var fml = (function (exports) {
         }
     }
 
+    /**
+     * Set membership over a select's vocabulary, answering for both of data-jpa's
+     * set annotations: InEnum and InList take the same bare array of values and no
+     * operator, differing only in what the server converts them to.
+     */
+    class InFilter extends Select {
+        async upgrade() {
+            //the snapshot is taken inside super.upgrade(), so an attribute this
+            //element does not let an author turn off has to be written before it
+            this.toggleAttribute('multiple', true);
+            await super.upgrade();
+        }
+        get value() {
+            const keys = super.value;
+            //an empty set is no filter: the table drops a falsy value, where an
+            //empty array would travel and match nothing
+            return keys.length === 0 ? null : keys;
+        }
+        set value(v) {
+            super.value = v ?? [];
+        }
+        /** @returns {FilterCriterion|null} */
+        get criterion() {
+            return asCriterion(
+                labelTextOf(this),
+                null,
+                (super.entry ?? []).map((e) => e.label),
+            );
+        }
+    }
+
     /**
      * The async section machinery shared by ful-tabs, ful-wizard, ful-dialog and
      * ful-drawer: every activation of a section fires the section:requested family
@@ -12108,6 +12253,7 @@ var fml = (function (exports) {
                 .defineElement('ful-filter-number', NumberFilter)
                 .defineElement('ful-filter-boolean', BooleanFilter)
                 .defineElement('ful-filter-text', TextFilter)
+                .defineElement('ful-filter-in', InFilter)
                 .defineElement('ful-select', Select)
                 .defineElement('ful-dropdown', Dropdown)
                 .defineComponent('loaders:select', SelectLoader)
@@ -12140,6 +12286,7 @@ var fml = (function (exports) {
         Field: Field,
         Form: Form,
         FormLoader: FormLoader,
+        InFilter: InFilter,
         Input: Input,
         InputFile: InputFile,
         InputInstant: InputInstant,
@@ -12208,6 +12355,7 @@ var fml = (function (exports) {
     exports.HttpInterceptorChain = HttpInterceptorChain;
     exports.HttpMultipartRequestCustomizer = HttpMultipartRequestCustomizer;
     exports.HttpRequestBuilder = HttpRequestBuilder;
+    exports.InFilter = InFilter;
     exports.Input = Input;
     exports.InputFile = InputFile;
     exports.InputInstant = InputInstant;