@ixfx/components 0.13.0 → 0.13.1

package/bundle/index.js

@@ -23809,7 +23809,7 @@ let EditableLabel = class EditableLabel extends LitElement {
       @keydown=${this._handleKeydown}
       @beforeinput=${this._handleBeforeInput}
       @input=${this._handleInput}
-    >${this._editing ? nothing : this._getDisplayText()}</div>`;
+    ></div>`;
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -23821,7 +23821,7 @@ let EditableLabel = class EditableLabel extends LitElement {
 				_selectAll(el);
 			}
 		}
-		if (changed.has(`displayTextLogic`) || changed.has(`displayText`) || changed.has(`formatter`) || changed.has(`value`)) this._requestDisplayUpdate();
+		if (changed.has(`_editing`) && !this._editing || changed.has(`displayTextLogic`) || changed.has(`displayText`) || changed.has(`formatter`) || changed.has(`value`)) this._requestDisplayUpdate();
 	}
 	static {
 		this.styles = [themeFallbacks, css`
@@ -24695,6 +24695,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.keyProperty = ``;
 		this.virtualize = false;
 		this.itemHeight = 0;
+		this.itemsDroppable = false;
 		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.#wrappedElements = /* @__PURE__ */ new Set();
 		this.#itemData = /* @__PURE__ */ new WeakMap();
@@ -24814,7 +24815,16 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.tickled.handlePointerLeave(e);
 		};
 		this._onKeyDown = (e) => {
-			if (this.search.isOpen) return;
+			if (this.search.isOpen || this.#isEditEvent(e)) return;
+			if (e.key === `ContextMenu` || e.shiftKey && e.key === `F10`) {
+				const id = this.tickled.tickledId;
+				if (id) {
+					e.preventDefault();
+					const rect = id.getBoundingClientRect();
+					this.#requestContextMenu(id, rect.left, rect.bottom);
+				}
+				return;
+			}
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
@@ -24868,6 +24878,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			}
 		};
 		this._onClick = (e) => {
+			if (this.#isEditEvent(e)) return;
 			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
@@ -24875,9 +24886,60 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.selection.handleClick(item, e);
 		};
 		this._onDblClick = (e) => {
+			if (this.#isEditEvent(e)) return;
 			const item = this._findListItem(e.composedPath());
 			if (item) this._activateItem(item);
 		};
+		this._onDragOver = (e) => {
+			const dt = e.dataTransfer;
+			if (!this.itemsDroppable || !dt || this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (this.canDrop && !this.canDrop(item, dt)) {
+				this.#clearDropTarget();
+				return;
+			}
+			if (this.#dragOver && this.#dragOver.item !== item) this.#clearDropTarget();
+			this.#dragOver = { item };
+			if (!!this._dispatchCancelable(`list-drag-over`, {
+				key: item ? keyForElement(item) : void 0,
+				item,
+				dataTransfer: dt
+			})) {
+				this.#highlightDropTarget(void 0, false);
+				return;
+			}
+			e.preventDefault();
+			if (dt.dropEffect === `none`) dt.dropEffect = `copy`;
+			this.#highlightDropTarget(item, true);
+		};
+		this._onDragLeave = (e) => {
+			const next = e.relatedTarget;
+			if (next instanceof Node && this.contains(next)) return;
+			this.#clearDropTarget();
+		};
+		this._onDrop = (e) => {
+			const dt = e.dataTransfer;
+			if (!this.itemsDroppable || !dt || this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (this.canDrop && !this.canDrop(item, dt)) {
+				this.#clearDropTarget();
+				return;
+			}
+			e.preventDefault();
+			this.#dragOver = void 0;
+			this.#highlightDropTarget(void 0, false);
+			this._dispatch(`list-drop`, {
+				key: item ? keyForElement(item) : void 0,
+				item,
+				dataTransfer: dt
+			});
+		};
+		this._onContextMenu = (e) => {
+			if (this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (!item) return;
+			if (!this.#requestContextMenu(item, e.clientX, e.clientY)) e.preventDefault();
+		};
 	}
 	#customWrappers;
 	#wrappedElements;
@@ -25004,6 +25066,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
+		this.addEventListener(`dragover`, this._onDragOver);
+		this.addEventListener(`dragleave`, this._onDragLeave);
+		this.addEventListener(`drop`, this._onDrop);
+		this.addEventListener(`contextmenu`, this._onContextMenu);
 		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#animatedItems.add(el);
 		this.#itemObserver ??= new MutationObserver((records) => this.#onItemsMutated(records));
 		this.#itemObserver.observe(this, { childList: true });
@@ -25018,6 +25084,12 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.removeEventListener(`dragover`, this._onDragOver);
+		this.removeEventListener(`dragleave`, this._onDragLeave);
+		this.removeEventListener(`drop`, this._onDrop);
+		this.removeEventListener(`contextmenu`, this._onContextMenu);
+		this.#clearDropTarget();
+		this.#edit = void 0;
 		this.#itemObserver?.disconnect();
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
@@ -25704,7 +25776,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	}
 	/** Per-attach state the attached sweep can't cover (it only sees the window). */
 	#applyRowState(el) {
-		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
+		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el) && !el.hasAttribute(`data-editing`);
 		el.removeAttribute(`data-marquee`);
 		el.removeAttribute(`data-drag-origin`);
 	}
@@ -25914,6 +25986,114 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
 	}
+	/** The row (or `undefined` for empty space) the last `list-drag-over` was fired for. */
+	#dragOver;
+	/** Tell the consumer the drag left its last target and drop the highlight. */
+	#clearDropTarget() {
+		const last = this.#dragOver;
+		this.#dragOver = void 0;
+		this.#highlightDropTarget(void 0, false);
+		if (last) this._dispatch(`list-drag-leave`, { key: last.item ? keyForElement(last.item) : void 0 });
+	}
+	/** Mark one row (or, for empty space, the host) as the drop target. */
+	#highlightDropTarget(item, active) {
+		for (const el of this.querySelectorAll(`[data-drop-target]`)) el.removeAttribute(`data-drop-target`);
+		this.toggleAttribute(`data-drop-target`, active && item === void 0);
+		if (active && item) item.setAttribute(`data-drop-target`, ``);
+	}
+	/**
+	* Select the row if it is not already, then fire `list-context-menu`.
+	* Returns false when a listener cancelled it (the native menu is then suppressed).
+	*/
+	#requestContextMenu(item, x, y) {
+		if (!this.selection.selected.has(item) && this.interactionMode !== `manual` && this._isCheckable(item)) this.selection.replace(item);
+		return this._dispatchCancelable(`list-context-menu`, {
+			key: keyForElement(item),
+			item,
+			x,
+			y,
+			selectedKeys: this.selection.selectedKeys
+		});
+	}
+	#edit;
+	/** The key of the row being edited, if any. */
+	get editingKey() {
+		return this.#edit?.key;
+	}
+	#isEditEvent(e) {
+		return this.#edit !== void 0 && e.composedPath().includes(this.#edit.label);
+	}
+	/**
+	* Edit a row's label in place with an `ixfx-editable-label`. The editor
+	* replaces the row's `[data-edit-label]` element (else the whole row) and
+	* the original content returns when editing ends. Fires `list-edit-commit`
+	* `{ key, value }` when the text changed, otherwise `list-edit-cancel`
+	* `{ key }` (Escape, an unchanged value, or one the label rejects). The list
+	* never rewrites the label itself — update your data in response.
+	*
+	* Returns false when `editValidator` is not set, or the row is unknown or
+	* not currently rendered.
+	*/
+	beginEdit(key) {
+		this.#finishEdit();
+		const validate = this.editValidator;
+		if (!validate) return false;
+		const row = this.#itemForKey(key);
+		if (!(row instanceof HTMLElement) || row.parentNode !== this) return false;
+		const container = row.querySelector(`[data-edit-label]`) ?? row;
+		const value = container.getAttribute(`data-edit-value`) ?? container.textContent?.trim() ?? ``;
+		const label = document.createElement(`ixfx-editable-label`);
+		label.mode = `label`;
+		label.value = value;
+		label.validator = (text) => validate(text, key);
+		label.style.cssText = `flex:1;min-width:0;--label-align:left;--label-padding:0 var(--space-xs,3px)`;
+		const edit = {
+			key,
+			row,
+			container,
+			saved: [...container.childNodes],
+			label,
+			committed: void 0,
+			refocus: false
+		};
+		this.#edit = edit;
+		label.addEventListener(`change`, (e) => {
+			e.stopPropagation();
+			edit.committed = e.detail.value;
+		});
+		label.addEventListener(`input`, (e) => e.stopPropagation());
+		label.addEventListener(`keydown`, (e) => {
+			edit.refocus = e.key === `Enter` || e.key === `Escape`;
+		});
+		for (const type of [`pointerdown`, `dragstart`]) label.addEventListener(type, (e) => e.stopPropagation());
+		label.addEventListener(`focusout`, () => this.#finishEdit());
+		container.replaceChildren(label);
+		row.setAttribute(`data-editing`, ``);
+		row.draggable = false;
+		row.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+		label.updateComplete.then(() => {
+			if (this.#edit === edit) label.shadowRoot?.querySelector(`.content`)?.click();
+		});
+		return true;
+	}
+	/** Restore the row's content and report how the edit ended. */
+	#finishEdit() {
+		const edit = this.#edit;
+		if (!edit) return;
+		this.#edit = void 0;
+		if (edit.container.isConnected) edit.container.replaceChildren(...edit.saved);
+		edit.row.removeAttribute(`data-editing`);
+		this.#applyRowState(edit.row);
+		if (edit.refocus) this.focus();
+		if (edit.committed === void 0) this._dispatch(`list-edit-cancel`, { key: edit.key });
+		else this._dispatch(`list-edit-commit`, {
+			key: edit.key,
+			value: edit.committed
+		});
+	}
 	static {
 		this.styles = [
 			themeFallbacks,
@@ -26074,6 +26254,18 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       opacity: 0.6;
     }
 
+    /* Native drop target: the row under a drag, or the whole list over empty space. */
+    ::slotted([data-drop-target]) {
+      background: var(--list-drop-target-bg, color-mix(in srgb, var(--accent) 25%, transparent));
+      outline: 2px solid var(--list-drop-target-outline, var(--accent));
+      outline-offset: -2px;
+    }
+
+    :host([data-drop-target]) {
+      outline: 2px solid var(--list-drop-target-outline, var(--accent));
+      outline-offset: -2px;
+    }
+
     /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -26146,12 +26338,23 @@ __decorate([property({
 	type: Number,
 	attribute: `item-height`
 })], VerticalListElement.prototype, "itemHeight", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-droppable`,
+	reflect: true
+})], VerticalListElement.prototype, "itemsDroppable", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "editValidator", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "canDrop", void 0);
 VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 //#region src/flat-list/flat-list.ts
-/** A node with children, or whose children are still to be loaded. */
+/**
+* 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 !== true && node.children?.length !== 0;
+	return node.item.isLeaf === false || node.item.isLeaf !== true && node.children?.length !== 0;
 }
 function sameKeys$1(a, b) {
 	return a.length === b.length && a.every((k, i) => k === b[i]);
@@ -26201,6 +26404,9 @@ let FlatListElement = class FlatListElement extends LitElement {
 		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`;
@@ -26210,6 +26416,64 @@ let FlatListElement = class FlatListElement extends LitElement {
 		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);
@@ -26274,11 +26538,8 @@ let FlatListElement = class FlatListElement extends LitElement {
 				if (sameLevel) this.#settleList();
 			}
 		};
-		this.#renderRow = (row) => {
-			const { node } = row;
-			const textColor = appearanceColor(node.item.textColor);
-			return html`<span class="label" style=${textColor ? `color:${textColor}` : nothing}>${node.item.label}</span>`;
-		};
+		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;
@@ -26318,6 +26579,17 @@ let FlatListElement = class FlatListElement extends LitElement {
 	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);
@@ -26407,6 +26679,7 @@ let FlatListElement = class FlatListElement extends LitElement {
 			}
 		}
 		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) {
@@ -26458,12 +26731,30 @@ let FlatListElement = class FlatListElement extends LitElement {
 		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;
@@ -26478,7 +26769,15 @@ let FlatListElement = class FlatListElement extends LitElement {
 		if (focusKey !== void 0) list.focusKey(focusKey);
 		if (hadFocus) list.focus();
 	}
-	#renderRow;
+	/** 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() {
@@ -26500,7 +26799,7 @@ let FlatListElement = class FlatListElement extends LitElement {
       <div class="body">
         <ixfx-vertical-list
           .items=${this._rows}
-          .formatter=${this.#renderRow}
+          .formatter=${this.validateEdit ? this.#renderEditableRow : this.#renderPlainRow}
           .icon=${this.#renderIcon}
           .iconColor=${(row) => appearanceColor(row.node.item.iconColor)}
           .badge=${this.#renderBadge}
@@ -26510,6 +26809,16 @@ let FlatListElement = class FlatListElement extends LitElement {
           .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}
@@ -26574,6 +26883,11 @@ let FlatListElement = class FlatListElement extends LitElement {
       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;
@@ -26631,6 +26945,26 @@ __decorate([property({
 	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`,