@ixfx/components 0.7.2 → 0.7.3

package/bundle/index.js

@@ -4048,6 +4048,99 @@ var ListSelectionController = class {
 	}
 };
 //#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/menu/menu-container.ts
 let MenuContainer = class MenuContainer extends i {
 	constructor(..._args) {
@@ -10018,8 +10111,8 @@ let MenuCheckItem = class MenuCheckItem extends i {
     }
 
     .check {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -10539,8 +10632,8 @@ let MenuRadioItem = class MenuRadioItem extends i {
     }
 
     .radio {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -12497,6 +12590,28 @@ let DetailListElement = class DetailListElement extends i {
 			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`);
@@ -12658,8 +12773,8 @@ let DetailListElement = class DetailListElement extends i {
       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) {
@@ -12706,7 +12821,7 @@ let DetailListElement = class DetailListElement extends i {
       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),
@@ -36516,6 +36631,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