@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

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

@@ -1,10 +1,10 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { FlickityOptions, Flickity, DragEvent, SlideAnimation } from './slides-interface';
 /**
- * The Slides component is a multi-section container. Each section can be swiped or dragged between.
- * It contains any number of Slide components.
+ * A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time.
  *
- * Uses [Flickity](https://flickity.metafizzy.co/) under the hood.
+ * @version 1.0.0
+ * @status stable
  *
  * @part base - Wrapper around slides and additional ui elements.
  * @part slide-container - Wraps all slide elements.

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

@@ -1,11 +1,10 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 /**
- * An accessible and flexible re-order / sort utility component.
+ * An accessible and flexible sort and re-order utility.
+ *
+ * @version 4.0
+ * @status stable
  *
- *- Drag and drop via mouse, touch or keyboard
- *- Live announcements for screen readers
- *- Works with or without an explicit handle (although with is preferable)
-
  * @part announcements - the a11y, live region. Visually hidden by default
  *
  * @slot - The default slot containing any items you might want to sort
@@ -64,6 +63,7 @@ export declare class Sortable implements ComponentInterface {
      * you must use this function to render a control *outside* of the focusable element.
      * @param _number
      * @param _element
+     * @default () => <nano-icon-button></nano-icon-button>;
      * @returns a function that attaches a keyboard accessible handle control element.
      * The function itself *must* return the handle element.
      */

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

@@ -1,6 +1,10 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 /**
  * Spinners are used to show the progress of an indeterminate operation.
+ *
+ * @version 1.0.0
+ * @status stable
+ *
  * @slot - Used for loading messages
  */
 export declare class Spinner implements ComponentInterface {

package/dist/types/components/split-pane/split-pane.d.ts

@@ -2,6 +2,9 @@ import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 /**
  * Split panes display two adjacent panels, allowing the user to reposition them.
  *
+ * @version 2.0.0
+ * @status stable
+ *
  * @part start - The start panel.
  * @part end - The end panel.
  * @part panel - Targets both the start and end panels.

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

@@ -1,253 +1,35 @@
-import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { TableTypes } from './table-interface';
 /**
- * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+ * Displays tabular data in rows and columns.
  *
- *- 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.
- * @slot no-results - text to display when search or filtering yields no results
+ * @status new
+ * @version 8.0.0
+ * @type Progressively enhanced
  */
-export declare class Table implements ComponentInterface {
+export declare class NanoTable {
+    host: HTMLElement;
+    propsReady: boolean;
+    /** If true, the table will be rendered in a compact style. */
+    compact: boolean | 'auto';
+    handleCompactChange(): void;
+    /** If true, will render any nested table in a scrollable container (using `overflow: auto`) */
+    scrollable: boolean;
+    /** Visually hide the table's caption */
+    hideCaption: boolean;
+    handleHideCaptionChange(): void;
+    private resizeObserver;
+    private mutationObserver;
+    private intersectionObserver;
+    private settingUp;
+    private get table();
+    private get caption();
+    private setupProperties;
+    private getRowClickElements;
+    private rowClickHandler;
+    private makeCellsSticky;
+    private addObservers;
+    private cleanUpObservers;
     constructor();
-    /** Function called whenever `col.cellTemplate` renders an unknown object.
-     * The function should render a valid HTMLElement to the cell arg.
-     * Example usage - render JSX from a 3rd party lib and append the result to the cell element. */
-    customRenderer: (node: any, cell: HTMLElement | DocumentFragment) => void | Promise<string>;
-    /** The type of table. Grid type will make cells navigable by keyboard */
-    type: 'grid' | 'table';
-    /** A descriptive title of the table.
-     * You must use this or the `slot="caption"` for accessibility */
-    caption: string;
-    /** Show the caption on-screen */
-    showCaption: 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 falsy
-     * *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 present the rows of data */
-    columns: TableTypes.NanoTable<any>['columns'];
-    handleColsChange(): Promise<void>;
-    /** Used for custom thead row rendering */
-    headRender: TableTypes.HeadFootRenderer;
-    /** Used for custom row rendering */
-    rowRender: TableTypes.RowRenderer;
-    /** Used for custom tfoot row rendering */
-    footRender: TableTypes.HeadFootRenderer;
-    /** Whether to show a `<tfoot>` component */
-    showFooter: 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;
-    /** The number of total blocks currently rendered in the table. @readonly */
-    get blocksLength(): number;
-    /** Term to search for in the data */
-    searchTerm: string;
-    /** 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 falsy, 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<true | TableTypes.Falsy>;
-    /** 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<true | TableTypes.Falsy>;
-    /**
-     * The default sortable option for all columns.
-     * `true` will enable column sorting unless you set `sortable: false` on a column
-     * `false` will disable column sorting unless you set `sortable: true` on a column
-     */
-    defaultSort: 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;
-    /** @readonly - shows the currently applied filters */
-    get appliedFilters(): TableTypes.Filter[];
-    /** 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.
-     */
-    nanoTblBlockRendered: EventEmitter<{
-        block: number;
-        totalBlocks: number;
-    }>;
-    /** Fired before a column is sorted.
-     * `event.preventDefault()` to stop sorting.  */
-    nanoTblBeforeSort: EventEmitter<{
-        column: TableTypes.Prop;
-        order: TableTypes.Order;
-    }>;
-    /** Fired after a column is sorted */
-    nanoTblAfterSort: EventEmitter<{
-        column: TableTypes.Prop;
-        order: TableTypes.Order;
-    }>;
-    /** Fired before a column is filtered.
-     * `event.preventDefault()` to stop filtering. */
-    nanoTblBeforeFilter: EventEmitter<{
-        filters: TableTypes.Filter[];
-    }>;
-    /** Fired after a column is sorted */
-    nanoTblAfterFilter: EventEmitter<{
-        filters: TableTypes.Filter[];
-    }>;
-    /** Fired before a general search.
-     * `event.preventDefault()` to stop searching.  */
-    nanoTblBeforeSearch: EventEmitter<{
-        term: string;
-    }>;
-    /** Fired after a general / cross column search */
-    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>;
-    /** Apply a sort on a column
-     * @returns a promise which resolves when complete */
-    addSort(column: TableTypes.Prop, order: TableTypes.Order): Promise<void>;
-    /** Remove any column filters currently applied
-     * @returns a promise which resolves when complete */
-    resetFilters(): Promise<void>;
-    /** Apply a filter on a column
-     * @param filters - the filters to apply
-     * @param additive - if true, will add the filters to any currently applied
-     * @returns a promise which resolves when complete
-     */
-    addFilters(filters: TableTypes.Filter[], additive?: boolean): Promise<void>;
-    /** Remove filters from a column
-     * @param columnNames - the filters to apply
-     * @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.
-     * @param rowIndex - the row index to insert this row
-     */
-    updateRow(row: TableTypes.RowData, rowIndex: number): Promise<void>;
-    host: HTMLNanoTableElement;
-    private renderId;
-    private store;
-    private filters;
-    private currentFilters;
-    private currentSort;
-    private tableEle;
-    private topAnchorEle;
-    private tableWrapperEle;
-    private activeWatcherIo;
-    private tablePinnedService;
-    /** `tr` elements split into units - defined by `perBlock`
-      These are show / hidden for perf */
-    blocks: TableTypes.TBody[];
-    activeBlocks: number[];
-    private measureHeight;
-    private blockElements;
-    private blockHeights;
-    private set measureEle(value);
-    private unitHeight;
-    private get scrollParent();
-    private set scrollParent(value);
-    private _scrollParent;
-    private get primaryBlockIndex();
-    private set primaryBlockIndex(value);
-    private _primaryBlockIndex;
-    private get isReady();
-    private set isReady(value);
-    private _isReady;
-    private handleReady;
-    /**
-     * Start a sort - can be cancelled by `preventDefault`
-     * @param order - column order
-     * @param column - column config object
-     * @returns A promise
-     */
-    private sortStart;
-    /**
-     * Complete a sort. Reflects the order to ui.
-     * @param order - column order
-     * @param column - column config object
-     */
-    private sortComplete;
-    private searchStart;
-    private filterStart;
-    private filterComplete;
-    /** Scrolls to the top immediately - used whilst sorting / filtering */
-    private scrollToTop;
-    private setMeasureElement;
-    /**
-     * Makes sure we have dimensions on at least one, active tbody element.
-     * We'll use this is a yard stick for inactive tbody elements in future.
-     * These elements have no natural height (on account of all their rows being hidden)
-     */
-    private setInitialBlockDimension;
-    /** Apply initial columns settings */
-    private columnInit;
-    /** Split up all incoming rows into 'blocks' split amongst tbody elements.
-     * These can then be hidden / shown to improve performance.
-     */
-    private setBlocks;
-    /**
-     * Returns a block render height.
-     * If it's currently active - let auto do it's thing
-     * If we've rendered it before - return that
-     * If all else fails, let's guess it
-     * @param blockIndex
-     * @returns a height string (incl px)
-     */
-    private getBlockHeight;
-    /** cache the height for all active blocks for later renders */
-    private setBlockHeight;
-    /**
-     * On scroll, loop through all blocks' heights and cumulatively, add them together.
-     * When we find that the scroll position is less than this cumulative block height -
-     * stop loop - it's on the current active block.
-     */
-    private scrollHandler;
-    /** Process slotted content */
-    private processSlots;
-    private handleResizeChange;
-    /** Adds an IO. Makes sure our scroll listener is only active when
-     * the table is in viewport */
-    private setupActiveWatcher;
-    componentWillLoad(): Promise<void>;
     connectedCallback(): void;
-    componentDidLoad(): void;
-    componentShouldUpdate(_newVal: any, _oldVal: any, stateName: keyof Table): boolean;
-    componentWillRender(): void | Promise<void>;
     componentDidRender(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/tabs/tab-content.d.ts

@@ -1,8 +1,13 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 /**
+ * Used inside [tab groups](/components/tab-group) to display content.
+ *
+ * @version 1.0
+ * @status stable
+ *
  * @slot - The tab panel's content.
  */
-export declare class TabPanel implements ComponentInterface {
+export declare class NanoTabContent implements ComponentInterface {
     private tabContentId;
     ready: boolean;
     host: HTMLNanoTabContentElement;

package/dist/types/components/tabs/tab-group.d.ts

@@ -1,42 +1,33 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { StorageMethods } from '../../utils/store/component-store';
-import type { Color } from '../../types/shared';
 /**
- * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
+ * Tab groups organize content into a container that shows one section at a time.
  *
- * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.
- * Horizontal tabs that don't fit will overflow and scroll appropriately.
- * Tab-content can also be swiped to change tabs.
+ * @version 1.0
+ * @status stable
  *
  * @slot tabs - Add `nano-tab` elements to add clickable tabs.
- * @slot tab-content-header - a header bar displayed above tab content.
  * @slot - Add `nano-tab-content` elements to add tabbable content.
  *
  * @part base - the main tab-group wrapper
  * @part nav - the bar surrounding all the tabs and nav buttons
  * @part tabs - the wrapper around the `nano-tab` components
+ * @part scroll-buttons - the button which appear when the tabs overflow
  * @part active-tab-indicator - the active indicator line
  * @part body - the wrapper around the `nano-tab-content` components
  */
-export declare class TabGroup implements ComponentInterface {
+export declare class NanoTabGroup implements ComponentInterface {
     private baseId;
     private activeTab;
     private activePanel;
-    private activeTabIndicator;
-    private nav;
-    private tabs;
-    private rightBtn;
-    private leftBtn;
     private isRtl;
     private initialTouchX;
     private initialTouchY;
-    private resizeObserver;
-    private mutationObservers;
+    private init;
+    private _tab;
+    private get tab();
+    private set tab(value);
     host: HTMLNanoTabGroupElement;
-    hasScrollControls: boolean;
-    hideControlRight: boolean;
-    hideControlLeft: boolean;
-    tab: string;
     /**
      * The placement of the tabs.
      */
@@ -45,30 +36,24 @@ export declare class TabGroup implements ComponentInterface {
      * Disables the scroll arrows that appear when tabs overflow.
      */
     noScrollControls: boolean;
+    /** Make all tabs equal size. This is only recommended when there are a small number of tabs */
+    equalTabSize: boolean;
+    /** Size of tabs. Default is `regular`. `large` is only available when `placement="top"` */
+    size: 'regular' | 'large';
     /**
-     * The color to use from the application's color palette.
-     */
-    color?: Color;
-    /**
-     * Store the currently open tab (against this ID) in the component store.
-     * Use in conjunction with storeMethod
+     * Store the open tab against this ID in the component store.
+     * Use in combination with `storeMethod`
      */
     storeId?: string;
     /**
      * The method of storage.
-     * Either session storage, url hash (after the '#') or url query (after the '?').
+     * Either session storage, url hash (after an '#') or url query (after an '?').
      */
     storeMethod: StorageMethods;
     /**
      * Disable 'swipe to change tab' on devices with touch
      */
     disableSwipe: boolean;
-    handleTabNameChange(): void;
-    handlePlacementChange(): void;
-    handleNoScrollControlsChange(): void;
-    hideRightBtn(): void;
-    hideLeftBtn(): void;
-    watchScrollControls(): void;
     /** Emitted when a tab is shown. */
     nanoTabShow: EventEmitter<{
         name: string;
@@ -91,24 +76,19 @@ export declare class TabGroup implements ComponentInterface {
     get getAllTabs(): HTMLNanoTabElement[];
     get getAllPanels(): HTMLNanoTabContentElement[];
     get getActiveTab(): HTMLNanoTabElement;
-    private updateScrollControls;
     private setActiveTab;
     private setAriaLabels;
-    private syncActiveTabIndicator;
-    private getNavWidth;
     handleTabClose(ev: CustomEvent & {
         target: HTMLNanoTabElement;
     }): void;
     private handleClick;
     private handleKeyDown;
-    private handleTabScroll;
-    private handleBtnClick;
     private handleTouchStart;
     private handleTouchEnd;
     private handleContentSlotChange;
     private handleTabSlotChange;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/tabs/tab.d.ts

@@ -1,18 +1,23 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
+ * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab content](tab-content).
+ *
+ * @version 1.0
+ * @status stable
+ *
  * @slot start - start of the tab, content. Outside of the focusable element
  * @slot end - end of the tab, content. Outside of the focusable element
  * @slot - The tab's label.
  *
  * @part base - the wrapper around the whole control
- * @part tab - the main tab control that controls the active state
- * @part close-btn - the close button of the tab (if `closable=true`)
+ * @part label - the label of the tab
+ * @part close-button - the close button of the tab (if `closable=true`)
  */
-export declare class Tab implements ComponentInterface {
+export declare class NanoTab implements ComponentInterface {
     private tabId;
     private tab;
     host: HTMLNanoTabElement;
-    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
+    /** The name of the `nano-tab-content` panel the tab will control. The content panel must be located in the same tab group. */
     panel: string;
     /** The active, selected tab. If none active, the first will automatically be selected. */
     active: boolean;

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Tags provide a quick visual clue about the content, and help to organise and group content based on shared attributes.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ * @supportedTags a, button
+ */
+export declare class NanoTag {
+    /**
+     * Whether the tag is closable or not.
+     * If true, a close button will be displayed.
+     */
+    closable?: boolean;
+    /**
+     * The size of the tag.
+     */
+    size?: 'regular' | 'large';
+    el: HTMLNanoTagElement;
+    /**
+     * Fires when close button is clicked
+     */
+    nanoClose: EventEmitter;
+    private onKeyDown;
+    private handleClick;
+    private close;
+    private containsAnchor;
+    render(): any[];
+}

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

@@ -1,6 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * Tooltips display additional information based on a specific action.
+ *
+ * @version 1.0.0
+ * @status stable
+ *
  * @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.
  */