@optionfactory/fml 9.0.0-rc11 → 9.0.0-rc13

package/dist/fml.iife.js

@@ -7641,15 +7641,22 @@ var fml = (function (exports) {
 
     const signed = (v, digits) => (v.startsWith('-') ? '-' : '') + digits(v);
 
-    const NUMERIC_FILTERS = {
-        numeric: (v) => signed(v, (t) => t.replace(/\D/g, '')),
+    const NUMERIC_DIGITS = {
+        numeric: (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, '');
-            }),
+        decimal: (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 numericFilter = (type, unsigned) => {
+        const digits = NUMERIC_DIGITS[type];
+        if (!digits) {
+            return null;
+        }
+        return unsigned ? digits : (v) => signed(v, digits);
     };
 
     const warnedBoth = new WeakSet();
@@ -7671,7 +7678,7 @@ var fml = (function (exports) {
             const re = compiled('reject', reject);
             return re && ((v) => v.replace(re, ''));
         }
-        return NUMERIC_FILTERS[el._type()] ?? null;
+        return numericFilter(el._type(), el.declared('unsigned'));
     };
 
     /** A labelled text input over any native type or textarea; the temporal inputs are its subclasses. */
@@ -7686,6 +7693,7 @@ var fml = (function (exports) {
             'reject',
             'uppercase:presence',
             'trim:presence',
+            'unsigned:presence',
             'autocomplete',
         ];
         static slots = true;
@@ -8523,7 +8531,18 @@ var fml = (function (exports) {
             if (invoke) {
                 //popovertarget needs a target that can be named
                 popover.id = popover.id || uid;
-                invoker.setAttribute('popovertarget', popover.id);
+                if (invoker.localName === 'button' || invoker.localName === 'input') {
+                    invoker.setAttribute('popovertarget', popover.id);
+                } else {
+                    invoker.addEventListener('click', () => popover.togglePopover());
+                    invoker.addEventListener('keydown', (/** @type any */ evt) => {
+                        if (evt.key !== 'Enter' && evt.key !== ' ') {
+                            return;
+                        }
+                        evt.preventDefault();
+                        popover.togglePopover();
+                    });
+                }
             }
             const anchor = `--${uid}`;
             invoker.style.anchorName = anchor;
@@ -9135,7 +9154,7 @@ var fml = (function (exports) {
                 //the select's: a tooltip marker slotted into `info`, a button a page
                 //put in an affix. Without this, reading the note beside a select
                 //also stole the focus and dropped the dropdown over the note
-                const elsewhere = e.target.closest('button, a[href], input, select, textarea');
+                const elsewhere = e.target.closest('button, [role="button"], a[href], input, select, textarea');
                 if (elsewhere && elsewhere !== this.#input) {
                     return;
                 }
@@ -11065,27 +11084,38 @@ var fml = (function (exports) {
      * 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();
+        static attributes = ['operator'];
+        #keys() {
+            const chosen = super.value;
+            if (this.multiple) {
+                return chosen;
+            }
+            return chosen === null || chosen === undefined ? [] : [chosen];
         }
         get value() {
-            const keys = super.value;
+            const keys = this.#keys();
             //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;
+            if (keys.length === 0) {
+                return null;
+            }
+            const operator = this.declared('operator');
+            return operator ? [operator, ...keys] : keys;
         }
         set value(v) {
-            super.value = v ?? [];
+            const operator = this.declared('operator');
+            let keys = v === null || v === undefined ? [] : Array.isArray(v) ? v : [v];
+            if (operator && keys[0] === operator) {
+                keys = keys.slice(1);
+            }
+            super.value = this.multiple ? keys : (keys[0] ?? null);
         }
         /** @returns {FilterCriterion|null} */
         get criterion() {
             return asCriterion(
                 labelTextOf(this),
-                null,
-                (super.entry ?? []).map((e) => e.label),
+                this.declared('operator'),
+                [super.entry].flat().filter((e) => e).map((e) => e.label),
             );
         }
     }
@@ -11221,7 +11251,7 @@ var fml = (function (exports) {
             icon: 'info-circle-fill',
         };
         static template = `
-        <button type="button" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></button>
+        <span role="button" tabindex="0" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></span>
         <ful-note popover data-ref="content">{{{{ slots.default }}}}</ful-note>
     `;
         render({ slots }) {
@@ -11330,10 +11360,18 @@ var fml = (function (exports) {
                 this.dispatchEvent(new CustomEvent('close', { detail: outcome }));
                 this.#settle(outcome);
             });
+            let pressedOutside = false;
+            this.#dialog.addEventListener('mousedown', (/** @type any */ e) => {
+                pressedOutside = e.target === this.#dialog;
+            });
             this.#dialog.addEventListener('click', (/** @type any */ e) => {
                 const result = e.target.closest('button[data-result]')?.dataset.result;
                 if (result !== undefined) {
                     this.#dialog.close(result);
+                    return;
+                }
+                if (!requiresAnswer && pressedOutside && e.target === this.#dialog) {
+                    this.#dialog.close('');
                 }
             });
             //dismissal, not an answer: the waiters are settled with a dismissal, as
@@ -11535,6 +11573,15 @@ var fml = (function (exports) {
                 this.#dialog.setAttribute('placement', placement);
             }
             fragment.querySelector('[data-ref=close]').addEventListener('click', () => this.close());
+            let pressedOutside = false;
+            this.#dialog.addEventListener('mousedown', (e) => {
+                pressedOutside = e.target === this.#dialog;
+            });
+            this.#dialog.addEventListener('click', (e) => {
+                if (pressedOutside && e.target === this.#dialog) {
+                    this.close();
+                }
+            });
             this.#dialog.addEventListener('close', () => {
                 this.dispatchEvent(
                     new CustomEvent('close', { detail: this.#answer ?? { dismissed: true, response: null } }),