@ixfx/components 0.11.2 → 0.11.4

package/dist/index.js

@@ -20,7 +20,7 @@ import { n as captionForEntry, r as createDefaultListDragPreview, t as ListNativ
 import { n as isMultiMode, r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { a as prefersReducedMotion, i as listItemFadeKeyframes, n as animateListItemIn, o as startListItemOutAnimation, r as animateListItemOut, t as LIST_ITEM_MOTION_MS } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
-import "./menu-item-Woc8jJc1.js";
+import "./menu-item-JcpHCyF0.js";
 import { Checkbox } from "./checkbox.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-WDrPuqoO.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
@@ -31,7 +31,7 @@ import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import { a as menuFromTreeToElements, t as menu_exports } from "./menu-B2Qv3Oiz.js";
+import { a as menuFromTreeToElements, t as menu_exports } from "./menu-BHT6HRND.js";
 import { t as PanTextElement } from "./pan-text-CqtvjPyK.js";
 import { DataGridElement } from "./data-grid.js";
 import { DetailListElement } from "./detail-list.js";
@@ -40,7 +40,7 @@ import { TabListElement } from "./tabs.js";
 import { EditableLabel } from "./editable-label.js";
 import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
 import { t as WheelNudgeMixin } from "./wheel-nudge-D5rmht3v.js";
-import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-CF2RtzgG.js";
+import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-FdCRi6st.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
 import { t as GridListElement } from "./grid-list-k89JpiNy.js";
 import { PanelElement } from "./panel.js";
@@ -1506,7 +1506,10 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._editingCancelled = false;
 		this._editStartIndex = null;
 		this._openCumPath = null;
+		this._dragCumPath = null;
+		this._dropCumPath = null;
 		this.#uid = Math.random().toString(36).slice(2, 8);
+		this.#clickSuppressUntil = 0;
 		this.#onPopoverToggle = (e) => {
 			if (e.newState === `closed` && this._openIdx !== null) {
 				this._openIdx = null;
@@ -1560,6 +1563,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#pendingController;
 	#pendingIndex;
 	#uid;
+	/** Clicks within this window after a drag are ignored (post-drag click-through guard). */
+	#clickSuppressUntil;
 	#anchorName(cumPath) {
 		return `--cp-${this.#uid}-${cumPath.replaceAll(this.separator, `-`).replaceAll(` `, `-`).replace(INVALID_ANCHOR_CHARS_RE, `-`)}`;
 	}
@@ -1621,6 +1626,23 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		if (isRoot) return rootSegments.slice(0, index + 1).join(this.separator);
 		return [...rootSegments, ...segments.slice(0, index + 1)].join(this.separator);
 	}
+	#resolveFullPathSegments(index, isRoot) {
+		const rootSegments = this.#getRootSegments();
+		if (isRoot) return rootSegments.slice(0, index + 1);
+		return [...rootSegments, ...this.#getSegments().slice(0, index + 1)];
+	}
+	#segmentDragPayloads(fullPathSegments) {
+		try {
+			const result = this.segmentDragLookup?.(fullPathSegments, fullPathSegments.length - 1);
+			if (result === void 0 || result === null) return [];
+			return Array.isArray(result) ? [...result] : [result];
+		} catch {
+			return [];
+		}
+	}
+	#clicksSuppressed() {
+		return Date.now() < this.#clickSuppressUntil || this._dragCumPath !== null;
+	}
 	#resolveSegmentIcon(fullPathSegments, index) {
 		const direct = this.segmentIconLookup?.(fullPathSegments, index);
 		if (typeof direct === `string` && direct.length > 0) return direct;
@@ -1687,7 +1709,87 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		}
 		this.requestUpdate();
 	}
+	#onLabelDragStart(fullPathSegments, cumPath, event) {
+		this.#closeDropdown();
+		const index = fullPathSegments.length - 1;
+		const dt = event.dataTransfer;
+		const detail = {
+			index,
+			label: fullPathSegments[index] ?? ``,
+			pathSegments: fullPathSegments,
+			parentPath: fullPathSegments.slice(0, -1).join(this.separator),
+			fullPath: fullPathSegments.join(this.separator),
+			dataTransfer: dt
+		};
+		const evt = new CustomEvent(`crumb-drag-start`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		if (!this.dispatchEvent(evt)) {
+			event.preventDefault();
+			return;
+		}
+		this._dragCumPath = cumPath;
+		this.toggleAttribute(`data-native-dragging`, true);
+		if (!dt) return;
+		try {
+			if (dt.effectAllowed === `none` || dt.effectAllowed === `uninitialized`) dt.effectAllowed = `copyMove`;
+		} catch {}
+		try {
+			for (const payload of this.#segmentDragPayloads(fullPathSegments)) dt.setData(payload.type, payload.data);
+			if (!dt.types.includes(`text/plain`)) dt.setData(`text/plain`, detail.fullPath);
+		} catch {}
+	}
+	#onLabelDragEnd() {
+		this._dragCumPath = null;
+		this._dropCumPath = null;
+		this.toggleAttribute(`data-native-dragging`, false);
+		this.#clickSuppressUntil = Date.now() + 150;
+	}
+	#onSegDragOver(cumPath, event) {
+		if (!this.parseExternalDrop) return;
+		if (!event.dataTransfer) return;
+		event.preventDefault();
+		if (this._dropCumPath !== cumPath) this._dropCumPath = cumPath;
+	}
+	#onSegDragLeave(cumPath, _event) {
+		if (!this.parseExternalDrop) return;
+		if (this._dropCumPath === cumPath) this._dropCumPath = null;
+	}
+	#onSegDrop(fullPathSegments, event) {
+		if (!this.parseExternalDrop) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this._dropCumPath = null;
+		const dt = event.dataTransfer;
+		if (!dt) return;
+		let data;
+		try {
+			data = this.parseExternalDrop(dt);
+		} catch (err) {
+			console.error(`parseExternalDrop failed:`, err);
+			return;
+		}
+		if (data === void 0) return;
+		const index = fullPathSegments.length - 1;
+		this.dispatchEvent(new CustomEvent(`crumb-drop`, {
+			detail: {
+				index,
+				label: fullPathSegments[index] ?? ``,
+				pathSegments: fullPathSegments,
+				parentPath: fullPathSegments.slice(0, -1).join(this.separator),
+				fullPath: fullPathSegments.join(this.separator),
+				data,
+				dataTransfer: dt
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	#onLabelClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.#closeDropdown();
@@ -1769,16 +1871,31 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#renderSegment(label, index, isLast) {
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, false);
-		const fullPathSegments = [...this.#getRootSegments(), ...this.#getSegments().slice(0, index + 1)];
+		const fullPathSegments = this.#resolveFullPathSegments(index, false);
 		const icon = this.#resolveSegmentIcon(fullPathSegments, fullPathSegments.length - 1);
+		const draggable = this.#segmentDragPayloads(fullPathSegments).length > 0;
+		const dragging = this._dragCumPath === cumPath;
+		const dropInto = this._dropCumPath === cumPath;
 		return html`
-      <div class="seg" data-cumulative=${cumPath} @click=${(e) => this.#onSegmentClick(index, e)}>
-        <label title=${label} @click=${(e) => this.#onLabelClick(index, e)}>
+      <div class="seg ${dragging ? `dragging` : ``} ${dropInto ? `drop-into` : ``}"
+           part=${dropInto ? `segment drop-target` : `segment`}
+           data-cumulative=${cumPath}
+           @click=${(e) => this.#onSegmentClick(index, e)}
+           @dragover=${(e) => this.#onSegDragOver(cumPath, e)}
+           @dragleave=${(e) => this.#onSegDragLeave(cumPath, e)}
+           @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
+        <label title=${label}
+               part="label"
+               ?draggable=${draggable}
+               @click=${(e) => this.#onLabelClick(index, e)}
+               @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
+               @dragend=${() => this.#onLabelDragEnd()}>
           ${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}
           ${label}
         </label>
         ${(!isLast || this.siblingLookup) && this._leafSegmentIndex !== index ? html`
           <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               part="caret"
                style="anchor-name: ${this.#anchorName(cumPath)}"
                data-cumulative=${cumPath}
                @click=${(e) => this.#onCaretClick(index, e)}>
@@ -1789,17 +1906,31 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	#renderRootSegment(label, index) {
-		const rootSegments = this.#getRootSegments();
-		const isLast = index === rootSegments.length - 1;
+		const isLast = index === this.#getRootSegments().length - 1;
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, true);
-		const fullPathSegments = rootSegments.slice(0, index + 1);
+		const fullPathSegments = this.#resolveFullPathSegments(index, true);
 		const icon = this.#resolveSegmentIcon(fullPathSegments, index);
+		const draggable = this.#segmentDragPayloads(fullPathSegments).length > 0;
+		const dragging = this._dragCumPath === cumPath;
+		const dropInto = this._dropCumPath === cumPath;
 		return html`
-      <div class="seg seg-root" data-cumulative=${cumPath} @click=${(e) => this.#onRootSegmentClick(index, e)}>
-        <label title=${label}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
+      <div class="seg seg-root ${dragging ? `dragging` : ``} ${dropInto ? `drop-into` : ``}"
+           part=${dropInto ? `segment drop-target` : `segment`}
+           data-cumulative=${cumPath}
+           @click=${(e) => this.#onRootSegmentClick(index, e)}
+           @dragover=${(e) => this.#onSegDragOver(cumPath, e)}
+           @dragleave=${(e) => this.#onSegDragLeave(cumPath, e)}
+           @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
+        <label title=${label}
+               part="label"
+               ?draggable=${draggable}
+               @click=${(e) => this.#onLabelClick(index, e)}
+               @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
+               @dragend=${() => this.#onLabelDragEnd()}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
         ${isLast && this.siblingLookup ? html`
           <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               part="caret"
                style="anchor-name: ${this.#anchorName(cumPath)}"
                data-cumulative=${cumPath}
                @click=${(e) => this.#onCaretClick(index, e)}>
@@ -1810,12 +1941,14 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	#onRootSegmentClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		const newPath = this.#getRootSegments().slice(0, index + 1).join(this.separator);
 		this.setPath(newPath);
 	}
 	#onSegmentClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.#closeDropdown();
@@ -1823,6 +1956,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._editStartIndex = index;
 	}
 	#onTrailingClick() {
+		if (this.#clicksSuppressed()) return;
 		this.#closeDropdown();
 		this._editing = true;
 		this._editStartIndex = null;
@@ -2044,6 +2178,21 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
       cursor: not-allowed;
     }
 
+    /* Drag and drop styles */
+    label[draggable] {
+      cursor: grab;
+    }
+
+    .seg.dragging {
+      opacity: 0.4;
+    }
+
+    .seg.drop-into {
+      outline: var(--crumb-drop-into-outline, 2px solid var(--accent));
+      outline-offset: -2px;
+      background: var(--crumb-drop-into-bg, color-mix(in srgb, var(--accent) 14%, transparent));
+    }
+
     .crumb-icon {
       width: 1em;
       height: 1em;
@@ -2126,6 +2275,8 @@ __decorate([property({
 })], CrumbPathElement.prototype, "pathRoot", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "siblingLookup", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentIconLookup", void 0);
+__decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentDragLookup", void 0);
+__decorate([property({ type: Object })], CrumbPathElement.prototype, "parseExternalDrop", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openIdx", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editing", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_cachedSiblings", void 0);
@@ -2135,6 +2286,8 @@ __decorate([state()], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0
 __decorate([state()], CrumbPathElement.prototype, "_editingCancelled", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openCumPath", void 0);
+__decorate([state()], CrumbPathElement.prototype, "_dragCumPath", void 0);
+__decorate([state()], CrumbPathElement.prototype, "_dropCumPath", void 0);
 CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/data-table/data-table.ts
@@ -8169,6 +8322,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         --multicol-list-border: var(--border);
         --multicol-list-min-column-width: ${MIN_COLUMN_WIDTH}px;
         --multicol-list-max-column-width: ${MAX_COLUMN_WIDTH}px;
+        --multicol-list-header-font-size: unset;
 
         display: block;
         overflow: hidden;
@@ -8234,7 +8388,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         text-overflow: ellipsis;
         white-space: nowrap;
         padding: 0 var(--space-s);
-        font-size: var(--text-m);
+        font-size: var(--multicol-list-header-font-size);
         font-weight: 600;
         background: transparent;
         border: none;
@@ -10267,6 +10421,7 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 		this.#dragging = false;
 		this.#dragStartY = 0;
 		this.#valueAtDragStart = 0;
+		this.#lastPointerY = 0;
 		this.#onPointerDown = (event) => {
 			if (this.disabled) return;
 			event.preventDefault();
@@ -10274,7 +10429,9 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 			svgEl?.focus();
 			this.#dragging = true;
 			this.#dragStartY = event.clientY;
+			this.#lastPointerY = event.clientY;
 			this.#valueAtDragStart = this.value;
+			this.#lastSetValue = this.value;
 			this.toggleAttribute(`dragging`, true);
 			if (svgEl) svgEl.setPointerCapture(event.pointerId);
 			window.addEventListener(`pointermove`, this.#onPointerMove);
@@ -10284,10 +10441,16 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 		this.#onPointerMove = (event) => {
 			if (!this.#dragging) return;
 			event.preventDefault();
+			if (this.value !== this.#lastSetValue) {
+				this.#valueAtDragStart = this.value;
+				this.#dragStartY = this.#lastPointerY;
+				this.#lastSetValue = this.value;
+			}
 			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
 			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
 			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
 			this.#setValueFromRelative(clampValue(relativeValue, 0, 1), true);
+			this.#lastPointerY = event.clientY;
 		};
 		this.#onPointerUp = () => {
 			this.#dragging = false;
@@ -10330,6 +10493,10 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 	#dragging;
 	#dragStartY;
 	#valueAtDragStart;
+	/** Client Y of the last processed pointer event, for external-write re-baselining. */
+	#lastPointerY;
+	/** Value at the drag's last write — detects external `value` writes mid-drag. */
+	#lastSetValue;
 	#changeDebounceTimer;
 	#getRelativeValue() {
 		return scale(this.value, this.min, this.max, 0, 1);
@@ -10347,6 +10514,7 @@ let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(
 		if (clampedValue === this.value) return;
 		const previousValue = this.value;
 		this.value = clampedValue;
+		this.#lastSetValue = clampedValue;
 		if (this.hasAttribute(`data-tooltip-live`)) {
 			const percentage = Math.round(this.#getRelativeValue() * 100);
 			this.setAttribute(`data-tooltip`, `${percentage}%`);