@optionfactory/ful 3.0.2 → 4.0.0

package/dist/ful.mjs

@@ -721,69 +721,82 @@ class HttpMultipartRequestCustomizer {
     }
 }
 
-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),
@@ -793,7 +806,6 @@ class AuthorizationCodeFlow {
         });
     }
     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 };
@@ -802,7 +814,7 @@ class AuthorizationCodeFlow {
         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
         });
@@ -830,7 +842,7 @@ class AuthorizationCodeFlow {
     }
     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");
         }
@@ -858,7 +870,7 @@ class AuthorizationCodeFlow {
     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);
@@ -1023,24 +1035,22 @@ class AsyncEvents {
     }
 }
 
-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;
@@ -1052,7 +1062,7 @@ const timing = {
                 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`.
@@ -1066,31 +1076,32 @@ const timing = {
             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) {
@@ -1099,7 +1110,7 @@ const timing = {
         };
         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);
@@ -1114,14 +1125,14 @@ const timing = {
                 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) {
@@ -1443,14 +1454,15 @@ class Input extends ParsedElement {
         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");
 
         Attributes.forward('input-', this, this._input);
@@ -1481,16 +1493,17 @@ class Input extends ParsedElement {
     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) {
         Attributes.toggle(this._input, 'disabled', d);
     }
     focus(options) {
@@ -1505,24 +1518,151 @@ class Input extends ParsedElement {
         this.internals.setValidity({ customError: true }, " ");
         this._fieldError.innerText = error;
     }
-    formResetCallback(){
+    formResetCallback() {
         this.value = this.getAttribute("value");
     }
 }
 
-class CompleteSelectLoader {
+class LocalDate extends 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 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() {
@@ -1533,37 +1673,47 @@ class CompleteSelectLoader {
     }
     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;
@@ -1581,26 +1731,21 @@ class ChunkedSelectLoader {
             .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()));
     }
 }
 
@@ -1612,10 +1757,10 @@ class SelectLoader {
             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);
     }
 }
 
@@ -1625,8 +1770,9 @@ class Dropdown extends ParsedElement {
         <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");
@@ -1649,30 +1795,31 @@ class Dropdown extends ParsedElement {
         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() {
@@ -1694,12 +1841,13 @@ class Dropdown extends ParsedElement {
         }
     }
     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;
         }
@@ -1718,14 +1866,16 @@ class Select extends ParsedElement {
         <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 = {
@@ -1753,6 +1903,7 @@ 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.#multiple = this.hasAttribute("multiple");
         await this.#loader.prefetch?.();
         const fragment = this.template().withOverlay({ slots, name }).render();
         this.#input = fragment.querySelector('input');
@@ -1763,7 +1914,6 @@ class Select extends ParsedElement {
         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');
@@ -1771,12 +1921,14 @@ class Select extends ParsedElement {
         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;
@@ -1786,15 +1938,20 @@ class Select extends ParsedElement {
         });
         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;
             }
@@ -1803,6 +1960,10 @@ class Select extends ParsedElement {
             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));
@@ -1825,6 +1986,7 @@ class Select extends ParsedElement {
                     //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;
@@ -1837,19 +1999,37 @@ class Select extends ParsedElement {
             }
         });
         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');
@@ -1861,14 +2041,14 @@ class Select extends ParsedElement {
         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();
         })();
@@ -1879,6 +2059,25 @@ class Select extends ParsedElement {
         }
         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){
+        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);
     }
@@ -2544,21 +2743,12 @@ class InstantFilter extends ParsedElement {
         }
         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);
     }
@@ -2767,6 +2957,11 @@ class Plugin {
             .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)
@@ -2782,5 +2977,5 @@ class Plugin {
     }
 }
 
-export { AsyncEvents, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Checkbox, Dropdown, Failure, Form, FormLoader, Hex, HttpClient, HttpClientError, Input, InstantFilter, Loaders, LocalDateFilter, LocalStorage, MediaType, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, VersionedStorage, timing };
+export { AsyncEvents, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, Bindings, Checkbox, Dropdown, Failure, Form, FormLoader, Hex, HttpClient, HttpClientError, Input, InputInstant, InputLocalDate, InputLocalTime, Instant, InstantFilter, Loaders, LocalDate, LocalDateFilter, LocalStorage, MediaType, Pagination, Plugin, RadioGroup, Select, SelectLoader, SessionStorage, SortButton, Spinner, Table, TableSchemaParser, TextFilter, Timing, VersionedLocalStorage, VersionedSessionStorage };
 //# sourceMappingURL=ful.mjs.map