@nanoporetech-digital/components 2.8.0 → 2.10.1

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/form-control/form-control.d.ts

@@ -6,6 +6,7 @@ interface FormControlWrapProps {
   labelId: string;
   label: string;
   moreId: string;
+  helperEndId: string;
   type?: TextFieldTypes;
   showInlineError: boolean;
   hasHelperSlot: boolean;
@@ -18,6 +19,7 @@ interface FormControlWrapProps {
   showCharCount?: boolean;
   maxlength?: number;
   charCount?: number;
+  hasHelperEndSlot?: boolean;
 }
 interface FormControlProps {
   clearControl: boolean;

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/input/input.d.ts

@@ -4,12 +4,14 @@ import { Color, ControlValidity, ControlValidityEventDetail, InputChangeEventDet
  * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.
 
 It is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more.
+The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
  * @slot start - suitable for inline action buttons or icons that may add extra contextual information
  * @slot end - suitable for inline action buttons or icons that may add extra contextual information
  * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
+ * @slot helper-end - helper text to accompany the form field on the side.
  * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information
  */
 export declare class Input implements ComponentInterface {
@@ -23,9 +25,11 @@ export declare class Input implements ComponentInterface {
   private _nativeInputWrap;
   private get nativeInputWrap();
   private set nativeInputWrap(value);
+  constructor();
   hasFocus: boolean;
   hasLabelSlot: boolean;
   hasHelperSlot: boolean;
+  hasHelperEndSlot: boolean;
   errorMessage: string;
   datalist: HTMLNanoDatalistElement;
   setDataListOpts(): void;
@@ -36,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.
    */
@@ -160,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/resize-observe/resize-observe.d.ts

@@ -8,7 +8,6 @@ import type { ResizeStateChangeEventDetail } from '../../interface';
 export declare class ResizeObserve implements ComponentInterface {
   private ro;
   private appliedStates;
-  private el;
   host: HTMLNanoResizeObserveElement;
   currentWidth: number;
   currentHeight: number;

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

@@ -14,30 +14,35 @@ import { OptionInterface } from '../option/option-interface';
  * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
+ * @slot helper-end - helper text to accompany the form field on the side.
  * @slot down-arrow - use this to replace the default down arrow
  * @slot - default slot; nest `nano-option` elements
  */
 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;
   hasFocus: boolean;
   hasLabelSlot: boolean;
   hasHelperSlot: boolean;
+  hasHelperEndSlot: boolean;
   inputSearchVal: string;
   el: HTMLNanoSelectElement;
   /**
@@ -45,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"`.
@@ -218,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;