monobill-mintui 0.6.612 → 0.6.613

package/dist/components/search/browser.js

@@ -0,0 +1,681 @@
+
+const __mintLoadStyle = (key, url) => {
+  if (typeof document === 'undefined') return
+  const href = new URL(url, import.meta.url).href
+  if ([...document.querySelectorAll('link[rel="stylesheet"]')].some(link => link.href === href)) return
+  if (document.querySelector('style[data-mint-ui-style="' + key + '"]') || document.querySelector('link[data-mint-ui-style="' + key + '"]')) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.dataset.mintUiStyle = key
+  document.head.append(link)
+}
+__mintLoadStyle('theme', '../../theme.css')
+__mintLoadStyle('icon', '../../icon.css')
+__mintLoadStyle('chip', '../../chip.css')
+__mintLoadStyle('input', '../../input.css')
+__mintLoadStyle('button', '../../button.css')
+__mintLoadStyle('spinner', '../../spinner.css')
+__mintLoadStyle('search', '../../search.css')
+import "../chunks/icon-gQAtsERy.js";
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/icon-C0OLmjDY.js";
+import "../chunks/close-Dg6U0IjZ.js";
+import "../chunks/button-B0Yt0MX1.js";
+import "../chunks/chip-B9whjEvW.js";
+import "../chunks/input-8bbXzpa5.js";
+import "../chunks/search-ANUKQi0r.js";
+//#region src/components/search/Search.ts
+var t = class e extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._shell = null, this._desktopInput = null, this._panel = null, this._panelInner = null, this._resultsId = "", this._panelInput = null, this._panelFiltersWrap = null, this._panelFiltersMainRow = null, this._panelFiltersChips = null, this._panelFiltersShowAllWrap = null, this._panelFiltersShowAllBtn = null, this._panelFiltersMorePanel = null, this._filtersMoreOpen = !1, this._filterOverflowObserver = null, this._filterOverflowZeroWidthRetries = 0, this._desktopFilterWrap = null, this._mobileFilterWrap = null, this._resultsWrap = null, this._stateWrap = null, this._customResultsWrap = null, this._query = "", this._searchOpen = !1, this._selectedFilters = [], this._selectedFilterBackspaceArmed = !1, this._debounceId = null, this._abortController = null, this._docPointerDownHandler = null, this._globalKeydownHandler = null, this._focusOutHandler = null, this._resizeHandler = null, this._scrollHandler = null, this._desktopShortcutHint = null, this._panelSearchBar = null, this._contentObserver = null, this._renderFrame = null;
+	}
+	static {
+		this._filterMorePanelSeq = 0;
+	}
+	static {
+		this._filterChipsOverflowMask = "linear-gradient(to right, #000 0%, #000 max(0%, calc(100% - 3.5rem)), transparent 100%)";
+	}
+	static get observedAttributes() {
+		return [
+			"endpoint",
+			"search-param",
+			"placeholder",
+			"filters",
+			"filter-param",
+			"open-shortcut",
+			"open-shortcut-hint",
+			"collapse-on-mobile",
+			"results-limit"
+		];
+	}
+	connectedCallback() {
+		this.classList.add("mint-search-host"), this._attachGlobalHandlers(), this._attachFocusOutHandler(), this._attachResizeHandler(), this.render(), this._observeContentMutations();
+	}
+	disconnectedCallback() {
+		this._panel?.remove(), this._docPointerDownHandler &&= (document.removeEventListener("pointerdown", this._docPointerDownHandler, !0), null), this._globalKeydownHandler &&= (document.removeEventListener("keydown", this._globalKeydownHandler), null), this._resizeHandler &&= (window.removeEventListener("resize", this._resizeHandler), null), this._scrollHandler &&= (document.removeEventListener("scroll", this._scrollHandler, !0), null), this._focusOutHandler &&= (this.removeEventListener("focusout", this._focusOutHandler, !0), null), this._cancelDebounce(), this._abortSearch(), this._filterOverflowObserver &&= (this._filterOverflowObserver.disconnect(), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && this.render();
+	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
+	_getEndpoint() {
+		return (this.getAttribute("endpoint") || "").trim();
+	}
+	_getSearchParam() {
+		return (this.getAttribute("search-param") || "q").trim() || "q";
+	}
+	_getPlaceholder() {
+		return this.getAttribute("placeholder") || "Search";
+	}
+	_getFilterParam() {
+		return (this.getAttribute("filter-param") || "").trim();
+	}
+	_getFilterOptions() {
+		return (this.getAttribute("filters") || "").split(",").map((e) => e.trim()).filter(Boolean);
+	}
+	_hasSelectedFilters() {
+		return this._selectedFilters.length > 0;
+	}
+	_getFilterChipOverflowReservePx() {
+		let e = Math.max(1, this._getFilterOptions().length), t = this._hasSelectedFilters() ? 28 : 56;
+		return Math.min(200, t + e * 34);
+	}
+	_getFilterParamValue() {
+		return this._selectedFilters.join(",");
+	}
+	_getFilterChipLabelText() {
+		return this._selectedFilters.join(", ");
+	}
+	_getCondensedFilterChipLabel(e = 22) {
+		if (!this._hasSelectedFilters()) return "";
+		let [t = ""] = this._selectedFilters, n = this._selectedFilters.length - 1, r = Math.max(8, e - 2), i = t;
+		if (n <= 0) return i.length <= r ? i : `${i.slice(0, Math.max(1, r - 3))}...`;
+		let a = `${t}, and ${n} more`;
+		return a.length <= r ? a : `${a.slice(0, Math.max(1, r - 3))}...`;
+	}
+	_isMobileViewport() {
+		return window.matchMedia("(max-width: 1099.98px)").matches;
+	}
+	_collapseOnMobile() {
+		let e = this.getAttribute("collapse-on-mobile");
+		if (e === null) return !1;
+		let t = e.trim().toLowerCase();
+		return !(t === "false" || t === "0" || t === "off" || t === "none");
+	}
+	_primarySearchInput() {
+		return this._isMobileViewport() && this._collapseOnMobile() ? this._panelInput : this._desktopInput;
+	}
+	_isApplePlatform() {
+		return typeof navigator > "u" ? !1 : /Mac|iPhone|iPad|iPod/i.test(navigator.platform) || /Mac OS/i.test(navigator.userAgent);
+	}
+	_parseOpenShortcut() {
+		let e = (this.getAttribute("open-shortcut") ?? "mod+k").trim().toLowerCase();
+		if (!e || e === "none" || e === "false" || e === "off") return {
+			disabled: !0,
+			wantMod: !1,
+			wantMeta: !1,
+			wantCtrl: !1,
+			wantAlt: !1,
+			wantShift: !1,
+			key: ""
+		};
+		let t = e.split("+").map((e) => e.trim()).filter(Boolean);
+		if (t.length === 0) return {
+			disabled: !0,
+			wantMod: !1,
+			wantMeta: !1,
+			wantCtrl: !1,
+			wantAlt: !1,
+			wantShift: !1,
+			key: ""
+		};
+		let n = t[t.length - 1], r = new Set(t.slice(0, -1).map((e) => e.toLowerCase()));
+		return {
+			disabled: !1,
+			wantMod: r.has("mod"),
+			wantMeta: r.has("meta") || r.has("cmd") || r.has("super"),
+			wantCtrl: r.has("ctrl") || r.has("control"),
+			wantAlt: r.has("alt"),
+			wantShift: r.has("shift"),
+			key: n.toLowerCase()
+		};
+	}
+	_eventKeyMatchesShortcutKey(e, t) {
+		let n = t.toLowerCase();
+		return (e.key.length, e.key.toLowerCase()) === n;
+	}
+	_openShortcutMatches(e) {
+		let t = this._parseOpenShortcut();
+		return t.disabled || !t.key || e.repeat || !this._eventKeyMatchesShortcutKey(e, t.key) || t.wantShift !== e.shiftKey || t.wantAlt !== e.altKey ? !1 : t.wantMod || t.wantMeta || t.wantCtrl ? !(t.wantMod && !(e.metaKey || e.ctrlKey) || t.wantMeta && !e.metaKey || t.wantCtrl && !e.ctrlKey) : !!t.wantAlt;
+	}
+	_getOpenShortcutHintText() {
+		let e = this.getAttribute("open-shortcut-hint");
+		if (e === "none" || e === "false") return "";
+		if (e !== null && e.trim() !== "") return e.trim();
+		let t = this._parseOpenShortcut();
+		if (t.disabled) return "";
+		let n = this._isApplePlatform(), r = [];
+		t.wantMod && r.push(n ? "⌘" : "Ctrl"), t.wantMeta && !t.wantMod && r.push(n ? "⌘" : "Meta"), t.wantCtrl && !t.wantMod && r.push("Ctrl"), t.wantAlt && r.push("Alt"), t.wantShift && r.push("Shift");
+		let i = t.key.length === 1 ? t.key.toUpperCase() : t.key;
+		return i ? t.wantMod && !t.wantMeta && !t.wantCtrl && !t.wantAlt && !t.wantShift && t.key.length === 1 ? `${n ? "⌘" : "Ctrl+"}${i}` : [...r, i].join("+") : "";
+	}
+	_attachGlobalHandlers() {
+		this._globalKeydownHandler || (this._globalKeydownHandler = (e) => {
+			if (this._openShortcutMatches(e)) {
+				e.preventDefault(), this._openSearch(!0);
+				return;
+			}
+			if (e.key === "Tab" && this._searchOpen) {
+				let t = e.composedPath();
+				if (this._shell && t.includes(this._shell) || this._panelInner && t.includes(this._panelInner)) {
+					let t = this._getSearchFocusableElements();
+					if (t.length) {
+						let n = document.activeElement, r = n ? t.indexOf(n) : -1, i = e.shiftKey ? -1 : 1, a = r < 0 ? e.shiftKey ? t.length - 1 : 0 : (r + i + t.length) % t.length;
+						e.preventDefault(), t[a]?.focus();
+					}
+				}
+				return;
+			}
+			if (e.key.toLowerCase() === "escape" && this._searchOpen) {
+				if (this._filtersMoreOpen) {
+					this._filtersMoreOpen = !1, this.render(), requestAnimationFrame(() => this._focusActiveInput());
+					return;
+				}
+				this._closeSearch();
+			}
+		}, document.addEventListener("keydown", this._globalKeydownHandler)), this._docPointerDownHandler || (this._docPointerDownHandler = (e) => {
+			if (!this._searchOpen) return;
+			let t = e.composedPath();
+			this._filtersMoreOpen && this._panelFiltersWrap && !t.includes(this._panelFiltersWrap) && (this._filtersMoreOpen = !1, this.render(), requestAnimationFrame(() => this._focusActiveInput())), !(this._shell && t.includes(this._shell) || this._panelInner && t.includes(this._panelInner)) && this._closeSearch();
+		}, document.addEventListener("pointerdown", this._docPointerDownHandler, !0));
+	}
+	_attachResizeHandler() {
+		this._resizeHandler || (this._resizeHandler = () => {
+			this._syncPanelVisibility(), this._syncFilterOverflow();
+		}, window.addEventListener("resize", this._resizeHandler, { passive: !0 })), this._scrollHandler || (this._scrollHandler = () => {
+			this._searchOpen && this._positionPanel();
+		}, document.addEventListener("scroll", this._scrollHandler, !0));
+	}
+	_attachFocusOutHandler() {
+		this._focusOutHandler || (this._focusOutHandler = (e) => {
+			if (!this._searchOpen) return;
+			let t = e.relatedTarget;
+			t && (this._shell && this._shell.contains(t) || this._panelInner && this._panelInner.contains(t) || this._closeSearch());
+		}, this.addEventListener("focusout", this._focusOutHandler, !0));
+	}
+	_emitSearchOpenChange() {
+		this.dispatchEvent(new CustomEvent("search-open-change", {
+			detail: { open: this._searchOpen },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_openSearch(e = !1) {
+		this._getEndpoint() && (this._searchOpen || (this._searchOpen = !0, this._syncPanelVisibility(), this._emitSearchOpenChange(), e && this._primarySearchInput()?.focus()));
+	}
+	_closeSearch() {
+		this._searchOpen && (this._searchOpen = !1, this._filtersMoreOpen = !1, this._syncPanelVisibility(), this._emitSearchOpenChange());
+	}
+	_syncPanelVisibility() {
+		if (this._panel) {
+			this._syncPanelLayoutClass(), this._panel.classList.toggle("is-hidden", !this._searchOpen), this._panel.classList.toggle("is-open", this._searchOpen), this._shell && this._shell.classList.toggle("is-open", this._searchOpen);
+			for (let e of [this._desktopInput, this._panelInput]) {
+				let t = e?.querySelector("input");
+				t && (t.setAttribute("aria-expanded", String(this._searchOpen)), this._resultsId && t.setAttribute("aria-controls", this._resultsId));
+			}
+			this._positionPanel(), this._searchOpen && this._scheduleFilterOverflowSync();
+		}
+	}
+	_syncPanelLayoutClass() {
+		if (!this._panel) return;
+		let e = !this._isMobileViewport() || !this._collapseOnMobile();
+		this._panel.classList.toggle("mint-search-panel-anchored", e), this._panel.classList.toggle("mint-search-panel-mobile", !e), this._panel.classList.toggle("mint-search-panel-global", this.classList.contains("global-search-control"));
+	}
+	_positionPanel() {
+		if (!this._panel) return;
+		if (!(!this._isMobileViewport() || !this._collapseOnMobile())) {
+			this._panel.style.left = "", this._panel.style.right = "", this._panel.style.top = "", this._panel.style.bottom = "", this._panel.style.width = "", this._panel.classList.remove("is-open-above"), this._panelInner && (this._panelInner.style.maxHeight = "");
+			return;
+		}
+		let e = this._shell?.getBoundingClientRect();
+		if (!e) return;
+		let t = window.innerHeight, n = Math.max(0, Math.min(416, t - 16)), r = Math.max(0, t - e.bottom - 4), i = Math.max(0, e.top - 4), a = r < n && i > r, o = Math.min(n, a ? i : r);
+		this._panel.classList.toggle("is-open-above", a), this._panelInner && (this._panelInner.style.maxHeight = `${o}px`), this._panel.style.left = `${e.left}px`, this._panel.style.width = `${e.width}px`, this._panel.style.right = "auto", a ? (this._panel.style.top = "auto", this._panel.style.bottom = `${Math.max(0, t - e.top - 4)}px`) : (this._panel.style.top = `${e.bottom - 4}px`, this._panel.style.bottom = "auto");
+	}
+	_setQuery(e) {
+		let t = this._query;
+		this._query = e, e !== t && (this._selectedFilterBackspaceArmed = !1), this._desktopInput && (this._desktopInput.value = e), this._panelInput && (this._panelInput.value = e);
+	}
+	_cancelDebounce() {
+		this._debounceId !== null && (window.clearTimeout(this._debounceId), this._debounceId = null);
+	}
+	_abortSearch() {
+		this._abortController &&= (this._abortController.abort(), null);
+	}
+	_normalizeResults(e) {
+		let t = Number.parseInt(this.getAttribute("results-limit") || "", 10), n = Number.isFinite(t) && t > 0 ? Math.min(t, 1e3) : 8;
+		return ((e) => {
+			if (Array.isArray(e)) return e;
+			if (!e || typeof e != "object") return [];
+			let t = e;
+			for (let e of [
+				"results",
+				"items",
+				"data",
+				"products"
+			]) {
+				let n = t[e];
+				if (Array.isArray(n)) return n;
+			}
+			return [];
+		})(e).map((e) => {
+			let t = e || {};
+			return {
+				title: String(t.title || t.name || t.label || t.email || t.id || "").trim() || "Untitled",
+				subtitle: String(t.description || t.category || t.username || "").trim(),
+				parent: String(t.parent || t.type || t.entity || t.kind || t.category || "").trim() || void 0
+			};
+		}).slice(0, n);
+	}
+	_emitResultsChange(e, t) {
+		let n = this._hasSelectedFilters() ? this._getFilterParamValue() : null;
+		this.dispatchEvent(new CustomEvent("search-results-change", {
+			detail: {
+				query: this._query,
+				filter: n,
+				filters: [...this._selectedFilters],
+				results: e,
+				raw: t ?? null
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_emitFilterChange() {
+		let e = this._hasSelectedFilters() ? this._getFilterParamValue() : null;
+		this.dispatchEvent(new CustomEvent("search-filter-change", {
+			detail: {
+				query: this._query,
+				filter: e,
+				filters: [...this._selectedFilters]
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_renderState(e) {
+		if (this._customResultsWrap && this._customResultsWrap.childElementCount > 0) {
+			this._stateWrap && this._stateWrap.classList.add("is-hidden"), this._resultsWrap && this._resultsWrap.classList.add("is-hidden");
+			return;
+		}
+		this._stateWrap && (this._stateWrap.textContent = e, this._stateWrap.classList.remove("is-hidden"), this._resultsWrap && (this._resultsWrap.classList.remove("is-hidden"), this._resultsWrap.innerHTML = ""));
+	}
+	_renderResults(e) {
+		if (this._customResultsWrap && this._customResultsWrap.childElementCount > 0) {
+			this._stateWrap && this._stateWrap.classList.add("is-hidden"), this._resultsWrap && this._resultsWrap.classList.add("is-hidden");
+			return;
+		}
+		if (!(!this._resultsWrap || !this._stateWrap)) {
+			if (this._resultsWrap.innerHTML = "", e.length === 0) {
+				this._renderState("No results found");
+				return;
+			}
+			this._stateWrap.classList.add("is-hidden");
+			for (let t of e) {
+				let e = document.createElement("button");
+				e.type = "button", e.className = "mint-search-result", e.setAttribute("role", "option"), e.setAttribute("aria-selected", "false");
+				let n = document.createElement("mint-icon");
+				n.setAttribute("name", "search"), n.className = "mint-search-result-icon";
+				let r = document.createElement("div");
+				r.className = "mint-search-result-copy";
+				let i = document.createElement("div");
+				if (i.className = "mint-search-result-title", i.textContent = t.title, r.appendChild(i), t.subtitle) {
+					let e = document.createElement("div");
+					e.className = "mint-search-result-subtitle", e.textContent = t.subtitle, r.appendChild(e);
+				}
+				e.appendChild(n), e.appendChild(r), e.addEventListener("keydown", (t) => {
+					if (t.key === "ArrowDown") {
+						t.preventDefault(), this._moveFocusInResults(e, 1);
+						return;
+					}
+					if (t.key === "ArrowUp") {
+						t.preventDefault(), this._moveFocusInResults(e, -1);
+						return;
+					}
+				}), e.addEventListener("click", () => {
+					let e = this._hasSelectedFilters() ? this._getFilterParamValue() : null;
+					this.dispatchEvent(new CustomEvent("search-select", {
+						detail: {
+							query: this._query,
+							filter: e,
+							filters: [...this._selectedFilters],
+							result: t
+						},
+						bubbles: !0,
+						composed: !0
+					})), this._closeSearch();
+				}), this._resultsWrap.appendChild(e);
+			}
+		}
+	}
+	_fetchSearchResults(e) {
+		let t = this._getEndpoint();
+		if (!t) return;
+		let n = e.trim();
+		if (!n) {
+			this._emitResultsChange([]), this._renderState("Start typing to search");
+			return;
+		}
+		this._abortSearch(), this._abortController = new AbortController(), this._renderState("Searching...");
+		let r = new URLSearchParams();
+		r.set(this._getSearchParam(), n);
+		let i = this._getFilterParam();
+		i && this._hasSelectedFilters() && r.set(i, this._getFilterParamValue());
+		let a = t.includes("{query}") ? t.replace("{query}", encodeURIComponent(n)) : `${t}${t.includes("?") ? "&" : "?"}${r.toString()}`;
+		fetch(a, { signal: this._abortController.signal }).then((e) => {
+			if (!e.ok) throw Error(`Request failed: ${e.status}`);
+			return e.json();
+		}).then((e) => {
+			let t = this._normalizeResults(e);
+			this._emitResultsChange(t, e), this._renderResults(t);
+		}).catch((e) => {
+			e?.name !== "AbortError" && (this._emitResultsChange([]), this._renderState("Unable to load results"));
+		});
+	}
+	_scheduleSearch(e) {
+		this._setQuery(e), this._cancelDebounce(), this._debounceId = window.setTimeout(() => this._fetchSearchResults(e), 220);
+	}
+	_getNativeInputValue(e) {
+		if (!e) return "";
+		let t = e.querySelector("input, textarea");
+		return t ? t.value || "" : e.value || "";
+	}
+	_getCurrentInputValue() {
+		let e = document.activeElement;
+		return e && this._desktopInput && this._desktopInput.contains(e) ? this._getNativeInputValue(this._desktopInput) : e && this._panelInput && this._panelInput.contains(e) ? this._getNativeInputValue(this._panelInput) : this._getNativeInputValue(this._primarySearchInput());
+	}
+	_applyFilterSelectionChange() {
+		let e = this._getCurrentInputValue();
+		if (this._setQuery(e), this._emitFilterChange(), this.render(), e.trim()) {
+			this._scheduleSearch(e);
+			return;
+		}
+		this._cancelDebounce(), this._abortSearch(), this._emitResultsChange([]), this._renderState("Start typing to search");
+	}
+	_clearAllSelectedFilters() {
+		this._selectedFilters = [], this._selectedFilterBackspaceArmed = !1, this._applyFilterSelectionChange();
+	}
+	_popLastSelectedFilter() {
+		this._selectedFilters.length !== 0 && (this._selectedFilters.pop(), this._selectedFilterBackspaceArmed = !1, this._applyFilterSelectionChange());
+	}
+	_focusActiveInput() {
+		let e = this._primarySearchInput();
+		e && requestAnimationFrame(() => {
+			e.focus();
+		});
+	}
+	_focusHideFiltersControl() {
+		let e = this._panelFiltersShowAllBtn;
+		e && (e.querySelector("button") ?? e).focus();
+	}
+	_getFilterChipElements() {
+		return this._panelFiltersWrap ? Array.from(this._panelFiltersWrap.querySelectorAll("mint-chip")) : [];
+	}
+	_ensurePanelFiltersShell() {
+		!this._panelFiltersWrap || this._panelFiltersMainRow || (this._panelFiltersWrap.replaceChildren(), this._panelFiltersWrap.className = "mint-search-filters", this._panelFiltersMainRow = document.createElement("div"), this._panelFiltersMainRow.className = "mint-search-filter-row", this._panelFiltersChips = document.createElement("div"), this._panelFiltersChips.className = "mint-search-filter-chips", this._panelFiltersMorePanel = document.createElement("div"), this._panelFiltersMorePanel.id = `mint-search-filter-more-${e._filterMorePanelSeq++}`, this._panelFiltersMorePanel.className = "mint-search-filter-more is-hidden", this._panelFiltersShowAllWrap = document.createElement("div"), this._panelFiltersShowAllWrap.className = "mint-search-filter-more-trigger is-hidden", this._panelFiltersShowAllBtn = document.createElement("mint-button"), this._panelFiltersShowAllBtn.setAttribute("type", "button"), this._panelFiltersShowAllBtn.setAttribute("variant", "ghost"), this._panelFiltersShowAllBtn.setAttribute("tone", "neutral"), this._panelFiltersShowAllBtn.setAttribute("size", "small"), this._panelFiltersShowAllBtn.classList.add("mint-search-filter-more-button"), this._panelFiltersShowAllBtn.setAttribute("aria-expanded", "false"), this._panelFiltersShowAllBtn.setAttribute("aria-controls", this._panelFiltersMorePanel.id), this._panelFiltersShowAllBtn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			let t = this._filtersMoreOpen;
+			this._filtersMoreOpen = !this._filtersMoreOpen, this.render(), t && requestAnimationFrame(() => this._focusActiveInput());
+		}), this._panelFiltersShowAllWrap.append(this._panelFiltersShowAllBtn), this._panelFiltersMainRow.append(this._panelFiltersChips, this._panelFiltersShowAllWrap), this._setPanelFiltersShowAllLabel("Show all"), this._panelFiltersWrap.append(this._panelFiltersMainRow, this._panelFiltersMorePanel), typeof ResizeObserver < "u" && !this._filterOverflowObserver && (this._filterOverflowObserver = new ResizeObserver(() => this._syncFilterOverflow()), this._filterOverflowObserver.observe(this._panelFiltersChips), this._filterOverflowObserver.observe(this._panelFiltersMainRow)));
+	}
+	_setPanelFiltersShowAllLabel(e) {
+		let t = this._panelFiltersShowAllBtn;
+		if (!t) return;
+		for (let e of Array.from(t.childNodes)) e.nodeType === Node.TEXT_NODE && e.remove();
+		let n = t.querySelector("button .mint-button-content") || t.querySelector(".mint-button-content");
+		if (n) {
+			n.textContent = e;
+			return;
+		}
+		let r = t.querySelector(":scope > button");
+		if (r) {
+			r.replaceChildren(document.createTextNode(e)), t.render?.();
+			return;
+		}
+		t.firstElementChild || t.appendChild(document.createTextNode(e));
+	}
+	_scheduleFilterOverflowSync() {
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => this._syncFilterOverflow());
+		});
+	}
+	_setFilterChipsEdgeFade(t) {
+		let n = this._panelFiltersChips;
+		n && (t ? (n.style.maskImage = e._filterChipsOverflowMask, n.style.webkitMaskImage = e._filterChipsOverflowMask) : (n.style.maskImage = "", n.style.webkitMaskImage = ""));
+	}
+	_syncFilterOverflow() {
+		if (!this._panelFiltersChips || !this._panelFiltersShowAllWrap || !this._panelFiltersShowAllBtn) return;
+		if (this._filtersMoreOpen) {
+			this._panelFiltersShowAllWrap.classList.remove("is-hidden"), this._filterOverflowZeroWidthRetries = 0, this._setFilterChipsEdgeFade(!1);
+			return;
+		}
+		let e = this._panelFiltersChips.clientWidth;
+		if (e === 0 && this._searchOpen) {
+			this._filterOverflowZeroWidthRetries < 10 && (this._filterOverflowZeroWidthRetries += 1, this._scheduleFilterOverflowSync()), this._setFilterChipsEdgeFade(!1);
+			return;
+		}
+		this._filterOverflowZeroWidthRetries = 0;
+		let t = this._panelFiltersChips.scrollWidth + this._getFilterChipOverflowReservePx() > e;
+		this._panelFiltersShowAllWrap.classList.toggle("is-hidden", !t), this._setFilterChipsEdgeFade(t);
+	}
+	_getResultFocusableElements() {
+		let e = this._customResultsWrap && !this._customResultsWrap.classList.contains("is-hidden") ? this._customResultsWrap : this._resultsWrap;
+		return e ? Array.from(e.querySelectorAll("button:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])")) : [];
+	}
+	_getSearchFocusableElements() {
+		return [this._shell, this._panelInner].filter((e) => !!e).flatMap((e) => Array.from(e.querySelectorAll("button:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])"))).filter((e) => {
+			if (e.closest(".is-hidden") || e.closest("[aria-hidden=\"true\"]")) return !1;
+			let t = window.getComputedStyle(e);
+			return t.display !== "none" && t.visibility !== "hidden";
+		});
+	}
+	_focusFirstChipOrResult(e = !1) {
+		let t = this._getFilterChipElements(), n = this._getResultFocusableElements();
+		if (!e) {
+			(t[0] || n[0])?.focus();
+			return;
+		}
+		(n[n.length - 1] || t[t.length - 1])?.focus();
+	}
+	_moveFocusInResults(e, t) {
+		let n = this._getResultFocusableElements();
+		if (n.length === 0) return;
+		let r = n.indexOf(e);
+		if (r === -1) return;
+		let i = n[r + t];
+		if (i) {
+			i.focus();
+			return;
+		}
+		if (t === -1) {
+			let e = this._getFilterChipElements(), t = e[e.length - 1];
+			t ? t.focus() : this._focusActiveInput();
+		}
+	}
+	_renderSelectedFilter() {
+		let e = (e) => {
+			if (!e || (e.innerHTML = "", !this._hasSelectedFilters())) return;
+			let t = document.createElement("mint-chip");
+			t.setAttribute("dismissable", ""), t.title = this._getFilterChipLabelText();
+			let n = this._getCondensedFilterChipLabel();
+			t.classList.add("mint-search-selected-filter"), this._selectedFilterBackspaceArmed && t.classList.add("is-backspace-armed"), t.textContent = n, t.addEventListener("dismiss", (e) => {
+				e.stopPropagation(), this._clearAllSelectedFilters();
+			}), e.appendChild(t);
+		};
+		e(this._desktopFilterWrap), e(this._mobileFilterWrap);
+		let t = this._hasSelectedFilters();
+		this._desktopInput?.classList.toggle("has-selected-filter", t), this._panelInput?.classList.toggle("has-selected-filter", t), this._syncSelectedFilterInputOffset(this._desktopInput, this._desktopFilterWrap), this._syncSelectedFilterInputOffset(this._panelInput, this._mobileFilterWrap);
+	}
+	_syncSelectedFilterInputOffset(e, t) {
+		if (!e || !t) return;
+		let n = t.querySelector("mint-chip");
+		if (!n) {
+			e.style.removeProperty("--mint-search-filter-chip-width");
+			return;
+		}
+		let r = () => {
+			n.isConnected && e.style.setProperty("--mint-search-filter-chip-width", `${n.getBoundingClientRect().width}px`);
+		};
+		r(), requestAnimationFrame(r);
+	}
+	_bindInputHandlers(e) {
+		let t = () => {
+			this._scheduleSearch(this._getNativeInputValue(e));
+		};
+		e.addEventListener("focusin", () => this._openSearch(!1)), e.addEventListener("input", t), e.addEventListener("search", t), e.addEventListener("change", t), e.addEventListener("keydown", (t) => {
+			if (t.key === "ArrowDown") {
+				this._searchOpen || this._openSearch(!1), t.preventDefault(), this._focusFirstChipOrResult(!1);
+				return;
+			}
+			if (t.key === "ArrowUp") {
+				this._searchOpen || this._openSearch(!1), t.preventDefault(), this._focusFirstChipOrResult(!0);
+				return;
+			}
+			if (t.key !== "Backspace") return;
+			let n = this._getNativeInputValue(e);
+			if (n !== this._query && this._setQuery(n), !(n.length > 0) && this._hasSelectedFilters()) {
+				if (!this._selectedFilterBackspaceArmed) {
+					t.preventDefault(), this._selectedFilterBackspaceArmed = !0, this._renderSelectedFilter();
+					return;
+				}
+				t.preventDefault(), this._popLastSelectedFilter();
+			}
+		});
+	}
+	openSearch(e = !0) {
+		this._openSearch(e);
+	}
+	closeSearch() {
+		this._closeSearch();
+	}
+	toggleSearch(e = !0) {
+		if (this._searchOpen) {
+			this._closeSearch();
+			return;
+		}
+		this._openSearch(e);
+	}
+	isSearchOpen() {
+		return this._searchOpen;
+	}
+	render() {
+		let e = this._getEndpoint();
+		if (this.classList.toggle("is-hidden", !e), !e) {
+			this._searchOpen = !1, this._panel?.classList.add("is-hidden");
+			return;
+		}
+		if (!this._shell) {
+			this._shell = document.createElement("div"), this._shell.className = "mint-search-shell", this._desktopFilterWrap = document.createElement("div"), this._desktopFilterWrap.className = "mint-search-filter-slot", this._desktopFilterWrap.setAttribute("slot", "prepend"), this._desktopInput = document.createElement("mint-input"), this._desktopInput.setAttribute("type", "search"), this._desktopInput.setAttribute("icon", "search"), this._desktopInput.setAttribute("aria-label", this.getAttribute("placeholder") || "Search"), this._desktopInput.className = "mint-search-input";
+			let e = document.createElement("span");
+			e.className = "mint-search-shortcut-hint", e.setAttribute("slot", "append"), this._desktopShortcutHint = e, this._bindInputHandlers(this._desktopInput), this._desktopInput.appendChild(this._desktopFilterWrap), this._desktopInput.appendChild(e), this._shell.appendChild(this._desktopInput), this.appendChild(this._shell);
+		}
+		if (!this._panel) {
+			this._panel = document.createElement("div"), this._panel.className = "mint-search-panel is-hidden";
+			let e = document.createElement("div");
+			e.className = "mint-search-panel-inner", this._panelInner = e;
+			let t = document.createElement("div");
+			this._panelSearchBar = t, t.className = "mint-search-panel-searchbar is-hidden", this._mobileFilterWrap = document.createElement("div"), this._mobileFilterWrap.className = "mint-search-filter-slot", this._mobileFilterWrap.setAttribute("slot", "prepend"), this._panelInput = document.createElement("mint-input"), this._panelInput.setAttribute("type", "search"), this._panelInput.setAttribute("aria-label", this.getAttribute("placeholder") || "Search"), this._panelInput.className = "mint-search-input", this._bindInputHandlers(this._panelInput), this._panelInput.appendChild(this._mobileFilterWrap), t.appendChild(this._panelInput), this._customResultsWrap = document.createElement("div"), this._customResultsWrap.className = "mint-search-custom-results is-hidden", this._stateWrap = document.createElement("div"), this._stateWrap.className = "mint-search-state", this._stateWrap.textContent = "Start typing to search", this._stateWrap.setAttribute("role", "status"), this._stateWrap.setAttribute("aria-live", "polite"), this._resultsWrap = document.createElement("div"), this._resultsWrap.className = "mint-search-results", this._resultsId = `mint-search-results-${Math.random().toString(36).slice(2, 10)}`, this._resultsWrap.id = this._resultsId, this._resultsWrap.setAttribute("role", "listbox"), this._resultsWrap.setAttribute("aria-label", "Search results"), this._customResultsWrap.setAttribute("role", "region"), this._customResultsWrap.setAttribute("aria-label", "Search results"), e.appendChild(t), this._panelFiltersWrap = document.createElement("div"), e.appendChild(this._panelFiltersWrap), this._ensurePanelFiltersShell(), e.appendChild(this._customResultsWrap), e.appendChild(this._stateWrap), e.appendChild(this._resultsWrap), this._panel.appendChild(e);
+		}
+		this._panel.parentElement !== document.body && document.body.appendChild(this._panel);
+		let t = this._hasSelectedFilters() ? "" : this._getPlaceholder();
+		if (this._desktopInput && this._desktopInput.setAttribute("placeholder", t), this._panelInput && this._panelInput.setAttribute("placeholder", t), this._desktopInput && this._desktopInput.setAttribute("aria-label", this.getAttribute("aria-label") || this._getPlaceholder()), this._panelInput && this._panelInput.setAttribute("aria-label", this.getAttribute("aria-label") || this._getPlaceholder()), this._desktopShortcutHint) {
+			let e = this._getOpenShortcutHintText();
+			this._desktopShortcutHint.textContent = e, this._desktopShortcutHint.classList.toggle("is-hidden", !e);
+		}
+		if (this._panelFiltersWrap) {
+			this._ensurePanelFiltersShell();
+			let e = this._getFilterOptions();
+			this._selectedFilters = this._selectedFilters.filter((t) => e.includes(t));
+			let t = e.length > 0;
+			t || (this._filtersMoreOpen = !1), this._panelFiltersWrap.classList.toggle("is-hidden", !t), this._panelInner?.classList.toggle("has-no-filters", !t), this._panelFiltersChips && this._panelFiltersChips.replaceChildren(), this._panelFiltersMorePanel && this._panelFiltersMorePanel.replaceChildren();
+			let n = this._filtersMoreOpen && this._panelFiltersMorePanel ? this._panelFiltersMorePanel : this._panelFiltersChips;
+			for (let t of e) {
+				if (!n) break;
+				let r = document.createElement("mint-chip"), i = this._selectedFilters.includes(t);
+				if (i && r.classList.add("is-selected"), r.classList.add("mint-search-filter-chip"), i) {
+					let e = document.createElement("span");
+					e.textContent = t;
+					let n = document.createElement("mint-icon");
+					n.setAttribute("name", "close"), n.className = "mint-search-filter-chip-close", n.setAttribute("aria-hidden", "true"), r.append(e, n);
+				} else r.textContent = t;
+				r.tabIndex = 0, r.setAttribute("role", "button"), r.setAttribute("aria-label", i ? `Remove filter ${t}` : `Filter by ${t}`), r.dataset.mintSearchFilter = t, r.addEventListener("pointerdown", (e) => {
+					e.preventDefault();
+				});
+				let a = (n) => {
+					n && n.stopPropagation();
+					let r = this._filtersMoreOpen, i = this._selectedFilters.indexOf(t);
+					i >= 0 ? this._selectedFilters.splice(i, 1) : this._selectedFilters.push(t), this._selectedFilterBackspaceArmed = !1;
+					let a = e.length > 0 && this._selectedFilters.length === e.length, o = this._selectedFilters.length === 0;
+					r && (a || o) && (this._filtersMoreOpen = !1), this._emitFilterChange(), this._renderSelectedFilter(), this.render(), this._query.trim() && this._scheduleSearch(this._query), r ? a || o ? this._focusActiveInput() : requestAnimationFrame(() => {
+						this._getFilterChipElements().find((e) => e.dataset.mintSearchFilter === t)?.focus();
+					}) : this._focusActiveInput();
+				};
+				r.addEventListener("click", (e) => a(e)), r.addEventListener("keydown", (e) => {
+					let t = this._getFilterChipElements(), n = t.indexOf(r);
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault(), a(e);
+						return;
+					}
+					if (e.key === "ArrowRight") {
+						e.preventDefault();
+						let r = t[n + 1];
+						r && r.focus();
+						return;
+					}
+					if (e.key === "ArrowLeft") {
+						e.preventDefault();
+						let r = t[n - 1];
+						r ? r.focus() : this._filtersMoreOpen ? this._focusHideFiltersControl() : this._focusActiveInput();
+						return;
+					}
+					if (e.key === "ArrowDown") {
+						e.preventDefault(), this._getResultFocusableElements()[0]?.focus();
+						return;
+					}
+					if (e.key === "ArrowUp") {
+						e.preventDefault(), this._filtersMoreOpen ? this._focusHideFiltersControl() : this._focusActiveInput();
+						return;
+					}
+				}), n.appendChild(r);
+			}
+			this._panelFiltersChips && this._panelFiltersChips.classList.toggle("is-hidden", this._filtersMoreOpen), this._panelFiltersMorePanel && this._panelFiltersMorePanel.classList.toggle("is-hidden", !this._filtersMoreOpen), this._panelFiltersShowAllBtn && (this._setPanelFiltersShowAllLabel(this._filtersMoreOpen ? "Hide filters" : "Show all"), this._panelFiltersShowAllBtn.setAttribute("aria-expanded", this._filtersMoreOpen ? "true" : "false")), this._panelInner && (this._filtersMoreOpen && t ? this._panelInner.classList.add("is-overflow-visible") : this._panelInner.classList.remove("is-overflow-visible")), this._scheduleFilterOverflowSync();
+		}
+		if (this._customResultsWrap) {
+			Array.from(this.children).filter((e) => e === this._shell || e === this._panel ? !1 : e.getAttribute("slot") === "results").forEach((e) => this._customResultsWrap.appendChild(e));
+			let e = this._customResultsWrap.childElementCount > 0;
+			this._customResultsWrap.classList.toggle("is-hidden", !e), e ? (this._stateWrap?.classList.add("is-hidden"), this._resultsWrap?.classList.add("is-hidden")) : this._resultsWrap?.classList.remove("is-hidden");
+		}
+		this._renderSelectedFilter(), this._syncResponsiveChrome(), this._syncPanelVisibility();
+	}
+	_syncResponsiveChrome() {
+		let e = this._collapseOnMobile();
+		this._shell && this._shell.classList.toggle("is-collapsed", e), this._panelSearchBar && (this._panelSearchBar.classList.toggle("is-hidden", !e), this._panelSearchBar.classList.toggle("is-collapsed", e));
+	}
+};
+customElements.get("mint-search") || e("mint-search", t);
+//#endregion
+export { t as default };