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

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

@@ -1,304 +1,135 @@
-import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
-import { AlgoliaSearchResultDetail, SearchIndex } from '../algolia/algolia-interface';
-import { AlgoliaNetworkError, MyAccountData, MyAccountUser } from './global-nav-interface';
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { AlgoliaSearchResultDetail, SearchIndex } from '../algolia/algolia-interface';
+import type { AlgoliaNetworkError, MyAccountData } from './global-nav-interface';
 /**
- * Nanopore digital global navigation and search bar.
- * Incorporates MyAccount / SSO states (messages / cart / user name etc).
- * Incorporates Algolia search.
+ * The Global nav component standardises navigation within and across web applications.
  *
- * @slot main - main nav items. Should be used with nano-nav-item's
- * @slot icon - nano-nav-item's displayed alongside icon links that come from MyAccount
- * @slot loggedin - nano-nav-item's to display when users are signed in, alongside links from from MyAccount (within the overflow menu panel).
- * @slot about - nano-nav-item's to display with about links that come from MyAccount
- * @slot site - nano-nav-item's to display with site links that come from MyAccount
- * @slot overflow - items to always display in the overflow menu
- * @slot search - when not using myaccount search OR show-search="false" you can utilise the search slot
- * @slot promotion - a free area for any promotional content, displayed within the overflow menu panel
- * @slot logo - when show-logo="false" you can utilise the logo slot
- * @slot - if using search functionality, place a `<nano-search-results />` element in the default slot
+ * @version 8.0.0
+ * @status new
  *
- * @part burger - the overflow / burger ui element
- * @part burger-menu - the overflow / burger menu
- * @part burger-actions-bar - the top bar of the overflow / burger menu
- * @part burger-content - the main content area of the overflow / burger menu
- * @part bars - the main wrapper around the `main-bar` and `search-bar` nav bars
- * @part main-bar - the main nav menu bar
- * @part logo-link - the link wrapping the logo
- * @part search-bar - the search bar that appears under the main nav menu bar
+ * @slot menu - Main menu items. Can be used with `<nano-nav-item>` or `<a>` elements.
+ * @slot - Main site content.
+ *
+ * @part main-menu - The main menu bar nav element.
+ * @part search-form - The search form element.
+ * @part search-input - The search input element.
+ * @part search-select - The search select element.
+ * @part wrapper - The main wrapper for the component.
+ * @part drawer - The drawer element which controls the overflow menu.
+ * @part overflow-header - The header for the overflow menu.
+ * @part overflow-menu - The overflow menu items.
+ * @part menu-bar - The main menu bar.
+ * @part site-wrapper - The main site content area.
+ * @part logo-link - The logo link element.
+ * @part logo - The logo element.
+ * @part user-panel - The user panel element.
+ * @part site-search-results - The nano-global-search-results element
  */
 export declare class GlobalNav implements ComponentInterface {
-    private debounceResize;
-    private debounceSetResizingState;
-    private currSize;
-    private menuDiv;
-    private menuBtn;
-    private menuWrapDiv;
-    private menuContentDiv;
-    private menuSelectedItems;
-    private searchBarEl;
-    private searchInput;
-    private algoliaClient;
-    private currentIndex;
-    private autocompleteResults;
-    private autocompleteEles;
-    private currAIndex;
-    private algoliaSearchResults;
-    private scopeSearch;
-    private mainBarDiv;
-    private userLinkPanel;
-    private isLoggedIn;
-    private myAccData;
-    private aboutNavItms;
-    private siteNavItms;
-    private loggedInNavItms;
-    constructor();
-    userProfileUrl: string;
-    hasLoggedinSlot: boolean;
-    hasSiteSlot: boolean;
-    hasPromotionSlot: boolean;
-    aboutSlotLen: number;
-    iconSlotLen: number;
-    mainSlotLen: number;
-    overflowSlotLen: number;
-    searchSlotLen: number;
-    thresholdReady: boolean;
-    remoteDataReady: boolean;
-    ready: boolean;
-    isResizing: boolean;
-    threshold: number;
-    modalOpen: boolean;
-    modalIsOpen: boolean;
-    searchBarShown: boolean;
-    scrollingUp: boolean;
-    showAutocomplete: boolean;
-    secondaryMenuOpen: HTMLNanoNavItemElement;
-    userMenuOpen: boolean;
-    menuFullScreen: boolean;
-    searchLoading: boolean;
-    searchValInternal: string;
-    internalSearchIndeces: Array<SearchIndex>;
-    private el;
-    /**
-     * Connect to local, dev, test or prod MyAccount
-     * environments to retrieve global nav / sso data.
-     * Alternatively, you can use the `ssoDataUrl` prop.
-     */
-    env?: 'local' | 'dev' | 'test' | 'prod';
-    /**
-     * A base url to retrieve global nav / sso data.
-     * `nav_bar_data.json` will be appended to this url.
-     * An alternative to the pre-defined `env` urls
-     */
-    ssoDataUrl?: string;
-    /**
-     * An alternative to both 'env' and 'ssoDataUrl'.
-     * You can directly provide a JSON object of myaccount data.
-     * (e.g. https://myaccount.nanoporetech.com/nav_bar_data.json)
-     * This is useful for SSR
-     */
-    myAccountData: MyAccountData | null;
-    handleMyAccountData(): void;
-    /**
-     * Where to take user after SSO login
-     */
-    ssoRedirect: string;
-    /**
-     * Whether to attempt to get global nav / sso data from MyAccount
-     */
-    getMyAccountData: boolean;
-    /**
-     * Active MyAccount link sections. By default all will show.
-     */
-    activeMyAccountSections: ('about' | 'loggedin' | 'sites' | 'icons')[];
-    /**
-     * Whether to show search functionality
-     */
-    showSearch: boolean;
-    /**
-     * Whether to show Nanopore logo
-     */
-    showLogo: boolean;
-    /**
-     * The link to put on the logo
-     */
+    host: HTMLNanoGlobalNavElement;
+    private overflowMenu;
+    overflowOpen: boolean;
+    /** The link to put on the logo */
     logoUrl: string;
-    /**
-     * An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount
-     */
-    searchIndeces: Array<SearchIndex>;
-    /**
-     * Logged in user details automatically populated from MyAccount
-     */
-    myAccountUser: MyAccountUser;
-    /**
-     * An Algolia App ID key. Will be automatically populated from MyAccount
-     */
-    searchAppId: string;
-    /**
-     * An Algolia API Key. Will be automatically populated from MyAccount
-     */
-    searchApiKey: string;
-    /**
-     * A search value to passed to Algolia to programmatically get or to preload search results
-     */
-    searchValue: string;
-    /**
-     * Algolia search index to programmatically set or to set an initial index
-     */
-    searchIndex: string;
-    /**
-     * MyAccount store cart count.
-     */
-    cartCount: number;
-    /**
-     * MyAccount un-read message count.
-     */
-    msgCount: number;
-    /**
-     * Url to the Nanopore store cart. Will default to the url supplied by MyAccount
-     */
+    /** Url to the Nanopore store cart. Will default to the url supplied by MyAccount */
     cartUrl: string;
-    /**
-     * Url to the Nanopore message center. Will default to the url supplied by MyAccount
-     */
+    /** Url to the Nanopore message center. Will default to the url supplied by MyAccount  */
     msgUrl: string;
+    /** Url to the Nanopore login page. Will default to the url supplied by MyAccount */
+    loginUrl: string;
+    /** Url to the Nanopore login page. Will default to the url supplied by MyAccount */
+    logoutUrl: string;
+    /** Url to the Nanopore contact page */
+    contactUrl: string;
+    private _sessionRedirect;
+    /** A url to take the user after login / logout. Defaults to current URL. Is automatically URI encoded */
+    get sessionRedirect(): string;
+    set sessionRedirect(val: string);
+    /** MyAccount store cart count.*/
+    cartCount: number;
+    /** MyAccount un-read message count. */
+    msgCount: number;
+    /** Manually toggle open or close the overflow menu */
+    toggleOverflowMenu(): Promise<void>;
+    /** A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url */
+    myAccountUrl?: string;
+    handleMyAccountUrl(): Promise<void>;
     /**
-     * Emitted when the global nav is ready.
-     */
-    nanoIsReady: EventEmitter<void>;
-    /**
-     * Emitted when search results are successfully returned from Algolia.
+     * MyAccount data automatically set via `myAccountUrl`.
+     * Alternatively you can directly provide a JSON object which is useful for SSR
+     * (ref https://myaccount.nanoporetech.com/nav_bar_data.json)
      */
+    myAccountData: MyAccountData | null;
+    /** Emitted when myaccount data has loaded */
+    nanoUserData: EventEmitter<MyAccountData['user']>;
+    private userLinks;
+    isLoggedIn: boolean;
+    /** Logged in user details automatically populated from MyAccount */
+    get myAccountUser(): MyAccountData['user'];
+    processUserData(): void;
+    private formatLoginLink;
+    private resizeObserver;
+    private cachedWidth;
+    private mainMenu;
+    private _mainMenuBar;
+    get mainMenuBar(): HTMLElement;
+    set mainMenuBar(el: HTMLElement);
+    shouldResize: boolean;
+    breakpoint: 0 | 1 | 2 | 3 | 4;
+    breakpointChanged(): void;
+    private debounceResetResize;
+    private addMainmenuRo;
+    private removeMainmenuRo;
+    private handleResize;
+    private algoliaClient;
+    private searchResults;
+    private searchInput;
+    private activeIndex;
+    private autocompleteResults;
+    private searchForm;
+    searchIndices: SearchIndex[];
+    searchBarShown: boolean;
+    searchLoading: boolean;
+    _searchValue: string;
+    /** Emitted when search results are successfully returned from Algolia. */
     nanoSearchResult: EventEmitter<AlgoliaSearchResultDetail>;
-    /**
-     * Emitted when algolia returns an error.
-     */
+    /** Emitted when algolia returns an error. */
     nanoSearchError: EventEmitter<AlgoliaNetworkError>;
-    /**
-     * Emitted when search field is cleared.
-     */
+    /** Emitted when search field is cleared. */
     nanoSearchReset: EventEmitter<AlgoliaSearchResultDetail>;
-    /**
-     * Submit the search form (a search value must be present)
-     */
+    /** Algolia search index to search within */
+    searchIndex: string;
+    /** A search string used to load and show autocomplete results */
+    get searchValue(): string;
+    set searchValue(val: string);
+    /** Send the current search term and selected index to a nested `nano-global-search-results` */
     submitSearch(): Promise<void>;
-    /**
-     * Manually open or close the overflow (burger) menu
-     * @param openClose - optionally force open (true) or close (false)
-     */
-    toggleOverflowMenu(openClose?: boolean): Promise<void>;
-    getMyAccData(): Promise<void>;
-    currentSelectedIndex(): SearchIndex;
-    changeInternalSearchVal(): void;
-    initAlgoliaClient(): void;
-    /** Public facing set of Algolia indices. Add to any indices we may already have (e.g. from MyAccount) */
-    addIndeces(): void;
-    /** Internal set of of Algolia indices. Includes public & private (e.g. from MyAccount) */
-    addAlgoliaIndeces(): void;
-    /** Current content breakpoint. If it goes up, things can look wonky for a second so we temporarily hide stuff */
-    thresholdChange(newThreshold: number, oldThreshold: number): void;
-    assessReady(): void;
-    /**
-     * Add / remove events when autocomplete results show / hide.
-     */
-    setupAutocompleteBlur(): void;
-    closeSearchBar(): void;
-    /** As relevant slotted items change, reset resizing breakpoints */
-    slotChange(): void;
-    private thresholdClasses;
-    /**
-     * provides 'isResizing' - we use this to fade content out on 'breakpoint' increase
-     * (when the screen size increases). Otherwise the stepping through of
-     * breakpoints to calculate if content currently fits shows on screen (looks ugly)
-     */
-    private setResizingState;
-    /**
-     * 1) Reset threshold (item fit breakpoint) when screen is bigger than before.
-     * 2) Assess the all threshold / breakpoints to see if content fits
-     * 3) Hide search bar whenever we resize
-     */
-    private onWindowResize;
-    secondaryOpen(ev: CustomEvent & {
-        target: HTMLNanoNavItemElement;
-    }): void;
-    secondaryClose(ev: CustomEvent & {
-        target: HTMLNanoNavItemElement;
-    }): void;
-    private onMenuBtnKeyDown;
-    private onMenuBtnClick;
-    private menuOpen;
-    private onMenuHidden;
-    menuClose(ev?: FocusEvent | MouseEvent | KeyboardEvent | TouchEvent, force?: boolean): void;
-    private subMenuClose;
-    private onUserBtnClick;
-    private onUserBtnKeyDown;
-    private onUserMenuBlur;
-    handleUserMenu(): Promise<void>;
-    private onSearchBtnClick;
-    private searchbarShow;
-    private onSearchBarShown;
-    private searchbarHide;
-    private onSearchBarHidden;
-    private autocompleteSnippet;
-    private onSearchInput;
-    /**
-     * Constructs a multi-search query for all set search indices
-     * (which are normally controlled via the myAccount payload) then sends to Algolia.
-     * Post-processes results, adding correct domains to url fields.
-     * @returns formatted algolia results
-     */
-    private doAlgoliaSearch;
-    /**
-     * Called whenever the search input value changes.
-     * Performs Algolia search and shows autocomplete results.
-     * @param ev optional input change event
-     */
-    private onSearchChange;
+    handleSearchIndex(): SearchIndex;
+    initSearch(): void;
     /**
      * Called whenever the search form is submitted (but can also be called manually).
      * Fires event which will activate / display `nano-global-search-results`
-     *
-     * @param ev optional form submit event
-     * @returns Algolia search results
      */
     private onSearchSubmit;
-    private onSearchIndexChange;
-    private isSearchValSet;
-    private switchIndexSubmit;
-    resetHitFocus(): void;
-    private onAutocompleteBlur;
-    private showAutocompleteResults;
-    private setActiveElement;
-    private onAutocompleteInteract;
-    /**
-     * Assesses what content is present in which slots
-     */
-    private assessSlottedContent;
-    private handleBarResize;
-    componentWillLoad(): void;
-    connectedCallback(): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    private autocompleteList;
-    private searchWidget;
-    render(): any;
-    /**
-     * Finds a correct domain (as defined by myAccount data) for a given origin
-     * @returns a domain string for this origin
-     */
-    private domainFor;
+    private doAlgoliaSearch;
     /**
-     * process a set, or multiple sets of algolia results
+     * Process a set (or multiple sets) of algolia results
      * and applies correct domain names / http protocol to each result's url
-     * @returns results where partial paths are turned to full urls
      */
     private processSearchResults;
-    /**
-     * Ingests the data blob from myAccount; turns prescient fields to internal state
-     */
-    private processMyAccData;
-    /**
-     * Ingests the data blob from myAccount links; applies prescient fields to internal state
-     */
-    private processMyAccLinks;
+    private domainFor;
+    private setAutocompleteResults;
+    private autocompleteSnippet;
+    private handleSearchOpenEvent;
+    private handleSearchCloseEvent;
+    private handleSearchTermInputEvent;
+    private handleSearchTermChangeEvent;
+    private handleSearchIndexChangeEvent;
+    constructor();
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    private loggedInPanel;
+    private bpPartials;
+    private noResultPartial;
+    render(): any;
 }

package/dist/types/components/global-search-results/global-search-results.d.ts

@@ -13,6 +13,9 @@ export declare class GlobalSearchResults implements ComponentInterface {
     private filtersDiv;
     private openFilterBtn;
     private ro;
+    private searchResultId;
+    private queryId;
+    private globalNav;
     algoliaResults: IndexResult;
     algoliaEle: HTMLNanoAlgoliaElement;
     currentWidth: number;
@@ -20,19 +23,16 @@ export declare class GlobalSearchResults implements ComponentInterface {
     appId: string;
     index: SearchIndex;
     private el;
-    /** Fired when the user clicks the 'back' button / closes the search panel
+    /**
+     * Fired when the user clicks the 'back' button / closes the search panel
      * Calling `event.preventDefault()` will prevent it from being closed.
      */
     nanoSearchGoBack: EventEmitter;
     handleAlgoliaCredsChange(): void;
     handleAlgoliaIndexChange(): void;
     handleAlgoliaEleChange(): void;
-    handleGlobalNavReset(e: CustomEvent & {
-        target: HTMLElement;
-    }): void;
-    handleGlobalNavSearch(e: CustomEvent & {
-        target: HTMLElement;
-    }): void;
+    private handleGlobalNavReset;
+    private handleGlobalNavSearch;
     handleReorder(e: CustomEvent & {
         target: HTMLNanoSelectElement;
     }): void;
@@ -57,6 +57,7 @@ export declare class GlobalSearchResults implements ComponentInterface {
     private closefilters;
     private toggleOldResults;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     render(): any;
 }

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

@@ -1,11 +1,9 @@
 /**
- * A lightweight, context-aware CSS grid implementation.
+ * A context-aware CSS grid implementation.
+ *
+ * @version 1.0.0
+ * @status deprecated
  *
- * - Define multiple grids templates at different breakpoints
- * - Uses `@container` queries to select the correct grid depending on the current dimensions
- * - Use `grid-states="..."` on direct descendants for `column` / `row` - `start` / `end`
- * - SSR optimised
-
  * @part grid - the main grid element.
  * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`
  * @part helper - a replica grid showed when `show-helper` is true

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

@@ -1,7 +1,10 @@
-import type { Color } from '../../types/shared';
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
- * Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
+ * An SVG loader / helper. Comes bundled with font-awesome pro icons & ONT pictogram and device icons.
+ * Lazily loads SVG as icons become visible.
+ *
+ * @status stable
+ * @version 1.0.0
  */
 export declare class Icon {
     private io?;
@@ -10,20 +13,22 @@ export declare class Icon {
     isVisible: boolean;
     isLoading: boolean;
     /**
-     * Color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element.
      */
-    color?: Color;
+    color: 'primary' | 'neutral';
     /**
      * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)
      */
     role: string;
+    setAriaLabel(): void;
     /**
      * Specifies the label to use for accessibility. Defaults to the icon name.
      */
     ariaLabel: string;
+    updateRole(): void;
     /**
      * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+     * By default, when an 'arrow' or 'chevron' icon is used, it will flip automatically when detecting `dir="rtl"` on the document or closest ancestor.
      */
     flipRtl?: boolean;
     /**
@@ -41,22 +46,24 @@ export declare class Icon {
      */
     icon?: any;
     /**
-     * The size of the icon.
-     * Available options are: `"small"` and `"large"`.
+     * The size of the icon. `auto` automatically sizes according to the font-size of the parent element.
+     * *Note*: size will be different on 'pictogram' and 'device' vs 'font awesome' icons.
      */
-    size?: 'small' | 'large';
+    size?: 'small' | 'regular' | 'large' | 'xl' | 'auto';
     /**
      * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.
      * Default, `true`.
      */
     lazy: boolean;
-    udpateRole(): void;
-    setAriaLabel(): void;
+    loadIcon(): void;
+    /** Emitted when the icon has finished loading. */
+    nanoLoad: EventEmitter;
+    /** Emitted when the icon fails to load. */
+    nanoError: EventEmitter;
+    private waitUntilVisible;
+    private isRtl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;
-    private waitUntilVisible;
-    loadIcon(): void;
-    private isRtl;
     render(): any;
 }

package/dist/types/components/icon-button/icon-button.d.ts

@@ -1,5 +1,8 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
-/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+/** Simple icon-only buttons designed to be used for actions and in toolbars.
+ *
+ * @version 1.0.0
+ * @status stable
  *
  * @part base - the main control (either `<a />` or `<button />`)
  * @part icon - a `<nano-icon />` component
@@ -45,9 +48,6 @@ export declare class IconButton implements ComponentInterface {
      */
     private findForm;
     private handleClick;
-    componentDidLoad(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     private content;
     render(): any;
 }

package/dist/types/components/icon-item/icon-item.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Icon Items are a standard way of displaying a Pictogram or Device Icon with some concise text.
+ *
+ * @status new
+ * @version 8.0.0
+ * @type CSS Only
+ *
+ * @slot icon - The icon of the icon item. Appears first.
+ * @slot title - The title of the icon item.
+ * @slot content - The main content of the icon item.
+ */
+export declare class NanoIconItem {
+    /** The layout of the icon items. Defaults to portrait. */
+    layout?: 'portrait' | 'landscape';
+    /** The size of the icon. Defaults to regular */
+    size?: 'regular' | 'large';
+}

package/dist/types/components/in-page-nav/in-page-nav.d.ts

@@ -0,0 +1,52 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**\
+ * In-page navigation allows users to quickly find different sections on a page.
+ *
+ * @status new
+ * @version 8.0.0
+ *
+ * @slot default - The default slot.
+ * @slot mobile - An escape hatch to add a custom mobile nav to override the provided one.
+ * @slot back - For a link to navigate back to the previous section.
+ * @slot accessory - To add nav accessories, such as a text input.
+ *
+ * @part root - The root element of the navigation.
+ */
+export declare class NanoInPageNav implements ComponentInterface {
+    /** The breakpoint (in px) at which the nav will switch from large to small screen styles. Defaults to 767 */
+    breakpoint?: number;
+    /** Whether the headers should be sticky (small screen only). Defaults to true */
+    stickyHeaders?: boolean;
+    el: HTMLElement;
+    isMobile: boolean;
+    private stickyClass;
+    private stuckClass;
+    private stickyObserver;
+    private slotCtrl;
+    componentDidLoad(): void;
+    /**
+     * Checks if the current screen width is less than or equal to the breakpoint.
+     * If it is, it transforms the desktop navigation into a mobile one.
+     * If not, it transforms the mobile navigation back into a desktop one.
+     */
+    private updateNavForBreakpoint;
+    private initStickiness;
+    disconnectedCallback(): void;
+    /**
+     * Transforms the desktop navigation into a mobile one by wrapping the <ul> elements in collapsible nano-details elements.
+     * Maintains the original attributes of the <a> elements.
+     */
+    private transformToMobile;
+    /**
+     * Creates a nano-details element with the given label and submenu.
+     * Optionally, a href can be provided to set the data-href attribute,
+     * so we can use it to reinstate the link on desktop.
+     */
+    private createDetails;
+    /**
+     * Transforms the mobile navigation back into a desktop one by removing the nano-details wrappers
+     * and restoring the original <ul> elements, maintains the original attributes.
+     */
+    private transformToDesktop;
+    render(): any;
+}