@georapbox/files-dropzone-element 2.1.1 → 3.0.0

package/docs/index.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
+  <title>&lt;files-dropzone&gt;</title>
+  <meta name="description" content="A custom element that creates a drag and drop zone for files">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+  <link rel="stylesheet" href="lib/highlight/highlight-github.css">
+  <link rel="stylesheet" href="css/water.css">
+  <link rel="stylesheet" href="css/main.css">
+  <script src="lib/highlight/highlight.min.js" defer></script>
+  <script type="module" src="js/main.js"></script>
+</head>
+<body class="no-js">
+  <script>document.body.classList.remove('no-js');</script>
+
+  <main class="container">
+    <noscript>
+      <div class="noscript-banner">This demo requires JavaScript to work.</div>
+    </noscript>
+
+    <h1>&lt;files-dropzone&gt;</h1>
+
+    <div class="component-description">
+      <p>A custom element that creates a drag and drop zone for files.</p>
+      <p><a href="https://github.com/georapbox/files-dropzone-element" target="_blank" rel="noreferrer noopener">Source code &amp; documentation</a></p>
+    </div>
+
+    <h2 data-hide="no-js">Demo</h2>
+
+    <p data-hide="no-js">
+      <small><em>This is just a demo dropzone. Dropped files are not uploaded anywhere.</em></small>
+    </p>
+
+    <div class="dropzone-container" data-hide="no-js">
+      <files-dropzone></files-dropzone>
+    </div>
+
+    <details data-hide="no-js" open>
+      <summary>Dropped files</summary>
+
+      <p class="console-info">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-info-lg" viewBox="0 0 16 16">
+          <path d="m9.708 6.075-3.024.379-.108.502.595.108c.387.093.464.232.38.619l-.975 4.577c-.255 1.183.14 1.74 1.067 1.74.72 0 1.554-.332 1.933-.789l.116-.549c-.263.232-.65.325-.905.325-.363 0-.494-.255-.402-.704l1.323-6.208Zm.091-2.755a1.32 1.32 0 1 1-2.64 0 1.32 1.32 0 0 1 2.64 0Z"/>
+        </svg>
+        <em>Open the browser's console to watch emitted events with more info of the dropped files.</em>
+      </p>
+
+      <div class="dropped-files" id="droppedFiles"></div>
+    </details>
+
+    <details data-hide="no-js" open>
+      <summary>Customize component</summary>
+
+      <pre><code class="code-preview" id="codePreview"></code></pre>
+
+      <form autocomplete="off">
+        <fieldset>
+          <legend>Attributes</legend>
+
+          <div class="form-row">
+            <div class="form-col">
+              <label for="accept">accept</label>
+              <input type="text" id="accept" name="accept" list="acceptDatalist" placeholder="eg. image/*,.txt,application/pdf" data-attr>
+
+              <datalist id="acceptDatalist">
+                <option value="application/*"></option>
+                <option value="text/*"></option>
+                <option value="image/*"></option>
+                <option value="audio/*"></option>
+                <option value="video/*"></option>
+                <option value=".txt"></option>
+                <option value=".png"></option>
+                <option value=".jpg"></option>
+                <option value=".mp3"></option>
+                <option value=".mp4"></option>
+                <option value=".pdf"></option>
+                <option value=".html"></option>
+                <option value=".css"></option>
+              </datalist>
+            </div>
+
+            <div class="form-col">
+              <label for="max-files">max-files</label>
+              <input type="number" id="max-files" name="max-files" min="1" step="1" data-attr>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-col">
+              <label for="max-size">max-size (bytes)</label>
+              <input type="number" id="max-size" name="max-size" min="0" step="1024" data-attr>
+            </div>
+
+            <div class="form-col">
+              <label for="min-size">min-size (bytes)</label>
+              <input type="number" id="min-size" name="min-size" min="0" step="1024" data-attr>
+            </div>
+          </div>
+
+          <div class="form-row" style="gap: 1rem;">
+            <div>
+              <input type="checkbox" id="disabled" name="disabled" data-attr>
+              <label for="disabled">disabled</label>
+            </div>
+
+            <div>
+              <input type="checkbox" id="multiple" name="multiple" data-attr>
+              <label for="multiple">multiple</label>
+            </div>
+
+            <div>
+              <input type="checkbox" id="no-style" name="no-style" data-attr>
+              <label for="no-style">no-style</label>
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset>
+          <legend>Slots</legend>
+
+          <div class="form-row">
+            <div class="form-col">
+              <label for="slot">Default slot</label>
+              <input type="text" id="slot" name="slot" data-slot="default">
+              <p style="margin: 0;"><small><em>For the demo purposes, the slot is plain text. However, in reality you can use any valid HTML.</em></small></p>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+
+      <button type="button" id="openFileDialogBtn" class="open-file-dialog-btn">
+        Open file dialog programmatically
+      </button>
+    </details>
+
+    <h2>License</h2>
+    <p>Licensed under the <a href="https://github.com/georapbox/files-dropzone-element/blob/main/LICENSE" target="_blank" rel="noreferrer noopener">The MIT License (MIT)</a></p>
+  </main>
+</body>
+</html>

package/docs/js/main.js

@@ -0,0 +1,154 @@
+const url = window.location.href;
+const isLocalhost = url.includes('127.0.0.1') || url.includes('localhost');
+const componentUrl = isLocalhost ? '../../dist/files-dropzone.js' : '../lib/files-dropzone.js';
+
+try {
+  const { FilesDropzone } = await import(componentUrl);
+  FilesDropzone.define();
+} catch (err) {
+  console.error(err);
+}
+
+const droppedFilesList = document.getElementById('droppedFiles');
+const codePreview = document.getElementById('codePreview');
+const form = document.querySelector('form');
+const dropzone = document.querySelector('files-dropzone');
+const openFileDialogBtn = document.getElementById('openFileDialogBtn');
+
+codePreview.textContent = '<files-dropzone></files-dropzone>';
+
+window.hljs.highlightElement(codePreview);
+
+function createCodePreview(dropzone) {
+  return dropzone.outerHTML.replace(/=""/g, '');
+}
+
+function createFilesList(files, status) {
+  if (!files.length) {
+    return;
+  }
+
+  const INITIAL_FILES_COUNT = 50;
+
+  const container = document.createElement('div');
+
+  const title = Object.assign(document.createElement('h3'), {
+    className: 'dropped-files__title',
+    textContent: `${status === 'accepted' ? 'Accepted' : 'Rejected'} files (${files.length})`
+  });
+
+  const list = Object.assign(document.createElement('ul'), {
+    className: 'dropped-files__list'
+  });
+
+  files.forEach((item, index) => {
+    const file = status === 'accepted' ? item : item.file;
+
+    const listItem = Object.assign(document.createElement('li'), {
+      className: `dropped-files__list-item dropped-files__list-item--${status}`,
+      hidden: index >= INITIAL_FILES_COUNT
+    });
+
+    const fileInfo = document.createElement('div');
+    fileInfo.append(document.createTextNode(file.name));
+
+    const fileSize = document.createElement('span');
+    fileSize.className = 'dropped-files__file-size';
+    fileSize.textContent = ` - ${file.size} bytes`;
+
+    fileInfo.appendChild(fileSize);
+    listItem.appendChild(fileInfo);
+
+    if (status === 'rejected') {
+      const errorsList = document.createElement('ul');
+      errorsList.className = 'dropped-files__errors';
+
+      item.errors.forEach(({ message }) => {
+        const errorItem = document.createElement('li');
+        errorItem.textContent = message;
+        errorsList.appendChild(errorItem);
+      });
+
+      listItem.appendChild(errorsList);
+    }
+
+    list.appendChild(listItem);
+  });
+
+  const showAllBtn = Object.assign(document.createElement('button'), {
+    type: 'button',
+    className: 'dropped-files__show-all',
+    textContent: 'Show all'
+  });
+
+  container.appendChild(title);
+  container.appendChild(list);
+
+  if (files.length > INITIAL_FILES_COUNT) {
+    container.appendChild(showAllBtn);
+  }
+
+  return container;
+}
+
+droppedFilesList.addEventListener('click', evt => {
+  const target = evt.target;
+
+  if (target.matches('.dropped-files__show-all')) {
+    target.previousElementSibling.querySelectorAll('li').forEach(item => (item.hidden = false));
+    target.remove();
+  }
+});
+
+form.addEventListener('input', evt => {
+  const target = evt.target;
+  const { name, value } = target;
+
+  if (target.hasAttribute('data-slot')) {
+    dropzone.textContent = value;
+  }
+
+  if (target.hasAttribute('data-attr')) {
+    switch (target.type) {
+      case 'checkbox':
+        target.checked ? dropzone.setAttribute(name, '') : dropzone.removeAttribute(name);
+        break;
+      default:
+        value ? dropzone.setAttribute(name, value) : dropzone.removeAttribute(name);
+    }
+  }
+
+  codePreview.textContent = createCodePreview(dropzone);
+
+  window.hljs.highlightElement(codePreview);
+});
+
+document.addEventListener('dropzone-drop', evt => {
+  console.log('dropzone-drop ->', evt.detail);
+
+  const { acceptedFiles, rejectedFiles } = evt.detail;
+  const acceptedFilesList = createFilesList(acceptedFiles, 'accepted');
+  const rejectedFilesList = createFilesList(rejectedFiles, 'rejected');
+
+  droppedFilesList.replaceChildren();
+
+  if (acceptedFilesList) {
+    droppedFilesList.appendChild(acceptedFilesList);
+  }
+
+  if (rejectedFilesList) {
+    droppedFilesList.appendChild(rejectedFilesList);
+  }
+});
+
+document.addEventListener('dropzone-error', evt => {
+  console.log('dropzone-error ->', evt.detail.error);
+});
+
+openFileDialogBtn.addEventListener('click', () => {
+  dropzone.openFileDialog();
+
+  if (dropzone.hasAttribute('disabled')) {
+    alert('Dropzone is disabled. File dialog will not open programmatically.');
+  }
+});

package/docs/lib/files-dropzone.js

@@ -0,0 +1,93 @@
+/*!
+ * @georapbox/files-dropzone-element
+ * A custom element that creates a drag and drop zone for files
+ *
+ * @version 3.0.0
+ * @homepage https://github.com/georapbox/files-dropzone-element#readme
+ * @author George Raptis <georapbox@gmail.com>
+ * @license MIT
+ */
+function c(o,e=""){if(!e)return!0;let t=[...new Set(e.split(",").map(r=>r.trim()).filter(Boolean))],i=o.type,s=i.replace(/\/.*$/,"");for(let r of t)if(r.charAt(0)==="."){if(o.name.toLowerCase().indexOf(r.toLowerCase(),o.name.length-r.length)!==-1)return!0}else if(/\/\*$/.test(r)){if(s===r.replace(/\/.*$/,""))return!0}else if(i===r)return!0;return!1}var v=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"],["markdown","text/markdown"],["md","text/markdown"],["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"]]),f=[".DS_Store","Thumbs.db"],E=o=>{let{name:e}=o;if(e&&e.lastIndexOf(".")!==-1&&!o.type){let i=(e.split(".").pop()||"").toLowerCase(),s=v.get(i);s&&Object.defineProperty(o,"type",{value:s,writable:!1,configurable:!1,enumerable:!0})}return o},m=(o,e)=>{let t=E(o);if(typeof t.path!="string"){let{webkitRelativePath:i}=o;Object.defineProperty(t,"path",{value:typeof e=="string"?e:i||o.name,writable:!1,configurable:!1,enumerable:!0})}return t},h=async o=>await new Promise((e,t)=>{o.readEntries(e,t)}),z=async o=>{let e=[],t=await h(o);for(;t.length>0;)e.push(...t),t=await h(o);return e},x=o=>new Promise((e,t)=>{o.file(i=>e(m(i,o.fullPath)),t)}),y=async o=>{let e=[],t=[];for(let i of o){if(i.kind!=="file")continue;let s=i.getAsEntry?i.getAsEntry():i.webkitGetAsEntry();t.push(s)}for(;t.length>0;){let i=t.shift();if(i)if(i.isFile){let s=await x(i);f.indexOf(s.name)===-1&&e.push(s)}else i.isDirectory&&t.push(...await z(i.createReader()));else continue}return e},u=async o=>{let e=[];for(let t of o)f.indexOf(t.name)===-1&&e.push(m(t));return e},a=async o=>o.dataTransfer?o.dataTransfer.items?await y(o.dataTransfer.items):await u(o.dataTransfer.files):await u(o.target.files);var w=String.raw,O=String.raw,b=document.createElement("template"),L=w`
+  *,
+  *::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])[disabled]) .dropzone {
+    opacity: 0.8;
+    cursor: not-allowed;
+    user-select: none;
+  }
+
+  :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);
+    }
+  }
+`;b.innerHTML=O`
+  <style>
+    ${L}
+  </style>
+
+  <input type="file" id="file-input" hidden />
+
+  <div part="dropzone" class="dropzone" id="dropzone" tabindex="0" role="button" aria-disabled="false">
+    <slot><span>Drag 'n' drop files here, or click to select files</span></slot>
+  </div>
+`;var g=class o extends HTMLElement{static ERROR_CODES={FILE_DIALOG_OPEN_FAILED:"FILE_DIALOG_OPEN_FAILED",FILE_INPUT_CHANGE_FAILED:"FILE_INPUT_CHANGE_FAILED",DROP_EVENT_PROCESSING_FAILED:"DROP_EVENT_PROCESSING_FAILED",UNKNOWN_ERROR:"UNKNOWN_ERROR"};static REJECTION_CODES={TOO_MANY_FILES:"TOO_MANY_FILES",FILE_TOO_LARGE:"FILE_TOO_LARGE",FILE_TOO_SMALL:"FILE_TOO_SMALL",INVALID_MIME_TYPE:"INVALID_MIME_TYPE"};#t=null;#e=null;constructor(){super(),this.shadowRoot||this.attachShadow({mode:"open",delegatesFocus:!0}).appendChild(b.content.cloneNode(!0)),this.shadowRoot&&(this.#t=this.shadowRoot.getElementById("file-input"),this.#e=this.shadowRoot.getElementById("dropzone"))}static get observedAttributes(){return["accept","disabled","multiple"]}attributeChangedCallback(e,t,i){e==="accept"&&t!==i&&this.#t&&(this.#t.accept=this.accept),e==="disabled"&&t!==i&&this.#t&&(this.#t.disabled=this.disabled,this.disabled?(this.#e?.removeAttribute("tabindex"),this.#e?.setAttribute("aria-disabled","true")):(this.#e?.setAttribute("tabindex","0"),this.#e?.setAttribute("aria-disabled","false"))),e==="multiple"&&t!==i&&this.#t&&(this.#t.multiple=this.multiple)}connectedCallback(){this.#i("accept"),this.#i("disabled"),this.#i("maxFiles"),this.#i("maxSize"),this.#i("minSize"),this.#i("multiple"),this.#i("autoFocus"),this.#i("noStyle"),this.#t?.addEventListener("change",this.#r),this.#e?.addEventListener("dragenter",this.#s),this.#e?.addEventListener("dragover",this.#n),this.#e?.addEventListener("dragleave",this.#a),this.#e?.addEventListener("drop",this.#d),this.#e?.addEventListener("click",this.#l),this.#e?.addEventListener("keyup",this.#p),this.autoFocus&&this.#e?.focus()}disconnectedCallback(){this.#t?.removeEventListener("change",this.#r),this.#e?.removeEventListener("dragenter",this.#s),this.#e?.removeEventListener("dragover",this.#n),this.#e?.removeEventListener("dragleave",this.#a),this.#e?.removeEventListener("drop",this.#d),this.#e?.removeEventListener("click",this.#l),this.#e?.removeEventListener("keyup",this.#p)}get accept(){return this.getAttribute("accept")||""}set accept(e){this.setAttribute("accept",e!=null?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",e!=null?e.toString():e)}get maxSize(){let e=this.getAttribute("max-size");if(e===null)return 1/0;let t=Number(e);return Number.isNaN(t)?1/0:t}set maxSize(e){this.setAttribute("max-size",e!=null?e.toString():e)}get minSize(){let e=this.getAttribute("min-size");if(e===null)return 0;let t=Number(e);return Number.isNaN(t)?0:t}set minSize(e){this.setAttribute("min-size",e!=null?e.toString():e)}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",!!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)}#o(e,t,{cancelable:i=!1}={}){let s={bubbles:!0,composed:!0,cancelable:i},r=t===void 0?new Event(e,s):new CustomEvent(e,{...s,detail:t});return this.dispatchEvent(r)}#r=async e=>{try{this.#c(await a(e))}catch(t){this.#o("dropzone-error",{code:o.ERROR_CODES.FILE_INPUT_CHANGE_FAILED,error:t})}};#s=()=>{this.disabled||this.#o("dropzone-dragenter")};#n=e=>{if(e.preventDefault(),this.disabled){e.dataTransfer.dropEffect="none";return}e.dataTransfer.dropEffect="copy",this.#e&&(this.#e.classList.add("dropzone--dragover"),this.#e.part.add("dropzone--dragover")),this.#o("dropzone-dragover")};#a=()=>{this.disabled||(this.#e&&(this.#e.classList.remove("dropzone--dragover"),this.#e.part.remove("dropzone--dragover")),this.#o("dropzone-dragleave"))};#d=async e=>{if(!this.disabled){e.preventDefault(),this.#e&&(this.#e.classList.remove("dropzone--dragover"),this.#e.part.remove("dropzone--dragover"));try{this.#c(await a(e))}catch(t){this.#o("dropzone-error",{code:o.ERROR_CODES.DROP_EVENT_PROCESSING_FAILED,error:t})}}};#l=()=>{this.disabled||this.openFileDialog()};#p=e=>{this.disabled||(e.key===" "||e.key==="Enter")&&this.openFileDialog()};#c(e){if(!Array.isArray(e)||!e.length)return;let t=[],i=[],s=e.length;if(!this.multiple&&s>1)for(let r of e)i.push({file:r,errors:[{code:o.REJECTION_CODES.TOO_MANY_FILES,message:"Too many files selected. Only 1 file is allowed."}]});else if(this.multiple&&s>this.maxFiles)for(let r of e)i.push({file:r,errors:[{code:o.REJECTION_CODES.TOO_MANY_FILES,message:`Too many files selected. Only ${this.maxFiles} ${this.maxFiles>1?"files are":"file is"} allowed.`}]});else for(let r of e){let d=c(r,this.accept),l=r.size>this.maxSize,p=r.size<this.minSize;if(d&&!l&&!p)t.push(r);else{let n=[];d||n.push({code:o.REJECTION_CODES.INVALID_MIME_TYPE,message:`File type "${r.type}" is not accepted.`}),l&&n.push({code:o.REJECTION_CODES.FILE_TOO_LARGE,message:`File size ${r.size} exceeds the maximum size of ${this.maxSize}.`}),p&&n.push({code:o.REJECTION_CODES.FILE_TOO_SMALL,message:`File size ${r.size} is smaller than the minimum size of ${this.minSize}.`}),i.push({file:r,errors:n})}}this.#o("dropzone-drop",{acceptedFiles:t,rejectedFiles:i}),t.length>0&&this.#o("dropzone-drop-accepted",{acceptedFiles:t}),i.length>0&&this.#o("dropzone-drop-rejected",{rejectedFiles:i}),this.#t&&(this.#t.value=this.#t.defaultValue)}openFileDialog(){if(!(this.disabled||!this.#t)){if("showPicker"in HTMLInputElement.prototype&&typeof this.#t.showPicker=="function"){try{this.#t.showPicker()}catch(e){this.#o("dropzone-error",{code:o.ERROR_CODES.FILE_DIALOG_OPEN_FAILED,error:e})}return}this.#t.click()}}#i(e){let t=this;if(Object.hasOwn(t,e)){let i=t[e];delete t[e],t[e]=i}}static define(e="files-dropzone"){typeof window>"u"||window.customElements.get(e)||window.customElements.define(e,o)}};export{g as FilesDropzone};

package/docs/lib/highlight/highlight-github.css

@@ -0,0 +1,160 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+:root {
+  --italic: italic;
+  --bold: 700;
+}
+
+/*!
+ * Theme: GitHub
+ * Description: Light theme as seen on github.com
+ * Author: github.com
+ * Maintainer: @Hirse
+ * Updated: 2021-05-15
+ *
+ * Outdated base version: https://github.com/primer/github-syntax-light
+ * Current colors taken from GitHub's CSS
+ */
+:root {
+  --text-color: #24292e;
+  --background-color: #ffffff;
+  --keyword-color: #d73a49;
+  --title-color: #6f42c1;
+  --syntax-color: #005cc5;
+  --string-color: #032f62;
+  --built-in-color: #e36209;
+  --code-color: #6a737d;
+  --name-color: #22863a;
+  --subst-color: #24292e;
+  --section-color: #005cc5;
+  --bullet-color: #735c0f;
+  --emphasis-color: #24292e;
+  --strong-color: #24292e;
+  --addition-color: #22863a;
+  --deletion-color: #b31d28;
+  --addition-background: #f0fff4;
+  --deletion-background: #ffeef0;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: #c9d1d9;
+    --background-color: #0d1117;
+    --keyword-color: #ff7b72;
+    --title-color: #d2a8ff;
+    --syntax-color: #79c0ff;
+    --string-color: #a5d6ff;
+    --built-in-color: #ffa657;
+    --code-color: #8b949e;
+    --name-color: #7ee787;
+    --subst-color: #c9d1d9;
+    --section-color: #1f6feb;
+    --bullet-color: #f2cc60;
+    --emphasis-color: #c9d1d9;
+    --strong-color: #c9d1d9;
+    --addition-color: #aff5b4;
+    --deletion-color: #ffdcd7;
+    --addition-background: #033a16;
+    --deletion-background: #67060c;
+  }
+}
+
+.hljs {
+  color: var(--text-color);
+  background: var(--background-color);
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: var(--keyword-color);
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: var(--title-color);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: var(--syntax-color);
+}
+
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: var(--string-color);
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  color: var(--built-in-color);
+}
+
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: var(--code-color);
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: var(--name-color);
+}
+
+.hljs-subst {
+  color: var(--subst-color);
+}
+
+.hljs-section {
+  color: var(--section-color);
+  font-weight: var(--bold);
+}
+
+.hljs-bullet {
+  color: var(--bullet-color);
+}
+
+.hljs-emphasis {
+  color: var(--emphasis-color);
+  font-style: var(--italic);
+}
+
+.hljs-strong {
+  color: var(--strong-color);
+  font-weight: var(--bold);
+}
+
+.hljs-addition {
+  color: var(--addition-color);
+  background-color: var(--addition-background);
+}
+
+.hljs-deletion {
+  color: var(--deletion-color);
+  background-color: var(--deletion-background);
+}