@ixfx/components 0.5.20 → 0.6.0

package/dist/ac-token.js

@@ -0,0 +1,646 @@
+import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as DataController } from "./data-controller-DOlmqNKb.js";
+import { n as createAcCompletionProvider } from "./incr-search-vCzuao-2.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/ac-token/ac-token.ts
+const DEFAULT_TOKENIZER = (text) => text.split(/[\s,;]+/);
+function makeLruCache(maxSize) {
+	const map = /* @__PURE__ */ new Map();
+	return {
+		get: (k) => map.get(k),
+		set: (k, v) => {
+			if (map.has(k)) map.delete(k);
+			map.set(k, v);
+			if (map.size > maxSize) map.delete(map.keys().next().value);
+		},
+		has: (k) => map.has(k),
+		clear: () => map.clear()
+	};
+}
+let AcTokenElement = class AcTokenElement extends LitElement {
+	#data;
+	#cache;
+	#debounceTimer;
+	#staticProvider;
+	#lastSuggestions;
+	constructor() {
+		super();
+		this.placeholder = ``;
+		this.cacheSize = 20;
+		this.debounceMs = 150;
+		this.strict = false;
+		this.allowDuplicates = false;
+		this._tokens = [];
+		this._draft = ``;
+		this._isOpen = false;
+		this._tickled = new TickledController(this, { getItems: () => this.#data.items.map((_, i) => ({
+			id: i,
+			enabled: true
+		})) });
+		this.#data = new DataController(this, void 0, {
+			clearOnRequest: true,
+			onError: (err) => console.error(`[ixfx-ac-token] completionProvider error:`, err)
+		});
+		this.#cache = makeLruCache(20);
+		this.#lastSuggestions = [];
+		this.#onWrapperClick = (e) => {
+			if (!e.target.closest(`.token-chip`)) this.shadowRoot?.querySelector(`input.draft`)?.focus();
+		};
+		this.#onFocus = () => {
+			this._selectedTokenIndex = void 0;
+			this.#scheduleSuggestionFetch(this._draft);
+		};
+		this.#onBlur = () => {
+			setTimeout(() => {
+				this._isOpen = false;
+				this._tickled.clearTickled();
+				this._selectedTokenIndex = void 0;
+			}, 120);
+		};
+		this.#onInput = (e) => {
+			const value = e.target.value;
+			this._selectedTokenIndex = void 0;
+			const parts = (this.tokenizer ?? DEFAULT_TOKENIZER)(value);
+			if (parts.length > 1) {
+				for (let i = 0; i < parts.length - 1; i++) {
+					const label = parts[i].trim();
+					if (label) this.#addToken({ label });
+				}
+				this._draft = parts[parts.length - 1] ?? ``;
+			} else this._draft = value;
+			this.#scheduleSuggestionFetch(this._draft);
+		};
+		this.#onKeyDown = (e) => {
+			const input = e.target;
+			if ((e.metaKey || e.ctrlKey) && e.key === `a`) {
+				e.preventDefault();
+				const parts = [...this._tokens.map((t) => t.label), this._draft.trim()].filter(Boolean);
+				navigator.clipboard.writeText(parts.join(` `)).catch(() => {});
+				return;
+			}
+			if (this._selectedTokenIndex !== void 0 && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+				e.preventDefault();
+				this.#startEditingSelectedToken(e.key);
+				return;
+			}
+			this.#handleNavigationKey(e, input);
+		};
+		this.#onPaste = (e) => {
+			e.preventDefault();
+			const text = e.clipboardData?.getData(`text/plain`) ?? ``;
+			if (!text) return;
+			const parts = (this.tokenizer ?? DEFAULT_TOKENIZER)(this._draft + text).filter(Boolean);
+			if (parts.length === 0) return;
+			if (parts.length === 1) this._draft = parts[0];
+			else {
+				for (let i = 0; i < parts.length - 1; i++) {
+					const label = parts[i].trim();
+					if (label) this.#addToken({ label });
+				}
+				this._draft = parts[parts.length - 1] ?? ``;
+			}
+			this.updateComplete.then(() => {
+				this.shadowRoot?.querySelector(`input.draft`)?.setSelectionRange(this._draft.length, this._draft.length);
+			});
+			this.#scheduleSuggestionFetch(this._draft);
+		};
+		this.#onSuggestionPointerDown = (e, item) => {
+			e.preventDefault();
+			this.#selectSuggestion(item);
+		};
+		this.#onChipPointerDown = (e, index) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			const el = e.currentTarget;
+			const startY = e.clientY;
+			let dragged = false;
+			el.setPointerCapture(e.pointerId);
+			const cleanup = () => {
+				el.removeEventListener(`pointermove`, onMove);
+				el.removeEventListener(`pointerup`, onUp);
+			};
+			const onMove = (me) => {
+				if (Math.abs(me.clientY - startY) > 28) {
+					dragged = true;
+					el.releasePointerCapture(me.pointerId);
+					cleanup();
+					this.#removeToken(index);
+					this.shadowRoot?.querySelector(`input.draft`)?.focus();
+				}
+			};
+			const onUp = () => {
+				cleanup();
+				if (!dragged) {
+					this._selectedTokenIndex = this._selectedTokenIndex === index ? void 0 : index;
+					this.shadowRoot?.querySelector(`input.draft`)?.focus();
+				}
+			};
+			el.addEventListener(`pointermove`, onMove);
+			el.addEventListener(`pointerup`, onUp);
+		};
+		this.#cache = makeLruCache(this.cacheSize);
+	}
+	get tokens() {
+		return this._tokens;
+	}
+	set tokens(value) {
+		this._tokens = [...value];
+		this.#emitChange();
+	}
+	/**
+	* Set the token list programmatically. Unlike the `tokens` property setter,
+	* this does not dispatch `ac-token-change` — use it for initialisation or any
+	* other programmatic update that should not re-enter a parent's own
+	* `ac-token-change` handler.
+	*/
+	setTokens(value) {
+		this._tokens = [...value];
+	}
+	/** All committed token labels joined with commas. */
+	get value() {
+		return this._tokens.map((t) => t.label).join(`, `);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#buildStaticProvider();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#debounceTimer !== void 0) {
+			clearTimeout(this.#debounceTimer);
+			this.#debounceTimer = void 0;
+		}
+	}
+	updated(changedProps) {
+		if (changedProps.has(`completionProvider`) || changedProps.has(`cacheSize`)) this.#cache = makeLruCache(this.cacheSize);
+		if (changedProps.has(`completionProvider`)) this.#buildStaticProvider();
+		if (this.#data.items !== this.#lastSuggestions) {
+			this.#lastSuggestions = this.#data.items;
+			if (this.#data.items.length > 0) this._tickled.setTickled(0);
+			else this._tickled.clearTickled();
+		}
+	}
+	#buildStaticProvider() {
+		const raw = this.getAttribute(`data-tokens`);
+		if (!raw || this.completionProvider) {
+			this.#staticProvider = void 0;
+			return;
+		}
+		const items = raw.trim().split(/[\s,;]+/).filter(Boolean).map((label) => ({ label }));
+		this.#staticProvider = createAcCompletionProvider(items);
+	}
+	#onWrapperClick;
+	#onFocus;
+	#onBlur;
+	#onInput;
+	#onKeyDown;
+	#handleNavigationKey(e, input) {
+		switch (e.key) {
+			case `ArrowLeft`:
+				if (input.selectionStart === 0 && input.selectionEnd === 0) {
+					e.preventDefault();
+					if (this._selectedTokenIndex === void 0) {
+						if (this._tokens.length > 0) this._selectedTokenIndex = this._tokens.length - 1;
+					} else if (this._selectedTokenIndex > 0) this._selectedTokenIndex--;
+				}
+				break;
+			case `ArrowRight`:
+				if (this._selectedTokenIndex !== void 0) {
+					e.preventDefault();
+					if (this._selectedTokenIndex < this._tokens.length - 1) this._selectedTokenIndex++;
+					else this._selectedTokenIndex = void 0;
+				}
+				break;
+			case `Backspace`:
+				if (input.selectionStart === 0 && input.selectionEnd === 0) {
+					e.preventDefault();
+					if (this._selectedTokenIndex !== void 0) this.#removeToken(this._selectedTokenIndex);
+					else if (this._tokens.length > 0) this.#removeToken(this._tokens.length - 1);
+				}
+				break;
+			case `Enter`: {
+				const tickledIdx = this._tickled.tickledId;
+				if (this._isOpen && tickledIdx !== void 0 && this.#data.items[tickledIdx]) {
+					e.preventDefault();
+					this.#selectSuggestion(this.#data.items[tickledIdx]);
+				} else if (!this.strict && this._draft.trim()) {
+					e.preventDefault();
+					this.#addToken({ label: this._draft.trim() });
+					this._draft = ``;
+					this.#closePopup();
+				}
+				break;
+			}
+			case `ArrowDown`:
+				if (!this._isOpen) return;
+				e.preventDefault();
+				this._tickled.handleKeyboardNavigation(`next`);
+				this.#scrollSuggestionIntoView();
+				break;
+			case `ArrowUp`:
+				if (!this._isOpen) return;
+				e.preventDefault();
+				this._tickled.handleKeyboardNavigation(`previous`);
+				this.#scrollSuggestionIntoView();
+				break;
+			case `Escape`:
+				e.preventDefault();
+				this.#closePopup();
+				this._selectedTokenIndex = void 0;
+		}
+	}
+	#onPaste;
+	#onSuggestionPointerDown;
+	#onChipPointerDown;
+	#startEditingSelectedToken(key) {
+		const idx = this._selectedTokenIndex;
+		if (idx === void 0) return;
+		const token = this._tokens[idx];
+		if (!token) return;
+		const newDraft = token.label + key;
+		this.#removeToken(idx);
+		this._selectedTokenIndex = void 0;
+		this._draft = newDraft;
+		this.updateComplete.then(() => {
+			const inp = this.shadowRoot?.querySelector(`input.draft`);
+			if (!inp) return;
+			inp.setSelectionRange(inp.value.length, inp.value.length);
+		});
+		this.#scheduleSuggestionFetch(newDraft);
+	}
+	#addToken(item) {
+		const index = this._tokens.length;
+		this._tokens = [...this._tokens, item];
+		this.dispatchEvent(new CustomEvent(`ac-token-add`, {
+			detail: {
+				item,
+				index
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.#emitChange();
+	}
+	#removeToken(index) {
+		const item = this._tokens[index];
+		if (!item) return;
+		this._tokens = this._tokens.filter((_, i) => i !== index);
+		if (this._selectedTokenIndex !== void 0) {
+			if (this._selectedTokenIndex === index) this._selectedTokenIndex = void 0;
+			else if (this._selectedTokenIndex > index) this._selectedTokenIndex--;
+		}
+		this.dispatchEvent(new CustomEvent(`ac-token-remove`, {
+			detail: {
+				item,
+				index
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.#emitChange();
+	}
+	#selectSuggestion(item) {
+		this.#addToken(item);
+		this._draft = ``;
+		this.#closePopup();
+	}
+	#emitChange() {
+		this.dispatchEvent(new CustomEvent(`ac-token-change`, {
+			detail: { tokens: this._tokens },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#filterUsed(items) {
+		if (this.allowDuplicates) return items;
+		const used = new Set(this._tokens.map((t) => t.label));
+		return items.filter((item) => !used.has(item.label));
+	}
+	#closePopup() {
+		this._isOpen = false;
+		this._tickled.clearTickled();
+	}
+	#cancelPending() {
+		if (this.#debounceTimer !== void 0) {
+			clearTimeout(this.#debounceTimer);
+			this.#debounceTimer = void 0;
+		}
+		this.#data.cancel();
+	}
+	#scheduleSuggestionFetch(query) {
+		const cachedProvider = this.#buildCachedProvider();
+		if (!cachedProvider) {
+			this._isOpen = false;
+			return;
+		}
+		if (this.#debounceTimer !== void 0) clearTimeout(this.#debounceTimer);
+		this._isOpen = true;
+		this.#debounceTimer = setTimeout(() => {
+			this.#data.provider = cachedProvider;
+			this.#data.request(query);
+		}, this.debounceMs);
+	}
+	#buildCachedProvider() {
+		const raw = this.completionProvider ?? this.#staticProvider;
+		if (!raw) return void 0;
+		return (query, signal) => {
+			const hit = this.#cache.get(query);
+			if (hit !== void 0) return this.#filterUsed(hit);
+			const result = raw(query, signal);
+			if (Symbol.asyncIterator in new Object(result)) return result;
+			if (Array.isArray(result)) {
+				this.#cache.set(query, result);
+				return this.#filterUsed(result);
+			}
+			return result.then((items) => {
+				if (!signal.aborted) this.#cache.set(query, items);
+				return this.#filterUsed(items);
+			});
+		};
+	}
+	#scrollSuggestionIntoView() {
+		this.updateComplete.then(() => {
+			this.shadowRoot?.querySelector(`.item.tickled`)?.scrollIntoView({ block: `nearest` });
+		});
+	}
+	#renderChip(item, index) {
+		const isSelected = this._selectedTokenIndex === index;
+		return html`
+      <span
+        class="token-chip ${isSelected ? `selected` : ``}"
+        title=${item.subLabel ?? nothing}
+        @pointerdown=${(e) => this.#onChipPointerDown(e, index)}
+      >
+        ${item.icon ? html`<ixfx-icon class="chip-icon" name=${item.icon}></ixfx-icon>` : nothing}
+        <span class="chip-label">${item.label}</span>
+      </span>
+    `;
+	}
+	#renderSuggestion(item, index) {
+		const isTickled = this._tickled.isTickled(index);
+		return html`
+      <div
+        class="item ${isTickled ? `tickled` : ``}"
+        role="option"
+        id="ac-token-sugg-${index}"
+        aria-selected=${isTickled}
+        @pointerenter=${() => this._tickled.handlePointerEnter(index)}
+        @pointerdown=${(e) => this.#onSuggestionPointerDown(e, item)}
+      >
+        ${item.icon ? html`<ixfx-icon class="sugg-icon" name=${item.icon}></ixfx-icon>` : nothing}
+        <span class="sugg-label">${item.label}</span>
+        ${item.subLabel ? html`<span class="sugg-sublabel">${item.subLabel}</span>` : nothing}
+      </div>
+    `;
+	}
+	#renderPopup() {
+		const showEmpty = !this.#data.loading && this.#data.items.length === 0;
+		return html`
+      <div
+        class="popup"
+        role="listbox"
+        aria-label="Suggestions"
+        data-input-mode=${this._tickled.inputMode}
+        @pointerleave=${(e) => this._tickled.handlePointerLeave(e)}
+      >
+        ${showEmpty ? html`<div class="no-results">No matching results</div>` : this.#data.items.map((item, i) => this.#renderSuggestion(item, i))}
+      </div>
+    `;
+	}
+	render() {
+		const tickledIdx = this._tickled.tickledId ?? -1;
+		const activeDescendant = tickledIdx >= 0 ? `ac-token-sugg-${tickledIdx}` : void 0;
+		const showPlaceholder = this._tokens.length === 0 ? this.placeholder || nothing : nothing;
+		return html`
+      <div class="wrapper" @click=${this.#onWrapperClick}>
+        ${this._tokens.map((t, i) => this.#renderChip(t, i))}
+        <input
+          type="text"
+          class="draft"
+          .value=${this._draft}
+          placeholder=${showPlaceholder}
+          autocomplete="off"
+          spellcheck="false"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded=${this._isOpen}
+          aria-activedescendant=${activeDescendant ?? nothing}
+          @input=${this.#onInput}
+          @keydown=${this.#onKeyDown}
+          @focus=${this.#onFocus}
+          @blur=${this.#onBlur}
+          @paste=${this.#onPaste}
+        >
+        ${this.#data.loading ? html`<span class="spinner" aria-hidden="true"></span>` : nothing}
+      </div>
+      ${this._isOpen ? this.#renderPopup() : nothing}
+    `;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			css`
+    :host {
+      display: block;
+      position: relative;
+      font-family: var(--font-family, system-ui, sans-serif);
+      font-size: var(--text-m, 12px);
+      color: var(--surface-2-text);
+    }
+
+    /* ---- Wrapper (looks like a text input) ---- */
+
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ac-token-chip-gap, var(--space-xs, 3px));
+      padding: var(--ac-token-input-padding, var(--space-xs, 3px) var(--space-m, 8px));
+      background: var(--ac-token-input-background, var(--surface-3, var(--surface-2)));
+      color: var(--surface-2-text);
+      border: var(--ac-token-input-border, var(--border));
+      border-radius: var(--ac-token-input-border-radius, var(--radius-m, 4px));
+      cursor: text;
+      min-height: 32px;
+      box-sizing: border-box;
+      transition: border-color var(--transition, 0.15s ease-out);
+    }
+
+    .wrapper:focus-within {
+      border-color: var(--accent);
+    }
+
+    /* ---- Token chips ---- */
+
+    .token-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs, 3px);
+      padding: 1px var(--space-m, 8px);
+      background: var(--ac-token-chip-background, var(--surface-4));
+      border: var(--ac-token-chip-border, var(--border));
+      border-radius: var(--ac-token-chip-border-radius, var(--radius-s, 3px));
+      user-select: none;
+      cursor: default;
+      font-size: var(--text-s, 11px);
+      white-space: nowrap;
+      touch-action: none;
+      transition:
+        background var(--transition, 0.1s ease-out),
+        border-color var(--transition, 0.1s ease-out),
+        color var(--transition, 0.1s ease-out);
+    }
+
+    .token-chip.selected {
+      background: var(--ac-token-chip-selected-background, var(--accent));
+      color: var(--ac-token-chip-selected-color, var(--accent-text, #fff));
+      border-color: var(--accent);
+    }
+
+    .chip-icon {
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+    }
+
+    /* ---- Draft input ---- */
+
+    input.draft {
+      flex: 1;
+      min-width: 60px;
+      border: none;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      outline: none;
+      caret-color: var(--accent);
+      padding: 1px 0;
+      anchor-name: --ac-token-draft;
+    }
+
+    input.draft::placeholder {
+      color: var(--surface-muted-text);
+    }
+
+    /* ---- Spinner ---- */
+
+    .spinner {
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--surface-5);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: ac-token-spin 0.7s linear infinite;
+      flex-shrink: 0;
+      pointer-events: none;
+      margin-left: var(--space-xs, 3px);
+    }
+
+    @keyframes ac-token-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* ---- Popup ---- */
+
+    .popup {
+      position: fixed;
+      position-anchor: --ac-token-draft;
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: 2px;
+      position-try-fallbacks: --ac-token-popup-above;
+      z-index: 200;
+      background: var(--surface-3, var(--surface-2));
+      border: var(--border);
+      border-radius: var(--radius-m, 4px);
+      box-shadow: var(--shadow-l, 0 4px 24px rgba(0, 0, 0, 0.5));
+      padding: var(--space-xs, 3px) 0;
+      max-height: 260px;
+      min-width: 160px;
+      overflow-y: auto;
+      font-size: var(--ac-token-popup-font-size, var(--text-s, 11px));
+    }
+
+    @position-try --ac-token-popup-above {
+      top: auto;
+      bottom: anchor(top);
+      left: anchor(left);
+      margin-top: 0;
+      margin-bottom: 2px;
+    }
+
+    /* ---- Suggestion items ---- */
+
+    .item {
+      /* tickledItemStyles provides base; override layout for popup context */
+      display: flex;
+      padding: var(--item-padding, var(--space-xs, 3px) var(--space-l, 12px));
+      gap: var(--space-m, 8px);
+      cursor: pointer;
+      margin: 0 var(--space-xs, 3px);
+      white-space: nowrap;
+      min-height: 28px;
+      user-select: none;
+    }
+
+    .sugg-icon {
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+    }
+
+    .sugg-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .sugg-sublabel {
+      flex-shrink: 0;
+      margin-left: auto;
+      color: var(--surface-muted-text);
+      font-size: var(--text-s, 11px);
+    }
+
+    /* ---- Empty state ---- */
+
+    .no-results {
+      padding: var(--space-m, 8px) var(--space-l, 12px);
+      color: var(--surface-muted-text);
+      font-style: italic;
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: Object })], AcTokenElement.prototype, "completionProvider", void 0);
+__decorate([property({ type: Object })], AcTokenElement.prototype, "tokenizer", void 0);
+__decorate([property({ type: String })], AcTokenElement.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `cache-size`
+})], AcTokenElement.prototype, "cacheSize", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `debounce-ms`
+})], AcTokenElement.prototype, "debounceMs", void 0);
+__decorate([property({ type: Boolean })], AcTokenElement.prototype, "strict", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-duplicates`
+})], AcTokenElement.prototype, "allowDuplicates", void 0);
+__decorate([state()], AcTokenElement.prototype, "_tokens", void 0);
+__decorate([state()], AcTokenElement.prototype, "_draft", void 0);
+__decorate([state()], AcTokenElement.prototype, "_selectedTokenIndex", void 0);
+__decorate([state()], AcTokenElement.prototype, "_isOpen", void 0);
+AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
+//#endregion
+export { AcTokenElement };
+
+//# sourceMappingURL=ac-token.js.map