UNPKG

@arcgis/map-components

Version:
91 lines (90 loc) 4.3 kB
/// <reference path="../../index.d.ts" /> import type { PublicLitElement as LitElement } from "@arcgis/lumina"; import type { ComboboxItem } from "../arcgis-value-picker/types.js"; import type { T9nMeta } from "@arcgis/lumina/controllers"; /** @internal */ export abstract class ArcgisValuePickerCombobox extends LitElement { /** * If true, the component will not be destroyed automatically when it is * disconnected from the document. This is useful when you want to move the * component to a different place on the page, or temporarily hide it. If this * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-combobox/#destroy) method when you are done to * prevent memory leaks. * * @default false */ accessor autoDestroyDisabled: boolean; /** * Determines whether the user can interact with the next button. * This property is automatically set to `false` when [currentValue](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-combobox/#currentValue) matches the last index of * [items](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-combobox/#items). * * @default false * @example * ```js * const valuePicker = document.querySelector("arcgis-value-picker"); * const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox"); * * valuePickerCombobox.items = [ * { value: "ind", label: "Industrial" }, * { value: "res", label: "Residential" }, * { value: "com", label: "Commercial" } * ]; * valuePickerCombobox.currentValue = valuePickerCombobox.items[0]; * if (valuePickerCombobox.canNext === true) { * valuePicker.next(); * console.log(valuePickerCombobox.currentValue.label); // "Residential" * } * ``` */ accessor canNext: boolean; /** * Determines whether the user can interact with the play/pause button. * * @default false */ accessor canPlay: boolean; /** * Determines whether the user can interact with the previous button. * This property is automatically set to `false` when [currentValue](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-combobox/#currentValue) matches the first index of * [items](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-combobox/#items). * * @default false * @example * ```js * const valuePicker = document.querySelector("arcgis-value-picker"); * const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox"); * * valuePickerCombobox.items = [ * { value: "ind", label: "Industrial" }, * { value: "res", label: "Residential" }, * { value: "com", label: "Commercial" } * ]; * valuePickerCombobox.currentValue = valuePickerCombobox.items[1]; * if (valuePickerCombobox.canPrevious === true) { * valuePicker.previous(); * console.log(valuePickerCombobox.currentValue.label); // "Industrial" * } * ``` */ accessor canPrevious: boolean; /** The currently selected combobox item rendered by the component. */ accessor currentValue: ComboboxItem | undefined; /** * When true, the component is visually withdrawn and cannot receive user interaction. * * @default false */ accessor disabled: boolean; /** The array of combobox items that [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/) can iterate over. */ accessor items: ComboboxItem[] | undefined; /** @internal */ protected messages: { comboboxLabel: string; } & T9nMeta<{ comboboxLabel: string; }>; /** Permanently destroy the component. */ destroy(): Promise<void>; /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */ readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>; readonly "@eventTypes": { arcgisPropertyChange: ArcgisValuePickerCombobox["arcgisPropertyChange"]["detail"]; }; }