import { n as e, t } from "../../utils-C_mWfcFX.js";
//#region src/form/tag-input/index.ts
var n = class {
	el;
	inputEl;
	tagsContainer;
	dropdownEl;
	listboxId;
	inputId;
	config;
	tags = [];
	filteredSuggestions = [];
	highlightedIndex = -1;
	isDropdownOpen = !1;
	isDestroyed = !1;
	debounceTimer = null;
	handleDocumentClick;
	handleInputKeydown;
	handleInputInput;
	handleInputPaste;
	handleInputFocus;
	constructor(n) {
		this.config = n, this.listboxId = e("cmm-taginput-listbox"), this.inputId = e("cmm-taginput-input"), this.tags = n.tags ? [...n.tags] : [], this.el = document.createElement("div"), this.el.className = this.buildRootClass(), this.tagsContainer = document.createElement("div"), this.tagsContainer.className = "cmm-tag-input__container", this.tagsContainer.addEventListener("click", () => {
			this.isDestroyed || this.inputEl.focus();
		}), this.inputEl = document.createElement("input"), this.inputEl.id = this.inputId, this.inputEl.type = "text", this.inputEl.className = "cmm-tag-input__input", this.inputEl.placeholder = n.placeholder ?? "Add tag...", this.inputEl.setAttribute("role", "combobox"), this.inputEl.setAttribute("aria-expanded", "false"), this.inputEl.setAttribute("aria-controls", this.listboxId), this.inputEl.setAttribute("aria-autocomplete", "list"), this.inputEl.setAttribute("autocomplete", "off"), this.isMaxReached() && (this.inputEl.disabled = !0), this.tagsContainer.appendChild(this.inputEl), this.renderTags(), this.el.appendChild(this.tagsContainer), this.dropdownEl = document.createElement("div"), this.dropdownEl.id = this.listboxId, this.dropdownEl.className = "cmm-tag-input__dropdown", this.dropdownEl.setAttribute("role", "listbox"), this.dropdownEl.style.display = "none", this.el.appendChild(this.dropdownEl), this.handleInputKeydown = (e) => {
			this.isDestroyed || this.onInputKeydown(e);
		}, this.handleInputInput = () => {
			this.isDestroyed || this.onInputChange();
		}, this.handleInputPaste = (e) => {
			this.isDestroyed || this.onPaste(e);
		}, this.handleInputFocus = () => {
			this.isDestroyed || this.inputEl.value.length > 0 && this.onInputChange();
		}, this.handleDocumentClick = (e) => {
			if (this.isDestroyed) return;
			let t = e.target;
			this.el.contains(t) || this.closeDropdown();
		}, this.inputEl.addEventListener("keydown", this.handleInputKeydown), this.inputEl.addEventListener("input", this.handleInputInput), this.inputEl.addEventListener("paste", this.handleInputPaste), this.inputEl.addEventListener("focus", this.handleInputFocus), document.addEventListener("click", this.handleDocumentClick), t(n.container).appendChild(this.el);
	}
	getTags() {
		return [...this.tags];
	}
	setTags(e) {
		this.tags = [...e], this.renderTags(), this.updateInputState(), this.config.onChange?.(this.getTags());
	}
	addTag(e) {
		let t = e.trim();
		return t === "" || this.isMaxReached() || this.config.allowDuplicates !== !0 && this.tags.includes(t) ? !1 : (this.tags.push(t), this.renderTags(), this.updateInputState(), this.config.onChange?.(this.getTags()), !0);
	}
	removeTag(e) {
		let t = this.tags.indexOf(e);
		return t === -1 ? !1 : (this.tags.splice(t, 1), this.renderTags(), this.updateInputState(), this.config.onChange?.(this.getTags()), !0);
	}
	destroy() {
		this.isDestroyed = !0, this.debounceTimer !== null && clearTimeout(this.debounceTimer), this.inputEl.removeEventListener("keydown", this.handleInputKeydown), this.inputEl.removeEventListener("input", this.handleInputInput), this.inputEl.removeEventListener("paste", this.handleInputPaste), this.inputEl.removeEventListener("focus", this.handleInputFocus), document.removeEventListener("click", this.handleDocumentClick), this.el.remove();
	}
	buildRootClass() {
		let e = ["cmm-tag-input"];
		return this.config.className && e.push(this.config.className), e.join(" ");
	}
	isMaxReached() {
		return this.config.maxTags !== void 0 && this.tags.length >= this.config.maxTags;
	}
	renderTags() {
		this.tagsContainer.querySelectorAll(".cmm-tag-input__tag").forEach((e) => {
			e.remove();
		});
		for (let e of this.tags) {
			let t = this.createChipEl(e);
			this.tagsContainer.insertBefore(t, this.inputEl);
		}
	}
	createChipEl(e) {
		let t = document.createElement("span");
		t.className = "cmm-tag-input__tag", t.setAttribute("data-tag", e);
		let n = this.findSuggestion(e);
		n?.color && (t.style.setProperty("--tag-color", n.color), t.classList.add("cmm-tag-input__tag--colored"));
		let r = document.createElement("span");
		r.className = "cmm-tag-input__tag-label", r.textContent = n?.label ?? e, t.appendChild(r);
		let i = document.createElement("button");
		return i.type = "button", i.className = "cmm-tag-input__tag-remove", i.setAttribute("aria-label", `Remove ${e}`), i.innerHTML = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M9 3L3 9M3 3L9 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>", i.addEventListener("click", (t) => {
			t.stopPropagation(), this.isDestroyed || this.removeTag(e);
		}), t.appendChild(i), t;
	}
	findSuggestion(e) {
		if (!(this.config.suggestions === void 0 || typeof this.config.suggestions == "function")) return this.config.suggestions.find((t) => t.value === e);
	}
	updateInputState() {
		this.isMaxReached() ? (this.inputEl.disabled = !0, this.inputEl.placeholder = "Max tags reached", this.closeDropdown()) : (this.inputEl.disabled = !1, this.inputEl.placeholder = this.config.placeholder ?? "Add tag...");
	}
	onInputKeydown(e) {
		let t = this.config.delimiter ?? ",";
		switch (e.key) {
			case "Enter":
				if (e.preventDefault(), this.isDropdownOpen && this.highlightedIndex >= 0) {
					let e = this.filteredSuggestions[this.highlightedIndex];
					e !== void 0 && (this.addTag(e.value), this.inputEl.value = "", this.closeDropdown());
				} else this.inputEl.value.trim() !== "" && (this.addTag(this.inputEl.value), this.inputEl.value = "", this.closeDropdown());
				break;
			case "Backspace":
				if (this.inputEl.value === "" && this.tags.length > 0) {
					let e = this.tags[this.tags.length - 1];
					e !== void 0 && this.removeTag(e);
				}
				break;
			case "Escape":
				this.isDropdownOpen && (e.preventDefault(), this.closeDropdown());
				break;
			case "ArrowDown":
				if (this.isDropdownOpen) {
					e.preventDefault();
					let t = this.highlightedIndex < this.filteredSuggestions.length - 1 ? this.highlightedIndex + 1 : 0;
					this.setHighlightedIndex(t);
				}
				break;
			case "ArrowUp":
				if (this.isDropdownOpen) {
					e.preventDefault();
					let t = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : this.filteredSuggestions.length - 1;
					this.setHighlightedIndex(t);
				}
				break;
			default: e.key === t && this.inputEl.value.trim() !== "" && (e.preventDefault(), this.addTag(this.inputEl.value), this.inputEl.value = "", this.closeDropdown());
		}
	}
	onInputChange() {
		let e = this.inputEl.value.trim();
		if (e === "" || this.config.suggestions === void 0) {
			this.closeDropdown();
			return;
		}
		this.debounceTimer !== null && clearTimeout(this.debounceTimer), this.debounceTimer = setTimeout(() => {
			this.fetchSuggestions(e);
		}, 150);
	}
	async fetchSuggestions(e) {
		if (this.config.suggestions !== void 0) if (typeof this.config.suggestions == "function") {
			this.showLoadingState();
			try {
				let t = this.config.suggestions(e), n = t instanceof Promise ? await t : t;
				this.filteredSuggestions = this.filterExisting(n), this.renderSuggestions();
			} catch {
				this.closeDropdown();
			}
		} else {
			let t = e.toLowerCase(), n = this.config.suggestions.filter((e) => (e.label ?? e.value).toLowerCase().includes(t));
			this.filteredSuggestions = this.filterExisting(n), this.renderSuggestions();
		}
	}
	filterExisting(e) {
		return this.config.allowDuplicates === !0 ? e : e.filter((e) => !this.tags.includes(e.value));
	}
	renderSuggestions() {
		if (this.dropdownEl.innerHTML = "", this.filteredSuggestions.length === 0) {
			this.closeDropdown();
			return;
		}
		for (let t = 0; t < this.filteredSuggestions.length; t++) {
			let n = this.filteredSuggestions[t];
			if (n === void 0) continue;
			let r = n.value, i = document.createElement("div");
			if (i.id = e("cmm-taginput-option"), i.className = "cmm-tag-input__option", i.setAttribute("role", "option"), i.setAttribute("aria-selected", "false"), i.setAttribute("data-index", String(t)), n.color !== void 0) {
				let e = document.createElement("span");
				e.className = "cmm-tag-input__option-dot", e.style.backgroundColor = n.color, i.appendChild(e);
			}
			let a = document.createElement("span");
			if (a.className = "cmm-tag-input__option-text", a.textContent = n.label ?? n.value, n.category !== void 0) {
				let e = document.createElement("span");
				e.className = "cmm-tag-input__option-category", e.textContent = n.category, i.appendChild(a), i.appendChild(e);
			} else i.appendChild(a);
			i.addEventListener("click", (e) => {
				e.stopPropagation(), !this.isDestroyed && (this.addTag(r), this.inputEl.value = "", this.closeDropdown(), this.inputEl.focus());
			}), this.dropdownEl.appendChild(i);
		}
		this.openDropdown(), this.highlightedIndex = -1;
	}
	showLoadingState() {
		this.dropdownEl.innerHTML = "";
		let e = document.createElement("div");
		e.className = "cmm-tag-input__loading", e.innerHTML = "<svg class=\"cmm-tag-input__spinner\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"30 10\" /></svg> Loading...", this.dropdownEl.appendChild(e), this.openDropdown();
	}
	openDropdown() {
		this.isDropdownOpen || (this.isDropdownOpen = !0, this.dropdownEl.style.display = "", this.inputEl.setAttribute("aria-expanded", "true"));
	}
	closeDropdown() {
		this.isDropdownOpen && (this.isDropdownOpen = !1, this.dropdownEl.style.display = "none", this.inputEl.setAttribute("aria-expanded", "false"), this.highlightedIndex = -1);
	}
	setHighlightedIndex(e) {
		let t = this.dropdownEl.querySelectorAll(".cmm-tag-input__option");
		for (let e of t) e.classList.remove("cmm-tag-input__option--highlighted"), e.setAttribute("aria-selected", "false");
		this.highlightedIndex = e;
		let n = t[e];
		n !== void 0 && (n.classList.add("cmm-tag-input__option--highlighted"), n.setAttribute("aria-selected", "true"), n.scrollIntoView({ block: "nearest" }), this.inputEl.setAttribute("aria-activedescendant", n.id));
	}
	onPaste(e) {
		let t = e.clipboardData?.getData("text");
		if (t === void 0 || t === "") return;
		let n = this.config.delimiter ?? ",";
		if (t.includes(n)) {
			e.preventDefault();
			let r = t.split(n);
			for (let e of r) this.addTag(e);
		}
	}
};
//#endregion
export { n as TagInput };

//# sourceMappingURL=index.js.map