@trebco/treb 28.11.1 → 28.15.0

package/treb-embed/markup/layout.html

@@ -38,7 +38,7 @@
         <div data-bind='message' class='treb-embed-dialog-message'></div>
         <div data-bind='about' class='treb-embed-dialog-body'></div>
       </div>
-      <button type='button' title='Close dialog' data-bind='close' class='treb-close-box'>
+      <button type='button' data-title='close_dialog' data-bind='close' class='treb-close-box'>
         <svg viewBox='0 0 16 16'>
           <path d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/>
           <path d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/>
@@ -62,6 +62,9 @@
 
         <div class="treb-formula-bar notranslate" hidden>
           <div class="treb-address-label"><div></div></div>
+          <button class="treb-insert-function-button"
+                  data-title="insert_function" 
+                  data-conditional="insert-function">𝑓<small>(x)</small></button>
           <div class="treb-editor-container">
             <div contenteditable="true"></div>
           </div>
@@ -95,7 +98,7 @@
           -->
   
           <!-- converted to button, more appropriate -->
-          <button class="treb-delete-tab" title="Delete current sheet" data-command="delete-tab" data-conditional="delete-tab">
+          <button class="treb-delete-tab" data-title="delete_sheet" data-command="delete-tab" data-conditional="delete-tab">
             <svg tabindex="-1" viewbox='0 0 16 16'><path d='M4,4 L12,12 M12,4 L4,12'/></svg>
           </button>
   
@@ -105,7 +108,8 @@
           </div>
 
           <!-- converted to button, more appropriate -->
-          <button class="treb-add-tab" data-command="add-tab" data-conditional="add-tab" title="Add sheet">+</button>
+          <button class="treb-add-tab" data-command="add-tab" data-conditional="add-tab" 
+                  data-title="add_sheet">+</button>
   
           <!-- 
             we removed the junk node with "flex grow" to split the layout, in
@@ -125,7 +129,8 @@
         
         <div class="treb-revert-indicator" 
               data-command="revert-indicator"
-              title="This document has been modified from the original version."></div>
+              data-title="document_modified"
+              ></div>
 
       </div> <!-- /treb-view -->
     </template>
@@ -133,13 +138,13 @@
   </div>
 
   <div class="treb-layout-sidebar treb-animate">
-    <button data-command="recalculate" title="Recalculate"></button>
-    <button data-command="toggle-toolbar" data-conditional="toolbar" title="Toggle toolbar"></button>
-    <button data-command="export-xlsx" data-conditional="export" title="Export as XLSX"></button>
-    <button data-command="revert" data-conditional="revert" title="Revert to original version"></button>
-    <button data-command="about" title="What's this?"></button>
+    <button data-command="recalculate" data-title="recalculate"></button>
+    <button data-command="toggle-toolbar" data-conditional="toolbar" data-title="toggle_toolbar"></button>
+    <button data-command="export-xlsx" data-conditional="export" data-title="export"></button>
+    <button data-command="revert" data-conditional="revert" data-title="revert"></button>
+    <button data-command="about" data-title="about"></button>
   </div>
 
-  <button class="treb-toggle-sidebar-button" title="Toggle sidebar"></button>
+  <button class="treb-toggle-sidebar-button" data-title="toggle_sidebar"></button>
 
 </div>

package/treb-embed/markup/toolbar.html

@@ -49,12 +49,12 @@
 
   <div class="group">
     <button data-command="wrap-text" title="Wrap text"></button>
-    <button data-command="merge-cells" data-id="merge" data-title="Merge cells" data-active-title="Unmerge cells"></button>
-    <button data-command="lock-cells" data-title="Lock cells" data-active-title="Unlock cells"></button>
-    <button data-command="freeze-panes" data-title="Freeze panes" data-active-title="Unfreeze panes" freeze-button></button>
-    <button data-command="insert-table" data-icon="table" data-title="Insert table" data-active-title="Remove table" table-button></button>
+    <button data-command="merge-cells" data-id="merge" data-inactive-title="Merge cells" data-active-title="Unmerge cells"></button>
+    <button data-command="lock-cells" data-inactive-title="Lock cells" data-active-title="Unlock cells"></button>
+    <button data-command="freeze-panes" data-inactive-title="Freeze panes" data-active-title="Unfreeze panes" freeze-button></button>
+    <button data-command="insert-table" data-icon="table" data-inactive-title="Insert table" data-active-title="Remove table" table-button></button>
     <div class="treb-menu">
-      <button data-icon="comment" data-title="Comment" data-active-title="Update comment"></button>
+      <button data-icon="comment" data-inactive-title="Comment" data-active-title="Update comment"></button>
       <div class="treb-comment-box">
         <textarea></textarea>
         <div>

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -13,6 +13,23 @@ import type { ToolbarMessage } from '../toolbar-message';
 
 import { DOMContext } from 'treb-base-types';
 
+/** with a view towards i18n */
+const default_titles: Record<string, string> = {
+
+  close_dialog: 'Close dialog',
+  insert_function: 'Insert function...',
+  delete_sheet: 'Delete current sheet',
+  add_sheet: 'Add sheet',
+  document_modified: 'This document has been modified from the original version.',
+  recalculate: 'Recalculate',
+  toggle_toolbar: 'Toggle toolbar',
+  export: 'Export as XLSX',
+  revert: 'Revert to original version',
+  about: `What's this?`,
+  toggle_sidebar: 'Toggle sidebar',
+
+};
+
 /** @internal */
 export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
 
@@ -391,6 +408,7 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
       'revert': !!sheet.options.revert_button,
       'toolbar': !!sheet.options.toolbar,
       'export': !!sheet.options.export,
+      'insert-function': !!sheet.options.insert_function_button,
 
       // the following won't work as expected in split, because this
       // code won't be run when the new view is created -- do something
@@ -545,6 +563,24 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
 
     }
 
+    // --- titles --------------------------------------------------------------
+
+    const elements = Array.from(this.layout_element.querySelectorAll('[data-title]'));
+    for (const element of elements) {
+      if (element instanceof HTMLElement) {
+
+        // temp workaround
+        if (element.dataset.activeTitle) {
+          continue;
+        }
+
+        if (element.dataset.title && default_titles[element.dataset.title]) {
+          element.title = default_titles[element.dataset.title];
+        }
+
+      }
+    }
+
     // --- animated ------------------------------------------------------------
 
     // requestAnimationFrame(() => {
@@ -580,8 +616,8 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
       if (value) {
         // value.classList.remove('treb-active');
         value.removeAttribute('active');
-        if (value.dataset.title) {
-          value.title = value.dataset.title;
+        if (value.dataset.inactiveTitle) {
+          value.title = value.dataset.inactiveTitle;
         } 
       }
     }

package/treb-embed/src/embedded-spreadsheet.ts

@@ -42,6 +42,8 @@ import type {
   CondifionalFormatExpressionOptions,
   ConditionalFormatCellMatchOptions,
   ConditionalFormatCellMatch,
+  MacroFunction,
+  SerializedNamedExpression,
 } from 'treb-grid';
 
 import {
@@ -413,7 +415,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   }
 
   /** for destruction */
-  protected view?: HTMLElement;
+  protected view_node?: HTMLElement;
 
   /** for destruction */
   protected key_listener?: (event: KeyboardEvent) => void;
@@ -721,8 +723,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     const grid_options: GridOptions = {
       // expand: false,
-
-      insert_function_button: false, // do we have this?
+      // insert_function_button: false, // do we have this?
       in_cell_editor: true, // if this is always true, why is it an option?
       repaint_on_cell_change: false,
       scrollbars: this.options.scrollbars,
@@ -844,7 +845,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       // elements. but we don't add a default; rather we use a template
 
       const template = container.querySelector('.treb-view-template') as HTMLTemplateElement;
-      this.view = template.content.firstElementChild?.cloneNode(true) as HTMLElement;
+      this.view_node = template.content.firstElementChild?.cloneNode(true) as HTMLElement;
 
       // this is a little weird but we're inserting at the front. the 
       // reason for this is that we only want to use one resize handle,
@@ -852,13 +853,13 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
       // we could work around this, really we're just being lazy.
 
-      container.prepend(this.view);
+      container.prepend(this.view_node);
 
       
       // this.node = container;
       // this.node = this.view;
 
-      this.view.addEventListener('focusin', () => {
+      this.view_node.addEventListener('focusin', () => {
         if (this.focus_target !== this) {
           this.Publish({ type: 'focus-view' });
           this.focus_target = this;
@@ -878,14 +879,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
       // const view = container.querySelector('.treb-view') as HTMLElement;
 
-      this.grid.Initialize(this.view, toll_initial_render);
+      this.grid.Initialize(this.view_node, toll_initial_render);
 
       // dnd
 
       if (this.options.dnd) {
-        this.view.addEventListener('dragenter', (event) => this.HandleDrag(event));
-        this.view.addEventListener('dragover', (event) => this.HandleDrag(event));
-        this.view.addEventListener('drop', (event) => this.HandleDrop(event));
+        this.view_node.addEventListener('dragenter', (event) => this.HandleDrag(event));
+        this.view_node.addEventListener('dragover', (event) => this.HandleDrag(event));
+        this.view_node.addEventListener('drop', (event) => this.HandleDrop(event));
       }
 
       // set up grid events
@@ -1244,19 +1245,19 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       sheet.grid.grid_events.CancelAll();
       sheet.events.CancelAll();
       
-      if (sheet.view?.parentElement) {
+      if (sheet.view_node?.parentElement) {
 
         // remove listener
         if (sheet.key_listener) {
-          sheet.view.parentElement.removeEventListener('keydown', sheet.key_listener);
+          sheet.view_node.parentElement.removeEventListener('keydown', sheet.key_listener);
         }
 
         // remove node
-        sheet.view.parentElement.removeChild(sheet.view);
+        sheet.view_node.parentElement.removeChild(sheet.view_node);
       }            
 
       // in case other view was focused
-      this.view?.focus();
+      this.view_node?.focus();
 
       // usually this results in us getting larger, we may need to update
       this.Resize();
@@ -1285,7 +1286,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     const view = this.CreateView();
     view.grid.EnsureActiveSheet(true);
 
-    view.view?.addEventListener('focusin', () => {
+    view.view_node?.addEventListener('focusin', () => {
       if (this.focus_target !== view) {
         this.Publish({ type: 'focus-view' });
         this.focus_target = view;
@@ -2076,6 +2077,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       for (const format of sheet.conditional_formats) {
         format.internal = undefined;
       }
+      for (const annotation of sheet.annotations) {
+        if (annotation.view && annotation.data.type === 'textbox') {
+          const view: AnnotationViewData = annotation.view[this.grid.view_index] || {};
+          if (view.update_callback) {
+            view.update_callback();
+          }
+        }
+      }
     }
 
     this.calculator.UpdateConditionals();
@@ -2244,12 +2253,16 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     this.parser.flags.r1c1 = r1c1;
 
     if (argument_separator === ',') {
-      this.parser.argument_separator = ArgumentSeparatorType.Comma;
-      this.parser.decimal_mark = DecimalMarkType.Period;
+      this.parser.SetLocaleSettings(DecimalMarkType.Period);
+
+      // this.parser.argument_separator = ArgumentSeparatorType.Comma;
+      // this.parser.decimal_mark = DecimalMarkType.Period;
     }
     else {
-      this.parser.argument_separator = ArgumentSeparatorType.Semicolon;
-      this.parser.decimal_mark = DecimalMarkType.Comma;
+      this.parser.SetLocaleSettings(DecimalMarkType.Comma);
+
+      // this.parser.argument_separator = ArgumentSeparatorType.Semicolon;
+      // this.parser.decimal_mark = DecimalMarkType.Comma;
     }
 
     const result = this.parser.Parse(formula);
@@ -2354,12 +2367,16 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       */
 
       if (argument_separator === ',') {
-        this.parser.argument_separator = ArgumentSeparatorType.Comma;
-        this.parser.decimal_mark = DecimalMarkType.Period;
+        this.parser.SetLocaleSettings(DecimalMarkType.Period);
+
+        // this.parser.argument_separator = ArgumentSeparatorType.Comma;
+        // this.parser.decimal_mark = DecimalMarkType.Period;
       }
       else {
-        this.parser.argument_separator = ArgumentSeparatorType.Semicolon;
-        this.parser.decimal_mark = DecimalMarkType.Comma;
+        this.parser.SetLocaleSettings(DecimalMarkType.Comma);
+
+        // this.parser.argument_separator = ArgumentSeparatorType.Semicolon;
+        // this.parser.decimal_mark = DecimalMarkType.Comma;
       }
 
       // const r1c1_state = this.parser.flags.r1c1;
@@ -2749,13 +2766,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
         // FIXME: type
 
-        const serialized: SerializedModel = this.grid.Serialize({
+        const serialized: SerializedModel = this.Serialize({ // this.grid.Serialize({
           rendered_values: true,
           expand_arrays: true,
           export_colors: true,
           decorated_cells: true,
           tables: true,
           share_resources: false,
+          export_functions: true,
         });
 
         // why do _we_ put this in, instead of the grid method? 
@@ -3523,6 +3541,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   /**
    * Create a macro function.
    * 
+   * FIXME: this needs a control for argument separator, like other
+   * functions that use formulas (@see SetRange)
+   * 
    * @public
    */
   public DefineFunction(name: string, argument_names: string | string[] = '', function_def = '0'): void {
@@ -3592,7 +3613,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       ...options,
     };
 
-    const grid_data = this.grid.Serialize(options);
+    // const grid_data = this.grid.Serialize(options);
+    const grid_data = this.Serialize(options);
 
     // NOTE: these are not really env vars. we replace them at build time
     // via a webpack plugin. using the env syntax lets them look "real" at
@@ -4405,6 +4427,121 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   // --- internal (protected) methods ------------------------------------------
 
+  // --- moved from grid/grid base ---------------------------------------------
+
+  
+  /**
+   * serialize data model. moved from grid/grid base. this is moved so we 
+   * have access to the calculator, which we want so we can do function 
+   * translation on some new functions that don't necessarily map 1:1 to 
+   * XLSX functions. we can also do cleanup on functions where we're less
+   * strict about arguments (ROUND, for example).
+   * 
+   */
+  protected Serialize(options: SerializeOptions = {}): SerializedModel {
+
+    const active_sheet = this.grid.active_sheet; // I thought this was in view? (...)
+
+    active_sheet.selection = JSON.parse(JSON.stringify(this.grid.GetSelection()));
+
+    // same for scroll offset
+
+    const scroll_offset = this.grid.ScrollOffset();
+    if (scroll_offset) {
+      active_sheet.scroll_offset = scroll_offset; // this.grid.layout.scroll_offset;
+    }    
+
+    // NOTE: annotations moved to sheets, they will be serialized in the sheets
+
+    const sheet_data = this.model.sheets.list.map((sheet) => sheet.toJSON(options));
+
+    // OK, not serializing tables in cells anymore. old comment about this:
+    // 
+    // at the moment, tables are being serialized in cells. if we put them
+    // in here, then we have two records of the same data. that would be bad.
+    // I think this is probably the correct place, but if we put them here
+    // we need to stop serializing in cells. and I'm not sure that there are 
+    // not some side-effects to that. hopefully not, but (...)
+    // 
+
+    let tables: Table[] | undefined;
+    if (this.model.tables.size > 0) {
+      tables = Array.from(this.model.tables.values());
+    }
+
+    // NOTE: moving into a structured object (the sheet data is also structured,
+    // of course) but we are moving things out of sheet (just  named ranges atm))
+
+    let macro_functions: MacroFunction[] | undefined;
+
+    if (this.model.macro_functions.size) {
+      macro_functions = [];
+      for (const macro of this.model.macro_functions.values()) {
+        macro_functions.push({
+          ...macro,
+          expression: undefined,
+        });
+      }
+    }
+
+    // when serializing named expressions, we have to make sure
+    // that there's a sheet name in any address/range. 
+
+    const named_expressions: SerializedNamedExpression[] = [];
+    if (this.model.named_expressions) {
+
+      for (const [name, expr] of this.model.named_expressions) {
+        this.parser.Walk(expr, unit => {
+          if (unit.type === 'address' || unit.type === 'range') {
+            const test = unit.type === 'range' ? unit.start : unit;
+
+            test.absolute_column = test.absolute_row = true;
+
+            if (!test.sheet) {
+              if (test.sheet_id) {
+                const sheet = this.model.sheets.Find(test.sheet_id);
+                if (sheet) {
+                  test.sheet = sheet.name;
+                }
+              }
+              if (!test.sheet) {
+                test.sheet = active_sheet.name;
+              }
+            }
+
+            if (unit.type === 'range') {
+              unit.end.absolute_column = unit.end.absolute_row = true;
+            }
+
+            return false;
+          }
+          else if (unit.type === 'call' && options.export_functions) {
+            // ...
+          }
+          return true;
+        });
+        const rendered = this.parser.Render(expr, { missing: '' });
+        named_expressions.push({
+          name, expression: rendered
+        });
+      }
+    }
+
+    return {
+      sheet_data,
+      active_sheet: active_sheet.id,
+      named_ranges: this.model.named_ranges.Count() ?
+        this.model.named_ranges.Serialize() :
+        undefined,
+      macro_functions,
+      tables,
+      named_expressions: named_expressions.length ? named_expressions : undefined,
+    };
+
+  }
+
+  // --- /moved ----------------------------------------------------------------
+
   /**
    * 
    */
@@ -5219,6 +5356,63 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         }
 
       }
+      else if (annotation.data.type === 'textbox') {
+
+        if (annotation.data.data) {
+          const container = document.createElement('div');
+          container.classList.add('treb-annotation-textbox');
+
+          for (const paragraph of annotation.data.data.paragraphs) {
+            const p = document.createElement('p');
+            if (paragraph.style) {
+              if (paragraph.style.horizontal_align === 'right' || 
+                  paragraph.style.horizontal_align === 'center') {
+                p.style.textAlign = paragraph.style.horizontal_align;
+              }
+            }
+
+            for (const entry of paragraph.content) {
+              const span = document.createElement('span');
+              span.textContent = entry.text || '';
+              if (entry.style?.bold) {
+                span.style.fontWeight = '600';
+              }
+              if (entry.style?.italic) {
+                span.style.fontStyle = 'italic';
+              }
+              p.appendChild(span);
+            }
+            container.append(p);
+          }
+
+          view.content_node.append(container);
+
+          if (annotation.data.data.style) {
+
+            const style = annotation.data.data.style;
+            const update_textbox = () => {
+
+              if (style.fill) {
+                const color = ThemeColor2(this.grid.theme, style.fill);
+                container.style.background = color;
+              }
+
+            };
+
+            view.update_callback = () => {
+              if (!this.grid.headless) {
+                update_textbox();
+              }
+            };
+
+            update_textbox();
+
+          }
+
+        }
+
+      }
+
     }
   }
 
@@ -5531,14 +5725,18 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     // FIXME: also we should unify on types for decimal, argument separator
 
     if (data.decimal_mark === '.') {
-      parser.decimal_mark = DecimalMarkType.Period;
-      parser.argument_separator = ArgumentSeparatorType.Comma;
+      // parser.decimal_mark = DecimalMarkType.Period;
+      // parser.argument_separator = ArgumentSeparatorType.Comma;
+      parser.SetLocaleSettings(DecimalMarkType.Period);
+
       target_decimal_mark = DecimalMarkType.Comma;
       target_argument_separator = ArgumentSeparatorType.Semicolon;
     }
     else {
-      parser.decimal_mark = DecimalMarkType.Comma;
-      parser.argument_separator = ArgumentSeparatorType.Semicolon;
+      // parser.decimal_mark = DecimalMarkType.Comma;
+      // parser.argument_separator = ArgumentSeparatorType.Semicolon;
+      parser.SetLocaleSettings(DecimalMarkType.Comma);
+
       target_decimal_mark = DecimalMarkType.Period;
       target_argument_separator = ArgumentSeparatorType.Comma;
     }

package/treb-embed/src/options.ts

@@ -311,6 +311,11 @@ export interface EmbeddedSpreadsheetOptions {
    */
   recalculate_on_f9?: boolean;
 
+  /**
+   * @internal
+   */
+  insert_function_button?: boolean;
+
 }
 
 /**

package/treb-embed/style/dark-theme.scss

@@ -33,6 +33,7 @@
   --treb-autocomplete-tooltip-color: #fff;
   --treb-chart-background: #000;
   --treb-chart-grid-color: #976;
+  --treb-chart-grid-zero-color: #fdd;
   --treb-chart-text-color: #fff;
   --treb-dialog-background: #000;
   --treb-dialog-color: #fff;

package/treb-embed/style/formula-bar.scss

@@ -25,11 +25,10 @@
 
       grid-area: 1/1/2/2;
       
-      // min-height: 3em; // FIXME
-
       display: flex;
       flex-direction: row;
       text-align: left;
+      gap: .5em;
 
       &[hidden] {
         display: none;
@@ -39,7 +38,6 @@
 
       max-width: 100%;
       overflow-x: hidden;
-      /* last ditch for IE11 */
 
       /** label for selection address */
       .treb-address-label {
@@ -56,7 +54,7 @@
         justify-content: center;
         padding-left: 3px;
 
-        margin-right: 6px;
+        // margin-right: 6px;
 
         &>div {
           outline: none;
@@ -66,6 +64,20 @@
         }
       }
 
+      .treb-insert-function-button {
+        min-height: 1.5em;
+        height: 1.75em;
+        border: 1px solid var(--treb-formula-bar-border-color, var(--treb-ui-border-color, #ccc));
+        border-radius: 2px;
+        background: transparent;
+
+        &[hidden] {
+          display: none;
+        }
+
+      }
+
+      /** expand formula box -- caret/arrow */
       .expand-button {
         background: transparent;
         border: 0;
@@ -160,7 +172,7 @@
 
       }
 
-      /** f(x) button, optional */
+      /* * f(x) button, optional * /
       .formula-button {
         border: 1px solid #ccc;
         border-radius: 2px;
@@ -188,8 +200,9 @@
         }
 
       }
-    }
+      */
+
 
-  
+    }
 
 }

package/treb-embed/style/theme-defaults.scss

@@ -519,4 +519,24 @@ $text-reference-color-5: rgb(254, 47, 1);
     font-family: var(--treb-grid-font-family-osx, var(--treb-grid-font-family, inherit));
   }
 
+  /**
+   *
+   */
+  .treb-annotation-textbox {
+    background: Canvas;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    padding: .5em; // ?
+
+    p {
+      margin-block-start: 0;
+      margin-block-end: 0;
+    }
+
+  }
+
 }

package/treb-export/src/export-worker/export-worker.ts

@@ -57,6 +57,7 @@ const ImportSheet = (data: any) => {
         results.sheets.push(result);
       }
     }
+
     ctx.postMessage({ status: 'complete', results });
 
   }