@humandialog/forms.svelte 0.4.44 → 0.5.1

package/components/document/rich.edit.svelte

@@ -1,9 +1,9 @@
 <script>import { Selection_helper } from "./internal/Selection_helper";
 import { getContext, onDestroy, onMount } from "svelte";
 import { Selection_range, Selection_edge } from "./internal/Selection_range";
-import { data_tick_store, context_items_store, context_types_store } from "../../stores.js";
-import { inform_modification, push_changes } from "../../updates.js";
-import { parse_width_directive } from "../../utils.js";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
+import { informModification, pushChanges } from "../../updates.js";
+import { parseWidthDirective } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
 import FaFont from "svelte-icons/fa/FaFont.svelte";
 import FaHead from "svelte-icons/fa/FaHeading.svelte";
@@ -18,7 +18,26 @@ export let self = null;
 export let a = "";
 export let context = "";
 export let typename = "";
+export let compact = false;
 export let c = "";
+export let pushChangesImmediately = true;
+let onBlur = void 0;
+export function run(onStop = void 0) {
+  onBlur = onStop;
+  editable_div?.focus();
+}
+export function get_formatting_operations() {
+  let result = [];
+  commands.forEach((c2) => {
+    result.push({
+      caption: "",
+      //c.caption,
+      icon: c2.icon,
+      action: c2.on_choice
+    });
+  });
+  return result;
+}
 let item = null;
 let changed_value;
 let has_changed_value = false;
@@ -33,7 +52,14 @@ let palette_focused_selection_pos;
 let palette_focused_string_start;
 let palette_focused_string_end;
 let ctx = context ? context : getContext("ctx");
-let cs = parse_width_directive(c);
+let cs = parseWidthDirective(c);
+let appearance_class;
+if (compact)
+  appearance_class = "";
+else
+  appearance_class = `bg-stone-50 border border-stone-300 rounded-md 
+                            dark:bg-stone-700 dark:border-stone-600 
+                            px-2.5`;
 let last_tick = -1;
 $: {
   if (last_tick < $data_tick_store)
@@ -45,14 +71,14 @@ function setup_source() {
     if (self)
       item = self;
     else
-      item = $context_items_store[ctx];
+      item = $contextItemsStore[ctx];
     if (!typename)
-      typename = $context_types_store[ctx];
+      typename = $contextTypesStore[ctx];
     if (item != null)
       value = item[a];
   }
   if (!value)
-    value = "<div>\u200B</div>";
+    value = "<p>\u200B</p>";
   has_changed_value = false;
 }
 onMount(() => {
@@ -139,9 +165,29 @@ const on_keydown = (event) => {
       break;
     case "Backspace":
       if (is_range_selected()) {
-        event.cancelBubble = true;
-        event.preventDefault();
-        console.log("Unsupported");
+        if (is_multi_range_selection()) {
+          event.cancelBubble = true;
+          event.preventDefault();
+          console.log("Unsupported");
+        } else {
+          event.cancelBubble = true;
+          event.preventDefault();
+          if (is_selection_within_single_paragraph()) {
+            if (is_whole_parapraph_selected()) {
+              if (is_focused_paragraph_last_in_document()) {
+                make_focused_paragraph_empty(true);
+              } else {
+                let next_paragraph;
+                next_paragraph = remove_focused_paragraph(true);
+                set_caret_at_begin_of_paragraph(next_paragraph);
+              }
+            } else {
+              cut_selected_text_in_focused_paragraph();
+            }
+          } else {
+            cut_selected_paragraphs();
+          }
+        }
       } else {
         let hide_commands_palette = false;
         if (is_command_palette_visible)
@@ -154,9 +200,17 @@ const on_keydown = (event) => {
               let prev_paragraph;
               prev_paragraph = remove_focused_paragraph(false);
               set_caret_at_end_of_paragraph(prev_paragraph);
-            }
+            } else
+              ;
           } else
             make_focused_paragraph_empty(true);
+        } else if (is_caret_at_beginning_of_paragraph()) {
+          event.cancelBubble = true;
+          event.preventDefault();
+          if (!is_focused_paragraph_first_in_document()) {
+            merge_focused_paragraph_with_previous();
+          } else
+            ;
         }
         if (hide_commands_palette)
           hide_command_palette();
@@ -164,9 +218,29 @@ const on_keydown = (event) => {
       break;
     case "Delete":
       if (is_range_selected()) {
-        event.cancelBubble = true;
-        event.preventDefault();
-        console.log("Unsupported");
+        if (is_multi_range_selection()) {
+          event.cancelBubble = true;
+          event.preventDefault();
+          console.log("Unsupported");
+        } else {
+          event.cancelBubble = true;
+          event.preventDefault();
+          if (is_selection_within_single_paragraph()) {
+            if (is_whole_parapraph_selected()) {
+              if (is_focused_paragraph_last_in_document()) {
+                make_focused_paragraph_empty(true);
+              } else {
+                let next_paragraph;
+                next_paragraph = remove_focused_paragraph(true);
+                set_caret_at_begin_of_paragraph(next_paragraph);
+              }
+            } else {
+              cut_selected_text_in_focused_paragraph();
+            }
+          } else {
+            cut_selected_paragraphs();
+          }
+        }
       } else if (is_last_character_after_caret()) {
         event.cancelBubble = true;
         event.preventDefault();
@@ -178,7 +252,15 @@ const on_keydown = (event) => {
           let next_paragraph;
           next_paragraph = remove_focused_paragraph(true);
           set_caret_at_begin_of_paragraph(next_paragraph);
-        }
+        } else
+          ;
+      } else if (is_caret_at_ending_of_paragraph()) {
+        event.cancelBubble = true;
+        event.preventDefault();
+        if (!is_focused_paragraph_last_in_document()) {
+          merge_focused_paragraph_with_next();
+        } else
+          ;
       }
       break;
     case "Esc":
@@ -277,6 +359,180 @@ function is_last_character_after_caret() {
   }
   return false;
 }
+function is_caret_at_beginning_of_paragraph() {
+  let sel;
+  sel = window.getSelection();
+  if (sel.focusNode.textContent && sel.focusNode.nodeType !== sel.focusNode.COMMENT_NODE) {
+    if (sel.focusOffset == 0)
+      return true;
+  }
+  return false;
+}
+function is_caret_at_ending_of_paragraph() {
+  let sel;
+  sel = window.getSelection();
+  if (sel.focusNode.textContent && sel.focusNode.nodeType !== sel.focusNode.COMMENT_NODE) {
+    if (sel.focusOffset == sel.focusNode.textContent.length)
+      return true;
+  }
+  return false;
+}
+function merge_focused_paragraph_with_previous() {
+  let sel;
+  sel = window.getSelection();
+  let merged_text = sel.focusNode.textContent;
+  let prev_paragraph = remove_focused_paragraph(false);
+  let text_node = prev_paragraph.childNodes[0];
+  let merging_text = text_node.textContent;
+  text_node.textContent = merging_text + merged_text;
+  let pos = merging_text.length + 0;
+  let range = new Range();
+  range.collapse(true);
+  range.setStart(text_node, pos);
+  range.setEnd(text_node, pos);
+  set_selection(range);
+}
+function merge_focused_paragraph_with_next() {
+  let sel;
+  sel = window.getSelection();
+  let focus_node = sel.focusNode;
+  let merging_text = focus_node.textContent;
+  let focused_paragraph = focus_node.parentNode;
+  let next_paragraph = focused_paragraph.nextSibling;
+  while (next_paragraph.nodeType != Node.ELEMENT_NODE)
+    next_paragraph = next_paragraph.nextSibling;
+  let text_node = next_paragraph.childNodes[0];
+  let merged_text = text_node.textContent;
+  let root = focused_paragraph.parentNode;
+  root.removeChild(next_paragraph);
+  focus_node.textContent = merging_text + merged_text;
+  let pos = merging_text.length;
+  let range = new Range();
+  range.collapse(true);
+  range.setStart(focus_node, pos);
+  range.setEnd(focus_node, pos);
+  set_selection(range);
+}
+function cut_selected_text_in_focused_paragraph() {
+  let sel;
+  sel = window.getSelection();
+  const focus_node = sel.focusNode;
+  const whole_text = focus_node.textContent;
+  const left_idx = Math.min(sel.focusOffset, sel.anchorOffset);
+  const right_idx = Math.max(sel.focusOffset, sel.anchorOffset);
+  let left_part = whole_text.substring(0, left_idx);
+  let right_part = whole_text.substring(right_idx);
+  focus_node.textContent = left_part + right_part;
+  let pos = left_part.length;
+  let range = new Range();
+  range.collapse(true);
+  range.setStart(focus_node, pos);
+  range.setEnd(focus_node, pos);
+  set_selection(range);
+}
+function cut_selected_paragraphs() {
+  let sel = window.getSelection();
+  let first_paragraph;
+  let first_offset;
+  let last_paragraph;
+  let last_offset;
+  let cmp = sel.anchorNode?.compareDocumentPosition(sel.focusNode);
+  switch (cmp) {
+    case Node.DOCUMENT_POSITION_PRECEDING:
+    case Node.DOCUMENT_POSITION_CONTAINS:
+      first_paragraph = sel.focusNode.parentNode;
+      first_offset = sel.focusOffset;
+      last_paragraph = sel.anchorNode.parentNode;
+      last_offset = sel.anchorOffset;
+      break;
+    case Node.DOCUMENT_POSITION_FOLLOWING:
+    case Node.DOCUMENT_POSITION_CONTAINED_BY:
+      first_paragraph = sel.anchorNode.parentNode;
+      first_offset = sel.anchorOffset;
+      last_paragraph = sel.focusNode.parentNode;
+      last_offset = sel.focusOffset;
+      break;
+    default:
+      return;
+  }
+  let in_selection = false;
+  let paragraphs_to_remove = [];
+  let root = first_paragraph.parentNode;
+  const siblings_no = root.childNodes.length;
+  for (let i = 0; i < siblings_no; i++) {
+    let n = root.childNodes[i];
+    if (in_selection) {
+      if (n == last_paragraph) {
+        let text_node = n.childNodes[0];
+        let text_in_node = text_node.textContent;
+        text_in_node = text_in_node.substring(last_offset);
+        if (text_in_node) {
+          text_node.textContent = text_in_node;
+        } else {
+          text_node.textContent = "\u200B";
+        }
+        in_selection = false;
+        break;
+      } else {
+        paragraphs_to_remove.push(n);
+      }
+    } else if (n == first_paragraph) {
+      let text_node = n.childNodes[0];
+      let text_in_node = text_node.textContent;
+      text_in_node = text_in_node.substring(0, first_offset);
+      if (text_in_node) {
+        text_node.textContent = text_in_node;
+      } else {
+        if (n == last_paragraph)
+          text_node.textContent = "\u200B";
+        else {
+          paragraphs_to_remove.push(n);
+          first_paragraph = null;
+        }
+      }
+      in_selection = true;
+    }
+  }
+  if (first_paragraph) {
+    let last_node = last_paragraph.childNodes[0];
+    let merged_text = last_node.textContent;
+    let text_node = first_paragraph.childNodes[0];
+    let merging_text = text_node.textContent;
+    text_node.textContent = merging_text + merged_text;
+    paragraphs_to_remove.push(last_paragraph);
+    let pos = merging_text.length;
+    let range = new Range();
+    range.collapse(true);
+    range.setStart(text_node, pos);
+    range.setEnd(text_node, pos);
+    set_selection(range);
+  } else {
+    let text_node = last_paragraph.childNodes[0];
+    let range = new Range();
+    range.collapse(true);
+    range.setStart(text_node, 0);
+    range.setEnd(text_node, 0);
+    set_selection(range);
+  }
+  paragraphs_to_remove.forEach((c2) => {
+    root.removeChild(c2);
+  });
+}
+function is_selection_within_single_paragraph() {
+  let sel;
+  sel = window.getSelection();
+  return sel.focusNode == sel.anchorNode;
+}
+function is_whole_parapraph_selected() {
+  let sel = window.getSelection();
+  const selected_chanacters_no = Math.abs(sel.focusOffset - sel.anchorOffset);
+  const node_characters_no = sel.focusNode?.textContent?.length;
+  return selected_chanacters_no == node_characters_no;
+}
+function is_multi_range_selection() {
+  let sel = window.getSelection();
+  return sel.rangeCount > 1;
+}
 function is_range_selected() {
   let sel;
   sel = window.getSelection();
@@ -334,10 +590,15 @@ function remove_focused_paragraph(return_next_sibling = false) {
   let text_node = window.getSelection().focusNode;
   let focused_div = text_node.parentNode;
   let result;
-  if (!return_next_sibling)
+  if (!return_next_sibling) {
     result = focused_div.previousSibling;
-  else
+    while (result && result.nodeType != Node.ELEMENT_NODE)
+      result = result.previousSibling;
+  } else {
     result = focused_div.nextSibling;
+    while (result && result.nodeType != Node.ELEMENT_NODE)
+      result = result.nextSibling;
+  }
   let root = focused_div.parentNode;
   root.removeChild(focused_div);
   return result;
@@ -495,7 +756,7 @@ function do_format(tag, css_class) {
 function insert_new_line() {
   const elem = editable_div;
   const editableElem = editable_div;
-  const tag = "div";
+  const tag = "p";
   let inTheMiddle;
   if (editableElem) {
     let active_range = Selection_helper.get_selection(editable_div);
@@ -593,6 +854,12 @@ function show_command_palette() {
   else if (top_space >= preferred_palette_height) {
     y = rect.y;
     show_above = true;
+  } else if (rect.x > preferred_palette_width) {
+    x = rect.x - preferred_palette_width - 5;
+    y = rect.y - (preferred_palette_height - bottom_space);
+  } else if (rect.x + preferred_palette_width < client_rect.width) {
+    x = rect.x + 5;
+    y = rect.y - (preferred_palette_height - bottom_space);
   } else
     show_fullscreen = true;
   if (show_fullscreen)
@@ -619,12 +886,17 @@ function on_selection_changed() {
 }
 function on_blur() {
   let active_range = Selection_helper.get_selection(editable_div);
+  if (onBlur) {
+    onBlur();
+    onBlur = void 0;
+  }
   if (item && a && has_changed_value) {
     item[a] = changed_value;
     has_changed_value = false;
     if (typename) {
-      inform_modification(item, a, typename);
-      push_changes();
+      informModification(item, a, typename);
+      if (pushChangesImmediately)
+        pushChanges();
     }
     last_tick = $data_tick_store + 1;
     $data_tick_store = last_tick;
@@ -632,31 +904,30 @@ function on_blur() {
 }
 let commands = [
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaFont, on_choice: () => {
-    do_format("div", "");
+    do_format("p", "");
   } },
-  { caption: "Heading 1", description: "Big section heading", tags: "h1", icon: FaHead, icon_size: 6, on_choice: () => {
+  //   {   caption: 'Heading 1',    description: 'Big section heading',            tags: 'h1',      icon: FaHead,    icon_size: 6,      on_choice: () => { do_format('h2', '') } } ,
+  //   {   caption: 'Heading 2',    description: 'Medium section heading',         tags: 'h2',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
+  //   {   caption: 'Heading 3',    description: 'Small section heading',          tags: 'h3',      icon: FaHead,    icon_size: 4,      on_choice: () => { do_format('h4', '') } } ,
+  { caption: "Heading", description: "Description heading", tags: "h2", icon: FaHead, icon_size: 6, on_choice: () => {
     do_format("h2", "");
   } },
-  { caption: "Heading 2", description: "Medium section heading", tags: "h2", icon: FaHead, icon_size: 5, on_choice: () => {
-    do_format("h3", "");
-  } },
-  { caption: "Heading 3", description: "Small section heading", tags: "h3", icon: FaHead, icon_size: 4, on_choice: () => {
-    do_format("h4", "");
-  } },
+  //   {   caption: 'Heading 2',      description: 'Medium description heading',     tags: 'h3',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
+  //   {   caption: 'Heading 3',      description: 'Small description heading',      tags: 'h4',      icon: FaHead,    icon_size: 4,      on_choice: () => { do_format('h4', '') } } ,
   { caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: () => {
-    do_format("div", "ml-6 text-sm font-mono break-normal text-pink-700 dark:text-pink-600");
+    do_format("p", "ml-6 text-sm font-mono break-normal text-pink-700 dark:text-pink-600");
   } },
   { caption: "Comment", description: "With this you can comment the above paragraph", icon: FaComments, on_choice: () => {
-    do_format("div", "ml-6 text-sm italic text-lime-700 dark:text-lime-600");
+    do_format("p", "ml-6 text-sm italic text-lime-700 dark:text-lime-600");
   } },
   { caption: "Quote", description: "To quote someone", icon: FaQuote, on_choice: () => {
     do_format("blockquote", "");
   } },
   { caption: "Warning", description: "An important warning to above paragraph", icon: FaWarn, on_choice: () => {
-    do_format("div", "ml-6 px-3 py-1 border-l-2 rounded-md border-orange-500 bg-orange-100 dark:bg-orange-900");
+    do_format("p", "ml-6 px-3 py-1 border-l-2 rounded-md border-orange-500 bg-orange-100 dark:bg-orange-900");
   } },
   { caption: "Info", description: "An important info about above paragraph", icon: FaInfo, on_choice: () => {
-    do_format("div", "ml-6 px-3 py-1 border-l-2 rounded-md border-blue-500 bg-blue-100 dark:bg-blue-900");
+    do_format("p", "ml-6 px-3 py-1 border-l-2 rounded-md border-blue-500 bg-blue-100 dark:bg-blue-900");
   } }
 ];
 </script>
@@ -666,10 +937,11 @@ let commands = [
         on:keyup={on_keyup}
         on:keydown={on_keydown}
         on:mouseup={on_mouseup}
-        class="{cs}     bg-gray-50 border border-gray-300 text-sm rounded-md 
-                         px-2.5 dark:bg-gray-700 dark:border-gray-600 
-                        prose prose-sm sm:prose-base dark:prose-invert {additional_class} overflow-y-auto"
+        class="{cs}     {appearance_class} 
+                        prose prose-base sm:prose-base dark:prose-invert {additional_class} overflow-y-auto"
         on:blur={on_blur}
+        on:focus
+        on:blur
         >
    {@html value}
 </div>

package/components/document/rich.edit.svelte.d.ts

@@ -8,9 +8,16 @@ declare const __propDef: {
         a?: string | undefined;
         context?: string | undefined;
         typename?: string | undefined;
+        compact?: boolean | undefined;
         c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        run?: ((onStop?: undefined) => void) | undefined;
+        get_formatting_operations?: (() => any[]) | undefined;
     };
     events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -19,5 +26,7 @@ export type RichProps = typeof __propDef.props;
 export type RichEvents = typeof __propDef.events;
 export type RichSlots = typeof __propDef.slots;
 export default class Rich extends SvelteComponentTyped<RichProps, RichEvents, RichSlots> {
+    get run(): (onStop?: undefined) => void;
+    get get_formatting_operations(): () => any[];
 }
 export {};

package/components/edit.field.svelte

@@ -1,16 +1,17 @@
 <script>import { afterUpdate, getContext } from "svelte";
-import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
-import { inform_modification, push_changes } from "../updates.js";
-import { parse_width_directive, should_be_comapact } from "../utils.js";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../stores.js";
+import { informModification, pushChanges } from "../updates.js";
+import { parseWidthDirective, shouldBeComapact } from "../utils.js";
 export let value = "";
 export let placeholder = "";
-export let on_enter = null;
+export let onEnter = null;
 export let self = null;
 export let a = "";
 export let context = "";
 export let typename = "";
 export let inserter = false;
 export let c = "";
+export let pushChangesImmediately = true;
 let is_table_component = getContext("rIs-table-component");
 let item = null;
 let input_box_is_active = false;
@@ -27,7 +28,7 @@ afterUpdate(() => {
   }
 });
 let ctx = context ? context : getContext("ctx");
-let cs = parse_width_directive(c);
+let cs = parseWidthDirective(c);
 let last_tick = -1;
 $:
   setup($data_tick_store);
@@ -35,9 +36,9 @@ function setup(data_tick_store2) {
   if (data_tick_store2 <= last_tick)
     return;
   last_tick = data_tick_store2;
-  item = self ?? $context_items_store[ctx];
+  item = self ?? $contextItemsStore[ctx];
   if (!typename)
-    typename = $context_types_store[ctx];
+    typename = $contextTypesStore[ctx];
   if (a) {
     if (item != null)
       value = item[a];
@@ -46,7 +47,7 @@ function setup(data_tick_store2) {
   }
 }
 function on_activate_input_box(event) {
-  if (!input_box_is_active && (is_table_component && $context_items_store["sel"] == self || !is_table_component)) {
+  if (!input_box_is_active && (is_table_component && $contextItemsStore["sel"] == self || !is_table_component)) {
     input_box_is_active = true;
     focus_input_box = true;
     org_value = value;
@@ -62,8 +63,8 @@ async function on_key_down(event) {
     }
     try {
       let success = false;
-      if (on_enter)
-        success = on_enter(value);
+      if (onEnter)
+        success = onEnter(value);
       else {
         success = value_changed();
         accept_change();
@@ -100,13 +101,14 @@ function value_changed() {
   if (item && a) {
     item[a] = value;
     if (typename)
-      inform_modification(item, a, typename);
+      informModification(item, a, typename);
   }
   return true;
 }
 function accept_change() {
   $data_tick_store = $data_tick_store + 1;
-  push_changes();
+  if (pushChangesImmediately)
+    pushChanges();
 }
 </script>
 
@@ -115,15 +117,15 @@ function accept_change() {
     <slot></slot>
     
     {#if input_box_is_active}
-        <input bind:this={inputbox} bind:value={value} on:keydown={on_key_down} on:blur={on_blur} class="w-full border-0 bg-transparent text-gray-900 dark:text-gray-300"/>
+        <input bind:this={inputbox} bind:value={value} on:keydown={on_key_down} on:blur={on_blur} class="w-full border-0 bg-transparent text-stone-900 dark:text-stone-300"/>
     {:else if value}
         {#if is_table_component}
             <span>{value}</span>
         {:else}
-            <span class="w-full text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 cursor-text">{value}</span>
+            <span class="w-full text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-300 cursor-text">{value}</span>
         {/if}
     {:else if !is_table_component}
-        <span class="w-full text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400 cursor-text">{placeholder}</span>
+        <span class="w-full text-stone-500 hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-400 cursor-text">{placeholder}</span>
     {/if}
 </div>
 

package/components/edit.field.svelte.d.ts

@@ -4,13 +4,14 @@ declare const __propDef: {
         [x: string]: any;
         value?: string | undefined;
         placeholder?: string | undefined;
-        on_enter?: null | undefined;
+        onEnter?: null | undefined;
         self?: null | undefined;
         a?: string | undefined;
         context?: string | undefined;
         typename?: string | undefined;
         inserter?: boolean | undefined;
         c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/file.loader.svelte

@@ -47,28 +47,28 @@ function clear() {
   file = void 0;
   data = null;
 }
-export function get_name() {
+export function getName() {
   if (file)
     return file.name;
   else
     return "";
 }
-export function get_size() {
+export function getSize() {
   if (file)
     return file.size;
   else
     return -1;
 }
-export function get_type() {
+export function getType() {
   if (file)
     return file.type;
   else
     return "";
 }
-export function get_data() {
+export function getData() {
   return data;
 }
-export function is_selected() {
+export function isSelected() {
   if (state == Success && data != null)
     return true;
   else
@@ -86,5 +86,5 @@ export function is_selected() {
 {/if}
 
 {#if state!=Empty}
-    <span class="h-4 w-4 text-slate-700"><FaTimes on:click={clear}/></span>
+    <span class="h-4 w-4 text-stone-700"><FaTimes on:click={clear}/></span>
 {/if}

package/components/file.loader.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        get_name?: (() => string) | undefined;
-        get_size?: (() => number) | undefined;
-        get_type?: (() => string) | undefined;
-        get_data?: (() => ArrayBuffer) | undefined;
-        is_selected?: (() => boolean) | undefined;
+        getName?: (() => string) | undefined;
+        getSize?: (() => number) | undefined;
+        getType?: (() => string) | undefined;
+        getData?: (() => ArrayBuffer) | undefined;
+        isSelected?: (() => boolean) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,10 +16,10 @@ export type FileProps = typeof __propDef.props;
 export type FileEvents = typeof __propDef.events;
 export type FileSlots = typeof __propDef.slots;
 export default class File extends SvelteComponentTyped<FileProps, FileEvents, FileSlots> {
-    get get_name(): () => string;
-    get get_size(): () => number;
-    get get_type(): () => string;
-    get get_data(): () => ArrayBuffer;
-    get is_selected(): () => boolean;
+    get getName(): () => string;
+    get getSize(): () => number;
+    get getType(): () => string;
+    get getData(): () => ArrayBuffer;
+    get isSelected(): () => boolean;
 }
 export {};