@nanoporetech-digital/components 3.5.1 → 3.7.0

package/dist/types/components/table/table.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { TableTypes } from '../../interface';
+import { TableTypes } from '../../interface';
 /**
  * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
  *
@@ -24,19 +24,22 @@ export declare class Table implements ComponentInterface {
   caption: string;
   /** Show the caption on-screen */
   showCaption: boolean;
-  /** Will show a loading state when true.
-   * Will be shown automatically if `rows` is a promise waiting to resolve
-   * or when performing custom filtering or sorting  */
-  get loading(): boolean;
-  set loading(l: boolean);
-  _loading: boolean;
+  /** Will show a loading state when set to true.
+   * By default, will be shown automatically if `rows` is a promise waiting to resolve
+   * or when performing custom filtering or sorting.
+   * *Note* when set manually, will overwrite any internal loading state.
+   * Set to 'undefined' to revert to default behaviour. */
+  loading: boolean;
+  get _loading(): boolean;
+  set _loading(l: boolean);
   private debounceSetLoading;
+  internalLoading: boolean;
   /** When loading rows asynchronously, this will render this number of placeholder rows */
   placeholderSize: number;
   /** The data to place in the table */
   rows: TableTypes.NanoTable['rows'] | Promise<TableTypes.NanoTable['rows']>;
   handleRowsChange(): void;
-  /** The column config used to generate present the rows of data */
+  /** The column config used to present the rows of data */
   columns: TableTypes.NanoTable['columns'];
   handleColsChange(): Promise<void>;
   /** Used for custom thead row rendering */
@@ -58,15 +61,17 @@ export declare class Table implements ComponentInterface {
   /** Term to search for in the data */
   searchTerm: string;
   /** A custom filtering function. Should return a promise.
-   * On successful completion the column UI will be updated.
+   * If the promise resolves as `true` the column UI will be updated.
+   * If the promise resolves as falsey, the sort will be performed by the component.
    * A good use-case would be performing the filter on a server / via fetch.
    * Then on success, updating the table's data via the `rows` property */
-  customFilterFn?: (filters: TableTypes.Filter[]) => Promise<void>;
+  customFilterFn?: (filters: TableTypes.Filter[]) => Promise<true | TableTypes.Falsy>;
   /** A custom sorting function. Should return a promise.
-   * On successful completion the column UI will be updated.
+   * If the promise resolves as `true` the column UI will be updated.
+   * If the promise resolves as falsey, the sort will be performed by the component.
    * A good use-case would be performing the sort on a server / via fetch.
    * Then on success, updating the table's data via the `rows` property */
-  customSortFn?: (property: TableTypes.Prop, order: TableTypes.Order) => Promise<void>;
+  customSortFn?: (property: TableTypes.Prop, order: TableTypes.Order) => Promise<true | TableTypes.Falsy>;
   /**
    * The default sortable option for all columns.
    * `true` will enable column sorting unless you set `sortable: false` on a column
@@ -80,6 +85,15 @@ export declare class Table implements ComponentInterface {
    */
   defaultColDraggable: boolean;
   handleSearchTermChange(): void;
+  /** Use this to render the table with roughly the correct dimensions.
+   * a use-case might be; fetch a small initial dataset to minimise load-time,
+   * render the table with the correct dimensions, the table becomes interactive,
+   * load the rest of the data
+   */
+  virtualTotalItems: number;
+  virtualTotalItemsChangeHandler(): void;
+  /** Fired when the table has done it's first complete render */
+  nanoTblReady: EventEmitter;
   /** Fired whenever a block is activated by scrolling into view / becoming visible
    * This could be leveraged for infinite scrolling / to fetch more data.
    */
@@ -87,8 +101,6 @@ export declare class Table implements ComponentInterface {
     block: number;
     totalBlocks: number;
   }>;
-  /** Fired when the table has done it's first complete render */
-  nanoTblReady: EventEmitter;
   /** Fired before a column is sorted.
    * `event.preventDefault()` to stop sorting.  */
   nanoTblBeforeSort: EventEmitter<{
@@ -130,6 +142,11 @@ export declare class Table implements ComponentInterface {
   nanoTblAfterSearch: EventEmitter<{
     term: string;
   }>;
+  /** Fired before a general search.
+   * `event.preventDefault()` to stop searching.  */
+  nanoTblBeforeEdit: EventEmitter<{
+    term: string;
+  }>;
   /** Remove any column sorts currently applied
    * @returns a promise which resolves when complete */
   resetSorting(): Promise<void>;
@@ -150,6 +167,13 @@ export declare class Table implements ComponentInterface {
    * @returns a promise which resolves when complete
    */
   removeFilters(columnNames: TableTypes.Prop[]): Promise<void>;
+  /** Updates a row model at a given index
+   * @param row - the row to update.
+   * *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property
+   * - rows are augmented with certain properties to aid with efficient rendering
+   * @param rowIndex - the row index to insert this row
+   */
+  updateRow(row: TableTypes.RowData, rowIndex: number): Promise<void>;
   host: HTMLNanoTableElement;
   private renderId;
   private store;
@@ -163,7 +187,7 @@ export declare class Table implements ComponentInterface {
     These are show / hidden for perf */
   blocks: TableTypes.TBody[];
   activeBlocks: number[];
-  measureHeight: number;
+  private measureHeight;
   private blockElements;
   private blockIos;
   private blockHeights;
@@ -177,7 +201,16 @@ export declare class Table implements ComponentInterface {
   private _isReady;
   scrollListener(): void;
   private handleReady;
+  /**
+   * Fired when a column is dragged
+   * @param column
+   */
   private colDrag;
+  /**
+   * Fired when a column is dropped after being dragged
+   * @param fromCol
+   * @param toCol
+   */
   private colDrop;
   /**
    * Start a sort - can be cancelled by `preventDefault`
@@ -221,6 +254,7 @@ export declare class Table implements ComponentInterface {
   private getBlockHeight;
   /** cache the height for all active blocks for later renders */
   private setBlockHeight;
+  private debouncedBlockChange;
   /**
    * Attaches an intersection observer to each rendered tbody element
    * shows / hides intersecting blocks' and sets heights for when they're hidden

package/dist/types/components/table/table.row.d.ts

@@ -3,7 +3,7 @@ import type { TableTypes } from '../../interface';
 declare type TableRowProps = {
   rowRenderer: TableTypes.RowRenderer;
   rowIndex: number;
-  row: TableTypes.RowData;
+  rowModel: TableTypes.RowData;
   onColumnPinned?: TableTypes.PinnedCb;
 };
 export declare const TableRow: FunctionalComponent<TableRowProps>;

package/dist/types/components/table/table.store.d.ts

@@ -19,4 +19,4 @@ export declare function storeSetData(host: HTMLElement, rows: TableTypes.RowData
 export declare function storeSetConfig(host: HTMLElement, columns: TableTypes.ColumnConfig[]): Promise<boolean>;
 export declare function storeSearch(host: HTMLElement, term: string): Promise<void>;
 export declare function storeFilter(host: HTMLElement, filters: TableTypes.Filter[]): Promise<void>;
-export declare function storeSort(host: HTMLElement, prop: TableTypes.Prop, order: TableTypes.Order): Promise<void>;
+export declare function storeSort(host: HTMLNanoTableElement, prop: TableTypes.Prop, order: TableTypes.Order): Promise<void>;

package/dist/types/components/table/table.utils.d.ts

@@ -7,7 +7,7 @@ declare type ValidRenderTypes = 'tr' | 'th' | 'td';
  * @param colIndex - the current column index being rendered
  * @returns a model object which will be passed to custom renderers
  */
-export declare function colDataModel(rowIndex: number, colIndex: number): TableTypes.ColumnDataSchemaModel;
+export declare function colDataModel(rowIndex: number, colIndex: number): TableTypes.RenderModel;
 /**
  * Get a model object for custom row renderers.
  * @param rowIndex

package/dist/types/components/table/table.worker.d.ts

@@ -3,8 +3,8 @@ export declare function createWorkerStore(rows: TableTypes.NanoTable['rows'], co
 export declare function syncDataToWorker(workerId: string, rows: TableTypes.NanoTable['rows']): Promise<boolean>;
 export declare function syncConfigToWorker(workerId: string, columns: Partial<TableTypes.ColumnConfig>[]): Promise<boolean>;
 /** Sorting is the last thing we do - don't cache this, there's no point */
-export declare function workerSort(workerId: string, prop: TableTypes.Prop, order: TableTypes.Order): Promise<TableTypes.RowData[]>;
-export declare function workerFilter(workerId: string, filters: TableTypes.Filter[]): Promise<TableTypes.RowData[]>;
+export declare function workerSort(workerId: string, prop: TableTypes.Prop, order: TableTypes.Order): Promise<TableTypes.RowGeneric[]>;
+export declare function workerFilter(workerId: string, filters: TableTypes.Filter[]): Promise<TableTypes.RowGeneric[]>;
 /** SEARCH */
 /**
  * A general text search across all table columns.
@@ -13,7 +13,7 @@ export declare function workerFilter(workerId: string, filters: TableTypes.Filte
  * @param term
  * @returns the searched for data rows - with col filters / sorts also applied
  */
-export declare function workerSearch(workerId: string, term: string): Promise<TableTypes.RowData[]>;
+export declare function workerSearch(workerId: string, term: string): Promise<TableTypes.RowGeneric[]>;
 /**
  * Clean up
  * @param workerId

package/dist/types/components/tooltip/tooltip.d.ts

@@ -29,6 +29,11 @@ export declare class Tooltip {
   open: boolean;
   /** The distance in pixels from which to offset the tooltip along its target. */
   skidding: number;
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`.
+   */
+  hoist: boolean;
   /**
    * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
    * options can be passed by separating them with a space. When manual is used, the tooltip must be activated

package/dist/types/components.d.ts

@@ -1099,7 +1099,7 @@ export namespace Components {
          */
         "icon"?: any;
         /**
-          * If enabled, nano-icon will be loaded lazily when it's visible in the viewport. Default, `false`.
+          * If enabled, nano-icon will be loaded lazily when it's visible in the viewport. Default, `true`.
          */
         "lazy": boolean;
         /**
@@ -1583,6 +1583,10 @@ export namespace Components {
         "value": number;
     }
     interface NanoResizeObserve {
+        /**
+          * Fire `nanoResizeContentFitChange` events notifying whether content currently fits or does not on the x, y or both axis'. Also makes the `content-fit-...` slots available
+         */
+        "notifyContentFit": 'x' | 'y' | 'xy';
         /**
           * string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints. Format: `states="800w, 300h class1 class2"`
          */
@@ -2019,20 +2023,22 @@ export namespace Components {
          */
         "caption": string;
         /**
-          * The column config used to generate present the rows of data
+          * The column config used to present the rows of data
          */
         "columns": TableTypes.NanoTable['columns'];
         /**
-          * A custom filtering function. Should return a promise. On successful completion the column UI will be updated. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
+          * A custom filtering function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
-        "customFilterFn"?: (filters: TableTypes.Filter[]) => Promise<void>;
+        "customFilterFn"?: (
+    filters: TableTypes.Filter[]
+  ) => Promise<true | TableTypes.Falsy>;
         /**
-          * A custom sorting function. Should return a promise. On successful completion the column UI will be updated. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
+          * A custom sorting function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
         "customSortFn"?: (
     property: TableTypes.Prop,
     order: TableTypes.Order
-  ) => Promise<void>;
+  ) => Promise<true | TableTypes.Falsy>;
         /**
           * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
          */
@@ -2050,7 +2056,7 @@ export namespace Components {
          */
         "headRender": TableTypes.HeadFootRenderer;
         /**
-          * Will show a loading state when true. Will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting
+          * Will show a loading state when set to true. By default, will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting. *Note* when set manually, will overwrite any internal loading state. Set to 'undefined' to revert to default behaviour.
          */
         "loading": boolean;
         /**
@@ -2102,6 +2108,16 @@ export namespace Components {
           * The type of table. Grid type will make cells navigable by keyboard
          */
         "type": 'grid' | 'table';
+        /**
+          * Updates a row model at a given index
+          * @param row - the row to update. *Note* - this should come from the `col.cellTemplate` or `row.rowRender.template`  `rowModel` property - rows are augmented with certain properties to aid with efficient rendering
+          * @param rowIndex - the row index to insert this row
+         */
+        "updateRow": (row: TableTypes.RowData, rowIndex: number) => Promise<void>;
+        /**
+          * Use this to render the table with roughly the correct dimensions. a use-case might be; fetch a small initial dataset to minimise load-time, render the table with the correct dimensions, the table becomes interactive, load the rest of the data
+         */
+        "virtualTotalItems": number;
     }
     interface NanoTooltip {
         /**
@@ -2120,6 +2136,10 @@ export namespace Components {
           * Hides the tooltip.
          */
         "hide": () => Promise<void>;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist": boolean;
         /**
           * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
          */
@@ -3808,7 +3828,7 @@ declare namespace LocalJSX {
          */
         "icon"?: any;
         /**
-          * If enabled, nano-icon will be loaded lazily when it's visible in the viewport. Default, `false`.
+          * If enabled, nano-icon will be loaded lazily when it's visible in the viewport. Default, `true`.
          */
         "lazy"?: boolean;
         /**
@@ -4335,6 +4355,17 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     interface NanoResizeObserve {
+        /**
+          * Fire `nanoResizeContentFitChange` events notifying whether content currently fits or does not on the x, y or both axis'. Also makes the `content-fit-...` slots available
+         */
+        "notifyContentFit"?: 'x' | 'y' | 'xy';
+        /**
+          * Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set.
+         */
+        "onNanoResizeContentFitChange"?: (event: NanoResizeObserveCustomEvent<{
+    x: boolean;
+    y: boolean;
+  }>) => void;
         /**
           * Fires after the initial loading and assessment
          */
@@ -4763,20 +4794,22 @@ declare namespace LocalJSX {
          */
         "caption"?: string;
         /**
-          * The column config used to generate present the rows of data
+          * The column config used to present the rows of data
          */
         "columns"?: TableTypes.NanoTable['columns'];
         /**
-          * A custom filtering function. Should return a promise. On successful completion the column UI will be updated. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
+          * A custom filtering function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the filter on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
-        "customFilterFn"?: (filters: TableTypes.Filter[]) => Promise<void>;
+        "customFilterFn"?: (
+    filters: TableTypes.Filter[]
+  ) => Promise<true | TableTypes.Falsy>;
         /**
-          * A custom sorting function. Should return a promise. On successful completion the column UI will be updated. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
+          * A custom sorting function. Should return a promise. If the promise resolves as `true` the column UI will be updated. If the promise resolves as falsey, the sort will be performed by the component. A good use-case would be performing the sort on a server / via fetch. Then on success, updating the table's data via the `rows` property
          */
         "customSortFn"?: (
     property: TableTypes.Prop,
     order: TableTypes.Order
-  ) => Promise<void>;
+  ) => Promise<true | TableTypes.Falsy>;
         /**
           * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
          */
@@ -4794,7 +4827,7 @@ declare namespace LocalJSX {
          */
         "headRender"?: TableTypes.HeadFootRenderer;
         /**
-          * Will show a loading state when true. Will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting
+          * Will show a loading state when set to true. By default, will be shown automatically if `rows` is a promise waiting to resolve or when performing custom filtering or sorting. *Note* when set manually, will overwrite any internal loading state. Set to 'undefined' to revert to default behaviour.
          */
         "loading"?: boolean;
         /**
@@ -4812,6 +4845,10 @@ declare namespace LocalJSX {
     column: TableTypes.Prop;
     order: TableTypes.Order;
   }>) => void;
+        /**
+          * Fired before a general search. `event.preventDefault()` to stop searching.
+         */
+        "onNanoTblBeforeEdit"?: (event: NanoTableCustomEvent<{ term: string }>) => void;
         /**
           * Fired before a column is filtered. `event.preventDefault()` to stop filtering.
          */
@@ -4886,6 +4923,10 @@ declare namespace LocalJSX {
           * The type of table. Grid type will make cells navigable by keyboard
          */
         "type"?: 'grid' | 'table';
+        /**
+          * Use this to render the table with roughly the correct dimensions. a use-case might be; fetch a small initial dataset to minimise load-time, render the table with the correct dimensions, the table becomes interactive, load the rest of the data
+         */
+        "virtualTotalItems"?: number;
     }
     interface NanoTooltip {
         /**
@@ -4900,6 +4941,10 @@ declare namespace LocalJSX {
           * The distance in pixels from which to offset the tooltip away from its target.
          */
         "distance"?: number;
+        /**
+          * Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto|scroll`.
+         */
+        "hoist"?: boolean;
         /**
           * Emitted after the tooltip has hidden and all transitions are complete.
          */

package/dist/types/utils/date-utils.d.ts

@@ -11,7 +11,7 @@ export declare enum DaysOfWeek {
  * @param year
  * @param month
  * @param day
- * @returns a new Date objecy
+ * @returns a new Date object
  */
 export declare function createDate(year: string, month: string, day: string): Date;
 /**