@ixfx/components 0.7.3 → 0.7.5

package/dist/detail-list-BS5dRDda.d.ts

@@ -0,0 +1,175 @@
+import "./icon-CDGprSdE.js";
+import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
+import { y as ListSearchController } from "./index-CBS4z1v-.js";
+import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-B5ioL-dG.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-DwtCPy1b.js";
+import { LitElement, PropertyValues } from "lit";
+import { CommandId, CommandRegistry } from "@clinth/ui-commands";
+//#region src/detail-list/types.d.ts
+/** Sort direction applied to the item columns. */
+type DetailSortMode = `none` | `ascending` | `descending`;
+/** Per-item view of a row passed to `sortComparator`. */
+type DetailSortItem = {
+  readonly element: HTMLElement;
+  readonly data: unknown;
+  readonly label: string;
+};
+/** Custom comparator — return negative when `a` sorts before `b`. */
+type DetailSortComparator = (a: DetailSortItem, b: DetailSortItem) => number;
+/** Turns one object item into row content — a plain string or a DOM node. */
+type DetailFormatter = (item: unknown, index: number) => string | Node;
+//#endregion
+//#region src/detail-list/detail-list.d.ts
+/**
+ * A list that scales horizontally, not vertically.
+ *
+ * Items are laid out in equal-width columns; they flow top→bottom down a
+ * column, then wrap to the top of the next column to the right. The
+ * component has a fixed vertical extent and scrolls horizontally.
+ *
+ * Selection semantics match `ixfx-vertical-list` — same modes, same
+ * `list-*` events, same keyboard gestures — but navigation is a 2-D grid
+ * (Up/Down move within a column, Left/Right jump columns).
+ *
+ * Items come from any of three sources (later writes win):
+ * 1. declarative `<li>` children in light DOM,
+ * 2. `addItem()` / `setItems()`,
+ * 3. an `items` array of objects rendered via `displayProperty` /
+ *    `formatter`, optionally streamed in via a `provider`.
+ */
+declare class DetailListElement extends LitElement {
+  #private;
+  selectionMode: ListSelectionMode;
+  interactionMode: ListInteractionMode;
+  sort: DetailSortMode;
+  sortBy: string;
+  sortComparator: DetailSortComparator | undefined;
+  items: readonly unknown[];
+  provider: IDataProvider<void, unknown> | undefined;
+  displayProperty: string;
+  formatter: DetailFormatter | undefined;
+  iconProperty: string;
+  keyProperty: string;
+  filterPredicate: ((el: Element) => boolean) | undefined;
+  /**
+   * Whether keyboard navigation wraps from last to first and vice versa.
+   * - 'stop' (default): navigation stops at the boundary
+   * - 'wrap': navigation wraps around
+   */
+  itemWrap: `stop` | `wrap`;
+  /** Optional renderer for the checkbox shown in `checked` interactionMode. */
+  checkboxRenderer: ((checked: boolean) => unknown) | CustomCheckboxOptions | undefined;
+  /**
+   * Space-separated subset of `navigate select filter` — limits which
+   * incremental-search modes are offered. Unset ⇒ all three; empty ⇒ search
+   * disabled. See `docs/infra-incremental.md`.
+   */
+  searchModes: string | undefined;
+  private _listEl;
+  private readonly selection;
+  private tickled;
+  /** Incremental search (navigate / select / filter). See `docs/infra-incremental.md`. */
+  readonly search: ListSearchController<Element>;
+  /** Command registry carrying this list's `list.search.*` commands. */
+  get registry(): CommandRegistry<unknown> | undefined;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changed: PropertyValues): void;
+  /** The most recently selected item, or `undefined` if nothing is selected. */
+  get selectedItem(): Element | undefined;
+  /** The full current selection set (read-only). */
+  get selectedItems(): ReadonlySet<Element>;
+  /**
+   * Force an immediate geometry recompute. Called automatically on resize,
+   * DOM changes, sort/filter/search changes — only needed when layout is
+   * changed by outside forces (e.g. an external font load).
+   */
+  refreshLayout(): void;
+  addItem(item: Element | string, options?: AddItemOptions): void;
+  /**
+   * Collapse + fade `item` out, then detach it; the rows after it slide up to
+   * close the gap. Resolves once removed. Immediate under reduced motion.
+   */
+  removeItem(item: Element): Promise<void>;
+  /** {@link removeItem} for several items at once. */
+  removeItems(items: Iterable<Element>): Promise<void>;
+  clearItems(): void;
+  /**
+   * Replace the entire item list in one call.
+   * Equivalent to `clearItems()` followed by `addItem()` for each element.
+   */
+  setItems(items: readonly Element[]): void;
+  /**
+   * Get the source object behind an `<li>` built from an `items` array or
+   * provider. Returns `undefined` for declarative / programmatic elements.
+   */
+  getItemData(item: HTMLLIElement): unknown;
+  /**
+   * Dispatch a command to this list — used by `ixfx-grouped-item-lister` to
+   * forward commands. Routes through the command registry (so `list.search.*`
+   * and any other registered commands work).
+   */
+  dispatch(commandId: CommandId, args?: Record<string, unknown>): void;
+  select(item: Element): void;
+  selectMany(items: Iterable<Element>): void;
+  deselect(item: Element): void;
+  clearSelection(): void;
+  selectAll(): void;
+  /** The selection as stable `data-key` / `data-value` strings. */
+  get selectedKeys(): ReadonlySet<string>;
+  /** The key of the item under the cursor, or `undefined`. */
+  get tickledKey(): string | undefined;
+  /** Replace the selection with the items carrying these keys (unknown keys ignored). */
+  selectKeys(keys: Iterable<string>): void;
+  /** Add items by key to the selection (multi-select modes only). */
+  addSelectedKeys(keys: Iterable<string>): void;
+  /** Remove items by key from the selection. */
+  removeSelectedKeys(keys: Iterable<string>): void;
+  /** Move the cursor to the item with this key and scroll it into view. */
+  focusKey(key: string): void;
+  selectedFilter(kind: `selected` | `checked` | `either`): Generator<Element>;
+  private _getVisibleItems;
+  /**
+   * Set the column width to fit the widest visible item.
+   *
+   * This is opt-in; detail lists continue to use `--detail-list-column-width`
+   * (or its 220px fallback) until this method is called. The measured value is
+   * set directly on this element, so it takes precedence over an inherited
+   * value. Returns the applied width in pixels, or 0 when there are no items.
+   */
+  fitColumnWidth(): Promise<number>;
+  private _isCheckable;
+  private _setLabel;
+  private _syncItemStates;
+  private _syncCheckboxes;
+  /**
+   * Native checkbox cell: a span that stretches to the row's full cross-axis
+   * (so the entire column height is a click target) with a real `<input>`
+   * centred inside. The span owns the click; the input is purely visual and
+   * has `pointer-events:none` so a single click produces one toggle.
+   */
+  private _createNativeCheckboxCell;
+  /** Custom checkbox cell: same shape as the native cell; renderer content inside. */
+  private _createCustomCheckbox;
+  private _findListItem;
+  private _dispatch;
+  private _onPointerOver;
+  private _onPointerLeave;
+  private _onKeyDown;
+  private _onClick;
+  private _onDblClick;
+  private _onWheel;
+  private _activateItem;
+  static styles: import("lit").CSSResult[];
+  render(): import("lit").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-detail-list': DetailListElement;
+  }
+  interface HTMLElementEventMap extends ListElementEventMap {}
+}
+//#endregion
+export { DetailSortMode as a, DetailSortItem as i, DetailFormatter as n, DetailSortComparator as r, DetailListElement as t };
+//# sourceMappingURL=detail-list-BS5dRDda.d.ts.map

package/dist/detail-list-BS5dRDda.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-list-BS5dRDda.d.ts","names":[],"sources":["../src/detail-list/types.ts","../src/detail-list/detail-list.ts"],"mappings":";;;;;;;;;KACY;;KAGA;WACD,SAAS;WACT;WACA;;;KAIC,wBAAwB,GAAG,gBAAgB,GAAG;;KAG9C,mBAAmB,eAAe,2BAA2B;;;;;;;;;;;;;;;;;;;;cC4D5D,0BAA0B;;EAErC,eAAe;EAGf,iBAAiB;EAGjB,MAAM;EAGN;EAGA,gBAAgB;EAGhB;EAGA,UAAU;EAGV;EAGA,WAAW;EAGX;EAGA;EAGA,mBAAmB,IAAI;;;;;;EAQvB;;EAIA,oBAAoB,gCAAgC;;;;;;EAQpD;UAGQ;mBAeS;UAeT;;WAeC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EA4DA;EAiBA;EAQA,QAAQ,SAAS;;MAqCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;;;;;;EASjC;EAIA,QAAQ,MAAM,kBAAkB,UAAU;;;;;EAuB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;EAYA,SAAS,gBAAgB;;;;;EAgBzB,YAAY,MAAM;;;;;;EASlB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;EAKzB,SAAS;EAgBP,eAAe,0CAA0C,UAAU;UAoa7D;;;;;;;;;EAkBF,kBAAkB;UAwBhB;UAMA;UAgCA;UAiBA;;;;;;;UA2DA;;UAoBA;UAcA;UAYA;UAUA;UAMA;UAIA;UA4EA;UASA;UAMA;UAKA;SAUQ,sBAAM;EA6Hb,wBAAM;;QAmBT;YACI;IACR,oBAAoB;;YAGZ,4BAA4B"}

package/dist/detail-list.d.ts

@@ -0,0 +1,3 @@
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-DwtCPy1b.js";
+import { a as DetailSortMode, i as DetailSortItem, n as DetailFormatter, r as DetailSortComparator, t as DetailListElement } from "./detail-list-BS5dRDda.js";
+export { type AddItemOptions, type CustomCheckboxOptions, type DetailFormatter, DetailListElement, type DetailSortComparator, type DetailSortItem, type DetailSortMode };