@nanoporetech-digital/components 2.9.0 → 2.11.0

package/dist/types/components.d.ts

@@ -245,6 +245,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the checkbox.
          */
         "disabled": boolean;
+        /**
+          * The form element to associate the input with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
         /**
           * Returns the native input control
          */
@@ -283,7 +287,7 @@ export namespace Components {
         /**
           * Sets a custom validation message. If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`
          */
-        "setError": (message: string) => Promise<void>;
+        "setError": (message: string, updateStatus?: boolean) => Promise<void>;
         /**
           * Sets focus on the checkbox.
          */
@@ -296,6 +300,10 @@ export namespace Components {
     | 'tag'
     | 'segment'
     | 'segment-pill';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage": string;
         /**
           * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`, it's only present when `checked` is true.
          */
@@ -328,6 +336,12 @@ export namespace Components {
           * @returns `{ isValid: boolean, errorMessage: string }`
          */
         "reportValidity": (validateFirst: boolean) => Promise<ControlValidity>;
+        /**
+          * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.
+          * @param message - the error message to show
+          * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)
+         */
+        "showError": (message: string, optVal?: string) => Promise<void>;
         /**
           * Whether to show validation errors underneath input
          */
@@ -336,6 +350,10 @@ export namespace Components {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage": string;
     }
     interface NanoDatalist {
         /**
@@ -396,6 +414,10 @@ export namespace Components {
           * The order of the date parts for entry and display. e.g. dmy = dd mm yyyy
          */
         "dateOrder": 'dmy' | 'mdy' | 'ymd' | 'dym';
+        /**
+          * @readonly get the value as a `Date`
+         */
+        "dateValue": Date;
         /**
           * If `true`, the user cannot interact with the input.
          */
@@ -440,6 +462,10 @@ export namespace Components {
           * 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;
+        /**
+          * Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.
+         */
+        "isDateDisabled": DateDisabledPredicate;
         /**
           * String to place within a label element. Alternatively you may use a label slot.
          */
@@ -506,6 +532,10 @@ export namespace Components {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage": string;
         /**
           * Current value. Must be in IS0-8601 format: YYYY-MM-DD.
          */
@@ -579,6 +609,10 @@ export namespace Components {
           * Hides the dialog
          */
         "hide": () => Promise<void>;
+        /**
+          * Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`
+         */
+        "hoist": boolean;
         /**
           * 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.
          */
@@ -704,6 +738,48 @@ export namespace Components {
          */
         "tetherTo": HTMLElement;
     }
+    interface NanoFieldValidator {
+        /**
+          * Returns true if any nested fields have been changed @readonly
+         */
+        "dirty": boolean;
+        /**
+          * The current form payload as a reactive store. @readonly
+         */
+        "payload": ValueStore;
+        /**
+          * Tries to scroll to the first invalid field on submit
+         */
+        "scrollToInvalid": boolean;
+        /**
+          * Returns true if validation errors will be displayed to the user
+         */
+        "showValidation": boolean;
+        /**
+          * Returns true if all the nested fields are currently valid @readonly
+         */
+        "valid": boolean;
+        /**
+          * When should the fields perform validation. Will override / sync all nested `nano-...` controls
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * A validation callback method.
+          * @param field - The field name currently being evaluated
+          * @param value - The value of the field currently being evaluated
+          * @param fields - an array of all currently observered form fields and values
+          * @returns field names mapped to an object of status message and validity e.g. ```js {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}} ```
+         */
+        "validation": (
+    field: string,
+    value: string,
+    fields: ValueStore
+  ) => { [key: string]: { msg: string; valid?: boolean } };
+        /**
+          * Get the current validation state of all form fields. @readonly ``` { fields: NanoFormEles[]; valid: boolean; validityMessage: string; dirty: boolean; name: string | number; value: any; }[] ```
+         */
+        "validationState": ValidationState[];
+    }
     interface NanoFileUpload {
         /**
           * The accept attribute value is a string that defines the file types the file input should accept. E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document`
@@ -725,6 +801,10 @@ 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": FileWithUrl[];
+        /**
+          * The form element to associate with this input (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
         /**
           * Returns the native `<input>` element used under the hood
          */
@@ -784,6 +864,10 @@ export namespace Components {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage": string;
         /**
           * A file input's value attribute contains a DOMString that represents the path to the selected file(s). If the user selected multiple files, the value represents the first file in the list of files they selected. You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''`
          */
@@ -969,7 +1053,7 @@ export namespace Components {
         /**
           * Specifies the label to use for accessibility. Defaults to the icon name.
          */
-        "ariaLabel"?: string;
+        "ariaLabel": string;
         /**
           * Color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
          */
@@ -1024,6 +1108,10 @@ export namespace Components {
           * The name of the button, submitted as a pair with the button’s value as part of the form data.
          */
         "name"?: string;
+        /**
+          * Sets focus on the internal button
+         */
+        "setFocus": () => Promise<void>;
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
@@ -1109,7 +1197,7 @@ export namespace Components {
          */
         "floatLabel": boolean;
         /**
-          * The form element to associate the select with (its form owner). Must be the id of a form.
+          * The form element to associate the input with (its form owner). Must be the id of a form.
          */
         "form"?: string | null;
         /**
@@ -1229,6 +1317,10 @@ export namespace Components {
           * When should the field perform validation
          */
         "validateOn": 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage": string;
         /**
           * The value of the input.
          */
@@ -1559,6 +1651,10 @@ export namespace Components {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage": string;
         /**
           * The value of the select.
          */
@@ -2002,6 +2098,12 @@ declare global {
         prototype: HTMLNanoDropdownElement;
         new (): HTMLNanoDropdownElement;
     };
+    interface HTMLNanoFieldValidatorElement extends Components.NanoFieldValidator, HTMLStencilElement {
+    }
+    var HTMLNanoFieldValidatorElement: {
+        prototype: HTMLNanoFieldValidatorElement;
+        new (): HTMLNanoFieldValidatorElement;
+    };
     interface HTMLNanoFileUploadElement extends Components.NanoFileUpload, HTMLStencilElement {
     }
     var HTMLNanoFileUploadElement: {
@@ -2188,6 +2290,7 @@ declare global {
         "nano-dialog": HTMLNanoDialogElement;
         "nano-drawer": HTMLNanoDrawerElement;
         "nano-dropdown": HTMLNanoDropdownElement;
+        "nano-field-validator": HTMLNanoFieldValidatorElement;
         "nano-file-upload": HTMLNanoFileUploadElement;
         "nano-global-nav": HTMLNanoGlobalNavElement;
         "nano-global-search-results": HTMLNanoGlobalSearchResultsElement;
@@ -2480,6 +2583,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the checkbox.
          */
         "disabled"?: boolean;
+        /**
+          * The form element to associate the input with (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
         /**
           * If `true`, the checkbox will visually appear as indeterminate (only relevant for type="checkbox")
          */
@@ -2520,6 +2627,10 @@ declare namespace LocalJSX {
     | 'tag'
     | 'segment'
     | 'segment-pill';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage"?: string;
         /**
           * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`, it's only present when `checked` is true.
          */
@@ -2559,6 +2670,10 @@ declare namespace LocalJSX {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage"?: string;
     }
     interface NanoDatalist {
         /**
@@ -2631,6 +2746,10 @@ declare namespace LocalJSX {
           * The order of the date parts for entry and display. e.g. dmy = dd mm yyyy
          */
         "dateOrder"?: 'dmy' | 'mdy' | 'ymd' | 'dym';
+        /**
+          * @readonly get the value as a `Date`
+         */
+        "dateValue"?: Date;
         /**
           * If `true`, the user cannot interact with the input.
          */
@@ -2671,6 +2790,10 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.
+         */
+        "isDateDisabled"?: DateDisabledPredicate;
         /**
           * String to place within a label element. Alternatively you may use a label slot.
          */
@@ -2732,6 +2855,10 @@ declare namespace LocalJSX {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage"?: string;
         /**
           * Current value. Must be in IS0-8601 format: YYYY-MM-DD.
          */
@@ -2806,6 +2933,10 @@ declare namespace LocalJSX {
         "open"?: boolean;
     }
     interface NanoDialog {
+        /**
+          * Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...`
+         */
+        "hoist"?: boolean;
         /**
           * 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.
          */
@@ -2971,6 +3102,60 @@ declare namespace LocalJSX {
          */
         "tetherTo"?: HTMLElement;
     }
+    interface NanoFieldValidator {
+        /**
+          * Returns true if any nested fields have been changed @readonly
+         */
+        "dirty"?: boolean;
+        /**
+          * Fire on invalid form submission attempt
+         */
+        "onNanoInvalid"?: (event: CustomEvent<any>) => void;
+        /**
+          * Fired whenever the payload changes
+         */
+        "onNanoPayloadChange"?: (event: CustomEvent<ValueStore>) => void;
+        /**
+          * Fired on valid form submission. Note: if you wish to prevent a form from submitting, instead of using / preventing the native `submit` event, use this event ```js ele.addEventListener('nanoSubmit', (e) => {   e.preventDefault() }) ```
+         */
+        "onNanoSubmit"?: (event: CustomEvent<any>) => void;
+        /**
+          * The current form payload as a reactive store. @readonly
+         */
+        "payload"?: ValueStore;
+        /**
+          * Tries to scroll to the first invalid field on submit
+         */
+        "scrollToInvalid"?: boolean;
+        /**
+          * Returns true if validation errors will be displayed to the user
+         */
+        "showValidation"?: boolean;
+        /**
+          * Returns true if all the nested fields are currently valid @readonly
+         */
+        "valid"?: boolean;
+        /**
+          * When should the fields perform validation. Will override / sync all nested `nano-...` controls
+         */
+        "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * A validation callback method.
+          * @param field - The field name currently being evaluated
+          * @param value - The value of the field currently being evaluated
+          * @param fields - an array of all currently observered form fields and values
+          * @returns field names mapped to an object of status message and validity e.g. ```js {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}} ```
+         */
+        "validation"?: (
+    field: string,
+    value: string,
+    fields: ValueStore
+  ) => { [key: string]: { msg: string; valid?: boolean } };
+        /**
+          * Get the current validation state of all form fields. @readonly ``` { fields: NanoFormEles[]; valid: boolean; validityMessage: string; dirty: boolean; name: string | number; value: any; }[] ```
+         */
+        "validationState"?: ValidationState[];
+    }
     interface NanoFileUpload {
         /**
           * The accept attribute value is a string that defines the file types the file input should accept. E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document`
@@ -2992,6 +3177,10 @@ 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"?: FileWithUrl[];
+        /**
+          * The form element to associate with this input (its form owner). Must be the id of a form.
+         */
+        "form"?: string | null;
         /**
           * Visually hide the label - but make it accessible.
          */
@@ -3049,6 +3238,10 @@ declare namespace LocalJSX {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage"?: string;
         /**
           * A file input's value attribute contains a DOMString that represents the path to the selected file(s). If the user selected multiple files, the value represents the first file in the list of files they selected. You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''`
          */
@@ -3398,7 +3591,7 @@ declare namespace LocalJSX {
          */
         "floatLabel"?: boolean;
         /**
-          * The form element to associate the select with (its form owner). Must be the id of a form.
+          * The form element to associate the input with (its form owner). Must be the id of a form.
          */
         "form"?: string | null;
         /**
@@ -3521,6 +3714,10 @@ declare namespace LocalJSX {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage"?: string;
         /**
           * The value of the input.
          */
@@ -3894,6 +4091,10 @@ declare namespace LocalJSX {
           * When should the field perform validation
          */
         "validateOn"?: 'dirty' | 'submit' | 'submitThenDirty';
+        /**
+          * Current validation message - if any. @readonly
+         */
+        "validityMessage"?: string;
         /**
           * The value of the select.
          */
@@ -4252,6 +4453,7 @@ declare namespace LocalJSX {
         "nano-dialog": NanoDialog;
         "nano-drawer": NanoDrawer;
         "nano-dropdown": NanoDropdown;
+        "nano-field-validator": NanoFieldValidator;
         "nano-file-upload": NanoFileUpload;
         "nano-global-nav": NanoGlobalNav;
         "nano-global-search-results": NanoGlobalSearchResults;
@@ -4303,6 +4505,7 @@ declare module "@stencil/core" {
             "nano-dialog": LocalJSX.NanoDialog & JSXBase.HTMLAttributes<HTMLNanoDialogElement>;
             "nano-drawer": LocalJSX.NanoDrawer & JSXBase.HTMLAttributes<HTMLNanoDrawerElement>;
             "nano-dropdown": LocalJSX.NanoDropdown & JSXBase.HTMLAttributes<HTMLNanoDropdownElement>;
+            "nano-field-validator": LocalJSX.NanoFieldValidator & JSXBase.HTMLAttributes<HTMLNanoFieldValidatorElement>;
             "nano-file-upload": LocalJSX.NanoFileUpload & JSXBase.HTMLAttributes<HTMLNanoFileUploadElement>;
             "nano-global-nav": LocalJSX.NanoGlobalNav & JSXBase.HTMLAttributes<HTMLNanoGlobalNavElement>;
             "nano-global-search-results": LocalJSX.NanoGlobalSearchResults & JSXBase.HTMLAttributes<HTMLNanoGlobalSearchResultsElement>;

package/dist/types/utils/store/get-set.d.ts

@@ -1,4 +1,4 @@
-export declare const urlSet: (object: object, to?: 'hash' | 'query', win?: Window, method?: 'replace' | 'push') => void;
+export declare const urlSet: (id: string, data: object, to?: 'hash' | 'query', win?: Window, method?: 'replace' | 'push') => void;
 export declare const urlGet: (key: string, to?: 'hash' | 'query', win?: Window) => any;
 export declare const sessionSet: (key: string, object: object, win?: Window) => void;
 export declare const sessionGet: (key: string, win?: Window) => any;