@nanoporetech-digital/components 1.15.6 → 2.1.0

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

@@ -4,25 +4,31 @@ 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.
- * @slot inline-button - suitable for inline action buttons or icons that may add extra contextual information
+ * @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 legacy - you can use this slot to wrap any old inputs / labels. This will set appropriate defaults for the nano-input
+ * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information
  */
 export declare class Input implements ComponentInterface {
   private nativeInput?;
   private inputId;
   private didBlurAfterEdit;
-  private errorContainer?;
   private rtl;
   private mo?;
   private charCount;
   private hasRendered;
+  private _nativeInputWrap;
+  private get nativeInputWrap();
+  private set nativeInputWrap(value);
   hasFocus: boolean;
-  isLegacy: boolean;
   hasLabelSlot: boolean;
-  hasButtonSlot: boolean;
   hasHelperSlot: boolean;
+  errorMessage: string;
+  datalist: HTMLNanoDatalistElement;
+  setDataListOpts(): void;
   el: HTMLNanoInputElement;
   /**
    * This will be true when the control is in an invalid state.
@@ -182,7 +188,7 @@ export declare class Input implements ComponentInterface {
   /**
    * Emitted when a keyboard input occurred.
    */
-  nanoInput: EventEmitter<KeyboardEvent>;
+  nanoInput: EventEmitter<InputEvent>;
   /**
    * Emitted when the value has changed.
    */
@@ -230,12 +236,11 @@ export declare class Input implements ComponentInterface {
    */
   showError(message: string): Promise<void>;
   onReset(e: any): void;
+  handleBlur(e: KeyboardEvent | MouseEvent): void;
   private shouldClearOnEdit;
   private getValue;
   private validate;
   private onInput;
-  private handleDocumentMouseDown;
-  private handleDocumentKeyDown;
   private onBlur;
   private onFocus;
   private onKeydown;
@@ -248,6 +253,5 @@ export declare class Input implements ComponentInterface {
   disconnectedCallback(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;
-  private renderLabel;
   render(): any;
 }

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

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+declare type ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;
 /**
- * @slot - The menu's content, including menu items, menu dividers, and menu labels.
+ * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
+ * Manages focus state / active.
+ * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.
  */
 export declare class Menu {
   private ignoreMouseEvents;
@@ -9,25 +12,36 @@ export declare class Menu {
   private typeToSelect;
   private typeToSelectTimeout;
   private el;
+  /** get the focus state of the menu @readonly */
+  get hasFocus(): boolean;
+  private _hasFocus;
+  /** changes the role of the underlying control - sometimes required for semantics */
+  type: 'menu' | 'listbox';
+  /** an accessible label */
+  label: string;
   /** Emitted when the menu gains focus. */
   nanoFocus: EventEmitter;
   /** Emitted when the menu loses focus. */
   nanoBlur: EventEmitter;
   /** Emitted when a menu item is selected. */
-  nanoSelect: EventEmitter;
-  connectedCallback(): void;
+  nanoSelect: EventEmitter<HTMLNanoOptionElement | HTMLNanoNavItemElement>;
   /** Sets focus on the menu. */
   setFocus(): Promise<void>;
   /** Removes focus from the menu. */
   removeFocus(): Promise<void>;
-  private getItems;
-  private getActiveItem;
-  private setActiveItem;
-  private scrollItemIntoView;
+  /** Sets the current active item */
+  showActiveElement(): Promise<void>;
+  /** Removes any active item's state */
+  resetActiveItem(): Promise<void>;
+  get getItems(): ValidElement[];
+  get activeItem(): ValidElement;
+  get selectedItem(): ValidElement;
+  private setActiveFocusItem;
+  handleBlur(e: KeyboardEvent | MouseEvent): void;
   private handleFocus;
-  private handleBlur;
   private handleClick;
   private handleKeyDown;
   private handleMouseOver;
   render(): any;
 }
+export {};

package/dist/types/components/option/option-interface.d.ts

@@ -0,0 +1,7 @@
+export interface OptionInterface {
+  label?: string;
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  filterMeta?: string;
+}

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

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { OptionInterface } from '../../interface';
+/**
+ * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+ *
+ * @slot - main label. Defaults to `label` or `value` prop
+ * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check
+ * @slot start - suitable for an icon or content displayed at the start of the main label
+ * @slot end - suitable for an icon or content displayed at the end of the main label
+ */
+export declare class Option implements OptionInterface {
+  private optId;
+  host: HTMLNanoOptionElement;
+  hasFocus: boolean;
+  constructor();
+  /**
+   * Value of the option
+   */
+  value: string;
+  valueChanged(): void;
+  /**
+   * Label of the option
+   */
+  label: string;
+  labelChanged(): void;
+  /**
+   * Whether this option is selected
+   */
+  selected: boolean;
+  /**
+   * Whether this option should be disabled
+   */
+  disabled: boolean;
+  /** You can add extra meta for this option. When displayed in a list, users
+   * search / filter via extra related terms. Another usecase is 'endonyms'
+   */
+  filterMeta: string;
+  /** Fired when an option is selected */
+  nanoSelect: EventEmitter<HTMLNanoOptionElement>;
+  handleKeyDown(e: KeyboardEvent): void;
+  private handleClick;
+  private get labelContent();
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -1,46 +1,52 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { Color, SelectChangeEventDetail, InputChangeEventDetail, ControlValidityEventDetail, ControlValidity } from '../../interface';
+import type { Dropdown } from '../dropdown/dropdown';
+import { OptionInterface } from '../option/option-interface';
 /**
  * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
  * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
  * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
  * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
  *
+ * @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 legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select
+ * @slot helper - helper text to accompany the form field underneath.
+ * @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 multiInput?;
-  private multiList?;
-  private selectWrap?;
-  private listItems;
+  private inputCtrl?;
   private valueItems;
   private dragVal;
   private mo?;
-  private popover;
   private selectId;
   private rtl;
-  private currLiIndex;
-  private inputSearchVal;
-  private watchValue;
   private onInit;
+  private isLegacy;
+  private _selectWrap;
+  private get selectWrap();
+  private set selectWrap(value);
+  private _datalist;
+  private get datalist();
+  private set datalist(value);
   currInsertIndex: number;
-  availOpts: any[];
   showErrorMsg: boolean;
   errorMessage: string;
   hasFocus: boolean;
-  listOpen: boolean;
-  isLegacy: boolean;
   hasLabelSlot: boolean;
   hasHelperSlot: boolean;
-  hasIconSlot: boolean;
+  inputSearchVal: string;
   el: HTMLNanoSelectElement;
   /**
    * 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.
    */
-  invalid: boolean;
+  get invalid(): boolean;
+  private _invalid;
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -63,7 +69,7 @@ export declare class Select implements ComponentInterface {
    */
   showInlineError: boolean;
   /**
-   * String to place within a label element.
+   * String to place within a label element. Alternatively use the 'label' slot
    */
   label: string;
   /**
@@ -117,14 +123,19 @@ export declare class Select implements ComponentInterface {
   /**
    * The value of the select.
    */
-  value?: string | Array<string | null>;
+  get value(): string | string[];
+  set value(val: string | string[]);
+  private _value;
   /**
-   * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]
+   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
+   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
+   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`
+   * Regardless - reading `options` will return the current component options - slotted or otherwise
    */
-  options: Array<string | {
-    label: string;
-    value?: string;
-  }>;
+  get options(): Array<OptionInterface | string>;
+  set options(opts: Array<OptionInterface | string>);
+  private _options;
+  _eOptions: OptionInterface[];
   /**
    * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
    */
@@ -138,23 +149,15 @@ export declare class Select implements ComponentInterface {
    * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
    */
   debounce: number;
-  /**
-   * Whether to use native <select> elements. Setting to false will use a similar UI as multiple="true"
-   */
-  native: boolean;
   protected debounceChanged(): void;
   protected shouldValidate(): void;
   /**
    * Update the native select element when the value changes
    */
-  protected valueChanged(): void;
-  protected optionsChanged(): void;
-  /**
-   * Setup or rip down custom combobox when select is switched from mutliple
-   */
-  protected multiChange(): void;
-  private setupMulti;
-  listOpenChange(): void;
+  valueChanged(): void;
+  /** nano-dropdown config options you can pass to the nested dropdown component */
+  dropDownConfig?: Partial<Dropdown>;
+  setDataListOpts(): void;
   /**
    * Emitted when the value has changed.
    */
@@ -206,40 +209,31 @@ export declare class Select implements ComponentInterface {
    * To clear the error you will need to re-call this method with an empty string.
    */
   showError(message: string): Promise<void>;
-  private setAvailOpts;
-  private getNativeValue;
-  private setNativeValue;
+  private get valArray();
   private isValidValues;
   private customValidate;
   private showInlineValidation;
   private handleInvalid;
-  private openList;
-  private addValue;
+  private setValue;
   private removeValue;
-  private switchValue;
-  private isSelected;
-  private getLabel;
   private slotChangeObserver;
   private processSlottedContent;
-  private onChange;
+  private getLabel;
+  handleBlur(e: KeyboardEvent | MouseEvent): void;
+  private setOptions;
+  private handleDocumentKeyDown;
   private onBlur;
   private onFocus;
   private clearSelectValue;
   private onClick;
-  private onMultiInputBlur;
   private onDragStart;
   private onDragEnd;
   private onDragLeave;
   private onMultiInput;
-  private getActiveOpt;
-  private onOptFocus;
-  private onHostClick;
-  private handleDocumentMouseDown;
-  private handleDocumentKeyDown;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;
-  private renderLabel;
   render(): any;
+  private multipleValues;
 }

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

@@ -9,8 +9,14 @@ import { StorageMethods } from '../../utils/store/component-store';
  * Tab-content can also be swiped to change tabs.
  *
  * @slot tabs - Add `nano-tab` elements to add clickable tabs.
- * @slot tab-content-header = a header bar displayed above tab content.
+ * @slot tab-content-header - a header bar displayed above tab content.
  * @slot - Add `nano-tab-content` elements to add tabbable content.
+ *
+ * @part base - the main tab-group wrapper
+ * @part nav - the bar surrounding all the tabs and nav buttons
+ * @part tabs - the wrapper around the `nano-tab` components
+ * @part active-tab-indicator - the active indicator line
+ * @part body - the wrapper around the `nano-tab-content` components
  */
 export declare class TabGroup implements ComponentInterface {
   private activeTab;
@@ -54,6 +60,10 @@ export declare class TabGroup implements ComponentInterface {
    * Either session storage, url hash (after the '#') or url query (after the '?').
    */
   storeMethod: StorageMethods;
+  /**
+   * Disable 'swipe to change tab' on devices with touch
+   */
+  disableSwipe: boolean;
   handleTabNameChange(): void;
   handlePlacementChange(): void;
   handleNoScrollControlsChange(): void;
@@ -61,19 +71,35 @@ export declare class TabGroup implements ComponentInterface {
   hideLeftBtn(): void;
   watchScrollControls(): void;
   /** Emitted when a tab is shown. */
-  nanoTabShow: EventEmitter;
+  nanoTabShow: EventEmitter<{
+    name: string;
+  }>;
   /** Emitted when a tab is hidden. */
-  nanoTabHide: EventEmitter;
+  nanoTabHide: EventEmitter<{
+    name: string;
+  }>;
+  /** Emitted when the tab is closable and the close button is activated. */
+  nanoTabWillClose: EventEmitter<{
+    name: string;
+  }>;
+  /** Emitted when a closable tab is removed. */
+  nanoTabClose: EventEmitter<{
+    name: string;
+  }>;
   /** Shows the specified tab panel. */
   show(panel: string): Promise<void>;
-  private getAllTabs;
-  private getAllPanels;
-  private getActiveTab;
+  get getAllActiveTabs(): HTMLNanoTabElement[];
+  get getAllTabs(): HTMLNanoTabElement[];
+  get getAllPanels(): HTMLNanoTabContentElement[];
+  get getActiveTab(): HTMLNanoTabElement;
   private updateScrollControls;
   private setActiveTab;
   private setAriaLabels;
   private syncActiveTabIndicator;
   private getNavWidth;
+  handleTabClose(ev: CustomEvent & {
+    target: HTMLNanoTabElement;
+  }): void;
   private handleClick;
   private handleKeyDown;
   private handleTabScroll;

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

@@ -1,4 +1,4 @@
-import { ComponentInterface } from '../../stencil-public-runtime';
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
  * @slot - The tab's label.
  */
@@ -12,9 +12,14 @@ export declare class Tab implements ComponentInterface {
   active: boolean;
   /** Set to true to draw the tab in an active state. */
   disabled: boolean;
+  /** When true, the tab will be rendered with a close icon. */
+  closable: boolean;
+  /** Emitted when the tab is closable and the close button is activated. */
+  nanoTabClose: EventEmitter;
   /** Sets focus to the tab. */
   setFocus(): Promise<void>;
   /** Removes focus from the tab. */
   removeFocus(): Promise<void>;
+  private handleCloseClick;
   render(): any;
 }