filepond 5.0.0-beta.2 → 5.0.0-beta.21

package/esm/templates/entry.js

@@ -1,36 +1,36 @@
 /*!
-* FilePond v5.0.0-beta.2
+* FilePond v5.0.0-beta.21
 * Copyright (c) 2017-2026 Pqina B.V.
 * Released under the MIT License
 * https://filepond.com
 */
-import { nodeTree as E } from "../elements/common/nodeTree.js";
-import { isDataTransferEntry as u, isFileEntry as h, isString as d, isNumber as _ } from "../utils/test.js";
-import { bytesToNaturalFileSize as k } from "../utils/file.js";
-import { fade as g } from "../elements/common/transition.js";
-import { quadInOut as U } from "../svelte/svelte/src/easing/index.js";
-import { hasExtensionWithStatusCode as s, getExtensionStatusWithCode as y, createButton as i, hasExtensionWithAction as A } from "./helpers.js";
-import { cache as L } from "../utils/cache.js";
+import { nodeTree as y } from "../elements/common/nodeTree.js";
+import { isDataTransferEntry as p, isFileEntry as _, isString as b, isNumber as g } from "../utils/test.js";
+import { bytesToNaturalFileSize as U } from "../utils/file.js";
+import { fade as A } from "../elements/common/transition.js";
+import { quadInOut as D } from "../svelte/svelte/src/easing/index.js";
+import { hasExtensionWithStatusCode as s, getExtensionStatusWithCode as S, createButton as i, hasExtensionWithAction as L } from "./helpers.js";
+import { cache as B } from "../utils/cache.js";
 import "../elements/components/BooleanInput/index.js";
 import "../elements/components/ElementSkeleton/index.js";
 import "../elements/components/FilenameInput/index.js";
-import p from "../elements/components/SpringElement/index.svelte.js";
+import f from "../elements/components/SpringElement/index.svelte.js";
 import "../elements/FilePondEntryList/components/EntryActivityIndicator/index.js";
 import "../elements/FilePondEntryList/components/EntryStatus/index.js";
 import "../elements/FilePondEntryList/components/EntryList/index.js";
 import "../elements/FilePondEntryList/components/EntryListItem/index.js";
 import "../elements/FilePondEntryList/components/Entry/index.js";
-import B from "../elements/FilePondEntryList/components/EntryListItemPlaceholder/index.svelte.js";
-import { toSpaceSeparatedString as Y } from "../elements/common/string.js";
-import D from "../elements/FilePondEntryList/components/EntryListItem/index.svelte.js";
+import Y from "../elements/FilePondEntryList/components/EntryListItemPlaceholder/index.svelte.js";
+import { toSpaceSeparatedString as l } from "../elements/common/string.js";
+import $ from "../elements/FilePondEntryList/components/EntryListItem/index.svelte.js";
 import F from "../elements/FilePondEntryList/components/EntryList/index.svelte.js";
-import I from "../elements/FilePondEntryList/components/Entry/index.svelte.js";
-import v from "../elements/FilePondEntryList/components/EntryStatus/index.svelte.js";
-import m from "../elements/components/ElementSkeleton/index.svelte.js";
-import S from "../elements/FilePondEntryList/components/EntryActivityIndicator/index.svelte.js";
-import P from "../elements/components/BooleanInput/index.svelte.js";
-import M from "../elements/components/FilenameInput/index.svelte.js";
-function bt(e) {
+import v from "../elements/FilePondEntryList/components/Entry/index.svelte.js";
+import P from "../elements/FilePondEntryList/components/EntryStatus/index.svelte.js";
+import E from "../elements/components/ElementSkeleton/index.svelte.js";
+import R from "../elements/FilePondEntryList/components/EntryActivityIndicator/index.svelte.js";
+import M from "../elements/components/BooleanInput/index.svelte.js";
+import C from "../elements/components/FilenameInput/index.svelte.js";
+function Ot() {
   return [
     {
       key: "entry-list",
@@ -43,7 +43,7 @@ function bt(e) {
         if: {
           test: ({ isPlaceholder: t }) => t,
           then: {
-            component: B,
+            component: Y,
             props: ({ onmeasureitem: t }) => ({
               part: "entry-list-item-placeholder",
               onmeasureitem: t
@@ -52,20 +52,21 @@ function bt(e) {
         },
         else: {
           key: "entry-list-item",
-          component: D,
+          component: $,
           props: ({
             entry: t,
+            ariaId: e,
             spring: r,
             isDetached: n,
             isRemoving: o,
             isDraggable: a,
             isDragging: c,
-            isLastDraggedItem: R,
-            translation: b,
-            springAnimation: O,
-            onmeasureitem: T
+            isLastDraggedItem: O,
+            translation: T,
+            springAnimation: h,
+            onmeasureitem: k
           }) => ({
-            part: u(t) ? "entry-list-item data-transfer-item" : "entry-list-item file-item",
+            part: p(t) ? "entry-list-item data-transfer-item" : "entry-list-item file-item",
             class: "entry-list-item",
             entry: t,
             spring: r,
@@ -73,54 +74,59 @@ function bt(e) {
             isRemoving: o,
             isDraggable: a,
             isDragging: c,
-            isLastDraggedItem: R,
-            springAnimation: O,
-            translation: b,
-            onmeasureitem: T
+            isLastDraggedItem: O,
+            springAnimation: h,
+            translation: T,
+            onmeasureitem: k,
+            ariaDescribedby: l(
+              `${e}-status`,
+              `${e}-store-info`
+            )
           }),
-          children: C()
+          children: x()
         }
       }
     }
   ];
 }
-function C(e) {
+function x() {
   return {
     key: "entry",
-    component: I,
-    props: ({ entry: t }) => ({
-      part: u(t) ? "entry entry-data-transfer" : "entry"
+    component: v,
+    props: ({ entry: t, ariaId: e }) => ({
+      nameId: `${e}-name`,
+      part: p(t) ? "entry entry-data-transfer" : "entry"
     }),
     children: [
-      W(),
+      q(),
       {
         if: {
-          test: ({ entry: t }) => u(t),
-          then: N()
+          test: ({ entry: t }) => p(t),
+          then: I()
         },
         elseif: {
-          test: ({ entry: t }) => h(t),
-          then: x()
+          test: ({ entry: t }) => _(t),
+          then: z()
         }
       },
       Z(),
-      Q()
+      N()
     ]
   };
 }
-function l(e, t, { main: r, sub: n }) {
+function u(t, e, { main: r, sub: n }) {
   return {
     if: {
-      test: ({ entry: o }) => s(o, t),
+      test: ({ entry: o }) => s(o, e),
       then: {
-        key: e,
+        key: t,
         tag: "element-stack",
         attrs: {
           layout: "col"
         },
         children: [
-          d(r) ? {
-            key: `${e}-main`,
+          b(r) ? {
+            key: `${t}-main`,
             tag: "div",
             attrs: {
               class: "entry-info-main"
@@ -128,7 +134,7 @@ function l(e, t, { main: r, sub: n }) {
             children: r
           } : r,
           {
-            key: `${e}-sub`,
+            key: `${t}-sub`,
             tag: "div",
             attrs: {
               class: "entry-info-sub"
@@ -140,10 +146,10 @@ function l(e, t, { main: r, sub: n }) {
     }
   };
 }
-function x() {
+function z() {
   return {
     key: "entry-info",
-    component: p,
+    component: f,
     props: {
       class: "entry-info",
       part: "entry-info",
@@ -152,13 +158,13 @@ function x() {
         layout: "split"
       }
     },
-    children: [z(), $()]
+    children: [Q(), W()]
   };
 }
-function N() {
+function I() {
   return {
     key: "data-transfer-info",
-    component: p,
+    component: f,
     props: {
       class: "entry-info",
       part: "entry-info data-transfer-info",
@@ -167,11 +173,11 @@ function N() {
         layout: "col"
       }
     },
-    context: ({ entry: e }) => {
-      const t = y(e, "LOAD_BUSY");
+    context: ({ entry: t }) => {
+      const e = S(t, "LOAD_BUSY");
       return {
-        processedFiles: t?.values?.processed,
-        totalFiles: t?.values?.total
+        processedFiles: e?.values?.processed,
+        totalFiles: e?.values?.total
       };
     },
     children: [
@@ -194,68 +200,74 @@ function N() {
     ]
   };
 }
-function Q(e) {
+function N() {
   return {
     key: "entry-status",
-    component: v,
-    props: {
+    component: P,
+    props: ({ ariaId: t }) => ({
       part: "entry-status",
-      class: "entry-status"
-    }
+      class: "entry-status",
+      id: `${t}-status`
+    })
   };
 }
-function z() {
+function Q() {
   return {
     key: "file-info",
     tag: "element-stack",
     attrs: {
       layout: "col"
     },
-    context: ({ entry: e }) => {
-      const t = s(e, [
+    context: ({ entry: t }) => {
+      const e = s(t, [
         "LOAD_QUEUED",
         "LOAD_BUSY",
         "RESTORE_BUSY"
-      ]), r = s(e, ["LOAD_ERROR", "RESTORE_ERROR"]);
+      ]), r = s(t, ["LOAD_ERROR", "RESTORE_ERROR"]);
       return {
-        isWaiting: t,
+        isWaiting: e,
         isFrozen: r
       };
     },
     children: [
       {
         key: "file-info-main",
-        component: m,
-        props: ({ isWaiting: e, isFrozen: t }) => ({
+        component: E,
+        props: ({ isWaiting: t, isFrozen: e }) => ({
           class: "entry-info-main",
-          isWaiting: e,
-          isFrozen: t
+          isWaiting: t,
+          isFrozen: e
         }),
         children: "{{entry.name}}"
       },
       {
         key: "file-info-sub",
-        component: m,
-        props: ({ isWaiting: e, isFrozen: t }) => ({
+        component: E,
+        props: ({ isWaiting: t, isFrozen: e }) => ({
           class: "entry-info-sub",
-          isWaiting: e,
-          isFrozen: t
+          isWaiting: t,
+          isFrozen: e
         }),
-        context: ({ entry: e }) => ({
-          naturalSize: _(e.size) ? (
-            // bytesToNaturalFileSize(entry.size)
-            L(k, [e.size])
-          ) : null
-        }),
-        children: "{{naturalSize}}"
+        context: ({ entry: t, byteUnits: e }) => {
+          const r = g(t.size) ? B(U, [t.size, { byteUnits: e }]) : null, [n, o] = r === null ? [] : r.split(" ");
+          return {
+            size: n,
+            sizeUnit: `unit${o}`
+          };
+        },
+        children: "{{size}} {{sizeUnit}}"
       }
     ]
   };
 }
-function $() {
+const m = ({ ariaId: t }) => ({
+  id: `${t}-store-info`,
+  class: "entry-info-main"
+});
+function W() {
   return {
     key: "file-store-spring",
-    component: p,
+    component: f,
     props: {
       subtag: "element-stack",
       subattrs: {
@@ -263,34 +275,36 @@ function $() {
       }
     },
     transition: {
-      fn: g,
+      fn: A,
       duration: 150,
-      easing: U,
-      when: ({ entry: e }) => s(e, [
+      easing: D,
+      when: ({ entry: t }) => s(t, [
         "STORE_QUEUED",
         "STORE_BUSY",
         "STORE_COMPLETE"
       ])
     },
     children: [
-      l("file-store-queued-info", ["STORE_QUEUED"], {
-        main: "storeStorageQueued",
+      u("file-store-queued-info", ["STORE_QUEUED"], {
+        main: {
+          key: "file-store-queued-info-main",
+          tag: "div",
+          attrs: m,
+          children: "storeStorageQueued"
+        },
         sub: "assistAbort"
       }),
-      l("file-store-busy-info", ["STORE_BUSY"], {
+      u("file-store-busy-info", ["STORE_BUSY"], {
         sub: "assistAbort",
         main: {
           key: "file-store-busy-info-main",
           tag: "div",
-          attrs: {
-            class: "entry-info-main"
-          },
-          spring: ({ entry: e }) => {
-            const { progress: t } = y(e, "STORE_BUSY") ?? {};
+          attrs: m,
+          spring: ({ entry: t }) => {
+            const { progress: e } = S(t, "STORE_BUSY") ?? {};
             return {
               progress: {
-                // the current value
-                value: t === 1 / 0 ? 0 : t,
+                value: e === 1 / 0 ? 0 : e,
                 transform: (r) => Math.round(r * 100)
               }
             };
@@ -298,18 +312,23 @@ function $() {
           children: "storeStorageProgress"
         }
       }),
-      l("file-store-complete-info", ["STORE_COMPLETE"], {
-        main: "storeStorageComplete",
+      u("file-store-complete-info", ["STORE_COMPLETE"], {
+        main: {
+          key: "file-store-complete-info-main",
+          tag: "div",
+          attrs: m,
+          children: "storeStorageComplete"
+        },
         sub: "assistUndo"
       })
     ]
   };
 }
-function W() {
+function q() {
   return {
     key: "entry-load-state",
-    component: S,
-    props: ({ id: e, entry: t }, { updateEntryState: r, removeEntries: n }) => ({
+    component: R,
+    props: ({ id: t, ariaId: e, entry: r }, { updateEntryState: n, removeEntries: o }) => ({
       class: "entry-load-state",
       part: "entry-load-state",
       buttonPart: "entry-button",
@@ -320,8 +339,9 @@ function W() {
           button: i("button-load-abort", {
             title: "abort",
             icon: "remove",
-            disabled: s(t, ["TRANSFORM_BUSY"]),
-            onclick: () => r(e, { abort: !0 })
+            disabled: s(r, ["TRANSFORM_BUSY"]),
+            onclick: () => n(t, { abort: !0 }),
+            ariaDescribedby: `${e}-name`
           })
         },
         {
@@ -335,8 +355,12 @@ function W() {
           ],
           button: i("button-entry-remove", {
             icon: "remove",
-            disabled: s(t, ["TRANSFORM_BUSY"]),
-            onclick: () => n(e)
+            disabled: s(r, ["TRANSFORM_BUSY"]),
+            onclick: () => o(t),
+            ariaDescribedby: l(
+              `${e}-name`,
+              `${e}-status`
+            )
           })
         }
       ]
@@ -346,8 +370,8 @@ function W() {
 function Z() {
   return {
     key: "entry-store-state",
-    component: S,
-    props: ({ id: e, entry: t }, { updateEntryState: r }) => ({
+    component: R,
+    props: ({ id: t, ariaId: e, entry: r }, { updateEntryState: n }) => ({
       class: "entry-store-state",
       part: "entry-store-state",
       buttonPart: "entry-button",
@@ -362,15 +386,16 @@ function Z() {
           ],
           button: i("button-store-idle", {
             icon: "store",
-            disabled: s(t, ["TRANSFORM_BUSY"]),
-            styles: f({
+            disabled: s(r, ["TRANSFORM_BUSY"]),
+            styles: d({
               intro: "translateY(0.125em)",
               idle: "translateY(0)",
               outro: "translateY(-0.125em)"
             }),
-            onclick: () => r(e, {
+            onclick: () => n(t, {
               store: !0
-            })
+            }),
+            ariaDescribedby: `${e}-name`
           })
         },
         {
@@ -378,10 +403,14 @@ function Z() {
           progress: !0,
           button: i("button-store-busy", {
             icon: "abort",
-            disabled: s(t, ["TRANSFORM_BUSY"]),
-            onclick: () => r(e, {
+            disabled: s(r, ["TRANSFORM_BUSY"]),
+            onclick: () => n(t, {
               abort: !0
-            })
+            }),
+            ariaDescribedby: l(
+              `${e}-name`,
+              `${e}-store-info`
+            )
           })
         },
         {
@@ -391,47 +420,53 @@ function Z() {
           },
           button: i("button-store-busy", {
             icon: "abort",
-            disabled: s(t, ["TRANSFORM_BUSY"]),
-            onclick: () => r(e, {
+            disabled: s(r, ["TRANSFORM_BUSY"]),
+            onclick: () => n(t, {
               abort: !0
-            })
+            }),
+            ariaDescribedby: `${e}-name`
           })
         },
         {
           codes: ["STORE_COMPLETE", "RESTORE_COMPLETE", "RELEASE_ABORT"],
           button: i("button-store-complete", {
             icon: "revert",
-            styles: f({
+            styles: d({
               intro: "rotateZ(45deg)",
               idle: "rotateZ(0)",
               outro: "rotaetZ(-45deg)"
             }),
-            disabled: s(t, ["TRANSFORM_BUSY"]),
-            onclick: () => r(e, {
+            disabled: s(r, ["TRANSFORM_BUSY"]),
+            onclick: () => n(t, {
               store: !1
-            })
+            }),
+            ariaDescribedby: l(
+              `${e}-name`,
+              `${e}-status`,
+              `${e}-store-info`
+            )
           })
         }
       ]
     })
   };
 }
-function f({ intro: e, idle: t, outro: r }) {
+function d({ intro: t, idle: e, outro: r }) {
   const n = "--indicator-button-";
   return {
-    [`${n}intro`]: e,
-    [`${n}idle`]: t,
+    [`${n}intro`]: t,
+    [`${n}idle`]: e,
     [`${n}outro`]: r
   };
 }
-function q(e) {
-  const { key: t = "entry-checkbox", stateKey: r = "checked" } = e ?? {};
+function w(t) {
+  const { key: e = "entry-checkbox", stateKey: r = "checked" } = t ?? {};
   return {
-    key: t,
-    component: P,
+    key: e,
+    component: M,
     props: ({ id: n, entry: o }, { updateEntryState: a }) => ({
-      class: t,
-      part: t,
+      class: e,
+      part: e,
       icon: "check",
       label: "Select",
       labelIsImplicit: !0,
@@ -444,14 +479,14 @@ function q(e) {
     })
   };
 }
-function w(e) {
-  const { key: t = "file-rename", extensionAction: r = "renameFile" } = e ?? {};
+function K(t) {
+  const { key: e = "file-rename", extensionAction: r = "renameFile" } = t ?? {};
   return {
     if: {
-      test: ({ entry: n }) => d(n.name) && A(n, r),
+      test: ({ entry: n }) => b(n.name) && L(n, r),
       then: {
-        key: t,
-        component: M,
+        key: e,
+        component: C,
         props: ({ id: n, entry: o }, { updateEntryState: a }) => ({
           disabled: s(o, ["STORE_QUEUED", "STORE_BUSY"]),
           value: o.name,
@@ -464,45 +499,45 @@ function w(e) {
       }
     },
     else: {
-      key: t,
+      key: e,
       tag: "span",
       children: "{{entry.name}}"
     }
   };
 }
-function Ot(e) {
-  E(e).remove("entry-store-state").replace("entry-load-state", q()).update("entry-list-item", (t) => {
-    const r = t.props;
-    t.props = (n) => {
+function Tt(t) {
+  return y(t).remove("entry-store-state").replace("entry-load-state", w()).update("entry-list-item", (e) => {
+    const r = e.props;
+    e.props = (n) => {
       const o = r(n);
       return {
         ...o,
-        part: Y(
+        part: l(
           o.part,
           n.entry.state.checked ? "selected" : void 0
         )
       };
     };
-  });
+  }), t;
 }
-function Tt(e) {
-  E(e).update("file-info-main", (t) => {
-    t.children = w();
-  });
+function ht(t) {
+  return y(t).update("file-info-main", (e) => {
+    e.children = K();
+  }), t;
 }
 export {
-  Ot as appendEntryCheckbox,
-  Tt as appendEntryRenameInput,
-  q as createEntryCheckbox,
-  N as createEntryDataTransferInfo,
-  x as createEntryInfo,
-  l as createEntryInfoBlock,
-  W as createEntryLoadState,
-  Q as createEntryStatus,
+  Tt as appendEntryCheckbox,
+  ht as appendEntryRenameInput,
+  w as createEntryCheckbox,
+  I as createEntryDataTransferInfo,
+  z as createEntryInfo,
+  u as createEntryInfoBlock,
+  q as createEntryLoadState,
+  N as createEntryStatus,
   Z as createEntryStoreState,
-  z as createFileLoadInfo,
-  C as createFilePondEntry,
-  bt as createFilePondEntryList,
-  w as createFileRenameInput,
-  $ as createFileStoreInfo
+  Q as createFileLoadInfo,
+  x as createFilePondEntry,
+  Ot as createFilePondEntryList,
+  K as createFileRenameInput,
+  W as createFileStoreInfo
 };