@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/file-dropzone/file-dropzone.element.js

@@ -1,232 +1,200 @@
-import { LitElement, html, css } from "lit";
-import { query, property } from "lit/decorators.js";
-import { UUIFileDropzoneEvent } from "./UUIFileDropzoneEvent.js";
-import "../symbol-file-dropzone/symbol-file-dropzone.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const _UUIFileDropzoneElement = class _UUIFileDropzoneElement extends LabelMixin("", LitElement) {
-  constructor() {
-    super();
-    this._acceptedFileExtensions = [];
-    this._acceptedMimeTypes = [];
-    this._accept = "";
-    this.disallowFolderUpload = false;
-    this.multiple = false;
-    this.addEventListener("dragenter", this._onDragEnter, false);
-    this.addEventListener("dragleave", this._onDragLeave, false);
-    this.addEventListener("dragover", this._onDragOver, false);
-    this.addEventListener("drop", this._onDrop, false);
-  }
-  set accept(value) {
-    if (value) {
-      const mimetypes = [];
-      const fileextensions = [];
-      value.split(",").forEach((item) => {
-        item = item.trim().toLowerCase();
-        if (/^[a-z]+\/[a-z*]+$/.test(item)) {
-          mimetypes.push(item);
-        } else {
-          fileextensions.push(item.replace(/^\./, ""));
-        }
-      });
-      this._acceptedMimeTypes = mimetypes;
-      this._acceptedFileExtensions = fileextensions;
-    } else {
-      this._acceptedMimeTypes = [];
-      this._acceptedFileExtensions = [];
-    }
-    const old = this._accept;
-    this._accept = value;
-    this.requestUpdate("accept", old);
-  }
-  get accept() {
-    return this._accept;
-  }
-  /**
-   * Opens the native file picker to select a file.
-   * @method browse
-   */
-  browse() {
-    this._input.click();
-  }
-  /**
-   * Check if folder upload should be processed based on component settings.
-   * @returns true if folder upload is allowed and multiple files are enabled
-   */
-  _shouldProcessFolder() {
-    return !this.disallowFolderUpload && this.multiple;
-  }
-  async _getAllEntries(dataTransferItemList) {
-    const rootEntries = [...dataTransferItemList].filter((item) => item?.kind === "file").map((item) => this._getEntry(item)).filter((entry) => entry !== null);
-    return this._processRootEntries(rootEntries);
-  }
-  async _processRootEntries(rootEntries) {
-    const folders = [];
-    const files = [];
-    const rejectedFiles = [];
-    for (const entry of rootEntries) {
-      if (!entry.isDirectory) {
-        const file = await this._getAsFile(entry);
-        if (this._isAccepted(file)) {
-          files.push(file);
-        } else {
-          rejectedFiles.push(file);
-        }
-      } else if (this._shouldProcessFolder()) {
-        folders.push(await this._mkdir(entry));
-      }
-    }
-    return { files, folders, rejectedFiles };
-  }
-  /**
-   * Get the filesystem entry (file or directory) from a DataTransferItem.
-   * @remark Supports both WebKit and non-WebKit browsers.
-   */
-  _getEntry(entry) {
-    let dir = null;
-    if ("webkitGetAsEntry" in entry) {
-      dir = entry.webkitGetAsEntry();
-    } else if ("getAsEntry" in entry) {
-      dir = entry.getAsEntry();
-    }
-    return dir;
-  }
-  // Process entries from a directory reader
-  async _processEntries(entries, folders, files) {
-    for (const en of entries) {
-      if (en.isFile) {
-        const file = await this._getAsFile(en);
-        if (this._isAccepted(file)) {
-          files.push(file);
-        }
-      } else if (en.isDirectory) {
-        const directory = await this._mkdir(en);
-        folders.push(directory);
-      }
-    }
-  }
-  // Read entries from a directory reader recursively
-  async _readAllEntries(reader, folders, files) {
-    return new Promise((resolve, reject) => {
-      reader.readEntries(async (entries) => {
-        if (!entries.length) {
-          resolve();
-          return;
-        }
-        await this._processEntries(entries, folders, files);
-        await this._readAllEntries(reader, folders, files);
-        resolve();
-      }, reject);
-    });
-  }
-  // Make directory structure
-  async _mkdir(entry) {
-    const reader = entry.createReader();
-    const folders = [];
-    const files = [];
-    await this._readAllEntries(reader, folders, files);
-    const result = { folderName: entry.name, folders, files };
-    return result;
-  }
-  _isAccepted(file) {
-    if (this._acceptedFileExtensions.length === 0 && this._acceptedMimeTypes.length === 0) {
-      return true;
-    }
-    const fileType = file.type.toLowerCase();
-    const fileExtension = file.name.split(".").pop();
-    if (fileExtension && this._acceptedFileExtensions.includes(fileExtension.toLowerCase())) {
-      return true;
-    }
-    for (const mimeType of this._acceptedMimeTypes) {
-      if (fileType === mimeType || mimeType.endsWith("/*") && fileType.startsWith(mimeType.replace("*", ""))) {
-        return true;
-      }
-    }
-    return false;
-  }
-  async _getAsFile(fileEntry) {
-    return new Promise((resolve, reject) => fileEntry.file(resolve, reject));
-  }
-  async _onDrop(e) {
-    e.preventDefault();
-    this._dropzone.classList.remove("hover");
-    const items = e.dataTransfer?.items;
-    if (items) {
-      const fileSystemResult = await this._getAllEntries(items);
-      if (this.multiple === false && fileSystemResult.files.length) {
-        fileSystemResult.files = [fileSystemResult.files[0]];
-        fileSystemResult.folders = [];
-        fileSystemResult.rejectedFiles = [];
-      }
-      if (fileSystemResult.rejectedFiles.length > 0) {
-        this.dispatchEvent(
-          new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {
-            detail: { files: fileSystemResult.rejectedFiles, folders: [] }
-          })
-        );
-      }
-      if (!fileSystemResult.files.length && !fileSystemResult.folders.length) {
-        return;
-      }
-      this.dispatchEvent(
-        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
-          detail: {
-            files: fileSystemResult.files,
-            folders: fileSystemResult.folders
-          }
-        })
-      );
-    }
-  }
-  _onDragOver(e) {
-    e.preventDefault();
-  }
-  _onDragEnter(e) {
-    this._dropzone.classList.add("hover");
-    e.preventDefault();
-  }
-  _onDragLeave(e) {
-    this._dropzone.classList.remove("hover");
-    e.preventDefault();
-  }
-  _onFileInputChange() {
-    const files = this._input.files ? Array.from(this._input.files) : [];
-    if (this.multiple === false && files.length > 1) {
-      files.splice(1, files.length - 1);
-    }
-    const allowedFiles = files.filter((file) => this._isAccepted(file));
-    const rejectedFiles = files.filter((file) => !this._isAccepted(file));
-    const shouldReportRejections = rejectedFiles.length > 0 && (this.multiple || allowedFiles.length === 0);
-    if (shouldReportRejections) {
-      this.dispatchEvent(
-        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {
-          detail: { files: rejectedFiles, folders: [] }
-        })
-      );
-    }
-    if (!allowedFiles.length) {
-      return;
-    }
-    this.dispatchEvent(
-      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
-        detail: {
-          files: allowedFiles,
-          folders: []
-        }
-      })
-    );
-  }
-  render() {
-    return html`
+import "../symbol-file-dropzone/symbol-file-dropzone.js";
+import { UUIFileDropzoneEvent } from "./UUIFileDropzoneEvent.js";
+import { LitElement, css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+//#region src/components/file-dropzone/file-dropzone.element.ts
+/**
+* @element uui-file-dropzone
+*  @fires {UUIFileDropzoneEvent} change - fires when a file has been selected.
+*  @fires {UUIFileDropzoneEvent} reject - fires when files are rejected due to not matching the accept attribute.
+*  @slot - For the content of the dropzone
+*  @description - Dropzone for file upload. Supports native browsing and drag n drop.
+*/
+var UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
+	/**
+	* Comma-separated list of accepted mime types or file extensions (denoted with a `.`).
+	* If this is left empty, it will allow all types.
+	*
+	* @type {string}
+	* @attr
+	* @examples [
+	*   "image/*,application/pdf",
+	*   ".gif,.png,.jpg,.jpeg,.pdf",
+	* ]
+	*/
+	set accept(value) {
+		if (value) {
+			const mimetypes = [];
+			const fileextensions = [];
+			value.split(",").forEach((item) => {
+				item = item.trim().toLowerCase();
+				if (/^[a-z]+\/[a-z*]+$/.test(item)) mimetypes.push(item);
+				else fileextensions.push(item.replace(/^\./, ""));
+			});
+			this._acceptedMimeTypes = mimetypes;
+			this._acceptedFileExtensions = fileextensions;
+		} else {
+			this._acceptedMimeTypes = [];
+			this._acceptedFileExtensions = [];
+		}
+		const old = this._accept;
+		this._accept = value;
+		this.requestUpdate("accept", old);
+	}
+	get accept() {
+		return this._accept;
+	}
+	/**
+	* Opens the native file picker to select a file.
+	* @method browse
+	*/
+	browse() {
+		this._input.click();
+	}
+	constructor() {
+		super();
+		this._acceptedFileExtensions = [];
+		this._acceptedMimeTypes = [];
+		this._accept = "";
+		this.disallowFolderUpload = false;
+		this.multiple = false;
+		this.addEventListener("dragenter", this._onDragEnter, false);
+		this.addEventListener("dragleave", this._onDragLeave, false);
+		this.addEventListener("dragover", this._onDragOver, false);
+		this.addEventListener("drop", this._onDrop, false);
+	}
+	/**
+	* Check if folder upload should be processed based on component settings.
+	* @returns true if folder upload is allowed and multiple files are enabled
+	*/
+	_shouldProcessFolder() {
+		return !this.disallowFolderUpload && this.multiple;
+	}
+	async _getAllEntries(dataTransferItemList) {
+		const rootEntries = [...dataTransferItemList].filter((item) => item?.kind === "file").map((item) => this._getEntry(item)).filter((entry) => entry !== null);
+		return this._processRootEntries(rootEntries);
+	}
+	async _processRootEntries(rootEntries) {
+		const folders = [];
+		const files = [];
+		const rejectedFiles = [];
+		for (const entry of rootEntries) if (!entry.isDirectory) {
+			const file = await this._getAsFile(entry);
+			if (this._isAccepted(file)) files.push(file);
+			else rejectedFiles.push(file);
+		} else if (this._shouldProcessFolder()) folders.push(await this._mkdir(entry));
+		return {
+			files,
+			folders,
+			rejectedFiles
+		};
+	}
+	/**
+	* Get the filesystem entry (file or directory) from a DataTransferItem.
+	* @remark Supports both WebKit and non-WebKit browsers.
+	*/
+	_getEntry(entry) {
+		let dir = null;
+		if ("webkitGetAsEntry" in entry) dir = entry.webkitGetAsEntry();
+		else if ("getAsEntry" in entry) dir = entry.getAsEntry();
+		return dir;
+	}
+	async _processEntries(entries, folders, files) {
+		for (const en of entries) if (en.isFile) {
+			const file = await this._getAsFile(en);
+			if (this._isAccepted(file)) files.push(file);
+		} else if (en.isDirectory) {
+			const directory = await this._mkdir(en);
+			folders.push(directory);
+		}
+	}
+	async _readAllEntries(reader, folders, files) {
+		return new Promise((resolve, reject) => {
+			reader.readEntries(async (entries) => {
+				if (!entries.length) {
+					resolve();
+					return;
+				}
+				await this._processEntries(entries, folders, files);
+				await this._readAllEntries(reader, folders, files);
+				resolve();
+			}, reject);
+		});
+	}
+	async _mkdir(entry) {
+		const reader = entry.createReader();
+		const folders = [];
+		const files = [];
+		await this._readAllEntries(reader, folders, files);
+		return {
+			folderName: entry.name,
+			folders,
+			files
+		};
+	}
+	_isAccepted(file) {
+		if (this._acceptedFileExtensions.length === 0 && this._acceptedMimeTypes.length === 0) return true;
+		const fileType = file.type.toLowerCase();
+		const fileExtension = file.name.split(".").pop();
+		if (fileExtension && this._acceptedFileExtensions.includes(fileExtension.toLowerCase())) return true;
+		for (const mimeType of this._acceptedMimeTypes) if (fileType === mimeType || mimeType.endsWith("/*") && fileType.startsWith(mimeType.replace("*", ""))) return true;
+		return false;
+	}
+	async _getAsFile(fileEntry) {
+		return new Promise((resolve, reject) => fileEntry.file(resolve, reject));
+	}
+	async _onDrop(e) {
+		e.preventDefault();
+		this._dropzone.classList.remove("hover");
+		const items = e.dataTransfer?.items;
+		if (items) {
+			const fileSystemResult = await this._getAllEntries(items);
+			if (this.multiple === false && fileSystemResult.files.length) {
+				fileSystemResult.files = [fileSystemResult.files[0]];
+				fileSystemResult.folders = [];
+				fileSystemResult.rejectedFiles = [];
+			}
+			if (fileSystemResult.rejectedFiles.length > 0) this.dispatchEvent(new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, { detail: {
+				files: fileSystemResult.rejectedFiles,
+				folders: []
+			} }));
+			if (!fileSystemResult.files.length && !fileSystemResult.folders.length) return;
+			this.dispatchEvent(new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, { detail: {
+				files: fileSystemResult.files,
+				folders: fileSystemResult.folders
+			} }));
+		}
+	}
+	_onDragOver(e) {
+		e.preventDefault();
+	}
+	_onDragEnter(e) {
+		this._dropzone.classList.add("hover");
+		e.preventDefault();
+	}
+	_onDragLeave(e) {
+		this._dropzone.classList.remove("hover");
+		e.preventDefault();
+	}
+	_onFileInputChange() {
+		const files = this._input.files ? Array.from(this._input.files) : [];
+		if (this.multiple === false && files.length > 1) files.splice(1, files.length - 1);
+		const allowedFiles = files.filter((file) => this._isAccepted(file));
+		const rejectedFiles = files.filter((file) => !this._isAccepted(file));
+		if (rejectedFiles.length > 0 && (this.multiple || allowedFiles.length === 0)) this.dispatchEvent(new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, { detail: {
+			files: rejectedFiles,
+			folders: []
+		} }));
+		if (!allowedFiles.length) return;
+		this.dispatchEvent(new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, { detail: {
+			files: allowedFiles,
+			folders: []
+		} }));
+	}
+	render() {
+		return html`
       <div id="dropzone">
         <uui-symbol-file-dropzone id="symbol"></uui-symbol-file-dropzone>
         ${this.renderLabel()}
@@ -241,10 +209,9 @@ const _UUIFileDropzoneElement = class _UUIFileDropzoneElement extends LabelMixin
         <slot></slot>
       </div>
     `;
-  }
-};
-_UUIFileDropzoneElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       #dropzone {
         display: flex;
         flex-direction: column;
@@ -282,29 +249,19 @@ _UUIFileDropzoneElement.styles = [
         opacity: 0;
         display: none;
       }
-    `
-];
-let UUIFileDropzoneElement = _UUIFileDropzoneElement;
-__decorateClass([
-  query("#input")
-], UUIFileDropzoneElement.prototype, "_input", 2);
-__decorateClass([
-  query("#dropzone")
-], UUIFileDropzoneElement.prototype, "_dropzone", 2);
-__decorateClass([
-  property({ type: String })
-], UUIFileDropzoneElement.prototype, "accept", 1);
-__decorateClass([
-  property({
-    type: Boolean,
-    reflect: true,
-    attribute: "disallow-folder-upload"
-  })
-], UUIFileDropzoneElement.prototype, "disallowFolderUpload", 2);
-__decorateClass([
-  property({ type: Boolean })
-], UUIFileDropzoneElement.prototype, "multiple", 2);
-export {
-  UUIFileDropzoneElement
+    `];
+	}
 };
-//# sourceMappingURL=file-dropzone.element.js.map
+__decorate([query("#input")], UUIFileDropzoneElement.prototype, "_input", void 0);
+__decorate([query("#dropzone")], UUIFileDropzoneElement.prototype, "_dropzone", void 0);
+__decorate([property({ type: String })], UUIFileDropzoneElement.prototype, "accept", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "disallow-folder-upload"
+})], UUIFileDropzoneElement.prototype, "disallowFolderUpload", void 0);
+__decorate([property({ type: Boolean })], UUIFileDropzoneElement.prototype, "multiple", void 0);
+//#endregion
+export { UUIFileDropzoneElement };
+
+//# sourceMappingURL=file-dropzone.element.js.map

package/dist/components/file-dropzone/file-dropzone.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-dropzone.element.js","sources":["../../../src/components/file-dropzone/file-dropzone.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { query, property } from 'lit/decorators.js';\nimport { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nimport '../symbol-file-dropzone/symbol-file-dropzone.js';\n\nexport interface UUIFileFolder {\n  folderName: string;\n  folders: UUIFileFolder[];\n  files: File[];\n}\n\n/**\n * @element uui-file-dropzone\n *  @fires {UUIFileDropzoneEvent} change - fires when a file has been selected.\n *  @fires {UUIFileDropzoneEvent} reject - fires when files are rejected due to not matching the accept attribute.\n *  @slot - For the content of the dropzone\n *  @description - Dropzone for file upload. Supports native browsing and drag n drop.\n */\nexport class UUIFileDropzoneElement extends LabelMixin('', LitElement) {\n  @query('#input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#dropzone')\n  private readonly _dropzone!: HTMLElement;\n\n  private _acceptedFileExtensions: string[] = [];\n  private _acceptedMimeTypes: string[] = [];\n  private _accept = '';\n\n  /**\n   * Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\n   * If this is left empty, it will allow all types.\n   *\n   * @type {string}\n   * @attr\n   * @examples [\n   *   \"image/*,application/pdf\",\n   *   \".gif,.png,.jpg,.jpeg,.pdf\",\n   * ]\n   */\n  @property({ type: String })\n  public set accept(value: string) {\n    if (value) {\n      const mimetypes: string[] = [];\n      const fileextensions: string[] = [];\n\n      // Create the arrays defined above\n      value.split(',').forEach(item => {\n        item = item.trim().toLowerCase();\n\n        // If the item is a mime type, add it to the accept list\n        if (/^[a-z]+\\/[a-z*]+$/.test(item)) {\n          mimetypes.push(item);\n        } else {\n          fileextensions.push(item.replace(/^\\./, ''));\n        }\n      });\n\n      this._acceptedMimeTypes = mimetypes;\n      this._acceptedFileExtensions = fileextensions;\n    } else {\n      this._acceptedMimeTypes = [];\n      this._acceptedFileExtensions = [];\n    }\n    const old = this._accept;\n    this._accept = value;\n    this.requestUpdate('accept', old);\n  }\n  public get accept(): string {\n    return this._accept;\n  }\n\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'disallow-folder-upload',\n  })\n  public disallowFolderUpload: boolean = false;\n\n  /**\n   * Allows for multiple files to be selected.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean })\n  public multiple: boolean = false;\n\n  /**\n   * Opens the native file picker to select a file.\n   * @method browse\n   */\n  public browse() {\n    this._input.click();\n  }\n\n  constructor() {\n    super();\n\n    this.addEventListener('dragenter', this._onDragEnter, false);\n    this.addEventListener('dragleave', this._onDragLeave, false);\n    this.addEventListener('dragover', this._onDragOver, false);\n    this.addEventListener('drop', this._onDrop, false);\n  }\n\n  /**\n   * Check if folder upload should be processed based on component settings.\n   * @returns true if folder upload is allowed and multiple files are enabled\n   */\n  private _shouldProcessFolder(): boolean {\n    return !this.disallowFolderUpload && this.multiple;\n  }\n\n  private async _getAllEntries(dataTransferItemList: DataTransferItemList) {\n    // Phase 1: Extract ALL FileSystemEntry refs synchronously.\n    // DataTransferItem.webkitGetAsEntry() returns null after the first await\n    // because the browser expires the drag data store. FileSystemEntry objects\n    // obtained here remain valid indefinitely.\n    const rootEntries = [...dataTransferItemList]\n      .filter(item => item?.kind === 'file')\n      .map(item => this._getEntry(item))\n      .filter((entry): entry is FileSystemEntry => entry !== null);\n\n    return this._processRootEntries(rootEntries);\n  }\n\n  private async _processRootEntries(rootEntries: FileSystemEntry[]) {\n    const folders: UUIFileFolder[] = [];\n    const files: File[] = [];\n    const rejectedFiles: File[] = [];\n\n    for (const entry of rootEntries) {\n      if (!entry.isDirectory) {\n        const file = await this._getAsFile(entry as FileSystemFileEntry);\n        if (this._isAccepted(file)) {\n          files.push(file);\n        } else {\n          rejectedFiles.push(file);\n        }\n      } else if (this._shouldProcessFolder()) {\n        folders.push(await this._mkdir(entry as FileSystemDirectoryEntry));\n      }\n    }\n\n    return { files, folders, rejectedFiles };\n  }\n\n  /**\n   * Get the filesystem entry (file or directory) from a DataTransferItem.\n   * @remark Supports both WebKit and non-WebKit browsers.\n   */\n  private _getEntry(entry: DataTransferItem): FileSystemEntry | null {\n    let dir: FileSystemDirectoryEntry | null = null;\n\n    if ('webkitGetAsEntry' in entry) {\n      dir = entry.webkitGetAsEntry() as FileSystemDirectoryEntry;\n    } else if ('getAsEntry' in entry) {\n      // non-WebKit browsers may rename webkitGetAsEntry to getAsEntry. MDN recommends looking for both.\n      dir = (entry as any).getAsEntry();\n    }\n\n    return dir;\n  }\n\n  // Process entries from a directory reader\n  private async _processEntries(\n    entries: FileSystemEntry[],\n    folders: UUIFileFolder[],\n    files: File[],\n  ): Promise<void> {\n    for (const en of entries) {\n      if (en.isFile) {\n        const file = await this._getAsFile(en as FileSystemFileEntry);\n        if (this._isAccepted(file)) {\n          files.push(file);\n        }\n      } else if (en.isDirectory) {\n        const directory = await this._mkdir(en as FileSystemDirectoryEntry);\n        folders.push(directory);\n      }\n    }\n  }\n\n  // Read entries from a directory reader recursively\n  private async _readAllEntries(\n    reader: FileSystemDirectoryReader,\n    folders: UUIFileFolder[],\n    files: File[],\n  ): Promise<void> {\n    return new Promise<void>((resolve, reject) => {\n      reader.readEntries(async entries => {\n        if (!entries.length) {\n          resolve();\n          return;\n        }\n\n        await this._processEntries(entries, folders, files);\n\n        // readEntries only reads up to 100 entries at a time. It is on purpose we call readEntries recursively.\n        await this._readAllEntries(reader, folders, files);\n\n        resolve();\n      }, reject);\n    });\n  }\n\n  // Make directory structure\n  private async _mkdir(\n    entry: FileSystemDirectoryEntry,\n  ): Promise<UUIFileFolder> {\n    const reader = entry.createReader();\n    const folders: UUIFileFolder[] = [];\n    const files: File[] = [];\n\n    await this._readAllEntries(reader, folders, files);\n\n    const result: UUIFileFolder = { folderName: entry.name, folders, files };\n    return result;\n  }\n\n  private _isAccepted(file: File) {\n    if (\n      this._acceptedFileExtensions.length === 0 &&\n      this._acceptedMimeTypes.length === 0\n    ) {\n      return true;\n    }\n\n    const fileType = file.type.toLowerCase();\n    const fileExtension = file.name.split('.').pop();\n\n    if (\n      fileExtension &&\n      this._acceptedFileExtensions.includes(fileExtension.toLowerCase())\n    ) {\n      return true;\n    }\n\n    for (const mimeType of this._acceptedMimeTypes) {\n      if (\n        fileType === mimeType ||\n        (mimeType.endsWith('/*') &&\n          fileType.startsWith(mimeType.replace('*', '')))\n      ) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  private async _getAsFile(fileEntry: FileSystemFileEntry): Promise<File> {\n    return new Promise((resolve, reject) => fileEntry.file(resolve, reject));\n  }\n\n  private async _onDrop(e: DragEvent) {\n    e.preventDefault();\n    this._dropzone.classList.remove('hover');\n\n    const items = e.dataTransfer?.items;\n\n    if (items) {\n      const fileSystemResult = await this._getAllEntries(items);\n\n      if (this.multiple === false && fileSystemResult.files.length) {\n        fileSystemResult.files = [fileSystemResult.files[0]];\n        fileSystemResult.folders = [];\n        // When multiple is false and we have an accepted file, don't report rejections\n        fileSystemResult.rejectedFiles = [];\n      }\n\n      if (fileSystemResult.rejectedFiles.length > 0) {\n        this.dispatchEvent(\n          new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {\n            detail: { files: fileSystemResult.rejectedFiles, folders: [] },\n          }),\n        );\n      }\n\n      if (!fileSystemResult.files.length && !fileSystemResult.folders.length) {\n        return;\n      }\n\n      this.dispatchEvent(\n        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n          detail: {\n            files: fileSystemResult.files,\n            folders: fileSystemResult.folders,\n          },\n        }),\n      );\n    }\n  }\n\n  private _onDragOver(e: DragEvent) {\n    e.preventDefault();\n  }\n\n  private _onDragEnter(e: DragEvent) {\n    // TODO: make visual indication of wether the file is acceptable or not. If not we need to make a more negative/disabled visual look.\n    this._dropzone.classList.add('hover');\n    e.preventDefault();\n  }\n\n  private _onDragLeave(e: DragEvent) {\n    this._dropzone.classList.remove('hover');\n    e.preventDefault();\n  }\n\n  private _onFileInputChange() {\n    const files = this._input.files ? Array.from(this._input.files) : [];\n\n    if (this.multiple === false && files.length > 1) {\n      files.splice(1, files.length - 1);\n    }\n\n    const allowedFiles = files.filter(file => this._isAccepted(file));\n    const rejectedFiles = files.filter(file => !this._isAccepted(file));\n\n    // When multiple is false and we have an accepted file, don't report rejections\n    const shouldReportRejections =\n      rejectedFiles.length > 0 && (this.multiple || allowedFiles.length === 0);\n\n    if (shouldReportRejections) {\n      this.dispatchEvent(\n        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {\n          detail: { files: rejectedFiles, folders: [] },\n        }),\n      );\n    }\n\n    if (!allowedFiles.length) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n        detail: {\n          files: allowedFiles,\n          folders: [],\n        },\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div id=\"dropzone\">\n        <uui-symbol-file-dropzone id=\"symbol\"></uui-symbol-file-dropzone>\n        ${this.renderLabel()}\n        <input\n          @click=${(e: Event) => e.stopImmediatePropagation()}\n          id=\"input\"\n          type=\"file\"\n          accept=${this.accept}\n          ?multiple=${this.multiple}\n          @change=${this._onFileInputChange}\n          aria-label=\"${this.label}\" />\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      #dropzone {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        padding: var(--uui-size-4);\n        border: 3px solid transparent;\n        margin: -3px;\n        backdrop-filter: blur(2px);\n      }\n      #dropzone.hover {\n        border-color: var(--uui-color-default);\n      }\n      #dropzone.hover::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        border-color: var(--uui-color-default);\n        background-color: var(--uui-color-default);\n      }\n      #symbol {\n        color: var(--uui-color-default);\n        max-width: 100%;\n        max-height: 100%;\n      }\n      #input {\n        position: absolute;\n        width: 0px;\n        height: 0px;\n        opacity: 0;\n        display: none;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"file-dropzone.element.js","names":[],"sources":["../../../src/components/file-dropzone/file-dropzone.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { query, property } from 'lit/decorators.js';\nimport { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nimport '../symbol-file-dropzone/symbol-file-dropzone.js';\n\nexport interface UUIFileFolder {\n  folderName: string;\n  folders: UUIFileFolder[];\n  files: File[];\n}\n\n/**\n * @element uui-file-dropzone\n *  @fires {UUIFileDropzoneEvent} change - fires when a file has been selected.\n *  @fires {UUIFileDropzoneEvent} reject - fires when files are rejected due to not matching the accept attribute.\n *  @slot - For the content of the dropzone\n *  @description - Dropzone for file upload. Supports native browsing and drag n drop.\n */\nexport class UUIFileDropzoneElement extends LabelMixin('', LitElement) {\n  @query('#input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#dropzone')\n  private readonly _dropzone!: HTMLElement;\n\n  private _acceptedFileExtensions: string[] = [];\n  private _acceptedMimeTypes: string[] = [];\n  private _accept = '';\n\n  /**\n   * Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\n   * If this is left empty, it will allow all types.\n   *\n   * @type {string}\n   * @attr\n   * @examples [\n   *   \"image/*,application/pdf\",\n   *   \".gif,.png,.jpg,.jpeg,.pdf\",\n   * ]\n   */\n  @property({ type: String })\n  public set accept(value: string) {\n    if (value) {\n      const mimetypes: string[] = [];\n      const fileextensions: string[] = [];\n\n      // Create the arrays defined above\n      value.split(',').forEach(item => {\n        item = item.trim().toLowerCase();\n\n        // If the item is a mime type, add it to the accept list\n        if (/^[a-z]+\\/[a-z*]+$/.test(item)) {\n          mimetypes.push(item);\n        } else {\n          fileextensions.push(item.replace(/^\\./, ''));\n        }\n      });\n\n      this._acceptedMimeTypes = mimetypes;\n      this._acceptedFileExtensions = fileextensions;\n    } else {\n      this._acceptedMimeTypes = [];\n      this._acceptedFileExtensions = [];\n    }\n    const old = this._accept;\n    this._accept = value;\n    this.requestUpdate('accept', old);\n  }\n  public get accept(): string {\n    return this._accept;\n  }\n\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'disallow-folder-upload',\n  })\n  public disallowFolderUpload: boolean = false;\n\n  /**\n   * Allows for multiple files to be selected.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean })\n  public multiple: boolean = false;\n\n  /**\n   * Opens the native file picker to select a file.\n   * @method browse\n   */\n  public browse() {\n    this._input.click();\n  }\n\n  constructor() {\n    super();\n\n    this.addEventListener('dragenter', this._onDragEnter, false);\n    this.addEventListener('dragleave', this._onDragLeave, false);\n    this.addEventListener('dragover', this._onDragOver, false);\n    this.addEventListener('drop', this._onDrop, false);\n  }\n\n  /**\n   * Check if folder upload should be processed based on component settings.\n   * @returns true if folder upload is allowed and multiple files are enabled\n   */\n  private _shouldProcessFolder(): boolean {\n    return !this.disallowFolderUpload && this.multiple;\n  }\n\n  private async _getAllEntries(dataTransferItemList: DataTransferItemList) {\n    // Phase 1: Extract ALL FileSystemEntry refs synchronously.\n    // DataTransferItem.webkitGetAsEntry() returns null after the first await\n    // because the browser expires the drag data store. FileSystemEntry objects\n    // obtained here remain valid indefinitely.\n    const rootEntries = [...dataTransferItemList]\n      .filter(item => item?.kind === 'file')\n      .map(item => this._getEntry(item))\n      .filter((entry): entry is FileSystemEntry => entry !== null);\n\n    return this._processRootEntries(rootEntries);\n  }\n\n  private async _processRootEntries(rootEntries: FileSystemEntry[]) {\n    const folders: UUIFileFolder[] = [];\n    const files: File[] = [];\n    const rejectedFiles: File[] = [];\n\n    for (const entry of rootEntries) {\n      if (!entry.isDirectory) {\n        const file = await this._getAsFile(entry as FileSystemFileEntry);\n        if (this._isAccepted(file)) {\n          files.push(file);\n        } else {\n          rejectedFiles.push(file);\n        }\n      } else if (this._shouldProcessFolder()) {\n        folders.push(await this._mkdir(entry as FileSystemDirectoryEntry));\n      }\n    }\n\n    return { files, folders, rejectedFiles };\n  }\n\n  /**\n   * Get the filesystem entry (file or directory) from a DataTransferItem.\n   * @remark Supports both WebKit and non-WebKit browsers.\n   */\n  private _getEntry(entry: DataTransferItem): FileSystemEntry | null {\n    let dir: FileSystemDirectoryEntry | null = null;\n\n    if ('webkitGetAsEntry' in entry) {\n      dir = entry.webkitGetAsEntry() as FileSystemDirectoryEntry;\n    } else if ('getAsEntry' in entry) {\n      // non-WebKit browsers may rename webkitGetAsEntry to getAsEntry. MDN recommends looking for both.\n      dir = (entry as any).getAsEntry();\n    }\n\n    return dir;\n  }\n\n  // Process entries from a directory reader\n  private async _processEntries(\n    entries: FileSystemEntry[],\n    folders: UUIFileFolder[],\n    files: File[],\n  ): Promise<void> {\n    for (const en of entries) {\n      if (en.isFile) {\n        const file = await this._getAsFile(en as FileSystemFileEntry);\n        if (this._isAccepted(file)) {\n          files.push(file);\n        }\n      } else if (en.isDirectory) {\n        const directory = await this._mkdir(en as FileSystemDirectoryEntry);\n        folders.push(directory);\n      }\n    }\n  }\n\n  // Read entries from a directory reader recursively\n  private async _readAllEntries(\n    reader: FileSystemDirectoryReader,\n    folders: UUIFileFolder[],\n    files: File[],\n  ): Promise<void> {\n    return new Promise<void>((resolve, reject) => {\n      reader.readEntries(async entries => {\n        if (!entries.length) {\n          resolve();\n          return;\n        }\n\n        await this._processEntries(entries, folders, files);\n\n        // readEntries only reads up to 100 entries at a time. It is on purpose we call readEntries recursively.\n        await this._readAllEntries(reader, folders, files);\n\n        resolve();\n      }, reject);\n    });\n  }\n\n  // Make directory structure\n  private async _mkdir(\n    entry: FileSystemDirectoryEntry,\n  ): Promise<UUIFileFolder> {\n    const reader = entry.createReader();\n    const folders: UUIFileFolder[] = [];\n    const files: File[] = [];\n\n    await this._readAllEntries(reader, folders, files);\n\n    const result: UUIFileFolder = { folderName: entry.name, folders, files };\n    return result;\n  }\n\n  private _isAccepted(file: File) {\n    if (\n      this._acceptedFileExtensions.length === 0 &&\n      this._acceptedMimeTypes.length === 0\n    ) {\n      return true;\n    }\n\n    const fileType = file.type.toLowerCase();\n    const fileExtension = file.name.split('.').pop();\n\n    if (\n      fileExtension &&\n      this._acceptedFileExtensions.includes(fileExtension.toLowerCase())\n    ) {\n      return true;\n    }\n\n    for (const mimeType of this._acceptedMimeTypes) {\n      if (\n        fileType === mimeType ||\n        (mimeType.endsWith('/*') &&\n          fileType.startsWith(mimeType.replace('*', '')))\n      ) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  private async _getAsFile(fileEntry: FileSystemFileEntry): Promise<File> {\n    return new Promise((resolve, reject) => fileEntry.file(resolve, reject));\n  }\n\n  private async _onDrop(e: DragEvent) {\n    e.preventDefault();\n    this._dropzone.classList.remove('hover');\n\n    const items = e.dataTransfer?.items;\n\n    if (items) {\n      const fileSystemResult = await this._getAllEntries(items);\n\n      if (this.multiple === false && fileSystemResult.files.length) {\n        fileSystemResult.files = [fileSystemResult.files[0]];\n        fileSystemResult.folders = [];\n        // When multiple is false and we have an accepted file, don't report rejections\n        fileSystemResult.rejectedFiles = [];\n      }\n\n      if (fileSystemResult.rejectedFiles.length > 0) {\n        this.dispatchEvent(\n          new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {\n            detail: { files: fileSystemResult.rejectedFiles, folders: [] },\n          }),\n        );\n      }\n\n      if (!fileSystemResult.files.length && !fileSystemResult.folders.length) {\n        return;\n      }\n\n      this.dispatchEvent(\n        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n          detail: {\n            files: fileSystemResult.files,\n            folders: fileSystemResult.folders,\n          },\n        }),\n      );\n    }\n  }\n\n  private _onDragOver(e: DragEvent) {\n    e.preventDefault();\n  }\n\n  private _onDragEnter(e: DragEvent) {\n    // TODO: make visual indication of wether the file is acceptable or not. If not we need to make a more negative/disabled visual look.\n    this._dropzone.classList.add('hover');\n    e.preventDefault();\n  }\n\n  private _onDragLeave(e: DragEvent) {\n    this._dropzone.classList.remove('hover');\n    e.preventDefault();\n  }\n\n  private _onFileInputChange() {\n    const files = this._input.files ? Array.from(this._input.files) : [];\n\n    if (this.multiple === false && files.length > 1) {\n      files.splice(1, files.length - 1);\n    }\n\n    const allowedFiles = files.filter(file => this._isAccepted(file));\n    const rejectedFiles = files.filter(file => !this._isAccepted(file));\n\n    // When multiple is false and we have an accepted file, don't report rejections\n    const shouldReportRejections =\n      rejectedFiles.length > 0 && (this.multiple || allowedFiles.length === 0);\n\n    if (shouldReportRejections) {\n      this.dispatchEvent(\n        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {\n          detail: { files: rejectedFiles, folders: [] },\n        }),\n      );\n    }\n\n    if (!allowedFiles.length) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n        detail: {\n          files: allowedFiles,\n          folders: [],\n        },\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div id=\"dropzone\">\n        <uui-symbol-file-dropzone id=\"symbol\"></uui-symbol-file-dropzone>\n        ${this.renderLabel()}\n        <input\n          @click=${(e: Event) => e.stopImmediatePropagation()}\n          id=\"input\"\n          type=\"file\"\n          accept=${this.accept}\n          ?multiple=${this.multiple}\n          @change=${this._onFileInputChange}\n          aria-label=\"${this.label}\" />\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      #dropzone {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        padding: var(--uui-size-4);\n        border: 3px solid transparent;\n        margin: -3px;\n        backdrop-filter: blur(2px);\n      }\n      #dropzone.hover {\n        border-color: var(--uui-color-default);\n      }\n      #dropzone.hover::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        border-color: var(--uui-color-default);\n        background-color: var(--uui-color-default);\n      }\n      #symbol {\n        color: var(--uui-color-default);\n        max-width: 100%;\n        max-height: 100%;\n      }\n      #input {\n        position: absolute;\n        width: 0px;\n        height: 0px;\n        opacity: 0;\n        display: none;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/file-dropzone/file-dropzone.js

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIFileDropzoneElement } from "./file-dropzone.element.js";
 import { UUIFileDropzoneEvent } from "./UUIFileDropzoneEvent.js";
+import { UUIFileDropzoneElement } from "./file-dropzone.element.js";
+//#region src/components/file-dropzone/file-dropzone.ts
 defineElement("uui-file-dropzone", UUIFileDropzoneElement);
-export {
-  UUIFileDropzoneElement,
-  UUIFileDropzoneEvent,
-  UUIFileDropzoneElement as default
-};
-//# sourceMappingURL=file-dropzone.js.map
+//#endregion
+export { UUIFileDropzoneElement, UUIFileDropzoneEvent };
+
+//# sourceMappingURL=file-dropzone.js.map

package/dist/components/file-dropzone/file-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-dropzone.js","sources":["../../../src/components/file-dropzone/file-dropzone.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIFileDropzoneElement } from './file-dropzone.element.js';\n\ndefineElement('uui-file-dropzone', UUIFileDropzoneElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-file-dropzone': UUIFileDropzoneElement;\n  }\n}\n\nexport * from './file-dropzone.element.js';\nexport * from './UUIFileDropzoneEvent.js';\nexport { UUIFileDropzoneElement as default } from './file-dropzone.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,qBAAqB,sBAAsB;"}
+{"version":3,"file":"file-dropzone.js","names":[],"sources":["../../../src/components/file-dropzone/file-dropzone.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIFileDropzoneElement } from './file-dropzone.element.js';\n\ndefineElement('uui-file-dropzone', UUIFileDropzoneElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-file-dropzone': UUIFileDropzoneElement;\n  }\n}\n\nexport * from './file-dropzone.element.js';\nexport * from './UUIFileDropzoneEvent.js';\n"],"mappings":";;;;AAGA,cAAc,qBAAqB,sBAAsB"}