monobill-mintui 0.6.52 → 0.6.53

package/dist/index.js

@@ -811,7 +811,7 @@ var i = class extends HTMLElement {
 		];
 	}
 	constructor() {
-		super(), this._button = null, this._checked = !1;
+		super(), this._button = null, this._checked = !1, this._hasUserToggled = !1;
 	}
 	connectedCallback() {
 		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full"), this._checked = this.getAttribute("checked") === "true", this.render();
@@ -912,9 +912,7 @@ var i = class extends HTMLElement {
 			"w-4",
 			"shadow-lg",
 			"transform",
-			"transition-transform",
-			"duration-200",
-			"ease-in-out",
+			this._hasUserToggled ? "transition-transform duration-200 ease-in-out" : "",
 			"pointer-events-none",
 			"overflow-hidden"
 		], t = this._checked ? "translate-x-5" : "translate-x-0.5";
@@ -957,7 +955,7 @@ var i = class extends HTMLElement {
 	}
 	handleToggle(e) {
 		if (!this.isDisabled()) {
-			this.checked = !this._checked;
+			this._hasUserToggled = !0, this.checked = !this._checked;
 			let e = new Event("input", {
 				bubbles: !0,
 				cancelable: !0,
@@ -1974,6 +1972,8 @@ var _ = class extends HTMLElement {
 			"direction",
 			"open",
 			"trigger-id",
+			"trigger-toggle",
+			"trigger-align",
 			"padding",
 			"hover",
 			"distance"
@@ -2010,7 +2010,7 @@ var _ = class extends HTMLElement {
 				let e = this._isInsideModal() ? "z-[80]" : "z-[60]";
 				this.classList.remove("z-50", "z-[60]", "z-[80]"), this.classList.add(e);
 			}
-			this.render(), (e === "trigger-id" || e === "hover") && this._setupTrigger(), e === "open" && this.isOpen() && this._closeOtherPopovers();
+			this.render(), (e === "trigger-id" || e === "hover" || e === "trigger-toggle") && this._setupTrigger(), e === "open" && this.isOpen() && this._closeOtherPopovers();
 		}
 	}
 	getId() {
@@ -2062,6 +2062,13 @@ var _ = class extends HTMLElement {
 	isHoverEnabled() {
 		return this.getAttribute("hover") === "true";
 	}
+	getTriggerAlign() {
+		let e = (this.getAttribute("trigger-align") || "center").toLowerCase();
+		return e === "start" || e === "end" ? e : "center";
+	}
+	isTriggerToggleEnabled() {
+		return this.getAttribute("trigger-toggle") !== "false";
+	}
 	isOpen() {
 		return this.getAttribute("open") === "true";
 	}
@@ -2078,7 +2085,7 @@ var _ = class extends HTMLElement {
 		}, 10));
 	}
 	_attachTriggerListener() {
-		if (this._triggerElement && !this._triggerClickHandler) {
+		if (this.isTriggerToggleEnabled() && this._triggerElement && !this._triggerClickHandler) {
 			let e = this;
 			this._triggerClickHandler = function(t) {
 				t.stopImmediatePropagation(), t.preventDefault(), e.getAttribute("open") === "true" ? e.removeAttribute("open") : e.setAttribute("open", "true");
@@ -2129,31 +2136,31 @@ var _ = class extends HTMLElement {
 			direction: "down"
 		};
 		this.classList.contains("hidden") && (this.classList.remove("hidden"), this._popover.style.visibility = "hidden");
-		let n = t.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = this._getDistancePx(), o = this.getDirection(), s = 0, c = 0;
+		let n = t.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = this._getDistancePx(), o = this.getDirection(), s = 0, c = 0, l = this.getTriggerAlign();
 		switch (o) {
 			case "down":
-				if (s = e.bottom + a, c = e.left + e.width / 2 - n.width / 2, s + n.height > i) {
+				if (s = e.bottom + a, c = l === "start" ? e.left : l === "end" ? e.right - n.width : e.left + e.width / 2 - n.width / 2, s + n.height > i) {
 					let t = e.top - n.height - a;
 					t >= 0 ? (o = "up", s = t) : (s = Math.max(0, i - n.height - a), s + n.height > i && (s = 0));
 				}
 				c < 0 && (c = a), c + n.width > r && (c = Math.max(a, r - n.width - a), c + n.width > r && (c = r - n.width));
 				break;
 			case "up":
-				if (s = e.top - n.height - a, c = e.left + e.width / 2 - n.width / 2, s < 0) {
+				if (s = e.top - n.height - a, c = l === "start" ? e.left : l === "end" ? e.right - n.width : e.left + e.width / 2 - n.width / 2, s < 0) {
 					let t = e.bottom + a;
 					t + n.height <= i ? (o = "down", s = t) : (s = Math.min(i - n.height - a, i - n.height), s < 0 && (s = i - n.height));
 				}
 				c < 0 && (c = a), c + n.width > r && (c = Math.max(a, r - n.width - a), c + n.width > r && (c = r - n.width));
 				break;
 			case "right":
-				if (s = e.top + e.height / 2 - n.height / 2, c = e.right + a, c + n.width > r) {
+				if (s = l === "start" ? e.top : l === "end" ? e.bottom - n.height : e.top + e.height / 2 - n.height / 2, c = e.right + a, c + n.width > r) {
 					let t = e.left - n.width - a;
 					t >= 0 ? (o = "left", c = t) : (c = Math.max(0, r - n.width - a), c + n.width > r && (c = r - n.width));
 				}
 				s < 0 && (s = a), s + n.height > i && (s = Math.max(a, i - n.height - a), s + n.height > i && (s = i - n.height));
 				break;
 			case "left":
-				if (s = e.top + e.height / 2 - n.height / 2, c = e.left - n.width - a, c < 0) {
+				if (s = l === "start" ? e.top : l === "end" ? e.bottom - n.height : e.top + e.height / 2 - n.height / 2, c = e.left - n.width - a, c < 0) {
 					let t = e.right + a;
 					t + n.width <= r ? (o = "right", c = t) : (c = Math.min(r - n.width - a, r - n.width), c < 0 && (c = 0));
 				}
@@ -6575,12 +6582,14 @@ customElements.get("mint-chip") || customElements.define("mint-chip", O);
 //#region src/components/tags/Tags.ts
 var k = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._container = null, this._chipsWrap = null, this._input = null, this._tags = [], this._placeholder = "Add tag", this._dragIndex = null, this._dragChip = null, this._isPointerDragging = !1, this._pointerMoveHandler = null, this._pointerUpHandler = null;
+		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._dragIndex = null, this._dragChip = null, this._isPointerDragging = !1, this._pointerMoveHandler = null, this._pointerUpHandler = null;
 	}
 	static get observedAttributes() {
 		return [
 			"tags",
 			"placeholder",
+			"predefined-tags",
+			"predefined-only",
 			"sortable",
 			"label",
 			"info",
@@ -6636,15 +6645,36 @@ var k = class extends HTMLElement {
 	}
 	_parseAttrs() {
 		let e = this.getAttribute("tags");
-		if (!e) return;
+		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);
-			Array.isArray(t) && (this._tags = t);
+			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) {
-			console.warn("mint-tags: failed to parse tags attribute", e);
+			return console.warn(`mint-tags: failed to parse ${t} attribute`, e), [];
 		}
-		let t = this.getAttribute("placeholder");
-		t !== null && (this._placeholder = t);
 	}
 	_syncAttr() {
 		this.setAttribute("tags", JSON.stringify(this._tags));
@@ -6673,6 +6703,9 @@ var k = class extends HTMLElement {
 	isLoading() {
 		return this.hasAttribute("loading");
 	}
+	isPredefinedOnly() {
+		return this.getAttribute("predefined-only") === "true";
+	}
 	_render() {
 		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
 		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)}`;
@@ -6697,7 +6730,7 @@ var k = class extends HTMLElement {
 				"focus-within:ring-offset-1",
 				r ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500"
 			];
-			this._container.className = e.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (e) => {
+			this._container.className = e.join(" "), this._container.addEventListener("pointerdown", (e) => this._onContainerPointerDown(e)), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (e) => {
 				this.hasAttribute("sortable") && e.preventDefault();
 			}), this._chipsWrap.addEventListener("drop", (e) => {
 				this.hasAttribute("sortable") && e.preventDefault();
@@ -6717,7 +6750,7 @@ var k = class extends HTMLElement {
 				e.key === "Enter" && (e.preventDefault(), this._addFromInput());
 			}), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
 		}
-		if (this._container) {
+		if (this._input && (this.isPredefinedOnly() && this._predefinedTags.length > 0 ? this._input.setAttribute("readonly", "true") : this._input.removeAttribute("readonly")), this._container) {
 			let e = [
 				"flex",
 				"flex-wrap",
@@ -6747,7 +6780,48 @@ var k = class extends HTMLElement {
 		let o = this.querySelector(".mint-tags-info");
 		n ? (o || (o = document.createElement("span"), o.className = "mint-tags-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", 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._renderErrorState(), this._renderSkeleton(e);
+		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._renderSkeleton(e);
+	}
+	_getAvailablePredefinedTags() {
+		let e = new Set(this._tags.map((e) => e.value.toLowerCase()));
+		return this._predefinedTags.filter((t) => !e.has(t.value.toLowerCase()));
+	}
+	_renderPredefinedPopover() {
+		if (!this._container || !this._chipsWrap || (this.querySelectorAll("[data-mint-tags-predefined=\"true\"]").forEach((e) => e.remove()), !this._predefinedTags.length) || !this._input || !this._input.id) return;
+		let e = `${this.getAttribute("id") || this._input.id}-tags-field`;
+		this._container.id = e;
+		let t = document.createElement("mint-popover");
+		t.setAttribute("trigger-id", e), t.setAttribute("trigger-toggle", "false"), t.setAttribute("trigger-align", "start"), t.setAttribute("direction", "down"), t.setAttribute("padding", "0"), t.setAttribute("distance", "6px"), t.dataset.mintTagsPredefined = "true";
+		let n = document.createElement("div"), r = this._container.offsetWidth;
+		n.className = "box-border flex w-full min-w-0 flex-col gap-0.5 bg-white p-1 dark:bg-mint-elevated", r > 0 ? n.style.minWidth = `${Math.max(r, 200)}px` : n.style.minWidth = "12rem", n.addEventListener("mousedown", (e) => {
+			e.preventDefault();
+		});
+		let i = this._getAvailablePredefinedTags();
+		if (i.length) i.forEach((e) => {
+			let r = document.createElement("mint-button");
+			r.setAttribute("type", "button"), r.setAttribute("variant", "ghost"), r.setAttribute("full-width", "true"), r.setAttribute("align", "left"), r.className = "w-full justify-start", r.textContent = e.label || e.value, r.addEventListener("click", () => {
+				this._addTag(e), t.removeAttribute("open");
+			}), n.appendChild(r);
+		});
+		else {
+			let e = document.createElement("div");
+			e.className = "px-2 py-1 text-xs text-gray-500 dark:text-gray-400", e.textContent = "No tags available", n.appendChild(e);
+		}
+		t.appendChild(n), this._container.appendChild(t), this._attachPredefinedPopoverOpenOnInputFocus();
+	}
+	_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(() => {
+				this._predefinedBlurCloseTimer = null, this._getPredefinedPopoverEl()?.removeAttribute("open");
+			}, 150);
+		}));
 	}
 	_renderSkeleton(e) {
 		let t = this._container;
@@ -6774,22 +6848,36 @@ var k = class extends HTMLElement {
 	_addFromInput() {
 		if (!this._input) return;
 		let e = this._input.value.trim();
-		if (e) {
-			if (this._tags.some((t) => t.value.toLowerCase() === e.toLowerCase())) {
+		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._tags.push({
-				value: e,
-				label: e,
-				dismissable: !0
-			}), this._syncAttr(), this._renderChips(), this._emitChange(), this._input.value = "", setTimeout(() => {
-				this._input?.focus();
-			}, 10);
-		}
+			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._emitChange();
+		this._tags = this._tags.filter((t) => t.value !== e), this._syncAttr(), this._renderChips(), this._renderPredefinedPopover(), this._emitChange();
 	}
 	_emitChange() {
 		this.dispatchEvent(new CustomEvent("tags-change", {
@@ -6817,6 +6905,11 @@ var k = class extends HTMLElement {
 			(e.key === "Backspace" || e.key === "Delete") && t.dismissable && (e.preventDefault(), this._removeTag(t.value), this._focusInput());
 		});
 	}
+	_onContainerPointerDown(e) {
+		if (!this._input || this.isLoading() || e.button !== 0 || e.defaultPrevented) return;
+		let t = e.composedPath();
+		t.some((e) => e === this._input) || t.some((e) => e instanceof HTMLElement && e.tagName === "MINT-CHIP") || this._input.focus({ preventScroll: !0 });
+	}
 	_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("opacity-60"));
 	}