@optionfactory/ful 4.0.15 → 5.0.0

package/dist/ful.iife.js

@@ -461,7 +461,7 @@ var ful = (function (exports, ftl) {
          */
         headers(hs) {
             for (const [k, v] of new Headers(hs).entries()) {
-                if (v === null || v === undefined) {
+                if (v == null) {
                     this.#headers.delete(k);
                 } else {
                     this.#headers.set(k, v);
@@ -476,7 +476,7 @@ var ful = (function (exports, ftl) {
          * @returns {HttpRequestBuilder} this builder
          */
         header(k, v) {
-            if (v === null || v === undefined) {
+            if (v == null) {
                 this.#headers.delete(k);
             } else {
                 this.#headers.set(k, v);
@@ -490,7 +490,7 @@ var ful = (function (exports, ftl) {
          */
         params(ps) {
             for (const [k, v] of new URLSearchParams(ps).entries()) {
-                if (v === null || v === undefined) {
+                if (v == null) {
                     this.#params.delete(k);
                 } else {
                     this.#params.set(k, v);
@@ -505,7 +505,7 @@ var ful = (function (exports, ftl) {
          * @returns {HttpRequestBuilder} this builder
          */
         param(k, ...vs) {
-            if (vs.length === 0 || vs[0] === null || vs[0] === undefined) {
+            if (vs.length === 0 || vs[0] == null) {
                 this.#params.delete(k);
                 return this;
             }
@@ -1136,22 +1136,6 @@ var ful = (function (exports, ftl) {
         }
     }
 
-    class Loaders {
-        static fromAttributes(el, defaultLoader, options) {
-            const http = ftl.registry.component("http-client");
-            const requestMapper = el.hasAttribute("request-mapper") ? ftl.registry.component(el.getAttribute("request-mapper")) : v => v;
-            const responseMapper = el.hasAttribute("response-mapper") ? ftl.registry.component(el.getAttribute("response-mapper")) : v => v;
-            const loaderClass = ftl.registry.component(el.getAttribute("loader") ?? defaultLoader);
-            return loaderClass.create({
-                el,
-                http,
-                requestMapper,
-                responseMapper,
-                options: options ?? {}
-            });
-        }
-    }
-
     class Bindings {
 
         /**
@@ -1348,7 +1332,10 @@ var ful = (function (exports, ftl) {
     }
 
     class FormLoader {
-        static create({ el, http, requestMapper, responseMapper }) {
+        static create(el, conf) {
+            const http = ftl.registry.component("http-client");
+            const requestMapper = el.hasAttribute("request-mapper") ? ftl.registry.component(el.getAttribute("request-mapper")) : v => v;
+            const responseMapper = el.hasAttribute("response-mapper") ? ftl.registry.component(el.getAttribute("response-mapper")) : v => v;
             const url = el.getAttribute("action");
             if (!url) {
                 return new LocalFormLoader(requestMapper, responseMapper);
@@ -1380,7 +1367,7 @@ var ful = (function (exports, ftl) {
         async submit() {
             this.spinner(true);
             try {
-                const loader = Loaders.fromAttributes(this, 'loaders:form');
+                const loader = ftl.registry.component(this.getAttribute("loader") ?? 'loaders:form').create(this);
                 const values = this.values;
                 let request = await loader.prepare(values, this);
                 try {
@@ -1431,7 +1418,7 @@ var ful = (function (exports, ftl) {
     }
 
     class Input extends ftl.ParsedElement {
-        static observed = ['value', 'readonly:presence'];
+        static observed = ['value', 'readonly:presence', 'required:presence'];
         static slots = true;
         static template = `
         <div class="form-label">
@@ -1462,15 +1449,16 @@ var ful = (function (exports, ftl) {
         _fragment(type, slots) {
             return this.template().withOverlay({ type, slots }).render();
         }
-        render({ slots, observed, disabled, skipValueSetup }) {
+        render({ slots, observed, disabled, skipObservedSetup }) {
             const type = this._type();
             const fragment = this._fragment(type, slots);
             this._input = fragment.querySelector("input,textarea");
 
             ftl.Attributes.forward('input-', this, this._input);
-            this.disabled = disabled;
-            this.readonly = observed.readonly;
-            if(!skipValueSetup){
+            if (!skipObservedSetup) {
+                this.disabled = disabled;
+                this.readonly = observed.readonly;
+                this.required = observed.required;
                 this.value = observed.value;
             }
 
@@ -1513,6 +1501,15 @@ var ful = (function (exports, ftl) {
         set disabled(d) {
             ftl.Attributes.toggle(this._input, 'disabled', d);
         }
+        get required() {
+            return this._input.getAttribute('aria-required') === 'true';
+        }
+        set required(d) {
+            ftl.Attributes.set(this._input, "aria-required", d ? "true" : null);
+            this.reflect(() => {
+                ftl.Attributes.toggle(this, 'required', d);
+            });
+        }    
         focus(options) {
             this._input.focus(options);
         }
@@ -1526,7 +1523,7 @@ var ful = (function (exports, ftl) {
             this._fieldError.innerText = error;
         }
         formResetCallback() {
-            this.value = this.getAttribute("value");
+            this.value = this.unmarshal('value', this.getAttribute("value"));
         }
     }
 
@@ -1570,22 +1567,22 @@ var ful = (function (exports, ftl) {
             const date = `${d.getFullYear()}-${pad(2, d.getMonth() + 1)}-${pad(2, d.getDate())}`;
             const time = `${pad(2, d.getHours())}:${pad(2, d.getMinutes())}:${pad(2, d.getSeconds())}.${pad(3, d.getMilliseconds())}`;
             return `${date}T${time}`
-        }    
+        }
     }
 
 
     class InputLocalDate extends Input {
-        static observed = ['value', 'readonly:presence', 'min', 'max', 'step'];
+        static observed = ['value', 'readonly:presence', 'required:presence', 'min', 'max', 'step'];
         _type() {
             return 'date';
         }
-        render(conf){
-            const {observed} = conf;
+        render(conf) {
+            const { observed } = conf;
             super.render(conf);
             this.min = observed.min;
             this.max = observed.max;
             this.step = observed.step;
-        }    
+        }
         get min() {
             const v = this._input.min;
             return v === '' ? null : v;
@@ -1645,12 +1642,12 @@ var ful = (function (exports, ftl) {
 
 
     class InputInstant extends Input {
-        static observed = ['value', 'readonly:presence', 'min', 'max', 'step'];
+        static observed = ['value', 'readonly:presence', 'required:presence', 'min', 'max', 'step'];
         _type() {
             return 'datetime-local';
         }
-        render(conf){
-            const {observed} = conf;
+        render(conf) {
+            const { observed } = conf;
             super.render(conf);
             this.min = observed.min;
             this.max = observed.min;
@@ -1701,7 +1698,7 @@ var ful = (function (exports, ftl) {
                 'maxtotalsizeexceeded': "La dimensione massima complessiva dei file è di {0}"
             }
         }
-        static observed = ['value', 'readonly:presence', "accept:csv", 'multiple:presence', "itemlist:presence", "dropzone:presence", "maxfilesize:number", "maxtotalsize:number"];
+        static observed = ['value', 'readonly:presence', 'required:presence', "accept:csv", 'multiple:presence', "itemlist:presence", "dropzone:presence", "maxfilesize:number", "maxtotalsize:number"];
         #accept;
         #items;
         #dropzone;
@@ -1927,17 +1924,7 @@ var ful = (function (exports, ftl) {
         #prefetch;
         #revision;
         #data;
-        static create({ el, http, responseMapper }) {
-            return new RemoteLoader({
-                http,
-                url: el.getAttribute("src"),
-                method: el.getAttribute("method") ?? 'POST',
-                responseMapper,
-                prefetch: el.hasAttribute("preload"),
-                revision: el.getAttribute("revision")
-            });
-        }
-        constructor({http, url, method, responseMapper, prefetch, revision}) {
+        constructor({ http, url, method, responseMapper, prefetch, revision }) {
             this.#http = http;
             this.#url = url;
             this.#method = method;
@@ -1960,7 +1947,7 @@ var ful = (function (exports, ftl) {
             await this.#ensureFetched();
             return this.#data.filter(([k, v]) => (v ?? '').toLowerCase().includes(needle?.toLowerCase()));
         }
-        async reconfigureUrl(url){
+        async reconfigureUrl(url) {
             this.#data = null;
             this.#url = url;
         }
@@ -1969,9 +1956,9 @@ var ful = (function (exports, ftl) {
                 return
             }
             const storageKey = `${this.#method}@${this.#url}`;
-            if(this.#revision !== null){
+            if (this.#revision !== null) {
                 const data = VersionedLocalStorage.load(storageKey, this.#revision);
-                if(data !== undefined){
+                if (data !== undefined) {
                     this.#data = data;
                     return;
                 }
@@ -1979,7 +1966,7 @@ var ful = (function (exports, ftl) {
             const data = await this.#http.request(this.#method, this.#url)
                 .fetchJson();
             this.#data = this.#responseMapper(data);
-            if(this.#revision !== null){
+            if (this.#revision !== null) {
                 VersionedLocalStorage.save(storageKey, this.#revision, this.#data);
             }
         }
@@ -1990,15 +1977,7 @@ var ful = (function (exports, ftl) {
         #url;
         #method;
         #responseMapper;
-        static create({ el, http, responseMapper }) {
-            return new PartialRemoteLoader({
-                http,
-                url: el.getAttribute("src"),
-                method: el.getAttribute("method") ?? 'POST',
-                responseMapper
-            });
-        }
-        constructor({http, url, method, responseMapper}) {
+        constructor({ http, url, method, responseMapper }) {
             this.#http = http;
             this.#url = url;
             this.#method = method;
@@ -2036,16 +2015,49 @@ var ful = (function (exports, ftl) {
 
 
     class SelectLoader {
-        static create(conf) {
-            if (!conf.el.hasAttribute("src")) {
-                const els = Array.from(conf.options.options?.querySelectorAll('option') ?? []);
+        static create(el, conf) {
+            if (!el.hasAttribute("src")) {
+                const els = Array.from(conf.options?.querySelectorAll('option') ?? []);
                 const data = els.map(e => {
                     return [e.getAttribute("value") ?? e.innerText.trim(), e.innerText.trim()];
                 });
                 return new InMemoryLoader(data);
             }
-            const chunked = "chunked" == conf.el.getAttribute("mode");
-            return chunked ? PartialRemoteLoader.create(conf) : RemoteLoader.create(conf);
+            const http = ftl.registry.component("http-client");
+            const responseMapper = SelectLoader.#responseMapperFrom(el);
+
+            if ("chunked" == el.getAttribute("mode")) {
+                return new PartialRemoteLoader({
+                    http,
+                    url: el.getAttribute("src"),
+                    method: el.getAttribute("method") ?? 'POST',
+                    responseMapper
+                })
+            }
+            return new RemoteLoader({
+                http,
+                url: el.getAttribute("src"),
+                method: el.getAttribute("method") ?? 'POST',
+                responseMapper,
+                prefetch: el.hasAttribute("preload"),
+                revision: el.getAttribute("revision")
+            });
+        }
+        static #responseMapperFrom(el) {
+            if (el.hasAttribute("k-expr") && el.hasAttribute("l-expr")) {
+                return v => {
+                    const evaluator = ftl.registry.evaluator().withOverlay(v);
+                    return [
+                        evaluator.evaluateExpression(el.getAttribute("k-expr")),
+                        evaluator.evaluateExpression(el.getAttribute("l-expr")),
+                        evaluator.evaluateExpression(el.getAttribute("m-expr") ?? 'self'),
+                    ];
+                };
+            }
+            if (el.hasAttribute("response-mapper")) {
+                return ftl.registry.component(el.getAttribute("response-mapper"));
+            }
+            return v => v;
         }
     }
 
@@ -2080,7 +2092,7 @@ var ful = (function (exports, ftl) {
             if (values === undefined) {
                 throw new Error("null data");
             }
-            this.#options = new Map(values.map((v,i) => [String(i), v]));
+            this.#options = new Map(values.map((v, i) => [String(i), v]));
             if (values.length === 0) {
                 const el = document.createElement('div');
                 el.classList.add('text-center', 'py-2', 'bi', 'bi-database-slash');
@@ -2132,7 +2144,7 @@ var ful = (function (exports, ftl) {
                 if (candidate) {
                     selected.removeAttribute('selected');
                     candidate.setAttribute("selected", "");
-                    candidate.scrollIntoView({block: "nearest", behavior: "smooth"});
+                    candidate.scrollIntoView({ block: "nearest", behavior: "smooth" });
                 }
                 return;
             }
@@ -2141,7 +2153,7 @@ var ful = (function (exports, ftl) {
     }
 
     class Select extends ftl.ParsedElement {
-        static observed = ['value:csvm', 'readonly:presence', 'itemlist:presence']
+        static observed = ['value:csvm', 'readonly:presence', "required:presence", 'itemlist:presence']
         static slots = true
         static template = `
         <div class="form-label">
@@ -2171,15 +2183,7 @@ var ful = (function (exports, ftl) {
                 <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
             </ful-item>
         `
-        }    
-        static mappers = {
-            "csvm": (v, name, el) => {
-                if (el.hasAttribute("multiple")) {
-                    return v === null ? [] : v.split(",").map(e => e.trim()).filter(e => e)
-                }
-                return v === null || v === '' ? null : v
-            }
-        };
+        }
         static formAssociated = true
         internals
         #loader
@@ -2197,7 +2201,8 @@ var ful = (function (exports, ftl) {
         }
         async render({ slots, observed, disabled }) {
             const name = this.getAttribute("name");
-            this.#loader = Loaders.fromAttributes(this, 'loaders:select', { options: slots.options });
+            this.#loader = ftl.registry.component(this.getAttribute("loader") ?? 'loaders:select').create(this, {options: slots.options});
+
             this.#multiple = this.hasAttribute("multiple");
             await this.#loader.prefetch?.();
             const fragment = this.template().withOverlay({ slots, name }).render();
@@ -2209,6 +2214,7 @@ var ful = (function (exports, ftl) {
             this.value = observed.value;
             this.disabled = disabled;
             this.readonly = observed.readonly;
+            this.required = observed.required;
             this.itemlist = observed.itemlist;
 
             this.#ddmenu = fragment.querySelector('ful-dropdown');
@@ -2224,7 +2230,7 @@ var ful = (function (exports, ftl) {
                 if (e.target.matches('input')) {
                     return;
                 }
-                if(this.disabled || this.readonly){
+                if (this.disabled || this.readonly) {
                     return;
                 }
                 if (this.#ddmenu.shown) {
@@ -2239,9 +2245,9 @@ var ful = (function (exports, ftl) {
                 if (!e.target.closest("button")) {
                     return;
                 }
-                if(this.disabled || this.readonly){
+                if (this.disabled || this.readonly) {
                     return;
-                }            
+                }
                 const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));
                 if (idx === -1) {
                     return;
@@ -2252,7 +2258,7 @@ var ful = (function (exports, ftl) {
             });
             this.#badges.addEventListener('click', (e) => {
                 e.stopPropagation();
-                if(this.disabled || this.readonly){
+                if (this.disabled || this.readonly) {
                     return;
                 }
                 const idx = [...this.#badges.children].indexOf(e.target);
@@ -2277,7 +2283,7 @@ var ful = (function (exports, ftl) {
             });
             this.#input.addEventListener('keydown', e => {
                 e.stopPropagation();
-                if(this.disabled || this.readonly){
+                if (this.disabled || this.readonly) {
                     return;
                 }
                 switch (e.code) {
@@ -2316,7 +2322,7 @@ var ful = (function (exports, ftl) {
             });
             this.#input.addEventListener('input', e => {
                 e.stopPropagation();
-                if(this.disabled || this.readonly){
+                if (this.disabled || this.readonly) {
                     return;
                 }
                 dload();
@@ -2339,7 +2345,7 @@ var ful = (function (exports, ftl) {
             await fn(this.#loader);
         }
         #changed() {
-            const selection = [...this.#values.entries()].map(e => ({key: e[0], label: e[1][0], metadata: e[1].slice(1)}));
+            const selection = [...this.#values.entries()].map(e => ({ key: e[0], label: e[1][0], metadata: e[1].slice(1) }));
             const value = this.#multiple ? selection : (selection[0] ?? null);
             this.dispatchEvent(new CustomEvent('change', {
                 bubbles: true,
@@ -2361,10 +2367,10 @@ var ful = (function (exports, ftl) {
             this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);
         }
         set value(vs) {
-            if(vs === null){
+            if (vs === null) {
                 this.#values = new Map();
                 this.#syncBadges();
-                return;            
+                return;
             }
             (async () => {
                 const entries = await (this.#multiple ? this.#loader.exact(...vs) : this.#loader.exact(vs));
@@ -2385,14 +2391,14 @@ var ful = (function (exports, ftl) {
             return [...this.#values.entries()][0] ?? null;
         }
         //@ts-ignore
-        get disabled(){
+        get disabled() {
             return this.#input.hasAttribute('disabled');
         }
-        set disabled(d){
+        set disabled(d) {
             ftl.Attributes.toggle(this.#input, 'disabled', d);
-        }    
-        get readonly(){
-            return this.#input.readOnly;        
+        }
+        get readonly() {
+            return this.#input.readOnly;
         }
         set readonly(v) {
             this.#input.readOnly = v;
@@ -2400,6 +2406,15 @@ var ful = (function (exports, ftl) {
                 ftl.Attributes.toggle(this, 'readonly', v);
             });
         }
+        get required() {
+            return this.#input.getAttribute('aria-required') === 'true';
+        }
+        set required(d) {
+            ftl.Attributes.set(this.#input, "aria-required", d ? "true" : null);
+            this.reflect(() => {
+                ftl.Attributes.toggle(this, 'required', d);
+            });
+        }
         #useItemlist;
         get itemlist() {
             return this.#useItemlist;
@@ -2425,7 +2440,7 @@ var ful = (function (exports, ftl) {
     }
 
     class RadioGroup extends ftl.ParsedElement {
-        static observed = ['value', 'readonly:presence'];
+        static observed = ['value', 'readonly:presence', "required:presence"];
         static slots = true;
         static template = `
         <fieldset>
@@ -2489,6 +2504,7 @@ var ful = (function (exports, ftl) {
             this.#fieldset = this.firstElementChild;
             this.disabled = disabled;
             this.readonly = observed.readonly;
+            this.required = observed.required;
             this.value = observed.value;
             this.#fieldError = this.querySelector('ful-field-error');
             this.ariaDescribedByElements = [this.#fieldError];
@@ -2529,6 +2545,15 @@ var ful = (function (exports, ftl) {
         set disabled(d){
             ftl.Attributes.toggle(this.#fieldset, 'disabled', d);
         }    
+        get required() {
+            return this.#fieldset.getAttribute('aria-required') === 'true';
+        }
+        set required(d) {
+            ftl.Attributes.set(this.#fieldset, "aria-required", d ? "true" : null);
+            this.reflect(() => {
+                ftl.Attributes.toggle(this, 'required', d);
+            });
+        }      
         focus(options) {
             this.#firstRadio.focus(options);
         }
@@ -2544,7 +2569,7 @@ var ful = (function (exports, ftl) {
     }
 
     class Checkbox extends ftl.ParsedElement {
-        static observed = ['value:bool', 'readonly:presence'];
+        static observed = ['value:bool', 'readonly:presence', "required:presence"];
         static slots = true;
         static template = `
         <div data-tpl-class="klass">
@@ -2575,6 +2600,7 @@ var ful = (function (exports, ftl) {
             ftl.Attributes.forward('input-', this, this.#input);
             this.disabled = disabled;
             this.readonly = observed.readonly;
+            this.required = observed.required;
             this.value = observed.value;
             this.#input.addEventListener('change', (evt) => {
                 evt.stopPropagation();
@@ -2621,6 +2647,15 @@ var ful = (function (exports, ftl) {
         set disabled(d) {
             ftl.Attributes.toggle(this.#input, 'disabled', d);
         }
+        get required() {
+            return this.#input.getAttribute('aria-required') === 'true';
+        }
+        set required(d) {
+            ftl.Attributes.set(this.#input, "aria-required", d ? "true" : null);
+            this.reflect(() => {
+                ftl.Attributes.toggle(this, 'required', d);
+            });
+        }        
         focus(options) {
             this.#input.focus(options);
         }
@@ -2868,7 +2903,8 @@ var ful = (function (exports, ftl) {
 
 
     class TableLoader {
-        static create({ el, http }) {
+        static create(el, conf) {
+            const http = ftl.registry.component("http-client");
             const url = el.getAttribute("src");
             const method = el.getAttribute("method") ?? 'GET';
             return new RemoteTableLoader(http, url, method);
@@ -2993,7 +3029,8 @@ var ful = (function (exports, ftl) {
                 }, this.#latestRequest.sortRequest, this.#latestRequest.filterRequest);
             });
             this.addEventListener('sort-requested', async (/** @type any */e) => {
-                await this.load(this.#latestRequest.pageRequest, e.detail.value, this.#latestRequest.filterRequest);
+                const sortRequest = e.detail.value.order ? e.detail.value : null;
+                await this.load(this.#latestRequest.pageRequest, sortRequest, this.#latestRequest.filterRequest);
                 this.#sorters.forEach(s => s.order = null);
                 e.target.order = e.detail.value.order;
             });
@@ -3011,7 +3048,7 @@ var ful = (function (exports, ftl) {
             this.#feedback.setAttribute("hidden", "");
             this.#noAutoload.setAttribute("hidden", "");
             try {
-                const loader = Loaders.fromAttributes(this, 'loaders:table');
+                const loader = ftl.registry.component(this.getAttribute("loader") ?? 'loaders:table').create(this);
                 const pageResponse = await loader.load(pageRequest, sortRequest, filterRequest);
                 this.#latestRequest = { pageRequest, sortRequest, filterRequest };
                 this.#update(pageRequest, sortRequest, filterRequest, pageResponse);
@@ -3048,7 +3085,7 @@ var ful = (function (exports, ftl) {
     }
 
     class InstantFilter extends Input {
-        static observed = ['value:json', 'readonly:presence'];
+        static observed = ['value:json', 'readonly:presence', 'required:presence'];
         static template = `
         <div class="form-label">
             <label>{{{{ slots.default }}}}</label>
@@ -3078,10 +3115,14 @@ var ful = (function (exports, ftl) {
         #value1;
         #value2;
         render(conf) {
-            super.render({...conf, skipValueSetup: true});
+            super.render({ ...conf, skipObservedSetup: true });
             this.#operator = this.querySelector('[data-ref=operator]');
             this.#value1 = this.querySelector('[data-ref=value1]');
             this.#value2 = this.querySelector('[data-ref=value2]');
+
+            this.disabled = conf.disabled;
+            this.readonly = conf.observed.readonly;
+            this.required = conf.observed.required;
             this.value = conf.observed.value;
 
             this.addEventListener('click', (evt) => {
@@ -3103,7 +3144,7 @@ var ful = (function (exports, ftl) {
             return values.some(v => v === '') ? undefined : [operator, ...values.map(v => new Date(v).toISOString())];
         }
         set value(v) {
-            if (v === null || v === undefined) {
+            if (v == null) {
                 this.#value1.value = '';
                 this.#value2.value = '';
                 return;
@@ -3113,10 +3154,18 @@ var ful = (function (exports, ftl) {
             this.#value1.value = values[0] ? Instant.isoToLocal(values[0]) : values[0];
             this.#value2.value = values[1] ? Instant.isoToLocal(values[1]) : values[1];
         }
+        set readonly(v) {
+            this.#value2.readOnly = v;
+            super.readonly = v;
+        }
+        set disabled(d) {
+            ftl.Attributes.toggle(this.#value2, 'disabled', d);
+            super.disabled = d;
+        }
     }
 
     class LocalDateFilter extends Input {
-        static observed = ["value:json", 'readonly:presence'];
+        static observed = ["value:json", 'readonly:presence', 'required:presence'];
         static template = `
         <div class="form-label">
             <label>{{{{ slots.default }}}}</label>
@@ -3146,13 +3195,17 @@ var ful = (function (exports, ftl) {
         #value1;
         #value2;
         render(conf) {
-            super.render({...conf, skipValueSetup: true});
+            super.render({ ...conf, skipObservedSetup: true });
 
             this.#operator = this.querySelector('[data-ref=operator]');
             this.#value1 = this.querySelector('[data-ref=value1]');
             this.#value2 = this.querySelector('[data-ref=value2]');
+
+            this.disabled = conf.disabled;
+            this.readonly = conf.observed.readonly;
+            this.required = conf.observed.required;
             this.value = conf.observed.value;
-            
+
             this.addEventListener('click', (evt) => {
                 const target = /** @type HTMLElement */(evt.target);
                 if (!target.matches('ul > li > a')) {
@@ -3171,7 +3224,7 @@ var ful = (function (exports, ftl) {
             return values.some(v => v === '') ? undefined : [operator, ...values];
         }
         set value(v) {
-            if (v === null || v === undefined) {
+            if (v == null) {
                 this.#value1.value = '';
                 this.#value2.value = '';
                 return;
@@ -3181,10 +3234,18 @@ var ful = (function (exports, ftl) {
             this.#value1.value = values[0];
             this.#value2.value = values[1];
         }
+        set readonly(v) {
+            this.#value2.readOnly = v;
+            super.readonly = v;
+        }
+        set disabled(d) {
+            ftl.Attributes.toggle(this.#value2, 'disabled', d);
+            super.disabled = d;
+        }
     }
 
     class TextFilter extends Input {
-        static observed = ["value:json", 'readonly:presence'];
+        static observed = ["value:json", 'readonly:presence', 'required:presence'];
         static template = `
         <div class="form-label">
             <label>{{{{ slots.default }}}}</label>
@@ -3209,10 +3270,14 @@ var ful = (function (exports, ftl) {
         #operator;
         #value;
         render(conf) {
-            super.render({...conf, skipValueSetup: true});
+            super.render({ ...conf, skipObservedSetup: true });
 
             this.#operator = this.querySelector('[data-ref=operator]');
             this.#value = this.querySelector('[data-ref=value]');
+
+            this.disabled = conf.disabled;
+            this.readonly = conf.observed.readonly;
+            this.required = conf.observed.required;
             this.value = conf.observed.value;
 
             this.addEventListener('click', (evt) => {
@@ -3226,14 +3291,12 @@ var ful = (function (exports, ftl) {
                 btn.innerHTML = target.innerHTML;
             });
         }
-
         get value() {
             const operator = this.#operator.getAttribute('value');
             return this.#value.value === '' ? undefined : [operator, 'IGNORE_CASE', this.#value.value];
         }
-
         set value(v) {
-            if (v === null || v === undefined) {
+            if (v == null) {
                 this.#value.value = '';
                 return;
             }
@@ -3318,7 +3381,6 @@ var ful = (function (exports, ftl) {
     exports.InputLocalTime = InputLocalTime;
     exports.Instant = Instant;
     exports.InstantFilter = InstantFilter;
-    exports.Loaders = Loaders;
     exports.LocalDate = LocalDate;
     exports.LocalDateFilter = LocalDateFilter;
     exports.LocalStorage = LocalStorage;