@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1,605 lines • 263 kB
TypeScript
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { AccordionAppearance } from "./components/accordion/interfaces";
import { Alignment, Appearance, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces";
import { Placement } from "@popperjs/core";
import { ComputedPlacement, MenuPlacement, OverlayPositioning, PopperPlacement } from "./utils/popper";
import { AlertDuration, AlertPlacement, StatusColor } from "./components/alert/interfaces";
import { HeadingLevel } from "./components/functional/Heading";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
import { ButtonAlignment, ButtonAppearance, ButtonColor, DropdownIconType } from "./components/button/interfaces";
import { ChipColor } from "./components/chip/interfaces";
import { ColorAppearance, ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
import { ComboboxChildElement, ComboboxSelectionMode } from "./components/combobox/interfaces";
import { DateRangeChange } from "./components/date-picker/interfaces";
import { DateLocaleData } from "./components/date-picker/utils";
import { HoverRange } from "./utils/date";
import { SelectionMode } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
import { InputPlacement } from "./components/input/interfaces";
import { ModalBackgroundColor } from "./components/modal/interfaces";
import { PaginationDetail } from "./components/pagination/pagination";
import { ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
import { RadioAppearance } from "./components/radio-group/interfaces";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
import { TabChangeEventDetail } from "./components/tab/interfaces";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
import { TimePart } from "./utils/time";
import { TreeSelectDetail, TreeSelectionMode } from "./components/tree/interfaces";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
export namespace Components {
interface CalciteAccordion {
/**
* specify the appearance - default (containing border), or minimal (no containing border), defaults to default
*/
"appearance": AccordionAppearance;
/**
* specify the placement of the icon in the header, defaults to end
*/
"iconPosition": Position;
/**
* specify the type of the icon in the header, defaults to chevron
*/
"iconType": "chevron" | "caret" | "plus-minus";
/**
* specify the scale of accordion, defaults to m
*/
"scale": Scale;
/**
* specify the selection mode - multi (allow any number of open items), single (allow one open item), or single-persist (allow and require one open item), defaults to multi
*/
"selectionMode": "multi" | "single" | "single-persist";
}
interface CalciteAccordionItem {
/**
* Indicates whether the item is active.
*/
"active": boolean;
/**
* optionally pass an icon to display - accepts Calcite UI icon names
*/
"icon"?: string;
/**
* pass a title for the accordion item
*/
"itemSubtitle"?: string;
/**
* pass a title for the accordion item
*/
"itemTitle"?: string;
}
interface CalciteAction {
/**
* Indicates whether the action is highlighted.
*/
"active": boolean;
/**
* Optionally specify the horizontal alignment of button elements with text content.
*/
"alignment"?: Alignment;
/**
* Specify the appearance style of the action, defaults to solid.
*/
"appearance": Extract<"solid" | "clear", Appearance>;
/**
* Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
*/
"compact": boolean;
/**
* When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
*/
"disabled": boolean;
/**
* The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
*/
"icon"?: string;
/**
* Indicates unread changes.
*/
"indicator": boolean;
/**
* string to override English loading text
* @default "Loading"
*/
"intlLoading"?: string;
/**
* The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.
*/
"label"?: string;
/**
* When true, content is waiting to be loaded. This state shows a busy indicator.
*/
"loading": boolean;
/**
* Specifies the size of the action.
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* Text that accompanies the action icon.
*/
"text": string;
/**
* Indicates whether the text is displayed.
*/
"textEnabled": boolean;
}
interface CalciteActionBar {
/**
* When set to true, the expand-toggling behavior will be disabled.
*/
"expandDisabled": boolean;
/**
* Indicates whether widget is expanded.
*/
"expanded": boolean;
/**
* Updates the label of the collapse icon when the component is expanded.
*/
"intlCollapse"?: string;
/**
* Updates the label of the expand icon when the component is not expanded.
*/
"intlExpand"?: string;
/**
* Overflows actions that won't fit into menus.
*/
"overflowActions": () => Promise<void>;
/**
* Disables automatically overflowing actions that won't fit into menus.
*/
"overflowActionsDisabled": boolean;
/**
* Arranges the component depending on the elements 'dir' property.
*/
"position": Position;
/**
* Specifies the size of the expand action.
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": (focusId?: "expand-toggle") => Promise<void>;
}
interface CalciteActionGroup {
/**
* Indicates number of columns.
*/
"columns"?: Columns;
/**
* Indicates whether widget is expanded.
*/
"expanded": boolean;
/**
* Text string for the actions menu.
*/
"intlMore"?: string;
/**
* Indicates the horizontal, vertical, or grid layout of the component.
*/
"layout": Layout;
/**
* Opens the action menu.
*/
"menuOpen": boolean;
/**
* Specifies the size of the action-menu.
*/
"scale": Scale;
}
interface CalciteActionMenu {
/**
* Indicates whether widget is expanded.
*/
"expanded": boolean;
/**
* Defines the available placements that can be used when a flip occurs.
*/
"flipPlacements"?: Placement[];
/**
* Text string for the actions menu.
*/
"label": string;
/**
* Opens the action menu.
*/
"open": boolean;
/**
* Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
*/
"overlayPositioning": OverlayPositioning;
/**
* Determines where the component will be positioned relative to the referenceElement.
* @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
*/
"placement": PopperPlacement;
/**
* Specifies the size of the menu trigger action.
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
}
interface CalciteActionPad {
/**
* When set to true, the expand-toggling behavior will be disabled.
*/
"expandDisabled": boolean;
/**
* Indicates whether widget is expanded.
*/
"expanded": boolean;
/**
* Updates the label of the collapse icon when the component is expanded.
*/
"intlCollapse"?: string;
/**
* Updates the label of the expand icon when the component is not expanded.
*/
"intlExpand"?: string;
/**
* Indicates the horizontal or vertical layout of the component.
*/
"layout": Layout;
/**
* Arranges the component depending on the elements 'dir' property.
*/
"position": Position;
/**
* Specifies the size of the expand action.
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": (focusId?: "expand-toggle") => Promise<void>;
}
interface CalciteAlert {
/**
* Is the alert currently active or not
*/
"active": boolean;
/**
* Close the alert automatically (recommended for passive, non-blocking alerts)
*/
"autoDismiss": boolean;
/**
* Duration of autoDismiss (only used with `autoDismiss`)
*/
"autoDismissDuration": AlertDuration;
/**
* Color for the alert (will apply to top border and icon)
*/
"color": StatusColor;
/**
* when used as a boolean set to true, show a default recommended icon. You can also pass a calcite-ui-icon name to this prop to display a requested icon
*/
"icon": string | boolean;
/**
* string to override English close text
* @default "Close"
*/
"intlClose": string;
/**
* Accessible name for the component
*/
"label": string;
/**
* specify the placement of the alert
*/
"placement": AlertPlacement;
/**
* specify the scale of the alert, defaults to m
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
}
interface CalciteAvatar {
/**
* full name of the user
*/
"fullName": string;
/**
* specify the scale of the avatar, defaults to m
*/
"scale": Scale;
/**
* src to an image (remember to add a token if the user is private)
*/
"thumbnail": string;
/**
* unique id for user
*/
"userId": string;
/**
* user name
*/
"username": string;
}
interface CalciteBlock {
/**
* When true, this block will be collapsible.
*/
"collapsible": boolean;
/**
* When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
*/
"disabled": boolean;
/**
* When true, displays a drag handle in the header.
*/
"dragHandle": boolean;
/**
* Block heading.
*/
"heading": string;
/**
* Number at which section headings should start for this component.
*/
"headingLevel": HeadingLevel;
/**
* Tooltip used for the toggle when expanded.
*/
"intlCollapse"?: string;
/**
* Tooltip used for the toggle when collapsed.
*/
"intlExpand"?: string;
/**
* string to override English loading text
* @default "Loading"
*/
"intlLoading"?: string;
/**
* Text string used for the actions menu
* @default "Options"
*/
"intlOptions"?: string;
/**
* When true, content is waiting to be loaded. This state shows a busy indicator.
*/
"loading": boolean;
/**
* When true, the block's content will be displayed.
*/
"open": boolean;
/**
* Block status. Updates or adds icon to show related icon and color.
*/
"status"?: Status;
/**
* Block summary.
*/
"summary": string;
}
interface CalciteBlockSection {
/**
* Tooltip used for the toggle when expanded.
*/
"intlCollapse"?: string;
/**
* Tooltip used for the toggle when collapsed.
*/
"intlExpand"?: string;
/**
* When true, the block's section content will be displayed.
*/
"open": boolean;
/**
* BlockSection status. Adds indicator to show valid or invalid status.
*/
"status"?: Status;
/**
* Text displayed in the button.
*/
"text": string;
/**
* This property determines the look of the section toggle. If the value is "switch", a toggle-switch will be displayed. If the value is "button", a clickable header is displayed.
*/
"toggleDisplay": BlockSectionToggleDisplay;
}
interface CalciteButton {
/**
* optionally specify alignment of button elements.
*/
"alignment"?: ButtonAlignment;
/**
* specify the appearance style of the button, defaults to solid.
*/
"appearance": ButtonAppearance;
/**
* specify the color of the button, defaults to blue
*/
"color": ButtonColor;
/**
* is the button disabled
*/
"disabled": boolean;
/**
* The form ID to associate with the component
* @deprecated – this property is no longer needed if placed inside a form.
*/
"form"?: string;
/**
* optionally pass a href - used to determine if the component should render as a button or an anchor
*/
"href"?: string;
/**
* optionally pass an icon to display at the end of a button - accepts calcite ui icon names
*/
"iconEnd"?: string;
/**
* flip the icon(s) in rtl
*/
"iconFlipRtl"?: FlipContext;
/**
* optionally pass an icon to display at the start of a button - accepts calcite ui icon names
*/
"iconStart"?: string;
/**
* string to override English loading text
* @default "Loading"
*/
"intlLoading"?: string;
/**
* Applies to the aria-label attribute on the button or hyperlink
*/
"label"?: string;
/**
* optionally add a calcite-loader component to the button, disabling interaction.
*/
"loading": boolean;
/**
* The name attribute to apply to the button
*/
"name"?: string;
/**
* The rel attribute to apply to the hyperlink
*/
"rel"?: string;
/**
* optionally add a round style to the button
*/
"round": boolean;
/**
* specify the scale of the button, defaults to m
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* is the button a child of a calcite-split-button
*/
"splitChild"?: "primary" | "secondary" | false;
/**
* The target attribute to apply to the hyperlink
*/
"target"?: string;
/**
* The type attribute to apply to the button
*/
"type"?: string;
/**
* specify the width of the button, defaults to auto
*/
"width": Width;
}
interface CalciteCard {
/**
* string to override English deselect text for checkbox when selectable is true
* @default "Deselect"
*/
"intlDeselect": string;
/**
* string to override English loading text
* @default "Loading"
*/
"intlLoading"?: string;
/**
* string to override English select text for checkbox when selectable is true
* @default "Select"
*/
"intlSelect": string;
/**
* When true, the cards content is waiting to be loaded. This state shows a busy indicator.
*/
"loading": boolean;
/**
* Indicates whether the card is selectable.
*/
"selectable": boolean;
/**
* Indicates whether the card is selected.
*/
"selected": boolean;
}
interface CalciteCheckbox {
/**
* The checked state of the checkbox.
*/
"checked": boolean;
/**
* True if the checkbox is disabled
*/
"disabled": boolean;
/**
* The id attribute of the checkbox. When omitted, a globally unique identifier is used.
*/
"guid": string;
/**
* The hovered state of the checkbox.
*/
"hovered": boolean;
/**
* True if the checkbox is initially indeterminate, which is independent from its checked state https://css-tricks.com/indeterminate-checkboxes/
*/
"indeterminate": boolean;
/**
* The label of the checkbox input
*/
"label"?: string;
/**
* The name of the checkbox input
*/
"name": any;
/**
* When true, makes the component required for form-submission.
*/
"required": boolean;
/**
* specify the scale of the checkbox, defaults to m
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* The value of the checkbox input
*/
"value": any;
}
interface CalciteChip {
/**
* specify the appearance style of the button, defaults to solid.
*/
"appearance": Extract<"solid" | "clear", Appearance>;
/**
* specify the color of the button, defaults to blue
*/
"color": ChipColor;
/**
* Aria label for the "x" button
* @default "Close"
*/
"dismissLabel"?: string;
/**
* Optionally show a button the user can click to dismiss the chip
*/
"dismissible": boolean;
/**
* optionally pass an icon to display - accepts Calcite UI icon names
*/
"icon"?: string;
/**
* flip the icon in rtl
*/
"iconFlipRtl": boolean;
/**
* specify the scale of the chip, defaults to m
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* The assigned value for the chip
*/
"value": any;
}
interface CalciteColorPicker {
/**
* When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
*/
"allowEmpty": boolean;
/**
* specify the appearance - default (containing border), or minimal (no containing border)
*/
"appearance": ColorAppearance;
/**
* Internal prop for advanced use-cases.
*/
"color": InternalColor | null;
/**
* When true, disabled prevents user interaction.
*/
"disabled": boolean;
/**
* The format of the value property. When "auto", the format will be inferred from `value` when set.
* @default "auto"
*/
"format": Format;
/**
* When true, hides the RGB/HSV channel inputs
*/
"hideChannels": boolean;
/**
* When true, hides the hex input
*/
"hideHex": boolean;
/**
* When true, hides the saved colors section
*/
"hideSaved": boolean;
/**
* Label used for the blue channel
* @default "B"
*/
"intlB": string;
/**
* Label used for the blue channel description
* @default "Blue"
*/
"intlBlue": string;
/**
* Label used for the delete color button.
* @default "Delete color"
*/
"intlDeleteColor": string;
/**
* Label used for the green channel
* @default "G"
*/
"intlG": string;
/**
* Label used for the green channel description
* @default "Green"
*/
"intlGreen": string;
/**
* Label used for the hue channel
* @default "H"
*/
"intlH": string;
/**
* Label used for the hex input
* @default "Hex"
*/
"intlHex": string;
/**
* Label used for the HSV mode
* @default "HSV"
*/
"intlHsv": string;
/**
* Label used for the hue channel description
* @default "Hue"
*/
"intlHue": string;
/**
* Label used for the hex input when there is no color selected.
* @default "No color"
*/
"intlNoColor": string;
/**
* Label used for the red channel
* @default "R"
*/
"intlR": string;
/**
* Label used for the red channel description
* @default "Red"
*/
"intlRed": string;
/**
* Label used for the RGB mode
* @default "RGB"
*/
"intlRgb": string;
/**
* Label used for the saturation channel
* @default "S"
*/
"intlS": string;
/**
* Label used for the saturation channel description
* @default "Saturation"
*/
"intlSaturation": string;
/**
* Label used for the save color button.
* @default "Save color"
*/
"intlSaveColor": string;
/**
* Label used for the saved colors section
* @default "Saved"
*/
"intlSaved": string;
/**
* Label used for the value channel
* @default "V"
*/
"intlV": string;
/**
* Label used for the
* @default "Value"
*/
"intlValue": string;
/**
* The scale of the color picker.
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* Storage ID for colors.
*/
"storageId": string;
/**
* The color value. This value can be either a {@link https ://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string} a RGB, HSL or HSV object. The type will be preserved as the color is updated.
* @default "#007ac2"
* @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
*/
"value": ColorValue | null;
}
interface CalciteColorPickerHexInput {
/**
* When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component. When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
*/
"allowEmpty": boolean;
/**
* Label used for the hex input.
* @default "Hex"
*/
"intlHex": string;
/**
* Label used for the hex input when there is no color selected.
* @default "No color"
*/
"intlNoColor": string;
/**
* The component's scale.
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* The hex value.
*/
"value": string;
}
interface CalciteColorPickerSwatch {
/**
* Used to display whether the swatch is active or not.
*/
"active": boolean;
/**
* The color value.
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
*/
"color": string;
/**
* The component scale.
*/
"scale": Scale;
}
interface CalciteCombobox {
/**
* Opens or closes the combobox
*/
"active": boolean;
/**
* Allow entry of custom values which are not in the original set of items
*/
"allowCustomValues": boolean;
/**
* Disable combobox input
*/
"disabled": boolean;
/**
* Defines the available placements that can be used when a flip occurs.
*/
"flipPlacements"?: ComputedPlacement[];
/**
* string to override the English "Remove tag" text for when an item is selected.
* @default "Remove tag"
*/
"intlRemoveTag": string;
/**
* Aria label for combobox (required)
*/
"label": string;
/**
* Specify the maximum number of combobox items (including nested children) to display before showing the scroller
*/
"maxItems": number;
/**
* The name of the switch input
*/
"name": string;
/**
* Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
*/
"overlayPositioning": OverlayPositioning;
/**
* Placeholder text for input
*/
"placeholder"?: string;
/**
* Updates the position of the component.
*/
"reposition": () => Promise<void>;
/**
* When true, makes the component required for form-submission.
*/
"required": boolean;
/**
* Specify the scale of the combobox, defaults to m
*/
"scale": Scale;
/**
* specify the selection mode - multi: allow any number of selected items (default) - single: only one selection) - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
*/
"selectionMode": ComboboxSelectionMode;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* The value(s) of the selectedItem(s)
*/
"value": string | string[];
}
interface CalciteComboboxItem {
/**
* True when item is highlighted either from keyboard or mouse hover
*/
"active": boolean;
/**
* Parent and grandparent combobox items, this is set internally for use from combobox
*/
"ancestors": ComboboxChildElement[];
/**
* Don't filter this item based on the search text
*/
"constant": boolean;
/**
* When true, the item cannot be clicked and is visually muted.
*/
"disabled": boolean;
/**
* Unique identifier, used for accessibility
*/
"guid": string;
/**
* Custom icon to display both in combobox chips and next to combobox item text
*/
"icon"?: string;
/**
* Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
*/
"selected": boolean;
/**
* The main label for this item.
*/
"textLabel": string;
/**
* Used to toggle the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values.
*/
"toggleSelected": (coerce?: boolean) => Promise<void>;
/**
* The item's associated value
*/
"value": any;
}
interface CalciteComboboxItemGroup {
/**
* Parent and grandparent combobox items, this is set internally for use from combobox
*/
"ancestors": ComboboxChildElement[];
/**
* Title of the group
*/
"label": string;
}
interface CalciteDatePicker {
/**
* Active range
*/
"activeRange"?: "start" | "end";
/**
* Selected end date
* @deprecated use value instead
*/
"end"?: string;
/**
* Selected end date as full date object
* @deprecated use valueAsDate instead
*/
"endAsDate"?: Date;
/**
* Number at which section headings should start for this component.
*/
"headingLevel": HeadingLevel;
/**
* Localized string for "next month" (used for aria label)
* @default "Next month"
*/
"intlNextMonth"?: string;
/**
* Localized string for "previous month" (used for aria label)
* @default "Previous month"
*/
"intlPrevMonth"?: string;
/**
* Localized string for "year" (used for aria label)
* @default "Year"
*/
"intlYear"?: string;
/**
* BCP 47 language tag for desired language and country format
*/
"locale"?: string;
/**
* Latest allowed date ("yyyy-mm-dd")
*/
"max"?: string;
/**
* Latest allowed date as full date object
*/
"maxAsDate"?: Date;
/**
* Earliest allowed date ("yyyy-mm-dd")
*/
"min"?: string;
/**
* Earliest allowed date as full date object
*/
"minAsDate"?: Date;
/**
* Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range.
*/
"proximitySelectionDisabled": boolean;
/**
* Range mode activation
*/
"range": boolean;
/**
* specify the scale of the date picker
*/
"scale": "s" | "m" | "l";
/**
* Selected start date
* @deprecated use value instead
*/
"start"?: string;
/**
* Selected start date as full date object
* @deprecated use valueAsDate instead
*/
"startAsDate"?: Date;
/**
* Selected date
*/
"value"?: string | string[];
/**
* Selected date as full date object
*/
"valueAsDate"?: Date | Date[];
}
interface CalciteDatePickerDay {
/**
* Date is actively in focus for keyboard navigation
*/
"active": boolean;
/**
* Date is in the current month.
*/
"currentMonth": boolean;
/**
* Day of the month to be shown.
*/
"day": number;
/**
* Date is outside of range and can't be selected
*/
"disabled": boolean;
/**
* Date is the end of date range
*/
"endOfRange": boolean;
/**
* Date is currently highlighted as part of the range
*/
"highlighted": boolean;
/**
* CLDR data for current locale
*/
"localeData": DateLocaleData;
/**
* Showing date range
*/
"range": boolean;
/**
* Date is being hovered and within the set range
*/
"rangeHover": boolean;
/**
* specify the scale of the date picker
*/
"scale": Scale;
/**
* Date is the current selected date of the picker
*/
"selected": boolean;
/**
* Date is the start of date range
*/
"startOfRange": boolean;
/**
* Date value for the day.
*/
"value": Date;
}
interface CalciteDatePickerMonth {
/**
* Date currently active.
*/
"activeDate": Date;
/**
* End date currently active
*/
"endDate"?: Date;
/**
* The range of dates currently being hovered
*/
"hoverRange": HoverRange;
/**
* CLDR locale data for current locale
*/
"localeData": DateLocaleData;
/**
* Maximum date of the calendar above which is disabled.
*/
"max": Date;
/**
* Minimum date of the calendar below which is disabled.
*/
"min": Date;
/**
* specify the scale of the date picker
*/
"scale": Scale;
/**
* Already selected date.
*/
"selectedDate": Date;
/**
* Start date currently active.
*/
"startDate"?: Date;
}
interface CalciteDatePickerMonthHeader {
/**
* Focused date with indicator (will become selected date if user proceeds)
*/
"activeDate": Date;
/**
* Number at which section headings should start for this component.
*/
"headingLevel": HeadingLevel;
/**
* Localized string for next month.
*/
"intlNextMonth": string;
/**
* Localized string for previous month.
*/
"intlPrevMonth": string;
/**
* Localized string for year.
*/
"intlYear": string;
/**
* User's language and region as BCP 47 formatted string.
*/
"locale": string;
/**
* CLDR locale data for translated calendar info
*/
"localeData": DateLocaleData;
/**
* Maximum date of the calendar above which is disabled.
*/
"max": Date;
/**
* Minimum date of the calendar below which is disabled.
*/
"min": Date;
/**
* specify the scale of the date picker
*/
"scale": Scale;
/**
* Already selected date.
*/
"selectedDate": Date;
}
interface CalciteDropdown {
/**
* Opens or closes the dropdown
*/
"active": boolean;
/**
* allow the dropdown to remain open after a selection is made if the selection-mode of the selected item's containing group is "none", the dropdown will always close
*/
"disableCloseOnSelect": boolean;
/**
* is the dropdown disabled
*/
"disabled": boolean;
/**
* Defines the available placements that can be used when a flip occurs.
*/
"flipPlacements"?: ComputedPlacement[];
/**
* specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
*/
"maxItems": number;
/**
* Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
*/
"overlayPositioning": OverlayPositioning;
/**
* Determines where the dropdown will be positioned relative to the button.
* @default "bottom-leading"
*/
"placement": MenuPlacement;
/**
* Updates the position of the component.
*/
"reposition": () => Promise<void>;
/**
* specify the scale of dropdown, defaults to m
*/
"scale": Scale;
/**
* **read-only** The currently selected items
* @readonly
*/
"selectedItems": HTMLCalciteDropdownItemElement[];
/**
* specify whether the dropdown is opened by hover or click of a trigger element
*/
"type": "hover" | "click";
/**
* specify the width of dropdown, defaults to m
*/
"width": Scale;
}
interface CalciteDropdownGroup {
/**
* optionally set a group title for display
*/
"groupTitle"?: string;
/**
* Specifies the size of the action.
*/
"scale": Scale;
/**
* specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item), none (no active items), defaults to single
*/
"selectionMode": SelectionMode;
}
interface CalciteDropdownItem {
/**
* Indicates whether the item is active.
*/
"active": boolean;
/**
* optionally pass a href - used to determine if the component should render as anchor
*/
"href"?: string;
/**
* optionally pass an icon to display at the end of an item - accepts calcite ui icon names
*/
"iconEnd"?: string;
/**
* flip the icon(s) in rtl
*/
"iconFlipRtl"?: FlipContext;
/**
* optionally pass an icon to display at the start of an item - accepts calcite ui icon names
*/
"iconStart"?: string;
/**
* Applies to the aria-label attribute on the button or hyperlink
*/
"label"?: string;
/**
* The rel attribute to apply to the hyperlink
*/
"rel"?: string;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* The target attribute to apply to the hyperlink
*/
"target"?: string;
}
interface CalciteFab {
/**
* Used to set the button's appearance. Default is outline.
*/
"appearance": Extract<"solid" | "outline", Appearance>;
/**
* Used to set the button's color. Default is light.
*/
"color": ButtonColor;
/**
* When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
*/
"disabled": boolean;
/**
* The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
* @default "plus"
*/
"icon"?: string;
/**
* Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop.
*/
"label"?: string;
/**
* When true, content is waiting to be loaded. This state shows a busy indicator.
*/
"loading": boolean;
/**
* Specifies the size of the fab.
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* Text that accompanies the FAB icon.
*/
"text"?: string;
/**
* Indicates whether the text is displayed.
*/
"textEnabled": boolean;
}
interface CalciteFilter {
/**
* When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
*/
"disabled": boolean;
/**
* The resulting items after filtering.
* @readonly
*/
"filteredItems": object[];
/**
* A text label that will appear on the clear button.
*/
"intlClear"?: string;
/**
* A text label that will appear next to the input field.
*/
"intlLabel"?: string;
/**
* The items to filter through. The filter uses this as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is required.
*/
"items": object[];
/**
* Placeholder text for the input element's placeholder attribute
*/
"placeholder"?: string;
/**
* specify the scale of filter, defaults to m
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* Filter value.
*/
"value": string;
}
interface CalciteFlow {
/**
* Removes the currently active `calcite-panel`.
*/
"back": () => Promise<HTMLCalcitePanelElement>;
}
interface CalciteGraph {
/**
* Array of values describing a single color stop ([offset, color, opacity]) These color stops should be sorted by offset value
*/
"colorStops": ColorStop[];
/**
* Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value
*/
"data": DataSeries;
/**
* End of highlight color if highlighting range
*/
"highlightMax": number;
/**
* Start of highlight color if highlighting range
*/
"highlightMin": number;
/**
* Highest point of the range
*/
"max": number;
/**
* Lowest point of the range
*/
"min": number;
}
interface CalciteHandle {
"activated": boolean;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<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<void>;
/**
* specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false
*/
"controls": boolean;
/**
* specify whether editing can be enabled
*/
"disabled": boolean;
/**
* specify whether the wrapped input element is editable, defaults to false
*/
"editingEnabled": boolean;
/**
* specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
* @default "Cancel"
*/
"intlCancelEditing": string;
/**
* specify text to be user for the confirm changes button's aria-label, defaults to `Save`
* @default "Save"
*/
"intlConfirmChanges": string;
/**
* specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
* @default "Click to edit"
*/
"intlEnableEditing": string;
/**
* specify whether the confirm button should display a loading state, defaults to false
*/
"loading": boolean;
/**
* specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale
*/
"scale"?: Scale;
"setFocus": () => Promise<void>;
}
interface CalciteInput {
/**
* specify the alignment of the value of the input
*/
"alignment": Position;
/**
* should the input autofocus
*/
"autofocus": boolean;
/**
* optionally display a clear button that displays when field has a value shows by default for search, time, date will not display for type="textarea"
*/
"clearable": boolean;
/**
* is the input disabled
*/
"disabled": boolean;
"editingEnabled": boolean;
/**
* for number values, displays the locale's group separator
*/
"groupSeparator": boolean;
/**
* when true, the component will not be visible
*/
"hidden": boolean;
/**
* when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type
*/
"icon": string | boolean;
/**
* flip the icon in rtl
*/
"iconFlipRtl": boolean;
/**
* string to override English loading text
* @default "Loading"
*/
"intlLoading"?: string;
/**
* Applies to the aria-label attribute on the button or hyperlink
*/
"label"?: string;
/**
* specify if the input is in loading state
*/
"loading": boolean;
/**
* BCP 47 language tag for desired language and country format
*/
"locale"?: string;
/**
* Toggles locale formatting for numbers.
*/
"localeFormat": boolean;
/**
* input max
*/
"max"?: number;
/**
* Maximum length of the input value
*/
"maxLength"?: number;
/**
* Maximum length of text input.
* @deprecated use maxLength instead
*/
"maxlength"?: number;
/**
* input min
*/
"min"?: number;
/**
* Minimum length of the text input
*/
"minLength"?: number;
/**
* The name of the input
*/
"name": string;
/**
* specify the placement of the number buttons
*/
"numberButtonType"?: InputPlacement;
/**
* explicitly whitelist placeholder attribute
*/
"placeholder": string;
/**
* optionally add prefix
*/
"prefixText"?: string;
/**
* When true, a field cannot be modified.
*/
"readOnly": boolean;
/**
* is the input required
*/
"required": boolean;
/**
* specify the scale of the input, defaults to m
*/
"scale": Scale;
/**
* Sets focus on the component.
*/
"setFocus": () => Promise<void>;
/**
* specify the status of the input field, determines message and icons
*/
"status": Status;
/**
* input step
*/
"step"?: number | "any";
/**
* optionally add suffix *
*/
"suffixText"?: string;
/**
* specify the input type Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
*/
"type": | "color"
| "date"
| "datetime-local"
| "email"
| "file"
| "image"
| "month"
| "number"
| "password"
| "search"
| "tel"
| "text"
| "textarea"
| "time"
| "url"
| "week";
/**
* input value
*/
"value": string;
}
interface CalciteInputDatePicker {
/**
* Expand or collapse when calendar does not have input
*/
"active": boolean;
/**
* When false, the component won't be interactive.
*/
"disabled": boolean;
/**
* Selected end date
* @deprecated use value instead
*/
"end"?: string;
/**
* Selected end date as full date object
* @deprecated use valueAsDate instead
*/
"en