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

Lime Elements

import { InputType } from '../input-field/input-field.types';
/**
 * @exampleComponent limel-example-input-field-text
 * @exampleComponent limel-example-input-field-placeholder
 * @exampleComponent limel-example-input-field-text-multiple
 * @exampleComponent limel-example-input-field-number
 * @exampleComponent limel-example-input-field-autocomplete
 * @exampleComponent limel-example-input-field-icon-leading
 * @exampleComponent limel-example-input-field-icon-trailing
 * @exampleComponent limel-example-input-field-icon-both
 * @exampleComponent limel-example-input-field-showlink
 * @exampleComponent limel-example-input-field-error-icon
 * @exampleComponent limel-example-input-field-textarea
 * @exampleComponent limel-example-input-field-suffix
 * @exampleComponent limel-example-input-field-prefix
 * @exampleComponent limel-example-input-field-search
 * @exampleComponent limel-example-input-field-pattern
 * @exampleComponent limel-example-input-field-focus
 */
export declare class InputField {
  /**
   * Set to `true` to disable the field.
   * Use `disabled` to indicate that the field can normally be interacted
   * with, but is currently disabled. This tells the user that if certain
   * requirements are met, the field may become enabled again.
   */
  disabled: boolean;
  /**
   * Set to `true` to make the field read-only.
   * Use `readonly` when the field is only there to present the data it holds,
   * and will not become possible for the current user to edit.
   */
  readonly: boolean;
  /**
   * Set to `true` to indicate that the current value of the input field is
   * invalid.
   */
  invalid: boolean;
  /**
   * The input label.
   */
  label: string;
  /**
   * The placeholder text shown inside the input field, when the field is focused and empty.
   */
  placeholder: string;
  /**
   * Optional helper text to display below the input field when it has focus
   */
  helperText: string;
  /**
   * A short piece of text to display before the value inside the input field.
   * Displayed for all types except `textarea`.
   */
  prefix: string;
  /**
   * A short piece of text to display after the value inside the input field.
   * Displayed for all types except `textarea`.
   */
  suffix: string;
  /**
   * Set to `true` to indicate that the field is required.
   */
  required: boolean;
  /**
   * The value of the field.
   */
  value: string;
  /**
   * Trailing icon to show to the far right in the field.
   */
  trailingIcon: string;
  /**
   * Leading icon to show to the far left in the field.
   */
  leadingIcon: string;
  /**
   * Regular expression that the current value of the input field must match.
   * No forward slashes should be specified around the pattern.
   * Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`,
   * `password`, or `search`.
   */
  pattern: string;
  /**
   * Type of input.
   *
   * Note** regarding type `url`: `limel-input` uses the native validation
   * built into the browser for many types of input fields. The native
   * validation for `url` is very strict, and does not allow relative urls,
   * nor any other formats that are not a "fully qualified" url. To allow
   * such urls, use the type `urlAsText` instead. `urlAsText` works exactly
   * like `text` in all regards, except that it enables use of the `showLink`
   * property.
   */
  type: InputType;
  /**
   * Set to `true` to format the current value of the input field only
   * if the field is of type number.
   * The number format is determined by the current language of the browser.
   */
  formatNumber: boolean;
  /**
   * Incremental values that are valid if the field type is `number`.
   */
  step: number | 'any';
  /**
   * Maximum allowed value if input type is `number`.
   */
  max: number;
  /**
   * Minimum allowed value if input type is `number`.
   */
  min: number;
  /**
   * Maximum length of the value if type is `password`, `search`, `tel`,
   * `text`, `url`, or `urlAsText`.
   */
  maxlength: number;
  /**
   * Minimum length of the value if type is `password`, `search`, `tel`,
   * `text`, `url`, or `urlAsText`.
   */
  minlength: number;
  /**
   * list of suggestions `value` can autocomplete to.
   */
  completions: string[];
  /**
   * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to
   * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,
   * respectively. The default icon can be overridden using the `trailingIcon`
   * property.
   */
  showLink: boolean;
  /**
   * The locale to use for formatting numbers.
   */
  locale: string;
  /**
   * Emitted when the input value is changed.
   */
  private change;
  /**
   * Emitted when `trailingIcon` or `leadingIcon` is set
   * and the icon is interacted with.
   */
  private action;
  private limelInputField;
  private isFocused;
  private wasInvalid;
  showCompletions: boolean;
  private inputElement?;
  private mdcTextField;
  private completionsList;
  private portalId;
  private helperTextId;
  private labelId;
  private changeWaiting;
  constructor();
  connectedCallback(): void;
  componentDidLoad(): void;
  disconnectedCallback(): void;
  componentDidUpdate(): void;
  render(): any[];
  protected valueWatcher(newValue: string): void;
  protected completionsWatcher(): void;
  private initialize;
  private mapCompletions;
  private setFocus;
  private getContainerClassList;
  private isEmpty;
  private getCurrentValue;
  private renderInput;
  private renderTextarea;
  private layout;
  private restyleCompletionsDropDown;
  private getAdditionalProps;
  private onFocus;
  private onBlur;
  private get validationMessage();
  private hasHelperText;
  private hasHelperLine;
  private renderHelperLine;
  private renderSuffix;
  private hasSuffix;
  private renderPrefix;
  private hasPrefix;
  private isInvalid;
  private validate;
  private setInputElement;
  private renderLeadingIcon;
  private renderTrailingLinkOrButton;
  private hasLink;
  private getLink;
  private renderLinkIcon;
  private renderTrailingIcon;
  private getTrailingIcon;
  private renderFormattedNumber;
  /**
   * 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 onKeyDown;
  private handleCompletionChange;
  private renderAutocompleteList;
  private renderListResult;
  private handleKeyDownInDropdown;
  private handleCloseMenu;
  private filterCompletions;
  private handleInput;
  private changeEmitter;
  private handleChange;
  private handleIconClick;
  private handleIconKeyPress;
  private handleWheel;
}
//# sourceMappingURL=input-field.d.ts.map