@ukic/web-components 2.1.0-beta.9 → 2.2.0

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -1,132 +1,167 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption } from "../../utils/types";
-import { IcSearchBarBlurEventDetail } from "./ic-search-bar.types";
-import { IcValueEventDetail, IcBlurEventDetail } from "../../interface";
+import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-bar.types";
+import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types";
 import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class SearchBar {
-  el: HTMLIcSearchBarElement;
-  private inputId;
+  private anchorEl;
+  private assistiveHintEl;
+  private debounceAriaLive;
+  private hasTimedOut;
   private inputEl;
-  private menuId;
-  private searchSubmitButton;
+  private inputId;
   private menu;
   private menuCloseFromMenuChangeEvent;
-  private anchorEl;
-  private truncateValue;
-  private assistiveHintEl;
+  private menuId;
+  private preLoad;
   private preventSubmit;
-  private debounceAriaLive;
+  private prevNoOption;
+  private retryButtonClick;
+  private retryViaKeyPress;
+  private timeoutTimer;
+  private truncateValue;
+  private searchSubmitButton;
+  el: HTMLIcSearchBarElement;
+  ariaActiveDescendant: string;
+  clearButtonFocused: boolean;
+  highlightedValue: string;
+  open: boolean;
+  searchSubmitFocused: boolean;
+  showClearButton: boolean;
   /**
-   * The label for the search bar.
+   * The automatic capitalisation of the text value as it is entered/edited by the user.
+   * Available options: "off", "none", "on", "sentences", "words", "characters".
    */
-  label: string;
+  autocapitalize: string;
   /**
-   * If `true`, the search bar will require a value.
+   * The state of autocompletion the browser can apply on the text value.
    */
-  required?: boolean;
+  autocomplete?: IcAutocompleteTypes;
+  /**
+   * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+   */
+  autocorrect?: IcAutocorrectStates;
+  /**
+   * If `true`, the form control will have input focus when the page loads.
+   */
+  autofocus: boolean;
+  /**
+   * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
+   */
+  charactersUntilSuggestion: number;
   /**
    * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
-   * If `true`, the readonly state will be set.
+   * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
+   * If `true`, all options provided will be displayed.
    */
-  readonly?: boolean;
+  disableFilter?: boolean;
   /**
-   * The placeholder value to display.
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
    */
-  placeholder?: string;
+  debounce?: number;
+  /**
+   * The text displayed when there are no options in the option list.
+   */
+  emptyOptionListText: string;
+  /**
+   * If `true`, the search bar will be focused when component loaded.
+   */
+  focusOnLoad?: boolean;
   /**
    * Specify whether the search bar fills the full width of the container.
    * If `true`, this overrides the --input-width CSS variable.
    */
   fullWidth?: boolean;
   /**
-   * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
-   * If `true`, all options provided will be displayed.
+   * The helper text that will be displayed for additional field guidance.
    */
-  disableFilter?: boolean;
+  helperText?: string;
   /**
    * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel?: boolean;
   /**
-   * The helper text that will be displayed for additional field guidance.
+   * The hint text for the hidden assistive description element.
    */
-  helperText?: string;
+  hintText?: string;
   /**
-   * If `true`, the small styling will be applied to the search bar.
+   * The label for the search bar.
    */
-  small?: boolean;
+  label: string;
   /**
-   * The value of the search input.
+   * Trigger loading state when fetching options asyncronously
    */
-  value: string;
+  loading?: boolean;
   /**
-   * The automatic capitalisation of the text value as it is entered/edited by the user.
-   * Available options: "off", "none", "on", "sentences", "words", "characters".
+   * Change the message displayed when external loading times out.
    */
-  autocapitalize: string;
+  loadingErrorLabel?: string;
   /**
-   * The state of autocompletion the browser can apply on the text value.
+   * Change the message displayed whilst the options are being loaded externally.
    */
-  autocomplete?: IcAutocompleteTypes;
+  loadingLabel?: string;
   /**
-   * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+   * The name of the control, which is submitted with the form data.
    */
-  autocorrect?: IcAutocorrectStates;
+  name: string;
   /**
-   * If `true`, the form control will have input focus when the page loads.
+   * The placeholder value to display.
    */
-  autofocus: boolean;
+  placeholder?: string;
   /**
-   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   * If `true`, the readonly state will be set.
    */
-  debounce?: number;
+  readonly?: boolean;
   /**
-   * The name of the control, which is submitted with the form data.
+   * If `true`, the search bar will require a value.
    */
-  name: string;
+  required?: boolean;
   /**
-   * If `true`, the value of the search will have its spelling and grammar checked.
+   * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
    */
-  spellcheck: boolean;
+  searchMode?: IcSearchBarSearchModes;
   /**
-   * The suggested search options.
+   * If `true`, the small styling will be applied to the search bar.
    */
-  options?: IcMenuOption[];
-  watchOptionsHandler(newOptions: IcMenuOption[]): void;
+  small?: boolean;
   /**
-   * If `true`, the search bar will be focused when component loaded.
+   * If `true`, the value of the search will have its spelling and grammar checked.
    */
-  focusOnLoad?: boolean;
+  spellcheck: boolean;
   /**
-   * The hint text for the hidden assistive description element.
+   * If using external filtering, set a timeout for when loading takes too long.
    */
-  hintText?: string;
+  timeout?: number;
+  loadingHandler(newValue: boolean): void;
+  filteredOptions: IcMenuOption[];
+  filteredOptionsHandler(newOptions: IcMenuOption[]): void;
   /**
-   * The text displayed when there are no options in the option list.
+   * The suggested search options.
    */
-  emptyOptionListText: string;
+  options?: IcMenuOption[];
+  watchOptionsHandler(newOptions: IcMenuOption[]): void;
   /**
-   * The number of characters until suggestions appear.
+   * The value of the search input.
    */
-  charactersUntilSuggestion: number;
+  value: string;
   watchValueHandler(newValue: string): void;
   /**
-   * Sets focus on the native `input`.
+   * Emitted when the value has changed.
    */
-  setFocus(): Promise<void>;
-  handleKeyDown(ev: CustomEvent): void;
-  handleKeyUp(ev: KeyboardEvent): void;
-  private handleSubmitSearch;
-  private handleSubmitSearchKeyDown;
+  icChange: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when value is cleared with clear button
+   */
+  icClear: EventEmitter<void>;
+  private handleClear;
   /**
    * Emitted when a keyboard input occurred.
    */
   icInput: EventEmitter<IcValueEventDetail>;
   private onInput;
-  private debounceAriaLiveUpdate;
   /**
    * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.
    */
@@ -137,20 +172,6 @@ export declare class SearchBar {
    */
   icInputFocus: EventEmitter<IcValueEventDetail>;
   private onInputFocus;
-  /**
-   * Emitted when the value has changed.
-   */
-  icChange: EventEmitter<IcValueEventDetail>;
-  /**
-   * Emitted when value is cleared with clear button
-   */
-  icClear: EventEmitter<void>;
-  private handleClear;
-  private handleMouseDown;
-  /**
-   * Emitted when the search value has been submitted
-   */
-  icSubmitSearch: EventEmitter<IcValueEventDetail>;
   /**
    * Emitted when option is highlighted within the menu
    */
@@ -164,12 +185,19 @@ export declare class SearchBar {
    */
   icClearBlur: EventEmitter<IcBlurEventDetail>;
   private handleClearBlur;
+  /**
+   * Emitted when the 'retry loading' button is clicked
+   */
+  icRetryLoad: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when the search value has been submitted
+   */
+  icSubmitSearch: EventEmitter<IcValueEventDetail>;
   /**
    * @internal - Emitted when blur is invoked from search submit button
    */
   icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;
   private handleSubmitSearchBlur;
-  private handleSubmitSearchFocus;
   /**
    * Emitted when blur is invoked from ic-search-bar
    */
@@ -178,14 +206,23 @@ export declare class SearchBar {
    * Emitted when focus is invoked from ic-search-bar
    */
   icSearchBarFocus: EventEmitter<void>;
-  open: boolean;
-  filteredOptions: IcMenuOption[];
-  ariaActiveDescendant: string;
-  showClearButton: boolean;
-  clearButtonFocused: boolean;
-  searchSubmitFocused: boolean;
-  prevNoOption: boolean;
-  highlightedValue: string;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  handleKeyDown(ev: CustomEvent): void;
+  handleKeyUp(ev: KeyboardEvent): void;
+  /**
+   * Sets focus on the native `input`.
+   */
+  setFocus(): Promise<void>;
+  private handleMouseDown;
+  private handleSubmitSearchFocus;
+  private handleSubmitSearch;
+  private debounceAriaLiveUpdate;
+  private handleSubmitSearchKeyDown;
+  private handleRetry;
+  private triggerLoading;
   private handleOptionSelect;
   private handleMenuOptionHighlight;
   private handleMenuChange;
@@ -202,9 +239,5 @@ export declare class SearchBar {
   private hadNoOptions;
   private isSubmitDisabled;
   private highlightFirstOptionAfterNoResults;
-  componentWillRender(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/ic-search-bar/ic-search-bar.types.d.ts

@@ -1,4 +1,5 @@
-import { IcValueEventDetail, IcRelatedTarget } from "../../interface";
+import { IcValueEventDetail, IcRelatedTarget } from "../../utils/types";
 export interface IcSearchBarBlurEventDetail extends IcValueEventDetail {
   relatedTarget: IcRelatedTarget;
 }
+export type IcSearchBarSearchModes = "navigation" | "query";

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

@@ -1,188 +1,226 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions } from "../../utils/types";
-import { IcValueEventDetail } from "../../interface";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
-  private nativeSelectElement;
-  private customSelectElement;
-  private searchableSelectElement;
-  private menu;
   private anchorEl;
+  private blurredBecauseButtonPressed;
+  private characterKeyPressTimer;
   private clearButton;
+  private customSelectElement;
+  private debounceAria;
+  private hasSetDefaultValue;
+  private hasTimedOut;
+  private inheritedAttributes;
+  private initialOptionsEmpty;
   private inputId;
+  private menu;
   private menuId;
-  private inheritedAttributes;
-  private debounceAria;
-  private hasSetSearchableDefaultValue;
+  private nativeSelectElement;
+  private retryButtonClick;
+  private searchableMenuItemSelected;
+  private searchableSelectElement;
+  private timeoutTimer;
+  private ungroupedOptions;
+  host: HTMLIcSelectElement;
+  ariaActiveDescendant: string;
+  clearButtonFocused: boolean;
+  debounceIcChange: number;
+  hiddenInputValue: string;
+  noOptions: IcMenuOption[];
+  open: boolean;
+  pressedCharacters: string;
+  searchableSelectInputValue: string;
   /**
-   * The label for the select.
+   * @deprecated This prop should not be used anymore.
    */
-  label: string;
+  charactersUntilSuggestions?: number;
   /**
-   * The possible selection options.
+   * If `true`, the disabled state will be set.
    */
-  options?: IcMenuOption[];
+  disabled?: boolean;
   /**
-   * If `true`, the select will require a value.
+   * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
    */
-  required?: boolean;
+  disableFilter?: boolean;
+  /**
+   * The text displayed when there are no options in the option list.
+   */
+  emptyOptionListText: string;
+  /**
+   * If `true`, the select element will fill the width of the container.
+   */
+  fullWidth: boolean;
+  /**
+   * The helper text that will be displayed for additional field guidance.
+   */
+  helperText?: string;
   /**
    * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel?: boolean;
   /**
-   * If `true`, the disabled state will be set.
+   * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
    */
-  disabled?: boolean;
+  includeDescriptionsInSearch?: boolean;
   /**
-   * If `true`, the readonly state will be set.
+   * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
    */
-  readonly?: boolean;
+  includeGroupTitlesInSearch?: boolean;
   /**
-   * The placeholder value to be displayed.
+   * The label for the select.
    */
-  placeholder?: string;
+  label: string;
   /**
-   * The helper text that will be displayed for additional field guidance.
+   * The message displayed when external loading times out.
    */
-  helperText?: string;
+  loadingErrorLabel?: string;
   /**
-   * If `true`, the small styling will be applied to the select.
+   * The message displayed whilst the options are being loaded externally.
    */
-  small?: boolean;
+  loadingLabel?: string;
   /**
-   * If `true`, the select element will fill the width of the container.
+   * The name of the control, which is submitted with the form data.
    */
-  fullWidth: boolean;
+  name?: string;
   /**
-   * The validation status - e.g. 'error' | 'warning' | 'success'.
+   * The placeholder value to be displayed.
    */
-  validationStatus?: IcInformationStatusOrEmpty;
+  placeholder?: string;
   /**
-   * The text to display as the validation message.
+   * If `true`, the readonly state will be set.
    */
-  validationText?: string;
+  readonly?: boolean;
   /**
-   * The value of the currently selected option.
+   * If `true`, the select will require a value.
    */
-  value?: string;
+  required?: boolean;
   /**
-   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
    */
-  debounce?: number;
+  searchable?: boolean;
   /**
-   * The name of the control, which is submitted with the form data.
+   * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
    */
-  name?: string;
+  searchMatchPosition?: IcSearchMatchPositions;
   /**
    * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
    */
   showClearButton?: boolean;
   /**
-   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+   * If `true`, the small styling will be applied to the select.
    */
-  searchable?: boolean;
+  small?: boolean;
   /**
-   * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+   * If using external filtering, set a timeout for when loading takes too long.
    */
-  includeDescriptionsInSearch?: boolean;
+  timeout?: number;
   /**
-   * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
    */
-  includeGroupTitlesInSearch?: boolean;
+  validationStatus?: IcInformationStatusOrEmpty;
   /**
-   * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+   * The text to display as the validation message.
    */
-  searchMatchPosition?: IcSearchMatchPositions;
+  validationText?: string;
   /**
-   * The number of characters until suggestions appear for a searchable select.
+   * If `true`, the loading state will be triggered when fetching options asyncronously.
    */
-  charactersUntilSuggestions?: number;
+  loading?: boolean;
+  loadingHandler(newValue: boolean): void;
   /**
-   * The text displayed when there are no options in the option list.
+   * The possible selection options.
    */
-  emptyOptionListText: string;
+  options?: IcMenuOption[];
+  filteredOptions: IcMenuOption[];
+  watchOptionsHandler(): void;
   /**
-   * Specify whether to disable the built in filtering for a searchable variant. For example, if options will already be filtered from external source.
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
    */
-  disableFilter?: boolean;
-  open: boolean;
-  clearButtonFocused: boolean;
-  searchableSelectInputValue: string;
-  filteredOptions: IcMenuOption[];
-  ariaActiveDescendant: string;
-  noOptions: IcMenuOption[];
-  initialValue: string;
+  debounce?: number;
   currDebounce: number;
-  debounceIcChange: number;
-  private initialRender;
-  watchOptionsHandler(): void;
   debounceChangedHandler(newValue: number): void;
+  /**
+   * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+   */
+  value?: string;
+  initialValue: string;
+  inputValueToFilter: string;
+  currValue: string;
+  valueChangedHandler(): void;
+  /**
+   * Emitted when the select loses focus.
+   */
+  icBlur: EventEmitter<void>;
   /**
    * Emitted when the value changes.
    */
   icChange: EventEmitter<IcValueEventDetail>;
   /**
-   * Emitted when clear button clicked.
+   * Emitted when the clear button is clicked.
    */
   icClear: EventEmitter<void>;
   /**
-   * Emitted when select gains focus.
+   * Emitted when the select gains focus.
    */
   icFocus: EventEmitter<void>;
   /**
-   * Emitted when select loses focus.
+   * Emitted when a keyboard input occurred.
    */
-  icBlur: EventEmitter<void>;
+  icInput: EventEmitter<IcValueEventDetail>;
   /**
-   * Emitted when option is highlighted within the menu.
-   * Highlighting a menu item will trigger an `icChange/onIcChange` due to the value being updated.
+   * Emitted when an option is highlighted within the menu.
+   * Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
    */
   icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
   /**
-   * Emitted when a keyboard input occurred.
+   * Emitted when the 'retry loading' button is clicked for a searchable variant.
    */
-  icInput: EventEmitter<IcValueEventDetail>;
-  host: HTMLIcSelectElement;
+  icRetryLoad: EventEmitter<IcValueEventDetail>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
   /**
    * Sets focus on the input box.
    */
   setFocus(): Promise<void>;
+  private handleRetry;
   private updateOnChangeDebounce;
   private emitIcChange;
   private emitImmediateIcChange;
-  private isMenuEnabled;
   private setOptionsValuesFromLabels;
+  private setUngroupedOptions;
   private setTextColor;
   private setMenuChange;
   private getLabelFromValue;
-  private getValueFromLabel;
   private getFilteredChildMenuOptions;
   private handleNativeSelectChange;
   private handleCustomSelectChange;
   private handleMenuChange;
   private handleMenuKeyPress;
+  private handleMenuValueChange;
   private handleFocusIndicatorDisplay;
   private handleMouseDown;
   private isExternalFiltering;
   private handleClick;
   private handleExpandIconMouseDown;
   private handleClear;
+  private handleCharacterKeyDown;
+  private handleNativeSelectKeyDown;
   private handleKeyDown;
   private handleClearButtonFocus;
   private handleClearButtonBlur;
+  private handleFilter;
+  private triggerLoading;
+  private getValueFromLabel;
   private handleSearchableSelectInput;
   private updateSearchableSelectResultAriaLive;
   private debounceAriaLiveUpdate;
   private getDefaultValue;
-  private setSearchableDefaultValue;
+  private setDefaultValue;
   private onFocus;
   private onBlur;
+  private onTimeoutBlur;
   private handleFormReset;
-  componentWillLoad(): void;
-  componentDidRender(): void;
-  componentWillUpdate(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }