@ixfx/components 0.5.5 → 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-CFy8e3G_.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-xPpzkoiW.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";
@@ -1524,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;
@@ -5178,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) {
@@ -6096,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