{"version":3,"file":"ful.min.mjs","sources":["../src/ful/storage.mjs","../src/ful/events/async.mjs","../src/ful/timing.mjs","../src/ful/elements/bindings.mjs","../src/ful/elements/form.mjs","../src/ful/elements/input.mjs","../src/ful/elements/temporals.mjs","../src/ful/elements/files.mjs","../src/ful/elements/select.mjs","../src/ful/elements/radio.mjs","../src/ful/elements/checkbox.mjs","../src/ful/elements/spinner.mjs","../src/ful/elements/table.mjs","../src/ful/elements/filters.mjs","../src/ful/elements/l10n.mjs","../src/ful/elements/plugin.mjs"],"sourcesContent":["class LocalStorage extends Storage {\n static save(k, v) {\n localStorage.setItem(k, JSON.stringify(v));\n }\n static load(k) {\n const got = localStorage.getItem(k);\n if (got === null) {\n return undefined;\n }\n try {\n return JSON.parse(got);\n } catch {\n //not what save wrote: drop it, otherwise every later read fails the same way\n localStorage.removeItem(k);\n return undefined;\n }\n }\n static remove(k) {\n localStorage.removeItem(k);\n }\n static pop(k) {\n const decoded = LocalStorage.load(k);\n LocalStorage.remove(k);\n return decoded;\n }\n}\n\nclass SessionStorage extends Storage {\n static save(k, v) {\n sessionStorage.setItem(k, JSON.stringify(v));\n }\n static load(k) {\n const got = sessionStorage.getItem(k);\n if (got === null) {\n return undefined;\n }\n try {\n return JSON.parse(got);\n } catch {\n //not what save wrote: drop it, otherwise every later read fails the same way\n sessionStorage.removeItem(k);\n return undefined;\n }\n }\n static remove(k) {\n sessionStorage.removeItem(k);\n }\n static pop(k) {\n const decoded = SessionStorage.load(k);\n SessionStorage.remove(k);\n return decoded;\n }\n}\n\nclass VersionedLocalStorage {\n static save(key, revision, data) {\n LocalStorage.save(key, { revision, data });\n }\n static load(key, revision) {\n const stored = LocalStorage.load(key);\n if (stored === undefined) {\n return undefined;\n }\n if (stored.revision !== revision) {\n LocalStorage.remove(key);\n return undefined;\n }\n return stored.data;\n }\n}\n\nclass VersionedSessionStorage {\n static save(key, revision, data) {\n SessionStorage.save(key, { revision, data });\n }\n static load(key, revision) {\n const stored = SessionStorage.load(key);\n if (stored === undefined) {\n return undefined;\n }\n if (stored.revision !== revision) {\n SessionStorage.remove(key);\n return undefined;\n }\n return stored.data;\n }\n}\n\nexport { LocalStorage, VersionedLocalStorage, SessionStorage, VersionedSessionStorage };\n","/**\n * @typedef {Object} AsyncExtension\n * @property {Promise[]} promises\n * @typedef {Event & { async?: AsyncExtension }} AsyncEvent\n */\nclass AsyncEvents {\n /**\n * Dispatches an event and handles asynchronous resolution based on the execution mode.\n * @param {HTMLElement} el - The target element dispatching the event.\n * @param {AsyncEvent} evt - The event instance.\n * @param {{mode?: 'broadcast' | 'pipeline' | 'delegate'}} [options] - Configuration options (defaults to 'broadcast').\n * @returns {Promise} Resolves with an array of values for broadcasts, a single value for pipelines/delegates, or undefined.\n */\n static async fireAsync(el, evt, options) {\n el.dispatchEvent(evt);\n const promises = evt.async?.promises ?? [];\n const mode = options?.mode ?? 'broadcast';\n if (mode === 'pipeline' && promises.length > 1) {\n throw new Error(\n `[AsyncEvents] Event \"${evt.type}\" is configured in 'pipeline' mode and expects at most one async listener, but ${promises.length} listeners were triggered on this element.`,\n );\n }\n if (mode === 'delegate' && promises.length !== 1) {\n throw new Error(\n `[AsyncEvents] Event \"${evt.type}\" is configured in 'delegate' mode and requires exactly one async listener, but ${promises.length} were registered.`,\n );\n }\n return mode === 'broadcast' ? Promise.all(promises) : Promise.resolve(promises[0]);\n }\n\n /**\n * Registers an asynchronous event listener wrapper.\n * @param {HTMLElement} el - The target element.\n * @param {string} type - The event name/type.\n * @param {Function} fn - The async listener middleware function returning the execution result.\n * @param {AddEventListenerOptions} [options] - Native addEventListener options.\n * @returns {EventListener} The underlying proxy listener function needed for cleanup via asyncOff.\n */\n static asyncOn(el, type, fn, options) {\n /** @type {(evt: Event) => Promise} */\n const listener = async (event) => {\n const ae = /** @type {AsyncEvent} */ (event);\n if (!ae.async) {\n ae.async = { promises: [] };\n }\n const { promise, resolve, reject } = Promise.withResolvers();\n ae.async.promises.push(promise);\n try {\n resolve(await fn(ae));\n } catch (e) {\n reject(e);\n }\n };\n\n el.addEventListener(type, listener, options);\n return listener;\n }\n\n /**\n * Unregisters an asynchronous event listener proxy.\n * @param {HTMLElement} el - The target element.\n * @param {string} type - The event name/type.\n * @param {EventListener} listener - The proxy listener instance previously returned by asyncOn.\n * @param {EventListenerOptions} [options] - Native removeEventListener options.\n */\n static asyncOff(el, type, listener, options) {\n el.removeEventListener(type, listener, options);\n }\n\n /**\n * Mixes the asynchronous execution engine extensions into target class prototypes.\n * @param {...Function} classes - The target class constructors to decorate.\n */\n static mixInto(...classes) {\n for (const k of classes) {\n Object.assign(k.prototype, {\n /**\n * @this {HTMLElement}\n * @param {AsyncEvent} evt\n * @param {{mode?: 'broadcast' | 'pipeline' | 'delegate'}} [options]\n * @returns {Promise}\n */\n async fireAsync(evt, options) {\n return await AsyncEvents.fireAsync(this, evt, options);\n },\n\n /**\n * @this {HTMLElement}\n * @param {string} type\n * @param {Function} fn\n * @param {AddEventListenerOptions} [options]\n * @returns {EventListener}\n */\n asyncOn(type, fn, options) {\n return AsyncEvents.asyncOn(this, type, fn, options);\n },\n\n /**\n * @this {HTMLElement}\n * @param {string} type\n * @param {EventListener} listener\n * @param {EventListenerOptions} [options]\n * @returns {void}\n */\n asyncOff(type, listener, options) {\n AsyncEvents.asyncOff(this, type, listener, options);\n },\n });\n }\n }\n}\n\nexport { AsyncEvents };\n","class Timing {\n static sleep(ms) {\n return new Promise((resolve) => setTimeout(resolve, ms));\n }\n static DEBOUNCE_DEFAULT = 0;\n static DEBOUNCE_IMMEDIATE = 1;\n /**\n * Executes only after a period of inactivity (pause in events).\n * Respond to the \"end\" of a series of events.\n * @param {*} timeoutMs\n * @param {*} func\n * @param {*} [options]\n * @returns {[function, function]}\n */\n static debounce(timeoutMs, func, options) {\n const opts = options ?? Timing.DEBOUNCE_DEFAULT;\n let tid = /** @type {number | null} */ (null);\n let args = [];\n let previousTimestamp = 0;\n\n const later = () => {\n const elapsed = performance.now() - previousTimestamp;\n if (timeoutMs > elapsed) {\n tid = setTimeout(later, timeoutMs - elapsed);\n return;\n }\n tid = null;\n if (opts !== Timing.DEBOUNCE_IMMEDIATE) {\n func(...args);\n }\n // This check is needed because `func` can recursively invoke `debounced`.\n if (tid === null) {\n args = [];\n }\n };\n\n const debounced = (...called) => {\n args = called;\n previousTimestamp = performance.now();\n if (tid === null) {\n tid = setTimeout(later, timeoutMs);\n if (opts === Timing.DEBOUNCE_IMMEDIATE) {\n func(...args);\n }\n }\n };\n const abort = () => {\n clearTimeout(tid ?? undefined);\n tid = null;\n args = [];\n };\n return [debounced, abort];\n }\n static THROTTLE_DEFAULT = 0;\n static THROTTLE_NO_LEADING = 1;\n static THROTTLE_NO_TRAILING = 2;\n /**\n * Executes at most once per specified time interval, regardless of ongoing events.\n * @param {*} timeoutMs\n * @param {*} func\n * @param {*} [options]\n * @returns {[function, function]}\n */\n static throttle(timeoutMs, func, options) {\n const opts = options ?? Timing.THROTTLE_DEFAULT;\n let tid = /** @type {number | null} */ (null);\n let args = [];\n let previousTimestamp = 0;\n\n const later = () => {\n previousTimestamp = opts & Timing.THROTTLE_NO_LEADING ? 0 : performance.now();\n tid = null;\n func(...args);\n if (tid === null) {\n args = [];\n }\n };\n const throttled = (...called) => {\n const now = performance.now();\n if (!previousTimestamp && opts & Timing.THROTTLE_NO_LEADING) {\n previousTimestamp = now;\n }\n const remaining = previousTimestamp === 0 ? 0 : timeoutMs - (now - previousTimestamp);\n args = called;\n if (remaining <= 0 || remaining > timeoutMs) {\n if (tid !== null) {\n clearTimeout(tid);\n tid = null;\n }\n previousTimestamp = now;\n func(...args);\n if (tid === null) {\n args = [];\n }\n } else if (tid === null && !(opts & Timing.THROTTLE_NO_TRAILING)) {\n tid = setTimeout(later, remaining);\n }\n };\n const abort = () => {\n clearTimeout(tid ?? undefined);\n tid = null;\n args = [];\n };\n return [throttled, abort];\n }\n}\n\nexport { Timing };\n","class Bindings {\n /**\n * @param {{ [x: string]: any; }} obj\n * @param {string} prefix\n * @param {Set} stops\n * @return {{ [x: string]: any; }}\n */\n static flatten(obj, prefix, stops) {\n return Object.keys(obj).reduce((acc, k) => {\n const pre = prefix.length ? `${prefix}.${k}` : k;\n if (!stops.has(pre) && typeof obj[k] === 'object' && obj[k] !== null) {\n Object.assign(acc, Bindings.flatten(obj[k], pre, stops));\n } else {\n acc[pre] = obj[k];\n }\n return acc;\n }, {});\n }\n\n /**\n * @param {any} result\n * @param {string} path\n * @param {any} value\n */\n static providePath(result, path, value) {\n const keys = path.split('.').map((k) => (/^[0-9]+$/.test(k) ? +k : k));\n let current = result ?? {};\n let previous = /** @type {any} */ (null);\n for (let i = 0; ; ++i) {\n const ckey = keys[i];\n const pkey = keys[i - 1];\n if (Number.isInteger(ckey) && !Array.isArray(current)) {\n if (previous !== null) {\n previous[pkey] = current = [];\n } else {\n result = current = [];\n }\n }\n if (i === keys.length - 1) {\n //when value is undefined we only want to define the property if it's not defined\n current[ckey] = value !== undefined ? value : ckey in current ? current[ckey] : null;\n return result;\n }\n if (current[ckey] === undefined) {\n current[ckey] = {};\n }\n previous = current;\n current = current[ckey];\n }\n }\n /**\n *\n * @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el\n * @returns\n */\n static extract(el) {\n if (el.getAttribute('type') === 'radio') {\n if (!el.checked) {\n return undefined;\n }\n return el.dataset.fulBindType === 'boolean' ? el.value === 'true' : el.value;\n }\n if (el.getAttribute('type') === 'checkbox') {\n return el.checked;\n }\n if (el.dataset.fulBindType === 'boolean') {\n return !el.value ? null : el.value === 'true';\n }\n if (el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA') {\n return el.value === '' || el.value === undefined ? null : el.value;\n }\n return el.value;\n }\n\n /**\n *\n * @param {HTMLFormElement} form\n * @param {HTMLElement} [submitter]\n * @returns\n */\n static extractFrom(form, submitter) {\n let result = {};\n for (const el of form.elements) {\n // we are assuming submitters are disabled during submit.\n if (!el.hasAttribute('name') || (el.matches(':disabled') && el !== submitter)) {\n continue;\n }\n result = Bindings.providePath(\n result,\n /** @type {string} */ (el.getAttribute('name')),\n Bindings.extract(el),\n );\n }\n return result;\n }\n\n /**\n *\n * @param {Element & {dataset?: any} & {checked?: boolean} & {value?: any}} el\n * @returns\n */\n static mutate(el, raw) {\n if (el.getAttribute('type') === 'radio') {\n //values are matched as strings, as ful-radio-group does: extract decodes\n //boolean radios, and payloads carry numbers where the attribute is text\n el.checked = raw != null && el.getAttribute('value') === String(raw);\n return;\n }\n if (el.getAttribute('type') === 'checkbox') {\n el.checked = raw;\n return;\n }\n el.value = raw;\n }\n\n static mutateIn(form, values) {\n const names = Array.from(form.elements)\n .map((el) => el.getAttribute('name'))\n .filter((n) => n);\n for (const [flattenedKey, value] of Object.entries(Bindings.flatten(values, '', new Set(names)))) {\n for (const el of form.querySelectorAll(`[name='${CSS.escape(flattenedKey)}']`)) {\n Bindings.mutate(el, value);\n }\n }\n }\n\n static errors(form, es, scrollOnError) {\n const fieldErrors = es.filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');\n const globalErrors = es.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');\n form.querySelectorAll(`[name]`).forEach((el) => {\n el.setCustomValidity?.('');\n });\n form.querySelectorAll('ful-errors').forEach((el) => {\n el.replaceChildren();\n el.setAttribute('hidden', '');\n });\n fieldErrors.forEach((e) => {\n const name = e.context.replace(/\\[/g, '.').replace(/\\]\\./g, '.').replace(/\\]/g, '')\n const parts = name.split('.');\n for (let i = parts.length; i !== 0; --i) {\n const prefix = parts.slice(0, i).join('.');\n const suffix = parts.slice(i, parts.length).join('.');\n form.querySelectorAll(`[name='${CSS.escape(prefix)}']`).forEach((input) => {\n input.setCustomValidity?.(e.reason, suffix);\n });\n }\n });\n form.querySelectorAll('ful-errors').forEach((el) => {\n const hel = /** @type HTMLElement} */ (el);\n hel.innerText = globalErrors.map((e) => e.reason).join('\\n');\n if (globalErrors.length !== 0) {\n el.removeAttribute('hidden');\n }\n });\n if (es.length === 0 || !scrollOnError) {\n return;\n }\n Array.from(form.querySelectorAll(`:invalid`))\n .sort((a, b) => a.getBoundingClientRect().y - b.getBoundingClientRect().y)[0]\n ?.focus();\n }\n}\n\nexport { Bindings };\n","import { Attributes, ParsedElement, registry } from '../../ftl/index.mjs';\nimport { Failure } from '../../httpc/index.mjs';\nimport { Bindings } from './bindings.mjs';\nimport { AsyncEvents } from '../events/async.mjs';\n\nclass RemoteJsonFormLoader {\n #http;\n #url;\n #method;\n #requestMapper;\n #responseMapper;\n constructor(http, url, method, requestMapper, responseMapper) {\n this.#http = http;\n this.#url = url;\n this.#method = method;\n this.#requestMapper = requestMapper;\n this.#responseMapper = responseMapper;\n }\n prepare(values, form) {\n return this.#requestMapper(values, form);\n }\n async submit(values, form) {\n return await this.#http.request(this.#method, this.#url).json(values).fetch();\n }\n transform(response, form) {\n return this.#responseMapper(response, form);\n }\n}\n\nclass LocalFormLoader {\n #requestMapper;\n #responseMapper;\n constructor(requestMapper, responseMapper) {\n this.#requestMapper = requestMapper;\n this.#responseMapper = responseMapper;\n }\n async prepare(values, form) {\n return await this.#requestMapper(values, form);\n }\n async submit(values, form, response) {\n return response;\n }\n async transform(response, form) {\n return await this.#responseMapper(response, form);\n }\n}\n\nclass FormLoader {\n static create(el, conf) {\n const http = registry.component('http-client');\n const requestMapper = el.hasAttribute('request-mapper')\n ? registry.component(el.getAttribute('request-mapper'))\n : (v) => v;\n const responseMapper = el.hasAttribute('response-mapper')\n ? registry.component(el.getAttribute('response-mapper'))\n : (v) => v;\n const url = el.getAttribute('action');\n if (!url) {\n return new LocalFormLoader(requestMapper, responseMapper);\n }\n const method = el.getAttribute('method') ?? 'POST';\n return new RemoteJsonFormLoader(http, url, method, requestMapper, responseMapper);\n }\n}\n\nclass Form extends ParsedElement {\n form;\n render() {\n const form = document.createElement('form');\n this.form = form;\n form.setAttribute('novalidate', '');\n Attributes.forward('form-', this, form);\n form.replaceChildren(...this.childNodes);\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n e.stopPropagation();\n await this.submit(e.submitter ?? undefined);\n });\n if (this.hasAttribute('clear-invalid-on-change')) {\n this.addEventListener('change', (/** @type any */ evt) => {\n evt.target.setCustomValidity?.('');\n });\n }\n this.replaceChildren(form);\n }\n /**\n *\n * @param {HTMLElement} [submitter]\n * @returns\n */\n async submit(submitter) {\n this.spinner(true);\n //one try: building the loader and preparing the request are as much part of a\n //submit as sending it, and a mapper that throws is how a caller reports a\n //problem with the values\n let values;\n let request;\n try {\n const loader = registry.component(this.getAttribute('loader') ?? 'loaders:form').create(this);\n values = Bindings.extractFrom(this.form, submitter);\n request = await loader.prepare(values, this);\n const se = new CustomEvent('submit', {\n bubbles: true,\n cancelable: true,\n detail: { submitter, values, request },\n });\n if (!this.dispatchEvent(se)) {\n return;\n }\n this.errors = [];\n const sre = new CustomEvent('submit:requested', {\n bubbles: true,\n cancelable: false,\n detail: { submitter, values: se.detail.values, request: se.detail.request },\n });\n let response = await AsyncEvents.fireAsync(this, sre, { mode: 'pipeline' });\n request = sre.detail.request;\n\n response = await loader.submit(request, this, response);\n const mapped = await loader.transform(response, this);\n this.dispatchEvent(\n new CustomEvent('submit:success', {\n bubbles: true,\n cancelable: false,\n detail: { submitter, values, request, response: mapped },\n }),\n );\n } catch (e) {\n this.dispatchEvent(\n new CustomEvent('submit:failure', {\n bubbles: true,\n cancelable: false,\n detail: { submitter, values, request, exception: e },\n }),\n );\n if (e instanceof Failure) {\n this.errors = e.problems;\n }\n console.warn('failed to submit form', this, 'reason:', e);\n } finally {\n this.spinner(false);\n }\n }\n reset() {\n this.form.reset();\n }\n #spinning = 0;\n spinner(spin) {\n //submits can overlap: only the outermost one saves and restores the button states\n if (spin) {\n ++this.#spinning;\n if (this.#spinning !== 1) {\n return;\n }\n } else {\n this.#spinning = Math.max(0, this.#spinning - 1);\n if (this.#spinning !== 0) {\n return;\n }\n }\n this.querySelectorAll('ful-spinner').forEach((el) => {\n const hel = /** @type HTMLElement */ (el);\n hel.hidden = !spin;\n });\n this.querySelectorAll('input,button').forEach((el) => {\n const hel = /** @type HTMLButtonElement|HTMLInputElement */ (el);\n if (hel.type !== 'submit' && hel.type !== 'reset') {\n return;\n }\n if (spin) {\n hel.dataset.wd = String(hel.disabled);\n hel.disabled = true;\n } else {\n hel.disabled = hel.dataset.wd === 'true';\n delete hel.dataset.wd;\n }\n });\n }\n set values(vs) {\n Bindings.mutateIn(this.form, vs);\n }\n get values() {\n return Bindings.extractFrom(this.form);\n }\n set errors(es) {\n Bindings.errors(this.form, es, this.hasAttribute('scroll-on-error'));\n }\n}\n\nexport { FormLoader, Form };\n","import { Attributes, ParsedElement } from '../../ftl/index.mjs';\n\nclass Input extends ParsedElement {\n static observed = ['value', 'readonly:presence', 'required:presence', 'placeholder'];\n static slots = true;\n static template = `\n
\n \n {{{{ slots.info }}}}\n
\n
\n {{{{ slots.ibefore }}}}\n {{{{ slots.before }}}}\n \n \n {{{{ slots.after }}}}\n {{{{ slots.iafter }}}}\n
\n \n `;\n static formAssociated = true;\n _input;\n _fieldError;\n constructor() {\n super();\n this.internals = this.attachInternals();\n this.internals.role = 'presentation';\n }\n _type() {\n return this.getAttribute('type') ?? 'text';\n }\n _fragment(type, slots) {\n return this.template().withOverlay({ type, slots }).render();\n }\n render({ slots, observed, disabled, skipObservedSetup }) {\n const type = this._type();\n const fragment = this._fragment(type, slots);\n this._input = fragment.querySelector('input,textarea');\n\n Attributes.forward('input-', this, this._input);\n this._input.addEventListener('keydown', (evt) => {\n if (evt.key !== 'Enter' || this._type() === 'textarea') {\n return;\n }\n const form = this.internals.form;\n if (!form) {\n return;\n }\n const candidates = /** @type [HTMLButtonElement|HTMLInputElement] */ (\n Array.from(form.querySelectorAll('button:not(:disabled), input:not(:disabled)'))\n );\n const submitter = candidates.find((el) => el.type === 'submit');\n form.requestSubmit(submitter);\n });\n this._input.addEventListener('input', (evt) => {\n const mask = this.getAttribute('mask');\n if (!mask) {\n return;\n }\n const strip = (v) => v.replace(new RegExp(mask, 'g'), '');\n const before = evt.target.value;\n const after = strip(before);\n if (before === after) {\n return;\n }\n const start = evt.target.selectionStart;\n evt.target.value = after;\n if (start === null) {\n //email, number and the date types have no selection to restore\n return;\n }\n //the caret keeps its place among the characters that survived, so only the\n //ones stripped before it count\n const caret = strip(before.slice(0, start)).length;\n evt.target.setSelectionRange(caret, caret);\n });\n this._input.addEventListener('change', (evt) => {\n evt.stopPropagation();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: {\n value: this.value,\n },\n }),\n );\n });\n const label = fragment.querySelector('label');\n label.addEventListener('click', () => this.focus());\n this._fieldError = fragment.querySelector('ful-field-error');\n this._input.ariaDescribedByElements = [this._fieldError];\n this._input.ariaLabelledByElements = [label];\n this.replaceChildren(fragment);\n if (!skipObservedSetup) {\n // biome-ignore lint/complexity/noUselessThisAlias: keeps checkJs from seeing these as class fields\n const el = this;\n el.disabled = disabled;\n el.readonly = observed.readonly;\n el.required = observed.required;\n el.placeholder = observed.placeholder;\n el.value = observed.value;\n }\n }\n get value() {\n const uppercase = this.hasAttribute('uppercase');\n const trim = this.hasAttribute('trim');\n const v = this._input.value;\n const uppercased = uppercase ? v.toUpperCase() : v;\n const trimmed = trim ? uppercased.trim() : uppercased;\n return trimmed === '' ? null : trimmed;\n }\n set value(value) {\n this._input.value = value === '' ? null : value;\n }\n get readonly() {\n return this._input.readOnly;\n }\n set readonly(v) {\n this._input.readOnly = v;\n this.reflect(() => {\n Attributes.toggle(this, 'readonly', v);\n });\n }\n get disabled() {\n //the claim only, like a native input: the effective state, claim or disabled\n //ancestry, is what :disabled matches\n return this.hasAttribute('disabled');\n }\n set disabled(d) {\n //the claim belongs to the author alone, nothing else ever writes it\n Attributes.toggle(this, 'disabled', d);\n //the inner control carries the claim as a native input would: a disabled\n //fieldset ancestry is left to the browser, which reaches the inner control\n //as a descendant of the fieldset and re-enables it on its own\n Attributes.toggle(this._input, 'disabled', d);\n }\n get required() {\n return this._input.getAttribute('aria-required') === 'true';\n }\n set required(d) {\n Attributes.set(this._input, 'aria-required', d ? 'true' : null);\n this.reflect(() => {\n Attributes.toggle(this, 'required', d);\n });\n }\n get placeholder() {\n const v = this._input.getAttribute('placeholder');\n return v === ' ' ? null : v;\n }\n set placeholder(d) {\n //without a placeholder :placeholder-shown never matches, and floating labels\n //rely on it, so a blank one stands in for none\n Attributes.set(this._input, 'placeholder', d ?? ' ');\n this.reflect(() => {\n Attributes.set(this, 'placeholder', d);\n });\n }\n focus(options) {\n this._input.focus(options);\n }\n setCustomValidity(error) {\n if (!error) {\n this.internals.setValidity({});\n this._fieldError.innerText = '';\n return;\n }\n this.internals.setValidity({ customError: true }, ' ');\n this._fieldError.innerText = error;\n }\n formResetCallback() {\n this.value = this.unmarshal('value', this.getAttribute('value'));\n }\n}\n\nexport { Input };\n","import { ParsedElement } from '../../ftl/index.mjs';\nimport { Input } from './input.mjs';\n\nclass LocalDate extends ParsedElement {\n render() {\n const content = this.textContent.trim();\n if (content === '') {\n this.replaceChildren(this.getAttribute('default') ?? '');\n return;\n }\n const locale = this.getAttribute('locale') ?? Intl.DateTimeFormat().resolvedOptions().locale;\n const formatter = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'numeric', day: 'numeric' });\n const [y, m, d] = content.split('-').map(Number);\n this.replaceChildren(formatter.format(new Date(y, m - 1, d)));\n }\n}\n\nclass Instant extends ParsedElement {\n render() {\n const content = this.textContent.trim();\n if (content === '') {\n this.replaceChildren(this.getAttribute('default') ?? '');\n return;\n }\n const locale = this.getAttribute('locale') ?? Intl.DateTimeFormat().resolvedOptions().locale;\n const format = new Intl.DateTimeFormat(locale, {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false,\n });\n this.replaceChildren(format.format(new Date(Instant.isoToLocal(content))));\n }\n static isoToLocal(iso) {\n //this is so sad\n const d = new Date(iso);\n const pad = (n, v) => String(v).padStart(n, '0');\n const date = `${d.getFullYear()}-${pad(2, d.getMonth() + 1)}-${pad(2, d.getDate())}`;\n const time = `${pad(2, d.getHours())}:${pad(2, d.getMinutes())}:${pad(2, d.getSeconds())}.${pad(3, d.getMilliseconds())}`;\n return `${date}T${time}`;\n }\n}\n\nclass InputLocalDate extends Input {\n static observed = ['value', 'readonly:presence', 'required:presence', 'placeholder', 'min', 'max', 'step'];\n _type() {\n return 'date';\n }\n render(conf) {\n const { observed } = conf;\n super.render(conf);\n //step first: on a time input min and max are snapped to its grid\n this.step = observed.step;\n this.min = observed.min;\n this.max = observed.max;\n }\n get min() {\n const v = this._input.min;\n return v === '' ? null : v;\n }\n set min(v) {\n this._input.min = InputLocalDate.#fromIsoOrOffset(v);\n }\n get max() {\n const v = this._input.max;\n return v === '' ? null : v;\n }\n set max(v) {\n this._input.max = InputLocalDate.#fromIsoOrOffset(v);\n }\n get step() {\n const v = this._input.step;\n return v === '' ? null : v;\n }\n set step(v) {\n this._input.step = v ?? '';\n }\n static #fromIsoOrOffset(v) {\n if (!v) {\n return '';\n }\n //this could be date.toLocaleDateString('en-CA')\n const formatLocalDate = (date) =>\n new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().split('T')[0];\n if (v === 'now') {\n return formatLocalDate(new Date());\n }\n const re = /^([+-])(\\d+)([dmy])$/;\n const match = re.exec(v);\n if (!match) {\n return v;\n }\n const sign = match[1] === '-' ? -1 : 1;\n const offset = +match[2];\n const r = new Date();\n r.setHours(0, 0, 0, 0);\n switch (match[3]) {\n case 'd':\n r.setDate(r.getDate() + offset * sign);\n break;\n case 'm': {\n const originalDay = r.getDate();\n r.setMonth(r.getMonth() + offset * sign);\n if (r.getDate() !== originalDay) {\n r.setDate(0);\n }\n break;\n }\n case 'y':\n r.setFullYear(r.getFullYear() + offset * sign);\n break;\n }\n return formatLocalDate(r);\n }\n}\n\nclass InputLocalTime extends InputLocalDate {\n _type() {\n return 'time';\n }\n get min() {\n const v = this._input.min;\n return v === '' ? null : v;\n }\n set min(v) {\n this._input.min = this.#fromNowOrOffset(v);\n }\n get max() {\n const v = this._input.max;\n return v === '' ? null : v;\n }\n set max(v) {\n this._input.max = this.#fromNowOrOffset(v);\n }\n /**\n * Resolves `now` and hour or minute offsets against the current time, wrapping\n * around midnight. `m` is minutes here, unlike the date offsets of the parent where\n * it is months: months mean nothing on a time. Anything else is passed through.\n */\n #fromNowOrOffset(v) {\n if (!v) {\n return '';\n }\n const resolved = new Date();\n if (v !== 'now') {\n const re = /^([+-])(\\d+)([hm])$/;\n const match = re.exec(v);\n if (!match) {\n return v;\n }\n const sign = match[1] === '-' ? -1 : 1;\n const offset = +match[2] * sign;\n if (match[3] === 'h') {\n resolved.setHours(resolved.getHours() + offset);\n } else {\n resolved.setMinutes(resolved.getMinutes() + offset);\n }\n }\n return InputLocalTime.#snapped(resolved, Number(this._input.step) || 60);\n }\n /**\n * Truncates a time to the step grid: min anchors that grid, so a bound that is not\n * on it makes every value on it invalid.\n */\n static #snapped(date, stepSeconds) {\n const pad = (n) => String(n).padStart(2, '0');\n const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();\n const snapped = Math.floor(seconds / stepSeconds) * stepSeconds;\n const hh = pad(Math.floor(snapped / 3600));\n const mm = pad(Math.floor((snapped % 3600) / 60));\n return stepSeconds % 60 === 0 ? `${hh}:${mm}` : `${hh}:${mm}:${pad(snapped % 60)}`;\n }\n}\n\nclass InputInstant extends Input {\n static observed = ['value', 'readonly:presence', 'required:presence', 'placeholder', 'min', 'max', 'step'];\n _type() {\n return 'datetime-local';\n }\n render(conf) {\n const { observed } = conf;\n super.render(conf);\n this.min = observed.min;\n this.max = observed.max;\n this.step = observed.step;\n }\n get value() {\n const v = this._input.value;\n return v === '' ? null : new Date(v).toISOString();\n }\n set value(v) {\n this._input.value = v ? Instant.isoToLocal(v) : '';\n }\n get min() {\n const v = this._input.min;\n return v === '' ? null : new Date(v).toISOString();\n }\n set min(v) {\n this._input.min = v ? Instant.isoToLocal(v) : '';\n }\n get max() {\n const v = this._input.max;\n return v === '' ? null : new Date(v).toISOString();\n }\n set max(v) {\n this._input.max = v ? Instant.isoToLocal(v) : '';\n }\n get step() {\n const v = this._input.step;\n return v === '' ? null : v;\n }\n set step(v) {\n this._input.step = v ?? '';\n }\n}\n\nexport { Instant, LocalDate, InputLocalDate, InputLocalTime, InputInstant };\n","import { Attributes } from '../../ftl/index.mjs';\nimport { Input } from './input.mjs';\n\nclass InputFile extends Input {\n static l10n = {\n en: {\n dropzonelabel: 'Click or drop your files here',\n unacceptablefiletype: 'Only files of type {0} are supported',\n maxfilesizeexceeded: 'Maximum supported file size is {0}',\n maxtotalsizeexceeded: 'Maximum supported total file size is {0}',\n maxfilesexceeded: 'Maximum files count exceeded',\n },\n it: {\n dropzonelabel: 'Clicca o trascina i file qui',\n unacceptablefiletype: 'Solo i file di tipo {0} sono supportati',\n maxfilesizeexceeded: 'La dimensione massima di un file è di {0}',\n maxtotalsizeexceeded: 'La dimensione massima complessiva dei file è di {0}',\n maxfilesexceeded: 'Numero massimo di file superato',\n },\n es: {\n dropzonelabel: 'Haz clic o arrastra tus archivos aquí',\n unacceptablefiletype: 'Solo se admiten archivos de tipo {0}',\n maxfilesizeexceeded: 'El tamaño máximo de archivo admitido es {0}',\n maxtotalsizeexceeded: 'El tamaño total máximo admitido es {0}',\n maxfilesexceeded: 'Se ha superado el número máximo de archivos',\n },\n fr: {\n dropzonelabel: 'Cliquez ou déposez vos fichiers ici',\n unacceptablefiletype: 'Seuls les fichiers de type {0} sont pris en charge',\n maxfilesizeexceeded: 'La taille maximale de fichier prise en charge est {0}',\n maxtotalsizeexceeded: 'La taille totale maximale prise en charge est {0}',\n maxfilesexceeded: 'Nombre maximal de fichiers dépassé',\n },\n };\n static observed = [\n 'value',\n 'readonly:presence',\n 'required:presence',\n 'placeholder',\n 'accept:csv',\n 'multiple:presence',\n 'itemlist:presence',\n 'dropzone:presence',\n 'maxfiles:number',\n 'maxfilesize:number',\n 'maxtotalsize:number',\n ];\n #accept;\n #items;\n #dropzone;\n #warnings;\n _type() {\n return 'file';\n }\n static template = `\n
\n \n {{{{ slots.info }}}}\n
\n
\n {{{{ slots.ibefore }}}}\n {{{{ slots.before }}}}\n \n {{{{ slots.after }}}}\n {{{{ slots.iafter }}}}\n
\n
\n {{{{ slots.dropzone }}}}\n
\n
\n {{ #l10n:t('dropzonelabel') }}\n
\n \n \n \n `;\n static templates = {\n items: `\n \n
{{ file.name }}
\n
{{ #bytes:format(file.size) }}
\n \n \n `,\n warning: `{{ #l10n:t(key, args) }}`,\n };\n render(conf) {\n const { observed } = conf;\n super.render({ ...conf, skipObservedSetup: true });\n this.#items = this.querySelector('ful-item-list');\n this.#dropzone = this.querySelector('[data-ref=dropzone]');\n this.#warnings = this.querySelector('ful-field-warnings');\n this.accept = observed.accept;\n this.multiple = observed.multiple;\n this.itemlist = observed.itemlist;\n this.dropzone = observed.dropzone;\n this.maxfiles = observed.maxfiles;\n this.maxfilesize = observed.maxfilesize;\n this.maxtotalsize = observed.maxtotalsize;\n\n this.disabled = conf.disabled;\n this.readonly = observed.readonly;\n this.required = observed.required;\n this.placeholder = observed.placeholder;\n this.value = observed.value;\n this.#warnings.addEventListener('animationend', (e) => {\n e.target.remove();\n });\n this.#items.addEventListener('click', (e) => {\n if (!e.target.closest('button')) {\n return;\n }\n const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));\n if (idx === -1) {\n return;\n }\n const dt = new DataTransfer();\n [...this.files]\n .filter((f, i) => i !== idx)\n .forEach((f) => {\n dt.items.add(f);\n });\n this.files = dt.files;\n });\n this.#dropzone.addEventListener('click', (e) => {\n this.querySelector('input')?.click();\n });\n\n this.#dropzone.addEventListener('dragover', (e) => {\n e.preventDefault();\n });\n this.#dropzone.addEventListener('drop', (e) => {\n e.preventDefault();\n const dropped = [...e.dataTransfer.items].filter((i) => i.kind === 'file');\n if (dropped.length === 0) {\n return;\n }\n const dt = new DataTransfer();\n dropped.forEach((i) => {\n dt.items.add(i.getAsFile());\n });\n this.files = dt.files;\n });\n this._input.addEventListener('change', (e) => {\n this.#update();\n });\n }\n #formatByteSize(v) {\n return v > 1024 * 1024\n ? `${Math.round((v / 1024 / 1024) * 100) / 100}MiB`\n : v > 1024\n ? `${Math.round((v / 1024) * 100) / 100}KiB`\n : `${v}B`;\n }\n #update() {\n this.setCustomValidity();\n this.#warnings.replaceChildren();\n this.#ensureAcceptable();\n this.#ensureFileSizes();\n this.#ensureTotalSize();\n this.#ensureFilesCount();\n this.template('items')\n .withOverlay({ files: this.files })\n .withModule('bytes', { format: this.#formatByteSize })\n .renderTo(this.#items);\n }\n warning(key, args) {\n this.template('warning').withOverlay({ key, args }).appendTo(this.#warnings);\n }\n #ensureAcceptable() {\n if (!this.#accept.length) {\n return;\n }\n const unacceptable = [...this.files].filter(\n (file) => !this.#accept.some((type) => file.name.toLowerCase().endsWith(type.toLowerCase())),\n );\n\n if (unacceptable.length === 0) {\n return;\n }\n this.warning('unacceptablefiletype', this.#accept.join(', '));\n const dt = new DataTransfer();\n [...this.files]\n .filter((f) => !unacceptable.includes(f))\n .forEach((f) => {\n dt.items.add(f);\n });\n this._input.files = dt.files;\n }\n #ensureFilesCount() {\n if (this.#maxfiles === null) {\n return;\n }\n if (this.files.length <= this.#maxfiles) {\n return;\n }\n this.warning('maxfilesexceeded');\n this._input.files = new DataTransfer().files;\n }\n\n #ensureFileSizes() {\n if (this.#maxfilesize === null) {\n return;\n }\n const oversized = [...this.files].filter((file) => file.size > this.#maxfilesize);\n if (oversized.length === 0) {\n return;\n }\n this.warning('maxfilesizeexceeded', this.#formatByteSize(this.#maxfilesize));\n const dt = new DataTransfer();\n [...this.files]\n .filter((f) => !oversized.includes(f))\n .forEach((f) => {\n dt.items.add(f);\n });\n this._input.files = dt.files;\n }\n #ensureTotalSize() {\n if (this.#maxtotalsize === null) {\n return;\n }\n const totalSize = [...this.files].reduce((acc, file) => acc + file.size, 0);\n if (totalSize <= this.#maxtotalsize) {\n return;\n }\n this.warning('maxtotalsizeexceeded', this.#formatByteSize(this.#maxtotalsize));\n this._input.files = new DataTransfer().files;\n }\n get accept() {\n return this.#accept;\n }\n set accept(vs) {\n this._input.accept = vs.join(',');\n this.#accept = vs;\n this.reflect(() => {\n this.setAttribute('accept', this._input.accept);\n });\n }\n get multiple() {\n return this._input.multiple;\n }\n set multiple(v) {\n this._input.multiple = v;\n this.reflect(() => {\n Attributes.toggle(this, 'multiple', v);\n });\n }\n get files() {\n return this._input.files;\n }\n set files(vs) {\n this._input.files = vs;\n this.#update();\n }\n get file() {\n return this.files[0] ?? null;\n }\n set file(v) {\n const dt = new DataTransfer();\n if (v) {\n dt.items.add(v);\n }\n this.files = dt.files;\n }\n get value() {\n const names = Array.from(this._input.files).map((f) => f.name);\n return this.multiple ? names : (names[0] ?? null);\n }\n set value(v) {\n if (v) {\n return;\n }\n this.files = new DataTransfer().files;\n }\n get totalsize() {\n return Array.from(this.files).reduce((a, f) => a + f.size, 0);\n }\n #maxfiles;\n get maxfiles() {\n return this.#maxfiles;\n }\n set maxfiles(v) {\n this.#maxfiles = v;\n this.reflect(() => {\n Attributes.set(this, 'maxfiles', v);\n });\n }\n #maxfilesize;\n get maxfilesize() {\n return this.#maxfilesize;\n }\n set maxfilesize(v) {\n this.#maxfilesize = v;\n this.reflect(() => {\n Attributes.set(this, 'maxfilesize', v);\n });\n }\n #maxtotalsize;\n get maxtotalsize() {\n return this.#maxtotalsize;\n }\n set maxtotalsize(v) {\n this.#maxtotalsize = v;\n this.reflect(() => {\n Attributes.set(this, 'maxtotalsize', v);\n });\n }\n #useItemlist;\n get itemlist() {\n return this.#useItemlist;\n }\n set itemlist(v) {\n this.#useItemlist = v;\n this.reflect(() => {\n Attributes.toggle(this, 'itemlist', v);\n });\n }\n #useDropzone;\n get dropzone() {\n return this.#useDropzone;\n }\n set dropzone(v) {\n this.#useDropzone = v;\n this.reflect(() => {\n Attributes.toggle(this, 'dropzone', v);\n });\n }\n}\n\nexport { InputFile };\n","import { Attributes, Fragments, ParsedElement, registry, Templates } from '../../ftl/index.mjs';\nimport { VersionedLocalStorage } from '../storage.mjs';\nimport { Timing } from '../timing.mjs';\n\nclass RemoteLoader {\n #http;\n #url;\n #method;\n #responseMapper;\n #prefetch;\n #revision;\n #data;\n constructor({ http, url, method, responseMapper, prefetch, revision }) {\n this.#http = http;\n this.#url = url;\n this.#method = method;\n this.#responseMapper = responseMapper;\n this.#prefetch = prefetch;\n this.#revision = revision;\n this.#data = null;\n }\n async prefetch() {\n if (!this.#prefetch) {\n return;\n }\n await this.#ensureFetched();\n }\n async exact(...keys) {\n await this.#ensureFetched();\n return this.#data.filter(([k, v]) => keys.some((r) => r == k));\n }\n async load(needle) {\n await this.#ensureFetched();\n return this.#data.filter(([k, v]) => (v ?? '').toLowerCase().includes(needle?.toLowerCase()));\n }\n async reconfigureUrl(url) {\n this.#data = null;\n this.#url = url;\n }\n async #ensureFetched() {\n if (this.#data !== null) {\n return;\n }\n const raw = await RemoteLoader.#revisionedData(this.#http, this.#method, this.#url, this.#revision);\n this.#data = this.#responseMapper(raw);\n }\n static async #revisionedData(http, method, url, revision) {\n const storageKey = `${method}@${url}`;\n if (revision !== null) {\n const data = VersionedLocalStorage.load(storageKey, revision);\n if (data !== undefined) {\n return data;\n }\n }\n const data = await http.request(method, url).fetchJson();\n if (revision !== null) {\n VersionedLocalStorage.save(storageKey, revision, data);\n }\n return data;\n }\n}\n\nclass PartialRemoteLoader {\n #http;\n #url;\n #method;\n #responseMapper;\n constructor({ http, url, method, responseMapper }) {\n this.#http = http;\n this.#url = url;\n this.#method = method;\n this.#responseMapper = responseMapper;\n }\n async exact(...keys) {\n const response = await this.#http\n .request(this.#method, this.#url)\n .param('k', ...keys)\n .fetchJson();\n return this.#responseMapper(response);\n }\n async load(needle) {\n const response = await this.#http.request(this.#method, this.#url).param('s', needle).fetchJson();\n return this.#responseMapper(response);\n }\n}\n\nclass InMemoryLoader {\n #data;\n constructor(data) {\n this.#data = data;\n }\n update(data) {\n this.#data = data;\n }\n exact(...keys) {\n return this.#data.filter(([k, v]) => keys.some((r) => r == k));\n }\n load(needle) {\n return this.#data.filter(([k, v]) => (v ?? '').toLowerCase().includes(needle?.toLowerCase()));\n }\n}\n\nclass SelectLoader {\n static create(el, conf) {\n if (!el.hasAttribute('src')) {\n const els = Array.from(conf.options?.querySelectorAll('option') ?? []);\n const data = els.map((e) => {\n return [e.getAttribute('value') ?? e.innerText.trim(), e.innerText.trim()];\n });\n return new InMemoryLoader(data);\n }\n const http = registry.component('http-client');\n const responseMapper = SelectLoader.#responseMapperFrom(el);\n\n if ('chunked' === el.getAttribute('mode')) {\n return new PartialRemoteLoader({\n http,\n url: el.getAttribute('src'),\n method: el.getAttribute('method') ?? 'POST',\n responseMapper,\n });\n }\n return new RemoteLoader({\n http,\n url: el.getAttribute('src'),\n method: el.getAttribute('method') ?? 'POST',\n responseMapper,\n prefetch: el.hasAttribute('preload'),\n revision: el.getAttribute('revision'),\n });\n }\n static #responseMapperFrom(el) {\n if (el.hasAttribute('k-expr') && el.hasAttribute('l-expr')) {\n return (response) => {\n const rows = registry\n .evaluator()\n .withOverlay(response)\n .evaluateExpression(el.getAttribute('d-expr') ?? 'self');\n return rows.map((row) => {\n const evaluator = registry.evaluator().withOverlay(row);\n return [\n evaluator.evaluateExpression(el.getAttribute('k-expr')),\n evaluator.evaluateExpression(el.getAttribute('l-expr')),\n evaluator.evaluateExpression(el.getAttribute('m-expr') ?? 'self'),\n ];\n });\n };\n }\n if (el.hasAttribute('response-mapper')) {\n return registry.component(el.getAttribute('response-mapper'));\n }\n return (response) => response;\n }\n}\n\nclass Dropdown extends ParsedElement {\n static slots = true;\n static template = `\n \n \n `;\n static templates = {\n options: `\n
  • \n {{ label }}\n
    • \n `,\n };\n #spinner;\n #menu;\n #optionstemplate;\n #options = new Map();\n render({ slots }) {\n const fragment = this.template().render();\n this.#optionstemplate = Fragments.isBlank(slots.default)\n ? this.template('options')\n : Templates.fromFragment(slots.default);\n this.#spinner = fragment.querySelector('ful-spinner');\n this.#menu = fragment.querySelector('menu');\n this.#menu.addEventListener('click', (evt) => {\n evt.stopPropagation();\n const li = evt.target.closest('li');\n if (!li) {\n this.hide();\n return;\n }\n this.#change(li);\n });\n this.replaceChildren(fragment);\n }\n #selected() {\n return this.#menu?.querySelector('[selected]') ?? this.#menu?.firstElementChild ?? null;\n }\n acceptSelection() {\n const selected = this.#selected();\n if (!selected) {\n return;\n }\n this.#change(selected);\n }\n update(values) {\n if (values === undefined) {\n throw new Error('null data');\n }\n this.#options = new Map(values.map((v, i) => [String(i), v]));\n const data = values.map(([key, label, metadata], index) => ({ index, key, label, metadata }));\n this.#optionstemplate.withOverlay(data).renderTo(this.#menu);\n }\n #change(target) {\n const index = target.getAttribute('value');\n const data = this.#options.get(index);\n this.hide();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: { index, data },\n }),\n );\n }\n hide() {\n this.setAttribute('hidden', '');\n }\n get shown() {\n return !this.hasAttribute('hidden');\n }\n async show(loader) {\n this.removeAttribute('hidden');\n this.#menu.setAttribute('hidden', '');\n this.#spinner.removeAttribute('hidden');\n try {\n const data = await loader();\n this.update(data);\n } catch (e) {\n this.hide();\n throw e;\n } finally {\n this.#spinner.setAttribute('hidden', '');\n this.#menu.removeAttribute('hidden');\n }\n }\n async moveOrShow(forward, loader) {\n if (this.shown) {\n const selected = this.#selected();\n const candidate = selected?.[`${forward ? 'next' : 'previous'}ElementSibling`];\n if (selected && candidate) {\n selected.removeAttribute('selected');\n candidate.setAttribute('selected', '');\n candidate.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n }\n return;\n }\n await this.show(loader);\n }\n}\n\nclass Select extends ParsedElement {\n static observed = ['value:csvm', 'readonly:presence', 'required:presence', 'itemlist:presence'];\n static slots = true;\n static template = `\n
    \n \n {{{{ slots.info }}}}\n
    \n
    \n {{{{ slots.ibefore }}}}\n {{{{ slots.before }}}}\n
    \n
    \n \n \n
    \n \n
    \n {{{{ slots.after }}}}\n {{{{ slots.iafter }}}}\n
    \n \n \n `;\n static templates = {\n items: `\n \n
    {{ entry[1][0] }}
    \n \n     \n `,\n };\n static formAssociated = true;\n internals;\n #loader;\n #badges;\n #ddmenu;\n #input;\n #items;\n #multiple;\n #fieldError;\n #values = new Map();\n #token = 0;\n constructor() {\n super();\n this.internals = this.attachInternals();\n this.internals.role = 'presentation';\n }\n async render({ slots, observed, disabled }) {\n const name = this.getAttribute('name');\n this.#loader = registry\n .component(this.getAttribute('loader') ?? 'loaders:select')\n .create(this, { options: slots.options });\n\n this.#multiple = this.hasAttribute('multiple');\n try {\n await this.#loader.prefetch?.();\n } catch (/** @type any */ e) {\n console.warn('failed to prefetch select options', this, 'reason:', e);\n }\n const fragment = this.template().withOverlay({ slots, name }).render();\n this.#input = fragment.querySelector('input');\n this.#items = fragment.querySelector('ful-item-list');\n Attributes.forward('input-', this, this.#input);\n this.#badges = fragment.querySelector('badges');\n\n this.value = observed.value;\n this.disabled = disabled;\n this.readonly = observed.readonly;\n this.required = observed.required;\n this.itemlist = observed.itemlist;\n\n this.#ddmenu = fragment.querySelector('ful-dropdown');\n const label = fragment.querySelector('label');\n label.addEventListener('click', () => this.focus());\n this.#fieldError = fragment.querySelector('ful-field-error');\n this.#input.ariaDescribedByElements = [this.#fieldError];\n this.#input.ariaLabelledByElements = [label];\n const [dload, abortdload] = Timing.throttle(400, () => {\n this.#input.setAttribute('aria-expanded', 'true');\n this.#ddmenu.show(() => this.#loader.load(this.#input.value));\n });\n this.addEventListener('click', (/** @type any */ e) => {\n if (e.target.matches('input')) {\n return;\n }\n //badges and other chrome are not form controls, the guard must ask the\n //effective state\n if (this.matches(':disabled') || this.readonly) {\n return;\n }\n if (this.#ddmenu.shown) {\n this.#input.setAttribute('aria-expanded', 'false');\n this.#ddmenu.hide();\n return;\n }\n this.#input.focus();\n dload();\n });\n this.#items.addEventListener('click', (e) => {\n e.stopPropagation();\n if (!e.target.closest('button')) {\n return;\n }\n if (this.matches(':disabled') || this.readonly) {\n return;\n }\n const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));\n if (idx === -1) {\n return;\n }\n this.#values.delete(Array.from(this.#values.keys())[idx]);\n this.#changed();\n this.#syncBadges();\n });\n this.#badges.addEventListener('click', (e) => {\n e.stopPropagation();\n if (this.matches(':disabled') || this.readonly) {\n return;\n }\n const idx = [...this.#badges.children].indexOf(e.target);\n if (idx === -1) {\n return;\n }\n this.#values.delete(Array.from(this.#values.keys())[idx]);\n this.#changed();\n this.#syncBadges();\n });\n this.#input.addEventListener('change', (e) => {\n e.stopPropagation();\n });\n this.#input.addEventListener('blur', (e) => {\n e.stopPropagation();\n if (e.relatedTarget && this.contains(e.relatedTarget)) {\n return;\n }\n abortdload();\n this.#input.setAttribute('aria-expanded', 'false');\n this.#ddmenu.hide();\n this.#input.value = '';\n });\n this.#input.addEventListener('keydown', (e) => {\n if (this.matches(':disabled') || this.readonly) {\n return;\n }\n switch (e.code) {\n case 'ArrowUp': {\n e.preventDefault();\n this.#input.setAttribute('aria-expanded', 'true');\n this.#ddmenu.moveOrShow(false, () => this.#loader.load(this.#input.value));\n break;\n }\n case 'ArrowDown': {\n e.preventDefault();\n this.#input.setAttribute('aria-expanded', 'true');\n this.#ddmenu.moveOrShow(true, () => this.#loader.load(this.#input.value));\n break;\n }\n case 'Escape': {\n this.#input.setAttribute('aria-expanded', 'false'); \n this.#ddmenu.hide();\n break;\n }\n case 'Enter': {\n if (!this.#ddmenu.shown) {\n //nothing to accept: submit the form as ful-input does. the inner\n //input carries form=\"\" so it never submits one on its own\n this.#requestSubmit();\n return;\n }\n e.preventDefault();\n this.#input.setAttribute('aria-expanded', 'false');\n this.#ddmenu.acceptSelection();\n this.#input.value = '';\n break;\n }\n case 'Backspace': {\n //remove last if caret at position 0\n if (this.#values.size && this.#input.selectionStart === 0 && this.#input.selectionEnd === 0) {\n this.#values.delete(Array.from(this.#values.keys()).pop());\n this.#changed();\n this.#syncBadges();\n }\n break;\n }\n case 'Tab': {\n this.#input.setAttribute('aria-expanded', 'false');\n this.#ddmenu.hide();\n abortdload();\n break;\n }\n }\n });\n this.#input.addEventListener('input', (e) => {\n e.stopPropagation();\n if (this.matches(':disabled') || this.readonly) {\n return;\n }\n dload();\n });\n this.#ddmenu.addEventListener('change', (e) => {\n e.stopPropagation();\n if (!this.#multiple) {\n this.#values.clear();\n }\n this.#values.set(this.#coerceKey(e.detail.data[0]), e.detail.data.slice(1));\n this.#changed();\n this.#syncBadges();\n this.#input.focus();\n this.#input.setAttribute('aria-expanded', 'false');\n this.#ddmenu.hide();\n this.#input.value = '';\n });\n this.replaceChildren(fragment);\n }\n async withLoader(fn) {\n return await fn(this.#loader);\n }\n #requestSubmit() {\n const form = this.internals.form;\n if (!form) {\n return;\n }\n const candidates = /** @type [HTMLButtonElement|HTMLInputElement] */ (\n Array.from(form.querySelectorAll('button:not(:disabled), input:not(:disabled)'))\n );\n form.requestSubmit(candidates.find((el) => el.type === 'submit'));\n }\n #changed() {\n const selection = [...this.#values.entries()].map((e) => ({\n key: e[0],\n label: e[1][0],\n metadata: e[1].slice(1),\n }));\n const value = this.#multiple ? selection : (selection[0] ?? null);\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n cancelable: false,\n detail: { value },\n }),\n );\n }\n #syncBadges() {\n const badges = Array.from(this.#values.entries()).map(([k, v]) => {\n const b = document.createElement('badge');\n b.setAttribute('role', 'button');\n b.setAttribute('value', k);\n b.innerText = v[0];\n return b;\n });\n this.#badges.replaceChildren();\n this.#badges.append(...badges);\n this.#items.replaceChildren();\n this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);\n }\n /**\n * Coerces a key to the type declared by `k-type`. Keys reach the element from\n * both worlds: the `value` attribute is text, a loader returns whatever its\n * endpoint carries. One canonical type keeps the internal Map, which compares\n * keys strictly, consistent. A key that does not decode is left as it is.\n */\n #coerceKey(k) {\n switch (this.getAttribute('k-type')) {\n case 'number': {\n const n = k === '' ? Number.NaN : Number(k);\n return Number.isNaN(n) ? k : n;\n }\n case 'boolean': {\n if (k === true || k === 'true') {\n return true;\n }\n if (k === false || k === 'false') {\n return false;\n }\n return k;\n }\n default:\n return String(k);\n }\n }\n\n set value(vs) {\n //the csvm mapper yields [] for a missing multiple value, an empty string is\n //left alone: it is a usable key for an