@optionfactory/ful 3.0.2 → 4.0.0

package/dist/ful.iife.js

@@ -722,69 +722,82 @@ var ful = (function (exports, ftl) {
         }
     }
 
-    class Storage {
-        constructor(prefix, storage) {
-            this.prefix = prefix;
-            this.storage = storage;
-        }
-        save(k, v) {
-            this.storage.setItem(`${this.prefix}-${k}`, JSON.stringify(v));
+    class LocalStorage extends Storage {
+        static save(k, v) {
+            localStorage.setItem(k, JSON.stringify(v));
         }
-        load(k) {
-            const got = this.storage.getItem(`${this.prefix}-${k}`);
-            return got === undefined ? undefined : JSON.parse(got);
+        static load(k) {
+            const got = localStorage.getItem(k);
+            return got === null ? undefined : JSON.parse(got);
         }
-        remove(k) {
-            this.storage.removeItem(`${this.prefix}-${k}`);
+        static remove(k) {
+            localStorage.removeItem(k);
         }
-        pop(k) {
-            const decoded = this.load(k);
-            this.remove(k);
+        static pop(k) {
+            const decoded = LocalStorage.load(k);
+            LocalStorage.remove(k);
             return decoded;
         }
-    }
 
-    class LocalStorage extends Storage {
-        constructor(prefix) {
-            super(prefix, localStorage);
-        }
     }
 
+
+
     class SessionStorage extends Storage {
-        constructor(prefix) {
-            super(prefix, sessionStorage);
+        static save(k, v) {
+            sessionStorage.setItem(k, JSON.stringify(v));
+        }
+        static load(k) {
+            const got = sessionStorage.getItem(k);
+            return got === null ? undefined : JSON.parse(got);
+        }
+        static remove(k) {
+            sessionStorage.removeItem(k);
+        }
+        static pop(k) {
+            const decoded = SessionStorage.load(k);
+            SessionStorage.remove(k);
+            return decoded;
         }
     }
 
-    class VersionedStorage {
-        constructor(storage, key, dataSupplier) {
-            this.storage = storage;
-            this.key = key;
-            this.dataSupplier = dataSupplier;
-            this.cache = null;
-
-        }
-        async load(revision) {
-            const saved = this.storage.load(this.key);
-            if (!!saved && saved.revision === revision) {
-                this.cache = saved.value;
-                return;
+    class VersionedLocalStorage {
+        static save(key, revision, data){
+            LocalStorage.save(key, {revision, data});
+        }    
+        static load(key, revision){
+            const stored = LocalStorage.load(key);
+            if(stored === undefined){
+                return undefined;
             }
-            const freshData = await this.dataSupplier(revision, this.key);
-            this.storage.save(this.key, {
-                revision: revision,
-                value: freshData
-            });
-            this.cache = freshData;
+            if(stored.revision !== revision){
+                localStorage.removeItem(key);
+                return undefined;
+            }
+            return stored.data;
         }
-        data() {
-            return this.cache;
+    }
+
+    class VersionedSessionStorage {
+        static save(key, revision, data){
+            SessionStorage.save(key, {revision, data});
+        }    
+        static load(key, revision){
+            const stored = SessionStorage.load(key);
+            if(stored === undefined){
+                return undefined;
+            }
+            if(stored.revision !== revision){
+                localStorage.removeItem(key);
+                return undefined;
+            }
+            return stored.data;
         }
     }
 
     class AuthorizationCodeFlow {
-        static forKeycloak(clientId, realmBaseUrl, redirectUri) {
-            const scope = "openid profile";
+        static forKeycloak(clientId, realmBaseUrl, redirectUri, maybeScope) {
+            const scope = maybeScope ?? "openid profile";
             return new AuthorizationCodeFlow(clientId, scope, {
                 auth: new URL("protocol/openid-connect/auth", realmBaseUrl),
                 token: new URL("protocol/openid-connect/token", realmBaseUrl),
@@ -794,7 +807,6 @@ var ful = (function (exports, ftl) {
             });
         }
         constructor(clientId, scope, { auth, token, registration, logout, redirect }) {
-            this.storage = new SessionStorage(clientId);
             this.clientId = clientId;
             this.scope = scope;
             this.uri = { auth, token, registration, logout, redirect };
@@ -803,7 +815,7 @@ var ful = (function (exports, ftl) {
             const pkceVerifier = Base64.encode(crypto.getRandomValues(new Uint8Array(32)).buffer);
             const pkceChallenge = Base64.encode(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(pkceVerifier)));
             const state = this.clientId + Base64.encode(crypto.getRandomValues(new Uint8Array(16)).buffer);
-            this.storage.save(AuthorizationCodeFlow.PKCE_AND_STATE_KEY, {
+            SessionStorage.save(`${AuthorizationCodeFlow.PKCE_AND_STATE_KEY}-${this.clientId}`, {
                 state: state,
                 verifier: pkceVerifier
             });
@@ -831,7 +843,7 @@ var ful = (function (exports, ftl) {
         }
         async #tokenExchange(code, state) {
             window.history.replaceState('', "", this.uri.redirect);
-            const stateAndVerifier = this.storage.pop(AuthorizationCodeFlow.PKCE_AND_STATE_KEY);
+            const stateAndVerifier = SessionStorage.pop(`${AuthorizationCodeFlow.PKCE_AND_STATE_KEY}-${this.clientId}`);
             if (stateAndVerifier.state !== state) {
                 throw new Error("State mismatch");
             }
@@ -859,7 +871,7 @@ var ful = (function (exports, ftl) {
         async ensureLoggedIn() {
             const url = new URL(window.location.href);
             const code = url.searchParams.get("code");
-            if (code && this.storage.load(AuthorizationCodeFlow.PKCE_AND_STATE_KEY)) {
+            if (code && SessionStorage.load(`${AuthorizationCodeFlow.PKCE_AND_STATE_KEY}-${this.clientId}`)) {
                 //if callback from keycloak and we have our state still stored
                 const state = url.searchParams.get("state");
                 return await this.#tokenExchange(code, state);
@@ -1024,24 +1036,22 @@ var ful = (function (exports, ftl) {
         }
     }
 
-    const timing = {
-        sleep(ms) {
+    class Timing  {
+        static sleep(ms) {
             return new Promise(resolve => setTimeout(resolve, ms));
-        },
-        DEBOUNCE_DEFAULT: 0,
-        DEBOUNCE_IMMEDIATE: 1,
+        }
+        static DEBOUNCE_DEFAULT = 0;
+        static DEBOUNCE_IMMEDIATE = 1;
         /**
          * Executes only after a period of inactivity (pause in events).
-         * Delays execution until events stop for a set duration.
-         * Consolidates multiple rapid events into a single execution.
          * Respond to the "end" of a series of events.
          * @param {*} timeoutMs 
          * @param {*} func 
          * @param {*} [options]
          * @returns {[function, function]}
          */
-        debounce(timeoutMs, func, options) {
-            const opts = options ?? timing.DEBOUNCE_DEFAULT;
+        static debounce(timeoutMs, func, options) {
+            const opts = options ?? Timing.DEBOUNCE_DEFAULT;
             let tid = null;
             let args = [];
             let previousTimestamp = 0;
@@ -1053,7 +1063,7 @@ var ful = (function (exports, ftl) {
                     return;
                 }
                 tid = null;
-                if (opts !== timing.DEBOUNCE_IMMEDIATE) {
+                if (opts !== Timing.DEBOUNCE_IMMEDIATE) {
                     func(...args);
                 }
                 // This check is needed because `func` can recursively invoke `debounced`.
@@ -1067,31 +1077,32 @@ var ful = (function (exports, ftl) {
                 previousTimestamp = new Date().getTime();
                 if (tid === null) {
                     tid = setTimeout(later, timeoutMs);
-                    if (opts === timing.DEBOUNCE_IMMEDIATE) {
+                    if (opts === Timing.DEBOUNCE_IMMEDIATE) {
                         func(...args);
                     }
                 }
             };
             const abort = () => clearTimeout(tid);
             return [debounced, abort];
-        },
-        THROTTLE_DEFAULT: 0,
-        THROTTLE_NO_LEADING: 1,
-        THROTTLE_NO_TRAILING: 2,
+        }
+        static THROTTLE_DEFAULT = 0;
+        static THROTTLE_NO_LEADING = 1;
+        static THROTTLE_NO_TRAILING = 2;
         /**
          * Executes at most once per specified time interval, regardless of ongoing events.
-         * Executes regularly as long as events are firing, but at a controlled rate.
-         * Allows execution periodically during a burst of events.
-         * Ensure a function doesn't fire too frequently during continuous events.
+         * @param {*} timeoutMs 
+         * @param {*} func 
+         * @param {*} [options]
+         * @returns {[function, function]}
          */
-        throttle(timeoutMs, func, options) {
-            const opts = options ?? timing.THROTTLE_DEFAULT;
+        static throttle(timeoutMs, func, options) {
+            const opts = options ?? Timing.THROTTLE_DEFAULT;
             let tid = null;
             let args = [];
             let previousTimestamp = 0;
 
             const later = () => {
-                previousTimestamp = (opts & timing.THROTTLE_NO_LEADING) ? 0 : new Date().getTime();
+                previousTimestamp = (opts & Timing.THROTTLE_NO_LEADING) ? 0 : new Date().getTime();
                 tid = null;
                 func(...args);
                 if (tid === null) {
@@ -1100,7 +1111,7 @@ var ful = (function (exports, ftl) {
             };
             const throttled = function () {
                 const now = new Date().getTime();
-                if (!previousTimestamp && (opts & timing.THROTTLE_NO_LEADING)) {
+                if (!previousTimestamp && (opts & Timing.THROTTLE_NO_LEADING)) {
                     previousTimestamp = now;
                 }
                 const remaining = timeoutMs - (now - previousTimestamp);
@@ -1115,14 +1126,14 @@ var ful = (function (exports, ftl) {
                     if (tid === null) {
                         args = [];
                     }
-                } else if (tid === null && !(opts & timing.THROTTLE_NO_TRAILING)) {
+                } else if (tid === null && !(opts & Timing.THROTTLE_NO_TRAILING)) {
                     tid = setTimeout(later, remaining);
                 }
             };
             const abort = () => clearTimeout(tid);
             return [throttled, abort];
         }
-    };
+    }
 
     class Loaders {
         static fromAttributes(el, defaultLoader, options) {
@@ -1444,14 +1455,15 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
             this.internals.role = 'presentation';
         }
-        _type(){
-            return this.getAttribute("type") ?? 'text';    }
-        _fragment(type, slots){
-            return this.template().withOverlay({ type, slots }).render();    
+        _type() {
+            return this.getAttribute("type") ?? 'text';
+        }
+        _fragment(type, slots) {
+            return this.template().withOverlay({ type, slots }).render();
         }
         render({ slots, observed, disabled }) {
             const type = this._type();
-            const fragment = this._fragment(type, slots );    
+            const fragment = this._fragment(type, slots);
             this._input = fragment.querySelector("input,textarea");
 
             ftl.Attributes.forward('input-', this, this._input);
@@ -1482,16 +1494,17 @@ var ful = (function (exports, ftl) {
         set value(value) {
             this._input.value = value === '' ? null : value;
         }
-        get readonly(){
+        get readonly() {
             return this._input.readOnly;
         }
         set readonly(v) {
             this._input.readOnly = v;
-        }    
-        get disabled(){
+        }
+        //@ts-ignore
+        get disabled() {
             return this._input.hasAttribute('disabled');
         }
-        set disabled(d){
+        set disabled(d) {
             ftl.Attributes.toggle(this._input, 'disabled', d);
         }
         focus(options) {
@@ -1506,24 +1519,151 @@ var ful = (function (exports, ftl) {
             this.internals.setValidity({ customError: true }, " ");
             this._fieldError.innerText = error;
         }
-        formResetCallback(){
+        formResetCallback() {
             this.value = this.getAttribute("value");
         }
     }
 
-    class CompleteSelectLoader {
+    class LocalDate extends ftl.ParsedElement {
+        render() {
+            const content = this.innerHTML.trim();
+            if (content === '') {
+                this.innerHTML = this.getAttribute('default') ?? '';
+                return;
+            }
+            const locale = this.getAttribute("locale") ?? Intl.DateTimeFormat().resolvedOptions().locale;
+            const formatter = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'numeric', day: 'numeric' });
+            const [y, m, d] = content.split('-').map(Number);
+            this.innerHTML = formatter.format(new Date(y, m - 1, d));
+        }
+    }
+
+    class Instant extends ftl.ParsedElement {
+        render() {
+            const content = this.innerHTML.trim();
+            if (content === '') {
+                this.innerHTML = this.getAttribute('default') ?? '';
+                return;
+            }
+            const locale = this.getAttribute("locale") ?? Intl.DateTimeFormat().resolvedOptions().locale;
+            const format = new Intl.DateTimeFormat(locale, {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric',
+                hour12: false
+            });
+            this.innerHTML = format.format(new Date(Instant.isoToLocal(content)));
+        }
+        static isoToLocal(iso) {
+            //this is so sad
+            const d = new Date(iso);
+            const pad = (n, v) => String(v).padStart(n, '0');
+            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'];
+        _type() {
+            return 'date';
+        }
+        get min() {
+            const v = this._input.min;
+            return v === '' ? null : v;
+        }
+        set min(v) {
+            this._input.min = v;
+        }
+        get max() {
+            const v = this._input.max;
+            return v === '' ? null : v;
+        }
+        set max(v) {
+            this._input.max = v;
+        }
+        get step() {
+            const v = this._input.step;
+            return v === '' ? null : v;
+        }
+        set step(v) {
+            this._input.step = (v ?? '');
+        }
+
+    }
+
+    class InputLocalTime extends InputLocalDate {
+        _type() {
+            return 'time';
+        }
+    }
+
+
+    class InputInstant extends Input {
+        static observed = ['value', 'readonly:presence', 'min', 'max', 'step'];
+        _type() {
+            return 'datetime-local';
+        }
+        get value() {
+            const v = this._input.value;
+            return v === '' ? null : new Date(v).toISOString();
+        }
+        set value(v) {
+            this._input.value = v ? Instant.isoToLocal(v) : '';
+        }
+        get min() {
+            const v = this._input.min;
+            return v === '' ? null : new Date(v).toISOString();
+        }
+        set min(v) {
+            this._input.min = v ? Instant.isoToLocal(v) : '';
+        }
+        get max() {
+            const v = this._input.max;
+            return v === '' ? null : new Date(v).toISOString();
+        }
+        set max(v) {
+            this._input.max = v ? Instant.isoToLocal(v) : '';
+        }
+        get step() {
+            const v = this._input.step;
+            return v === '' ? null : v;
+        }
+        set step(v) {
+            this._input.step = (v ?? '');
+        }
+    }
+
+    class RemoteLoader {
         #http;
         #url;
         #method;
         #responseMapper;
         #prefetch;
+        #revision;
         #data;
-        constructor(http, url, method, responseMapper, prefetch) {
+        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}) {
             this.#http = http;
             this.#url = url;
             this.#method = method;
             this.#responseMapper = responseMapper;
             this.#prefetch = prefetch;
+            this.#revision = revision;
             this.#data = null;
         }
         async prefetch() {
@@ -1534,37 +1674,47 @@ var ful = (function (exports, ftl) {
         }
         async exact(...keys) {
             await this.#ensureFetched();
-            return this.#data.filter(([k, v]) => keys.includes(k));
+            return this.#data.filter(([k, v]) => keys.some(r => r == k));
         }
         async load(needle) {
             await this.#ensureFetched();
-            return this.#data.filter(([k, v]) => v.includes(needle?.toLowerCase()));
+            return this.#data.filter(([k, v]) => (v ?? '').includes(needle?.toLowerCase()));
         }
         async #ensureFetched() {
             if (this.#data !== null) {
                 return
             }
+            const storageKey = `${this.#method}@${this.#url}`;
+            if(this.#revision !== null){
+                const data = VersionedLocalStorage.load(storageKey, this.#revision);
+                if(data !== undefined){
+                    this.#data = data;
+                    return;
+                }
+            }
             const data = await this.#http.request(this.#method, this.#url)
                 .fetchJson();
             this.#data = this.#responseMapper(data);
-        }
-        static create({ el, http, responseMapper }) {
-            return new CompleteSelectLoader(
-                http,
-                el.getAttribute("src"),
-                el.getAttribute("method") ?? 'POST',
-                responseMapper,
-                el.hasAttribute("preload")
-            );
+            if(this.#revision !== null){
+                VersionedLocalStorage.save(storageKey, this.#revision, this.#data);
+            }
         }
     }
 
-    class ChunkedSelectLoader {
+    class PartialRemoteLoader {
         #http;
         #url;
         #method;
         #responseMapper;
-        constructor(http, 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}) {
             this.#http = http;
             this.#url = url;
             this.#method = method;
@@ -1582,26 +1732,21 @@ var ful = (function (exports, ftl) {
                 .fetchJson();
             return this.#responseMapper(data);
         }
-        static create({ el, http, responseMapper }) {
-            return new ChunkedSelectLoader(
-                http,
-                el.getAttribute("src"),
-                el.getAttribute("method") ?? 'POST',
-                responseMapper
-            );
-        }
     }
 
-    class OptionsSlotSelectLoader {
+    class InMemoryLoader {
         #data
         constructor(data) {
             this.#data = data;
         }
-        async exact(...keys) {
-            return this.#data.filter(([k, v]) => keys.includes(k));
+        update(data) {
+            this.#data = data;
         }
-        async load(needle) {
-            return this.#data.filter(([k, v]) => v.includes(needle?.toLowerCase()));
+        exact(...keys) {
+            return this.#data.filter(([k, v]) => keys.some(r => r == k));
+        }
+        load(needle) {
+            return this.#data.filter(([k, v]) => (v ?? '').includes(needle?.toLowerCase()));
         }
     }
 
@@ -1613,10 +1758,10 @@ var ful = (function (exports, ftl) {
                 const data = els.map(e => {
                     return [e.getAttribute("value") ?? e.innerText.trim(), e.innerText.trim()];
                 });
-                return new OptionsSlotSelectLoader(data);
+                return new InMemoryLoader(data);
             }
             const chunked = "chunked" == conf.el.getAttribute("mode");
-            return chunked ? ChunkedSelectLoader.create(conf) : CompleteSelectLoader.create(conf);
+            return chunked ? PartialRemoteLoader.create(conf) : RemoteLoader.create(conf);
         }
     }
 
@@ -1626,8 +1771,9 @@ var ful = (function (exports, ftl) {
         <ful-spinner class="centered" hidden></ful-spinner>
         <menu tabindex="-1" hidden></menu>
     `;
-        #spinner
-        #menu
+        #spinner;
+        #menu;
+        #options = new Map();
         render({ slots }) {
             const fragment = this.template().render();
             this.#spinner = fragment.querySelector("ful-spinner");
@@ -1650,30 +1796,31 @@ var ful = (function (exports, ftl) {
             if (values === undefined) {
                 throw new Error("null data");
             }
+            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');
                 this.#menu.replaceChildren(el);
                 return;
             }
-            this.#menu.replaceChildren(...values.map(([k, v], i) => {
+            this.#menu.replaceChildren(...values.map(([k, v, m], i) => {
                 const el = document.createElement('li');
                 if (i === 0) {
                     el.setAttribute("selected", '');
                 }
-                el.setAttribute("value", k);
+                el.setAttribute("value", i);
                 el.innerText = v;
                 return el;
             }));
         }
         #change(target) {
-            const value = target.getAttribute('value');
-            const label = target.innerText;
+            const index = target.getAttribute('value');
+            const data = this.#options.get(index);
             this.hide();
             this.dispatchEvent(new CustomEvent('change', {
                 bubbles: true,
                 cancelable: false,
-                detail: { label, value }
+                detail: { index, data }
             }));
         }
         hide() {
@@ -1695,12 +1842,13 @@ var ful = (function (exports, ftl) {
             }
         }
         async moveOrShow(forward, loader) {
-            if (!this.hasAttribute("hidden")) {
+            if (this.shown) {
                 const selected = this.#menu.querySelector('[selected]') ?? this.#menu.firstElementChild;
                 const candidate = selected[`${forward ? 'next' : 'previous'}ElementSibling`];
                 if (candidate) {
                     selected.removeAttribute('selected');
                     candidate.setAttribute("selected", "");
+                    candidate.scrollIntoView({block: "nearest", behavior: "smooth"});
                 }
                 return;
             }
@@ -1719,14 +1867,16 @@ var ful = (function (exports, ftl) {
         <div class="input-group flex-nowrap" tabindex="-1">
             <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
             {{{{ slots.before }}}}
-            <div class="ful-select-input">
-                <badges></badges>
-                <input type="text" form="">
+            <div class="ful-select-input-container">
+                <div class="ful-select-input">
+                    <badges></badges>
+                    <input type="text" form="">
+                </div>
+                <ful-dropdown hidden popover="manual"></ful-dropdown>
             </div>
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
-        <ful-dropdown hidden></ful-dropdown>
         <ful-field-error></ful-field-error>
     `;
         static mappers = {
@@ -1754,6 +1904,7 @@ 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.#multiple = this.hasAttribute("multiple");
             await this.#loader.prefetch?.();
             const fragment = this.template().withOverlay({ slots, name }).render();
             this.#input = fragment.querySelector('input');
@@ -1764,7 +1915,6 @@ var ful = (function (exports, ftl) {
             this.readonly = observed.readonly;
 
             this.#ddmenu = fragment.querySelector('ful-dropdown');
-            this.#multiple = this.hasAttribute("multiple");
             const label = fragment.querySelector('label');
             label.addEventListener('click', () => this.focus());
             this.#fieldError = fragment.querySelector('ful-field-error');
@@ -1772,12 +1922,14 @@ var ful = (function (exports, ftl) {
             this.#input.ariaLabelledByElements = [label];
 
             const self = this;
-            const [dload, abortdload] = timing.debounce(400, () => self.#ddmenu.show(() => self.#loader.load(self.#input.value)));
+            const [dload, abortdload] = Timing.throttle(400, () => self.#ddmenu.show(() => self.#loader.load(self.#input.value)));
             this.addEventListener('click', (/** @type any */e) => {
-                e.stopPropagation();
                 if (e.target.matches('input')) {
                     return;
                 }
+                if(this.disabled || this.readonly){
+                    return;
+                }
                 if (this.#ddmenu.shown) {
                     this.#ddmenu.hide();
                     return;
@@ -1787,15 +1939,20 @@ var ful = (function (exports, ftl) {
             });
             this.#badges.addEventListener('click', (e) => {
                 e.stopPropagation();
+                if(this.disabled || this.readonly){
+                    return;
+                }
                 const idx = [...this.#badges.children].indexOf(e.target);
                 if (idx === -1) {
                     return;
                 }
                 this.#values.delete(Array.from(this.#values.keys()).pop());
+                this.#changed();
                 this.#syncBadges();
             });
 
             this.#input.addEventListener('blur', e => {
+                e.stopPropagation();
                 if (e.relatedTarget && this.contains(e.relatedTarget)) {
                     return;
                 }
@@ -1804,6 +1961,10 @@ var ful = (function (exports, ftl) {
                 this.#input.value = '';
             });
             this.#input.addEventListener('keydown', e => {
+                e.stopPropagation();
+                if(this.disabled || this.readonly){
+                    return;
+                }
                 switch (e.code) {
                     case 'ArrowUp': {
                         this.#ddmenu.moveOrShow(false, () => self.#loader.load(self.#input.value));
@@ -1826,6 +1987,7 @@ var ful = (function (exports, ftl) {
                         //remove last if caret a position 0
                         if (this.#values.size && this.#input.selectionStart === 0 && this.#input.selectionEnd === 0) {
                             this.#values.delete(Array.from(this.#values.keys()).pop());
+                            this.#changed();
                             this.#syncBadges();
                         }
                         break;
@@ -1838,19 +2000,37 @@ var ful = (function (exports, ftl) {
                 }
             });
             this.#input.addEventListener('input', e => {
+                e.stopPropagation();
+                if(this.disabled || this.readonly){
+                    return;
+                }
                 dload();
             });
             this.#ddmenu.addEventListener('change', (e) => {
+                e.stopPropagation();
                 if (!this.#multiple) {
                     this.#values.clear();
                 }
-                this.#values.set(e.detail.value, e.detail.label);
+                this.#values.set(e.detail.data[0], e.detail.data.slice(1));
+                this.#changed();
                 this.#syncBadges();
                 this.#input.focus();
                 this.#ddmenu.hide();
             });
             this.replaceChildren(fragment);
         }
+        withLoader(fn) {
+            fn(this.#loader);
+        }
+        #changed() {
+            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,
+                cancelable: false,
+                detail: { value }
+            }));
+        }
         #syncBadges() {
             const badges = Array.from(this.#values.entries()).map(([k, v]) => {
                 const b = document.createElement('badge');
@@ -1862,14 +2042,14 @@ var ful = (function (exports, ftl) {
             this.#badges.innerHTML = '';
             this.#badges.append(...badges);
         }
-        set value(value) {
-            if(value === null){
+        set value(vs) {
+            if(vs === null){
                 this.#values = new Map();
                 this.#syncBadges();
                 return;            
             }
             (async () => {
-                const entries = await (this.#multiple ? this.#loader.exact(...value) : this.#loader.exact(value));
+                const entries = await (this.#multiple ? this.#loader.exact(...vs) : this.#loader.exact(vs));
                 this.#values = new Map(entries);
                 this.#syncBadges();
             })();
@@ -1880,6 +2060,25 @@ var ful = (function (exports, ftl) {
             }
             return [...this.#values.keys()][0] ?? null;
         }
+        get entry() {
+            if (this.#multiple) {
+                return [...this.#values.entries()];
+            }
+            return [...this.#values.entries()][0] ?? null;
+        }
+        //@ts-ignore
+        get disabled(){
+            return this.#input.hasAttribute('disabled');
+        }
+        set disabled(d){
+            ftl.Attributes.toggle(this.#input, 'disabled', d);
+        }    
+        get readonly(){
+            return this.#input.readOnly;
+        }
+        set readonly(v) {
+            this.#input.readOnly = v;
+        }    
         focus(options) {
             this.#input.focus(options);
         }
@@ -2545,21 +2744,12 @@ var ful = (function (exports, ftl) {
             }
             const [operator, ...values] = v;
             this.#operator.setAttribute('value', operator);
-            this.#value1.value = values[0] ? InstantFilter.isoToLocal(values[0]) : values[0];
-            this.#value2.value = values[1] ? InstantFilter.isoToLocal(values[1]) : values[1];
+            this.#value1.value = values[0] ? Instant.isoToLocal(values[0]) : values[0];
+            this.#value2.value = values[1] ? Instant.isoToLocal(values[1]) : values[1];
             this.reflect(() => {
                 this.setAttribute('value', JSON.stringify(v));
             });
         }
-
-        static isoToLocal(iso) {
-            //this is so sad
-            const d = new Date(iso);
-            const pad = (n, v) => String(v).padStart(n, '0');
-            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}`
-        }
         focus(options) {
             this.#value1.focus(options);
         }
@@ -2768,6 +2958,11 @@ var ful = (function (exports, ftl) {
                 .defineElement('ful-form', Form)
                 .defineElement('ful-checkbox', Checkbox)
                 .defineElement('ful-input', Input)
+                .defineElement('ful-local-date', LocalDate)
+                .defineElement('ful-instant', Instant)
+                .defineElement('ful-input-local-date', InputLocalDate)
+                .defineElement('ful-input-local-time', InputLocalTime)
+                .defineElement('ful-input-instant', InputInstant)
                 .defineElement('ful-radio-group', RadioGroup)
                 .defineElement('ful-table', Table)
                 .defineElement('ful-pagination', Pagination)
@@ -2798,8 +2993,13 @@ var ful = (function (exports, ftl) {
     exports.HttpClient = HttpClient;
     exports.HttpClientError = HttpClientError;
     exports.Input = Input;
+    exports.InputInstant = InputInstant;
+    exports.InputLocalDate = InputLocalDate;
+    exports.InputLocalTime = InputLocalTime;
+    exports.Instant = Instant;
     exports.InstantFilter = InstantFilter;
     exports.Loaders = Loaders;
+    exports.LocalDate = LocalDate;
     exports.LocalDateFilter = LocalDateFilter;
     exports.LocalStorage = LocalStorage;
     exports.MediaType = MediaType;
@@ -2814,8 +3014,9 @@ var ful = (function (exports, ftl) {
     exports.Table = Table;
     exports.TableSchemaParser = TableSchemaParser;
     exports.TextFilter = TextFilter;
-    exports.VersionedStorage = VersionedStorage;
-    exports.timing = timing;
+    exports.Timing = Timing;
+    exports.VersionedLocalStorage = VersionedLocalStorage;
+    exports.VersionedSessionStorage = VersionedSessionStorage;
 
     return exports;