monobill-mintui 0.6.612 → 0.6.613

package/dist/components/tags/browser.js

@@ -0,0 +1,416 @@
+
+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('chip', '../../chip.css')
+__mintLoadStyle('icon', '../../icon.css')
+__mintLoadStyle('button', '../../button.css')
+__mintLoadStyle('spinner', '../../spinner.css')
+__mintLoadStyle('popover', '../../popover.css')
+__mintLoadStyle('stack', '../../stack.css')
+__mintLoadStyle('tags', '../../tags.css')
+import "../chunks/icon-gQAtsERy.js";
+import { t as e } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/button-B0Yt0MX1.js";
+import "../chunks/chip-B9whjEvW.js";
+import "../chunks/popover-gviDCspV.js";
+//#region src/components/tags/Tags.ts
+var t = class extends HTMLElement {
+	constructor(...e) {
+		super(...e), this._container = null, this._chipsWrap = null, this._input = null, this._tags = [], this._predefinedTags = [], this._placeholder = "Add tag", this._predefinedPopoverOpenListenersAttached = !1, this._predefinedBlurCloseTimer = null, this._suppressNextPredefinedBlurClose = !1, this._dragIndex = null, this._dragChip = null, this._isPointerDragging = !1, this._pointerMoveHandler = null, this._pointerUpHandler = null, this._containerFocusRingListeners = !1, this._predefinedFieldResizeObserver = null, this._predefinedPopoverBodyEl = null;
+	}
+	static get observedAttributes() {
+		return [
+			"tags",
+			"placeholder",
+			"predefined-tags",
+			"predefined-only",
+			"sortable",
+			"label",
+			"info",
+			"error",
+			"error-message",
+			"name",
+			"id",
+			"required",
+			"loading"
+		];
+	}
+	connectedCallback() {
+		this._parseAttrs(), this._render(), this._pointerMoveHandler || (this._pointerMoveHandler = (e) => this._onPointerMove(e), window.addEventListener("pointermove", this._pointerMoveHandler)), this._pointerUpHandler || (this._pointerUpHandler = (e) => this._onPointerUp(e), window.addEventListener("pointerup", this._pointerUpHandler), window.addEventListener("pointercancel", this._pointerUpHandler));
+	}
+	disconnectedCallback() {
+		this._disconnectPredefinedFieldResizeObserver();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			if (e === "error" || e === "error-message") {
+				this._renderErrorState(), this._syncInputAccessibility(), this._container && this._container.classList.toggle("mint-tags-field-error", this.hasError());
+				return;
+			}
+			if (e === "loading") {
+				this._parseAttrs(), this._render();
+				return;
+			}
+			this._parseAttrs(), this._render();
+		}
+	}
+	set tags(e) {
+		this._tags = Array.isArray(e) ? [...e] : [], this._syncAttr(), this._render();
+	}
+	get tags() {
+		return [...this._tags];
+	}
+	_parseAttrs() {
+		let e = this.getAttribute("tags");
+		e && (this._tags = this._parseTagItems(e, "tags"));
+		let t = this.getAttribute("placeholder");
+		t !== null && (this._placeholder = t);
+		let n = this.getAttribute("predefined-tags");
+		this._predefinedTags = this._parseTagItems(n, "predefined-tags");
+	}
+	_parseTagItems(e, t) {
+		if (!e) return [];
+		try {
+			let t = JSON.parse(e);
+			return Array.isArray(t) ? t.map((e) => {
+				if (typeof e == "string") {
+					let t = e.trim();
+					return t ? {
+						value: t,
+						label: t,
+						dismissable: !0
+					} : null;
+				}
+				if (!e || typeof e != "object") return null;
+				let t = e, n = String(t.value ?? "").trim();
+				return n ? {
+					value: n,
+					label: String(t.label ?? n),
+					dismissable: t.dismissable !== !1
+				} : null;
+			}).filter((e) => e !== null) : [];
+		} catch (e) {
+			return console.warn(`mint-tags: failed to parse ${t} attribute`, e), [];
+		}
+	}
+	_syncAttr() {
+		this.setAttribute("tags", JSON.stringify(this._tags));
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getInfo() {
+		return this.getAttribute("info") || "";
+	}
+	hasError() {
+		return this.getAttribute("error") === "true";
+	}
+	_attachContainerFocusRingListeners() {
+		!this._container || this._containerFocusRingListeners || (this._containerFocusRingListeners = !0, this._container.addEventListener("focusin", () => {
+			this._container?.setAttribute("data-mint-tags-active", "true");
+		}), this._container.addEventListener("focusout", () => {
+			requestAnimationFrame(() => {
+				this._container && (this._container.contains(document.activeElement) || this._container.removeAttribute("data-mint-tags-active"));
+			});
+		}));
+	}
+	getErrorMessage() {
+		return this.getAttribute("error-message") || "";
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	getId() {
+		return this.getAttribute("id") || "";
+	}
+	isRequired() {
+		return this.getAttribute("required") === "true";
+	}
+	isLoading() {
+		return this.hasAttribute("loading");
+	}
+	isPredefinedOnly() {
+		return this.getAttribute("predefined-only") === "true";
+	}
+	_render() {
+		this.classList.add("mint-tags-host");
+		let e = this.isLoading(), t = this.getLabel(), n = this.getInfo(), r = this.hasError(), i = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
+		this.getId() || this.setAttribute("id", i), this._container ? this._input && (this._input.placeholder = this._placeholder) : (this._container = document.createElement("div"), this._container.className = "mint-tags-field", this._container.classList.toggle("mint-tags-field-error", r), this._container.addEventListener("pointerdown", (e) => this._onContainerPointerDown(e)), this._attachContainerFocusRingListeners(), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "mint-tags-chips", this._chipsWrap.addEventListener("dragover", (e) => {
+			this.hasAttribute("sortable") && e.preventDefault();
+		}), this._chipsWrap.addEventListener("drop", (e) => {
+			this.hasAttribute("sortable") && e.preventDefault();
+		}), this._input = document.createElement("input"), this._input.type = "text", this._input.placeholder = this._placeholder, this._input.className = "mint-tags-input", this._input.addEventListener("keydown", (e) => {
+			e.key === "Enter" && (e.preventDefault(), this._addFromInput());
+		}), this._container.appendChild(this._chipsWrap), this.appendChild(this._container)), this._input && (this.isPredefinedOnly() && this._predefinedTags.length > 0 ? this._input.setAttribute("readonly", "true") : this._input.removeAttribute("readonly")), this._container && this._container.classList.toggle("mint-tags-field-error", r);
+		let a = this.querySelector(".mint-tags-label-container");
+		if (t) {
+			a || (a = document.createElement("div"), a.className = "mint-tags-label-container", this._container && this._container.parentElement === this ? this.insertBefore(a, this._container) : this.insertBefore(a, this.firstChild));
+			let e = a.querySelector(".mint-tags-label");
+			t ? (e || (e = document.createElement("label"), e.className = "mint-tags-label", a.appendChild(e)), e.textContent = t, e.setAttribute("for", i)) : e && e.remove();
+		} else a && a.remove();
+		let o = this.querySelector(".mint-tags-info");
+		n ? (o || (o = document.createElement("span"), o.className = "mint-tags-info", this._container && this._container.parentElement === this ? this.insertBefore(o, this._container.nextSibling) : this.appendChild(o)), o.textContent = n) : o && o.remove();
+		let s = this.getName();
+		s ? (this.setAttribute("name", s), this._input && (this._input.name = s, this._input.id = i)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = i)), this._wireInputBackspace(), this._renderChips(), this._renderPredefinedPopover(), this._renderErrorState(), this._syncInputAccessibility(), this._renderSkeleton(e);
+	}
+	_getAvailablePredefinedTags() {
+		let e = new Set(this._tags.map((e) => e.value.toLowerCase()));
+		return this._predefinedTags.filter((t) => !e.has(t.value.toLowerCase()));
+	}
+	_shouldShowInput() {
+		return this._input ? !this.isPredefinedOnly() || !this._predefinedTags.length ? !0 : this._getAvailablePredefinedTags().length > 0 : !1;
+	}
+	_disconnectPredefinedFieldResizeObserver() {
+		this._predefinedFieldResizeObserver &&= (this._predefinedFieldResizeObserver.disconnect(), null), this._predefinedPopoverBodyEl = null;
+	}
+	_syncPredefinedPopoverBodyMinWidth(e) {
+		if (!this._container) return;
+		let t = this._container.offsetWidth;
+		t > 0 ? e.style.minWidth = `${Math.max(t, 200)}px` : e.style.minWidth = "12rem";
+	}
+	_attachPredefinedFieldResizeObserver(e) {
+		if (this._disconnectPredefinedFieldResizeObserver(), !this._container || typeof ResizeObserver > "u") {
+			this._syncPredefinedPopoverBodyMinWidth(e);
+			return;
+		}
+		this._predefinedPopoverBodyEl = e, this._predefinedFieldResizeObserver = new ResizeObserver(() => {
+			!this._predefinedPopoverBodyEl || !this._container || this._syncPredefinedPopoverBodyMinWidth(this._predefinedPopoverBodyEl);
+		}), this._predefinedFieldResizeObserver.observe(this._container), this._syncPredefinedPopoverBodyMinWidth(e);
+	}
+	_renderPredefinedPopover() {
+		if (!this._container || !this._chipsWrap || (this._disconnectPredefinedFieldResizeObserver(), this.querySelectorAll("[data-mint-tags-predefined=\"true\"]").forEach((e) => e.remove()), !this._predefinedTags.length) || !this._input || !this._input.id) return;
+		let e = this._getAvailablePredefinedTags();
+		if (this.isPredefinedOnly() && e.length === 0) return;
+		let t = `${this.getAttribute("id") || this._input.id}-tags-field`;
+		this._container.id = t;
+		let n = document.createElement("mint-popover");
+		n.setAttribute("trigger-id", t), n.setAttribute("trigger-toggle", "false"), n.setAttribute("trigger-align", "start"), n.setAttribute("direction", "down"), n.setAttribute("padding", "0"), n.setAttribute("distance", "6px"), n.dataset.mintTagsPredefined = "true";
+		let r = document.createElement("div");
+		if (r.dataset.mintTagsPredefinedBody = "true", r.className = "mint-tags-options", r.addEventListener("mousedown", (e) => {
+			e.preventDefault();
+		}), e.length) e.forEach((e) => {
+			let t = document.createElement("mint-button");
+			t.setAttribute("type", "button"), t.setAttribute("variant", "ghost"), t.setAttribute("full-width", "true"), t.setAttribute("align", "left"), t.classList.add("mint-tags-option"), t.textContent = e.label || e.value, t.addEventListener("mousedown", (e) => {
+				e.preventDefault();
+			}, !0), t.addEventListener("click", () => {
+				this._addTag(e), n.removeAttribute("open"), requestAnimationFrame(() => {
+					this._input?.focus({ preventScroll: !0 }), this._container?.setAttribute("data-mint-tags-active", "true");
+				});
+			}), r.appendChild(t);
+		});
+		else {
+			let e = document.createElement("div");
+			e.className = "mint-tags-empty", e.textContent = "No tags available", r.appendChild(e);
+		}
+		n.appendChild(r), this._container.appendChild(n), this._attachPredefinedPopoverOpenOnInputFocus(), this._attachPredefinedFieldResizeObserver(r);
+	}
+	_getPredefinedPopoverEl() {
+		return this.querySelector("mint-popover[data-mint-tags-predefined=\"true\"]");
+	}
+	_attachPredefinedPopoverOpenOnInputFocus() {
+		!this._input || !this._predefinedTags.length || this._predefinedPopoverOpenListenersAttached || (this._predefinedPopoverOpenListenersAttached = !0, this._input.addEventListener("focus", () => {
+			if (this._predefinedBlurCloseTimer !== null && (window.clearTimeout(this._predefinedBlurCloseTimer), this._predefinedBlurCloseTimer = null), this.isLoading()) return;
+			let e = this._getPredefinedPopoverEl();
+			e && e.setAttribute("open", "true");
+		}), this._input.addEventListener("blur", () => {
+			this._predefinedBlurCloseTimer !== null && window.clearTimeout(this._predefinedBlurCloseTimer), this._predefinedBlurCloseTimer = window.setTimeout(() => {
+				if (this._predefinedBlurCloseTimer = null, this._suppressNextPredefinedBlurClose) {
+					this._suppressNextPredefinedBlurClose = !1;
+					return;
+				}
+				this._getPredefinedPopoverEl()?.removeAttribute("open");
+			}, 150);
+		}));
+	}
+	_renderSkeleton(e) {
+		let t = this._container;
+		if (!t) return;
+		let n = t.querySelector(".mint-tags-skeleton");
+		e ? (n || (n = document.createElement("div"), n.className = "mint-tags-skeleton", t.appendChild(n)), n.style.display = "block", this._chipsWrap && (this._chipsWrap.style.visibility = "hidden", this._chipsWrap.style.pointerEvents = "none"), this._input && (this._input.style.visibility = "hidden", this._input.style.pointerEvents = "none")) : (n && (n.style.display = "none"), this._chipsWrap && (this._chipsWrap.style.visibility = "visible", this._chipsWrap.style.pointerEvents = "auto"), this._input && (this._input.style.visibility = "visible", this._input.style.pointerEvents = "auto"));
+	}
+	_renderErrorState() {
+		let e = this.hasError(), t = this.getErrorMessage(), n = this.querySelector(".mint-tags-error");
+		e && t ? (n || (n = document.createElement("div"), n.className = "mint-tags-error", this.appendChild(n)), n.textContent = t) : n && n.remove();
+	}
+	_syncInputAccessibility() {
+		if (!this._input) return;
+		let e = this.getId() || `mint-tags-${Math.random().toString(36).slice(2, 10)}`;
+		this._input.id = e;
+		let t = this.getLabel().trim();
+		t ? this._input.setAttribute("aria-label", t) : this._placeholder.trim() ? this._input.setAttribute("aria-label", this._placeholder.trim()) : this._input.setAttribute("aria-label", "Add tag"), this._input.setAttribute("aria-invalid", String(this.hasError()));
+		let n = (this.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean), r = this.querySelector(".mint-tags-info"), i = this.querySelector(".mint-tags-error");
+		r && (r.id = `${e}-info`, n.push(r.id)), i && (i.id = `${e}-error`, n.push(i.id)), n.length ? this._input.setAttribute("aria-describedby", Array.from(new Set(n)).join(" ")) : this._input.removeAttribute("aria-describedby");
+	}
+	_renderChips() {
+		if (!this._chipsWrap) return;
+		this._chipsWrap.innerHTML = "";
+		let e = 0;
+		this._tags.forEach((t) => {
+			let n = document.createElement("mint-chip");
+			n.dataset.index = String(e++), n.dataset.value = t.value, n.draggable = this.hasAttribute("sortable"), n.draggable && n.classList.add("mint-tags-chip-draggable"), t.dismissable && (n.setAttribute("dismissable", "true"), n.addEventListener("dismissed", () => this._removeTag(t.value))), this._chipsWrap.appendChild(n);
+			let r = n.querySelector("[data-mt-chip-text]");
+			r && (r.textContent = t.label || t.value), this._setupChipEvents(n, t), n.draggable && (n.addEventListener("dragstart", (e) => this._onDragStart(e, n)), n.addEventListener("dragover", (e) => this._onDragOverChip(e, n)), n.addEventListener("drop", (e) => this._onDrop(e)), n.addEventListener("dragend", () => this._onDragEnd())), this.hasAttribute("sortable") && n.addEventListener("pointerdown", (e) => this._onPointerDown(e, n));
+		}), this._input && this._shouldShowInput() && (this.hasAttribute("sortable") && (this._input.addEventListener("dragover", (e) => this._onDragOverInput(e)), this._input.addEventListener("drop", (e) => this._onDrop(e)), this._input.addEventListener("dragend", () => this._onDragEnd())), this._chipsWrap.appendChild(this._input));
+	}
+	_addFromInput() {
+		if (!this._input) return;
+		let e = this._input.value.trim();
+		if (!e) return;
+		if (this._tags.some((t) => t.value.toLowerCase() === e.toLowerCase())) {
+			this._input.value = "";
+			return;
+		}
+		let t = this._predefinedTags.find((t) => t.value.toLowerCase() === e.toLowerCase());
+		if (this.isPredefinedOnly()) {
+			if (!t) {
+				this._input.value = "";
+				return;
+			}
+			this._addTag(t);
+		} else this._addTag(t || {
+			value: e,
+			label: e,
+			dismissable: !0
+		});
+		this._input.value = "", setTimeout(() => {
+			this._input?.focus();
+		}, 10);
+	}
+	_addTag(e) {
+		this._tags.some((t) => t.value.toLowerCase() === e.value.toLowerCase()) || (this._tags.push({
+			value: e.value,
+			label: e.label || e.value,
+			dismissable: e.dismissable !== !1
+		}), this._syncAttr(), this._renderChips(), this._renderPredefinedPopover(), this._emitChange());
+	}
+	_removeTag(e) {
+		this._tags = this._tags.filter((t) => t.value !== e), this._syncAttr(), this._renderChips(), this._renderPredefinedPopover(), this._emitChange();
+	}
+	_emitChange() {
+		this.dispatchEvent(new CustomEvent("tags-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: { tags: this.tags }
+		}));
+	}
+	_focusLastChip() {
+		let e = this._chipsWrap?.querySelectorAll("mint-chip");
+		e && e.length > 0 && e[e.length - 1].focus({ preventScroll: !0 });
+	}
+	_focusInput() {
+		setTimeout(() => {
+			this._input?.focus({ preventScroll: !0 });
+		}, 10);
+	}
+	_wireInputBackspace() {
+		this._input && this._input.addEventListener("keydown", (e) => {
+			e.key === "Backspace" && this._input?.value === "" && (e.preventDefault(), this._focusLastChip());
+		});
+	}
+	_setupChipEvents(e, t) {
+		e.tabIndex = 0, e.addEventListener("keydown", (e) => {
+			(e.key === "Backspace" || e.key === "Delete") && t.dismissable && (e.preventDefault(), this._removeTag(t.value), this._focusInput());
+		});
+	}
+	_onContainerPointerDown(e) {
+		if (!this._input || !this._input.isConnected || this._input.parentElement !== this._chipsWrap || e.button !== 0 || e.defaultPrevented) return;
+		let t = e.composedPath();
+		if (!t.some((e) => e === this._input) && !t.some((e) => e instanceof Element && e.closest("mint-chip") != null)) {
+			this._predefinedBlurCloseTimer !== null && (window.clearTimeout(this._predefinedBlurCloseTimer), this._predefinedBlurCloseTimer = null), this._suppressNextPredefinedBlurClose = !0, e.preventDefault();
+			try {
+				this._input.focus({ preventScroll: !0 });
+			} catch {}
+			this._predefinedTags.length > 0 && this._getPredefinedPopoverEl()?.setAttribute("open", "true");
+		}
+	}
+	_onDragStart(e, t) {
+		this.hasAttribute("sortable") && (this._dragChip = t, this._dragIndex = Number(t.dataset.index), e.dataTransfer?.setData("text/plain", t.dataset.index || ""), e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.dropEffect = "move"), t.classList.add("mint-tags-chip-dragging"));
+	}
+	_reorderTags(e, t) {
+		if (e < 0 || t < 0 || e >= this._tags.length || t >= this._tags.length) return;
+		let n = [...this._tags], [r] = n.splice(e, 1);
+		n.splice(t, 0, r), this._tags = n, this._syncAttr(), this._renderChips(), this._emitChange();
+	}
+	_onDragOverInput(e) {
+		this.hasAttribute("sortable") && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), this._dragChip && this._chipsWrap && this._input && this._chipsWrap.insertBefore(this._dragChip, this._input));
+	}
+	_onDragOverChip(e, t) {
+		if (!this.hasAttribute("sortable") || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), !this._dragChip || !this._chipsWrap) || t === this._dragChip) return;
+		let n = t.getBoundingClientRect();
+		if (e.clientX < n.left + n.width * .5) {
+			if (this._dragChip.nextSibling === t) return;
+			this._chipsWrap.insertBefore(this._dragChip, t);
+		} else {
+			if (t.nextSibling === this._dragChip) return;
+			let e = t.nextSibling;
+			e ? this._chipsWrap.insertBefore(this._dragChip, e) : this._chipsWrap.appendChild(this._dragChip);
+		}
+	}
+	_onDrop(e) {
+		this.hasAttribute("sortable") && e.preventDefault();
+	}
+	_onDragEnd() {
+		this._dragChip && this._dragChip.classList.remove("mint-tags-chip-dragging"), this._syncOrderFromDom(), this._dragChip = null, this._dragIndex = null;
+	}
+	_syncOrderFromDom() {
+		if (!this._chipsWrap) return;
+		let e = Array.from(this._chipsWrap.querySelectorAll("mint-chip"));
+		if (e.length === 0) return;
+		let t = [];
+		e.forEach((e) => {
+			let n = e.dataset.value;
+			if (!n) return;
+			let r = this._tags.find((e) => e.value === n);
+			r && t.push(r);
+		}), t.length === this._tags.length && (this._tags = t, this._syncAttr(), this._renderChips(), this._emitChange());
+	}
+	_onPointerDown(e, t) {
+		if (this.hasAttribute("sortable") && e.pointerType !== "mouse") {
+			this._isPointerDragging = !0, this._dragChip = t, this._dragIndex = Number(t.dataset.index);
+			try {
+				t.setPointerCapture(e.pointerId);
+			} catch {}
+			t.classList.add("mint-tags-chip-dragging", "mint-tags-chip-no-select"), e.preventDefault();
+		}
+	}
+	_onPointerMove(e) {
+		if (!this._isPointerDragging || !this._dragChip || !this._chipsWrap || e.pointerType === "mouse") return;
+		let t = document.elementFromPoint(e.clientX, e.clientY);
+		if (!t) return;
+		let n = t.closest("mint-chip");
+		if (n && n !== this._dragChip) {
+			let t = n.getBoundingClientRect();
+			if (e.clientX < t.left + t.width * .5) this._dragChip.nextSibling !== n && this._chipsWrap.insertBefore(this._dragChip, n);
+			else if (n.nextSibling !== this._dragChip) {
+				let e = n.nextSibling;
+				e ? this._chipsWrap.insertBefore(this._dragChip, e) : this._chipsWrap.appendChild(this._dragChip);
+			}
+			return;
+		}
+		this._input && t.closest("input") === this._input && this._chipsWrap.insertBefore(this._dragChip, this._input);
+	}
+	_onPointerUp(e) {
+		if (this._isPointerDragging) {
+			if (this._isPointerDragging = !1, this._dragChip) {
+				try {
+					this._dragChip.releasePointerCapture(e.pointerId);
+				} catch {}
+				this._dragChip.classList.remove("mint-tags-chip-dragging", "mint-tags-chip-no-select");
+			}
+			this._syncOrderFromDom(), this._dragChip = null, this._dragIndex = null;
+		}
+	}
+};
+customElements.get("mint-tags") || e("mint-tags", t);
+//#endregion
+export { t as default };

package/dist/components/tags/index.cjs

@@ -0,0 +1 @@
+require(`../chunks/icon-dG8sLTBn.js`);const e=require(`../chunks/register-element-tCL_F1YI.js`);require(`../chunks/button-BlbLHMts.js`),require(`../chunks/chip-B04bJM4r.js`),require(`../chunks/popover-BeaGf_JC.js`);var t=class extends HTMLElement{constructor(...e){super(...e),this._container=null,this._chipsWrap=null,this._input=null,this._tags=[],this._predefinedTags=[],this._placeholder=`Add tag`,this._predefinedPopoverOpenListenersAttached=!1,this._predefinedBlurCloseTimer=null,this._suppressNextPredefinedBlurClose=!1,this._dragIndex=null,this._dragChip=null,this._isPointerDragging=!1,this._pointerMoveHandler=null,this._pointerUpHandler=null,this._containerFocusRingListeners=!1,this._predefinedFieldResizeObserver=null,this._predefinedPopoverBodyEl=null}static get observedAttributes(){return[`tags`,`placeholder`,`predefined-tags`,`predefined-only`,`sortable`,`label`,`info`,`error`,`error-message`,`name`,`id`,`required`,`loading`]}connectedCallback(){this._parseAttrs(),this._render(),this._pointerMoveHandler||(this._pointerMoveHandler=e=>this._onPointerMove(e),window.addEventListener(`pointermove`,this._pointerMoveHandler)),this._pointerUpHandler||(this._pointerUpHandler=e=>this._onPointerUp(e),window.addEventListener(`pointerup`,this._pointerUpHandler),window.addEventListener(`pointercancel`,this._pointerUpHandler))}disconnectedCallback(){this._disconnectPredefinedFieldResizeObserver()}attributeChangedCallback(e,t,n){if(t!==n){if(e===`error`||e===`error-message`){this._renderErrorState(),this._syncInputAccessibility(),this._container&&this._container.classList.toggle(`mint-tags-field-error`,this.hasError());return}if(e===`loading`){this._parseAttrs(),this._render();return}this._parseAttrs(),this._render()}}set tags(e){this._tags=Array.isArray(e)?[...e]:[],this._syncAttr(),this._render()}get tags(){return[...this._tags]}_parseAttrs(){let e=this.getAttribute(`tags`);e&&(this._tags=this._parseTagItems(e,`tags`));let t=this.getAttribute(`placeholder`);t!==null&&(this._placeholder=t);let n=this.getAttribute(`predefined-tags`);this._predefinedTags=this._parseTagItems(n,`predefined-tags`)}_parseTagItems(e,t){if(!e)return[];try{let t=JSON.parse(e);return Array.isArray(t)?t.map(e=>{if(typeof e==`string`){let t=e.trim();return t?{value:t,label:t,dismissable:!0}:null}if(!e||typeof e!=`object`)return null;let t=e,n=String(t.value??``).trim();return n?{value:n,label:String(t.label??n),dismissable:t.dismissable!==!1}:null}).filter(e=>e!==null):[]}catch(e){return console.warn(`mint-tags: failed to parse ${t} attribute`,e),[]}}_syncAttr(){this.setAttribute(`tags`,JSON.stringify(this._tags))}getLabel(){return this.getAttribute(`label`)||``}getInfo(){return this.getAttribute(`info`)||``}hasError(){return this.getAttribute(`error`)===`true`}_attachContainerFocusRingListeners(){!this._container||this._containerFocusRingListeners||(this._containerFocusRingListeners=!0,this._container.addEventListener(`focusin`,()=>{this._container?.setAttribute(`data-mint-tags-active`,`true`)}),this._container.addEventListener(`focusout`,()=>{requestAnimationFrame(()=>{this._container&&(this._container.contains(document.activeElement)||this._container.removeAttribute(`data-mint-tags-active`))})}))}getErrorMessage(){return this.getAttribute(`error-message`)||``}getName(){return this.getAttribute(`name`)||``}getId(){return this.getAttribute(`id`)||``}isRequired(){return this.getAttribute(`required`)===`true`}isLoading(){return this.hasAttribute(`loading`)}isPredefinedOnly(){return this.getAttribute(`predefined-only`)===`true`}_render(){this.classList.add(`mint-tags-host`);let e=this.isLoading(),t=this.getLabel(),n=this.getInfo(),r=this.hasError(),i=this.getId()||`mint-tags-${Math.random().toString(36).substr(2,9)}`;this.getId()||this.setAttribute(`id`,i),this._container?this._input&&(this._input.placeholder=this._placeholder):(this._container=document.createElement(`div`),this._container.className=`mint-tags-field`,this._container.classList.toggle(`mint-tags-field-error`,r),this._container.addEventListener(`pointerdown`,e=>this._onContainerPointerDown(e)),this._attachContainerFocusRingListeners(),this._chipsWrap=document.createElement(`div`),this._chipsWrap.className=`mint-tags-chips`,this._chipsWrap.addEventListener(`dragover`,e=>{this.hasAttribute(`sortable`)&&e.preventDefault()}),this._chipsWrap.addEventListener(`drop`,e=>{this.hasAttribute(`sortable`)&&e.preventDefault()}),this._input=document.createElement(`input`),this._input.type=`text`,this._input.placeholder=this._placeholder,this._input.className=`mint-tags-input`,this._input.addEventListener(`keydown`,e=>{e.key===`Enter`&&(e.preventDefault(),this._addFromInput())}),this._container.appendChild(this._chipsWrap),this.appendChild(this._container)),this._input&&(this.isPredefinedOnly()&&this._predefinedTags.length>0?this._input.setAttribute(`readonly`,`true`):this._input.removeAttribute(`readonly`)),this._container&&this._container.classList.toggle(`mint-tags-field-error`,r);let a=this.querySelector(`.mint-tags-label-container`);if(t){a||(a=document.createElement(`div`),a.className=`mint-tags-label-container`,this._container&&this._container.parentElement===this?this.insertBefore(a,this._container):this.insertBefore(a,this.firstChild));let e=a.querySelector(`.mint-tags-label`);t?(e||(e=document.createElement(`label`),e.className=`mint-tags-label`,a.appendChild(e)),e.textContent=t,e.setAttribute(`for`,i)):e&&e.remove()}else a&&a.remove();let o=this.querySelector(`.mint-tags-info`);n?(o||(o=document.createElement(`span`),o.className=`mint-tags-info`,this._container&&this._container.parentElement===this?this.insertBefore(o,this._container.nextSibling):this.appendChild(o)),o.textContent=n):o&&o.remove();let s=this.getName();s?(this.setAttribute(`name`,s),this._input&&(this._input.name=s,this._input.id=i)):(this.removeAttribute(`name`),this._input&&(this._input.removeAttribute(`name`),this._input.id=i)),this._wireInputBackspace(),this._renderChips(),this._renderPredefinedPopover(),this._renderErrorState(),this._syncInputAccessibility(),this._renderSkeleton(e)}_getAvailablePredefinedTags(){let e=new Set(this._tags.map(e=>e.value.toLowerCase()));return this._predefinedTags.filter(t=>!e.has(t.value.toLowerCase()))}_shouldShowInput(){return this._input?!this.isPredefinedOnly()||!this._predefinedTags.length?!0:this._getAvailablePredefinedTags().length>0:!1}_disconnectPredefinedFieldResizeObserver(){this._predefinedFieldResizeObserver&&=(this._predefinedFieldResizeObserver.disconnect(),null),this._predefinedPopoverBodyEl=null}_syncPredefinedPopoverBodyMinWidth(e){if(!this._container)return;let t=this._container.offsetWidth;t>0?e.style.minWidth=`${Math.max(t,200)}px`:e.style.minWidth=`12rem`}_attachPredefinedFieldResizeObserver(e){if(this._disconnectPredefinedFieldResizeObserver(),!this._container||typeof ResizeObserver>`u`){this._syncPredefinedPopoverBodyMinWidth(e);return}this._predefinedPopoverBodyEl=e,this._predefinedFieldResizeObserver=new ResizeObserver(()=>{!this._predefinedPopoverBodyEl||!this._container||this._syncPredefinedPopoverBodyMinWidth(this._predefinedPopoverBodyEl)}),this._predefinedFieldResizeObserver.observe(this._container),this._syncPredefinedPopoverBodyMinWidth(e)}_renderPredefinedPopover(){if(!this._container||!this._chipsWrap||(this._disconnectPredefinedFieldResizeObserver(),this.querySelectorAll(`[data-mint-tags-predefined="true"]`).forEach(e=>e.remove()),!this._predefinedTags.length)||!this._input||!this._input.id)return;let e=this._getAvailablePredefinedTags();if(this.isPredefinedOnly()&&e.length===0)return;let t=`${this.getAttribute(`id`)||this._input.id}-tags-field`;this._container.id=t;let n=document.createElement(`mint-popover`);n.setAttribute(`trigger-id`,t),n.setAttribute(`trigger-toggle`,`false`),n.setAttribute(`trigger-align`,`start`),n.setAttribute(`direction`,`down`),n.setAttribute(`padding`,`0`),n.setAttribute(`distance`,`6px`),n.dataset.mintTagsPredefined=`true`;let r=document.createElement(`div`);if(r.dataset.mintTagsPredefinedBody=`true`,r.className=`mint-tags-options`,r.addEventListener(`mousedown`,e=>{e.preventDefault()}),e.length)e.forEach(e=>{let t=document.createElement(`mint-button`);t.setAttribute(`type`,`button`),t.setAttribute(`variant`,`ghost`),t.setAttribute(`full-width`,`true`),t.setAttribute(`align`,`left`),t.classList.add(`mint-tags-option`),t.textContent=e.label||e.value,t.addEventListener(`mousedown`,e=>{e.preventDefault()},!0),t.addEventListener(`click`,()=>{this._addTag(e),n.removeAttribute(`open`),requestAnimationFrame(()=>{this._input?.focus({preventScroll:!0}),this._container?.setAttribute(`data-mint-tags-active`,`true`)})}),r.appendChild(t)});else{let e=document.createElement(`div`);e.className=`mint-tags-empty`,e.textContent=`No tags available`,r.appendChild(e)}n.appendChild(r),this._container.appendChild(n),this._attachPredefinedPopoverOpenOnInputFocus(),this._attachPredefinedFieldResizeObserver(r)}_getPredefinedPopoverEl(){return this.querySelector(`mint-popover[data-mint-tags-predefined="true"]`)}_attachPredefinedPopoverOpenOnInputFocus(){!this._input||!this._predefinedTags.length||this._predefinedPopoverOpenListenersAttached||(this._predefinedPopoverOpenListenersAttached=!0,this._input.addEventListener(`focus`,()=>{if(this._predefinedBlurCloseTimer!==null&&(window.clearTimeout(this._predefinedBlurCloseTimer),this._predefinedBlurCloseTimer=null),this.isLoading())return;let e=this._getPredefinedPopoverEl();e&&e.setAttribute(`open`,`true`)}),this._input.addEventListener(`blur`,()=>{this._predefinedBlurCloseTimer!==null&&window.clearTimeout(this._predefinedBlurCloseTimer),this._predefinedBlurCloseTimer=window.setTimeout(()=>{if(this._predefinedBlurCloseTimer=null,this._suppressNextPredefinedBlurClose){this._suppressNextPredefinedBlurClose=!1;return}this._getPredefinedPopoverEl()?.removeAttribute(`open`)},150)}))}_renderSkeleton(e){let t=this._container;if(!t)return;let n=t.querySelector(`.mint-tags-skeleton`);e?(n||(n=document.createElement(`div`),n.className=`mint-tags-skeleton`,t.appendChild(n)),n.style.display=`block`,this._chipsWrap&&(this._chipsWrap.style.visibility=`hidden`,this._chipsWrap.style.pointerEvents=`none`),this._input&&(this._input.style.visibility=`hidden`,this._input.style.pointerEvents=`none`)):(n&&(n.style.display=`none`),this._chipsWrap&&(this._chipsWrap.style.visibility=`visible`,this._chipsWrap.style.pointerEvents=`auto`),this._input&&(this._input.style.visibility=`visible`,this._input.style.pointerEvents=`auto`))}_renderErrorState(){let e=this.hasError(),t=this.getErrorMessage(),n=this.querySelector(`.mint-tags-error`);e&&t?(n||(n=document.createElement(`div`),n.className=`mint-tags-error`,this.appendChild(n)),n.textContent=t):n&&n.remove()}_syncInputAccessibility(){if(!this._input)return;let e=this.getId()||`mint-tags-${Math.random().toString(36).slice(2,10)}`;this._input.id=e;let t=this.getLabel().trim();t?this._input.setAttribute(`aria-label`,t):this._placeholder.trim()?this._input.setAttribute(`aria-label`,this._placeholder.trim()):this._input.setAttribute(`aria-label`,`Add tag`),this._input.setAttribute(`aria-invalid`,String(this.hasError()));let n=(this.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean),r=this.querySelector(`.mint-tags-info`),i=this.querySelector(`.mint-tags-error`);r&&(r.id=`${e}-info`,n.push(r.id)),i&&(i.id=`${e}-error`,n.push(i.id)),n.length?this._input.setAttribute(`aria-describedby`,Array.from(new Set(n)).join(` `)):this._input.removeAttribute(`aria-describedby`)}_renderChips(){if(!this._chipsWrap)return;this._chipsWrap.innerHTML=``;let e=0;this._tags.forEach(t=>{let n=document.createElement(`mint-chip`);n.dataset.index=String(e++),n.dataset.value=t.value,n.draggable=this.hasAttribute(`sortable`),n.draggable&&n.classList.add(`mint-tags-chip-draggable`),t.dismissable&&(n.setAttribute(`dismissable`,`true`),n.addEventListener(`dismissed`,()=>this._removeTag(t.value))),this._chipsWrap.appendChild(n);let r=n.querySelector(`[data-mt-chip-text]`);r&&(r.textContent=t.label||t.value),this._setupChipEvents(n,t),n.draggable&&(n.addEventListener(`dragstart`,e=>this._onDragStart(e,n)),n.addEventListener(`dragover`,e=>this._onDragOverChip(e,n)),n.addEventListener(`drop`,e=>this._onDrop(e)),n.addEventListener(`dragend`,()=>this._onDragEnd())),this.hasAttribute(`sortable`)&&n.addEventListener(`pointerdown`,e=>this._onPointerDown(e,n))}),this._input&&this._shouldShowInput()&&(this.hasAttribute(`sortable`)&&(this._input.addEventListener(`dragover`,e=>this._onDragOverInput(e)),this._input.addEventListener(`drop`,e=>this._onDrop(e)),this._input.addEventListener(`dragend`,()=>this._onDragEnd())),this._chipsWrap.appendChild(this._input))}_addFromInput(){if(!this._input)return;let e=this._input.value.trim();if(!e)return;if(this._tags.some(t=>t.value.toLowerCase()===e.toLowerCase())){this._input.value=``;return}let t=this._predefinedTags.find(t=>t.value.toLowerCase()===e.toLowerCase());if(this.isPredefinedOnly()){if(!t){this._input.value=``;return}this._addTag(t)}else this._addTag(t||{value:e,label:e,dismissable:!0});this._input.value=``,setTimeout(()=>{this._input?.focus()},10)}_addTag(e){this._tags.some(t=>t.value.toLowerCase()===e.value.toLowerCase())||(this._tags.push({value:e.value,label:e.label||e.value,dismissable:e.dismissable!==!1}),this._syncAttr(),this._renderChips(),this._renderPredefinedPopover(),this._emitChange())}_removeTag(e){this._tags=this._tags.filter(t=>t.value!==e),this._syncAttr(),this._renderChips(),this._renderPredefinedPopover(),this._emitChange()}_emitChange(){this.dispatchEvent(new CustomEvent(`tags-change`,{bubbles:!0,composed:!0,detail:{tags:this.tags}}))}_focusLastChip(){let e=this._chipsWrap?.querySelectorAll(`mint-chip`);e&&e.length>0&&e[e.length-1].focus({preventScroll:!0})}_focusInput(){setTimeout(()=>{this._input?.focus({preventScroll:!0})},10)}_wireInputBackspace(){this._input&&this._input.addEventListener(`keydown`,e=>{e.key===`Backspace`&&this._input?.value===``&&(e.preventDefault(),this._focusLastChip())})}_setupChipEvents(e,t){e.tabIndex=0,e.addEventListener(`keydown`,e=>{(e.key===`Backspace`||e.key===`Delete`)&&t.dismissable&&(e.preventDefault(),this._removeTag(t.value),this._focusInput())})}_onContainerPointerDown(e){if(!this._input||!this._input.isConnected||this._input.parentElement!==this._chipsWrap||e.button!==0||e.defaultPrevented)return;let t=e.composedPath();if(!t.some(e=>e===this._input)&&!t.some(e=>e instanceof Element&&e.closest(`mint-chip`)!=null)){this._predefinedBlurCloseTimer!==null&&(window.clearTimeout(this._predefinedBlurCloseTimer),this._predefinedBlurCloseTimer=null),this._suppressNextPredefinedBlurClose=!0,e.preventDefault();try{this._input.focus({preventScroll:!0})}catch{}this._predefinedTags.length>0&&this._getPredefinedPopoverEl()?.setAttribute(`open`,`true`)}}_onDragStart(e,t){this.hasAttribute(`sortable`)&&(this._dragChip=t,this._dragIndex=Number(t.dataset.index),e.dataTransfer?.setData(`text/plain`,t.dataset.index||``),e.dataTransfer&&(e.dataTransfer.effectAllowed=`move`,e.dataTransfer.dropEffect=`move`),t.classList.add(`mint-tags-chip-dragging`))}_reorderTags(e,t){if(e<0||t<0||e>=this._tags.length||t>=this._tags.length)return;let n=[...this._tags],[r]=n.splice(e,1);n.splice(t,0,r),this._tags=n,this._syncAttr(),this._renderChips(),this._emitChange()}_onDragOverInput(e){this.hasAttribute(`sortable`)&&(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=`move`),this._dragChip&&this._chipsWrap&&this._input&&this._chipsWrap.insertBefore(this._dragChip,this._input))}_onDragOverChip(e,t){if(!this.hasAttribute(`sortable`)||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect=`move`),!this._dragChip||!this._chipsWrap)||t===this._dragChip)return;let n=t.getBoundingClientRect();if(e.clientX<n.left+n.width*.5){if(this._dragChip.nextSibling===t)return;this._chipsWrap.insertBefore(this._dragChip,t)}else{if(t.nextSibling===this._dragChip)return;let e=t.nextSibling;e?this._chipsWrap.insertBefore(this._dragChip,e):this._chipsWrap.appendChild(this._dragChip)}}_onDrop(e){this.hasAttribute(`sortable`)&&e.preventDefault()}_onDragEnd(){this._dragChip&&this._dragChip.classList.remove(`mint-tags-chip-dragging`),this._syncOrderFromDom(),this._dragChip=null,this._dragIndex=null}_syncOrderFromDom(){if(!this._chipsWrap)return;let e=Array.from(this._chipsWrap.querySelectorAll(`mint-chip`));if(e.length===0)return;let t=[];e.forEach(e=>{let n=e.dataset.value;if(!n)return;let r=this._tags.find(e=>e.value===n);r&&t.push(r)}),t.length===this._tags.length&&(this._tags=t,this._syncAttr(),this._renderChips(),this._emitChange())}_onPointerDown(e,t){if(this.hasAttribute(`sortable`)&&e.pointerType!==`mouse`){this._isPointerDragging=!0,this._dragChip=t,this._dragIndex=Number(t.dataset.index);try{t.setPointerCapture(e.pointerId)}catch{}t.classList.add(`mint-tags-chip-dragging`,`mint-tags-chip-no-select`),e.preventDefault()}}_onPointerMove(e){if(!this._isPointerDragging||!this._dragChip||!this._chipsWrap||e.pointerType===`mouse`)return;let t=document.elementFromPoint(e.clientX,e.clientY);if(!t)return;let n=t.closest(`mint-chip`);if(n&&n!==this._dragChip){let t=n.getBoundingClientRect();if(e.clientX<t.left+t.width*.5)this._dragChip.nextSibling!==n&&this._chipsWrap.insertBefore(this._dragChip,n);else if(n.nextSibling!==this._dragChip){let e=n.nextSibling;e?this._chipsWrap.insertBefore(this._dragChip,e):this._chipsWrap.appendChild(this._dragChip)}return}this._input&&t.closest(`input`)===this._input&&this._chipsWrap.insertBefore(this._dragChip,this._input)}_onPointerUp(e){if(this._isPointerDragging){if(this._isPointerDragging=!1,this._dragChip){try{this._dragChip.releasePointerCapture(e.pointerId)}catch{}this._dragChip.classList.remove(`mint-tags-chip-dragging`,`mint-tags-chip-no-select`)}this._syncOrderFromDom(),this._dragChip=null,this._dragIndex=null}}};customElements.get(`mint-tags`)||e.t(`mint-tags`,t),module.exports=t;

package/dist/components/tags/index.d.ts

@@ -1,3 +1 @@
-import './Tags';
-export { default } from './Tags';
-//# sourceMappingURL=index.d.ts.map
+export { default, MintTags } from './Tags'

package/dist/components/tags/index.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tags/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAA;AAEf,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}
+{
+  "version": 3,
+  "file": "index.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "index.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}