@limetech/lime-elements/dist/types/components/picker/picker.d.ts

Lime Elements

import { Action } from '../collapsible-section/action';
import { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';
import { ListItem } from '../list/list-item.types';
import { Searcher } from '../picker/searcher.types';
import { PickerValue } from './value.types';
/**
 * @exampleComponent limel-example-picker-basic
 * @exampleComponent limel-example-picker-multiple
 * @exampleComponent limel-example-picker-icons
 * @exampleComponent limel-example-picker-pictures
 * @exampleComponent limel-example-picker-value-as-object
 * @exampleComponent limel-example-picker-value-as-object-with-actions
 * @exampleComponent limel-example-picker-empty-suggestions
 * @exampleComponent limel-example-picker-leading-icon
 * @exampleComponent limel-example-picker-static-actions
 * @exampleComponent limel-example-picker-composite
 */
export declare class Picker {
  /**
   * True if the picker should be disabled
   */
  disabled: boolean;
  /**
   * Set to `true` to disable adding and removing items,
   * but allow interaction with existing items.
   */
  readonly: boolean;
  /**
   * Text to display for the input field of the picker
   */
  label: string;
  /**
   * Search label to display in the input field when searching
   */
  searchLabel: string;
  /**
   * Optional helper text to display below the input field when it has focus
   */
  helperText: string;
  /**
   * Leading icon to show to the far left in the text field
   */
  leadingIcon: string;
  /**
   * A message to display when the search returned an empty result
   */
  emptyResultMessage: string;
  /**
   * True if the control requires a value
   */
  required: boolean;
  /**
   * Set to `true` to indicate that the current value of the input field is
   * invalid.
   */
  invalid: boolean;
  /**
   * Currently selected value or values. Where the value can be an object.
   */
  value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;
  /**
   * A search function that takes a search-string as an argument,
   * and returns a promise that will eventually be resolved with
   * an array of `ListItem`:s.
   *
   * See the docs for the type `Searcher` for type information on
   * the searcher function itself.
   */
  searcher?: Searcher;
  /**
   * Only used if no `searcher` is provided. The picker will then use a
   * default search function that filters the `allItems` based on the
   * `text` and `secondaryText` properties of the items.
   * This way, custom search functions are typically only needed when the
   * search is done on the server.
   * For performance reasons, the default searcher will never return more
   * than 20 items, but if there are more than 20 items, the rest can be
   * found by typing more characters in the search field.
   */
  allItems?: Array<ListItem<PickerValue>>;
  /**
   * True if multiple values are allowed
   */
  multiple: boolean;
  /**
   * Sets delimiters between chips. Works only when `multiple` is `true`.
   */
  delimiter: string;
  /**
   * Static actions that can be clicked by the user.
   */
  actions: Array<ListItem<Action>>;
  /**
   * Position of the custom static actions in the picker's results dropdown.
   * Can be set to `'top'` or `'bottom'`.
   */
  actionPosition: ActionPosition;
  /**
   * Scroll behavior of the custom static actions, when user scrolls
   * in the picker's results dropdown. Can be set to `'scroll'` which means
   * the action items will scroll together with the list, or `'sticky'` which
   * retains their position at the top or bottom of the drop down while
   * scrolling.
   */
  actionScrollBehavior: ActionScrollBehavior;
  /**
   * Whether badge icons should be used in the result list or not
   */
  badgeIcons: boolean;
  /**
   * Fired when a new value has been selected from the picker
   */
  private change;
  /**
   * Fired when clicking on a selected value
   */
  private interact;
  /**
   * Emitted when the user selects an action.
   */
  private action;
  private items;
  private textValue;
  private loading;
  private chips;
  private host;
  private chipSetEditMode;
  private debouncedSearch;
  private chipSet;
  private portalId;
  constructor();
  componentWillLoad(): void;
  componentDidLoad(): void;
  disconnectedCallback(): void;
  componentWillUpdate(): Promise<void>;
  render(): any[];
  protected onChangeValue(): void;
  private renderDelimiter;
  private getValueId;
  private createChips;
  private createChip;
  /**
   * Renders the dropdown with the items to pick from, or a spinner if the picker
   * is waiting for items to be received
   *
   * @returns picker dropdown
   */
  private renderDropdown;
  private getActionContent;
  private removeUnusedPropertiesOnAction;
  private shouldShowDropDownContent;
  private getDropdownContent;
  /**
   * Returns true if the picker is "full"
   * The picker is considered to be full if it has a value and only one is allowed
   *
   * @returns true if the picker is full
   */
  private isFull;
  private renderSpinner;
  private renderEmptyMessage;
  private renderListResult;
  private onListKeyDown;
  private renderPortal;
  /**
   * Check if a descendant still has focus. If not, reset text value and search result.
   */
  private handleStopEditAndBlur;
  /**
   * Input handler for the input field
   *
   * @param event - event
   */
  private handleTextInput;
  private search;
  private defaultSearcher;
  /**
   * Change handler for the list
   *
   * @param event - event
   */
  private handleListChange;
  /**
   * Change handler for the list
   *
   * @param event - event
   */
  private handleActionListChange;
  /**
   * Focus handler for the chip set
   * Prevent focus if the picker has a value and does not support multiple values
   */
  private handleInputFieldFocus;
  private handleChange;
  private handleInteract;
  /**
   * Key handler for the input field
   * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
   *
   * @param event - event
   */
  private handleInputKeyDown;
  /**
   * Key handler for the dropdown
   *
   * @param event - event
   */
  private handleDropdownKeyDown;
  private handleSearchResult;
  private handleCloseMenu;
  private clearInputField;
}
//# sourceMappingURL=picker.d.ts.map