/* 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/calcite-accordion/interfaces"; import { Alignment, Appearance, FlipContext, Layout, Position, Scale, Status, Theme, Width } from "./components/interfaces"; import { AlertDuration, StatusColor } from "./components/calcite-alert/interfaces"; import { BlockSectionToggleDisplay } from "./components/calcite-block-section/interfaces"; import { ButtonAlignment, ButtonAppearance, ButtonColor, DropdownIconType } from "./components/calcite-button/interfaces"; import { ChipColor } from "./components/calcite-chip/interfaces"; import { ColorAppearance, ColorValue, InternalColor } from "./components/calcite-color/interfaces"; import { Format } from "./components/calcite-color/utils"; import { DateRangeChange } from "./components/calcite-date-picker/interfaces"; import { DateLocaleData } from "./components/calcite-date-picker/utils"; import { SelectionMode } from "./components/calcite-dropdown-group/interfaces"; import { GroupRegistration, ItemKeyboardEvent, ItemRegistration } from "./components/calcite-dropdown/interfaces"; import { FabColor } from "./components/calcite-fab/interfaces"; import { DataSeries } from "./components/calcite-graph/interfaces"; import { InputPlacement } from "./components/calcite-input/interfaces"; import { InputMessageType } from "./components/calcite-input-message/interfaces"; import { FocusRequest } from "./components/calcite-label/interfaces"; import { ModalBackgroundColor } from "./components/calcite-modal/interfaces"; import { CalcitePaginationDetail } from "./components/calcite-pagination/calcite-pagination"; import { ICON_TYPES } from "./components/calcite-pick-list/resources"; import { Placement } from "@popperjs/core"; import { PopperPlacement } from "./utils/popper"; import { FocusId } from "./components/calcite-popover/calcite-popover"; import { RadioAppearance } from "./components/calcite-radio-group/interfaces"; import { TabID, TabLayout, TabPosition } from "./components/calcite-tabs/interfaces"; import { TabChangeEventDetail } from "./components/calcite-tab/interfaces"; import { TileSelectType } from "./components/calcite-tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/calcite-tile-select-group/interfaces"; import { TreeSelectDetail, TreeSelectionMode } from "./components/calcite-tree/interfaces"; import { TreeItemSelectDetail } from "./components/calcite-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"; /** * specify the theme of accordion, defaults to light */ "theme": Theme; } interface CalciteAccordionItem { "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; /** * Specify the appearance style of the action, defaults to solid. */ "appearance": 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 */ "intlLoading"?: string; /** * Label of the action, exposed on hover. 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; "setFocus": () => Promise; /** * Text that accompanies the action icon. */ "text": string; /** * Indicates whether the text is displayed. */ "textEnabled": boolean; /** * Used to set the component's color scheme. */ "theme": Theme; } 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; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; "setFocus": (focusId?: "expand-toggle") => Promise; /** * Used to set the component's color scheme. */ "theme": Theme; /** * Used to set the tooltip for the expand toggle. */ "tooltipExpand"?: HTMLCalciteTooltipElement; } interface CalciteActionGroup { } 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; "setFocus": (focusId?: "expand-toggle") => Promise; /** * Used to set the component's color scheme. */ "theme": Theme; /** * Used to set the tooltip for the expand toggle. */ "tooltipExpand"?: HTMLCalciteTooltipElement; } 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 */ "intlClose": string; /** * Accessible name for the component */ "label": string; /** * specify the scale of the button, defaults to m */ "scale": Scale; /** * focus either the slotted alert-link or the close button */ "setFocus": () => Promise; /** * Select theme (light or dark) */ "theme": Theme; } interface CalciteAvatar { /** * full name of the user */ "fullName": string; /** * specify the scale of the avatar, defaults to m */ "scale": Scale; /** * Select theme (light or dark) */ "theme": Theme; /** * 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; /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * string to override English loading text */ "intlLoading"?: 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 summary. */ "summary": string; /** * Used to set the component's color scheme. */ "theme": Theme; } 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; /** * 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. * @todo revisit doc */ "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; /** * 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 */ "intlLoading"?: string; /** * optionally add a calcite-loader component to the button, disabling interaction. */ "loading"?: boolean; /** * optionally add a round style to the button */ "round"?: boolean; /** * specify the scale of the button, defaults to m */ "scale": Scale; "setFocus": () => Promise; /** * is the button a child of a calcite-split-button */ "splitChild"?: "primary" | "secondary" | false; /** * Select theme (light or dark) */ "theme": Theme; /** * 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 */ "intlDeselect": string; /** * string to override English loading text */ "intlLoading"?: string; /** * string to override English select text for checkbox when selectable is true */ "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; /** * The theme of the card. */ "theme": Theme; } interface CalciteCheckbox { /** * The checked state of the checkbox. */ "checked"?: boolean; /** * True if the checkbox is disabled */ "disabled"?: boolean; /** * The focused state of the checkbox. */ "focused": 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 name of the checkbox input */ "name"?: string; /** * specify the scale of the checkbox, defaults to m */ "scale": Scale; /** * Determines what theme to use */ "theme": Theme; /** * The value of the checkbox input */ "value"?: string; } 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 */ "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; "setFocus": () => Promise; /** * Select theme (light or dark) */ "theme": Theme; "value": string; } interface CalciteColor { /** * 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; /** * The format of the value property. When "auto", the format will be inferred from `value` when set. */ "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 */ "intlB": string; /** * Label used for the blue channel description */ "intlBlue": string; /** * Label used for the delete color button. */ "intlDeleteColor": string; /** * Label used for the green channel */ "intlG": string; /** * Label used for the green channel description */ "intlGreen": string; /** * Label used for the hue channel */ "intlH": string; /** * Label used for the hex input */ "intlHex": string; /** * Label used for the HSV mode */ "intlHsv": string; /** * Label used for the hue channel description */ "intlHue": string; /** * Label used for the hex input when there is no color selected. */ "intlNoColor": string; /** * Label used for the red channel */ "intlR": string; /** * Label used for the red channel description */ "intlRed": string; /** * Label used for the RGB mode */ "intlRgb": string; /** * Label used for the saturation channel */ "intlS": string; /** * Label used for the saturation channel description */ "intlSaturation": string; /** * Label used for the save color button. */ "intlSaveColor": string; /** * Label used for the saved colors section */ "intlSaved": string; /** * Label used for the value channel */ "intlV": string; /** * Label used for the */ "intlValue": string; /** * The scale of the color picker. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * Storage ID for colors. */ "storageId": string; /** * The component's theme. */ "theme": Theme; /** * 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. */ "value": ColorValue | null; } interface CalciteColorHexInput { /** * 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. */ "intlHex": string; /** * Label used for the hex input when there is no color selected. */ "intlNoColor": string; /** * The component's scale. */ "scale": Scale; /** * Sets focus on the component. */ "setFocus": () => Promise; /** * The component's theme. */ "theme": Theme; /** * The hex value. */ "value": string; } interface CalciteColorSwatch { /** * 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; /** * The component's theme. */ "theme": Theme; } interface CalciteCombobox { /** * Open and close combobox */ "active": boolean; /** * Allow entry of custom values which are not in the original set of items */ "allowCustomValues": boolean; /** * Disable combobox input */ "disabled": boolean; /** * 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; /** * Placeholder text for input */ "placeholder"?: string; "reposition": () => Promise; /** * Specify the scale of the combobox, defaults to m */ "scale": Scale; "setFocus": () => Promise; /** * Select theme (light or dark) */ "theme": Theme; } interface CalciteComboboxItem { /** * True when item is highlighted either from keyboard or mouse hover */ "active": boolean; "anscestors": HTMLCalciteComboboxItemElement[]; /** * When true, the item cannot be clicked and is visually muted. */ "disabled": boolean; "guid": 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; /** * A unique value used to identify this item - similar to the value attribute on an . */ "value": string; } interface CalciteDatePicker { /** * Active range */ "activeRange"?: "start" | "end"; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Localized string for "next month" (used for aria label) */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) */ "intlPrevMonth"?: string; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Latest allowed date ("yyyy-mm-dd") */ "max"?: string; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * 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 */ "start"?: string; /** * Selected start date as full date object */ "startAsDate"?: Date; /** * Selected date */ "value"?: string; /** * Selected date as full date object */ "valueAsDate"?: 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; "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; "hoverRange": any; /** * 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; /** * Localized string for next month. */ "intlNextMonth": string; /** * Localized string for previous month. */ "intlPrevMonth": 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 { "active": boolean; /** * specify the alignment of dropdown, defaults to start */ "alignment": Alignment; /** * 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; /** * 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; "reposition": () => Promise; /** * specify the scale of dropdown, defaults to m */ "scale": Scale; /** * **read-only** The currently selected items * @readonly */ "selectedItems": HTMLCalciteDropdownItemElement[]; /** * specify the theme of the dropdown, defaults to light */ "theme": Theme; /** * 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; /** * 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 { "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; /** * Focuses the selected item. */ "setFocus": () => Promise; } interface CalciteFab { /** * Used to set the button's appearance. Default is outline. */ "appearance": Appearance; /** * Used to set the button's color. Default is light. */ "color": FabColor; /** * 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; /** * Label of the FAB, exposed on hover. 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; "setFocus": () => Promise; /** * Text that accompanies the FAB icon. */ "text"?: string; /** * Indicates whether the text is displayed. */ "textEnabled": boolean; /** * Used to set the component's color scheme. */ "theme": Theme; } interface CalciteFilter { /** * The input data. 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. */ "data": 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; /** * Placeholder text for the input element's placeholder attribute */ "placeholder"?: string; } interface CalciteFlow { /** * Removes the currently active `calcite-panel`. */ "back": () => Promise; /** * Used to set the component's color scheme. */ "theme": Theme; } interface CalciteGraph { /** * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value */ "data": DataSeries; /** * Width of graph in pixels */ "height": number; /** * End of highlight color if highlighting range */ "highlightMax": number; /** * Start of highlight color if highlighting range */ "highlightMin": number; /** * Width of graph in pixels */ "width": number; } interface CalciteHandle { "activated": boolean; "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; /** * Icon theme. Can be "light" or "dark". */ "theme": Theme; } 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` */ "intlCancelEditing": string; /** * specify text to be user for the confirm changes button's aria-label, defaults to `Save` */ "intlConfirmChanges": string; /** * specify text to be user for the enable editing button's aria-label, defaults to `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; /** * specify the theme of the inline-editable component, defaults to the theme of the wrapped calcite-input or the theme of the closest wrapping component with a set theme */ "theme"?: Theme; } 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; /** * 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; /** * specify if the input is in loading state */ "loading": boolean; /** * input max */ "max"?: number; /** * input min */ "min"?: number; /** * specify the placement of the number buttons */ "numberButtonType"?: InputPlacement; /** * explicitly whitelist placeholder attribute */ "placeholder": string; /** * optionally add prefix * */ "prefixText"?: string; /** * is the input required */ "required": boolean; /** * specify the scale of the input, defaults to m */ "scale": Scale; /** * focus the rendered child element */ "setFocus": () => Promise; /** * specify the status of the input field, determines message and icons */ "status": Status; /** * input step */ "step"?: number; /** * optionally add suffix * */ "suffixText"?: string; /** * specify the alignment of dropdown, defaults to left */ "theme": Theme; /** * specify the input type */ "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; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Localized string for "next month" (used for aria label) */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) */ "intlPrevMonth"?: 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; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * 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; "reposition": () => Promise; /** * specify the scale of the date picker */ "scale": "s" | "m" | "l"; /** * Selected start date */ "start"?: string; /** * Selected start date as full date object */ "startAsDate"?: Date; /** * Selected date */ "value"?: string; /** * Selected date as full date object */ "valueAsDate"?: Date; } interface CalciteInputMessage { "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 theme, defaults to light */ "theme": Theme; /** * specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) */ "type": InputMessageType; } interface CalciteLabel { /** * specify the text alignment of the label */ "alignment": Alignment; /** * eliminates any space around the label */ "disableSpacing"?: boolean; /** * is the label disabled */ "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 input, defaults to m */ "scale": Scale; /** * specify the status of the label and any child input / input messages */ "status": Status; /** * specify theme of the label and its any child input / input messages */ "theme": Theme; } interface CalciteLink { /** * is the link disabled */ "disabled"?: 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; "setFocus": () => Promise; /** * Select theme (light or dark) */ "theme": Theme; } 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; /** * 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 */ "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; /** * Select theme (light or dark) */ "theme": Theme; /** * 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; /** * close the notice emit the `calciteNoticeClose` event - listens for this */ "close": () => Promise; /** * 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. */ "intlClose": string; /** * open the notice and emit the `calciteNoticeOpen` event - listens for this */ "open": () => Promise; /** * specify the scale of the notice, defaults to m */ "scale": Scale; /** * focus the close button, if present and requested */ "setFocus": () => Promise; /** * Select theme (light or dark) */ "theme": Theme; /** * 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; /** * title of the next button */ "textLabelNext": string; /** * title of the previous button */ "textLabelPrevious": string; /** * specify the theme of accordion, defaults to light */ "theme": Theme; /** * 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; /** * Specifies the maxiumum 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; /** * 'Open' text string for the menu. */ "intlOpen"?: 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; "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; /** * Used to set the component's color scheme. */ "theme": Theme; /** * 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; "getSelectedItems": () => Promise>; /** * 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; "setFocus": () => Promise; } interface CalcitePickListGroup { /** * The title used for all nested `calcite-pick-list` rows. */ "groupTitle": string; } 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, grid or null. */ "icon"?: ICON_TYPES | null; /** * The text for the remove item buttons. Only applicable if removable is true. */ "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; /** * 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; "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; /** * A unique value used to identify this item - similar to the value attribute on an . */ "value": string; } interface CalcitePopover { /** * Display a close button within the Popover. */ "closeButton": boolean; /** * Prevents flipping the popover's placement when it starts to overlap its reference element. */ "disableFlip": boolean; /** * Removes the caret pointer. */ "disablePointer": boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Text for close button. */ "intlClose": string; /** * Accessible name for the component */ "label": string; /** * Offset the position of the popover away from the reference element. */ "offsetDistance": number; /** * Offset the position of the popover along the reference element. */ "offsetSkidding": number; /** * Display and position the component. */ "open": boolean; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement": PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. */ "referenceElement": HTMLElement | string; "reposition": () => Promise; "setFocus": (focusId?: FocusId) => Promise; /** * Select theme (light or dark) */ "theme": Theme; "toggle": (value?: boolean) => Promise; } interface CalcitePopoverManager { /** * Automatically close popovers when clicking outside of them. */ "autoClose"?: boolean; /** * CSS Selector to match reference elements for popovers. */ "selector": string; } interface CalciteProgress { /** * For indeterminate progress bars, reverse the animation direction */ "reversed": boolean; /** * Text label for the progress indicator */ "text": string; /** * Select theme (light or dark) */ "theme": Theme; /** * Use indeterminate if finding actual progress value is impossible */ "type": "indeterminate" | "determinate"; /** * Fraction completed, in the range of 0 - 1.0 */ "value": number; } interface CalciteRadio { /** * The checked state of the radio. */ "checked": boolean; /** * The disabled state of the radio. */ "disabled"?: boolean; /** * The focused state of the radio. */ "focused": boolean; /** * The radio's hidden status. */ "hidden": boolean; /** * The hovered state of the radio. */ "hovered": boolean; /** * The scale (size) of the radio. */ "scale": Scale; /** * The color theme of the radio, */ "theme": Theme; } 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 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; /** * The color theme of the radio button, theme is passed as a property automatically from calcite-radio-button-group. */ "theme": Theme; /** * The value of the radio button. */ "value": string; } 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; /** * The color theme of the radio button group. */ "theme": Theme; } 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; /** * The scale of the radio group */ "scale": Scale; /** * The group's selected item. */ "selectedItem": HTMLCalciteRadioGroupItemElement; /** * Focuses the selected item. If there is no selection, it focuses the first item. */ "setFocus": () => Promise; /** * The component's theme. */ "theme": Theme; /** * 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; /** * display rating value */ "displayValue": boolean; /** * Localized string for "Rating" (used for aria label) */ "intlRating"?: string; /** * Localized string for labelling each star, `${num}` in the string will be replaced by the number */ "intlStars"?: string; /** * is the rating component in a selectable mode */ "readOnly": boolean; /** * specify the scale of the component, defaults to m */ "scale": Scale; "setFocus": () => Promise; /** * specify the theme of scrim, defaults to light */ "theme": Theme; /** * the value of the rating component */ "value": number; } interface CalciteScrim { /** * string to override English loading text */ "intlLoading"?: string; /** * Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state. */ "loading": boolean; /** * specify the theme of scrim, defaults to light */ "theme": Theme; } 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 component scale. */ "scale": Scale; /** * The currently selected option. * @readonly */ "selectedOption": HTMLCalciteOptionElement; "setFocus": () => Promise; /** * The component theme. */ "theme": Theme; /** * The component width. */ "width": Width; } interface CalciteShell { /** * Used to set the component's color scheme. */ "theme": Theme; } interface CalciteShellCenterRow { /** * This property makes the content area appear like a "floating" panel. */ "detached": boolean; /** * Specifies the maxiumum 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 maxiumum height of the contents when detached. */ "detachedHeightScale": Scale; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; /** * 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; /** * Display a histogram above the slider */ "histogram"?: DataSeries; /** * Label handles with their numeric value */ "labelHandles"?: boolean; /** * Label tick marks with their numeric value. */ "labelTicks"?: boolean; /** * Maximum selectable value */ "max": number; /** * 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; /** * Label for first (or only) handle (ex. "Temperature, lower bound") */ "minLabel": string; /** * Currently selected lower number (if multi-select) */ "minValue"?: number; /** * Interval to move on page up/page down keys */ "pageStep"?: number; /** * Use finer point for handles */ "precise"?: boolean; "setFocus": () => Promise; /** * When true, enables snap selection along the step interval */ "snap"?: boolean; /** * Interval to move on up/down keys */ "step"?: number; /** * Select theme (light or dark) */ "theme": Theme; /** * 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; /** * The class on the handle elements. */ "handleSelector": string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; } 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; /** * 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; /** * select theme (light or dark), defaults to light */ "theme": Theme; } 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; /** * specify the theme of stepper, defaults to light */ "theme": Theme; } 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 disabled */ "disabled"?: boolean; /** * The name of the checkbox input */ "name"?: string; /** * The scale of the switch */ "scale": Scale; /** * True if the switch is initially on */ "switched"?: boolean; /** * The component's theme. */ "theme": Theme; /** * The value of the checkbox input */ "value"?: string; } interface CalciteTab { /** * Show this tab */ "active": boolean; /** * Return the index of this tab within the tab array */ "getTabIndex": () => Promise; /** * 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 { "indicatorOffset": number; "indicatorWidth": number; "layout": TabLayout; "position": TabPosition; /** * 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; "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; /** * 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 { /** * 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; /** * Select theme (light or dark) */ "theme": Theme; } interface CalciteTile { /** * The active state of the tile. */ "active"?: boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * 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; /** * The theme of the tile. */ "theme": Theme; } 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 focused state of the tile select. */ "focused": 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 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": string; /** * The side of the tile that the radio or checkbox appears. */ "showInput": "left" | "right" | "none"; /** * The theme of the tile select. */ "theme": Theme; /** * 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"?: string; /** * specify the width of the tile, defaults to auto */ "width": Extract<"auto" | "full", Width>; } interface CalciteTileSelectGroup { /** * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */ "layout"?: TileSelectGroupLayout; } interface CalciteTip { /** * No longer displays the tip. */ "dismissed": boolean; /** * The heading of the tip. */ "heading"?: string; /** * 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; /** * Used to set the component's color scheme. */ "theme": Theme; } interface CalciteTipGroup { /** * The title used for all nested tips. */ "groupTitle"?: string; } interface CalciteTipManager { /** * Alternate text for closing the `calcite-tip-manager`. */ "closed": boolean; /** * 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; "nextTip": () => Promise; "previousTip": () => Promise; /** * Used to set the component's color scheme. */ "theme": Theme; } interface CalciteTooltip { /** * Accessible name for the component */ "label": string; /** * Offset the position of the popover away from the reference element. */ "offsetDistance": number; /** * Offset the position of the popover along the reference element. */ "offsetSkidding": number; /** * Display and position the component. */ "open": boolean; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement": PopperPlacement; /** * Reference HTMLElement used to position this component. */ "referenceElement": HTMLElement | string; "reposition": () => Promise; /** * Select theme (light or dark) */ "theme": Theme; } interface CalciteTooltipManager { /** * CSS Selector to match reference elements for tooltips. */ "selector": string; } interface CalciteTree { /** * Display indentation guide lines */ "lines": boolean; "root": boolean; /** * Specify the scale of the tree, defaults to m */ "scale": Extract<"s" | "m", Scale>; /** * Customize how tree selection works (single, multi, children, multi-children) */ "selectionMode": TreeSelectionMode; /** * Select theme (light or dark) */ "theme": Theme; } interface CalciteTreeItem { "depth": number; /** * True if the item is in an expanded state */ "expanded": boolean; "hasChildren": boolean; "lines": boolean; "parentExpanded": boolean; "scale": "s" | "m"; /** * 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; "getSelectedItems": () => Promise>; /** * If this is set and drag is enabled, items can be dropped between lists of the same group. */ "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; "setFocus": () => 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, grid or null. */ "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; /** * 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; "setFocus": () => Promise; "toggleSelected": (coerce?: boolean) => Promise; /** * A unique value used to identify this item - similar to the value attribute on an . */ "value": string; } } 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 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 HTMLCalciteColorElement extends Components.CalciteColor, HTMLStencilElement { } var HTMLCalciteColorElement: { prototype: HTMLCalciteColorElement; new (): HTMLCalciteColorElement; }; interface HTMLCalciteColorHexInputElement extends Components.CalciteColorHexInput, HTMLStencilElement { } var HTMLCalciteColorHexInputElement: { prototype: HTMLCalciteColorHexInputElement; new (): HTMLCalciteColorHexInputElement; }; interface HTMLCalciteColorSwatchElement extends Components.CalciteColorSwatch, HTMLStencilElement { } var HTMLCalciteColorSwatchElement: { prototype: HTMLCalciteColorSwatchElement; new (): HTMLCalciteColorSwatchElement; }; 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 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 HTMLCalciteLabelElement extends Components.CalciteLabel, HTMLStencilElement { } var HTMLCalciteLabelElement: { prototype: HTMLCalciteLabelElement; new (): HTMLCalciteLabelElement; }; interface HTMLCalciteLinkElement extends Components.CalciteLink, HTMLStencilElement { } var HTMLCalciteLinkElement: { prototype: HTMLCalciteLinkElement; new (): HTMLCalciteLinkElement; }; 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 HTMLCalciteRadioElement extends Components.CalciteRadio, HTMLStencilElement { } var HTMLCalciteRadioElement: { prototype: HTMLCalciteRadioElement; new (): HTMLCalciteRadioElement; }; 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 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-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": HTMLCalciteColorElement; "calcite-color-hex-input": HTMLCalciteColorHexInputElement; "calcite-color-swatch": HTMLCalciteColorSwatchElement; "calcite-combobox": HTMLCalciteComboboxElement; "calcite-combobox-item": HTMLCalciteComboboxItemElement; "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-label": HTMLCalciteLabelElement; "calcite-link": HTMLCalciteLinkElement; "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": HTMLCalciteRadioElement; "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-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"; "onCalciteAccordionChange"?: (event: CustomEvent) => void; /** * 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"; /** * specify the theme of accordion, defaults to light */ "theme"?: Theme; } interface CalciteAccordionItem { "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; "onCalciteAccordionItemClose"?: (event: CustomEvent) => void; "onCalciteAccordionItemKeyEvent"?: (event: CustomEvent) => void; "onCalciteAccordionItemRegister"?: (event: CustomEvent) => void; "onCalciteAccordionItemSelect"?: (event: CustomEvent) => void; } interface CalciteAction { /** * Indicates whether the action is highlighted. */ "active"?: boolean; /** * Specify the appearance style of the action, defaults to solid. */ "appearance"?: 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 */ "intlLoading"?: string; /** * Label of the action, exposed on hover. 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; /** * Text that accompanies the action icon. */ "text": string; /** * Indicates whether the text is displayed. */ "textEnabled"?: boolean; /** * Used to set the component's color scheme. */ "theme"?: Theme; } 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; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; /** * Used to set the component's color scheme. */ "theme"?: Theme; /** * Used to set the tooltip for the expand toggle. */ "tooltipExpand"?: HTMLCalciteTooltipElement; } interface CalciteActionGroup { } 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; /** * Used to set the component's color scheme. */ "theme"?: Theme; /** * Used to set the tooltip for the expand toggle. */ "tooltipExpand"?: HTMLCalciteTooltipElement; } 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 */ "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 scale of the button, defaults to m */ "scale"?: Scale; /** * Select theme (light or dark) */ "theme"?: Theme; } interface CalciteAvatar { /** * full name of the user */ "fullName"?: string; /** * specify the scale of the avatar, defaults to m */ "scale"?: Scale; /** * Select theme (light or dark) */ "theme"?: Theme; /** * 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; /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * string to override English loading text */ "intlLoading"?: 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 summary. */ "summary"?: string; /** * Used to set the component's color scheme. */ "theme"?: Theme; } 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; /** * 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. * @todo revisit doc */ "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; /** * 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 */ "intlLoading"?: string; /** * optionally add a calcite-loader component to the button, disabling interaction. */ "loading"?: boolean; /** * 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; /** * Select theme (light or dark) */ "theme"?: Theme; /** * 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 */ "intlDeselect"?: string; /** * string to override English loading text */ "intlLoading"?: string; /** * string to override English select text for checkbox when selectable is true */ "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; /** * The theme of the card. */ "theme"?: Theme; } interface CalciteCheckbox { /** * The checked state of the checkbox. */ "checked"?: boolean; /** * True if the checkbox is disabled */ "disabled"?: boolean; /** * The focused state of the checkbox. */ "focused"?: 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 name of the checkbox input */ "name"?: string; /** * Emitted when the checkbox checked status changes */ "onCalciteCheckboxChange"?: (event: CustomEvent) => void; /** * Emitted when the checkbox focused state changes */ "onCalciteCheckboxFocusedChange"?: (event: CustomEvent) => void; /** * specify the scale of the checkbox, defaults to m */ "scale"?: Scale; /** * Determines what theme to use */ "theme"?: Theme; /** * The value of the checkbox input */ "value"?: string; } 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 */ "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; /** * Select theme (light or dark) */ "theme"?: Theme; "value": string; } interface CalciteColor { /** * 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; /** * The format of the value property. When "auto", the format will be inferred from `value` when set. */ "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 */ "intlB"?: string; /** * Label used for the blue channel description */ "intlBlue"?: string; /** * Label used for the delete color button. */ "intlDeleteColor"?: string; /** * Label used for the green channel */ "intlG"?: string; /** * Label used for the green channel description */ "intlGreen"?: string; /** * Label used for the hue channel */ "intlH"?: string; /** * Label used for the hex input */ "intlHex"?: string; /** * Label used for the HSV mode */ "intlHsv"?: string; /** * Label used for the hue channel description */ "intlHue"?: string; /** * Label used for the hex input when there is no color selected. */ "intlNoColor"?: string; /** * Label used for the red channel */ "intlR"?: string; /** * Label used for the red channel description */ "intlRed"?: string; /** * Label used for the RGB mode */ "intlRgb"?: string; /** * Label used for the saturation channel */ "intlS"?: string; /** * Label used for the saturation channel description */ "intlSaturation"?: string; /** * Label used for the save color button. */ "intlSaveColor"?: string; /** * Label used for the saved colors section */ "intlSaved"?: string; /** * Label used for the value channel */ "intlV"?: string; /** * Label used for the */ "intlValue"?: string; "onCalciteColorChange"?: (event: CustomEvent) => void; /** * The scale of the color picker. */ "scale"?: Scale; /** * Storage ID for colors. */ "storageId"?: string; /** * The component's theme. */ "theme"?: Theme; /** * 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. */ "value"?: ColorValue | null; } interface CalciteColorHexInput { /** * 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. */ "intlHex"?: string; /** * Label used for the hex input when there is no color selected. */ "intlNoColor"?: string; /** * Emitted when the hex value changes. */ "onCalciteColorHexInputChange"?: (event: CustomEvent) => void; /** * The component's scale. */ "scale"?: Scale; /** * The component's theme. */ "theme"?: Theme; /** * The hex value. */ "value"?: string; } interface CalciteColorSwatch { /** * 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; /** * The component's theme. */ "theme"?: Theme; } interface CalciteCombobox { /** * Open and close combobox */ "active"?: boolean; /** * Allow entry of custom values which are not in the original set of items */ "allowCustomValues"?: boolean; /** * Disable combobox input */ "disabled"?: boolean; /** * 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; "onCalciteComboboxChipDismiss"?: (event: CustomEvent) => void; /** * Called when the selected items set changes */ "onCalciteLookupChange"?: (event: CustomEvent) => void; /** * Placeholder text for input */ "placeholder"?: string; /** * Specify the scale of the combobox, defaults to m */ "scale"?: Scale; /** * Select theme (light or dark) */ "theme"?: Theme; } interface CalciteComboboxItem { /** * True when item is highlighted either from keyboard or mouse hover */ "active"?: boolean; "anscestors"?: HTMLCalciteComboboxItemElement[]; /** * When true, the item cannot be clicked and is visually muted. */ "disabled"?: boolean; "guid"?: string; /** * Emitted whenever the item is selected or unselected. * @event calciteComboboxItemChange */ "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; /** * A unique value used to identify this item - similar to the value attribute on an . */ "value": string; } interface CalciteDatePicker { /** * Active range */ "activeRange"?: "start" | "end"; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Localized string for "next month" (used for aria label) */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) */ "intlPrevMonth"?: string; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Latest allowed date ("yyyy-mm-dd") */ "max"?: string; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * 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. */ "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 */ "start"?: string; /** * Selected start date as full date object */ "startAsDate"?: Date; /** * Selected date */ "value"?: string; /** * Selected date as full date object */ "valueAsDate"?: 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 hovers over a day */ "onCalciteDayHover"?: (event: CustomEvent) => void; /** * Emitted when user selects day */ "onCalciteDaySelect"?: (event: CustomEvent) => void; /** * Showing date range */ "range"?: boolean; "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; "hoverRange"?: any; /** * 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 hovers the date. */ "onCalciteDatePickerHover"?: (event: CustomEvent) => void; "onCalciteDatePickerMouseOut"?: (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; /** * Localized string for next month. */ "intlNextMonth"?: string; /** * Localized string for previous month. */ "intlPrevMonth"?: 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 { "active"?: boolean; /** * specify the alignment of dropdown, defaults to start */ "alignment"?: Alignment; /** * 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; /** * 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; /** * specify the scale of dropdown, defaults to m */ "scale"?: Scale; /** * **read-only** The currently selected items * @readonly */ "selectedItems"?: HTMLCalciteDropdownItemElement[]; /** * specify the theme of the dropdown, defaults to light */ "theme"?: Theme; /** * 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; "onCalciteDropdownGroupRegister"?: (event: CustomEvent) => void; "onCalciteDropdownItemChange"?: (event: CustomEvent) => void; /** * 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 { "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; "onCalciteDropdownItemSelect"?: (event: CustomEvent) => void; } interface CalciteFab { /** * Used to set the button's appearance. Default is outline. */ "appearance"?: Appearance; /** * Used to set the button's color. Default is light. */ "color"?: FabColor; /** * 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; /** * Label of the FAB, exposed on hover. 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; /** * Used to set the component's color scheme. */ "theme"?: Theme; } interface CalciteFilter { /** * The input data. 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. */ "data"?: 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; "onCalciteFilterChange"?: (event: CustomEvent) => void; /** * Placeholder text for the input element's placeholder attribute */ "placeholder"?: string; } interface CalciteFlow { /** * Used to set the component's color scheme. */ "theme"?: Theme; } interface CalciteGraph { /** * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value */ "data"?: DataSeries; /** * Width of graph in pixels */ "height"?: number; /** * End of highlight color if highlighting range */ "highlightMax"?: number; /** * Start of highlight color if highlighting range */ "highlightMin"?: number; /** * Width of graph in pixels */ "width"?: number; } interface CalciteHandle { /** * Emmitted when the the handle is activated and the up or down arrow key is pressed. * @event calciteHandleNudge */ "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; /** * Icon theme. Can be "light" or "dark". */ "theme"?: Theme; } 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` */ "intlCancelEditing"?: string; /** * specify text to be user for the confirm changes button's aria-label, defaults to `Save` */ "intlConfirmChanges"?: string; /** * specify text to be user for the enable editing button's aria-label, defaults to `Click to edit` */ "intlEnableEditing"?: string; /** * specify whether the confirm button should display a loading state, defaults to false */ "loading"?: boolean; "onCalciteInlineEditableChangesConfirm"?: (event: CustomEvent) => void; "onCalciteInlineEditableEditingCancel"?: (event: CustomEvent) => void; "onCalciteInlineEditableEnableEditingChange"?: (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; /** * specify the theme of the inline-editable component, defaults to the theme of the wrapped calcite-input or the theme of the closest wrapping component with a set theme */ "theme"?: Theme; } 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; /** * 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; /** * specify if the input is in loading state */ "loading"?: boolean; /** * input max */ "max"?: number; /** * input min */ "min"?: number; /** * specify the placement of the number buttons */ "numberButtonType"?: InputPlacement; "onCalciteInputBlur"?: (event: CustomEvent) => void; "onCalciteInputFocus"?: (event: CustomEvent) => void; "onCalciteInputInput"?: (event: CustomEvent) => void; /** * explicitly whitelist placeholder attribute */ "placeholder"?: string; /** * optionally add prefix * */ "prefixText"?: string; /** * 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; /** * optionally add suffix * */ "suffixText"?: string; /** * specify the alignment of dropdown, defaults to left */ "theme"?: Theme; /** * specify the input type */ "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; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Localized string for "next month" (used for aria label) */ "intlNextMonth"?: string; /** * Localized string for "previous month" (used for aria label) */ "intlPrevMonth"?: 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; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * 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 */ "start"?: string; /** * Selected start date as full date object */ "startAsDate"?: Date; /** * Selected date */ "value"?: string; /** * Selected date as full date object */ "valueAsDate"?: Date; } interface CalciteInputMessage { "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 theme, defaults to light */ "theme"?: Theme; /** * specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) */ "type"?: InputMessageType; } interface CalciteLabel { /** * specify the text alignment of the label */ "alignment"?: Alignment; /** * eliminates any space around the label */ "disableSpacing"?: boolean; /** * is the label disabled */ "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"; "onCalciteLabelFocus"?: (event: CustomEvent) => void; /** * specify the scale of the input, defaults to m */ "scale"?: Scale; /** * specify the status of the label and any child input / input messages */ "status"?: Status; /** * specify theme of the label and its any child input / input messages */ "theme"?: Theme; } interface CalciteLink { /** * is the link disabled */ "disabled"?: 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; /** * Select theme (light or dark) */ "theme"?: Theme; } 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; /** * 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 begins the close animation */ "onCalciteModalClose"?: (event: CustomEvent) => void; /** * Fired when the modal begins the open animation */ "onCalciteModalOpen"?: (event: CustomEvent) => void; /** * specify the scale of modal, defaults to m */ "scale"?: Scale; /** * Select theme (light or dark) */ "theme"?: Theme; /** * 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. */ "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; /** * Select theme (light or dark) */ "theme"?: Theme; /** * 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. * @event calcitePaginationUpdate */ "onCalcitePaginationUpdate"?: (event: CustomEvent) => void; /** * The scale of the pagination */ "scale"?: Scale; /** * index of item that should begin the page */ "start"?: number; /** * title of the next button */ "textLabelNext"?: string; /** * title of the previous button */ "textLabelPrevious"?: string; /** * specify the theme of accordion, defaults to light */ "theme"?: Theme; /** * 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; /** * Specifies the maxiumum 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; /** * 'Open' text string for the menu. */ "intlOpen"?: 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; /** * Used to set the component's color scheme. */ "theme"?: Theme; /** * 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; /** * 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. * @event calciteListChange */ "onCalciteListChange"?: (event: CustomEvent) => void; } interface CalcitePickListGroup { /** * The title used for all nested `calcite-pick-list` rows. */ "groupTitle"?: string; } 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, grid or null. */ "icon"?: ICON_TYPES | null; /** * The text for the remove item buttons. Only applicable if removable is true. */ "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. * @event calciteListItemChange */ "onCalciteListItemChange"?: (event: CustomEvent<{ item: HTMLCalcitePickListItemElement; value: string; selected: boolean; shiftPressed: boolean; }>) => void; /** * Emitted whenever the remove button is pressed. * @event calciteListItemRemove */ "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; /** * A unique value used to identify this item - similar to the value attribute on an . */ "value": string; } interface CalcitePopover { /** * Display a close button within the Popover. */ "closeButton"?: boolean; /** * Prevents flipping the popover's placement when it starts to overlap its reference element. */ "disableFlip"?: boolean; /** * Removes the caret pointer. */ "disablePointer"?: boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Text for close button. */ "intlClose"?: string; /** * Accessible name for the component */ "label": string; /** * Offset the position of the popover away from the reference element. */ "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; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement"?: PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. */ "referenceElement": HTMLElement | string; /** * Select theme (light or dark) */ "theme"?: Theme; } interface CalcitePopoverManager { /** * Automatically close popovers when clicking outside of them. */ "autoClose"?: boolean; /** * CSS Selector to match reference elements for popovers. */ "selector"?: string; } interface CalciteProgress { /** * For indeterminate progress bars, reverse the animation direction */ "reversed"?: boolean; /** * Text label for the progress indicator */ "text"?: string; /** * Select theme (light or dark) */ "theme"?: Theme; /** * Use indeterminate if finding actual progress value is impossible */ "type"?: "indeterminate" | "determinate"; /** * Fraction completed, in the range of 0 - 1.0 */ "value"?: number; } interface CalciteRadio { /** * The checked state of the radio. */ "checked"?: boolean; /** * The disabled state of the radio. */ "disabled"?: boolean; /** * The focused state of the radio. */ "focused"?: boolean; /** * The radio's hidden status. */ "hidden"?: boolean; /** * The hovered state of the radio. */ "hovered"?: boolean; /** * The scale (size) of the radio. */ "scale"?: Scale; /** * The color theme of the radio, */ "theme"?: Theme; } interface CalciteRadioButton { /** * The checked state of the radio button. */ "checked"?: boolean; /** * The disabled state of the radio button. */ "disabled"?: boolean; /** * 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 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; /** * Fires when the radio button is either focused or blurred. */ "onCalciteRadioButtonFocusedChange"?: (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 color theme of the radio button, theme is passed as a property automatically from calcite-radio-button-group. */ "theme"?: Theme; /** * The value of the radio button. */ "value": string; } 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; "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; /** * The color theme of the radio button group. */ "theme"?: Theme; } 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 component's theme. */ "theme"?: Theme; /** * 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; "onCalciteRadioGroupItemChange"?: (event: CustomEvent) => void; /** * 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; /** * display rating value */ "displayValue"?: boolean; /** * Localized string for "Rating" (used for aria label) */ "intlRating"?: string; /** * Localized string for labelling each star, `${num}` in the string will be replaced by the number */ "intlStars"?: string; "onCalciteRatingChange"?: (event: CustomEvent) => void; /** * is the rating component in a selectable mode */ "readOnly"?: boolean; /** * specify the scale of the component, defaults to m */ "scale"?: Scale; /** * specify the theme of scrim, defaults to light */ "theme"?: Theme; /** * the value of the rating component */ "value"?: number; } interface CalciteScrim { /** * string to override English loading text */ "intlLoading"?: string; /** * Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state. */ "loading"?: boolean; /** * specify the theme of scrim, defaults to light */ "theme"?: Theme; } 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; /** * 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 component theme. */ "theme"?: Theme; /** * The component width. */ "width"?: Width; } interface CalciteShell { /** * Used to set the component's color scheme. */ "theme"?: Theme; } interface CalciteShellCenterRow { /** * This property makes the content area appear like a "floating" panel. */ "detached"?: boolean; /** * Specifies the maxiumum 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 maxiumum height of the contents when detached. */ "detachedHeightScale"?: Scale; /** * Emitted when collapse has been toggled. */ "onCalciteShellPanelToggle"?: (event: CustomEvent) => void; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; /** * 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; /** * Display a histogram above the slider */ "histogram"?: DataSeries; /** * Label handles with their numeric value */ "labelHandles"?: boolean; /** * Label tick marks with their numeric value. */ "labelTicks"?: boolean; /** * Maximum selectable value */ "max"?: number; /** * 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; /** * Label for first (or only) handle (ex. "Temperature, lower bound") */ "minLabel"?: string; /** * Currently selected lower number (if multi-select) */ "minValue"?: number; /** * 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. */ "onCalciteSliderUpdate"?: (event: CustomEvent) => void; /** * Interval to move on page up/page down keys */ "pageStep"?: number; /** * Use finer point for handles */ "precise"?: boolean; /** * When true, enables snap selection along the step interval */ "snap"?: boolean; /** * Interval to move on up/down keys */ "step"?: number; /** * Select theme (light or dark) */ "theme"?: Theme; /** * 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; /** * The class on the handle elements. */ "handleSelector"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Emmitted when the order of the list has changed. * @event calciteListOrderChange */ "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; /** * 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; /** * select theme (light or dark), defaults to light */ "theme"?: Theme; } 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; "onCalciteStepperItemChange"?: (event: CustomEvent) => void; /** * specify the scale of stepper, defaults to m */ "scale"?: Scale; /** * specify the theme of stepper, defaults to light */ "theme"?: Theme; } 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; "onCalciteStepperItemKeyEvent"?: (event: CustomEvent) => void; "onCalciteStepperItemRegister"?: (event: CustomEvent) => void; "onCalciteStepperItemSelect"?: (event: CustomEvent) => void; } interface CalciteSwitch { /** * True if the switch is disabled */ "disabled"?: boolean; /** * The name of the checkbox input */ "name"?: string; "onCalciteSwitchChange"?: (event: CustomEvent) => void; /** * The scale of the switch */ "scale"?: Scale; /** * True if the switch is initially on */ "switched"?: boolean; /** * The component's theme. */ "theme"?: Theme; /** * The value of the checkbox input */ "value"?: string; } 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 */ "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`: [TabChangeEventDetail](../../interfaces/TabChange.ts) */ "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 { /** * 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; /** * Select theme (light or dark) */ "theme"?: Theme; } interface CalciteTile { /** * The active state of the tile. */ "active"?: boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * 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; /** * The theme of the tile. */ "theme"?: Theme; } 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 focused state of the tile select. */ "focused"?: 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 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"?: string; /** * The side of the tile that the radio or checkbox appears. */ "showInput"?: "left" | "right" | "none"; /** * The theme of the tile select. */ "theme"?: Theme; /** * 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"?: string; /** * specify the width of the tile, defaults to auto */ "width"?: Extract<"auto" | "full", Width>; } interface CalciteTileSelectGroup { /** * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */ "layout"?: TileSelectGroupLayout; } interface CalciteTip { /** * No longer displays the tip. */ "dismissed"?: boolean; /** * The heading of the tip. */ "heading"?: string; /** * 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; /** * Used to set the component's color scheme. */ "theme"?: Theme; } interface CalciteTipGroup { /** * The title used for all nested tips. */ "groupTitle"?: string; } interface CalciteTipManager { /** * Alternate text for closing the `calcite-tip-manager`. */ "closed"?: boolean; /** * 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; /** * Used to set the component's color scheme. */ "theme"?: Theme; } interface CalciteTooltip { /** * Accessible name for the component */ "label": string; /** * Offset the position of the popover away from the reference element. */ "offsetDistance"?: number; /** * Offset the position of the popover along the reference element. */ "offsetSkidding"?: number; /** * Display and position the component. */ "open"?: boolean; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement"?: PopperPlacement; /** * Reference HTMLElement used to position this component. */ "referenceElement": HTMLElement | string; /** * Select theme (light or dark) */ "theme"?: Theme; } interface CalciteTooltipManager { /** * CSS Selector to match reference elements for tooltips. */ "selector"?: string; } interface CalciteTree { /** * Display indentation guide lines */ "lines"?: boolean; "onCalciteTreeSelect"?: (event: CustomEvent) => void; /** * Specify the scale of the tree, defaults to m */ "scale"?: Extract<"s" | "m", Scale>; /** * Customize how tree selection works (single, multi, children, multi-children) */ "selectionMode"?: TreeSelectionMode; /** * Select theme (light or dark) */ "theme"?: Theme; } interface CalciteTreeItem { /** * True if the item is in an expanded state */ "expanded"?: boolean; "onCalciteTreeItemSelect"?: (event: CustomEvent) => void; /** * 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; /** * If this is set and drag is enabled, items can be dropped between lists of the same group. */ "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. * @event calciteListChange */ "onCalciteListChange"?: (event: CustomEvent) => void; /** * Emmitted when the order of the list has changed. * @event calciteListOrderChange */ "onCalciteListOrderChange"?: (event: CustomEvent) => void; } 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, grid or null. */ "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; /** * Emitted whenever the remove button is pressed. * @event calciteListItemRemove */ "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; /** * A unique value used to identify this item - similar to the value attribute on an . */ "value": string; } interface IntrinsicElements { "calcite-accordion": CalciteAccordion; "calcite-accordion-item": CalciteAccordionItem; "calcite-action": CalciteAction; "calcite-action-bar": CalciteActionBar; "calcite-action-group": CalciteActionGroup; "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": CalciteColor; "calcite-color-hex-input": CalciteColorHexInput; "calcite-color-swatch": CalciteColorSwatch; "calcite-combobox": CalciteCombobox; "calcite-combobox-item": CalciteComboboxItem; "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-label": CalciteLabel; "calcite-link": CalciteLink; "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": CalciteRadio; "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-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-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": LocalJSX.CalciteColor & JSXBase.HTMLAttributes; "calcite-color-hex-input": LocalJSX.CalciteColorHexInput & JSXBase.HTMLAttributes; "calcite-color-swatch": LocalJSX.CalciteColorSwatch & JSXBase.HTMLAttributes; "calcite-combobox": LocalJSX.CalciteCombobox & JSXBase.HTMLAttributes; "calcite-combobox-item": LocalJSX.CalciteComboboxItem & 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-label": LocalJSX.CalciteLabel & JSXBase.HTMLAttributes; "calcite-link": LocalJSX.CalciteLink & 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": LocalJSX.CalciteRadio & 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-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; } } }