@ixfx/components 0.5.1 → 0.5.3

package/dist/index.js

@@ -2863,6 +2863,132 @@ __decorate([property({
 __decorate([property({ type: Number })], EditableNumber.prototype, "precision", void 0);
 EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
 //#endregion
+//#region src/form/form-group.ts
+let FormGroupElement = class FormGroupElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = ``;
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._observer = new MutationObserver(() => this._moveChildren());
+	}
+	firstUpdated() {
+		this._fieldset = this.querySelector(`fieldset`) ?? void 0;
+		if (this._fieldset) {
+			this._observer?.observe(this, { childList: true });
+			this._moveChildren();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._observer?.disconnect();
+	}
+	_moveChildren() {
+		if (!this._fieldset) return;
+		Array.from(this.children).filter((el) => el.tagName !== `FIELDSET`).forEach((el) => {
+			this._fieldset.appendChild(el);
+		});
+	}
+	render() {
+		return html`<fieldset><legend>${this.label}</legend></fieldset>`;
+	}
+};
+__decorate([property({ type: String })], FormGroupElement.prototype, "label", void 0);
+FormGroupElement = __decorate([safeCustomElement(`ixfx-form-group`)], FormGroupElement);
+//#endregion
+//#region src/form/form-part.ts
+let idCounter = 0;
+let FormPartElement = class FormPartElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = ``;
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._ensureId();
+	}
+	_ensureId() {
+		const control = this.querySelector(`input, select, textarea, [name]`);
+		if (!control) return;
+		if (!control.id) {
+			this._id = `ixfx-form-part-${++idCounter}`;
+			control.id = this._id;
+		} else this._id = control.id;
+	}
+	render() {
+		if (!this._id) this._ensureId();
+		return html`<label for=${this._id ?? ``}>${this.label}</label>`;
+	}
+};
+__decorate([property({ type: String })], FormPartElement.prototype, "label", void 0);
+FormPartElement = __decorate([safeCustomElement(`ixfx-form-part`)], FormPartElement);
+//#endregion
+//#region src/form/form-values.ts
+function collectFormValues(root) {
+	const values = {};
+	root.querySelectorAll(`[name]`).forEach((el) => {
+		const name = el.getAttribute(`name`);
+		if (!name) return;
+		if (el instanceof HTMLInputElement) {
+			if (el.type === `radio`) {
+				if (el.checked) values[name] = el.value;
+			} else if (el.type === `checkbox`) values[name] = el.checked;
+			else values[name] = el.value;
+		} else if (el instanceof HTMLSelectElement) {
+			if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
+			else values[name] = el.value;
+		} else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
+		else if (`value` in el) values[name] = el.value;
+	});
+	return values;
+}
+function applyFormValues(root, data) {
+	root.querySelectorAll(`[name]`).forEach((el) => {
+		const name = el.getAttribute(`name`);
+		if (!name || !(name in data)) return;
+		const value = data[name];
+		if (el instanceof HTMLInputElement) {
+			if (el.type === `radio`) el.checked = el.value === value;
+			else if (el.type === `checkbox`) el.checked = Boolean(value);
+			else el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (el instanceof HTMLSelectElement) {
+			if (el.multiple && Array.isArray(value)) Array.from(el.options).forEach((opt) => {
+				opt.selected = value.includes(opt.value);
+			});
+			else el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (el instanceof HTMLTextAreaElement) {
+			el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (`value` in el) el.value = value;
+	});
+}
+//#endregion
+//#region src/form/form.ts
+let FormElement = class FormElement extends LitElement {
+	createRenderRoot() {
+		return this;
+	}
+	getValues() {
+		return collectFormValues(this);
+	}
+	setValues(data) {
+		applyFormValues(this, data);
+	}
+};
+FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
+//#endregion
 //#region src/grouped-item-lister/grouped-item-lister.ts
 const UNGROUPED_KEY = `__ungrouped__`;
 let GroupedItemListerElement = class GroupedItemListerElement extends LitElement {
@@ -5272,8 +5398,316 @@ let TabPanelElement = class TabPanelElement extends LitElement {
 };
 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/tabs/tab-panels.ts
 let TabPanelsElement = class TabPanelsElement extends LitElement {
+	/**
+	* The `ixfx-tab-list` this panels element is associated with, established by
+	* `syncWithList()`. Used by `selectTab()` to activate the matching header.
+	*/
+	#list;
 	render() {
 		return html`<slot></slot>`;
 	}
@@ -5293,6 +5727,7 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
 		if (this.onSelectedPanel) this.onSelectedPanel(el.id, el);
 	}
 	syncWithList(el) {
+		this.#list = el;
 		const doSync = () => {
 			const t = el.getSelectedElement();
 			if (!t) return;
@@ -5314,6 +5749,43 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
 		}
 		return found;
 	}
+	/**
+	* Select a tab as if the user clicked it — activates the matching header in
+	* the associated `ixfx-tab-list` (deactivating the others) and shows its
+	* panel.
+	*
+	* `nameOrTitle` may be the label text of a tab (e.g. `'Home'`, matched
+	* case-insensitively) or the panel id its `for` attribute points at
+	* (e.g. `'panel-home'`). If no tab matches, `nameOrTitle` is tried directly
+	* as a panel id.
+	*
+	* The tab list must first be associated via `syncWithList()` for the header
+	* to be activated; panel selection works regardless.
+	*
+	* Returns true if a panel was found and selected.
+	*/
+	selectTab(nameOrTitle) {
+		const item = this.#findTabItem(nameOrTitle);
+		if (item) {
+			this.#list?.selectElement(item);
+			return this.selectPanel(item.getAttribute(`for`) ?? ``) === true;
+		}
+		return this.selectPanel(nameOrTitle) === true;
+	}
+	#findTabItem(nameOrTitle) {
+		const list = this.#list;
+		if (!list) return void 0;
+		const items = Array.from(list.querySelectorAll(`ixfx-tab-list-item`));
+		for (const item of items) if (item.getAttribute(`for`) === nameOrTitle) return item;
+		const label = nameOrTitle.trim().toLowerCase();
+		for (const item of items) if (this.#labelOf(item).toLowerCase() === label) return item;
+	}
+	/** 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();
+	}
 	static {
 		this.styles = css`
   :host {
@@ -5625,6 +6097,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, 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