@ixfx/components 0.5.20 → 0.6.0

package/dist/tab-list-CR0v53KJ.js

@@ -1,615 +0,0 @@
-import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
-import { LitElement, css, html, nothing } from "lit";
-import { property } from "lit/decorators.js";
-//#region src/util/drag-ghost.ts
-/**
-* Theme-aware floating element helper.
-*
-* Creates a `position: fixed`, `pointer-events: none` element anchored to a
-* source element's theme container, then exposes imperative `move` / `destroy`
-* hooks. Used by `ixfx-tab-list` for its drag-ghost; intended to be reusable
-* by future drag/detach features.
-*
-* Theme container lookup mirrors `tooltip-controller.ts` so the floating
-* element still inherits the right CSS custom properties when the source lives
-* inside a `.theme-dark` / `.theme-light` subtree (used by the loader iframes).
-*/
-let stylesInjected = false;
-function injectGhostStyles() {
-	if (stylesInjected) return;
-	stylesInjected = true;
-	const style = document.createElement(`style`);
-	style.textContent = `
-    .ixfx-drag-ghost {
-      position: fixed;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      z-index: 10000;
-      will-change: transform;
-      opacity: 0.9;
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-xs, 4px);
-      padding: var(--padding, var(--space-m, 8px)) calc(2 * var(--padding, var(--space-m, 8px)));
-      background: var(--surface-4);
-      color: var(--surface-4-text);
-      border: 1px solid var(--border-subtle);
-      border-radius: var(--radius-m, 6px);
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: 500;
-      white-space: nowrap;
-      max-width: 240px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      box-shadow: var(--shadow-m);
-    }
-    .ixfx-drag-ghost ixfx-icon {
-      flex-shrink: 0;
-    }
-  `;
-	document.head.appendChild(style);
-}
-/**
-* Create a theme-aware floating ghost element.
-*
-* The ghost is appended to the closest `.theme-dark` / `.theme-light` ancestor
-* of `anchor`, falling back to `document.body`. This preserves CSS variable
-* inheritance for theming.
-*/
-function createDragGhost(opts) {
-	injectGhostStyles();
-	const ghost = document.createElement(`div`);
-	ghost.className = `ixfx-drag-ghost`;
-	if (opts.className) ghost.classList.add(opts.className);
-	ghost.appendChild(opts.content);
-	ghost.style.transform = `translate3d(-9999px, -9999px, 0)`;
-	const targetDoc = opts.anchor.ownerDocument;
-	const themeContainer = opts.anchor.closest(`.theme-dark, .theme-light`);
-	if (themeContainer) themeContainer.appendChild(ghost);
-	else targetDoc.body.appendChild(ghost);
-	const anchorRect = opts.anchor.getBoundingClientRect();
-	const offsetX = anchorRect.width / 2;
-	const offsetY = anchorRect.height / 2;
-	return {
-		element: ghost,
-		move(x, y) {
-			ghost.style.transform = `translate3d(${x - offsetX}px, ${y - offsetY}px, 0)`;
-		},
-		destroy() {
-			ghost.remove();
-		}
-	};
-}
-//#endregion
-//#region src/tabs/tab-list.ts
-/** Pointer movement threshold (px) before a press becomes a drag. */
-const DRAG_THRESHOLD_PX = 5;
-let TabListElement = class TabListElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.orientation = `horizontal`;
-		this.flip = false;
-		this.scrollable = false;
-		this.hideLabels = false;
-		this.dragMode = `off`;
-		this.#items = [];
-		this.#dragState = null;
-		this.#suppressNextClick = false;
-		this.#onSlotChange = () => {
-			this.updateComplete.then(() => {
-				this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
-				this.#syncIndicatorColors();
-				this.#syncHideLabels();
-			});
-		};
-		this.#onKeyUp = (event) => {
-			const key = event.key;
-			if (this.#isVertical) {
-				if (key === `ArrowUp`) this.#selectPrevious();
-				else if (key === `ArrowDown`) this.#selectNext();
-			} else if (key === `ArrowRight`) this.#selectNext();
-			else if (key === `ArrowLeft`) this.#selectPrevious();
-		};
-		this.#onKeyDown = (event) => {
-			const state = this.#dragState;
-			if (event.key !== `Escape` || !state?.active) return;
-			event.preventDefault();
-			const pointerId = state.pointerId;
-			this.#abortDrag();
-			this.#endDrag(pointerId);
-		};
-		this.#onWheel = (event) => {
-			if (!this.scrollable) return;
-			const el = this.#containerEl;
-			if (!el) return;
-			if (!this.#isVertical) {
-				if (event.deltaY === 0 || el.scrollWidth <= el.clientWidth) return;
-				const prev = el.scrollLeft;
-				el.scrollLeft = prev + event.deltaY;
-				if (el.scrollLeft !== prev) event.preventDefault();
-			} else {
-				if (event.deltaX === 0 || el.scrollHeight <= el.clientHeight) return;
-				const prev = el.scrollTop;
-				el.scrollTop = prev + event.deltaX;
-				if (el.scrollTop !== prev) event.preventDefault();
-			}
-		};
-		this.#onSlotClick = (event) => {
-			if (this.#suppressNextClick) {
-				this.#suppressNextClick = false;
-				event.preventDefault();
-				event.stopPropagation();
-				return;
-			}
-			this.focus();
-			const t = event.target.closest(`ixfx-tab-list-item`);
-			if (!t) return;
-			const previous = this.getSelectedElement();
-			this.selectElement(t);
-			const forId = t.getAttribute(`for`);
-			const previousId = previous?.id;
-			this.dispatchEvent(new CustomEvent(`change`, {
-				bubbles: true,
-				detail: {
-					previous: previousId,
-					selected: t.id,
-					for: forId ?? ``
-				}
-			}));
-		};
-		this.#onPointerDown = (event) => {
-			if (this.dragMode !== `reorder`) return;
-			if (event.button !== 0) return;
-			const target = this.#findDragTarget(event);
-			if (!target) return;
-			const fromIndex = this.#items.indexOf(target);
-			if (fromIndex < 0) return;
-			this.#dragState = {
-				pointerId: event.pointerId,
-				source: target,
-				fromIndex,
-				startX: event.clientX,
-				startY: event.clientY,
-				active: false,
-				ghost: null,
-				gapIndex: void 0
-			};
-			window.addEventListener(`pointermove`, this.#onPointerMove);
-			window.addEventListener(`pointerup`, this.#onPointerUp);
-			window.addEventListener(`pointercancel`, this.#onPointerCancel);
-		};
-		this.#onPointerMove = (event) => {
-			const state = this.#dragState;
-			if (!state || event.pointerId !== state.pointerId) return;
-			const dx = event.clientX - state.startX;
-			const dy = event.clientY - state.startY;
-			const distance = Math.hypot(dx, dy);
-			if (!state.active) {
-				if (distance < DRAG_THRESHOLD_PX) return;
-				this.#beginDrag(event);
-			}
-			state.ghost?.move(event.clientX, event.clientY);
-			const gap = this.#computeGapIndex(event.clientX, event.clientY);
-			if (gap !== state.gapIndex) {
-				state.gapIndex = gap;
-				this.requestUpdate();
-			}
-		};
-		this.#onPointerUp = (event) => {
-			const state = this.#dragState;
-			if (!state || event.pointerId !== state.pointerId) return;
-			if (state.active) {
-				const gap = this.#computeGapIndex(event.clientX, event.clientY);
-				this.#commitDrag(state.source, state.fromIndex, gap);
-			}
-			this.#endDrag(event.pointerId);
-		};
-		this.#onPointerCancel = (event) => {
-			const state = this.#dragState;
-			if (!state || event.pointerId !== state.pointerId) return;
-			this.#abortDrag();
-			this.#endDrag(event.pointerId);
-		};
-	}
-	#items;
-	#dragState;
-	#suppressNextClick;
-	get #isVertical() {
-		return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;
-	}
-	get #containerClass() {
-		const base = this.scrollable ? `${this.orientation} scrollable` : this.orientation;
-		return this.dragMode === `reorder` ? `${base} reorder` : base;
-	}
-	render() {
-		const caretStyle = this.#computeCaretStyle();
-		return html`
-    <div
-      tabindex=0
-      @keyup=${this.#onKeyUp}
-      @click=${this.#onSlotClick}
-      @pointerdown=${this.#onPointerDown}
-      @keydown=${this.#onKeyDown}
-      @wheel=${this.#onWheel}
-      id="container"
-      class=${this.#containerClass}
-    >
-      <slot @slotchange=${this.#onSlotChange}></slot>
-      ${caretStyle ? html`<div class="drop-caret" style=${caretStyle}></div>` : nothing}
-    </div>`;
-	}
-	#onSlotChange;
-	firstUpdated() {
-		this.updateComplete.then(() => {
-			if (this.#items.length > 0) {
-				this.#syncIndicatorColors();
-				this.#syncHideLabels();
-			}
-		});
-	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		this.classList.toggle(`scrollable`, this.scrollable);
-		if (changedProperties.has(`dragMode`)) this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);
-		if (changedProperties.has(`hideLabels`)) this.#syncHideLabels();
-	}
-	#syncHideLabels() {
-		for (const item of this.#items) if (this.hideLabels) item.setAttribute(`hide-labels`, ``);
-		else item.removeAttribute(`hide-labels`);
-	}
-	#syncIndicatorColors() {
-		for (const item of this.#items) {
-			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
-			item.style.setProperty(`--indicator-color-top`, `transparent`);
-			item.style.setProperty(`--indicator-color-left`, `transparent`);
-			item.style.setProperty(`--indicator-color-right`, `transparent`);
-			if (item.hasAttribute(`selected`)) {
-				if (this.orientation === `horizontal` && !this.flip) item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
-				else if (this.orientation === `horizontal` && this.flip) item.style.setProperty(`--indicator-color-top`, `var(--accent)`);
-				else if (this.#isVertical && !this.flip) item.style.setProperty(`--indicator-color-right`, `var(--accent)`);
-				else if (this.#isVertical && this.flip) item.style.setProperty(`--indicator-color-left`, `var(--accent)`);
-			}
-		}
-	}
-	#onKeyUp;
-	#onKeyDown;
-	/**
-	* Translate vertical wheel deltas into horizontal scroll on a scrollable
-	* horizontal list (and vice-versa for vertical lists). Without this, the
-	* default browser behaviour only scrolls horizontally with Shift+wheel or a
-	* physical horizontal wheel — neither of which most users reach for on a
-	* VS Code-style tab strip.
-	*
-	* Only kicks in when the list is actually scrollable (overflow content
-	* present), and is a no-op when nothing is scrollable in that direction.
-	*/
-	#onWheel;
-	getSelectedElement() {
-		for (const el of this.#items) if (this.#isSelected(el)) return el;
-		const slot = this.shadowRoot?.querySelector(`slot`);
-		if (slot) {
-			const els = slot.assignedElements({ flatten: true });
-			for (const el of els) if (this.#isSelected(el)) return el;
-		}
-	}
-	#isSelected(el) {
-		if (el.getAttribute(`selected`) === null) return false;
-		return el.hasAttribute(`selected`);
-	}
-	selectElement(el) {
-		const existing = this.getSelectedElement();
-		if (existing) {
-			existing.removeAttribute(`selected`);
-			existing.style.setProperty(`--indicator-color-bottom`, `transparent`);
-			existing.style.setProperty(`--indicator-color-top`, `transparent`);
-			existing.style.setProperty(`--indicator-color-left`, `transparent`);
-			existing.style.setProperty(`--indicator-color-right`, `transparent`);
-		}
-		el.setAttribute(`selected`, ``);
-		if (this.orientation === `horizontal` && !this.flip) el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
-		else if (this.orientation === `horizontal` && this.flip) el.style.setProperty(`--indicator-color-top`, `var(--accent)`);
-		else if (this.#isVertical && !this.flip) el.style.setProperty(`--indicator-color-right`, `var(--accent)`);
-		else if (this.#isVertical && this.flip) el.style.setProperty(`--indicator-color-left`, `var(--accent)`);
-	}
-	#selectNext() {
-		let found = false;
-		for (const el of this.#items) if (this.#isSelected(el) && !found) found = true;
-		else if (found) {
-			this.selectElement(el);
-			break;
-		}
-	}
-	#selectPrevious() {
-		let prev;
-		for (const el of this.#items) if (this.#isSelected(el) && prev) this.selectElement(prev);
-		else prev = el;
-	}
-	#onSlotClick;
-	/**
-	* Walk composedPath looking for the nearest ancestor tab-list-item, but bail
-	* if the path goes through a `.close-btn` or `.toolbar` (so close/toolbar
-	* buttons always win — same delegation pattern used by tooltip-controller).
-	*/
-	#findDragTarget(event) {
-		if (this.dragMode === `off`) return null;
-		const path = event.composedPath();
-		let item = null;
-		for (const node of path) {
-			if (!(node instanceof HTMLElement)) continue;
-			if (node.classList.contains(`close-btn`) || node.classList.contains(`toolbar`)) return null;
-			if (!item && node.tagName === `IXFX-TAB-LIST-ITEM`) item = node;
-		}
-		return item;
-	}
-	#onPointerDown;
-	#onPointerMove;
-	#onPointerUp;
-	#onPointerCancel;
-	#beginDrag(event) {
-		const state = this.#dragState;
-		if (!state || state.active) return;
-		try {
-			this.#containerEl?.setPointerCapture(event.pointerId);
-		} catch {}
-		state.active = true;
-		state.source.setAttribute(`drag-source`, ``);
-		state.ghost = this.#createGhost(state.source);
-		if (state.ghost) state.ghost.move(event.clientX, event.clientY);
-	}
-	#abortDrag() {
-		const state = this.#dragState;
-		if (!state) return;
-		state.source.removeAttribute(`drag-source`);
-		if (state.gapIndex !== void 0) {
-			state.gapIndex = void 0;
-			this.requestUpdate();
-		}
-	}
-	#endDrag(pointerId) {
-		const state = this.#dragState;
-		if (!state) return;
-		state.ghost?.destroy();
-		state.ghost = null;
-		this.#dragState = null;
-		window.removeEventListener(`pointermove`, this.#onPointerMove);
-		window.removeEventListener(`pointerup`, this.#onPointerUp);
-		window.removeEventListener(`pointercancel`, this.#onPointerCancel);
-		try {
-			this.#containerEl?.releasePointerCapture(pointerId);
-		} catch {}
-		this.requestUpdate();
-	}
-	#commitDrag(source, fromIndex, gapIndex) {
-		source.removeAttribute(`drag-source`);
-		const siblings = this.#items.filter((el) => el !== source);
-		const target = gapIndex === void 0 ? siblings.length : Math.max(0, Math.min(gapIndex, siblings.length));
-		const parent = source.parentNode;
-		if (!parent) return;
-		const ref = siblings[target] ?? null;
-		parent.insertBefore(source, ref);
-		const toIndex = Array.prototype.indexOf.call(parent.children, source);
-		if (toIndex === fromIndex) return;
-		this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
-		this.#syncIndicatorColors();
-		this.#suppressNextClick = true;
-		this.dispatchEvent(new CustomEvent(`reorder`, {
-			bubbles: true,
-			detail: {
-				id: source.id,
-				fromIndex,
-				toIndex
-			}
-		}));
-	}
-	#createGhost(source) {
-		const content = document.createElement(`span`);
-		content.style.display = `inline-flex`;
-		content.style.alignItems = `center`;
-		content.style.gap = `var(--space-xs, 4px)`;
-		content.style.minWidth = `0`;
-		const iconName = source.iconName;
-		if (iconName) {
-			const icon = document.createElement(`ixfx-icon`);
-			icon.name = iconName;
-			content.appendChild(icon);
-		}
-		const label = document.createElement(`span`);
-		label.textContent = (source.textContent ?? ``).trim();
-		label.style.overflow = `hidden`;
-		label.style.textOverflow = `ellipsis`;
-		label.style.whiteSpace = `nowrap`;
-		content.appendChild(label);
-		try {
-			return createDragGhost({
-				anchor: source,
-				content
-			});
-		} catch {
-			return null;
-		}
-	}
-	/**
-	* Compute the index of the gap nearest the pointer, ignoring the source item.
-	* Returns 0..#items.length-1; undefined if no siblings.
-	*
-	* Per the plan: drag-mode="reorder" has "no sense of breaking out", so the
-	* perpendicular axis is ignored — the pointer always resolves to some gap.
-	*/
-	#computeGapIndex(clientX, clientY) {
-		const state = this.#dragState;
-		if (!state) return void 0;
-		const siblings = this.#items.filter((el) => el !== state.source);
-		if (siblings.length === 0) return 0;
-		const useX = !this.#isVertical;
-		let bestGap = 0;
-		let bestDist = Infinity;
-		for (let i = 0; i < siblings.length; i++) {
-			const rect = siblings[i].getBoundingClientRect();
-			const start = useX ? rect.left : rect.top;
-			const end = useX ? rect.right : rect.bottom;
-			const mid = (start + end) / 2;
-			const pos = useX ? clientX : clientY;
-			const dStart = Math.abs(pos - start);
-			Math.abs(pos - mid);
-			const dEnd = Math.abs(pos - end);
-			if (pos < mid) {
-				if (dStart < bestDist) {
-					bestDist = dStart;
-					bestGap = i;
-				}
-			} else if (dEnd < bestDist) {
-				bestDist = dEnd;
-				bestGap = i + 1;
-			}
-		}
-		return bestGap;
-	}
-	#computeCaretStyle() {
-		const state = this.#dragState;
-		if (!state?.active || state.gapIndex === void 0) return void 0;
-		const siblings = this.#items.filter((el) => el !== state.source);
-		if (siblings.length === 0) return void 0;
-		const useX = !this.#isVertical;
-		const containerRect = this.#containerEl?.getBoundingClientRect();
-		if (!containerRect) return void 0;
-		const gap = Math.max(0, Math.min(state.gapIndex, siblings.length));
-		let rect = null;
-		if (gap < siblings.length) rect = siblings[gap].getBoundingClientRect();
-		else rect = siblings[siblings.length - 1].getBoundingClientRect();
-		if (useX) {
-			const x = (gap < siblings.length ? rect.left : rect.right) - containerRect.left;
-			const y = 0;
-			const h = containerRect.height;
-			const w = 2;
-			return `transform: translate(${x - w / 2}px, ${y}px); width: ${w}px; height: ${h}px;`;
-		} else {
-			const y = (gap < siblings.length ? rect.top : rect.bottom) - containerRect.top;
-			const x = 0;
-			const w = containerRect.width;
-			const h = 2;
-			return `transform: translate(${x}px, ${y - h / 2}px); width: ${w}px; height: ${h}px;`;
-		}
-	}
-	get #containerEl() {
-		return this.shadowRoot?.getElementById(`container`) ?? null;
-	}
-	static {
-		this.styles = [themeFallbacks, css`
-  :host {
-      display: inline-block;
-      --activated-colour: var(--accent);
-      --colour: var(--surface-3-text);
-      --scroll-max-height: 200px;
-      --allow-overflow: hidden;
-      color: var(--colour);
-      border: var(--border, none);
-      border-color: var(--surface-5);
-      border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0;
-
-    }
-    :host(.scrollable) {
-      max-height: var(--scroll-max-height);
-    }
-    :host([hide-labels]) {
-      display: inline-flex;
-      width: auto;
-    }
-    text {
-      user-select:none;
-    }
-    #container {
-      display:flex;
-      position: relative;
-    }
-    #container.horizontal {
-      flex-direction: row;
-      overflow: hidden;
-    }
-    #container.horizontal.scrollable {
-      overflow-x: auto;
-      --allow-overflow: visible;
-    }
-    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {
-      flex-shrink: 0;
-    }
-    #container.vertical-stack {
-      flex-direction: column;
-    }
-    #container.vertical-stack.flip {
-      flex-direction: column-reverse;
-    }
-    #container.vertical-stack.scrollable {
-      overflow-y: auto;
-      max-height: var(--scroll-max-height);
-      --allow-overflow: visible;
-    }
-    #container.vertical-side {
-      flex-direction: column;
-    }
-    #container.vertical-side.flip {
-      flex-direction: column-reverse;
-    }
-    #container.vertical-side.scrollable {
-      overflow-y: auto;
-      max-height: var(--scroll-max-height);
-      --allow-overflow: visible;
-    }
-
-    ::slotted(ixfx-tab-list-item) {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-
-    #container.vertical-side ::slotted(ixfx-tab-list-item) {
-      writing-mode: vertical-lr;
-      text-orientation: mixed;
-    }
-    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {
-      writing-mode: vertical-rl;
-      text-orientation: mixed;
-    }
-
-    /* Drag affordances — opt-in via drag-mode="reorder" on the host (list). */
-    #container.reorder ::slotted(ixfx-tab-list-item) {
-      cursor: grab;
-    }
-    :host([drag-mode]) ::slotted(ixfx-tab-list-item[drag-source]) {
-      cursor: grabbing;
-      opacity: 0.4;
-      transition: opacity var(--transition, 0.15s ease-out);
-    }
-
-    /* Insertion caret shown during an active drag. */
-    .drop-caret {
-      position: absolute;
-      background: var(--accent);
-      border-radius: 1px;
-      pointer-events: none;
-      z-index: 1;
-    }
-
-    ::slotted(.activated) {
-      --colour: var(--activated-colour);
-    }
-  `];
-	}
-};
-__decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
-__decorate([property({ type: Boolean })], TabListElement.prototype, "flip", void 0);
-__decorate([property({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `hide-labels`
-})], TabListElement.prototype, "hideLabels", void 0);
-__decorate([property({
-	type: String,
-	attribute: `drag-mode`
-})], TabListElement.prototype, "dragMode", void 0);
-TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
-//#endregion
-export { TabListElement as t };
-
-//# sourceMappingURL=tab-list-CR0v53KJ.js.map