@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
77 lines (76 loc) • 4.01 kB
TypeScript
/// <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.
* @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"];
};
}