@nanoporetech-digital/components 3.0.0 → 3.1.1

package/dist/types/components/global-nav/global-nav-interface.d.ts

@@ -35,3 +35,46 @@ export interface MyAccountUser {
   is_nanopore_user: boolean;
   kudos: number;
 }
+export interface MyAccountData {
+  user: MyAccountUser;
+  cart: {
+    count: number;
+    url: string;
+  };
+  notifications: {
+    count: number;
+  };
+  hs: {
+    lists?: Array<number>;
+  };
+  registration: {
+    next_url: string | null;
+  };
+  links: null | MyAccountLink[];
+  urls: {
+    forgot_password: string | null;
+    logout: string | null;
+    login: string | null;
+    messages: string | null;
+    cart: string | null;
+  };
+  domains: [
+    {
+      origin: string;
+      domain: string;
+    }
+  ];
+  search: {
+    app_id: string;
+    api_key: string;
+    indeces: [
+      {
+        index: string;
+        name: string;
+        domain: string;
+        all_group?: boolean;
+        filters?: [string];
+      }
+    ];
+  };
+}

package/dist/types/components/global-nav/global-nav.d.ts

@@ -139,7 +139,7 @@ export declare class GlobalNav implements ComponentInterface {
    */
   cartCount: number;
   /**
-   * MyAccount undread message count.
+   * MyAccount un-read message count.
    */
   msgCount: number;
   /**

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Used to show the status of an ongoing operation.
+ *
+ * @slot - A label to show inside the indicator.
+ *
+ * @part base - The component's base wrapper.
+ * @part indicator - The progress bar indicator.
+ * @part label - The progress bar label.
+ */
+export declare class ProgressBar {
+  host: HTMLNanoProgressBarElement;
+  /** The progress bar's percentage, 0 to 100. */
+  value: number;
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate: boolean;
+  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
+  showPercent: boolean;
+  render(): any;
+}

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

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from '../../stencil-public-runtime';
+import { FunctionalComponent, VNode } from '../../stencil-public-runtime';
 import type { TableTypes } from '../../interface';
 declare type PinnedCb = (positions: {
   [key in TableTypes.Position]?: boolean;
@@ -24,6 +24,7 @@ export declare const TableColHead: FunctionalComponent<TableColHeadProps>;
 declare type TableCellProps = {
   rowIndex: number;
   colIndex: number;
+  nestedContent?: VNode;
 };
 export declare const TableCell: FunctionalComponent<TableCellProps>;
 export {};

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

@@ -1,11 +1,19 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { TableTypes } from '../../interface';
 /**
- * Table
- * @slot - The tooltip's target element. Only the first element will be used as the target.
- * @slot content - The tooltip's content. Alternatively, you can use the content prop.
+ * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+ * - Built-in search
+ * - Built-in column filter
+ * - Built-in column sort
+ * - Easily swap in API / async based search / filter & sort
+ * - Pin headers, footers, rows, columns
+ * - Add custom rendering at every level
+ * - Add custom properties at every level
+ *
+ * @slot caption - The table's caption. You must either use this or the `caption` attribute.
  */
 export declare class Table implements ComponentInterface {
+  constructor();
   /** The type of table. Grid type will make cells navigable by keyboard */
   type: 'grid' | 'table';
   /** A descriptive title of the table.
@@ -13,8 +21,17 @@ 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;
+  private debounceSetLoading;
+  /** 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'];
+  rows: TableTypes.NanoTable['rows'] | Promise<TableTypes.NanoTable['rows']>;
   handleRowsChange(): void;
   /** The column config used to generate present the rows of data */
   columns: TableTypes.NanoTable['columns'];
@@ -82,7 +99,7 @@ export declare class Table implements ComponentInterface {
   nanoTblBeforeSearch: EventEmitter<{
     term: string;
   }>;
-  /** Fired after a general search */
+  /** Fired after a general / cross column search */
   nanoTblAfterSearch: EventEmitter<{
     term: string;
   }>;
@@ -108,6 +125,7 @@ export declare class Table implements ComponentInterface {
   private currentFilters;
   private currentSort;
   private tableEle;
+  private topAnchorEle;
   /** `tr` elements split into units - defined by `perPage`
     These are show / hidden for perf */
   blocks: TableTypes.TBody[];
@@ -169,8 +187,8 @@ export declare class Table implements ComponentInterface {
   /** cache the height for all active blocks for later renders */
   private setBlockHeight;
   /**
-   * Attaches an intersection observer to each rendered tbody elements
-   * shows / hides intersecting blocks' and sets heights for when their hidden
+   * Attaches an intersection observer to each rendered tbody element
+   * shows / hides intersecting blocks' and sets heights for when they're hidden
    * @param el - the tbody element to observe
    * @param blockIndex - the rendering tbody we're attaching the IO to
    */

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

@@ -39,10 +39,4 @@ export declare function cellRender(rowIndex: number, colIndex: number): VNode;
  * @param col - the current column config object
  * @returns - a JSX node
  */
-export declare function colheadRender(col: TableTypes.ColumnConfig): VNode;
-/**
- * Renders a table header (within a tfoot) using a custom template if set.
- * @param col - the current column config object
- * @returns - a JSX node
- */
-export declare function colFootRender(col: TableTypes.ColumnConfig): VNode | void;
+export declare function colheadFootRender(col: TableTypes.ColumnConfig): VNode;

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

@@ -9,11 +9,13 @@ export interface TableStores {
   }>;
   general: ObservableMap<{
     workerId: string;
+    scrollParent: HTMLElement;
+    host: HTMLNanoTableElement;
   }>;
 }
-export declare function generateStore(host: HTMLElement, rows: TableTypes.NanoTable['rows'], columns: TableTypes.NanoTable['columns']): Promise<TableStores>;
+export declare function generateStore(host: HTMLNanoTableElement, columns: TableTypes.NanoTable['columns'], scrollParent: HTMLElement): Promise<TableStores>;
 export declare function getStore(host: HTMLElement): TableStores;
-export declare function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]): void;
+export declare function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]): Promise<boolean>;
 export declare function storeSetConfig(host: HTMLElement, columns: TableTypes.ColumnConfig[]): void;
 export declare function storeSearch(host: HTMLElement, term: string): Promise<void>;
 export declare function storeFilter(host: HTMLElement, filters: TableTypes.Filter[]): Promise<void>;

package/dist/types/components.d.ts

@@ -933,7 +933,7 @@ export namespace Components {
          */
         "logoUrl": string;
         /**
-          * MyAccount undread message count.
+          * MyAccount un-read message count.
          */
         "msgCount": number;
         /**
@@ -1472,6 +1472,20 @@ export namespace Components {
          */
         "value": string;
     }
+    interface NanoProgressBar {
+        /**
+          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+         */
+        "indeterminate": boolean;
+        /**
+          * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
+         */
+        "showPercent": boolean;
+        /**
+          * The progress bar's percentage, 0 to 100.
+         */
+        "value": number;
+    }
     interface NanoRange {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`
@@ -2025,10 +2039,18 @@ export namespace Components {
           * Used for custom thead row rendering
          */
         "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
+         */
+        "loading": boolean;
         /**
           * To improve performance, data is split into blocks which are shown / hidden and rendered as they become visible. Use this to control the number of hits within a block - A block should fill a scrolling viewport. The less perBlock the better for performance
          */
         "perBlock": number;
+        /**
+          * When loading rows asynchronously, this will render this number of placeholder rows
+         */
+        "placeholderSize": number;
         /**
           * Remove any column filters currently applied
           * @returns a promise which resolves when complete
@@ -2046,7 +2068,8 @@ export namespace Components {
         /**
           * The data to place in the table
          */
-        "rows": TableTypes.NanoTable['rows'];
+        "rows": | TableTypes.NanoTable['rows']
+    | Promise<TableTypes.NanoTable['rows']>;
         /**
           * Term to search for in the data
          */
@@ -2461,6 +2484,12 @@ declare global {
         prototype: HTMLNanoOptionElement;
         new (): HTMLNanoOptionElement;
     };
+    interface HTMLNanoProgressBarElement extends Components.NanoProgressBar, HTMLStencilElement {
+    }
+    var HTMLNanoProgressBarElement: {
+        prototype: HTMLNanoProgressBarElement;
+        new (): HTMLNanoProgressBarElement;
+    };
     interface HTMLNanoRangeElement extends Components.NanoRange, HTMLStencilElement {
     }
     var HTMLNanoRangeElement: {
@@ -2585,6 +2614,7 @@ declare global {
         "nano-menu-drawer": HTMLNanoMenuDrawerElement;
         "nano-nav-item": HTMLNanoNavItemElement;
         "nano-option": HTMLNanoOptionElement;
+        "nano-progress-bar": HTMLNanoProgressBarElement;
         "nano-range": HTMLNanoRangeElement;
         "nano-rating": HTMLNanoRatingElement;
         "nano-resize-observe": HTMLNanoResizeObserveElement;
@@ -3569,7 +3599,7 @@ declare namespace LocalJSX {
          */
         "logoUrl"?: string;
         /**
-          * MyAccount undread message count.
+          * MyAccount un-read message count.
          */
         "msgCount"?: number;
         /**
@@ -4147,6 +4177,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface NanoProgressBar {
+        /**
+          * When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.
+         */
+        "showPercent"?: boolean;
+        /**
+          * The progress bar's percentage, 0 to 100.
+         */
+        "value"?: number;
+    }
     interface NanoRange {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`
@@ -4704,12 +4748,16 @@ declare namespace LocalJSX {
           * Used for custom thead row rendering
          */
         "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
+         */
+        "loading"?: boolean;
         /**
           * Fired after a column is sorted
          */
         "onNanoTblAfterFilter"?: (event: NanoTableCustomEvent<{ filters: TableTypes.Filter[] }>) => void;
         /**
-          * Fired after a general search
+          * Fired after a general / cross column search
          */
         "onNanoTblAfterSearch"?: (event: NanoTableCustomEvent<{ term: string }>) => void;
         /**
@@ -4749,6 +4797,10 @@ declare namespace LocalJSX {
           * To improve performance, data is split into blocks which are shown / hidden and rendered as they become visible. Use this to control the number of hits within a block - A block should fill a scrolling viewport. The less perBlock the better for performance
          */
         "perBlock"?: number;
+        /**
+          * When loading rows asynchronously, this will render this number of placeholder rows
+         */
+        "placeholderSize"?: number;
         /**
           * Used for custom row rendering
          */
@@ -4756,7 +4808,8 @@ declare namespace LocalJSX {
         /**
           * The data to place in the table
          */
-        "rows"?: TableTypes.NanoTable['rows'];
+        "rows"?: | TableTypes.NanoTable['rows']
+    | Promise<TableTypes.NanoTable['rows']>;
         /**
           * Term to search for in the data
          */
@@ -4865,6 +4918,7 @@ declare namespace LocalJSX {
         "nano-menu-drawer": NanoMenuDrawer;
         "nano-nav-item": NanoNavItem;
         "nano-option": NanoOption;
+        "nano-progress-bar": NanoProgressBar;
         "nano-range": NanoRange;
         "nano-rating": NanoRating;
         "nano-resize-observe": NanoResizeObserve;
@@ -4919,6 +4973,7 @@ declare module "@stencil/core" {
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
             "nano-nav-item": LocalJSX.NanoNavItem & JSXBase.HTMLAttributes<HTMLNanoNavItemElement>;
             "nano-option": LocalJSX.NanoOption & JSXBase.HTMLAttributes<HTMLNanoOptionElement>;
+            "nano-progress-bar": LocalJSX.NanoProgressBar & JSXBase.HTMLAttributes<HTMLNanoProgressBarElement>;
             "nano-range": LocalJSX.NanoRange & JSXBase.HTMLAttributes<HTMLNanoRangeElement>;
             "nano-rating": LocalJSX.NanoRating & JSXBase.HTMLAttributes<HTMLNanoRatingElement>;
             "nano-resize-observe": LocalJSX.NanoResizeObserve & JSXBase.HTMLAttributes<HTMLNanoResizeObserveElement>;