@georapbox/files-dropzone-element 1.1.0 → 1.2.0

package/dist/files-dropzone.d.ts

@@ -0,0 +1,177 @@
+/**
+ * Represents a value that may be of type T, or null.
+ */
+export type Nullable<T> = T | null;
+/**
+ * @summary A custom element that allows users to drag and drop files into it.
+ * @documentation https://github.com/georapbox/files-dropzone-element
+ *
+ * @tagname files-dropzone - This is the default tag name, unless overridden by the `defineCustomElement` method.
+ *
+ * @property {string} accept - A comma-separated list of unique file type specifiers describing file types to allow.
+ * @property {boolean} disabled - Determines whether the dropzone is disabled.
+ * @property {number} maxFiles - The maximum number of files allowed to be dropped.
+ * @property {number} maxSize - The maximum file size allowed in bytes.
+ * @property {number} minSize - The minimum file size allowed in bytes.
+ * @property {boolean} multiple - Allows multiple files to be dropped.
+ * @property {boolean} noClick - Prevents the file dialog from opening when the dropzone is clicked.
+ * @property {boolean} noDrag - Prevents the dropzone from reacting to drag events.
+ * @property {boolean} noKeyboard - Prevents the dropzone from reacting to keyboard events.
+ * @property {boolean} autoFocus - Automatically focuses the dropzone when it's connected to the DOM.
+ * @property {boolean} noStyle - Prevents the dropzone from applying any styling.
+ *
+ * @attribute {string} accept - Reflects the accept property.
+ * @attribute {boolean} disabled - Reflects the disabled property.
+ * @attribute {number} max-files - Reflects the maxFiles property.
+ * @attribute {number} max-size - Reflects the maxSize property.
+ * @attribute {number} min-size - Reflects the minSize property.
+ * @attribute {boolean} multiple - Reflects the multiple property.
+ * @attribute {boolean} no-click - Reflects the noClick property.
+ * @attribute {boolean} no-drag - Reflects the noDrag property.
+ * @attribute {boolean} no-keyboard - Reflects the noKeyboard property.
+ * @attribute {boolean} auto-focus - Reflects the autoFocus property.
+ * @attribute {boolean} no-style - Reflects the noStyle property.
+ *
+ * @slot - The default slot content of the dropzone.
+ *
+ * @csspart dropzone - The dropzone element.
+ * @csspart dropzone--dragover - The state of the dropzone when dragging over it.
+ *
+ * @cssproperty --dropzone-border-width - The border width of the dropzone.
+ * @cssproperty --dropzone-border-style - The border style of the dropzone.
+ * @cssproperty --dropzone-border-radius - The border radius of the dropzone.
+ * @cssproperty --dropzone-border-color - The border color of the dropzone.
+ * @cssproperty --dropzone-border-color-dragover - The border color of the dropzone when dragging over it.
+ * @cssproperty --dropzone-border-color-hover - The border color of the dropzone when hovering over it.
+ * @cssproperty --dropzone-background-color - The background color of the dropzone.
+ * @cssproperty --dropzone-background-color-dragover - The background color of the dropzone when dragging over it.
+ * @cssproperty --dropzone-background-color-hover - The background color of the dropzone when hovering over it.
+ * @cssproperty --dropzone-body-color - The text color of the dropzone.
+ * @cssproperty --dropzone-body-color-dragover - The text color of the dropzone when dragging over it.
+ * @cssproperty --dropzone-body-color-hover - The text color of the dropzone when hovering over it.
+ * @cssproperty --dropzone-focus-shadow-rgb - The RGB value of the dropzone's focus shadow.
+ * @cssproperty --dropzone-focus-box-shadow - The box shadow of the dropzone when focused.
+ * @cssproperty --dropzone-transition-duration - The transition's duration for the dropzone area.
+ *
+ * @event files-dropzone-drop - Fired when files are dropped.
+ * @event files-dropzone-drop-accepted - Fired when files dropped files are accepted.
+ * @event files-dropzone-drop-rejected - Fired when files dropped files are rejected.
+ * @event files-dropzone-dragenter - Fired when files are dragged into the dropzone.
+ * @event files-dropzone-dragover - Fired when files are dragged over the dropzone.
+ * @event files-dropzone-dragleave - Fired when files are dragged out of the dropzone.
+ * @event files-dropzone-error - Fired when there is any error in the process of reading dropped files or directories.
+ *
+ * @method defineCustomElement - Static method. Defines a custom element with the given name.
+ * @method openFileDialog - Instance method. Opens the file dialog programmatically.
+ */
+export class FilesDropzone extends HTMLElement {
+    static get observedAttributes(): string[];
+    /**
+     * Defines a custom element with the given name.
+     * The name must contain a dash (-).
+     *
+     * @param {string} [elementName='files-dropzone'] - The name of the custom element.
+     * @example
+     *
+     * FilesDropzone.defineCustomElement('my-dropzone');
+     */
+    static defineCustomElement(elementName?: string | undefined): void;
+    /**
+     * Lifecycle method that is called when attributes are changed, added, removed, or replaced.
+     *
+     * @param {string} name - The name of the attribute.
+     * @param {string} oldValue - The old value of the attribute.
+     * @param {string} newValue - The new value of the attribute.
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Lifecycle method that is called when the element is added to the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle method that is called when the element is removed from the DOM.
+     */
+    disconnectedCallback(): void;
+    set accept(value: string);
+    /**
+     * @type {string} - A comma-separated list of unique file type specifiers describing file types to allow.
+     * @attribute accept - Reflects the accept property.
+     */
+    get accept(): string;
+    set disabled(value: boolean);
+    /**
+     * @type {boolean} - Determines whether the dropzone is disabled.
+     * @default false
+     * @attribute disabled - Reflects the disabled property.
+     */
+    get disabled(): boolean;
+    set maxFiles(value: number);
+    /**
+     * @type {number} - The maximum number of files allowed to be dropped.
+     * @default Infinity
+     * @attribute max-files - Reflects the maxFiles property.
+     */
+    get maxFiles(): number;
+    set maxSize(value: number);
+    /**
+     * @type {number} - The maximum file size allowed in bytes.
+     * @default Infinity
+     * @attribute max-size - Reflects the maxSize property.
+     */
+    get maxSize(): number;
+    set minSize(value: number);
+    /**
+     * @type {number} - The minimum file size allowed in bytes.
+     * @default 0
+     * @attribute min-size - Reflects the minSize property.
+     */
+    get minSize(): number;
+    set multiple(value: boolean);
+    /**
+     * @type {boolean} - Allows multiple files to be dropped.
+     * @default false
+     * @attribute multiple - Reflects the multiple property.
+     */
+    get multiple(): boolean;
+    set noClick(value: boolean);
+    /**
+     * @type {boolean} - Prevents the file dialog from opening when the dropzone is clicked.
+     * @default false
+     * @attribute no-click - Reflects the noClick property.
+     */
+    get noClick(): boolean;
+    set noDrag(value: boolean);
+    /**
+     * @type {boolean} - Prevents the dropzone from reacting to drag events.
+     * @default false
+     * @attribute no-drag - Reflects the noDrag property.
+     */
+    get noDrag(): boolean;
+    set noKeyboard(value: boolean);
+    /**
+     * @type {boolean} - Prevents the dropzone from reacting to keyboard events.
+     * @default false
+     * @attribute no-keyboard - Reflects the noKeyboard property.
+     */
+    get noKeyboard(): boolean;
+    set autoFocus(value: boolean);
+    /**
+     * @type {boolean} - Automatically focuses the dropzone when it's connected to the DOM.
+     * @default false
+     * @attribute auto-focus - Reflects the autoFocus property.
+     */
+    get autoFocus(): boolean;
+    set noStyle(value: boolean);
+    /**
+     * @type {boolean} - Prevents the dropzone from applying any styling.
+     * @default false
+     * @attribute no-style - Reflects the noStyle property.
+     */
+    get noStyle(): boolean;
+    /**
+     * Opens the file dialog programmatically.
+     */
+    openFileDialog(): void;
+    #private;
+}
+//# sourceMappingURL=files-dropzone.d.ts.map

package/dist/files-dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"files-dropzone.d.ts","sourceRoot":"","sources":["../src/files-dropzone.js"],"names":[],"mappings":";;;0BAMa,CAAC,GAAG,IAAI;AAmGrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH;IAqBE,0CAEC;IAggBD;;;;;;;;OAQG;IACH,mEAIC;IA3gBD;;;;;;OAMG;IACH,+BAJW,MAAM,YACN,MAAM,YACN,MAAM,QA4BhB;IAED;;OAEG;IACH,0BAsBC;IAED;;OAEG;IACH,6BAQC;IAUD,0BAEC;IAVD;;;OAGG;IACH,qBAEC;IAeD,6BAEC;IAXD;;;;OAIG;IACH,wBAEC;IAqBD,4BAEC;IAjBD;;;;OAIG;IACH,uBAQC;IAuBD,2BAEC;IAnBD;;;;OAIG;IACH,sBAUC;IAuBD,2BAEC;IAnBD;;;;OAIG;IACH,sBAUC;IAeD,6BAEC;IAXD;;;;OAIG;IACH,wBAEC;IAeD,4BAEC;IAXD;;;;OAIG;IACH,uBAEC;IAeD,2BAEC;IAXD;;;;OAIG;IACH,sBAEC;IAeD,+BAEC;IAXD;;;;OAIG;IACH,0BAEC;IAeD,8BAEC;IAXD;;;;OAIG;IACH,yBAEC;IAeD,4BAEC;IAXD;;;;OAIG;IACH,uBAEC;IAsPD;;OAEG;IACH,uBAMC;;CAoCF"}

package/dist/files-dropzone.js

@@ -1,2 +1,84 @@
-function e(e,t,i){if(!t.has(e))throw new TypeError("attempted to "+i+" private field on non-instance");return t.get(e)}function t(e,t){return t.get?t.get.call(e):t.value}function i(i,o){return t(i,e(i,o,"get"))}function o(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function n(e,t,i){o(e,t),t.set(e,i)}function s(e,t,i){if(t.set)t.set.call(e,i);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=i}}function a(t,i,o){return s(t,e(t,i,"set"),o),o}function r(e,t,i){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return i}function l(e,t){o(e,t),t.add(e)}function d(e,t=""){if(!t)return!0;const i=[...new Set(t.split(",").map((e=>e.trim())).filter(Boolean))],o=e.type,n=o.replace(/\/.*$/,"");for(const t of i)if("."===t.charAt(0)){if(-1!==e.name.toLowerCase().indexOf(t.toLowerCase(),e.name.length-t.length))return!0}else if(/\/\*$/.test(t)){if(n===t.replace(/\/.*$/,""))return!0}else if(o===t)return!0;return!1}const c=new Map([["aac","audio/aac"],["abw","application/x-abiword"],["arc","application/x-freearc"],["avif","image/avif"],["avi","video/x-msvideo"],["azw","application/vnd.amazon.ebook"],["bin","application/octet-stream"],["bmp","image/bmp"],["bz","application/x-bzip"],["bz2","application/x-bzip2"],["cda","application/x-cdf"],["csh","application/x-csh"],["css","text/css"],["csv","text/csv"],["doc","application/msword"],["docx","application/vnd.openxmlformats-officedocument.wordprocessingml.document"],["eot","application/vnd.ms-fontobject"],["epub","application/epub+zip"],["gz","application/gzip"],["gif","image/gif"],["heic","image/heic"],["heif","image/heif"],["htm","text/html"],["html","text/html"],["ico","image/vnd.microsoft.icon"],["ics","text/calendar"],["jar","application/java-archive"],["jpeg","image/jpeg"],["jpg","image/jpeg"],["js","text/javascript"],["json","application/json"],["jsonld","application/ld+json"],["mid","audio/midi"],["midi","audio/midi"],["mjs","text/javascript"],["mp3","audio/mpeg"],["mp4","video/mp4"],["mpeg","video/mpeg"],["mpkg","application/vnd.apple.installer+xml"],["odp","application/vnd.oasis.opendocument.presentation"],["ods","application/vnd.oasis.opendocument.spreadsheet"],["odt","application/vnd.oasis.opendocument.text"],["oga","audio/ogg"],["ogv","video/ogg"],["ogx","application/ogg"],["opus","audio/opus"],["otf","font/otf"],["png","image/png"],["pdf","application/pdf"],["php","application/x-httpd-php"],["ppt","application/vnd.ms-powerpoint"],["pptx","application/vnd.openxmlformats-officedocument.presentationml.presentation"],["rar","application/vnd.rar"],["rtf","application/rtf"],["sh","application/x-sh"],["svg","image/svg+xml"],["swf","application/x-shockwave-flash"],["tar","application/x-tar"],["tif","image/tiff"],["tiff","image/tiff"],["ts","video/mp2t"],["ttf","font/ttf"],["txt","text/plain"],["vsd","application/vnd.visio"],["wav","audio/wav"],["weba","audio/webm"],["webm","video/webm"],["webp","image/webp"],["woff","font/woff"],["woff2","font/woff2"],["xhtml","application/xhtml+xml"],["xls","application/vnd.ms-excel"],["xlsx","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],["xml","application/xml"],["xul","application/vnd.mozilla.xul+xml"],["zip","application/zip"],["7z","application/x-7z-compressed"],["mkv","video/x-matroska"],["mov","video/quicktime"],["msg","application/vnd.ms-outlook"]]),p=[".DS_Store","Thumbs.db"],h=(e,t)=>{const i=(e=>{const{name:t}=e;if(t&&-1!==t.lastIndexOf(".")&&!e.type){const i=t.split(".").pop().toLowerCase(),o=c.get(i);o&&Object.defineProperty(e,"type",{value:o,writable:!1,configurable:!1,enumerable:!0})}return e})(e);if("string"!=typeof i.path){const{webkitRelativePath:o}=e;Object.defineProperty(i,"path",{value:"string"==typeof t?t:o||e.name,writable:!1,configurable:!1,enumerable:!0})}return i},u=async e=>await new Promise(((t,i)=>{e.readEntries(t,i)})),m=async e=>{const t=[];let i=await u(e);for(;i.length>0;)t.push(...i),i=await u(e);return t},b=e=>new Promise(((t,i)=>{e.file((i=>t(h(i,e.fullPath))),i)})),f=async e=>{const t=[];for(const i of e)-1===p.indexOf(i.name)&&t.push(h(i));return t},v=async e=>e.dataTransfer?e.dataTransfer.items?await(async e=>{const t=[],i=[];for(const t of e){if("file"!==t.kind)continue;const e=t.getAsEntry?t.getAsEntry():t.webkitGetAsEntry();i.push(e)}for(;i.length>0;){const e=i.shift();if(e)if(e.isFile){const i=await b(e);-1===p.indexOf(i.name)&&t.push(i)}else e.isDirectory&&i.push(...await m(e.createReader()))}return t})(e.dataTransfer.items):await f(e.dataTransfer.files):await f(e.target.files),g="files-dropzone",w="TOO_MANY_FILES",x=document.createElement("template");x.innerHTML='\n  <style>\n    *,\n    *::before,\n    *::after {\n      box-sizing: border-box;\n    }\n\n    :host([hidden]),\n    [hidden] {\n      display: none !important;\n    }\n\n    :host {\n      --dropzone-border-width: 2px;\n      --dropzone-border-style: dashed;\n      --dropzone-border-radius: 0.25rem;\n      --dropzone-border-color: #6c757d;\n      --dropzone-border-color-dragover: #0d6efd;\n      --dropzone-background-color: #ffffff;\n      --dropzone-background-color-dragover: #f4f4f5;\n      --dropzone-body-color: #3f3f46;\n      --dropzone-body-color-dragover: var(--dropzone-body-color);\n      --dropzone-focus-shadow-rgb: 49,132,253;\n      --transition-duration: 0.2s;\n\n      display: block;\n    }\n\n    :host(:not([no-style])) .dropzone {\n      border: var(--dropzone-border-width) var(--dropzone-border-style) var(--dropzone-border-color);\n      border-radius: var(--dropzone-border-radius);\n      padding: 3rem 1rem;\n      overflow: hidden;\n      background-color: var(--dropzone-background-color);\n      color: var(--dropzone-body-color);\n      text-align: center;\n      cursor: pointer;\n      transition: border var(--transition-duration) ease-in-out, background-color var(--transition-duration) ease-in-out, color var(--transition-duration) ease-in-out, box-shadow var(--transition-duration) ease-in-out;\n    }\n\n    :host(:not([no-style])[no-click]) .dropzone {\n      cursor: default;\n    }\n\n    :host(:not([no-style])[disabled]) .dropzone {\n      opacity: 0.8;\n      cursor: not-allowed;\n    }\n\n    :host(:not([no-style]):not([disabled])) .dropzone--dragover {\n      border-color: var(--dropzone-border-color-dragover);\n      background-color: var(--dropzone-background-color-dragover);\n      color: var(--dropzone-body-color-dragover);\n    }\n\n    :host(:not([no-style]):not([disabled])) .dropzone:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 0.25rem rgba(var(--dropzone-focus-shadow-rgb), 0.5);\n    }\n  </style>\n\n  <input type="file" id="fileInput" hidden>\n\n  <div part="dropzone" class="dropzone" id="dropzoneEl" tabindex="0" role="presentation">\n    <slot>Drag \'n\' drop files here, or click to select files</slot>\n  </div>\n';var y=new WeakMap,z=new WeakMap,E=new WeakMap,k=new WeakMap,A=new WeakMap,L=new WeakMap,F=new WeakMap,j=new WeakMap,S=new WeakMap,C=new WeakSet,T=new WeakSet;class M extends HTMLElement{static get observedAttributes(){return["accept","disabled","multiple","no-keyboard"]}attributeChangedCallback(e,t,o){"accept"===e&&t!==o&&i(this,y)&&(i(this,y).accept=this.accept),"disabled"===e&&t!==o&&i(this,y)&&(i(this,y).disabled=this.disabled,this.disabled?i(this,z).removeAttribute("tabindex"):i(this,z).setAttribute("tabindex","0")),"multiple"===e&&t!==o&&i(this,y)&&(i(this,y).multiple=this.multiple),"no-keyboard"===e&&t!==o&&i(this,z)&&(this.noKeyboard?i(this,z).removeAttribute("tabindex"):i(this,z).setAttribute("tabindex","0"))}connectedCallback(){r(this,T,O).call(this,"accept"),r(this,T,O).call(this,"disabled"),r(this,T,O).call(this,"maxFiles"),r(this,T,O).call(this,"maxSize"),r(this,T,O).call(this,"minSize"),r(this,T,O).call(this,"multiple"),r(this,T,O).call(this,"noClick"),r(this,T,O).call(this,"noDrag"),r(this,T,O).call(this,"noKeyboard"),r(this,T,O).call(this,"autoFocus"),r(this,T,O).call(this,"noStyle"),i(this,y).addEventListener("change",i(this,E)),i(this,z).addEventListener("dragenter",i(this,k)),i(this,z).addEventListener("dragover",i(this,A)),i(this,z).addEventListener("dragleave",i(this,L)),i(this,z).addEventListener("drop",i(this,F)),i(this,z).addEventListener("click",i(this,j)),i(this,z).addEventListener("keyup",i(this,S)),this.autoFocus&&i(this,z).focus()}disconnectedCallback(){i(this,y).removeEventListener("change",i(this,E)),i(this,z).removeEventListener("dragenter",i(this,k)),i(this,z).removeEventListener("dragover",i(this,A)),i(this,z).removeEventListener("dragleave",i(this,L)),i(this,z).removeEventListener("drop",i(this,F)),i(this,z).removeEventListener("click",i(this,j)),i(this,z).removeEventListener("keyup",i(this,S))}get accept(){return this.getAttribute("accept")}set accept(e){this.setAttribute("accept",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get maxFiles(){const e=Number(this.getAttribute("max-files"))||0;return e<=0?1/0:Math.floor(Math.abs(e))}set maxFiles(e){this.setAttribute("max-files",e)}get maxSize(){const e=this.getAttribute("max-size");if(null===e)return 1/0;const t=Number(e);return Number.isNaN(t)?1/0:t}set maxSize(e){this.setAttribute("max-size",e)}get minSize(){const e=this.getAttribute("min-size");if(null===e)return 0;const t=Number(e);return Number.isNaN(t)?0:t}set minSize(e){this.setAttribute("min-size",e)}get multiple(){return this.hasAttribute("multiple")}set multiple(e){e?this.setAttribute("multiple",""):this.removeAttribute("multiple")}get noClick(){return this.hasAttribute("no-click")}set noClick(e){e?this.setAttribute("no-click",""):this.removeAttribute("no-click")}get noDrag(){return this.hasAttribute("no-drag")}set noDrag(e){e?this.setAttribute("no-drag",""):this.removeAttribute("no-drag")}get noKeyboard(){return this.hasAttribute("no-keyboard")}set noKeyboard(e){e?this.setAttribute("no-keyboard",""):this.removeAttribute("no-keyboard")}get autoFocus(){return this.hasAttribute("auto-focus")}set autoFocus(e){e?this.setAttribute("auto-focus",""):this.removeAttribute("auto-focus")}get noStyle(){return this.hasAttribute("no-style")}set noStyle(e){e?this.setAttribute("no-style",""):this.removeAttribute("no-style")}openFileDialog(){this.disabled||i(this,y).click()}static defineCustomElement(e=g){"undefined"==typeof window||window.customElements.get(e)||window.customElements.define(e,M)}constructor(){super(),l(this,C),l(this,T),n(this,y,{writable:!0,value:void 0}),n(this,z,{writable:!0,value:void 0}),n(this,E,{writable:!0,value:async e=>{try{r(this,C,$).call(this,await v(e))}catch(e){this.dispatchEvent(new CustomEvent(`${g}-error`,{bubbles:!0,composed:!0,detail:{error:e}}))}}}),n(this,k,{writable:!0,value:()=>{this.disabled||this.noDrag||this.dispatchEvent(new Event(`${g}-dragenter`,{bubbles:!0,composed:!0}))}}),n(this,A,{writable:!0,value:e=>{e.preventDefault(),this.disabled||this.noDrag?e.dataTransfer.dropEffect="none":(e.dataTransfer.dropEffect="copy",i(this,z).classList.add("dropzone--dragover"),i(this,z).part.add("dropzone--dragover"),this.dispatchEvent(new Event(`${g}-dragover`,{bubbles:!0,composed:!0})))}}),n(this,L,{writable:!0,value:()=>{this.disabled||this.noDrag||(i(this,z).classList.remove("dropzone--dragover"),i(this,z).part.remove("dropzone--dragover"),this.dispatchEvent(new Event(`${g}-dragleave`,{bubbles:!0,composed:!0})))}}),n(this,F,{writable:!0,value:async e=>{if(!this.disabled&&!this.noDrag){e.preventDefault(),i(this,z).classList.remove("dropzone--dragover"),i(this,z).part.remove("dropzone--dragover");try{r(this,C,$).call(this,await v(e))}catch(e){this.dispatchEvent(new CustomEvent(`${g}-error`,{bubbles:!0,composed:!0,detail:{error:e}}))}}}}),n(this,j,{writable:!0,value:()=>{this.disabled||this.noClick||i(this,y).click()}}),n(this,S,{writable:!0,value:e=>{this.disabled||this.noKeyboard||" "!==e.key&&"Enter"!==e.key||i(this,y).click()}}),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(x.content.cloneNode(!0))),a(this,y,this.shadowRoot.getElementById("fileInput")),a(this,z,this.shadowRoot.getElementById("dropzoneEl"))}}function $(e){if(!Array.isArray(e)||!e.length)return;const t=[],o=[],n=e.length;if(!this.multiple&&n>1)for(const t of e)o.push({file:t,errors:[{code:w,message:"Too many files selected. Only 1 file is allowed."}]});else if(this.multiple&&n>this.maxFiles)for(const t of e)o.push({file:t,errors:[{code:w,message:`Too many files selected. Only ${this.maxFiles} ${this.maxFiles>1?"files are":"file is"} allowed.`}]});else for(const i of e){const e=d(i,this.accept),n=i.size>this.maxSize,s=i.size<this.minSize;if(!e||n||s){const t=[];e||t.push({code:"INVALID_MIME_TYPE",message:`File type "${i.type}" is not accepted.`}),n&&t.push({code:"FILE_TOO_LARGE",message:`File size ${i.size} exceeds the maximum size of ${this.maxSize}.`}),s&&t.push({code:"FILE_TOO_SMALL",message:`File size ${i.size} is smaller than the minimum size of ${this.minSize}.`}),o.push({file:i,errors:t})}else t.push(i)}this.dispatchEvent(new CustomEvent(`${g}-drop`,{bubbles:!0,composed:!0,detail:{acceptedFiles:t,rejectedFiles:o}})),t.length>0&&this.dispatchEvent(new CustomEvent(`${g}-drop-accepted`,{bubbles:!0,composed:!0,detail:{acceptedFiles:t}})),o.length>0&&this.dispatchEvent(new CustomEvent(`${g}-drop-rejected`,{bubbles:!0,composed:!0,detail:{rejectedFiles:o}})),i(this,y).value=i(this,y).defaultValue}function O(e){if(Object.prototype.hasOwnProperty.call(this,e)){const t=this[e];delete this[e],this[e]=t}}export{M as FilesDropzone};
+let e=new Map([["aac","audio/aac"],["abw","application/x-abiword"],["arc","application/x-freearc"],["avif","image/avif"],["avi","video/x-msvideo"],["azw","application/vnd.amazon.ebook"],["bin","application/octet-stream"],["bmp","image/bmp"],["bz","application/x-bzip"],["bz2","application/x-bzip2"],["cda","application/x-cdf"],["csh","application/x-csh"],["css","text/css"],["csv","text/csv"],["doc","application/msword"],["docx","application/vnd.openxmlformats-officedocument.wordprocessingml.document"],["eot","application/vnd.ms-fontobject"],["epub","application/epub+zip"],["gz","application/gzip"],["gif","image/gif"],["heic","image/heic"],["heif","image/heif"],["htm","text/html"],["html","text/html"],["ico","image/vnd.microsoft.icon"],["ics","text/calendar"],["jar","application/java-archive"],["jpeg","image/jpeg"],["jpg","image/jpeg"],["jxl","image/jxl"],["js","text/javascript"],["json","application/json"],["jsonld","application/ld+json"],["mid","audio/midi"],["midi","audio/midi"],["mjs","text/javascript"],["mp3","audio/mpeg"],["mp4","video/mp4"],["mpeg","video/mpeg"],["mpkg","application/vnd.apple.installer+xml"],["odp","application/vnd.oasis.opendocument.presentation"],["ods","application/vnd.oasis.opendocument.spreadsheet"],["odt","application/vnd.oasis.opendocument.text"],["oga","audio/ogg"],["ogv","video/ogg"],["ogx","application/ogg"],["opus","audio/opus"],["otf","font/otf"],["png","image/png"],["pdf","application/pdf"],["php","application/x-httpd-php"],["ppt","application/vnd.ms-powerpoint"],["pptx","application/vnd.openxmlformats-officedocument.presentationml.presentation"],["rar","application/vnd.rar"],["rtf","application/rtf"],["sh","application/x-sh"],["svg","image/svg+xml"],["swf","application/x-shockwave-flash"],["tar","application/x-tar"],["tif","image/tiff"],["tiff","image/tiff"],["ts","video/mp2t"],["ttf","font/ttf"],["txt","text/plain"],["vsd","application/vnd.visio"],["wav","audio/wav"],["weba","audio/webm"],["webm","video/webm"],["webp","image/webp"],["woff","font/woff"],["woff2","font/woff2"],["xhtml","application/xhtml+xml"],["xls","application/vnd.ms-excel"],["xlsx","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],["xml","application/xml"],["xul","application/vnd.mozilla.xul+xml"],["zip","application/zip"],["7z","application/x-7z-compressed"],["mkv","video/x-matroska"],["mov","video/quicktime"],["msg","application/vnd.ms-outlook"]]),t=[".DS_Store","Thumbs.db"],o=t=>{let{name:o}=t;if(o&&-1!==o.lastIndexOf(".")&&!t.type){let i=(o.split(".").pop()||"").toLowerCase(),r=e.get(i);r&&Object.defineProperty(t,"type",{value:r,writable:!1,configurable:!1,enumerable:!0})}return t},i=(e,t)=>{let i=o(e);if("string"!=typeof i.path){let{webkitRelativePath:o}=e;Object.defineProperty(i,"path",{value:"string"==typeof t?t:o||e.name,writable:!1,configurable:!1,enumerable:!0})}return i},r=async e=>await new Promise((t,o)=>{e.readEntries(t,o)}),a=async e=>{let t=[],o=await r(e);for(;o.length>0;)t.push(...o),o=await r(e);return t},n=e=>new Promise((t,o)=>{e.file(o=>t(i(o,e.fullPath)),o)}),s=async e=>{let o=[],i=[];for(let t of e){if("file"!==t.kind)continue;let e=t.getAsEntry?t.getAsEntry():t.webkitGetAsEntry();i.push(e)}for(;i.length>0;){let e=i.shift();if(e){if(e.isFile){let i=await n(e);-1===t.indexOf(i.name)&&o.push(i)}else e.isDirectory&&i.push(...await a(e.createReader()))}}return o},d=async e=>{let o=[];for(let r of e)-1===t.indexOf(r.name)&&o.push(i(r));return o},l=async e=>e.dataTransfer?e.dataTransfer.items?await s(e.dataTransfer.items):await d(e.dataTransfer.files):await d(e.target.files),p="files-dropzone",c="TOO_MANY_FILES",h=document.createElement("template"),u=`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --dropzone-border-width: 2px;
+    --dropzone-border-style: dashed;
+    --dropzone-border-radius: 0.25rem;
+    --dropzone-border-color: #6c757d;
+    --dropzone-border-color-dragover: #0d6efd;
+    --dropzone-border-color-hover: var(--dropzone-border-color-dragover);
+    --dropzone-background-color: #ffffff;
+    --dropzone-background-color-dragover: #f4f4f5;
+    --dropzone-background-color-hover: var(--dropzone-background-color-dragover);
+    --dropzone-body-color: #3f3f46;
+    --dropzone-body-color-dragover: var(--dropzone-body-color);
+    --dropzone-body-color-hover: var(--dropzone-body-color-dragover);
+    --dropzone-focus-shadow-rgb: 49,132,253;
+    --dropzone-focus-box-shadow: 0 0 0 0.25rem rgba(var(--dropzone-focus-shadow-rgb), 0.5);
+    --transition-duration: 0.2s; /* for backwards compatibility */
+    --dropzone-transition-duration: var(--transition-duration);
+
+    display: block;
+  }
+
+  :host(:not([no-style])) .dropzone {
+    border: var(--dropzone-border-width) var(--dropzone-border-style) var(--dropzone-border-color);
+    border-radius: var(--dropzone-border-radius);
+    padding: 3rem 1rem;
+    overflow: hidden;
+    background-color: var(--dropzone-background-color);
+    color: var(--dropzone-body-color);
+    text-align: center;
+    cursor: pointer;
+    transition: border var(--dropzone-transition-duration) ease-in-out, background-color var(--dropzone-transition-duration) ease-in-out, color var(--dropzone-transition-duration) ease-in-out, box-shadow var(--dropzone-transition-duration) ease-in-out;
+  }
+
+  :host(:not([no-style])[no-click]) .dropzone {
+    cursor: default;
+  }
+
+  :host(:not([no-style])[disabled]) .dropzone {
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
+
+  :host(:not([no-style]):not([disabled])) .dropzone--dragover {
+    border-color: var(--dropzone-border-color-dragover);
+    background-color: var(--dropzone-background-color-dragover);
+    color: var(--dropzone-body-color-dragover);
+  }
+
+  :host(:not([no-style]):not([disabled])) .dropzone:focus-visible {
+    outline: none;
+    box-shadow: var(--dropzone-focus-box-shadow);
+  }
+
+  @media (hover: hover) {
+    :host(:not([no-style]):not([disabled])) .dropzone:not(.dropzone--dragover):hover {
+      border-color: var(--dropzone-border-color-hover);
+      background-color: var(--dropzone-background-color-hover);
+      color: var(--dropzone-body-color-hover);
+    }
+  }
+`;h.innerHTML=`
+  <style>
+    ${u}
+  </style>
+
+  <input type="file" id="fileInput" hidden>
+
+  <div part="dropzone" class="dropzone" id="dropzoneEl" tabindex="0" role="presentation">
+    <slot>Drag 'n' drop files here, or click to select files</slot>
+  </div>
+`;class m extends HTMLElement{#e=null;#t=null;constructor(){super(),this.shadowRoot||this.attachShadow({mode:"open"}).appendChild(h.content.cloneNode(!0)),this.shadowRoot&&(this.#e=this.shadowRoot.getElementById("fileInput"),this.#t=this.shadowRoot.getElementById("dropzoneEl"))}static get observedAttributes(){return["accept","disabled","multiple","no-keyboard"]}attributeChangedCallback(e,t,o){"accept"===e&&t!==o&&this.#e&&(this.#e.accept=this.accept),"disabled"===e&&t!==o&&this.#e&&(this.#e.disabled=this.disabled,this.disabled?this.#t?.removeAttribute("tabindex"):this.#t?.setAttribute("tabindex","0")),"multiple"===e&&t!==o&&this.#e&&(this.#e.multiple=this.multiple),"no-keyboard"===e&&t!==o&&this.#t&&(this.noKeyboard?this.#t.removeAttribute("tabindex"):this.#t.setAttribute("tabindex","0"))}connectedCallback(){this.#o("accept"),this.#o("disabled"),this.#o("maxFiles"),this.#o("maxSize"),this.#o("minSize"),this.#o("multiple"),this.#o("noClick"),this.#o("noDrag"),this.#o("noKeyboard"),this.#o("autoFocus"),this.#o("noStyle"),this.#e?.addEventListener("change",this.#i),this.#t?.addEventListener("dragenter",this.#r),this.#t?.addEventListener("dragover",this.#a),this.#t?.addEventListener("dragleave",this.#n),this.#t?.addEventListener("drop",this.#s),this.#t?.addEventListener("click",this.#d),this.#t?.addEventListener("keyup",this.#l),this.autoFocus&&this.#t?.focus()}disconnectedCallback(){this.#e?.removeEventListener("change",this.#i),this.#t?.removeEventListener("dragenter",this.#r),this.#t?.removeEventListener("dragover",this.#a),this.#t?.removeEventListener("dragleave",this.#n),this.#t?.removeEventListener("drop",this.#s),this.#t?.removeEventListener("click",this.#d),this.#t?.removeEventListener("keyup",this.#l)}get accept(){return this.getAttribute("accept")||""}set accept(e){this.setAttribute("accept",null!=e?e.toString():e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",!!e)}get maxFiles(){let e=Number(this.getAttribute("max-files"))||0;return e<=0?1/0:Math.floor(Math.abs(e))}set maxFiles(e){this.setAttribute("max-files",null!=e?e.toString():e)}get maxSize(){let e=this.getAttribute("max-size");if(null===e)return 1/0;let t=Number(e);return Number.isNaN(t)?1/0:t}set maxSize(e){this.setAttribute("max-size",null!=e?e.toString():e)}get minSize(){let e=this.getAttribute("min-size");if(null===e)return 0;let t=Number(e);return Number.isNaN(t)?0:t}set minSize(e){this.setAttribute("min-size",null!=e?e.toString():e)}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",!!e)}get noClick(){return this.hasAttribute("no-click")}set noClick(e){this.toggleAttribute("no-click",!!e)}get noDrag(){return this.hasAttribute("no-drag")}set noDrag(e){this.toggleAttribute("no-drag",!!e)}get noKeyboard(){return this.hasAttribute("no-keyboard")}set noKeyboard(e){this.toggleAttribute("no-keyboard",!!e)}get autoFocus(){return this.hasAttribute("auto-focus")}set autoFocus(e){this.toggleAttribute("auto-focus",!!e)}get noStyle(){return this.hasAttribute("no-style")}set noStyle(e){this.toggleAttribute("no-style",!!e)}#i=async e=>{try{this.#p(await l(e))}catch(e){this.dispatchEvent(new CustomEvent(`${p}-error`,{bubbles:!0,composed:!0,detail:{error:e}}))}};#r=()=>{this.disabled||this.noDrag||this.dispatchEvent(new Event(`${p}-dragenter`,{bubbles:!0,composed:!0}))};#a=e=>{if(e.preventDefault(),this.disabled||this.noDrag){e.dataTransfer.dropEffect="none";return}e.dataTransfer.dropEffect="copy",this.#t&&(this.#t.classList.add("dropzone--dragover"),this.#t.part.add("dropzone--dragover")),this.dispatchEvent(new Event(`${p}-dragover`,{bubbles:!0,composed:!0}))};#n=()=>{this.disabled||this.noDrag||(this.#t&&(this.#t.classList.remove("dropzone--dragover"),this.#t.part.remove("dropzone--dragover")),this.dispatchEvent(new Event(`${p}-dragleave`,{bubbles:!0,composed:!0})))};#s=async e=>{if(!this.disabled&&!this.noDrag){e.preventDefault(),this.#t&&(this.#t.classList.remove("dropzone--dragover"),this.#t.part.remove("dropzone--dragover"));try{this.#p(await l(e))}catch(e){this.dispatchEvent(new CustomEvent(`${p}-error`,{bubbles:!0,composed:!0,detail:{error:e}}))}}};#d=()=>{this.disabled||this.noClick||this.#e?.click()};#l=e=>{this.disabled||this.noKeyboard||" "!==e.key&&"Enter"!==e.key||this.#e?.click()};#p(e){if(!Array.isArray(e)||!e.length)return;let t=[],o=[],i=e.length;if(!this.multiple&&i>1)for(let t of e)o.push({file:t,errors:[{code:c,message:"Too many files selected. Only 1 file is allowed."}]});else if(this.multiple&&i>this.maxFiles)for(let t of e)o.push({file:t,errors:[{code:c,message:`Too many files selected. Only ${this.maxFiles} ${this.maxFiles>1?"files are":"file is"} allowed.`}]});else for(let i of e){let e=function(e,t=""){if(!t)return!0;let o=[...new Set(t.split(",").map(e=>e.trim()).filter(Boolean))],i=e.type,r=i.replace(/\/.*$/,"");for(let t of o)if("."===t.charAt(0)){if(-1!==e.name.toLowerCase().indexOf(t.toLowerCase(),e.name.length-t.length))return!0}else if(/\/\*$/.test(t)){if(r===t.replace(/\/.*$/,""))return!0}else if(i===t)return!0;return!1}(i,this.accept),r=i.size>this.maxSize,a=i.size<this.minSize;if(!e||r||a){let t=[];e||t.push({code:"INVALID_MIME_TYPE",message:`File type "${i.type}" is not accepted.`}),r&&t.push({code:"FILE_TOO_LARGE",message:`File size ${i.size} exceeds the maximum size of ${this.maxSize}.`}),a&&t.push({code:"FILE_TOO_SMALL",message:`File size ${i.size} is smaller than the minimum size of ${this.minSize}.`}),o.push({file:i,errors:t})}else t.push(i)}this.dispatchEvent(new CustomEvent(`${p}-drop`,{bubbles:!0,composed:!0,detail:{acceptedFiles:t,rejectedFiles:o}})),t.length>0&&this.dispatchEvent(new CustomEvent(`${p}-drop-accepted`,{bubbles:!0,composed:!0,detail:{acceptedFiles:t}})),o.length>0&&this.dispatchEvent(new CustomEvent(`${p}-drop-rejected`,{bubbles:!0,composed:!0,detail:{rejectedFiles:o}})),this.#e&&(this.#e.value=this.#e.defaultValue)}openFileDialog(){this.disabled||this.#e?.click()}#o(e){if(Object.prototype.hasOwnProperty.call(this,e)){let t=this[e];delete this[e],this[e]=t}}static defineCustomElement(e=p){"undefined"==typeof window||window.customElements.get(e)||window.customElements.define(e,m)}}export{m as FilesDropzone};
 //# sourceMappingURL=files-dropzone.js.map