@ixfx/components 0.5.20 → 0.6.1

package/dist/{incr-search-CeERfijK.js → element-search-Y8SRfPGM.js}

@@ -10,8 +10,9 @@ function defaultSelector(item) {
 	return String(item);
 }
 function createFuzzySearch(items, options = {}) {
+	const selector = options.selector ?? defaultSelector;
 	const fzf = new Fzf(items, {
-		selector: options.selector ?? defaultSelector,
+		selector,
 		...options.fzf ?? {}
 	});
 	const find = (query) => {
@@ -32,37 +33,6 @@ function createFuzzySearch(items, options = {}) {
 	};
 }
 //#endregion
-//#region src/incr-search/ac-adapter.ts
-/**
-* Creates an ixfx-ac-text-compatible `completionProvider` function from a
-* static item list. Uses synchronous fuzzy search wrapped in a Promise so it
-* fits the async provider signature.
-*
-* Each returned item has `positions` populated with matched character indices,
-* which `ixfx-ac-text` uses to render CSS Custom Highlights on the label.
-*
-* Empty query returns all items in original order (no positions).
-* A cancelled signal causes the returned promise to reject with an AbortError.
-*/
-function createAcCompletionProvider(items, options = {}) {
-	const fuzzy = createFuzzySearch(items, { selector: options.selector ?? ((item) => item.label) });
-	return (query, signal) => new Promise((resolve, reject) => {
-		if (signal.aborted) {
-			reject(new DOMException(`Aborted`, `AbortError`));
-			return;
-		}
-		const results = fuzzy.find(query).map((r) => ({
-			...r.item,
-			positions: r.positions
-		}));
-		if (signal.aborted) {
-			reject(new DOMException(`Aborted`, `AbortError`));
-			return;
-		}
-		resolve(results);
-	});
-}
-//#endregion
 //#region src/incr-search/incr-search.ts
 function buildState(results, query) {
 	const positionsByItem = /* @__PURE__ */ new Map();
@@ -131,105 +101,6 @@ function createIncrSearch(options = {}) {
 	};
 }
 //#endregion
-//#region src/incr-search/controller-tree.ts
-const DEFAULT_HIGHLIGHT_KEY = `incr-search-highlight`;
-/**
-* Incremental-search controller for any component implementing `TreeSearchHost`
-* (i.e. `ixfx-tree-list`, `ixfx-miller-list`, `ixfx-crumb-navigation`).
-*
-* Replaces the previous separate `IncrSearchTreeController` / `IncrSearchMillerController`
-* classes — the unified `TreeFilterPredicate` (with depth) means one implementation works
-* for all tree-like components.
-*
-* @example Using with ixfx-tree-list:
-* ```typescript
-* const ctrl = new IncrSearchTreeController(myTreeList, {
-*   selector: item => item.node.item.label,
-* });
-* ctrl.connect();
-* ```
-*
-* @example Using with ixfx-miller-list (different label selector):
-* ```typescript
-* const ctrl = new IncrSearchTreeController(myMillerList, {
-*   selector: item => item.node.item.label,
-*   labelSelector: '.label',
-* });
-* ctrl.connect();
-* ```
-*/
-var IncrSearchTreeController = class {
-	#el;
-	#opts;
-	#search;
-	#unsub;
-	#labelMap = /* @__PURE__ */ new Map();
-	constructor(el, opts) {
-		this.#el = el;
-		this.#opts = opts;
-		this.#search = createIncrSearch({
-			selector: opts.selector,
-			fzf: opts.fzf
-		});
-	}
-	connect() {
-		this.disconnect();
-		const items = this.#el.getNodes();
-		for (const item of items) this.#labelMap.set(this.#opts.selector(item), item);
-		this.#search.setItems(items);
-		if (this.#opts.input) {
-			this.#opts.input.addEventListener(`input`, this.#onInput);
-			this.#opts.input.addEventListener(`keydown`, this.#onKeydown);
-		}
-		this.#unsub = this.#search.onChange((state) => this.#onStateChange(state));
-	}
-	disconnect() {
-		if (this.#unsub) {
-			this.#unsub();
-			this.#unsub = void 0;
-		}
-		if (this.#opts.input) {
-			this.#opts.input.removeEventListener(`input`, this.#onInput);
-			this.#opts.input.removeEventListener(`keydown`, this.#onKeydown);
-		}
-		this.#el.filterPredicate = void 0;
-		clearHighlights({ key: this.#opts.highlightKey ?? DEFAULT_HIGHLIGHT_KEY });
-		this.#labelMap.clear();
-	}
-	async setQuery(query) {
-		await this.#search.setQuery(query);
-	}
-	async clearQuery() {
-		await this.#search.clearQuery();
-	}
-	#onInput = () => {
-		const value = this.#opts.input?.value ?? ``;
-		this.setQuery(value);
-	};
-	#onKeydown = (e) => {
-		if (e.key === `Escape` && this.#opts.input) {
-			this.#opts.input.value = ``;
-			this.clearQuery();
-		}
-	};
-	#onStateChange(state) {
-		const matched = new Set(state.results.map((r) => r.item.node.item.key));
-		const hasQuery = state.query.trim().length > 0;
-		this.#el.filterPredicate = hasQuery && matched.size > 0 ? (node, _depth) => matched.has(node.item.key) : void 0;
-		const key = this.#opts.highlightKey ?? DEFAULT_HIGHLIGHT_KEY;
-		if (!this.#el.shadowRoot) return;
-		if (!state.query.trim()) {
-			clearHighlights({ key });
-			return;
-		}
-		const labelSelector = this.#opts.labelSelector ?? `.tree-label`;
-		applyHighlights(buildHighlightTargets(this.#el.shadowRoot, labelSelector, state.positionsByItem, (labelEl) => {
-			const text = labelEl.textContent ?? ``;
-			return this.#labelMap.get(text);
-		}, (labelEl) => labelEl.textContent ?? ``), { key });
-	}
-};
-//#endregion
 //#region src/incr-search/element-search.ts
 const defaultGetLabel = (el) => el.textContent?.trim() ?? ``;
 function defaultGetKey(el) {
@@ -252,10 +123,11 @@ function createElementIncrSearch(opts) {
 			clearHighlights({ key: highlightKey });
 			return;
 		}
-		applyHighlights(buildHighlightTargets(container, labelSelector ?? itemSelector, state.positionsByItem, (el) => {
+		const targets = buildHighlightTargets(container, labelSelector ?? itemSelector, state.positionsByItem, (el) => {
 			const key = getKey(el);
 			return state.results.find((r) => r.item.key === key)?.item;
-		}, (el) => getLabel(el)), { key: highlightKey });
+		}, (el) => getLabel(el));
+		applyHighlights(targets, { key: highlightKey });
 	};
 	const unsubscribeState = search.onChange((state) => {
 		updateVisibility(state);
@@ -308,6 +180,6 @@ function createElementIncrSearch(opts) {
 	};
 }
 //#endregion
-export { createFuzzySearch as a, createAcCompletionProvider as i, IncrSearchTreeController as n, createIncrSearch as r, createElementIncrSearch as t };
+export { createIncrSearch as n, createFuzzySearch as r, createElementIncrSearch as t };
 
-//# sourceMappingURL=incr-search-CeERfijK.js.map
+//# sourceMappingURL=element-search-Y8SRfPGM.js.map

package/dist/element-search-Y8SRfPGM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-search-Y8SRfPGM.js","names":["FzfAny"],"sources":["../src/incr-search/fuzzy.ts","../src/incr-search/incr-search.ts","../src/incr-search/element-search.ts"],"sourcesContent":["import type { FuzzySearch, FuzzySearchOptions, IncrSearchResult } from './types.js';\nimport { Fzf } from 'fzf';\n\nfunction defaultSelector<T>(item: T): string {\n  if (typeof item === `string`)\n    return item;\n  const r = item as Record<string, unknown>;\n  if (typeof r.label === `string`)\n    return r.label;\n  if (typeof r.key === `string`)\n    return r.key;\n  if (typeof r.value === `string`)\n    return r.value;\n  return String(item);\n}\n\nexport function createFuzzySearch<T>(\n  items: readonly T[],\n  options: FuzzySearchOptions<T> = {},\n): FuzzySearch<T> {\n  const selector = options.selector ?? defaultSelector<T>;\n  // fzf uses a conditional SyncOptionsTuple<T> rest-parameter overload that TypeScript\n  // cannot narrow through a spread when T is generic.\n  const FzfAny = Fzf as new (list: readonly T[], opts: any) => { find: (q: string) => Array<{ item: T; positions: ReadonlySet<number>; score: number }> };\n  const fzf = new FzfAny(items as readonly T[], { selector, ...(options.fzf ?? {}) });\n\n  const find = (query: string): ReadonlyArray<IncrSearchResult<T>> => {\n    if (!query.trim()) {\n      return items.map(item => ({\n        item,\n        positions: new Set<number>(),\n        score: 0,\n      }));\n    }\n    return fzf.find(query).map(r => ({\n      item: r.item,\n      positions: r.positions,\n      score: r.score,\n    }));\n  };\n\n  return { find, items };\n}\n","import type {\n  IncrSearch,\n  IncrSearchChangeCallback,\n  IncrSearchOptions,\n  IncrSearchState,\n} from './types.js';\nimport { createFuzzySearch } from './fuzzy.js';\n\nfunction buildState<T>(results: ReturnType<ReturnType<typeof createFuzzySearch<T>>[`find`]>, query: string): IncrSearchState<T> {\n  const positionsByItem = new Map<T, ReadonlySet<number>>();\n  for (const r of results) {\n    positionsByItem.set(r.item, r.positions);\n  }\n  return Object.freeze({\n    query,\n    results: Object.freeze([...results]),\n    positionsByItem,\n  });\n}\n\nexport function createIncrSearch<T>(options: IncrSearchOptions<T> = {}): IncrSearch<T> {\n  let items: readonly T[] = options.items ?? [];\n  let query = ``;\n  let fuzzy = createFuzzySearch(items, { selector: options.selector, fzf: options.fzf });\n  let state: IncrSearchState<T> = buildState(fuzzy.find(query), query);\n  let disposed = false;\n\n  const observers = new Set<IncrSearchChangeCallback<T>>();\n\n  if (options.onChange) {\n    observers.add(options.onChange);\n  }\n\n  const notify = (s: IncrSearchState<T>): void => {\n    for (const cb of observers) {\n      cb(s);\n    }\n  };\n\n  const run = async (q: string, signal?: AbortSignal): Promise<IncrSearchState<T>> => {\n    // Yield to the microtask queue for a consistent async interface\n    await Promise.resolve();\n    if (signal?.aborted || disposed) {\n      return state;\n    }\n    const results = fuzzy.find(q);\n    if (signal?.aborted || disposed) {\n      return state;\n    }\n    state = buildState(results, q);\n    notify(state);\n    return state;\n  };\n\n  return {\n    get state() {\n      return state;\n    },\n\n    async setItems(newItems: readonly T[], signal?: AbortSignal): Promise<void> {\n      items = newItems;\n      fuzzy = createFuzzySearch(items, { selector: options.selector, fzf: options.fzf });\n      await run(query, signal);\n    },\n\n    async setQuery(q: string, signal?: AbortSignal): Promise<IncrSearchState<T>> {\n      query = q;\n      return run(q, signal);\n    },\n\n    async clearQuery(): Promise<void> {\n      query = ``;\n      await run(``, undefined);\n    },\n\n    onChange(cb: IncrSearchChangeCallback<T>): () => void {\n      observers.add(cb);\n      cb(state);\n      return () => {\n        observers.delete(cb);\n      };\n    },\n\n    dispose(): void {\n      disposed = true;\n      observers.clear();\n      items = [];\n    },\n  };\n}\n","import type {\n  ElementIncrSearchOptions,\n  IncrSearchChangeCallback,\n  IncrSearchState,\n} from './types.js';\nimport { applyHighlights, buildHighlightTargets, clearHighlights } from './highlight.js';\nimport { createIncrSearch } from './incr-search.js';\n\ntype ElementItem = { readonly key: string; readonly label: string };\n\nconst defaultGetLabel = (el: Element): string => el.textContent?.trim() ?? ``;\n\nfunction defaultGetKey(el: Element): string {\n  return el.getAttribute(`data-key`)\n    ?? el.getAttribute(`data-value`)\n    ?? el.textContent?.trim()\n    ?? ``;\n}\n\nexport type ElementIncrSearch = {\n  readonly setQuery: (query: string, signal?: AbortSignal) => Promise<void>;\n  readonly clearQuery: () => Promise<void>;\n  readonly refresh: () => void;\n  readonly onChange: (cb: IncrSearchChangeCallback<ElementItem>) => () => void;\n  readonly dispose: () => void;\n};\n\nexport function createElementIncrSearch(opts: ElementIncrSearchOptions): ElementIncrSearch {\n  const {\n    container,\n    itemSelector,\n    getLabel = defaultGetLabel,\n    getKey = defaultGetKey,\n    labelSelector,\n    highlightKey,\n  } = opts;\n\n  // Map from key → element reference for highlight lookup\n  let elementByKey = new Map<string, Element>();\n\n  const search = createIncrSearch<ElementItem>({\n    selector: item => item.label,\n    fzf: opts.fzf,\n  });\n\n  const updateVisibility = (state: IncrSearchState<ElementItem>): void => {\n    const matchedKeys = new Set(state.results.map(r => r.item.key));\n    const hasQuery = state.query.trim().length > 0;\n\n    for (const [key, el] of elementByKey) {\n      (el as HTMLElement).hidden = hasQuery ? !matchedKeys.has(key) : false;\n    }\n  };\n\n  const updateHighlights = (state: IncrSearchState<ElementItem>): void => {\n    if (!state.query.trim()) {\n      clearHighlights({ key: highlightKey });\n      return;\n    }\n\n    const sel = labelSelector ?? itemSelector;\n    const targets = buildHighlightTargets(\n      container,\n      sel,\n      state.positionsByItem,\n      (el) => {\n        const key = getKey(el);\n        // Find the ElementItem whose key matches this element's key\n        const result = state.results.find(r => r.item.key === key);\n        return result?.item;\n      },\n      el => getLabel(el),\n    );\n    applyHighlights(targets, { key: highlightKey });\n  };\n\n  const unsubscribeState = search.onChange((state) => {\n    updateVisibility(state);\n    updateHighlights(state);\n    opts.onChange?.(state);\n  });\n\n  let refreshPending = false;\n\n  const refresh = (): void => {\n    if (refreshPending)\n      return;\n    refreshPending = true;\n    void Promise.resolve().then(() => {\n      refreshPending = false;\n      elementByKey = new Map<string, Element>();\n      const els = container.querySelectorAll(itemSelector);\n      const items: ElementItem[] = [];\n      for (const el of els) {\n        const key = getKey(el);\n        elementByKey.set(key, el);\n        items.push({ key, label: getLabel(el) });\n      }\n      void search.setItems(items);\n    });\n  };\n\n  const observer = new MutationObserver(() => refresh());\n  observer.observe(container, { childList: true, subtree: false });\n\n  refresh();\n\n  return {\n    async setQuery(query, signal) {\n      await search.setQuery(query, signal);\n    },\n\n    async clearQuery() {\n      await search.clearQuery();\n    },\n\n    refresh,\n\n    onChange(cb) {\n      return search.onChange(cb);\n    },\n\n    dispose() {\n      observer.disconnect();\n      unsubscribeState();\n      search.dispose();\n      clearHighlights({ key: highlightKey });\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/form-CsXJX15p.js

@@ -0,0 +1,64 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { LitElement } from "lit";
+//#region src/form/form-values.ts
+function collectFormValues(root) {
+	const values = {};
+	root.querySelectorAll(`[name]`).forEach((el) => {
+		const name = el.getAttribute(`name`);
+		if (!name) return;
+		if (el instanceof HTMLInputElement) {
+			if (el.type === `radio`) {
+				if (el.checked) values[name] = el.value;
+			} else if (el.type === `checkbox`) values[name] = el.checked;
+			else values[name] = el.value;
+		} else if (el instanceof HTMLSelectElement) {
+			if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
+			else values[name] = el.value;
+		} else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
+		else if (`value` in el) values[name] = el.value;
+	});
+	return values;
+}
+function applyFormValues(root, data) {
+	root.querySelectorAll(`[name]`).forEach((el) => {
+		const name = el.getAttribute(`name`);
+		if (!name || !(name in data)) return;
+		const value = data[name];
+		if (el instanceof HTMLInputElement) {
+			if (el.type === `radio`) el.checked = el.value === value;
+			else if (el.type === `checkbox`) el.checked = Boolean(value);
+			else el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (el instanceof HTMLSelectElement) {
+			if (el.multiple && Array.isArray(value)) Array.from(el.options).forEach((opt) => {
+				opt.selected = value.includes(opt.value);
+			});
+			else el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (el instanceof HTMLTextAreaElement) {
+			el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (`value` in el) el.value = value;
+	});
+}
+//#endregion
+//#region src/form/form.ts
+let FormElement = class FormElement extends LitElement {
+	createRenderRoot() {
+		return this;
+	}
+	getValues() {
+		return collectFormValues(this);
+	}
+	setValues(data) {
+		applyFormValues(this, data);
+	}
+};
+FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
+//#endregion
+export { FormElement as t };
+
+//# sourceMappingURL=form-CsXJX15p.js.map

package/dist/form-CsXJX15p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-CsXJX15p.js","names":[],"sources":["../src/form/form-values.ts","../src/form/form.ts"],"sourcesContent":["export function collectFormValues(root: ParentNode): Record<string, unknown> {\n  const values: Record<string, unknown> = {};\n  const elements = root.querySelectorAll(`[name]`);\n\n  elements.forEach((el) => {\n    const name = el.getAttribute(`name`);\n    if (!name) {\n      return;\n    }\n\n    if (el instanceof HTMLInputElement) {\n      if (el.type === `radio`) {\n        if (el.checked) {\n          values[name] = el.value;\n        }\n      } else if (el.type === `checkbox`) {\n        values[name] = el.checked;\n      } else {\n        values[name] = el.value;\n      }\n    } else if (el instanceof HTMLSelectElement) {\n      if (el.multiple) {\n        values[name] = Array.from(el.selectedOptions).map(opt => opt.value);\n      } else {\n        values[name] = el.value;\n      }\n    } else if (el instanceof HTMLTextAreaElement) {\n      values[name] = el.value;\n    } else if (`value` in el) {\n      values[name] = (el as { value: unknown }).value;\n    }\n  });\n\n  return values;\n}\n\nexport function applyFormValues(root: ParentNode, data: Record<string, unknown>): void {\n  const elements = root.querySelectorAll(`[name]`);\n\n  elements.forEach((el) => {\n    const name = el.getAttribute(`name`);\n    if (!name || !(name in data)) {\n      return;\n    }\n\n    const value = data[name];\n\n    if (el instanceof HTMLInputElement) {\n      if (el.type === `radio`) {\n        el.checked = el.value === value;\n      } else if (el.type === `checkbox`) {\n        el.checked = Boolean(value);\n      } else {\n        el.value = String(value ?? ``);\n      }\n      el.dispatchEvent(new Event(`input`, { bubbles: true }));\n      el.dispatchEvent(new Event(`change`, { bubbles: true }));\n    } else if (el instanceof HTMLSelectElement) {\n      if (el.multiple && Array.isArray(value)) {\n        Array.from(el.options).forEach((opt) => {\n          opt.selected = value.includes(opt.value);\n        });\n      } else {\n        el.value = String(value ?? ``);\n      }\n      el.dispatchEvent(new Event(`input`, { bubbles: true }));\n      el.dispatchEvent(new Event(`change`, { bubbles: true }));\n    } else if (el instanceof HTMLTextAreaElement) {\n      el.value = String(value ?? ``);\n      el.dispatchEvent(new Event(`input`, { bubbles: true }));\n      el.dispatchEvent(new Event(`change`, { bubbles: true }));\n    } else if (`value` in el) {\n      (el as { value: unknown }).value = value;\n    }\n  });\n}","import { LitElement } from 'lit';\nimport { safeCustomElement } from '../util/custom-elements.js';\nimport { applyFormValues, collectFormValues } from './form-values.js';\nimport './form.css';\n\n@safeCustomElement(`ixfx-form`)\nexport class FormElement extends LitElement {\n  protected override createRenderRoot() {\n    return this;\n  }\n\n  getValues(): Record<string, unknown> {\n    return collectFormValues(this);\n  }\n\n  setValues(data: Record<string, unknown>): void {\n    applyFormValues(this, data);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-form': FormElement;\n  }\n}"],"mappings":";;;AAAA,SAAgB,kBAAkB,MAA2C;CAC3E,MAAM,SAAkC,CAAC;CAGzC,KAFsB,iBAAiB,QAEhC,CAAC,CAAC,SAAS,OAAO;EACvB,MAAM,OAAO,GAAG,aAAa,MAAM;EACnC,IAAI,CAAC,MACH;EAGF,IAAI,cAAc,kBAAkB;GAClC,IAAI,GAAG,SAAS,SACV;QAAA,GAAG,SACL,OAAO,QAAQ,GAAG;GAAA,OAEf,IAAI,GAAG,SAAS,YACrB,OAAO,QAAQ,GAAG;QAElB,OAAO,QAAQ,GAAG;EAEtB,OAAO,IAAI,cAAc,mBAAmB;GAC1C,IAAI,GAAG,UACL,OAAO,QAAQ,MAAM,KAAK,GAAG,eAAe,CAAC,CAAC,KAAI,QAAO,IAAI,KAAK;QAElE,OAAO,QAAQ,GAAG;EAEtB,OAAO,IAAI,cAAc,qBACvB,OAAO,QAAQ,GAAG;OACb,IAAI,WAAW,IACpB,OAAO,QAAS,GAA0B;CAE9C,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,gBAAgB,MAAkB,MAAqC;CAGrF,KAFsB,iBAAiB,QAEhC,CAAC,CAAC,SAAS,OAAO;EACvB,MAAM,OAAO,GAAG,aAAa,MAAM;EACnC,IAAI,CAAC,QAAQ,EAAE,QAAQ,OACrB;EAGF,MAAM,QAAQ,KAAK;EAEnB,IAAI,cAAc,kBAAkB;GAClC,IAAI,GAAG,SAAS,SACd,GAAG,UAAU,GAAG,UAAU;QACrB,IAAI,GAAG,SAAS,YACrB,GAAG,UAAU,QAAQ,KAAK;QAE1B,GAAG,QAAQ,OAAO,SAAS,EAAE;GAE/B,GAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;GACtD,GAAG,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,OAAO,IAAI,cAAc,mBAAmB;GAC1C,IAAI,GAAG,YAAY,MAAM,QAAQ,KAAK,GACpC,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,SAAS,QAAQ;IACtC,IAAI,WAAW,MAAM,SAAS,IAAI,KAAK;GACzC,CAAC;QAED,GAAG,QAAQ,OAAO,SAAS,EAAE;GAE/B,GAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;GACtD,GAAG,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,OAAO,IAAI,cAAc,qBAAqB;GAC5C,GAAG,QAAQ,OAAO,SAAS,EAAE;GAC7B,GAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;GACtD,GAAG,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,OAAO,IAAI,WAAW,IACpB,GAA2B,QAAQ;CAEvC,CAAC;AACH;;;ACrEO,IAAM,cAAN,MAAM,oBAAoB,WAAW;CAC1C,mBAAsC;EACpC,OAAO;CACT;CAEA,YAAqC;EACnC,OAAO,kBAAkB,IAAI;CAC/B;CAEA,UAAU,MAAqC;EAC7C,gBAAgB,MAAM,IAAI;CAC5B;AACF;AAbC,cAAA,WAAA,CAAA,kBAAkB,WAAW,CAAA,GAAA,WAAA"}

package/dist/form.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from "lit";
+//#region src/form/form.d.ts
+declare class FormElement extends LitElement {
+  protected createRenderRoot(): this;
+  getValues(): Record<string, unknown>;
+  setValues(data: Record<string, unknown>): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-form': FormElement;
+  }
+}
+//#endregion
+export { FormElement };
+//# sourceMappingURL=form.d.ts.map

package/dist/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","names":[],"sources":["../src/form/form.ts"],"mappings":";;cAMa,oBAAoB;YACZ;EAInB,aAAa;EAIb,UAAU,MAAM;;QAKV;YACI;IACR,aAAa"}

package/dist/form.js

@@ -0,0 +1,2 @@
+import { t as FormElement } from "./form-CsXJX15p.js";
+export { FormElement };

package/dist/grouped-item-lister-CNLMgdIr.d.ts

@@ -0,0 +1,121 @@
+import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
+import { l as ListSelectionMode } from "./types-DlVNJez_.js";
+import "./panel.js";
+import { LitElement, PropertyValues, nothing } from "lit";
+import { CommandId } from "@clinth/ui-commands";
+//#region src/grouped-item-lister/types.d.ts
+/**
+ * Fired when the selection set changes by any means.
+ * Event name: `select`
+ */
+type SubComponentSelectDetail<T> = {
+  readonly selected: ReadonlySet<T>;
+  readonly previous: ReadonlySet<T>;
+};
+/**
+ * Fired when an item is explicitly activated (double-click or Enter key).
+ * Event name: `activate`
+ */
+type SubComponentActivateDetail<T> = {
+  readonly item: T;
+};
+/**
+ * Fired on a raw pointer click before any selection change.
+ * Event name: `item-click`
+ */
+type SubComponentItemClickDetail<T> = {
+  readonly item: T;
+};
+/**
+ * Fired when the pointer hovers over an item or the keyboard cursor moves to it.
+ * Event name: `tickle`
+ */
+type SubComponentTickleDetail<T> = {
+  readonly item: T;
+};
+type SubComponentSelectEvent<T> = CustomEvent<SubComponentSelectDetail<T>>;
+type SubComponentActivateEvent<T> = CustomEvent<SubComponentActivateDetail<T>>;
+type SubComponentItemClickEvent<T> = CustomEvent<SubComponentItemClickDetail<T>>;
+type SubComponentTickleEvent<T> = CustomEvent<SubComponentTickleDetail<T>>;
+interface IGroupedSubComponentEventMap<T> {
+  'select': SubComponentSelectEvent<T>;
+  'activate': SubComponentActivateEvent<T>;
+  'item-click': SubComponentItemClickEvent<T>;
+  'tickle': SubComponentTickleEvent<T>;
+}
+/**
+ * Contract that sub-components passed to `ixfx-grouped-item-lister` must satisfy.
+ *
+ * All four events (`select`, `activate`, `item-click`, `tickle`) must bubble and be composed
+ * so they propagate through the lister's light DOM to external listeners.
+ */
+interface IGroupedSubComponent<T> extends HTMLElement {
+  /** Replace the full item list. Called whenever the lister's items or grouping changes. */
+  setItems: (items: readonly T[]) => void;
+  /** Clear the current selection without firing a `select` event (avoids re-entrant loops). */
+  clearSelection: () => void;
+  /** The current selection set. */
+  readonly selectedItems: ReadonlySet<T>;
+  /** Controls how many items can be selected simultaneously. */
+  selectionMode: ListSelectionMode;
+  /**
+   * Forward a command (e.g. sort-order change) to this sub-component.
+   * Uses `CommandId` from `@clinth/ui-commands` for interoperability.
+   */
+  dispatch: (commandId: CommandId, args?: Record<string, unknown>) => void;
+  addEventListener: (<K extends keyof IGroupedSubComponentEventMap<T>>(type: K, listener: (event: IGroupedSubComponentEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+/**
+ * Factory that creates a sub-component for a given group.
+ * Called once per group (or once with `undefined` in ungrouped mode).
+ */
+type SubComponentFactory<T> = (groupKey: string | undefined) => HTMLElement & IGroupedSubComponent<T>;
+/**
+ * Fired by `ixfx-grouped-item-lister` after any sub-component fires `select`.
+ * Carries the full cross-group selection union and the key of the group whose
+ * selection just changed (or `undefined` in ungrouped mode).
+ */
+type GroupedSelectDetail<T> = {
+  readonly selected: ReadonlySet<T>;
+  readonly groupKey: string | undefined;
+};
+type GroupedSelectEvent<T> = CustomEvent<GroupedSelectDetail<T>>;
+interface GroupedItemListerElementEventMap<T> {
+  'grouped-select': GroupedSelectEvent<T>;
+}
+//#endregion
+//#region src/grouped-item-lister/grouped-item-lister.d.ts
+declare class GroupedItemListerElement<T = unknown> extends LitElement {
+  #private;
+  grouped: boolean;
+  crossGroupSelection: boolean;
+  get groupBy(): ((item: T) => string) | undefined;
+  set groupBy(value: ((item: T) => string) | undefined);
+  get factory(): SubComponentFactory<T> | undefined;
+  set factory(value: SubComponentFactory<T> | undefined);
+  get provider(): IDataProvider<void, T> | undefined;
+  set provider(value: IDataProvider<void, T> | undefined);
+  /** The union of all selected items across every sub-component. */
+  get selectedItems(): ReadonlySet<T>;
+  /**
+   * Forward a command to all live sub-components.
+   * Use this to propagate changes like sort order, filter state, or view mode.
+   */
+  dispatch(commandId: CommandId, args?: Record<string, unknown>): void;
+  protected createRenderRoot(): this;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(changed: PropertyValues): void;
+  protected render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-grouped-item-lister': GroupedItemListerElement;
+  }
+}
+interface GroupedItemListerElement<T> {
+  addEventListener: (<K extends keyof GroupedItemListerElementEventMap<T>>(type: K, listener: (this: GroupedItemListerElement<T>, event: GroupedItemListerElementEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+export { IGroupedSubComponent as a, SubComponentActivateEvent as c, SubComponentItemClickEvent as d, SubComponentSelectDetail as f, SubComponentTickleEvent as h, GroupedSelectEvent as i, SubComponentFactory as l, SubComponentTickleDetail as m, GroupedItemListerElementEventMap as n, IGroupedSubComponentEventMap as o, SubComponentSelectEvent as p, GroupedSelectDetail as r, SubComponentActivateDetail as s, GroupedItemListerElement as t, SubComponentItemClickDetail as u };
+//# sourceMappingURL=grouped-item-lister-CNLMgdIr.d.ts.map

package/dist/grouped-item-lister-CNLMgdIr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-item-lister-CNLMgdIr.d.ts","names":[],"sources":["../src/grouped-item-lister/types.ts","../src/grouped-item-lister/grouped-item-lister.ts"],"mappings":";;;;;;;;;;KAWY,yBAAyB;WAC1B,UAAU,YAAY;WACtB,UAAU,YAAY;;;;;;KAOrB,2BAA2B;WAC5B,MAAM;;;;;;KAOL,4BAA4B;WAC7B,MAAM;;;;;;KAOL,yBAAyB;WAC1B,MAAM;;KAGL,wBAAwB,KAAK,YAAY,yBAAyB;KAClE,0BAA0B,KAAK,YAAY,2BAA2B;KACtE,2BAA2B,KAAK,YAAY,4BAA4B;KACxE,wBAAwB,KAAK,YAAY,yBAAyB;UAE7D,6BAA6B;EAC5C,UAAU,wBAAwB;EAClC,YAAY,0BAA0B;EACtC,cAAc,2BAA2B;EACzC,UAAU,wBAAwB;;;;;;;;UAanB,qBAAqB,WAAW;;EAE/C,WAAW,gBAAgB;;EAG3B;;WAGS,eAAe,YAAY;;EAGpC,eAAe;;;;;EAMf,WAAW,WAAW,WAAW,OAAO;EAExC,oBAAoB,gBAAgB,6BAA6B,IAC/D,MAAM,GACN,WAAW,OAAO,6BAA6B,GAAG,aAClD,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;;;KAQZ,oBAAoB,MAAM,iCAAiC,cAAc,qBAAqB;;;;;;KAW9F,oBAAoB;WACrB,UAAU,YAAY;WACtB;;KAGC,mBAAmB,KAAK,YAAY,oBAAoB;UAEnD,iCAAiC;EAChD,kBAAkB,mBAAmB;;;;cC9E1B,yBAAyB,qBAAqB;;EACb;EAG5C;MAgBI,aAAa,MAAM;MAInB,QAAQ,SAAS,MAAM;MAKvB,WAAW,oBAAoB;MAI/B,QAAQ,OAAO,oBAAoB;MAQnC,YAAY,oBAAoB;MAIhC,SAAS,OAAO,oBAAoB;;MAWpC,iBAAiB,YAAY;;;;;EAcjC,SAAS,WAAW,WAAW,OAAO;YAUnB;EAIV;EAKA;YAKU,QAAQ,SAAS;YAQjB,wBAAM,2BAAA;;QAmJnB;YACI;IACR,4BAA4B;;;UAIf,yBAAyB;EACxC,oBAAoB,gBAAgB,iCAAiC,IACnE,MAAM,GACN,WAAW,MAAM,yBAAyB,IAAI,OAAO,iCAAiC,GAAG,aACzF,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/grouped-item-lister.d.ts

@@ -0,0 +1,2 @@
+import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-CNLMgdIr.js";
+export { GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent };

package/dist/grouped-item-lister.js

@@ -0,0 +1,177 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as DataController } from "./data-controller-DOlmqNKb.js";
+import "./panel.js";
+import { LitElement, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/grouped-item-lister/grouped-item-lister.ts
+const UNGROUPED_KEY = `__ungrouped__`;
+let GroupedItemListerElement = class GroupedItemListerElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.grouped = false;
+		this.crossGroupSelection = false;
+		this.#subComponents = /* @__PURE__ */ new Map();
+		this.#clearingSelection = false;
+		this.#data = new DataController(this);
+		this.#onSelect = (event) => {
+			if (this.#clearingSelection) return;
+			const sourceEl = event.target;
+			let sourceKey;
+			for (const [key, subEl] of this.#subComponents) if (subEl === sourceEl) {
+				sourceKey = key;
+				break;
+			}
+			if (sourceKey === void 0) return;
+			if (this.grouped && !this.crossGroupSelection) {
+				this.#clearingSelection = true;
+				for (const [key, subEl] of this.#subComponents) if (key !== sourceKey) subEl.clearSelection();
+				this.#clearingSelection = false;
+			}
+			this.dispatchEvent(new CustomEvent(`grouped-select`, {
+				detail: {
+					selected: this.selectedItems,
+					groupKey: sourceKey === UNGROUPED_KEY ? void 0 : sourceKey
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	#groupBy;
+	#factory;
+	#subComponents;
+	#renderedGroups;
+	#clearingSelection;
+	#data;
+	get groupBy() {
+		return this.#groupBy;
+	}
+	set groupBy(value) {
+		this.#groupBy = value;
+		this.requestUpdate();
+	}
+	get factory() {
+		return this.#factory;
+	}
+	set factory(value) {
+		if (value === this.#factory) return;
+		this.#clearSubComponents();
+		this.#factory = value;
+		this.requestUpdate();
+	}
+	get provider() {
+		return this.#data.provider;
+	}
+	set provider(value) {
+		this.#data.provider = value;
+		if (value) this.#data.request(void 0);
+	}
+	/** The union of all selected items across every sub-component. */
+	get selectedItems() {
+		const all = /* @__PURE__ */ new Set();
+		for (const subEl of this.#subComponents.values()) for (const item of subEl.selectedItems) all.add(item);
+		return all;
+	}
+	/**
+	* Forward a command to all live sub-components.
+	* Use this to propagate changes like sort order, filter state, or view mode.
+	*/
+	dispatch(commandId, args) {
+		for (const subEl of this.#subComponents.values()) subEl.dispatch(commandId, args);
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`select`, this.#onSelect);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`select`, this.#onSelect);
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`grouped`)) this.#clearSubComponents();
+		this.#syncSubComponents();
+	}
+	render() {
+		if (!this.#factory) return nothing;
+		if (!this.grouped) return html`<div class="ungrouped-host"></div>`;
+		if (!this.#groupBy) return nothing;
+		this.#renderedGroups = this.#computeGroups();
+		return html`${repeat(this.#renderedGroups.keys(), (key) => key, (key) => html`<ixfx-panel data-group-key=${key} .title=${key}></ixfx-panel>`)}`;
+	}
+	#computeGroups() {
+		const groups = /* @__PURE__ */ new Map();
+		if (!this.#groupBy) return groups;
+		for (const item of this.#data.items) {
+			const key = this.#groupBy(item);
+			let bucket = groups.get(key);
+			if (!bucket) {
+				bucket = [];
+				groups.set(key, bucket);
+			}
+			bucket.push(item);
+		}
+		return groups;
+	}
+	#clearSubComponents() {
+		for (const subEl of this.#subComponents.values()) subEl.remove();
+		this.#subComponents.clear();
+	}
+	#syncSubComponents() {
+		if (!this.#factory) return;
+		if (!this.grouped) {
+			this.#syncUngrouped();
+			return;
+		}
+		if (!this.#groupBy) return;
+		this.#syncGrouped();
+	}
+	#syncUngrouped() {
+		const host = this.querySelector(`.ungrouped-host`);
+		if (!host) return;
+		let subEl = this.#subComponents.get(UNGROUPED_KEY);
+		if (!subEl) {
+			subEl = this.#factory(void 0);
+			host.appendChild(subEl);
+			this.#subComponents.set(UNGROUPED_KEY, subEl);
+		}
+		subEl.setItems(this.#data.items);
+	}
+	#syncGrouped() {
+		const groups = this.#renderedGroups ?? this.#computeGroups();
+		for (const key of [...this.#subComponents.keys()]) if (!groups.has(key)) {
+			this.#subComponents.get(key)?.remove();
+			this.#subComponents.delete(key);
+		}
+		for (const [key, items] of groups) {
+			const panel = [...this.children].find((el) => el instanceof HTMLElement && el.dataset.groupKey === key);
+			if (!panel) continue;
+			let subEl = this.#subComponents.get(key);
+			if (!subEl) {
+				subEl = this.#factory(key);
+				panel.appendChild(subEl);
+				this.#subComponents.set(key, subEl);
+			}
+			subEl.setItems(items);
+		}
+	}
+	#onSelect;
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], GroupedItemListerElement.prototype, "grouped", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `cross-group-selection`,
+	reflect: true
+})], GroupedItemListerElement.prototype, "crossGroupSelection", void 0);
+GroupedItemListerElement = __decorate([safeCustomElement(`ixfx-grouped-item-lister`)], GroupedItemListerElement);
+//#endregion
+export { GroupedItemListerElement };
+
+//# sourceMappingURL=grouped-item-lister.js.map

package/dist/grouped-item-lister.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-item-lister.js","names":["#clearingSelection","#subComponents","#data","#groupBy","#factory","#clearSubComponents","#onSelect","#syncSubComponents","#renderedGroups","#computeGroups","#syncUngrouped","#syncGrouped","customElement"],"sources":["../src/grouped-item-lister/grouped-item-lister.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type { CommandId } from '@clinth/ui-commands';\nimport type { PropertyValues } from 'lit';\nimport type { IDataProvider } from '../common/data-provider.js';\nimport type {\n  GroupedItemListerElementEventMap,\n  GroupedSelectDetail,\n  IGroupedSubComponent,\n  SubComponentFactory,\n} from './types.js';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { DataController } from '../common/data-controller.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../panel/panel.js';\n\nexport type {\n  GroupedItemListerElementEventMap,\n  GroupedSelectDetail,\n  GroupedSelectEvent,\n  IGroupedSubComponent,\n  IGroupedSubComponentEventMap,\n  SubComponentActivateDetail,\n  SubComponentActivateEvent,\n  SubComponentFactory,\n  SubComponentItemClickDetail,\n  SubComponentItemClickEvent,\n  SubComponentSelectDetail,\n  SubComponentSelectEvent,\n  SubComponentTickleDetail,\n  SubComponentTickleEvent,\n} from './types.js';\n\nconst UNGROUPED_KEY = `__ungrouped__`;\n\n@customElement(`ixfx-grouped-item-lister`)\nexport class GroupedItemListerElement<T = unknown> extends LitElement {\n  @property({ type: Boolean, reflect: true }) grouped = false;\n\n  @property({ type: Boolean, attribute: `cross-group-selection`, reflect: true })\n  crossGroupSelection = false;\n\n  #groupBy: ((item: T) => string) | undefined;\n  #factory: SubComponentFactory<T> | undefined;\n  #subComponents = new Map<string, HTMLElement & IGroupedSubComponent<T>>();\n  // Computed in render() and reused in updated() to avoid a second groupBy pass\n  #renderedGroups: Map<string, T[]> | undefined;\n  // Guard against re-entrant select events when we call clearSelection() on siblings\n  #clearingSelection = false;\n\n  readonly #data = new DataController<void, T>(this);\n\n  // ---------------------------------------------------------------------------\n  // JS-only properties (not HTML attributes — carry function/type information)\n  // ---------------------------------------------------------------------------\n\n  get groupBy(): ((item: T) => string) | undefined {\n    return this.#groupBy;\n  }\n\n  set groupBy(value: ((item: T) => string) | undefined) {\n    this.#groupBy = value;\n    this.requestUpdate();\n  }\n\n  get factory(): SubComponentFactory<T> | undefined {\n    return this.#factory;\n  }\n\n  set factory(value: SubComponentFactory<T> | undefined) {\n    if (value === this.#factory)\n      return;\n    this.#clearSubComponents();\n    this.#factory = value;\n    this.requestUpdate();\n  }\n\n  get provider(): IDataProvider<void, T> | undefined {\n    return this.#data.provider;\n  }\n\n  set provider(value: IDataProvider<void, T> | undefined) {\n    this.#data.provider = value;\n    if (value)\n      this.#data.request(undefined);\n  }\n\n  // ---------------------------------------------------------------------------\n  // Public API\n  // ---------------------------------------------------------------------------\n\n  /** The union of all selected items across every sub-component. */\n  get selectedItems(): ReadonlySet<T> {\n    const all = new Set<T>();\n    for (const subEl of this.#subComponents.values()) {\n      for (const item of subEl.selectedItems) {\n        all.add(item);\n      }\n    }\n    return all;\n  }\n\n  /**\n   * Forward a command to all live sub-components.\n   * Use this to propagate changes like sort order, filter state, or view mode.\n   */\n  dispatch(commandId: CommandId, args?: Record<string, unknown>): void {\n    for (const subEl of this.#subComponents.values()) {\n      subEl.dispatch(commandId, args);\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Lit lifecycle\n  // ---------------------------------------------------------------------------\n\n  protected override createRenderRoot() {\n    return this;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`select`, this.#onSelect as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`select`, this.#onSelect as EventListener);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has(`grouped`)) {\n      this.#clearSubComponents();\n    }\n    this.#syncSubComponents();\n  }\n\n  protected override render() {\n    if (!this.#factory)\n      return nothing;\n\n    if (!this.grouped) {\n      return html`<div class=\"ungrouped-host\"></div>`;\n    }\n\n    if (!this.#groupBy)\n      return nothing;\n\n    // Store computed groups so updated() can reuse them without a second pass\n    this.#renderedGroups = this.#computeGroups();\n    return html`${repeat(\n      this.#renderedGroups.keys(),\n      key => key,\n      key => html`<ixfx-panel data-group-key=${key} .title=${key}></ixfx-panel>`,\n    )}`;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Internal — DOM management\n  // ---------------------------------------------------------------------------\n\n  #computeGroups(): Map<string, T[]> {\n    const groups = new Map<string, T[]>();\n    if (!this.#groupBy)\n      return groups;\n    for (const item of this.#data.items) {\n      const key = this.#groupBy(item);\n      let bucket = groups.get(key);\n      if (!bucket) {\n        bucket = [];\n        groups.set(key, bucket);\n      }\n      bucket.push(item);\n    }\n    return groups;\n  }\n\n  #clearSubComponents(): void {\n    for (const subEl of this.#subComponents.values()) {\n      subEl.remove();\n    }\n    this.#subComponents.clear();\n  }\n\n  #syncSubComponents(): void {\n    if (!this.#factory)\n      return;\n\n    if (!this.grouped) {\n      this.#syncUngrouped();\n      return;\n    }\n\n    if (!this.#groupBy)\n      return;\n    this.#syncGrouped();\n  }\n\n  #syncUngrouped(): void {\n    const host = this.querySelector<HTMLElement>(`.ungrouped-host`);\n    if (!host)\n      return;\n\n    let subEl = this.#subComponents.get(UNGROUPED_KEY);\n    if (!subEl) {\n      subEl = this.#factory!(undefined);\n      host.appendChild(subEl);\n      this.#subComponents.set(UNGROUPED_KEY, subEl);\n    }\n    subEl.setItems(this.#data.items);\n  }\n\n  #syncGrouped(): void {\n    const groups = this.#renderedGroups ?? this.#computeGroups();\n\n    // Remove sub-components for groups that no longer exist\n    for (const key of [...this.#subComponents.keys()]) {\n      if (!groups.has(key)) {\n        this.#subComponents.get(key)?.remove();\n        this.#subComponents.delete(key);\n      }\n    }\n\n    // Mount or update sub-components per group.\n    // Panels are already in the DOM at this point (rendered by Lit's repeat above).\n    for (const [key, items] of groups) {\n      const panel = [...this.children].find(\n        el => el instanceof HTMLElement && (el as HTMLElement).dataset.groupKey === key,\n      ) as HTMLElement | undefined;\n      if (!panel)\n        continue;\n\n      let subEl = this.#subComponents.get(key);\n      if (!subEl) {\n        subEl = this.#factory!(key);\n        panel.appendChild(subEl);\n        this.#subComponents.set(key, subEl);\n      }\n      subEl.setItems(items);\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Internal — selection coordination\n  // ---------------------------------------------------------------------------\n\n  #onSelect = (event: Event): void => {\n    if (this.#clearingSelection)\n      return;\n\n    const sourceEl = event.target as HTMLElement;\n    let sourceKey: string | undefined;\n    for (const [key, subEl] of this.#subComponents) {\n      if (subEl === sourceEl) {\n        sourceKey = key;\n        break;\n      }\n    }\n\n    if (sourceKey === undefined)\n      return;\n\n    if (this.grouped && !this.crossGroupSelection) {\n      this.#clearingSelection = true;\n      for (const [key, subEl] of this.#subComponents) {\n        if (key !== sourceKey)\n          subEl.clearSelection();\n      }\n      this.#clearingSelection = false;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<GroupedSelectDetail<T>>(`grouped-select`, {\n        detail: {\n          selected: this.selectedItems,\n          groupKey: sourceKey === UNGROUPED_KEY ? undefined : sourceKey,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-grouped-item-lister': GroupedItemListerElement;\n  }\n}\n\nexport interface GroupedItemListerElement<T> {\n  addEventListener: (<K extends keyof GroupedItemListerElementEventMap<T>>(\n    type: K,\n    listener: (this: GroupedItemListerElement<T>, event: GroupedItemListerElementEventMap<T>[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":"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"}