/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Scale } from "../interfaces.js";

/**
 * @cssproperty [--calcite-filter-content-space] - Specifies the padding of the component's content.
 * @cssproperty [--calcite-filter-input-background-color] - Specifies the component's input background color.
 * @cssproperty [--calcite-filter-input-border-color] - Specifies the component's input border color.
 * @cssproperty [--calcite-filter-input-corner-radius] - Specifies the component's input corner radius.
 * @cssproperty [--calcite-filter-input-shadow] - Specifies the component's input shadow.
 * @cssproperty [--calcite-filter-input-icon-color] - Specifies the component's input icon color.
 * @cssproperty [--calcite-filter-input-text-color] - Specifies the component's input text color.
 * @cssproperty [--calcite-filter-input-placeholder-text-color] - Specifies the component's input placeholder text color.
 * @cssproperty [--calcite-filter-input-actions-background-color] - Specifies the background color of the component's input `clearable` element.
 * @cssproperty [--calcite-filter-input-actions-background-color-hover] - Specifies the background color of the component's input `clearable` element when hovered.
 * @cssproperty [--calcite-filter-input-actions-background-color-press] - Specifies the background color of the component's input `clearable` element when pressed.
 * @cssproperty [--calcite-filter-input-actions-icon-color] - Specifies the icon color of the component's input `clearable` element.
 * @cssproperty [--calcite-filter-input-actions-icon-color-hover] - Specifies the icon color of the component's input `clearable` element when hovered.
 * @cssproperty [--calcite-filter-input-actions-icon-color-press] - Specifies the icon color of the component's input `clearable` element when pressed.
 */
export abstract class Filter extends LitElement {
  /**
   * When `true`, prevents interaction and decreases the component's opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /** The component's resulting items after filtering. */
  get filteredItems(): object[];
  /** When `value` is an object, specifies the properties to match against when filtering. If not set, all properties will be matched. */
  accessor filterProps: string[] | undefined;
  /**
   * Specifies the items to filter. The component uses the values as the starting point, and returns items
   *
   * that contain the string entered in the input, using a partial match and recursive search.
   *
   * This property is needed to conduct filtering.
   */
  accessor items: object[];
  /** Specifies an accessible label for the component. */
  accessor label: string | undefined;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      label?: string;
      clear?: string;
  };
  /** Specifies the component's input placeholder text. */
  accessor placeholder: string | undefined;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /** The component's value. */
  accessor value: string;
  /**
   * Performs a filter on the component.
   *
   * This method can be useful because filtering is delayed and asynchronous.
   *
   * @param value - The filter text value.
   */
  filter(value?: string): Promise<void>;
  /**
   * Sets focus on the component.
   *
   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
   */
  setFocus(options?: FocusOptions): Promise<void>;
  /** Fires when the filter text changes. */
  readonly calciteFilterChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteFilterChange: Filter["calciteFilterChange"]["detail"];
  };
}