@georapbox/files-dropzone-element 1.1.1 → 1.2.0

package/README.md

@@ -52,7 +52,7 @@ By default, the component comes with basic styling. However, you can customise t
 | Name | Reflects | Type | Required | Default | Description |
 | ---- | -------- | ---- | -------- | ------- | ----------- |
 | `accept`<sup>1</sup> | ✓ | String | - | `null` | A string containing one or more of unique file type specifiers, separated by commas. Files that do not match one of the accepted file type specifiers, will be rejected. |
-| `disabled` | ✓ | Boolean | - | `false` | Disables the dropzone. |
+| `disabled` | ✓ | Boolean | - | `false` | Determines whether the dropzone is disabled. If `true`, the dropzone will be disabled and the user will not be able to select files. |
 | `maxFiles`<br>*`max-files`* | ✓ | Number | - | `Infinity` | Maximum accepted number of files. Note that this property has effect only when `multiple` is `true`. If its value is set to `0` or any negative number, it will allow any number of files. If the number of dropped files is greater than the value set, all of the files will be rejected to avoid making unsafe assumptions on which files to accept. |
 | `maxSize`<br>*`max-size`* | ✓ | Number | - | `Infinity` | Maximum file size (in bytes). |
 | `minSize`<br>*`min-size`* | ✓ | Number | - | `0` | Minimum file size (in bytes). |
@@ -86,24 +86,30 @@ By default, the component comes with basic styling. However, you can customise t
 
 | Name | Description | Default |
 | ---- | ----------- | ------- |
-| `--dropzone-border-radius` | The border radius of the dropzone area. | `0.25rem` |
 | `--dropzone-border-width` | The border width of the dropzone area. | `2px` |
 | `--dropzone-border-style` | The border style of the dropzone area. | `dashed` |
+| `--dropzone-border-radius` | The border radius of the dropzone area. | `0.25rem` |
 | `--dropzone-border-color` | The border color of the dropzone area. | `#6c757d` |
-| `--dropzone-border-color-dragover` | The border color of the dropzone area in dragover state. | `#0d6efd` |
+| `--dropzone-border-color-dragover` | The border color of the dropzone when dragging over it. | `#0d6efd` |
+| `--dropzone-border-color-hover` | The border color of the dropzone when hovering over it. | `var(--dropzone-border-color-dragover)` |
 | `--dropzone-background-color` | The background color of the dropzone area. | `#ffffff` |
-| `--dropzone-background-color-dragover` | The background color of the dropzone area in dragover state. | `#f4f4f5` |
+| `--dropzone-background-color-dragover` | The background color of the dropzone when dragging over it. | `#f4f4f5` |
+| `--dropzone-background-color-hover` | The background color of the dropzone when hovering over it. | `var(--dropzone-background-color-dragover)` |
 | `--dropzone-body-color` | The text color of the dropzone area. | `#3f3f46` |
-| `--dropzone-body-color-dragover` | The text color of the dropzone area in dragover state. | `#3f3f46` |
+| `--dropzone-body-color-dragover` | The text color of the dropzone when dragging over it. | `var(--dropzone-body-color)` |
+| `--dropzone-body-color-hover` | The text color of the dropzone when hovering over it. | `var(--dropzone-body-color-dragover)` |
 | `--dropzone-focus-shadow-rgb` | The RGB color of the dropzone area focus shadow. | `49, 132, 253` |
-| `--transition-duration` | The transition's duration for the dropzone area. | `0.2s` |
+| `--dropzone-focus-box-shadow` | The box shadow of the dropzone area focus. | `0 0 0 0.25rem rgba(var(--dropzone-focus-shadow-rgb), 0.5)` |
+| `--dropzone-transition-duration` | The transition's duration for the dropzone area. | `0.2s` |
 
 ### Methods
 
 | Name | Type | Description | Arguments |
 | ---- | ---- | ----------- | --------- |
 | `defineCustomElement` | Static | Defines/registers the custom element with the name provided. If no name is provided, the default name is used. The method checks if the element is already defined, hence will skip trying to redefine it. | elementName='files-dropzone' |
-| `openFileDialog` | Prototype | Opens the native file dialog programmatically. The method will fail silently if the dropzone is disabled. Note that most browsers require a direct user interaction with the document, to open the file dialog, for security reasons. Therefore, if you are trying to call this method asynchronously, there's a good chance it's going to be blocked by the browser. For example in Safari 15.x, invoking this method inside a `setTimeout` with more that 1000ms delay, the dialog will not open. | - |
+| `openFileDialog`<sup>1</sup> | Instance | Opens the native file dialog programmatically. The method will fail silently if the dropzone is disabled. Note that most browsers require a direct user interaction with the document, to open the file dialog, for security reasons. Therefore, if you are trying to call this method asynchronously, there's a good chance it's going to be blocked by the browser. For example in Safari 15.x, invoking this method inside a `setTimeout` with more that 1000ms delay, the dialog will not open. | - |
+
+<sup>1</sup> Instance methods are only available after the component has been defined. To ensure the component is defined, you can use `whenDefined` method of the `CustomElementRegistry` interface, eg `customElements.whenDefined('modal-element').then(() => { /* call methods here */ });`
 
 ### Events
 

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

@@ -0,0 +1,3 @@
+export { FilesDropzone };
+import { FilesDropzone } from './files-dropzone.js';
+//# sourceMappingURL=files-dropzone-defined.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"files-dropzone-defined.d.ts","sourceRoot":"","sources":["../src/files-dropzone-defined.js"],"names":[],"mappings":";8BAA8B,qBAAqB"}

package/dist/files-dropzone-defined.js

@@ -1,63 +1,78 @@
-Object.defineProperty({},"FilesDropzone",{get:function(){return u},set:void 0,enumerable:!0,configurable:!0});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,i=o&&-1!==o.lastIndexOf(".");if(i&&!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},s=e=>new Promise((t,o)=>{e.file(o=>t(i(o,e.fullPath)),o)}),n=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 s(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 n(e.dataTransfer.items):await d(e.dataTransfer.files):await d(e.target.files),p="files-dropzone",c="TOO_MANY_FILES",h=document.createElement("template");h.innerHTML=`
-  <style>
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
+Object.defineProperty({},"FilesDropzone",{get:function(){return m},set:void 0,enumerable:!0,configurable:!0});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([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-background-color: #ffffff;
-      --dropzone-background-color-dragover: #f4f4f5;
-      --dropzone-body-color: #3f3f46;
-      --dropzone-body-color-dragover: var(--dropzone-body-color);
-      --dropzone-focus-shadow-rgb: 49,132,253;
-      --transition-duration: 0.2s;
+  :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;
-    }
+    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(--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;
-    }
+  :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])[no-click]) .dropzone {
+    cursor: default;
+  }
 
-    :host(:not([no-style])[disabled]) .dropzone {
-      opacity: 0.8;
-      cursor: not-allowed;
-    }
+  :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--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: 0 0 0 0.25rem rgba(var(--dropzone-focus-shadow-rgb), 0.5);
+  :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>
@@ -65,5 +80,5 @@ Object.defineProperty({},"FilesDropzone",{get:function(){return u},set:void 0,en
   <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 u extends HTMLElement{#e;#t;constructor(){super(),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(h.content.cloneNode(!0))),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.#s),this.#t.addEventListener("drop",this.#n),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.#s),this.#t.removeEventListener("drop",this.#n),this.#t.removeEventListener("click",this.#d),this.#t.removeEventListener("keyup",this.#l)}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(){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",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",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",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")}#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.classList.add("dropzone--dragover"),this.#t.part.add("dropzone--dragover"),this.dispatchEvent(new Event(`${p}-dragover`,{bubbles:!0,composed:!0}))};#s=()=>{this.disabled||this.noDrag||(this.#t.classList.remove("dropzone--dragover"),this.#t.part.remove("dropzone--dragover"),this.dispatchEvent(new Event(`${p}-dragleave`,{bubbles:!0,composed:!0})))};#n=async e=>{if(!this.disabled&&!this.noDrag){e.preventDefault(),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.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,u)}}u.defineCustomElement();export{u as FilesDropzone};
+`;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)}}m.defineCustomElement();export{m as FilesDropzone};
 //# sourceMappingURL=files-dropzone-defined.js.map