@ixfx/components 0.5.2 → 0.5.3

package/bundle/index.js

@@ -23925,6 +23925,331 @@ __decorate([property({ attribute: false })], TabListItemElement.prototype, "regi
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
+//#region src/tabs/tab-panel.ts
+let TabPanelElement = class TabPanelElement extends i {
+	render() {
+		return b`<slot></slot>`;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+  :host {
+    display:none;
+    height:100%;
+    width:100%;
+  }
+
+  :host([selected]) {
+    background: var(--surface-3);
+    display:block;
+  }
+  `];
+	}
+};
+TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
+//#endregion
+//#region src/tabs/tab-controller.ts
+/**
+* Connects an `ixfx-tab-list` to an `ixfx-tab-panels` container, handling the
+* wiring between them (header clicks show the matching panel, closing a tab
+* removes its panel, etc.) and offering an API to select, add, remove, rename
+* and reorder tabs.
+*
+* @example
+* ```ts
+* const ctrl = new TabController(
+*   document.querySelector('ixfx-tab-list'),
+*   document.querySelector('ixfx-tab-panels'),
+* );
+* ctrl.connect();
+*
+* ctrl.addTab({ label: 'Console', content: 'Console panel' });
+* ctrl.selectTab('Console');
+* ```
+*/
+var TabController = class {
+	#list;
+	#panels;
+	#opts;
+	#tabs = [];
+	#signal;
+	#observer;
+	#commands;
+	#registeredCommands = /* @__PURE__ */ new Set();
+	constructor(list, panels, options = {}) {
+		this.#list = list;
+		this.#panels = panels;
+		this.#opts = options;
+		this.#commands = options.commands;
+	}
+	connect() {
+		this.disconnect();
+		this.#signal = new AbortController();
+		const { signal } = this.#signal;
+		this.#list.addEventListener(`change`, this.#onChange, { signal });
+		this.#list.addEventListener(`reorder`, this.#onReorder, { signal });
+		this.#list.addEventListener(`close`, this.#onClose, { signal });
+		this.#observer = new MutationObserver(() => this.#rebuild());
+		this.#observer.observe(this.#list, { childList: true });
+		this.#observer.observe(this.#panels, { childList: true });
+		this.#rebuild();
+		this.#panels.syncWithList(this.#list);
+		for (const tab of this.#tabs) this.#registerCommand(tab);
+	}
+	disconnect() {
+		this.#signal?.abort();
+		this.#signal = void 0;
+		this.#observer?.disconnect();
+		this.#observer = void 0;
+		for (const tab of this.#tabs) this.#unregisterCommand(tab);
+		this.#registeredCommands.clear();
+		this.#tabs = [];
+	}
+	/**
+	* Select a tab as if it was clicked — activates the header (deactivating the
+	* others) and shows its panel.
+	*
+	* `sel` may be a tab id, the panel id its `for` points at, its label text
+	* (case-insensitive), or the tab item element itself.
+	*
+	* Returns true if a tab was found.
+	*/
+	selectTab(sel) {
+		const tab = this.#resolveTab(sel);
+		if (!tab) return false;
+		const previous = this.getSelected();
+		if (previous?.id === tab.id) {
+			this.#panels.selectPanel(tab.forId);
+			return true;
+		}
+		this.#list.selectElement(tab.item);
+		this.#panels.selectPanel(tab.forId);
+		this.#opts.onSelect?.(tab, previous);
+		return true;
+	}
+	selectNext() {
+		return this.#selectOffset(1);
+	}
+	selectPrevious() {
+		return this.#selectOffset(-1);
+	}
+	getSelected() {
+		return this.#tabs.find((t) => t.item.hasAttribute(`selected`));
+	}
+	getTabs() {
+		return [...this.#tabs];
+	}
+	getTab(id) {
+		return this.#tabs.find((t) => t.id === id);
+	}
+	addTab(opts) {
+		const { id, forId } = this.#idsFor(opts);
+		const item = document.createElement(`ixfx-tab-list-item`);
+		item.id = id;
+		item.setAttribute(`for`, forId);
+		item.closeable = opts.closeable ?? true;
+		item.append(opts.label);
+		if (opts.iconName) item.iconName = opts.iconName;
+		if (opts.description) item.description = opts.description;
+		for (const el of opts.toolbar ?? []) {
+			el.slot = `toolbar`;
+			item.append(el);
+		}
+		const panel = document.createElement(`ixfx-tab-panel`);
+		panel.id = forId;
+		if (opts.content !== void 0) this.#fillContent(panel, opts.content);
+		const index = Math.max(0, Math.min(opts.index ?? this.#tabs.length, this.#tabs.length));
+		this.#insertElement(this.#list, item, index);
+		this.#insertElement(this.#panels, panel, index);
+		const tab = {
+			id,
+			forId,
+			item,
+			panel,
+			label: opts.label,
+			iconName: opts.iconName
+		};
+		this.#tabs.splice(index, 0, tab);
+		this.#registerCommand(tab);
+		this.#opts.onAdd?.(tab);
+		if (opts.select ?? true) this.selectTab(id);
+		return tab;
+	}
+	removeTab(sel) {
+		const tab = this.#resolveTab(sel);
+		if (!tab) return false;
+		const index = this.#tabs.indexOf(tab);
+		const adjacent = tab.item.hasAttribute(`selected`) ? this.#adjacentTab(index) : void 0;
+		tab.item.remove();
+		tab.panel.remove();
+		this.#removeFromIndex(tab);
+		this.#unregisterCommand(tab);
+		this.#opts.onRemove?.(tab);
+		if (adjacent) this.selectTab(adjacent.id);
+		return true;
+	}
+	renameTab(sel, label) {
+		const tab = this.#resolveTab(sel);
+		if (!tab) return false;
+		for (const child of [...tab.item.childNodes]) {
+			if (child.nodeType === Node.ELEMENT_NODE && child.slot === `toolbar`) continue;
+			tab.item.removeChild(child);
+		}
+		tab.item.prepend(label);
+		tab.label = label;
+		this.#reregisterCommand(tab);
+		return true;
+	}
+	setTabIcon(sel, iconName) {
+		const tab = this.#resolveTab(sel);
+		if (!tab) return false;
+		if (iconName) {
+			tab.item.iconName = iconName;
+			tab.iconName = iconName;
+		} else {
+			tab.item.iconName = void 0;
+			tab.item.removeAttribute(`icon-name`);
+			tab.iconName = void 0;
+		}
+		return true;
+	}
+	#onChange = (event) => {
+		const detail = event.detail;
+		this.#panels.selectPanel(detail.for);
+		const tab = this.#tabs.find((t) => t.forId === detail.for);
+		if (!tab) return;
+		const previous = detail.previous ? this.#tabs.find((t) => t.id === detail.previous) : void 0;
+		this.#opts.onSelect?.(tab, previous);
+	};
+	#onReorder = () => {
+		this.#rebuild();
+		this.#opts.onReorder?.(this.#tabs);
+	};
+	#onClose = (event) => {
+		const item = event.target?.closest(`ixfx-tab-list-item`);
+		const tab = item ? this.#tabByItem(item) : void 0;
+		if (!tab) return;
+		const index = this.#tabs.indexOf(tab);
+		const adjacent = tab.item.hasAttribute(`selected`) ? this.#adjacentTab(index) : void 0;
+		tab.panel.remove();
+		this.#removeFromIndex(tab);
+		this.#unregisterCommand(tab);
+		this.#opts.onRemove?.(tab);
+		if (adjacent) this.selectTab(adjacent.id);
+	};
+	#selectOffset(offset) {
+		const tabs = this.#tabs;
+		if (tabs.length === 0) return false;
+		const current = this.getSelected();
+		const next = ((current ? tabs.indexOf(current) : offset === 1 ? -1 : 0) + offset + tabs.length) % tabs.length;
+		return this.selectTab(tabs[next].id);
+	}
+	#resolveTab(sel) {
+		if (typeof sel !== `string`) return this.#tabs.find((t) => t.item === sel);
+		const label = sel.trim().toLowerCase();
+		return this.#tabs.find((t) => t.id === sel) ?? this.#tabs.find((t) => t.forId === sel) ?? this.#tabs.find((t) => t.label.toLowerCase() === label);
+	}
+	#tabByItem(item) {
+		return this.#tabs.find((t) => t.item === item);
+	}
+	#adjacentTab(index) {
+		const tabs = this.#tabs;
+		if (tabs.length <= 1) return void 0;
+		return tabs[index + 1] ?? tabs[index - 1];
+	}
+	#removeFromIndex(tab) {
+		const index = this.#tabs.indexOf(tab);
+		if (index >= 0) this.#tabs.splice(index, 1);
+	}
+	#idsFor(opts) {
+		const base = this.#slug(opts.label) || `tab`;
+		return {
+			id: opts.id ?? this.#uniqueId(`tab-${base}`),
+			forId: opts.forId ?? this.#uniqueId(`panel-${base}`)
+		};
+	}
+	#slug(value) {
+		return value.toLowerCase().replace(/[^a-z0-9]+/g, `-`).replace(/^-+|-+$/g, ``);
+	}
+	#uniqueId(base) {
+		let candidate = base;
+		let n = 2;
+		while (document.getElementById(candidate)) candidate = `${base}-${n++}`;
+		return candidate;
+	}
+	#fillContent(panel, content) {
+		if (typeof content === `function`) {
+			content(panel);
+			return;
+		}
+		if (typeof content === `string`) {
+			panel.append(document.createTextNode(content));
+			return;
+		}
+		panel.append(content);
+	}
+	#insertElement(container, el, index) {
+		const children = Array.from(container.children);
+		container.insertBefore(el, children[index] ?? null);
+	}
+	#rebuild() {
+		const panels = /* @__PURE__ */ new Map();
+		for (const el of this.#panels.querySelectorAll(`ixfx-tab-panel`)) panels.set(el.id, el);
+		const tabs = [];
+		for (const item of this.#list.querySelectorAll(`ixfx-tab-list-item`)) {
+			const forId = item.getAttribute(`for`) ?? ``;
+			const panel = panels.get(forId);
+			if (!panel) continue;
+			tabs.push({
+				id: item.id || forId,
+				forId,
+				item,
+				panel,
+				label: this.#labelOf(item),
+				iconName: item.iconName
+			});
+		}
+		this.#tabs = tabs;
+	}
+	/** The tab's visible label text, excluding any `slot="toolbar"` content. */
+	#labelOf(item) {
+		const clone = item.cloneNode(true);
+		clone.querySelectorAll(`[slot="toolbar"]`).forEach((el) => el.remove());
+		return (clone.textContent ?? ``).trim();
+	}
+	#registerCommand(tab) {
+		if (!this.#commands) return;
+		if (tab.item.commandActive) return;
+		if (this.#commands.has(tab.id)) return;
+		this.#commands.register({
+			id: tab.id,
+			label: tab.label,
+			description: tab.item.description ?? tab.label,
+			icon: tab.iconName,
+			execute: () => {
+				this.selectTab(tab.id);
+			}
+		});
+		this.#registeredCommands.add(tab.id);
+	}
+	#unregisterCommand(tab) {
+		if (!this.#commands) return;
+		if (this.#registeredCommands.has(tab.id)) {
+			this.#commands.unregister(tab.id);
+			this.#registeredCommands.delete(tab.id);
+		}
+	}
+	#reregisterCommand(tab) {
+		if (!this.#commands || !this.#registeredCommands.has(tab.id)) return;
+		const existing = this.#commands.get(tab.id);
+		if (!existing) return;
+		this.#commands.unregister(tab.id);
+		this.#commands.register({
+			...existing,
+			label: tab.label
+		});
+	}
+};
+//#endregion
 //#region src/util/drag-ghost.ts
 /**
 * Theme-aware floating element helper.
@@ -24515,28 +24840,6 @@ __decorate([property({
 })], TabListElement.prototype, "dragMode", void 0);
 TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
 //#endregion
-//#region src/tabs/tab-panel.ts
-let TabPanelElement = class TabPanelElement extends i {
-	render() {
-		return b`<slot></slot>`;
-	}
-	static {
-		this.styles = [themeFallbacks, i$3`
-  :host {
-    display:none;
-    height:100%;
-    width:100%;
-  }
-
-  :host([selected]) {
-    background: var(--surface-3);
-    display:block;
-  }
-  `];
-	}
-};
-TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
-//#endregion
 //#region src/tabs/tab-panels.ts
 let TabPanelsElement = class TabPanelsElement extends i {
 	/**
@@ -27238,6 +27541,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, 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, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SliderInputElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, 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, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SliderInputElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map