@nanoporetech-digital/components 8.3.2 → 8.4.0

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

@@ -1,15 +1,21 @@
-import { EventEmitter } from '../../stencil-public-runtime';
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 /**
  * Groups multiple details elements together, allowing only one to be open at a time.
  *
  * @version 1.0
  * @status stable
  */
-export declare class NanoAccordion {
-    itemOpened?: number;
+export declare class NanoAccordion implements ComponentInterface {
+    private indexOpened?;
+    private elementOpened?;
     el: HTMLNanoAccordionElement;
+    /** Force one details element to always be open */
+    alwaysOpen: boolean;
     /** Fires when accordion elements toggle */
-    nanoToggle: EventEmitter<HTMLNanoDetailsElement>;
+    nanoToggle: EventEmitter<{
+        element: HTMLNanoDetailsElement;
+        index: number;
+    }>;
     onToggleHandler(event: CustomEvent & {
         target: HTMLNanoDetailsElement;
     }): void;

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

@@ -19,8 +19,9 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @part icon - the wrapper around both start and end icons
  * @part icon--start - the icon wrapper at the start of the ui control
  * @part icon--end - the icon wrapper at the end of the ui control
- * @part body - the wrapper around content
- * @part content - the main content wrapper
+ * @part body - the main body block
+ * @part content-wrapper - the wrapper around the content
+ * @part content - the main content
  */
 export declare class NanoDetails {
     private mo?;

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

@@ -7,6 +7,7 @@
  * @slot top-center_content - The content for the top center (links) section.
  * @slot top-end_heading - The heading for the top right section.
  * @slot top-end_content - The content for the top right (links) section.
+ * @slot middle-centre - The content for the middle centre (socials) section.
  * @slot middle-end - The content for the middle end (certifications) section.
  * @slot bottom-start - The content for the bottom left section (copyright notice - optional).
  * @slot bottom-end - The content for the right side of the bottom section (language selector).

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

@@ -57,7 +57,7 @@ export declare class GlobalNav implements ComponentInterface {
     myAccountUrl?: string;
     handleMyAccountUrl(): Promise<void>;
     /**
-     * MyAccount data automatically set via `myAccountUrl`.
+     * MyAccount data is 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)
      */

package/dist/types/components/step-accordion/step-accordion.d.ts

@@ -0,0 +1,38 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+interface Step {
+    complete: boolean;
+    title: string;
+    enabled: boolean;
+}
+/**
+ * Presents an accordion interface for a multi-step process,
+ * allowing users to see their progress and navigate back to completed steps.
+ *
+ * @version 8.4.0
+ * @status new
+ *
+ * @slot - Dynamic slots. Use `slot="step-0"`, `slot="step-1"`, etc. for each step.
+ */
+export declare class NanoStepAccordion implements ComponentInterface {
+    host: HTMLElement;
+    private nanoDetails;
+    gridWorking: boolean;
+    /** The currently active step, zero-based index */
+    activeStep: number;
+    handleActiveStepChange(newValue: number, oldValue: number): void;
+    private _steps;
+    private stepProxyHandler;
+    /** An array of steps, each with a title, completion status, and enabled state */
+    get steps(): Step[];
+    set steps(value: Step[]);
+    /** Emitted when the active step changes. Prevent default to cancel the change */
+    nanoStepActive: EventEmitter<{
+        index: number;
+        step: Step;
+    }>;
+    private handleToggle;
+    private isDetailsGridWorking;
+    componentDidLoad(): void;
+    render(): any;
+}
+export {};

package/dist/types/components/step-breadcrumb/step-breadcrumb.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+interface Step {
+    complete: boolean;
+    title: string;
+    enabled: boolean;
+    href?: string;
+}
+/**
+ * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
+ *
+ * @version 8.4.0
+ * @status new
+ */
+export declare class NanoStepBreadcrumb implements ComponentInterface {
+    host: HTMLElement;
+    calculatedWidth: string;
+    private cacheKey;
+    /** The currently active step, zero-based index */
+    activeStep: number;
+    handleActiveStepChange(newValue: number, oldValue: number): void;
+    /** Emitted when the active step changes. Prevent default to cancel the change */
+    nanoStepActive: EventEmitter<{
+        step: Step;
+        index: number;
+    }>;
+    private _steps;
+    private stepProxyHandler;
+    /** An array of steps, each with a title, completion status, and enabled state */
+    get steps(): Step[];
+    set steps(value: Step[]);
+    handleStepsChange(): void;
+    protected styles: () => string;
+    componentWillLoad(): Promise<void> | void;
+    private ControlTag;
+    render(): any;
+}
+export {};

package/dist/types/components.d.ts

@@ -64,6 +64,11 @@ export namespace Components {
      * @status stable
      */
     interface NanoAccordion {
+        /**
+          * Force one details element to always be open
+          * @default false
+         */
+        "alwaysOpen": boolean;
     }
     /**
      * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.
@@ -1572,7 +1577,7 @@ export namespace Components {
          */
         "msgUrl": string;
         /**
-          * 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)
+          * MyAccount data is 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;
         /**
@@ -3056,6 +3061,41 @@ export namespace Components {
          */
         "vertical": boolean;
     }
+    /**
+     * Presents an accordion interface for a multi-step process,
+     * allowing users to see their progress and navigate back to completed steps.
+     * @version 8.4.0
+     * @status new
+     */
+    interface NanoStepAccordion {
+        /**
+          * The currently active step, zero-based index
+          * @default 0
+         */
+        "activeStep": number;
+        /**
+          * An array of steps, each with a title, completion status, and enabled state
+          * @default []
+         */
+        "steps": Step[];
+    }
+    /**
+     * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
+     * @version 8.4.0
+     * @status new
+     */
+    interface NanoStepBreadcrumb {
+        /**
+          * The currently active step, zero-based index
+          * @default 0
+         */
+        "activeStep": number;
+        /**
+          * An array of steps, each with a title, completion status, and enabled state
+          * @default []
+         */
+        "steps": Step[];
+    }
     /**
      * A toolbox for 'sticking' items to scrolling containers.
      * @version 1.0.0
@@ -3486,6 +3526,14 @@ export interface NanoSplitPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoSplitPaneElement;
 }
+export interface NanoStepAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNanoStepAccordionElement;
+}
+export interface NanoStepBreadcrumbCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNanoStepBreadcrumbElement;
+}
 export interface NanoStickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoStickerElement;
@@ -3508,7 +3556,10 @@ export interface NanoTooltipCustomEvent<T> extends CustomEvent<T> {
 }
 declare global {
     interface HTMLNanoAccordionElementEventMap {
-        "nanoToggle": HTMLNanoDetailsElement;
+        "nanoToggle": {
+    element: HTMLNanoDetailsElement;
+    index: number;
+  };
     }
     /**
      * Groups multiple details elements together, allowing only one to be open at a time.
@@ -4690,6 +4741,54 @@ declare global {
         prototype: HTMLNanoSplitPaneElement;
         new (): HTMLNanoSplitPaneElement;
     };
+    interface HTMLNanoStepAccordionElementEventMap {
+        "nanoStepActive": { index: number; step: Step };
+    }
+    /**
+     * Presents an accordion interface for a multi-step process,
+     * allowing users to see their progress and navigate back to completed steps.
+     * @version 8.4.0
+     * @status new
+     */
+    interface HTMLNanoStepAccordionElement extends Components.NanoStepAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNanoStepAccordionElementEventMap>(type: K, listener: (this: HTMLNanoStepAccordionElement, ev: NanoStepAccordionCustomEvent<HTMLNanoStepAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNanoStepAccordionElementEventMap>(type: K, listener: (this: HTMLNanoStepAccordionElement, ev: NanoStepAccordionCustomEvent<HTMLNanoStepAccordionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNanoStepAccordionElement: {
+        prototype: HTMLNanoStepAccordionElement;
+        new (): HTMLNanoStepAccordionElement;
+    };
+    interface HTMLNanoStepBreadcrumbElementEventMap {
+        "nanoStepActive": {
+    step: Step;
+    index: number;
+  };
+    }
+    /**
+     * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
+     * @version 8.4.0
+     * @status new
+     */
+    interface HTMLNanoStepBreadcrumbElement extends Components.NanoStepBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNanoStepBreadcrumbElementEventMap>(type: K, listener: (this: HTMLNanoStepBreadcrumbElement, ev: NanoStepBreadcrumbCustomEvent<HTMLNanoStepBreadcrumbElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNanoStepBreadcrumbElementEventMap>(type: K, listener: (this: HTMLNanoStepBreadcrumbElement, ev: NanoStepBreadcrumbCustomEvent<HTMLNanoStepBreadcrumbElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNanoStepBreadcrumbElement: {
+        prototype: HTMLNanoStepBreadcrumbElement;
+        new (): HTMLNanoStepBreadcrumbElement;
+    };
     interface HTMLNanoStickerElementEventMap {
         "nanoStuck": { sticker: HTMLNanoStickerElement };
         "nanoUnstuck": { sticker: HTMLNanoStickerElement };
@@ -4894,6 +4993,8 @@ declare global {
         "nano-sortable": HTMLNanoSortableElement;
         "nano-spinner": HTMLNanoSpinnerElement;
         "nano-split-pane": HTMLNanoSplitPaneElement;
+        "nano-step-accordion": HTMLNanoStepAccordionElement;
+        "nano-step-breadcrumb": HTMLNanoStepBreadcrumbElement;
         "nano-sticker": HTMLNanoStickerElement;
         "nano-tab": HTMLNanoTabElement;
         "nano-tab-content": HTMLNanoTabContentElement;
@@ -4910,10 +5011,18 @@ declare namespace LocalJSX {
      * @status stable
      */
     interface NanoAccordion {
+        /**
+          * Force one details element to always be open
+          * @default false
+         */
+        "alwaysOpen"?: boolean;
         /**
           * Fires when accordion elements toggle
          */
-        "onNanoToggle"?: (event: NanoAccordionCustomEvent<HTMLNanoDetailsElement>) => void;
+        "onNanoToggle"?: (event: NanoAccordionCustomEvent<{
+    element: HTMLNanoDetailsElement;
+    index: number;
+  }>) => void;
     }
     /**
      * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.
@@ -6483,7 +6592,7 @@ declare namespace LocalJSX {
          */
         "msgUrl"?: string;
         /**
-          * 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)
+          * MyAccount data is 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;
         /**
@@ -8023,6 +8132,52 @@ declare namespace LocalJSX {
          */
         "vertical"?: boolean;
     }
+    /**
+     * Presents an accordion interface for a multi-step process,
+     * allowing users to see their progress and navigate back to completed steps.
+     * @version 8.4.0
+     * @status new
+     */
+    interface NanoStepAccordion {
+        /**
+          * The currently active step, zero-based index
+          * @default 0
+         */
+        "activeStep"?: number;
+        /**
+          * Emitted when the active step changes. Prevent default to cancel the change
+         */
+        "onNanoStepActive"?: (event: NanoStepAccordionCustomEvent<{ index: number; step: Step }>) => void;
+        /**
+          * An array of steps, each with a title, completion status, and enabled state
+          * @default []
+         */
+        "steps"?: Step[];
+    }
+    /**
+     * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
+     * @version 8.4.0
+     * @status new
+     */
+    interface NanoStepBreadcrumb {
+        /**
+          * The currently active step, zero-based index
+          * @default 0
+         */
+        "activeStep"?: number;
+        /**
+          * Emitted when the active step changes. Prevent default to cancel the change
+         */
+        "onNanoStepActive"?: (event: NanoStepBreadcrumbCustomEvent<{
+    step: Step;
+    index: number;
+  }>) => void;
+        /**
+          * An array of steps, each with a title, completion status, and enabled state
+          * @default []
+         */
+        "steps"?: Step[];
+    }
     /**
      * A toolbox for 'sticking' items to scrolling containers.
      * @version 1.0.0
@@ -8377,6 +8532,8 @@ declare namespace LocalJSX {
         "nano-sortable": NanoSortable;
         "nano-spinner": NanoSpinner;
         "nano-split-pane": NanoSplitPane;
+        "nano-step-accordion": NanoStepAccordion;
+        "nano-step-breadcrumb": NanoStepBreadcrumb;
         "nano-sticker": NanoSticker;
         "nano-tab": NanoTab;
         "nano-tab-content": NanoTabContent;
@@ -8758,6 +8915,19 @@ declare module "@stencil/core" {
              * @status stable
              */
             "nano-split-pane": LocalJSX.NanoSplitPane & JSXBase.HTMLAttributes<HTMLNanoSplitPaneElement>;
+            /**
+             * Presents an accordion interface for a multi-step process,
+             * allowing users to see their progress and navigate back to completed steps.
+             * @version 8.4.0
+             * @status new
+             */
+            "nano-step-accordion": LocalJSX.NanoStepAccordion & JSXBase.HTMLAttributes<HTMLNanoStepAccordionElement>;
+            /**
+             * Presents a breadcrumb navigation for steps in a process, allowing users to see their progress and navigate back to completed steps.
+             * @version 8.4.0
+             * @status new
+             */
+            "nano-step-breadcrumb": LocalJSX.NanoStepBreadcrumb & JSXBase.HTMLAttributes<HTMLNanoStepBreadcrumbElement>;
             /**
              * A toolbox for 'sticking' items to scrolling containers.
              * @version 1.0.0

package/dist/types/utils/performance.d.ts

@@ -0,0 +1 @@
+export declare function perMark(name: string, end?: boolean): void;