@ixfx/components 0.10.5 → 0.10.7

package/dist/index.js

@@ -38,9 +38,11 @@ import { DetailListElement } from "./detail-list.js";
 import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-BJEU1W0d.js";
 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 { t as FormElement } from "./form-CsXJX15p.js";
-import { t as GridListElement } from "./grid-list-CaMcdpFJ.js";
+import { t as GridListElement } from "./grid-list-k89JpiNy.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { VerticalListElement } from "./vertical-list.js";
@@ -63,7 +65,7 @@ import { SwipeElement } from "./swipe.js";
 import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-BP1Ux2EV.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html, nothing, svg } from "lit";
 import { customElement, eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -7500,6 +7502,62 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			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);
@@ -8915,6 +8973,289 @@ __decorate([property({ type: String })], RatingElement.prototype, "variant", voi
 __decorate([state()], RatingElement.prototype, "_preview", void 0);
 RatingElement = __decorate([customElement(`ixfx-rating`)], RatingElement);
 //#endregion
+//#region src/util/clamp.ts
+function clampValue(v, min, max) {
+	return Math.min(Math.max(v, min), max);
+}
+//#endregion
+//#region src/util/geometry.ts
+function scale(v, fromMin, fromMax, toMin, toMax) {
+	if (fromMax === fromMin) return toMin;
+	return toMin + (v - fromMin) / (fromMax - fromMin) * (toMax - toMin);
+}
+//#endregion
+//#region src/shapefill-value/shapefill-value.ts
+let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.display = `circle`;
+		this.fillMode = `centre`;
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = void 0;
+		this.disabled = false;
+		this.#dragging = false;
+		this.#dragStartY = 0;
+		this.#valueAtDragStart = 0;
+		this.#onPointerDown = (event) => {
+			if (this.disabled) return;
+			event.preventDefault();
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			svgEl?.focus();
+			this.#dragging = true;
+			this.#dragStartY = event.clientY;
+			this.#valueAtDragStart = this.value;
+			this.toggleAttribute(`dragging`, true);
+			if (svgEl) svgEl.setPointerCapture(event.pointerId);
+			window.addEventListener(`pointermove`, this.#onPointerMove);
+			window.addEventListener(`pointerup`, this.#onPointerUp);
+			window.addEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onPointerMove = (event) => {
+			if (!this.#dragging) return;
+			event.preventDefault();
+			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.#onPointerUp = () => {
+			this.#dragging = false;
+			this.toggleAttribute(`dragging`, false);
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			if (svgEl && `hasPointerCapture` in svgEl && typeof svgEl.hasPointerCapture === `function`) {
+				if (svgEl.hasPointerCapture(1)) svgEl.releasePointerCapture(1);
+			}
+			window.removeEventListener(`pointermove`, this.#onPointerMove);
+			window.removeEventListener(`pointerup`, this.#onPointerUp);
+			window.removeEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onKeyDown = (event) => {
+			if (this.disabled) return;
+			const range = this.max - this.min;
+			const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+			let handled = false;
+			switch (event.key) {
+				case `ArrowUp`:
+				case `ArrowRight`:
+					this.#stepByRelativeDelta(effectiveStep / range, true);
+					handled = true;
+					break;
+				case `ArrowDown`:
+				case `ArrowLeft`:
+					this.#stepByRelativeDelta(-effectiveStep / range, true);
+					handled = true;
+					break;
+				case `Home`:
+					this.#setValueFromRelative(0, true);
+					handled = true;
+					break;
+				case `End`:
+					this.#setValueFromRelative(1, true);
+					handled = true;
+			}
+			if (handled) event.preventDefault();
+		};
+	}
+	#dragging;
+	#dragStartY;
+	#valueAtDragStart;
+	#changeDebounceTimer;
+	#getRelativeValue() {
+		return scale(this.value, this.min, this.max, 0, 1);
+	}
+	#quantise(value) {
+		if (this.stops && this.stops > 1) {
+			const step = (this.max - this.min) / this.stops;
+			return Math.round((value - this.min) / step) * step + this.min;
+		}
+		return value;
+	}
+	#setValueFromRelative(relativeValue, isUserInteraction = false) {
+		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const clampedValue = this.#quantise(clampValue(newValue, this.min, this.max));
+		if (clampedValue === this.value) return;
+		const previousValue = this.value;
+		this.value = clampedValue;
+		if (this.hasAttribute(`data-tooltip-live`)) {
+			const percentage = Math.round(this.#getRelativeValue() * 100);
+			this.setAttribute(`data-tooltip`, `${percentage}%`);
+		}
+		if (isUserInteraction) {
+			this.dispatchEvent(new CustomEvent(`input`, {
+				detail: {
+					value: this.value,
+					valueRelative: this.#getRelativeValue()
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.#scheduleChangeEvent(previousValue);
+		} else this.#fireChangeEvent(previousValue);
+	}
+	#scheduleChangeEvent(previousValue) {
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#changeDebounceTimer = window.setTimeout(() => {
+			this.#fireChangeEvent(previousValue);
+			this.#changeDebounceTimer = void 0;
+		}, 150);
+	}
+	#fireChangeEvent(previousValue) {
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				value: this.value,
+				valueRelative: this.#getRelativeValue(),
+				previousValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onPointerDown;
+	#onPointerMove;
+	#onPointerUp;
+	#onKeyDown;
+	/**
+	* Apply a relative-delta nudge to the current value, clamped to [min, max] and
+	* quantised. Shared between keyboard arrow keys and the wheel handler.
+	*/
+	#stepByRelativeDelta(relativeDelta, isUserInteraction) {
+		this.#setValueFromRelative(clampValue(this.#getRelativeValue() + relativeDelta, 0, 1), isUserInteraction);
+	}
+	_applyWheelDelta(direction, event) {
+		const range = this.max - this.min;
+		const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+		this.#stepByRelativeDelta(direction * effectiveStep / range, true);
+	}
+	#renderCircle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerRadius = 45;
+		const innerRadius = outerRadius * relativeValue;
+		const outerCx = 50;
+		const outerCy = 50;
+		let cx = outerCx;
+		if (this.fillMode === `left`) cx = 5 + outerRadius * relativeValue;
+		else if (this.fillMode === `right`) cx = 95 - outerRadius * relativeValue;
+		return svg`
+      <circle class="fill" cx="${cx}" cy="${outerCy}" r="${innerRadius}" />
+      <circle class="outline" cx="${outerCx}" cy="${outerCy}" r="${outerRadius}" fill="none" />
+    `;
+	}
+	#renderRectangle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerSize = 90;
+		const outerOffset = 5;
+		if (this.fillMode === `left` || this.fillMode === `right`) {
+			const innerWidth = outerSize * relativeValue;
+			const x = this.fillMode === `left` ? outerOffset : 95 - innerWidth;
+			return svg`
+        <rect class="fill" x="${x}" y="${outerOffset}" width="${innerWidth}" height="${outerSize}" />
+        <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+      `;
+		}
+		const innerSize = outerSize * relativeValue;
+		const innerOffset = (100 - innerSize) / 2;
+		return svg`
+      <rect class="fill" x="${innerOffset}" y="${innerOffset}" width="${innerSize}" height="${innerSize}" />
+      <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+    `;
+	}
+	render() {
+		const preserveAspectRatio = this.display === `rectangle` ? `none` : `xMidYMid meet`;
+		return html`
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="${preserveAspectRatio}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @pointerdown="${this.#onPointerDown}"
+        @keydown="${this.#onKeyDown}"
+        style="cursor: ${this.#dragging ? `ns-resize` : `grab`}"
+      >
+        ${this.display === `rectangle` ? this.#renderRectangle() : this.#renderCircle()}
+      </svg>
+    `;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.style.setProperty(`--shapefill-value-relative`, this.#getRelativeValue().toString());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#onPointerUp();
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			css`
+    :host {
+      display: inline-block;
+      width: 2em;
+      height: 2em;
+      touch-action: none;
+      user-select: none;
+
+      /* Dynamic value - set by JS */
+      --shapefill-value-relative: 0;
+
+      /* Public styling variables — consumer customisable */
+      --shapefill-value-outline-color: var(--surface-4);
+      --shapefill-value-outline-width: 2;
+      --shapefill-value-fill-color: var(--accent);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      outline: none;
+      display: block;
+    }
+
+    svg:active {
+      cursor: grabbing;
+    }
+
+    svg:focus-visible {
+      outline: var(--shapefill-value-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--shapefill-value-focus-outline-offset, 2px);
+    }
+
+    .outline {
+      stroke: var(--shapefill-value-outline-color, var(--surface-4));
+      stroke-width: var(--shapefill-value-outline-width, 2);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .fill {
+      fill: var(--shapefill-value-fill-color, var(--accent));
+      transition: var(--shapefill-value-fill-transition, none);
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: String })], ShapefillValueElement.prototype, "display", void 0);
+__decorate([property({
+	type: String,
+	attribute: `fill-mode`
+})], ShapefillValueElement.prototype, "fillMode", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "value", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "step", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "stops", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ShapefillValueElement.prototype, "disabled", void 0);
+ShapefillValueElement = __decorate([safeCustomElement(`ixfx-shapefill-value`)], ShapefillValueElement);
+//#endregion
 //#region src/sliding-number/sliding-number.ts
 const REEL_DIGITS = Array.from({ length: 30 }, (_, index) => index % 10);
 const SECTION_RANK = {
@@ -12578,6 +12919,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map