@nanoporetech-digital/components 4.9.4 → 5.0.0

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

@@ -0,0 +1,204 @@
+import { Element, EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * An accessible and flexible re-order / sort utility component.
+ *
+ *- 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
+ */
+export declare class Sortable implements ComponentInterface {
+  /** A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>` */
+  itemSelector: string;
+  handleItemSelectorChange(): void;
+  /** A css query selector which matches an element *within* the `itemSelector` element
+   * which will act like a drag handle. **Note** For keyboard a11y it's recommended
+   * to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used */
+  handleSelector?: string;
+  handleHandleSelectorChange(): void;
+  /** When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.
+   * At that point, you will not be able to drag items back to the original group.
+   * A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.
+   */
+  dropzoneSelector?: string;
+  /** Accessibility helper text applied to handle controls */
+  helperText: string;
+  /**
+   * As a sortable element is interacted with, announcements are made to screen readers
+   * - informing the user what is changing.
+   * By default, the text from the element is extracted to describe the interacted with element.
+   * Use this function to provide a more meaningful, concise item descriptor
+   * @param el the element being interacted with
+   * @returns a string, describing the element being interacted with
+   */
+  itemDescriptor: (el: Element) => string;
+  /**
+   * Used to generate a screen reader live update, informing the user of the current element being grabbed.
+   * @param el the element that has been grabbed by the user
+   * @returns a string, describing the element being grabbed
+   */
+  grabbedHelperText: (el: Element) => string;
+  /**
+   * Used to generate a screen reader live update, informing the user of the current element being dropped.
+   * @param el the element that has been dropped by the user
+   * @returns a string, describing the element that has been dropped
+   */
+  droppedHelperText: (el: Element) => string;
+  /**
+   *  Used to generate a screen reader live update, informing the user when items have been reordered.
+   * @param el the element that has been reordered by the user
+   * @param elements the elements in the sortable list
+   * @param position the new position of the dropped element
+   * @returns a string, describing the element being dropped
+   */
+  reorderHelperText: (el: Element, elements: Element[], position: number) => string;
+  /**
+   * A function that should attach a keyboard accessible control.
+   * When a `handleSelector` is not used - to allow keyboard accessibility -
+   * `createKeyboardHandle` should render a focusable element.
+   *
+   * If your sortable item is itself focusable,
+   * you must use this function to render a control *outside* of the focusable element.
+   * @param _number
+   * @param _element
+   * @returns a function that attaches a keyboard accessible handle control element.
+   * The function itself *must* return the handle element.
+   */
+  createKeyboardHandle: (_number: number, _element: Element) => HTMLElement;
+  handleCreateKeyboardHandleChange(): void;
+  /** use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.
+   * Note that the `sortableHostElement` element css `position` will be set to `relative` */
+  sortableHostElement?: HTMLElement;
+  handleSortableHostElement(_newVal?: any, oldVal?: HTMLElement): void;
+  /** Items being sorted will animate into place */
+  animationEnabled: boolean;
+  /** Use this class to change how the element looks whilst being sorted */
+  draggedClass: string;
+  /** Use this class to change how the handle looks whilst being sorted */
+  handleDraggedClass: string;
+  /** Use this class to change how the element looks when acting as a placeholder */
+  placeholderClass: string;
+  /** Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over */
+  dropzoneActiveClass?: string;
+  /** The css animation timing applied when `animationEnabled` is `true` */
+  animationTiming: any;
+  /** The axis to lock dragging elements to. `undefined` means any axis */
+  orientation?: 'horizontal' | 'vertical';
+  /** Dragged items by default, will take whatever default css is applied in situ.
+   * When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.
+   * Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.  */
+  dragResize: boolean;
+  /** Fired when an the order changes. Use this to update any underlying data model.
+   * `event.preventDefault()` to prevent the element being moved; will revert to original position. */
+  nanoOrderChange: EventEmitter<{
+    element: HTMLElement;
+    originalIndex: number;
+    targetIndex: number;
+  }>;
+  /** Fired when a sortable element is picked-up; via keyboard, mouse or touch.
+   * `event.preventDefault()` to prevent the element being picked-up. */
+  nanoGrabbed: EventEmitter<{
+    element: HTMLElement;
+    index: number;
+  }>;
+  /** Fired when a sortable element is dropped after having been picked up. */
+  nanoDropped: EventEmitter<{
+    element: HTMLElement;
+  }>;
+  /** If sortable elements change dynamically, use this method to add handle controls to new elements */
+  refreshKeyboardHandles(): Promise<void>;
+  host: HTMLNanoSortableElement;
+  private dragRequestPending;
+  private draggedElement?;
+  private draggedElementClone?;
+  private draggedElementOrigin?;
+  private sortableNodes;
+  private dropzoneNodes;
+  private animatedElements;
+  private animationPromise?;
+  private keyboardHandleMap;
+  private sortableId;
+  private mouseDownTimer;
+  private mutationObserver;
+  keyboardSortActive: boolean;
+  ariaTextList: string[];
+  /**
+   * Get instance of sortable host.
+   * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`
+   */
+  get sortableHost(): HTMLElement;
+  /**
+   * Queues aria messages which are then displayed in a 'live' region.
+   * Messages are cleared after 10s
+   * @param msg aria message to announce
+   */
+  private addAriaMsg;
+  /**
+   * Try to stop text highlight whilst dragging
+   * @param userSelect
+   */
+  private updateUserSelectStyle;
+  /**
+   * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the
+   * given targets. Returns an array of matches.
+   * @param node
+   * @param targets
+   * @returns all the items that currently intersect with the target node
+   */
+  private hitTest;
+  /**
+   * Returns a boolean indicating whether the node is currently in an animation.
+   * @param node
+   * @returns whether a node is currently animating or not
+   */
+  private isAnimating;
+  /**
+   * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as
+   * if nodes animate from their old to their new position in the dom. */
+  private animateNode;
+  /**
+   * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;
+   * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very
+   * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because
+   * of this dom update */
+  private insertAtTarget;
+  private reset;
+  /**
+   * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.
+   * Clone styles are added onto the style object directly, since the ::slotted()
+   * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep
+   * @param node html node to clone
+   * @returns the cloned html node
+   */
+  private createClone;
+  private removeEventHandlers;
+  private addEventHandlers;
+  /**
+   * Watch for any changes in grab-able handle elements.
+   */
+  private attachMutationObserver;
+  private handleKeydown;
+  /**
+   * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following
+   * the first actual move event following a touchstart/mousedown */
+  private handleTrack;
+  /**
+   * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.
+   * OR If a handleSelector is defined, a node matching this selector must be clicked instead
+   * @returns boolean - whether tracking for this event should continue or not
+   */
+  private trackStart;
+  /** Ends re-ordering */
+  private finishOrder;
+  /**
+   * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is
+   * the insert point for updated sorting */
+  private trackMove;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -125,9 +125,9 @@ export declare namespace TableTypes {
    */
   interface ColumnConfig<T = RowData> {
     /** The title of the column. Displayed in the table header `th` */
-    title: string;
+    title?: string;
     /** The row's data property to retrieve per cell render */
-    prop: keyof T;
+    prop?: keyof T;
     /** The type of data. Will affect how it is sorted and the available
      * filter operations ('text' uses browser locale to compare).
      * If none supplied, it will be derived by default using the first row of data retrieved. */
@@ -152,8 +152,6 @@ export declare namespace TableTypes {
     searchable?: boolean;
     /** Current filters applied to this column  */
     filter?: string | boolean;
-    /** Whether this column can be dragged to change column order */
-    draggable?: boolean;
     /**
      * A cell render function, called during any cell's render to the dom.
      * It can be used to add any markup within a table cell.

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

@@ -8,7 +8,6 @@ import { TableTypes } from '../../interface';
  *- Built-in column sort
  *- Easily swap in API / async based search / filter & sort
  *- Pin headers, footers, rows, columns
- *- Drag-&-Drop columns to re-order
  *- Add custom rendering at every level
  *- Add custom properties at every level
  *
@@ -78,12 +77,6 @@ export declare class Table implements ComponentInterface {
    * `false` will disable column sorting unless you set `sortable: true` on a column
    */
   defaultSort: boolean;
-  /**
-   * 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
-   */
-  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,
@@ -112,18 +105,6 @@ export declare class Table implements ComponentInterface {
     column: TableTypes.Prop;
     order: TableTypes.Order;
   }>;
-  /** Fired when a column has started dragging */
-  nanoTblColDrag: EventEmitter<{
-    column: TableTypes.Prop;
-  }>;
-  /** Fired when a column has been dropped (after dragging)
-   * `event.preventDefault()` to stop column re-order. */
-  nanoTblColDrop: EventEmitter<{
-    fromCol: TableTypes.Prop;
-    toCol: TableTypes.Prop;
-    fromIndex: number;
-    toIndex: number;
-  }>;
   /** Fired before a column is filtered.
    * `event.preventDefault()` to stop filtering. */
   nanoTblBeforeFilter: EventEmitter<{
@@ -204,17 +185,6 @@ export declare class Table implements ComponentInterface {
   private set isReady(value);
   private _isReady;
   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`
    * @param order - column order
@@ -257,6 +227,11 @@ export declare class Table implements ComponentInterface {
   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;

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

@@ -5,10 +5,7 @@ type TableColHeadProps = {
   headRenderer: TableTypes.HeadFootRenderer;
   onColumnSortClick?: (order: TableTypes.Order, column: TableTypes.Prop, el: HTMLTableCellElement) => void;
   onColumnPinned?: TableTypes.PinnedCb;
-  onColumnDrag?: (column: TableTypes.Prop, el: HTMLTableCellElement) => void;
-  onColumnDrop?: (fromColumn: TableTypes.Prop, toColumn: TableTypes.Prop, el: HTMLTableCellElement) => void;
   defaults: {
-    draggable?: boolean;
     sortable?: boolean;
   };
 };

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

@@ -23,7 +23,6 @@ export declare class TabGroup implements ComponentInterface {
   private activePanel;
   private activeTabIndicator;
   private nav;
-  private tabGroup;
   private tabs;
   private rightBtn;
   private leftBtn;

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

@@ -1,6 +1,12 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
+ * @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`)
  */
 export declare class Tab implements ComponentInterface {
   private tabId;