@ixfx/components 0.7.1 → 0.7.3

package/dist/index.js

@@ -1,5 +1,6 @@
 import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
 import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
@@ -14,7 +15,8 @@ import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CAR
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-DsFbV4XD.js";
-import { n as ListSelectionController, t as VerticalListElement } from "./vertical-list-ClnqTkF3.js";
+import { n as ListSelectionController, r as isMultiMode, t as VerticalListElement } from "./vertical-list-B4w_ksJk.js";
+import "./interaction-D5XdKzbR.js";
 import "./menu-item-D2S4i8u1.js";
 import { Checkbox } from "./checkbox.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-Ddsk-7E_.js";
@@ -26,20 +28,20 @@ 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 { t as menu_exports } from "./menu-CXDFJxNm.js";
+import { t as menu_exports } from "./menu-DMzjkVnK.js";
 import { DataGridElement } from "./data-grid.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-BFSbUZQv.js";
 import { TabListElement } from "./tabs.js";
 import { TitlebarElement } from "./titlebar.js";
 import { EditableLabel } from "./editable-label.js";
-import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-DzigjMwP.js";
+import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-BInB5GKL.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-BiRfwTz1.js";
-import { t as RadialInputElement } from "./radial-input-Dp5qz0ly.js";
+import { t as RadialInputElement } from "./radial-input-BfA3GO0H.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
-import { t as SliderInputElement } from "./slider-input-De4eoT11.js";
+import { t as SliderInputElement } from "./slider-input-Bl1hFE89.js";
 import { LedElement } from "./led.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
 import { NotificationPillElement } from "./notifier.js";
@@ -401,6 +403,99 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/tree-keyboard-controller.ts
+var TreeKeyboardNavController = class {
+	constructor(host, tickled, config) {
+		this.handleKeyDown = (event) => {
+			if (this.disableKeyboardNavigation()) return;
+			const { key } = event;
+			if ([
+				`ArrowDown`,
+				`ArrowUp`,
+				`ArrowLeft`,
+				`ArrowRight`,
+				`Enter`,
+				`Escape`
+			].includes(key)) this.tickled.setInputMode(`keyboard`);
+			switch (key) {
+				case `ArrowDown`:
+					event.preventDefault();
+					this.#handleArrowDown();
+					break;
+				case `ArrowUp`:
+					event.preventDefault();
+					this.#handleArrowUp();
+					break;
+				case `ArrowRight`:
+					event.preventDefault();
+					this.#handleArrowRight();
+					break;
+				case `ArrowLeft`:
+					event.preventDefault();
+					this.#handleArrowLeft();
+					break;
+				case `Enter`:
+					event.preventDefault();
+					this.#handleEnter();
+					break;
+				case `Escape`:
+					event.preventDefault();
+					this.callbacks.onEscape?.();
+			}
+		};
+		this.host = host;
+		this.tickled = tickled;
+		this.callbacks = config.callbacks;
+		this.disableKeyboardNavigation = config.disableKeyboardNavigation ?? (() => false);
+		host.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {}
+	#handleArrowDown() {
+		this.tickled.handleKeyboardNavigation(`next`);
+	}
+	#handleArrowUp() {
+		this.tickled.handleKeyboardNavigation(`previous`);
+	}
+	#handleArrowRight() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) return;
+		if (!this.callbacks.isExpanded(currentId)) {
+			this.callbacks.onExpand(currentId);
+			this.tickled.setTickled(currentId);
+		} else {
+			const items = this.callbacks.getItems();
+			const currentIdx = items.findIndex((item) => item.id === currentId);
+			if (currentIdx !== -1 && currentIdx + 1 < items.length) {
+				const nextItem = items[currentIdx + 1];
+				if (nextItem.enabled !== false) this.tickled.setTickled(nextItem.id);
+			}
+		}
+	}
+	#handleArrowLeft() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) {
+				this.tickled.setTickled(parentId);
+				if (this.callbacks.isExpanded(parentId)) this.callbacks.onCollapse(parentId);
+			}
+		} else if (this.callbacks.isExpanded(currentId)) this.callbacks.onCollapse(currentId);
+		else {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) this.tickled.setTickled(parentId);
+		}
+	}
+	#handleEnter() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		this.callbacks.onActivate(currentId);
+		this.callbacks.onSelect?.(currentId);
+	}
+};
+//#endregion
 //#region src/button/split-button.ts
 let SplitButton = class SplitButton extends ButtonElement {
 	constructor(..._args) {
@@ -2127,6 +2222,28 @@ let DetailListElement = class DetailListElement extends LitElement {
 			return true;
 		});
 	}
+	/**
+	* Set the column width to fit the widest visible item.
+	*
+	* This is opt-in; detail lists continue to use `--detail-list-column-width`
+	* (or its 220px fallback) until this method is called. The measured value is
+	* set directly on this element, so it takes precedence over an inherited
+	* value. Returns the applied width in pixels, or 0 when there are no items.
+	*/
+	async fitColumnWidth() {
+		await this.updateComplete;
+		const items = this._getVisibleItems();
+		if (items.length === 0) return 0;
+		const previousWidth = this.style.getPropertyValue(`--detail-list-column-width`);
+		const previousPriority = this.style.getPropertyPriority(`--detail-list-column-width`);
+		this.style.setProperty(`--detail-list-column-width`, `max-content`);
+		const width = Math.ceil(Math.max(...items.map((item) => item.getBoundingClientRect().width)));
+		if (previousWidth) this.style.setProperty(`--detail-list-column-width`, previousWidth, previousPriority);
+		else this.style.removeProperty(`--detail-list-column-width`);
+		this.style.setProperty(`--detail-list-column-width`, `${width}px`);
+		this.#scheduleGeometry();
+		return width;
+	}
 	_isCheckable(item) {
 		if (this.interactionMode !== `checked`) return true;
 		return !item.hasAttribute(`not-checked`);
@@ -2288,8 +2405,8 @@ let DetailListElement = class DetailListElement extends LitElement {
       overflow: hidden;
       box-sizing: border-box;
       outline: none;
-      --ixfx-detail-list-item-padding:
-        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-m, 8px)));
+      --_detail-list-item-padding:
+        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-xs, 3px)));
     }
 
     :host(:focus-visible) {
@@ -2336,7 +2453,7 @@ let DetailListElement = class DetailListElement extends LitElement {
       flex: none;
       width: var(--detail-list-column-width, 220px);
       height: var(--detail-list-item-height, 28px);
-      padding: var(--ixfx-detail-list-item-padding);
+      padding: var(--_detail-list-item-padding);
       cursor: pointer;
       user-select: none;
       transition: background var(--transition, 0.1s ease-out),
@@ -2602,7 +2719,9 @@ function onKeyDown(event) {
 	endDrag();
 }
 function findDropZone(drag, clientX, clientY) {
+	const sourceIsolated = drag.sourceHost.isolated;
 	for (const host of dragHosts) {
+		if (sourceIsolated && host !== drag.sourceHost) continue;
 		const zone = host.computeDropZone(clientX, clientY, drag.panelId, drag.kind);
 		if (zone !== null) return zone;
 	}
@@ -2938,11 +3057,27 @@ function insertBeside(root, targetPath, direction, newNode, side) {
 * the caller's reference stays valid. Returns true on success.
 */
 function wrapRoot(root, direction, newNode, side) {
-	replaceNodeContents(root, createSplit(direction, side === `before` ? [newNode, root] : [root, newNode]));
+	const inner = cloneNodeShallow(root);
+	replaceNodeContents(root, createSplit(direction, side === `before` ? [newNode, inner] : [inner, newNode]));
 	normalize(root);
 	return true;
 }
 /**
+* Detached copy of `node` (own arrays copied) so it can become a child of a
+* wrapper that then replaces `node` in place.
+*/
+function cloneNodeShallow(node) {
+	if (isStack(node)) return {
+		...node,
+		panels: [...node.panels]
+	};
+	return {
+		...node,
+		children: [...node.children],
+		sizes: [...node.sizes]
+	};
+}
+/**
 * Remove the stack at `stackPath` from the tree. Its panels are moved into
 * `fallbackStack` (if given and still attached) so they are not silently
 * lost; otherwise they are dropped from the model (elements return to the
@@ -3763,6 +3898,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		super(..._args);
 		this.layout = null;
 		this.accepts = `tabs horizontal vertical`;
+		this.isolated = false;
 		this._model = createStack([]);
 		this._pool = [];
 		this._dropZone = null;
@@ -5054,6 +5190,10 @@ __decorate([property({
 	type: String,
 	attribute: `accepts`
 })], DockHostElement.prototype, "accepts", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `isolated`
+})], DockHostElement.prototype, "isolated", void 0);
 __decorate([property({ attribute: false })], DockHostElement.prototype, "canAccept", void 0);
 __decorate([state()], DockHostElement.prototype, "_model", void 0);
 __decorate([state()], DockHostElement.prototype, "_pool", void 0);
@@ -8468,6 +8608,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, 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, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, 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, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map