/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { AccordionAppearance } from "./components/accordion/interfaces"; import { Alignment, Appearance, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces"; import { Placement } from "@popperjs/core"; import { ComputedPlacement, MenuPlacement, OverlayPositioning, PopperPlacement } from "./utils/popper"; import { AlertDuration, AlertPlacement, StatusColor } from "./components/alert/interfaces"; import { HeadingLevel } from "./components/functional/Heading"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; import { ButtonAlignment, ButtonAppearance, ButtonColor, DropdownIconType } from "./components/button/interfaces"; import { ChipColor } from "./components/chip/interfaces"; import { ColorAppearance, ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; import { ComboboxChildElement, ComboboxSelectionMode } from "./components/combobox/interfaces"; import { DateRangeChange } from "./components/date-picker/interfaces"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; import { SelectionMode } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; import { InputPlacement } from "./components/input/interfaces"; import { ModalBackgroundColor } from "./components/modal/interfaces"; import { PaginationDetail } from "./components/pagination/pagination"; import { ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; import { RadioAppearance } from "./components/radio-group/interfaces"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; import { TabChangeEventDetail } from "./components/tab/interfaces"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; import { TimePart } from "./utils/time"; import { TreeSelectDetail, TreeSelectionMode } from "./components/tree/interfaces"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; export namespace Components { interface CalciteAccordion { /** * specify the appearance - default (containing border), or minimal (no containing border), defaults to default */ "appearance": AccordionAppearance; /** * specify the placement of the icon in the header, defaults to end */ "iconPosition": Position; /** * specify the type of the icon in the header, defaults to chevron */ "iconType": "chevron" | "caret" | "plus-minus"; /** * specify the scale of accordion, defaults to m */ "scale": Scale; /** * specify the selection mode - multi (allow any number of open items), single (allow one open item), or single-persist (allow and require one open item), defaults to multi */ "selectionMode": "multi" | "single" | "single-persist"; } interface CalciteAccordionItem { /** * Indicates whether the item is active. */ "active": boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * pass a title for the accordion item */ "itemSubtitle"?: string; /** * pass a title for the accordion item */ "itemTitle"?: string; } interface CalciteAction { /** * Indicates whether the action is highlighted. */ "active": boolean; /** * Optionally specify the horizontal alignment of button elements with text content. */ "alignment"?: Alignment; /** * Specify the appearance style of the action, defaults to solid. */ "appearance": Extract<"solid" | "clear", Appearance>; /** * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section. */ "compact": boolean; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. */ "icon"?: string; /** * Indicates unread changes. */ "indicator": boolean; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Specifies the size of the action. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Text that accompanies the action icon. */ "text": string; /** * Indicates whether the text is displayed. */ "textEnabled": boolean; } interface CalciteActionBar { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled": boolean; /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Overflows actions that won't fit into menus. */ "overflowActions": () => Promise; /** * Disables automatically overflowing actions that won't fit into menus. */ "overflowActionsDisabled": boolean; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; /** * Specifies the size of the expand action. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": (focusId?: "expand-toggle") => Promise; } interface CalciteActionGroup { /** * Indicates number of columns. */ "columns"?: Columns; /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Text string for the actions menu. */ "intlMore"?: string; /** * Indicates the horizontal, vertical, or grid layout of the component. */ "layout": Layout; /** * Opens the action menu. */ "menuOpen": boolean; /** * Specifies the size of the action-menu. */ "scale": Scale; } interface CalciteActionMenu { /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Text string for the actions menu. */ "label": string; /** * Opens the action menu. */ "open": boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25) */ "placement": PopperPlacement; /** * Specifies the size of the menu trigger action. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; } interface CalciteActionPad { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled": boolean; /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Indicates the horizontal or vertical layout of the component. */ "layout": Layout; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; /** * Specifies the size of the expand action. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": (focusId?: "expand-toggle") => Promise; } interface CalciteAlert { /** * Is the alert currently active or not */ "active": boolean; /** * Close the alert automatically (recommended for passive, non-blocking alerts) */ "autoDismiss": boolean; /** * Duration of autoDismiss (only used with `autoDismiss`) */ "autoDismissDuration": AlertDuration; /** * Color for the alert (will apply to top border and icon) */ "color": StatusColor; /** * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon */ "icon": string | boolean; /** * string to override English close text * @default "Close" */ "intlClose": string; /** * Accessible name for the component */ "label": string; /** * specify the placement of the alert */ "placement": AlertPlacement; /** * specify the scale of the alert, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; } interface CalciteAvatar { /** * full name of the user */ "fullName": string; /** * specify the scale of the avatar, defaults to m */ "scale": Scale; /** * src to an image (remember to add a token if the user is private) */ "thumbnail": string; /** * unique id for user */ "userId": string; /** * user name */ "username": string; } interface CalciteBlock { /** * When true, this block will be collapsible. */ "collapsible": boolean; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * When true, displays a drag handle in the header. */ "dragHandle": boolean; /** * Block heading. */ "heading": string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Text string used for the actions menu * @default "Options" */ "intlOptions"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * When true, the block's content will be displayed. */ "open": boolean; /** * Block status. Updates or adds icon to show related icon and color. */ "status"?: Status; /** * Block summary. */ "summary": string; } interface CalciteBlockSection { /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * When true, the block's section content will be displayed. */ "open": boolean; /** * BlockSection status. Adds indicator to show valid or invalid status. */ "status"?: Status; /** * Text displayed in the button. */ "text": string; /** * This property determines the look of the section toggle. If the value is "switch", a toggle-switch will be displayed. If the value is "button", a clickable header is displayed. */ "toggleDisplay": BlockSectionToggleDisplay; } interface CalciteButton { /** * optionally specify alignment of button elements. */ "alignment"?: ButtonAlignment; /** * specify the appearance style of the button, defaults to solid. */ "appearance": ButtonAppearance; /** * specify the color of the button, defaults to blue */ "color": ButtonColor; /** * is the button disabled */ "disabled": boolean; /** * The form ID to associate with the component * @deprecated – this property is no longer needed if placed inside a form. */ "form"?: string; /** * optionally pass a href - used to determine if the component should render as a button or an anchor */ "href"?: string; /** * optionally pass an icon to display at the end of a button - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of a button - accepts calcite ui icon names */ "iconStart"?: string; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * optionally add a calcite-loader component to the button, disabling interaction. */ "loading": boolean; /** * The name attribute to apply to the button */ "name"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * optionally add a round style to the button */ "round": boolean; /** * specify the scale of the button, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * is the button a child of a calcite-split-button */ "splitChild"?: "primary" | "secondary" | false; /** * The target attribute to apply to the hyperlink */ "target"?: string; /** * The type attribute to apply to the button */ "type"?: string; /** * specify the width of the button, defaults to auto */ "width": Width; } interface CalciteCard { /** * string to override English deselect text for checkbox when selectable is true * @default "Deselect" */ "intlDeselect": string; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * string to override English select text for checkbox when selectable is true * @default "Select" */ "intlSelect": string; /** * When true, the cards content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Indicates whether the card is selectable. */ "selectable": boolean; /** * Indicates whether the card is selected. */ "selected": boolean; } interface CalciteCheckbox { /** * The checked state of the checkbox. */ "checked": boolean; /** * True if the checkbox is disabled */ "disabled": boolean; /** * The id attribute of the checkbox. When omitted, a globally unique identifier is used. */ "guid": string; /** * The hovered state of the checkbox. */ "hovered": boolean; /** * True if the checkbox is initially indeterminate, which is independent from its checked state https://css-tricks.com/indeterminate-checkboxes/ */ "indeterminate": boolean; /** * The label of the checkbox input */ "label"?: string; /** * The name of the checkbox input */ "name": any; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * specify the scale of the checkbox, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The value of the checkbox input */ "value": any; } interface CalciteChip { /** * specify the appearance style of the button, defaults to solid. */ "appearance": Extract<"solid" | "clear", Appearance>; /** * specify the color of the button, defaults to blue */ "color": ChipColor; /** * Aria label for the "x" button * @default "Close" */ "dismissLabel"?: string; /** * Optionally show a button the user can click to dismiss the chip */ "dismissible": boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * flip the icon in rtl */ "iconFlipRtl": boolean; /** * specify the scale of the chip, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The assigned value for the chip */ "value": any; } interface CalciteColorPicker { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty": boolean; /** * specify the appearance - default (containing border), or minimal (no containing border) */ "appearance": ColorAppearance; /** * Internal prop for advanced use-cases. */ "color": InternalColor | null; /** * When true, disabled prevents user interaction. */ "disabled": boolean; /** * The format of the value property. When "auto", the format will be inferred from `value` when set. * @default "auto" */ "format": Format; /** * When true, hides the RGB/HSV channel inputs */ "hideChannels": boolean; /** * When true, hides the hex input */ "hideHex": boolean; /** * When true, hides the saved colors section */ "hideSaved": boolean; /** * Label used for the blue channel * @default "B" */ "intlB": string; /** * Label used for the blue channel description * @default "Blue" */ "intlBlue": string; /** * Label used for the delete color button. * @default "Delete color" */ "intlDeleteColor": string; /** * Label used for the green channel * @default "G" */ "intlG": string; /** * Label used for the green channel description * @default "Green" */ "intlGreen": string; /** * Label used for the hue channel * @default "H" */ "intlH": string; /** * Label used for the hex input * @default "Hex" */ "intlHex": string; /** * Label used for the HSV mode * @default "HSV" */ "intlHsv": string; /** * Label used for the hue channel description * @default "Hue" */ "intlHue": string; /** * Label used for the hex input when there is no color selected. * @default "No color" */ "intlNoColor": string; /** * Label used for the red channel * @default "R" */ "intlR": string; /** * Label used for the red channel description * @default "Red" */ "intlRed": string; /** * Label used for the RGB mode * @default "RGB" */ "intlRgb": string; /** * Label used for the saturation channel * @default "S" */ "intlS": string; /** * Label used for the saturation channel description * @default "Saturation" */ "intlSaturation": string; /** * Label used for the save color button. * @default "Save color" */ "intlSaveColor": string; /** * Label used for the saved colors section * @default "Saved" */ "intlSaved": string; /** * Label used for the value channel * @default "V" */ "intlV": string; /** * Label used for the * @default "Value" */ "intlValue": string; /** * The scale of the color picker. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Storage ID for colors. */ "storageId": string; /** * The color value. This value can be either a {@link https ://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string} a RGB, HSL or HSV object. The type will be preserved as the color is updated. * @default "#007ac2" * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10) */ "value": ColorValue | null; } interface CalciteColorPickerHexInput { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty": boolean; /** * Label used for the hex input. * @default "Hex" */ "intlHex": string; /** * Label used for the hex input when there is no color selected. * @default "No color" */ "intlNoColor": string; /** * The component's scale. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The hex value. */ "value": string; } interface CalciteColorPickerSwatch { /** * Used to display whether the swatch is active or not. */ "active": boolean; /** * The color value. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value */ "color": string; /** * The component scale. */ "scale": Scale; } interface CalciteCombobox { /** * Opens or closes the combobox */ "active": boolean; /** * Allow entry of custom values which are not in the original set of items */ "allowCustomValues": boolean; /** * Disable combobox input */ "disabled": boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: ComputedPlacement[]; /** * string to override the English "Remove tag" text for when an item is selected. * @default "Remove tag" */ "intlRemoveTag": string; /** * Aria label for combobox (required) */ "label": string; /** * Specify the maximum number of combobox items (including nested children) to display before showing the scroller */ "maxItems": number; /** * The name of the switch input */ "name": string; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Placeholder text for input */ "placeholder"?: string; /** * Updates the position of the component. */ "reposition": () => Promise; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * Specify the scale of the combobox, defaults to m */ "scale": Scale; /** * specify the selection mode - multi: allow any number of selected items (default) - single: only one selection) - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips */ "selectionMode": ComboboxSelectionMode; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The value(s) of the selectedItem(s) */ "value": string | string[]; } interface CalciteComboboxItem { /** * True when item is highlighted either from keyboard or mouse hover */ "active": boolean; /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors": ComboboxChildElement[]; /** * Don't filter this item based on the search text */ "constant": boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled": boolean; /** * Unique identifier, used for accessibility */ "guid": string; /** * Custom icon to display both in combobox chips and next to combobox item text */ "icon"?: string; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected": boolean; /** * The main label for this item. */ "textLabel": string; /** * Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values. */ "toggleSelected": (coerce?: boolean) => Promise; /** * The item's associated value */ "value": any; } interface CalciteComboboxItemGroup { /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors": ComboboxChildElement[]; /** * Title of the group */ "label": string; } interface CalciteDatePicker { /** * Active range */ "activeRange"?: "start" | "end"; /** * Selected end date * @deprecated use value instead */ "end"?: string; /** * Selected end date as full date object * @deprecated use valueAsDate instead */ "endAsDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Localized string for "next month" (used for aria label) * @default "Next month" */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) * @default "Previous month" */ "intlPrevMonth"?: string; /** * Localized string for "year" (used for aria label) * @default "Year" */ "intlYear"?: string; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Latest allowed date ("yyyy-mm-dd") */ "max"?: string; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */ "proximitySelectionDisabled": boolean; /** * Range mode activation */ "range": boolean; /** * specify the scale of the date picker */ "scale": "s" | "m" | "l"; /** * Selected start date * @deprecated use value instead */ "start"?: string; /** * Selected start date as full date object * @deprecated use valueAsDate instead */ "startAsDate"?: Date; /** * Selected date */ "value"?: string | string[]; /** * Selected date as full date object */ "valueAsDate"?: Date | Date[]; } interface CalciteDatePickerDay { /** * Date is actively in focus for keyboard navigation */ "active": boolean; /** * Date is in the current month. */ "currentMonth": boolean; /** * Day of the month to be shown. */ "day": number; /** * Date is outside of range and can't be selected */ "disabled": boolean; /** * Date is the end of date range */ "endOfRange": boolean; /** * Date is currently highlighted as part of the range */ "highlighted": boolean; /** * CLDR data for current locale */ "localeData": DateLocaleData; /** * Showing date range */ "range": boolean; /** * Date is being hovered and within the set range */ "rangeHover": boolean; /** * specify the scale of the date picker */ "scale": Scale; /** * Date is the current selected date of the picker */ "selected": boolean; /** * Date is the start of date range */ "startOfRange": boolean; /** * Date value for the day. */ "value": Date; } interface CalciteDatePickerMonth { /** * Date currently active. */ "activeDate": Date; /** * End date currently active */ "endDate"?: Date; /** * The range of dates currently being hovered */ "hoverRange": HoverRange; /** * CLDR locale data for current locale */ "localeData": DateLocaleData; /** * Maximum date of the calendar above which is disabled. */ "max": Date; /** * Minimum date of the calendar below which is disabled. */ "min": Date; /** * specify the scale of the date picker */ "scale": Scale; /** * Already selected date. */ "selectedDate": Date; /** * Start date currently active. */ "startDate"?: Date; } interface CalciteDatePickerMonthHeader { /** * Focused date with indicator (will become selected date if user proceeds) */ "activeDate": Date; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Localized string for next month. */ "intlNextMonth": string; /** * Localized string for previous month. */ "intlPrevMonth": string; /** * Localized string for year. */ "intlYear": string; /** * User's language and region as BCP 47 formatted string. */ "locale": string; /** * CLDR locale data for translated calendar info */ "localeData": DateLocaleData; /** * Maximum date of the calendar above which is disabled. */ "max": Date; /** * Minimum date of the calendar below which is disabled. */ "min": Date; /** * specify the scale of the date picker */ "scale": Scale; /** * Already selected date. */ "selectedDate": Date; } interface CalciteDropdown { /** * Opens or closes the dropdown */ "active": boolean; /** * allow the dropdown to remain open after a selection is made if the selection-mode of the selected item's containing group is "none", the dropdown will always close */ "disableCloseOnSelect": boolean; /** * is the dropdown disabled */ "disabled": boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: ComputedPlacement[]; /** * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group */ "maxItems": number; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the dropdown will be positioned relative to the button. * @default "bottom-leading" */ "placement": MenuPlacement; /** * Updates the position of the component. */ "reposition": () => Promise; /** * specify the scale of dropdown, defaults to m */ "scale": Scale; /** * **read-only** The currently selected items * @readonly */ "selectedItems": HTMLCalciteDropdownItemElement[]; /** * specify whether the dropdown is opened by hover or click of a trigger element */ "type": "hover" | "click"; /** * specify the width of dropdown, defaults to m */ "width": Scale; } interface CalciteDropdownGroup { /** * optionally set a group title for display */ "groupTitle"?: string; /** * Specifies the size of the action. */ "scale": Scale; /** * specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item), none (no active items), defaults to single */ "selectionMode": SelectionMode; } interface CalciteDropdownItem { /** * Indicates whether the item is active. */ "active": boolean; /** * optionally pass a href - used to determine if the component should render as anchor */ "href"?: string; /** * optionally pass an icon to display at the end of an item - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of an item - accepts calcite ui icon names */ "iconStart"?: string; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The target attribute to apply to the hyperlink */ "target"?: string; } interface CalciteFab { /** * Used to set the button's appearance. Default is outline. */ "appearance": Extract<"solid" | "outline", Appearance>; /** * Used to set the button's color. Default is light. */ "color": ButtonColor; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. * @default "plus" */ "icon"?: string; /** * Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Specifies the size of the fab. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Text that accompanies the FAB icon. */ "text"?: string; /** * Indicates whether the text is displayed. */ "textEnabled": boolean; } interface CalciteFilter { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * The resulting items after filtering. * @readonly */ "filteredItems": object[]; /** * A text label that will appear on the clear button. */ "intlClear"?: string; /** * A text label that will appear next to the input field. */ "intlLabel"?: string; /** * The items to filter through. The filter uses this 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 required. */ "items": object[]; /** * Placeholder text for the input element's placeholder attribute */ "placeholder"?: string; /** * specify the scale of filter, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Filter value. */ "value": string; } interface CalciteFlow { /** * Removes the currently active `calcite-panel`. */ "back": () => Promise; } interface CalciteGraph { /** * Array of values describing a single color stop ([offset, color, opacity]) These color stops should be sorted by offset value */ "colorStops": ColorStop[]; /** * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value */ "data": DataSeries; /** * End of highlight color if highlighting range */ "highlightMax": number; /** * Start of highlight color if highlighting range */ "highlightMin": number; /** * Highest point of the range */ "max": number; /** * Lowest point of the range */ "min": number; } interface CalciteHandle { "activated": boolean; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Value for the button title attribute */ "textTitle": string; } interface CalciteIcon { /** * When true, the icon will be flipped when the element direction is 'rtl'. */ "flipRtl": boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. */ "icon": string; /** * Icon scale. */ "scale": Scale; /** * The icon label. It is recommended to set this value if your icon is semantic. */ "textLabel": string; } interface CalciteInlineEditable { /** * when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */ "afterConfirm"?: () => Promise; /** * specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */ "controls": boolean; /** * specify whether editing can be enabled */ "disabled": boolean; /** * specify whether the wrapped input element is editable, defaults to false */ "editingEnabled": boolean; /** * specify text to be user for the cancel editing button's aria-label, defaults to `Cancel` * @default "Cancel" */ "intlCancelEditing": string; /** * specify text to be user for the confirm changes button's aria-label, defaults to `Save` * @default "Save" */ "intlConfirmChanges": string; /** * specify text to be user for the enable editing button's aria-label, defaults to `Click to edit` * @default "Click to edit" */ "intlEnableEditing": string; /** * specify whether the confirm button should display a loading state, defaults to false */ "loading": boolean; /** * specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale */ "scale"?: Scale; "setFocus": () => Promise; } interface CalciteInput { /** * specify the alignment of the value of the input */ "alignment": Position; /** * should the input autofocus */ "autofocus": boolean; /** * optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea" */ "clearable": boolean; /** * is the input disabled */ "disabled": boolean; "editingEnabled": boolean; /** * for number values, displays the locale's group separator */ "groupSeparator": boolean; /** * when true, the component will not be visible */ "hidden": boolean; /** * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type */ "icon": string | boolean; /** * flip the icon in rtl */ "iconFlipRtl": boolean; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * specify if the input is in loading state */ "loading": boolean; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Toggles locale formatting for numbers. */ "localeFormat": boolean; /** * input max */ "max"?: number; /** * Maximum length of the input value */ "maxLength"?: number; /** * Maximum length of text input. * @deprecated use maxLength instead */ "maxlength"?: number; /** * input min */ "min"?: number; /** * Minimum length of the text input */ "minLength"?: number; /** * The name of the input */ "name": string; /** * specify the placement of the number buttons */ "numberButtonType"?: InputPlacement; /** * explicitly whitelist placeholder attribute */ "placeholder": string; /** * optionally add prefix */ "prefixText"?: string; /** * When true, a field cannot be modified. */ "readOnly": boolean; /** * is the input required */ "required": boolean; /** * specify the scale of the input, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * specify the status of the input field, determines message and icons */ "status": Status; /** * input step */ "step"?: number | "any"; /** * optionally add suffix * */ "suffixText"?: string; /** * specify the input type Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time` */ "type": | "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week"; /** * input value */ "value": string; } interface CalciteInputDatePicker { /** * Expand or collapse when calendar does not have input */ "active": boolean; /** * When false, the component won't be interactive. */ "disabled": boolean; /** * Selected end date * @deprecated use value instead */ "end"?: string; /** * Selected end date as full date object * @deprecated use valueAsDate instead */ "endAsDate"?: Date; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: ComputedPlacement[]; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Localized string for "next month" (used for aria label) * @default "Next month" */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) * @default "Previous month" */ "intlPrevMonth"?: string; /** * Localized string for "year" (used for aria label) * @default "Year" */ "intlYear"?: string; /** * Layout */ "layout": "horizontal" | "vertical"; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Latest allowed date ("yyyy-mm-dd") */ "max"?: string; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * The picker's name. Gets submitted with the form. */ "name": string; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */ "proximitySelectionDisabled": boolean; /** * Range mode activation */ "range": boolean; /** * Updates the position of the component. */ "reposition": () => Promise; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * specify the scale of the date picker */ "scale": "s" | "m" | "l"; /** * Updates the position of the component. */ "setFocus": () => Promise; /** * Selected start date * @deprecated use value instead */ "start"?: string; /** * Selected start date as full date object * @deprecated use valueAsDate instead */ "startAsDate"?: Date; /** * Selected date */ "value": string | string[]; /** * Selected date as full date object */ "valueAsDate"?: Date | Date[]; } interface CalciteInputMessage { /** * Indicates whether the message is displayed. */ "active": boolean; /** * when used as a boolean set to true, show a default icon based on status. You can also pass a calcite-ui-icon name to this prop to display a custom icon */ "icon": boolean | string; /** * specify the scale of the input, defaults to m */ "scale": Scale; /** * specify the status of the input field, determines message and icons */ "status": Status; /** * specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) * @deprecated "floating" type is no longer supported */ "type": "default"; } interface CalciteInputTimePicker { /** * The active state of the time input */ "active": boolean; /** * The disabled state of the time input */ "disabled": boolean; /** * aria-label for the hour input */ "intlHour"?: string; /** * aria-label for the hour down button */ "intlHourDown"?: string; /** * aria-label for the hour up button */ "intlHourUp"?: string; /** * aria-label for the meridiem (am/pm) input */ "intlMeridiem"?: string; /** * aria-label for the meridiem (am/pm) down button */ "intlMeridiemDown"?: string; /** * aria-label for the meridiem (am/pm) up button */ "intlMeridiemUp"?: string; /** * aria-label for the minute input */ "intlMinute"?: string; /** * aria-label for the minute down button */ "intlMinuteDown"?: string; /** * aria-label for the minute up button */ "intlMinuteUp"?: string; /** * aria-label for the second input */ "intlSecond"?: string; /** * aria-label for the second down button */ "intlSecondDown"?: string; /** * aria-label for the second up button */ "intlSecondUp"?: string; /** * BCP 47 language tag for desired language and country format */ "locale": string; /** * The name of the time input */ "name": string; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * The scale (size) of the time input */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * number (seconds) that specifies the granularity that the value must adhere to */ "step": number; /** * The selected time in UTC (always 24-hour format) */ "value": string; } interface CalciteLabel { /** * specify the text alignment of the label */ "alignment": Alignment; /** * eliminates any space around the label */ "disableSpacing": boolean; /** * is the label disabled * @deprecated use the `disabled` property on the interactive components instead */ "disabled": boolean; /** * The id of the input associated with the label */ "for": string; /** * is the wrapped element positioned inline with the label slotted text */ "layout": "inline" | "inline-space-between" | "default"; /** * specify the scale of the label, defaults to m */ "scale": Scale; /** * specify the status of the label and any child input / input messages * @deprecated set directly on child element instead */ "status": Status; } interface CalciteLink { /** * is the link disabled */ "disabled": boolean; /** * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download */ "download": string | boolean; /** * optionally pass a href - used to determine if the component should render as a link or an anchor */ "href"?: string; /** * optionally pass an icon to display at the end of a button - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of a button - accepts calcite ui icon names */ "iconStart"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The target attribute to apply to the hyperlink */ "target"?: string; } interface CalciteList { /** * When true, disabled prevents user interaction. */ "disabled": boolean; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Sets focus on the component. */ "setFocus": () => Promise; } interface CalciteListItem { /** * An optional description for this item. This will appear below the label text. */ "description": string; /** * When true, disabled prevents interaction. */ "disabled": boolean; /** * The label text of the list item. This will appear above the description text. */ "label": string; /** * When true, prevents the content of the list item from user interaction. */ "nonInteractive": boolean; /** * Sets focus on the component. */ "setFocus": () => Promise; } interface CalciteListItemGroup { /** * The title used for all nested `calcite-list-item` rows. */ "heading": string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; } interface CalciteLoader { /** * Show the loader */ "active": boolean; /** * Inline loaders are smaller and will appear to the left of the text */ "inline": boolean; /** * Accessible name for the component */ "label": string; /** * Turn off spacing around the loader */ "noPadding": boolean; /** * Speficy the scale of the loader. Defaults to "m" */ "scale": Scale; /** * Text which should appear under the loading indicator (optional) */ "text": string; /** * Use indeterminate if finding actual progress value is impossible */ "type": "indeterminate" | "determinate"; /** * Percent complete of 100, only valid for determinate indicators */ "value": number; } interface CalciteModal { /** * Add the active attribute to open the modal */ "active": boolean; /** * Background color of modal content */ "backgroundColor": ModalBackgroundColor; /** * Optionally pass a function to run before close */ "beforeClose": (el: HTMLElement) => Promise; /** * Adds a color bar at the top for visual impact, Use color to add importance to destructive/workflow dialogs. */ "color"?: "red" | "blue"; /** * Disables the display a close button within the Modal */ "disableCloseButton": boolean; /** * Flag to disable the default close on escape behavior */ "disableEscape": boolean; /** * Disables the closing of the Modal when clicked outside. */ "disableOutsideClose": boolean; /** * Prevent the modal from taking up the entire screen on mobile */ "docked": boolean; /** * Specify an element to focus when the modal is first opened */ "firstFocus"?: HTMLElement; /** * Focus first interactive element * @deprecated use `setFocus` instead. */ "focusElement": (el?: HTMLElement) => Promise; /** * Set the modal to always be fullscreen (overrides width) */ "fullscreen": boolean; /** * Aria label for the close button */ "intlClose": string; /** * Turn off spacing around the content area slot */ "noPadding": boolean; /** * specify the scale of modal, defaults to m */ "scale": Scale; /** * Set the scroll top of the modal content */ "scrollContent": (top?: number, left?: number) => Promise; /** * Sets focus on the component. By default, will try to focus on any focusable content. If there is none, it will focus on the close button. If you want to focus on the close button, you can use the `close-button` focus ID. */ "setFocus": (focusId?: "close-button") => Promise; /** * Set the width of the modal. Can use stock sizes or pass a number (in pixels) */ "width": Scale | number; } interface CalciteNotice { /** * Is the notice currently active or not */ "active": boolean; /** * Color for the notice (will apply to top border and icon) */ "color": StatusColor; /** * Optionally show a button the user can click to dismiss the notice */ "dismissible": boolean; /** * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon */ "icon": string | boolean; /** * String for the close button. * @default "Close" */ "intlClose": string; /** * specify the scale of the notice, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * specify the width of the notice, defaults to auto */ "width": Width; } interface CalciteOption { /** * When true, it prevents the option from being selected. */ "disabled": boolean; /** * The option label. */ "label": string; /** * When true, this option is selected. Otherwise, false. */ "selected": boolean; /** * The value associated with this option. */ "value": any; } interface CalciteOptionGroup { /** * When true, it prevents selection from any of its associated options. */ "disabled": boolean; /** * The group label. This property is required. */ "label": string; } interface CalcitePagination { /** * Go to the next page of results */ "nextPage": () => Promise; /** * number of items per page */ "num": number; /** * Go to the previous page of results */ "previousPage": () => Promise; /** * The scale of the pagination */ "scale": Scale; /** * index of item that should begin the page */ "start": number; /** * Used as an accessible label (aria-label) for the next button * @default "Next" */ "textLabelNext": string; /** * Used as an accessible label (aria-label) of the previous button * @default "Previous" */ "textLabelPrevious": string; /** * total number of items */ "total": number; } interface CalcitePanel { /** * When provided, this method will be called before it is removed from the parent flow. */ "beforeBack"?: () => Promise; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * Hides the panel. */ "dismissed": boolean; /** * Displays a close button in the trailing side of the header. */ "dismissible": boolean; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Specifies the maximum height of the panel. */ "heightScale"?: Scale; /** * 'Back' text string. */ "intlBack"?: string; /** * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true. */ "intlClose"?: string; /** * 'Options' text string for the actions menu. */ "intlOptions"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Opens the action menu. */ "menuOpen": boolean; /** * Scrolls panel content to a particular set of coordinates. ``` myCalcitePanel.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). }); ``` */ "scrollContentTo": (options?: ScrollToOptions) => Promise; /** * Sets focus on the component. */ "setFocus": (focusId?: "dismiss-button" | "back-button") => Promise; /** * Shows a back button in the header. */ "showBackButton": boolean; /** * Summary text. A description displayed underneath the heading. */ "summary"?: string; /** * This sets width of the panel. */ "widthScale"?: Scale; } interface CalcitePickList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * When true, an input appears at the top of the list that can be used by end users to filter items in the list. */ "filterEnabled": boolean; /** * Placeholder text for the filter input field. */ "filterPlaceholder": string; /** * Returns the currently selected items */ "getSelectedItems": () => Promise>; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Multiple works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple": boolean; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus": boolean; /** * Sets focus on the component. */ "setFocus": (focusId?: ListFocusId) => Promise; } interface CalcitePickListGroup { /** * The title used for all nested `calcite-pick-list` rows. */ "groupTitle": string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; } interface CalcitePickListItem { /** * An optional description for this item. This will appear below the label text. */ "description"?: string; /** * When false, the item cannot be deselected by user interaction. */ "disableDeselect": boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled": boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5) */ "icon"?: ICON_TYPES | null; /** * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true. * @default "Remove" */ "intlRemove": string; /** * The main label for this item. This will appear next to the icon. */ "label": string; /** * Used to provide additional metadata to an item, primarily used when the parent list has a filter. */ "metadata"?: Record; "nonInteractive": boolean; /** * Set this to true to display a remove action that removes the item from the list. */ "removable"?: boolean; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected": boolean; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values. */ "toggleSelected": (coerce?: boolean) => Promise; /** * The item's associated value. */ "value": any; } interface CalcitePopover { /** * Display a close button within the Popover. * @deprecated use dismissible instead. */ "closeButton": boolean; /** * Prevents flipping the popover's placement when it starts to overlap its reference element. */ "disableFlip": boolean; /** * Removes the caret pointer. */ "disablePointer": boolean; /** * Display a close button within the Popover. */ "dismissible": boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Text for close button. * @default "Close" */ "intlClose": string; /** * Accessible name for the component */ "label": string; /** * Offset the position of the popover away from the reference element. * @default 6 */ "offsetDistance": number; /** * Offset the position of the popover along the reference element. */ "offsetSkidding": number; /** * Display and position the component. */ "open": boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25) */ "placement": PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement. */ "referenceElement": HTMLElement | string; /** * Updates the position of the component. */ "reposition": () => Promise; /** * Sets focus on the component. */ "setFocus": (focusId?: "close-button") => Promise; /** * Toggles the popover's open property. */ "toggle": (value?: boolean) => Promise; } interface CalcitePopoverManager { /** * Automatically closes any currently open popovers when clicking outside of a popover. */ "autoClose": boolean; /** * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover. * @default `[data-calcite-popover-reference]` */ "selector": string; } interface CalciteProgress { /** * Label for the progress indicator */ "label": string; /** * For indeterminate progress bars, reverse the animation direction */ "reversed": boolean; /** * Text to display for the progress indicator */ "text": string; /** * Use indeterminate if finding actual progress value is impossible */ "type": "indeterminate" | "determinate"; /** * Fraction completed, in the range of 0 - 1.0 */ "value": number; } interface CalciteRadioButton { /** * The checked state of the radio button. */ "checked": boolean; /** * The disabled state of the radio button. */ "disabled": boolean; "emitCheckedChange": () => Promise; /** * The focused state of the radio button. */ "focused": boolean; /** * The id attribute of the radio button. When omitted, a globally unique identifier is used. */ "guid": string; /** * The radio button's hidden status. When a radio button is hidden it is not focusable or checkable. */ "hidden": boolean; /** * The hovered state of the radio button. */ "hovered": boolean; /** * The label of the radio input */ "label"?: string; /** * The name of the radio button. `name` is passed as a property automatically from `calcite-radio-button-group`. */ "name": string; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required": boolean; /** * The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The value of the radio button. */ "value": any; } interface CalciteRadioButtonGroup { /** * The disabled state of the radio button group. */ "disabled": boolean; /** * The radio button group's hidden status. When a radio button group is hidden none of its options are focusable or checkable. */ "hidden": boolean; /** * The layout direction of the radio buttons in a group. */ "layout": Layout; /** * The name of the radio button group. `name` must be unique to other radio button group instances. */ "name": string; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required": boolean; /** * The scale (size) of the radio button group. */ "scale": Scale; } interface CalciteRadioGroup { /** * specify the appearance style of the radio group, defaults to solid. */ "appearance": RadioAppearance; /** * is the radio group disabled */ "disabled": boolean; /** * specify the layout of the radio group, defaults to horizontal */ "layout": Layout; /** * The group's name. Gets submitted with the form. */ "name": string; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * The scale of the radio group */ "scale": Scale; /** * The group's selected item. */ "selectedItem": HTMLCalciteRadioGroupItemElement; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The value of the selectedItem */ "value": string; /** * specify the width of the group, defaults to auto */ "width": Extract<"auto" | "full", Width>; } interface CalciteRadioGroupItem { /** * Indicates whether the control is checked. */ "checked": boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * flip the icon in rtl */ "iconFlipRtl": boolean; /** * optionally used with icon, select where to position the icon */ "iconPosition"?: Position; /** * The control's value. */ "value": any | null; } interface CalciteRating { /** * optionally pass a cumulative average rating to display */ "average"?: number; /** * optionally pass a number of previous ratings to display */ "count"?: number; /** * is the rating component in a selectable mode */ "disabled": boolean; /** * Localized string for "Rating" (used for aria label) * @default "Rating" */ "intlRating"?: string; /** * Localized string for labelling each star, `${num}` in the string will be replaced by the number * @default "Stars: ${num}" */ "intlStars"?: string; /** * The name of the rating */ "name": string; /** * is the rating component in a selectable mode */ "readOnly": boolean; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * specify the scale of the component, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Show average and count data summary chip (if available) */ "showChip": boolean; /** * the value of the rating component */ "value": number; } interface CalciteScrim { /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state. */ "loading": boolean; } interface CalciteSelect { /** * When true, it prevents the option from being selected. */ "disabled": boolean; /** * The component's label. This is required for accessibility purposes. */ "label": string; /** * The select's name. Gets submitted with the form. */ "name": string; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * The component scale. */ "scale": Scale; /** * The currently selected option. * @readonly */ "selectedOption": HTMLCalciteOptionElement; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The value of the selectedOption */ "value": string; /** * The component width. */ "width": Width; } interface CalciteShell { /** * Positions the center content behind any calcite-shell-panels. */ "contentBehind": boolean; } interface CalciteShellCenterRow { /** * This property makes the content area appear like a "floating" panel. */ "detached": boolean; /** * Specifies the maximum height of the row. */ "heightScale": Scale; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; } interface CalciteShellPanel { /** * Hide the content panel. */ "collapsed": boolean; /** * This property makes the content area appear like a "floating" panel. */ "detached": boolean; /** * Specifies the maximum height of the contents when detached. */ "detachedHeightScale": Scale; /** * Accessible label for resize separator. * @default "Resize" */ "intlResize": string; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; /** * This property makes the content area resizable if the calcite-shell-panel is not 'detached'. */ "resizable": boolean; /** * This sets width of the content area. */ "widthScale": Scale; } interface CalciteSlider { /** * Disable and gray out the slider */ "disabled": boolean; /** * Indicates if a histogram is present */ "hasHistogram": boolean; /** * List of x,y coordinates within the slider's min and max, displays above the slider track. * @see [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5) */ "histogram"?: DataSeries; /** * Array of values describing a single color stop, sorted by offset ascending. */ "histogramStops": ColorStop[]; /** * Label handles with their numeric value */ "labelHandles": boolean; /** * Label tick marks with their numeric value. */ "labelTicks": boolean; /** * Maximum selectable value */ "max": number; /** * Used as an accessible label (aria-label) for second handle if needed (ex. "Temperature, upper bound") */ "maxLabel"?: string; /** * Currently selected upper number (if multi-select) */ "maxValue"?: number; /** * Minimum selectable value */ "min": number; /** * Used as an accessible label (aria-label) for first (or only) handle (ex. "Temperature, lower bound") */ "minLabel": string; /** * Currently selected lower number (if multi-select) */ "minValue"?: number; /** * When true, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. */ "mirrored": boolean; /** * The name of the slider */ "name": string; /** * Interval to move on page up/page down keys */ "pageStep"?: number; /** * Use finer point for handles */ "precise": boolean; /** * When true, makes the component required for form-submission. */ "required": boolean; /** * Specify the scale of the slider, defaults to m */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * When true, enables snap selection along the step interval */ "snap": boolean; /** * Interval to move on up/down keys */ "step"?: number; /** * Show tick marks on the number line at provided interval */ "ticks"?: number; /** * Currently selected number (if single select) */ "value": null | number; } interface CalciteSortableList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * Specifies which items inside the element should be draggable. */ "dragSelector"?: string; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * The selector for the handle elements. */ "handleSelector": string; /** * Indicates the horizontal or vertical orientation of the component. */ "layout": Layout; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; } interface CalciteSplitButton { /** * Is the dropdown currently active or not */ "active": boolean; /** * specify the appearance style of the button, defaults to solid. */ "appearance": ButtonAppearance; /** * specify the color of the control, defaults to blue */ "color": ButtonColor; /** * is the control disabled */ "disabled": boolean; /** * specify the icon used for the dropdown menu, defaults to chevron */ "dropdownIconType": DropdownIconType; /** * aria label for overflow button */ "dropdownLabel"?: string; /** * optionally add a calcite-loader component to the control, disabling interaction. with the primary button */ "loading": boolean; /** * Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names */ "primaryIconEnd"?: string; /** * flip the primary icon(s) in rtl */ "primaryIconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of the primary button - accepts Calcite UI icon names */ "primaryIconStart"?: string; /** * optionally pass an aria-label for the primary button */ "primaryLabel"?: string; /** * text for primary action button */ "primaryText": string; /** * specify the scale of the control, defaults to m */ "scale": Scale; /** * specify the width of the button, defaults to auto */ "width": Width; } interface CalciteStepper { /** * set the last step as active */ "endStep": () => Promise; /** * set the requested step as active */ "goToStep": (num: number) => Promise; /** * optionally display a status icon next to the step title */ "icon": boolean; /** * specify the layout of stepper, defaults to horizontal */ "layout": Layout; /** * set the next step as active */ "nextStep": () => Promise; /** * optionally display the number next to the step title */ "numbered": boolean; /** * set the previous step as active */ "prevStep": () => Promise; "requestedContent": HTMLElement[] | NodeListOf; /** * specify the scale of stepper, defaults to m */ "scale": Scale; /** * set the first step as active */ "startStep": () => Promise; } interface CalciteStepperItem { /** * is the step active */ "active": boolean; /** * has the step been completed */ "complete": boolean; /** * is the step disabled and not navigable to by a user */ "disabled": boolean; /** * does the step contain an error that needs to be resolved by the user */ "error": boolean; "icon": boolean; /** * pass a title for the stepper item */ "itemSubtitle"?: string; /** * pass a title for the stepper item */ "itemTitle"?: string; "layout"?: string; "numbered": boolean; "scale": Scale; } interface CalciteSwitch { /** * True if the switch is initially on */ "checked": boolean; /** * True if the switch is disabled */ "disabled": boolean; /** * Applies to the aria-label attribute on the switch */ "label"?: string; /** * The name of the switch input */ "name": string; /** * The scale of the switch */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * True if the switch is initially on * @deprecated use 'checked' instead. */ "switched": boolean; /** * The value of the switch input */ "value": any; } interface CalciteTab { /** * Show this tab */ "active": boolean; /** * Return the index of this tab within the tab array */ "getTabIndex": () => Promise; "scale": Scale; /** * Optionally include a unique name for this tab, be sure to also set this name on the associated title. */ "tab": string; "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise; } interface CalciteTabNav { "bordered": boolean; "indicatorOffset": number; "indicatorWidth": number; "layout": TabLayout; "position": TabPosition; "scale": Scale; /** * Name to use when saving selected tab data to localStorage */ "storageId": string; /** * Pass the same string to multiple tab navs to keep them all in sync if one changes */ "syncId": string; } interface CalciteTabTitle { /** * Show this tab title as selected */ "active": boolean; "bordered": boolean; /** * Disable this tab title */ "disabled": boolean; "getTabIdentifier": () => Promise; /** * Return the index of this title within the nav */ "getTabIndex": () => Promise; /** * optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names */ "iconStart"?: string; "layout": TabLayout; "position": TabPosition; "scale": Scale; /** * Optionally include a unique name for the tab title, be sure to also set this name on the associated tab. */ "tab"?: string; "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise; } interface CalciteTabs { /** * Optionally enable tabs to appear like a folder-style menu when its layout is "inline" */ "bordered": boolean; /** * Align tab titles to the edge or fully justify them across the tab nav ("center") */ "layout": TabLayout; /** * Display the tabs above (default) or below the tab content */ "position": TabPosition; /** * Specify the scale of the tabs component, defaults to m */ "scale": Scale; } interface CalciteTile { /** * The active state of the tile. */ "active": boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * When true, prevents interaction. */ "disabled": boolean; /** * The embed mode of the tile. When true, renders without a border and padding for use by other components. */ "embed": boolean; /** * The focused state of the tile. */ "focused": boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile. */ "hidden": boolean; /** * The (optional) url for the tile. (Only applies when embed is set to false) */ "href"?: string; /** * The icon that appears at the top of the tile. */ "icon"?: string; } interface CalciteTileSelect { /** * The checked state of the tile select. */ "checked": boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * The disabled state of the tile select. */ "disabled": boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile select. */ "hidden": boolean; /** * The icon that appears at the top of the tile. */ "icon"?: string; /** * The side of the tile that the radio or checkbox appears on when inputEnabled is true. */ "inputAlignment": Extract<"end" | "start", Alignment>; /** * Display an interactive radio or checkbox. */ "inputEnabled": boolean; /** * The name of the tile select. This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */ "name": any; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The selection mode of the tile select: radio (single) or checkbox (multiple). */ "type": TileSelectType; /** * The value of the tile select. This value will appear in form submissions when this tile select is checked. */ "value"?: any; /** * specify the width of the tile, defaults to auto */ "width": Extract<"auto" | "full", Width>; } interface CalciteTileSelectGroup { /** * The disabled state of the tile select. */ "disabled": boolean; /** * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */ "layout"?: TileSelectGroupLayout; } interface CalciteTimePicker { /** * aria-label for the hour input * @default "Hour" */ "intlHour": string; /** * aria-label for the hour down button * @default "Decrease hour" */ "intlHourDown": string; /** * aria-label for the hour up button * @default "Increase hour" */ "intlHourUp": string; /** * aria-label for the meridiem (am/pm) input * @default "AM/PM" */ "intlMeridiem": string; /** * aria-label for the meridiem (am/pm) down button * @default "Decrease AM/PM" */ "intlMeridiemDown": string; /** * aria-label for the meridiem (am/pm) up button * @default "Increase AM/PM" */ "intlMeridiemUp": string; /** * aria-label for the minute input * @default "Minute" */ "intlMinute": string; /** * aria-label for the minute down button * @default "Decrease minute" */ "intlMinuteDown": string; /** * aria-label for the minute up button * @default "Increase minute" */ "intlMinuteUp": string; /** * aria-label for the second input * @default "Second" */ "intlSecond": string; /** * aria-label for the second down button * @default "Decrease second" */ "intlSecondDown": string; /** * aria-label for the second up button * @default "Increase second" */ "intlSecondUp": string; /** * BCP 47 language tag for desired language and country format */ "locale": string; /** * The scale (size) of the time picker */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": (target: TimePart) => Promise; /** * number (seconds) that specifies the granularity that the value must adhere to */ "step": number; /** * The selected time in UTC (always 24-hour format) */ "value": string; } interface CalciteTip { /** * No longer displays the tip. */ "dismissed": boolean; /** * The heading of the tip. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * Indicates whether the tip can be dismissed. */ "nonDismissible": boolean; /** * The selected state of the tip if it is being used inside a `calcite-tip-manager`. */ "selected": boolean; } interface CalciteTipGroup { /** * The title used for all nested tips. */ "groupTitle"?: string; } interface CalciteTipManager { /** * Alternate text for closing the `calcite-tip-manager`. */ "closed": boolean; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * The default group title for the `calcite-tip-manager`. */ "intlDefaultTitle"?: string; /** * Alternate text for navigating to the next tip. */ "intlNext"?: string; /** * Label that appears on hover of pagination icon. */ "intlPaginationLabel"?: string; /** * Alternate text for navigating to the previous tip. */ "intlPrevious"?: string; /** * Selects the next tip to display */ "nextTip": () => Promise; /** * Selects the previous tip to display */ "previousTip": () => Promise; } interface CalciteTooltip { /** * Accessible name for the component */ "label": string; /** * Offset the position of the tooltip away from the reference element. * @default 6 */ "offsetDistance": number; /** * Offset the position of the tooltip along the reference element. */ "offsetSkidding": number; /** * Display and position the component. */ "open": boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25) */ "placement": PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement. */ "referenceElement": HTMLElement | string; /** * Updates the position of the component. */ "reposition": () => Promise; } interface CalciteTooltipManager { /** * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip. * @default `[data-calcite-tooltip-reference]` */ "selector": string; } interface CalciteTree { "child": boolean; /** * Display input * @deprecated use "ancestors" selection-mode for checkbox input */ "inputEnabled": boolean; /** * Display indentation guide lines */ "lines": boolean; /** * Specify the scale of the tree, defaults to m */ "scale": Scale; /** * Customize how tree selection works (single, multi, children, multi-children, ancestors) * @default "single" * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5) */ "selectionMode": TreeSelectionMode; } interface CalciteTreeItem { "depth": number; /** * True if the item is in an expanded state */ "expanded": boolean; "hasChildren": boolean; "indeterminate": boolean; /** * Display checkboxes (set on parent) * @deprecated set "ancestors" selection-mode on parent tree for checkboxes */ "inputEnabled": boolean; "lines": boolean; "parentExpanded": boolean; "scale": Scale; /** * Is the item currently selected */ "selected": boolean; "selectionMode": TreeSelectionMode; } interface CalciteValueList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * When true, the items will be sortable via drag and drop. */ "dragEnabled": boolean; /** * When true, an input appears at the top of the list that can be used by end users to filter items in the list. */ "filterEnabled": boolean; /** * Placeholder text for the filter input field. */ "filterPlaceholder": string; /** * Returns the currently selected items */ "getSelectedItems": () => Promise>; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Multiple Works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple": boolean; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus": boolean; /** * Sets focus on the component. */ "setFocus": (focusId?: ListFocusId) => Promise; } interface CalciteValueListItem { /** * An optional description for this item. Will appear below the label text. */ "description"?: string; "disableDeselect": boolean; /** * When true, the item cannot be clicked and is visually muted */ "disabled": boolean; "handleActivated"?: boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5) */ "icon"?: ICON_TYPES | null; /** * The main label for this item. Appears next to the icon. */ "label": string; /** * Used to provide additional metadata to an item, primarily used when the parent list has a filter. */ "metadata"?: Record; /** * When true, prevents the content of the list item from user interaction. */ "nonInteractive": boolean; /** * Set this to true to display a remove action that removes the item from the list. */ "removable": boolean; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected": boolean; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values. */ "toggleSelected": (coerce?: boolean) => Promise; /** * The item's associated value. */ "value": any; } } declare global { interface HTMLCalciteAccordionElement extends Components.CalciteAccordion, HTMLStencilElement { } var HTMLCalciteAccordionElement: { prototype: HTMLCalciteAccordionElement; new (): HTMLCalciteAccordionElement; }; interface HTMLCalciteAccordionItemElement extends Components.CalciteAccordionItem, HTMLStencilElement { } var HTMLCalciteAccordionItemElement: { prototype: HTMLCalciteAccordionItemElement; new (): HTMLCalciteAccordionItemElement; }; interface HTMLCalciteActionElement extends Components.CalciteAction, HTMLStencilElement { } var HTMLCalciteActionElement: { prototype: HTMLCalciteActionElement; new (): HTMLCalciteActionElement; }; interface HTMLCalciteActionBarElement extends Components.CalciteActionBar, HTMLStencilElement { } var HTMLCalciteActionBarElement: { prototype: HTMLCalciteActionBarElement; new (): HTMLCalciteActionBarElement; }; interface HTMLCalciteActionGroupElement extends Components.CalciteActionGroup, HTMLStencilElement { } var HTMLCalciteActionGroupElement: { prototype: HTMLCalciteActionGroupElement; new (): HTMLCalciteActionGroupElement; }; interface HTMLCalciteActionMenuElement extends Components.CalciteActionMenu, HTMLStencilElement { } var HTMLCalciteActionMenuElement: { prototype: HTMLCalciteActionMenuElement; new (): HTMLCalciteActionMenuElement; }; interface HTMLCalciteActionPadElement extends Components.CalciteActionPad, HTMLStencilElement { } var HTMLCalciteActionPadElement: { prototype: HTMLCalciteActionPadElement; new (): HTMLCalciteActionPadElement; }; interface HTMLCalciteAlertElement extends Components.CalciteAlert, HTMLStencilElement { } var HTMLCalciteAlertElement: { prototype: HTMLCalciteAlertElement; new (): HTMLCalciteAlertElement; }; interface HTMLCalciteAvatarElement extends Components.CalciteAvatar, HTMLStencilElement { } var HTMLCalciteAvatarElement: { prototype: HTMLCalciteAvatarElement; new (): HTMLCalciteAvatarElement; }; interface HTMLCalciteBlockElement extends Components.CalciteBlock, HTMLStencilElement { } var HTMLCalciteBlockElement: { prototype: HTMLCalciteBlockElement; new (): HTMLCalciteBlockElement; }; interface HTMLCalciteBlockSectionElement extends Components.CalciteBlockSection, HTMLStencilElement { } var HTMLCalciteBlockSectionElement: { prototype: HTMLCalciteBlockSectionElement; new (): HTMLCalciteBlockSectionElement; }; interface HTMLCalciteButtonElement extends Components.CalciteButton, HTMLStencilElement { } var HTMLCalciteButtonElement: { prototype: HTMLCalciteButtonElement; new (): HTMLCalciteButtonElement; }; interface HTMLCalciteCardElement extends Components.CalciteCard, HTMLStencilElement { } var HTMLCalciteCardElement: { prototype: HTMLCalciteCardElement; new (): HTMLCalciteCardElement; }; interface HTMLCalciteCheckboxElement extends Components.CalciteCheckbox, HTMLStencilElement { } var HTMLCalciteCheckboxElement: { prototype: HTMLCalciteCheckboxElement; new (): HTMLCalciteCheckboxElement; }; interface HTMLCalciteChipElement extends Components.CalciteChip, HTMLStencilElement { } var HTMLCalciteChipElement: { prototype: HTMLCalciteChipElement; new (): HTMLCalciteChipElement; }; interface HTMLCalciteColorPickerElement extends Components.CalciteColorPicker, HTMLStencilElement { } var HTMLCalciteColorPickerElement: { prototype: HTMLCalciteColorPickerElement; new (): HTMLCalciteColorPickerElement; }; interface HTMLCalciteColorPickerHexInputElement extends Components.CalciteColorPickerHexInput, HTMLStencilElement { } var HTMLCalciteColorPickerHexInputElement: { prototype: HTMLCalciteColorPickerHexInputElement; new (): HTMLCalciteColorPickerHexInputElement; }; interface HTMLCalciteColorPickerSwatchElement extends Components.CalciteColorPickerSwatch, HTMLStencilElement { } var HTMLCalciteColorPickerSwatchElement: { prototype: HTMLCalciteColorPickerSwatchElement; new (): HTMLCalciteColorPickerSwatchElement; }; interface HTMLCalciteComboboxElement extends Components.CalciteCombobox, HTMLStencilElement { } var HTMLCalciteComboboxElement: { prototype: HTMLCalciteComboboxElement; new (): HTMLCalciteComboboxElement; }; interface HTMLCalciteComboboxItemElement extends Components.CalciteComboboxItem, HTMLStencilElement { } var HTMLCalciteComboboxItemElement: { prototype: HTMLCalciteComboboxItemElement; new (): HTMLCalciteComboboxItemElement; }; interface HTMLCalciteComboboxItemGroupElement extends Components.CalciteComboboxItemGroup, HTMLStencilElement { } var HTMLCalciteComboboxItemGroupElement: { prototype: HTMLCalciteComboboxItemGroupElement; new (): HTMLCalciteComboboxItemGroupElement; }; interface HTMLCalciteDatePickerElement extends Components.CalciteDatePicker, HTMLStencilElement { } var HTMLCalciteDatePickerElement: { prototype: HTMLCalciteDatePickerElement; new (): HTMLCalciteDatePickerElement; }; interface HTMLCalciteDatePickerDayElement extends Components.CalciteDatePickerDay, HTMLStencilElement { } var HTMLCalciteDatePickerDayElement: { prototype: HTMLCalciteDatePickerDayElement; new (): HTMLCalciteDatePickerDayElement; }; interface HTMLCalciteDatePickerMonthElement extends Components.CalciteDatePickerMonth, HTMLStencilElement { } var HTMLCalciteDatePickerMonthElement: { prototype: HTMLCalciteDatePickerMonthElement; new (): HTMLCalciteDatePickerMonthElement; }; interface HTMLCalciteDatePickerMonthHeaderElement extends Components.CalciteDatePickerMonthHeader, HTMLStencilElement { } var HTMLCalciteDatePickerMonthHeaderElement: { prototype: HTMLCalciteDatePickerMonthHeaderElement; new (): HTMLCalciteDatePickerMonthHeaderElement; }; interface HTMLCalciteDropdownElement extends Components.CalciteDropdown, HTMLStencilElement { } var HTMLCalciteDropdownElement: { prototype: HTMLCalciteDropdownElement; new (): HTMLCalciteDropdownElement; }; interface HTMLCalciteDropdownGroupElement extends Components.CalciteDropdownGroup, HTMLStencilElement { } var HTMLCalciteDropdownGroupElement: { prototype: HTMLCalciteDropdownGroupElement; new (): HTMLCalciteDropdownGroupElement; }; interface HTMLCalciteDropdownItemElement extends Components.CalciteDropdownItem, HTMLStencilElement { } var HTMLCalciteDropdownItemElement: { prototype: HTMLCalciteDropdownItemElement; new (): HTMLCalciteDropdownItemElement; }; interface HTMLCalciteFabElement extends Components.CalciteFab, HTMLStencilElement { } var HTMLCalciteFabElement: { prototype: HTMLCalciteFabElement; new (): HTMLCalciteFabElement; }; interface HTMLCalciteFilterElement extends Components.CalciteFilter, HTMLStencilElement { } var HTMLCalciteFilterElement: { prototype: HTMLCalciteFilterElement; new (): HTMLCalciteFilterElement; }; interface HTMLCalciteFlowElement extends Components.CalciteFlow, HTMLStencilElement { } var HTMLCalciteFlowElement: { prototype: HTMLCalciteFlowElement; new (): HTMLCalciteFlowElement; }; interface HTMLCalciteGraphElement extends Components.CalciteGraph, HTMLStencilElement { } var HTMLCalciteGraphElement: { prototype: HTMLCalciteGraphElement; new (): HTMLCalciteGraphElement; }; interface HTMLCalciteHandleElement extends Components.CalciteHandle, HTMLStencilElement { } var HTMLCalciteHandleElement: { prototype: HTMLCalciteHandleElement; new (): HTMLCalciteHandleElement; }; interface HTMLCalciteIconElement extends Components.CalciteIcon, HTMLStencilElement { } var HTMLCalciteIconElement: { prototype: HTMLCalciteIconElement; new (): HTMLCalciteIconElement; }; interface HTMLCalciteInlineEditableElement extends Components.CalciteInlineEditable, HTMLStencilElement { } var HTMLCalciteInlineEditableElement: { prototype: HTMLCalciteInlineEditableElement; new (): HTMLCalciteInlineEditableElement; }; interface HTMLCalciteInputElement extends Components.CalciteInput, HTMLStencilElement { } var HTMLCalciteInputElement: { prototype: HTMLCalciteInputElement; new (): HTMLCalciteInputElement; }; interface HTMLCalciteInputDatePickerElement extends Components.CalciteInputDatePicker, HTMLStencilElement { } var HTMLCalciteInputDatePickerElement: { prototype: HTMLCalciteInputDatePickerElement; new (): HTMLCalciteInputDatePickerElement; }; interface HTMLCalciteInputMessageElement extends Components.CalciteInputMessage, HTMLStencilElement { } var HTMLCalciteInputMessageElement: { prototype: HTMLCalciteInputMessageElement; new (): HTMLCalciteInputMessageElement; }; interface HTMLCalciteInputTimePickerElement extends Components.CalciteInputTimePicker, HTMLStencilElement { } var HTMLCalciteInputTimePickerElement: { prototype: HTMLCalciteInputTimePickerElement; new (): HTMLCalciteInputTimePickerElement; }; interface HTMLCalciteLabelElement extends Components.CalciteLabel, HTMLStencilElement { } var HTMLCalciteLabelElement: { prototype: HTMLCalciteLabelElement; new (): HTMLCalciteLabelElement; }; interface HTMLCalciteLinkElement extends Components.CalciteLink, HTMLStencilElement { } var HTMLCalciteLinkElement: { prototype: HTMLCalciteLinkElement; new (): HTMLCalciteLinkElement; }; interface HTMLCalciteListElement extends Components.CalciteList, HTMLStencilElement { } var HTMLCalciteListElement: { prototype: HTMLCalciteListElement; new (): HTMLCalciteListElement; }; interface HTMLCalciteListItemElement extends Components.CalciteListItem, HTMLStencilElement { } var HTMLCalciteListItemElement: { prototype: HTMLCalciteListItemElement; new (): HTMLCalciteListItemElement; }; interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement { } var HTMLCalciteListItemGroupElement: { prototype: HTMLCalciteListItemGroupElement; new (): HTMLCalciteListItemGroupElement; }; interface HTMLCalciteLoaderElement extends Components.CalciteLoader, HTMLStencilElement { } var HTMLCalciteLoaderElement: { prototype: HTMLCalciteLoaderElement; new (): HTMLCalciteLoaderElement; }; interface HTMLCalciteModalElement extends Components.CalciteModal, HTMLStencilElement { } var HTMLCalciteModalElement: { prototype: HTMLCalciteModalElement; new (): HTMLCalciteModalElement; }; interface HTMLCalciteNoticeElement extends Components.CalciteNotice, HTMLStencilElement { } var HTMLCalciteNoticeElement: { prototype: HTMLCalciteNoticeElement; new (): HTMLCalciteNoticeElement; }; interface HTMLCalciteOptionElement extends Components.CalciteOption, HTMLStencilElement { } var HTMLCalciteOptionElement: { prototype: HTMLCalciteOptionElement; new (): HTMLCalciteOptionElement; }; interface HTMLCalciteOptionGroupElement extends Components.CalciteOptionGroup, HTMLStencilElement { } var HTMLCalciteOptionGroupElement: { prototype: HTMLCalciteOptionGroupElement; new (): HTMLCalciteOptionGroupElement; }; interface HTMLCalcitePaginationElement extends Components.CalcitePagination, HTMLStencilElement { } var HTMLCalcitePaginationElement: { prototype: HTMLCalcitePaginationElement; new (): HTMLCalcitePaginationElement; }; interface HTMLCalcitePanelElement extends Components.CalcitePanel, HTMLStencilElement { } var HTMLCalcitePanelElement: { prototype: HTMLCalcitePanelElement; new (): HTMLCalcitePanelElement; }; interface HTMLCalcitePickListElement extends Components.CalcitePickList, HTMLStencilElement { } var HTMLCalcitePickListElement: { prototype: HTMLCalcitePickListElement; new (): HTMLCalcitePickListElement; }; interface HTMLCalcitePickListGroupElement extends Components.CalcitePickListGroup, HTMLStencilElement { } var HTMLCalcitePickListGroupElement: { prototype: HTMLCalcitePickListGroupElement; new (): HTMLCalcitePickListGroupElement; }; interface HTMLCalcitePickListItemElement extends Components.CalcitePickListItem, HTMLStencilElement { } var HTMLCalcitePickListItemElement: { prototype: HTMLCalcitePickListItemElement; new (): HTMLCalcitePickListItemElement; }; interface HTMLCalcitePopoverElement extends Components.CalcitePopover, HTMLStencilElement { } var HTMLCalcitePopoverElement: { prototype: HTMLCalcitePopoverElement; new (): HTMLCalcitePopoverElement; }; interface HTMLCalcitePopoverManagerElement extends Components.CalcitePopoverManager, HTMLStencilElement { } var HTMLCalcitePopoverManagerElement: { prototype: HTMLCalcitePopoverManagerElement; new (): HTMLCalcitePopoverManagerElement; }; interface HTMLCalciteProgressElement extends Components.CalciteProgress, HTMLStencilElement { } var HTMLCalciteProgressElement: { prototype: HTMLCalciteProgressElement; new (): HTMLCalciteProgressElement; }; interface HTMLCalciteRadioButtonElement extends Components.CalciteRadioButton, HTMLStencilElement { } var HTMLCalciteRadioButtonElement: { prototype: HTMLCalciteRadioButtonElement; new (): HTMLCalciteRadioButtonElement; }; interface HTMLCalciteRadioButtonGroupElement extends Components.CalciteRadioButtonGroup, HTMLStencilElement { } var HTMLCalciteRadioButtonGroupElement: { prototype: HTMLCalciteRadioButtonGroupElement; new (): HTMLCalciteRadioButtonGroupElement; }; interface HTMLCalciteRadioGroupElement extends Components.CalciteRadioGroup, HTMLStencilElement { } var HTMLCalciteRadioGroupElement: { prototype: HTMLCalciteRadioGroupElement; new (): HTMLCalciteRadioGroupElement; }; interface HTMLCalciteRadioGroupItemElement extends Components.CalciteRadioGroupItem, HTMLStencilElement { } var HTMLCalciteRadioGroupItemElement: { prototype: HTMLCalciteRadioGroupItemElement; new (): HTMLCalciteRadioGroupItemElement; }; interface HTMLCalciteRatingElement extends Components.CalciteRating, HTMLStencilElement { } var HTMLCalciteRatingElement: { prototype: HTMLCalciteRatingElement; new (): HTMLCalciteRatingElement; }; interface HTMLCalciteScrimElement extends Components.CalciteScrim, HTMLStencilElement { } var HTMLCalciteScrimElement: { prototype: HTMLCalciteScrimElement; new (): HTMLCalciteScrimElement; }; interface HTMLCalciteSelectElement extends Components.CalciteSelect, HTMLStencilElement { } var HTMLCalciteSelectElement: { prototype: HTMLCalciteSelectElement; new (): HTMLCalciteSelectElement; }; interface HTMLCalciteShellElement extends Components.CalciteShell, HTMLStencilElement { } var HTMLCalciteShellElement: { prototype: HTMLCalciteShellElement; new (): HTMLCalciteShellElement; }; interface HTMLCalciteShellCenterRowElement extends Components.CalciteShellCenterRow, HTMLStencilElement { } var HTMLCalciteShellCenterRowElement: { prototype: HTMLCalciteShellCenterRowElement; new (): HTMLCalciteShellCenterRowElement; }; interface HTMLCalciteShellPanelElement extends Components.CalciteShellPanel, HTMLStencilElement { } var HTMLCalciteShellPanelElement: { prototype: HTMLCalciteShellPanelElement; new (): HTMLCalciteShellPanelElement; }; interface HTMLCalciteSliderElement extends Components.CalciteSlider, HTMLStencilElement { } var HTMLCalciteSliderElement: { prototype: HTMLCalciteSliderElement; new (): HTMLCalciteSliderElement; }; interface HTMLCalciteSortableListElement extends Components.CalciteSortableList, HTMLStencilElement { } var HTMLCalciteSortableListElement: { prototype: HTMLCalciteSortableListElement; new (): HTMLCalciteSortableListElement; }; interface HTMLCalciteSplitButtonElement extends Components.CalciteSplitButton, HTMLStencilElement { } var HTMLCalciteSplitButtonElement: { prototype: HTMLCalciteSplitButtonElement; new (): HTMLCalciteSplitButtonElement; }; interface HTMLCalciteStepperElement extends Components.CalciteStepper, HTMLStencilElement { } var HTMLCalciteStepperElement: { prototype: HTMLCalciteStepperElement; new (): HTMLCalciteStepperElement; }; interface HTMLCalciteStepperItemElement extends Components.CalciteStepperItem, HTMLStencilElement { } var HTMLCalciteStepperItemElement: { prototype: HTMLCalciteStepperItemElement; new (): HTMLCalciteStepperItemElement; }; interface HTMLCalciteSwitchElement extends Components.CalciteSwitch, HTMLStencilElement { } var HTMLCalciteSwitchElement: { prototype: HTMLCalciteSwitchElement; new (): HTMLCalciteSwitchElement; }; interface HTMLCalciteTabElement extends Components.CalciteTab, HTMLStencilElement { } var HTMLCalciteTabElement: { prototype: HTMLCalciteTabElement; new (): HTMLCalciteTabElement; }; interface HTMLCalciteTabNavElement extends Components.CalciteTabNav, HTMLStencilElement { } var HTMLCalciteTabNavElement: { prototype: HTMLCalciteTabNavElement; new (): HTMLCalciteTabNavElement; }; interface HTMLCalciteTabTitleElement extends Components.CalciteTabTitle, HTMLStencilElement { } var HTMLCalciteTabTitleElement: { prototype: HTMLCalciteTabTitleElement; new (): HTMLCalciteTabTitleElement; }; interface HTMLCalciteTabsElement extends Components.CalciteTabs, HTMLStencilElement { } var HTMLCalciteTabsElement: { prototype: HTMLCalciteTabsElement; new (): HTMLCalciteTabsElement; }; interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement { } var HTMLCalciteTileElement: { prototype: HTMLCalciteTileElement; new (): HTMLCalciteTileElement; }; interface HTMLCalciteTileSelectElement extends Components.CalciteTileSelect, HTMLStencilElement { } var HTMLCalciteTileSelectElement: { prototype: HTMLCalciteTileSelectElement; new (): HTMLCalciteTileSelectElement; }; interface HTMLCalciteTileSelectGroupElement extends Components.CalciteTileSelectGroup, HTMLStencilElement { } var HTMLCalciteTileSelectGroupElement: { prototype: HTMLCalciteTileSelectGroupElement; new (): HTMLCalciteTileSelectGroupElement; }; interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement { } var HTMLCalciteTimePickerElement: { prototype: HTMLCalciteTimePickerElement; new (): HTMLCalciteTimePickerElement; }; interface HTMLCalciteTipElement extends Components.CalciteTip, HTMLStencilElement { } var HTMLCalciteTipElement: { prototype: HTMLCalciteTipElement; new (): HTMLCalciteTipElement; }; interface HTMLCalciteTipGroupElement extends Components.CalciteTipGroup, HTMLStencilElement { } var HTMLCalciteTipGroupElement: { prototype: HTMLCalciteTipGroupElement; new (): HTMLCalciteTipGroupElement; }; interface HTMLCalciteTipManagerElement extends Components.CalciteTipManager, HTMLStencilElement { } var HTMLCalciteTipManagerElement: { prototype: HTMLCalciteTipManagerElement; new (): HTMLCalciteTipManagerElement; }; interface HTMLCalciteTooltipElement extends Components.CalciteTooltip, HTMLStencilElement { } var HTMLCalciteTooltipElement: { prototype: HTMLCalciteTooltipElement; new (): HTMLCalciteTooltipElement; }; interface HTMLCalciteTooltipManagerElement extends Components.CalciteTooltipManager, HTMLStencilElement { } var HTMLCalciteTooltipManagerElement: { prototype: HTMLCalciteTooltipManagerElement; new (): HTMLCalciteTooltipManagerElement; }; interface HTMLCalciteTreeElement extends Components.CalciteTree, HTMLStencilElement { } var HTMLCalciteTreeElement: { prototype: HTMLCalciteTreeElement; new (): HTMLCalciteTreeElement; }; interface HTMLCalciteTreeItemElement extends Components.CalciteTreeItem, HTMLStencilElement { } var HTMLCalciteTreeItemElement: { prototype: HTMLCalciteTreeItemElement; new (): HTMLCalciteTreeItemElement; }; interface HTMLCalciteValueListElement extends Components.CalciteValueList, HTMLStencilElement { } var HTMLCalciteValueListElement: { prototype: HTMLCalciteValueListElement; new (): HTMLCalciteValueListElement; }; interface HTMLCalciteValueListItemElement extends Components.CalciteValueListItem, HTMLStencilElement { } var HTMLCalciteValueListItemElement: { prototype: HTMLCalciteValueListItemElement; new (): HTMLCalciteValueListItemElement; }; interface HTMLElementTagNameMap { "calcite-accordion": HTMLCalciteAccordionElement; "calcite-accordion-item": HTMLCalciteAccordionItemElement; "calcite-action": HTMLCalciteActionElement; "calcite-action-bar": HTMLCalciteActionBarElement; "calcite-action-group": HTMLCalciteActionGroupElement; "calcite-action-menu": HTMLCalciteActionMenuElement; "calcite-action-pad": HTMLCalciteActionPadElement; "calcite-alert": HTMLCalciteAlertElement; "calcite-avatar": HTMLCalciteAvatarElement; "calcite-block": HTMLCalciteBlockElement; "calcite-block-section": HTMLCalciteBlockSectionElement; "calcite-button": HTMLCalciteButtonElement; "calcite-card": HTMLCalciteCardElement; "calcite-checkbox": HTMLCalciteCheckboxElement; "calcite-chip": HTMLCalciteChipElement; "calcite-color-picker": HTMLCalciteColorPickerElement; "calcite-color-picker-hex-input": HTMLCalciteColorPickerHexInputElement; "calcite-color-picker-swatch": HTMLCalciteColorPickerSwatchElement; "calcite-combobox": HTMLCalciteComboboxElement; "calcite-combobox-item": HTMLCalciteComboboxItemElement; "calcite-combobox-item-group": HTMLCalciteComboboxItemGroupElement; "calcite-date-picker": HTMLCalciteDatePickerElement; "calcite-date-picker-day": HTMLCalciteDatePickerDayElement; "calcite-date-picker-month": HTMLCalciteDatePickerMonthElement; "calcite-date-picker-month-header": HTMLCalciteDatePickerMonthHeaderElement; "calcite-dropdown": HTMLCalciteDropdownElement; "calcite-dropdown-group": HTMLCalciteDropdownGroupElement; "calcite-dropdown-item": HTMLCalciteDropdownItemElement; "calcite-fab": HTMLCalciteFabElement; "calcite-filter": HTMLCalciteFilterElement; "calcite-flow": HTMLCalciteFlowElement; "calcite-graph": HTMLCalciteGraphElement; "calcite-handle": HTMLCalciteHandleElement; "calcite-icon": HTMLCalciteIconElement; "calcite-inline-editable": HTMLCalciteInlineEditableElement; "calcite-input": HTMLCalciteInputElement; "calcite-input-date-picker": HTMLCalciteInputDatePickerElement; "calcite-input-message": HTMLCalciteInputMessageElement; "calcite-input-time-picker": HTMLCalciteInputTimePickerElement; "calcite-label": HTMLCalciteLabelElement; "calcite-link": HTMLCalciteLinkElement; "calcite-list": HTMLCalciteListElement; "calcite-list-item": HTMLCalciteListItemElement; "calcite-list-item-group": HTMLCalciteListItemGroupElement; "calcite-loader": HTMLCalciteLoaderElement; "calcite-modal": HTMLCalciteModalElement; "calcite-notice": HTMLCalciteNoticeElement; "calcite-option": HTMLCalciteOptionElement; "calcite-option-group": HTMLCalciteOptionGroupElement; "calcite-pagination": HTMLCalcitePaginationElement; "calcite-panel": HTMLCalcitePanelElement; "calcite-pick-list": HTMLCalcitePickListElement; "calcite-pick-list-group": HTMLCalcitePickListGroupElement; "calcite-pick-list-item": HTMLCalcitePickListItemElement; "calcite-popover": HTMLCalcitePopoverElement; "calcite-popover-manager": HTMLCalcitePopoverManagerElement; "calcite-progress": HTMLCalciteProgressElement; "calcite-radio-button": HTMLCalciteRadioButtonElement; "calcite-radio-button-group": HTMLCalciteRadioButtonGroupElement; "calcite-radio-group": HTMLCalciteRadioGroupElement; "calcite-radio-group-item": HTMLCalciteRadioGroupItemElement; "calcite-rating": HTMLCalciteRatingElement; "calcite-scrim": HTMLCalciteScrimElement; "calcite-select": HTMLCalciteSelectElement; "calcite-shell": HTMLCalciteShellElement; "calcite-shell-center-row": HTMLCalciteShellCenterRowElement; "calcite-shell-panel": HTMLCalciteShellPanelElement; "calcite-slider": HTMLCalciteSliderElement; "calcite-sortable-list": HTMLCalciteSortableListElement; "calcite-split-button": HTMLCalciteSplitButtonElement; "calcite-stepper": HTMLCalciteStepperElement; "calcite-stepper-item": HTMLCalciteStepperItemElement; "calcite-switch": HTMLCalciteSwitchElement; "calcite-tab": HTMLCalciteTabElement; "calcite-tab-nav": HTMLCalciteTabNavElement; "calcite-tab-title": HTMLCalciteTabTitleElement; "calcite-tabs": HTMLCalciteTabsElement; "calcite-tile": HTMLCalciteTileElement; "calcite-tile-select": HTMLCalciteTileSelectElement; "calcite-tile-select-group": HTMLCalciteTileSelectGroupElement; "calcite-time-picker": HTMLCalciteTimePickerElement; "calcite-tip": HTMLCalciteTipElement; "calcite-tip-group": HTMLCalciteTipGroupElement; "calcite-tip-manager": HTMLCalciteTipManagerElement; "calcite-tooltip": HTMLCalciteTooltipElement; "calcite-tooltip-manager": HTMLCalciteTooltipManagerElement; "calcite-tree": HTMLCalciteTreeElement; "calcite-tree-item": HTMLCalciteTreeItemElement; "calcite-value-list": HTMLCalciteValueListElement; "calcite-value-list-item": HTMLCalciteValueListItemElement; } } declare namespace LocalJSX { interface CalciteAccordion { /** * specify the appearance - default (containing border), or minimal (no containing border), defaults to default */ "appearance"?: AccordionAppearance; /** * specify the placement of the icon in the header, defaults to end */ "iconPosition"?: Position; /** * specify the type of the icon in the header, defaults to chevron */ "iconType"?: "chevron" | "caret" | "plus-minus"; /** * specify the scale of accordion, defaults to m */ "scale"?: Scale; /** * specify the selection mode - multi (allow any number of open items), single (allow one open item), or single-persist (allow and require one open item), defaults to multi */ "selectionMode"?: "multi" | "single" | "single-persist"; } interface CalciteAccordionItem { /** * Indicates whether the item is active. */ "active"?: boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * pass a title for the accordion item */ "itemSubtitle"?: string; /** * pass a title for the accordion item */ "itemTitle"?: string; } interface CalciteAction { /** * Indicates whether the action is highlighted. */ "active"?: boolean; /** * Optionally specify the horizontal alignment of button elements with text content. */ "alignment"?: Alignment; /** * Specify the appearance style of the action, defaults to solid. */ "appearance"?: Extract<"solid" | "clear", Appearance>; /** * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section. */ "compact"?: boolean; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. */ "icon"?: string; /** * Indicates unread changes. */ "indicator"?: boolean; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Emitted when the action has been clicked. * @deprecated use onClick instead. */ "onCalciteActionClick"?: (event: CustomEvent) => void; /** * Specifies the size of the action. */ "scale"?: Scale; /** * Text that accompanies the action icon. */ "text": string; /** * Indicates whether the text is displayed. */ "textEnabled"?: boolean; } interface CalciteActionBar { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled"?: boolean; /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Emitted when expanded has been toggled. */ "onCalciteActionBarToggle"?: (event: CustomEvent) => void; /** * Disables automatically overflowing actions that won't fit into menus. */ "overflowActionsDisabled"?: boolean; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; /** * Specifies the size of the expand action. */ "scale"?: Scale; } interface CalciteActionGroup { /** * Indicates number of columns. */ "columns"?: Columns; /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Text string for the actions menu. */ "intlMore"?: string; /** * Indicates the horizontal, vertical, or grid layout of the component. */ "layout"?: Layout; /** * Opens the action menu. */ "menuOpen"?: boolean; /** * Specifies the size of the action-menu. */ "scale"?: Scale; } interface CalciteActionMenu { /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Text string for the actions menu. */ "label": string; /** * Emitted when the open property has changed. */ "onCalciteActionMenuOpenChange"?: (event: CustomEvent) => void; /** * Opens the action menu. */ "open"?: boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25) */ "placement"?: PopperPlacement; /** * Specifies the size of the menu trigger action. */ "scale"?: Scale; } interface CalciteActionPad { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled"?: boolean; /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Indicates the horizontal or vertical layout of the component. */ "layout"?: Layout; /** * Emitted when expanded has been toggled. */ "onCalciteActionPadToggle"?: (event: CustomEvent) => void; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; /** * Specifies the size of the expand action. */ "scale"?: Scale; } interface CalciteAlert { /** * Is the alert currently active or not */ "active"?: boolean; /** * Close the alert automatically (recommended for passive, non-blocking alerts) */ "autoDismiss"?: boolean; /** * Duration of autoDismiss (only used with `autoDismiss`) */ "autoDismissDuration"?: AlertDuration; /** * Color for the alert (will apply to top border and icon) */ "color"?: StatusColor; /** * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon */ "icon"?: string | boolean; /** * string to override English close text * @default "Close" */ "intlClose"?: string; /** * Accessible name for the component */ "label": string; /** * Fired when an alert is closed */ "onCalciteAlertClose"?: (event: CustomEvent) => void; /** * Fired when an alert is opened */ "onCalciteAlertOpen"?: (event: CustomEvent) => void; /** * specify the placement of the alert */ "placement"?: AlertPlacement; /** * specify the scale of the alert, defaults to m */ "scale"?: Scale; } interface CalciteAvatar { /** * full name of the user */ "fullName"?: string; /** * specify the scale of the avatar, defaults to m */ "scale"?: Scale; /** * src to an image (remember to add a token if the user is private) */ "thumbnail"?: string; /** * unique id for user */ "userId"?: string; /** * user name */ "username"?: string; } interface CalciteBlock { /** * When true, this block will be collapsible. */ "collapsible"?: boolean; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * When true, displays a drag handle in the header. */ "dragHandle"?: boolean; /** * Block heading. */ "heading": string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Text string used for the actions menu * @default "Options" */ "intlOptions"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Emitted when the header has been clicked. */ "onCalciteBlockToggle"?: (event: CustomEvent) => void; /** * When true, the block's content will be displayed. */ "open"?: boolean; /** * Block status. Updates or adds icon to show related icon and color. */ "status"?: Status; /** * Block summary. */ "summary"?: string; } interface CalciteBlockSection { /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * Emitted when the header has been clicked. */ "onCalciteBlockSectionToggle"?: (event: CustomEvent) => void; /** * When true, the block's section content will be displayed. */ "open"?: boolean; /** * BlockSection status. Adds indicator to show valid or invalid status. */ "status"?: Status; /** * Text displayed in the button. */ "text"?: string; /** * This property determines the look of the section toggle. If the value is "switch", a toggle-switch will be displayed. If the value is "button", a clickable header is displayed. */ "toggleDisplay"?: BlockSectionToggleDisplay; } interface CalciteButton { /** * optionally specify alignment of button elements. */ "alignment"?: ButtonAlignment; /** * specify the appearance style of the button, defaults to solid. */ "appearance"?: ButtonAppearance; /** * specify the color of the button, defaults to blue */ "color"?: ButtonColor; /** * is the button disabled */ "disabled"?: boolean; /** * The form ID to associate with the component * @deprecated – this property is no longer needed if placed inside a form. */ "form"?: string; /** * optionally pass a href - used to determine if the component should render as a button or an anchor */ "href"?: string; /** * optionally pass an icon to display at the end of a button - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of a button - accepts calcite ui icon names */ "iconStart"?: string; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * optionally add a calcite-loader component to the button, disabling interaction. */ "loading"?: boolean; /** * The name attribute to apply to the button */ "name"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * optionally add a round style to the button */ "round"?: boolean; /** * specify the scale of the button, defaults to m */ "scale"?: Scale; /** * is the button a child of a calcite-split-button */ "splitChild"?: "primary" | "secondary" | false; /** * The target attribute to apply to the hyperlink */ "target"?: string; /** * The type attribute to apply to the button */ "type"?: string; /** * specify the width of the button, defaults to auto */ "width"?: Width; } interface CalciteCard { /** * string to override English deselect text for checkbox when selectable is true * @default "Deselect" */ "intlDeselect"?: string; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * string to override English select text for checkbox when selectable is true * @default "Select" */ "intlSelect"?: string; /** * When true, the cards content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Fired when a selectable card is selected */ "onCalciteCardSelect"?: (event: CustomEvent) => void; /** * Indicates whether the card is selectable. */ "selectable"?: boolean; /** * Indicates whether the card is selected. */ "selected"?: boolean; } interface CalciteCheckbox { /** * The checked state of the checkbox. */ "checked"?: boolean; /** * True if the checkbox is disabled */ "disabled"?: boolean; /** * The id attribute of the checkbox. When omitted, a globally unique identifier is used. */ "guid"?: string; /** * True if the checkbox is initially indeterminate, which is independent from its checked state https://css-tricks.com/indeterminate-checkboxes/ */ "indeterminate"?: boolean; /** * The name of the checkbox input */ "name"?: any; /** * Emitted when the checkbox checked status changes */ "onCalciteCheckboxChange"?: (event: CustomEvent) => void; /** * specify the scale of the checkbox, defaults to m */ "scale"?: Scale; /** * The value of the checkbox input */ "value"?: any; } interface CalciteChip { /** * specify the appearance style of the button, defaults to solid. */ "appearance"?: Extract<"solid" | "clear", Appearance>; /** * specify the color of the button, defaults to blue */ "color"?: ChipColor; /** * Aria label for the "x" button * @default "Close" */ "dismissLabel"?: string; /** * Optionally show a button the user can click to dismiss the chip */ "dismissible"?: boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * flip the icon in rtl */ "iconFlipRtl"?: boolean; /** * Emitted when the dismiss button is clicked */ "onCalciteChipDismiss"?: (event: CustomEvent) => void; /** * specify the scale of the chip, defaults to m */ "scale"?: Scale; /** * The assigned value for the chip */ "value": any; } interface CalciteColorPicker { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty"?: boolean; /** * specify the appearance - default (containing border), or minimal (no containing border) */ "appearance"?: ColorAppearance; /** * When true, disabled prevents user interaction. */ "disabled"?: boolean; /** * The format of the value property. When "auto", the format will be inferred from `value` when set. * @default "auto" */ "format"?: Format; /** * When true, hides the RGB/HSV channel inputs */ "hideChannels"?: boolean; /** * When true, hides the hex input */ "hideHex"?: boolean; /** * When true, hides the saved colors section */ "hideSaved"?: boolean; /** * Label used for the blue channel * @default "B" */ "intlB"?: string; /** * Label used for the blue channel description * @default "Blue" */ "intlBlue"?: string; /** * Label used for the delete color button. * @default "Delete color" */ "intlDeleteColor"?: string; /** * Label used for the green channel * @default "G" */ "intlG"?: string; /** * Label used for the green channel description * @default "Green" */ "intlGreen"?: string; /** * Label used for the hue channel * @default "H" */ "intlH"?: string; /** * Label used for the hex input * @default "Hex" */ "intlHex"?: string; /** * Label used for the HSV mode * @default "HSV" */ "intlHsv"?: string; /** * Label used for the hue channel description * @default "Hue" */ "intlHue"?: string; /** * Label used for the hex input when there is no color selected. * @default "No color" */ "intlNoColor"?: string; /** * Label used for the red channel * @default "R" */ "intlR"?: string; /** * Label used for the red channel description * @default "Red" */ "intlRed"?: string; /** * Label used for the RGB mode * @default "RGB" */ "intlRgb"?: string; /** * Label used for the saturation channel * @default "S" */ "intlS"?: string; /** * Label used for the saturation channel description * @default "Saturation" */ "intlSaturation"?: string; /** * Label used for the save color button. * @default "Save color" */ "intlSaveColor"?: string; /** * Label used for the saved colors section * @default "Saved" */ "intlSaved"?: string; /** * Label used for the value channel * @default "V" */ "intlV"?: string; /** * Label used for the * @default "Value" */ "intlValue"?: string; /** * Fires when the color value has changed. */ "onCalciteColorPickerChange"?: (event: CustomEvent) => void; /** * Fires as the color value changes. This is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved. */ "onCalciteColorPickerInput"?: (event: CustomEvent) => void; /** * The scale of the color picker. */ "scale"?: Scale; /** * Storage ID for colors. */ "storageId"?: string; /** * The color value. This value can be either a {@link https ://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string} a RGB, HSL or HSV object. The type will be preserved as the color is updated. * @default "#007ac2" * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10) */ "value"?: ColorValue | null; } interface CalciteColorPickerHexInput { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty"?: boolean; /** * Label used for the hex input. * @default "Hex" */ "intlHex"?: string; /** * Label used for the hex input when there is no color selected. * @default "No color" */ "intlNoColor"?: string; /** * Emitted when the hex value changes. */ "onCalciteColorPickerHexInputChange"?: (event: CustomEvent) => void; /** * The component's scale. */ "scale"?: Scale; /** * The hex value. */ "value"?: string; } interface CalciteColorPickerSwatch { /** * Used to display whether the swatch is active or not. */ "active"?: boolean; /** * The color value. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value */ "color"?: string; /** * The component scale. */ "scale"?: Scale; } interface CalciteCombobox { /** * Opens or closes the combobox */ "active"?: boolean; /** * Allow entry of custom values which are not in the original set of items */ "allowCustomValues"?: boolean; /** * Disable combobox input */ "disabled"?: boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: ComputedPlacement[]; /** * string to override the English "Remove tag" text for when an item is selected. * @default "Remove tag" */ "intlRemoveTag"?: string; /** * Aria label for combobox (required) */ "label": string; /** * Specify the maximum number of combobox items (including nested children) to display before showing the scroller */ "maxItems"?: number; /** * The name of the switch input */ "name"?: string; /** * Called when the selected item(s) changes. */ "onCalciteComboboxChange"?: (event: CustomEvent<{ selectedItems: HTMLCalciteComboboxItemElement[] }>) => void; /** * Called when a selected item in the combobox is dismissed via its chip * */ "onCalciteComboboxChipDismiss"?: (event: CustomEvent) => void; /** * Called when the user has entered text to filter the options list */ "onCalciteComboboxFilterChange"?: (event: CustomEvent<{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }>) => void; /** * Called when the selected items set changes * @deprecated use calciteComboboxChange instead */ "onCalciteLookupChange"?: (event: CustomEvent) => void; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Placeholder text for input */ "placeholder"?: string; /** * Specify the scale of the combobox, defaults to m */ "scale"?: Scale; /** * specify the selection mode - multi: allow any number of selected items (default) - single: only one selection) - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips */ "selectionMode"?: ComboboxSelectionMode; /** * The value(s) of the selectedItem(s) */ "value"?: string | string[]; } interface CalciteComboboxItem { /** * True when item is highlighted either from keyboard or mouse hover */ "active"?: boolean; /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors"?: ComboboxChildElement[]; /** * Don't filter this item based on the search text */ "constant"?: boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled"?: boolean; /** * Unique identifier, used for accessibility */ "guid"?: string; /** * Custom icon to display both in combobox chips and next to combobox item text */ "icon"?: string; /** * Emitted whenever the item is selected or unselected. */ "onCalciteComboboxItemChange"?: (event: CustomEvent) => void; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected"?: boolean; /** * The main label for this item. */ "textLabel": string; /** * The item's associated value */ "value": any; } interface CalciteComboboxItemGroup { /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors"?: ComboboxChildElement[]; /** * Title of the group */ "label": string; } interface CalciteDatePicker { /** * Active range */ "activeRange"?: "start" | "end"; /** * Selected end date * @deprecated use value instead */ "end"?: string; /** * Selected end date as full date object * @deprecated use valueAsDate instead */ "endAsDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Localized string for "next month" (used for aria label) * @default "Next month" */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) * @default "Previous month" */ "intlPrevMonth"?: string; /** * Localized string for "year" (used for aria label) * @default "Year" */ "intlYear"?: string; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Latest allowed date ("yyyy-mm-dd") */ "max"?: string; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * Trigger calcite date change when a user changes the date. */ "onCalciteDatePickerChange"?: (event: CustomEvent) => void; /** * Trigger calcite date change when a user changes the date range. * @see [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/date-picker/interfaces.ts#L1) */ "onCalciteDatePickerRangeChange"?: (event: CustomEvent) => void; /** * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */ "proximitySelectionDisabled"?: boolean; /** * Range mode activation */ "range"?: boolean; /** * specify the scale of the date picker */ "scale"?: "s" | "m" | "l"; /** * Selected start date * @deprecated use value instead */ "start"?: string; /** * Selected start date as full date object * @deprecated use valueAsDate instead */ "startAsDate"?: Date; /** * Selected date */ "value"?: string | string[]; /** * Selected date as full date object */ "valueAsDate"?: Date | Date[]; } interface CalciteDatePickerDay { /** * Date is actively in focus for keyboard navigation */ "active"?: boolean; /** * Date is in the current month. */ "currentMonth"?: boolean; /** * Day of the month to be shown. */ "day"?: number; /** * Date is outside of range and can't be selected */ "disabled"?: boolean; /** * Date is the end of date range */ "endOfRange"?: boolean; /** * Date is currently highlighted as part of the range */ "highlighted"?: boolean; /** * CLDR data for current locale */ "localeData"?: DateLocaleData; /** * Emitted when user selects day */ "onCalciteDaySelect"?: (event: CustomEvent) => void; /** * Showing date range */ "range"?: boolean; /** * Date is being hovered and within the set range */ "rangeHover"?: boolean; /** * specify the scale of the date picker */ "scale"?: Scale; /** * Date is the current selected date of the picker */ "selected"?: boolean; /** * Date is the start of date range */ "startOfRange"?: boolean; /** * Date value for the day. */ "value"?: Date; } interface CalciteDatePickerMonth { /** * Date currently active. */ "activeDate"?: Date; /** * End date currently active */ "endDate"?: Date; /** * The range of dates currently being hovered */ "hoverRange"?: HoverRange; /** * Maximum date of the calendar above which is disabled. */ "max"?: Date; /** * Minimum date of the calendar below which is disabled. */ "min"?: Date; /** * Active date for the user keyboard access. */ "onCalciteDatePickerActiveDateChange"?: (event: CustomEvent) => void; /** * Event emitted when user selects the date. */ "onCalciteDatePickerSelect"?: (event: CustomEvent) => void; /** * specify the scale of the date picker */ "scale"?: Scale; /** * Already selected date. */ "selectedDate"?: Date; /** * Start date currently active. */ "startDate"?: Date; } interface CalciteDatePickerMonthHeader { /** * Focused date with indicator (will become selected date if user proceeds) */ "activeDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Localized string for next month. */ "intlNextMonth"?: string; /** * Localized string for previous month. */ "intlPrevMonth"?: string; /** * Localized string for year. */ "intlYear"?: string; /** * User's language and region as BCP 47 formatted string. */ "locale"?: string; /** * CLDR locale data for translated calendar info */ "localeData"?: DateLocaleData; /** * Maximum date of the calendar above which is disabled. */ "max"?: Date; /** * Minimum date of the calendar below which is disabled. */ "min"?: Date; /** * Changes to active date */ "onCalciteDatePickerSelect"?: (event: CustomEvent) => void; /** * specify the scale of the date picker */ "scale"?: Scale; /** * Already selected date. */ "selectedDate"?: Date; } interface CalciteDropdown { /** * Opens or closes the dropdown */ "active"?: boolean; /** * allow the dropdown to remain open after a selection is made if the selection-mode of the selected item's containing group is "none", the dropdown will always close */ "disableCloseOnSelect"?: boolean; /** * is the dropdown disabled */ "disabled"?: boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: ComputedPlacement[]; /** * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group */ "maxItems"?: number; /** * fires when a dropdown has been closed * */ "onCalciteDropdownClose"?: (event: CustomEvent) => void; /** * fires when a dropdown has been opened * */ "onCalciteDropdownOpen"?: (event: CustomEvent) => void; /** * fires when a dropdown item has been selected or deselected * */ "onCalciteDropdownSelect"?: (event: CustomEvent) => void; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the dropdown will be positioned relative to the button. * @default "bottom-leading" */ "placement"?: MenuPlacement; /** * specify the scale of dropdown, defaults to m */ "scale"?: Scale; /** * **read-only** The currently selected items * @readonly */ "selectedItems"?: HTMLCalciteDropdownItemElement[]; /** * specify whether the dropdown is opened by hover or click of a trigger element */ "type"?: "hover" | "click"; /** * specify the width of dropdown, defaults to m */ "width"?: Scale; } interface CalciteDropdownGroup { /** * optionally set a group title for display */ "groupTitle"?: string; /** * Specifies the size of the action. */ "scale"?: Scale; /** * specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item), none (no active items), defaults to single */ "selectionMode"?: SelectionMode; } interface CalciteDropdownItem { /** * Indicates whether the item is active. */ "active"?: boolean; /** * optionally pass a href - used to determine if the component should render as anchor */ "href"?: string; /** * optionally pass an icon to display at the end of an item - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of an item - accepts calcite ui icon names */ "iconStart"?: string; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * The target attribute to apply to the hyperlink */ "target"?: string; } interface CalciteFab { /** * Used to set the button's appearance. Default is outline. */ "appearance"?: Extract<"solid" | "outline", Appearance>; /** * Used to set the button's color. Default is light. */ "color"?: ButtonColor; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. * @default "plus" */ "icon"?: string; /** * Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Specifies the size of the fab. */ "scale"?: Scale; /** * Text that accompanies the FAB icon. */ "text"?: string; /** * Indicates whether the text is displayed. */ "textEnabled"?: boolean; } interface CalciteFilter { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * The resulting items after filtering. * @readonly */ "filteredItems"?: object[]; /** * A text label that will appear on the clear button. */ "intlClear"?: string; /** * A text label that will appear next to the input field. */ "intlLabel"?: string; /** * The items to filter through. The filter uses this 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 required. */ "items"?: object[]; /** * This event fires when the filter text changes. */ "onCalciteFilterChange"?: (event: CustomEvent) => void; /** * Placeholder text for the input element's placeholder attribute */ "placeholder"?: string; /** * specify the scale of filter, defaults to m */ "scale"?: Scale; /** * Filter value. */ "value"?: string; } interface CalciteFlow { } interface CalciteGraph { /** * Array of values describing a single color stop ([offset, color, opacity]) These color stops should be sorted by offset value */ "colorStops"?: ColorStop[]; /** * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value */ "data"?: DataSeries; /** * End of highlight color if highlighting range */ "highlightMax"?: number; /** * Start of highlight color if highlighting range */ "highlightMin"?: number; /** * Highest point of the range */ "max": number; /** * Lowest point of the range */ "min": number; } interface CalciteHandle { /** * Emitted when the the handle is activated and the up or down arrow key is pressed. */ "onCalciteHandleNudge"?: (event: CustomEvent) => void; /** * Value for the button title attribute */ "textTitle"?: string; } interface CalciteIcon { /** * When true, the icon will be flipped when the element direction is 'rtl'. */ "flipRtl"?: boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. */ "icon"?: string; /** * Icon scale. */ "scale"?: Scale; /** * The icon label. It is recommended to set this value if your icon is semantic. */ "textLabel"?: string; } interface CalciteInlineEditable { /** * when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */ "afterConfirm"?: () => Promise; /** * specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */ "controls"?: boolean; /** * specify whether editing can be enabled */ "disabled"?: boolean; /** * specify whether the wrapped input element is editable, defaults to false */ "editingEnabled"?: boolean; /** * specify text to be user for the cancel editing button's aria-label, defaults to `Cancel` * @default "Cancel" */ "intlCancelEditing"?: string; /** * specify text to be user for the confirm changes button's aria-label, defaults to `Save` * @default "Save" */ "intlConfirmChanges"?: string; /** * specify text to be user for the enable editing button's aria-label, defaults to `Click to edit` * @default "Click to edit" */ "intlEnableEditing"?: string; /** * specify whether the confirm button should display a loading state, defaults to false */ "loading"?: boolean; /** * Emitted when the cancel button gets clicked. */ "onCalciteInlineEditableEditCancel"?: (event: CustomEvent) => void; /** * Emitted when the check button gets clicked. */ "onCalciteInlineEditableEditConfirm"?: (event: CustomEvent) => void; /** * specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale */ "scale"?: Scale; } interface CalciteInput { /** * specify the alignment of the value of the input */ "alignment"?: Position; /** * should the input autofocus */ "autofocus"?: boolean; /** * optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea" */ "clearable"?: boolean; /** * is the input disabled */ "disabled"?: boolean; /** * for number values, displays the locale's group separator */ "groupSeparator"?: boolean; /** * when true, the component will not be visible */ "hidden"?: boolean; /** * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type */ "icon"?: string | boolean; /** * flip the icon in rtl */ "iconFlipRtl"?: boolean; /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * specify if the input is in loading state */ "loading"?: boolean; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * input max */ "max"?: number; /** * Maximum length of the input value */ "maxLength"?: number; /** * Maximum length of text input. * @deprecated use maxLength instead */ "maxlength"?: number; /** * input min */ "min"?: number; /** * Minimum length of the text input */ "minLength"?: number; /** * The name of the input */ "name"?: string; /** * specify the placement of the number buttons */ "numberButtonType"?: InputPlacement; /** * This event fires each time a new value is typed and committed. */ "onCalciteInputChange"?: (event: CustomEvent) => void; /** * This event fires each time a new value is typed. */ "onCalciteInputInput"?: (event: CustomEvent) => void; /** * explicitly whitelist placeholder attribute */ "placeholder"?: string; /** * optionally add prefix */ "prefixText"?: string; /** * When true, a field cannot be modified. */ "readOnly"?: boolean; /** * is the input required */ "required"?: boolean; /** * specify the scale of the input, defaults to m */ "scale"?: Scale; /** * specify the status of the input field, determines message and icons */ "status"?: Status; /** * input step */ "step"?: number | "any"; /** * optionally add suffix * */ "suffixText"?: string; /** * specify the input type Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time` */ "type"?: | "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week"; /** * input value */ "value"?: string; } interface CalciteInputDatePicker { /** * Expand or collapse when calendar does not have input */ "active"?: boolean; /** * When false, the component won't be interactive. */ "disabled"?: boolean; /** * Selected end date * @deprecated use value instead */ "end"?: string; /** * Selected end date as full date object * @deprecated use valueAsDate instead */ "endAsDate"?: Date; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: ComputedPlacement[]; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Localized string for "next month" (used for aria label) * @default "Next month" */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) * @default "Previous month" */ "intlPrevMonth"?: string; /** * Localized string for "year" (used for aria label) * @default "Year" */ "intlYear"?: string; /** * Layout */ "layout"?: "horizontal" | "vertical"; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Latest allowed date ("yyyy-mm-dd") */ "max"?: string; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * The picker's name. Gets submitted with the form. */ "name"?: string; /** * Trigger calcite date change when a user changes the date. * @deprecated use `calciteInputDatePickerChange` instead. */ "onCalciteDatePickerChange"?: (event: CustomEvent) => void; /** * Trigger calcite date change when a user changes the date range. * @see [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1) * @deprecated use `calciteInputDatePickerChange` instead. */ "onCalciteDatePickerRangeChange"?: (event: CustomEvent) => void; /** * This event fires when the input date picker value changes. */ "onCalciteInputDatePickerChange"?: (event: CustomEvent) => void; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */ "proximitySelectionDisabled"?: boolean; /** * Range mode activation */ "range"?: boolean; /** * specify the scale of the date picker */ "scale"?: "s" | "m" | "l"; /** * Selected start date * @deprecated use value instead */ "start"?: string; /** * Selected start date as full date object * @deprecated use valueAsDate instead */ "startAsDate"?: Date; /** * Selected date */ "value"?: string | string[]; /** * Selected date as full date object */ "valueAsDate"?: Date | Date[]; } interface CalciteInputMessage { /** * Indicates whether the message is displayed. */ "active"?: boolean; /** * when used as a boolean set to true, show a default icon based on status. You can also pass a calcite-ui-icon name to this prop to display a custom icon */ "icon"?: boolean | string; /** * specify the scale of the input, defaults to m */ "scale"?: Scale; /** * specify the status of the input field, determines message and icons */ "status"?: Status; /** * specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) * @deprecated "floating" type is no longer supported */ "type"?: "default"; } interface CalciteInputTimePicker { /** * The active state of the time input */ "active"?: boolean; /** * The disabled state of the time input */ "disabled"?: boolean; /** * aria-label for the hour input */ "intlHour"?: string; /** * aria-label for the hour down button */ "intlHourDown"?: string; /** * aria-label for the hour up button */ "intlHourUp"?: string; /** * aria-label for the meridiem (am/pm) input */ "intlMeridiem"?: string; /** * aria-label for the meridiem (am/pm) down button */ "intlMeridiemDown"?: string; /** * aria-label for the meridiem (am/pm) up button */ "intlMeridiemUp"?: string; /** * aria-label for the minute input */ "intlMinute"?: string; /** * aria-label for the minute down button */ "intlMinuteDown"?: string; /** * aria-label for the minute up button */ "intlMinuteUp"?: string; /** * aria-label for the second input */ "intlSecond"?: string; /** * aria-label for the second down button */ "intlSecondDown"?: string; /** * aria-label for the second up button */ "intlSecondUp"?: string; /** * The name of the time input */ "name"?: string; /** * Fires when the time value is changed as a result of user input. */ "onCalciteInputTimePickerChange"?: (event: CustomEvent) => void; /** * The scale (size) of the time input */ "scale"?: Scale; /** * number (seconds) that specifies the granularity that the value must adhere to */ "step"?: number; /** * The selected time in UTC (always 24-hour format) */ "value"?: string; } interface CalciteLabel { /** * specify the text alignment of the label */ "alignment"?: Alignment; /** * eliminates any space around the label */ "disableSpacing"?: boolean; /** * is the label disabled * @deprecated use the `disabled` property on the interactive components instead */ "disabled"?: boolean; /** * The id of the input associated with the label */ "for"?: string; /** * is the wrapped element positioned inline with the label slotted text */ "layout"?: "inline" | "inline-space-between" | "default"; /** * specify the scale of the label, defaults to m */ "scale"?: Scale; /** * specify the status of the label and any child input / input messages * @deprecated set directly on child element instead */ "status"?: Status; } interface CalciteLink { /** * is the link disabled */ "disabled"?: boolean; /** * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download */ "download"?: string | boolean; /** * optionally pass a href - used to determine if the component should render as a link or an anchor */ "href"?: string; /** * optionally pass an icon to display at the end of a button - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of a button - accepts calcite ui icon names */ "iconStart"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * The target attribute to apply to the hyperlink */ "target"?: string; } interface CalciteList { /** * When true, disabled prevents user interaction. */ "disabled"?: boolean; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; } interface CalciteListItem { /** * An optional description for this item. This will appear below the label text. */ "description"?: string; /** * When true, disabled prevents interaction. */ "disabled"?: boolean; /** * The label text of the list item. This will appear above the description text. */ "label"?: string; /** * When true, prevents the content of the list item from user interaction. */ "nonInteractive"?: boolean; } interface CalciteListItemGroup { /** * The title used for all nested `calcite-list-item` rows. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; } interface CalciteLoader { /** * Show the loader */ "active"?: boolean; /** * Inline loaders are smaller and will appear to the left of the text */ "inline"?: boolean; /** * Accessible name for the component */ "label": string; /** * Turn off spacing around the loader */ "noPadding"?: boolean; /** * Speficy the scale of the loader. Defaults to "m" */ "scale"?: Scale; /** * Text which should appear under the loading indicator (optional) */ "text"?: string; /** * Use indeterminate if finding actual progress value is impossible */ "type"?: "indeterminate" | "determinate"; /** * Percent complete of 100, only valid for determinate indicators */ "value"?: number; } interface CalciteModal { /** * Add the active attribute to open the modal */ "active"?: boolean; /** * Background color of modal content */ "backgroundColor"?: ModalBackgroundColor; /** * Optionally pass a function to run before close */ "beforeClose"?: (el: HTMLElement) => Promise; /** * Adds a color bar at the top for visual impact, Use color to add importance to destructive/workflow dialogs. */ "color"?: "red" | "blue"; /** * Disables the display a close button within the Modal */ "disableCloseButton"?: boolean; /** * Flag to disable the default close on escape behavior */ "disableEscape"?: boolean; /** * Disables the closing of the Modal when clicked outside. */ "disableOutsideClose"?: boolean; /** * Prevent the modal from taking up the entire screen on mobile */ "docked"?: boolean; /** * Specify an element to focus when the modal is first opened */ "firstFocus"?: HTMLElement; /** * Set the modal to always be fullscreen (overrides width) */ "fullscreen"?: boolean; /** * Aria label for the close button */ "intlClose"?: string; /** * Turn off spacing around the content area slot */ "noPadding"?: boolean; /** * Fired when the modal finishes the close animation */ "onCalciteModalClose"?: (event: CustomEvent) => void; /** * Fired when the modal finishes the open animation */ "onCalciteModalOpen"?: (event: CustomEvent) => void; /** * specify the scale of modal, defaults to m */ "scale"?: Scale; /** * Set the width of the modal. Can use stock sizes or pass a number (in pixels) */ "width"?: Scale | number; } interface CalciteNotice { /** * Is the notice currently active or not */ "active"?: boolean; /** * Color for the notice (will apply to top border and icon) */ "color"?: StatusColor; /** * Optionally show a button the user can click to dismiss the notice */ "dismissible"?: boolean; /** * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon */ "icon"?: string | boolean; /** * String for the close button. * @default "Close" */ "intlClose"?: string; /** * Fired when an notice is closed */ "onCalciteNoticeClose"?: (event: CustomEvent) => void; /** * Fired when an Notice is opened */ "onCalciteNoticeOpen"?: (event: CustomEvent) => void; /** * specify the scale of the notice, defaults to m */ "scale"?: Scale; /** * specify the width of the notice, defaults to auto */ "width"?: Width; } interface CalciteOption { /** * When true, it prevents the option from being selected. */ "disabled"?: boolean; /** * The option label. */ "label"?: string; /** * When true, this option is selected. Otherwise, false. */ "selected"?: boolean; /** * The value associated with this option. */ "value"?: any; } interface CalciteOptionGroup { /** * When true, it prevents selection from any of its associated options. */ "disabled"?: boolean; /** * The group label. This property is required. */ "label": string; } interface CalcitePagination { /** * number of items per page */ "num"?: number; /** * Emitted whenever the selected page changes. * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/calcite-pagination.tsx#L18) */ "onCalcitePaginationChange"?: (event: CustomEvent) => void; /** * Emitted whenever the selected page changes. * @deprecated use calcitePaginationChange instead */ "onCalcitePaginationUpdate"?: (event: CustomEvent) => void; /** * The scale of the pagination */ "scale"?: Scale; /** * index of item that should begin the page */ "start"?: number; /** * Used as an accessible label (aria-label) for the next button * @default "Next" */ "textLabelNext"?: string; /** * Used as an accessible label (aria-label) of the previous button * @default "Previous" */ "textLabelPrevious"?: string; /** * total number of items */ "total"?: number; } interface CalcitePanel { /** * When provided, this method will be called before it is removed from the parent flow. */ "beforeBack"?: () => Promise; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * Hides the panel. */ "dismissed"?: boolean; /** * Displays a close button in the trailing side of the header. */ "dismissible"?: boolean; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Specifies the maximum height of the panel. */ "heightScale"?: Scale; /** * 'Back' text string. */ "intlBack"?: string; /** * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true. */ "intlClose"?: string; /** * 'Options' text string for the actions menu. */ "intlOptions"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Opens the action menu. */ "menuOpen"?: boolean; /** * Emitted when the back button has been clicked. */ "onCalcitePanelBackClick"?: (event: CustomEvent) => void; /** * Emitted when the close button has been clicked. */ "onCalcitePanelDismissedChange"?: (event: CustomEvent) => void; /** * Emitted when the content has been scrolled. */ "onCalcitePanelScroll"?: (event: CustomEvent) => void; /** * Shows a back button in the header. */ "showBackButton"?: boolean; /** * Summary text. A description displayed underneath the heading. */ "summary"?: string; /** * This sets width of the panel. */ "widthScale"?: Scale; } interface CalcitePickList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * When true, an input appears at the top of the list that can be used by end users to filter items in the list. */ "filterEnabled"?: boolean; /** * Placeholder text for the filter input field. */ "filterPlaceholder"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Multiple works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple"?: boolean; /** * Emitted when any of the item selections have changed. */ "onCalciteListChange"?: (event: CustomEvent>) => void; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus"?: boolean; } interface CalcitePickListGroup { /** * The title used for all nested `calcite-pick-list` rows. */ "groupTitle"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; } interface CalcitePickListItem { /** * An optional description for this item. This will appear below the label text. */ "description"?: string; /** * When false, the item cannot be deselected by user interaction. */ "disableDeselect"?: boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled"?: boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5) */ "icon"?: ICON_TYPES | null; /** * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true. * @default "Remove" */ "intlRemove"?: string; /** * The main label for this item. This will appear next to the icon. */ "label"?: string; /** * Used to provide additional metadata to an item, primarily used when the parent list has a filter. */ "metadata"?: Record; /** * Emitted whenever the item is selected or unselected. */ "onCalciteListItemChange"?: (event: CustomEvent<{ item: HTMLCalcitePickListItemElement; value: any; selected: boolean; shiftPressed: boolean; }>) => void; /** * Emitted whenever the remove button is pressed. */ "onCalciteListItemRemove"?: (event: CustomEvent) => void; /** * Set this to true to display a remove action that removes the item from the list. */ "removable"?: boolean; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected"?: boolean; /** * The item's associated value. */ "value": any; } interface CalcitePopover { /** * Display a close button within the Popover. * @deprecated use dismissible instead. */ "closeButton"?: boolean; /** * Prevents flipping the popover's placement when it starts to overlap its reference element. */ "disableFlip"?: boolean; /** * Removes the caret pointer. */ "disablePointer"?: boolean; /** * Display a close button within the Popover. */ "dismissible"?: boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Text for close button. * @default "Close" */ "intlClose"?: string; /** * Accessible name for the component */ "label": string; /** * Offset the position of the popover away from the reference element. * @default 6 */ "offsetDistance"?: number; /** * Offset the position of the popover along the reference element. */ "offsetSkidding"?: number; /** * Fired when the popover is closed */ "onCalcitePopoverClose"?: (event: CustomEvent) => void; /** * Fired when the popover is opened */ "onCalcitePopoverOpen"?: (event: CustomEvent) => void; /** * Display and position the component. */ "open"?: boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25) */ "placement"?: PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement. */ "referenceElement": HTMLElement | string; } interface CalcitePopoverManager { /** * Automatically closes any currently open popovers when clicking outside of a popover. */ "autoClose"?: boolean; /** * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover. * @default `[data-calcite-popover-reference]` */ "selector"?: string; } interface CalciteProgress { /** * Label for the progress indicator */ "label"?: string; /** * For indeterminate progress bars, reverse the animation direction */ "reversed"?: boolean; /** * Text to display for the progress indicator */ "text"?: string; /** * Use indeterminate if finding actual progress value is impossible */ "type"?: "indeterminate" | "determinate"; /** * Fraction completed, in the range of 0 - 1.0 */ "value"?: number; } interface CalciteRadioButton { /** * The checked state of the radio button. */ "checked"?: boolean; /** * The disabled state of the radio button. */ "disabled"?: boolean; /** * The id attribute of the radio button. When omitted, a globally unique identifier is used. */ "guid"?: string; /** * The radio button's hidden status. When a radio button is hidden it is not focusable or checkable. */ "hidden"?: boolean; /** * The name of the radio button. `name` is passed as a property automatically from `calcite-radio-button-group`. */ "name"?: string; /** * Fires only when the radio button is checked. This behavior is identical to the native HTML input element. Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event directly on the element, but instead either attach it to a node that contains all of the radio buttons in the group or use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group. */ "onCalciteRadioButtonChange"?: (event: CustomEvent) => void; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required"?: boolean; /** * The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */ "scale"?: Scale; /** * The value of the radio button. */ "value": any; } interface CalciteRadioButtonGroup { /** * The disabled state of the radio button group. */ "disabled"?: boolean; /** * The radio button group's hidden status. When a radio button group is hidden none of its options are focusable or checkable. */ "hidden"?: boolean; /** * The layout direction of the radio buttons in a group. */ "layout"?: Layout; /** * The name of the radio button group. `name` must be unique to other radio button group instances. */ "name": string; /** * Emitted when the radio button group has changed. */ "onCalciteRadioButtonGroupChange"?: (event: CustomEvent) => void; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required"?: boolean; /** * The scale (size) of the radio button group. */ "scale"?: Scale; } interface CalciteRadioGroup { /** * specify the appearance style of the radio group, defaults to solid. */ "appearance"?: RadioAppearance; /** * is the radio group disabled */ "disabled"?: boolean; /** * specify the layout of the radio group, defaults to horizontal */ "layout"?: Layout; /** * The group's name. Gets submitted with the form. */ "name"?: string; /** * Fired when the selected option changes, event detail is the new value */ "onCalciteRadioGroupChange"?: (event: CustomEvent) => void; /** * The scale of the radio group */ "scale"?: Scale; /** * The group's selected item. */ "selectedItem"?: HTMLCalciteRadioGroupItemElement; /** * The value of the selectedItem */ "value"?: string; /** * specify the width of the group, defaults to auto */ "width"?: Extract<"auto" | "full", Width>; } interface CalciteRadioGroupItem { /** * Indicates whether the control is checked. */ "checked"?: boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * flip the icon in rtl */ "iconFlipRtl"?: boolean; /** * optionally used with icon, select where to position the icon */ "iconPosition"?: Position; /** * The control's value. */ "value"?: any | null; } interface CalciteRating { /** * optionally pass a cumulative average rating to display */ "average"?: number; /** * optionally pass a number of previous ratings to display */ "count"?: number; /** * is the rating component in a selectable mode */ "disabled"?: boolean; /** * Localized string for "Rating" (used for aria label) * @default "Rating" */ "intlRating"?: string; /** * Localized string for labelling each star, `${num}` in the string will be replaced by the number * @default "Stars: ${num}" */ "intlStars"?: string; /** * The name of the rating */ "name"?: string; /** * Fires when the rating value has changed. */ "onCalciteRatingChange"?: (event: CustomEvent<{ value: number }>) => void; /** * is the rating component in a selectable mode */ "readOnly"?: boolean; /** * specify the scale of the component, defaults to m */ "scale"?: Scale; /** * Show average and count data summary chip (if available) */ "showChip"?: boolean; /** * the value of the rating component */ "value"?: number; } interface CalciteScrim { /** * string to override English loading text * @default "Loading" */ "intlLoading"?: string; /** * Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state. */ "loading"?: boolean; } interface CalciteSelect { /** * When true, it prevents the option from being selected. */ "disabled"?: boolean; /** * The component's label. This is required for accessibility purposes. */ "label": string; /** * The select's name. Gets submitted with the form. */ "name"?: string; /** * This event will fire whenever the selected option changes. */ "onCalciteSelectChange"?: (event: CustomEvent) => void; /** * The component scale. */ "scale"?: Scale; /** * The currently selected option. * @readonly */ "selectedOption"?: HTMLCalciteOptionElement; /** * The value of the selectedOption */ "value"?: string; /** * The component width. */ "width"?: Width; } interface CalciteShell { /** * Positions the center content behind any calcite-shell-panels. */ "contentBehind"?: boolean; } interface CalciteShellCenterRow { /** * This property makes the content area appear like a "floating" panel. */ "detached"?: boolean; /** * Specifies the maximum height of the row. */ "heightScale"?: Scale; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; } interface CalciteShellPanel { /** * Hide the content panel. */ "collapsed"?: boolean; /** * This property makes the content area appear like a "floating" panel. */ "detached"?: boolean; /** * Specifies the maximum height of the contents when detached. */ "detachedHeightScale"?: Scale; /** * Accessible label for resize separator. * @default "Resize" */ "intlResize"?: string; /** * Emitted when collapse has been toggled. */ "onCalciteShellPanelToggle"?: (event: CustomEvent) => void; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; /** * This property makes the content area resizable if the calcite-shell-panel is not 'detached'. */ "resizable"?: boolean; /** * This sets width of the content area. */ "widthScale"?: Scale; } interface CalciteSlider { /** * Disable and gray out the slider */ "disabled"?: boolean; /** * Indicates if a histogram is present */ "hasHistogram"?: boolean; /** * List of x,y coordinates within the slider's min and max, displays above the slider track. * @see [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5) */ "histogram"?: DataSeries; /** * Array of values describing a single color stop, sorted by offset ascending. */ "histogramStops"?: ColorStop[]; /** * Label handles with their numeric value */ "labelHandles"?: boolean; /** * Label tick marks with their numeric value. */ "labelTicks"?: boolean; /** * Maximum selectable value */ "max"?: number; /** * Used as an accessible label (aria-label) for second handle if needed (ex. "Temperature, upper bound") */ "maxLabel"?: string; /** * Currently selected upper number (if multi-select) */ "maxValue"?: number; /** * Minimum selectable value */ "min"?: number; /** * Used as an accessible label (aria-label) for first (or only) handle (ex. "Temperature, lower bound") */ "minLabel"?: string; /** * Currently selected lower number (if multi-select) */ "minValue"?: number; /** * When true, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. */ "mirrored"?: boolean; /** * The name of the slider */ "name"?: string; /** * Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead */ "onCalciteSliderChange"?: (event: CustomEvent) => void; /** * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. */ "onCalciteSliderInput"?: (event: CustomEvent) => void; /** * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. * @deprecated use calciteSliderInput instead */ "onCalciteSliderUpdate"?: (event: CustomEvent) => void; /** * Interval to move on page up/page down keys */ "pageStep"?: number; /** * Use finer point for handles */ "precise"?: boolean; /** * When true, makes the component required for form-submission. */ "required"?: boolean; /** * Specify the scale of the slider, defaults to m */ "scale"?: Scale; /** * When true, enables snap selection along the step interval */ "snap"?: boolean; /** * Interval to move on up/down keys */ "step"?: number; /** * Show tick marks on the number line at provided interval */ "ticks"?: number; /** * Currently selected number (if single select) */ "value"?: null | number; } interface CalciteSortableList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * Specifies which items inside the element should be draggable. */ "dragSelector"?: string; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * The selector for the handle elements. */ "handleSelector"?: string; /** * Indicates the horizontal or vertical orientation of the component. */ "layout"?: Layout; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Emitted when the order of the list has changed. */ "onCalciteListOrderChange"?: (event: CustomEvent) => void; } interface CalciteSplitButton { /** * specify the appearance style of the button, defaults to solid. */ "appearance"?: ButtonAppearance; /** * specify the color of the control, defaults to blue */ "color"?: ButtonColor; /** * is the control disabled */ "disabled"?: boolean; /** * specify the icon used for the dropdown menu, defaults to chevron */ "dropdownIconType"?: DropdownIconType; /** * aria label for overflow button */ "dropdownLabel"?: string; /** * optionally add a calcite-loader component to the control, disabling interaction. with the primary button */ "loading"?: boolean; /** * fired when the primary button is clicked */ "onCalciteSplitButtonPrimaryClick"?: (event: CustomEvent) => void; /** * fired when the secondary button is clicked */ "onCalciteSplitButtonSecondaryClick"?: (event: CustomEvent) => void; /** * Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names */ "primaryIconEnd"?: string; /** * flip the primary icon(s) in rtl */ "primaryIconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of the primary button - accepts Calcite UI icon names */ "primaryIconStart"?: string; /** * optionally pass an aria-label for the primary button */ "primaryLabel"?: string; /** * text for primary action button */ "primaryText"?: string; /** * specify the scale of the control, defaults to m */ "scale"?: Scale; /** * specify the width of the button, defaults to auto */ "width"?: Width; } interface CalciteStepper { /** * optionally display a status icon next to the step title */ "icon"?: boolean; /** * specify the layout of stepper, defaults to horizontal */ "layout"?: Layout; /** * optionally display the number next to the step title */ "numbered"?: boolean; /** * specify the scale of stepper, defaults to m */ "scale"?: Scale; } interface CalciteStepperItem { /** * is the step active */ "active"?: boolean; /** * has the step been completed */ "complete"?: boolean; /** * is the step disabled and not navigable to by a user */ "disabled"?: boolean; /** * does the step contain an error that needs to be resolved by the user */ "error"?: boolean; /** * pass a title for the stepper item */ "itemSubtitle"?: string; /** * pass a title for the stepper item */ "itemTitle"?: string; } interface CalciteSwitch { /** * True if the switch is initially on */ "checked"?: boolean; /** * True if the switch is disabled */ "disabled"?: boolean; /** * Applies to the aria-label attribute on the switch */ "label"?: string; /** * The name of the switch input */ "name"?: string; /** * Fires when the checked value has changed. */ "onCalciteSwitchChange"?: (event: CustomEvent) => void; /** * The scale of the switch */ "scale"?: Scale; /** * True if the switch is initially on * @deprecated use 'checked' instead. */ "switched"?: boolean; /** * The value of the switch input */ "value"?: any; } interface CalciteTab { /** * Show this tab */ "active"?: boolean; /** * Optionally include a unique name for this tab, be sure to also set this name on the associated title. */ "tab"?: string; } interface CalciteTabNav { /** * Emitted when the active tab changes * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1) */ "onCalciteTabChange"?: (event: CustomEvent) => void; /** * Name to use when saving selected tab data to localStorage */ "storageId"?: string; /** * Pass the same string to multiple tab navs to keep them all in sync if one changes */ "syncId"?: string; } interface CalciteTabTitle { /** * Show this tab title as selected */ "active"?: boolean; /** * Disable this tab title */ "disabled"?: boolean; /** * optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names */ "iconStart"?: string; /** * Fires when a specific tab is activated (`event.details`) * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1) */ "onCalciteTabsActivate"?: (event: CustomEvent) => void; /** * Optionally include a unique name for the tab title, be sure to also set this name on the associated tab. */ "tab"?: string; } interface CalciteTabs { /** * Optionally enable tabs to appear like a folder-style menu when its layout is "inline" */ "bordered"?: boolean; /** * Align tab titles to the edge or fully justify them across the tab nav ("center") */ "layout"?: TabLayout; /** * Display the tabs above (default) or below the tab content */ "position"?: TabPosition; /** * Specify the scale of the tabs component, defaults to m */ "scale"?: Scale; } interface CalciteTile { /** * The active state of the tile. */ "active"?: boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * When true, prevents interaction. */ "disabled"?: boolean; /** * The embed mode of the tile. When true, renders without a border and padding for use by other components. */ "embed"?: boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile. */ "hidden"?: boolean; /** * The (optional) url for the tile. (Only applies when embed is set to false) */ "href"?: string; /** * The icon that appears at the top of the tile. */ "icon"?: string; } interface CalciteTileSelect { /** * The checked state of the tile select. */ "checked"?: boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * The disabled state of the tile select. */ "disabled"?: boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile select. */ "hidden"?: boolean; /** * The icon that appears at the top of the tile. */ "icon"?: string; /** * The side of the tile that the radio or checkbox appears on when inputEnabled is true. */ "inputAlignment"?: Extract<"end" | "start", Alignment>; /** * Display an interactive radio or checkbox. */ "inputEnabled"?: boolean; /** * The name of the tile select. This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */ "name"?: any; /** * Emits a custom change event. For checkboxes, it emits when the checkbox is checked or unchecked. For radios it only emits when it is checked. */ "onCalciteTileSelectChange"?: (event: CustomEvent) => void; /** * The selection mode of the tile select: radio (single) or checkbox (multiple). */ "type"?: TileSelectType; /** * The value of the tile select. This value will appear in form submissions when this tile select is checked. */ "value"?: any; /** * specify the width of the tile, defaults to auto */ "width"?: Extract<"auto" | "full", Width>; } interface CalciteTileSelectGroup { /** * The disabled state of the tile select. */ "disabled"?: boolean; /** * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */ "layout"?: TileSelectGroupLayout; } interface CalciteTimePicker { /** * aria-label for the hour input * @default "Hour" */ "intlHour"?: string; /** * aria-label for the hour down button * @default "Decrease hour" */ "intlHourDown"?: string; /** * aria-label for the hour up button * @default "Increase hour" */ "intlHourUp"?: string; /** * aria-label for the meridiem (am/pm) input * @default "AM/PM" */ "intlMeridiem"?: string; /** * aria-label for the meridiem (am/pm) down button * @default "Decrease AM/PM" */ "intlMeridiemDown"?: string; /** * aria-label for the meridiem (am/pm) up button * @default "Increase AM/PM" */ "intlMeridiemUp"?: string; /** * aria-label for the minute input * @default "Minute" */ "intlMinute"?: string; /** * aria-label for the minute down button * @default "Decrease minute" */ "intlMinuteDown"?: string; /** * aria-label for the minute up button * @default "Increase minute" */ "intlMinuteUp"?: string; /** * aria-label for the second input * @default "Second" */ "intlSecond"?: string; /** * aria-label for the second down button * @default "Decrease second" */ "intlSecondDown"?: string; /** * aria-label for the second up button * @default "Increase second" */ "intlSecondUp"?: string; /** * The scale (size) of the time picker */ "scale"?: Scale; /** * number (seconds) that specifies the granularity that the value must adhere to */ "step"?: number; /** * The selected time in UTC (always 24-hour format) */ "value"?: string; } interface CalciteTip { /** * No longer displays the tip. */ "dismissed"?: boolean; /** * The heading of the tip. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * Indicates whether the tip can be dismissed. */ "nonDismissible"?: boolean; /** * Emitted when the component has been dismissed. */ "onCalciteTipDismiss"?: (event: CustomEvent) => void; /** * The selected state of the tip if it is being used inside a `calcite-tip-manager`. */ "selected"?: boolean; } interface CalciteTipGroup { /** * The title used for all nested tips. */ "groupTitle"?: string; } interface CalciteTipManager { /** * Alternate text for closing the `calcite-tip-manager`. */ "closed"?: boolean; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * The default group title for the `calcite-tip-manager`. */ "intlDefaultTitle"?: string; /** * Alternate text for navigating to the next tip. */ "intlNext"?: string; /** * Label that appears on hover of pagination icon. */ "intlPaginationLabel"?: string; /** * Alternate text for navigating to the previous tip. */ "intlPrevious"?: string; /** * Emitted when the `calcite-tip-manager` has been toggled open or closed. */ "onCalciteTipManagerToggle"?: (event: CustomEvent) => void; } interface CalciteTooltip { /** * Accessible name for the component */ "label": string; /** * Offset the position of the tooltip away from the reference element. * @default 6 */ "offsetDistance"?: number; /** * Offset the position of the tooltip along the reference element. */ "offsetSkidding"?: number; /** * Display and position the component. */ "open"?: boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25) */ "placement"?: PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement. */ "referenceElement"?: HTMLElement | string; } interface CalciteTooltipManager { /** * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip. * @default `[data-calcite-tooltip-reference]` */ "selector"?: string; } interface CalciteTree { /** * Display input * @deprecated use "ancestors" selection-mode for checkbox input */ "inputEnabled"?: boolean; /** * Display indentation guide lines */ "lines"?: boolean; /** * Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property. * @see [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1) */ "onCalciteTreeSelect"?: (event: CustomEvent) => void; /** * Specify the scale of the tree, defaults to m */ "scale"?: Scale; /** * Customize how tree selection works (single, multi, children, multi-children, ancestors) * @default "single" * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5) */ "selectionMode"?: TreeSelectionMode; } interface CalciteTreeItem { /** * True if the item is in an expanded state */ "expanded"?: boolean; /** * Is the item currently selected */ "selected"?: boolean; } interface CalciteValueList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * When true, the items will be sortable via drag and drop. */ "dragEnabled"?: boolean; /** * When true, an input appears at the top of the list that can be used by end users to filter items in the list. */ "filterEnabled"?: boolean; /** * Placeholder text for the filter input field. */ "filterPlaceholder"?: string; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Multiple Works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple"?: boolean; /** * Emitted when any of the item selections have changed. */ "onCalciteListChange"?: (event: CustomEvent>) => void; /** * Emitted when the order of the list has changed. */ "onCalciteListOrderChange"?: (event: CustomEvent) => void; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus"?: boolean; } interface CalciteValueListItem { /** * An optional description for this item. Will appear below the label text. */ "description"?: string; /** * When true, the item cannot be clicked and is visually muted */ "disabled"?: boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5) */ "icon"?: ICON_TYPES | null; /** * The main label for this item. Appears next to the icon. */ "label": string; /** * Used to provide additional metadata to an item, primarily used when the parent list has a filter. */ "metadata"?: Record; /** * When true, prevents the content of the list item from user interaction. */ "nonInteractive"?: boolean; /** * Emitted whenever the remove button is pressed. */ "onCalciteListItemRemove"?: (event: CustomEvent) => void; /** * Set this to true to display a remove action that removes the item from the list. */ "removable"?: boolean; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected"?: boolean; /** * The item's associated value. */ "value": any; } interface IntrinsicElements { "calcite-accordion": CalciteAccordion; "calcite-accordion-item": CalciteAccordionItem; "calcite-action": CalciteAction; "calcite-action-bar": CalciteActionBar; "calcite-action-group": CalciteActionGroup; "calcite-action-menu": CalciteActionMenu; "calcite-action-pad": CalciteActionPad; "calcite-alert": CalciteAlert; "calcite-avatar": CalciteAvatar; "calcite-block": CalciteBlock; "calcite-block-section": CalciteBlockSection; "calcite-button": CalciteButton; "calcite-card": CalciteCard; "calcite-checkbox": CalciteCheckbox; "calcite-chip": CalciteChip; "calcite-color-picker": CalciteColorPicker; "calcite-color-picker-hex-input": CalciteColorPickerHexInput; "calcite-color-picker-swatch": CalciteColorPickerSwatch; "calcite-combobox": CalciteCombobox; "calcite-combobox-item": CalciteComboboxItem; "calcite-combobox-item-group": CalciteComboboxItemGroup; "calcite-date-picker": CalciteDatePicker; "calcite-date-picker-day": CalciteDatePickerDay; "calcite-date-picker-month": CalciteDatePickerMonth; "calcite-date-picker-month-header": CalciteDatePickerMonthHeader; "calcite-dropdown": CalciteDropdown; "calcite-dropdown-group": CalciteDropdownGroup; "calcite-dropdown-item": CalciteDropdownItem; "calcite-fab": CalciteFab; "calcite-filter": CalciteFilter; "calcite-flow": CalciteFlow; "calcite-graph": CalciteGraph; "calcite-handle": CalciteHandle; "calcite-icon": CalciteIcon; "calcite-inline-editable": CalciteInlineEditable; "calcite-input": CalciteInput; "calcite-input-date-picker": CalciteInputDatePicker; "calcite-input-message": CalciteInputMessage; "calcite-input-time-picker": CalciteInputTimePicker; "calcite-label": CalciteLabel; "calcite-link": CalciteLink; "calcite-list": CalciteList; "calcite-list-item": CalciteListItem; "calcite-list-item-group": CalciteListItemGroup; "calcite-loader": CalciteLoader; "calcite-modal": CalciteModal; "calcite-notice": CalciteNotice; "calcite-option": CalciteOption; "calcite-option-group": CalciteOptionGroup; "calcite-pagination": CalcitePagination; "calcite-panel": CalcitePanel; "calcite-pick-list": CalcitePickList; "calcite-pick-list-group": CalcitePickListGroup; "calcite-pick-list-item": CalcitePickListItem; "calcite-popover": CalcitePopover; "calcite-popover-manager": CalcitePopoverManager; "calcite-progress": CalciteProgress; "calcite-radio-button": CalciteRadioButton; "calcite-radio-button-group": CalciteRadioButtonGroup; "calcite-radio-group": CalciteRadioGroup; "calcite-radio-group-item": CalciteRadioGroupItem; "calcite-rating": CalciteRating; "calcite-scrim": CalciteScrim; "calcite-select": CalciteSelect; "calcite-shell": CalciteShell; "calcite-shell-center-row": CalciteShellCenterRow; "calcite-shell-panel": CalciteShellPanel; "calcite-slider": CalciteSlider; "calcite-sortable-list": CalciteSortableList; "calcite-split-button": CalciteSplitButton; "calcite-stepper": CalciteStepper; "calcite-stepper-item": CalciteStepperItem; "calcite-switch": CalciteSwitch; "calcite-tab": CalciteTab; "calcite-tab-nav": CalciteTabNav; "calcite-tab-title": CalciteTabTitle; "calcite-tabs": CalciteTabs; "calcite-tile": CalciteTile; "calcite-tile-select": CalciteTileSelect; "calcite-tile-select-group": CalciteTileSelectGroup; "calcite-time-picker": CalciteTimePicker; "calcite-tip": CalciteTip; "calcite-tip-group": CalciteTipGroup; "calcite-tip-manager": CalciteTipManager; "calcite-tooltip": CalciteTooltip; "calcite-tooltip-manager": CalciteTooltipManager; "calcite-tree": CalciteTree; "calcite-tree-item": CalciteTreeItem; "calcite-value-list": CalciteValueList; "calcite-value-list-item": CalciteValueListItem; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "calcite-accordion": LocalJSX.CalciteAccordion & JSXBase.HTMLAttributes; "calcite-accordion-item": LocalJSX.CalciteAccordionItem & JSXBase.HTMLAttributes; "calcite-action": LocalJSX.CalciteAction & JSXBase.HTMLAttributes; "calcite-action-bar": LocalJSX.CalciteActionBar & JSXBase.HTMLAttributes; "calcite-action-group": LocalJSX.CalciteActionGroup & JSXBase.HTMLAttributes; "calcite-action-menu": LocalJSX.CalciteActionMenu & JSXBase.HTMLAttributes; "calcite-action-pad": LocalJSX.CalciteActionPad & JSXBase.HTMLAttributes; "calcite-alert": LocalJSX.CalciteAlert & JSXBase.HTMLAttributes; "calcite-avatar": LocalJSX.CalciteAvatar & JSXBase.HTMLAttributes; "calcite-block": LocalJSX.CalciteBlock & JSXBase.HTMLAttributes; "calcite-block-section": LocalJSX.CalciteBlockSection & JSXBase.HTMLAttributes; "calcite-button": LocalJSX.CalciteButton & JSXBase.HTMLAttributes; "calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes; "calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes; "calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes; "calcite-color-picker": LocalJSX.CalciteColorPicker & JSXBase.HTMLAttributes; "calcite-color-picker-hex-input": LocalJSX.CalciteColorPickerHexInput & JSXBase.HTMLAttributes; "calcite-color-picker-swatch": LocalJSX.CalciteColorPickerSwatch & JSXBase.HTMLAttributes; "calcite-combobox": LocalJSX.CalciteCombobox & JSXBase.HTMLAttributes; "calcite-combobox-item": LocalJSX.CalciteComboboxItem & JSXBase.HTMLAttributes; "calcite-combobox-item-group": LocalJSX.CalciteComboboxItemGroup & JSXBase.HTMLAttributes; "calcite-date-picker": LocalJSX.CalciteDatePicker & JSXBase.HTMLAttributes; "calcite-date-picker-day": LocalJSX.CalciteDatePickerDay & JSXBase.HTMLAttributes; "calcite-date-picker-month": LocalJSX.CalciteDatePickerMonth & JSXBase.HTMLAttributes; "calcite-date-picker-month-header": LocalJSX.CalciteDatePickerMonthHeader & JSXBase.HTMLAttributes; "calcite-dropdown": LocalJSX.CalciteDropdown & JSXBase.HTMLAttributes; "calcite-dropdown-group": LocalJSX.CalciteDropdownGroup & JSXBase.HTMLAttributes; "calcite-dropdown-item": LocalJSX.CalciteDropdownItem & JSXBase.HTMLAttributes; "calcite-fab": LocalJSX.CalciteFab & JSXBase.HTMLAttributes; "calcite-filter": LocalJSX.CalciteFilter & JSXBase.HTMLAttributes; "calcite-flow": LocalJSX.CalciteFlow & JSXBase.HTMLAttributes; "calcite-graph": LocalJSX.CalciteGraph & JSXBase.HTMLAttributes; "calcite-handle": LocalJSX.CalciteHandle & JSXBase.HTMLAttributes; "calcite-icon": LocalJSX.CalciteIcon & JSXBase.HTMLAttributes; "calcite-inline-editable": LocalJSX.CalciteInlineEditable & JSXBase.HTMLAttributes; "calcite-input": LocalJSX.CalciteInput & JSXBase.HTMLAttributes; "calcite-input-date-picker": LocalJSX.CalciteInputDatePicker & JSXBase.HTMLAttributes; "calcite-input-message": LocalJSX.CalciteInputMessage & JSXBase.HTMLAttributes; "calcite-input-time-picker": LocalJSX.CalciteInputTimePicker & JSXBase.HTMLAttributes; "calcite-label": LocalJSX.CalciteLabel & JSXBase.HTMLAttributes; "calcite-link": LocalJSX.CalciteLink & JSXBase.HTMLAttributes; "calcite-list": LocalJSX.CalciteList & JSXBase.HTMLAttributes; "calcite-list-item": LocalJSX.CalciteListItem & JSXBase.HTMLAttributes; "calcite-list-item-group": LocalJSX.CalciteListItemGroup & JSXBase.HTMLAttributes; "calcite-loader": LocalJSX.CalciteLoader & JSXBase.HTMLAttributes; "calcite-modal": LocalJSX.CalciteModal & JSXBase.HTMLAttributes; "calcite-notice": LocalJSX.CalciteNotice & JSXBase.HTMLAttributes; "calcite-option": LocalJSX.CalciteOption & JSXBase.HTMLAttributes; "calcite-option-group": LocalJSX.CalciteOptionGroup & JSXBase.HTMLAttributes; "calcite-pagination": LocalJSX.CalcitePagination & JSXBase.HTMLAttributes; "calcite-panel": LocalJSX.CalcitePanel & JSXBase.HTMLAttributes; "calcite-pick-list": LocalJSX.CalcitePickList & JSXBase.HTMLAttributes; "calcite-pick-list-group": LocalJSX.CalcitePickListGroup & JSXBase.HTMLAttributes; "calcite-pick-list-item": LocalJSX.CalcitePickListItem & JSXBase.HTMLAttributes; "calcite-popover": LocalJSX.CalcitePopover & JSXBase.HTMLAttributes; "calcite-popover-manager": LocalJSX.CalcitePopoverManager & JSXBase.HTMLAttributes; "calcite-progress": LocalJSX.CalciteProgress & JSXBase.HTMLAttributes; "calcite-radio-button": LocalJSX.CalciteRadioButton & JSXBase.HTMLAttributes; "calcite-radio-button-group": LocalJSX.CalciteRadioButtonGroup & JSXBase.HTMLAttributes; "calcite-radio-group": LocalJSX.CalciteRadioGroup & JSXBase.HTMLAttributes; "calcite-radio-group-item": LocalJSX.CalciteRadioGroupItem & JSXBase.HTMLAttributes; "calcite-rating": LocalJSX.CalciteRating & JSXBase.HTMLAttributes; "calcite-scrim": LocalJSX.CalciteScrim & JSXBase.HTMLAttributes; "calcite-select": LocalJSX.CalciteSelect & JSXBase.HTMLAttributes; "calcite-shell": LocalJSX.CalciteShell & JSXBase.HTMLAttributes; "calcite-shell-center-row": LocalJSX.CalciteShellCenterRow & JSXBase.HTMLAttributes; "calcite-shell-panel": LocalJSX.CalciteShellPanel & JSXBase.HTMLAttributes; "calcite-slider": LocalJSX.CalciteSlider & JSXBase.HTMLAttributes; "calcite-sortable-list": LocalJSX.CalciteSortableList & JSXBase.HTMLAttributes; "calcite-split-button": LocalJSX.CalciteSplitButton & JSXBase.HTMLAttributes; "calcite-stepper": LocalJSX.CalciteStepper & JSXBase.HTMLAttributes; "calcite-stepper-item": LocalJSX.CalciteStepperItem & JSXBase.HTMLAttributes; "calcite-switch": LocalJSX.CalciteSwitch & JSXBase.HTMLAttributes; "calcite-tab": LocalJSX.CalciteTab & JSXBase.HTMLAttributes; "calcite-tab-nav": LocalJSX.CalciteTabNav & JSXBase.HTMLAttributes; "calcite-tab-title": LocalJSX.CalciteTabTitle & JSXBase.HTMLAttributes; "calcite-tabs": LocalJSX.CalciteTabs & JSXBase.HTMLAttributes; "calcite-tile": LocalJSX.CalciteTile & JSXBase.HTMLAttributes; "calcite-tile-select": LocalJSX.CalciteTileSelect & JSXBase.HTMLAttributes; "calcite-tile-select-group": LocalJSX.CalciteTileSelectGroup & JSXBase.HTMLAttributes; "calcite-time-picker": LocalJSX.CalciteTimePicker & JSXBase.HTMLAttributes; "calcite-tip": LocalJSX.CalciteTip & JSXBase.HTMLAttributes; "calcite-tip-group": LocalJSX.CalciteTipGroup & JSXBase.HTMLAttributes; "calcite-tip-manager": LocalJSX.CalciteTipManager & JSXBase.HTMLAttributes; "calcite-tooltip": LocalJSX.CalciteTooltip & JSXBase.HTMLAttributes; "calcite-tooltip-manager": LocalJSX.CalciteTooltipManager & JSXBase.HTMLAttributes; "calcite-tree": LocalJSX.CalciteTree & JSXBase.HTMLAttributes; "calcite-tree-item": LocalJSX.CalciteTreeItem & JSXBase.HTMLAttributes; "calcite-value-list": LocalJSX.CalciteValueList & JSXBase.HTMLAttributes; "calcite-value-list-item": LocalJSX.CalciteValueListItem & JSXBase.HTMLAttributes; } } }