@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
70 lines (69 loc) • 2.59 kB
TypeScript
import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { FormComponent } from "../../utils/form";
import { InteractiveComponent } from "../../utils/interactive";
import { LabelableComponent } from "../../utils/label";
import { LoadableComponent } from "../../utils/loadable";
import { Appearance, Layout, Scale, Width } from "../interfaces";
/**
* @slot - A slot for adding `calcite-segmented-control-item`s.
*/
export declare class SegmentedControl implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent {
el: HTMLCalciteSegmentedControlElement;
/** Specifies the appearance style of the component. */
appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
/** When `true`, interaction is prevented and the component is displayed with lower opacity. */
disabled: boolean;
/**
* The ID of the form that will be associated with the component.
*
* When not set, the component will be associated with its ancestor form element, if any.
*/
form: string;
/**
* When `true`, the component must have a value in order for the form to submit.
*
* @internal
*/
required: boolean;
/** Defines the layout of the component. */
layout: Layout;
/**
* Specifies the name of the component.
*
* Required to pass the component's `value` on form submission.
*/
name: string;
/** Specifies the size of the component. */
scale: Scale;
/** The component's `selectedItem` value. */
value: string;
valueHandler(value: string): void;
/**
* The component's selected item `HTMLElement`.
*
* @readonly
*/
selectedItem: HTMLCalciteSegmentedControlItemElement;
protected handleSelectedItemChange<T extends HTMLCalciteSegmentedControlItemElement>(newItem: T, oldItem: T): void;
/** Specifies the width of the component. */
width: Extract<"auto" | "full", Width>;
componentWillLoad(): void;
componentDidLoad(): void;
connectedCallback(): void;
disconnectedCallback(): void;
componentDidRender(): void;
render(): VNode;
protected handleClick: (event: MouseEvent) => void;
protected handleSelected(event: Event): void;
protected handleKeyDown(event: KeyboardEvent): void;
/** Fires when the `calcite-segmented-control-item` selection changes. */
calciteSegmentedControlChange: EventEmitter<void>;
/** Sets focus on the component. */
setFocus(): Promise<void>;
labelEl: HTMLCalciteLabelElement;
formEl: HTMLFormElement;
defaultValue: SegmentedControl["value"];
onLabelClick(): void;
private getItems;
private selectItem;
}