@ixfx/components 0.12.0 → 0.13.1

package/dist/flat-list.js

@@ -0,0 +1,654 @@
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-1gpwtPx8.js";
+import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import "./crumbs.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import "./vertical-list.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/flat-list/flat-list.ts
+/**
+* A node with children, or whose children are still to be loaded.
+* `isLeaf: false` forces a branch even when `children` is `[]` (an empty
+* folder that can still be entered); `isLeaf: true` forces a leaf.
+*/
+function isBranch(node) {
+	return node.item.isLeaf === false || node.item.isLeaf !== true && node.children?.length !== 0;
+}
+function sameKeys(a, b) {
+	return a.length === b.length && a.every((k, i) => k === b[i]);
+}
+function sameNodes(a, b) {
+	return a.length === b.length && a.every((row, i) => row.node === b[i].node && row.branch === b[i].branch);
+}
+/**
+* Walk `keys` down from `root`, stopping at the first key that no longer
+* resolves. Returns the nodes visited (root first), so the valid path is
+* `nodes.length - 1` keys long.
+*/
+function resolvePath(root, keys) {
+	if (!root) return [];
+	const nodes = [root];
+	for (const key of keys) {
+		const next = nodes.at(-1).children?.find((n) => n.item.key === key);
+		if (!next) break;
+		nodes.push(next);
+	}
+	return nodes;
+}
+/** Key path (excluding root) to `target`, or `undefined` if it is not in the loaded tree. */
+function findKeyPath(root, target) {
+	if (root === target) return [];
+	for (const child of root.children ?? []) {
+		const sub = findKeyPath(child, target);
+		if (sub) return [child.item.key, ...sub];
+	}
+}
+function orderRows(children, branchOrder, sort) {
+	const rows = children.map((node) => ({
+		key: node.item.key,
+		node,
+		branch: isBranch(node)
+	}));
+	const sorted = sort ? [...rows].sort((a, b) => sort(a.node, b.node)) : rows;
+	if (branchOrder === `mixed`) return sorted;
+	return [...sorted.filter((r) => r.branch), ...sorted.filter((r) => !r.branch)];
+}
+let FlatListElement = class FlatListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.path = [];
+		this.branchOrder = `first`;
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
+		this.itemsDroppable = false;
+		this.virtualize = false;
+		this.itemHeight = 0;
+		this.withUp = true;
+		this.hideRoot = false;
+		this.emptyText = `Empty`;
+		this._focusVisible = false;
+		this._rows = [];
+		this._loading = false;
+		this.#lastPath = [];
+		this.#selected = /* @__PURE__ */ new Set();
+		this.#direction = `jump`;
+		this.#canDropOn = (el, dataTransfer) => {
+			const node = this.#nodeForElement(el);
+			return !!node && (this.canDrop?.(node, dataTransfer) ?? true);
+		};
+		this.#onListDragOver = (e) => {
+			if (this.itemsDroppable) e.preventDefault();
+		};
+		this.#onListDrop = (e) => {
+			const node = this.#nodeForKey(e.detail.key) ?? this.currentNode;
+			if (!node) return;
+			this.dispatchEvent(new CustomEvent(`flat-list-drop`, {
+				detail: {
+					node,
+					dataTransfer: e.detail.dataTransfer
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#onListContextMenu = (e) => {
+			const node = this.#nodeForKey(e.detail.key);
+			if (!node) return;
+			const nodes = [...e.detail.selectedKeys].map((k) => this.#nodeForKey(k)).filter((n) => n !== void 0);
+			if (!this.dispatchEvent(new CustomEvent(`flat-list-context-menu`, {
+				detail: {
+					node,
+					nodes,
+					x: e.detail.x,
+					y: e.detail.y
+				},
+				bubbles: true,
+				composed: true,
+				cancelable: true
+			}))) e.preventDefault();
+		};
+		this.#validateEditKey = (value, key) => {
+			const node = this.#nodeForKey(key);
+			return !!node && (this.validateEdit?.(value, node) ?? false);
+		};
+		this.#onListEditCommit = (e) => {
+			const node = this.#nodeForKey(e.detail.key);
+			if (node) this.dispatchEvent(new CustomEvent(`flat-list-edit-commit`, {
+				detail: {
+					node,
+					value: e.detail.value
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#onListEditCancel = (e) => {
+			const node = this.#nodeForKey(e.detail.key);
+			if (node) this.dispatchEvent(new CustomEvent(`flat-list-edit-cancel`, {
+				detail: { node },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#onListSelect = (e) => {
+			const previous = this.#selected;
+			const nodes = [...e.detail.selectedKeys].map((k) => this.#nodeForKey(k)).filter((n) => n !== void 0);
+			this.#selected = new Set(nodes);
+			this.dispatchEvent(new CustomEvent(`flat-list-select`, {
+				detail: {
+					selected: this.#selected,
+					selectedKeys: e.detail.selectedKeys,
+					previous
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#onListActivate = (e) => {
+			const key = e.detail.item.getAttribute(`data-key`) ?? void 0;
+			const node = this.#nodeForKey(key);
+			if (!node) return;
+			if (isBranch(node)) {
+				this.navigateInto(node.item.key);
+				return;
+			}
+			this.dispatchEvent(new CustomEvent(`flat-list-activate`, {
+				detail: { node },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#syncFocusVisible = () => {
+			this._focusVisible = this.list?.matches(`:focus-visible`) ?? false;
+		};
+		this.#onKeyDown = (e) => {
+			if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+			const origin = e.composedPath()[0];
+			if (origin instanceof HTMLInputElement || origin instanceof HTMLTextAreaElement) return;
+			if (e.key === `ArrowRight` || e.key === `ArrowLeft` || e.key === `Backspace`) TickledController.ignoreHoverUntilPointerMoves();
+			if (e.key === `ArrowRight`) {
+				const node = this.#nodeForKey(this.list?.tickledKey);
+				if (node && isBranch(node)) {
+					e.preventDefault();
+					this.navigateInto(node.item.key);
+				}
+			} else if (e.key === `ArrowLeft` || e.key === `Backspace`) {
+				if (this.navigateUp()) e.preventDefault();
+			}
+		};
+		this.#onCrumbSelect = (e) => {
+			e.stopPropagation();
+			const target = [...e.detail.selected].at(-1);
+			const root = this.#root;
+			if (!target || !root) return;
+			const keys = findKeyPath(root, target);
+			if (!keys) return;
+			if (isBranch(target)) {
+				const direction = keys.length < this.path.length && keys.every((k, i) => k === this.path[i]) ? `up` : `jump`;
+				this.#setPath(keys, direction);
+			} else {
+				const levelPath = keys.slice(0, -1);
+				const sameLevel = sameKeys(levelPath, this.path);
+				this.#setPath(levelPath, `jump`);
+				this.#pendingSelectKey = target.item.key;
+				if (sameLevel) this.#settleList();
+			}
+		};
+		this.#renderPlainRow = (row) => this.#renderRow(row, false);
+		this.#renderEditableRow = (row) => this.#renderRow(row, true);
+		this.#renderIcon = (row) => {
+			const { node } = row;
+			return node.item.icon ? html`<ixfx-icon name=${node.item.icon}></ixfx-icon>` : void 0;
+		};
+		this.#renderBadge = (row) => {
+			const { node, branch } = row;
+			const badge = appearanceAbsent(node.item.badge) ? nothing : node.item.badge;
+			const textColor = appearanceColor(node.item.textColor);
+			return html`${badge}${branch ? html`<span
+          class="chevron"
+          aria-hidden="true"
+          style=${textColor ? `color:${textColor}` : nothing}
+          @pointerdown=${(e) => e.stopPropagation()}
+          @click=${(e) => this.#onChevronClick(e, node)}
+        >›</span>` : nothing}`;
+		};
+	}
+	#modelUnsubscribe;
+	#loadController;
+	#loadingNode;
+	#lastPath;
+	/** Branch key to put the cursor on after the next rows arrive (set when going up). */
+	#pendingFocusKey;
+	#selected;
+	#direction;
+	/** Leaf key to select once the list shows its level (set when a leaf crumb is chosen). */
+	#pendingSelectKey;
+	/** The inner list, for registry / search commands and other advanced use. */
+	get list() {
+		return this.renderRoot.querySelector(`ixfx-vertical-list`) ?? void 0;
+	}
+	/** Command registry carrying the inner list's `list.search.*` commands. */
+	get registry() {
+		return this.list?.registry;
+	}
+	/** Run a command on the inner list, e.g. `dispatch('list.search.filter')`. */
+	dispatch(commandId, args) {
+		this.list?.dispatch(commandId, args);
+	}
+	/**
+	* Rename a row in place. Needs `validateEdit`, and only rows whose
+	* `item.editable` is true can be edited. Ends with `flat-list-edit-commit` or `flat-list-edit-cancel`; the
+	* label is not rewritten — update the tree in response. Returns false if
+	* the row is unknown, not editable, or not on screen.
+	*/
+	beginEdit(key) {
+		const node = this.#nodeForKey(key);
+		if (!this.validateEdit || !node?.item.editable) return false;
+		return this.list?.beginEdit(key) ?? false;
+	}
+	/** The node whose children are listed. */
+	get currentNode() {
+		return resolvePath(this.#root, this.path).at(-1);
+	}
+	get selectedNodes() {
+		return this.#selected;
+	}
+	get #root() {
+		return this.model?.root ?? this.root;
+	}
+	/** Show the children of the node at this key path. Returns false if the path does not resolve. */
+	navigateTo(keys) {
+		if (resolvePath(this.#root, keys).length !== keys.length + 1) return false;
+		this.#setPath(keys, `jump`);
+		return true;
+	}
+	/** Enter the child branch with this key. */
+	navigateInto(key) {
+		const node = this.currentNode?.children?.find((n) => n.item.key === key);
+		if (!node || !isBranch(node)) return false;
+		this.#setPath([...this.path, key], `into`);
+		return true;
+	}
+	/** Move to the parent level. Returns false at the root. */
+	navigateUp() {
+		if (this.path.length === 0) return false;
+		this.#pendingFocusKey = this.path.at(-1);
+		this.#setPath(this.path.slice(0, -1), `up`);
+		return true;
+	}
+	#setPath(path, direction) {
+		if (sameKeys(path, this.path)) return;
+		this.#lastPath = this.path;
+		this.#direction = direction;
+		this.list?.search.close();
+		this.list?.clearSelection();
+		this.path = path;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		this.#loadController?.abort();
+		this.#loadingNode = void 0;
+	}
+	willUpdate(changed) {
+		if (changed.has(`model`)) {
+			this.#modelUnsubscribe?.();
+			this.#modelUnsubscribe = this.model?._subscribe((event) => {
+				if (event.type === `invalidate` && event.key === this.currentNode?.item.key) {
+					const node = this.currentNode;
+					if (node) node.children = void 0;
+				}
+				this.requestUpdate();
+				this.#refreshRows(true);
+			});
+		}
+		const valid = resolvePath(this.#root, this.path).length - 1;
+		if (this.#root && valid < this.path.length) this.path = this.path.slice(0, valid);
+		if ([
+			`root`,
+			`model`,
+			`path`,
+			`branchOrder`,
+			`sort`,
+			`filterPredicate`,
+			`loadChildren`
+		].some((p) => changed.has(p))) this.#refreshRows(changed.has(`root`) || changed.has(`model`) || changed.has(`loadChildren`));
+	}
+	updated(changed) {
+		if (changed.has(`path`) && !sameKeys(this.path, this.#lastPath) && this.#root) {
+			const node = this.currentNode;
+			if (node) {
+				const previousPath = this.#lastPath;
+				this.#lastPath = this.path;
+				this.dispatchEvent(new CustomEvent(`flat-list-navigate`, {
+					detail: {
+						path: this.path,
+						previousPath,
+						node,
+						direction: this.#direction
+					},
+					bubbles: true,
+					composed: true
+				}));
+				this.#direction = `jump`;
+			}
+		}
+		if (changed.has(`_rows`)) this.#settleList();
+		if (changed.has(`_rows`) || changed.has(`markedKey`)) this.#applyMarked();
+	}
+	/** Recompute the level's rows, loading children first when they are not yet known. */
+	#refreshRows(reload) {
+		const node = this.currentNode;
+		if (!node) {
+			this._rows = [];
+			return;
+		}
+		if (node.children === void 0 && (this.model || this.loadChildren) && (reload || this.#loadingNode !== node)) {
+			this.#load(node);
+			return;
+		}
+		this.#applyRows(node);
+	}
+	#applyRows(node) {
+		const filter = this.filterPredicate;
+		const depth = this.path.length;
+		const rows = orderRows((node.children ?? []).filter((c) => !filter || filter(c, depth)), this.branchOrder, this.sort);
+		if (!sameNodes(rows, this._rows)) this._rows = rows;
+	}
+	async #load(node) {
+		this.#loadController?.abort();
+		const controller = new AbortController();
+		this.#loadController = controller;
+		this.#loadingNode = node;
+		this._loading = true;
+		this._rows = [];
+		try {
+			const depth = this.path.length;
+			const children = this.model ? await this.model.getChildren(node, depth, controller.signal) : [...await collectDataResult(this.loadChildren({
+				node,
+				depth
+			}, controller.signal), controller.signal)];
+			if (controller.signal.aborted) return;
+			node.children = [...children];
+		} catch {
+			if (controller.signal.aborted) return;
+			node.children = [];
+		}
+		this.#loadingNode = void 0;
+		this._loading = false;
+		if (node === this.currentNode) this.#applyRows(node);
+	}
+	#nodeForKey(key) {
+		return key === void 0 ? void 0 : this._rows.find((r) => r.key === key)?.node;
+	}
+	/** A single click on a branch's chevron enters it, without selecting the row. */
+	#onChevronClick(e, node) {
+		e.stopPropagation();
+		this.navigateInto(node.item.key);
+	}
+	#nodeForElement(el) {
+		return el ? this.#nodeForKey(el.getAttribute(`data-key`) ?? void 0) : this.currentNode;
+	}
+	#canDropOn;
+	/** Accept every drag that got past `canDrop`; the consumer only hears about the drop. */
+	#onListDragOver;
+	#onListDrop;
+	#onListContextMenu;
+	#validateEditKey;
+	#onListEditCommit;
+	#onListEditCancel;
+	#onListSelect;
+	#onListActivate;
+	#syncFocusVisible;
+	#onKeyDown;
+	/** A crumb was chosen (or the Up button used): go to that node, or to its parent and select it if it is a leaf. */
+	#onCrumbSelect;
+	/** Flag the marked row. Rows are rebuilt with the level, so this runs after each rebuild. */
+	async #applyMarked() {
+		const list = this.list;
+		if (!list) return;
+		await list.updateComplete;
+		for (const row of list.querySelectorAll(`li[data-key]`)) row.toggleAttribute(`data-marked`, row.getAttribute(`data-key`) === this.markedKey);
+	}
+	/** After the inner list has rebuilt, place the cursor / selection / focus. */
+	async #settleList() {
+		const list = this.list;
+		if (!list) return;
+		const hadFocus = this.matches(`:focus-within`);
+		await list.updateComplete;
+		const select = this.#pendingSelectKey;
+		const focusKey = this.#pendingFocusKey ?? select ?? this._rows[0]?.key;
+		this.#pendingSelectKey = void 0;
+		this.#pendingFocusKey = void 0;
+		if (select) list.selectKeys([select]);
+		if (focusKey !== void 0) list.focusKey(focusKey);
+		if (hadFocus) list.focus();
+	}
+	/** Two stable formatters, so toggling `validateEdit` rebuilds the rows with or without edit hooks. */
+	#renderPlainRow;
+	#renderEditableRow;
+	#renderRow(row, editingEnabled) {
+		const { node } = row;
+		const textColor = appearanceColor(node.item.textColor);
+		const editable = editingEnabled && node.item.editable === true;
+		return html`<span class="label" data-edit-label=${editable ? `` : nothing} data-edit-value=${editable ? node.item.label : nothing} style=${textColor ? `color:${textColor}` : nothing}>${node.item.label}</span>`;
+	}
+	#renderIcon;
+	#renderBadge;
+	render() {
+		const root = this.#root;
+		return html`
+      <div class="crumbs" part="crumbs">
+        <ixfx-crumb-navigation
+          .root=${root}
+          .selectedNode=${this.currentNode}
+          .loadChildren=${this.loadChildren}
+          selection-filter="all"
+          pad-ending
+          leading-caret
+          ?with-up=${this.withUp}
+          ?hide-root=${this.hideRoot}
+          @select=${this.#onCrumbSelect}
+        ></ixfx-crumb-navigation>
+      </div>
+      <div class="body">
+        <ixfx-vertical-list
+          .items=${this._rows}
+          .formatter=${this.validateEdit ? this.#renderEditableRow : this.#renderPlainRow}
+          .icon=${this.#renderIcon}
+          .iconColor=${(row) => appearanceColor(row.node.item.iconColor)}
+          .badge=${this.#renderBadge}
+          key-property="key"
+          .selectionMode=${this.selectionMode}
+          .interactionMode=${this.interactionMode}
+          .itemWrap=${this.itemWrap}
+          .searchModes=${this.searchModes}
+          ?items-draggable=${this.itemsDraggable}
+          ?items-droppable=${this.itemsDroppable}
+          .canDrop=${this.#canDropOn}
+          .editValidator=${this.#validateEditKey}
+          .virtualize=${this.virtualize}
+          .itemHeight=${this.itemHeight}
+          @list-drag-over=${this.#onListDragOver}
+          @list-drop=${this.#onListDrop}
+          @list-context-menu=${this.#onListContextMenu}
+          @list-edit-commit=${this.#onListEditCommit}
+          @list-edit-cancel=${this.#onListEditCancel}
+          @list-select=${this.#onListSelect}
+          @list-activate=${this.#onListActivate}
+          @keydown=${this.#onKeyDown}
+          @focusin=${this.#syncFocusVisible}
+          @focusout=${this.#syncFocusVisible}
+        ></ixfx-vertical-list>
+        ${this._rows.length === 0 ? html`<div class="empty" part="empty">${this._loading ? `Loading…` : this.emptyText}</div>` : nothing}
+      </div>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+      background: var(--flat-list-bg, var(--list-bg, var(--surface-3)));
+      color: var(--flat-list-text, var(--list-text, var(--surface-3-text)));
+      border: 1px solid var(--flat-list-border, var(--list-border, var(--border)));
+      border-radius: var(--flat-list-radius, var(--list-radius, var(--radius-s)));
+    }
+
+    .crumbs {
+      flex: none;
+      font-size: var(--flat-list-crumb-font-size, var(--text-s));
+      padding: var(--flat-list-crumb-padding, var(--space-xs));
+      border-bottom: 1px solid var(--flat-list-border, var(--list-border, var(--border)));
+    }
+
+    .body {
+      position: relative;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    :host([data-focus-visible]) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    ixfx-vertical-list {
+      /* The ring is drawn round the whole component instead. */
+      outline: none;
+      /* Fill .body absolutely: a percentage height does not reliably resolve
+         inside a flex item, and an unbounded list never scrolls the cursor into view. */
+      position: absolute;
+      inset: 0;
+      --list-bg: transparent;
+      --list-border: none;
+      --list-radius: 0;
+    }
+
+    .empty {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      pointer-events: none;
+      color: var(--flat-list-empty-text, var(--surface-muted-text));
+    }
+
+    li[data-marked] {
+      background: var(--flat-list-marked-bg, color-mix(in srgb, var(--accent) 18%, transparent));
+      box-shadow: inset 3px 0 0 var(--flat-list-marked-bar, var(--accent));
+    }
+
+    .label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Highlight rule for incremental search: the rows live in this shadow root,
+       so the page-level ::highlight() rule cannot reach them. */
+    ::highlight(vertical-list-search) {
+      background: var(--accent);
+      color: var(--accent-text, #fff);
+    }
+
+    .chevron {
+      margin-inline-start: auto;
+      padding-inline-start: 0.5em;
+      padding-inline-end: var(--flat-list-chevron-gap, 0.4em);
+      /* Inherit the row's text colour, so it follows selected / tickled states. */
+      color: inherit;
+    }
+  `];
+	}
+};
+__decorate([property({ attribute: false })], FlatListElement.prototype, "root", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "model", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "path", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "loadChildren", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "sort", void 0);
+__decorate([property({
+	type: String,
+	attribute: `branch-order`,
+	reflect: true
+})], FlatListElement.prototype, "branchOrder", void 0);
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], FlatListElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], FlatListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `item-wrap`
+})], FlatListElement.prototype, "itemWrap", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], FlatListElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], FlatListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-droppable`,
+	reflect: true
+})], FlatListElement.prototype, "itemsDroppable", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "canDrop", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "validateEdit", void 0);
+__decorate([property({
+	type: String,
+	attribute: `marked-key`,
+	reflect: true
+})], FlatListElement.prototype, "markedKey", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], FlatListElement.prototype, "virtualize", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `item-height`
+})], FlatListElement.prototype, "itemHeight", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `with-up`,
+	reflect: true
+})], FlatListElement.prototype, "withUp", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-root`,
+	reflect: true
+})], FlatListElement.prototype, "hideRoot", void 0);
+__decorate([property({
+	type: String,
+	attribute: `empty-text`
+})], FlatListElement.prototype, "emptyText", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `data-focus-visible`
+})], FlatListElement.prototype, "_focusVisible", void 0);
+__decorate([state()], FlatListElement.prototype, "_rows", void 0);
+__decorate([state()], FlatListElement.prototype, "_loading", void 0);
+FlatListElement = __decorate([safeCustomElement(`ixfx-flat-list`)], FlatListElement);
+//#endregion
+export { FlatListElement };
+
+//# sourceMappingURL=flat-list.js.map