@nanoporetech-digital/components 1.13.21 → 1.15.0

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, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, NavItemEventDetail, PageChangeEventDetail, PickerChangeEvent, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TextFieldTypes } from "./interface.d";
+import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, NavItemEventDetail, PageChangeEventDetail, PickerChangeEvent, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TextFieldTypes } from "./interface.d";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
 export namespace Components {
@@ -252,7 +252,7 @@ export namespace Components {
          */
         "indeterminate": boolean;
         /**
-          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
          */
         "invalid": boolean;
         /**
@@ -268,9 +268,11 @@ export namespace Components {
          */
         "removeFocus": () => Promise<void>;
         /**
-          * Checks for validity and shows the browser's validation message if the control is invalid.
+          * Get the current state of the control.
+          * @param validateFirst - perform validation first before reporting
+          * @returns `Promise<{ isValid: boolean, errorMessage: string }>`
          */
-        "reportError": () => Promise<boolean>;
+        "reportValidity": (validateFirst?: boolean) => Promise<ControlValidity>;
         /**
           * Set to true to make the field required.
          */
@@ -301,6 +303,9 @@ export namespace Components {
           * Disable all the nested form controls
          */
         "disabled": boolean | null;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
         "invalid": boolean;
         /**
           * A common label for children controls
@@ -386,6 +391,10 @@ export namespace Components {
           * Initial picker date. Will be to `value` if set. Will be today's date if nothing set. Must be in IS0-8601 format: YYYY-MM-DD.
          */
         "initialPickerDate"?: string;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
+        "invalid": boolean;
         /**
           * String to place within a label element. Alternatively you may use a label slot.
          */
@@ -492,10 +501,11 @@ export namespace Components {
          */
         "selectedDate": string;
         /**
-          * Focus to the calendar. If day set, will focus to the current selected day.
-          * @param day
+          * Focus to the calendar
+          * @param day - focus to the current selected day
+          * @param forceFocusVisible - force visible focus - required if opened via keyboad
          */
-        "setFocus": (day?: boolean) => Promise<void>;
+        "setFocus": (day?: boolean, forceFocusVisible?: boolean) => Promise<void>;
     }
     interface NanoDetails {
         /**
@@ -615,7 +625,7 @@ export namespace Components {
         /**
           * Title used to describe the dropdown content for accessibility
          */
-        "dialogTitle": string | null;
+        "dialogTitle": string;
         /**
           * The distance in pixels from which to offset the panel away from its trigger.
          */
@@ -655,6 +665,10 @@ export namespace Components {
           * The distance in pixels from which to offset the panel along its trigger.
          */
         "skidding": number;
+        /**
+          * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element. And you will still need to control when the component is opened (using show() / hide() or the `open` prop)
+         */
+        "tetherTo": HTMLElement;
     }
     interface NanoFileUpload {
         /**
@@ -676,7 +690,7 @@ export namespace Components {
         /**
           * A File array that lists every selected file. Has an added `objectURL` property returning a `DOMString` containing an object URL that can be used to reference the contents of the specified source This list has no more than one member unless the multiple attribute is specified. @readonly
          */
-        "files": { lastModified: number; type: string; name: string; size: number; objectURL: string; arrayBuffer: () => Promise<ArrayBuffer>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream<any>; text: () => Promise<string>; }[];
+        "files": FileWithUrl[];
         /**
           * Returns the native `<input>` element used under the hood
          */
@@ -1735,7 +1749,7 @@ export namespace Components {
          */
         "distance": number;
         /**
-          * Shows the tooltip.
+          * Hides the tooltip.
          */
         "hide": () => Promise<void>;
         /**
@@ -2339,7 +2353,7 @@ declare namespace LocalJSX {
          */
         "indeterminate"?: boolean;
         /**
-          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set.
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
          */
         "invalid"?: boolean;
         /**
@@ -2384,6 +2398,10 @@ declare namespace LocalJSX {
           * Disable all the nested form controls
          */
         "disabled"?: boolean | null;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
+        "invalid"?: boolean;
         /**
           * A common label for children controls
          */
@@ -2463,6 +2481,10 @@ declare namespace LocalJSX {
           * Initial picker date. Will be to `value` if set. Will be today's date if nothing set. Must be in IS0-8601 format: YYYY-MM-DD.
          */
         "initialPickerDate"?: string;
+        /**
+          * This will be true when the control is in an invalid state. Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+         */
+        "invalid"?: boolean;
         /**
           * String to place within a label element. Alternatively you may use a label slot.
          */
@@ -2601,7 +2623,7 @@ declare namespace LocalJSX {
         /**
           * The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility.
          */
-        "label"?: string;
+        "label": string;
         /**
           * Set to true to disable the footer. This will also remove the footer close button, so please ensure you  provide an easy, accessible way for users to dismiss the dialog.
          */
@@ -2721,7 +2743,7 @@ declare namespace LocalJSX {
         /**
           * Title used to describe the dropdown content for accessibility
          */
-        "dialogTitle"?: string | null;
+        "dialogTitle": string;
         /**
           * The distance in pixels from which to offset the panel away from its trigger.
          */
@@ -2769,6 +2791,10 @@ declare namespace LocalJSX {
           * The distance in pixels from which to offset the panel along its trigger.
          */
         "skidding"?: number;
+        /**
+          * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element. And you will still need to control when the component is opened (using show() / hide() or the `open` prop)
+         */
+        "tetherTo"?: HTMLElement;
     }
     interface NanoFileUpload {
         /**
@@ -2790,7 +2816,7 @@ declare namespace LocalJSX {
         /**
           * A File array that lists every selected file. Has an added `objectURL` property returning a `DOMString` containing an object URL that can be used to reference the contents of the specified source This list has no more than one member unless the multiple attribute is specified. @readonly
          */
-        "files"?: { lastModified: number; type: string; name: string; size: number; objectURL: string; arrayBuffer: () => Promise<ArrayBuffer>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream<any>; text: () => Promise<string>; }[];
+        "files"?: FileWithUrl[];
         /**
           * Visually hide the label - but make it accessible.
          */

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components/alert/alert.helpers';
 export * from './components/dialog/dialog.helpers';
 export { debounce as nanoDebounce, throttle as nanoThrottle, } from './utils/throttle';
-export { raf as nanoRaf } from './utils/utils';
+export { raf as nanoRaf } from './utils';

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

@@ -0,0 +1,49 @@
+import { E2EPage } from '@stencil/core/testing';
+import { Page as PuppeteerPage } from 'puppeteer';
+import axe from 'axe-core';
+import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
+declare global {
+  interface Window {
+    axe: typeof axe;
+  }
+}
+export interface NanoE2EPage extends E2EPage, Pick<PuppeteerPage, 'screenshot' | 'viewport'> {
+  reportA11y: (contextQuery?: string) => Promise<string>;
+}
+declare type NanoE2EPageOptions = {
+  html: string;
+  viewportWidth: number;
+  viewportHeight?: number;
+  dir: 'ltr' | 'rtl';
+};
+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';
+  }): Promise<NanoE2EPage>;
+  reportA11y(): Promise<string>;
+  component(): Promise<import("@stencil/core/testing").E2EElement>;
+  componentQuery(selectorStr: string, shadow?: boolean): Promise<import("puppeteer").ElementHandle<Element>>;
+}
+export declare function getFocusedElement(page: E2EPage, shadowEleSelector?: string): Promise<import("puppeteer").JSHandle<unknown>>;
+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 {};