@ixfx/components 0.5.4 → 0.5.6

package/dist/index.js

@@ -9,11 +9,11 @@ import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearc
 import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-DcE8RQJc.js";
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { n as buttonStyles, t as ButtonElement } from "./button-CTE8crYn.js";
-import { t as popupSurfaceStyles } from "./popup-DiWMxsWj.js";
-import "./menu-item-NUKwJ4s5.js";
+import { n as buttonStyles, t as ButtonElement } from "./button-CU8eLcxB.js";
+import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
+import "./menu-item-BttvL89f.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-C3Ag4uh-.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-Bb795sjX.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-BnvzhsAw.js";
@@ -28,7 +28,7 @@ import { t as IxfxHexEditorElement } from "./hex-editor-Bk6rxhfg.js";
 import { t as RadialInputElement } from "./radial-input-DxCrt_NE.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LedElement } from "./led.js";
-import { t as menu_exports } from "./menu-g6yd7ddN.js";
+import { t as menu_exports } from "./menu-BYyeCAF7.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";
@@ -1184,7 +1184,6 @@ let SplitButton = class SplitButton extends ButtonElement {
 		super(..._args);
 		this.mode = `default`;
 		this.defaultValue = ``;
-		this._compact = false;
 		this._selectedCommand = ``;
 		this._selectedLabel = ``;
 		this._selectedIcon = ``;
@@ -1192,7 +1191,6 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this._dynamicItems = [];
 		this._loadingItems = false;
 		this._menuHasItems = false;
-		this._widthNeeded = 0;
 		this._onDefaultMenuSlotChange = (e) => {
 			const slot = e.target;
 			this._menuHasItems = slot.assignedElements({ flatten: true }).length > 0;
@@ -1266,19 +1264,8 @@ let SplitButton = class SplitButton extends ButtonElement {
 			}
 		};
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(([entry]) => {
-			if (this._compact) {
-				if (this._widthNeeded > 0 && entry.contentRect.width >= this._widthNeeded) this._compact = false;
-			} else this._checkOverflow();
-		});
-		this._resizeObserver.observe(this);
-	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = void 0;
 		this._menuTrigger?.removeEventListener(`menu-command`, this._handleSwitcherMenuCommand);
 	}
 	firstUpdated() {
@@ -1288,19 +1275,8 @@ let SplitButton = class SplitButton extends ButtonElement {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		this._checkOverflow();
 		if ((changedProperties.has(`items`) || changedProperties.has(`mode`)) && this.items && !this.itemsProvider) this._applyItems(this.items);
 	}
-	_checkOverflow() {
-		if (this._compact) return;
-		const primary = this.shadowRoot?.querySelector(`button.primary`);
-		if (!primary) return;
-		if (primary.scrollWidth > primary.offsetWidth + 1) {
-			const caret = this.shadowRoot?.querySelector(`button.caret`);
-			this._widthNeeded = primary.scrollWidth + (caret?.offsetWidth ?? 32) + 4;
-			this._compact = true;
-		}
-	}
 	_applyItems(items) {
 		if (this.mode === `switcher`) this._applySwitcherItems(items.map((i) => ({
 			command: i.command,
@@ -1370,7 +1346,7 @@ let SplitButton = class SplitButton extends ButtonElement {
     `);
 	}
 	_renderDefault() {
-		const label = !this.hideLabel && !this._compact ? html`<span class="button-label"><slot></slot></span>` : nothing;
+		const label = this.hideLabel ? nothing : html`<span class="button-label"><slot></slot></span>`;
 		const menuContent = this.itemsProvider ? html`
           <ixfx-menu-container slot="menu">
             ${this._renderLoadingOrItems(this._dynamicItems)}
@@ -1394,9 +1370,8 @@ let SplitButton = class SplitButton extends ButtonElement {
     `;
 	}
 	_renderSwitcher() {
-		const showLabel = !this.hideLabel && !this._compact;
 		const primaryIcon = this._selectedIcon ? html`<ixfx-icon class="button-icon" name="${this._selectedIcon}"></ixfx-icon>` : nothing;
-		const primaryLabel = showLabel ? html`<span class="button-label">${this._selectedLabel}</span>` : nothing;
+		const primaryLabel = this.hideLabel ? nothing : html`<span class="button-label">${this._selectedLabel}</span>`;
 		const popupItems = this.itemsProvider ? this._renderLoadingOrItems(this._dynamicItems) : this._switcherItems.filter((i) => i.command !== this._selectedCommand).map((i) => html`
             <ixfx-menu-item
               command=${i.command}
@@ -1435,6 +1410,7 @@ let SplitButton = class SplitButton extends ButtonElement {
       :host {
         display: inline-flex;
         max-width: 100%;
+        min-width: var(--ixfx-split-button-min-width, 0);
         vertical-align: middle;
       }
 
@@ -1504,12 +1480,20 @@ let SplitButton = class SplitButton extends ButtonElement {
 
       button.primary {
         flex: 1;
+        min-width: 0;
         padding: var(--space-m, 8px) var(--space-l, 12px);
         gap: 0.5em;
         overflow: hidden;
         white-space: nowrap;
       }
 
+      button.primary .button-label {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
       button.caret {
         padding: var(--space-m, 8px) var(--space-s, 6px);
         border-inline-start: var(--border, 1px solid #999);
@@ -1540,6 +1524,22 @@ let SplitButton = class SplitButton extends ButtonElement {
         outline-offset: -2px;
       }
 
+      :host([subtle]) button.primary,
+      :host([subtle]) button.caret,
+      :host([subtle]) button.primary:hover:not(:disabled),
+      :host([subtle]) button.caret:hover:not(:disabled) {
+        background: none;
+      }
+
+      :host([subtle]) .split {
+        background: color-mix(in oklch, var(--surface-3, #ccc) 40%, transparent);
+      }
+
+      :host([subtle]) .split:has(button:hover:not(:disabled)),
+      :host([subtle]) .split:has(button:focus-visible:not(:disabled)) {
+        background: color-mix(in oklch, var(--surface-3, #ccc) 70%, transparent);
+      }
+
       ixfx-menu-trigger {
         display: inline-flex;
         align-items: stretch;
@@ -1558,7 +1558,6 @@ __decorate([property({
 __decorate([property({ attribute: false })], SplitButton.prototype, "itemsProvider", void 0);
 __decorate([property({ attribute: false })], SplitButton.prototype, "items", void 0);
 __decorate([query(`ixfx-menu-trigger`)], SplitButton.prototype, "_menuTrigger", void 0);
-__decorate([state()], SplitButton.prototype, "_compact", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedCommand", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedLabel", void 0);
 __decorate([state()], SplitButton.prototype, "_selectedIcon", void 0);
@@ -3321,7 +3320,7 @@ function createTreeListAdapter(toTreeItem, options) {
 //#region src/vertical-list/vertical-list.ts
 const ITEM_SELECTOR = `li, [data-list-item]`;
 function isMultiMode(mode) {
-	return mode === `checked` || mode === `vscode` || mode === `standard`;
+	return mode === `checked` || mode === `sticky` || mode === `vscode` || mode === `standard`;
 }
 let VerticalListElement = class VerticalListElement extends LitElement {
 	constructor(..._args2) {
@@ -3582,7 +3581,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	_toggleItem(item) {
 		if (!this._isCheckable(item)) return;
 		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
-		if (this.selectionMode === `none` && this.interactionMode !== `checked`) return;
+		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
 		const previous = this._selectedItems;
 		const next = new Set(this._selectedItems);
 		if (next.has(item)) next.delete(item);
@@ -3647,7 +3646,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	_handleClickSelection(item, e) {
 		const mode = this.interactionMode;
 		if (mode === `manual`) return;
-		if (this.selectionMode === `none` && mode !== `checked`) return;
+		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
 		switch (mode) {
 			case `implicit`:
 				this._replaceSelection(item);
@@ -3659,7 +3658,8 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				} else if (e.shiftKey && (this.selectionMode === `multiple` || mode === `vscode`)) this._rangeSelectTo(item);
 				else this._replaceSelection(item);
 				break;
-			case `checked`:
+			case `checked`: break;
+			case `sticky`: this._toggleItem(item);
 		}
 	}
 	_handleSpaceKey(item) {
@@ -5194,6 +5194,253 @@ __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/snackbar/snackbar.ts
+let _instanceCounter = 0;
+let SnackbarElement = class SnackbarElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.for = ``;
+		this.mode = `explicit`;
+		this.placement = `top`;
+		this.dismiss = `auto`;
+		this.showDelay = 150;
+		this.hideDelay = 500;
+		this._isOpen = false;
+		this._anchorName = `--ixfx-snackbar-anchor-${++_instanceCounter}`;
+		this._addedTabindex = false;
+		this._addedRole = false;
+		this._onTargetClick = () => this.toggle();
+		this._onTargetKeydown = (e) => {
+			if (e.key !== `Enter` && e.key !== ` `) return;
+			e.preventDefault();
+			this.toggle();
+		};
+		this._onTickleIn = () => this._scheduleShow();
+		this._onTickleOut = () => this._scheduleHide();
+		this._onPanelClick = () => {
+			if (this.dismiss === `auto`) this.hide();
+		};
+		this._onToggle = (e) => {
+			const { newState } = e;
+			this._isOpen = newState === `open`;
+			if (newState === `closed` && this.contains(document.activeElement)) this._target?.focus();
+		};
+	}
+	get isOpen() {
+		return this._isOpen;
+	}
+	show() {
+		if (!this.popover) return;
+		try {
+			this.showPopover();
+		} catch {}
+	}
+	hide() {
+		if (!this.popover) return;
+		try {
+			this.hidePopover();
+		} catch {}
+	}
+	toggle() {
+		if (!this.popover) return;
+		try {
+			this.togglePopover();
+		} catch {}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`popover`)) this.popover = `auto`;
+		this.classList.add(`popup-surface`);
+		this.addEventListener(`toggle`, this._onToggle);
+		this.addEventListener(`click`, this._onPanelClick);
+		this.style.setProperty(`position-anchor`, this._anchorName);
+		this._attachToTarget();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`toggle`, this._onToggle);
+		this.removeEventListener(`click`, this._onPanelClick);
+		this._detachFromTarget();
+		this._cancelShow();
+		this._cancelHide();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`for`) || changed.has(`mode`)) this._attachToTarget();
+	}
+	_resolveTarget() {
+		if (!this.for) return void 0;
+		return this.getRootNode().getElementById(this.for) ?? void 0;
+	}
+	_attachToTarget() {
+		this._detachFromTarget();
+		const target = this._resolveTarget();
+		if (!target) {
+			if (this.for) console.warn(`ixfx-snackbar: no element found with id "${this.for}"`);
+			return;
+		}
+		this._target = target;
+		target.style.setProperty(`anchor-name`, this._anchorName);
+		if (this.mode === `explicit`) {
+			const alreadyFocusable = target.tabIndex >= 0;
+			if (!alreadyFocusable) {
+				target.setAttribute(`tabindex`, `0`);
+				this._addedTabindex = true;
+			}
+			if (!target.hasAttribute(`role`) && !alreadyFocusable) {
+				target.setAttribute(`role`, `button`);
+				this._addedRole = true;
+			}
+			target.setAttribute(`aria-haspopup`, `true`);
+			target.addEventListener(`click`, this._onTargetClick);
+			if (!alreadyFocusable) target.addEventListener(`keydown`, this._onTargetKeydown);
+		} else if (this.mode === `implicit`) {
+			target.addEventListener(`pointerenter`, this._onTickleIn);
+			target.addEventListener(`focus`, this._onTickleIn);
+			target.addEventListener(`pointerleave`, this._onTickleOut);
+			target.addEventListener(`blur`, this._onTickleOut);
+			this.addEventListener(`pointerenter`, this._onTickleIn);
+			this.addEventListener(`focusin`, this._onTickleIn);
+			this.addEventListener(`pointerleave`, this._onTickleOut);
+			this.addEventListener(`focusout`, this._onTickleOut);
+		}
+	}
+	_detachFromTarget() {
+		const target = this._target;
+		if (!target) return;
+		target.style.removeProperty(`anchor-name`);
+		if (this._addedTabindex) {
+			target.removeAttribute(`tabindex`);
+			this._addedTabindex = false;
+		}
+		if (this._addedRole) {
+			target.removeAttribute(`role`);
+			this._addedRole = false;
+		}
+		target.removeAttribute(`aria-haspopup`);
+		target.removeEventListener(`click`, this._onTargetClick);
+		target.removeEventListener(`keydown`, this._onTargetKeydown);
+		target.removeEventListener(`pointerenter`, this._onTickleIn);
+		target.removeEventListener(`focus`, this._onTickleIn);
+		target.removeEventListener(`pointerleave`, this._onTickleOut);
+		target.removeEventListener(`blur`, this._onTickleOut);
+		this.removeEventListener(`pointerenter`, this._onTickleIn);
+		this.removeEventListener(`focusin`, this._onTickleIn);
+		this.removeEventListener(`pointerleave`, this._onTickleOut);
+		this.removeEventListener(`focusout`, this._onTickleOut);
+		this._target = void 0;
+	}
+	_scheduleShow() {
+		this._cancelHide();
+		this._cancelShow();
+		if (this.showDelay <= 0) {
+			this.show();
+			return;
+		}
+		this._showTimeout = window.setTimeout(() => this.show(), this.showDelay);
+	}
+	_scheduleHide() {
+		this._cancelShow();
+		this._cancelHide();
+		if (this.hideDelay <= 0) {
+			this.hide();
+			return;
+		}
+		this._hideTimeout = window.setTimeout(() => this.hide(), this.hideDelay);
+	}
+	_cancelShow() {
+		if (this._showTimeout !== void 0) {
+			window.clearTimeout(this._showTimeout);
+			this._showTimeout = void 0;
+		}
+	}
+	_cancelHide() {
+		if (this._hideTimeout !== void 0) {
+			window.clearTimeout(this._hideTimeout);
+			this._hideTimeout = void 0;
+		}
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			popupSurfaceStyles,
+			css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      padding: var(--space-s);
+
+      position: fixed;
+      inset: unset;
+      margin: 0;
+      z-index: 100;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+      opacity: 0;
+      scale: 0.97;
+      pointer-events: none;
+      transition: opacity 0.12s ease-out, scale 0.12s ease-out,
+                  display 0.12s allow-discrete, overlay 0.12s allow-discrete;
+    }
+
+    :host(:popover-open) {
+      opacity: 1;
+      scale: 1;
+      pointer-events: auto;
+    }
+
+    @starting-style {
+      :host(:popover-open) {
+        opacity: 0;
+        scale: 0.97;
+      }
+    }
+
+    :host([placement="top"]) {
+      position-area: block-start;
+      margin-block-end: var(--space-s);
+    }
+
+    :host([placement="bottom"]) {
+      position-area: block-end;
+      margin-block-start: var(--space-s);
+    }
+
+    :host([placement="left"]) {
+      position-area: inline-start;
+      margin-inline-end: var(--space-s);
+    }
+
+    :host([placement="right"]) {
+      position-area: inline-end;
+      margin-inline-start: var(--space-s);
+    }
+  `
+		];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({ type: String })], SnackbarElement.prototype, "for", void 0);
+__decorate([property({ type: String })], SnackbarElement.prototype, "mode", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SnackbarElement.prototype, "placement", void 0);
+__decorate([property({ type: String })], SnackbarElement.prototype, "dismiss", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `show-delay`
+})], SnackbarElement.prototype, "showDelay", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `hide-delay`
+})], SnackbarElement.prototype, "hideDelay", void 0);
+__decorate([state()], SnackbarElement.prototype, "_isOpen", void 0);
+SnackbarElement = __decorate([safeCustomElement(`ixfx-snackbar`)], SnackbarElement);
+//#endregion
 //#region src/tabs/tab-list-item.ts
 let TabListItemElement = class TabListItemElement extends LitElement {
 	constructor(..._args) {
@@ -6112,6 +6359,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, 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, 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