@nanoporetech-digital/components 2.10.1 → 2.13.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, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, GridSizes, IndexResult, InputChangeEventDetail, LocalDateOpts, NavItemEventDetail, OptionInterface, 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, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface.d";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
 import { PopoverPlacement } from "./utils/popover";
@@ -414,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.
          */
@@ -458,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.
          */
@@ -736,17 +744,40 @@ export namespace Components {
          */
         "dirty": boolean;
         /**
-          * The current form payload as a reactive store. @readonly
+          * By default, `nano-field-validator` will also track all native form field elements. You can add extra web-component form fields to listen to (as long as they match the standard form field spec) by using the `fieldSelector` prop.
+         */
+        "extraFieldSelector": string;
+        /**
+          * The current form payload as a reactive proxy. @readonly
          */
-        "payload": ValueStore;
+        "payload": ValidatorValueStore;
+        /**
+          * Clear all custom validation.
+          * @param validity
+         */
+        "resetValidity": () => Promise<void[]>;
         /**
           * Tries to scroll to the first invalid field on submit
          */
         "scrollToInvalid": boolean;
         /**
-          * Returns true if validation errors will be displayed to the user
+          * Sets custom validity for all / some form fields.
+          * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.
+         */
+        "setCustomValidity": (validity: { [key: string]: string; }) => Promise<void[]>;
+        /**
+          * Sets the state of the form using an object of key / value pairs.
+          * @param state - the state to load in the store
+         */
+        "setStore": (state: ValidatorValueStore) => Promise<void>;
+        /**
+          * Returns true if validation errors will be displayed to the user. @readonly
          */
         "showValidation": boolean;
+        /**
+          * The current form state as a stencil store.
+         */
+        "store": ObservableMap<ValidatorValueStore>;
         /**
           * Returns true if all the nested fields are currently valid @readonly
          */
@@ -765,7 +796,7 @@ export namespace Components {
         "validation": (
     field: string,
     value: string,
-    fields: ValueStore
+    fields: ValidatorValueStore
   ) => { [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; }[] ```
@@ -790,7 +821,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * 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
+          * 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
          */
         "files": FileWithUrl[];
         /**
@@ -1100,6 +1131,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"`.
          */
@@ -1269,6 +1304,10 @@ export namespace Components {
           * relevant to type="textarea". Default number of rows to show
          */
         "rows": number;
+        /**
+          * Sets focus and select the text on the specified `nano-input`. Use this method instead of the global `input.select()`.
+         */
+        "select": () => Promise<void>;
         /**
           * Sets focus on the specified `nano-input`. Use this method instead of the global `input.focus()`.
          */
@@ -2734,6 +2773,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.
          */
@@ -2774,6 +2817,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.
          */
@@ -3087,6 +3134,10 @@ declare namespace LocalJSX {
           * Returns true if any nested fields have been changed @readonly
          */
         "dirty"?: boolean;
+        /**
+          * By default, `nano-field-validator` will also track all native form field elements. You can add extra web-component form fields to listen to (as long as they match the standard form field spec) by using the `fieldSelector` prop.
+         */
+        "extraFieldSelector"?: string;
         /**
           * Fire on invalid form submission attempt
          */
@@ -3094,23 +3145,27 @@ declare namespace LocalJSX {
         /**
           * Fired whenever the payload changes
          */
-        "onNanoPayloadChange"?: (event: CustomEvent<ValueStore>) => void;
+        "onNanoPayloadChange"?: (event: CustomEvent<ValidatorValueStore>) => 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
+          * The current form payload as a reactive proxy. @readonly
          */
-        "payload"?: ValueStore;
+        "payload"?: ValidatorValueStore;
         /**
           * Tries to scroll to the first invalid field on submit
          */
         "scrollToInvalid"?: boolean;
         /**
-          * Returns true if validation errors will be displayed to the user
+          * Returns true if validation errors will be displayed to the user. @readonly
          */
         "showValidation"?: boolean;
+        /**
+          * The current form state as a stencil store.
+         */
+        "store"?: ObservableMap<ValidatorValueStore>;
         /**
           * Returns true if all the nested fields are currently valid @readonly
          */
@@ -3129,7 +3184,7 @@ declare namespace LocalJSX {
         "validation"?: (
     field: string,
     value: string,
-    fields: ValueStore
+    fields: ValidatorValueStore
   ) => { [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; }[] ```
@@ -3154,7 +3209,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * 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
+          * 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
          */
         "files"?: FileWithUrl[];
         /**

package/dist/types/index.d.ts

@@ -2,3 +2,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';
+export { getTabbableElements as nanoGetTabElements } from './utils/tabbable';

package/dist/types/interface.d.ts

@@ -17,6 +17,7 @@ export * from './components/resize-observe/resize-observe-interface';
 export * from './components/alert/alert-interface';
 export * from './components/file-upload/file-upload-interface';
 export * from './components/option/option-interface';
+export * from './components/field-validator/field-validator-interface';
 
 export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';
 export type PredefinedColors =

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-06-22T16:26:21",
+  "timestamp": "2022-09-13T14:34:19",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -2923,6 +2923,28 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "dateValue",
+          "type": "Date",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "readonly",
+              "text": "get the value as a `Date`"
+            }
+          ],
+          "values": [
+            {
+              "type": "Date"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -3126,6 +3148,24 @@
           "getter": true,
           "setter": false
         },
+        {
+          "name": "isDateDisabled",
+          "type": "(date: Date) => boolean",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends.",
+          "docsTags": [],
+          "default": "() => false",
+          "values": [
+            {
+              "type": "(date: Date) => boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -5335,7 +5375,7 @@
       "encapsulation": "none",
       "tag": "nano-field-validator",
       "readme": "# nano-field-validator\n\n\n",
-      "docs": "A toolbox for `nano-...` form fields and form validation.\n\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n- Scroll to invalid field on submit",
+      "docs": "A toolbox for `nano-...` form fields and form validation.\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n= Access to 2-way, data bound reactive store\n- Scroll to invalid field on submit",
       "docsTags": [],
       "usage": {},
       "props": [
@@ -5358,16 +5398,35 @@
           "getter": true,
           "setter": false
         },
+        {
+          "name": "extraFieldSelector",
+          "type": "string",
+          "mutable": false,
+          "attr": "extra-field-selector",
+          "reflectToAttr": false,
+          "docs": "By default, `nano-field-validator` will also track all native form field elements.\nYou can add extra web-component form fields to listen to\n(as long as they match the standard form field spec) by using the `fieldSelector` prop.",
+          "docsTags": [],
+          "default": "'input, select, textarea'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "payload",
-          "type": "ValueStore",
+          "type": "ValidatorValueStore",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "The current form payload as a reactive store. @readonly",
+          "docs": "The current form payload as a reactive proxy. @readonly",
           "docsTags": [],
           "values": [
             {
-              "type": "ValueStore"
+              "type": "ValidatorValueStore"
             }
           ],
           "optional": false,
@@ -5400,7 +5459,7 @@
           "mutable": false,
           "attr": "show-validation",
           "reflectToAttr": false,
-          "docs": "Returns true if validation errors will be displayed to the user",
+          "docs": "Returns true if validation errors will be displayed to the user. @readonly",
           "docsTags": [],
           "values": [
             {
@@ -5412,6 +5471,23 @@
           "getter": true,
           "setter": false
         },
+        {
+          "name": "store",
+          "type": "ObservableMap<ValidatorValueStore>",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The current form state as a stencil store.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "ObservableMap<ValidatorValueStore>"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "valid",
           "type": "boolean",
@@ -5460,7 +5536,7 @@
         },
         {
           "name": "validation",
-          "type": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
+          "type": "(field: string, value: string, fields: ValidatorValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "A validation callback method.",
@@ -5484,7 +5560,7 @@
           ],
           "values": [
             {
-              "type": "(field: string, value: string, fields: ValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }"
+              "type": "(field: string, value: string, fields: ValidatorValueStore) => { [key: string]: { msg: string; valid?: boolean; }; }"
             }
           ],
           "optional": false,
@@ -5510,7 +5586,56 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "resetValidity",
+          "returns": {
+            "type": "Promise<void[]>",
+            "docs": ""
+          },
+          "signature": "resetValidity() => Promise<void[]>",
+          "parameters": [],
+          "docs": "Clear all custom validation.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "validity"
+            }
+          ]
+        },
+        {
+          "name": "setCustomValidity",
+          "returns": {
+            "type": "Promise<void[]>",
+            "docs": ""
+          },
+          "signature": "setCustomValidity(validity: { [key: string]: string; }) => Promise<void[]>",
+          "parameters": [],
+          "docs": "Sets custom validity for all / some form fields.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error."
+            }
+          ]
+        },
+        {
+          "name": "setStore",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setStore(state: ValidatorValueStore) => Promise<void>",
+          "parameters": [],
+          "docs": "Sets the state of the form using an object of key / value pairs.",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "state - the state to load in the store"
+            }
+          ]
+        }
+      ],
       "events": [
         {
           "event": "nanoInvalid",
@@ -5523,7 +5648,7 @@
         },
         {
           "event": "nanoPayloadChange",
-          "detail": "ValueStore",
+          "detail": "ValidatorValueStore",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -5641,7 +5766,7 @@
           "type": "FileWithUrl[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "A File array that lists every selected file.\nHas an added `objectURL` property returning a `DOMString`\ncontaining an object URL that can be used to reference the contents of the specified source\nThis list has no more than one member unless the multiple attribute is specified. @readonly",
+          "docs": "A File array that lists every selected file.\nHas an added `objectURL` property returning a `DOMString`\ncontaining an object URL that can be used to reference the contents of the specified source\nThis list has no more than one member unless the multiple attribute is specified",
           "docsTags": [],
           "values": [
             {
@@ -5651,7 +5776,7 @@
           "optional": false,
           "required": false,
           "getter": true,
-          "setter": false
+          "setter": true
         },
         {
           "name": "form",
@@ -7875,7 +8000,19 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "setFocus",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setFocus() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the internal button",
+          "docsTags": []
+        }
+      ],
       "events": [],
       "listeners": [],
       "styles": [
@@ -9038,6 +9175,17 @@
             }
           ]
         },
+        {
+          "name": "select",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "select() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus and select the text on the specified `nano-input`. Use this method instead of the global\n`input.select()`.",
+          "docsTags": []
+        },
         {
           "name": "setFocus",
           "returns": {

package/docs-vscode.json

@@ -1067,20 +1067,24 @@
       "name": "nano-field-validator",
       "description": {
         "kind": "markdown",
-        "value": "A toolbox for `nano-...` form fields and form validation.\n\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n- Scroll to invalid field on submit"
+        "value": "A toolbox for `nano-...` form fields and form validation.\n- Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n= Access to 2-way, data bound reactive store\n- Scroll to invalid field on submit"
       },
       "attributes": [
         {
           "name": "dirty",
           "description": "Returns true if any nested fields have been changed @readonly"
         },
+        {
+          "name": "extra-field-selector",
+          "description": "By default, `nano-field-validator` will also track all native form field elements.\nYou can add extra web-component form fields to listen to\n(as long as they match the standard form field spec) by using the `fieldSelector` prop."
+        },
         {
           "name": "scroll-to-invalid",
           "description": "Tries to scroll to the first invalid field on submit"
         },
         {
           "name": "show-validation",
-          "description": "Returns true if validation errors will be displayed to the user"
+          "description": "Returns true if validation errors will be displayed to the user. @readonly"
         },
         {
           "name": "valid",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.10.1",
+  "version": "2.13.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -63,9 +63,7 @@
     "algoliasearch": "^4.1.0",
     "flickity": "^2.2.1",
     "focus-options-polyfill": "^1.4.0",
-    "intersection-observer": "^0.10.0",
     "qs": "^6.9.4",
-    "resize-observer-polyfill": "^1.5.1",
     "scroll-behavior-polyfill": "^2.0.13",
     "squirrelly": "8",
     "stencil-wormhole": "3.2.1"
@@ -128,5 +126,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.5.0"
   },
-  "gitHead": "16ee90b89956bb426862c57578a44ca8bbf43ec4"
+  "gitHead": "3bbc1d6f40367bb57c485de49c416000aa4abb79"
 }