@ixfx/components 0.5.1 → 0.5.2

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 {
@@ -5274,6 +5400,11 @@ TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElem
 //#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 +5424,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 +5446,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 +5794,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, 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