[New component] Input search

[geospatialem]

Description

Autocomplete from https://github.com/Esri/calcite-design-system/issues/10044 would leverage this component to adopt autocomplete functionality.

User Stories

• Dynamic searching within combobox
• Similar to MUI's React autocomplete component

Acceptance Criteria

• [ ] Supports autocomplete
• [ ] Provides context to results via a live region for assistive technologies

Relevant Info

https://github.com/Esri/calcite-design-system/issues/10044

Helpful Details

No response

Priority impact

impact - p2 - want for an upcoming milestone

Esri team

Calcite (dev)

CalciteInputSearch

• New component calcite-input-search in order to setup the input as a search.

<calcite-input-search placeholder="Enter your region"></calcite-input-search>

Properties

Properties consistent with calcite-input-text

• autocomplete: string;
• disabled: boolean;
• form: string;
• icon: Boolean | IconNameOrString = true; // renders search icon when true
• iconFlipRtl: boolean;
• label: string;
• loading:boolean;
• maxLength: number;
• messageOverrides: { label: string; clear: string; };;
• minLength: number;
• name: string;
• pattern: string; // not on autocomplete
• placeholder: string;
• prefixText: string;
• readOnly = false; // not on autocomplete
• required = false;
• scale: Scale;
• status: Status = "idle";
• suffixText: string;
• validationIcon: IconNameOrString | boolean;
• validationMessage: string;
• readonly validity;
• value: string;

Global attributes supported

• autofocus: boolean; // global attribute
• enterkeyhint: boolean; // global attribute
• inputmode: boolean; // global attribute

Events

• calciteInputSearchTextChange: EventEmitter; // Fires each time a new value is typed and committed.
• calciteInputSearchTextInput: EventEmitter; // Fires each time a new value is typed.

Methods

• selectText()
• setFocus()

Slots

• actions-start
• actions-end

[github-actions[bot]]

cc @ashetland, @SkyeSeitz, @brittneytewks