@optionfactory/ful 4.0.15 → 5.0.0

package/dist/ful.mjs

@@ -460,7 +460,7 @@ class HttpRequestBuilder {
      */
     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);
@@ -475,7 +475,7 @@ class HttpRequestBuilder {
      * @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);
@@ -489,7 +489,7 @@ class HttpRequestBuilder {
      */
     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);
@@ -504,7 +504,7 @@ class HttpRequestBuilder {
      * @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;
         }
@@ -1135,22 +1135,6 @@ class Timing  {
     }
 }
 
-class Loaders {
-    static fromAttributes(el, defaultLoader, options) {
-        const http = registry.component("http-client");
-        const requestMapper = el.hasAttribute("request-mapper") ? registry.component(el.getAttribute("request-mapper")) : v => v;
-        const responseMapper = el.hasAttribute("response-mapper") ? registry.component(el.getAttribute("response-mapper")) : v => v;
-        const loaderClass = registry.component(el.getAttribute("loader") ?? defaultLoader);
-        return loaderClass.create({
-            el,
-            http,
-            requestMapper,
-            responseMapper,
-            options: options ?? {}
-        });
-    }
-}
-
 class Bindings {
 
     /**
@@ -1347,7 +1331,10 @@ class LocalFormLoader {
 }
 
 class FormLoader {
-    static create({ el, http, requestMapper, responseMapper }) {
+    static create(el, conf) {
+        const http = registry.component("http-client");
+        const requestMapper = el.hasAttribute("request-mapper") ? registry.component(el.getAttribute("request-mapper")) : v => v;
+        const responseMapper = el.hasAttribute("response-mapper") ? registry.component(el.getAttribute("response-mapper")) : v => v;
         const url = el.getAttribute("action");
         if (!url) {
             return new LocalFormLoader(requestMapper, responseMapper);
@@ -1379,7 +1366,7 @@ class Form extends ParsedElement {
     async submit() {
         this.spinner(true);
         try {
-            const loader = Loaders.fromAttributes(this, 'loaders:form');
+            const loader = registry.component(this.getAttribute("loader") ?? 'loaders:form').create(this);
             const values = this.values;
             let request = await loader.prepare(values, this);
             try {
@@ -1430,7 +1417,7 @@ class Form extends ParsedElement {
 }
 
 class Input extends ParsedElement {
-    static observed = ['value', 'readonly:presence'];
+    static observed = ['value', 'readonly:presence', 'required:presence'];
     static slots = true;
     static template = `
         <div class="form-label">
@@ -1461,15 +1448,16 @@ class Input extends ParsedElement {
     _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");
 
         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;
         }
 
@@ -1512,6 +1500,15 @@ class Input extends ParsedElement {
     set disabled(d) {
         Attributes.toggle(this._input, 'disabled', d);
     }
+    get required() {
+        return this._input.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this._input, "aria-required", d ? "true" : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }    
     focus(options) {
         this._input.focus(options);
     }
@@ -1525,7 +1522,7 @@ class Input extends ParsedElement {
         this._fieldError.innerText = error;
     }
     formResetCallback() {
-        this.value = this.getAttribute("value");
+        this.value = this.unmarshal('value', this.getAttribute("value"));
     }
 }
 
@@ -1569,22 +1566,22 @@ class Instant extends ParsedElement {
         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;
@@ -1644,12 +1641,12 @@ class InputLocalTime extends InputLocalDate {
 
 
 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;
@@ -1700,7 +1697,7 @@ class InputFile extends Input {
             '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;
@@ -1926,17 +1923,7 @@ class RemoteLoader {
     #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;
@@ -1959,7 +1946,7 @@ class RemoteLoader {
         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;
     }
@@ -1968,9 +1955,9 @@ class RemoteLoader {
             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;
             }
@@ -1978,7 +1965,7 @@ class RemoteLoader {
         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);
         }
     }
@@ -1989,15 +1976,7 @@ class PartialRemoteLoader {
     #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;
@@ -2035,16 +2014,49 @@ class InMemoryLoader {
 
 
 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 = 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 = 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 registry.component(el.getAttribute("response-mapper"));
+        }
+        return v => v;
     }
 }
 
@@ -2079,7 +2091,7 @@ class Dropdown extends ParsedElement {
         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');
@@ -2131,7 +2143,7 @@ class Dropdown extends ParsedElement {
             if (candidate) {
                 selected.removeAttribute('selected');
                 candidate.setAttribute("selected", "");
-                candidate.scrollIntoView({block: "nearest", behavior: "smooth"});
+                candidate.scrollIntoView({ block: "nearest", behavior: "smooth" });
             }
             return;
         }
@@ -2140,7 +2152,7 @@ class Dropdown extends ParsedElement {
 }
 
 class Select extends 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">
@@ -2170,15 +2182,7 @@ class Select extends ParsedElement {
                 <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
@@ -2196,7 +2200,8 @@ class Select extends ParsedElement {
     }
     async render({ slots, observed, disabled }) {
         const name = this.getAttribute("name");
-        this.#loader = Loaders.fromAttributes(this, 'loaders:select', { options: slots.options });
+        this.#loader = 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();
@@ -2208,6 +2213,7 @@ class Select extends ParsedElement {
         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');
@@ -2223,7 +2229,7 @@ class Select extends ParsedElement {
             if (e.target.matches('input')) {
                 return;
             }
-            if(this.disabled || this.readonly){
+            if (this.disabled || this.readonly) {
                 return;
             }
             if (this.#ddmenu.shown) {
@@ -2238,9 +2244,9 @@ class Select extends ParsedElement {
             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;
@@ -2251,7 +2257,7 @@ class Select extends ParsedElement {
         });
         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);
@@ -2276,7 +2282,7 @@ class Select extends ParsedElement {
         });
         this.#input.addEventListener('keydown', e => {
             e.stopPropagation();
-            if(this.disabled || this.readonly){
+            if (this.disabled || this.readonly) {
                 return;
             }
             switch (e.code) {
@@ -2315,7 +2321,7 @@ class Select extends ParsedElement {
         });
         this.#input.addEventListener('input', e => {
             e.stopPropagation();
-            if(this.disabled || this.readonly){
+            if (this.disabled || this.readonly) {
                 return;
             }
             dload();
@@ -2338,7 +2344,7 @@ class Select extends ParsedElement {
         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,
@@ -2360,10 +2366,10 @@ class Select extends ParsedElement {
         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));
@@ -2384,14 +2390,14 @@ class Select extends ParsedElement {
         return [...this.#values.entries()][0] ?? null;
     }
     //@ts-ignore
-    get disabled(){
+    get disabled() {
         return this.#input.hasAttribute('disabled');
     }
-    set disabled(d){
+    set disabled(d) {
         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;
@@ -2399,6 +2405,15 @@ class Select extends ParsedElement {
             Attributes.toggle(this, 'readonly', v);
         });
     }
+    get required() {
+        return this.#input.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this.#input, "aria-required", d ? "true" : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }
     #useItemlist;
     get itemlist() {
         return this.#useItemlist;
@@ -2424,7 +2439,7 @@ class Select extends ParsedElement {
 }
 
 class RadioGroup extends ParsedElement {
-    static observed = ['value', 'readonly:presence'];
+    static observed = ['value', 'readonly:presence', "required:presence"];
     static slots = true;
     static template = `
         <fieldset>
@@ -2488,6 +2503,7 @@ class RadioGroup extends ParsedElement {
         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];
@@ -2528,6 +2544,15 @@ class RadioGroup extends ParsedElement {
     set disabled(d){
         Attributes.toggle(this.#fieldset, 'disabled', d);
     }    
+    get required() {
+        return this.#fieldset.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this.#fieldset, "aria-required", d ? "true" : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }      
     focus(options) {
         this.#firstRadio.focus(options);
     }
@@ -2543,7 +2568,7 @@ class RadioGroup extends ParsedElement {
 }
 
 class Checkbox extends 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">
@@ -2574,6 +2599,7 @@ class Checkbox extends ParsedElement {
         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();
@@ -2620,6 +2646,15 @@ class Checkbox extends ParsedElement {
     set disabled(d) {
         Attributes.toggle(this.#input, 'disabled', d);
     }
+    get required() {
+        return this.#input.getAttribute('aria-required') === 'true';
+    }
+    set required(d) {
+        Attributes.set(this.#input, "aria-required", d ? "true" : null);
+        this.reflect(() => {
+            Attributes.toggle(this, 'required', d);
+        });
+    }        
     focus(options) {
         this.#input.focus(options);
     }
@@ -2867,7 +2902,8 @@ class RemoteTableLoader {
 
 
 class TableLoader {
-    static create({ el, http }) {
+    static create(el, conf) {
+        const http = registry.component("http-client");
         const url = el.getAttribute("src");
         const method = el.getAttribute("method") ?? 'GET';
         return new RemoteTableLoader(http, url, method);
@@ -2992,7 +3028,8 @@ class Table extends ParsedElement {
             }, 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;
         });
@@ -3010,7 +3047,7 @@ class Table extends ParsedElement {
         this.#feedback.setAttribute("hidden", "");
         this.#noAutoload.setAttribute("hidden", "");
         try {
-            const loader = Loaders.fromAttributes(this, 'loaders:table');
+            const loader = 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);
@@ -3047,7 +3084,7 @@ class Table extends ParsedElement {
 }
 
 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>
@@ -3077,10 +3114,14 @@ class InstantFilter extends Input {
     #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) => {
@@ -3102,7 +3143,7 @@ class InstantFilter extends Input {
         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;
@@ -3112,10 +3153,18 @@ class InstantFilter extends Input {
         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) {
+        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>
@@ -3145,13 +3194,17 @@ class LocalDateFilter extends Input {
     #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')) {
@@ -3170,7 +3223,7 @@ class LocalDateFilter extends Input {
         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;
@@ -3180,10 +3233,18 @@ class LocalDateFilter extends Input {
         this.#value1.value = values[0];
         this.#value2.value = values[1];
     }
+    set readonly(v) {
+        this.#value2.readOnly = v;
+        super.readonly = v;
+    }
+    set disabled(d) {
+        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>
@@ -3208,10 +3269,14 @@ class TextFilter extends Input {
     #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) => {
@@ -3225,14 +3290,12 @@ class TextFilter extends Input {
             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;
         }
@@ -3296,5 +3359,5 @@ class Plugin {
     }
 }
 
-export { AsyncEvents, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Checkbox, Dropdown, Failure, Form, FormLoader, Hex, HttpClient, HttpClientError, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, Loaders, LocalDate, LocalDateFilter, LocalStorage, LocalizationModule, MediaType, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, Timing, VersionedLocalStorage, VersionedSessionStorage };
+export { AsyncEvents, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Checkbox, Dropdown, Failure, Form, FormLoader, Hex, HttpClient, HttpClientError, Input, InputFile, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, LocalDate, LocalDateFilter, LocalStorage, LocalizationModule, MediaType, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, Timing, VersionedLocalStorage, VersionedSessionStorage };
 //# sourceMappingURL=ful.mjs.map