@nanoporetech-digital/components 2.9.0 → 2.11.0

package/dist/types/components/field-validator/field-validator.d.ts

@@ -0,0 +1,125 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ObservableMap } from '@stencil/store';
+declare type NanoFormEles = HTMLNanoInputElement | HTMLNanoCheckboxElement | HTMLNanoSelectElement | HTMLNanoDateInputElement | HTMLNanoFileUploadElement;
+interface ValueStore {
+  [key: string]: any;
+}
+interface ValidationState {
+  fields: NanoFormEles[];
+  valid: boolean;
+  validityMessage: string;
+  dirty: boolean;
+  name: string | number;
+  value: any;
+}
+/**
+ * A toolbox for `nano-...` form fields and form validation.
+ *
+ * - Easy to add validation accross field dependencies - e.g. "When Field1 contains '123' Field2 must contain '456'"
+ * - Easy access to whole form and individual field validity states
+ * - Easy access to form data payload
+ * - Scroll to invalid field on submit
+ */
+export declare class FieldValidator implements ComponentInterface {
+  host: HTMLNanoFieldValidatorElement;
+  store: ObservableMap<ValueStore>;
+  userForm: HTMLFormElement;
+  submitted: boolean;
+  userFormChange(): void;
+  private get activeForm();
+  private set activeForm(value);
+  private _activeForm;
+  private mo;
+  private fields;
+  private internalValidate;
+  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */
+  validateOn?: 'dirty' | 'submit' | 'submitThenDirty';
+  /** Sync up validateOn with all fields */
+  validateOnChange(): void;
+  /** Tries to scroll to the first invalid field on submit */
+  scrollToInvalid: boolean;
+  /** Returns true if any nested fields have been changed @readonly */
+  get dirty(): boolean;
+  _dirty: boolean;
+  /** Returns true if all the nested fields are currently valid @readonly */
+  get valid(): boolean;
+  _valid: boolean;
+  /** The current form payload as a reactive store. @readonly */
+  get payload(): ValueStore;
+  /** Returns true if validation errors will be displayed to the user */
+  get showValidation(): boolean;
+  /** Get the current validation state of all form fields. @readonly
+   * ```
+   {
+      fields: NanoFormEles[];
+      valid: boolean;
+      validityMessage: string;
+      dirty: boolean;
+      name: string | number;
+      value: any;
+    }[]
+  ```
+   */
+  get validationState(): ValidationState[];
+  /** 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;
+    };
+  };
+  /** Fired whenever the payload changes */
+  nanoPayloadChange: EventEmitter<ValueStore>;
+  /**
+   * 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()
+   * })
+   * ```
+   */
+  nanoSubmit: EventEmitter;
+  /** Fire on invalid form submission attempt */
+  nanoInvalid: EventEmitter;
+  private attachSlotObserver;
+  /** Checks for new `nano-...` fields and adds them to our watch array and value store */
+  private setupFields;
+  /** Loops through all `nano-...` fields and extracts their values into our store */
+  private setFieldValue;
+  /** Checks for user defined validations */
+  private validate;
+  /**
+   * Utility to smooth out setting error messages
+   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)
+   * @param field
+   * @param msg
+   */
+  private setFieldError;
+  /** Loops through all store entries and checks field validity */
+  private validateAllFields;
+  private scrollToFirstInvalid;
+  private submitForm;
+  /** Fired whenever store values change and potentially checks validity */
+  private handleStoreChange;
+  /** Handles field value changes and passes to store */
+  private handleFieldChange;
+  /** Handles default field validation events */
+  private handleFormInvalid;
+  /** stops default form submission, checks if valid, then submits manually  */
+  private handleSubmit;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}
+export {};

package/dist/types/components/file-upload/file-upload.d.ts

@@ -58,11 +58,17 @@ export declare class FileUpload implements ComponentInterface {
   showInlineError: boolean;
   /** When should the field perform validation */
   validateOn?: 'dirty' | 'submit' | 'submitThenDirty';
+  /** The form element to associate with this input (its form owner). Must be the id of a form. */
+  form?: string | null;
   protected shouldValidate(): void;
   _invalid: 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. @readonly */
   get invalid(): boolean;
+  /**
+   * Current validation message - if any. @readonly
+   */
+  get validityMessage(): string;
   /** 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
@@ -96,6 +102,7 @@ export declare class FileUpload implements ComponentInterface {
   showError(message: string): Promise<void>;
   globalClickHandler(e: Event): void;
   globalKeydownHandler(e: KeyboardEvent): void;
+  onReset(e: any): void;
   private onClearClick;
   private onBlur;
   private onFocus;
@@ -103,6 +110,7 @@ export declare class FileUpload implements ComponentInterface {
   private checkFileSize;
   private checkFileType;
   private validate;
+  private showInlineValidation;
   private slotChangeObserver;
   private processSlottedContent;
   private addNewFiles;

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

@@ -16,7 +16,7 @@ export declare class Icon {
   /**
    * Specifies the label to use for accessibility. Defaults to the icon name.
    */
-  ariaLabel?: string;
+  ariaLabel: string;
   /**
    * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
    */

package/dist/types/components/icon-button/icon-button.d.ts

@@ -23,6 +23,8 @@ export declare class IconButton implements ComponentInterface {
   /** Specifies where to display the linked URL. Only applies when an `href` is provided.
    * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */
   target: string | undefined;
+  /** Sets focus on the internal button */
+  setFocus(): Promise<void>;
   componentDidLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;

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

@@ -25,6 +25,7 @@ export declare class Input implements ComponentInterface {
   private _nativeInputWrap;
   private get nativeInputWrap();
   private set nativeInputWrap(value);
+  constructor();
   hasFocus: boolean;
   hasLabelSlot: boolean;
   hasHelperSlot: boolean;
@@ -39,6 +40,10 @@ export declare class Input implements ComponentInterface {
    */
   get invalid(): boolean;
   _invalid: boolean;
+  /**
+   * Current validation message - if any. @readonly
+   */
+  get validityMessage(): string;
   /**
    * The color to use from the application's color palette.
    */
@@ -163,7 +168,7 @@ export declare class Input implements ComponentInterface {
    */
   type: TextFieldTypes;
   /**
-   * 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;
   /**

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

@@ -20,19 +20,22 @@ import { OptionInterface } from '../option/option-interface';
  */
 export declare class Select implements ComponentInterface {
   private nativeSelect?;
-  private inputCtrl?;
   private valueItems;
   private dragVal;
   private mo?;
   private selectId;
   private rtl;
   private onInit;
+  private get inputCtrl();
+  private set inputCtrl(value);
+  private _inputCtrl?;
   private _selectWrap;
   private get selectWrap();
   private set selectWrap(value);
   private _datalist;
   private get datalist();
   private set datalist(value);
+  constructor();
   currInsertIndex: number;
   showErrorMsg: boolean;
   errorMessage: string;
@@ -47,7 +50,11 @@ export declare class Select implements ComponentInterface {
    * Validity is determined by the `required` prop. Or if custom validity message is set.
    */
   get invalid(): boolean;
-  private _invalid;
+  _invalid: boolean;
+  /**
+   * Current validation message - if any. @readonly
+   */
+  get validityMessage(): string;
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -220,6 +227,7 @@ export declare class Select implements ComponentInterface {
   private slotChangeObserver;
   private processSlottedContent;
   private getLabel;
+  onReset(e: any): void;
   handleBlur(e: KeyboardEvent | MouseEvent): void;
   private setOptions;
   private handleDocumentKeyDown;

package/dist/types/components/tabs/tab.d.ts

@@ -21,5 +21,6 @@ export declare class Tab implements ComponentInterface {
   /** Removes focus from the tab. */
   removeFocus(): Promise<void>;
   private handleCloseClick;
+  private handleCloseKeydown;
   render(): any;
 }