@ixfx/components 0.10.6 → 0.10.7

package/bundle/index.js

@@ -14907,7 +14907,7 @@ let DataGridElement = class DataGridElement extends i {
 				}
 				case ` `: {
 					if (this._editing) {
-						if (this.columns.find((c) => c.key === this._editing.colKey)?.editor === `boolean`) {
+						if ((this.columns.find((c) => c.key === this._editing.colKey)?.dataType ?? `text`) === `boolean`) {
 							e.preventDefault();
 							const isImmediate = this.editability === `immediate`;
 							const rowKey = this._editing.rowKey;
@@ -15424,11 +15424,13 @@ let DataGridElement = class DataGridElement extends i {
 		if (!col) return rows;
 		const dir = this.sortState.direction === `asc` ? 1 : -1;
 		if (col.sortFn) return rows.sort((a, b) => dir * col.sortFn(a, b));
+		const dataType = col.dataType ?? `text`;
 		return rows.sort((a, b) => {
 			const av = a[col.key];
 			const bv = b[col.key];
 			if (av === bv) return 0;
-			if (typeof av === `number` && typeof bv === `number`) return dir * (av - bv);
+			if (dataType === `number`) return dir * (av - bv);
+			if (dataType === `boolean`) return dir * (Boolean(av) === Boolean(bv) ? 0 : av ? 1 : -1);
 			return dir * String(av).localeCompare(String(bv));
 		});
 	}
@@ -15805,7 +15807,7 @@ let DataGridElement = class DataGridElement extends i {
 	}
 	_isTextEditor(col) {
 		const e = col.editor;
-		return !e || e === `text` || e === `number`;
+		return !e || e === `auto`;
 	}
 	_isCellEditing(rowKey, colKey) {
 		if (this.editability === `immediate` && this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey))) return true;
@@ -16247,7 +16249,8 @@ let DataGridElement = class DataGridElement extends i {
 				if (this._isCellEditing(rowKey, col.key)) {
 					const immediate = this.editability === `immediate` || this._editingRow === rowKey;
 					const curVal = immediate ? val : this._editValue ?? val;
-					if (col.editor === `boolean` || col.editor === `boolean`) return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
+					const effectiveDataType = col.dataType ?? `text`;
+					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
 						const v = e.target.checked;
 						if (immediate) this._commitImmediate(rowKey, col.key, v);
 						else {
@@ -16305,7 +16308,9 @@ let DataGridElement = class DataGridElement extends i {
 						};
 						return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
 					}
-					return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input .value=${String(curVal ?? ``)} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
+					const inputType = effectiveDataType === `number` ? `number` : `text`;
+					const inputValue = effectiveDataType === `number` ? String(curVal ?? ``) : String(curVal ?? ``);
+					return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
 						if (e.key === `Enter`) this._commitEdit();
 						if (e.key === `Escape`) {
 							this._editing = null;
@@ -16709,6 +16714,23 @@ DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableE
 const ITEM_SELECTOR$3 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+function pointInRect(x, y, rect) {
+	return rect.width > 0 && rect.height > 0 && x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+}
+/** Hit-test the painted content, not a layout wrapper that may fill the row. */
+function contentAtPoint(node, x, y) {
+	if (node instanceof Text) {
+		if (!node.textContent?.trim()) return false;
+		const range = document.createRange();
+		range.selectNodeContents(node);
+		return Array.from(range.getClientRects()).some((rect) => pointInRect(x, y, rect));
+	}
+	if (!(node instanceof Element)) return false;
+	if (node.hasAttribute(`data-drag-select-blank`)) return false;
+	if (node.hasAttribute(`data-drag-select-content`)) return pointInRect(x, y, node.getBoundingClientRect());
+	if (Array.from(node.childNodes).some((child) => contentAtPoint(child, x, y))) return true;
+	return node.childNodes.length === 0 && pointInRect(x, y, node.getBoundingClientRect());
+}
 /** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
 function sameKeys$2(a, b) {
 	if (a === void 0 || a.length !== b.length) return false;
@@ -16769,6 +16791,10 @@ let DetailListElement = class DetailListElement extends i {
 		});
 		this.#nativeDragging = false;
 		this.#postDragSuppressTimer = 0;
+		this.#blankItemPressPending = false;
+		this.#clearBlankItemPress = () => {
+			this.#blankItemPressPending = false;
+		};
 		this.#nativeDrag = new ListNativeDragController(this, {
 			source: `detail-list`,
 			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
@@ -16800,7 +16826,8 @@ let DetailListElement = class DetailListElement extends i {
 				for (const el of this.querySelectorAll(`li`)) el.removeAttribute(`data-drag-origin`);
 				this.#startPostDragSuppressTimer();
 			},
-			syncLightDomDraggable: () => this._syncNativeDraggable()
+			syncLightDomDraggable: () => this._syncNativeDraggable(),
+			shouldStart: () => !this.#blankItemPressPending
 		});
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.renderRoot.querySelector(`.container`),
@@ -16820,6 +16847,10 @@ let DetailListElement = class DetailListElement extends i {
 			},
 			autoScroll: (dx, _dy) => {
 				if (this._listEl) this._listEl.scrollLeft += dx;
+			},
+			shouldStart: (event) => {
+				this.#blankItemPressPending = this.itemsDraggable && this.#isBlankItemPress(event);
+				return !this.itemsDraggable || this.#blankItemPressPending;
 			}
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
@@ -16938,6 +16969,8 @@ let DetailListElement = class DetailListElement extends i {
 	#data;
 	#nativeDragging;
 	#postDragSuppressTimer;
+	#blankItemPressPending;
+	#clearBlankItemPress;
 	#nativeDrag;
 	#prepareNativeDrag(originKey) {
 		const visible = this._getVisibleItems();
@@ -16975,6 +17008,21 @@ let DetailListElement = class DetailListElement extends i {
 	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
 	#marqueeRect;
 	#dragSelect;
+	/** A row's padding/empty area may start marquee; its actual content may drag out. */
+	#isBlankItemPress(event) {
+		const path = event.composedPath();
+		const item = this._findListItem(path);
+		if (!item) return false;
+		for (const node of path) {
+			if (node === item) break;
+			if (node instanceof Element) {
+				if (node.matches(`input, button, a, select, textarea, [contenteditable], .ixfx-list-checkbox, [role="checkbox"]`)) return false;
+				if (node.hasAttribute(`data-drag-select-blank`)) return true;
+				if (node.hasAttribute(`data-drag-select-content`)) return false;
+			}
+		}
+		return !Array.from(item.childNodes).some((node) => contentAtPoint(node, event.clientX, event.clientY));
+	}
 	/** Collect visible items whose surface-relative box intersects `rect`. */
 	#marqueeHitTest(rect) {
 		const surface = this.renderRoot.querySelector(`.container`);
@@ -17023,6 +17071,8 @@ let DetailListElement = class DetailListElement extends i {
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
 		this.addEventListener(`wheel`, this._onWheel);
+		window.addEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.addEventListener(`pointercancel`, this.#clearBlankItemPress);
 		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
 		this.#resizeObserver.observe(this);
 		this.#mutationObserver = new MutationObserver((records) => {
@@ -17067,6 +17117,9 @@ let DetailListElement = class DetailListElement extends i {
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
 		this.removeEventListener(`wheel`, this._onWheel);
+		window.removeEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.removeEventListener(`pointercancel`, this.#clearBlankItemPress);
+		this.#blankItemPressPending = false;
 		cancelAnimationFrame(this.#sortRaf);
 		cancelAnimationFrame(this.#viewportScrollRaf);
 		this.#viewportScrollRaf = 0;
@@ -25263,6 +25316,7 @@ let GridListElement = class GridListElement extends i {
         data-input-mode=${this.tickled.inputMode}
         @scroll=${this.#onScroll}
         @wheel=${this.#onWheel}
+        @click=${this.#onViewportClick}
       >
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
@@ -25495,6 +25549,22 @@ let GridListElement = class GridListElement extends i {
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
+	/**
+	* A click that lands on the viewport without touching a cell — the empty
+	* space between/around items — clears the selection (Finder-style). The
+	* guard mirrors `#onCellClick`: a trailing click after a marquee or native
+	* drag is swallowed so it cannot undo the selection that drag just made.
+	* In `manual` interaction mode the consumer owns selection, so nothing is
+	* cleared. Cell clicks route through `#onCellClick` and are skipped here.
+	*/
+	#onViewportClick(e) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
+		for (const node of e.composedPath()) if (node instanceof Element && node.classList.contains(`cell`)) return;
+		this.selection.clear();
+	}
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
 		this.#postDragSuppressTimer = window.setTimeout(() => {
@@ -38169,6 +38239,62 @@ let MulticolListElement = class MulticolListElement extends i {
 			composed: true
 		}));
 	}
+	async autoSizeColumns(options) {
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				const minWidth = options?.minWidth ?? MIN_COLUMN_WIDTH;
+				const maxWidth = options?.maxWidth ?? MAX_COLUMN_WIDTH;
+				const measure = (text) => {
+					const span = document.createElement(`span`);
+					span.style.position = `absolute`;
+					span.style.visibility = `hidden`;
+					span.style.whiteSpace = `nowrap`;
+					span.style.font = getComputedStyle(this).font;
+					span.textContent = text;
+					document.body.appendChild(span);
+					const w = span.getBoundingClientRect().width;
+					document.body.removeChild(span);
+					return w;
+				};
+				for (const col of this._columns) {
+					const colEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"]`);
+					if (!colEl) continue;
+					const headerEl = colEl.querySelector(`.column-header`);
+					const listerHost = colEl.querySelector(`.lister-host`);
+					let contentWidth = 0;
+					if (listerHost) {
+						const allLabel = listerHost.querySelector(`.all-label`);
+						if (allLabel) contentWidth = Math.max(contentWidth, measure(allLabel.textContent ?? ``));
+						const groupedLister = listerHost.querySelector(`ixfx-grouped-item-lister`);
+						if (groupedLister) {
+							const verticalLists = groupedLister.querySelectorAll(`ixfx-vertical-list`);
+							for (const vl of verticalLists) {
+								const itemEls = vl.querySelectorAll(`li`);
+								for (const li of itemEls) {
+									const labelEl = li.querySelector(`.item-label`);
+									const countEl = li.querySelector(`.count`);
+									const combinedText = (labelEl?.textContent ?? ``) + (countEl?.textContent ?? ``);
+									contentWidth = Math.max(contentWidth, measure(combinedText));
+								}
+							}
+						}
+					}
+					let headerWidth = 0;
+					if (headerEl) {
+						const labelBtn = headerEl.querySelector(`.column-label`);
+						if (labelBtn) headerWidth = measure(labelBtn.textContent ?? ``);
+					}
+					const neededWidth = Math.max(headerWidth, contentWidth + 24 + 16);
+					const clampedWidth = Math.max(minWidth, Math.min(maxWidth, Math.ceil(neededWidth)));
+					col.setWidth(clampedWidth);
+				}
+				this._updateColOffsets();
+				this._emitColumnsChange(`resize`);
+				this.requestUpdate();
+				resolve();
+			}, 0);
+		});
+	}
 };
 __decorate([property({ attribute: false })], MulticolListElement.prototype, "categories", void 0);
 __decorate([property({ attribute: false })], MulticolListElement.prototype, "dataProvider", void 0);