monobill-mintui 0.6.612 → 0.6.613

package/dist/components/dropzone/Dropzone.d.ts

@@ -1,59 +1 @@
-import '../icon/index';
-declare class MintDropzone extends HTMLElement {
-    static get observedAttributes(): string[];
-    private _dropzone;
-    private _fileInput;
-    private _previewContainer;
-    private _isDragging;
-    private _wasDragging;
-    private _isUpdatingFiles;
-    private _listenersInitialized;
-    private _selectedFiles;
-    private _previewUrls;
-    private _resetHandler;
-    private _onDropzoneClick?;
-    private _onDragOver?;
-    private _onDragLeave?;
-    private _onDrop?;
-    private _onFileInputChange?;
-    private _onFileInputInput?;
-    private _onKeyDown?;
-    private _onFocus?;
-    private _onBlur?;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    getLabel(): string;
-    getAccept(): string;
-    isMultiple(): boolean;
-    getWidth(): string;
-    getHeight(): string;
-    private _renderSkeleton;
-    getName(): string;
-    hasError(): boolean;
-    getErrorMessage(): string;
-    isDisabled(): boolean;
-    isLoading(): boolean;
-    render(): void;
-    private _updateDragState;
-    private _renderErrorState;
-    private _updateDragStateClass;
-    private setupEventListeners;
-    private removeEventListeners;
-    private _handleFiles;
-    private _isFileAccepted;
-    private _dispatchEvent;
-    private _dispatchSelectionEvents;
-    private _syncFileInputFromSelected;
-    get files(): FileList | null;
-    syncFiles(): void;
-    private _renderPreviews;
-    private _removeFileAt;
-    private _cleanupPreviewUrls;
-    private _attachFormResetListener;
-    private _applyValidFiles;
-    private _isDuplicateFile;
-}
-export default MintDropzone;
-//# sourceMappingURL=Dropzone.d.ts.map
+export { MintDropzone as default, MintDropzone } from '../../mintui-elements'

package/dist/components/dropzone/Dropzone.d.ts.map

@@ -1 +1,10 @@
-{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../src/components/dropzone/Dropzone.ts"],"names":[],"mappings":"AAEA,OAAO,eAAe,CAAA;AAEtB,cAAM,YAAa,SAAQ,WAAW;IACpC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,iBAAiB,CAA2B;IACpD,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,gBAAgB,CAAiB;IACzC,OAAO,CAAC,qBAAqB,CAAiB;IAC9C,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,aAAa,CAAoC;IACzD,OAAO,CAAC,gBAAgB,CAAC,CAAyB;IAClD,OAAO,CAAC,WAAW,CAAC,CAAwB;IAC5C,OAAO,CAAC,YAAY,CAAC,CAAwB;IAC7C,OAAO,CAAC,OAAO,CAAC,CAAwB;IACxC,OAAO,CAAC,kBAAkB,CAAC,CAAoB;IAC/C,OAAO,CAAC,iBAAiB,CAAC,CAAoB;IAC9C,OAAO,CAAC,UAAU,CAAC,CAA4B;IAC/C,OAAO,CAAC,QAAQ,CAAC,CAAyB;IAC1C,OAAO,CAAC,OAAO,CAAC,CAAyB;;IAMzC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAkB9F,QAAQ,IAAI,MAAM;IAIlB,SAAS,IAAI,MAAM;IAInB,UAAU,IAAI,OAAO;IAKrB,QAAQ,IAAI,MAAM;IAIlB,SAAS,IAAI,MAAM;IAInB,OAAO,CAAC,eAAe;IA0GvB,OAAO,IAAI,MAAM;IAIjB,QAAQ,IAAI,OAAO;IAKnB,eAAe,IAAI,MAAM;IAIzB,UAAU,IAAI,OAAO;IAKrB,SAAS,IAAI,OAAO;IAKpB,MAAM,IAAI,IAAI;IA0Fd,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,mBAAmB;IAyM3B,OAAO,CAAC,oBAAoB;IAwB5B,OAAO,CAAC,YAAY;IAqCpB,OAAO,CAAC,eAAe;IAyBvB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,wBAAwB;IAOhC,OAAO,CAAC,0BAA0B;IAyBlC,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,CAI3B;IAGD,SAAS,IAAI,IAAI;IAIjB,OAAO,CAAC,eAAe;IAiHvB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,gBAAgB;CAOzB;AAOD,eAAe,YAAY,CAAA"}
+{
+  "version": 3,
+  "file": "Dropzone.d.ts",
+  "sourceRoot": "",
+  "sources": [
+    "Dropzone.d.ts"
+  ],
+  "names": [],
+  "mappings": "AAAA"
+}

package/dist/components/dropzone/browser.js

@@ -0,0 +1,355 @@
+
+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('dropzone', '../../dropzone.css')
+import { a as e } from "../chunks/icon-gQAtsERy.js";
+import { t } from "../chunks/register-element-BFYmIynH.js";
+import "../chunks/icon-C0OLmjDY.js";
+import "../chunks/close-Dg6U0IjZ.js";
+e({
+	name: "upload",
+	viewBox: "0 0 24 24",
+	path: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}), e({
+	name: "attach",
+	viewBox: "0 0 24 24",
+	path: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+});
+//#endregion
+//#region src/components/dropzone/Dropzone.ts
+var n = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"label",
+			"accept",
+			"multiple",
+			"width",
+			"height",
+			"disabled",
+			"name",
+			"error",
+			"error-message",
+			"loading",
+			"aria-label",
+			"aria-describedby"
+		];
+	}
+	constructor() {
+		super(), this._dropzone = null, this._fileInput = null, this._previewContainer = null, this._isDragging = !1, this._wasDragging = !1, this._isUpdatingFiles = !1, this._listenersInitialized = !1, this._selectedFiles = [], this._previewUrls = [], this._resetHandler = null, this._a11yId = `mint-dropzone-${Math.random().toString(36).slice(2, 10)}`;
+	}
+	connectedCallback() {
+		this.classList.add("mint-dropzone"), this.render(), this._attachFormResetListener();
+	}
+	disconnectedCallback() {
+		if (this.removeEventListeners(), this._cleanupPreviewUrls(), this._resetHandler) {
+			let e = this.closest("form");
+			e && e.removeEventListener("reset", this._resetHandler), this._resetHandler = null;
+		}
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) {
+			if (e === "error" || e === "error-message") {
+				this._updateDragStateClass(), this._renderErrorState(this.hasError(), this.getErrorMessage());
+				return;
+			}
+			if (e === "loading") {
+				this.render();
+				return;
+			}
+			this.render();
+		}
+	}
+	getLabel() {
+		return this.getAttribute("label") || "";
+	}
+	getAccept() {
+		return this.getAttribute("accept") || "";
+	}
+	isMultiple() {
+		return this.getAttribute("multiple") === "true";
+	}
+	getWidth() {
+		return this.getAttribute("width") || "200px";
+	}
+	getHeight() {
+		return this.getAttribute("height") || "200px";
+	}
+	_renderSkeleton(e) {
+		let t = this.querySelector(".mint-dropzone-skeleton-container"), n = this._dropzone;
+		if (e) {
+			this.classList.add("is-loading"), t || (t = document.createElement("div"), t.className = "mint-dropzone-skeleton-container", n ? (n.classList.add("is-positioned"), n.appendChild(t)) : this.appendChild(t));
+			let e = t.querySelector(".mint-dropzone-skeleton");
+			e || (e = document.createElement("div"), e.className = "mint-dropzone-skeleton", t.appendChild(e)), t.classList.add("is-visible"), n?.classList.add("is-loading");
+		} else this.classList.remove("is-loading"), t && t.classList.remove("is-visible"), n?.classList.remove("is-loading");
+	}
+	getName() {
+		return this.getAttribute("name") || "";
+	}
+	hasError() {
+		return this.getAttribute("error") === "true";
+	}
+	getErrorMessage() {
+		return this.getAttribute("error-message") || "";
+	}
+	isDisabled() {
+		return this.getAttribute("disabled") === "true";
+	}
+	isLoading() {
+		return this.getAttribute("loading") === "true";
+	}
+	render() {
+		let e = this.isLoading(), t = this.getLabel(), n = this.getAccept(), r = this.isMultiple(), i = this.isDisabled(), a = this.getWidth(), o = this.getHeight(), s = this.getName(), c = this.hasError(), l = this.getErrorMessage();
+		if (this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", c ? "true" : "false"), i) this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role");
+		else {
+			this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", this.getAttribute("aria-label") || t || "File upload dropzone");
+			let e = (this.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean), n = this.querySelector(".mint-dropzone-error");
+			n && (n.id = `${this.id || this._a11yId}-error`, e.push(n.id)), e.length ? this._dropzone.setAttribute("aria-describedby", Array.from(new Set(e)).join(" ")) : this._dropzone.removeAttribute("aria-describedby");
+		}
+		this._dropzone.style.width = a, this._dropzone.style.height = o, this._dropzone.style.minWidth = a, this._dropzone.style.minHeight = o, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.className = "mint-dropzone-file-input", this._fileInput.setAttribute("tabindex", "-1"), this._fileInput.setAttribute("aria-hidden", "true"), this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = n, this._fileInput.multiple = r, this._fileInput.disabled = i, s ? this._fileInput.name = s : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", c ? "true" : "false");
+		let u = this._dropzone.querySelector(".mint-dropzone-icon"), d = this._dropzone.querySelector(".mint-dropzone-label");
+		u && u.remove(), d && d.remove();
+		let f = document.createElement("div");
+		f.className = "mint-dropzone-icon";
+		let p = document.createElement("mint-icon");
+		if (p.setAttribute("name", "upload"), p.className = "mint-dropzone-upload-icon", f.appendChild(p), this._dropzone.appendChild(f), t) {
+			let e = document.createElement("div");
+			e.className = "mint-dropzone-label", e.textContent = t, this._dropzone.appendChild(e);
+		}
+		this.setupEventListeners(), this._renderErrorState(c, l), this._renderPreviews(), this._renderSkeleton(e);
+	}
+	_updateDragState() {
+		this._dropzone && this._updateDragStateClass();
+	}
+	_renderErrorState(e, t) {
+		let n = this.querySelector(".mint-dropzone-error");
+		if (e && t ? (n || (n = document.createElement("div"), n.className = "mint-dropzone-error", this.appendChild(n)), n.textContent = t) : n && n.remove(), this._dropzone) {
+			this._dropzone.setAttribute("aria-invalid", String(e)), n && (n.id = `${this.id || this._a11yId}-error`);
+			let t = (this.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
+			n && t.push(n.id), t.length ? this._dropzone.setAttribute("aria-describedby", Array.from(new Set(t)).join(" ")) : this._dropzone.removeAttribute("aria-describedby");
+		}
+	}
+	_updateDragStateClass() {
+		if (!this._dropzone) return;
+		let e = this.isDisabled(), t = this.hasError();
+		this._dropzone.className = "mint-dropzone-target", this._dropzone.classList.toggle("has-files", this._selectedFiles.length > 0), this._dropzone.classList.toggle("is-dragging", this._isDragging), this._dropzone.classList.toggle("has-error", t), this._dropzone.classList.toggle("is-disabled", e);
+	}
+	setupEventListeners() {
+		this._listenersInitialized || (this._listenersInitialized = !0, this.removeEventListeners(), !(!this._dropzone || !this._fileInput || this.isDisabled()) && (this._onDropzoneClick ||= (e) => {
+			if (!(this.isDisabled() || !this._fileInput) && e.target !== this._fileInput && (e.stopPropagation(), e.preventDefault(), e.isTrusted)) try {
+				this._fileInput.click();
+			} catch (e) {
+				console.debug("File chooser blocked:", e);
+			}
+		}, this._onDragOver ||= (e) => {
+			e.preventDefault(), e.stopPropagation(), this.isDisabled() || this._isDragging || (this._isDragging = !0, this._wasDragging = !0, this._updateDragState());
+		}, this._onDragLeave ||= (e) => {
+			e.preventDefault(), e.stopPropagation();
+			let t = this._dropzone?.getBoundingClientRect();
+			t && (e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom) && this._isDragging && (this._isDragging = !1, this._wasDragging = !1, this._updateDragState());
+		}, this._onDrop ||= (e) => {
+			if (e.preventDefault(), e.stopPropagation(), this._isDragging && (this._isDragging = !1, this._wasDragging = !1, this._updateDragState()), this.isDisabled()) return;
+			let t = e.dataTransfer?.files;
+			t && t.length > 0 && this._handleFiles(t);
+		}, this._onFileInputInput ||= (e) => {
+			e.stopImmediatePropagation(), e.stopPropagation();
+		}, this._onKeyDown ||= (e) => {
+			if (!(this.isDisabled() || !this._fileInput) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), e.isTrusted)) try {
+				this._fileInput.click();
+			} catch (e) {
+				console.debug("File chooser blocked:", e);
+			}
+		}, this._onFocus ||= (e) => {
+			this._dropzone && !this.isDisabled() && this._dropzone.classList.add("is-focused");
+		}, this._onBlur ||= (e) => {
+			this._dropzone;
+		}, this._onFileInputChange ||= (e) => {
+			if (e.stopImmediatePropagation(), e.stopPropagation(), this._isUpdatingFiles) return;
+			let t = e.target.files;
+			if (t && t.length > 0) {
+				let e = this.getAccept(), n = this.isMultiple(), r = [], i = [];
+				for (let n = 0; n < t.length; n++) {
+					let a = t[n];
+					this._isFileAccepted(a, e) ? r.push(a) : i.push(a);
+				}
+				if (!n && r.length > 1 && (i.push(...r.slice(1)), r.splice(1)), i.length > 0) {
+					let e = new CustomEvent("dropRejected", {
+						detail: {
+							files: i,
+							reason: "File type not accepted or multiple files not allowed"
+						},
+						bubbles: !0,
+						cancelable: !0
+					});
+					this.dispatchEvent(e);
+				}
+				r.length > 0 && this._applyValidFiles(r);
+			}
+		}, this._dropzone.addEventListener("click", this._onDropzoneClick), this._dropzone.addEventListener("dragover", this._onDragOver), this._dropzone.addEventListener("dragleave", this._onDragLeave), this._dropzone.addEventListener("drop", this._onDrop), this._dropzone.addEventListener("keydown", this._onKeyDown), this._dropzone.addEventListener("focus", this._onFocus), this._dropzone.addEventListener("blur", this._onBlur), this._fileInput.addEventListener("change", this._onFileInputChange), this._fileInput.addEventListener("input", this._onFileInputInput, !0)));
+	}
+	removeEventListeners() {
+		this._dropzone && (this._onDropzoneClick && this._dropzone.removeEventListener("click", this._onDropzoneClick), this._onDragOver && this._dropzone.removeEventListener("dragover", this._onDragOver), this._onDragLeave && this._dropzone.removeEventListener("dragleave", this._onDragLeave), this._onDrop && this._dropzone.removeEventListener("drop", this._onDrop), this._onKeyDown && this._dropzone.removeEventListener("keydown", this._onKeyDown), this._onFocus && this._dropzone.removeEventListener("focus", this._onFocus), this._onBlur && this._dropzone.removeEventListener("blur", this._onBlur)), this._fileInput && (this._onFileInputChange && this._fileInput.removeEventListener("change", this._onFileInputChange), this._onFileInputInput && this._fileInput.removeEventListener("input", this._onFileInputInput, !0)), this._isDragging = !1, this._listenersInitialized = !1;
+	}
+	_handleFiles(e) {
+		let t = this.getAccept(), n = this.isMultiple(), r = [], i = [];
+		for (let n = 0; n < e.length; n++) {
+			let a = e[n];
+			this._isFileAccepted(a, t) ? r.push(a) : i.push(a);
+		}
+		if (!n && r.length > 1 && (i.push(...r.slice(1)), r.splice(1)), i.length > 0) {
+			let e = new CustomEvent("dropRejected", {
+				detail: {
+					files: i,
+					reason: "File type not accepted or multiple files not allowed"
+				},
+				bubbles: !0,
+				cancelable: !0
+			});
+			this.dispatchEvent(e);
+		}
+		r.length > 0 && this._applyValidFiles(r);
+	}
+	_isFileAccepted(e, t) {
+		if (!t) return !0;
+		let n = t.split(",").map((e) => e.trim().toLowerCase());
+		for (let t of n) if (t.startsWith(".")) {
+			if ("." + e.name.split(".").pop()?.toLowerCase() === t) return !0;
+		} else if (t.includes("/*")) {
+			if (t.split("/")[0] === e.type.split("/")[0]) return !0;
+		} else if (e.type === t) return !0;
+		return !1;
+	}
+	_dispatchEvent(e, t) {
+		let n = t.target, r = new CustomEvent(e, {
+			detail: {
+				files: n.files ? Array.from(n.files) : [],
+				value: n.value || ""
+			},
+			bubbles: !0,
+			cancelable: !0
+		});
+		this.dispatchEvent(r);
+	}
+	_dispatchSelectionEvents() {
+		let e = {
+			files: [...this._selectedFiles],
+			value: ""
+		};
+		this.dispatchEvent(new CustomEvent("input", {
+			detail: e,
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("change", {
+			detail: e,
+			bubbles: !0,
+			cancelable: !0,
+			composed: !0
+		}));
+	}
+	_syncFileInputFromSelected() {
+		if (!this._fileInput) return;
+		let e = new DataTransfer();
+		this._selectedFiles.forEach((t) => {
+			try {
+				e.items.add(t);
+			} catch (e) {
+				console.warn("Failed to add file to DataTransfer:", e);
+			}
+		}), this._isUpdatingFiles = !0;
+		try {
+			this._fileInput.files = e.files;
+		} catch (e) {
+			console.warn("Failed to set files on input:", e);
+		}
+		setTimeout(() => {
+			this._isUpdatingFiles = !1;
+		}, 0);
+	}
+	get files() {
+		return this._syncFileInputFromSelected(), this._fileInput?.files || null;
+	}
+	syncFiles() {
+		this._syncFileInputFromSelected();
+	}
+	_renderPreviews() {
+		if (!this._dropzone) return;
+		if (this._previewContainer && (this._cleanupPreviewUrls(), this._previewContainer.remove()), this._selectedFiles.length === 0) {
+			this._previewContainer = null, this._updateDragStateClass();
+			return;
+		}
+		let e = document.createElement("div");
+		e.className = "mint-dropzone-previews-wrapper", e.classList.toggle("has-error", this.hasError()), e.classList.toggle("is-dragging", this._isDragging);
+		let t = document.createElement("div");
+		t.className = "mint-dropzone-previews", this._selectedFiles.forEach((e, n) => {
+			let r = document.createElement("div");
+			if (r.className = "mint-dropzone-file", e.type.startsWith("image/")) {
+				let t = document.createElement("img");
+				t.className = "mint-dropzone-file-image";
+				let n = URL.createObjectURL(e);
+				this._previewUrls.push(n), t.src = n, r.appendChild(t);
+			} else {
+				let e = document.createElement("mint-icon");
+				e.setAttribute("name", "attach"), e.className = "mint-dropzone-file-icon", r.appendChild(e);
+			}
+			let i = document.createElement("div");
+			i.className = "mint-dropzone-file-name", i.textContent = e.name, r.appendChild(i);
+			let a = document.createElement("button");
+			a.type = "button", a.className = "mint-dropzone-file-remove";
+			let o = document.createElement("mint-icon");
+			o.setAttribute("name", "close"), o.className = "mint-dropzone-file-remove-icon", a.appendChild(o), a.addEventListener("click", (e) => {
+				e.preventDefault(), e.stopPropagation(), this._removeFileAt(n);
+			}), r.appendChild(a), t.appendChild(r);
+		});
+		let n = document.createElement("div");
+		n.className = "mint-dropzone-preview-fade is-top", e.appendChild(n);
+		let r = document.createElement("div");
+		r.className = "mint-dropzone-preview-fade is-bottom is-visible", e.appendChild(r);
+		let i = () => {
+			let e = t.scrollTop, i = t.scrollHeight, a = t.clientHeight;
+			e > 0 ? n.classList.add("is-visible") : n.classList.remove("is-visible"), e + a < i - 1 ? r.classList.add("is-visible") : r.classList.remove("is-visible");
+		};
+		i(), t.addEventListener("scroll", i), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
+	}
+	_removeFileAt(e) {
+		if (e < 0 || e >= this._selectedFiles.length) return;
+		let [t] = this._selectedFiles.splice(e, 1);
+		t && this._cleanupPreviewUrls(), this._syncFileInputFromSelected(), this._renderPreviews(), this._dispatchSelectionEvents();
+	}
+	_cleanupPreviewUrls() {
+		this._previewUrls.forEach((e) => URL.revokeObjectURL(e)), this._previewUrls = [];
+	}
+	_attachFormResetListener() {
+		let e = this.closest("form");
+		!e || this._resetHandler || (this._resetHandler = () => {
+			this._selectedFiles = [], this._syncFileInputFromSelected(), this._renderPreviews(), this._cleanupPreviewUrls();
+		}, e.addEventListener("reset", this._resetHandler));
+	}
+	_applyValidFiles(e) {
+		if (this.isMultiple()) {
+			let t = e.filter((e) => !this._isDuplicateFile(e));
+			this._selectedFiles.push(...t);
+		} else this._selectedFiles = [e[0]];
+		this._syncFileInputFromSelected(), this._selectedFiles.length > 0 && (this.removeAttribute("error"), this.removeAttribute("error-message"), this._fileInput && this._fileInput.removeAttribute("aria-invalid")), this._renderPreviews(), this._dispatchSelectionEvents();
+	}
+	_isDuplicateFile(e) {
+		return this._selectedFiles.some((t) => t.name === e.name && t.size === e.size && t.lastModified === e.lastModified);
+	}
+};
+customElements.get("mint-dropzone") || t("mint-dropzone", n);
+//#endregion
+export { n as default };

package/dist/components/dropzone/index.cjs

@@ -0,0 +1 @@
+const e=require(`../chunks/icon-dG8sLTBn.js`),t=require(`../chunks/register-element-tCL_F1YI.js`);require(`../chunks/icon-CyzR9aVl.js`),require(`../chunks/close-5tYlQdkk.js`),e.a({name:`upload`,viewBox:`0 0 24 24`,path:`M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12`,strokeLinecap:`round`,strokeLinejoin:`round`}),e.a({name:`attach`,viewBox:`0 0 24 24`,path:`M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13`,strokeLinecap:`round`,strokeLinejoin:`round`});var n=class extends HTMLElement{static get observedAttributes(){return[`label`,`accept`,`multiple`,`width`,`height`,`disabled`,`name`,`error`,`error-message`,`loading`,`aria-label`,`aria-describedby`]}constructor(){super(),this._dropzone=null,this._fileInput=null,this._previewContainer=null,this._isDragging=!1,this._wasDragging=!1,this._isUpdatingFiles=!1,this._listenersInitialized=!1,this._selectedFiles=[],this._previewUrls=[],this._resetHandler=null,this._a11yId=`mint-dropzone-${Math.random().toString(36).slice(2,10)}`}connectedCallback(){this.classList.add(`mint-dropzone`),this.render(),this._attachFormResetListener()}disconnectedCallback(){if(this.removeEventListeners(),this._cleanupPreviewUrls(),this._resetHandler){let e=this.closest(`form`);e&&e.removeEventListener(`reset`,this._resetHandler),this._resetHandler=null}}attributeChangedCallback(e,t,n){if(t!==n){if(e===`error`||e===`error-message`){this._updateDragStateClass(),this._renderErrorState(this.hasError(),this.getErrorMessage());return}if(e===`loading`){this.render();return}this.render()}}getLabel(){return this.getAttribute(`label`)||``}getAccept(){return this.getAttribute(`accept`)||``}isMultiple(){return this.getAttribute(`multiple`)===`true`}getWidth(){return this.getAttribute(`width`)||`200px`}getHeight(){return this.getAttribute(`height`)||`200px`}_renderSkeleton(e){let t=this.querySelector(`.mint-dropzone-skeleton-container`),n=this._dropzone;if(e){this.classList.add(`is-loading`),t||(t=document.createElement(`div`),t.className=`mint-dropzone-skeleton-container`,n?(n.classList.add(`is-positioned`),n.appendChild(t)):this.appendChild(t));let e=t.querySelector(`.mint-dropzone-skeleton`);e||(e=document.createElement(`div`),e.className=`mint-dropzone-skeleton`,t.appendChild(e)),t.classList.add(`is-visible`),n?.classList.add(`is-loading`)}else this.classList.remove(`is-loading`),t&&t.classList.remove(`is-visible`),n?.classList.remove(`is-loading`)}getName(){return this.getAttribute(`name`)||``}hasError(){return this.getAttribute(`error`)===`true`}getErrorMessage(){return this.getAttribute(`error-message`)||``}isDisabled(){return this.getAttribute(`disabled`)===`true`}isLoading(){return this.getAttribute(`loading`)===`true`}render(){let e=this.isLoading(),t=this.getLabel(),n=this.getAccept(),r=this.isMultiple(),i=this.isDisabled(),a=this.getWidth(),o=this.getHeight(),s=this.getName(),c=this.hasError(),l=this.getErrorMessage();if(this._dropzone||(this._dropzone=document.createElement(`div`),this.appendChild(this._dropzone)),this._updateDragStateClass(),this._dropzone.setAttribute(`aria-invalid`,c?`true`:`false`),i)this._dropzone.setAttribute(`tabindex`,`-1`),this._dropzone.removeAttribute(`role`);else{this._dropzone.setAttribute(`tabindex`,`0`),this._dropzone.setAttribute(`role`,`button`),this._dropzone.setAttribute(`aria-label`,this.getAttribute(`aria-label`)||t||`File upload dropzone`);let e=(this.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean),n=this.querySelector(`.mint-dropzone-error`);n&&(n.id=`${this.id||this._a11yId}-error`,e.push(n.id)),e.length?this._dropzone.setAttribute(`aria-describedby`,Array.from(new Set(e)).join(` `)):this._dropzone.removeAttribute(`aria-describedby`)}this._dropzone.style.width=a,this._dropzone.style.height=o,this._dropzone.style.minWidth=a,this._dropzone.style.minHeight=o,this._fileInput||(this._fileInput=document.createElement(`input`),this._fileInput.type=`file`,this._fileInput.className=`mint-dropzone-file-input`,this._fileInput.setAttribute(`tabindex`,`-1`),this._fileInput.setAttribute(`aria-hidden`,`true`),this._dropzone.appendChild(this._fileInput)),this._fileInput.accept=n,this._fileInput.multiple=r,this._fileInput.disabled=i,s?this._fileInput.name=s:this._fileInput.removeAttribute(`name`),this._fileInput.setAttribute(`aria-invalid`,c?`true`:`false`);let u=this._dropzone.querySelector(`.mint-dropzone-icon`),d=this._dropzone.querySelector(`.mint-dropzone-label`);u&&u.remove(),d&&d.remove();let f=document.createElement(`div`);f.className=`mint-dropzone-icon`;let p=document.createElement(`mint-icon`);if(p.setAttribute(`name`,`upload`),p.className=`mint-dropzone-upload-icon`,f.appendChild(p),this._dropzone.appendChild(f),t){let e=document.createElement(`div`);e.className=`mint-dropzone-label`,e.textContent=t,this._dropzone.appendChild(e)}this.setupEventListeners(),this._renderErrorState(c,l),this._renderPreviews(),this._renderSkeleton(e)}_updateDragState(){this._dropzone&&this._updateDragStateClass()}_renderErrorState(e,t){let n=this.querySelector(`.mint-dropzone-error`);if(e&&t?(n||(n=document.createElement(`div`),n.className=`mint-dropzone-error`,this.appendChild(n)),n.textContent=t):n&&n.remove(),this._dropzone){this._dropzone.setAttribute(`aria-invalid`,String(e)),n&&(n.id=`${this.id||this._a11yId}-error`);let t=(this.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(Boolean);n&&t.push(n.id),t.length?this._dropzone.setAttribute(`aria-describedby`,Array.from(new Set(t)).join(` `)):this._dropzone.removeAttribute(`aria-describedby`)}}_updateDragStateClass(){if(!this._dropzone)return;let e=this.isDisabled(),t=this.hasError();this._dropzone.className=`mint-dropzone-target`,this._dropzone.classList.toggle(`has-files`,this._selectedFiles.length>0),this._dropzone.classList.toggle(`is-dragging`,this._isDragging),this._dropzone.classList.toggle(`has-error`,t),this._dropzone.classList.toggle(`is-disabled`,e)}setupEventListeners(){this._listenersInitialized||(this._listenersInitialized=!0,this.removeEventListeners(),!(!this._dropzone||!this._fileInput||this.isDisabled())&&(this._onDropzoneClick||=e=>{if(!(this.isDisabled()||!this._fileInput)&&e.target!==this._fileInput&&(e.stopPropagation(),e.preventDefault(),e.isTrusted))try{this._fileInput.click()}catch(e){console.debug(`File chooser blocked:`,e)}},this._onDragOver||=e=>{e.preventDefault(),e.stopPropagation(),this.isDisabled()||this._isDragging||(this._isDragging=!0,this._wasDragging=!0,this._updateDragState())},this._onDragLeave||=e=>{e.preventDefault(),e.stopPropagation();let t=this._dropzone?.getBoundingClientRect();t&&(e.clientX<t.left||e.clientX>t.right||e.clientY<t.top||e.clientY>t.bottom)&&this._isDragging&&(this._isDragging=!1,this._wasDragging=!1,this._updateDragState())},this._onDrop||=e=>{if(e.preventDefault(),e.stopPropagation(),this._isDragging&&(this._isDragging=!1,this._wasDragging=!1,this._updateDragState()),this.isDisabled())return;let t=e.dataTransfer?.files;t&&t.length>0&&this._handleFiles(t)},this._onFileInputInput||=e=>{e.stopImmediatePropagation(),e.stopPropagation()},this._onKeyDown||=e=>{if(!(this.isDisabled()||!this._fileInput)&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopPropagation(),e.isTrusted))try{this._fileInput.click()}catch(e){console.debug(`File chooser blocked:`,e)}},this._onFocus||=e=>{this._dropzone&&!this.isDisabled()&&this._dropzone.classList.add(`is-focused`)},this._onBlur||=e=>{this._dropzone},this._onFileInputChange||=e=>{if(e.stopImmediatePropagation(),e.stopPropagation(),this._isUpdatingFiles)return;let t=e.target.files;if(t&&t.length>0){let e=this.getAccept(),n=this.isMultiple(),r=[],i=[];for(let n=0;n<t.length;n++){let a=t[n];this._isFileAccepted(a,e)?r.push(a):i.push(a)}if(!n&&r.length>1&&(i.push(...r.slice(1)),r.splice(1)),i.length>0){let e=new CustomEvent(`dropRejected`,{detail:{files:i,reason:`File type not accepted or multiple files not allowed`},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}r.length>0&&this._applyValidFiles(r)}},this._dropzone.addEventListener(`click`,this._onDropzoneClick),this._dropzone.addEventListener(`dragover`,this._onDragOver),this._dropzone.addEventListener(`dragleave`,this._onDragLeave),this._dropzone.addEventListener(`drop`,this._onDrop),this._dropzone.addEventListener(`keydown`,this._onKeyDown),this._dropzone.addEventListener(`focus`,this._onFocus),this._dropzone.addEventListener(`blur`,this._onBlur),this._fileInput.addEventListener(`change`,this._onFileInputChange),this._fileInput.addEventListener(`input`,this._onFileInputInput,!0)))}removeEventListeners(){this._dropzone&&(this._onDropzoneClick&&this._dropzone.removeEventListener(`click`,this._onDropzoneClick),this._onDragOver&&this._dropzone.removeEventListener(`dragover`,this._onDragOver),this._onDragLeave&&this._dropzone.removeEventListener(`dragleave`,this._onDragLeave),this._onDrop&&this._dropzone.removeEventListener(`drop`,this._onDrop),this._onKeyDown&&this._dropzone.removeEventListener(`keydown`,this._onKeyDown),this._onFocus&&this._dropzone.removeEventListener(`focus`,this._onFocus),this._onBlur&&this._dropzone.removeEventListener(`blur`,this._onBlur)),this._fileInput&&(this._onFileInputChange&&this._fileInput.removeEventListener(`change`,this._onFileInputChange),this._onFileInputInput&&this._fileInput.removeEventListener(`input`,this._onFileInputInput,!0)),this._isDragging=!1,this._listenersInitialized=!1}_handleFiles(e){let t=this.getAccept(),n=this.isMultiple(),r=[],i=[];for(let n=0;n<e.length;n++){let a=e[n];this._isFileAccepted(a,t)?r.push(a):i.push(a)}if(!n&&r.length>1&&(i.push(...r.slice(1)),r.splice(1)),i.length>0){let e=new CustomEvent(`dropRejected`,{detail:{files:i,reason:`File type not accepted or multiple files not allowed`},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}r.length>0&&this._applyValidFiles(r)}_isFileAccepted(e,t){if(!t)return!0;let n=t.split(`,`).map(e=>e.trim().toLowerCase());for(let t of n)if(t.startsWith(`.`)){if(`.`+e.name.split(`.`).pop()?.toLowerCase()===t)return!0}else if(t.includes(`/*`)){if(t.split(`/`)[0]===e.type.split(`/`)[0])return!0}else if(e.type===t)return!0;return!1}_dispatchEvent(e,t){let n=t.target,r=new CustomEvent(e,{detail:{files:n.files?Array.from(n.files):[],value:n.value||``},bubbles:!0,cancelable:!0});this.dispatchEvent(r)}_dispatchSelectionEvents(){let e={files:[...this._selectedFiles],value:``};this.dispatchEvent(new CustomEvent(`input`,{detail:e,bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`change`,{detail:e,bubbles:!0,cancelable:!0,composed:!0}))}_syncFileInputFromSelected(){if(!this._fileInput)return;let e=new DataTransfer;this._selectedFiles.forEach(t=>{try{e.items.add(t)}catch(e){console.warn(`Failed to add file to DataTransfer:`,e)}}),this._isUpdatingFiles=!0;try{this._fileInput.files=e.files}catch(e){console.warn(`Failed to set files on input:`,e)}setTimeout(()=>{this._isUpdatingFiles=!1},0)}get files(){return this._syncFileInputFromSelected(),this._fileInput?.files||null}syncFiles(){this._syncFileInputFromSelected()}_renderPreviews(){if(!this._dropzone)return;if(this._previewContainer&&(this._cleanupPreviewUrls(),this._previewContainer.remove()),this._selectedFiles.length===0){this._previewContainer=null,this._updateDragStateClass();return}let e=document.createElement(`div`);e.className=`mint-dropzone-previews-wrapper`,e.classList.toggle(`has-error`,this.hasError()),e.classList.toggle(`is-dragging`,this._isDragging);let t=document.createElement(`div`);t.className=`mint-dropzone-previews`,this._selectedFiles.forEach((e,n)=>{let r=document.createElement(`div`);if(r.className=`mint-dropzone-file`,e.type.startsWith(`image/`)){let t=document.createElement(`img`);t.className=`mint-dropzone-file-image`;let n=URL.createObjectURL(e);this._previewUrls.push(n),t.src=n,r.appendChild(t)}else{let e=document.createElement(`mint-icon`);e.setAttribute(`name`,`attach`),e.className=`mint-dropzone-file-icon`,r.appendChild(e)}let i=document.createElement(`div`);i.className=`mint-dropzone-file-name`,i.textContent=e.name,r.appendChild(i);let a=document.createElement(`button`);a.type=`button`,a.className=`mint-dropzone-file-remove`;let o=document.createElement(`mint-icon`);o.setAttribute(`name`,`close`),o.className=`mint-dropzone-file-remove-icon`,a.appendChild(o),a.addEventListener(`click`,e=>{e.preventDefault(),e.stopPropagation(),this._removeFileAt(n)}),r.appendChild(a),t.appendChild(r)});let n=document.createElement(`div`);n.className=`mint-dropzone-preview-fade is-top`,e.appendChild(n);let r=document.createElement(`div`);r.className=`mint-dropzone-preview-fade is-bottom is-visible`,e.appendChild(r);let i=()=>{let e=t.scrollTop,i=t.scrollHeight,a=t.clientHeight;e>0?n.classList.add(`is-visible`):n.classList.remove(`is-visible`),e+a<i-1?r.classList.add(`is-visible`):r.classList.remove(`is-visible`)};i(),t.addEventListener(`scroll`,i),e.appendChild(t),this._previewContainer=e,this._dropzone.appendChild(e),this._updateDragStateClass()}_removeFileAt(e){if(e<0||e>=this._selectedFiles.length)return;let[t]=this._selectedFiles.splice(e,1);t&&this._cleanupPreviewUrls(),this._syncFileInputFromSelected(),this._renderPreviews(),this._dispatchSelectionEvents()}_cleanupPreviewUrls(){this._previewUrls.forEach(e=>URL.revokeObjectURL(e)),this._previewUrls=[]}_attachFormResetListener(){let e=this.closest(`form`);!e||this._resetHandler||(this._resetHandler=()=>{this._selectedFiles=[],this._syncFileInputFromSelected(),this._renderPreviews(),this._cleanupPreviewUrls()},e.addEventListener(`reset`,this._resetHandler))}_applyValidFiles(e){if(this.isMultiple()){let t=e.filter(e=>!this._isDuplicateFile(e));this._selectedFiles.push(...t)}else this._selectedFiles=[e[0]];this._syncFileInputFromSelected(),this._selectedFiles.length>0&&(this.removeAttribute(`error`),this.removeAttribute(`error-message`),this._fileInput&&this._fileInput.removeAttribute(`aria-invalid`)),this._renderPreviews(),this._dispatchSelectionEvents()}_isDuplicateFile(e){return this._selectedFiles.some(t=>t.name===e.name&&t.size===e.size&&t.lastModified===e.lastModified)}};customElements.get(`mint-dropzone`)||t.t(`mint-dropzone`,n),module.exports=n;

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

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

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

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