@ixfx/components 0.5.17 → 0.5.19

package/dist/index.js

@@ -7,17 +7,18 @@ import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as
 import { t as IxfxIconElement } from "./icon-DG9Lm3LT.js";
 import { AcTextElement } from "./ac-text.js";
 import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearchTreeController, r as createIncrSearch, t as createElementIncrSearch } from "./incr-search-2pz21xtR.js";
-import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-DcE8RQJc.js";
+import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-BkWCPJFL.js";
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-CphdEaZd.js";
-import "./menu-item-BYRvfyXK.js";
+import "./interaction-D6efrBLo.js";
+import "./menu-item-CrmUwIoJ.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-DbypcEp6.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-37NyVenk.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BtiiDX1a.js";
-import { n as scrollFadeStyles, t as CrumbNavigationElement } from "./crumb-navigation-DFqTzElw.js";
+import { n as scrollFadeStyles, t as CrumbNavigationElement } from "./crumb-navigation-BrB0r14u.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { EditableLabel } from "./editable-label.js";
@@ -28,7 +29,7 @@ import { t as IxfxHexEditorElement } from "./hex-editor-Bk6rxhfg.js";
 import { t as RadialInputElement } from "./radial-input-CVxGH-Cp.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LedElement } from "./led.js";
-import { t as menu_exports } from "./menu-B8gE2MSo.js";
+import { t as menu_exports } from "./menu-CdwSe_XN.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
 import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-CxHC8z5E.js";
 import { PolarPad } from "./polar-pad.js";
@@ -40,7 +41,7 @@ import { t as SliderInputElement } from "./slider-input-CzmSVgm7.js";
 import { SnapContainer } from "./snap-container.js";
 import { SplitLayoutElement } from "./split-layout.js";
 import { SwipeElement } from "./swipe.js";
-import { t as TabListElement } from "./tab-list-6W5CgXix.js";
+import { t as TabListElement } from "./tab-list-mAoD6L0e.js";
 import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-B2fgDL4U.js";
 import { XyPad } from "./xy-pad.js";
 import { LitElement, css, html, nothing, render } from "lit";
@@ -5232,6 +5233,258 @@ __decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onI
 __decorate([eventOptions({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
 RangeMultiElement = __decorate([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
 //#endregion
+//#region src/select-horiz/select-horiz.ts
+let SelectHorizElement = class SelectHorizElement extends WheelNudgeMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._selectedIndex = -1;
+		this._slottedItems = [];
+		this.tickled = new TickledController(this, {
+			getItems: () => this._slottedItems.map((_, i) => ({
+				id: i,
+				enabled: true
+			})),
+			onStateChange: () => this._syncTickled()
+		});
+		this._onSlotChange = () => {
+			this._slottedItems = Array.from(this.shadowRoot?.querySelector(`slot`)?.assignedElements() ?? []);
+			const declaredIndex = this._slottedItems.findIndex((item) => item.hasAttribute(`selected`));
+			let resolvedIndex = declaredIndex >= 0 ? declaredIndex : this._selectedIndex;
+			if (resolvedIndex >= this._slottedItems.length) resolvedIndex = this._slottedItems.length - 1;
+			if (resolvedIndex < 0 && this._slottedItems.length > 0) resolvedIndex = 0;
+			this.selectedIndex = resolvedIndex;
+		};
+		this._syncTickled = () => {
+			this._slottedItems.forEach((item, i) => {
+				const isTickled = this.tickled.isTickled(i);
+				item.classList.toggle(`tickled`, isTickled);
+				item.tabIndex = isTickled && this.tickled.inputMode === `keyboard` ? 0 : -1;
+			});
+		};
+		this._findSlottedItem = (target) => {
+			let el = target instanceof Element ? target : null;
+			while (el) {
+				if (this._slottedItems.includes(el)) return el;
+				el = el.parentElement;
+			}
+		};
+		this._handlePointerOver = (e) => {
+			const item = this._findSlottedItem(e.target);
+			if (item) this.tickled.handlePointerEnter(this._slottedItems.indexOf(item));
+		};
+		this._handleKeyDown = (e) => {
+			if (e.key === `ArrowLeft`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`previous`);
+				this._applyTickledSelection();
+			} else if (e.key === `ArrowRight`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`next`);
+				this._applyTickledSelection();
+			} else if (e.key === `Home`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`first`);
+				this._applyTickledSelection();
+			} else if (e.key === `End`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`last`);
+				this._applyTickledSelection();
+			}
+		};
+		this._applyTickledSelection = () => {
+			const id = this.tickled.tickledId;
+			if (id !== void 0 && id !== this._selectedIndex) this.selectedIndex = id;
+		};
+		this._wheelCooldown = false;
+		this._handleClick = (e) => {
+			e.currentTarget.focus();
+			const item = this._findSlottedItem(e.target);
+			const index = item ? this._slottedItems.indexOf(item) : -1;
+			if (index >= 0 && index !== this._selectedIndex) this.selectedIndex = index;
+		};
+		this._updateSelectedAttribute = () => {
+			this._slottedItems.forEach((item, i) => {
+				if (i === this._selectedIndex) item.setAttribute(`selected`, ``);
+				else item.removeAttribute(`selected`);
+			});
+		};
+		this._scrollSelectedIntoView = () => {
+			const item = this._slottedItems[this._selectedIndex];
+			if (item) item.scrollIntoView({
+				inline: `center`,
+				behavior: `smooth`
+			});
+		};
+		this._emitChange = () => {
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: {
+					selectedIndex: this._selectedIndex,
+					selectedItem: this.selectedItem,
+					selectedValue: this.selectedValue
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			css`
+      :host {
+        --select-horiz-item-width: 80%;
+        --select-horiz-gap: var(--space-s);
+        --select-horiz-bg: var(--surface-3);
+        --select-horiz-border: var(--border);
+        --select-horiz-radius: var(--radius-l);
+        display: flex;
+        width: 100%;
+              background: var(--select-horiz-bg);
+        border: var(--select-horiz-border);
+        border-radius: var(--select-horiz-radius);
+      }
+
+      /* Edge fade (the scroll-fade-x class, see ../styles/scroll-fade.ts) must sit on
+       * the element that actually scrolls - its mask is sized to this element's own
+       * box, and content overflowing a *different*, non-scrolling ancestor gets the
+       * mask tiled across it instead of fading correctly. */
+      .items {
+        display: flex;
+        align-items: center;
+        gap: var(--select-horiz-gap);
+        padding: var(--space-xs) var(--scroll-fade-width, 30px);
+        width: 100%;
+        min-height: 48px;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+        cursor: grab;
+  
+        box-sizing: border-box;
+      }
+
+      .items:focus-within {
+        cursor: default;
+      }
+
+      .spacer {
+        flex: 0 0 var(--select-horiz-spacer-width, 10%);
+        pointer-events: none;
+        user-select: none;
+      }
+
+      ::slotted(*) {
+        flex: 0 0 var(--select-horiz-item-width);
+        scroll-snap-align: center;
+        user-select: none;
+        min-height: 100%;
+        box-sizing: border-box;
+        transition: opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
+        background: var(--item-bg);
+        border: var(--item-border);
+        border-radius: var(--item-border-radius);
+        padding: var(--item-padding);
+        display: grid;
+        align-content: center;
+        justify-content: center;
+      }
+
+      ::slotted(.tickled) {
+        background: var(--item-bg-tickled);
+        border-color: var(--item-border-tickled);
+        color: var(--item-text-tickled);
+      }
+
+      ::slotted([selected]) {
+        background: var(--item-bg-selected);
+        border-color: var(--item-border-selected);
+        color: var(--item-text-selected);
+      }
+
+      ::slotted([selected].tickled) {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    `
+		];
+	}
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(value) {
+		const oldValue = this._selectedIndex;
+		if (value < -1 || this._slottedItems.length > 0 && value >= this._slottedItems.length) return;
+		this._selectedIndex = value;
+		this._updateSelectedAttribute();
+		this._scrollSelectedIntoView();
+		this.tickled.setTickled(value === -1 ? void 0 : value);
+		if (oldValue !== value) this._emitChange();
+	}
+	get selectedValue() {
+		return this._slottedItems[this._selectedIndex]?.getAttribute(`value`) ?? null;
+	}
+	set selectedValue(value) {
+		if (value === null) return;
+		const index = this._slottedItems.findIndex((item) => item.getAttribute(`value`) === value);
+		if (index >= 0) this.selectedIndex = index;
+	}
+	get selectedItem() {
+		return this._slottedItems[this._selectedIndex] ?? null;
+	}
+	get items() {
+		return this._slottedItems;
+	}
+	render() {
+		return html`
+      <div
+        class="items scroll-fade-x"
+        tabindex="0"
+        data-input-mode=${this.tickled.inputMode}
+        @pointerover=${this._handlePointerOver}
+        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+        @keydown=${this._handleKeyDown}
+        @click=${this._handleClick}
+      >
+        <div class="spacer"></div>
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <div class="spacer"></div>
+      </div>
+    `;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	_applyWheelDelta(direction, _event) {
+		if (this._wheelCooldown) return;
+		this._wheelCooldown = true;
+		this.tickled.handleKeyboardNavigation(direction === 1 ? `next` : `previous`);
+		this._applyTickledSelection();
+		setTimeout(() => {
+			this._wheelCooldown = false;
+		}, 250);
+	}
+};
+__decorate([state()], SelectHorizElement.prototype, "_selectedIndex", void 0);
+__decorate([state()], SelectHorizElement.prototype, "_slottedItems", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: `selected-index`
+})], SelectHorizElement.prototype, "selectedIndex", null);
+__decorate([property({ type: String })], SelectHorizElement.prototype, "selectedValue", null);
+SelectHorizElement = __decorate([safeCustomElement(`ixfx-select-horiz`)], SelectHorizElement);
+//#endregion
 //#region src/snackbar/snackbar.ts
 let _instanceCounter = 0;
 let SnackbarElement = class SnackbarElement extends LitElement {
@@ -5494,11 +5747,16 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.closeable = false;
+		this.hideLabels = false;
 		this.iconName = void 0;
 		this.description = void 0;
 		this.commandActive = void 0;
 		this.registry = void 0;
 		this._compact = false;
+		this._hasToolbarContent = false;
+		this._onToolbarSlotChange = () => {
+			this._updateToolbarContent();
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -5506,6 +5764,7 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 			this._compact = entry.contentRect.width < 64;
 		});
 		this._resizeObserver.observe(this);
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -5513,6 +5772,7 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 		this._resizeObserver = void 0;
 		this._commandCleanup?.();
 		this._commandCleanup = void 0;
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -5535,12 +5795,21 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 			if (id === this.commandActive) this.click();
 		});
 	}
+	_updateToolbarContent() {
+		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
+		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+	}
+	firstUpdated() {
+		this._updateToolbarContent();
+	}
 	render() {
-		const showLabel = !this._compact || !this.iconName;
+		const showLabel = !this.hideLabels || !this.iconName;
+		const hasActions = this.closeable || this._hasToolbarContent;
 		return html`
       <div>
         ${this.iconName ? html`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : nothing}
         ${showLabel ? html`<span class="label"><slot></slot></span>` : nothing}
+        ${hasActions ? html`
         <div class="actions">
           <div class="toolbar"><slot name="toolbar"></slot></div>
           ${this.closeable ? html`
@@ -5554,6 +5823,7 @@ let TabListItemElement = class TabListItemElement extends LitElement {
             </button>
           ` : nothing}
         </div>
+        ` : nothing}
       </div>
     `;
 	}
@@ -5580,17 +5850,19 @@ let TabListItemElement = class TabListItemElement extends LitElement {
         min-width: 0;
         user-select: none;
         box-sizing: border-box;
+        height:fit-content;
       }
 
       :host > div {
         display: flex;
         align-items: center;
-        gap: var(--space-s, 4px);
-        padding: var(--tab-padding) calc(2 * var(--tab-padding));
+        padding: var(--tab-padding) calc(2 * var(--tab-padding-horizontal, var(--tab-padding)));
         min-width: 0;
         width: 100%;
         font-weight: 500;
         border: var(--selected-tab-border-width) solid transparent;
+        gap: var(--space-s);
+
       }
 
       :host([selected]) > div {
@@ -5601,6 +5873,7 @@ let TabListItemElement = class TabListItemElement extends LitElement {
         border-right-color: var(--indicator-color-right, transparent);
         background: var(--selected-background);
         font-weight: var(--selected-tab-weight);
+        border-radius:var(--radius-m);
       }
 
       .label {
@@ -5675,6 +5948,10 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 	}
 };
 __decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-labels`
+})], TabListItemElement.prototype, "hideLabels", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-name`
@@ -5686,6 +5963,7 @@ __decorate([property({
 })], TabListItemElement.prototype, "commandActive", void 0);
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
@@ -6409,6 +6687,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, SnackbarElement, 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 };
+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, SelectHorizElement, SelectHorizontalElement, SliderInputElement, SnackbarElement, 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