@nanoporetech-digital/components 8.0.0-alpha.8 → 8.0.0-alpha.9

package/dist/types/components/date-input/date-input.d.ts

@@ -5,8 +5,7 @@ import type { Dropdown } from '../dropdown/dropdown';
 import type { DateInputChangeEventDetail, DuetLocalizedText, LocalDateOpts } from './date-input-interface';
 import type { DateDisabledPredicate } from '../date-picker/date-picker-interface';
 /**
- * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
- * It has specific options for localisation, date formatting and validation.
+ * Enables date selection and input in a form.
  *
  * @version 1.0.0
  * @status deprecated

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

@@ -76,6 +76,11 @@ export declare class GlobalNav implements ComponentInterface {
     private _mainMenuBar;
     get mainMenuBar(): HTMLElement;
     set mainMenuBar(el: HTMLElement);
+    /**
+     * Manually triggers the main menu bar resize behaviour.
+     * This can be useful if you append new children to the global-nav
+     */
+    triggerResize(): Promise<void>;
     shouldResize: boolean;
     breakpoint: 0 | 1 | 2 | 3 | 4;
     breakpointChanged(): void;

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

@@ -31,6 +31,7 @@ export declare class NanoInPageNav implements ComponentInterface {
      */
     private updateNavForBreakpoint;
     private initStickiness;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Transforms the desktop navigation into a mobile one by wrapping the <ul> elements in collapsible nano-details elements.

package/dist/types/components/menu-drawer/menu-drawer.d.ts

@@ -1,23 +1,22 @@
 /**
- * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
- * Shows menu item logos only on minimised, expands to show entire menu item.
- * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
- * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+ *
+ * Display navigation items in a collapsible drawer at the side of a UI.
+ *
+ * @status stable
+ * @version 1.0.0
+ *
  * @slot foot - nav items to be placed at the bottom of the drawer
  * @slot - default slot for nav items
  */
 export declare class MenuDrawer {
     private containerDiv;
     private contentDiv;
-    private measureEle;
     private globalNav;
     private children;
-    private io;
-    private currHeight;
+    private ro;
+    private slotCtrl;
     private el;
     reset: boolean;
-    widthOk: boolean;
-    heightOk: boolean;
     isLoading: boolean;
     hide: boolean;
     /**
@@ -25,32 +24,18 @@ export declare class MenuDrawer {
      */
     open: boolean;
     /**
-     * Save open state to localStorage
-     */
-    saveState: boolean;
-    /**
-     * Screen width to hide the menu drawer and move the items into the nano-global-nav
+     * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
      */
     hideWidth: number;
-    /**
-     * Should element hide and move items into the nano-global-nav when items are cut off
-     * (this will only work when nano-menu-drawer is displayed at full screen)
-     */
-    hideHeight: boolean;
     cancelNavItemEvents(ev: CustomEvent): void;
     openChange(): void;
-    widthChange(): void;
-    hideHeightChange(): void;
     private moveItemsToGlobalNav;
     private moveItemsToDrawer;
-    private onWindowResize;
+    private onResize;
     private toggle;
-    private onToggleKeyDown;
-    private attachIO;
-    handleGlobalNavReady(e: CustomEvent & {
-        target: HTMLNanoGlobalNavElement;
-    }): void;
+    private attachRO;
     componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     render(): any;

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

@@ -13,8 +13,15 @@ import type { NavItemEventDetail } from './nav-item-interface';
  * @part trigger--button - the controlling `<button>` element
  * @part trigger--anchor - the controlling <a> element
  * @part trigger-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
- * @part secondary-wrapper - the div surrounding slotted secondary content
- * @part secondary-mask - the div that is added when secondary content is shown
+ * @part label - the label text of the nav item
+ * @part modal - the div that contains the secondary content panel
+ * @part modal--open - the div that contains the secondary content panel when open
+ * @part modal--close - the div that contains the secondary content panel when closed
+ * @part modal-content - the div that contains the secondary content panel content
+ * @part modal-content--open - the div that contains the secondary content panel content when open
+ * @part modal-mask - the div that covers the screen when the secondary content panel is open
+ * @part close-button - the div that contains the close button for the secondary content panel
+ * @part close-button-icon - the icon inside the close button for the secondary content panel
  *
  * @version 1.0.0
  * @status stable
@@ -40,8 +47,6 @@ export declare class NavItem implements ComponentInterface {
     checkbox: boolean;
     /** Whether secondary menus should close on blur */
     closeOnBlur: boolean;
-    /** Will show an indicator badge - only when placed in a nano-menu-draw */
-    notification: boolean;
     /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose: EventEmitter<NavItemEventDetail>;
     /** Emitted when the nav item opens it's secondary navigation. */

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

@@ -34,7 +34,7 @@ export declare class Option implements OptionInterface {
      */
     disabled: boolean;
     /** You can add extra meta for this option. When displayed in a list, users
-     * search / filter via extra related terms. Another usecase is 'endonyms'
+     * search / filter via extra related terms.
      */
     filterMeta: string;
     /** Setting an href will render an `<a>` element */

package/dist/types/components/resize-observe/resize-observe.d.ts

@@ -3,6 +3,9 @@ import { ResizeStateChangeEventDetail } from './resize-observe-interface';
 /**
  * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
  *
+ * @status stable
+ * @version 1.0.0
+ *
  * @slot - Main slot for any content.
  * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
  * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off

package/dist/types/components.d.ts

@@ -869,8 +869,7 @@ export namespace Components {
         "type": 'select' | 'selectMulti' | 'input';
     }
     /**
-     * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-     * It has specific options for localisation, date formatting and validation.
+     * Enables date selection and input in a form.
      * @version 1.0.0
      * @status deprecated
      * @deprecated - use `nano-input` with `type="date"` instead.
@@ -1608,6 +1607,10 @@ export namespace Components {
           * Send the current search term and selected index to a nested `nano-global-search-results`
          */
         "submitSearch": () => Promise<void>;
+        /**
+          * Manually triggers the main menu bar resize behaviour.  This can be useful if you append new children to the global-nav
+         */
+        "triggerResize": () => Promise<void>;
     }
     /**
      * Nanopore Global Search results component
@@ -2268,19 +2271,13 @@ export namespace Components {
         "type": 'menu' | 'listbox' | 'nav';
     }
     /**
-     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-     * Shows menu item logos only on minimised, expands to show entire menu item.
-     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     * Display navigation items in a collapsible drawer at the side of a UI.
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoMenuDrawer {
         /**
-          * Should element hide and move items into the nano-global-nav when items are cut off (this will only work when nano-menu-drawer is displayed at full screen)
-          * @default true
-         */
-        "hideHeight": boolean;
-        /**
-          * Screen width to hide the menu drawer and move the items into the nano-global-nav
+          * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
           * @default 576
          */
         "hideWidth": number;
@@ -2289,11 +2286,6 @@ export namespace Components {
           * @default true
          */
         "open": boolean;
-        /**
-          * Save open state to localStorage
-          * @default true
-         */
-        "saveState": boolean;
     }
     /**
      * Show more or less from a collection of items.
@@ -2347,11 +2339,6 @@ export namespace Components {
           * @default null
          */
         "href": string;
-        /**
-          * Will show an indicator badge - only when placed in a nano-menu-draw
-          * @default false
-         */
-        "notification": boolean;
         /**
           * Whether a secondary menu should be or is currently open
           * @default false
@@ -2384,7 +2371,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms. Another usecase is 'endonyms'
+          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms.
           * @default ''
          */
         "filterMeta": string;
@@ -2549,6 +2536,8 @@ export namespace Components {
     }
     /**
      * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoResizeObserve {
         /**
@@ -3857,8 +3846,7 @@ declare global {
         "nanoValidate": ControlValidityEventDetail;
     }
     /**
-     * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-     * It has specific options for localisation, date formatting and validation.
+     * Enables date selection and input in a form.
      * @version 1.0.0
      * @status deprecated
      * @deprecated - use `nano-input` with `type="date"` instead.
@@ -4326,10 +4314,9 @@ declare global {
         new (): HTMLNanoMenuElement;
     };
     /**
-     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-     * Shows menu item logos only on minimised, expands to show entire menu item.
-     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     * Display navigation items in a collapsible drawer at the side of a UI.
+     * @status stable
+     * @version 1.0.0
      */
     interface HTMLNanoMenuDrawerElement extends Components.NanoMenuDrawer, HTMLStencilElement {
     }
@@ -4465,6 +4452,8 @@ declare global {
     }
     /**
      * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+     * @status stable
+     * @version 1.0.0
      */
     interface HTMLNanoResizeObserveElement extends Components.NanoResizeObserve, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNanoResizeObserveElementEventMap>(type: K, listener: (this: HTMLNanoResizeObserveElement, ev: NanoResizeObserveCustomEvent<HTMLNanoResizeObserveElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5684,8 +5673,7 @@ declare namespace LocalJSX {
         "type"?: 'select' | 'selectMulti' | 'input';
     }
     /**
-     * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-     * It has specific options for localisation, date formatting and validation.
+     * Enables date selection and input in a form.
      * @version 1.0.0
      * @status deprecated
      * @deprecated - use `nano-input` with `type="date"` instead.
@@ -7136,19 +7124,13 @@ declare namespace LocalJSX {
         "type"?: 'menu' | 'listbox' | 'nav';
     }
     /**
-     * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-     * Shows menu item logos only on minimised, expands to show entire menu item.
-     * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-     * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+     * Display navigation items in a collapsible drawer at the side of a UI.
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoMenuDrawer {
         /**
-          * Should element hide and move items into the nano-global-nav when items are cut off (this will only work when nano-menu-drawer is displayed at full screen)
-          * @default true
-         */
-        "hideHeight"?: boolean;
-        /**
-          * Screen width to hide the menu drawer and move the items into the nano-global-nav
+          * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
           * @default 576
          */
         "hideWidth"?: number;
@@ -7157,11 +7139,6 @@ declare namespace LocalJSX {
           * @default true
          */
         "open"?: boolean;
-        /**
-          * Save open state to localStorage
-          * @default true
-         */
-        "saveState"?: boolean;
     }
     /**
      * Show more or less from a collection of items.
@@ -7215,11 +7192,6 @@ declare namespace LocalJSX {
           * @default null
          */
         "href"?: string;
-        /**
-          * Will show an indicator badge - only when placed in a nano-menu-draw
-          * @default false
-         */
-        "notification"?: boolean;
         /**
           * Emitted when the nav item closes it's secondary navigation.
          */
@@ -7264,7 +7236,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms. Another usecase is 'endonyms'
+          * You can add extra meta for this option. When displayed in a list, users search / filter via extra related terms.
           * @default ''
          */
         "filterMeta"?: string;
@@ -7449,6 +7421,8 @@ declare namespace LocalJSX {
     }
     /**
      * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+     * @status stable
+     * @version 1.0.0
      */
     interface NanoResizeObserve {
         /**
@@ -8413,8 +8387,7 @@ declare module "@stencil/core" {
              */
             "nano-datalist": LocalJSX.NanoDatalist & JSXBase.HTMLAttributes<HTMLNanoDatalistElement>;
             /**
-             * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.
-             * It has specific options for localisation, date formatting and validation.
+             * Enables date selection and input in a form.
              * @version 1.0.0
              * @status deprecated
              * @deprecated - use `nano-input` with `type="date"` instead.
@@ -8561,10 +8534,9 @@ declare module "@stencil/core" {
              */
             "nano-menu": LocalJSX.NanoMenu & JSXBase.HTMLAttributes<HTMLNanoMenuElement>;
             /**
-             * Menu drawer - digital specific navigation strip designed to be open (default) or closed.
-             * Shows menu item logos only on minimised, expands to show entire menu item.
-             * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.
-             * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.
+             * Display navigation items in a collapsible drawer at the side of a UI.
+             * @status stable
+             * @version 1.0.0
              */
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
             /**
@@ -8604,6 +8576,8 @@ declare module "@stencil/core" {
             "nano-rating": LocalJSX.NanoRating & JSXBase.HTMLAttributes<HTMLNanoRatingElement>;
             /**
              * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+             * @status stable
+             * @version 1.0.0
              */
             "nano-resize-observe": LocalJSX.NanoResizeObserve & JSXBase.HTMLAttributes<HTMLNanoResizeObserveElement>;
             /**

package/dist/types/stencil-public-runtime.d.ts

@@ -846,7 +846,7 @@ export declare namespace JSXBase {
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
         name?: string;
-        onToggle?: (event: Event) => void;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1552,6 +1552,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1568,6 +1575,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1586,10 +1597,6 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
-        onBeforeToggle?: (event: Event) => void;
-        onBeforeToggleCapture?: (event: Event) => void;
-        onToggle?: (event: Event) => void;
-        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

package/dist/types/utils/testing/index.d.ts

@@ -0,0 +1,50 @@
+import { E2EPage } from '@stencil/core/testing';
+import * as axe from 'axe-core';
+declare global {
+    interface Window {
+        axe: typeof axe;
+    }
+}
+export interface NanoE2EPage extends E2EPage, Pick<PuppeteerPage, 'screenshot' | 'viewport'> {
+    reportA11y: (contextQuery?: string) => Promise<string>;
+}
+type NanoE2EPageOptions = {
+    html: string;
+    viewportWidth: number;
+    viewportHeight?: number;
+    dir: 'ltr' | 'rtl';
+    padding?: string;
+};
+export declare class E2EPlayGround<T> {
+    props: Partial<T>;
+    viewportHeight: number;
+    /** element template string. Add `{{ attrs }}` to place the attributes */
+    template: string;
+    cssVars: {
+        [key: string]: string;
+    };
+    viewportWidth: number;
+    page: NanoE2EPage;
+    tag: string;
+    constructor(setup: {
+        template: string;
+        tag: string;
+    } | string);
+    private get attrs();
+    private get css();
+    newPage(props?: Partial<T>, docOpts?: {
+        dir?: 'rtl' | 'ltr';
+        padding?: string;
+    }): Promise<NanoE2EPage>;
+    reportA11y(): Promise<string>;
+    component(): Promise<import("@stencil/core/testing").E2EElement>;
+    componentQuery(selectorStr: string, shadow?: boolean): Promise<any>;
+}
+export declare function getFocusedElement(page: E2EPage, shadowEleSelector?: string): Promise<any>;
+export declare function clickOnElement(page: E2EPage, elem: ElementHandle<Element>, x?: number, y?: number): Promise<void>;
+export declare function createPage(optionsOrHtml?: string | NanoE2EPageOptions): Promise<NanoE2EPage>;
+export declare const kebabize: (str: any) => any;
+export declare const screenshotSettings: (dirname: string) => MatchImageSnapshotOptions;
+export declare const waitForVisibleSnippet: (selector: any) => string;
+export declare const stringifyFormSnippet = "\n<div id=\"form-result\"></div>\n<script>\n  var form = document.querySelector('form');\n  var result = document.querySelector('#form-result');\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    var data = new FormData(event.target);\n    var object = {};\n    data.forEach((value, key) => {\n        // Reflect.has in favor of: object.hasOwnProperty(key)\n        if(!Reflect.has(object, key)){\n            object[key] = value;\n            return;\n        }\n        if(!Array.isArray(object[key])){\n            object[key] = [object[key]];\n        }\n        object[key].push(value);\n    });\n    result.innerHTML = JSON.stringify(object);\n  })\n</script>";
+export {};