@nanoporetech-digital/components 4.10.0 → 5.0.0

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

@@ -16,7 +16,6 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Hero implements ComponentInterface {
   private mo?;
   host: HTMLNanoHeroElement;
-  gridSizes: string[];
   hasIconBox: boolean;
   hasScrim: boolean;
   hasSecondaryContent: boolean;
@@ -28,7 +27,7 @@ export declare class Hero implements ComponentInterface {
   breadCrumbChange(): void;
   iconBoxItems: Element[];
   iconBoxItemChange(): void;
-  /** src for backgronund image. For more control use the `background` slot instead. */
+  /** src for background image. For more control use the `background` slot instead. */
   imgSrc?: string;
   /** Optional list string providing media sizes with corresponding image srcs.
    * i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"` */
@@ -41,7 +40,6 @@ export declare class Hero implements ComponentInterface {
   level: 'top' | 'sub';
   private slotChangeObserver;
   private processSlottedContent;
-  private handleGridChange;
   disconnectedCallback(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;

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

@@ -227,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.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountData, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
+import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountData, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
 import { PopoverPlacement } from "./utils/popover";
@@ -1118,42 +1118,49 @@ export namespace Components {
     interface NanoGlobalSearchResults {
     }
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - 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
      */
     interface NanoGrid {
-        /**
-          * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.
-         */
-        "contentPanel": boolean;
-        /**
-          * Helper to make grid items expand to full height in IE11
-         */
-        "fullHeight": boolean;
         /**
           * the number of columns the grid has at the large breakpoint.
          */
         "lCols": number;
         /**
-          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "lSize": number;
+        "lSize": number | string;
+        /**
+          * Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect
+         */
+        "lTpl"?: string;
         /**
           * the number of columns the grid has at the medium breakpoint.
          */
         "mCols": number;
         /**
-          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "mSize": number | string;
+        /**
+          * Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect
          */
-        "mSize": number;
+        "mTpl"?: string;
         /**
           * the number of columns the grid has at the small breakpoint.
          */
         "sCols": number;
         /**
-          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "sSize": number;
+        "sSize": number | string;
+        /**
+          * Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect
+         */
+        "sTpl"?: string;
         /**
           * shows a grid helper to visualise where columns are
          */
@@ -1163,33 +1170,35 @@ export namespace Components {
          */
         "xlCols": number;
         /**
-          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "xlSize": number | string;
+        /**
+          * Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect
          */
-        "xlSize": number;
+        "xlTpl"?: string;
         /**
           * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
          */
         "xxlCols": number;
+        /**
+          * Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect
+         */
+        "xxlTpl"?: string;
     }
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface NanoGridItem {
-        /**
-          * Called by parent grid to trigger new classes
-         */
-        "changeBP": (newGridSizes: GridSizes[]) => Promise<void>;
-        /**
-          * How to position this item within it's parent grid at different break points. Examples: xl-col-span-2 l-col-start-2 xxl-row-span-2 m-row-start-2
-         */
-        "gridStates": string;
     }
     /**
      * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
      */
     interface NanoHero {
         /**
-          * src for backgronund image. For more control use the `background` slot instead.
+          * src for background image. For more control use the `background` slot instead.
          */
         "imgSrc"?: string;
         /**
@@ -2622,10 +2631,6 @@ export interface NanoGlobalSearchResultsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoGlobalSearchResultsElement;
 }
-export interface NanoGridCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLNanoGridElement;
-}
 export interface NanoImgCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoImgElement;
@@ -2932,8 +2937,11 @@ declare global {
         new (): HTMLNanoGlobalSearchResultsElement;
     };
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - 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
      */
     interface HTMLNanoGridElement extends Components.NanoGrid, HTMLStencilElement {
     }
@@ -2942,6 +2950,8 @@ declare global {
         new (): HTMLNanoGridElement;
     };
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface HTMLNanoGridItemElement extends Components.NanoGridItem, HTMLStencilElement {
@@ -4438,46 +4448,49 @@ declare namespace LocalJSX {
         "onNanoSearchGoBack"?: (event: NanoGlobalSearchResultsCustomEvent<any>) => void;
     }
     /**
-     * A context-aware CSS grid implementation.
-     * Uses it's own width to choose column number - not screen width.
+     * A lightweight, context-aware CSS grid implementation.
+     * - 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
      */
     interface NanoGrid {
-        /**
-          * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.
-         */
-        "contentPanel"?: boolean;
-        /**
-          * Helper to make grid items expand to full height in IE11
-         */
-        "fullHeight"?: boolean;
         /**
           * the number of columns the grid has at the large breakpoint.
          */
         "lCols"?: number;
         /**
-          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "lSize"?: number | string;
+        /**
+          * Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect
          */
-        "lSize"?: number;
+        "lTpl"?: string;
         /**
           * the number of columns the grid has at the medium breakpoint.
          */
         "mCols"?: number;
         /**
-          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "mSize"?: number;
+        "mSize"?: number | string;
         /**
-          * Emitted when the `nano-grid` changes breakpoint
+          * Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect
          */
-        "onNanoBpChange"?: (event: NanoGridCustomEvent<string[]>) => void;
+        "mTpl"?: string;
         /**
           * the number of columns the grid has at the small breakpoint.
          */
         "sCols"?: number;
         /**
-          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
          */
-        "sSize"?: number;
+        "sSize"?: number | string;
+        /**
+          * Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect
+         */
+        "sTpl"?: string;
         /**
           * shows a grid helper to visualise where columns are
          */
@@ -4487,29 +4500,35 @@ declare namespace LocalJSX {
          */
         "xlCols"?: number;
         /**
-          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
+          * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width. Will default to `px` if no unit supplied e.g. `20rem`
+         */
+        "xlSize"?: number | string;
+        /**
+          * Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect
          */
-        "xlSize"?: number;
+        "xlTpl"?: string;
         /**
           * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)
          */
         "xxlCols"?: number;
+        /**
+          * Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect
+         */
+        "xxlTpl"?: string;
     }
     /**
+     * @deprecated - you can now use `grid-states="..."`
+     * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
      * Grid items to be used with [grid](/story/nano-components-grid) elements
      */
     interface NanoGridItem {
-        /**
-          * How to position this item within it's parent grid at different break points. Examples: xl-col-span-2 l-col-start-2 xxl-row-span-2 m-row-start-2
-         */
-        "gridStates"?: string;
     }
     /**
      * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
      */
     interface NanoHero {
         /**
-          * src for backgronund image. For more control use the `background` slot instead.
+          * src for background image. For more control use the `background` slot instead.
          */
         "imgSrc"?: string;
         /**
@@ -6119,11 +6138,16 @@ declare module "@stencil/core" {
              */
             "nano-global-search-results": LocalJSX.NanoGlobalSearchResults & JSXBase.HTMLAttributes<HTMLNanoGlobalSearchResultsElement>;
             /**
-             * A context-aware CSS grid implementation.
-             * Uses it's own width to choose column number - not screen width.
+             * A lightweight, context-aware CSS grid implementation.
+             * - 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
              */
             "nano-grid": LocalJSX.NanoGrid & JSXBase.HTMLAttributes<HTMLNanoGridElement>;
             /**
+             * @deprecated - you can now use `grid-states="..."`
+             * on any direct `nano-grid` descendent without limitation rendering `nano-grid-item` obsolete.
              * Grid items to be used with [grid](/story/nano-components-grid) elements
              */
             "nano-grid-item": LocalJSX.NanoGridItem & JSXBase.HTMLAttributes<HTMLNanoGridItemElement>;

package/dist/types/utils/constructible-style.d.ts

@@ -0,0 +1,31 @@
+import { ComponentInterface } from '../stencil-public-runtime';
+declare type ConstructibleStyleDecorator = (target: ComponentInterface, propertyKey: string) => void;
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+export declare function ConstructibleStyle(opts?: ConstructibleStyleOptions): ConstructibleStyleDecorator;
+export interface ConstructibleStyleOptions {
+  /**
+   * Set this in case an instance of a component could produce different styles based on variables.
+   * This will ensure that you get new styles for each mode.
+   * @example
+```
+@Prop() mode: string;
+@ConstructableStyle({ cacheKeyProperty: "mode" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+   */
+  cacheKeyProperty?: string;
+}
+export {};