@nanoporetech-digital/components 6.6.1 → 6.8.0

package/dist/types/components/more-less/more-less.d.ts

@@ -0,0 +1,35 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * A simple component to show more or less elements.
+ *
+ * @slot less - a button displayed when all fewer are shown. When clicked will show elements
+ * @slot more - a button displayed when all items are shown. When clicked will hide elements
+ * @slot - default slot displaying children elements to show or hide
+ *
+ * @part button-wrapper - wraps the 'more' / 'less' buttons
+ * @part button-wrapper--more - wraps the 'more' button
+ * @part button-wrapper--less - wraps the 'less' button
+ */
+export declare class Rating implements ComponentInterface {
+  private mo;
+  slottedElements: HTMLElement[];
+  host: HTMLNanoMoreLessElement;
+  /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */
+  show: boolean;
+  /** Optional JS selector to target which elements to hide or show */
+  childrenSelector: string;
+  /** The maximum number of items to show when `show` is true.
+   * Excess items will be hidden. */
+  maxToShow: number;
+  /** Only show the 'show more' button */
+  noHideBtn: boolean;
+  get children(): HTMLCollectionOf<Element> | NodeListOf<Element>;
+  handleShowHideElements(): void;
+  private slotChangeObserver;
+  private processSlottedContent;
+  private handleClick;
+  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -19,7 +19,7 @@ export declare class Table implements ComponentInterface {
   /** 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) => void | Promise<string>;
+  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.

package/dist/types/components.d.ts

@@ -1128,6 +1128,10 @@ export namespace Components {
      * and should be a direct child of <nano-global-nav>
      */
     interface NanoGlobalSearchResults {
+        /**
+          * Manually close the search panel
+         */
+        "closeSearch": () => Promise<void>;
     }
     /**
      * A lightweight, context-aware CSS grid implementation.
@@ -1616,6 +1620,27 @@ export namespace Components {
          */
         "saveState": boolean;
     }
+    /**
+     * A simple component to show more or less elements.
+     */
+    interface NanoMoreLess {
+        /**
+          * Optional JS selector to target which elements to hide or show
+         */
+        "childrenSelector": string;
+        /**
+          * The maximum number of items to show when `show` is true. Excess items will be hidden.
+         */
+        "maxToShow": number;
+        /**
+          * Only show the 'show more' button
+         */
+        "noHideBtn": boolean;
+        /**
+          * The default state. `false` - excess items are hidden. `true` - excess items are shown.
+         */
+        "show": boolean;
+    }
     /**
      * Nav items to be used with the various nav items.
      * [Globla-Nav](/story/compounds-global-nav)
@@ -2459,7 +2484,7 @@ export namespace Components {
          */
         "customRenderer": (
     node: any,
-    cell: HTMLElement
+    cell: HTMLElement | DocumentFragment
   ) => void | Promise<string>;
         /**
           * 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
@@ -3078,6 +3103,15 @@ declare global {
         prototype: HTMLNanoMenuDrawerElement;
         new (): HTMLNanoMenuDrawerElement;
     };
+    /**
+     * A simple component to show more or less elements.
+     */
+    interface HTMLNanoMoreLessElement extends Components.NanoMoreLess, HTMLStencilElement {
+    }
+    var HTMLNanoMoreLessElement: {
+        prototype: HTMLNanoMoreLessElement;
+        new (): HTMLNanoMoreLessElement;
+    };
     /**
      * Nav items to be used with the various nav items.
      * [Globla-Nav](/story/compounds-global-nav)
@@ -3314,6 +3348,7 @@ declare global {
         "nano-intersection-observe": HTMLNanoIntersectionObserveElement;
         "nano-menu": HTMLNanoMenuElement;
         "nano-menu-drawer": HTMLNanoMenuDrawerElement;
+        "nano-more-less": HTMLNanoMoreLessElement;
         "nano-nav-item": HTMLNanoNavItemElement;
         "nano-option": HTMLNanoOptionElement;
         "nano-overflow-nav": HTMLNanoOverflowNavElement;
@@ -5029,6 +5064,27 @@ declare namespace LocalJSX {
          */
         "saveState"?: boolean;
     }
+    /**
+     * A simple component to show more or less elements.
+     */
+    interface NanoMoreLess {
+        /**
+          * Optional JS selector to target which elements to hide or show
+         */
+        "childrenSelector"?: string;
+        /**
+          * The maximum number of items to show when `show` is true. Excess items will be hidden.
+         */
+        "maxToShow"?: number;
+        /**
+          * Only show the 'show more' button
+         */
+        "noHideBtn"?: boolean;
+        /**
+          * The default state. `false` - excess items are hidden. `true` - excess items are shown.
+         */
+        "show"?: boolean;
+    }
     /**
      * Nav items to be used with the various nav items.
      * [Globla-Nav](/story/compounds-global-nav)
@@ -5928,7 +5984,7 @@ declare namespace LocalJSX {
          */
         "customRenderer"?: (
     node: any,
-    cell: HTMLElement
+    cell: HTMLElement | DocumentFragment
   ) => void | Promise<string>;
         /**
           * 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
@@ -6133,6 +6189,7 @@ declare namespace LocalJSX {
         "nano-intersection-observe": NanoIntersectionObserve;
         "nano-menu": NanoMenu;
         "nano-menu-drawer": NanoMenuDrawer;
+        "nano-more-less": NanoMoreLess;
         "nano-nav-item": NanoNavItem;
         "nano-option": NanoOption;
         "nano-overflow-nav": NanoOverflowNav;
@@ -6319,6 +6376,10 @@ declare module "@stencil/core" {
              * 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.
              */
             "nano-menu-drawer": LocalJSX.NanoMenuDrawer & JSXBase.HTMLAttributes<HTMLNanoMenuDrawerElement>;
+            /**
+             * A simple component to show more or less elements.
+             */
+            "nano-more-less": LocalJSX.NanoMoreLess & JSXBase.HTMLAttributes<HTMLNanoMoreLessElement>;
             /**
              * Nav items to be used with the various nav items.
              * [Globla-Nav](/story/compounds-global-nav)

package/dist/types/utils/custom-template.d.ts

@@ -0,0 +1,60 @@
+import { VNode } from '../stencil-public-runtime';
+import { JSXBase } from '../stencil-public-runtime';
+/** A JSX `createElement` function passed to rendering functions.
+ * You can use this to create markup outside of JSX environments
+ * e.g. https://reactjs.org/docs/react-without-jsx.html */
+interface HFunc<T> {
+  (tag: any): T;
+}
+interface HFunc<T> {
+  (tag: any, data: any): T;
+}
+interface HFunc<T> {
+  (tag: any, text: string): T;
+}
+interface HFunc<T> {
+  (sel: any, children: Array<T | undefined | null>): T;
+}
+interface HFunc<T> {
+  (sel: any, data: any, text: string): T;
+}
+interface HFunc<T> {
+  (sel: any, data: any, children: Array<T | undefined | null>): T;
+}
+interface HFunc<T> {
+  (sel: any, data: any, children: T): T;
+}
+type LibJSX = Record<string, any>;
+type JSXRender = VNode | VNode[] | LibJSX | LibJSX[];
+type TplReturn = JSXRender | string | Element | undefined;
+type TplResult = TplReturn | Promise<string>;
+type DropFirst<T extends unknown[]> = T extends [any, ...infer U] ? U : never;
+export type CustomRenderer = (node: any, cell: HTMLElement | DocumentFragment) => void | Promise<string>;
+export type TemplateFunc<T> = (createElement: HFunc<JSXRender>, props?: T) => TplResult;
+type TemplateCall = (...args: any) => TplResult;
+type WrapProps<T extends TemplateCall> = {
+  parentTag: string;
+  attrs?: JSXBase.HTMLAttributes;
+  template: T;
+  args?: DropFirst<Parameters<T>>;
+};
+/**
+ * A functional component to handle custom rendering.
+ * Usage:
+ *  @Prop() template = (_createElement: typeof h, exampleArg1: number, exampleArg2: boolean) => { if (exampleArg1) return <button>yay</button }
+ *  // Optional
+ * @Prop() customRenderer: CustomRenderer
+ *
+ * <CustomRender
+ *   parentTag='div'
+ *   attrs={{ onClick: e => this.handleClick(e), class: 'button-wrapper' }}
+ *   template={this.template}
+ *   args={[3, true]}
+ * />
+ *
+ * @param props - renderer template function, arguments to pass to the renderer function, parental wrapper tag (and attributes)
+ * @param children - other virtual nodes to render
+ * @returns a jsx vnode
+ */
+export declare function CustomRender<T extends TemplateCall>(props: WrapProps<T>, children?: any): VNode;
+export {};

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-10-02T11:59:32",
+  "timestamp": "2024-11-07T10:18:25",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.2",
@@ -7291,10 +7291,6 @@
           "name": "part",
           "text": "burger-content - the main content area of the overflow / burger menu"
         },
-        {
-          "name": "part",
-          "text": "sticker - the `nano-sticker` wrapping the main nav-bar"
-        },
         {
           "name": "part",
           "text": "bars - the main wrapper around the `main-bar` and `search-bar` nav bars"
@@ -7953,10 +7949,6 @@
         {
           "name": "search-bar",
           "docs": "the search bar that appears under the main nav menu bar"
-        },
-        {
-          "name": "sticker",
-          "docs": "the `nano-sticker` wrapping the main nav-bar"
         }
       ],
       "dependents": [],
@@ -7966,8 +7958,7 @@
         "nano-icon",
         "nano-input",
         "nano-nav-item",
-        "nano-global-nav-user-profile",
-        "nano-sticker"
+        "nano-global-nav-user-profile"
       ],
       "dependencyGraph": {
         "nano-global-nav": [
@@ -7976,8 +7967,7 @@
           "nano-icon",
           "nano-input",
           "nano-nav-item",
-          "nano-global-nav-user-profile",
-          "nano-sticker"
+          "nano-global-nav-user-profile"
         ],
         "nano-select": [
           "nano-icon",
@@ -8075,7 +8065,19 @@
       "docsTags": [],
       "usage": {},
       "props": [],
-      "methods": [],
+      "methods": [
+        {
+          "name": "closeSearch",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "closeSearch() => Promise<void>",
+          "parameters": [],
+          "docs": "Manually close the search panel",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "nanoSearchGoBack",
@@ -11373,6 +11375,152 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/more-less/more-less.tsx",
+      "encapsulation": "scoped",
+      "tag": "nano-more-less",
+      "readme": "# nano-more-less\n\n\n",
+      "docs": "A simple component to show more or less elements.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "less - a button displayed when all fewer are shown. When clicked will show elements"
+        },
+        {
+          "name": "slot",
+          "text": "more - a button displayed when all items are shown. When clicked will hide elements"
+        },
+        {
+          "name": "slot",
+          "text": "- default slot displaying children elements to show or hide"
+        },
+        {
+          "name": "part",
+          "text": "button-wrapper - wraps the 'more' / 'less' buttons"
+        },
+        {
+          "name": "part",
+          "text": "button-wrapper--more - wraps the 'more' button"
+        },
+        {
+          "name": "part",
+          "text": "button-wrapper--less - wraps the 'less' button"
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "childrenSelector",
+          "type": "string",
+          "mutable": false,
+          "attr": "children-selector",
+          "reflectToAttr": false,
+          "docs": "Optional JS selector to target which elements to hide or show",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "maxToShow",
+          "type": "number",
+          "mutable": false,
+          "attr": "max-to-show",
+          "reflectToAttr": false,
+          "docs": "The maximum number of items to show when `show` is true.\nExcess items will be hidden.",
+          "docsTags": [],
+          "default": "3",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "noHideBtn",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "no-hide-btn",
+          "reflectToAttr": false,
+          "docs": "Only show the 'show more' button",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "show",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "show",
+          "reflectToAttr": true,
+          "docs": "The default state. `false` - excess items are hidden. `true` - excess items are shown.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "default slot displaying children elements to show or hide"
+        },
+        {
+          "name": "less",
+          "docs": "a button displayed when all fewer are shown. When clicked will show elements"
+        },
+        {
+          "name": "more",
+          "docs": "a button displayed when all items are shown. When clicked will hide elements"
+        }
+      ],
+      "parts": [
+        {
+          "name": "button-wrapper",
+          "docs": "wraps the 'more' / 'less' buttons"
+        },
+        {
+          "name": "button-wrapper--less",
+          "docs": "wraps the 'less' button"
+        },
+        {
+          "name": "button-wrapper--more",
+          "docs": "wraps the 'more' button"
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "./src/components/nav-item/nav-item.tsx",
       "encapsulation": "shadow",
@@ -16222,8 +16370,7 @@
       "parts": [],
       "dependents": [
         "nano-dialog",
-        "nano-drawer",
-        "nano-global-nav"
+        "nano-drawer"
       ],
       "dependencies": [],
       "dependencyGraph": {
@@ -16232,9 +16379,6 @@
         ],
         "nano-drawer": [
           "nano-sticker"
-        ],
-        "nano-global-nav": [
-          "nano-sticker"
         ]
       }
     },
@@ -17108,14 +17252,17 @@
         },
         {
           "name": "customRenderer",
-          "type": "(node: any, cell: HTMLElement) => void | Promise<string>",
+          "type": "(node: any, cell: HTMLElement | DocumentFragment) => void | Promise<string>",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "Function called whenever `col.cellTemplate` renders an unknown object.\nThe function should render a valid HTMLElement to the cell arg.\nExample usage - render JSX from a 3rd party lib and append the result to the cell element.",
           "docsTags": [],
           "values": [
             {
-              "type": "(node: any, cell: HTMLElement) => void"
+              "type": "(node: any, cell: HTMLElement"
+            },
+            {
+              "type": "DocumentFragment) => void"
             },
             {
               "type": "Promise<string>"

package/docs-vscode.json

@@ -2404,6 +2404,31 @@
         }
       ]
     },
+    {
+      "name": "nano-more-less",
+      "description": {
+        "kind": "markdown",
+        "value": "A simple component to show more or less elements."
+      },
+      "attributes": [
+        {
+          "name": "children-selector",
+          "description": "Optional JS selector to target which elements to hide or show"
+        },
+        {
+          "name": "max-to-show",
+          "description": "The maximum number of items to show when `show` is true.\nExcess items will be hidden."
+        },
+        {
+          "name": "no-hide-btn",
+          "description": "Only show the 'show more' button"
+        },
+        {
+          "name": "show",
+          "description": "The default state. `false` - excess items are hidden. `true` - excess items are shown."
+        }
+      ]
+    },
     {
       "name": "nano-nav-item",
       "description": {