/* 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, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces"; import { Placement } from "@popperjs/core"; import { OverlayPositioning, PopperPlacement } from "./utils/popper"; import { AlertDuration, StatusColor } from "./components/calcite-alert/interfaces"; import { HeadingLevel } from "./components/functional/CalciteHeading"; 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-picker/interfaces"; import { Format } from "./components/calcite-color-picker/utils"; import { ComboboxChildElement, ComboboxSelectionMode } from "./components/calcite-combobox/interfaces"; import { DateRangeChange } from "./components/calcite-date-picker/interfaces"; import { DateLocaleData } from "./components/calcite-date-picker/utils"; import { DropdownPlacement, ItemKeyboardEvent } from "./components/calcite-dropdown/interfaces"; import { SelectionMode } from "./components/calcite-dropdown-group/interfaces"; import { DataSeries } from "./components/calcite-graph/interfaces"; import { InputPlacement } from "./components/calcite-input/interfaces"; import { InputMessageType } from "./components/calcite-input-message/interfaces"; import { HourDisplayFormat, Time, TimeFocusId } from "./utils/time"; import { FocusRequest } from "./components/calcite-label/interfaces"; import { ModalBackgroundColor } from "./components/calcite-modal/interfaces"; import { CalcitePaginationDetail } from "./components/calcite-pagination/calcite-pagination"; import { ListFocusId } from "./components/calcite-pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/calcite-pick-list/resources"; 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"; } 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; /** * Indicates the alignment when text-enabled is false. */ "alignment"?: Alignment; /** * 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; /** * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Specifies the size of the action. */ "scale": Scale; "setFocus": () => Promise; /** * Text that accompanies the action icon. */ "text": string; /** * Indicates whether the text is displayed. */ "textEnabled": boolean; } interface CalciteActionBar { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled": boolean; /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Disables automatically overflowing actions that won't fit into menus. */ "overflowActionsDisabled"?: boolean; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; "setFocus": (focusId?: "expand-toggle") => Promise; } interface CalciteActionGroup { /** * Indicates number of columns. */ "columns"?: Columns; /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Text string for the actions menu. */ "intlMore"?: string; /** * Indicates the horizontal, vertical, or grid layout of the component. */ "layout": Layout; /** * Opens the action menu. */ "menuOpen": boolean; } interface CalciteActionMenu { /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Text string for the actions menu. */ "label": string; /** * Opens the action menu. */ "open": boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement": PopperPlacement; /** * Specifies the size of the action. */ "scale": Scale; "setFocus": () => Promise; } interface CalciteActionPad { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled": boolean; /** * Indicates whether widget is expanded. */ "expanded": boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Indicates the horizontal or vertical layout of the component. */ "layout": Layout; /** * Arranges the component depending on the elements 'dir' property. */ "position": Position; "setFocus": (focusId?: "expand-toggle") => Promise; } interface CalciteAlert { /** * Is the alert currently active or not */ "active": boolean; /** * Close the alert automatically (recommended for passive, non-blocking alerts) */ "autoDismiss": boolean; /** * Duration of autoDismiss (only used with `autoDismiss`) */ "autoDismissDuration": AlertDuration; /** * Color for the alert (will apply to top border and icon) */ "color": StatusColor; /** * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon */ "icon": string | boolean; /** * string to override English close text */ "intlClose": string; /** * Accessible name for the component */ "label": string; /** * specify the scale of the button, defaults to m */ "scale": Scale; /** * focus either the slotted link or the close button */ "setFocus": () => Promise; } interface CalciteAvatar { /** * full name of the user */ "fullName": string; /** * specify the scale of the avatar, defaults to m */ "scale": Scale; /** * src to an image (remember to add a token if the user is private) */ "thumbnail": string; /** * unique id for user */ "userId": string; /** * user name */ "username": string; } interface CalciteBlock { /** * When true, this block will be collapsible. */ "collapsible": boolean; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * When true, displays a drag handle in the header. */ "dragHandle": boolean; /** * Block heading. */ "heading": string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * string to override English loading text */ "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 status. Updates or adds icon to show related icon and color. */ "status"?: Status; /** * Block summary. */ "summary": string; } interface CalciteBlockSection { /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * When true, the block's section content will be displayed. */ "open": boolean; /** * BlockSection status. Adds indicator to show valid or invalid status. */ "status"?: Status; /** * Text displayed in the button. */ "text": string; /** * This property determines the look of the section toggle. If the value is "switch", a toggle-switch will be displayed. If the value is "button", a clickable header is displayed. * @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; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * optionally add a calcite-loader component to the button, disabling interaction. */ "loading"?: boolean; /** * The name attribute to apply to the button */ "name"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * optionally add a round style to the button */ "round"?: boolean; /** * specify the scale of the button, defaults to m */ "scale": Scale; "setFocus": () => Promise; /** * is the button a child of a calcite-split-button */ "splitChild"?: "primary" | "secondary" | false; /** * The target attribute to apply to the hyperlink */ "target"?: string; /** * The type attribute to apply to the button */ "type"?: string; /** * specify the width of the button, defaults to auto */ "width": Width; } interface CalciteCard { /** * string to override English deselect text for checkbox when selectable is true */ "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; } interface CalciteCheckbox { /** * The checked state of the checkbox. */ "checked"?: boolean; /** * True if the checkbox is disabled */ "disabled"?: boolean; /** * The id attribute of the checkbox. When omitted, a globally unique identifier is used. */ "guid": string; /** * The hovered state of the checkbox. * @private */ "hovered": boolean; /** * True if the checkbox is initially indeterminate, which is independent from its checked state https://css-tricks.com/indeterminate-checkboxes/ */ "indeterminate"?: boolean; /** * The label of the checkbox input */ "label"?: string; /** * The name of the checkbox input */ "name"?: string; /** * specify the scale of the checkbox, defaults to m */ "scale": Scale; "setFocus": () => Promise; /** * The value of the checkbox input */ "value"?: any; } interface CalciteChip { /** * specify the appearance style of the button, defaults to solid. */ "appearance": Extract<"solid" | "clear", Appearance>; /** * specify the color of the button, defaults to blue */ "color": ChipColor; /** * Aria label for the "x" button */ "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; "value": any; } interface CalciteColorPicker { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty": boolean; /** * specify the appearance - default (containing border), or minimal (no containing border) */ "appearance": ColorAppearance; /** * Internal prop for advanced use-cases. */ "color": InternalColor | null; /** * 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 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 CalciteColorPickerHexInput { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty": boolean; /** * Label used for the hex input. */ "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 hex value. */ "value": string; } interface CalciteColorPickerSwatch { /** * Used to display whether the swatch is active or not. */ "active": boolean; /** * The color value. * @see https ://developer.mozilla.org/en-US/docs/Web/CSS/color_value */ "color": string; /** * The component scale. */ "scale": Scale; } interface CalciteCombobox { /** * 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; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Placeholder text for input */ "placeholder"?: string; "reposition": () => Promise; /** * Specify the scale of the combobox, defaults to m */ "scale": Scale; /** * specify the selection mode - multi: allow any number of selected items (default) - single: only one selection) - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips */ "selectionMode": ComboboxSelectionMode; "setFocus": () => Promise; } interface CalciteComboboxItem { /** * True when item is highlighted either from keyboard or mouse hover */ "active": boolean; /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors": ComboboxChildElement[]; /** * Don't filter this item based on the search text */ "constant": boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled": boolean; /** * Unique identifier, used for accessibility */ "guid": string; /** * Custom icon to display both in combobox chips and next to combobox item text */ "icon"?: string; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected": boolean; /** * The main label for this item. */ "textLabel": string; /** * Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values. */ "toggleSelected": (coerce?: boolean) => Promise; /** * The item's associated value */ "value": any; } interface CalciteComboboxItemGroup { /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors": ComboboxChildElement[]; /** * Title of the group */ "label": string; } interface CalciteDatePicker { /** * Active range */ "activeRange"?: "start" | "end"; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * 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; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */ "proximitySelectionDisabled"?: boolean; /** * Range mode activation */ "range"?: boolean; /** * specify the scale of the date picker */ "scale": "s" | "m" | "l"; /** * Selected start date */ "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; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Localized string for next month. */ "intlNextMonth": string; /** * Localized string for previous month. */ "intlPrevMonth": string; /** * 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; /** * 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; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the dropdown will be positioned relative to the button. */ "placement": DropdownPlacement; "reposition": () => Promise; /** * specify the scale of dropdown, defaults to m */ "scale": Scale; /** * **read-only** The currently selected items * @readonly */ "selectedItems": HTMLCalciteDropdownItemElement[]; /** * specify whether the dropdown is opened by hover or click of a trigger element */ "type": "hover" | "click"; /** * specify the width of dropdown, defaults to m */ "width": Scale; } interface CalciteDropdownGroup { /** * optionally set a group title for display */ "groupTitle"?: string; /** * Specifies the size of the action. */ "scale": Scale; /** * specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item), none (no active items), defaults to single */ "selectionMode": SelectionMode; } interface CalciteDropdownItem { "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": Extract<"solid" | "outline", Appearance>; /** * Used to set the button's color. Default is light. */ "color": ButtonColor; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. */ "icon"?: string; /** * Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Specifies the size of the fab. */ "scale": Scale; "setFocus": () => Promise; /** * Text that accompanies the FAB icon. */ "text"?: string; /** * Indicates whether the text is displayed. */ "textEnabled": boolean; } 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[]; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * 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; /** * Focuses the filter input. */ "setFocus": () => Promise; } interface CalciteFlow { /** * Removes the currently active `calcite-panel`. */ "back": () => Promise; } 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; } 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; } interface CalciteInput { /** * specify the alignment of the value of the input */ "alignment": Position; /** * should the input autofocus */ "autofocus": boolean; /** * optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea" */ "clearable"?: boolean; /** * is the input disabled */ "disabled"?: boolean; /** * for number values, displays the locale's group separator */ "groupSeparator": boolean; /** * when 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; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * Toggles locale formatting for numbers. */ "localeFormat": boolean; /** * input max */ "max"?: number; /** * Maximum length of the input value */ "maxLength"?: number; /** * Maximum length of text input. * @deprecated use maxLength instead */ "maxlength"?: number; /** * input min */ "min"?: number; /** * Minimum length of the text input */ "minLength"?: number; /** * The name of the input */ "name"?: string; /** * specify the placement of the number buttons */ "numberButtonType"?: InputPlacement; /** * explicitly whitelist placeholder attribute */ "placeholder": string; /** * optionally add prefix */ "prefixText"?: string; /** * 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 | "any"; /** * optionally add suffix * */ "suffixText"?: string; /** * specify the input type Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time` */ "type": | "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week"; /** * input value */ "value"?: string; } interface CalciteInputDatePicker { /** * Expand or collapse when calendar does not have input */ "active": boolean; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * 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; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */ "proximitySelectionDisabled"?: boolean; /** * Range mode activation */ "range"?: boolean; "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 appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) */ "type": InputMessageType; } interface CalciteInputTimePicker { /** * The active state of the time input */ "active"?: boolean; /** * The disabled state of the time input */ "disabled"?: boolean; /** * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */ "hourDisplayFormat": HourDisplayFormat; /** * aria-label for the hour input */ "intlHour"?: string; /** * aria-label for the hour down button */ "intlHourDown"?: string; /** * aria-label for the hour up button */ "intlHourUp"?: string; /** * aria-label for the meridiem (am/pm) input */ "intlMeridiem"?: string; /** * aria-label for the meridiem (am/pm) down button */ "intlMeridiemDown"?: string; /** * aria-label for the meridiem (am/pm) up button */ "intlMeridiemUp"?: string; /** * aria-label for the minute input */ "intlMinute"?: string; /** * aria-label for the minute down button */ "intlMinuteDown"?: string; /** * aria-label for the minute up button */ "intlMinuteUp"?: string; /** * aria-label for the second input */ "intlSecond"?: string; /** * aria-label for the second down button */ "intlSecondDown"?: string; /** * aria-label for the second up button */ "intlSecondUp"?: string; /** * The name of the time input */ "name"?: string; /** * The scale (size) of the time input */ "scale": Scale; "setFocus": () => Promise; /** * number that specifies the granularity that the value must adhere to */ "step": number; /** * The selected time */ "value": string; } interface CalciteLabel { /** * specify the text alignment of the label */ "alignment": Alignment; /** * eliminates any space around the label */ "disableSpacing"?: boolean; /** * is the label disabled */ "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; } 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; } interface CalciteList { } interface CalciteListItem { /** * An optional description for this item. This will appear below the label text. */ "description": string; /** * When true, disabled prevents interaction. */ "disabled": boolean; /** * @todo The label of the list item. */ "label": string; /** * When true, prevents the content of the list item from user interaction. */ "nonInteractive": boolean; } interface CalciteLoader { /** * Show the loader */ "active": boolean; /** * Inline loaders are smaller and will appear to the left of the text */ "inline": boolean; /** * Accessible name for the component */ "label": string; /** * Turn off spacing around the loader */ "noPadding"?: boolean; /** * Speficy the scale of the loader. Defaults to "m" */ "scale": Scale; /** * Text which should appear under the loading indicator (optional) */ "text": string; /** * Use indeterminate if finding actual progress value is impossible */ "type": "indeterminate" | "determinate"; /** * Percent complete of 100, only valid for determinate indicators */ "value": number; } interface CalciteModal { /** * Add the active attribute to open the modal */ "active"?: boolean; /** * Background color of modal content */ "backgroundColor": ModalBackgroundColor; /** * Optionally pass a function to run before close */ "beforeClose": (el: HTMLElement) => Promise; /** * Adds a color bar at the top for visual impact, Use color to add importance to destructive/workflow dialogs. */ "color"?: "red" | "blue"; /** * Disables the display a close button within the Modal */ "disableCloseButton"?: boolean; /** * Flag to disable the default close on escape behavior */ "disableEscape"?: boolean; /** * Disables the closing of the Modal when clicked outside. */ "disableOutsideClose"?: boolean; /** * Prevent the modal from taking up the entire screen on mobile */ "docked": boolean; /** * Specify an element to focus when the modal is first opened */ "firstFocus"?: HTMLElement; /** * Focus first interactive element * @deprecated use `setFocus` instead. */ "focusElement": (el?: HTMLElement) => Promise; /** * Set the modal to always be fullscreen (overrides width) */ "fullscreen": boolean; /** * Aria label for the close button */ "intlClose": string; /** * Turn off spacing around the content area slot */ "noPadding"?: boolean; /** * specify the scale of modal, defaults to m */ "scale": Scale; /** * Set the scroll top of the modal content */ "scrollContent": (top?: number, left?: number) => Promise; /** * Sets focus on the component. By default, will try to focus on any focusable content. If there is none, it will focus on the close button. If you want to focus on the close button, you can use the `close-button` focus ID. */ "setFocus": (focusId?: "close-button") => Promise; /** * Set the width of the modal. Can use stock sizes or pass a number (in pixels) */ "width": Scale | number; } interface CalciteNotice { /** * Is the notice currently active or not */ "active": boolean; /** * Color for the notice (will apply to top border and icon) */ "color": StatusColor; /** * Optionally show a button the user can click to dismiss the notice */ "dismissible"?: boolean; /** * when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon */ "icon": string | boolean; /** * String for the close button. */ "intlClose": string; /** * specify the scale of the notice, defaults to m */ "scale": Scale; /** * focus the close button, if present and requested */ "setFocus": () => Promise; /** * specify the width of the notice, defaults to auto */ "width": Width; } interface CalciteOption { /** * When true, it prevents the option from being selected. */ "disabled": boolean; /** * The option label. */ "label": string; /** * When true, this option is selected. Otherwise, false. */ "selected": boolean; /** * The value associated with this option. */ "value": any; } interface CalciteOptionGroup { /** * When true, it prevents selection from any of its associated options. */ "disabled": boolean; /** * The group label. This property is required. */ "label": string; } interface CalcitePagination { /** * Go to the next page of results */ "nextPage": () => Promise; /** * number of items per page */ "num": number; /** * Go to the previous page of results */ "previousPage": () => Promise; /** * The scale of the pagination */ "scale": Scale; /** * index of item that should begin the page */ "start": number; /** * title of the next button */ "textLabelNext": string; /** * title of the previous button */ "textLabelPrevious": string; /** * total number of items */ "total": number; } interface CalcitePanel { /** * When provided, this method will be called before it is removed from the parent flow. */ "beforeBack"?: () => Promise; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * Hides the panel. */ "dismissed": boolean; /** * Displays a close button in the trailing side of the header. */ "dismissible": boolean; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Specifies the 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; /** * '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; /** * 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>; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Multiple works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple": boolean; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus": boolean; "setFocus": (focusId?: ListFocusId) => Promise; } interface CalcitePickListGroup { /** * The title used for all nested `calcite-pick-list` rows. */ "groupTitle": string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; } interface CalcitePickListItem { /** * An optional description for this item. This will appear below the label text. */ "description"?: string; /** * When false, the item cannot be deselected by user interaction. */ "disableDeselect": boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled"?: boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, 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; /** * The item's associated value. */ "value": any; } interface CalcitePopover { /** * Display a close button within the Popover. * @deprecated use dismissible instead. */ "closeButton": boolean; /** * Prevents flipping the popover's placement when it starts to overlap its reference element. */ "disableFlip": boolean; /** * Removes the caret pointer. */ "disablePointer": boolean; /** * Display a close button within the Popover. */ "dismissible": boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Text for close button. */ "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; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement": PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. */ "referenceElement": HTMLElement | string; "reposition": () => Promise; "setFocus": (focusId?: "close-button") => Promise; "toggle": (value?: boolean) => Promise; } interface CalcitePopoverManager { /** * Automatically closes any currently open popovers when clicking outside of a popover. */ "autoClose"?: boolean; /** * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover. */ "selector": string; } interface CalciteProgress { /** * For indeterminate progress bars, reverse the animation direction */ "reversed": boolean; /** * Text label for the progress indicator */ "text": string; /** * Use indeterminate if finding actual progress value is impossible */ "type": "indeterminate" | "determinate"; /** * Fraction completed, in the range of 0 - 1.0 */ "value": number; } interface CalciteRadio { /** * The checked state of the radio. */ "checked": boolean; /** * The disabled state of the radio. */ "disabled"?: boolean; /** * The focused state of the radio. * @private */ "focused": boolean; /** * The radio's hidden status. */ "hidden": boolean; /** * The hovered state of the radio. * @private */ "hovered": boolean; /** * The scale (size) of the radio. */ "scale": Scale; } 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. * @private */ "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. * @private */ "hovered": boolean; /** * The label of the radio input */ "label"?: string; /** * The name of the radio button. name is passed as a property automatically from calcite-radio-button-group. */ "name": string; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required": boolean; /** * The scale (size) of the radio button. scale is passed as a property automatically from calcite-radio-button-group. */ "scale": Scale; "setFocus": () => Promise; /** * The value of the radio button. */ "value": any; } interface CalciteRadioButtonGroup { /** * The disabled state of the radio button group. */ "disabled": boolean; /** * The radio button group's hidden status. When a radio button group is hidden none of its options are focusable or checkable. */ "hidden": boolean; /** * The layout direction of the radio buttons in a group. */ "layout": Layout; /** * The name of the radio button group. name must be unique to other radio button group instances. */ "name": string; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required": boolean; /** * The scale (size) of the radio button group. */ "scale": Scale; } interface CalciteRadioGroup { /** * specify the appearance style of the radio group, defaults to solid. */ "appearance": RadioAppearance; /** * is the radio group disabled */ "disabled"?: boolean; /** * specify the layout of the radio group, defaults to horizontal */ "layout": Layout; /** * The group's name. Gets submitted with the form. */ "name": string; /** * 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; /** * specify the width of the group, defaults to auto */ "width": Extract<"auto" | "full", Width>; } interface CalciteRadioGroupItem { /** * Indicates whether the control is checked. */ "checked": boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * flip the icon in rtl */ "iconFlipRtl"?: boolean; /** * optionally used with icon, select where to position the icon */ "iconPosition"?: Position; /** * The control's value. */ "value": any | null; } interface CalciteRating { /** * optionally pass a cumulative average rating to display */ "average"?: number; /** * optionally pass a number of previous ratings to display */ "count"?: number; /** * is the rating component in a selectable mode */ "disabled": boolean; /** * Localized string for "Rating" (used for aria label) */ "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; /** * Show average and count data summary chip (if available) */ "showChip": boolean; /** * the value of the rating component */ "value": number; } interface CalciteScrim { /** * string to override English loading text */ "intlLoading"?: string; /** * Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state. */ "loading": boolean; } interface CalciteSelect { /** * When true, it prevents the option from being selected. */ "disabled": boolean; /** * The component's label. This is required for accessibility purposes. */ "label": string; /** * The component scale. */ "scale": Scale; /** * The currently selected option. * @readonly */ "selectedOption": HTMLCalciteOptionElement; "setFocus": () => Promise; /** * The component width. */ "width": Width; } interface CalciteShell { /** * Positions the center content behind any calcite-shell-panels. */ "contentBehind"?: boolean; } interface CalciteShellCenterRow { /** * This property makes the content area appear like a "floating" panel. */ "detached": boolean; /** * Specifies the 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; /** * Show tick marks on the number line at provided interval */ "ticks"?: number; /** * Currently selected number (if single select) */ "value": null | number; } interface CalciteSortableList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled": boolean; /** * Specifies which items inside the element should be draggable. */ "dragSelector"?: string; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * The selector for the handle elements. */ "handleSelector": string; /** * 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; /** * specify the width of the button, defaults to auto */ "width": Width; } interface CalciteStepper { /** * set the last step as active */ "endStep": () => Promise; /** * set the requested step as active */ "goToStep": (num: number) => Promise; /** * optionally display a status icon next to the step title */ "icon": boolean; /** * specify the layout of stepper, defaults to horizontal */ "layout": Layout; /** * set the next step as active */ "nextStep": () => Promise; /** * optionally display the number next to the step title */ "numbered": boolean; /** * set the previous step as active */ "prevStep": () => Promise; "requestedContent": HTMLElement[] | NodeListOf; /** * specify the scale of stepper, defaults to m */ "scale": Scale; /** * set the first step as active */ "startStep": () => Promise; } interface CalciteStepperItem { /** * is the step active */ "active": boolean; /** * has the step been completed */ "complete": boolean; /** * is the step disabled and not navigable to by a user */ "disabled": boolean; /** * does the step contain an error that needs to be resolved by the user */ "error": boolean; "icon": boolean; /** * pass a title for the stepper item */ "itemSubtitle"?: string; /** * pass a title for the stepper item */ "itemTitle"?: string; "layout"?: string; "numbered": boolean; "scale": Scale; } interface CalciteSwitch { /** * True if the switch is disabled */ "disabled"?: boolean; /** * The name of the switch input */ "name"?: string; /** * The scale of the switch */ "scale": Scale; "setFocus": () => Promise; /** * True if the switch is initially on */ "switched": boolean; /** * The value of the switch input */ "value"?: any; } interface CalciteTab { /** * Show this tab */ "active": boolean; /** * Return the index of this tab within the tab array */ "getTabIndex": () => Promise; "scale": Scale; /** * Optionally include a unique name for this tab, be sure to also set this name on the associated title. */ "tab": string; "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise; } interface CalciteTabNav { "bordered"?: boolean; "indicatorOffset": number; "indicatorWidth": number; "layout": TabLayout; "position": TabPosition; "scale": Scale; /** * Name to use when saving selected tab data to localStorage */ "storageId": string; /** * Pass the same string to multiple tab navs to keep them all in sync if one changes */ "syncId": string; } interface CalciteTabTitle { /** * Show this tab title as selected */ "active": boolean; "bordered"?: boolean; /** * Disable this tab title */ "disabled": boolean; "getTabIdentifier": () => Promise; /** * Return the index of this title within the nav */ "getTabIndex": () => Promise; /** * optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names */ "iconEnd"?: string; /** * flip the icon(s) in rtl */ "iconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names */ "iconStart"?: string; "layout": TabLayout; "position": TabPosition; "scale": Scale; /** * Optionally include a unique name for the tab title, be sure to also set this name on the associated tab. */ "tab"?: string; "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise; } interface CalciteTabs { /** * Optionally enable tabs to appear like a folder-style menu when its layout is "inline" */ "bordered"?: boolean; /** * Align tab titles to the edge or fully justify them across the tab nav ("center") */ "layout": TabLayout; /** * Display the tabs above (default) or below the tab content */ "position": TabPosition; /** * Specify the scale of the tabs component, defaults to m */ "scale": Scale; } interface CalciteTile { /** * The active state of the tile. */ "active"?: boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * When true, prevents interaction. */ "disabled": boolean; /** * The embed mode of the tile. When true, renders without a border and padding for use by other components. */ "embed": boolean; /** * The focused state of the tile. * @private */ "focused": boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile. */ "hidden": boolean; /** * The (optional) url for the tile. (Only applies when embed is set to false) */ "href"?: string; /** * The icon that appears at the top of the tile. */ "icon"?: string; } interface CalciteTileSelect { /** * The checked state of the tile select. */ "checked": boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * The disabled state of the tile select. */ "disabled": boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile select. */ "hidden": boolean; /** * The icon that appears at the top of the tile. */ "icon"?: string; /** * The side of the tile that the radio or checkbox appears on when inputEnabled is true. */ "inputAlignment": Extract<"end" | "start", Alignment>; /** * Display an interactive radio or checkbox. */ "inputEnabled": boolean; /** * The name of the tile select. This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */ "name": string; "setFocus": () => Promise; /** * The selection mode of the tile select: radio (single) or checkbox (multiple). */ "type": TileSelectType; /** * The value of the tile select. This value will appear in form submissions when this tile select is checked. */ "value"?: any; /** * specify the width of the tile, defaults to auto */ "width": Extract<"auto" | "full", Width>; } interface CalciteTileSelectGroup { /** * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */ "layout"?: TileSelectGroupLayout; } interface CalciteTimePicker { /** * The hour value (24-hour format) */ "hour"?: string; /** * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */ "hourDisplayFormat": HourDisplayFormat; /** * aria-label for the hour input */ "intlHour": string; /** * aria-label for the hour down button */ "intlHourDown": string; /** * aria-label for the hour up button */ "intlHourUp": string; /** * aria-label for the meridiem (am/pm) input */ "intlMeridiem": string; /** * aria-label for the meridiem (am/pm) down button */ "intlMeridiemDown": string; /** * aria-label for the meridiem (am/pm) up button */ "intlMeridiemUp": string; /** * aria-label for the minute input */ "intlMinute": string; /** * aria-label for the minute down button */ "intlMinuteDown": string; /** * aria-label for the minute up button */ "intlMinuteUp": string; /** * aria-label for the second input */ "intlSecond": string; /** * aria-label for the second down button */ "intlSecondDown": string; /** * aria-label for the second up button */ "intlSecondUp": string; /** * The minute value */ "minute"?: string; /** * The scale (size) of the time picker */ "scale": Scale; /** * The second value */ "second"?: string; "setFocus": (target: TimeFocusId) => Promise; /** * number that specifies the granularity that the value must adhere to */ "step": number; } interface CalciteTip { /** * No longer displays the tip. */ "dismissed": boolean; /** * The heading of the tip. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * Indicates whether the tip can be dismissed. */ "nonDismissible": boolean; /** * The selected state of the tip if it is being used inside a `calcite-tip-manager`. */ "selected"?: boolean; } interface CalciteTipGroup { /** * The title used for all nested tips. */ "groupTitle"?: string; } interface CalciteTipManager { /** * Alternate text for closing the `calcite-tip-manager`. */ "closed": boolean; /** * Number at which section headings should start for this component. */ "headingLevel": HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * The default group title for the `calcite-tip-manager`. */ "intlDefaultTitle"?: string; /** * Alternate text for navigating to the next tip. */ "intlNext"?: string; /** * Label that appears on hover of pagination icon. */ "intlPaginationLabel"?: string; /** * Alternate text for navigating to the previous tip. */ "intlPrevious"?: string; "nextTip": () => Promise; "previousTip": () => Promise; } 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; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning": OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement": PopperPlacement; /** * Reference HTMLElement used to position this component. */ "referenceElement": HTMLElement | string; "reposition": () => Promise; } interface CalciteTooltipManager { /** * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip. */ "selector": string; } interface CalciteTree { "child": boolean; /** * Display input */ "inputEnabled": boolean; /** * Display indentation guide lines */ "lines": 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; } interface CalciteTreeItem { "depth": number; /** * True if the item is in an expanded state */ "expanded": boolean; "hasChildren": boolean; "indeterminate": boolean; "inputEnabled": 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>; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading": boolean; /** * Multiple Works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple": boolean; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus": boolean; "setFocus": (focusId?: ListFocusId) => Promise; } interface CalciteValueListItem { /** * An optional description for this item. Will appear below the label text. */ "description"?: string; "disableDeselect": boolean; /** * When true, the item cannot be clicked and is visually muted */ "disabled"?: boolean; "handleActivated"?: boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, 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; /** * The item's associated value. */ "value": any; } } declare global { interface HTMLCalciteAccordionElement extends Components.CalciteAccordion, HTMLStencilElement { } var HTMLCalciteAccordionElement: { prototype: HTMLCalciteAccordionElement; new (): HTMLCalciteAccordionElement; }; interface HTMLCalciteAccordionItemElement extends Components.CalciteAccordionItem, HTMLStencilElement { } var HTMLCalciteAccordionItemElement: { prototype: HTMLCalciteAccordionItemElement; new (): HTMLCalciteAccordionItemElement; }; interface HTMLCalciteActionElement extends Components.CalciteAction, HTMLStencilElement { } var HTMLCalciteActionElement: { prototype: HTMLCalciteActionElement; new (): HTMLCalciteActionElement; }; interface HTMLCalciteActionBarElement extends Components.CalciteActionBar, HTMLStencilElement { } var HTMLCalciteActionBarElement: { prototype: HTMLCalciteActionBarElement; new (): HTMLCalciteActionBarElement; }; interface HTMLCalciteActionGroupElement extends Components.CalciteActionGroup, HTMLStencilElement { } var HTMLCalciteActionGroupElement: { prototype: HTMLCalciteActionGroupElement; new (): HTMLCalciteActionGroupElement; }; interface HTMLCalciteActionMenuElement extends Components.CalciteActionMenu, HTMLStencilElement { } var HTMLCalciteActionMenuElement: { prototype: HTMLCalciteActionMenuElement; new (): HTMLCalciteActionMenuElement; }; interface HTMLCalciteActionPadElement extends Components.CalciteActionPad, HTMLStencilElement { } var HTMLCalciteActionPadElement: { prototype: HTMLCalciteActionPadElement; new (): HTMLCalciteActionPadElement; }; interface HTMLCalciteAlertElement extends Components.CalciteAlert, HTMLStencilElement { } var HTMLCalciteAlertElement: { prototype: HTMLCalciteAlertElement; new (): HTMLCalciteAlertElement; }; interface HTMLCalciteAvatarElement extends Components.CalciteAvatar, HTMLStencilElement { } var HTMLCalciteAvatarElement: { prototype: HTMLCalciteAvatarElement; new (): HTMLCalciteAvatarElement; }; interface HTMLCalciteBlockElement extends Components.CalciteBlock, HTMLStencilElement { } var HTMLCalciteBlockElement: { prototype: HTMLCalciteBlockElement; new (): HTMLCalciteBlockElement; }; interface HTMLCalciteBlockSectionElement extends Components.CalciteBlockSection, HTMLStencilElement { } var HTMLCalciteBlockSectionElement: { prototype: HTMLCalciteBlockSectionElement; new (): HTMLCalciteBlockSectionElement; }; interface HTMLCalciteButtonElement extends Components.CalciteButton, HTMLStencilElement { } var HTMLCalciteButtonElement: { prototype: HTMLCalciteButtonElement; new (): HTMLCalciteButtonElement; }; interface HTMLCalciteCardElement extends Components.CalciteCard, HTMLStencilElement { } var HTMLCalciteCardElement: { prototype: HTMLCalciteCardElement; new (): HTMLCalciteCardElement; }; interface HTMLCalciteCheckboxElement extends Components.CalciteCheckbox, HTMLStencilElement { } var HTMLCalciteCheckboxElement: { prototype: HTMLCalciteCheckboxElement; new (): HTMLCalciteCheckboxElement; }; interface HTMLCalciteChipElement extends Components.CalciteChip, HTMLStencilElement { } var HTMLCalciteChipElement: { prototype: HTMLCalciteChipElement; new (): HTMLCalciteChipElement; }; interface HTMLCalciteColorPickerElement extends Components.CalciteColorPicker, HTMLStencilElement { } var HTMLCalciteColorPickerElement: { prototype: HTMLCalciteColorPickerElement; new (): HTMLCalciteColorPickerElement; }; interface HTMLCalciteColorPickerHexInputElement extends Components.CalciteColorPickerHexInput, HTMLStencilElement { } var HTMLCalciteColorPickerHexInputElement: { prototype: HTMLCalciteColorPickerHexInputElement; new (): HTMLCalciteColorPickerHexInputElement; }; interface HTMLCalciteColorPickerSwatchElement extends Components.CalciteColorPickerSwatch, HTMLStencilElement { } var HTMLCalciteColorPickerSwatchElement: { prototype: HTMLCalciteColorPickerSwatchElement; new (): HTMLCalciteColorPickerSwatchElement; }; interface HTMLCalciteComboboxElement extends Components.CalciteCombobox, HTMLStencilElement { } var HTMLCalciteComboboxElement: { prototype: HTMLCalciteComboboxElement; new (): HTMLCalciteComboboxElement; }; interface HTMLCalciteComboboxItemElement extends Components.CalciteComboboxItem, HTMLStencilElement { } var HTMLCalciteComboboxItemElement: { prototype: HTMLCalciteComboboxItemElement; new (): HTMLCalciteComboboxItemElement; }; interface HTMLCalciteComboboxItemGroupElement extends Components.CalciteComboboxItemGroup, HTMLStencilElement { } var HTMLCalciteComboboxItemGroupElement: { prototype: HTMLCalciteComboboxItemGroupElement; new (): HTMLCalciteComboboxItemGroupElement; }; interface HTMLCalciteDatePickerElement extends Components.CalciteDatePicker, HTMLStencilElement { } var HTMLCalciteDatePickerElement: { prototype: HTMLCalciteDatePickerElement; new (): HTMLCalciteDatePickerElement; }; interface HTMLCalciteDatePickerDayElement extends Components.CalciteDatePickerDay, HTMLStencilElement { } var HTMLCalciteDatePickerDayElement: { prototype: HTMLCalciteDatePickerDayElement; new (): HTMLCalciteDatePickerDayElement; }; interface HTMLCalciteDatePickerMonthElement extends Components.CalciteDatePickerMonth, HTMLStencilElement { } var HTMLCalciteDatePickerMonthElement: { prototype: HTMLCalciteDatePickerMonthElement; new (): HTMLCalciteDatePickerMonthElement; }; interface HTMLCalciteDatePickerMonthHeaderElement extends Components.CalciteDatePickerMonthHeader, HTMLStencilElement { } var HTMLCalciteDatePickerMonthHeaderElement: { prototype: HTMLCalciteDatePickerMonthHeaderElement; new (): HTMLCalciteDatePickerMonthHeaderElement; }; interface HTMLCalciteDropdownElement extends Components.CalciteDropdown, HTMLStencilElement { } var HTMLCalciteDropdownElement: { prototype: HTMLCalciteDropdownElement; new (): HTMLCalciteDropdownElement; }; interface HTMLCalciteDropdownGroupElement extends Components.CalciteDropdownGroup, HTMLStencilElement { } var HTMLCalciteDropdownGroupElement: { prototype: HTMLCalciteDropdownGroupElement; new (): HTMLCalciteDropdownGroupElement; }; interface HTMLCalciteDropdownItemElement extends Components.CalciteDropdownItem, HTMLStencilElement { } var HTMLCalciteDropdownItemElement: { prototype: HTMLCalciteDropdownItemElement; new (): HTMLCalciteDropdownItemElement; }; interface HTMLCalciteFabElement extends Components.CalciteFab, HTMLStencilElement { } var HTMLCalciteFabElement: { prototype: HTMLCalciteFabElement; new (): HTMLCalciteFabElement; }; interface HTMLCalciteFilterElement extends Components.CalciteFilter, HTMLStencilElement { } var HTMLCalciteFilterElement: { prototype: HTMLCalciteFilterElement; new (): HTMLCalciteFilterElement; }; interface HTMLCalciteFlowElement extends Components.CalciteFlow, HTMLStencilElement { } var HTMLCalciteFlowElement: { prototype: HTMLCalciteFlowElement; new (): HTMLCalciteFlowElement; }; interface HTMLCalciteGraphElement extends Components.CalciteGraph, HTMLStencilElement { } var HTMLCalciteGraphElement: { prototype: HTMLCalciteGraphElement; new (): HTMLCalciteGraphElement; }; interface HTMLCalciteHandleElement extends Components.CalciteHandle, HTMLStencilElement { } var HTMLCalciteHandleElement: { prototype: HTMLCalciteHandleElement; new (): HTMLCalciteHandleElement; }; interface HTMLCalciteIconElement extends Components.CalciteIcon, HTMLStencilElement { } var HTMLCalciteIconElement: { prototype: HTMLCalciteIconElement; new (): HTMLCalciteIconElement; }; interface HTMLCalciteInlineEditableElement extends Components.CalciteInlineEditable, HTMLStencilElement { } var HTMLCalciteInlineEditableElement: { prototype: HTMLCalciteInlineEditableElement; new (): HTMLCalciteInlineEditableElement; }; interface HTMLCalciteInputElement extends Components.CalciteInput, HTMLStencilElement { } var HTMLCalciteInputElement: { prototype: HTMLCalciteInputElement; new (): HTMLCalciteInputElement; }; interface HTMLCalciteInputDatePickerElement extends Components.CalciteInputDatePicker, HTMLStencilElement { } var HTMLCalciteInputDatePickerElement: { prototype: HTMLCalciteInputDatePickerElement; new (): HTMLCalciteInputDatePickerElement; }; interface HTMLCalciteInputMessageElement extends Components.CalciteInputMessage, HTMLStencilElement { } var HTMLCalciteInputMessageElement: { prototype: HTMLCalciteInputMessageElement; new (): HTMLCalciteInputMessageElement; }; interface HTMLCalciteInputTimePickerElement extends Components.CalciteInputTimePicker, HTMLStencilElement { } var HTMLCalciteInputTimePickerElement: { prototype: HTMLCalciteInputTimePickerElement; new (): HTMLCalciteInputTimePickerElement; }; interface HTMLCalciteLabelElement extends Components.CalciteLabel, HTMLStencilElement { } var HTMLCalciteLabelElement: { prototype: HTMLCalciteLabelElement; new (): HTMLCalciteLabelElement; }; interface HTMLCalciteLinkElement extends Components.CalciteLink, HTMLStencilElement { } var HTMLCalciteLinkElement: { prototype: HTMLCalciteLinkElement; new (): HTMLCalciteLinkElement; }; interface HTMLCalciteListElement extends Components.CalciteList, HTMLStencilElement { } var HTMLCalciteListElement: { prototype: HTMLCalciteListElement; new (): HTMLCalciteListElement; }; interface HTMLCalciteListItemElement extends Components.CalciteListItem, HTMLStencilElement { } var HTMLCalciteListItemElement: { prototype: HTMLCalciteListItemElement; new (): HTMLCalciteListItemElement; }; interface 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 HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement { } var HTMLCalciteTimePickerElement: { prototype: HTMLCalciteTimePickerElement; new (): HTMLCalciteTimePickerElement; }; interface HTMLCalciteTipElement extends Components.CalciteTip, HTMLStencilElement { } var HTMLCalciteTipElement: { prototype: HTMLCalciteTipElement; new (): HTMLCalciteTipElement; }; interface HTMLCalciteTipGroupElement extends Components.CalciteTipGroup, HTMLStencilElement { } var HTMLCalciteTipGroupElement: { prototype: HTMLCalciteTipGroupElement; new (): HTMLCalciteTipGroupElement; }; interface HTMLCalciteTipManagerElement extends Components.CalciteTipManager, HTMLStencilElement { } var HTMLCalciteTipManagerElement: { prototype: HTMLCalciteTipManagerElement; new (): HTMLCalciteTipManagerElement; }; interface HTMLCalciteTooltipElement extends Components.CalciteTooltip, HTMLStencilElement { } var HTMLCalciteTooltipElement: { prototype: HTMLCalciteTooltipElement; new (): HTMLCalciteTooltipElement; }; interface HTMLCalciteTooltipManagerElement extends Components.CalciteTooltipManager, HTMLStencilElement { } var HTMLCalciteTooltipManagerElement: { prototype: HTMLCalciteTooltipManagerElement; new (): HTMLCalciteTooltipManagerElement; }; interface HTMLCalciteTreeElement extends Components.CalciteTree, HTMLStencilElement { } var HTMLCalciteTreeElement: { prototype: HTMLCalciteTreeElement; new (): HTMLCalciteTreeElement; }; interface HTMLCalciteTreeItemElement extends Components.CalciteTreeItem, HTMLStencilElement { } var HTMLCalciteTreeItemElement: { prototype: HTMLCalciteTreeItemElement; new (): HTMLCalciteTreeItemElement; }; interface HTMLCalciteValueListElement extends Components.CalciteValueList, HTMLStencilElement { } var HTMLCalciteValueListElement: { prototype: HTMLCalciteValueListElement; new (): HTMLCalciteValueListElement; }; interface HTMLCalciteValueListItemElement extends Components.CalciteValueListItem, HTMLStencilElement { } var HTMLCalciteValueListItemElement: { prototype: HTMLCalciteValueListItemElement; new (): HTMLCalciteValueListItemElement; }; interface HTMLElementTagNameMap { "calcite-accordion": HTMLCalciteAccordionElement; "calcite-accordion-item": HTMLCalciteAccordionItemElement; "calcite-action": HTMLCalciteActionElement; "calcite-action-bar": HTMLCalciteActionBarElement; "calcite-action-group": HTMLCalciteActionGroupElement; "calcite-action-menu": HTMLCalciteActionMenuElement; "calcite-action-pad": HTMLCalciteActionPadElement; "calcite-alert": HTMLCalciteAlertElement; "calcite-avatar": HTMLCalciteAvatarElement; "calcite-block": HTMLCalciteBlockElement; "calcite-block-section": HTMLCalciteBlockSectionElement; "calcite-button": HTMLCalciteButtonElement; "calcite-card": HTMLCalciteCardElement; "calcite-checkbox": HTMLCalciteCheckboxElement; "calcite-chip": HTMLCalciteChipElement; "calcite-color-picker": HTMLCalciteColorPickerElement; "calcite-color-picker-hex-input": HTMLCalciteColorPickerHexInputElement; "calcite-color-picker-swatch": HTMLCalciteColorPickerSwatchElement; "calcite-combobox": HTMLCalciteComboboxElement; "calcite-combobox-item": HTMLCalciteComboboxItemElement; "calcite-combobox-item-group": HTMLCalciteComboboxItemGroupElement; "calcite-date-picker": HTMLCalciteDatePickerElement; "calcite-date-picker-day": HTMLCalciteDatePickerDayElement; "calcite-date-picker-month": HTMLCalciteDatePickerMonthElement; "calcite-date-picker-month-header": HTMLCalciteDatePickerMonthHeaderElement; "calcite-dropdown": HTMLCalciteDropdownElement; "calcite-dropdown-group": HTMLCalciteDropdownGroupElement; "calcite-dropdown-item": HTMLCalciteDropdownItemElement; "calcite-fab": HTMLCalciteFabElement; "calcite-filter": HTMLCalciteFilterElement; "calcite-flow": HTMLCalciteFlowElement; "calcite-graph": HTMLCalciteGraphElement; "calcite-handle": HTMLCalciteHandleElement; "calcite-icon": HTMLCalciteIconElement; "calcite-inline-editable": HTMLCalciteInlineEditableElement; "calcite-input": HTMLCalciteInputElement; "calcite-input-date-picker": HTMLCalciteInputDatePickerElement; "calcite-input-message": HTMLCalciteInputMessageElement; "calcite-input-time-picker": HTMLCalciteInputTimePickerElement; "calcite-label": HTMLCalciteLabelElement; "calcite-link": HTMLCalciteLinkElement; "calcite-list": HTMLCalciteListElement; "calcite-list-item": HTMLCalciteListItemElement; "calcite-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-time-picker": HTMLCalciteTimePickerElement; "calcite-tip": HTMLCalciteTipElement; "calcite-tip-group": HTMLCalciteTipGroupElement; "calcite-tip-manager": HTMLCalciteTipManagerElement; "calcite-tooltip": HTMLCalciteTooltipElement; "calcite-tooltip-manager": HTMLCalciteTooltipManagerElement; "calcite-tree": HTMLCalciteTreeElement; "calcite-tree-item": HTMLCalciteTreeItemElement; "calcite-value-list": HTMLCalciteValueListElement; "calcite-value-list-item": HTMLCalciteValueListItemElement; } } declare namespace LocalJSX { interface CalciteAccordion { /** * specify the appearance - default (containing border), or minimal (no containing border), defaults to default */ "appearance"?: AccordionAppearance; /** * specify the placement of the icon in the header, defaults to end */ "iconPosition"?: Position; /** * specify the type of the icon in the header, defaults to chevron */ "iconType"?: "chevron" | "caret" | "plus-minus"; /** * specify the scale of accordion, defaults to m */ "scale"?: Scale; /** * specify the selection mode - multi (allow any number of open items), single (allow one open item), or single-persist (allow and require one open item), defaults to multi */ "selectionMode"?: "multi" | "single" | "single-persist"; } interface CalciteAccordionItem { "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; /** * Indicates the alignment when text-enabled is false. */ "alignment"?: Alignment; /** * 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; /** * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Emitted when the action has been clicked. */ "onCalciteActionClick"?: (event: CustomEvent) => void; /** * Specifies the size of the action. */ "scale"?: Scale; /** * Text that accompanies the action icon. */ "text": string; /** * Indicates whether the text is displayed. */ "textEnabled"?: boolean; } interface CalciteActionBar { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled"?: boolean; /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Emitted when expanded has been toggled. */ "onCalciteActionBarToggle"?: (event: CustomEvent) => void; /** * Disables automatically overflowing actions that won't fit into menus. */ "overflowActionsDisabled"?: boolean; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; } interface CalciteActionGroup { /** * Indicates number of columns. */ "columns"?: Columns; /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Text string for the actions menu. */ "intlMore"?: string; /** * Indicates the horizontal, vertical, or grid layout of the component. */ "layout"?: Layout; /** * Opens the action menu. */ "menuOpen"?: boolean; } interface CalciteActionMenu { /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Text string for the actions menu. */ "label": string; /** * Emitted when the open property has changed. */ "onCalciteActionMenuOpenChange"?: (event: CustomEvent) => void; /** * Opens the action menu. */ "open"?: boolean; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement"?: PopperPlacement; /** * Specifies the size of the action. */ "scale"?: Scale; } interface CalciteActionPad { /** * When set to true, the expand-toggling behavior will be disabled. */ "expandDisabled"?: boolean; /** * Indicates whether widget is expanded. */ "expanded"?: boolean; /** * Updates the label of the collapse icon when the component is expanded. */ "intlCollapse"?: string; /** * Updates the label of the expand icon when the component is not expanded. */ "intlExpand"?: string; /** * Indicates the horizontal or vertical layout of the component. */ "layout"?: Layout; /** * Emitted when expanded has been toggled. */ "onCalciteActionPadToggle"?: (event: CustomEvent) => void; /** * Arranges the component depending on the elements 'dir' property. */ "position"?: Position; } 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; } interface CalciteAvatar { /** * full name of the user */ "fullName"?: string; /** * specify the scale of the avatar, defaults to m */ "scale"?: Scale; /** * src to an image (remember to add a token if the user is private) */ "thumbnail"?: string; /** * unique id for user */ "userId"?: string; /** * user name */ "username"?: string; } interface CalciteBlock { /** * When true, this block will be collapsible. */ "collapsible"?: boolean; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * When true, displays a drag handle in the header. */ "dragHandle"?: boolean; /** * Block heading. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * string to override English loading text */ "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 status. Updates or adds icon to show related icon and color. */ "status"?: Status; /** * Block summary. */ "summary"?: string; } interface CalciteBlockSection { /** * Tooltip used for the toggle when expanded. */ "intlCollapse"?: string; /** * Tooltip used for the toggle when collapsed. */ "intlExpand"?: string; /** * Emitted when the header has been clicked. */ "onCalciteBlockSectionToggle"?: (event: CustomEvent) => void; /** * When true, the block's section content will be displayed. */ "open"?: boolean; /** * BlockSection status. Adds indicator to show valid or invalid status. */ "status"?: Status; /** * Text displayed in the button. */ "text"?: string; /** * This property determines the look of the section toggle. If the value is "switch", a toggle-switch will be displayed. If the value is "button", a clickable header is displayed. * @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; /** * Applies to the aria-label attribute on the button or hyperlink */ "label"?: string; /** * optionally add a calcite-loader component to the button, disabling interaction. */ "loading"?: boolean; /** * The name attribute to apply to the button */ "name"?: string; /** * The rel attribute to apply to the hyperlink */ "rel"?: string; /** * optionally add a round style to the button */ "round"?: boolean; /** * specify the scale of the button, defaults to m */ "scale"?: Scale; /** * is the button a child of a calcite-split-button */ "splitChild"?: "primary" | "secondary" | false; /** * The target attribute to apply to the hyperlink */ "target"?: string; /** * The type attribute to apply to the button */ "type"?: string; /** * specify the width of the button, defaults to auto */ "width"?: Width; } interface CalciteCard { /** * string to override English deselect text for checkbox when selectable is true */ "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; } interface CalciteCheckbox { /** * The checked state of the checkbox. */ "checked"?: boolean; /** * True if the checkbox is disabled */ "disabled"?: boolean; /** * The id attribute of the checkbox. When omitted, a globally unique identifier is used. */ "guid"?: string; /** * The hovered state of the checkbox. * @private */ "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; /** * specify the scale of the checkbox, defaults to m */ "scale"?: Scale; /** * The value of the checkbox input */ "value"?: any; } interface CalciteChip { /** * specify the appearance style of the button, defaults to solid. */ "appearance"?: Extract<"solid" | "clear", Appearance>; /** * specify the color of the button, defaults to blue */ "color"?: ChipColor; /** * Aria label for the "x" button */ "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; "value": any; } interface CalciteColorPicker { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty"?: boolean; /** * specify the appearance - default (containing border), or minimal (no containing border) */ "appearance"?: ColorAppearance; /** * 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; /** * Fires when the color value has changed. */ "onCalciteColorPickerChange"?: (event: CustomEvent) => void; /** * The scale of the color picker. */ "scale"?: Scale; /** * Storage ID for colors. */ "storageId"?: string; /** * The color value. This value can be either a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string} a RGB, HSL or HSV object. The type will be preserved as the color is updated. */ "value"?: ColorValue | null; } interface CalciteColorPickerHexInput { /** * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty. */ "allowEmpty"?: boolean; /** * Label used for the hex input. */ "intlHex"?: string; /** * Label used for the hex input when there is no color selected. */ "intlNoColor"?: string; /** * Emitted when the hex value changes. */ "onCalciteColorPickerHexInputChange"?: (event: CustomEvent) => void; /** * The component's scale. */ "scale"?: Scale; /** * The hex value. */ "value"?: string; } interface CalciteColorPickerSwatch { /** * Used to display whether the swatch is active or not. */ "active"?: boolean; /** * The color value. * @see https ://developer.mozilla.org/en-US/docs/Web/CSS/color_value */ "color"?: string; /** * The component scale. */ "scale"?: Scale; } interface CalciteCombobox { /** * 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; /** * Called when a selected item in the combobox is dismissed via its chip * */ "onCalciteComboboxChipDismiss"?: (event: CustomEvent) => void; /** * Called when the user has entered text to filter the options list */ "onCalciteComboboxFilterChange"?: (event: CustomEvent<{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }>) => void; /** * Called when the selected items set changes */ "onCalciteLookupChange"?: (event: CustomEvent) => void; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Placeholder text for input */ "placeholder"?: string; /** * Specify the scale of the combobox, defaults to m */ "scale"?: Scale; /** * specify the selection mode - multi: allow any number of selected items (default) - single: only one selection) - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips */ "selectionMode"?: ComboboxSelectionMode; } interface CalciteComboboxItem { /** * True when item is highlighted either from keyboard or mouse hover */ "active"?: boolean; /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors"?: ComboboxChildElement[]; /** * Don't filter this item based on the search text */ "constant"?: boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled"?: boolean; /** * Unique identifier, used for accessibility */ "guid"?: string; /** * Custom icon to display both in combobox chips and next to combobox item text */ "icon"?: string; /** * Emitted whenever the item is selected or unselected. */ "onCalciteComboboxItemChange"?: (event: CustomEvent) => void; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected"?: boolean; /** * The main label for this item. */ "textLabel": string; /** * The item's associated value */ "value": any; } interface CalciteComboboxItemGroup { /** * Parent and grandparent combobox items, this is set internally for use from combobox */ "ancestors"?: ComboboxChildElement[]; /** * Title of the group */ "label": string; } interface CalciteDatePicker { /** * Active range */ "activeRange"?: "start" | "end"; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * 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; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * Trigger calcite date change when a user changes the date. */ "onCalciteDatePickerChange"?: (event: CustomEvent) => void; /** * Trigger calcite date change when a user changes the date range. */ "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 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 selects the date. */ "onCalciteDatePickerSelect"?: (event: CustomEvent) => void; /** * specify the scale of the date picker */ "scale"?: Scale; /** * Already selected date. */ "selectedDate"?: Date; /** * Start date currently active. */ "startDate"?: Date; } interface CalciteDatePickerMonthHeader { /** * Focused date with indicator (will become selected date if user proceeds) */ "activeDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Localized string for next month. */ "intlNextMonth"?: string; /** * Localized string for previous month. */ "intlPrevMonth"?: string; /** * 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; /** * 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; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the dropdown will be positioned relative to the button. */ "placement"?: DropdownPlacement; /** * specify the scale of dropdown, defaults to m */ "scale"?: Scale; /** * **read-only** The currently selected items * @readonly */ "selectedItems"?: HTMLCalciteDropdownItemElement[]; /** * specify whether the dropdown is opened by hover or click of a trigger element */ "type"?: "hover" | "click"; /** * specify the width of dropdown, defaults to m */ "width"?: Scale; } interface CalciteDropdownGroup { /** * optionally set a group title for display */ "groupTitle"?: string; /** * Specifies the size of the action. */ "scale"?: Scale; /** * specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item), none (no active items), defaults to single */ "selectionMode"?: SelectionMode; } interface CalciteDropdownItem { "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; } interface CalciteFab { /** * Used to set the button's appearance. Default is outline. */ "appearance"?: Extract<"solid" | "outline", Appearance>; /** * Used to set the button's color. Default is light. */ "color"?: ButtonColor; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. */ "icon"?: string; /** * Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop. */ "label"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Specifies the size of the fab. */ "scale"?: Scale; /** * Text that accompanies the FAB icon. */ "text"?: string; /** * Indicates whether the text is displayed. */ "textEnabled"?: boolean; } interface CalciteFilter { /** * 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[]; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * 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; /** * This event fires when the filter text changes. */ "onCalciteFilterChange"?: (event: CustomEvent) => void; /** * Placeholder text for the input element's placeholder attribute */ "placeholder"?: string; } interface CalciteFlow { } 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 { /** * Emitted when the the handle is activated and the up or down arrow key is pressed. */ "onCalciteHandleNudge"?: (event: CustomEvent) => void; /** * Value for the button title attribute */ "textTitle"?: string; } interface CalciteIcon { /** * When true, the icon will be flipped when the element direction is 'rtl'. */ "flipRtl"?: boolean; /** * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/. */ "icon"?: string; /** * Icon scale. */ "scale"?: Scale; /** * The icon label. It is recommended to set this value if your icon is semantic. */ "textLabel"?: string; } interface CalciteInlineEditable { /** * when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */ "afterConfirm"?: () => Promise; /** * specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */ "controls"?: boolean; /** * specify whether editing can be enabled */ "disabled"?: boolean; /** * specify whether the wrapped input element is editable, defaults to false */ "editingEnabled"?: boolean; /** * specify text to be user for the cancel editing button's aria-label, defaults to `Cancel` */ "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; } interface CalciteInput { /** * specify the alignment of the value of the input */ "alignment"?: Position; /** * should the input autofocus */ "autofocus"?: boolean; /** * optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea" */ "clearable"?: boolean; /** * is the input disabled */ "disabled"?: boolean; /** * for number values, displays the locale's group separator */ "groupSeparator"?: boolean; /** * when 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; /** * BCP 47 language tag for desired language and country format */ "locale"?: string; /** * input max */ "max"?: number; /** * Maximum length of the input value */ "maxLength"?: number; /** * Maximum length of text input. * @deprecated use maxLength instead */ "maxlength"?: number; /** * input min */ "min"?: number; /** * Minimum length of the text input */ "minLength"?: number; /** * The name of the input */ "name"?: string; /** * specify the placement of the number buttons */ "numberButtonType"?: InputPlacement; /** * This event fires each time a new value is typed. */ "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 | "any"; /** * optionally add suffix * */ "suffixText"?: string; /** * specify the input type Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time` */ "type"?: | "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week"; /** * input value */ "value"?: string; } interface CalciteInputDatePicker { /** * Expand or collapse when calendar does not have input */ "active"?: boolean; /** * Selected end date */ "end"?: string; /** * Selected end date as full date object */ "endAsDate"?: Date; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * 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; /** * Latest allowed date as full date object */ "maxAsDate"?: Date; /** * Earliest allowed date ("yyyy-mm-dd") */ "min"?: string; /** * Earliest allowed date as full date object */ "minAsDate"?: Date; /** * Trigger calcite date change when a user changes the date. */ "onCalciteDatePickerChange"?: (event: CustomEvent) => void; /** * Trigger calcite date change when a user changes the date range. */ "onCalciteDatePickerRangeChange"?: (event: CustomEvent) => void; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */ "proximitySelectionDisabled"?: boolean; /** * Range mode activation */ "range"?: boolean; /** * specify the scale of the date picker */ "scale"?: "s" | "m" | "l"; /** * Selected start date */ "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 appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) */ "type"?: InputMessageType; } interface CalciteInputTimePicker { /** * The active state of the time input */ "active"?: boolean; /** * The disabled state of the time input */ "disabled"?: boolean; /** * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */ "hourDisplayFormat"?: HourDisplayFormat; /** * aria-label for the hour input */ "intlHour"?: string; /** * aria-label for the hour down button */ "intlHourDown"?: string; /** * aria-label for the hour up button */ "intlHourUp"?: string; /** * aria-label for the meridiem (am/pm) input */ "intlMeridiem"?: string; /** * aria-label for the meridiem (am/pm) down button */ "intlMeridiemDown"?: string; /** * aria-label for the meridiem (am/pm) up button */ "intlMeridiemUp"?: string; /** * aria-label for the minute input */ "intlMinute"?: string; /** * aria-label for the minute down button */ "intlMinuteDown"?: string; /** * aria-label for the minute up button */ "intlMinuteUp"?: string; /** * aria-label for the second input */ "intlSecond"?: string; /** * aria-label for the second down button */ "intlSecondDown"?: string; /** * aria-label for the second up button */ "intlSecondUp"?: string; /** * The name of the time input */ "name"?: string; /** * Fires when the time value is changed as a result of user input. */ "onCalciteInputTimePickerChange"?: (event: CustomEvent) => void; /** * The scale (size) of the time input */ "scale"?: Scale; /** * number that specifies the granularity that the value must adhere to */ "step"?: number; /** * The selected time */ "value"?: string; } interface CalciteLabel { /** * specify the text alignment of the label */ "alignment"?: Alignment; /** * eliminates any space around the label */ "disableSpacing"?: boolean; /** * is the label disabled */ "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; } 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; } interface CalciteList { } interface CalciteListItem { /** * An optional description for this item. This will appear below the label text. */ "description"?: string; /** * When true, disabled prevents interaction. */ "disabled"?: boolean; /** * @todo The label of the list item. */ "label"?: string; /** * When true, prevents the content of the list item from user interaction. */ "nonInteractive"?: boolean; } interface CalciteLoader { /** * Show the loader */ "active"?: boolean; /** * Inline loaders are smaller and will appear to the left of the text */ "inline"?: boolean; /** * Accessible name for the component */ "label": string; /** * Turn off spacing around the loader */ "noPadding"?: boolean; /** * Speficy the scale of the loader. Defaults to "m" */ "scale"?: Scale; /** * Text which should appear under the loading indicator (optional) */ "text"?: string; /** * Use indeterminate if finding actual progress value is impossible */ "type"?: "indeterminate" | "determinate"; /** * Percent complete of 100, only valid for determinate indicators */ "value"?: number; } interface CalciteModal { /** * Add the active attribute to open the modal */ "active"?: boolean; /** * Background color of modal content */ "backgroundColor"?: ModalBackgroundColor; /** * Optionally pass a function to run before close */ "beforeClose"?: (el: HTMLElement) => Promise; /** * Adds a color bar at the top for visual impact, Use color to add importance to destructive/workflow dialogs. */ "color"?: "red" | "blue"; /** * Disables the display a close button within the Modal */ "disableCloseButton"?: boolean; /** * Flag to disable the default close on escape behavior */ "disableEscape"?: boolean; /** * Disables the closing of the Modal when clicked outside. */ "disableOutsideClose"?: boolean; /** * Prevent the modal from taking up the entire screen on mobile */ "docked"?: boolean; /** * Specify an element to focus when the modal is first opened */ "firstFocus"?: HTMLElement; /** * Set the modal to always be fullscreen (overrides width) */ "fullscreen"?: boolean; /** * Aria label for the close button */ "intlClose"?: string; /** * Turn off spacing around the content area slot */ "noPadding"?: boolean; /** * Fired when the modal 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; /** * 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; /** * 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. */ "onCalcitePaginationChange"?: (event: CustomEvent) => void; /** * Emitted whenever the selected page changes. * @deprecated use calcitePaginationChange instead */ "onCalcitePaginationUpdate"?: (event: CustomEvent) => void; /** * The scale of the pagination */ "scale"?: Scale; /** * index of item that should begin the page */ "start"?: number; /** * title of the next button */ "textLabelNext"?: string; /** * title of the previous button */ "textLabelPrevious"?: string; /** * total number of items */ "total"?: number; } interface CalcitePanel { /** * When provided, this method will be called before it is removed from the parent flow. */ "beforeBack"?: () => Promise; /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * Hides the panel. */ "dismissed"?: boolean; /** * Displays a close button in the trailing side of the header. */ "dismissible"?: boolean; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Specifies the 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; /** * 'Options' text string for the actions menu. */ "intlOptions"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Opens the action menu. */ "menuOpen"?: boolean; /** * Emitted when the back button has been clicked. */ "onCalcitePanelBackClick"?: (event: CustomEvent) => void; /** * Emitted when the close button has been clicked. */ "onCalcitePanelDismissedChange"?: (event: CustomEvent) => void; /** * Emitted when the content has been scrolled. */ "onCalcitePanelScroll"?: (event: CustomEvent) => void; /** * Shows a back button in the header. */ "showBackButton"?: boolean; /** * Summary text. A description displayed underneath the heading. */ "summary"?: string; /** * This sets width of the panel. */ "widthScale"?: Scale; } interface CalcitePickList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * When true, an input appears at the top of the list that can be used by end users to filter items in the list. */ "filterEnabled"?: boolean; /** * Placeholder text for the filter input field. */ "filterPlaceholder"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Multiple works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple"?: boolean; /** * Emitted when any of the item selections have changed. */ "onCalciteListChange"?: (event: CustomEvent) => void; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus"?: boolean; } interface CalcitePickListGroup { /** * The title used for all nested `calcite-pick-list` rows. */ "groupTitle"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; } interface CalcitePickListItem { /** * An optional description for this item. This will appear below the label text. */ "description"?: string; /** * When false, the item cannot be deselected by user interaction. */ "disableDeselect"?: boolean; /** * When true, the item cannot be clicked and is visually muted. */ "disabled"?: boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, 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. */ "onCalciteListItemChange"?: (event: CustomEvent<{ item: HTMLCalcitePickListItemElement; value: any; selected: boolean; shiftPressed: boolean; }>) => void; /** * Emitted whenever the remove button is pressed. */ "onCalciteListItemRemove"?: (event: CustomEvent) => void; /** * Set this to true to display a remove action that removes the item from the list. */ "removable"?: boolean; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected"?: boolean; /** * The item's associated value. */ "value": any; } interface CalcitePopover { /** * Display a close button within the Popover. * @deprecated use dismissible instead. */ "closeButton"?: boolean; /** * Prevents flipping the popover's placement when it starts to overlap its reference element. */ "disableFlip"?: boolean; /** * Removes the caret pointer. */ "disablePointer"?: boolean; /** * Display a close button within the Popover. */ "dismissible"?: boolean; /** * Defines the available placements that can be used when a flip occurs. */ "flipPlacements"?: Placement[]; /** * Heading text. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Text for close button. */ "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; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement"?: PopperPlacement; /** * Reference HTMLElement used to position this component according to the placement property. */ "referenceElement": HTMLElement | string; } interface CalcitePopoverManager { /** * Automatically closes any currently open popovers when clicking outside of a popover. */ "autoClose"?: boolean; /** * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover. */ "selector"?: string; } interface CalciteProgress { /** * For indeterminate progress bars, reverse the animation direction */ "reversed"?: boolean; /** * Text label for the progress indicator */ "text"?: string; /** * Use indeterminate if finding actual progress value is impossible */ "type"?: "indeterminate" | "determinate"; /** * Fraction completed, in the range of 0 - 1.0 */ "value"?: number; } interface CalciteRadio { /** * The checked state of the radio. */ "checked"?: boolean; /** * The disabled state of the radio. */ "disabled"?: boolean; /** * The focused state of the radio. * @private */ "focused"?: boolean; /** * The radio's hidden status. */ "hidden"?: boolean; /** * The hovered state of the radio. * @private */ "hovered"?: boolean; /** * The scale (size) of the radio. */ "scale"?: Scale; } 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. * @private */ "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. * @private */ "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; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required"?: boolean; /** * The scale (size) of the radio button. scale is passed as a property automatically from calcite-radio-button-group. */ "scale"?: Scale; /** * The value of the radio button. */ "value": any; } interface CalciteRadioButtonGroup { /** * The disabled state of the radio button group. */ "disabled"?: boolean; /** * The radio button group's hidden status. When a radio button group is hidden none of its options are focusable or checkable. */ "hidden"?: boolean; /** * The layout direction of the radio buttons in a group. */ "layout"?: Layout; /** * The name of the radio button group. name must be unique to other radio button group instances. */ "name": string; /** * @todo doc */ "onCalciteRadioButtonGroupChange"?: (event: CustomEvent) => void; /** * Requires that a value is selected for the radio button group before the parent form will submit. */ "required"?: boolean; /** * The scale (size) of the radio button group. */ "scale"?: Scale; } interface CalciteRadioGroup { /** * specify the appearance style of the radio group, defaults to solid. */ "appearance"?: RadioAppearance; /** * is the radio group disabled */ "disabled"?: boolean; /** * specify the layout of the radio group, defaults to horizontal */ "layout"?: Layout; /** * The group's name. Gets submitted with the form. */ "name"?: string; /** * Fired when the selected option changes, event detail is the new value */ "onCalciteRadioGroupChange"?: (event: CustomEvent) => void; /** * The scale of the radio group */ "scale"?: Scale; /** * The group's selected item. */ "selectedItem"?: HTMLCalciteRadioGroupItemElement; /** * specify the width of the group, defaults to auto */ "width"?: Extract<"auto" | "full", Width>; } interface CalciteRadioGroupItem { /** * Indicates whether the control is checked. */ "checked"?: boolean; /** * optionally pass an icon to display - accepts Calcite UI icon names */ "icon"?: string; /** * flip the icon in rtl */ "iconFlipRtl"?: boolean; /** * optionally used with icon, select where to position the icon */ "iconPosition"?: Position; /** * The control's value. */ "value"?: any | null; } interface CalciteRating { /** * optionally pass a cumulative average rating to display */ "average"?: number; /** * optionally pass a number of previous ratings to display */ "count"?: number; /** * is the rating component in a selectable mode */ "disabled"?: boolean; /** * Localized string for "Rating" (used for aria label) */ "intlRating"?: string; /** * Localized string for labelling each star, `${num}` in the string will be replaced by the number */ "intlStars"?: string; /** * Fires when the rating value has changed. */ "onCalciteRatingChange"?: (event: CustomEvent<{ value: number }>) => void; /** * is the rating component in a selectable mode */ "readOnly"?: boolean; /** * specify the scale of the component, defaults to m */ "scale"?: Scale; /** * Show average and count data summary chip (if available) */ "showChip"?: boolean; /** * the value of the rating component */ "value"?: number; } interface CalciteScrim { /** * string to override English loading text */ "intlLoading"?: string; /** * Determines if the component will have the loader overlay. Otherwise, will render opaque disabled state. */ "loading"?: boolean; } interface CalciteSelect { /** * When true, it prevents the option from being selected. */ "disabled"?: boolean; /** * The component's label. This is required for accessibility purposes. */ "label": string; /** * 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 width. */ "width"?: Width; } interface CalciteShell { /** * Positions the center content behind any calcite-shell-panels. */ "contentBehind"?: boolean; } interface CalciteShellCenterRow { /** * This property makes the content area appear like a "floating" panel. */ "detached"?: boolean; /** * Specifies the 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. */ "onCalciteSliderChange"?: (event: CustomEvent) => void; /** * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. * @deprecated use calciteSliderChange instead */ "onCalciteSliderUpdate"?: (event: CustomEvent) => void; /** * Interval to move on page up/page down keys */ "pageStep"?: number; /** * Use finer point for handles */ "precise"?: boolean; /** * When true, enables snap selection along the step interval */ "snap"?: boolean; /** * Interval to move on up/down keys */ "step"?: number; /** * Show tick marks on the number line at provided interval */ "ticks"?: number; /** * Currently selected number (if single select) */ "value"?: null | number; } interface CalciteSortableList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * Specifies which items inside the element should be draggable. */ "dragSelector"?: string; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * The selector for the handle elements. */ "handleSelector"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Emitted when the order of the list has changed. */ "onCalciteListOrderChange"?: (event: CustomEvent) => void; } interface CalciteSplitButton { /** * specify the appearance style of the button, defaults to solid. */ "appearance"?: ButtonAppearance; /** * specify the color of the control, defaults to blue */ "color"?: ButtonColor; /** * is the control disabled */ "disabled"?: boolean; /** * specify the icon used for the dropdown menu, defaults to chevron */ "dropdownIconType"?: DropdownIconType; /** * aria label for overflow button */ "dropdownLabel"?: string; /** * optionally add a calcite-loader component to the control, disabling interaction. with the primary button */ "loading"?: boolean; /** * fired when the primary button is clicked */ "onCalciteSplitButtonPrimaryClick"?: (event: CustomEvent) => void; /** * fired when the secondary button is clicked */ "onCalciteSplitButtonSecondaryClick"?: (event: CustomEvent) => void; /** * optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names */ "primaryIconEnd"?: string; /** * flip the primary icon(s) in rtl */ "primaryIconFlipRtl"?: FlipContext; /** * optionally pass an icon to display at the start of the primary button - accepts Calcite UI icon names */ "primaryIconStart"?: string; /** * optionally pass an aria-label for the primary button */ "primaryLabel"?: string; /** * text for primary action button */ "primaryText"?: string; /** * specify the scale of the control, defaults to m */ "scale"?: Scale; /** * specify the width of the button, defaults to auto */ "width"?: Width; } interface CalciteStepper { /** * optionally display a status icon next to the step title */ "icon"?: boolean; /** * specify the layout of stepper, defaults to horizontal */ "layout"?: Layout; /** * optionally display the number next to the step title */ "numbered"?: boolean; /** * specify the scale of stepper, defaults to m */ "scale"?: Scale; } interface CalciteStepperItem { /** * is the step active */ "active"?: boolean; /** * has the step been completed */ "complete"?: boolean; /** * is the step disabled and not navigable to by a user */ "disabled"?: boolean; /** * does the step contain an error that needs to be resolved by the user */ "error"?: boolean; /** * pass a title for the stepper item */ "itemSubtitle"?: string; /** * pass a title for the stepper item */ "itemTitle"?: string; } interface CalciteSwitch { /** * True if the switch is disabled */ "disabled"?: boolean; /** * The name of the switch input */ "name"?: string; /** * Fires when the switched value has changed. */ "onCalciteSwitchChange"?: (event: CustomEvent) => void; /** * The scale of the switch */ "scale"?: Scale; /** * True if the switch is initially on */ "switched"?: boolean; /** * The value of the switch input */ "value"?: any; } interface CalciteTab { /** * Show this tab */ "active"?: boolean; /** * Optionally include a unique name for this tab, be sure to also set this name on the associated title. */ "tab"?: string; } interface CalciteTabNav { /** * Emitted when the active tab changes */ "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 { /** * Optionally enable tabs to appear like a folder-style menu when its layout is "inline" */ "bordered"?: boolean; /** * Align tab titles to the edge or fully justify them across the tab nav ("center") */ "layout"?: TabLayout; /** * Display the tabs above (default) or below the tab content */ "position"?: TabPosition; /** * Specify the scale of the tabs component, defaults to m */ "scale"?: Scale; } interface CalciteTile { /** * The active state of the tile. */ "active"?: boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * When true, prevents interaction. */ "disabled"?: boolean; /** * The embed mode of the tile. When true, renders without a border and padding for use by other components. */ "embed"?: boolean; /** * The focused state of the tile. * @private */ "focused"?: boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile. */ "hidden"?: boolean; /** * The (optional) url for the tile. (Only applies when embed is set to false) */ "href"?: string; /** * The icon that appears at the top of the tile. */ "icon"?: string; } interface CalciteTileSelect { /** * The checked state of the tile select. */ "checked"?: boolean; /** * The description text that appears beneath the heading of the tile. */ "description"?: string; /** * The disabled state of the tile select. */ "disabled"?: boolean; /** * The heading text that appears between the icon and description of the tile. */ "heading"?: string; /** * The hidden state of the tile select. */ "hidden"?: boolean; /** * The icon that appears at the top of the tile. */ "icon"?: string; /** * The side of the tile that the radio or checkbox appears on when inputEnabled is true. */ "inputAlignment"?: Extract<"end" | "start", Alignment>; /** * Display an interactive radio or checkbox. */ "inputEnabled"?: boolean; /** * The name of the tile select. This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */ "name"?: string; /** * The selection mode of the tile select: radio (single) or checkbox (multiple). */ "type"?: TileSelectType; /** * The value of the tile select. This value will appear in form submissions when this tile select is checked. */ "value"?: any; /** * specify the width of the tile, defaults to auto */ "width"?: Extract<"auto" | "full", Width>; } interface CalciteTileSelectGroup { /** * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */ "layout"?: TileSelectGroupLayout; } interface CalciteTimePicker { /** * The hour value (24-hour format) */ "hour"?: string; /** * Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */ "hourDisplayFormat"?: HourDisplayFormat; /** * aria-label for the hour input */ "intlHour"?: string; /** * aria-label for the hour down button */ "intlHourDown"?: string; /** * aria-label for the hour up button */ "intlHourUp"?: string; /** * aria-label for the meridiem (am/pm) input */ "intlMeridiem"?: string; /** * aria-label for the meridiem (am/pm) down button */ "intlMeridiemDown"?: string; /** * aria-label for the meridiem (am/pm) up button */ "intlMeridiemUp"?: string; /** * aria-label for the minute input */ "intlMinute"?: string; /** * aria-label for the minute down button */ "intlMinuteDown"?: string; /** * aria-label for the minute up button */ "intlMinuteUp"?: string; /** * aria-label for the second input */ "intlSecond"?: string; /** * aria-label for the second down button */ "intlSecondDown"?: string; /** * aria-label for the second up button */ "intlSecondUp"?: string; /** * The minute value */ "minute"?: string; /** * The scale (size) of the time picker */ "scale"?: Scale; /** * The second value */ "second"?: string; /** * number that specifies the granularity that the value must adhere to */ "step"?: number; } interface CalciteTip { /** * No longer displays the tip. */ "dismissed"?: boolean; /** * The heading of the tip. */ "heading"?: string; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * Indicates whether the tip can be dismissed. */ "nonDismissible"?: boolean; /** * Emitted when the component has been dismissed. */ "onCalciteTipDismiss"?: (event: CustomEvent) => void; /** * The selected state of the tip if it is being used inside a `calcite-tip-manager`. */ "selected"?: boolean; } interface CalciteTipGroup { /** * The title used for all nested tips. */ "groupTitle"?: string; } interface CalciteTipManager { /** * Alternate text for closing the `calcite-tip-manager`. */ "closed"?: boolean; /** * Number at which section headings should start for this component. */ "headingLevel"?: HeadingLevel; /** * Alternate text for closing the tip. */ "intlClose"?: string; /** * The default group title for the `calcite-tip-manager`. */ "intlDefaultTitle"?: string; /** * Alternate text for navigating to the next tip. */ "intlNext"?: string; /** * Label that appears on hover of pagination icon. */ "intlPaginationLabel"?: string; /** * Alternate text for navigating to the previous tip. */ "intlPrevious"?: string; /** * Emitted when the `calcite-tip-manager` has been toggled open or closed. */ "onCalciteTipManagerToggle"?: (event: CustomEvent) => void; } interface CalciteTooltip { /** * Accessible name for the component */ "label": string; /** * Offset the position of the 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; /** * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */ "overlayPositioning"?: OverlayPositioning; /** * Determines where the component will be positioned relative to the referenceElement. */ "placement"?: PopperPlacement; /** * Reference HTMLElement used to position this component. */ "referenceElement"?: HTMLElement | string; } interface CalciteTooltipManager { /** * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip. */ "selector"?: string; } interface CalciteTree { /** * Display input */ "inputEnabled"?: boolean; /** * Display indentation guide lines */ "lines"?: boolean; /** * Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property. */ "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; } interface CalciteTreeItem { /** * True if the item is in an expanded state */ "expanded"?: boolean; /** * Is the item currently selected */ "selected"?: boolean; } interface CalciteValueList { /** * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ "disabled"?: boolean; /** * When true, the items will be sortable via drag and drop. */ "dragEnabled"?: boolean; /** * When true, an input appears at the top of the list that can be used by end users to filter items in the list. */ "filterEnabled"?: boolean; /** * Placeholder text for the filter input field. */ "filterPlaceholder"?: string; /** * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. */ "group"?: string; /** * When true, content is waiting to be loaded. This state shows a busy indicator. */ "loading"?: boolean; /** * Multiple Works similar to standard radio buttons and checkboxes. When true, a user can select multiple items at a time. When false, only a single item can be selected at a time and selecting a new item will deselect any other selected items. */ "multiple"?: boolean; /** * Emitted when any of the item selections have changed. */ "onCalciteListChange"?: (event: CustomEvent) => void; /** * Emitted when the order of the list has changed. */ "onCalciteListOrderChange"?: (event: CustomEvent) => void; /** * When true and single-selection is enabled, the selection will change when navigating items via the keyboard. */ "selectionFollowsFocus"?: boolean; } interface CalciteValueListItem { /** * An optional description for this item. Will appear below the label text. */ "description"?: string; /** * When true, the item cannot be clicked and is visually muted */ "disabled"?: boolean; /** * Determines the icon SVG symbol that will be shown. Options are circle, square, 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. */ "onCalciteListItemRemove"?: (event: CustomEvent) => void; /** * Set this to true to display a remove action that removes the item from the list. */ "removable"?: boolean; /** * Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */ "selected"?: boolean; /** * The item's associated value. */ "value": any; } interface IntrinsicElements { "calcite-accordion": CalciteAccordion; "calcite-accordion-item": CalciteAccordionItem; "calcite-action": CalciteAction; "calcite-action-bar": CalciteActionBar; "calcite-action-group": CalciteActionGroup; "calcite-action-menu": CalciteActionMenu; "calcite-action-pad": CalciteActionPad; "calcite-alert": CalciteAlert; "calcite-avatar": CalciteAvatar; "calcite-block": CalciteBlock; "calcite-block-section": CalciteBlockSection; "calcite-button": CalciteButton; "calcite-card": CalciteCard; "calcite-checkbox": CalciteCheckbox; "calcite-chip": CalciteChip; "calcite-color-picker": CalciteColorPicker; "calcite-color-picker-hex-input": CalciteColorPickerHexInput; "calcite-color-picker-swatch": CalciteColorPickerSwatch; "calcite-combobox": CalciteCombobox; "calcite-combobox-item": CalciteComboboxItem; "calcite-combobox-item-group": CalciteComboboxItemGroup; "calcite-date-picker": CalciteDatePicker; "calcite-date-picker-day": CalciteDatePickerDay; "calcite-date-picker-month": CalciteDatePickerMonth; "calcite-date-picker-month-header": CalciteDatePickerMonthHeader; "calcite-dropdown": CalciteDropdown; "calcite-dropdown-group": CalciteDropdownGroup; "calcite-dropdown-item": CalciteDropdownItem; "calcite-fab": CalciteFab; "calcite-filter": CalciteFilter; "calcite-flow": CalciteFlow; "calcite-graph": CalciteGraph; "calcite-handle": CalciteHandle; "calcite-icon": CalciteIcon; "calcite-inline-editable": CalciteInlineEditable; "calcite-input": CalciteInput; "calcite-input-date-picker": CalciteInputDatePicker; "calcite-input-message": CalciteInputMessage; "calcite-input-time-picker": CalciteInputTimePicker; "calcite-label": CalciteLabel; "calcite-link": CalciteLink; "calcite-list": CalciteList; "calcite-list-item": CalciteListItem; "calcite-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-time-picker": CalciteTimePicker; "calcite-tip": CalciteTip; "calcite-tip-group": CalciteTipGroup; "calcite-tip-manager": CalciteTipManager; "calcite-tooltip": CalciteTooltip; "calcite-tooltip-manager": CalciteTooltipManager; "calcite-tree": CalciteTree; "calcite-tree-item": CalciteTreeItem; "calcite-value-list": CalciteValueList; "calcite-value-list-item": CalciteValueListItem; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "calcite-accordion": LocalJSX.CalciteAccordion & JSXBase.HTMLAttributes; "calcite-accordion-item": LocalJSX.CalciteAccordionItem & JSXBase.HTMLAttributes; "calcite-action": LocalJSX.CalciteAction & JSXBase.HTMLAttributes; "calcite-action-bar": LocalJSX.CalciteActionBar & JSXBase.HTMLAttributes; "calcite-action-group": LocalJSX.CalciteActionGroup & JSXBase.HTMLAttributes; "calcite-action-menu": LocalJSX.CalciteActionMenu & JSXBase.HTMLAttributes; "calcite-action-pad": LocalJSX.CalciteActionPad & JSXBase.HTMLAttributes; "calcite-alert": LocalJSX.CalciteAlert & JSXBase.HTMLAttributes; "calcite-avatar": LocalJSX.CalciteAvatar & JSXBase.HTMLAttributes; "calcite-block": LocalJSX.CalciteBlock & JSXBase.HTMLAttributes; "calcite-block-section": LocalJSX.CalciteBlockSection & JSXBase.HTMLAttributes; "calcite-button": LocalJSX.CalciteButton & JSXBase.HTMLAttributes; "calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes; "calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes; "calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes; "calcite-color-picker": LocalJSX.CalciteColorPicker & JSXBase.HTMLAttributes; "calcite-color-picker-hex-input": LocalJSX.CalciteColorPickerHexInput & JSXBase.HTMLAttributes; "calcite-color-picker-swatch": LocalJSX.CalciteColorPickerSwatch & JSXBase.HTMLAttributes; "calcite-combobox": LocalJSX.CalciteCombobox & JSXBase.HTMLAttributes; "calcite-combobox-item": LocalJSX.CalciteComboboxItem & JSXBase.HTMLAttributes; "calcite-combobox-item-group": LocalJSX.CalciteComboboxItemGroup & JSXBase.HTMLAttributes; "calcite-date-picker": LocalJSX.CalciteDatePicker & JSXBase.HTMLAttributes; "calcite-date-picker-day": LocalJSX.CalciteDatePickerDay & JSXBase.HTMLAttributes; "calcite-date-picker-month": LocalJSX.CalciteDatePickerMonth & JSXBase.HTMLAttributes; "calcite-date-picker-month-header": LocalJSX.CalciteDatePickerMonthHeader & JSXBase.HTMLAttributes; "calcite-dropdown": LocalJSX.CalciteDropdown & JSXBase.HTMLAttributes; "calcite-dropdown-group": LocalJSX.CalciteDropdownGroup & JSXBase.HTMLAttributes; "calcite-dropdown-item": LocalJSX.CalciteDropdownItem & JSXBase.HTMLAttributes; "calcite-fab": LocalJSX.CalciteFab & JSXBase.HTMLAttributes; "calcite-filter": LocalJSX.CalciteFilter & JSXBase.HTMLAttributes; "calcite-flow": LocalJSX.CalciteFlow & JSXBase.HTMLAttributes; "calcite-graph": LocalJSX.CalciteGraph & JSXBase.HTMLAttributes; "calcite-handle": LocalJSX.CalciteHandle & JSXBase.HTMLAttributes; "calcite-icon": LocalJSX.CalciteIcon & JSXBase.HTMLAttributes; "calcite-inline-editable": LocalJSX.CalciteInlineEditable & JSXBase.HTMLAttributes; "calcite-input": LocalJSX.CalciteInput & JSXBase.HTMLAttributes; "calcite-input-date-picker": LocalJSX.CalciteInputDatePicker & JSXBase.HTMLAttributes; "calcite-input-message": LocalJSX.CalciteInputMessage & JSXBase.HTMLAttributes; "calcite-input-time-picker": LocalJSX.CalciteInputTimePicker & JSXBase.HTMLAttributes; "calcite-label": LocalJSX.CalciteLabel & JSXBase.HTMLAttributes; "calcite-link": LocalJSX.CalciteLink & JSXBase.HTMLAttributes; "calcite-list": LocalJSX.CalciteList & JSXBase.HTMLAttributes; "calcite-list-item": LocalJSX.CalciteListItem & JSXBase.HTMLAttributes; "calcite-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-time-picker": LocalJSX.CalciteTimePicker & JSXBase.HTMLAttributes; "calcite-tip": LocalJSX.CalciteTip & JSXBase.HTMLAttributes; "calcite-tip-group": LocalJSX.CalciteTipGroup & JSXBase.HTMLAttributes; "calcite-tip-manager": LocalJSX.CalciteTipManager & JSXBase.HTMLAttributes; "calcite-tooltip": LocalJSX.CalciteTooltip & JSXBase.HTMLAttributes; "calcite-tooltip-manager": LocalJSX.CalciteTooltipManager & JSXBase.HTMLAttributes; "calcite-tree": LocalJSX.CalciteTree & JSXBase.HTMLAttributes; "calcite-tree-item": LocalJSX.CalciteTreeItem & JSXBase.HTMLAttributes; "calcite-value-list": LocalJSX.CalciteValueList & JSXBase.HTMLAttributes; "calcite-value-list-item": LocalJSX.CalciteValueListItem & JSXBase.HTMLAttributes; } } }