diff --git a/.github/ISSUE_TEMPLATE/accessibility.yml b/.github/ISSUE_TEMPLATE/accessibility.yml index 7638fa0367a..8a4f53634b0 100644 --- a/.github/ISSUE_TEMPLATE/accessibility.yml +++ b/.github/ISSUE_TEMPLATE/accessibility.yml @@ -103,6 +103,7 @@ body: description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request. options: - label: "@esri/calcite-components" + - label: "@esri/calcite-components-angular" - label: "@esri/calcite-components-react" - label: "@esri/calcite-design-tokens" - label: "@esri/eslint-plugin-calcite-components" diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml index 5cce77d1a46..2d85dc44e3c 100644 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -97,6 +97,7 @@ body: description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request. options: - label: "@esri/calcite-components" + - label: "@esri/calcite-components-angular" - label: "@esri/calcite-components-react" - label: "@esri/calcite-design-tokens" - label: "@esri/eslint-plugin-calcite-components" diff --git a/.github/ISSUE_TEMPLATE/enhancement.yml b/.github/ISSUE_TEMPLATE/enhancement.yml index 7ba468079c1..152527fc2f8 100644 --- a/.github/ISSUE_TEMPLATE/enhancement.yml +++ b/.github/ISSUE_TEMPLATE/enhancement.yml @@ -65,6 +65,7 @@ body: description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request. options: - label: "@esri/calcite-components" + - label: "@esri/calcite-components-angular" - label: "@esri/calcite-components-react" - label: "@esri/calcite-design-tokens" - label: "@esri/eslint-plugin-calcite-components" diff --git a/.github/ISSUE_TEMPLATE/refactor.yml b/.github/ISSUE_TEMPLATE/refactor.yml index 0020933a4ab..d6a17722086 100644 --- a/.github/ISSUE_TEMPLATE/refactor.yml +++ b/.github/ISSUE_TEMPLATE/refactor.yml @@ -41,6 +41,7 @@ body: description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request. options: - label: "@esri/calcite-components" + - label: "@esri/calcite-components-angular" - label: "@esri/calcite-components-react" - label: "@esri/calcite-design-tokens" - label: "@esri/eslint-plugin-calcite-components" diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 1045a7a3f0d..1bf226094b2 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,7 +1,7 @@ { - "packages/calcite-components": "1.10.0", - "packages/calcite-components-angular": "1.10.0", - "packages/calcite-components-react": "1.10.0", + "packages/calcite-components": "1.11.0", + "packages/calcite-components-react": "1.11.0", "packages/calcite-design-tokens": "1.1.0", - "packages/eslint-plugin-calcite-components": "0.2.2" + "packages/eslint-plugin-calcite-components": "0.2.3", + "packages/calcite-components-angular/projects/component-library": "1.11.0" } diff --git a/.vscode/launch.json b/.vscode/launch.json index d08123bf2a6..f78684b89d0 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -66,6 +66,17 @@ "skipFiles": ["/**"], "internalConsoleOptions": "neverOpen", "console": "integratedTerminal" + }, + { + "type": "node", + "request": "launch", + "name": "Debug Tokens --spec {currentFile}", + "cwd": "${workspaceFolder}/packages/calcite-design-tokens", + "sourceMaps": true, + "runtimeArgs": ["--inspect-brk", "${workspaceRoot}/node_modules/jest/bin/jest.js", "--runInBand", "${file}"], + "skipFiles": ["/**"], + "internalConsoleOptions": "neverOpen", + "console": "integratedTerminal" } ] } diff --git a/package-lock.json b/package-lock.json index 8ec5fa494f1..2d039cbe0bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46767,7 +46767,7 @@ }, "packages/calcite-design-tokens": { "name": "@esri/calcite-design-tokens", - "version": "1.1.1-next.0" + "version": "1.1.1-next.1" }, "packages/eslint-plugin-calcite-components": { "name": "@esri/eslint-plugin-calcite-components", diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts index 06a95cca709..3d7d867f384 100644 --- a/packages/calcite-components/calcite-preset.ts +++ b/packages/calcite-components/calcite-preset.ts @@ -165,6 +165,7 @@ export default { "2-lg": "var(--calcite-box-shadow-md)", "2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)", "border-bottom": "0 1px 0 var(--calcite-color-border-3)", + "border-top": "0 -1px 0 var(--calcite-color-border-3)", "outline-active": "0 0 0 1px var(--calcite-color-brand)", none: "none", xs: "0 0 0 1px rgba(0, 0, 0, 0.05)", @@ -220,6 +221,7 @@ export default { 4.5: "1.125rem", 9: "2.25rem", 11: "2.75rem", + 13: "3.25rem", }, transitionProperty: { margin: "margin", diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md index 8ccd849b295..1f6a47b4bca 100644 --- a/packages/calcite-components/conventions/README.md +++ b/packages/calcite-components/conventions/README.md @@ -7,7 +7,7 @@ This is a living document defining our best practices and reasoning for authorin Generally adhere to and follow these best practices for authoring components. - [Google Web Component Best Practices](https://developers.google.com/web/fundamentals/web-components/best-practices) -- [Custom Element Conformance - W3C Editor's Draft](https://w3c.github.io/webcomponents/spec/custom/#custom-element-conformance) +- [Custom Element Conformance - W3C Editor's Draft](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance) ## Structure diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md index 1673586dcf4..671388d8e47 100644 --- a/packages/calcite-components/readme.md +++ b/packages/calcite-components/readme.md @@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho ```html ``` diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss index 236b64906f7..b701a80fb39 100644 --- a/packages/calcite-components/src/assets/styles/_sortable.scss +++ b/packages/calcite-components/src/assets/styles/_sortable.scss @@ -1,4 +1,9 @@ @mixin sortable-helper-classes() { + .calcite-sortable--ghost, + .calcite-sortable--drag { + overflow: hidden; + } + .calcite-sortable--ghost::before { content: ""; @apply box-border diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 9f148219038..ef67d8fd707 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -5,31 +5,12 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { - Alignment, - Appearance, - Columns, - FlipContext, - Kind, - Layout, - LogicalFlowPosition, - Position, - Scale, - SelectionMode, - Status, - Width, -} from "./components/interfaces"; +import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; import { ActionMessages } from "./components/action/assets/action/t9n"; import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; -import { - EffectivePlacement, - LogicalPlacement, - MenuPlacement, - OverlayPositioning, - ReferenceElement, -} from "./utils/floating-ui"; +import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } from "./components/alert/interfaces"; @@ -46,8 +27,8 @@ import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; +import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -import { ComboboxChildElement } from "./components/combobox/interfaces"; import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; @@ -92,11 +73,7 @@ import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -import { - StepperItemChangeEventDetail, - StepperItemEventDetail, - StepperItemKeyEventDetail, -} from "./components/stepper/interfaces"; +import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces"; import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; @@ -113,31 +90,12 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/ import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; -export { - Alignment, - Appearance, - Columns, - FlipContext, - Kind, - Layout, - LogicalFlowPosition, - Position, - Scale, - SelectionMode, - Status, - Width, -} from "./components/interfaces"; +export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; export { ActionMessages } from "./components/action/assets/action/t9n"; export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; -export { - EffectivePlacement, - LogicalPlacement, - MenuPlacement, - OverlayPositioning, - ReferenceElement, -} from "./utils/floating-ui"; +export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } from "./components/alert/interfaces"; @@ -154,8 +112,8 @@ export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; +export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -export { ComboboxChildElement } from "./components/combobox/interfaces"; export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; @@ -200,11 +158,7 @@ export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { - StepperItemChangeEventDetail, - StepperItemEventDetail, - StepperItemKeyEventDetail, -} from "./components/stepper/interfaces"; +export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces"; export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; @@ -222,15279 +176,12544 @@ export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { - interface CalciteAccordion { - /** - * Specifies the appearance of the component. - */ - appearance: Extract<"solid" | "transparent", Appearance>; - /** - * Specifies the placement of the icon in the header. - */ - iconPosition: Position; - /** - * Specifies the type of the icon in the header. - */ - iconType: "chevron" | "caret" | "plus-minus"; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). - */ - selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>; - } - interface CalciteAccordionItem { - /** - * The containing `accordion` element. - */ - accordionParent: HTMLCalciteAccordionElement; - /** - * Specifies a description for the component. - */ - description: string; - /** - * When `true`, the component is expanded. - */ - expanded: boolean; - /** - * Specifies heading text for the component. - */ - heading: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: FlipContext; - /** - * Specifies the placement of the icon in the header inherited from the `calcite-accordion`. - */ - iconPosition: Position; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - /** - * Specifies the type of the icon in the header inherited from the `calcite-accordion`. - */ - iconType: "chevron" | "caret" | "plus-minus"; - /** - * Specifies the size of the component inherited from the `calcite-accordion`. - */ - scale: Scale; - } - interface CalciteAction { - /** - * When `true`, the component is highlighted. - */ - active: boolean; - /** - * Specifies the horizontal alignment of button elements with text content. - */ - alignment: Alignment; - /** - * Specifies the appearance of the component. - */ - appearance: Extract<"solid" | "transparent", Appearance>; - /** - * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. - */ - compact: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies an icon to display. - */ - icon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * When `true`, displays a visual indicator. - */ - indicator: boolean; - /** - * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. - */ - label: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ActionMessages; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies text that accompanies the icon. - */ - text: string; - /** - * Indicates whether the text is displayed. - */ - textEnabled: boolean; - } - interface CalciteActionBar { - /** - * Specifies the accessible label for the last action-group. - */ - actionsEndGroupLabel: string; - /** - * When `true`, the expand-toggling behavior is disabled. - */ - expandDisabled: boolean; - /** - * When `true`, the component is expanded. - */ - expanded: boolean; - /** - * The layout direction of the actions. - */ - layout: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ActionBarMessages; - /** - * Overflows actions that won't fit into menus. - */ - overflowActions: () => Promise; - /** - * Disables automatically overflowing `calcite-action`s that won't fit into menus. - */ - overflowActionsDisabled: boolean; - /** - * Arranges the component depending on the element's `dir` property. - */ - position: Position; - /** - * Specifies the size of the expand `calcite-action`. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - } - interface CalciteActionGroup { - /** - * Indicates number of columns. - */ - columns: Columns; - /** - * When `true`, the component is expanded. - */ - expanded: boolean; - /** - * Specifies the label of the component. Required for accessibility. - */ - label: string; - /** - * Indicates the layout of the component. - * @deprecated Use the `layout` property on the component's parent instead. - */ - layout: Layout; - /** - * When `true`, the `calcite-action-menu` is open. - */ - menuOpen: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ActionGroupMessages; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Specifies the size of the `calcite-action-menu`. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - } - interface CalciteActionMenu { - /** - * Specifies the appearance of the component. - */ - appearance: Extract<"solid" | "transparent", Appearance>; - /** - * When `true`, the component is expanded. - */ - expanded: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements: EffectivePlacement[]; - /** - * Specifies the text string for the component. - */ - label: string; - /** - * When `true`, the component is open. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the `referenceElement`. - */ - placement: LogicalPlacement; - /** - * Specifies the size of the component's trigger `calcite-action`. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - interface CalciteActionPad { - /** - * Specifies the accessible label for the last action-group. - */ - actionsEndGroupLabel: string; - /** - * When `true`, the expand-toggling behavior is disabled. - */ - expandDisabled: boolean; - /** - * When `true`, the component is expanded. - */ - expanded: boolean; - /** - * Indicates the layout of the component. - */ - layout: Layout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ActionPadMessages; - /** - * Arranges the component depending on the element's `dir` property. - */ - position: Position; - /** - * Specifies the size of the expand `calcite-action`. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - } - interface CalciteAlert { - /** - * When `true`, the component closes automatically (recommended for passive, non-blocking alerts). - */ - autoClose: boolean; - /** - * Specifies the duration before the component automatically closes (only use with `autoClose`). - */ - autoCloseDuration: AlertDuration; - /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon: string | boolean; + interface CalciteAccordion { + /** + * Specifies the appearance of the component. + */ + "appearance": Extract<"solid" | "transparent", Appearance>; + /** + * Specifies the placement of the icon in the header. + */ + "iconPosition": Position; + /** + * Specifies the type of the icon in the header. + */ + "iconType": "chevron" | "caret" | "plus-minus"; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). + */ + "selectionMode": Extract< + "single" | "single-persist" | "multiple", + SelectionMode + >; + } + interface CalciteAccordionItem { + /** + * The containing `accordion` element. + */ + "accordionParent": HTMLCalciteAccordionElement; + /** + * Specifies a description for the component. + */ + "description": string; + /** + * When `true`, the component is expanded. + */ + "expanded": boolean; + /** + * Specifies heading text for the component. + */ + "heading": string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": FlipContext; + /** + * Specifies the placement of the icon in the header inherited from the `calcite-accordion`. + */ + "iconPosition": Position; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + /** + * Specifies the type of the icon in the header inherited from the `calcite-accordion`. + */ + "iconType": "chevron" | "caret" | "plus-minus"; + /** + * Specifies the size of the component inherited from the `calcite-accordion`. + */ + "scale": Scale; + } + interface CalciteAction { + /** + * When `true`, the component is highlighted. + */ + "active": boolean; + /** + * Specifies the horizontal alignment of button elements with text content. + */ + "alignment": Alignment; + /** + * Specifies the appearance of the component. + */ + "appearance": Extract<"solid" | "transparent", Appearance>; + /** + * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. + */ + "compact": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies an icon to display. + */ + "icon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * When `true`, displays a visual indicator. + */ + "indicator": boolean; + /** + * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. + */ + "label": string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ActionMessages; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies text that accompanies the icon. + */ + "text": string; + /** + * Indicates whether the text is displayed. + */ + "textEnabled": boolean; + } + interface CalciteActionBar { + /** + * Specifies the accessible label for the last action-group. + */ + "actionsEndGroupLabel": string; + /** + * When `true`, the expand-toggling behavior is disabled. + */ + "expandDisabled": boolean; + /** + * When `true`, the component is expanded. + */ + "expanded": boolean; + /** + * The layout direction of the actions. + */ + "layout": Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ActionBarMessages; + /** + * Overflows actions that won't fit into menus. + */ + "overflowActions": () => Promise; + /** + * Disables automatically overflowing `calcite-action`s that won't fit into menus. + */ + "overflowActionsDisabled": boolean; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position": Position; + /** + * Specifies the size of the expand `calcite-action`. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + } + interface CalciteActionGroup { + /** + * Indicates number of columns. + */ + "columns": Columns; + /** + * When `true`, the component is expanded. + */ + "expanded": boolean; + /** + * Specifies the label of the component. Required for accessibility. + */ + "label": string; + /** + * Indicates the layout of the component. + * @deprecated Use the `layout` property on the component's parent instead. + */ + "layout": Layout; + /** + * When `true`, the `calcite-action-menu` is open. + */ + "menuOpen": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ActionGroupMessages; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Specifies the size of the `calcite-action-menu`. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + } + interface CalciteActionMenu { + /** + * Specifies the appearance of the component. + */ + "appearance": Extract<"solid" | "transparent", Appearance>; + /** + * When `true`, the component is expanded. + */ + "expanded": boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": EffectivePlacement[]; + /** + * Specifies the text string for the component. + */ + "label": string; + /** + * When `true`, the component is open. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Determines where the component will be positioned relative to the `referenceElement`. + */ + "placement": LogicalPlacement; + /** + * Specifies the size of the component's trigger `calcite-action`. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + interface CalciteActionPad { + /** + * Specifies the accessible label for the last action-group. + */ + "actionsEndGroupLabel": string; + /** + * When `true`, the expand-toggling behavior is disabled. + */ + "expandDisabled": boolean; + /** + * When `true`, the component is expanded. + */ + "expanded": boolean; + /** + * Indicates the layout of the component. + */ + "layout": Layout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ActionPadMessages; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position": Position; + /** + * Specifies the size of the expand `calcite-action`. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + } + interface CalciteAlert { + /** + * When `true`, the component closes automatically (recommended for passive, non-blocking alerts). + */ + "autoClose": boolean; + /** + * Specifies the duration before the component automatically closes (only use with `autoClose`). + */ + "autoCloseDuration": AlertDuration; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon": string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the kind of the component (will apply to top border and icon). + */ + "kind": Extract< + "brand" | "danger" | "info" | "success" | "warning", + Kind + >; + /** + * Specifies an accessible name for the component. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": AlertMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * Specifies the placement of the component + */ + "placement": MenuPlacement; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's "close" button (the first focusable item). + */ + "setFocus": () => Promise; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "slottedInShell": boolean; + } + interface CalciteAvatar { + /** + * Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. + */ + "fullName": string; + /** + * Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label. + */ + "label": string; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the `src` to an image (remember to add a token if the user is private). + */ + "thumbnail": string; + /** + * Specifies the unique id of the user. + */ + "userId": string; + /** + * Specifies the username of the user. + */ + "username": string; + } + interface CalciteBlock { + /** + * When `true`, the component is collapsible. + */ + "collapsible": boolean; + /** + * A description for the component, which displays below the heading. + */ + "description": string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, displays a drag handle in the header. + */ + "dragHandle": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": BlockMessages; + /** + * When `true`, expands the component and its contents. + */ + "open": boolean; + /** + * Sets focus on the component's first tabbable element. + */ + "setFocus": () => Promise; + /** + * Displays a status-related indicator icon. + */ + "status": Status; + } + interface CalciteBlockSection { + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": BlockSectionMessages; + /** + * When `true`, expands the component and its contents. + */ + "open": boolean; + /** + * Sets focus on the component's first tabbable element. + */ + "setFocus": () => Promise; + /** + * Displays a status-related indicator icon. + */ + "status": Status; + /** + * The component header text. + */ + "text": string; + /** + * Specifies the component's toggle display - `"button"` (selectable header), or `"switch"` (toggle switch). + */ + "toggleDisplay": BlockSectionToggleDisplay; + } + interface CalciteButton { + /** + * Specifies the alignment of the component's elements. + */ + "alignment": ButtonAlignment; + /** + * Specifies the appearance style of the component. + */ + "appearance": Extract< + "outline" | "outline-fill" | "solid" | "transparent", + Appearance + >; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Specifies the URL of the linked resource, which can be set as an absolute or relative path. + */ + "href": string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + /** + * Specifies the kind of the component (will apply to border and background if applicable). + */ + "kind": Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; + /** + * Accessible name for the component. + */ + "label": string; + /** + * When `true`, a busy indicator is displayed and interaction is disabled. + */ + "loading": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ButtonMessages; + /** + * Specifies the name of the component on form submission. + */ + "name"?: string; + /** + * Defines the relationship between the `href` value and the current document. + * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) + */ + "rel": string; + /** + * When `true`, adds a round style to the component. + */ + "round": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies if the component is a child of a `calcite-split-button`. + */ + "splitChild": "primary" | "secondary" | false; + /** + * Specifies where to open the linked document defined in the `href` property. + * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) + */ + "target": string; + /** + * Specifies the default behavior of the button. + * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) + */ + "type": string; + /** + * Specifies the width of the component. + */ + "width": Width; + } + interface CalciteCard { + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": CardMessages; + /** + * When `true`, the component is selectable. + */ + "selectable": boolean; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * Sets the placement of the thumbnail defined in the `thumbnail` slot. + */ + "thumbnailPosition": LogicalFlowPosition; + } + interface CalciteCheckbox { + /** + * When `true`, the component is checked. + */ + "checked": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * The `id` attribute of the component. When omitted, a globally unique identifier is used. + */ + "guid": string; + /** + * The hovered state of the checkbox. + */ + "hovered": boolean; + /** + * When `true`, the component is initially indeterminate, which is independent from its `checked` value. The state is visual only, and can look different across browsers. + * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) + */ + "indeterminate": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the name of the component on form submission. + */ + "name": string; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's value. + */ + "value": any; + } + interface CalciteChip { + /** + * Specifies the appearance style of the component. + */ + "appearance": Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, a close button is added to the component. + */ + "closable": boolean; + /** + * When `true`, hides the component. + */ + "closed": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies an icon to display. + */ + "icon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit. This is set to `true` by a parent Chip Group component. + */ + "interactive": boolean; + /** + * Specifies the kind of the component (will apply to border and background if applicable). + */ + "kind": Extract<"brand" | "inverse" | "neutral", Kind>; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ChipMessages; + /** + * Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. + */ + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * This internal property, managed by a containing `calcite-chip-group`, is conditionally set based on the `selectionMode` of the parent + */ + "selectionMode": Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's value. + */ + "value": any; + } + interface CalciteChipGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the size of the component. Child `calcite-chip`s inherit the component's value. + */ + "scale": Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems": HTMLCalciteChipElement[]; + /** + * Specifies the selection mode of the component. + */ + "selectionMode": Extract< + "multiple" | "single" | "single-persist" | "none", + SelectionMode + >; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + } + interface CalciteColorPicker { + /** + * When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. + */ + "allowEmpty": boolean; + /** + * When true, the component will allow updates to the color's alpha value. + */ + "alphaChannel": boolean; + /** + * When true, hides the RGB/HSV channel inputs + */ + "channelsDisabled": boolean; + /** + * Internal prop for advanced use-cases. + */ + "color": InternalColor | null; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The format of `value`. When `"auto"`, the format will be inferred from `value` when set. + * @default "auto" + */ + "format": Format; + /** + * When true, hides the hex input + */ + "hexDisabled": boolean; + /** + * When `true`, hides the RGB/HSV channel inputs. + * @deprecated use `channelsDisabled` instead + */ + "hideChannels": boolean; + /** + * When `true`, hides the hex input. + * @deprecated use `hexDisabled` instead + */ + "hideHex": boolean; + /** + * When `true`, hides the saved colors section. + * @deprecated use `savedDisabled` instead + */ + "hideSaved": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ColorPickerMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * When true, hides the saved colors section + */ + "savedDisabled": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * Specifies the storage ID for colors. + */ + "storageId": string; + /** + * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. + * @default "#007ac2" + * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) + * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/main/src/components/color-picker/interfaces.ts#L10) + */ + "value": ColorValue | null; + } + interface CalciteColorPickerHexInput { + /** + * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. + */ + "allowEmpty": boolean; + /** + * When true, the component will allow updates to the color's alpha value. + */ + "alphaChannel": boolean; + /** + * Specifies accessible label for the input field. + * @deprecated use `messages` instead + */ + "hexLabel": string; + /** + * Messages are passed by parent component for accessible labels. + */ + "messages": ColorPickerMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The hex value. + */ + "value": string; + } + interface CalciteColorPickerSwatch { + /** + * When `true`, the component is active. + */ + "active": boolean; + /** + * The color value. + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value + */ + "color": string | null; + /** + * Specifies the size of the component. + */ + "scale": Scale; + } + interface CalciteCombobox { + /** + * When `true`, allows entry of custom values, which are not in the original set of items. + */ + "allowCustomValues": boolean; + /** + * When `true`, the value-clearing will be disabled. + */ + "clearDisabled": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies the component's filtered items. + * @readonly + */ + "filteredItems": HTMLCalciteComboboxItemElement[]; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": EffectivePlacement[]; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. + */ + "maxItems": number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ComboboxMessages; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Specifies the placeholder text for the input. + */ + "placeholder": string; + /** + * Specifies the placeholder icon for the input. + */ + "placeholderIcon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "placeholderIconFlipRtl": boolean; + /** + * Updates the position of the component. + * @param delayed Reposition the component after a delay + * @returns Promise + */ + "reposition": (delayed?: boolean) => Promise; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems": HTMLCalciteComboboxItemElement[]; + /** + * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). + */ + "selectionDisplay": SelectionDisplay; + /** + * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + */ + "selectionMode": Extract< + "single" | "single-persist" | "ancestors" | "multiple", + SelectionMode + >; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's value(s) from the selected `calcite-combobox-item`(s). + */ + "value": string | string[]; + } + interface CalciteComboboxItem { + /** + * When `true`, the component is active. + */ + "active": boolean; + /** + * Specifies the parent and grandparent items, which are set on `calcite-combobox`. + */ + "ancestors": ComboboxChildElement[]; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, omits the component from the `calcite-combobox` filtered search results. + */ + "filterDisabled": boolean; + /** + * The `id` attribute of the component. When omitted, a globally unique identifier is used. + */ + "guid": string; + /** + * Specifies an icon to display. + */ + "icon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. + */ + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + */ + "selectionMode": Extract< + "single" | "single-persist" | "ancestors" | "multiple", + SelectionMode + >; + /** + * The component's text. + */ + "textLabel": string; + /** + * The component's value. + */ + "value": any; + } + interface CalciteComboboxItemGroup { + /** + * When `true`, signifies that the group comes after another group without any children (items or sub-groups), otherwise indicates that the group comes after another group that has children. Used for styling. + */ + "afterEmptyGroup": boolean; + /** + * Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. + */ + "ancestors": ComboboxChildElement[]; + /** + * Specifies the title of the component. + */ + "label": string; + /** + * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. + */ + "scale": Scale; + } + interface CalciteDatePicker { + /** + * Specifies the component's active date. + */ + "activeDate": Date; + /** + * When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. + */ + "activeRange": "start" | "end"; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * Specifies the latest allowed date (`"yyyy-mm-dd"`). + */ + "max": string; + /** + * Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). + */ + "maxAsDate": Date; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": DatePickerMessages; + /** + * Specifies the earliest allowed date (`"yyyy-mm-dd"`). + */ + "min": string; + /** + * Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). + */ + "minAsDate": Date; + /** + * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. + */ + "numberingSystem": NumberingSystem; + /** + * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. + */ + "proximitySelectionDisabled": boolean; + /** + * When `true`, activates the component's range mode to allow a start and end date. + */ + "range": boolean; + /** + * Resets active date state. + */ + "reset": () => Promise; + /** + * Specifies the size of the component. + */ + "scale": "s" | "m" | "l"; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). + */ + "value": string | string[]; + /** + * Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). + */ + "valueAsDate": Date | Date[]; + } + interface CalciteDatePickerDay { + /** + * When `true`, the component is active. + */ + "active": boolean; + /** + * Date is in the current month. + */ + "currentMonth": boolean; + /** + * The DateTimeFormat used to provide screen reader labels. + */ + "dateTimeFormat": Intl.DateTimeFormat; + /** + * Day of the month to be shown. + */ + "day": number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Date is the end of date range + */ + "endOfRange": boolean; + /** + * Date is currently highlighted as part of the range + */ + "highlighted": boolean; + /** + * When `true`, activates the component's range mode to allow a start and end date. + */ + "range": boolean; + /** + * When `true`, highlight styling for edge dates is applied. + */ + "rangeEdge": "start" | "end" | undefined; + /** + * Date is being hovered and within the set range + */ + "rangeHover": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * Date is the start of date range + */ + "startOfRange": boolean; + /** + * The component's value. + */ + "value": Date; + } + interface CalciteDatePickerMonth { + /** + * Date currently active. + */ + "activeDate": Date; + /** + * The DateTimeFormat used to provide screen reader labels. + */ + "dateTimeFormat": Intl.DateTimeFormat; + /** + * End date currently active + */ + "endDate"?: Date; + /** + * The range of dates currently being hovered + */ + "hoverRange": HoverRange; + /** + * CLDR locale data for current locale + */ + "localeData": DateLocaleData; + /** + * Specifies the latest allowed date (`"yyyy-mm-dd"`). + */ + "max": Date; + /** + * Specifies the earliest allowed date (`"yyyy-mm-dd"`). + */ + "min": Date; + /** + * Specifies the size of the component. + */ + "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; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * CLDR locale data for translated calendar info + */ + "localeData": DateLocaleData; + /** + * Specifies the latest allowed date (`"yyyy-mm-dd"`). + */ + "max": Date; + /** + * This property specifies accessible strings for the component's previous month button ,next month button & year input elements. Made into a prop for testing purposes only. + * @readonly + */ + "messages": DatePickerMessages; + /** + * Specifies the earliest allowed date (`"yyyy-mm-dd"`). + */ + "min": Date; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Already selected date. + */ + "selectedDate": Date; + } + interface CalciteDropdown { + /** + * When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. + */ + "closeOnSelectDisabled": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": EffectivePlacement[]; + /** + * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. + */ + "maxItems": number; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-start" + */ + "placement": MenuPlacement; + /** + * Updates the position of the component. + * @param delayed + */ + "reposition": (delayed?: boolean) => Promise; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems": HTMLCalciteDropdownItemElement[]; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * Specifies the action to open the component from the container element. + */ + "type": "hover" | "click"; + /** + * Specifies the width of the component. + */ + "widthScale": Scale; + } + interface CalciteDropdownGroup { + /** + * Specifies and displays a group title. + */ + "groupTitle": string; + /** + * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`. + */ + "scale": Scale; + /** + * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. + */ + "selectionMode": Extract<"none" | "single" | "multiple", SelectionMode>; + } + interface CalciteDropdownItem { + /** + * Specifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor. + */ + "href": string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the relationship to the linked document defined in `href`. + */ + "rel": string; + /** + * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`. + */ + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. + */ + "selectionMode": Extract<"none" | "single" | "multiple", SelectionMode>; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the frame or window to open the linked document. + */ + "target": string; + } + interface CalciteFab { + /** + * Specifies the appearance style of the component. + */ + "appearance": Extract<"solid" | "outline-fill", Appearance>; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies an icon to display. + * @default "plus" + */ + "icon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the kind of the component (will apply to border and background). + */ + "kind": Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; + /** + * Accessible name for the component. + */ + "label": string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies text to accompany the component's icon. + */ + "text": string; + /** + * When `true`, displays the `text` value in the component. + */ + "textEnabled": boolean; + } + interface CalciteFilter { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Performs a filter on the component. This method can be useful because filtering is delayed and asynchronous. + * @param value - The filter text value. + * @returns + */ + "filter": (value?: string) => Promise; + /** + * The component's resulting items after filtering. + * @readonly + */ + "filteredItems": object[]; + /** + * Defines the items to filter. The component uses the values 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 needed to conduct filtering. + */ + "items": object[]; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": FilterMessages; + /** + * Specifies placeholder text for the input element. + */ + "placeholder": string; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's value. + */ + "value": string; + } + interface CalciteFlow { + /** + * Removes the currently active `calcite-flow-item`. + */ + "back": () => Promise; + /** + * This property enables the component to consider other custom elements implementing flow-item's interface. + */ + "customItemSelectors": string; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + interface CalciteFlowItem { + /** + * When provided, the method will be called before it is removed from its parent `calcite-flow`. + */ + "beforeBack": () => Promise; + /** + * When `true`, displays a close button in the trailing side of the component's header. + */ + "closable": boolean; + /** + * When `true`, the component will be hidden. + */ + "closed": boolean; + /** + * Specifies the direction of the collapse. + */ + "collapseDirection": "down" | "up"; + /** + * When `true`, hides the component's content area. + */ + "collapsed": boolean; + /** + * When `true`, the component is collapsible. + */ + "collapsible": boolean; + /** + * A description for the component. + */ + "description": string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * When `true`, the action menu items in the `header-menu-actions` slot are open. + */ + "menuOpen": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": FlowItemMessages; + /** + * Scrolls the component's content to a specified set of coordinates. + * @example myCalciteFlowItem.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). }); + * @param options - allows specific coordinates to be defined. + * @returns - promise that resolves once the content is scrolled to. + */ + "scrollContentTo": (options?: ScrollToOptions) => Promise; + /** + * Sets focus on the component. + * @returns promise. + */ + "setFocus": () => Promise; + /** + * When `true`, displays a back button in the component's header. + */ + "showBackButton": boolean; + } + 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; + /** + * Value for the button title attribute + */ + "dragHandle": string; + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": HandleMessages; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + "setPosition": number; + "setSize": number; + } + interface CalciteIcon { + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "flipRtl": boolean; + /** + * Displays a specific icon. + * @see [Icons](https://esri.github.io/calcite-ui-icons) + */ + "icon": string; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Accessible name for the component. It is recommended to set this value if your icon is semantic. + */ + "textLabel": string; + } + interface CalciteInlineEditable { + /** + * Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. + */ + "afterConfirm": () => Promise; + /** + * When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. + */ + "controls": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, inline editing is enabled on the component. + */ + "editingEnabled": boolean; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": InlineEditableMessages; + /** + * Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + interface CalciteInput { + /** + * Specifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when `type` is "file". Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) + */ + "accept": string; + /** + * Specifies the text alignment of the component's value. + */ + "alignment": Position; + /** + * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) + */ + "autocomplete": string; + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus": boolean; + /** + * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type. + */ + "clearable": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled": boolean; + "editingEnabled": boolean; + /** + * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) + */ + "enterKeyHint": string; + /** + * When `type` is `"file"`, specifies the component's selected files. + * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files + */ + "files": FileList | undefined; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator": boolean; + /** + * When `true`, the component will not be visible. + * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) + */ + "hidden": boolean; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon": string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + */ + "inputMode": string; + /** + * Accessible name for the component. + */ + "label": string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * When `true`, uses locale formatting for numbers. + */ + "localeFormat": boolean; + /** + * Specifies the maximum value for type "number". + * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) + */ + "max": number; + /** + * Specifies the maximum length of text for the component's value. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) + */ + "maxLength": number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": InputMessages; + /** + * Specifies the minimum value for `type="number"`. + * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) + */ + "min": number; + /** + * Specifies the minimum length of text for the component's value. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) + */ + "minLength": number; + /** + * When `true`, the component can accept more than one value. This property only has an effect when `type` is "email" or "file". Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) + */ + "multiple": boolean; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) + */ + "name": string; + /** + * Specifies the placement of the buttons for `type="number"`. + */ + "numberButtonType": InputPlacement; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) + */ + "pattern": string; + /** + * Specifies placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) + */ + "placeholder": string; + /** + * Adds text to the start of the component. + */ + "prefixText": string; + /** + * When `true`, the component's value can be read, but cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly": boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Selects the text of the component's `value`. + */ + "selectText": () => Promise; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Specifies the granularity the component's `value` must adhere to. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) + */ + "step": number | "any"; + /** + * Adds text to the end of the component. + */ + "suffixText": string; + /** + * Specifies the component type. Note that the following `type`s 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"; + /** + * The component's value. + */ + "value": string; + } + interface CalciteInputDatePicker { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": EffectivePlacement[]; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * Defines the layout of the component. + */ + "layout": "horizontal" | "vertical"; + /** + * Specifies the latest allowed date ("yyyy-mm-dd"). + */ + "max": string; + /** + * Specifies the latest allowed date as a full date object. + */ + "maxAsDate": Date; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": InputDatePickerMessages; + /** + * Specifies the earliest allowed date ("yyyy-mm-dd"). + */ + "min": string; + /** + * Specifies the earliest allowed date as a full date object. + */ + "minAsDate": Date; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. + */ + "numberingSystem": NumberingSystem; + /** + * When `true`, displays the `calcite-date-picker` component. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Specifies the placement of the `calcite-date-picker` relative to the component. + * @default "bottom-start" + */ + "placement": MenuPlacement; + /** + * When `true`, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range. + */ + "proximitySelectionDisabled": boolean; + /** + * When `true`, activates a range for the component. + */ + "range": boolean; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly": boolean; + /** + * Updates the position of the component. + * @param delayed + */ + "reposition": (delayed?: boolean) => Promise; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": "s" | "m" | "l"; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Selected date as a string in ISO format (YYYY-MM-DD) + */ + "value": string | string[]; + /** + * The component's value as a full date object. + */ + "valueAsDate": Date | Date[]; + } + interface CalciteInputMessage { + /** + * Specifies an icon to display. + */ + "icon": boolean | string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + } + interface CalciteInputNumber { + /** + * Specifies the text alignment of the component's value. + */ + "alignment": Position; + /** + * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) + */ + "autocomplete": string; + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus": boolean; + /** + * When `true`, a clear button is displayed when the component has a value. + */ + "clearable": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled": boolean; + "editingEnabled": boolean; + /** + * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) + */ + "enterKeyHint": string; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator": boolean; + /** + * When `true`, the component will not be visible. + * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) + */ + "hidden": boolean; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon": string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + */ + "inputMode": string; + /** + * When `true`, restricts the component to integer numbers only and disables exponential notation. + */ + "integer": boolean; + /** + * Accessible name for the component's button or hyperlink. + */ + "label": string; + /** + * When `true`, the component is in the loading state and `calcite-progress` is displayed. + */ + "loading": boolean; + /** + * Toggles locale formatting for numbers. + */ + "localeFormat": boolean; + /** + * Specifies the maximum value. + * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) + */ + "max": number; + /** + * Specifies the maximum length of text for the component's value. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) + */ + "maxLength": number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": InputNumberMessages; + /** + * Specifies the minimum value. + * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) + */ + "min": number; + /** + * Specifies the minimum length of text for the component's value. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) + */ + "minLength": number; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) + */ + "name": string; + /** + * Specifies the placement of the buttons. + */ + "numberButtonType": InputPlacement; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * Specifies placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) + */ + "placeholder": string; + /** + * Adds text to the start of the component. + */ + "prefixText": string; + /** + * When `true`, the component's value can be read, but cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly": boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Selects the text of the component's `value`. + */ + "selectText": () => Promise; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Specifies the granularity that the component's value must adhere to. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) + */ + "step": number | "any"; + /** + * Adds text to the end of the component. + */ + "suffixText": string; + /** + * The component's value. + */ + "value": string; + } + interface CalciteInputText { + /** + * Specifies the text alignment of the component's value. + */ + "alignment": Position; + /** + * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) + */ + "autocomplete": string; + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus": boolean; + /** + * When `true`, a clear button is displayed when the component has a value. + */ + "clearable": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled": boolean; + "editingEnabled": boolean; + /** + * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) + */ + "enterKeyHint": string; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * When `true`, the component will not be visible. + * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) + */ + "hidden": boolean; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon": string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + */ + "inputMode": string; + /** + * Accessible name for the component's button or hyperlink. + */ + "label": string; + /** + * When `true`, the component is in the loading state and `calcite-progress` is displayed. + */ + "loading": boolean; + /** + * Specifies the maximum length of text for the component's value. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) + */ + "maxLength": number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": InputTextMessages; + /** + * Specifies the minimum length of text for the component's value. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) + */ + "minLength": number; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) + */ + "name": string; + /** + * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) + */ + "pattern": string; + /** + * Specifies placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) + */ + "placeholder": string; + /** + * Adds text to the start of the component. + */ + "prefixText": string; + /** + * When `true`, the component's value can be read, but cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly": boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Selects the text of the component's `value`. + */ + "selectText": () => Promise; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Adds text to the end of the component. + */ + "suffixText": string; + /** + * The component's value. + */ + "value": string; + } + interface CalciteInputTimePicker { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": InputTimePickerMessages; + /** + * Specifies the name of the component on form submission. + */ + "name": string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * When `true`, displays the `calcite-time-picker` component. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Determines where the popover will be positioned relative to the input. + */ + "placement": LogicalPlacement; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly": boolean; + /** + * Updates the position of the component. + * @param delayed + */ + "reposition": (delayed?: boolean) => Promise; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Specifies the granularity the component's `value` must adhere to (in seconds). + */ + "step": number; + /** + * The time value in ISO (24-hour) format. + */ + "value": string; + } + interface CalciteInputTimeZone { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Specifies the component's maximum number of options to display before displaying a scrollbar. + */ + "maxItems": number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": InputTimeZoneMessages; + /** + * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related + * @default "offset" + */ + "mode": TimeZoneMode; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) + * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) + */ + "referenceDate": Date | string; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + "setFocus": () => Promise; + /** + * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. + * @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC. + */ + "value": string; + } + interface CalciteLabel { + /** + * Specifies the text alignment of the component. + */ + "alignment": Alignment; + /** + * Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. + */ + "for": string; + /** + * Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. + */ + "layout": "inline" | "inline-space-between" | "default"; + /** + * Specifies the size of the component. + */ + "scale": Scale; + } + interface CalciteLink { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download. + */ + "download": string | boolean; + /** + * Specifies the URL of the linked resource, which can be set as an absolute or relative path. + */ + "href": string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + /** + * Specifies the relationship to the linked document defined in `href`. + */ + "rel": string; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the frame or window to open the linked document. + */ + "target": string; + } /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; + * A general purpose list that enables users to construct list items that conform to Calcite styling. + */ + interface CalciteList { + /** + * When provided, the method will be called to determine whether the element can move from the list. + */ + "canPull": (detail: ListDragDetail) => boolean; + /** + * When provided, the method will be called to determine whether the element can be added from another list. + */ + "canPut": (detail: ListDragDetail) => boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, `calcite-list-item`s are sortable via a draggable button. + */ + "dragEnabled": boolean; + /** + * When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. + */ + "filterEnabled": boolean; + /** + * Placeholder text for the component's filter input field. + */ + "filterPlaceholder": string; + /** + * Text for the component's filter input field. + */ + "filterText": string; + /** + * The currently filtered `calcite-list-item` data. + * @readonly + */ + "filteredData": ItemData; + /** + * The currently filtered `calcite-list-item`s. + * @readonly + */ + "filteredItems": HTMLCalciteListItemElement[]; + /** + * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. + */ + "group"?: string; + /** + * Specifies an accessible name for the component. + */ + "label": string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * One of the items within the list can be opened. + */ + "openable": boolean; + /** + * The currently selected items. + * @readonly + */ + "selectedItems": HTMLCalciteListItemElement[]; + /** + * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). + */ + "selectionAppearance": SelectionAppearance; + /** + * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + */ + "selectionMode": Extract< + "none" | "multiple" | "single" | "single-persist", + SelectionMode + >; + /** + * Sets focus on the component's first focusable element. + * @returns + */ + "setFocus": () => Promise; + } + interface CalciteListItem { + /** + * Sets the item as focusable. Only one item should be focusable within a list. + */ + "active": boolean; + /** + * When `true`, a close button is added to the component. + */ + "closable": boolean; + /** + * When `true`, hides the component. + */ + "closed": boolean; + /** + * A description for the component. Displays below the label text. + */ + "description": string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, the component displays a draggable button. + */ + "dragHandle": boolean; + /** + * The label text of the component. Displays above the description text. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ListItemMessages; + /** + * Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. + */ + "metadata": Record; + /** + * When `true`, the item is open to show child components. + */ + "open": boolean; + /** + * When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. + */ + "selected": boolean; + /** + * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). + */ + "selectionAppearance": SelectionAppearance; + /** + * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + */ + "selectionMode": Extract< + "none" | "multiple" | "single" | "single-persist", + SelectionMode + >; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility. + */ + "setPosition": number; + /** + * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility. + */ + "setSize": number; + /** + * The component's value. + */ + "value": any; + } + interface CalciteListItemGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The header text for all nested `calcite-list-item` rows. + */ + "heading": string; + } + interface CalciteLoader { + /** + * When `true`, displays smaller and appears to the left of the text. + */ + "inline": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Text that displays under the component's indicator. + */ + "text": string; + /** + * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. + */ + "type": "indeterminate" | "determinate"; + /** + * The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. + */ + "value": number; + } + interface CalciteMenu { + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the layout of the component. + */ + "layout": Layout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only. + */ + "messages": MenuMessages; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + } + interface CalciteMenuItem { + /** + * When `true`, the component is highlighted. + */ + "active": boolean; + /** + * When `true`, the component displays a breadcrumb trail for use as a navigational aid. + */ + "breadcrumb": boolean; + /** + * Specifies the URL destination of the component, which can be set as an absolute or relative path. + */ + "href": string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + "isTopLevelItem": boolean; + /** + * Accessible name for the component. + */ + "label": string; + "layout": Layout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only. + */ + "messages": MenuItemMessages; + /** + * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. + */ + "open": boolean; + /** + * Defines the relationship between the `href` value and the current document. + * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) + */ + "rel": string; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies where to open the linked document defined in the `href` property. + * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) + */ + "target": string; + /** + * Specifies the text to display. + */ + "text": string; + "topLevelMenuLayout": Layout; + } + interface CalciteMeter { + /** + * Specifies the appearance style of the component. + */ + "appearance": Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. + */ + "fillType": "single" | "range"; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator": boolean; + /** + * Specifies a high value. When `fillType` is `"range"`, displays a different color when above the specified threshold. + */ + "high": number; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies a low value. When `fillType` is `"range"`, displays a different color when above the specified threshold. + */ + "low": number; + /** + * Specifies the highest allowed value of the component. + */ + "max": number; + /** + * Specifies the lowest allowed value of the component. + */ + "min": number; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * When either `rangeLabels` is `true`, specifies the format of displayed labels. + */ + "rangeLabelType": MeterLabelType; + /** + * When `true`, displays the values of `high`, `low`, `min`, and `max`. + */ + "rangeLabels": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + */ + "unitLabel": string; + /** + * Specifies the current value of the component. + */ + "value": number; + /** + * When `true`, displays the current value. + */ + "valueLabel": boolean; + /** + * When either `valueLabel` is `true`, specifies the format of displayed label. + */ + "valueLabelType": MeterLabelType; + } + interface CalciteModal { + /** + * Passes a function to run before the component closes. + */ + "beforeClose": (el: HTMLCalciteModalElement) => Promise; + /** + * When `true`, disables the component's close button. + */ + "closeButtonDisabled": boolean; + /** + * When `true`, prevents the component from expanding to the entire screen on mobile devices. + */ + "docked": boolean; + /** + * When `true`, disables the default close on escape behavior. + */ + "escapeDisabled": boolean; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled": boolean; + /** + * Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). + */ + "fullscreen": boolean; + /** + * Specifies the kind of the component (will apply to top border). + */ + "kind": Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ModalMessages; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is. + */ + "opened": boolean; + /** + * When `true`, disables the closing of the component when clicked outside. + */ + "outsideCloseDisabled": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets the scroll top of the component's content. + * @param top + * @param left + */ + "scrollContent": (top?: number, left?: number) => Promise; + /** + * Sets focus on the component's "close" button (the first focusable item). + */ + "setFocus": () => Promise; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "slottedInShell": boolean; + /** + * Updates the element(s) that are used within the focus-trap of the component. + */ + "updateFocusTrapElements": () => Promise; + /** + * Specifies the width of the component. + */ + "widthScale": Scale; + } + interface CalciteNavigation { + /** + * When `navigationAction` is `true`, specifies the label of the `calcite-action`. + */ + "label": string; + /** + * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change. + */ + "navigationAction": boolean; + /** + * When `navigation-action` is `true`, sets focus on the component's action element. + */ + "setFocus": () => Promise; + } + interface CalciteNavigationLogo { + /** + * When true, the component is highlighted. + */ + "active": boolean; + /** + * A description for the component, which displays below the `heading`. + */ + "description": string; + /** + * Specifies heading text for the component, such as a product or organization name. + */ + "heading": string; + /** + * Specifies the URL destination of the component, which can be set as an absolute or relative path. + */ + "href": string; + /** + * Specifies an icon to display. + */ + "icon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. + */ + "label": string; + /** + * Defines the relationship between the `href` value and the current document. + * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) + */ + "rel": string; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies where to open the linked document defined in the `href` property. + * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) + */ + "target": string; + /** + * Specifies the `src` to an image. + */ + "thumbnail": string; + } + interface CalciteNavigationUser { + /** + * When true, the component is highlighted. + */ + "active": boolean; + /** + * Specifies the full name of the user. + */ + "fullName": string; + /** + * Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. + */ + "label": string; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * When `true`, hides the `fullName` and `username` contents. + */ + "textDisabled": boolean; + /** + * Specifies the `src` to an image (remember to add a token if the user is private). + */ + "thumbnail": string; + /** + * Specifies the unique id of the user. + */ + "userId": string; + /** + * Specifies the username of the user. + */ + "username": string; + } + interface CalciteNotice { + /** + * When `true`, a close button is added to the component. + */ + "closable": boolean; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon": string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the kind of the component (will apply to top border and icon). + */ + "kind": Extract< + "brand" | "danger" | "info" | "success" | "warning", + Kind + >; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": NoticeMessages; + /** + * When `true`, the component is visible. + */ + "open": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * Specifies the width of the component. + */ + "width": Width; + } + interface CalciteOption { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * The component's value. + */ + "value": any; + } + interface CalciteOptionGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Accessible name for the component. + */ + "label": string; + } + interface CalcitePagination { + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": PaginationMessages; + /** + * Go to the next page of results. + */ + "nextPage": () => Promise; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * Specifies the number of items per page. + */ + "pageSize": number; + /** + * Go to the previous page of results. + */ + "previousPage": () => Promise; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * Specifies the starting item number. + */ + "startItem": number; + /** + * Specifies the total number of items. + */ + "totalItems": number; + } + interface CalcitePanel { + /** + * When `true`, displays a close button in the trailing side of the header. + */ + "closable": boolean; + /** + * When `true`, the component will be hidden. + */ + "closed": boolean; + /** + * Specifies the direction of the collapse. + */ + "collapseDirection": "down" | "up"; + /** + * When `true`, hides the component's content area. + */ + "collapsed": boolean; + /** + * When `true`, the component is collapsible. + */ + "collapsible": boolean; + /** + * A description for the component. + */ + "description": string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * When `true`, the action menu items in the `header-menu-actions` slot are open. + */ + "menuOpen": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": PanelMessages; + /** + * Scrolls the component's content to a specified set of coordinates. + * @example myCalciteFlowItem.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). }); + * @param options - allows specific coordinates to be defined. + * @returns - promise that resolves once the content is scrolled to. + */ + "scrollContentTo": (options?: ScrollToOptions) => Promise; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + } /** - * Specifies the kind of the component (will apply to top border and icon). - */ - kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; + * @deprecated Use the `list` component instead. + */ + interface CalcitePickList { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "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; + /** + * Text for the filter input field. + */ + "filterText": string; + /** + * The currently filtered data. + * @readonly + */ + "filteredData": ItemData1; + /** + * The currently filtered items. + * @readonly + */ + "filteredItems": HTMLCalcitePickListItemElement[]; + /** + * Returns the component's selected `calcite-pick-list-item`s. + */ + "getSelectedItems": () => Promise>; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-pick-list-item`s at a time. When `false`, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections. + */ + "multiple": boolean; + /** + * When `true` and single selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard. + */ + "selectionFollowsFocus": boolean; + /** + * Sets focus on the component's first focusable element. + * @param focusId + */ + "setFocus": (focusId?: ListFocusId) => Promise; + } /** - * Specifies an accessible name for the component. - */ - label: string; + * @deprecated Use the `list` component instead. + */ + interface CalcitePickListGroup { + /** + * Specifies the title for all nested `calcite-pick-list-item`s. + */ + "groupTitle": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + } /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; + * @deprecated Use the `list` component instead. + */ + interface CalcitePickListItem { + /** + * A description for the component that displays below the label text. + */ + "description": string; + /** + * When `false`, the component cannot be deselected by user interaction. + */ + "deselectDisabled": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. + * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) + */ + "icon": ICON_TYPES | null; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Label and accessible name for the component. Appears next to the icon. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": PickListItemMessages; + /** + * Provides additional metadata to the component. Primary use is for a filter on the parent list. + */ + "metadata": Record; + "nonInteractive": boolean; + /** + * When `true`, displays a remove action that removes the item from the list. + */ + "removable": boolean; + /** + * When `true`, selects an item. Toggles when an item is checked/unchecked. + */ + "selected": boolean; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Toggles the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values. + * @param coerce + */ + "toggleSelected": (coerce?: boolean) => Promise; + /** + * The component's value. + */ + "value": any; + } + interface CalcitePopover { + /** + * When `true`, clicking outside of the component automatically closes open `calcite-popover`s. + */ + "autoClose": boolean; + /** + * When `true`, display a close button within the component. + */ + "closable": boolean; + /** + * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. + */ + "flipDisabled": boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": EffectivePlacement[]; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": PopoverMessages; + /** + * Offsets the position of the popover away from the `referenceElement`. + * @default 6 + */ + "offsetDistance": number; + /** + * Offsets the position of the component along the `referenceElement`. + */ + "offsetSkidding": number; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Determines where the component will be positioned relative to the `referenceElement`. + */ + "placement": LogicalPlacement; + /** + * When `true`, removes the caret pointer. + */ + "pointerDisabled": boolean; + /** + * The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used. + */ + "referenceElement": ReferenceElement | string; + /** + * Updates the position of the component. + * @param delayed + */ + "reposition": (delayed?: boolean) => Promise; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to `true` to manage when the component is open. + */ + "triggerDisabled": boolean; + /** + * Updates the element(s) that are used within the focus-trap of the component. + */ + "updateFocusTrapElements": () => Promise; + } + interface CalciteProgress { + /** + * Accessible name for the component. + */ + "label": string; + /** + * When `true` and for `"indeterminate"` progress bars, reverses the animation direction. + */ + "reversed": boolean; + /** + * Text that displays under the component's indicator. + */ + "text": string; + /** + * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. + */ + "type": "indeterminate" | "determinate"; + /** + * When `type` is `"determinate"`, the component's progress value with a range of 0.0 - 1.0. + */ + "value": number; + } + interface CalciteRadioButton { + /** + * When `true`, the component is checked. + */ + "checked": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + "emitCheckedChange": () => Promise; + /** + * The focused state of the component. + */ + "focused": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * The `id` of the component. When omitted, a globally unique identifier is used. + */ + "guid": string; + /** + * When `true`, the component is not displayed and is not focusable or checkable. + */ + "hidden": boolean; + /** + * The hovered state of the component. + */ + "hovered": boolean; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Specifies the name of the component. Can be inherited from `calcite-radio-button-group`. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component inherited from the `calcite-radio-button-group`. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's value. + */ + "value": any; + } + interface CalciteRadioButtonGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. + */ + "hidden": boolean; + /** + * Defines the layout of the component. + */ + "layout": Layout; + /** + * Specifies the name of the component on form submission. Must be unique to other component instances. + */ + "name": string; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the component's selected item. + * @readonly + */ + "selectedItem": HTMLCalciteRadioButtonElement; + /** + * Sets focus on the fist focusable `calcite-radio-button` element in the component. + */ + "setFocus": () => Promise; + } + interface CalciteRating { + /** + * Specifies a cumulative average from previous ratings to display. + */ + "average": number; + /** + * Specifies the number of previous ratings to display. + */ + "count": number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": RatingMessages; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * When `true`, the component's value can be read, but cannot be modified. + */ + "readOnly": boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. + */ + "showChip": boolean; + /** + * The component's value. + */ + "value": number; + } + interface CalciteScrim { + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ScrimMessages; + } + interface CalciteSegmentedControl { + /** + * Specifies the appearance style of the component. + */ + "appearance": Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Defines the layout of the component. + */ + "layout": Extract<"horizontal" | "vertical", Layout>; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * The component's selected item `HTMLElement`. + * @readonly + */ + "selectedItem": HTMLCalciteSegmentedControlItemElement; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's `selectedItem` value. + */ + "value": string; + /** + * Specifies the width of the component. + */ + "width": Extract<"auto" | "full", Width>; + } + interface CalciteSegmentedControlItem { + /** + * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`. + */ + "appearance": Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, the component is checked. + */ + "checked": boolean; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + /** + * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. + */ + "layout": Layout; + /** + * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`. + */ + "scale": Scale; + /** + * The component's value. + */ + "value": any | null; + } + interface CalciteSelect { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * The component's selected option `HTMLElement`. + * @readonly + */ + "selectedOption": HTMLCalciteOptionElement; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's `selectedOption` value. + */ + "value": string; + /** + * Specifies the width of the component. + */ + "width": Width; + } + interface CalciteSheet { + /** + * Passes a function to run before the component closes. + * @returns + */ + "beforeClose": (el: HTMLCalciteSheetElement) => Promise; + /** + * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). + */ + "displayMode": DisplayMode; + /** + * When `true`, disables the default close on escape behavior. + */ + "escapeDisabled": boolean; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled": boolean; + /** + * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. + */ + "heightScale": Scale; + /** + * Specifies the label of the component. + */ + "label": string; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is . + */ + "opened": boolean; + /** + * When `true`, disables the closing of the component when clicked outside. + */ + "outsideCloseDisabled": boolean; + /** + * Determines where the component will be positioned. + */ + "position": LogicalFlowPosition; + /** + * Sets focus on the component's "close" button (the first focusable item). + */ + "setFocus": () => Promise; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "slottedInShell": boolean; + /** + * Updates the element(s) that are used within the focus-trap of the component. + */ + "updateFocusTrapElements": () => Promise; + /** + * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. + */ + "widthScale": Scale; + } + interface CalciteShell { + /** + * Positions the center content behind any `calcite-shell-panel`s. + */ + "contentBehind": boolean; + } + interface CalciteShellCenterRow { + /** + * When `true`, the content area displays like a floating panel. + */ + "detached": boolean; + /** + * Specifies the maximum height of the component. + */ + "heightScale": Scale; + /** + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "position": Position; + } + interface CalciteShellPanel { + /** + * When `true`, hides the component's content area. + */ + "collapsed": boolean; + /** + * When `true`, the content area displays like a floating panel. + * @deprecated use `displayMode` instead. + */ + "detached": boolean; + /** + * When `displayMode` is `float`, specifies the maximum height of the component. + * @deprecated use `heightScale` instead. + */ + "detachedHeightScale": Scale; + /** + * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content). + */ + "displayMode": DisplayMode1; + /** + * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. + */ + "heightScale": Scale; + /** + * The direction of the component. + */ + "layout": Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ShellPanelMessages; + /** + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "position": Position; + /** + * When `true` and `displayMode` is not `float`, the component's content area is resizable. + */ + "resizable": boolean; + /** + * When `layout` is `vertical`, specifies the width of the component. + */ + "widthScale": Scale; + } + interface CalciteSlider { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator": boolean; + /** + * When `true`, indicates a histogram is present. + */ + "hasHistogram": boolean; + /** + * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track. + * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5) + */ + "histogram": DataSeries; + /** + * A set of single color stops for a histogram, sorted by offset ascending. + */ + "histogramStops": ColorStop[]; + /** + * When `true`, displays label handles with their numeric value. + */ + "labelHandles": boolean; + /** + * When `true` and `ticks` is specified, displays label tick marks with their numeric value. + */ + "labelTicks": boolean; + /** + * The component's maximum selectable value. + */ + "max": number; + /** + * For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. + */ + "maxLabel": string; + /** + * For multiple selections, the component's upper value. + */ + "maxValue": number; + /** + * The component's minimum selectable value. + */ + "min": number; + /** + * Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. + */ + "minLabel": string; + /** + * For multiple selections, the component's lower value. + */ + "minValue": number; + /** + * When `true`, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. + */ + "mirrored": boolean; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * Specifies the interval to move with the page up, or page down keys. + */ + "pageStep": number; + /** + * When `true`, sets a finer point for handles. + */ + "precise": boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * When `true`, enables snap selection in coordination with `step` via a mouse. + */ + "snap": boolean; + /** + * Specifies the interval to move with the up, or down keys. + */ + "step": number; + /** + * Displays tick marks on the number line at a specified interval. + */ + "ticks": number; + /** + * The component's value. + */ + "value": null | number | number[]; + } + interface CalciteSortableList { + /** + * When provided, the method will be called to determine whether the element can move from the list. + */ + "canPull": (detail: DragDetail) => boolean; + /** + * When provided, the method will be called to determine whether the element can be added from another list. + */ + "canPut": (detail: DragDetail) => boolean; + /** + * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. + */ + "disabled": boolean; + /** + * Specifies which items inside the element should be draggable. + */ + "dragSelector"?: string; + /** + * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. + */ + "group"?: string; + /** + * The selector for the handle elements. + */ + "handleSelector": string; + /** + * Indicates the horizontal or vertical orientation of the component. + */ + "layout": Layout; + /** + * When true, content is waiting to be loaded. This state shows a busy indicator. + */ + "loading": boolean; + } + interface CalciteSplitButton { + /** + * When `true`, the component is active. + */ + "active": boolean; + /** + * Specifies the appearance style of the component. + */ + "appearance": Extract< + "outline" | "outline-fill" | "solid" | "transparent", + Appearance + >; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies the icon used for the dropdown menu. + */ + "dropdownIconType": DropdownIconType; + /** + * Accessible name for the dropdown menu. + */ + "dropdownLabel": string; + /** + * Specifies the kind of the component (will apply to border and background if applicable). + */ + "kind": Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; + /** + * When `true`, a busy indicator is displayed on the primary button. + */ + "loading": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Specifies an icon to display at the end of the primary button. + */ + "primaryIconEnd": string; + /** + * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "primaryIconFlipRtl": FlipContext; + /** + * Specifies an icon to display at the start of the primary button. + */ + "primaryIconStart": string; + /** + * Accessible name for the primary button. + */ + "primaryLabel": string; + /** + * Text displayed in the primary button. + */ + "primaryText": string; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * Specifies the width of the component. + */ + "width": Width; + } + interface CalciteStack { + /** + * When `true`, content interaction is prevented and displayed with lower opacity. + */ + "disabled": boolean; + } + interface CalciteStepper { + /** + * Set the last `calcite-stepper-item` as active. + */ + "endStep": () => Promise; + /** + * Set a specified `calcite-stepper-item` as active. + * @param step + */ + "goToStep": (step: number) => Promise; + /** + * When `true`, displays a status icon in the `calcite-stepper-item` heading. + */ + "icon": boolean; + /** + * Defines the layout of the component. + */ + "layout": Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": StepperMessages; + /** + * Set the next `calcite-stepper-item` as active. + */ + "nextStep": () => Promise; + /** + * When `true`, displays the step number in the `calcite-stepper-item` heading. + */ + "numbered": boolean; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Set the previous `calcite-stepper-item` as active. + */ + "prevStep": () => Promise; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the component's selected item. + * @readonly + */ + "selectedItem": HTMLCalciteStepperItemElement; + /** + * Set the first `calcite-stepper-item` as active. + */ + "startStep": () => Promise; + } + interface CalciteStepperItem { + /** + * When `true`, the step has been completed. + */ + "complete": boolean; + /** + * A description for the component. Displays below the header text. + */ + "description": string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, the component contains an error that requires resolution from the user. + */ + "error": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. + */ + "icon": boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`. + */ + "layout": Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": StepperItemMessages; + /** + * Specifies if the user is viewing one `stepper-item` at a time. Helps in determining if header region is tabbable. + */ + "multipleViewMode": boolean; + /** + * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. + */ + "numbered": boolean; + "numberingSystem": NumberingSystem; + /** + * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`. + */ + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + interface CalciteSwitch { + /** + * When `true`, the component is checked. + */ + "checked": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's value. + */ + "value": any; + } + interface CalciteTab { + /** + * Returns the index of the component item within the tab array. + */ + "getTabIndex": () => Promise; + /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + */ + "scale": Scale; + /** + * When `true`, the component's contents are selected. Only one tab can be selected within the `calcite-tabs` parent. + */ + "selected": boolean; + /** + * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab-title`. + */ + "tab": string; + /** + * @param tabIds + * @param titleIds + */ + "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise; + } + interface CalciteTabNav { + "bordered": boolean; + "indicatorOffset": number; + "indicatorWidth": number; + "layout": TabLayout; + /** + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. + */ + "position": TabPosition; + /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + */ + "scale": Scale; + /** + * Specifies the component's selected tab-title. + * @readonly + */ + "selectedTitle": HTMLCalciteTabTitleElement; + /** + * Specifies the name when saving selected `calcite-tab` data to `localStorage`. + */ + "storageId": string; + /** + * Specifies text to update multiple components to keep in sync if one changes. + */ + "syncId": string; + } + interface CalciteTabTitle { + "bordered": boolean; + /** + * When `true`, a close button is added to the component. + */ + "closable": boolean; + /** + * When `true`, does not display or position the component. + */ + "closed": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + "getTabIdentifier": () => Promise; + /** + * Returns the index of the title within the `calcite-tab-nav`. + */ + "getTabIndex": () => Promise; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + "layout": TabLayout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TabTitleMessages; + /** + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. + */ + "position": TabPosition; + /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + */ + "scale": Scale; + /** + * When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. + */ + "selected": boolean; + /** + * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. + */ + "tab": string; + /** + * @param tabIds + * @param titleIds + */ + "updateAriaInfo": (tabIds?: string[], titleIds?: string[]) => Promise; + } + interface CalciteTable { + /** + * When `true`, displays borders in the component. + */ + "bordered": boolean; + /** + * Specifies an accessible title for the component. + */ + "caption": string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator": boolean; + /** + * Specifies the layout of the component. + */ + "layout": TableLayout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TableMessages; + /** + * When `true`, displays the position of the row in numeric form. + */ + "numbered": boolean; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Specifies the page size of the component. When `true`, renders `calcite-pagination` + */ + "pageSize": number; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems": HTMLCalciteTableRowElement[]; + /** + * Specifies the selection mode of the component. + */ + "selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>; + /** + * When `true`, displays zebra styling in the component. + */ + "zebra": boolean; + } + interface CalciteTableCell { + /** + * Specifies the alignment of the component. + */ + "alignment": Alignment; + /** + * Specifies the number of columns the component should span. + */ + "colSpan": number; + /** + * When true, prevents user interaction. Notes: This prop should use the + */ + "disabled": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TableCellMessages; + "numberCell": boolean; + "parentRowIsSelected": boolean; + "parentRowPositionLocalized": string; + "parentRowType": RowType; + "positionInRow": number; + "readCellContentsToAT": boolean; + /** + * Specifies the number of rows the component should span. + */ + "rowSpan": number; + "scale": Scale; + "selectionCell": boolean; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + interface CalciteTableHeader { + /** + * Specifies the alignment of the component. + */ + "alignment": Alignment; + "bodyRowCount": number; + /** + * Specifies the number of columns the component should span. + */ + "colSpan": number; + /** + * A description to display beneath heading content. + */ + "description": string; + /** + * A heading to display above description content. + */ + "heading": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TableHeaderMessages; + "numberCell": boolean; + "parentRowPosition": number; + "parentRowType": RowType; + "positionInRow": number; + /** + * Specifies the number of rows the component should span. + */ + "rowSpan": number; + "scale": Scale; + "selectedRowCount": number; + "selectedRowCountLocalized": string; + "selectionCell": boolean; + "selectionMode": SelectionMode; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + interface CalciteTableRow { + "bodyRowCount": number; + "cellCount": number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + "numbered": boolean; + "positionAll": number; + "positionSection": number; + "positionSectionLocalized": string; + "readCellContentsToAT": boolean; + "rowType": RowType; + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + "selectedRowCount": number; + "selectedRowCountLocalized": string; + "selectionMode": Extract<"multiple" | "single" | "none", SelectionMode>; + } + interface CalciteTabs { + /** + * When `true`, the component will display with a folder style menu. + */ + "bordered": boolean; + /** + * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`). + */ + "layout": TabLayout; + /** + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. + */ + "position": TabPosition; + /** + * Specifies the size of the component, defaults to `m`. + */ + "scale": Scale; + } + interface CalciteTextArea { + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus": boolean; + /** + * Specifies the component's number of columns. + * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols) + */ + "columns": number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled": boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form": string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the maximum number of characters allowed. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength) + */ + "maxLength": number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TextAreaMessages; + /** + * Specifies the name of the component. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name) + */ + "name": string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * Specifies the placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder) + */ + "placeholder": string; + /** + * When `true`, the component's `value` can be read, but cannot be modified. + * @readonly + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly": boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required + */ + "required": boolean; + /** + * Specifies if the component is resizable. + */ + "resize": "both" | "horizontal" | "vertical" | "none"; + /** + * Specifies the component's number of rows. + * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) + */ + "rows": number; + /** + * Specifies the size of the component. + */ + "scale": "l" | "m" | "s"; + /** + * Selects the text of the component's `value`. + */ + "selectText": () => Promise; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The component's value. + */ + "value": string; + /** + * Specifies the wrapping mechanism for the text. + * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap) + */ + "wrap": "soft" | "hard"; + } + interface CalciteTile { + /** + * When `true`, the component is active. + */ + "active": boolean; + /** + * A description for the component, which displays below the heading. + */ + "description": string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The component's embed mode. When `true`, renders without a border and padding for use by other components. + */ + "embed": boolean; + /** + * The focused state of the component. + */ + "focused": boolean; + /** + * The component header text, which displays between the icon and description. + */ + "heading": string; + /** + * When `true`, the component is not displayed and is not focusable. + */ + "hidden": boolean; + /** + * When embed is `"false"`, the URL for the component. + */ + "href": string; + /** + * Specifies an icon to display. + */ + "icon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + } + interface CalciteTileSelect { + /** + * When `true`, the component is checked. + */ + "checked": boolean; + /** + * A description for the component, which displays below the heading. + */ + "description": string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * The component header text, which displays between the icon and description. + */ + "heading": string; + /** + * When `true`, the component is not displayed and is not focusable or checkable. + */ + "hidden": boolean; + /** + * Specifies an icon to display. + */ + "icon": string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. + */ + "inputAlignment": Extract<"end" | "start", Alignment>; + /** + * When `true`, displays an interactive input based on the `type` property. + */ + "inputEnabled": boolean; + /** + * Specifies the name of the component on form submission. + */ + "name": any; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * The selection mode of the component. Use radio for single selection, and checkbox for multiple selections. + */ + "type": TileSelectType; + /** + * The component's value. + */ + "value": any; + /** + * Specifies the width of the component. + */ + "width": Extract<"auto" | "full", Width>; + } + interface CalciteTileSelectGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. + */ + "layout": TileSelectGroupLayout; + } + interface CalciteTimePicker { + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TimePickerMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + /** + * Specifies the granularity the `value` must adhere to (in seconds). + */ + "step": number; + /** + * The component's value in UTC (always 24-hour format). + */ + "value": string; + } + interface CalciteTip { + /** + * When `true`, the close button is not present on the component. + */ + "closeDisabled": boolean; + /** + * When `true`, the component does not display. + */ + "closed": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TipMessages; + /** + * When `true`, the component is selected if it has a parent `calcite-tip-manager`. Only one tip can be selected within the `calcite-tip-manager` parent. + */ + "selected": boolean; + } + interface CalciteTipGroup { + /** + * The component header text for all nested `calcite-tip`s. + */ + "groupTitle": string; + } + interface CalciteTipManager { + /** + * When `true`, does not display or position the component. + */ + "closed": boolean; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel": HeadingLevel; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": TipManagerMessages; + /** + * Selects the next `calcite-tip` to display. + */ + "nextTip": () => Promise; + /** + * Selects the previous `calcite-tip` to display. + */ + "previousTip": () => Promise; + } + interface CalciteTooltip { + /** + * Closes the component when the `referenceElement` is clicked. + */ + "closeOnClick": boolean; + /** + * Accessible name for the component. + * @deprecated No longer necessary. Overrides the context of the component's description, which could confuse assistive technology users. + */ + "label": string; + /** + * Offset the position of the component away from the `referenceElement`. + * @default 6 + */ + "offsetDistance": number; + /** + * Offset the position of the component along the `referenceElement`. + */ + "offsetSkidding": number; + /** + * When `true`, the component is open. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning; + /** + * Determines where the component will be positioned relative to the `referenceElement`. + */ + "placement": LogicalPlacement; + /** + * The `referenceElement` to position the component according to its `"placement"` value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used. + */ + "referenceElement": ReferenceElement | string; + /** + * Updates the position of the component. + * @param delayed + */ + "reposition": (delayed?: boolean) => Promise; + } + interface CalciteTree { + "child": boolean; + /** + * Displays indentation guide lines. + */ + "lines": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems": HTMLCalciteTreeItemElement[]; + /** + * Specifies the selection mode, where `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. + * @default "single" + */ + "selectionMode": SelectionMode; + } + interface CalciteTreeItem { + "depth": number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, the component is expanded. + */ + "expanded": boolean; + "hasChildren": boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": string; + /** + * In ancestor selection mode, show as indeterminate when only some children are selected. + */ + "indeterminate": boolean; + "lines": boolean; + "parentExpanded": boolean; + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + "selectionMode": SelectionMode; + } /** - * Made into a prop for testing purposes only - */ - messages: AlertMessages; + * @deprecated Use the `list` component instead. + */ + interface CalciteValueList { + /** + * When provided, the method will be called to determine whether the element can move from the list. + */ + "canPull": (detail: DragDetail) => boolean; + /** + * When provided, the method will be called to determine whether the element can be added from another list. + */ + "canPut": (detail: DragDetail) => boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * When `true`, `calcite-value-list-item`s are sortable via a draggable button. + */ + "dragEnabled": boolean; + /** + * When `true`, an input appears at the top of the component that can be used by end users to filter list items. + */ + "filterEnabled": boolean; + /** + * Placeholder text for the filter's input field. + */ + "filterPlaceholder": string; + /** + * Text for the filter input field. + */ + "filterText": string; + /** + * The currently filtered data. + * @readonly + */ + "filteredData": ItemData1; + /** + * The currently filtered items. + * @readonly + */ + "filteredItems": HTMLCalciteValueListItemElement[]; + /** + * Returns the currently selected items + */ + "getSelectedItems": () => Promise>; + /** + * The component's group identifier. To drag elements from one list into another, both lists must have the same group value. + */ + "group"?: string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading": boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ValueListMessages; + /** + * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. + */ + "multiple": boolean; + /** + * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. + */ + "selectionFollowsFocus": boolean; + /** + * Sets focus on the component's first focusable element. + * @param focusId + */ + "setFocus": (focusId?: ListFocusId) => Promise; + } /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * Specifies the placement of the component - */ - placement: MenuPlacement; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's "close" button (the first focusable item). - */ - setFocus: () => Promise; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - slottedInShell: boolean; - } - interface CalciteAvatar { - /** - * Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. - */ - fullName: string; - /** - * Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label. - */ - label: string; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the `src` to an image (remember to add a token if the user is private). - */ - thumbnail: string; - /** - * Specifies the unique id of the user. - */ - userId: string; - /** - * Specifies the username of the user. - */ - username: string; - } - interface CalciteBlock { - /** - * When `true`, the component is collapsible. - */ - collapsible: boolean; - /** - * A description for the component, which displays below the heading. - */ - description: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, displays a drag handle in the header. - */ - dragHandle: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: BlockMessages; - /** - * When `true`, expands the component and its contents. - */ - open: boolean; - /** - * Sets focus on the component's first tabbable element. - */ - setFocus: () => Promise; - /** - * Displays a status-related indicator icon. - */ - status: Status; - } - interface CalciteBlockSection { - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: BlockSectionMessages; - /** - * When `true`, expands the component and its contents. - */ - open: boolean; - /** - * Sets focus on the component's first tabbable element. - */ - setFocus: () => Promise; - /** - * Displays a status-related indicator icon. - */ - status: Status; - /** - * The component header text. - */ - text: string; - /** - * Specifies the component's toggle display - `"button"` (selectable header), or `"switch"` (toggle switch). - */ - toggleDisplay: BlockSectionToggleDisplay; - } - interface CalciteButton { - /** - * Specifies the alignment of the component's elements. - */ - alignment: ButtonAlignment; - /** - * Specifies the appearance style of the component. - */ - appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Specifies the URL of the linked resource, which can be set as an absolute or relative path. - */ - href: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - /** - * Specifies the kind of the component (will apply to border and background if applicable). - */ - kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; - /** - * Accessible name for the component. - */ - label: string; - /** - * When `true`, a busy indicator is displayed and interaction is disabled. - */ - loading: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ButtonMessages; - /** - * Specifies the name of the component on form submission. - */ - name?: string; - /** - * Defines the relationship between the `href` value and the current document. - * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) - */ - rel: string; - /** - * When `true`, adds a round style to the component. - */ - round: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies if the component is a child of a `calcite-split-button`. - */ - splitChild: "primary" | "secondary" | false; - /** - * Specifies where to open the linked document defined in the `href` property. - * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) - */ - target: string; - /** - * Specifies the default behavior of the button. - * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) - */ - type: string; - /** - * Specifies the width of the component. - */ - width: Width; - } - interface CalciteCard { - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: CardMessages; - /** - * When `true`, the component is selectable. - */ - selectable: boolean; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * Sets the placement of the thumbnail defined in the `thumbnail` slot. - */ - thumbnailPosition: LogicalFlowPosition; - } - interface CalciteCheckbox { - /** - * When `true`, the component is checked. - */ - checked: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * The `id` attribute of the component. When omitted, a globally unique identifier is used. - */ - guid: string; - /** - * The hovered state of the checkbox. - */ - hovered: boolean; - /** - * When `true`, the component is initially indeterminate, which is independent from its `checked` value. The state is visual only, and can look different across browsers. - * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) - */ - indeterminate: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the name of the component on form submission. - */ - name: string; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's value. - */ - value: any; - } - interface CalciteChip { - /** - * Specifies the appearance style of the component. - */ - appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, a close button is added to the component. - */ - closable: boolean; - /** - * When `true`, hides the component. - */ - closed: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies an icon to display. - */ - icon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit. This is set to `true` by a parent Chip Group component. - */ - interactive: boolean; - /** - * Specifies the kind of the component (will apply to border and background if applicable). - */ - kind: Extract<"brand" | "inverse" | "neutral", Kind>; - /** - * Accessible name for the component. - */ - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ChipMessages; - /** - * Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. - */ - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * This internal property, managed by a containing `calcite-chip-group`, is conditionally set based on the `selectionMode` of the parent - */ - selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's value. - */ - value: any; - } - interface CalciteChipGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the size of the component. Child `calcite-chip`s inherit the component's value. - */ - scale: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems: HTMLCalciteChipElement[]; - /** - * Specifies the selection mode of the component. - */ - selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - } - interface CalciteColorPicker { - /** - * When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. - */ - allowEmpty: boolean; - /** - * When true, the component will allow updates to the color's alpha value. - */ - alphaChannel: boolean; - /** - * When true, hides the RGB/HSV channel inputs - */ - channelsDisabled: boolean; - /** - * Internal prop for advanced use-cases. - */ - color: InternalColor | null; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The format of `value`. When `"auto"`, the format will be inferred from `value` when set. - * @default "auto" - */ - format: Format; - /** - * When true, hides the hex input - */ - hexDisabled: boolean; - /** - * When `true`, hides the RGB/HSV channel inputs. - * @deprecated use `channelsDisabled` instead - */ - hideChannels: boolean; - /** - * When `true`, hides the hex input. - * @deprecated use `hexDisabled` instead - */ - hideHex: boolean; - /** - * When `true`, hides the saved colors section. - * @deprecated use `savedDisabled` instead - */ - hideSaved: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ColorPickerMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * When true, hides the saved colors section - */ - savedDisabled: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * Specifies the storage ID for colors. - */ - storageId: string; - /** - * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. - * @default "#007ac2" - * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) - * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/main/src/components/color-picker/interfaces.ts#L10) - */ - value: ColorValue | null; - } - interface CalciteColorPickerHexInput { - /** - * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. - */ - allowEmpty: boolean; - /** - * When true, the component will allow updates to the color's alpha value. - */ - alphaChannel: boolean; - /** - * Specifies accessible label for the input field. - * @deprecated use `messages` instead - */ - hexLabel: string; - /** - * Messages are passed by parent component for accessible labels. - */ - messages: ColorPickerMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The hex value. - */ - value: string; - } - interface CalciteColorPickerSwatch { - /** - * When `true`, the component is active. - */ - active: boolean; - /** - * The color value. - * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value - */ - color: string | null; - /** - * Specifies the size of the component. - */ - scale: Scale; - } - interface CalciteCombobox { - /** - * When `true`, allows entry of custom values, which are not in the original set of items. - */ - allowCustomValues: boolean; - /** - * When `true`, the value-clearing will be disabled. - */ - clearDisabled: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies the component's filtered items. - * @readonly - */ - filteredItems: HTMLCalciteComboboxItemElement[]; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements: EffectivePlacement[]; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. - */ - maxItems: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ComboboxMessages; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Specifies the placeholder text for the input. - */ - placeholder: string; - /** - * Specifies the placeholder icon for the input. - */ - placeholderIcon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - placeholderIconFlipRtl: boolean; - /** - * Updates the position of the component. - * @param delayed - */ - reposition: (delayed?: boolean) => Promise; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems: HTMLCalciteComboboxItemElement[]; - /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. - */ - selectionMode: Extract<"single" | "single-persist" | "ancestors" | "multiple", SelectionMode>; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's value(s) from the selected `calcite-combobox-item`(s). - */ - value: string | string[]; - } - interface CalciteComboboxItem { - /** - * When `true`, the component is active. - */ - active: boolean; - /** - * Specifies the parent and grandparent items, which are set on `calcite-combobox`. - */ - ancestors: ComboboxChildElement[]; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, omits the component from the `calcite-combobox` filtered search results. - */ - filterDisabled: boolean; - /** - * The `id` attribute of the component. When omitted, a globally unique identifier is used. - */ - guid: string; - /** - * Specifies an icon to display. - */ - icon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. - */ - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. - */ - selectionMode: Extract<"single" | "single-persist" | "ancestors" | "multiple", SelectionMode>; - /** - * The component's text. - */ - textLabel: string; - /** - * The component's value. - */ - value: any; - } - interface CalciteComboboxItemGroup { - /** - * When `true`, signifies that the group comes after another group without any children (items or sub-groups), otherwise indicates that the group comes after another group that has children. Used for styling. - */ - afterEmptyGroup: boolean; - /** - * Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. - */ - ancestors: ComboboxChildElement[]; - /** - * Specifies the title of the component. - */ - label: string; - /** - * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. - */ - scale: Scale; - } - interface CalciteDatePicker { - /** - * Specifies the component's active date. - */ - activeDate: Date; - /** - * When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. - */ - activeRange: "start" | "end"; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * Specifies the latest allowed date (`"yyyy-mm-dd"`). - */ - max: string; - /** - * Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). - */ - maxAsDate: Date; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: DatePickerMessages; - /** - * Specifies the earliest allowed date (`"yyyy-mm-dd"`). - */ - min: string; - /** - * Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). - */ - minAsDate: Date; - /** - * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. - */ - numberingSystem: NumberingSystem; - /** - * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. - */ - proximitySelectionDisabled: boolean; - /** - * When `true`, activates the component's range mode to allow a start and end date. - */ - range: boolean; - /** - * Resets active date state. - */ - reset: () => Promise; - /** - * Specifies the size of the component. - */ - scale: "s" | "m" | "l"; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). - */ - value: string | string[]; - /** - * Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). - */ - valueAsDate: Date | Date[]; - } - interface CalciteDatePickerDay { - /** - * When `true`, the component is active. - */ - active: boolean; - /** - * Date is in the current month. - */ - currentMonth: boolean; - /** - * The DateTimeFormat used to provide screen reader labels. - */ - dateTimeFormat: Intl.DateTimeFormat; - /** - * Day of the month to be shown. - */ - day: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Date is the end of date range - */ - endOfRange: boolean; - /** - * Date is currently highlighted as part of the range - */ - highlighted: boolean; - /** - * When `true`, activates the component's range mode to allow a start and end date. - */ - range: boolean; - /** - * When `true`, highlight styling for edge dates is applied. - */ - rangeEdge: "start" | "end" | undefined; - /** - * Date is being hovered and within the set range - */ - rangeHover: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * Date is the start of date range - */ - startOfRange: boolean; - /** - * The component's value. - */ - value: Date; - } - interface CalciteDatePickerMonth { - /** - * Date currently active. - */ - activeDate: Date; - /** - * The DateTimeFormat used to provide screen reader labels. - */ - dateTimeFormat: Intl.DateTimeFormat; - /** - * End date currently active - */ - endDate?: Date; - /** - * The range of dates currently being hovered - */ - hoverRange: HoverRange; - /** - * CLDR locale data for current locale - */ - localeData: DateLocaleData; - /** - * Specifies the latest allowed date (`"yyyy-mm-dd"`). - */ - max: Date; - /** - * Specifies the earliest allowed date (`"yyyy-mm-dd"`). - */ - min: Date; - /** - * Specifies the size of the component. - */ - 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; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * CLDR locale data for translated calendar info - */ - localeData: DateLocaleData; - /** - * Specifies the latest allowed date (`"yyyy-mm-dd"`). - */ - max: Date; - /** - * This property specifies accessible strings for the component's previous month button ,next month button & year input elements. Made into a prop for testing purposes only. - * @readonly - */ - messages: DatePickerMessages; - /** - * Specifies the earliest allowed date (`"yyyy-mm-dd"`). - */ - min: Date; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Already selected date. - */ - selectedDate: Date; - } - interface CalciteDropdown { - /** - * When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. - */ - closeOnSelectDisabled: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements: EffectivePlacement[]; - /** - * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. - */ - maxItems: number; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-start" - */ - placement: MenuPlacement; - /** - * Updates the position of the component. - * @param delayed - */ - reposition: (delayed?: boolean) => Promise; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems: HTMLCalciteDropdownItemElement[]; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * Specifies the action to open the component from the container element. - */ - type: "hover" | "click"; - /** - * Specifies the width of the component. - */ - width: Scale; - } - interface CalciteDropdownGroup { - /** - * Specifies and displays a group title. - */ - groupTitle: string; - /** - * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`. - */ - scale: Scale; - /** - * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. - */ - selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>; - } - interface CalciteDropdownItem { - /** - * Specifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor. - */ - href: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the relationship to the linked document defined in `href`. - */ - rel: string; - /** - * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`. - */ - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. - */ - selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the frame or window to open the linked document. - */ - target: string; - } - interface CalciteFab { - /** - * Specifies the appearance style of the component. - */ - appearance: Extract<"solid" | "outline-fill", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies an icon to display. - * @default "plus" - */ - icon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the kind of the component (will apply to border and background). - */ - kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; - /** - * Accessible name for the component. - */ - label: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies text to accompany the component's icon. - */ - text: string; - /** - * When `true`, displays the `text` value in the component. - */ - textEnabled: boolean; - } - interface CalciteFilter { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Performs a filter on the component. This method can be useful because filtering is delayed and asynchronous. - * @param value - The filter text value. - * @returns - */ - filter: (value?: string) => Promise; - /** - * The component's resulting items after filtering. - * @readonly - */ - filteredItems: object[]; - /** - * Defines the items to filter. The component uses the values 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 needed to conduct filtering. - */ - items: object[]; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: FilterMessages; - /** - * Specifies placeholder text for the input element. - */ - placeholder: string; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's value. - */ - value: string; - } - interface CalciteFlow { - /** - * Removes the currently active `calcite-flow-item`. - */ - back: () => Promise; - /** - * This property enables the component to consider other custom elements implementing flow-item's interface. - */ - customItemSelectors: string; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - interface CalciteFlowItem { - /** - * When provided, the method will be called before it is removed from its parent `calcite-flow`. - */ - beforeBack: () => Promise; - /** - * When `true`, displays a close button in the trailing side of the component's header. - */ - closable: boolean; - /** - * When `true`, the component will be hidden. - */ - closed: boolean; - /** - * Specifies the direction of the collapse. - */ - collapseDirection: "down" | "up"; - /** - * When `true`, hides the component's content area. - */ - collapsed: boolean; - /** - * When `true`, the component is collapsible. - */ - collapsible: boolean; - /** - * A description for the component. - */ - description: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * When `true`, the action menu items in the `header-menu-actions` slot are open. - */ - menuOpen: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: FlowItemMessages; - /** - * Scrolls the component's content to a specified set of coordinates. - * @example myCalciteFlowItem.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). }); - * @param options - allows specific coordinates to be defined. - * @returns - promise that resolves once the content is scrolled to. - */ - scrollContentTo: (options?: ScrollToOptions) => Promise; - /** - * Sets focus on the component. - * @returns promise. - */ - setFocus: () => Promise; - /** - * When `true`, displays a back button in the component's header. - */ - showBackButton: boolean; - } - 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; - /** - * Value for the button title attribute - */ - dragHandle: string; - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: HandleMessages; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - setPosition: number; - setSize: number; - } - interface CalciteIcon { - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - flipRtl: boolean; - /** - * Displays a specific icon. - * @see [Icons](https://esri.github.io/calcite-ui-icons) - */ - icon: string; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Accessible name for the component. It is recommended to set this value if your icon is semantic. - */ - textLabel: string; - } - interface CalciteInlineEditable { - /** - * Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. - */ - afterConfirm: () => Promise; - /** - * When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. - */ - controls: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, inline editing is enabled on the component. - */ - editingEnabled: boolean; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: InlineEditableMessages; - /** - * Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - interface CalciteInput { - /** - * Specifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when `type` is "file". Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) - */ - accept: string; - /** - * Specifies the text alignment of the component's value. - */ - alignment: Position; - /** - * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - */ - autocomplete: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus: boolean; - /** - * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type. - */ - clearable: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled: boolean; - editingEnabled: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - enterKeyHint: string; - /** - * When `type` is `"file"`, specifies the component's selected files. - * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files - */ - files: FileList | undefined; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator: boolean; - /** - * When `true`, the component will not be visible. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ - hidden: boolean; - /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - inputMode: string; - /** - * Accessible name for the component. - */ - label: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * When `true`, uses locale formatting for numbers. - */ - localeFormat: boolean; - /** - * Specifies the maximum value for type "number". - * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) - */ - max: number; - /** - * Specifies the maximum length of text for the component's value. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) - */ - maxLength: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: InputMessages; - /** - * Specifies the minimum value for `type="number"`. - * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) - */ - min: number; - /** - * Specifies the minimum length of text for the component's value. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) - */ - minLength: number; - /** - * When `true`, the component can accept more than one value. This property only has an effect when `type` is "email" or "file". Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) - */ - multiple: boolean; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) - */ - name: string; - /** - * Specifies the placement of the buttons for `type="number"`. - */ - numberButtonType: InputPlacement; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) - */ - pattern: string; - /** - * Specifies placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) - */ - placeholder: string; - /** - * Adds text to the start of the component. - */ - prefixText: string; - /** - * When `true`, the component's value can be read, but cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Selects the text of the component's `value`. - */ - selectText: () => Promise; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Specifies the granularity the component's `value` must adhere to. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) - */ - step: number | "any"; - /** - * Adds text to the end of the component. - */ - suffixText: string; - /** - * Specifies the component type. Note that the following `type`s 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"; - /** - * The component's value. - */ - value: string; - } - interface CalciteInputDatePicker { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements: EffectivePlacement[]; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * Defines the layout of the component. - */ - layout: "horizontal" | "vertical"; - /** - * Specifies the latest allowed date ("yyyy-mm-dd"). - */ - max: string; - /** - * Specifies the latest allowed date as a full date object. - */ - maxAsDate: Date; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: InputDatePickerMessages; - /** - * Specifies the earliest allowed date ("yyyy-mm-dd"). - */ - min: string; - /** - * Specifies the earliest allowed date as a full date object. - */ - minAsDate: Date; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. - */ - numberingSystem: NumberingSystem; - /** - * When `true`, displays the `calcite-date-picker` component. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Specifies the placement of the `calcite-date-picker` relative to the component. - * @default "bottom-start" - */ - placement: MenuPlacement; - /** - * When `true`, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range. - */ - proximitySelectionDisabled: boolean; - /** - * When `true`, activates a range for the component. - */ - range: boolean; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly: boolean; - /** - * Updates the position of the component. - * @param delayed - */ - reposition: (delayed?: boolean) => Promise; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: "s" | "m" | "l"; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Selected date as a string in ISO format (YYYY-MM-DD) - */ - value: string | string[]; - /** - * The component's value as a full date object. - */ - valueAsDate: Date | Date[]; - } - interface CalciteInputMessage { - /** - * Specifies an icon to display. - */ - icon: boolean | string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - } - interface CalciteInputNumber { - /** - * Specifies the text alignment of the component's value. - */ - alignment: Position; - /** - * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - */ - autocomplete: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus: boolean; - /** - * When `true`, a clear button is displayed when the component has a value. - */ - clearable: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled: boolean; - editingEnabled: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - enterKeyHint: string; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator: boolean; - /** - * When `true`, the component will not be visible. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ - hidden: boolean; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - inputMode: string; - /** - * When `true`, restricts the component to integer numbers only and disables exponential notation. - */ - integer: boolean; - /** - * Accessible name for the component's button or hyperlink. - */ - label: string; - /** - * When `true`, the component is in the loading state and `calcite-progress` is displayed. - */ - loading: boolean; - /** - * Toggles locale formatting for numbers. - */ - localeFormat: boolean; - /** - * Specifies the maximum value. - * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) - */ - max: number; - /** - * Specifies the maximum length of text for the component's value. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) - */ - maxLength: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: InputNumberMessages; - /** - * Specifies the minimum value. - * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) - */ - min: number; - /** - * Specifies the minimum length of text for the component's value. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) - */ - minLength: number; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) - */ - name: string; - /** - * Specifies the placement of the buttons. - */ - numberButtonType: InputPlacement; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * Specifies placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) - */ - placeholder: string; - /** - * Adds text to the start of the component. - */ - prefixText: string; - /** - * When `true`, the component's value can be read, but cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Selects the text of the component's `value`. - */ - selectText: () => Promise; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Specifies the granularity that the component's value must adhere to. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) - */ - step: number | "any"; - /** - * Adds text to the end of the component. - */ - suffixText: string; - /** - * The component's value. - */ - value: string; - } - interface CalciteInputText { - /** - * Specifies the text alignment of the component's value. - */ - alignment: Position; - /** - * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - */ - autocomplete: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus: boolean; - /** - * When `true`, a clear button is displayed when the component has a value. - */ - clearable: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled: boolean; - editingEnabled: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - enterKeyHint: string; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * When `true`, the component will not be visible. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ - hidden: boolean; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - inputMode: string; - /** - * Accessible name for the component's button or hyperlink. - */ - label: string; - /** - * When `true`, the component is in the loading state and `calcite-progress` is displayed. - */ - loading: boolean; - /** - * Specifies the maximum length of text for the component's value. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) - */ - maxLength: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: InputTextMessages; - /** - * Specifies the minimum length of text for the component's value. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) - */ - minLength: number; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) - */ - name: string; - /** - * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) - */ - pattern: string; - /** - * Specifies placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) - */ - placeholder: string; - /** - * Adds text to the start of the component. - */ - prefixText: string; - /** - * When `true`, the component's value can be read, but cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Selects the text of the component's `value`. - */ - selectText: () => Promise; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Adds text to the end of the component. - */ - suffixText: string; - /** - * The component's value. - */ - value: string; - } - interface CalciteInputTimePicker { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: InputTimePickerMessages; - /** - * Specifies the name of the component on form submission. - */ - name: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * When `true`, displays the `calcite-time-picker` component. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Determines where the popover will be positioned relative to the input. - */ - placement: LogicalPlacement; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly: boolean; - /** - * Updates the position of the component. - * @param delayed - */ - reposition: (delayed?: boolean) => Promise; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Specifies the granularity the component's `value` must adhere to (in seconds). - */ - step: number; - /** - * The time value in ISO (24-hour) format. - */ - value: string; - } - interface CalciteInputTimeZone { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Specifies the component's maximum number of options to display before displaying a scrollbar. - */ - maxItems: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: InputTimeZoneMessages; - /** - * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related - * @default "offset" - */ - mode: TimeZoneMode; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) - * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) - */ - referenceDate: Date | string; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - setFocus: () => Promise; - /** - * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. - * @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC. - */ - value: string; - } - interface CalciteLabel { - /** - * Specifies the text alignment of the component. - */ - alignment: Alignment; - /** - * Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. - */ - for: string; - /** - * Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. - */ - layout: "inline" | "inline-space-between" | "default"; - /** - * Specifies the size of the component. - */ - scale: Scale; - } - interface CalciteLink { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download. - */ - download: string | boolean; - /** - * Specifies the URL of the linked resource, which can be set as an absolute or relative path. - */ - href: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - /** - * Specifies the relationship to the linked document defined in `href`. - */ - rel: string; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the frame or window to open the linked document. - */ - target: string; - } - /** - * A general purpose list that enables users to construct list items that conform to Calcite styling. - */ - interface CalciteList { - /** - * When provided, the method will be called to determine whether the element can move from the list. - */ - canPull: (detail: ListDragDetail) => boolean; - /** - * When provided, the method will be called to determine whether the element can be added from another list. - */ - canPut: (detail: ListDragDetail) => boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, `calcite-list-item`s are sortable via a draggable button. - */ - dragEnabled: boolean; - /** - * When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. - */ - filterEnabled: boolean; - /** - * Placeholder text for the component's filter input field. - */ - filterPlaceholder: string; - /** - * Text for the component's filter input field. - */ - filterText: string; - /** - * The currently filtered `calcite-list-item` data. - * @readonly - */ - filteredData: ItemData; - /** - * The currently filtered `calcite-list-item`s. - * @readonly - */ - filteredItems: HTMLCalciteListItemElement[]; - /** - * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. - */ - group?: string; - /** - * Specifies an accessible name for the component. - */ - label: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * One of the items within the list can be opened. - */ - openable: boolean; - /** - * The currently selected items. - * @readonly - */ - selectedItems: HTMLCalciteListItemElement[]; - /** - * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). - */ - selectionAppearance: SelectionAppearance; - /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). - */ - selectionMode: Extract<"none" | "multiple" | "single" | "single-persist", SelectionMode>; - /** - * Sets focus on the component's first focusable element. - * @returns - */ - setFocus: () => Promise; - } - interface CalciteListItem { - /** - * Sets the item as focusable. Only one item should be focusable within a list. - */ - active: boolean; - /** - * When `true`, a close button is added to the component. - */ - closable: boolean; - /** - * When `true`, hides the component. - */ - closed: boolean; - /** - * A description for the component. Displays below the label text. - */ - description: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, the component displays a draggable button. - */ - dragHandle: boolean; - /** - * The label text of the component. Displays above the description text. - */ - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ListItemMessages; - /** - * Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. - */ - metadata: Record; - /** - * When `true`, the item is open to show child components. - */ - open: boolean; - /** - * When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. - */ - selected: boolean; - /** - * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). - */ - selectionAppearance: SelectionAppearance; - /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). - */ - selectionMode: Extract<"none" | "multiple" | "single" | "single-persist", SelectionMode>; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility. - */ - setPosition: number; - /** - * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility. - */ - setSize: number; - /** - * The component's value. - */ - value: any; - } - interface CalciteListItemGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The header text for all nested `calcite-list-item` rows. - */ - heading: string; - } - interface CalciteLoader { - /** - * When `true`, displays smaller and appears to the left of the text. - */ - inline: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Text that displays under the component's indicator. - */ - text: string; - /** - * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. - */ - type: "indeterminate" | "determinate"; - /** - * The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. - */ - value: number; - } - interface CalciteMenu { - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the layout of the component. - */ - layout: Layout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only. - */ - messages: MenuMessages; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - } - interface CalciteMenuItem { - /** - * When `true`, the component is highlighted. - */ - active: boolean; - /** - * When `true`, the component displays a breadcrumb trail for use as a navigational aid. - */ - breadcrumb: boolean; - /** - * Specifies the URL destination of the component, which can be set as an absolute or relative path. - */ - href: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - isTopLevelItem: boolean; - /** - * Accessible name for the component. - */ - label: string; - layout: Layout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only. - */ - messages: MenuItemMessages; - /** - * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. - */ - open: boolean; - /** - * Defines the relationship between the `href` value and the current document. - * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) - */ - rel: string; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies where to open the linked document defined in the `href` property. - * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) - */ - target: string; - /** - * Specifies the text to display. - */ - text: string; - topLevelMenuLayout: Layout; - } - interface CalciteMeter { - /** - * Specifies the appearance style of the component. - */ - appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. - */ - fillType: "single" | "range"; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator: boolean; - /** - * Specifies a high value. When `fillType` is `"range"`, displays a different color when above the specified threshold. - */ - high: number; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies a low value. When `fillType` is `"range"`, displays a different color when above the specified threshold. - */ - low: number; - /** - * Specifies the highest allowed value of the component. - */ - max: number; - /** - * Specifies the lowest allowed value of the component. - */ - min: number; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. - */ - rangeLabelType: MeterLabelType; - /** - * When `true`, displays the values of `high`, `low`, `min`, and `max`. - */ - rangeLabels: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. - */ - unitLabel: string; - /** - * Specifies the current value of the component. - */ - value: number; - /** - * When `true`, displays the current value. - */ - valueLabel: boolean; - /** - * When either `valueLabel` is `true`, specifies the format of displayed label. - */ - valueLabelType: MeterLabelType; - } - interface CalciteModal { - /** - * Passes a function to run before the component closes. - */ - beforeClose: (el: HTMLCalciteModalElement) => Promise; - /** - * When `true`, disables the component's close button. - */ - closeButtonDisabled: boolean; - /** - * When `true`, prevents the component from expanding to the entire screen on mobile devices. - */ - docked: boolean; - /** - * When `true`, disables the default close on escape behavior. - */ - escapeDisabled: boolean; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled: boolean; - /** - * Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). - */ - fullscreen: boolean; - /** - * Specifies the kind of the component (will apply to top border). - */ - kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ModalMessages; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is. - */ - opened: boolean; - /** - * When `true`, disables the closing of the component when clicked outside. - */ - outsideCloseDisabled: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets the scroll top of the component's content. - * @param top - * @param left - */ - scrollContent: (top?: number, left?: number) => Promise; - /** - * Sets focus on the component's "close" button (the first focusable item). - */ - setFocus: () => Promise; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - slottedInShell: boolean; - /** - * Updates the element(s) that are used within the focus-trap of the component. - */ - updateFocusTrapElements: () => Promise; - /** - * Specifies the width of the component. - */ - width: Scale; - } - interface CalciteNavigation { - /** - * When `navigationAction` is `true`, specifies the label of the `calcite-action`. - */ - label: string; - /** - * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change. - */ - navigationAction: boolean; - /** - * When `navigation-action` is `true`, sets focus on the component's action element. - */ - setFocus: () => Promise; - } - interface CalciteNavigationLogo { - /** - * When true, the component is highlighted. - */ - active: boolean; - /** - * A description for the component, which displays below the `heading`. - */ - description: string; - /** - * Specifies heading text for the component, such as a product or organization name. - */ - heading: string; - /** - * Specifies the URL destination of the component, which can be set as an absolute or relative path. - */ - href: string; - /** - * Specifies an icon to display. - */ - icon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. - */ - label: string; - /** - * Defines the relationship between the `href` value and the current document. - * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) - */ - rel: string; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies where to open the linked document defined in the `href` property. - * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) - */ - target: string; - /** - * Specifies the `src` to an image. - */ - thumbnail: string; - } - interface CalciteNavigationUser { - /** - * When true, the component is highlighted. - */ - active: boolean; - /** - * Specifies the full name of the user. - */ - fullName: string; - /** - * Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. - */ - label: string; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * When `true`, hides the `fullName` and `username` contents. - */ - textDisabled: boolean; - /** - * Specifies the `src` to an image (remember to add a token if the user is private). - */ - thumbnail: string; - /** - * Specifies the unique id of the user. - */ - userId: string; - /** - * Specifies the username of the user. - */ - username: string; - } - interface CalciteNotice { - /** - * When `true`, a close button is added to the component. - */ - closable: boolean; - /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the kind of the component (will apply to top border and icon). - */ - kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: NoticeMessages; - /** - * When `true`, the component is visible. - */ - open: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * Specifies the width of the component. - */ - width: Width; - } - interface CalciteOption { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * The component's value. - */ - value: any; - } - interface CalciteOptionGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Accessible name for the component. - */ - label: string; - } - interface CalcitePagination { - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: PaginationMessages; - /** - * Go to the next page of results. - */ - nextPage: () => Promise; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * Specifies the number of items per page. - */ - pageSize: number; - /** - * Go to the previous page of results. - */ - previousPage: () => Promise; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * Specifies the starting item number. - */ - startItem: number; - /** - * Specifies the total number of items. - */ - totalItems: number; - } - interface CalcitePanel { - /** - * When `true`, displays a close button in the trailing side of the header. - */ - closable: boolean; - /** - * When `true`, the component will be hidden. - */ - closed: boolean; - /** - * Specifies the direction of the collapse. - */ - collapseDirection: "down" | "up"; - /** - * When `true`, hides the component's content area. - */ - collapsed: boolean; - /** - * When `true`, the component is collapsible. - */ - collapsible: boolean; - /** - * A description for the component. - */ - description: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * When `true`, the action menu items in the `header-menu-actions` slot are open. - */ - menuOpen: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: PanelMessages; - /** - * Scrolls the component's content to a specified set of coordinates. - * @example myCalciteFlowItem.scrollContentTo({ left: 0, // Specifies the number of pixels along the X axis to scroll the window or element. top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). }); - * @param options - allows specific coordinates to be defined. - * @returns - promise that resolves once the content is scrolled to. - */ - scrollContentTo: (options?: ScrollToOptions) => Promise; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalcitePickList { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - 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; - /** - * Text for the filter input field. - */ - filterText: string; - /** - * The currently filtered data. - * @readonly - */ - filteredData: ItemData1; - /** - * The currently filtered items. - * @readonly - */ - filteredItems: HTMLCalcitePickListItemElement[]; - /** - * Returns the component's selected `calcite-pick-list-item`s. - */ - getSelectedItems: () => Promise>; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-pick-list-item`s at a time. When `false`, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections. - */ - multiple: boolean; - /** - * When `true` and single selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard. - */ - selectionFollowsFocus: boolean; - /** - * Sets focus on the component's first focusable element. - * @param focusId - */ - setFocus: (focusId?: ListFocusId) => Promise; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalcitePickListGroup { - /** - * Specifies the title for all nested `calcite-pick-list-item`s. - */ - groupTitle: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalcitePickListItem { - /** - * A description for the component that displays below the label text. - */ - description: string; - /** - * When `false`, the component cannot be deselected by user interaction. - */ - deselectDisabled: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. - * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) - */ - icon: ICON_TYPES | null; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Label and accessible name for the component. Appears next to the icon. - */ - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: PickListItemMessages; - /** - * Provides additional metadata to the component. Primary use is for a filter on the parent list. - */ - metadata: Record; - nonInteractive: boolean; - /** - * When `true`, displays a remove action that removes the item from the list. - */ - removable: boolean; - /** - * When `true`, selects an item. Toggles when an item is checked/unchecked. - */ - selected: boolean; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Toggles the selection state. By default this won't trigger an event. The first argument allows the value to be coerced, rather than swapping values. - * @param coerce - */ - toggleSelected: (coerce?: boolean) => Promise; - /** - * The component's value. - */ - value: any; - } - interface CalcitePopover { - /** - * When `true`, clicking outside of the component automatically closes open `calcite-popover`s. - */ - autoClose: boolean; - /** - * When `true`, display a close button within the component. - */ - closable: boolean; - /** - * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. - */ - flipDisabled: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements: EffectivePlacement[]; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * Accessible name for the component. - */ - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: PopoverMessages; - /** - * Offsets the position of the popover away from the `referenceElement`. - * @default 6 - */ - offsetDistance: number; - /** - * Offsets the position of the component along the `referenceElement`. - */ - offsetSkidding: number; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the `referenceElement`. - */ - placement: LogicalPlacement; - /** - * When `true`, removes the caret pointer. - */ - pointerDisabled: boolean; - /** - * The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used. - */ - referenceElement: ReferenceElement | string; - /** - * Updates the position of the component. - * @param delayed - */ - reposition: (delayed?: boolean) => Promise; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to `true` to manage when the component is open. - */ - triggerDisabled: boolean; - /** - * Updates the element(s) that are used within the focus-trap of the component. - */ - updateFocusTrapElements: () => Promise; - } - interface CalciteProgress { - /** - * Accessible name for the component. - */ - label: string; - /** - * When `true` and for `"indeterminate"` progress bars, reverses the animation direction. - */ - reversed: boolean; - /** - * Text that displays under the component's indicator. - */ - text: string; - /** - * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. - */ - type: "indeterminate" | "determinate"; - /** - * When `type` is `"determinate"`, the component's progress value with a range of 0.0 - 1.0. - */ - value: number; - } - interface CalciteRadioButton { - /** - * When `true`, the component is checked. - */ - checked: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - emitCheckedChange: () => Promise; - /** - * The focused state of the component. - */ - focused: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * The `id` of the component. When omitted, a globally unique identifier is used. - */ - guid: string; - /** - * When `true`, the component is not displayed and is not focusable or checkable. - */ - hidden: boolean; - /** - * The hovered state of the component. - */ - hovered: boolean; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Specifies the name of the component. Can be inherited from `calcite-radio-button-group`. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component inherited from the `calcite-radio-button-group`. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's value. - */ - value: any; - } - interface CalciteRadioButtonGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. - */ - hidden: boolean; - /** - * Defines the layout of the component. - */ - layout: Layout; - /** - * Specifies the name of the component on form submission. Must be unique to other component instances. - */ - name: string; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the component's selected item. - * @readonly - */ - selectedItem: HTMLCalciteRadioButtonElement; - /** - * Sets focus on the fist focusable `calcite-radio-button` element in the component. - */ - setFocus: () => Promise; - } - interface CalciteRating { - /** - * Specifies a cumulative average from previous ratings to display. - */ - average: number; - /** - * Specifies the number of previous ratings to display. - */ - count: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: RatingMessages; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * When `true`, the component's value can be read, but cannot be modified. - */ - readOnly: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. - */ - showChip: boolean; - /** - * The component's value. - */ - value: number; - } - interface CalciteScrim { - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ScrimMessages; - } - interface CalciteSegmentedControl { - /** - * Specifies the appearance style of the component. - */ - appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Defines the layout of the component. - */ - layout: Extract<"horizontal" | "vertical", Layout>; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * The component's selected item `HTMLElement`. - * @readonly - */ - selectedItem: HTMLCalciteSegmentedControlItemElement; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's `selectedItem` value. - */ - value: string; - /** - * Specifies the width of the component. - */ - width: Extract<"auto" | "full", Width>; - } - interface CalciteSegmentedControlItem { - /** - * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`. - */ - appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, the component is checked. - */ - checked: boolean; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - /** - * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. - */ - layout: Layout; - /** - * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`. - */ - scale: Scale; - /** - * The component's value. - */ - value: any | null; - } - interface CalciteSelect { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * The component's selected option `HTMLElement`. - * @readonly - */ - selectedOption: HTMLCalciteOptionElement; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's `selectedOption` value. - */ - value: string; - /** - * Specifies the width of the component. - */ - width: Width; - } - interface CalciteSheet { - /** - * Passes a function to run before the component closes. - * @returns - */ - beforeClose: (el: HTMLCalciteSheetElement) => Promise; - /** - * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). - */ - displayMode: DisplayMode; - /** - * When `true`, disables the default close on escape behavior. - */ - escapeDisabled: boolean; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled: boolean; - /** - * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. - */ - heightScale: Scale; - /** - * Specifies the label of the component. - */ - label: string; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is . - */ - opened: boolean; - /** - * When `true`, disables the closing of the component when clicked outside. - */ - outsideCloseDisabled: boolean; - /** - * Determines where the component will be positioned. - */ - position: LogicalFlowPosition; - /** - * Sets focus on the component's "close" button (the first focusable item). - */ - setFocus: () => Promise; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - slottedInShell: boolean; - /** - * Updates the element(s) that are used within the focus-trap of the component. - */ - updateFocusTrapElements: () => Promise; - /** - * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. - */ - widthScale: Scale; - } - interface CalciteShell { - /** - * Positions the center content behind any `calcite-shell-panel`s. - */ - contentBehind: boolean; - } - interface CalciteShellCenterRow { - /** - * When `true`, the content area displays like a floating panel. - */ - detached: boolean; - /** - * Specifies the maximum height of the component. - */ - heightScale: Scale; - /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - position: Position; - } - interface CalciteShellPanel { - /** - * When `true`, hides the component's content area. - */ - collapsed: boolean; - /** - * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. - */ - detached: boolean; - /** - * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. - */ - detachedHeightScale: Scale; - /** - * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content). - */ - displayMode: DisplayMode1; - /** - * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. - */ - heightScale: Scale; - /** - * The direction of the component. - */ - layout: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ShellPanelMessages; - /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - position: Position; - /** - * When `true` and `displayMode` is not `float`, the component's content area is resizable. - */ - resizable: boolean; - /** - * When `layout` is `vertical`, specifies the width of the component. - */ - widthScale: Scale; - } - interface CalciteSlider { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator: boolean; - /** - * When `true`, indicates a histogram is present. - */ - hasHistogram: boolean; - /** - * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track. - * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5) - */ - histogram: DataSeries; - /** - * A set of single color stops for a histogram, sorted by offset ascending. - */ - histogramStops: ColorStop[]; - /** - * When `true`, displays label handles with their numeric value. - */ - labelHandles: boolean; - /** - * When `true` and `ticks` is specified, displays label tick marks with their numeric value. - */ - labelTicks: boolean; - /** - * The component's maximum selectable value. - */ - max: number; - /** - * For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. - */ - maxLabel: string; - /** - * For multiple selections, the component's upper value. - */ - maxValue: number; - /** - * The component's minimum selectable value. - */ - min: number; - /** - * Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. - */ - minLabel: string; - /** - * For multiple selections, the component's lower value. - */ - minValue: number; - /** - * When `true`, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. - */ - mirrored: boolean; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * Specifies the interval to move with the page up, or page down keys. - */ - pageStep: number; - /** - * When `true`, sets a finer point for handles. - */ - precise: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * When `true`, enables snap selection in coordination with `step` via a mouse. - */ - snap: boolean; - /** - * Specifies the interval to move with the up, or down keys. - */ - step: number; - /** - * Displays tick marks on the number line at a specified interval. - */ - ticks: number; - /** - * The component's value. - */ - value: null | number | number[]; - } - interface CalciteSortableList { - /** - * When provided, the method will be called to determine whether the element can move from the list. - */ - canPull: (detail: DragDetail) => boolean; - /** - * When provided, the method will be called to determine whether the element can be added from another list. - */ - canPut: (detail: DragDetail) => boolean; - /** - * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. - */ - disabled: boolean; - /** - * Specifies which items inside the element should be draggable. - */ - dragSelector?: string; - /** - * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. - */ - group?: string; - /** - * The selector for the handle elements. - */ - handleSelector: string; - /** - * Indicates the horizontal or vertical orientation of the component. - */ - layout: Layout; - /** - * When true, content is waiting to be loaded. This state shows a busy indicator. - */ - loading: boolean; - } - interface CalciteSplitButton { - /** - * When `true`, the component is active. - */ - active: boolean; - /** - * Specifies the appearance style of the component. - */ - appearance: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies the icon used for the dropdown menu. - */ - dropdownIconType: DropdownIconType; - /** - * Accessible name for the dropdown menu. - */ - dropdownLabel: string; - /** - * Specifies the kind of the component (will apply to border and background if applicable). - */ - kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; - /** - * When `true`, a busy indicator is displayed on the primary button. - */ - loading: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Specifies an icon to display at the end of the primary button. - */ - primaryIconEnd: string; - /** - * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - primaryIconFlipRtl: FlipContext; - /** - * Specifies an icon to display at the start of the primary button. - */ - primaryIconStart: string; - /** - * Accessible name for the primary button. - */ - primaryLabel: string; - /** - * Text displayed in the primary button. - */ - primaryText: string; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * Specifies the width of the component. - */ - width: Width; - } - interface CalciteStack { - /** - * When `true`, content interaction is prevented and displayed with lower opacity. - */ - disabled: boolean; - } - interface CalciteStepper { - /** - * Set the last `calcite-stepper-item` as active. - */ - endStep: () => Promise; - /** - * Set a specified `calcite-stepper-item` as active. - * @param step - */ - goToStep: (step: number) => Promise; - /** - * When `true`, displays a status icon in the `calcite-stepper-item` heading. - */ - icon: boolean; - /** - * Defines the layout of the component. - */ - layout: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: StepperMessages; - /** - * Set the next `calcite-stepper-item` as active. - */ - nextStep: () => Promise; - /** - * When `true`, displays the step number in the `calcite-stepper-item` heading. - */ - numbered: boolean; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Set the previous `calcite-stepper-item` as active. - */ - prevStep: () => Promise; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the component's selected item. - * @readonly - */ - selectedItem: HTMLCalciteStepperItemElement; - /** - * Set the first `calcite-stepper-item` as active. - */ - startStep: () => Promise; - } - interface CalciteStepperItem { - /** - * When `true`, the step has been completed. - */ - complete: boolean; - /** - * A description for the component. Displays below the header text. - */ - description: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, the component contains an error that requires resolution from the user. - */ - error: boolean; - /** - * The component header text. - */ - heading: string; - /** - * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. - */ - icon: boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`. - */ - layout: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: StepperItemMessages; - /** - * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. - */ - numbered: boolean; - numberingSystem: NumberingSystem; - /** - * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`. - */ - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - interface CalciteSwitch { - /** - * When `true`, the component is checked. - */ - checked: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's value. - */ - value: any; - } - interface CalciteTab { - /** - * Returns the index of the component item within the tab array. - */ - getTabIndex: () => Promise; - /** - * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. - */ - scale: Scale; - /** - * When `true`, the component's contents are selected. Only one tab can be selected within the `calcite-tabs` parent. - */ - selected: boolean; - /** - * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab-title`. - */ - tab: string; - /** - * @param tabIds - * @param titleIds - */ - updateAriaInfo: (tabIds?: string[], titleIds?: string[]) => Promise; - } - interface CalciteTabNav { - bordered: boolean; - indicatorOffset: number; - indicatorWidth: number; - layout: TabLayout; - /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. - */ - position: TabPosition; - /** - * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. - */ - scale: Scale; - /** - * Specifies the component's selected tab-title. - * @readonly - */ - selectedTitle: HTMLCalciteTabTitleElement; - /** - * Specifies the name when saving selected `calcite-tab` data to `localStorage`. - */ - storageId: string; - /** - * Specifies text to update multiple components to keep in sync if one changes. - */ - syncId: string; - } - interface CalciteTabTitle { - bordered: boolean; - /** - * When `true`, a close button is added to the component. - */ - closable: boolean; - /** - * When `true`, does not display or position the component. - */ - closed: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - getTabIdentifier: () => Promise; - /** - * Returns the index of the title within the `calcite-tab-nav`. - */ - getTabIndex: () => Promise; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - layout: TabLayout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TabTitleMessages; - /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. - */ - position: TabPosition; - /** - * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. - */ - scale: Scale; - /** - * When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. - */ - selected: boolean; - /** - * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. - */ - tab: string; - /** - * @param tabIds - * @param titleIds - */ - updateAriaInfo: (tabIds?: string[], titleIds?: string[]) => Promise; - } - interface CalciteTable { - /** - * When `true`, displays borders in the component. - */ - bordered: boolean; - /** - * Specifies an accessible title for the component. - */ - caption: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator: boolean; - /** - * Specifies the layout of the component. - */ - layout: TableLayout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TableMessages; - /** - * When `true`, displays the position of the row in numeric form. - */ - numbered: boolean; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Specifies the page size of the component. When `true`, renders `calcite-pagination` - */ - pageSize: number; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems: HTMLCalciteTableRowElement[]; - /** - * Specifies the selection mode of the component. - */ - selectionMode: Extract<"none" | "multiple" | "single", SelectionMode>; - /** - * When `true`, displays zebra styling in the component. - */ - zebra: boolean; - } - interface CalciteTableCell { - /** - * Specifies the alignment of the component. - */ - alignment: Alignment; - /** - * Specifies the number of columns the component should span. - */ - colSpan: number; - /** - * When true, prevents user interaction. Notes: This prop should use the - */ - disabled: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TableCellMessages; - numberCell: boolean; - parentRowIsSelected: boolean; - parentRowPositionLocalized: string; - parentRowType: RowType; - positionInRow: number; - readCellContentsToAT: boolean; - /** - * Specifies the number of rows the component should span. - */ - rowSpan: number; - scale: Scale; - selectionCell: boolean; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - interface CalciteTableHeader { - /** - * Specifies the alignment of the component. - */ - alignment: Alignment; - bodyRowCount: number; - /** - * Specifies the number of columns the component should span. - */ - colSpan: number; - /** - * A description to display beneath heading content. - */ - description: string; - /** - * A heading to display above description content. - */ - heading: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TableHeaderMessages; - numberCell: boolean; - parentRowPosition: number; - parentRowType: RowType; - positionInRow: number; - /** - * Specifies the number of rows the component should span. - */ - rowSpan: number; - scale: Scale; - selectedRowCount: number; - selectedRowCountLocalized: string; - selectionCell: boolean; - selectionMode: SelectionMode; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - interface CalciteTableRow { - bodyRowCount: number; - cellCount: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - numbered: boolean; - positionAll: number; - positionSection: number; - positionSectionLocalized: string; - readCellContentsToAT: boolean; - rowType: RowType; - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - selectedRowCount: number; - selectedRowCountLocalized: string; - selectionMode: Extract<"multiple" | "single" | "none", SelectionMode>; - } - interface CalciteTabs { - /** - * When `true`, the component will display with a folder style menu. - */ - bordered: boolean; - /** - * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`). - */ - layout: TabLayout; - /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. - */ - position: TabPosition; - /** - * Specifies the size of the component, defaults to `m`. - */ - scale: Scale; - } - interface CalciteTextArea { - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus: boolean; - /** - * Specifies the component's number of columns. - * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols) - */ - columns: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the maximum number of characters allowed. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength) - */ - maxLength: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TextAreaMessages; - /** - * Specifies the name of the component. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name) - */ - name: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * Specifies the placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder) - */ - placeholder: string; - /** - * When `true`, the component's `value` can be read, but cannot be modified. - * @readonly - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required - */ - required: boolean; - /** - * Specifies if the component is resizable. - */ - resize: "both" | "horizontal" | "vertical" | "none"; - /** - * Specifies the component's number of rows. - * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) - */ - rows: number; - /** - * Specifies the size of the component. - */ - scale: "l" | "m" | "s"; - /** - * Selects the text of the component's `value`. - */ - selectText: () => Promise; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The component's value. - */ - value: string; - /** - * Specifies the wrapping mechanism for the text. - * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap) - */ - wrap: "soft" | "hard"; - } - interface CalciteTile { - /** - * When `true`, the component is active. - */ - active: boolean; - /** - * A description for the component, which displays below the heading. - */ - description: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The component's embed mode. When `true`, renders without a border and padding for use by other components. - */ - embed: boolean; - /** - * The focused state of the component. - */ - focused: boolean; - /** - * The component header text, which displays between the icon and description. - */ - heading: string; - /** - * When `true`, the component is not displayed and is not focusable. - */ - hidden: boolean; - /** - * When embed is `"false"`, the URL for the component. - */ - href: string; - /** - * Specifies an icon to display. - */ - icon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - } - interface CalciteTileSelect { - /** - * When `true`, the component is checked. - */ - checked: boolean; - /** - * A description for the component, which displays below the heading. - */ - description: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * The component header text, which displays between the icon and description. - */ - heading: string; - /** - * When `true`, the component is not displayed and is not focusable or checkable. - */ - hidden: boolean; - /** - * Specifies an icon to display. - */ - icon: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. - */ - inputAlignment: Extract<"end" | "start", Alignment>; - /** - * When `true`, displays an interactive input based on the `type` property. - */ - inputEnabled: boolean; - /** - * Specifies the name of the component on form submission. - */ - name: any; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * The selection mode of the component. Use radio for single selection, and checkbox for multiple selections. - */ - type: TileSelectType; - /** - * The component's value. - */ - value: any; - /** - * Specifies the width of the component. - */ - width: Extract<"auto" | "full", Width>; - } - interface CalciteTileSelectGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. - */ - layout: TileSelectGroupLayout; - } - interface CalciteTimePicker { - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TimePickerMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - /** - * Specifies the granularity the `value` must adhere to (in seconds). - */ - step: number; - /** - * The component's value in UTC (always 24-hour format). - */ - value: string; - } - interface CalciteTip { - /** - * When `true`, the close button is not present on the component. - */ - closeDisabled: boolean; - /** - * When `true`, the component does not display. - */ - closed: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TipMessages; - /** - * When `true`, the component is selected if it has a parent `calcite-tip-manager`. Only one tip can be selected within the `calcite-tip-manager` parent. - */ - selected: boolean; - } - interface CalciteTipGroup { - /** - * The component header text for all nested `calcite-tip`s. - */ - groupTitle: string; - } - interface CalciteTipManager { - /** - * When `true`, does not display or position the component. - */ - closed: boolean; - /** - * Specifies the number at which section headings should start. - */ - headingLevel: HeadingLevel; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: TipManagerMessages; - /** - * Selects the next `calcite-tip` to display. - */ - nextTip: () => Promise; - /** - * Selects the previous `calcite-tip` to display. - */ - previousTip: () => Promise; - } - interface CalciteTooltip { - /** - * Closes the component when the `referenceElement` is clicked. - */ - closeOnClick: boolean; - /** - * Accessible name for the component. - * @deprecated No longer necessary. Overrides the context of the component's description, which could confuse assistive technology users. - */ - label: string; - /** - * Offset the position of the component away from the `referenceElement`. - * @default 6 - */ - offsetDistance: number; - /** - * Offset the position of the component along the `referenceElement`. - */ - offsetSkidding: number; - /** - * When `true`, the component is open. - */ - open: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the `referenceElement`. - */ - placement: LogicalPlacement; - /** - * The `referenceElement` to position the component according to its `"placement"` value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used. - */ - referenceElement: ReferenceElement | string; - /** - * Updates the position of the component. - * @param delayed - */ - reposition: (delayed?: boolean) => Promise; - } - interface CalciteTree { - child: boolean; - /** - * Displays indentation guide lines. - */ - lines: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems: HTMLCalciteTreeItemElement[]; - /** - * Specifies the selection mode, where `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. - * @default "single" - */ - selectionMode: SelectionMode; - } - interface CalciteTreeItem { - depth: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, the component is expanded. - */ - expanded: boolean; - hasChildren: boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: string; - /** - * In ancestor selection mode, show as indeterminate when only some children are selected. - */ - indeterminate: boolean; - lines: boolean; - parentExpanded: boolean; - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - selectionMode: SelectionMode; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalciteValueList { - /** - * When provided, the method will be called to determine whether the element can move from the list. - */ - canPull: (detail: DragDetail) => boolean; - /** - * When provided, the method will be called to determine whether the element can be added from another list. - */ - canPut: (detail: DragDetail) => boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * When `true`, `calcite-value-list-item`s are sortable via a draggable button. - */ - dragEnabled: boolean; - /** - * When `true`, an input appears at the top of the component that can be used by end users to filter list items. - */ - filterEnabled: boolean; - /** - * Placeholder text for the filter's input field. - */ - filterPlaceholder: string; - /** - * Text for the filter input field. - */ - filterText: string; - /** - * The currently filtered data. - * @readonly - */ - filteredData: ItemData1; - /** - * The currently filtered items. - * @readonly - */ - filteredItems: HTMLCalciteValueListItemElement[]; - /** - * Returns the currently selected items - */ - getSelectedItems: () => Promise>; - /** - * The component's group identifier. To drag elements from one list into another, both lists must have the same group value. - */ - group?: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ValueListMessages; - /** - * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. - */ - multiple: boolean; - /** - * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. - */ - selectionFollowsFocus: boolean; - /** - * Sets focus on the component's first focusable element. - * @param focusId - */ - setFocus: (focusId?: ListFocusId) => Promise; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalciteValueListItem { - /** - * A description for the component that displays below the label text. - */ - description?: string; - deselectDisabled: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - handleActivated?: boolean; - /** - * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. - * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) - */ - icon?: ICON_TYPES | null; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Label and accessible name for the component. Appears next to the icon. - */ - label: string; - /** - * Provides additional metadata to the component. Primary use is for a filter on the parent list. - */ - metadata?: Record; - /** - * When `true`, prevents the content of the component from user interaction. - */ - nonInteractive: boolean; - /** - * When `true`, adds an action to remove the component. - */ - removable: boolean; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * Set focus on the component. - */ - setFocus: () => Promise; - /** - * 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. - * @param coerce - */ - toggleSelected: (coerce?: boolean) => Promise; - /** - * The component's value. - */ - value: any; - } -} -export interface CalciteAccordionCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteAccordionElement; -} -export interface CalciteAccordionItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteAccordionItemElement; -} -export interface CalciteActionBarCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteActionBarElement; -} -export interface CalciteActionMenuCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteActionMenuElement; -} -export interface CalciteActionPadCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteActionPadElement; -} -export interface CalciteAlertCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteAlertElement; -} -export interface CalciteBlockCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteBlockElement; -} -export interface CalciteBlockSectionCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteBlockSectionElement; -} -export interface CalciteCardCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteCardElement; -} -export interface CalciteCheckboxCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteCheckboxElement; -} -export interface CalciteChipCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteChipElement; -} -export interface CalciteChipGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteChipGroupElement; -} -export interface CalciteColorPickerCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteColorPickerElement; -} -export interface CalciteColorPickerHexInputCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteColorPickerHexInputElement; -} -export interface CalciteComboboxCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteComboboxElement; -} -export interface CalciteComboboxItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteComboboxItemElement; -} -export interface CalciteDatePickerCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDatePickerElement; -} -export interface CalciteDatePickerDayCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDatePickerDayElement; -} -export interface CalciteDatePickerMonthCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDatePickerMonthElement; -} -export interface CalciteDatePickerMonthHeaderCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDatePickerMonthHeaderElement; -} -export interface CalciteDropdownCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDropdownElement; -} -export interface CalciteDropdownGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDropdownGroupElement; -} -export interface CalciteDropdownItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDropdownItemElement; -} -export interface CalciteFilterCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteFilterElement; -} -export interface CalciteFlowItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteFlowItemElement; -} -export interface CalciteHandleCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteHandleElement; -} -export interface CalciteInlineEditableCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteInlineEditableElement; -} -export interface CalciteInputCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteInputElement; -} -export interface CalciteInputDatePickerCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteInputDatePickerElement; -} -export interface CalciteInputNumberCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteInputNumberElement; -} -export interface CalciteInputTextCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteInputTextElement; -} -export interface CalciteInputTimePickerCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteInputTimePickerElement; -} -export interface CalciteInputTimeZoneCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteInputTimeZoneElement; -} -export interface CalciteLabelCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteLabelElement; -} -export interface CalciteListCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteListElement; -} -export interface CalciteListItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteListItemElement; -} -export interface CalciteListItemGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteListItemGroupElement; -} -export interface CalciteMenuItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteMenuItemElement; -} -export interface CalciteModalCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteModalElement; -} -export interface CalciteNavigationCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteNavigationElement; -} -export interface CalciteNoticeCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteNoticeElement; -} -export interface CalciteOptionCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteOptionElement; -} -export interface CalciteOptionGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteOptionGroupElement; -} -export interface CalcitePaginationCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalcitePaginationElement; -} -export interface CalcitePanelCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalcitePanelElement; -} -export interface CalcitePickListCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalcitePickListElement; -} -export interface CalcitePickListItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalcitePickListItemElement; -} -export interface CalcitePopoverCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalcitePopoverElement; -} -export interface CalciteRadioButtonCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteRadioButtonElement; -} -export interface CalciteRadioButtonGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteRadioButtonGroupElement; -} -export interface CalciteRatingCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteRatingElement; -} -export interface CalciteSegmentedControlCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSegmentedControlElement; -} -export interface CalciteSegmentedControlItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSegmentedControlItemElement; -} -export interface CalciteSelectCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSelectElement; -} -export interface CalciteSheetCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSheetElement; -} -export interface CalciteSliderCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSliderElement; -} -export interface CalciteSortableListCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSortableListElement; -} -export interface CalciteSplitButtonCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSplitButtonElement; -} -export interface CalciteStepperCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteStepperElement; -} -export interface CalciteStepperItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteStepperItemElement; -} -export interface CalciteSwitchCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSwitchElement; -} -export interface CalciteTabCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTabElement; -} -export interface CalciteTabNavCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTabNavElement; -} -export interface CalciteTabTitleCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTabTitleElement; -} -export interface CalciteTableCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTableElement; -} -export interface CalciteTableRowCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTableRowElement; -} -export interface CalciteTextAreaCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTextAreaElement; -} -export interface CalciteTileSelectCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTileSelectElement; -} -export interface CalciteTimePickerCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTimePickerElement; -} -export interface CalciteTipCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTipElement; -} -export interface CalciteTipManagerCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTipManagerElement; -} -export interface CalciteTooltipCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTooltipElement; -} -export interface CalciteTreeCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTreeElement; -} -export interface CalciteTreeItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTreeItemElement; -} -export interface CalciteValueListCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteValueListElement; -} -export interface CalciteValueListItemCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteValueListItemElement; -} -declare global { - interface HTMLCalciteAccordionElementEventMap { - calciteInternalAccordionChange: RequestedItem; - } - interface HTMLCalciteAccordionElement extends Components.CalciteAccordion, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteAccordionElement, - ev: CalciteAccordionCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteAccordionElement, - ev: CalciteAccordionCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteAccordionElement: { - prototype: HTMLCalciteAccordionElement; - new (): HTMLCalciteAccordionElement; - }; - interface HTMLCalciteAccordionItemElementEventMap { - calciteInternalAccordionItemSelect: RequestedItem1; - calciteInternalAccordionItemClose: void; - } - interface HTMLCalciteAccordionItemElement extends Components.CalciteAccordionItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteAccordionItemElement, - ev: CalciteAccordionItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteAccordionItemElement, - ev: CalciteAccordionItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteAccordionItemElement: { - prototype: HTMLCalciteAccordionItemElement; - new (): HTMLCalciteAccordionItemElement; - }; - interface HTMLCalciteActionElement extends Components.CalciteAction, HTMLStencilElement {} - var HTMLCalciteActionElement: { - prototype: HTMLCalciteActionElement; - new (): HTMLCalciteActionElement; - }; - interface HTMLCalciteActionBarElementEventMap { - calciteActionBarToggle: void; - } - interface HTMLCalciteActionBarElement extends Components.CalciteActionBar, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteActionBarElement, - ev: CalciteActionBarCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteActionBarElement, - ev: CalciteActionBarCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteActionBarElement: { - prototype: HTMLCalciteActionBarElement; - new (): HTMLCalciteActionBarElement; - }; - interface HTMLCalciteActionGroupElement extends Components.CalciteActionGroup, HTMLStencilElement {} - var HTMLCalciteActionGroupElement: { - prototype: HTMLCalciteActionGroupElement; - new (): HTMLCalciteActionGroupElement; - }; - interface HTMLCalciteActionMenuElementEventMap { - calciteActionMenuOpen: void; - } - interface HTMLCalciteActionMenuElement extends Components.CalciteActionMenu, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteActionMenuElement, - ev: CalciteActionMenuCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteActionMenuElement, - ev: CalciteActionMenuCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteActionMenuElement: { - prototype: HTMLCalciteActionMenuElement; - new (): HTMLCalciteActionMenuElement; - }; - interface HTMLCalciteActionPadElementEventMap { - calciteActionPadToggle: void; - } - interface HTMLCalciteActionPadElement extends Components.CalciteActionPad, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteActionPadElement, - ev: CalciteActionPadCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteActionPadElement, - ev: CalciteActionPadCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteActionPadElement: { - prototype: HTMLCalciteActionPadElement; - new (): HTMLCalciteActionPadElement; - }; - interface HTMLCalciteAlertElementEventMap { - calciteAlertBeforeClose: void; - calciteAlertClose: void; - calciteAlertBeforeOpen: void; - calciteAlertOpen: void; - calciteInternalAlertSync: Sync; - calciteInternalAlertRegister: void; - } - interface HTMLCalciteAlertElement extends Components.CalciteAlert, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteAlertElement, ev: CalciteAlertCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteAlertElement, ev: CalciteAlertCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteAlertElement: { - prototype: HTMLCalciteAlertElement; - new (): HTMLCalciteAlertElement; - }; - interface HTMLCalciteAvatarElement extends Components.CalciteAvatar, HTMLStencilElement {} - var HTMLCalciteAvatarElement: { - prototype: HTMLCalciteAvatarElement; - new (): HTMLCalciteAvatarElement; - }; - interface HTMLCalciteBlockElementEventMap { - calciteBlockBeforeClose: void; - calciteBlockBeforeOpen: void; - calciteBlockClose: void; - calciteBlockOpen: void; - calciteBlockToggle: void; - } - interface HTMLCalciteBlockElement extends Components.CalciteBlock, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteBlockElement, ev: CalciteBlockCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteBlockElement, ev: CalciteBlockCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteBlockElement: { - prototype: HTMLCalciteBlockElement; - new (): HTMLCalciteBlockElement; - }; - interface HTMLCalciteBlockSectionElementEventMap { - calciteBlockSectionToggle: void; - } - interface HTMLCalciteBlockSectionElement extends Components.CalciteBlockSection, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteBlockSectionElement, - ev: CalciteBlockSectionCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteBlockSectionElement, - ev: CalciteBlockSectionCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteBlockSectionElement: { - prototype: HTMLCalciteBlockSectionElement; - new (): HTMLCalciteBlockSectionElement; - }; - interface HTMLCalciteButtonElement extends Components.CalciteButton, HTMLStencilElement {} - var HTMLCalciteButtonElement: { - prototype: HTMLCalciteButtonElement; - new (): HTMLCalciteButtonElement; - }; - interface HTMLCalciteCardElementEventMap { - calciteCardSelect: void; - } - interface HTMLCalciteCardElement extends Components.CalciteCard, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteCardElement, ev: CalciteCardCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteCardElement, ev: CalciteCardCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteCardElement: { - prototype: HTMLCalciteCardElement; - new (): HTMLCalciteCardElement; - }; - interface HTMLCalciteCheckboxElementEventMap { - calciteInternalCheckboxBlur: boolean; - calciteCheckboxChange: void; - calciteInternalCheckboxFocus: boolean; - } - interface HTMLCalciteCheckboxElement extends Components.CalciteCheckbox, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteCheckboxElement, - ev: CalciteCheckboxCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteCheckboxElement, - ev: CalciteCheckboxCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteCheckboxElement: { - prototype: HTMLCalciteCheckboxElement; - new (): HTMLCalciteCheckboxElement; - }; - interface HTMLCalciteChipElementEventMap { - calciteChipClose: void; - calciteChipSelect: void; - calciteInternalChipKeyEvent: KeyboardEvent; - } - interface HTMLCalciteChipElement extends Components.CalciteChip, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteChipElement, ev: CalciteChipCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteChipElement, ev: CalciteChipCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteChipElement: { - prototype: HTMLCalciteChipElement; - new (): HTMLCalciteChipElement; - }; - interface HTMLCalciteChipGroupElementEventMap { - calciteChipGroupSelect: void; - } - interface HTMLCalciteChipGroupElement extends Components.CalciteChipGroup, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteChipGroupElement, - ev: CalciteChipGroupCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteChipGroupElement, - ev: CalciteChipGroupCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteChipGroupElement: { - prototype: HTMLCalciteChipGroupElement; - new (): HTMLCalciteChipGroupElement; - }; - interface HTMLCalciteColorPickerElementEventMap { - calciteColorPickerChange: void; - calciteColorPickerInput: void; - } - interface HTMLCalciteColorPickerElement extends Components.CalciteColorPicker, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteColorPickerElement, - ev: CalciteColorPickerCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteColorPickerElement, - ev: CalciteColorPickerCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteColorPickerElement: { - prototype: HTMLCalciteColorPickerElement; - new (): HTMLCalciteColorPickerElement; - }; - interface HTMLCalciteColorPickerHexInputElementEventMap { - calciteColorPickerHexInputChange: void; - } - interface HTMLCalciteColorPickerHexInputElement extends Components.CalciteColorPickerHexInput, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteColorPickerHexInputElement, - ev: CalciteColorPickerHexInputCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteColorPickerHexInputElement, - ev: CalciteColorPickerHexInputCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteColorPickerHexInputElement: { - prototype: HTMLCalciteColorPickerHexInputElement; - new (): HTMLCalciteColorPickerHexInputElement; - }; - interface HTMLCalciteColorPickerSwatchElement extends Components.CalciteColorPickerSwatch, HTMLStencilElement {} - var HTMLCalciteColorPickerSwatchElement: { - prototype: HTMLCalciteColorPickerSwatchElement; - new (): HTMLCalciteColorPickerSwatchElement; - }; - interface HTMLCalciteComboboxElementEventMap { - calciteComboboxChange: void; - calciteComboboxFilterChange: void; - calciteComboboxChipClose: void; - calciteComboboxBeforeClose: void; - calciteComboboxClose: void; - calciteComboboxBeforeOpen: void; - calciteComboboxOpen: void; - } - interface HTMLCalciteComboboxElement extends Components.CalciteCombobox, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteComboboxElement, - ev: CalciteComboboxCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteComboboxElement, - ev: CalciteComboboxCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteComboboxElement: { - prototype: HTMLCalciteComboboxElement; - new (): HTMLCalciteComboboxElement; - }; - interface HTMLCalciteComboboxItemElementEventMap { - calciteComboboxItemChange: void; - } - interface HTMLCalciteComboboxItemElement extends Components.CalciteComboboxItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteComboboxItemElement, - ev: CalciteComboboxItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteComboboxItemElement, - ev: CalciteComboboxItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteComboboxItemElement: { - prototype: HTMLCalciteComboboxItemElement; - new (): HTMLCalciteComboboxItemElement; - }; - interface HTMLCalciteComboboxItemGroupElement extends Components.CalciteComboboxItemGroup, HTMLStencilElement {} - var HTMLCalciteComboboxItemGroupElement: { - prototype: HTMLCalciteComboboxItemGroupElement; - new (): HTMLCalciteComboboxItemGroupElement; - }; - interface HTMLCalciteDatePickerElementEventMap { - calciteDatePickerChange: void; - calciteDatePickerRangeChange: void; - } - interface HTMLCalciteDatePickerElement extends Components.CalciteDatePicker, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerElement, - ev: CalciteDatePickerCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerElement, - ev: CalciteDatePickerCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteDatePickerElement: { - prototype: HTMLCalciteDatePickerElement; - new (): HTMLCalciteDatePickerElement; - }; - interface HTMLCalciteDatePickerDayElementEventMap { - calciteDaySelect: void; - calciteInternalDayHover: void; - } - interface HTMLCalciteDatePickerDayElement extends Components.CalciteDatePickerDay, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerDayElement, - ev: CalciteDatePickerDayCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerDayElement, - ev: CalciteDatePickerDayCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteDatePickerDayElement: { - prototype: HTMLCalciteDatePickerDayElement; - new (): HTMLCalciteDatePickerDayElement; - }; - interface HTMLCalciteDatePickerMonthElementEventMap { - calciteInternalDatePickerSelect: Date; - calciteInternalDatePickerHover: Date; - calciteInternalDatePickerActiveDateChange: Date; - calciteInternalDatePickerMouseOut: void; - } - interface HTMLCalciteDatePickerMonthElement extends Components.CalciteDatePickerMonth, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerMonthElement, - ev: CalciteDatePickerMonthCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerMonthElement, - ev: CalciteDatePickerMonthCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteDatePickerMonthElement: { - prototype: HTMLCalciteDatePickerMonthElement; - new (): HTMLCalciteDatePickerMonthElement; - }; - interface HTMLCalciteDatePickerMonthHeaderElementEventMap { - calciteInternalDatePickerSelect: Date; - } - interface HTMLCalciteDatePickerMonthHeaderElement - extends Components.CalciteDatePickerMonthHeader, - HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerMonthHeaderElement, - ev: CalciteDatePickerMonthHeaderCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteDatePickerMonthHeaderElement, - ev: CalciteDatePickerMonthHeaderCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteDatePickerMonthHeaderElement: { - prototype: HTMLCalciteDatePickerMonthHeaderElement; - new (): HTMLCalciteDatePickerMonthHeaderElement; - }; - interface HTMLCalciteDropdownElementEventMap { - calciteDropdownSelect: void; - calciteDropdownBeforeClose: void; - calciteDropdownClose: void; - calciteDropdownBeforeOpen: void; - calciteDropdownOpen: void; - } - interface HTMLCalciteDropdownElement extends Components.CalciteDropdown, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDropdownElement, - ev: CalciteDropdownCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteDropdownElement, - ev: CalciteDropdownCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteDropdownElement: { - prototype: HTMLCalciteDropdownElement; - new (): HTMLCalciteDropdownElement; - }; - interface HTMLCalciteDropdownGroupElementEventMap { - calciteInternalDropdownItemChange: RequestedItem2; - } - interface HTMLCalciteDropdownGroupElement extends Components.CalciteDropdownGroup, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDropdownGroupElement, - ev: CalciteDropdownGroupCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteDropdownGroupElement, - ev: CalciteDropdownGroupCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteDropdownGroupElement: { - prototype: HTMLCalciteDropdownGroupElement; - new (): HTMLCalciteDropdownGroupElement; - }; - interface HTMLCalciteDropdownItemElementEventMap { - calciteDropdownItemSelect: void; - calciteInternalDropdownItemSelect: RequestedItem2; - calciteInternalDropdownItemKeyEvent: ItemKeyboardEvent; - calciteInternalDropdownCloseRequest: void; - } - interface HTMLCalciteDropdownItemElement extends Components.CalciteDropdownItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDropdownItemElement, - ev: CalciteDropdownItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteDropdownItemElement, - ev: CalciteDropdownItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteDropdownItemElement: { - prototype: HTMLCalciteDropdownItemElement; - new (): HTMLCalciteDropdownItemElement; - }; - interface HTMLCalciteFabElement extends Components.CalciteFab, HTMLStencilElement {} - var HTMLCalciteFabElement: { - prototype: HTMLCalciteFabElement; - new (): HTMLCalciteFabElement; - }; - interface HTMLCalciteFilterElementEventMap { - calciteFilterChange: void; - } - interface HTMLCalciteFilterElement extends Components.CalciteFilter, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteFilterElement, - ev: CalciteFilterCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteFilterElement, - ev: CalciteFilterCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteFilterElement: { - prototype: HTMLCalciteFilterElement; - new (): HTMLCalciteFilterElement; - }; - interface HTMLCalciteFlowElement extends Components.CalciteFlow, HTMLStencilElement {} - var HTMLCalciteFlowElement: { - prototype: HTMLCalciteFlowElement; - new (): HTMLCalciteFlowElement; - }; - interface HTMLCalciteFlowItemElementEventMap { - calciteFlowItemBack: void; - calciteFlowItemScroll: void; - calciteFlowItemClose: void; - calciteFlowItemToggle: void; - } - interface HTMLCalciteFlowItemElement extends Components.CalciteFlowItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteFlowItemElement, - ev: CalciteFlowItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteFlowItemElement, - ev: CalciteFlowItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteFlowItemElement: { - prototype: HTMLCalciteFlowItemElement; - new (): HTMLCalciteFlowItemElement; - }; - interface HTMLCalciteGraphElement extends Components.CalciteGraph, HTMLStencilElement {} - var HTMLCalciteGraphElement: { - prototype: HTMLCalciteGraphElement; - new (): HTMLCalciteGraphElement; - }; - interface HTMLCalciteHandleElementEventMap { - calciteHandleNudge: HandleNudge; - calciteInternalHandleChange: HandleChange; - } - interface HTMLCalciteHandleElement extends Components.CalciteHandle, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteHandleElement, - ev: CalciteHandleCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteHandleElement, - ev: CalciteHandleCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteHandleElement: { - prototype: HTMLCalciteHandleElement; - new (): HTMLCalciteHandleElement; - }; - interface HTMLCalciteIconElement extends Components.CalciteIcon, HTMLStencilElement {} - var HTMLCalciteIconElement: { - prototype: HTMLCalciteIconElement; - new (): HTMLCalciteIconElement; - }; - interface HTMLCalciteInlineEditableElementEventMap { - calciteInlineEditableEditCancel: void; - calciteInlineEditableEditConfirm: void; - calciteInternalInlineEditableEnableEditingChange: void; - } - interface HTMLCalciteInlineEditableElement extends Components.CalciteInlineEditable, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteInlineEditableElement, - ev: CalciteInlineEditableCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteInlineEditableElement, - ev: CalciteInlineEditableCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteInlineEditableElement: { - prototype: HTMLCalciteInlineEditableElement; - new (): HTMLCalciteInlineEditableElement; - }; - interface HTMLCalciteInputElementEventMap { - calciteInternalInputFocus: void; - calciteInternalInputBlur: void; - calciteInputInput: void; - calciteInputChange: void; - } - interface HTMLCalciteInputElement extends Components.CalciteInput, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteInputElement, ev: CalciteInputCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteInputElement, ev: CalciteInputCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteInputElement: { - prototype: HTMLCalciteInputElement; - new (): HTMLCalciteInputElement; - }; - interface HTMLCalciteInputDatePickerElementEventMap { - calciteInputDatePickerChange: void; - calciteInputDatePickerBeforeClose: void; - calciteInputDatePickerClose: void; - calciteInputDatePickerBeforeOpen: void; - calciteInputDatePickerOpen: void; - } - interface HTMLCalciteInputDatePickerElement extends Components.CalciteInputDatePicker, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteInputDatePickerElement, - ev: CalciteInputDatePickerCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteInputDatePickerElement, - ev: CalciteInputDatePickerCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteInputDatePickerElement: { - prototype: HTMLCalciteInputDatePickerElement; - new (): HTMLCalciteInputDatePickerElement; - }; - interface HTMLCalciteInputMessageElement extends Components.CalciteInputMessage, HTMLStencilElement {} - var HTMLCalciteInputMessageElement: { - prototype: HTMLCalciteInputMessageElement; - new (): HTMLCalciteInputMessageElement; - }; - interface HTMLCalciteInputNumberElementEventMap { - calciteInternalInputNumberFocus: void; - calciteInternalInputNumberBlur: void; - calciteInputNumberInput: void; - calciteInputNumberChange: void; - } - interface HTMLCalciteInputNumberElement extends Components.CalciteInputNumber, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteInputNumberElement, - ev: CalciteInputNumberCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteInputNumberElement, - ev: CalciteInputNumberCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteInputNumberElement: { - prototype: HTMLCalciteInputNumberElement; - new (): HTMLCalciteInputNumberElement; - }; - interface HTMLCalciteInputTextElementEventMap { - calciteInternalInputTextFocus: { - element: HTMLInputElement; - value: string; - }; - calciteInternalInputTextBlur: { element: HTMLInputElement; value: string }; - calciteInputTextInput: void; - calciteInputTextChange: void; - } - interface HTMLCalciteInputTextElement extends Components.CalciteInputText, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteInputTextElement, - ev: CalciteInputTextCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteInputTextElement, - ev: CalciteInputTextCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteInputTextElement: { - prototype: HTMLCalciteInputTextElement; - new (): HTMLCalciteInputTextElement; - }; - interface HTMLCalciteInputTimePickerElementEventMap { - calciteInputTimePickerBeforeClose: void; - calciteInputTimePickerBeforeOpen: void; - calciteInputTimePickerChange: void; - calciteInputTimePickerClose: void; - calciteInputTimePickerOpen: void; - } - interface HTMLCalciteInputTimePickerElement extends Components.CalciteInputTimePicker, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteInputTimePickerElement, - ev: CalciteInputTimePickerCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteInputTimePickerElement, - ev: CalciteInputTimePickerCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteInputTimePickerElement: { - prototype: HTMLCalciteInputTimePickerElement; - new (): HTMLCalciteInputTimePickerElement; - }; - interface HTMLCalciteInputTimeZoneElementEventMap { - calciteInputTimeZoneBeforeClose: void; - calciteInputTimeZoneBeforeOpen: void; - calciteInputTimeZoneChange: void; - calciteInputTimeZoneClose: void; - calciteInputTimeZoneOpen: void; - } - interface HTMLCalciteInputTimeZoneElement extends Components.CalciteInputTimeZone, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteInputTimeZoneElement, - ev: CalciteInputTimeZoneCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteInputTimeZoneElement, - ev: CalciteInputTimeZoneCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteInputTimeZoneElement: { - prototype: HTMLCalciteInputTimeZoneElement; - new (): HTMLCalciteInputTimeZoneElement; - }; - interface HTMLCalciteLabelElementEventMap { - calciteInternalLabelClick: { - sourceEvent: MouseEvent; - }; - } - interface HTMLCalciteLabelElement extends Components.CalciteLabel, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteLabelElement, ev: CalciteLabelCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteLabelElement, ev: CalciteLabelCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteLabelElement: { - prototype: HTMLCalciteLabelElement; - new (): HTMLCalciteLabelElement; - }; - interface HTMLCalciteLinkElement extends Components.CalciteLink, HTMLStencilElement {} - var HTMLCalciteLinkElement: { - prototype: HTMLCalciteLinkElement; - new (): HTMLCalciteLinkElement; - }; - interface HTMLCalciteListElementEventMap { - calciteListChange: void; - calciteListFilter: void; - calciteListOrderChange: ListDragDetail; - calciteInternalListDefaultSlotChange: void; - } - /** - * A general purpose list that enables users to construct list items that conform to Calcite styling. - */ - interface HTMLCalciteListElement extends Components.CalciteList, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteListElement, ev: CalciteListCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteListElement, ev: CalciteListCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteListElement: { - prototype: HTMLCalciteListElement; - new (): HTMLCalciteListElement; - }; - interface HTMLCalciteListItemElementEventMap { - calciteListItemSelect: void; - calciteListItemClose: void; - calciteInternalListItemSelect: void; - calciteInternalListItemActive: void; - calciteInternalFocusPreviousItem: void; - calciteInternalListItemChange: void; - } - interface HTMLCalciteListItemElement extends Components.CalciteListItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteListItemElement, - ev: CalciteListItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteListItemElement, - ev: CalciteListItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteListItemElement: { - prototype: HTMLCalciteListItemElement; - new (): HTMLCalciteListItemElement; - }; - interface HTMLCalciteListItemGroupElementEventMap { - calciteInternalListItemGroupDefaultSlotChange: DragEvent; - } - interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteListItemGroupElement, - ev: CalciteListItemGroupCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteListItemGroupElement, - ev: CalciteListItemGroupCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteListItemGroupElement: { - prototype: HTMLCalciteListItemGroupElement; - new (): HTMLCalciteListItemGroupElement; - }; - interface HTMLCalciteLoaderElement extends Components.CalciteLoader, HTMLStencilElement {} - var HTMLCalciteLoaderElement: { - prototype: HTMLCalciteLoaderElement; - new (): HTMLCalciteLoaderElement; - }; - interface HTMLCalciteMenuElement extends Components.CalciteMenu, HTMLStencilElement {} - var HTMLCalciteMenuElement: { - prototype: HTMLCalciteMenuElement; - new (): HTMLCalciteMenuElement; - }; - interface HTMLCalciteMenuItemElementEventMap { - calciteInternalMenuItemKeyEvent: MenuItemCustomEvent; - calciteMenuItemSelect: void; - } - interface HTMLCalciteMenuItemElement extends Components.CalciteMenuItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteMenuItemElement, - ev: CalciteMenuItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteMenuItemElement, - ev: CalciteMenuItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteMenuItemElement: { - prototype: HTMLCalciteMenuItemElement; - new (): HTMLCalciteMenuItemElement; - }; - interface HTMLCalciteMeterElement extends Components.CalciteMeter, HTMLStencilElement {} - var HTMLCalciteMeterElement: { - prototype: HTMLCalciteMeterElement; - new (): HTMLCalciteMeterElement; - }; - interface HTMLCalciteModalElementEventMap { - calciteModalBeforeClose: void; - calciteModalClose: void; - calciteModalBeforeOpen: void; - calciteModalOpen: void; - } - interface HTMLCalciteModalElement extends Components.CalciteModal, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteModalElement, ev: CalciteModalCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteModalElement, ev: CalciteModalCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteModalElement: { - prototype: HTMLCalciteModalElement; - new (): HTMLCalciteModalElement; - }; - interface HTMLCalciteNavigationElementEventMap { - calciteNavigationActionSelect: void; - } - interface HTMLCalciteNavigationElement extends Components.CalciteNavigation, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteNavigationElement, - ev: CalciteNavigationCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteNavigationElement, - ev: CalciteNavigationCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteNavigationElement: { - prototype: HTMLCalciteNavigationElement; - new (): HTMLCalciteNavigationElement; - }; - interface HTMLCalciteNavigationLogoElement extends Components.CalciteNavigationLogo, HTMLStencilElement {} - var HTMLCalciteNavigationLogoElement: { - prototype: HTMLCalciteNavigationLogoElement; - new (): HTMLCalciteNavigationLogoElement; - }; - interface HTMLCalciteNavigationUserElement extends Components.CalciteNavigationUser, HTMLStencilElement {} - var HTMLCalciteNavigationUserElement: { - prototype: HTMLCalciteNavigationUserElement; - new (): HTMLCalciteNavigationUserElement; - }; - interface HTMLCalciteNoticeElementEventMap { - calciteNoticeBeforeClose: void; - calciteNoticeBeforeOpen: void; - calciteNoticeClose: void; - calciteNoticeOpen: void; - } - interface HTMLCalciteNoticeElement extends Components.CalciteNotice, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteNoticeElement, - ev: CalciteNoticeCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteNoticeElement, - ev: CalciteNoticeCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteNoticeElement: { - prototype: HTMLCalciteNoticeElement; - new (): HTMLCalciteNoticeElement; - }; - interface HTMLCalciteOptionElementEventMap { - calciteInternalOptionChange: void; - } - interface HTMLCalciteOptionElement extends Components.CalciteOption, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteOptionElement, - ev: CalciteOptionCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteOptionElement, - ev: CalciteOptionCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteOptionElement: { - prototype: HTMLCalciteOptionElement; - new (): HTMLCalciteOptionElement; - }; - interface HTMLCalciteOptionGroupElementEventMap { - calciteInternalOptionGroupChange: void; - } - interface HTMLCalciteOptionGroupElement extends Components.CalciteOptionGroup, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteOptionGroupElement, - ev: CalciteOptionGroupCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteOptionGroupElement, - ev: CalciteOptionGroupCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteOptionGroupElement: { - prototype: HTMLCalciteOptionGroupElement; - new (): HTMLCalciteOptionGroupElement; - }; - interface HTMLCalcitePaginationElementEventMap { - calcitePaginationChange: void; - } - interface HTMLCalcitePaginationElement extends Components.CalcitePagination, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalcitePaginationElement, - ev: CalcitePaginationCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalcitePaginationElement, - ev: CalcitePaginationCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalcitePaginationElement: { - prototype: HTMLCalcitePaginationElement; - new (): HTMLCalcitePaginationElement; - }; - interface HTMLCalcitePanelElementEventMap { - calcitePanelClose: void; - calcitePanelToggle: void; - calcitePanelScroll: void; - } - interface HTMLCalcitePanelElement extends Components.CalcitePanel, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalcitePanelElement, ev: CalcitePanelCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalcitePanelElement, ev: CalcitePanelCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalcitePanelElement: { - prototype: HTMLCalcitePanelElement; - new (): HTMLCalcitePanelElement; - }; - interface HTMLCalcitePickListElementEventMap { - calciteListChange: Map; - calciteListFilter: void; - } - /** - * @deprecated Use the `list` component instead. - */ - interface HTMLCalcitePickListElement extends Components.CalcitePickList, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalcitePickListElement, - ev: CalcitePickListCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalcitePickListElement, - ev: CalcitePickListCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalcitePickListElement: { - prototype: HTMLCalcitePickListElement; - new (): HTMLCalcitePickListElement; - }; - /** - * @deprecated Use the `list` component instead. - */ - interface HTMLCalcitePickListGroupElement extends Components.CalcitePickListGroup, HTMLStencilElement {} - var HTMLCalcitePickListGroupElement: { - prototype: HTMLCalcitePickListGroupElement; - new (): HTMLCalcitePickListGroupElement; - }; - interface HTMLCalcitePickListItemElementEventMap { - calciteListItemChange: { - item: HTMLCalcitePickListItemElement; - value: any; - selected: boolean; - shiftPressed: boolean; - }; - calciteListItemRemove: void; - calciteInternalListItemPropsChange: void; - calciteInternalListItemValueChange: { - oldValue: any; - newValue: any; - }; - } - /** - * @deprecated Use the `list` component instead. - */ - interface HTMLCalcitePickListItemElement extends Components.CalcitePickListItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalcitePickListItemElement, - ev: CalcitePickListItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalcitePickListItemElement, - ev: CalcitePickListItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalcitePickListItemElement: { - prototype: HTMLCalcitePickListItemElement; - new (): HTMLCalcitePickListItemElement; - }; - interface HTMLCalcitePopoverElementEventMap { - calcitePopoverBeforeClose: void; - calcitePopoverClose: void; - calcitePopoverBeforeOpen: void; - calcitePopoverOpen: void; - } - interface HTMLCalcitePopoverElement extends Components.CalcitePopover, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalcitePopoverElement, - ev: CalcitePopoverCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalcitePopoverElement, - ev: CalcitePopoverCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalcitePopoverElement: { - prototype: HTMLCalcitePopoverElement; - new (): HTMLCalcitePopoverElement; - }; - interface HTMLCalciteProgressElement extends Components.CalciteProgress, HTMLStencilElement {} - var HTMLCalciteProgressElement: { - prototype: HTMLCalciteProgressElement; - new (): HTMLCalciteProgressElement; - }; - interface HTMLCalciteRadioButtonElementEventMap { - calciteInternalRadioButtonBlur: void; - calciteRadioButtonChange: void; - calciteInternalRadioButtonCheckedChange: void; - calciteInternalRadioButtonFocus: void; - } - interface HTMLCalciteRadioButtonElement extends Components.CalciteRadioButton, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteRadioButtonElement, - ev: CalciteRadioButtonCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteRadioButtonElement, - ev: CalciteRadioButtonCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteRadioButtonElement: { - prototype: HTMLCalciteRadioButtonElement; - new (): HTMLCalciteRadioButtonElement; - }; - interface HTMLCalciteRadioButtonGroupElementEventMap { - calciteRadioButtonGroupChange: void; - } - interface HTMLCalciteRadioButtonGroupElement extends Components.CalciteRadioButtonGroup, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteRadioButtonGroupElement, - ev: CalciteRadioButtonGroupCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteRadioButtonGroupElement, - ev: CalciteRadioButtonGroupCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteRadioButtonGroupElement: { - prototype: HTMLCalciteRadioButtonGroupElement; - new (): HTMLCalciteRadioButtonGroupElement; - }; - interface HTMLCalciteRatingElementEventMap { - calciteRatingChange: void; - } - interface HTMLCalciteRatingElement extends Components.CalciteRating, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteRatingElement, - ev: CalciteRatingCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteRatingElement, - ev: CalciteRatingCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteRatingElement: { - prototype: HTMLCalciteRatingElement; - new (): HTMLCalciteRatingElement; - }; - interface HTMLCalciteScrimElement extends Components.CalciteScrim, HTMLStencilElement {} - var HTMLCalciteScrimElement: { - prototype: HTMLCalciteScrimElement; - new (): HTMLCalciteScrimElement; - }; - interface HTMLCalciteSegmentedControlElementEventMap { - calciteSegmentedControlChange: void; - } - interface HTMLCalciteSegmentedControlElement extends Components.CalciteSegmentedControl, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteSegmentedControlElement, - ev: CalciteSegmentedControlCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteSegmentedControlElement, - ev: CalciteSegmentedControlCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSegmentedControlElement: { - prototype: HTMLCalciteSegmentedControlElement; - new (): HTMLCalciteSegmentedControlElement; - }; - interface HTMLCalciteSegmentedControlItemElementEventMap { - calciteInternalSegmentedControlItemChange: void; - } - interface HTMLCalciteSegmentedControlItemElement extends Components.CalciteSegmentedControlItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteSegmentedControlItemElement, - ev: CalciteSegmentedControlItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteSegmentedControlItemElement, - ev: CalciteSegmentedControlItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSegmentedControlItemElement: { - prototype: HTMLCalciteSegmentedControlItemElement; - new (): HTMLCalciteSegmentedControlItemElement; - }; - interface HTMLCalciteSelectElementEventMap { - calciteSelectChange: void; - } - interface HTMLCalciteSelectElement extends Components.CalciteSelect, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteSelectElement, - ev: CalciteSelectCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteSelectElement, - ev: CalciteSelectCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSelectElement: { - prototype: HTMLCalciteSelectElement; - new (): HTMLCalciteSelectElement; - }; - interface HTMLCalciteSheetElementEventMap { - calciteSheetBeforeClose: void; - calciteSheetClose: void; - calciteSheetBeforeOpen: void; - calciteSheetOpen: void; - } - interface HTMLCalciteSheetElement extends Components.CalciteSheet, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteSheetElement, ev: CalciteSheetCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteSheetElement, ev: CalciteSheetCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSheetElement: { - prototype: HTMLCalciteSheetElement; - new (): HTMLCalciteSheetElement; - }; - 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 HTMLCalciteSliderElementEventMap { - calciteSliderInput: void; - calciteSliderChange: void; - } - interface HTMLCalciteSliderElement extends Components.CalciteSlider, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteSliderElement, - ev: CalciteSliderCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteSliderElement, - ev: CalciteSliderCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSliderElement: { - prototype: HTMLCalciteSliderElement; - new (): HTMLCalciteSliderElement; - }; - interface HTMLCalciteSortableListElementEventMap { - calciteListOrderChange: void; - } - interface HTMLCalciteSortableListElement extends Components.CalciteSortableList, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteSortableListElement, - ev: CalciteSortableListCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteSortableListElement, - ev: CalciteSortableListCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSortableListElement: { - prototype: HTMLCalciteSortableListElement; - new (): HTMLCalciteSortableListElement; - }; - interface HTMLCalciteSplitButtonElementEventMap { - calciteSplitButtonPrimaryClick: void; - calciteSplitButtonSecondaryClick: void; - } - interface HTMLCalciteSplitButtonElement extends Components.CalciteSplitButton, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteSplitButtonElement, - ev: CalciteSplitButtonCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteSplitButtonElement, - ev: CalciteSplitButtonCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSplitButtonElement: { - prototype: HTMLCalciteSplitButtonElement; - new (): HTMLCalciteSplitButtonElement; - }; - interface HTMLCalciteStackElement extends Components.CalciteStack, HTMLStencilElement {} - var HTMLCalciteStackElement: { - prototype: HTMLCalciteStackElement; - new (): HTMLCalciteStackElement; - }; - interface HTMLCalciteStepperElementEventMap { - calciteStepperItemChange: void; - calciteInternalStepperItemChange: StepperItemChangeEventDetail; - } - interface HTMLCalciteStepperElement extends Components.CalciteStepper, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteStepperElement, - ev: CalciteStepperCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteStepperElement, - ev: CalciteStepperCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteStepperElement: { - prototype: HTMLCalciteStepperElement; - new (): HTMLCalciteStepperElement; - }; - interface HTMLCalciteStepperItemElementEventMap { - calciteInternalStepperItemKeyEvent: StepperItemKeyEventDetail; - calciteInternalStepperItemSelect: StepperItemEventDetail; - calciteInternalUserRequestedStepperItemSelect: StepperItemChangeEventDetail; - calciteInternalStepperItemRegister: StepperItemEventDetail; - } - interface HTMLCalciteStepperItemElement extends Components.CalciteStepperItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteStepperItemElement, - ev: CalciteStepperItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteStepperItemElement, - ev: CalciteStepperItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteStepperItemElement: { - prototype: HTMLCalciteStepperItemElement; - new (): HTMLCalciteStepperItemElement; - }; - interface HTMLCalciteSwitchElementEventMap { - calciteSwitchChange: void; - } - interface HTMLCalciteSwitchElement extends Components.CalciteSwitch, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteSwitchElement, - ev: CalciteSwitchCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteSwitchElement, - ev: CalciteSwitchCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteSwitchElement: { - prototype: HTMLCalciteSwitchElement; - new (): HTMLCalciteSwitchElement; - }; - interface HTMLCalciteTabElementEventMap { - calciteInternalTabRegister: void; - } - interface HTMLCalciteTabElement extends Components.CalciteTab, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteTabElement, ev: CalciteTabCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteTabElement, ev: CalciteTabCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTabElement: { - prototype: HTMLCalciteTabElement; - new (): HTMLCalciteTabElement; - }; - interface HTMLCalciteTabNavElementEventMap { - calciteTabChange: void; - calciteInternalTabChange: TabChangeEventDetail; - } - interface HTMLCalciteTabNavElement extends Components.CalciteTabNav, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTabNavElement, - ev: CalciteTabNavCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTabNavElement, - ev: CalciteTabNavCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTabNavElement: { - prototype: HTMLCalciteTabNavElement; - new (): HTMLCalciteTabNavElement; - }; - interface HTMLCalciteTabTitleElementEventMap { - calciteTabsActivate: void; - calciteInternalTabsActivate: TabChangeEventDetail; - calciteTabsClose: void; - calciteInternalTabsClose: TabCloseEventDetail; - calciteInternalTabsFocusNext: void; - calciteInternalTabsFocusPrevious: void; - calciteInternalTabsFocusFirst: void; - calciteInternalTabsFocusLast: void; - calciteInternalTabTitleRegister: TabID; - calciteInternalTabIconChanged: void; - } - interface HTMLCalciteTabTitleElement extends Components.CalciteTabTitle, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTabTitleElement, - ev: CalciteTabTitleCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTabTitleElement, - ev: CalciteTabTitleCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTabTitleElement: { - prototype: HTMLCalciteTabTitleElement; - new (): HTMLCalciteTabTitleElement; - }; - interface HTMLCalciteTableElementEventMap { - calciteTableSelect: void; - calciteTablePageChange: void; - calciteInternalTableRowFocusChange: TableRowFocusEvent; - } - interface HTMLCalciteTableElement extends Components.CalciteTable, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteTableElement, ev: CalciteTableCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteTableElement, ev: CalciteTableCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTableElement: { - prototype: HTMLCalciteTableElement; - new (): HTMLCalciteTableElement; - }; - interface HTMLCalciteTableCellElement extends Components.CalciteTableCell, HTMLStencilElement {} - var HTMLCalciteTableCellElement: { - prototype: HTMLCalciteTableCellElement; - new (): HTMLCalciteTableCellElement; - }; - interface HTMLCalciteTableHeaderElement extends Components.CalciteTableHeader, HTMLStencilElement {} - var HTMLCalciteTableHeaderElement: { - prototype: HTMLCalciteTableHeaderElement; - new (): HTMLCalciteTableHeaderElement; - }; - interface HTMLCalciteTableRowElementEventMap { - calciteTableRowSelect: void; - calciteInternalTableRowFocusRequest: TableRowFocusEvent; - } - interface HTMLCalciteTableRowElement extends Components.CalciteTableRow, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTableRowElement, - ev: CalciteTableRowCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTableRowElement, - ev: CalciteTableRowCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTableRowElement: { - prototype: HTMLCalciteTableRowElement; - new (): HTMLCalciteTableRowElement; - }; - interface HTMLCalciteTabsElement extends Components.CalciteTabs, HTMLStencilElement {} - var HTMLCalciteTabsElement: { - prototype: HTMLCalciteTabsElement; - new (): HTMLCalciteTabsElement; - }; - interface HTMLCalciteTextAreaElementEventMap { - calciteTextAreaInput: void; - calciteTextAreaChange: void; - } - interface HTMLCalciteTextAreaElement extends Components.CalciteTextArea, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTextAreaElement, - ev: CalciteTextAreaCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTextAreaElement, - ev: CalciteTextAreaCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTextAreaElement: { - prototype: HTMLCalciteTextAreaElement; - new (): HTMLCalciteTextAreaElement; - }; - interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement {} - var HTMLCalciteTileElement: { - prototype: HTMLCalciteTileElement; - new (): HTMLCalciteTileElement; - }; - interface HTMLCalciteTileSelectElementEventMap { - calciteTileSelectChange: void; - } - interface HTMLCalciteTileSelectElement extends Components.CalciteTileSelect, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTileSelectElement, - ev: CalciteTileSelectCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTileSelectElement, - ev: CalciteTileSelectCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTileSelectElement: { - prototype: HTMLCalciteTileSelectElement; - new (): HTMLCalciteTileSelectElement; - }; - interface HTMLCalciteTileSelectGroupElement extends Components.CalciteTileSelectGroup, HTMLStencilElement {} - var HTMLCalciteTileSelectGroupElement: { - prototype: HTMLCalciteTileSelectGroupElement; - new (): HTMLCalciteTileSelectGroupElement; - }; - interface HTMLCalciteTimePickerElementEventMap { - calciteInternalTimePickerBlur: void; - calciteInternalTimePickerChange: string; - calciteInternalTimePickerFocus: void; - } - interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTimePickerElement, - ev: CalciteTimePickerCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTimePickerElement, - ev: CalciteTimePickerCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTimePickerElement: { - prototype: HTMLCalciteTimePickerElement; - new (): HTMLCalciteTimePickerElement; - }; - interface HTMLCalciteTipElementEventMap { - calciteTipDismiss: void; - } - interface HTMLCalciteTipElement extends Components.CalciteTip, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteTipElement, ev: CalciteTipCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteTipElement, ev: CalciteTipCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTipElement: { - prototype: HTMLCalciteTipElement; - new (): HTMLCalciteTipElement; - }; - interface HTMLCalciteTipGroupElement extends Components.CalciteTipGroup, HTMLStencilElement {} - var HTMLCalciteTipGroupElement: { - prototype: HTMLCalciteTipGroupElement; - new (): HTMLCalciteTipGroupElement; - }; - interface HTMLCalciteTipManagerElementEventMap { - calciteTipManagerClose: void; - } - interface HTMLCalciteTipManagerElement extends Components.CalciteTipManager, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTipManagerElement, - ev: CalciteTipManagerCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTipManagerElement, - ev: CalciteTipManagerCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTipManagerElement: { - prototype: HTMLCalciteTipManagerElement; - new (): HTMLCalciteTipManagerElement; - }; - interface HTMLCalciteTooltipElementEventMap { - calciteTooltipBeforeClose: void; - calciteTooltipClose: void; - calciteTooltipBeforeOpen: void; - calciteTooltipOpen: void; - } - interface HTMLCalciteTooltipElement extends Components.CalciteTooltip, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTooltipElement, - ev: CalciteTooltipCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTooltipElement, - ev: CalciteTooltipCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTooltipElement: { - prototype: HTMLCalciteTooltipElement; - new (): HTMLCalciteTooltipElement; - }; - interface HTMLCalciteTreeElementEventMap { - calciteTreeSelect: void; - } - interface HTMLCalciteTreeElement extends Components.CalciteTree, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteTreeElement, ev: CalciteTreeCustomEvent) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLCalciteTreeElement, ev: CalciteTreeCustomEvent) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTreeElement: { - prototype: HTMLCalciteTreeElement; - new (): HTMLCalciteTreeElement; - }; - interface HTMLCalciteTreeItemElementEventMap { - calciteInternalTreeItemSelect: TreeItemSelectDetail; - } - interface HTMLCalciteTreeItemElement extends Components.CalciteTreeItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTreeItemElement, - ev: CalciteTreeItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteTreeItemElement, - ev: CalciteTreeItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteTreeItemElement: { - prototype: HTMLCalciteTreeItemElement; - new (): HTMLCalciteTreeItemElement; - }; - interface HTMLCalciteValueListElementEventMap { - calciteListChange: Map; - calciteListOrderChange: any[]; - calciteListFilter: void; - } - /** - * @deprecated Use the `list` component instead. - */ - interface HTMLCalciteValueListElement extends Components.CalciteValueList, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteValueListElement, - ev: CalciteValueListCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteValueListElement, - ev: CalciteValueListCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - var HTMLCalciteValueListElement: { - prototype: HTMLCalciteValueListElement; - new (): HTMLCalciteValueListElement; - }; - interface HTMLCalciteValueListItemElementEventMap { - calciteListItemChange: { - item: HTMLCalciteValueListItemElement; - value: any; - selected: boolean; - shiftPressed: boolean; - }; - calciteListItemRemove: void; - calciteValueListItemDragHandleBlur: ListItemAndHandle; - } - /** - * @deprecated Use the `list` component instead. - */ - interface HTMLCalciteValueListItemElement extends Components.CalciteValueListItem, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteValueListItemElement, - ev: CalciteValueListItemCustomEvent - ) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | AddEventListenerOptions - ): void; - addEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | AddEventListenerOptions - ): void; - removeEventListener( - type: K, - listener: ( - this: HTMLCalciteValueListItemElement, - ev: CalciteValueListItemCustomEvent - ) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: Document, ev: DocumentEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: K, - listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, - options?: boolean | EventListenerOptions - ): void; - removeEventListener( - type: string, - listener: EventListenerOrEventListenerObject, - options?: boolean | EventListenerOptions - ): void; - } - 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-chip-group": HTMLCalciteChipGroupElement; - "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-flow-item": HTMLCalciteFlowItemElement; - "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-number": HTMLCalciteInputNumberElement; - "calcite-input-text": HTMLCalciteInputTextElement; - "calcite-input-time-picker": HTMLCalciteInputTimePickerElement; - "calcite-input-time-zone": HTMLCalciteInputTimeZoneElement; - "calcite-label": HTMLCalciteLabelElement; - "calcite-link": HTMLCalciteLinkElement; - "calcite-list": HTMLCalciteListElement; - "calcite-list-item": HTMLCalciteListItemElement; - "calcite-list-item-group": HTMLCalciteListItemGroupElement; - "calcite-loader": HTMLCalciteLoaderElement; - "calcite-menu": HTMLCalciteMenuElement; - "calcite-menu-item": HTMLCalciteMenuItemElement; - "calcite-meter": HTMLCalciteMeterElement; - "calcite-modal": HTMLCalciteModalElement; - "calcite-navigation": HTMLCalciteNavigationElement; - "calcite-navigation-logo": HTMLCalciteNavigationLogoElement; - "calcite-navigation-user": HTMLCalciteNavigationUserElement; - "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-progress": HTMLCalciteProgressElement; - "calcite-radio-button": HTMLCalciteRadioButtonElement; - "calcite-radio-button-group": HTMLCalciteRadioButtonGroupElement; - "calcite-rating": HTMLCalciteRatingElement; - "calcite-scrim": HTMLCalciteScrimElement; - "calcite-segmented-control": HTMLCalciteSegmentedControlElement; - "calcite-segmented-control-item": HTMLCalciteSegmentedControlItemElement; - "calcite-select": HTMLCalciteSelectElement; - "calcite-sheet": HTMLCalciteSheetElement; - "calcite-shell": HTMLCalciteShellElement; - "calcite-shell-center-row": HTMLCalciteShellCenterRowElement; - "calcite-shell-panel": HTMLCalciteShellPanelElement; - "calcite-slider": HTMLCalciteSliderElement; - "calcite-sortable-list": HTMLCalciteSortableListElement; - "calcite-split-button": HTMLCalciteSplitButtonElement; - "calcite-stack": HTMLCalciteStackElement; - "calcite-stepper": HTMLCalciteStepperElement; - "calcite-stepper-item": HTMLCalciteStepperItemElement; - "calcite-switch": HTMLCalciteSwitchElement; - "calcite-tab": HTMLCalciteTabElement; - "calcite-tab-nav": HTMLCalciteTabNavElement; - "calcite-tab-title": HTMLCalciteTabTitleElement; - "calcite-table": HTMLCalciteTableElement; - "calcite-table-cell": HTMLCalciteTableCellElement; - "calcite-table-header": HTMLCalciteTableHeaderElement; - "calcite-table-row": HTMLCalciteTableRowElement; - "calcite-tabs": HTMLCalciteTabsElement; - "calcite-text-area": HTMLCalciteTextAreaElement; - "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-tree": HTMLCalciteTreeElement; - "calcite-tree-item": HTMLCalciteTreeItemElement; - "calcite-value-list": HTMLCalciteValueListElement; - "calcite-value-list-item": HTMLCalciteValueListItemElement; - } -} -declare namespace LocalJSX { - interface CalciteAccordion { - /** - * Specifies the appearance of the component. - */ - appearance?: Extract<"solid" | "transparent", Appearance>; - /** - * Specifies the placement of the icon in the header. - */ - iconPosition?: Position; - /** - * Specifies the type of the icon in the header. - */ - iconType?: "chevron" | "caret" | "plus-minus"; - onCalciteInternalAccordionChange?: (event: CalciteAccordionCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). - */ - selectionMode?: Extract<"single" | "single-persist" | "multiple", SelectionMode>; - } - interface CalciteAccordionItem { - /** - * The containing `accordion` element. - */ - accordionParent?: HTMLCalciteAccordionElement; - /** - * Specifies a description for the component. - */ - description?: string; - /** - * When `true`, the component is expanded. - */ - expanded?: boolean; - /** - * Specifies heading text for the component. - */ - heading?: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: FlipContext; - /** - * Specifies the placement of the icon in the header inherited from the `calcite-accordion`. - */ - iconPosition?: Position; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - /** - * Specifies the type of the icon in the header inherited from the `calcite-accordion`. - */ - iconType?: "chevron" | "caret" | "plus-minus"; - onCalciteInternalAccordionItemClose?: (event: CalciteAccordionItemCustomEvent) => void; - onCalciteInternalAccordionItemSelect?: (event: CalciteAccordionItemCustomEvent) => void; - /** - * Specifies the size of the component inherited from the `calcite-accordion`. - */ - scale?: Scale; - } - interface CalciteAction { - /** - * When `true`, the component is highlighted. - */ - active?: boolean; - /** - * Specifies the horizontal alignment of button elements with text content. - */ - alignment?: Alignment; - /** - * Specifies the appearance of the component. - */ - appearance?: Extract<"solid" | "transparent", Appearance>; - /** - * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. - */ - compact?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies an icon to display. - */ - icon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * When `true`, displays a visual indicator. - */ - indicator?: boolean; - /** - * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. - */ - label?: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ActionMessages; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies text that accompanies the icon. - */ - text: string; - /** - * Indicates whether the text is displayed. - */ - textEnabled?: boolean; - } - interface CalciteActionBar { - /** - * Specifies the accessible label for the last action-group. - */ - actionsEndGroupLabel?: string; - /** - * When `true`, the expand-toggling behavior is disabled. - */ - expandDisabled?: boolean; - /** - * When `true`, the component is expanded. - */ - expanded?: boolean; - /** - * The layout direction of the actions. - */ - layout?: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ActionBarMessages; - /** - * Emits when the `expanded` property is toggled. - */ - onCalciteActionBarToggle?: (event: CalciteActionBarCustomEvent) => void; - /** - * Disables automatically overflowing `calcite-action`s that won't fit into menus. - */ - overflowActionsDisabled?: boolean; - /** - * Arranges the component depending on the element's `dir` property. - */ - position?: Position; - /** - * Specifies the size of the expand `calcite-action`. - */ - scale?: Scale; - } - interface CalciteActionGroup { - /** - * Indicates number of columns. - */ - columns?: Columns; - /** - * When `true`, the component is expanded. - */ - expanded?: boolean; - /** - * Specifies the label of the component. Required for accessibility. - */ - label?: string; - /** - * Indicates the layout of the component. - * @deprecated Use the `layout` property on the component's parent instead. - */ - layout?: Layout; - /** - * When `true`, the `calcite-action-menu` is open. - */ - menuOpen?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ActionGroupMessages; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Specifies the size of the `calcite-action-menu`. - */ - scale?: Scale; - } - interface CalciteActionMenu { - /** - * Specifies the appearance of the component. - */ - appearance?: Extract<"solid" | "transparent", Appearance>; - /** - * When `true`, the component is expanded. - */ - expanded?: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements?: EffectivePlacement[]; - /** - * Specifies the text string for the component. - */ - label: string; - /** - * Emits when the `open` property is toggled. - */ - onCalciteActionMenuOpen?: (event: CalciteActionMenuCustomEvent) => void; - /** - * When `true`, the component is open. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the `referenceElement`. - */ - placement?: LogicalPlacement; - /** - * Specifies the size of the component's trigger `calcite-action`. - */ - scale?: Scale; - } - interface CalciteActionPad { - /** - * Specifies the accessible label for the last action-group. - */ - actionsEndGroupLabel?: string; - /** - * When `true`, the expand-toggling behavior is disabled. - */ - expandDisabled?: boolean; - /** - * When `true`, the component is expanded. - */ - expanded?: boolean; - /** - * Indicates the layout of the component. - */ - layout?: Layout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ActionPadMessages; - /** - * Emits when the `expanded` property is toggled. - */ - onCalciteActionPadToggle?: (event: CalciteActionPadCustomEvent) => void; - /** - * Arranges the component depending on the element's `dir` property. - */ - position?: Position; - /** - * Specifies the size of the expand `calcite-action`. - */ - scale?: Scale; - } - interface CalciteAlert { - /** - * When `true`, the component closes automatically (recommended for passive, non-blocking alerts). - */ - autoClose?: boolean; - /** - * Specifies the duration before the component automatically closes (only use with `autoClose`). - */ - autoCloseDuration?: AlertDuration; - /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon?: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the kind of the component (will apply to top border and icon). - */ - kind?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; - /** - * Specifies an accessible name for the component. - */ - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: AlertMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteAlertBeforeClose?: (event: CalciteAlertCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteAlertBeforeOpen?: (event: CalciteAlertCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteAlertClose?: (event: CalciteAlertCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteAlertOpen?: (event: CalciteAlertCustomEvent) => void; - /** - * Fires when the component is added to DOM - used to receive initial queue. - */ - onCalciteInternalAlertRegister?: (event: CalciteAlertCustomEvent) => void; - /** - * Fires to sync queue when opened or closed. - */ - onCalciteInternalAlertSync?: (event: CalciteAlertCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * Specifies the placement of the component - */ - placement?: MenuPlacement; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - slottedInShell?: boolean; - } - interface CalciteAvatar { - /** - * Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. - */ - fullName?: string; - /** - * Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label. - */ - label?: string; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the `src` to an image (remember to add a token if the user is private). - */ - thumbnail?: string; - /** - * Specifies the unique id of the user. - */ - userId?: string; - /** - * Specifies the username of the user. - */ - username?: string; - } - interface CalciteBlock { - /** - * When `true`, the component is collapsible. - */ - collapsible?: boolean; - /** - * A description for the component, which displays below the heading. - */ - description?: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, displays a drag handle in the header. - */ - dragHandle?: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: BlockMessages; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteBlockBeforeClose?: (event: CalciteBlockCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteBlockBeforeOpen?: (event: CalciteBlockCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteBlockClose?: (event: CalciteBlockCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteBlockOpen?: (event: CalciteBlockCustomEvent) => void; - /** - * Emits when the component's header is clicked. - * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead. - */ - onCalciteBlockToggle?: (event: CalciteBlockCustomEvent) => void; - /** - * When `true`, expands the component and its contents. - */ - open?: boolean; - /** - * Displays a status-related indicator icon. - */ - status?: Status; - } - interface CalciteBlockSection { - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: BlockSectionMessages; - /** - * Emits when the header has been clicked. - */ - onCalciteBlockSectionToggle?: (event: CalciteBlockSectionCustomEvent) => void; - /** - * When `true`, expands the component and its contents. - */ - open?: boolean; - /** - * Displays a status-related indicator icon. - */ - status?: Status; - /** - * The component header text. - */ - text?: string; - /** - * Specifies the component's toggle display - `"button"` (selectable header), or `"switch"` (toggle switch). - */ - toggleDisplay?: BlockSectionToggleDisplay; - } - interface CalciteButton { - /** - * Specifies the alignment of the component's elements. - */ - alignment?: ButtonAlignment; - /** - * Specifies the appearance style of the component. - */ - appearance?: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Specifies the URL of the linked resource, which can be set as an absolute or relative path. - */ - href?: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - /** - * Specifies the kind of the component (will apply to border and background if applicable). - */ - kind?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; - /** - * Accessible name for the component. - */ - label?: string; - /** - * When `true`, a busy indicator is displayed and interaction is disabled. - */ - loading?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ButtonMessages; - /** - * Specifies the name of the component on form submission. - */ - name?: string; - /** - * Defines the relationship between the `href` value and the current document. - * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) - */ - rel?: string; - /** - * When `true`, adds a round style to the component. - */ - round?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies if the component is a child of a `calcite-split-button`. - */ - splitChild?: "primary" | "secondary" | false; - /** - * Specifies where to open the linked document defined in the `href` property. - * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) - */ - target?: string; - /** - * Specifies the default behavior of the button. - * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) - */ - type?: string; - /** - * Specifies the width of the component. - */ - width?: Width; - } - interface CalciteCard { - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: CardMessages; - /** - * Fires when `selectable` is `true` and the component is selected. - */ - onCalciteCardSelect?: (event: CalciteCardCustomEvent) => void; - /** - * When `true`, the component is selectable. - */ - selectable?: boolean; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - /** - * Sets the placement of the thumbnail defined in the `thumbnail` slot. - */ - thumbnailPosition?: LogicalFlowPosition; - } - interface CalciteCheckbox { - /** - * When `true`, the component is checked. - */ - checked?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * The `id` attribute of the component. When omitted, a globally unique identifier is used. - */ - guid?: string; - /** - * The hovered state of the checkbox. - */ - hovered?: boolean; - /** - * When `true`, the component is initially indeterminate, which is independent from its `checked` value. The state is visual only, and can look different across browsers. - * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) - */ - indeterminate?: boolean; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Specifies the name of the component on form submission. - */ - name?: string; - /** - * Emits when the component's `checked` status changes. - */ - onCalciteCheckboxChange?: (event: CalciteCheckboxCustomEvent) => void; - /** - * Emits when the component is blurred. - */ - onCalciteInternalCheckboxBlur?: (event: CalciteCheckboxCustomEvent) => void; - /** - * Emits when the component is focused. - */ - onCalciteInternalCheckboxFocus?: (event: CalciteCheckboxCustomEvent) => void; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * The component's value. - */ - value?: any; - } - interface CalciteChip { - /** - * Specifies the appearance style of the component. - */ - appearance?: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, a close button is added to the component. - */ - closable?: boolean; - /** - * When `true`, hides the component. - */ - closed?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies an icon to display. - */ - icon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit. This is set to `true` by a parent Chip Group component. - */ - interactive?: boolean; - /** - * Specifies the kind of the component (will apply to border and background if applicable). - */ - kind?: Extract<"brand" | "inverse" | "neutral", Kind>; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ChipMessages; - /** - * Fires when the component's close button is selected. - */ - onCalciteChipClose?: (event: CalciteChipCustomEvent) => void; - /** - * Fires when the selected state of the component changes. - */ - onCalciteChipSelect?: (event: CalciteChipCustomEvent) => void; - onCalciteInternalChipKeyEvent?: (event: CalciteChipCustomEvent) => void; - /** - * Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. - */ - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - /** - * This internal property, managed by a containing `calcite-chip-group`, is conditionally set based on the `selectionMode` of the parent - */ - selectionMode?: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; - /** - * The component's value. - */ - value: any; - } - interface CalciteChipGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Emits when the component's selection changes. - */ - onCalciteChipGroupSelect?: (event: CalciteChipGroupCustomEvent) => void; - /** - * Specifies the size of the component. Child `calcite-chip`s inherit the component's value. - */ - scale?: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteChipElement[]; - /** - * Specifies the selection mode of the component. - */ - selectionMode?: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; - } - interface CalciteColorPicker { - /** - * When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. - */ - allowEmpty?: boolean; - /** - * When true, the component will allow updates to the color's alpha value. - */ - alphaChannel?: boolean; - /** - * When true, hides the RGB/HSV channel inputs - */ - channelsDisabled?: boolean; - /** - * Internal prop for advanced use-cases. - */ - color?: InternalColor | null; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The format of `value`. When `"auto"`, the format will be inferred from `value` when set. - * @default "auto" - */ - format?: Format; - /** - * When true, hides the hex input - */ - hexDisabled?: boolean; - /** - * When `true`, hides the RGB/HSV channel inputs. - * @deprecated use `channelsDisabled` instead - */ - hideChannels?: boolean; - /** - * When `true`, hides the hex input. - * @deprecated use `hexDisabled` instead - */ - hideHex?: boolean; - /** - * When `true`, hides the saved colors section. - * @deprecated use `savedDisabled` instead - */ - hideSaved?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ColorPickerMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires when the color value has changed. - */ - onCalciteColorPickerChange?: (event: CalciteColorPickerCustomEvent) => void; - /** - * Fires as the color value changes. Similar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved. - */ - onCalciteColorPickerInput?: (event: CalciteColorPickerCustomEvent) => void; - /** - * When true, hides the saved colors section - */ - savedDisabled?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the storage ID for colors. - */ - storageId?: string; - /** - * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. - * @default "#007ac2" - * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) - * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/main/src/components/color-picker/interfaces.ts#L10) - */ - value?: ColorValue | null; - } - interface CalciteColorPickerHexInput { - /** - * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. - */ - allowEmpty?: boolean; - /** - * When true, the component will allow updates to the color's alpha value. - */ - alphaChannel?: boolean; - /** - * Specifies accessible label for the input field. - * @deprecated use `messages` instead - */ - hexLabel?: string; - /** - * Messages are passed by parent component for accessible labels. - */ - messages?: ColorPickerMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Emitted when the hex value changes. - */ - onCalciteColorPickerHexInputChange?: (event: CalciteColorPickerHexInputCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * The hex value. - */ - value?: string; - } - interface CalciteColorPickerSwatch { - /** - * When `true`, the component is active. - */ - active?: boolean; - /** - * The color value. - * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value - */ - color?: string | null; - /** - * Specifies the size of the component. - */ - scale?: Scale; - } - interface CalciteCombobox { - /** - * When `true`, allows entry of custom values, which are not in the original set of items. - */ - allowCustomValues?: boolean; - /** - * When `true`, the value-clearing will be disabled. - */ - clearDisabled?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies the component's filtered items. - * @readonly - */ - filteredItems?: HTMLCalciteComboboxItemElement[]; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements?: EffectivePlacement[]; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. - */ - maxItems?: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ComboboxMessages; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Fires when the component is requested to be closed, and before the closing transition begins. - */ - onCalciteComboboxBeforeClose?: (event: CalciteComboboxCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteComboboxBeforeOpen?: (event: CalciteComboboxCustomEvent) => void; - /** - * Fires when the selected item(s) changes. - */ - onCalciteComboboxChange?: (event: CalciteComboboxCustomEvent) => void; - /** - * Fires when a selected item in the component is closed via its `calcite-chip`. - */ - onCalciteComboboxChipClose?: (event: CalciteComboboxCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteComboboxClose?: (event: CalciteComboboxCustomEvent) => void; - /** - * Fires when text is added to filter the options list. - */ - onCalciteComboboxFilterChange?: (event: CalciteComboboxCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteComboboxOpen?: (event: CalciteComboboxCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Specifies the placeholder text for the input. - */ - placeholder?: string; - /** - * Specifies the placeholder icon for the input. - */ - placeholderIcon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - placeholderIconFlipRtl?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteComboboxItemElement[]; - /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. - */ - selectionMode?: Extract<"single" | "single-persist" | "ancestors" | "multiple", SelectionMode>; - /** - * The component's value(s) from the selected `calcite-combobox-item`(s). - */ - value?: string | string[]; - } - interface CalciteComboboxItem { - /** - * When `true`, the component is active. - */ - active?: boolean; - /** - * Specifies the parent and grandparent items, which are set on `calcite-combobox`. - */ - ancestors?: ComboboxChildElement[]; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, omits the component from the `calcite-combobox` filtered search results. - */ - filterDisabled?: boolean; - /** - * The `id` attribute of the component. When omitted, a globally unique identifier is used. - */ - guid?: string; - /** - * Specifies an icon to display. - */ - icon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Emits whenever the component is selected or unselected. - */ - onCalciteComboboxItemChange?: (event: CalciteComboboxItemCustomEvent) => void; - /** - * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. - */ - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. - */ - selectionMode?: Extract<"single" | "single-persist" | "ancestors" | "multiple", SelectionMode>; - /** - * The component's text. - */ - textLabel: string; - /** - * The component's value. - */ - value: any; - } - interface CalciteComboboxItemGroup { - /** - * When `true`, signifies that the group comes after another group without any children (items or sub-groups), otherwise indicates that the group comes after another group that has children. Used for styling. - */ - afterEmptyGroup?: boolean; - /** - * Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. - */ - ancestors?: ComboboxChildElement[]; - /** - * Specifies the title of the component. - */ - label: string; - /** - * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. - */ - scale?: Scale; - } - interface CalciteDatePicker { - /** - * Specifies the component's active date. - */ - activeDate?: Date; - /** - * When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. - */ - activeRange?: "start" | "end"; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * Specifies the latest allowed date (`"yyyy-mm-dd"`). - */ - max?: string; - /** - * Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). - */ - maxAsDate?: Date; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: DatePickerMessages; - /** - * Specifies the earliest allowed date (`"yyyy-mm-dd"`). - */ - min?: string; - /** - * Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). - */ - minAsDate?: Date; - /** - * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. - */ - numberingSystem?: NumberingSystem; - /** - * Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. - */ - onCalciteDatePickerChange?: (event: CalciteDatePickerCustomEvent) => void; - /** - * Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. - */ - onCalciteDatePickerRangeChange?: (event: CalciteDatePickerCustomEvent) => void; - /** - * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. - */ - proximitySelectionDisabled?: boolean; - /** - * When `true`, activates the component's range mode to allow a start and end date. - */ - range?: boolean; - /** - * Specifies the size of the component. - */ - scale?: "s" | "m" | "l"; - /** - * Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). - */ - value?: string | string[]; - /** - * Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). - */ - valueAsDate?: Date | Date[]; - } - interface CalciteDatePickerDay { - /** - * When `true`, the component is active. - */ - active?: boolean; - /** - * Date is in the current month. - */ - currentMonth?: boolean; - /** - * The DateTimeFormat used to provide screen reader labels. - */ - dateTimeFormat?: Intl.DateTimeFormat; - /** - * Day of the month to be shown. - */ - day: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Date is the end of date range - */ - endOfRange?: boolean; - /** - * Date is currently highlighted as part of the range - */ - highlighted?: boolean; - /** - * Emitted when user selects day - */ - onCalciteDaySelect?: (event: CalciteDatePickerDayCustomEvent) => void; - /** - * Emitted when user hovers over a day - */ - onCalciteInternalDayHover?: (event: CalciteDatePickerDayCustomEvent) => void; - /** - * When `true`, activates the component's range mode to allow a start and end date. - */ - range?: boolean; - /** - * When `true`, highlight styling for edge dates is applied. - */ - rangeEdge?: "start" | "end" | undefined; - /** - * Date is being hovered and within the set range - */ - rangeHover?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - /** - * Date is the start of date range - */ - startOfRange?: boolean; - /** - * The component's value. - */ - value?: Date; - } - interface CalciteDatePickerMonth { - /** - * Date currently active. - */ - activeDate?: Date; - /** - * The DateTimeFormat used to provide screen reader labels. - */ - dateTimeFormat?: Intl.DateTimeFormat; - /** - * End date currently active - */ - endDate?: Date; - /** - * The range of dates currently being hovered - */ - hoverRange?: HoverRange; - /** - * CLDR locale data for current locale - */ - localeData?: DateLocaleData; - /** - * Specifies the latest allowed date (`"yyyy-mm-dd"`). - */ - max?: Date; - /** - * Specifies the earliest allowed date (`"yyyy-mm-dd"`). - */ - min?: Date; - /** - * Active date for the user keyboard access. - */ - onCalciteInternalDatePickerActiveDateChange?: (event: CalciteDatePickerMonthCustomEvent) => void; - /** - * Event emitted when user hovers the date. - */ - onCalciteInternalDatePickerHover?: (event: CalciteDatePickerMonthCustomEvent) => void; - onCalciteInternalDatePickerMouseOut?: (event: CalciteDatePickerMonthCustomEvent) => void; - /** - * Event emitted when user selects the date. - */ - onCalciteInternalDatePickerSelect?: (event: CalciteDatePickerMonthCustomEvent) => void; - /** - * Specifies the size of the component. - */ - 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; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * CLDR locale data for translated calendar info - */ - localeData?: DateLocaleData; - /** - * Specifies the latest allowed date (`"yyyy-mm-dd"`). - */ - max?: Date; - /** - * This property specifies accessible strings for the component's previous month button ,next month button & year input elements. Made into a prop for testing purposes only. - * @readonly - */ - messages?: DatePickerMessages; - /** - * Specifies the earliest allowed date (`"yyyy-mm-dd"`). - */ - min?: Date; - /** - * Changes to active date - */ - onCalciteInternalDatePickerSelect?: (event: CalciteDatePickerMonthHeaderCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Already selected date. - */ - selectedDate?: Date; - } - interface CalciteDropdown { - /** - * When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. - */ - closeOnSelectDisabled?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements?: EffectivePlacement[]; - /** - * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. - */ - maxItems?: number; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteDropdownBeforeClose?: (event: CalciteDropdownCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteDropdownBeforeOpen?: (event: CalciteDropdownCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteDropdownClose?: (event: CalciteDropdownCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteDropdownOpen?: (event: CalciteDropdownCustomEvent) => void; - /** - * Fires when a `calcite-dropdown-item`'s selection changes. - */ - onCalciteDropdownSelect?: (event: CalciteDropdownCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-start" - */ - placement?: MenuPlacement; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteDropdownItemElement[]; - /** - * Specifies the action to open the component from the container element. - */ - type?: "hover" | "click"; - /** - * Specifies the width of the component. - */ - width?: Scale; - } - interface CalciteDropdownGroup { - /** - * Specifies and displays a group title. - */ - groupTitle?: string; - onCalciteInternalDropdownItemChange?: (event: CalciteDropdownGroupCustomEvent) => void; - /** - * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`. - */ - scale?: Scale; - /** - * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. - */ - selectionMode?: Extract<"none" | "single" | "multiple", SelectionMode>; - } - interface CalciteDropdownItem { - /** - * Specifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor. - */ - href?: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Fires when the component is selected. - */ - onCalciteDropdownItemSelect?: (event: CalciteDropdownItemCustomEvent) => void; - onCalciteInternalDropdownCloseRequest?: (event: CalciteDropdownItemCustomEvent) => void; - onCalciteInternalDropdownItemKeyEvent?: (event: CalciteDropdownItemCustomEvent) => void; - onCalciteInternalDropdownItemSelect?: (event: CalciteDropdownItemCustomEvent) => void; - /** - * Specifies the relationship to the linked document defined in `href`. - */ - rel?: string; - /** - * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`. - */ - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - /** - * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. - */ - selectionMode?: Extract<"none" | "single" | "multiple", SelectionMode>; - /** - * Specifies the frame or window to open the linked document. - */ - target?: string; - } - interface CalciteFab { - /** - * Specifies the appearance style of the component. - */ - appearance?: Extract<"solid" | "outline-fill", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies an icon to display. - * @default "plus" - */ - icon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the kind of the component (will apply to border and background). - */ - kind?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; - /** - * Accessible name for the component. - */ - label?: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies text to accompany the component's icon. - */ - text?: string; - /** - * When `true`, displays the `text` value in the component. - */ - textEnabled?: boolean; - } - interface CalciteFilter { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The component's resulting items after filtering. - * @readonly - */ - filteredItems?: object[]; - /** - * Defines the items to filter. The component uses the values 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 needed to conduct filtering. - */ - items?: object[]; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: FilterMessages; - /** - * This event fires when the filter text changes. - */ - onCalciteFilterChange?: (event: CalciteFilterCustomEvent) => void; - /** - * Specifies placeholder text for the input element. - */ - placeholder?: string; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * The component's value. - */ - value?: string; - } - interface CalciteFlow { - /** - * This property enables the component to consider other custom elements implementing flow-item's interface. - */ - customItemSelectors?: string; - } - interface CalciteFlowItem { - /** - * When provided, the method will be called before it is removed from its parent `calcite-flow`. - */ - beforeBack?: () => Promise; - /** - * When `true`, displays a close button in the trailing side of the component's header. - */ - closable?: boolean; - /** - * When `true`, the component will be hidden. - */ - closed?: boolean; - /** - * Specifies the direction of the collapse. - */ - collapseDirection?: "down" | "up"; - /** - * When `true`, hides the component's content area. - */ - collapsed?: boolean; - /** - * When `true`, the component is collapsible. - */ - collapsible?: boolean; - /** - * A description for the component. - */ - description?: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The component header text. - */ - heading?: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * When `true`, the action menu items in the `header-menu-actions` slot are open. - */ - menuOpen?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: FlowItemMessages; - /** - * Fires when the back button is clicked. - */ - onCalciteFlowItemBack?: (event: CalciteFlowItemCustomEvent) => void; - /** - * Fires when the close button is clicked. - */ - onCalciteFlowItemClose?: (event: CalciteFlowItemCustomEvent) => void; - /** - * Fires when the content is scrolled. - */ - onCalciteFlowItemScroll?: (event: CalciteFlowItemCustomEvent) => void; - /** - * Fires when the collapse button is clicked. - */ - onCalciteFlowItemToggle?: (event: CalciteFlowItemCustomEvent) => void; - /** - * When `true`, displays a back button in the component's header. - */ - showBackButton?: boolean; - } - 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; - /** - * Value for the button title attribute - */ - dragHandle?: string; - label?: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: HandleMessages; - /** - * Emitted when the handle is activated and the up or down arrow key is pressed. - */ - onCalciteHandleNudge?: (event: CalciteHandleCustomEvent) => void; - /** - * Emitted when the handle is activated or deactivated. - */ - onCalciteInternalHandleChange?: (event: CalciteHandleCustomEvent) => void; - setPosition?: number; - setSize?: number; - } - interface CalciteIcon { - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - flipRtl?: boolean; - /** - * Displays a specific icon. - * @see [Icons](https://esri.github.io/calcite-ui-icons) - */ - icon?: string; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Accessible name for the component. It is recommended to set this value if your icon is semantic. - */ - textLabel?: string; - } - interface CalciteInlineEditable { - /** - * Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. - */ - afterConfirm?: () => Promise; - /** - * When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. - */ - controls?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, inline editing is enabled on the component. - */ - editingEnabled?: boolean; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: InlineEditableMessages; - /** - * Emits when the component's "cancel editing" button is pressed. - */ - onCalciteInlineEditableEditCancel?: (event: CalciteInlineEditableCustomEvent) => void; - /** - * Emits when the component's "confirm edits" button is pressed. - */ - onCalciteInlineEditableEditConfirm?: (event: CalciteInlineEditableCustomEvent) => void; - onCalciteInternalInlineEditableEnableEditingChange?: (event: CalciteInlineEditableCustomEvent) => void; - /** - * Specifies the size of the 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 { - /** - * Specifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when `type` is "file". Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) - */ - accept?: string; - /** - * Specifies the text alignment of the component's value. - */ - alignment?: Position; - /** - * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - */ - autocomplete?: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus?: boolean; - /** - * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type. - */ - clearable?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled?: boolean; - editingEnabled?: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - enterKeyHint?: string; - /** - * When `type` is `"file"`, specifies the component's selected files. - * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files - */ - files?: FileList | undefined; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator?: boolean; - /** - * When `true`, the component will not be visible. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ - hidden?: boolean; - /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon?: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - inputMode?: string; - /** - * Accessible name for the component. - */ - label?: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * When `true`, uses locale formatting for numbers. - */ - localeFormat?: boolean; - /** - * Specifies the maximum value for type "number". - * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) - */ - max?: number; - /** - * Specifies the maximum length of text for the component's value. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) - */ - maxLength?: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: InputMessages; - /** - * Specifies the minimum value for `type="number"`. - * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) - */ - min?: number; - /** - * Specifies the minimum length of text for the component's value. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) - */ - minLength?: number; - /** - * When `true`, the component can accept more than one value. This property only has an effect when `type` is "email" or "file". Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) - */ - multiple?: boolean; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) - */ - name?: string; - /** - * Specifies the placement of the buttons for `type="number"`. - */ - numberButtonType?: InputPlacement; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires each time a new `value` is typed and committed. - */ - onCalciteInputChange?: (event: CalciteInputCustomEvent) => void; - /** - * Fires each time a new `value` is typed. - */ - onCalciteInputInput?: (event: CalciteInputCustomEvent) => void; - onCalciteInternalInputBlur?: (event: CalciteInputCustomEvent) => void; - onCalciteInternalInputFocus?: (event: CalciteInputCustomEvent) => void; - /** - * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) - */ - pattern?: string; - /** - * Specifies placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) - */ - placeholder?: string; - /** - * Adds text to the start of the component. - */ - prefixText?: string; - /** - * When `true`, the component's value can be read, but cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Specifies the granularity the component's `value` must adhere to. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) - */ - step?: number | "any"; - /** - * Adds text to the end of the component. - */ - suffixText?: string; - /** - * Specifies the component type. Note that the following `type`s 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"; - /** - * The component's value. - */ - value?: string; - } - interface CalciteInputDatePicker { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements?: EffectivePlacement[]; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * Defines the layout of the component. - */ - layout?: "horizontal" | "vertical"; - /** - * Specifies the latest allowed date ("yyyy-mm-dd"). - */ - max?: string; - /** - * Specifies the latest allowed date as a full date object. - */ - maxAsDate?: Date; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: InputDatePickerMessages; - /** - * Specifies the earliest allowed date ("yyyy-mm-dd"). - */ - min?: string; - /** - * Specifies the earliest allowed date as a full date object. - */ - minAsDate?: Date; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. - */ - numberingSystem?: NumberingSystem; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteInputDatePickerBeforeClose?: (event: CalciteInputDatePickerCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteInputDatePickerBeforeOpen?: (event: CalciteInputDatePickerCustomEvent) => void; - /** - * Fires when the component's value changes. - */ - onCalciteInputDatePickerChange?: (event: CalciteInputDatePickerCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteInputDatePickerClose?: (event: CalciteInputDatePickerCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteInputDatePickerOpen?: (event: CalciteInputDatePickerCustomEvent) => void; - /** - * When `true`, displays the `calcite-date-picker` component. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Specifies the placement of the `calcite-date-picker` relative to the component. - * @default "bottom-start" - */ - placement?: MenuPlacement; - /** - * When `true`, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range. - */ - proximitySelectionDisabled?: boolean; - /** - * When `true`, activates a range for the component. - */ - range?: boolean; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: "s" | "m" | "l"; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Selected date as a string in ISO format (YYYY-MM-DD) - */ - value?: string | string[]; - /** - * The component's value as a full date object. - */ - valueAsDate?: Date | Date[]; - } - interface CalciteInputMessage { - /** - * Specifies an icon to display. - */ - icon?: boolean | string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - } - interface CalciteInputNumber { - /** - * Specifies the text alignment of the component's value. - */ - alignment?: Position; - /** - * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - */ - autocomplete?: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus?: boolean; - /** - * When `true`, a clear button is displayed when the component has a value. - */ - clearable?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled?: boolean; - editingEnabled?: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - enterKeyHint?: string; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator?: boolean; - /** - * When `true`, the component will not be visible. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ - hidden?: boolean; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon?: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - inputMode?: string; - /** - * When `true`, restricts the component to integer numbers only and disables exponential notation. - */ - integer?: boolean; - /** - * Accessible name for the component's button or hyperlink. - */ - label?: string; - /** - * When `true`, the component is in the loading state and `calcite-progress` is displayed. - */ - loading?: boolean; - /** - * Toggles locale formatting for numbers. - */ - localeFormat?: boolean; - /** - * Specifies the maximum value. - * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) - */ - max?: number; - /** - * Specifies the maximum length of text for the component's value. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) - */ - maxLength?: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: InputNumberMessages; - /** - * Specifies the minimum value. - * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) - */ - min?: number; - /** - * Specifies the minimum length of text for the component's value. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) - */ - minLength?: number; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) - */ - name?: string; - /** - * Specifies the placement of the buttons. - */ - numberButtonType?: InputPlacement; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires each time a new value is typed and committed. - */ - onCalciteInputNumberChange?: (event: CalciteInputNumberCustomEvent) => void; - /** - * Fires each time a new value is typed. - */ - onCalciteInputNumberInput?: (event: CalciteInputNumberCustomEvent) => void; - onCalciteInternalInputNumberBlur?: (event: CalciteInputNumberCustomEvent) => void; - onCalciteInternalInputNumberFocus?: (event: CalciteInputNumberCustomEvent) => void; - /** - * Specifies placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) - */ - placeholder?: string; - /** - * Adds text to the start of the component. - */ - prefixText?: string; - /** - * When `true`, the component's value can be read, but cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Specifies the granularity that the component's value must adhere to. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) - */ - step?: number | "any"; - /** - * Adds text to the end of the component. - */ - suffixText?: string; - /** - * The component's value. - */ - value?: string; - } - interface CalciteInputText { - /** - * Specifies the text alignment of the component's value. - */ - alignment?: Position; - /** - * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - */ - autocomplete?: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus?: boolean; - /** - * When `true`, a clear button is displayed when the component has a value. - */ - clearable?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled?: boolean; - editingEnabled?: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - enterKeyHint?: string; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * When `true`, the component will not be visible. - * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) - */ - hidden?: boolean; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon?: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - inputMode?: string; - /** - * Accessible name for the component's button or hyperlink. - */ - label?: string; - /** - * When `true`, the component is in the loading state and `calcite-progress` is displayed. - */ - loading?: boolean; - /** - * Specifies the maximum length of text for the component's value. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) - */ - maxLength?: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: InputTextMessages; - /** - * Specifies the minimum length of text for the component's value. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) - */ - minLength?: number; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) - */ - name?: string; - /** - * Fires each time a new value is typed and committed. - */ - onCalciteInputTextChange?: (event: CalciteInputTextCustomEvent) => void; - /** - * Fires each time a new value is typed. - */ - onCalciteInputTextInput?: (event: CalciteInputTextCustomEvent) => void; - onCalciteInternalInputTextBlur?: ( - event: CalciteInputTextCustomEvent<{ element: HTMLInputElement; value: string }> - ) => void; - onCalciteInternalInputTextFocus?: ( - event: CalciteInputTextCustomEvent<{ - element: HTMLInputElement; - value: string; - }> - ) => void; - /** - * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) - */ - pattern?: string; - /** - * Specifies placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) - */ - placeholder?: string; - /** - * Adds text to the start of the component. - */ - prefixText?: string; - /** - * When `true`, the component's value can be read, but cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Adds text to the end of the component. - */ - suffixText?: string; - /** - * The component's value. - */ - value?: string; - } - interface CalciteInputTimePicker { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: InputTimePickerMessages; - /** - * Specifies the name of the component on form submission. - */ - name?: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteInputTimePickerBeforeClose?: (event: CalciteInputTimePickerCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteInputTimePickerBeforeOpen?: (event: CalciteInputTimePickerCustomEvent) => void; - /** - * Fires when the time value is changed as a result of user input. - */ - onCalciteInputTimePickerChange?: (event: CalciteInputTimePickerCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteInputTimePickerClose?: (event: CalciteInputTimePickerCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteInputTimePickerOpen?: (event: CalciteInputTimePickerCustomEvent) => void; - /** - * When `true`, displays the `calcite-time-picker` component. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Determines where the popover will be positioned relative to the input. - */ - placement?: LogicalPlacement; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Specifies the granularity the component's `value` must adhere to (in seconds). - */ - step?: number; - /** - * The time value in ISO (24-hour) format. - */ - value?: string; - } - interface CalciteInputTimeZone { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Specifies the component's maximum number of options to display before displaying a scrollbar. - */ - maxItems?: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: InputTimeZoneMessages; - /** - * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related - * @default "offset" - */ - mode?: TimeZoneMode; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - onCalciteInputTimeZoneBeforeClose?: (event: CalciteInputTimeZoneCustomEvent) => void; - onCalciteInputTimeZoneBeforeOpen?: (event: CalciteInputTimeZoneCustomEvent) => void; - onCalciteInputTimeZoneChange?: (event: CalciteInputTimeZoneCustomEvent) => void; - onCalciteInputTimeZoneClose?: (event: CalciteInputTimeZoneCustomEvent) => void; - onCalciteInputTimeZoneOpen?: (event: CalciteInputTimeZoneCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) - * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) - */ - referenceDate?: Date | string; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. - * @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC. - */ - value?: string; - } - interface CalciteLabel { - /** - * Specifies the text alignment of the component. - */ - alignment?: Alignment; - /** - * Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. - */ - for?: string; - /** - * Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. - */ - layout?: "inline" | "inline-space-between" | "default"; - onCalciteInternalLabelClick?: ( - event: CalciteLabelCustomEvent<{ - sourceEvent: MouseEvent; - }> - ) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - } - interface CalciteLink { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download. - */ - download?: string | boolean; - /** - * Specifies the URL of the linked resource, which can be set as an absolute or relative path. - */ - href?: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - /** - * Specifies the relationship to the linked document defined in `href`. - */ - rel?: string; - /** - * Specifies the frame or window to open the linked document. - */ - target?: string; - } - /** - * A general purpose list that enables users to construct list items that conform to Calcite styling. - */ - interface CalciteList { - /** - * When provided, the method will be called to determine whether the element can move from the list. - */ - canPull?: (detail: ListDragDetail) => boolean; - /** - * When provided, the method will be called to determine whether the element can be added from another list. - */ - canPut?: (detail: ListDragDetail) => boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, `calcite-list-item`s are sortable via a draggable button. - */ - dragEnabled?: boolean; - /** - * When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. - */ - filterEnabled?: boolean; - /** - * Placeholder text for the component's filter input field. - */ - filterPlaceholder?: string; - /** - * Text for the component's filter input field. - */ - filterText?: string; - /** - * The currently filtered `calcite-list-item` data. - * @readonly - */ - filteredData?: ItemData; - /** - * The currently filtered `calcite-list-item`s. - * @readonly - */ - filteredItems?: HTMLCalciteListItemElement[]; - /** - * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. - */ - group?: string; - /** - * Specifies an accessible name for the component. - */ - label?: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Emitted when the default slot has changes in order to notify parent lists. - */ - onCalciteInternalListDefaultSlotChange?: (event: CalciteListCustomEvent) => void; - /** - * Emits when any of the list item selections have changed. - */ - onCalciteListChange?: (event: CalciteListCustomEvent) => void; - /** - * Emits when the component's filter has changed. - */ - onCalciteListFilter?: (event: CalciteListCustomEvent) => void; - /** - * Emitted when the order of the list has changed. - */ - onCalciteListOrderChange?: (event: CalciteListCustomEvent) => void; - /** - * One of the items within the list can be opened. - */ - openable?: boolean; - /** - * The currently selected items. - * @readonly - */ - selectedItems?: HTMLCalciteListItemElement[]; - /** - * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). - */ - selectionAppearance?: SelectionAppearance; - /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). - */ - selectionMode?: Extract<"none" | "multiple" | "single" | "single-persist", SelectionMode>; - } - interface CalciteListItem { - /** - * Sets the item as focusable. Only one item should be focusable within a list. - */ - active?: boolean; - /** - * When `true`, a close button is added to the component. - */ - closable?: boolean; - /** - * When `true`, hides the component. - */ - closed?: boolean; - /** - * A description for the component. Displays below the label text. - */ - description?: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, the component displays a draggable button. - */ - dragHandle?: boolean; - /** - * The label text of the component. Displays above the description text. - */ - label?: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ListItemMessages; - /** - * Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. - */ - metadata?: Record; - onCalciteInternalFocusPreviousItem?: (event: CalciteListItemCustomEvent) => void; - onCalciteInternalListItemActive?: (event: CalciteListItemCustomEvent) => void; - onCalciteInternalListItemChange?: (event: CalciteListItemCustomEvent) => void; - onCalciteInternalListItemSelect?: (event: CalciteListItemCustomEvent) => void; - /** - * Fires when the close button is clicked. - */ - onCalciteListItemClose?: (event: CalciteListItemCustomEvent) => void; - /** - * Emits when the item's content is selected. - */ - onCalciteListItemSelect?: (event: CalciteListItemCustomEvent) => void; - /** - * When `true`, the item is open to show child components. - */ - open?: boolean; - /** - * When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. - */ - selected?: boolean; - /** - * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). - */ - selectionAppearance?: SelectionAppearance; - /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). - */ - selectionMode?: Extract<"none" | "multiple" | "single" | "single-persist", SelectionMode>; - /** - * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility. - */ - setPosition?: number; - /** - * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility. - */ - setSize?: number; - /** - * The component's value. - */ - value?: any; - } - interface CalciteListItemGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The header text for all nested `calcite-list-item` rows. - */ - heading?: string; - /** - * Emitted when the default slot has changes in order to notify parent lists. - */ - onCalciteInternalListItemGroupDefaultSlotChange?: (event: CalciteListItemGroupCustomEvent) => void; - } - interface CalciteLoader { - /** - * When `true`, displays smaller and appears to the left of the text. - */ - inline?: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Text that displays under the component's indicator. - */ - text?: string; - /** - * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. - */ - type?: "indeterminate" | "determinate"; - /** - * The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. - */ - value?: number; - } - interface CalciteMenu { - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the layout of the component. - */ - layout?: Layout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only. - */ - messages?: MenuMessages; - } - interface CalciteMenuItem { - /** - * When `true`, the component is highlighted. - */ - active?: boolean; - /** - * When `true`, the component displays a breadcrumb trail for use as a navigational aid. - */ - breadcrumb?: boolean; - /** - * Specifies the URL destination of the component, which can be set as an absolute or relative path. - */ - href?: string; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - isTopLevelItem?: boolean; - /** - * Accessible name for the component. - */ - label: string; - layout?: Layout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only. - */ - messages?: MenuItemMessages; - onCalciteInternalMenuItemKeyEvent?: (event: CalciteMenuItemCustomEvent) => void; - /** - * Emits when the component is selected. - */ - onCalciteMenuItemSelect?: (event: CalciteMenuItemCustomEvent) => void; - /** - * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. - */ - open?: boolean; - /** - * Defines the relationship between the `href` value and the current document. - * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) - */ - rel?: string; - /** - * Specifies where to open the linked document defined in the `href` property. - * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) - */ - target?: string; - /** - * Specifies the text to display. - */ - text?: string; - topLevelMenuLayout?: Layout; - } - interface CalciteMeter { - /** - * Specifies the appearance style of the component. - */ - appearance?: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. - */ - fillType?: "single" | "range"; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator?: boolean; - /** - * Specifies a high value. When `fillType` is `"range"`, displays a different color when above the specified threshold. - */ - high?: number; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies a low value. When `fillType` is `"range"`, displays a different color when above the specified threshold. - */ - low?: number; - /** - * Specifies the highest allowed value of the component. - */ - max?: number; - /** - * Specifies the lowest allowed value of the component. - */ - min?: number; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. - */ - rangeLabelType?: MeterLabelType; - /** - * When `true`, displays the values of `high`, `low`, `min`, and `max`. - */ - rangeLabels?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. - */ - unitLabel?: string; - /** - * Specifies the current value of the component. - */ - value?: number; - /** - * When `true`, displays the current value. - */ - valueLabel?: boolean; - /** - * When either `valueLabel` is `true`, specifies the format of displayed label. - */ - valueLabelType?: MeterLabelType; - } - interface CalciteModal { - /** - * Passes a function to run before the component closes. - */ - beforeClose?: (el: HTMLCalciteModalElement) => Promise; - /** - * When `true`, disables the component's close button. - */ - closeButtonDisabled?: boolean; - /** - * When `true`, prevents the component from expanding to the entire screen on mobile devices. - */ - docked?: boolean; - /** - * When `true`, disables the default close on escape behavior. - */ - escapeDisabled?: boolean; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled?: boolean; - /** - * Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). - */ - fullscreen?: boolean; - /** - * Specifies the kind of the component (will apply to top border). - */ - kind?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ModalMessages; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteModalBeforeClose?: (event: CalciteModalCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteModalBeforeOpen?: (event: CalciteModalCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteModalClose?: (event: CalciteModalCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteModalOpen?: (event: CalciteModalCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is. - */ - opened?: boolean; - /** - * When `true`, disables the closing of the component when clicked outside. - */ - outsideCloseDisabled?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - slottedInShell?: boolean; - /** - * Specifies the width of the component. - */ - width?: Scale; - } - interface CalciteNavigation { - /** - * When `navigationAction` is `true`, specifies the label of the `calcite-action`. - */ - label?: string; - /** - * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change. - */ - navigationAction?: boolean; - /** - * When `navigationAction` is true, emits when the displayed action selection changes. - */ - onCalciteNavigationActionSelect?: (event: CalciteNavigationCustomEvent) => void; - } - interface CalciteNavigationLogo { - /** - * When true, the component is highlighted. - */ - active?: boolean; - /** - * A description for the component, which displays below the `heading`. - */ - description?: string; - /** - * Specifies heading text for the component, such as a product or organization name. - */ - heading?: string; - /** - * Specifies the URL destination of the component, which can be set as an absolute or relative path. - */ - href?: string; - /** - * Specifies an icon to display. - */ - icon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. - */ - label?: string; - /** - * Defines the relationship between the `href` value and the current document. - * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) - */ - rel?: string; - /** - * Specifies where to open the linked document defined in the `href` property. - * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) - */ - target?: string; - /** - * Specifies the `src` to an image. - */ - thumbnail?: string; - } - interface CalciteNavigationUser { - /** - * When true, the component is highlighted. - */ - active?: boolean; - /** - * Specifies the full name of the user. - */ - fullName?: string; - /** - * Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. - */ - label?: string; - /** - * When `true`, hides the `fullName` and `username` contents. - */ - textDisabled?: boolean; - /** - * Specifies the `src` to an image (remember to add a token if the user is private). - */ - thumbnail?: string; - /** - * Specifies the unique id of the user. - */ - userId?: string; - /** - * Specifies the username of the user. - */ - username?: string; - } - interface CalciteNotice { - /** - * When `true`, a close button is added to the component. - */ - closable?: boolean; - /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon?: string | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the kind of the component (will apply to top border and icon). - */ - kind?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: NoticeMessages; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteNoticeBeforeClose?: (event: CalciteNoticeCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteNoticeBeforeOpen?: (event: CalciteNoticeCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteNoticeClose?: (event: CalciteNoticeCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteNoticeOpen?: (event: CalciteNoticeCustomEvent) => void; - /** - * When `true`, the component is visible. - */ - open?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the width of the component. - */ - width?: Width; - } - interface CalciteOption { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Accessible name for the component. - */ - label?: string; - onCalciteInternalOptionChange?: (event: CalciteOptionCustomEvent) => void; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - /** - * The component's value. - */ - value?: any; - } - interface CalciteOptionGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Accessible name for the component. - */ - label: string; - onCalciteInternalOptionGroupChange?: (event: CalciteOptionGroupCustomEvent) => void; - } - interface CalcitePagination { - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: PaginationMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Emits when the selected page changes. - */ - onCalcitePaginationChange?: (event: CalcitePaginationCustomEvent) => void; - /** - * Specifies the number of items per page. - */ - pageSize?: number; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the starting item number. - */ - startItem?: number; - /** - * Specifies the total number of items. - */ - totalItems?: number; - } - interface CalcitePanel { - /** - * When `true`, displays a close button in the trailing side of the header. - */ - closable?: boolean; - /** - * When `true`, the component will be hidden. - */ - closed?: boolean; - /** - * Specifies the direction of the collapse. - */ - collapseDirection?: "down" | "up"; - /** - * When `true`, hides the component's content area. - */ - collapsed?: boolean; - /** - * When `true`, the component is collapsible. - */ - collapsible?: boolean; - /** - * A description for the component. - */ - description?: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The component header text. - */ - heading?: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * When `true`, the action menu items in the `header-menu-actions` slot are open. - */ - menuOpen?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: PanelMessages; - /** - * Fires when the close button is clicked. - */ - onCalcitePanelClose?: (event: CalcitePanelCustomEvent) => void; - /** - * Fires when the content is scrolled. - */ - onCalcitePanelScroll?: (event: CalcitePanelCustomEvent) => void; - /** - * Fires when the collapse button is clicked. - */ - onCalcitePanelToggle?: (event: CalcitePanelCustomEvent) => void; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalcitePickList { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - 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; - /** - * Text for the filter input field. - */ - filterText?: string; - /** - * The currently filtered data. - * @readonly - */ - filteredData?: ItemData1; - /** - * The currently filtered items. - * @readonly - */ - filteredItems?: HTMLCalcitePickListItemElement[]; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-pick-list-item`s at a time. When `false`, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections. - */ - multiple?: boolean; - /** - * Emits when any of the `calcite-pick-list-item` selections have changed. - */ - onCalciteListChange?: (event: CalcitePickListCustomEvent>) => void; - /** - * Emits when a filter has changed. - */ - onCalciteListFilter?: (event: CalcitePickListCustomEvent) => void; - /** - * When `true` and single selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard. - */ - selectionFollowsFocus?: boolean; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalcitePickListGroup { - /** - * Specifies the title for all nested `calcite-pick-list-item`s. - */ - groupTitle?: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalcitePickListItem { - /** - * A description for the component that displays below the label text. - */ - description?: string; - /** - * When `false`, the component cannot be deselected by user interaction. - */ - deselectDisabled?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. - * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) - */ - icon?: ICON_TYPES | null; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Label and accessible name for the component. Appears next to the icon. - */ - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: PickListItemMessages; - /** - * Provides additional metadata to the component. Primary use is for a filter on the parent list. - */ - metadata?: Record; - nonInteractive?: boolean; - /** - * Emits when the component's label, description, value, or metadata properties are modified. - */ - onCalciteInternalListItemPropsChange?: (event: CalcitePickListItemCustomEvent) => void; - /** - * Emits when the component's value property is modified. - */ - onCalciteInternalListItemValueChange?: ( - event: CalcitePickListItemCustomEvent<{ - oldValue: any; - newValue: any; - }> - ) => void; - /** - * Fires when the component is selected or unselected. - */ - onCalciteListItemChange?: ( - event: CalcitePickListItemCustomEvent<{ - item: HTMLCalcitePickListItemElement; - value: any; - selected: boolean; - shiftPressed: boolean; - }> - ) => void; - /** - * Fires when the remove button is pressed. - */ - onCalciteListItemRemove?: (event: CalcitePickListItemCustomEvent) => void; - /** - * When `true`, displays a remove action that removes the item from the list. - */ - removable?: boolean; - /** - * When `true`, selects an item. Toggles when an item is checked/unchecked. - */ - selected?: boolean; - /** - * The component's value. - */ - value: any; - } - interface CalcitePopover { - /** - * When `true`, clicking outside of the component automatically closes open `calcite-popover`s. - */ - autoClose?: boolean; - /** - * When `true`, display a close button within the component. - */ - closable?: boolean; - /** - * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. - */ - flipDisabled?: boolean; - /** - * Defines the available placements that can be used when a flip occurs. - */ - flipPlacements?: EffectivePlacement[]; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled?: boolean; - /** - * The component header text. - */ - heading?: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * Accessible name for the component. - */ - label: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: PopoverMessages; - /** - * Offsets the position of the popover away from the `referenceElement`. - * @default 6 - */ - offsetDistance?: number; - /** - * Offsets the position of the component along the `referenceElement`. - */ - offsetSkidding?: number; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalcitePopoverBeforeClose?: (event: CalcitePopoverCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalcitePopoverBeforeOpen?: (event: CalcitePopoverCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalcitePopoverClose?: (event: CalcitePopoverCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalcitePopoverOpen?: (event: CalcitePopoverCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the `referenceElement`. - */ - placement?: LogicalPlacement; - /** - * When `true`, removes the caret pointer. - */ - pointerDisabled?: boolean; - /** - * The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used. - */ - referenceElement: ReferenceElement | string; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to `true` to manage when the component is open. - */ - triggerDisabled?: boolean; - } - interface CalciteProgress { - /** - * Accessible name for the component. - */ - label?: string; - /** - * When `true` and for `"indeterminate"` progress bars, reverses the animation direction. - */ - reversed?: boolean; - /** - * Text that displays under the component's indicator. - */ - text?: string; - /** - * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. - */ - type?: "indeterminate" | "determinate"; - /** - * When `type` is `"determinate"`, the component's progress value with a range of 0.0 - 1.0. - */ - value?: number; - } - interface CalciteRadioButton { - /** - * When `true`, the component is checked. - */ - checked?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The focused state of the component. - */ - focused?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * The `id` of the component. When omitted, a globally unique identifier is used. - */ - guid?: string; - /** - * When `true`, the component is not displayed and is not focusable or checkable. - */ - hidden?: boolean; - /** - * The hovered state of the component. - */ - hovered?: boolean; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Specifies the name of the component. Can be inherited from `calcite-radio-button-group`. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Fires when the radio button is blurred. - */ - onCalciteInternalRadioButtonBlur?: (event: CalciteRadioButtonCustomEvent) => void; - /** - * Fires when the checked property changes. This is an internal event used for styling purposes only. Use calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms. - */ - onCalciteInternalRadioButtonCheckedChange?: (event: CalciteRadioButtonCustomEvent) => void; - /** - * Fires when the radio button is focused. - */ - onCalciteInternalRadioButtonFocus?: (event: CalciteRadioButtonCustomEvent) => void; - /** - * 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: CalciteRadioButtonCustomEvent) => void; - /** - * When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component inherited from the `calcite-radio-button-group`. - */ - scale?: Scale; - /** - * The component's value. - */ - value: any; - } - interface CalciteRadioButtonGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. - */ - hidden?: boolean; - /** - * Defines the layout of the component. - */ - layout?: Layout; - /** - * Specifies the name of the component on form submission. Must be unique to other component instances. - */ - name: string; - /** - * Fires when the component has changed. - */ - onCalciteRadioButtonGroupChange?: (event: CalciteRadioButtonGroupCustomEvent) => void; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the component's selected item. - * @readonly - */ - selectedItem?: HTMLCalciteRadioButtonElement; - } - interface CalciteRating { - /** - * Specifies a cumulative average from previous ratings to display. - */ - average?: number; - /** - * Specifies the number of previous ratings to display. - */ - count?: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: RatingMessages; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Fires when the component's value changes. - */ - onCalciteRatingChange?: (event: CalciteRatingCustomEvent) => void; - /** - * When `true`, the component's value can be read, but cannot be modified. - */ - readOnly?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. - */ - showChip?: boolean; - /** - * The component's value. - */ - value?: number; - } - interface CalciteScrim { - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ScrimMessages; - } - interface CalciteSegmentedControl { - /** - * Specifies the appearance style of the component. - */ - appearance?: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Defines the layout of the component. - */ - layout?: Extract<"horizontal" | "vertical", Layout>; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Fires when the `calcite-segmented-control-item` selection changes. - */ - onCalciteSegmentedControlChange?: (event: CalciteSegmentedControlCustomEvent) => void; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * The component's selected item `HTMLElement`. - * @readonly - */ - selectedItem?: HTMLCalciteSegmentedControlItemElement; - /** - * The component's `selectedItem` value. - */ - value?: string; - /** - * Specifies the width of the component. - */ - width?: Extract<"auto" | "full", Width>; - } - interface CalciteSegmentedControlItem { - /** - * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`. - */ - appearance?: Extract<"outline" | "outline-fill" | "solid", Appearance>; - /** - * When `true`, the component is checked. - */ - checked?: boolean; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - /** - * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. - */ - layout?: Layout; - /** - * Fires when the item has been selected. - */ - onCalciteInternalSegmentedControlItemChange?: (event: CalciteSegmentedControlItemCustomEvent) => void; - /** - * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`. - */ - scale?: Scale; - /** - * The component's value. - */ - value?: any | null; - } - interface CalciteSelect { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Fires when the `selectedOption` changes. - */ - onCalciteSelectChange?: (event: CalciteSelectCustomEvent) => void; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * The component's selected option `HTMLElement`. - * @readonly - */ - selectedOption?: HTMLCalciteOptionElement; - /** - * The component's `selectedOption` value. - */ - value?: string; - /** - * Specifies the width of the component. - */ - width?: Width; - } - interface CalciteSheet { - /** - * Passes a function to run before the component closes. - * @returns - */ - beforeClose?: (el: HTMLCalciteSheetElement) => Promise; - /** - * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). - */ - displayMode?: DisplayMode; - /** - * When `true`, disables the default close on escape behavior. - */ - escapeDisabled?: boolean; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled?: boolean; - /** - * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. - */ - heightScale?: Scale; - /** - * Specifies the label of the component. - */ - label: string; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteSheetBeforeClose?: (event: CalciteSheetCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteSheetBeforeOpen?: (event: CalciteSheetCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteSheetClose?: (event: CalciteSheetCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteSheetOpen?: (event: CalciteSheetCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is . - */ - opened?: boolean; - /** - * When `true`, disables the closing of the component when clicked outside. - */ - outsideCloseDisabled?: boolean; - /** - * Determines where the component will be positioned. - */ - position?: LogicalFlowPosition; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - slottedInShell?: boolean; - /** - * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. - */ - widthScale?: Scale; - } - interface CalciteShell { - /** - * Positions the center content behind any `calcite-shell-panel`s. - */ - contentBehind?: boolean; - } - interface CalciteShellCenterRow { - /** - * When `true`, the content area displays like a floating panel. - */ - detached?: boolean; - /** - * Specifies the maximum height of the component. - */ - heightScale?: Scale; - /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - position?: Position; - } - interface CalciteShellPanel { - /** - * When `true`, hides the component's content area. - */ - collapsed?: boolean; - /** - * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. - */ - detached?: boolean; - /** - * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. - */ - detachedHeightScale?: Scale; - /** - * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content). - */ - displayMode?: DisplayMode1; - /** - * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. - */ - heightScale?: Scale; - /** - * The direction of the component. - */ - layout?: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ShellPanelMessages; - /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - position?: Position; - /** - * When `true` and `displayMode` is not `float`, the component's content area is resizable. - */ - resizable?: boolean; - /** - * When `layout` is `vertical`, specifies the width of the component. - */ - widthScale?: Scale; - } - interface CalciteSlider { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator?: boolean; - /** - * When `true`, indicates a histogram is present. - */ - hasHistogram?: boolean; - /** - * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track. - * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5) - */ - histogram?: DataSeries; - /** - * A set of single color stops for a histogram, sorted by offset ascending. - */ - histogramStops?: ColorStop[]; - /** - * When `true`, displays label handles with their numeric value. - */ - labelHandles?: boolean; - /** - * When `true` and `ticks` is specified, displays label tick marks with their numeric value. - */ - labelTicks?: boolean; - /** - * The component's maximum selectable value. - */ - max?: number; - /** - * For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. - */ - maxLabel?: string; - /** - * For multiple selections, the component's upper value. - */ - maxValue?: number; - /** - * The component's minimum selectable value. - */ - min?: number; - /** - * Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. - */ - minLabel?: string; - /** - * For multiple selections, the component's lower value. - */ - minValue?: number; - /** - * When `true`, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. - */ - mirrored?: boolean; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires when the thumb is released on the component. **Note:** If you need to constantly listen to the drag event, use `calciteSliderInput` instead. - */ - onCalciteSliderChange?: (event: CalciteSliderCustomEvent) => void; - /** - * Fires on all updates to the component. **Note:** Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. - */ - onCalciteSliderInput?: (event: CalciteSliderCustomEvent) => void; - /** - * Specifies the interval to move with the page up, or page down keys. - */ - pageStep?: number; - /** - * When `true`, sets a finer point for handles. - */ - precise?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - */ - required?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * When `true`, enables snap selection in coordination with `step` via a mouse. - */ - snap?: boolean; - /** - * Specifies the interval to move with the up, or down keys. - */ - step?: number; - /** - * Displays tick marks on the number line at a specified interval. - */ - ticks?: number; - /** - * The component's value. - */ - value?: null | number | number[]; - } - interface CalciteSortableList { - /** - * When provided, the method will be called to determine whether the element can move from the list. - */ - canPull?: (detail: DragDetail) => boolean; - /** - * When provided, the method will be called to determine whether the element can be added from another list. - */ - canPut?: (detail: DragDetail) => boolean; - /** - * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. - */ - disabled?: boolean; - /** - * Specifies which items inside the element should be draggable. - */ - dragSelector?: string; - /** - * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. - */ - group?: string; - /** - * The selector for the handle elements. - */ - handleSelector?: string; - /** - * Indicates the horizontal or vertical orientation of the component. - */ - layout?: Layout; - /** - * When true, content is waiting to be loaded. This state shows a busy indicator. - */ - loading?: boolean; - /** - * Emitted when the order of the list has changed. - */ - onCalciteListOrderChange?: (event: CalciteSortableListCustomEvent) => void; - } - interface CalciteSplitButton { - /** - * When `true`, the component is active. - */ - active?: boolean; - /** - * Specifies the appearance style of the component. - */ - appearance?: Extract<"outline" | "outline-fill" | "solid" | "transparent", Appearance>; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies the icon used for the dropdown menu. - */ - dropdownIconType?: DropdownIconType; - /** - * Accessible name for the dropdown menu. - */ - dropdownLabel?: string; - /** - * Specifies the kind of the component (will apply to border and background if applicable). - */ - kind?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; - /** - * When `true`, a busy indicator is displayed on the primary button. - */ - loading?: boolean; - /** - * Fires when the primary button is clicked. - */ - onCalciteSplitButtonPrimaryClick?: (event: CalciteSplitButtonCustomEvent) => void; - /** - * Fires when the dropdown menu is clicked. - */ - onCalciteSplitButtonSecondaryClick?: (event: CalciteSplitButtonCustomEvent) => void; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Specifies an icon to display at the end of the primary button. - */ - primaryIconEnd?: string; - /** - * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - primaryIconFlipRtl?: FlipContext; - /** - * Specifies an icon to display at the start of the primary button. - */ - primaryIconStart?: string; - /** - * Accessible name for the primary button. - */ - primaryLabel?: string; - /** - * Text displayed in the primary button. - */ - primaryText?: string; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the width of the component. - */ - width?: Width; - } - interface CalciteStack { - /** - * When `true`, content interaction is prevented and displayed with lower opacity. - */ - disabled?: boolean; - } - interface CalciteStepper { - /** - * When `true`, displays a status icon in the `calcite-stepper-item` heading. - */ - icon?: boolean; - /** - * Defines the layout of the component. - */ - layout?: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: StepperMessages; - /** - * When `true`, displays the step number in the `calcite-stepper-item` heading. - */ - numbered?: boolean; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires when the active `calcite-stepper-item` changes. - */ - onCalciteInternalStepperItemChange?: (event: CalciteStepperCustomEvent) => void; - /** - * Fires when the active `calcite-stepper-item` changes. - */ - onCalciteStepperItemChange?: (event: CalciteStepperCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the component's selected item. - * @readonly - */ - selectedItem?: HTMLCalciteStepperItemElement; - } - interface CalciteStepperItem { - /** - * When `true`, the step has been completed. - */ - complete?: boolean; - /** - * A description for the component. Displays below the header text. - */ - description?: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, the component contains an error that requires resolution from the user. - */ - error?: boolean; - /** - * The component header text. - */ - heading?: string; - /** - * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. - */ - icon?: boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`. - */ - layout?: Extract<"horizontal" | "vertical", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: StepperItemMessages; - /** - * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. - */ - numbered?: boolean; - numberingSystem?: NumberingSystem; - onCalciteInternalStepperItemKeyEvent?: (event: CalciteStepperItemCustomEvent) => void; - onCalciteInternalStepperItemRegister?: (event: CalciteStepperItemCustomEvent) => void; - onCalciteInternalStepperItemSelect?: (event: CalciteStepperItemCustomEvent) => void; - onCalciteInternalUserRequestedStepperItemSelect?: ( - event: CalciteStepperItemCustomEvent - ) => void; - /** - * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`. - */ - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - } - interface CalciteSwitch { - /** - * When `true`, the component is checked. - */ - checked?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Fires when the `checked` value has changed. - */ - onCalciteSwitchChange?: (event: CalciteSwitchCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * The component's value. - */ - value?: any; - } - interface CalciteTab { - onCalciteInternalTabRegister?: (event: CalciteTabCustomEvent) => void; - /** - * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. - */ - scale?: Scale; - /** - * When `true`, the component's contents are selected. Only one tab can be selected within the `calcite-tabs` parent. - */ - selected?: boolean; - /** - * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab-title`. - */ - tab?: string; - } - interface CalciteTabNav { - bordered?: boolean; - indicatorOffset?: number; - indicatorWidth?: number; - layout?: TabLayout; - onCalciteInternalTabChange?: (event: CalciteTabNavCustomEvent) => void; - /** - * Emits when the selected `calcite-tab` changes. - */ - onCalciteTabChange?: (event: CalciteTabNavCustomEvent) => void; - /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. - */ - position?: TabPosition; - /** - * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. - */ - scale?: Scale; - /** - * Specifies the component's selected tab-title. - * @readonly - */ - selectedTitle?: HTMLCalciteTabTitleElement; - /** - * Specifies the name when saving selected `calcite-tab` data to `localStorage`. - */ - storageId?: string; - /** - * Specifies text to update multiple components to keep in sync if one changes. - */ - syncId?: string; - } - interface CalciteTabTitle { - bordered?: boolean; - /** - * When `true`, a close button is added to the component. - */ - closable?: boolean; - /** - * When `true`, does not display or position the component. - */ - closed?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: string; - /** - * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - layout?: TabLayout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TabTitleMessages; - onCalciteInternalTabIconChanged?: (event: CalciteTabTitleCustomEvent) => void; - onCalciteInternalTabTitleRegister?: (event: CalciteTabTitleCustomEvent) => void; - /** - * Fires when a `calcite-tab` is selected (`event.details`). - * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/main/src/components/tab/interfaces.ts#L1) - */ - onCalciteInternalTabsActivate?: (event: CalciteTabTitleCustomEvent) => void; - /** - * Fires when `calcite-tab` is closed (`event.details`). - * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/main/src/components/tab/interfaces.ts) - */ - onCalciteInternalTabsClose?: (event: CalciteTabTitleCustomEvent) => void; - onCalciteInternalTabsFocusFirst?: (event: CalciteTabTitleCustomEvent) => void; - onCalciteInternalTabsFocusLast?: (event: CalciteTabTitleCustomEvent) => void; - onCalciteInternalTabsFocusNext?: (event: CalciteTabTitleCustomEvent) => void; - onCalciteInternalTabsFocusPrevious?: (event: CalciteTabTitleCustomEvent) => void; - /** - * Fires when a `calcite-tab` is selected. - */ - onCalciteTabsActivate?: (event: CalciteTabTitleCustomEvent) => void; - /** - * Fires when a `calcite-tab` is closed. - */ - onCalciteTabsClose?: (event: CalciteTabTitleCustomEvent) => void; - /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. - */ - position?: TabPosition; - /** - * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. - */ - scale?: Scale; - /** - * When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. - */ - selected?: boolean; - /** - * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. - */ - tab?: string; - } - interface CalciteTable { - /** - * When `true`, displays borders in the component. - */ - bordered?: boolean; - /** - * Specifies an accessible title for the component. - */ - caption: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator?: boolean; - /** - * Specifies the layout of the component. - */ - layout?: TableLayout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TableMessages; - /** - * When `true`, displays the position of the row in numeric form. - */ - numbered?: boolean; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - onCalciteInternalTableRowFocusChange?: (event: CalciteTableCustomEvent) => void; - /** - * Emits when the component's page selection changes. - */ - onCalciteTablePageChange?: (event: CalciteTableCustomEvent) => void; - /** - * Emits when the component's selected rows change. - */ - onCalciteTableSelect?: (event: CalciteTableCustomEvent) => void; - /** - * Specifies the page size of the component. When `true`, renders `calcite-pagination` - */ - pageSize?: number; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteTableRowElement[]; - /** - * Specifies the selection mode of the component. - */ - selectionMode?: Extract<"none" | "multiple" | "single", SelectionMode>; - /** - * When `true`, displays zebra styling in the component. - */ - zebra?: boolean; - } - interface CalciteTableCell { - /** - * Specifies the alignment of the component. - */ - alignment?: Alignment; - /** - * Specifies the number of columns the component should span. - */ - colSpan?: number; - /** - * When true, prevents user interaction. Notes: This prop should use the - */ - disabled?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TableCellMessages; - numberCell?: boolean; - parentRowIsSelected?: boolean; - parentRowPositionLocalized?: string; - parentRowType?: RowType; - positionInRow?: number; - readCellContentsToAT?: boolean; - /** - * Specifies the number of rows the component should span. - */ - rowSpan?: number; - scale?: Scale; - selectionCell?: boolean; - } - interface CalciteTableHeader { - /** - * Specifies the alignment of the component. - */ - alignment?: Alignment; - bodyRowCount?: number; - /** - * Specifies the number of columns the component should span. - */ - colSpan?: number; - /** - * A description to display beneath heading content. - */ - description?: string; - /** - * A heading to display above description content. - */ - heading?: string; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TableHeaderMessages; - numberCell?: boolean; - parentRowPosition?: number; - parentRowType?: RowType; - positionInRow?: number; - /** - * Specifies the number of rows the component should span. - */ - rowSpan?: number; - scale?: Scale; - selectedRowCount?: number; - selectedRowCountLocalized?: string; - selectionCell?: boolean; - selectionMode?: SelectionMode; - } - interface CalciteTableRow { - bodyRowCount?: number; - cellCount?: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - numbered?: boolean; - onCalciteInternalTableRowFocusRequest?: (event: CalciteTableRowCustomEvent) => void; - /** - * Fires when the selected state of the component changes. - */ - onCalciteTableRowSelect?: (event: CalciteTableRowCustomEvent) => void; - positionAll?: number; - positionSection?: number; - positionSectionLocalized?: string; - readCellContentsToAT?: boolean; - rowType?: RowType; - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - selectedRowCount?: number; - selectedRowCountLocalized?: string; - selectionMode?: Extract<"multiple" | "single" | "none", SelectionMode>; - } - interface CalciteTabs { - /** - * When `true`, the component will display with a folder style menu. - */ - bordered?: boolean; - /** - * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`). - */ - layout?: TabLayout; - /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. - */ - position?: TabPosition; - /** - * Specifies the size of the component, defaults to `m`. - */ - scale?: Scale; - } - interface CalciteTextArea { - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - autofocus?: boolean; - /** - * Specifies the component's number of columns. - * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols) - */ - columns?: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) - */ - disabled?: boolean; - /** - * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. - */ - form?: string; - /** - * When `true`, number values are displayed with a group separator corresponding to the language and country format. - */ - groupSeparator?: boolean; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Specifies the maximum number of characters allowed. - * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength) - */ - maxLength?: number; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TextAreaMessages; - /** - * Specifies the name of the component. - * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name) - */ - name?: string; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires each time a new `value` is typed and committed. - */ - onCalciteTextAreaChange?: (event: CalciteTextAreaCustomEvent) => void; - /** - * Fires each time a new `value` is typed. - */ - onCalciteTextAreaInput?: (event: CalciteTextAreaCustomEvent) => void; - /** - * Specifies the placeholder text for the component. - * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder) - */ - placeholder?: string; - /** - * When `true`, the component's `value` can be read, but cannot be modified. - * @readonly - * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - */ - readOnly?: boolean; - /** - * When `true`, the component must have a value in order for the form to submit. - * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required - */ - required?: boolean; - /** - * Specifies if the component is resizable. - */ - resize?: "both" | "horizontal" | "vertical" | "none"; - /** - * Specifies the component's number of rows. - * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) - */ - rows?: number; - /** - * Specifies the size of the component. - */ - scale?: "l" | "m" | "s"; - /** - * The component's value. - */ - value?: string; - /** - * Specifies the wrapping mechanism for the text. - * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap) - */ - wrap?: "soft" | "hard"; - } - interface CalciteTile { - /** - * When `true`, the component is active. - */ - active?: boolean; - /** - * A description for the component, which displays below the heading. - */ - description?: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The component's embed mode. When `true`, renders without a border and padding for use by other components. - */ - embed?: boolean; - /** - * The focused state of the component. - */ - focused?: boolean; - /** - * The component header text, which displays between the icon and description. - */ - heading?: string; - /** - * When `true`, the component is not displayed and is not focusable. - */ - hidden?: boolean; - /** - * When embed is `"false"`, the URL for the component. - */ - href?: string; - /** - * Specifies an icon to display. - */ - icon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - } - interface CalciteTileSelect { - /** - * When `true`, the component is checked. - */ - checked?: boolean; - /** - * A description for the component, which displays below the heading. - */ - description?: string; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * The component header text, which displays between the icon and description. - */ - heading?: string; - /** - * When `true`, the component is not displayed and is not focusable or checkable. - */ - hidden?: boolean; - /** - * Specifies an icon to display. - */ - icon?: string; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. - */ - inputAlignment?: Extract<"end" | "start", Alignment>; - /** - * When `true`, displays an interactive input based on the `type` property. - */ - inputEnabled?: boolean; - /** - * Specifies the name of the component on form submission. - */ - name?: any; - /** - * Emits a custom change event. For checkboxes it emits when checked or unchecked. For radios it only emits when checked. - */ - onCalciteTileSelectChange?: (event: CalciteTileSelectCustomEvent) => void; - /** - * The selection mode of the component. Use radio for single selection, and checkbox for multiple selections. - */ - type?: TileSelectType; - /** - * The component's value. - */ - value?: any; - /** - * Specifies the width of the component. - */ - width?: Extract<"auto" | "full", Width>; - } - interface CalciteTileSelectGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. - */ - layout?: TileSelectGroupLayout; - } - interface CalciteTimePicker { - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TimePickerMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - onCalciteInternalTimePickerBlur?: (event: CalciteTimePickerCustomEvent) => void; - onCalciteInternalTimePickerChange?: (event: CalciteTimePickerCustomEvent) => void; - onCalciteInternalTimePickerFocus?: (event: CalciteTimePickerCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the granularity the `value` must adhere to (in seconds). - */ - step?: number; - /** - * The component's value in UTC (always 24-hour format). - */ - value?: string; - } - interface CalciteTip { - /** - * When `true`, the close button is not present on the component. - */ - closeDisabled?: boolean; - /** - * When `true`, the component does not display. - */ - closed?: boolean; - /** - * The component header text. - */ - heading?: string; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TipMessages; - /** - * Emits when the component has been closed. - */ - onCalciteTipDismiss?: (event: CalciteTipCustomEvent) => void; - /** - * When `true`, the component is selected if it has a parent `calcite-tip-manager`. Only one tip can be selected within the `calcite-tip-manager` parent. - */ - selected?: boolean; - } - interface CalciteTipGroup { - /** - * The component header text for all nested `calcite-tip`s. - */ - groupTitle?: string; - } - interface CalciteTipManager { - /** - * When `true`, does not display or position the component. - */ - closed?: boolean; - /** - * Specifies the number at which section headings should start. - */ - headingLevel?: HeadingLevel; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: TipManagerMessages; - /** - * Emits when the component has been closed. - */ - onCalciteTipManagerClose?: (event: CalciteTipManagerCustomEvent) => void; - } - interface CalciteTooltip { - /** - * Closes the component when the `referenceElement` is clicked. - */ - closeOnClick?: boolean; - /** - * Accessible name for the component. - * @deprecated No longer necessary. Overrides the context of the component's description, which could confuse assistive technology users. - */ - label?: string; - /** - * Offset the position of the component away from the `referenceElement`. - * @default 6 - */ - offsetDistance?: number; - /** - * Offset the position of the component along the `referenceElement`. - */ - offsetSkidding?: number; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteTooltipBeforeClose?: (event: CalciteTooltipCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteTooltipBeforeOpen?: (event: CalciteTooltipCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteTooltipClose?: (event: CalciteTooltipCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteTooltipOpen?: (event: CalciteTooltipCustomEvent) => void; - /** - * When `true`, the component is open. - */ - open?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - overlayPositioning?: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the `referenceElement`. - */ - placement?: LogicalPlacement; - /** - * The `referenceElement` to position the component according to its `"placement"` value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used. - */ - referenceElement?: ReferenceElement | string; - } - interface CalciteTree { - child?: boolean; - /** - * Displays indentation guide lines. - */ - lines?: boolean; - /** - * Fires when the user selects/deselects `calcite-tree-items`. - */ - onCalciteTreeSelect?: (event: CalciteTreeCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteTreeItemElement[]; - /** - * Specifies the selection mode, where `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. - * @default "single" - */ - selectionMode?: SelectionMode; - } - interface CalciteTreeItem { - depth?: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, the component is expanded. - */ - expanded?: boolean; - hasChildren?: boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: FlipContext; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: string; - /** - * In ancestor selection mode, show as indeterminate when only some children are selected. - */ - indeterminate?: boolean; - lines?: boolean; - onCalciteInternalTreeItemSelect?: (event: CalciteTreeItemCustomEvent) => void; - parentExpanded?: boolean; - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - selectionMode?: SelectionMode; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalciteValueList { - /** - * When provided, the method will be called to determine whether the element can move from the list. - */ - canPull?: (detail: DragDetail) => boolean; - /** - * When provided, the method will be called to determine whether the element can be added from another list. - */ - canPut?: (detail: DragDetail) => boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * When `true`, `calcite-value-list-item`s are sortable via a draggable button. - */ - dragEnabled?: boolean; - /** - * When `true`, an input appears at the top of the component that can be used by end users to filter list items. - */ - filterEnabled?: boolean; - /** - * Placeholder text for the filter's input field. - */ - filterPlaceholder?: string; - /** - * Text for the filter input field. - */ - filterText?: string; - /** - * The currently filtered data. - * @readonly - */ - filteredData?: ItemData1; - /** - * The currently filtered items. - * @readonly - */ - filteredItems?: HTMLCalciteValueListItemElement[]; - /** - * The component's group identifier. To drag elements from one list into another, both lists must have the same group value. - */ - group?: string; - /** - * When `true`, a busy indicator is displayed. - */ - loading?: boolean; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ValueListMessages; - /** - * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. - */ - multiple?: boolean; - /** - * Emits when any of the list item selections have changed. - */ - onCalciteListChange?: (event: CalciteValueListCustomEvent>) => void; - /** - * Emits when a filter has changed. - */ - onCalciteListFilter?: (event: CalciteValueListCustomEvent) => void; - /** - * Emits when the order of the list has changed. - */ - onCalciteListOrderChange?: (event: CalciteValueListCustomEvent) => void; - /** - * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. - */ - selectionFollowsFocus?: boolean; - } - /** - * @deprecated Use the `list` component instead. - */ - interface CalciteValueListItem { + * @deprecated Use the `list` component instead. + */ + interface CalciteValueListItem { + /** + * A description for the component that displays below the label text. + */ + "description"?: string; + "deselectDisabled": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + "handleActivated"?: boolean; + /** + * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. + * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) + */ + "icon"?: ICON_TYPES | null; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Label and accessible name for the component. Appears next to the icon. + */ + "label": string; + /** + * Provides additional metadata to the component. Primary use is for a filter on the parent list. + */ + "metadata"?: Record; + /** + * When `true`, prevents the content of the component from user interaction. + */ + "nonInteractive": boolean; + /** + * When `true`, adds an action to remove the component. + */ + "removable": boolean; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * Set focus on the component. + */ + "setFocus": () => Promise; + /** + * 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. + * @param coerce + */ + "toggleSelected": (coerce?: boolean) => Promise; + /** + * The component's value. + */ + "value": any; + } +} +export interface CalciteAccordionCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteAccordionElement; +} +export interface CalciteAccordionItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteAccordionItemElement; +} +export interface CalciteActionBarCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteActionBarElement; +} +export interface CalciteActionMenuCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteActionMenuElement; +} +export interface CalciteActionPadCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteActionPadElement; +} +export interface CalciteAlertCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteAlertElement; +} +export interface CalciteBlockCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteBlockElement; +} +export interface CalciteBlockSectionCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteBlockSectionElement; +} +export interface CalciteCardCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteCardElement; +} +export interface CalciteCheckboxCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteCheckboxElement; +} +export interface CalciteChipCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteChipElement; +} +export interface CalciteChipGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteChipGroupElement; +} +export interface CalciteColorPickerCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteColorPickerElement; +} +export interface CalciteColorPickerHexInputCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteColorPickerHexInputElement; +} +export interface CalciteComboboxCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteComboboxElement; +} +export interface CalciteComboboxItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteComboboxItemElement; +} +export interface CalciteDatePickerCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDatePickerElement; +} +export interface CalciteDatePickerDayCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDatePickerDayElement; +} +export interface CalciteDatePickerMonthCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDatePickerMonthElement; +} +export interface CalciteDatePickerMonthHeaderCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDatePickerMonthHeaderElement; +} +export interface CalciteDropdownCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDropdownElement; +} +export interface CalciteDropdownGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDropdownGroupElement; +} +export interface CalciteDropdownItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDropdownItemElement; +} +export interface CalciteFilterCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteFilterElement; +} +export interface CalciteFlowItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteFlowItemElement; +} +export interface CalciteHandleCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteHandleElement; +} +export interface CalciteInlineEditableCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteInlineEditableElement; +} +export interface CalciteInputCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteInputElement; +} +export interface CalciteInputDatePickerCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteInputDatePickerElement; +} +export interface CalciteInputNumberCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteInputNumberElement; +} +export interface CalciteInputTextCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteInputTextElement; +} +export interface CalciteInputTimePickerCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteInputTimePickerElement; +} +export interface CalciteInputTimeZoneCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteInputTimeZoneElement; +} +export interface CalciteLabelCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteLabelElement; +} +export interface CalciteListCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteListElement; +} +export interface CalciteListItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteListItemElement; +} +export interface CalciteListItemGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteListItemGroupElement; +} +export interface CalciteMenuItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteMenuItemElement; +} +export interface CalciteModalCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteModalElement; +} +export interface CalciteNavigationCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteNavigationElement; +} +export interface CalciteNoticeCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteNoticeElement; +} +export interface CalciteOptionCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteOptionElement; +} +export interface CalciteOptionGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteOptionGroupElement; +} +export interface CalcitePaginationCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalcitePaginationElement; +} +export interface CalcitePanelCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalcitePanelElement; +} +export interface CalcitePickListCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalcitePickListElement; +} +export interface CalcitePickListItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalcitePickListItemElement; +} +export interface CalcitePopoverCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalcitePopoverElement; +} +export interface CalciteRadioButtonCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteRadioButtonElement; +} +export interface CalciteRadioButtonGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteRadioButtonGroupElement; +} +export interface CalciteRatingCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteRatingElement; +} +export interface CalciteSegmentedControlCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSegmentedControlElement; +} +export interface CalciteSegmentedControlItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSegmentedControlItemElement; +} +export interface CalciteSelectCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSelectElement; +} +export interface CalciteSheetCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSheetElement; +} +export interface CalciteSliderCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSliderElement; +} +export interface CalciteSortableListCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSortableListElement; +} +export interface CalciteSplitButtonCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSplitButtonElement; +} +export interface CalciteStepperCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteStepperElement; +} +export interface CalciteStepperItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteStepperItemElement; +} +export interface CalciteSwitchCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSwitchElement; +} +export interface CalciteTabCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTabElement; +} +export interface CalciteTabNavCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTabNavElement; +} +export interface CalciteTabTitleCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTabTitleElement; +} +export interface CalciteTableCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTableElement; +} +export interface CalciteTableRowCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTableRowElement; +} +export interface CalciteTextAreaCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTextAreaElement; +} +export interface CalciteTileSelectCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTileSelectElement; +} +export interface CalciteTimePickerCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTimePickerElement; +} +export interface CalciteTipCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTipElement; +} +export interface CalciteTipManagerCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTipManagerElement; +} +export interface CalciteTooltipCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTooltipElement; +} +export interface CalciteTreeCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTreeElement; +} +export interface CalciteTreeItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTreeItemElement; +} +export interface CalciteValueListCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteValueListElement; +} +export interface CalciteValueListItemCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteValueListItemElement; +} +declare global { + interface HTMLCalciteAccordionElementEventMap { + "calciteInternalAccordionChange": RequestedItem; + } + interface HTMLCalciteAccordionElement extends Components.CalciteAccordion, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteAccordionElement, ev: CalciteAccordionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteAccordionElement, ev: CalciteAccordionCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteAccordionElement: { + prototype: HTMLCalciteAccordionElement; + new (): HTMLCalciteAccordionElement; + }; + interface HTMLCalciteAccordionItemElementEventMap { + "calciteInternalAccordionItemSelect": RequestedItem1; + "calciteInternalAccordionItemClose": void; + } + interface HTMLCalciteAccordionItemElement extends Components.CalciteAccordionItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteAccordionItemElement, ev: CalciteAccordionItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteAccordionItemElement, ev: CalciteAccordionItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteAccordionItemElement: { + prototype: HTMLCalciteAccordionItemElement; + new (): HTMLCalciteAccordionItemElement; + }; + interface HTMLCalciteActionElement extends Components.CalciteAction, HTMLStencilElement { + } + var HTMLCalciteActionElement: { + prototype: HTMLCalciteActionElement; + new (): HTMLCalciteActionElement; + }; + interface HTMLCalciteActionBarElementEventMap { + "calciteActionBarToggle": void; + } + interface HTMLCalciteActionBarElement extends Components.CalciteActionBar, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteActionBarElement, ev: CalciteActionBarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteActionBarElement, ev: CalciteActionBarCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteActionBarElement: { + prototype: HTMLCalciteActionBarElement; + new (): HTMLCalciteActionBarElement; + }; + interface HTMLCalciteActionGroupElement extends Components.CalciteActionGroup, HTMLStencilElement { + } + var HTMLCalciteActionGroupElement: { + prototype: HTMLCalciteActionGroupElement; + new (): HTMLCalciteActionGroupElement; + }; + interface HTMLCalciteActionMenuElementEventMap { + "calciteActionMenuOpen": void; + } + interface HTMLCalciteActionMenuElement extends Components.CalciteActionMenu, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteActionMenuElement, ev: CalciteActionMenuCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteActionMenuElement, ev: CalciteActionMenuCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteActionMenuElement: { + prototype: HTMLCalciteActionMenuElement; + new (): HTMLCalciteActionMenuElement; + }; + interface HTMLCalciteActionPadElementEventMap { + "calciteActionPadToggle": void; + } + interface HTMLCalciteActionPadElement extends Components.CalciteActionPad, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteActionPadElement, ev: CalciteActionPadCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteActionPadElement, ev: CalciteActionPadCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteActionPadElement: { + prototype: HTMLCalciteActionPadElement; + new (): HTMLCalciteActionPadElement; + }; + interface HTMLCalciteAlertElementEventMap { + "calciteAlertBeforeClose": void; + "calciteAlertClose": void; + "calciteAlertBeforeOpen": void; + "calciteAlertOpen": void; + "calciteInternalAlertSync": Sync; + "calciteInternalAlertRegister": void; + } + interface HTMLCalciteAlertElement extends Components.CalciteAlert, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteAlertElement, ev: CalciteAlertCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteAlertElement, ev: CalciteAlertCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteAlertElement: { + prototype: HTMLCalciteAlertElement; + new (): HTMLCalciteAlertElement; + }; + interface HTMLCalciteAvatarElement extends Components.CalciteAvatar, HTMLStencilElement { + } + var HTMLCalciteAvatarElement: { + prototype: HTMLCalciteAvatarElement; + new (): HTMLCalciteAvatarElement; + }; + interface HTMLCalciteBlockElementEventMap { + "calciteBlockBeforeClose": void; + "calciteBlockBeforeOpen": void; + "calciteBlockClose": void; + "calciteBlockOpen": void; + "calciteBlockToggle": void; + } + interface HTMLCalciteBlockElement extends Components.CalciteBlock, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteBlockElement, ev: CalciteBlockCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteBlockElement, ev: CalciteBlockCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteBlockElement: { + prototype: HTMLCalciteBlockElement; + new (): HTMLCalciteBlockElement; + }; + interface HTMLCalciteBlockSectionElementEventMap { + "calciteBlockSectionToggle": void; + } + interface HTMLCalciteBlockSectionElement extends Components.CalciteBlockSection, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteBlockSectionElement, ev: CalciteBlockSectionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteBlockSectionElement, ev: CalciteBlockSectionCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteBlockSectionElement: { + prototype: HTMLCalciteBlockSectionElement; + new (): HTMLCalciteBlockSectionElement; + }; + interface HTMLCalciteButtonElement extends Components.CalciteButton, HTMLStencilElement { + } + var HTMLCalciteButtonElement: { + prototype: HTMLCalciteButtonElement; + new (): HTMLCalciteButtonElement; + }; + interface HTMLCalciteCardElementEventMap { + "calciteCardSelect": void; + } + interface HTMLCalciteCardElement extends Components.CalciteCard, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteCardElement, ev: CalciteCardCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteCardElement, ev: CalciteCardCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteCardElement: { + prototype: HTMLCalciteCardElement; + new (): HTMLCalciteCardElement; + }; + interface HTMLCalciteCheckboxElementEventMap { + "calciteInternalCheckboxBlur": boolean; + "calciteCheckboxChange": void; + "calciteInternalCheckboxFocus": boolean; + } + interface HTMLCalciteCheckboxElement extends Components.CalciteCheckbox, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteCheckboxElement, ev: CalciteCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteCheckboxElement, ev: CalciteCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteCheckboxElement: { + prototype: HTMLCalciteCheckboxElement; + new (): HTMLCalciteCheckboxElement; + }; + interface HTMLCalciteChipElementEventMap { + "calciteChipClose": void; + "calciteChipSelect": void; + "calciteInternalChipKeyEvent": KeyboardEvent; + } + interface HTMLCalciteChipElement extends Components.CalciteChip, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteChipElement, ev: CalciteChipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteChipElement, ev: CalciteChipCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteChipElement: { + prototype: HTMLCalciteChipElement; + new (): HTMLCalciteChipElement; + }; + interface HTMLCalciteChipGroupElementEventMap { + "calciteChipGroupSelect": void; + } + interface HTMLCalciteChipGroupElement extends Components.CalciteChipGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteChipGroupElement, ev: CalciteChipGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteChipGroupElement, ev: CalciteChipGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteChipGroupElement: { + prototype: HTMLCalciteChipGroupElement; + new (): HTMLCalciteChipGroupElement; + }; + interface HTMLCalciteColorPickerElementEventMap { + "calciteColorPickerChange": void; + "calciteColorPickerInput": void; + } + interface HTMLCalciteColorPickerElement extends Components.CalciteColorPicker, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteColorPickerElement, ev: CalciteColorPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteColorPickerElement, ev: CalciteColorPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteColorPickerElement: { + prototype: HTMLCalciteColorPickerElement; + new (): HTMLCalciteColorPickerElement; + }; + interface HTMLCalciteColorPickerHexInputElementEventMap { + "calciteColorPickerHexInputChange": void; + } + interface HTMLCalciteColorPickerHexInputElement extends Components.CalciteColorPickerHexInput, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteColorPickerHexInputElement, ev: CalciteColorPickerHexInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteColorPickerHexInputElement, ev: CalciteColorPickerHexInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteColorPickerHexInputElement: { + prototype: HTMLCalciteColorPickerHexInputElement; + new (): HTMLCalciteColorPickerHexInputElement; + }; + interface HTMLCalciteColorPickerSwatchElement extends Components.CalciteColorPickerSwatch, HTMLStencilElement { + } + var HTMLCalciteColorPickerSwatchElement: { + prototype: HTMLCalciteColorPickerSwatchElement; + new (): HTMLCalciteColorPickerSwatchElement; + }; + interface HTMLCalciteComboboxElementEventMap { + "calciteComboboxChange": void; + "calciteComboboxFilterChange": void; + "calciteComboboxChipClose": void; + "calciteComboboxBeforeClose": void; + "calciteComboboxClose": void; + "calciteComboboxBeforeOpen": void; + "calciteComboboxOpen": void; + } + interface HTMLCalciteComboboxElement extends Components.CalciteCombobox, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteComboboxElement, ev: CalciteComboboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteComboboxElement, ev: CalciteComboboxCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteComboboxElement: { + prototype: HTMLCalciteComboboxElement; + new (): HTMLCalciteComboboxElement; + }; + interface HTMLCalciteComboboxItemElementEventMap { + "calciteComboboxItemChange": void; + } + interface HTMLCalciteComboboxItemElement extends Components.CalciteComboboxItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteComboboxItemElement, ev: CalciteComboboxItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteComboboxItemElement, ev: CalciteComboboxItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteComboboxItemElement: { + prototype: HTMLCalciteComboboxItemElement; + new (): HTMLCalciteComboboxItemElement; + }; + interface HTMLCalciteComboboxItemGroupElement extends Components.CalciteComboboxItemGroup, HTMLStencilElement { + } + var HTMLCalciteComboboxItemGroupElement: { + prototype: HTMLCalciteComboboxItemGroupElement; + new (): HTMLCalciteComboboxItemGroupElement; + }; + interface HTMLCalciteDatePickerElementEventMap { + "calciteDatePickerChange": void; + "calciteDatePickerRangeChange": void; + } + interface HTMLCalciteDatePickerElement extends Components.CalciteDatePicker, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDatePickerElement, ev: CalciteDatePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteDatePickerElement, ev: CalciteDatePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteDatePickerElement: { + prototype: HTMLCalciteDatePickerElement; + new (): HTMLCalciteDatePickerElement; + }; + interface HTMLCalciteDatePickerDayElementEventMap { + "calciteDaySelect": void; + "calciteInternalDayHover": void; + } + interface HTMLCalciteDatePickerDayElement extends Components.CalciteDatePickerDay, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDatePickerDayElement, ev: CalciteDatePickerDayCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteDatePickerDayElement, ev: CalciteDatePickerDayCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteDatePickerDayElement: { + prototype: HTMLCalciteDatePickerDayElement; + new (): HTMLCalciteDatePickerDayElement; + }; + interface HTMLCalciteDatePickerMonthElementEventMap { + "calciteInternalDatePickerSelect": Date; + "calciteInternalDatePickerHover": Date; + "calciteInternalDatePickerActiveDateChange": Date; + "calciteInternalDatePickerMouseOut": void; + } + interface HTMLCalciteDatePickerMonthElement extends Components.CalciteDatePickerMonth, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDatePickerMonthElement, ev: CalciteDatePickerMonthCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteDatePickerMonthElement, ev: CalciteDatePickerMonthCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteDatePickerMonthElement: { + prototype: HTMLCalciteDatePickerMonthElement; + new (): HTMLCalciteDatePickerMonthElement; + }; + interface HTMLCalciteDatePickerMonthHeaderElementEventMap { + "calciteInternalDatePickerSelect": Date; + } + interface HTMLCalciteDatePickerMonthHeaderElement extends Components.CalciteDatePickerMonthHeader, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDatePickerMonthHeaderElement, ev: CalciteDatePickerMonthHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteDatePickerMonthHeaderElement, ev: CalciteDatePickerMonthHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteDatePickerMonthHeaderElement: { + prototype: HTMLCalciteDatePickerMonthHeaderElement; + new (): HTMLCalciteDatePickerMonthHeaderElement; + }; + interface HTMLCalciteDropdownElementEventMap { + "calciteDropdownSelect": void; + "calciteDropdownBeforeClose": void; + "calciteDropdownClose": void; + "calciteDropdownBeforeOpen": void; + "calciteDropdownOpen": void; + } + interface HTMLCalciteDropdownElement extends Components.CalciteDropdown, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDropdownElement, ev: CalciteDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteDropdownElement, ev: CalciteDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteDropdownElement: { + prototype: HTMLCalciteDropdownElement; + new (): HTMLCalciteDropdownElement; + }; + interface HTMLCalciteDropdownGroupElementEventMap { + "calciteInternalDropdownItemChange": RequestedItem2; + } + interface HTMLCalciteDropdownGroupElement extends Components.CalciteDropdownGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDropdownGroupElement, ev: CalciteDropdownGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteDropdownGroupElement, ev: CalciteDropdownGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteDropdownGroupElement: { + prototype: HTMLCalciteDropdownGroupElement; + new (): HTMLCalciteDropdownGroupElement; + }; + interface HTMLCalciteDropdownItemElementEventMap { + "calciteDropdownItemSelect": void; + "calciteInternalDropdownItemSelect": RequestedItem2; + "calciteInternalDropdownItemKeyEvent": ItemKeyboardEvent; + "calciteInternalDropdownCloseRequest": void; + } + interface HTMLCalciteDropdownItemElement extends Components.CalciteDropdownItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDropdownItemElement, ev: CalciteDropdownItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteDropdownItemElement, ev: CalciteDropdownItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteDropdownItemElement: { + prototype: HTMLCalciteDropdownItemElement; + new (): HTMLCalciteDropdownItemElement; + }; + interface HTMLCalciteFabElement extends Components.CalciteFab, HTMLStencilElement { + } + var HTMLCalciteFabElement: { + prototype: HTMLCalciteFabElement; + new (): HTMLCalciteFabElement; + }; + interface HTMLCalciteFilterElementEventMap { + "calciteFilterChange": void; + } + interface HTMLCalciteFilterElement extends Components.CalciteFilter, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteFilterElement, ev: CalciteFilterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteFilterElement, ev: CalciteFilterCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteFilterElement: { + prototype: HTMLCalciteFilterElement; + new (): HTMLCalciteFilterElement; + }; + interface HTMLCalciteFlowElement extends Components.CalciteFlow, HTMLStencilElement { + } + var HTMLCalciteFlowElement: { + prototype: HTMLCalciteFlowElement; + new (): HTMLCalciteFlowElement; + }; + interface HTMLCalciteFlowItemElementEventMap { + "calciteFlowItemBack": void; + "calciteFlowItemScroll": void; + "calciteFlowItemClose": void; + "calciteFlowItemToggle": void; + } + interface HTMLCalciteFlowItemElement extends Components.CalciteFlowItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteFlowItemElement, ev: CalciteFlowItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteFlowItemElement, ev: CalciteFlowItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteFlowItemElement: { + prototype: HTMLCalciteFlowItemElement; + new (): HTMLCalciteFlowItemElement; + }; + interface HTMLCalciteGraphElement extends Components.CalciteGraph, HTMLStencilElement { + } + var HTMLCalciteGraphElement: { + prototype: HTMLCalciteGraphElement; + new (): HTMLCalciteGraphElement; + }; + interface HTMLCalciteHandleElementEventMap { + "calciteHandleNudge": HandleNudge; + "calciteInternalHandleChange": HandleChange; + } + interface HTMLCalciteHandleElement extends Components.CalciteHandle, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteHandleElement, ev: CalciteHandleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteHandleElement, ev: CalciteHandleCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteHandleElement: { + prototype: HTMLCalciteHandleElement; + new (): HTMLCalciteHandleElement; + }; + interface HTMLCalciteIconElement extends Components.CalciteIcon, HTMLStencilElement { + } + var HTMLCalciteIconElement: { + prototype: HTMLCalciteIconElement; + new (): HTMLCalciteIconElement; + }; + interface HTMLCalciteInlineEditableElementEventMap { + "calciteInlineEditableEditCancel": void; + "calciteInlineEditableEditConfirm": void; + "calciteInternalInlineEditableEnableEditingChange": void; + } + interface HTMLCalciteInlineEditableElement extends Components.CalciteInlineEditable, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteInlineEditableElement, ev: CalciteInlineEditableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteInlineEditableElement, ev: CalciteInlineEditableCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteInlineEditableElement: { + prototype: HTMLCalciteInlineEditableElement; + new (): HTMLCalciteInlineEditableElement; + }; + interface HTMLCalciteInputElementEventMap { + "calciteInternalInputFocus": void; + "calciteInternalInputBlur": void; + "calciteInputInput": void; + "calciteInputChange": void; + } + interface HTMLCalciteInputElement extends Components.CalciteInput, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteInputElement, ev: CalciteInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteInputElement, ev: CalciteInputCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteInputElement: { + prototype: HTMLCalciteInputElement; + new (): HTMLCalciteInputElement; + }; + interface HTMLCalciteInputDatePickerElementEventMap { + "calciteInputDatePickerChange": void; + "calciteInputDatePickerBeforeClose": void; + "calciteInputDatePickerClose": void; + "calciteInputDatePickerBeforeOpen": void; + "calciteInputDatePickerOpen": void; + } + interface HTMLCalciteInputDatePickerElement extends Components.CalciteInputDatePicker, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteInputDatePickerElement, ev: CalciteInputDatePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteInputDatePickerElement, ev: CalciteInputDatePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteInputDatePickerElement: { + prototype: HTMLCalciteInputDatePickerElement; + new (): HTMLCalciteInputDatePickerElement; + }; + interface HTMLCalciteInputMessageElement extends Components.CalciteInputMessage, HTMLStencilElement { + } + var HTMLCalciteInputMessageElement: { + prototype: HTMLCalciteInputMessageElement; + new (): HTMLCalciteInputMessageElement; + }; + interface HTMLCalciteInputNumberElementEventMap { + "calciteInternalInputNumberFocus": void; + "calciteInternalInputNumberBlur": void; + "calciteInputNumberInput": void; + "calciteInputNumberChange": void; + } + interface HTMLCalciteInputNumberElement extends Components.CalciteInputNumber, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteInputNumberElement, ev: CalciteInputNumberCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteInputNumberElement, ev: CalciteInputNumberCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteInputNumberElement: { + prototype: HTMLCalciteInputNumberElement; + new (): HTMLCalciteInputNumberElement; + }; + interface HTMLCalciteInputTextElementEventMap { + "calciteInternalInputTextFocus": { + element: HTMLInputElement; + value: string; + }; + "calciteInternalInputTextBlur": { element: HTMLInputElement; value: string }; + "calciteInputTextInput": void; + "calciteInputTextChange": void; + } + interface HTMLCalciteInputTextElement extends Components.CalciteInputText, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteInputTextElement, ev: CalciteInputTextCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteInputTextElement, ev: CalciteInputTextCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteInputTextElement: { + prototype: HTMLCalciteInputTextElement; + new (): HTMLCalciteInputTextElement; + }; + interface HTMLCalciteInputTimePickerElementEventMap { + "calciteInputTimePickerBeforeClose": void; + "calciteInputTimePickerBeforeOpen": void; + "calciteInputTimePickerChange": void; + "calciteInputTimePickerClose": void; + "calciteInputTimePickerOpen": void; + } + interface HTMLCalciteInputTimePickerElement extends Components.CalciteInputTimePicker, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteInputTimePickerElement, ev: CalciteInputTimePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteInputTimePickerElement, ev: CalciteInputTimePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteInputTimePickerElement: { + prototype: HTMLCalciteInputTimePickerElement; + new (): HTMLCalciteInputTimePickerElement; + }; + interface HTMLCalciteInputTimeZoneElementEventMap { + "calciteInputTimeZoneBeforeClose": void; + "calciteInputTimeZoneBeforeOpen": void; + "calciteInputTimeZoneChange": void; + "calciteInputTimeZoneClose": void; + "calciteInputTimeZoneOpen": void; + } + interface HTMLCalciteInputTimeZoneElement extends Components.CalciteInputTimeZone, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteInputTimeZoneElement, ev: CalciteInputTimeZoneCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteInputTimeZoneElement, ev: CalciteInputTimeZoneCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteInputTimeZoneElement: { + prototype: HTMLCalciteInputTimeZoneElement; + new (): HTMLCalciteInputTimeZoneElement; + }; + interface HTMLCalciteLabelElementEventMap { + "calciteInternalLabelClick": { + sourceEvent: MouseEvent; + }; + } + interface HTMLCalciteLabelElement extends Components.CalciteLabel, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteLabelElement, ev: CalciteLabelCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteLabelElement, ev: CalciteLabelCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteLabelElement: { + prototype: HTMLCalciteLabelElement; + new (): HTMLCalciteLabelElement; + }; + interface HTMLCalciteLinkElement extends Components.CalciteLink, HTMLStencilElement { + } + var HTMLCalciteLinkElement: { + prototype: HTMLCalciteLinkElement; + new (): HTMLCalciteLinkElement; + }; + interface HTMLCalciteListElementEventMap { + "calciteListChange": void; + "calciteListFilter": void; + "calciteListOrderChange": ListDragDetail; + "calciteInternalListDefaultSlotChange": void; + } /** - * A description for the component that displays below the label text. - */ - description?: string; - deselectDisabled?: boolean; + * A general purpose list that enables users to construct list items that conform to Calcite styling. + */ + interface HTMLCalciteListElement extends Components.CalciteList, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteListElement, ev: CalciteListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteListElement, ev: CalciteListCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteListElement: { + prototype: HTMLCalciteListElement; + new (): HTMLCalciteListElement; + }; + interface HTMLCalciteListItemElementEventMap { + "calciteListItemSelect": void; + "calciteListItemClose": void; + "calciteInternalListItemSelect": void; + "calciteInternalListItemActive": void; + "calciteInternalFocusPreviousItem": void; + "calciteInternalListItemChange": void; + } + interface HTMLCalciteListItemElement extends Components.CalciteListItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteListItemElement, ev: CalciteListItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteListItemElement, ev: CalciteListItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteListItemElement: { + prototype: HTMLCalciteListItemElement; + new (): HTMLCalciteListItemElement; + }; + interface HTMLCalciteListItemGroupElementEventMap { + "calciteInternalListItemGroupDefaultSlotChange": DragEvent; + } + interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteListItemGroupElement: { + prototype: HTMLCalciteListItemGroupElement; + new (): HTMLCalciteListItemGroupElement; + }; + interface HTMLCalciteLoaderElement extends Components.CalciteLoader, HTMLStencilElement { + } + var HTMLCalciteLoaderElement: { + prototype: HTMLCalciteLoaderElement; + new (): HTMLCalciteLoaderElement; + }; + interface HTMLCalciteMenuElement extends Components.CalciteMenu, HTMLStencilElement { + } + var HTMLCalciteMenuElement: { + prototype: HTMLCalciteMenuElement; + new (): HTMLCalciteMenuElement; + }; + interface HTMLCalciteMenuItemElementEventMap { + "calciteInternalMenuItemKeyEvent": MenuItemCustomEvent; + "calciteMenuItemSelect": void; + } + interface HTMLCalciteMenuItemElement extends Components.CalciteMenuItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteMenuItemElement, ev: CalciteMenuItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteMenuItemElement, ev: CalciteMenuItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteMenuItemElement: { + prototype: HTMLCalciteMenuItemElement; + new (): HTMLCalciteMenuItemElement; + }; + interface HTMLCalciteMeterElement extends Components.CalciteMeter, HTMLStencilElement { + } + var HTMLCalciteMeterElement: { + prototype: HTMLCalciteMeterElement; + new (): HTMLCalciteMeterElement; + }; + interface HTMLCalciteModalElementEventMap { + "calciteModalBeforeClose": void; + "calciteModalClose": void; + "calciteModalBeforeOpen": void; + "calciteModalOpen": void; + } + interface HTMLCalciteModalElement extends Components.CalciteModal, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteModalElement, ev: CalciteModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteModalElement, ev: CalciteModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteModalElement: { + prototype: HTMLCalciteModalElement; + new (): HTMLCalciteModalElement; + }; + interface HTMLCalciteNavigationElementEventMap { + "calciteNavigationActionSelect": void; + } + interface HTMLCalciteNavigationElement extends Components.CalciteNavigation, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteNavigationElement, ev: CalciteNavigationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteNavigationElement, ev: CalciteNavigationCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteNavigationElement: { + prototype: HTMLCalciteNavigationElement; + new (): HTMLCalciteNavigationElement; + }; + interface HTMLCalciteNavigationLogoElement extends Components.CalciteNavigationLogo, HTMLStencilElement { + } + var HTMLCalciteNavigationLogoElement: { + prototype: HTMLCalciteNavigationLogoElement; + new (): HTMLCalciteNavigationLogoElement; + }; + interface HTMLCalciteNavigationUserElement extends Components.CalciteNavigationUser, HTMLStencilElement { + } + var HTMLCalciteNavigationUserElement: { + prototype: HTMLCalciteNavigationUserElement; + new (): HTMLCalciteNavigationUserElement; + }; + interface HTMLCalciteNoticeElementEventMap { + "calciteNoticeBeforeClose": void; + "calciteNoticeBeforeOpen": void; + "calciteNoticeClose": void; + "calciteNoticeOpen": void; + } + interface HTMLCalciteNoticeElement extends Components.CalciteNotice, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteNoticeElement, ev: CalciteNoticeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteNoticeElement, ev: CalciteNoticeCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteNoticeElement: { + prototype: HTMLCalciteNoticeElement; + new (): HTMLCalciteNoticeElement; + }; + interface HTMLCalciteOptionElementEventMap { + "calciteInternalOptionChange": void; + } + interface HTMLCalciteOptionElement extends Components.CalciteOption, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteOptionElement, ev: CalciteOptionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteOptionElement, ev: CalciteOptionCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteOptionElement: { + prototype: HTMLCalciteOptionElement; + new (): HTMLCalciteOptionElement; + }; + interface HTMLCalciteOptionGroupElementEventMap { + "calciteInternalOptionGroupChange": void; + } + interface HTMLCalciteOptionGroupElement extends Components.CalciteOptionGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteOptionGroupElement, ev: CalciteOptionGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteOptionGroupElement, ev: CalciteOptionGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteOptionGroupElement: { + prototype: HTMLCalciteOptionGroupElement; + new (): HTMLCalciteOptionGroupElement; + }; + interface HTMLCalcitePaginationElementEventMap { + "calcitePaginationChange": void; + } + interface HTMLCalcitePaginationElement extends Components.CalcitePagination, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalcitePaginationElement, ev: CalcitePaginationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalcitePaginationElement, ev: CalcitePaginationCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalcitePaginationElement: { + prototype: HTMLCalcitePaginationElement; + new (): HTMLCalcitePaginationElement; + }; + interface HTMLCalcitePanelElementEventMap { + "calcitePanelClose": void; + "calcitePanelToggle": void; + "calcitePanelScroll": void; + } + interface HTMLCalcitePanelElement extends Components.CalcitePanel, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalcitePanelElement, ev: CalcitePanelCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalcitePanelElement, ev: CalcitePanelCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalcitePanelElement: { + prototype: HTMLCalcitePanelElement; + new (): HTMLCalcitePanelElement; + }; + interface HTMLCalcitePickListElementEventMap { + "calciteListChange": Map; + "calciteListFilter": void; + } /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - handleActivated?: boolean; + * @deprecated Use the `list` component instead. + */ + interface HTMLCalcitePickListElement extends Components.CalcitePickList, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalcitePickListElement, ev: CalcitePickListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalcitePickListElement, ev: CalcitePickListCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalcitePickListElement: { + prototype: HTMLCalcitePickListElement; + new (): HTMLCalcitePickListElement; + }; /** - * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. - * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) + * @deprecated Use the `list` component instead. */ - icon?: ICON_TYPES | null; + interface HTMLCalcitePickListGroupElement extends Components.CalcitePickListGroup, HTMLStencilElement { + } + var HTMLCalcitePickListGroupElement: { + prototype: HTMLCalcitePickListGroupElement; + new (): HTMLCalcitePickListGroupElement; + }; + interface HTMLCalcitePickListItemElementEventMap { + "calciteListItemChange": { + item: HTMLCalcitePickListItemElement; + value: any; + selected: boolean; + shiftPressed: boolean; + }; + "calciteListItemRemove": void; + "calciteInternalListItemPropsChange": void; + "calciteInternalListItemValueChange": { + oldValue: any; + newValue: any; + }; + } /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; + * @deprecated Use the `list` component instead. + */ + interface HTMLCalcitePickListItemElement extends Components.CalcitePickListItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalcitePickListItemElement, ev: CalcitePickListItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalcitePickListItemElement, ev: CalcitePickListItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalcitePickListItemElement: { + prototype: HTMLCalcitePickListItemElement; + new (): HTMLCalcitePickListItemElement; + }; + interface HTMLCalcitePopoverElementEventMap { + "calcitePopoverBeforeClose": void; + "calcitePopoverClose": void; + "calcitePopoverBeforeOpen": void; + "calcitePopoverOpen": void; + } + interface HTMLCalcitePopoverElement extends Components.CalcitePopover, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalcitePopoverElement, ev: CalcitePopoverCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalcitePopoverElement, ev: CalcitePopoverCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalcitePopoverElement: { + prototype: HTMLCalcitePopoverElement; + new (): HTMLCalcitePopoverElement; + }; + interface HTMLCalciteProgressElement extends Components.CalciteProgress, HTMLStencilElement { + } + var HTMLCalciteProgressElement: { + prototype: HTMLCalciteProgressElement; + new (): HTMLCalciteProgressElement; + }; + interface HTMLCalciteRadioButtonElementEventMap { + "calciteInternalRadioButtonBlur": void; + "calciteRadioButtonChange": void; + "calciteInternalRadioButtonCheckedChange": void; + "calciteInternalRadioButtonFocus": void; + } + interface HTMLCalciteRadioButtonElement extends Components.CalciteRadioButton, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteRadioButtonElement, ev: CalciteRadioButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteRadioButtonElement, ev: CalciteRadioButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteRadioButtonElement: { + prototype: HTMLCalciteRadioButtonElement; + new (): HTMLCalciteRadioButtonElement; + }; + interface HTMLCalciteRadioButtonGroupElementEventMap { + "calciteRadioButtonGroupChange": void; + } + interface HTMLCalciteRadioButtonGroupElement extends Components.CalciteRadioButtonGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteRadioButtonGroupElement, ev: CalciteRadioButtonGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteRadioButtonGroupElement, ev: CalciteRadioButtonGroupCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteRadioButtonGroupElement: { + prototype: HTMLCalciteRadioButtonGroupElement; + new (): HTMLCalciteRadioButtonGroupElement; + }; + interface HTMLCalciteRatingElementEventMap { + "calciteRatingChange": void; + } + interface HTMLCalciteRatingElement extends Components.CalciteRating, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteRatingElement, ev: CalciteRatingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteRatingElement, ev: CalciteRatingCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteRatingElement: { + prototype: HTMLCalciteRatingElement; + new (): HTMLCalciteRatingElement; + }; + interface HTMLCalciteScrimElement extends Components.CalciteScrim, HTMLStencilElement { + } + var HTMLCalciteScrimElement: { + prototype: HTMLCalciteScrimElement; + new (): HTMLCalciteScrimElement; + }; + interface HTMLCalciteSegmentedControlElementEventMap { + "calciteSegmentedControlChange": void; + } + interface HTMLCalciteSegmentedControlElement extends Components.CalciteSegmentedControl, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSegmentedControlElement, ev: CalciteSegmentedControlCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSegmentedControlElement, ev: CalciteSegmentedControlCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSegmentedControlElement: { + prototype: HTMLCalciteSegmentedControlElement; + new (): HTMLCalciteSegmentedControlElement; + }; + interface HTMLCalciteSegmentedControlItemElementEventMap { + "calciteInternalSegmentedControlItemChange": void; + } + interface HTMLCalciteSegmentedControlItemElement extends Components.CalciteSegmentedControlItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSegmentedControlItemElement, ev: CalciteSegmentedControlItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSegmentedControlItemElement, ev: CalciteSegmentedControlItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSegmentedControlItemElement: { + prototype: HTMLCalciteSegmentedControlItemElement; + new (): HTMLCalciteSegmentedControlItemElement; + }; + interface HTMLCalciteSelectElementEventMap { + "calciteSelectChange": void; + } + interface HTMLCalciteSelectElement extends Components.CalciteSelect, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSelectElement, ev: CalciteSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSelectElement, ev: CalciteSelectCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSelectElement: { + prototype: HTMLCalciteSelectElement; + new (): HTMLCalciteSelectElement; + }; + interface HTMLCalciteSheetElementEventMap { + "calciteSheetBeforeClose": void; + "calciteSheetClose": void; + "calciteSheetBeforeOpen": void; + "calciteSheetOpen": void; + } + interface HTMLCalciteSheetElement extends Components.CalciteSheet, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSheetElement, ev: CalciteSheetCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSheetElement, ev: CalciteSheetCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSheetElement: { + prototype: HTMLCalciteSheetElement; + new (): HTMLCalciteSheetElement; + }; + 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 HTMLCalciteSliderElementEventMap { + "calciteSliderInput": void; + "calciteSliderChange": void; + } + interface HTMLCalciteSliderElement extends Components.CalciteSlider, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSliderElement, ev: CalciteSliderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSliderElement, ev: CalciteSliderCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSliderElement: { + prototype: HTMLCalciteSliderElement; + new (): HTMLCalciteSliderElement; + }; + interface HTMLCalciteSortableListElementEventMap { + "calciteListOrderChange": void; + } + interface HTMLCalciteSortableListElement extends Components.CalciteSortableList, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSortableListElement, ev: CalciteSortableListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSortableListElement, ev: CalciteSortableListCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSortableListElement: { + prototype: HTMLCalciteSortableListElement; + new (): HTMLCalciteSortableListElement; + }; + interface HTMLCalciteSplitButtonElementEventMap { + "calciteSplitButtonPrimaryClick": void; + "calciteSplitButtonSecondaryClick": void; + } + interface HTMLCalciteSplitButtonElement extends Components.CalciteSplitButton, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSplitButtonElement, ev: CalciteSplitButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSplitButtonElement, ev: CalciteSplitButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSplitButtonElement: { + prototype: HTMLCalciteSplitButtonElement; + new (): HTMLCalciteSplitButtonElement; + }; + interface HTMLCalciteStackElement extends Components.CalciteStack, HTMLStencilElement { + } + var HTMLCalciteStackElement: { + prototype: HTMLCalciteStackElement; + new (): HTMLCalciteStackElement; + }; + interface HTMLCalciteStepperElementEventMap { + "calciteStepperItemChange": void; + "calciteInternalStepperItemChange": StepperItemChangeEventDetail; + } + interface HTMLCalciteStepperElement extends Components.CalciteStepper, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteStepperElement, ev: CalciteStepperCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteStepperElement, ev: CalciteStepperCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteStepperElement: { + prototype: HTMLCalciteStepperElement; + new (): HTMLCalciteStepperElement; + }; + interface HTMLCalciteStepperItemElementEventMap { + "calciteInternalStepperItemKeyEvent": StepperItemKeyEventDetail; + "calciteInternalStepperItemSelect": StepperItemEventDetail; + "calciteInternalUserRequestedStepperItemSelect": StepperItemChangeEventDetail; + "calciteInternalStepperItemRegister": StepperItemEventDetail; + } + interface HTMLCalciteStepperItemElement extends Components.CalciteStepperItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteStepperItemElement, ev: CalciteStepperItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteStepperItemElement, ev: CalciteStepperItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteStepperItemElement: { + prototype: HTMLCalciteStepperItemElement; + new (): HTMLCalciteStepperItemElement; + }; + interface HTMLCalciteSwitchElementEventMap { + "calciteSwitchChange": void; + } + interface HTMLCalciteSwitchElement extends Components.CalciteSwitch, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSwitchElement, ev: CalciteSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSwitchElement, ev: CalciteSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteSwitchElement: { + prototype: HTMLCalciteSwitchElement; + new (): HTMLCalciteSwitchElement; + }; + interface HTMLCalciteTabElementEventMap { + "calciteInternalTabRegister": void; + } + interface HTMLCalciteTabElement extends Components.CalciteTab, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTabElement, ev: CalciteTabCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTabElement, ev: CalciteTabCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTabElement: { + prototype: HTMLCalciteTabElement; + new (): HTMLCalciteTabElement; + }; + interface HTMLCalciteTabNavElementEventMap { + "calciteTabChange": void; + "calciteInternalTabChange": TabChangeEventDetail; + } + interface HTMLCalciteTabNavElement extends Components.CalciteTabNav, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTabNavElement, ev: CalciteTabNavCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTabNavElement, ev: CalciteTabNavCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTabNavElement: { + prototype: HTMLCalciteTabNavElement; + new (): HTMLCalciteTabNavElement; + }; + interface HTMLCalciteTabTitleElementEventMap { + "calciteTabsActivate": void; + "calciteInternalTabsActivate": TabChangeEventDetail; + "calciteTabsClose": void; + "calciteInternalTabsClose": TabCloseEventDetail; + "calciteInternalTabsFocusNext": void; + "calciteInternalTabsFocusPrevious": void; + "calciteInternalTabsFocusFirst": void; + "calciteInternalTabsFocusLast": void; + "calciteInternalTabTitleRegister": TabID; + "calciteInternalTabIconChanged": void; + } + interface HTMLCalciteTabTitleElement extends Components.CalciteTabTitle, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTabTitleElement, ev: CalciteTabTitleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTabTitleElement, ev: CalciteTabTitleCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTabTitleElement: { + prototype: HTMLCalciteTabTitleElement; + new (): HTMLCalciteTabTitleElement; + }; + interface HTMLCalciteTableElementEventMap { + "calciteTableSelect": void; + "calciteTablePageChange": void; + "calciteInternalTableRowFocusChange": TableRowFocusEvent; + } + interface HTMLCalciteTableElement extends Components.CalciteTable, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTableElement, ev: CalciteTableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTableElement, ev: CalciteTableCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTableElement: { + prototype: HTMLCalciteTableElement; + new (): HTMLCalciteTableElement; + }; + interface HTMLCalciteTableCellElement extends Components.CalciteTableCell, HTMLStencilElement { + } + var HTMLCalciteTableCellElement: { + prototype: HTMLCalciteTableCellElement; + new (): HTMLCalciteTableCellElement; + }; + interface HTMLCalciteTableHeaderElement extends Components.CalciteTableHeader, HTMLStencilElement { + } + var HTMLCalciteTableHeaderElement: { + prototype: HTMLCalciteTableHeaderElement; + new (): HTMLCalciteTableHeaderElement; + }; + interface HTMLCalciteTableRowElementEventMap { + "calciteTableRowSelect": void; + "calciteInternalTableRowFocusRequest": TableRowFocusEvent; + } + interface HTMLCalciteTableRowElement extends Components.CalciteTableRow, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTableRowElement, ev: CalciteTableRowCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTableRowElement, ev: CalciteTableRowCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTableRowElement: { + prototype: HTMLCalciteTableRowElement; + new (): HTMLCalciteTableRowElement; + }; + interface HTMLCalciteTabsElement extends Components.CalciteTabs, HTMLStencilElement { + } + var HTMLCalciteTabsElement: { + prototype: HTMLCalciteTabsElement; + new (): HTMLCalciteTabsElement; + }; + interface HTMLCalciteTextAreaElementEventMap { + "calciteTextAreaInput": void; + "calciteTextAreaChange": void; + } + interface HTMLCalciteTextAreaElement extends Components.CalciteTextArea, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTextAreaElement, ev: CalciteTextAreaCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTextAreaElement, ev: CalciteTextAreaCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTextAreaElement: { + prototype: HTMLCalciteTextAreaElement; + new (): HTMLCalciteTextAreaElement; + }; + interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement { + } + var HTMLCalciteTileElement: { + prototype: HTMLCalciteTileElement; + new (): HTMLCalciteTileElement; + }; + interface HTMLCalciteTileSelectElementEventMap { + "calciteTileSelectChange": void; + } + interface HTMLCalciteTileSelectElement extends Components.CalciteTileSelect, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTileSelectElement, ev: CalciteTileSelectCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTileSelectElement, ev: CalciteTileSelectCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTileSelectElement: { + prototype: HTMLCalciteTileSelectElement; + new (): HTMLCalciteTileSelectElement; + }; + interface HTMLCalciteTileSelectGroupElement extends Components.CalciteTileSelectGroup, HTMLStencilElement { + } + var HTMLCalciteTileSelectGroupElement: { + prototype: HTMLCalciteTileSelectGroupElement; + new (): HTMLCalciteTileSelectGroupElement; + }; + interface HTMLCalciteTimePickerElementEventMap { + "calciteInternalTimePickerBlur": void; + "calciteInternalTimePickerChange": string; + "calciteInternalTimePickerFocus": void; + } + interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTimePickerElement: { + prototype: HTMLCalciteTimePickerElement; + new (): HTMLCalciteTimePickerElement; + }; + interface HTMLCalciteTipElementEventMap { + "calciteTipDismiss": void; + } + interface HTMLCalciteTipElement extends Components.CalciteTip, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTipElement, ev: CalciteTipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTipElement, ev: CalciteTipCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTipElement: { + prototype: HTMLCalciteTipElement; + new (): HTMLCalciteTipElement; + }; + interface HTMLCalciteTipGroupElement extends Components.CalciteTipGroup, HTMLStencilElement { + } + var HTMLCalciteTipGroupElement: { + prototype: HTMLCalciteTipGroupElement; + new (): HTMLCalciteTipGroupElement; + }; + interface HTMLCalciteTipManagerElementEventMap { + "calciteTipManagerClose": void; + } + interface HTMLCalciteTipManagerElement extends Components.CalciteTipManager, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTipManagerElement, ev: CalciteTipManagerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTipManagerElement, ev: CalciteTipManagerCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTipManagerElement: { + prototype: HTMLCalciteTipManagerElement; + new (): HTMLCalciteTipManagerElement; + }; + interface HTMLCalciteTooltipElementEventMap { + "calciteTooltipBeforeClose": void; + "calciteTooltipClose": void; + "calciteTooltipBeforeOpen": void; + "calciteTooltipOpen": void; + } + interface HTMLCalciteTooltipElement extends Components.CalciteTooltip, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTooltipElement, ev: CalciteTooltipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTooltipElement, ev: CalciteTooltipCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTooltipElement: { + prototype: HTMLCalciteTooltipElement; + new (): HTMLCalciteTooltipElement; + }; + interface HTMLCalciteTreeElementEventMap { + "calciteTreeSelect": void; + } + interface HTMLCalciteTreeElement extends Components.CalciteTree, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTreeElement, ev: CalciteTreeCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTreeElement, ev: CalciteTreeCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTreeElement: { + prototype: HTMLCalciteTreeElement; + new (): HTMLCalciteTreeElement; + }; + interface HTMLCalciteTreeItemElementEventMap { + "calciteInternalTreeItemSelect": TreeItemSelectDetail; + } + interface HTMLCalciteTreeItemElement extends Components.CalciteTreeItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTreeItemElement, ev: CalciteTreeItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteTreeItemElement, ev: CalciteTreeItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteTreeItemElement: { + prototype: HTMLCalciteTreeItemElement; + new (): HTMLCalciteTreeItemElement; + }; + interface HTMLCalciteValueListElementEventMap { + "calciteListChange": Map; + "calciteListOrderChange": any[]; + "calciteListFilter": void; + } /** - * Label and accessible name for the component. Appears next to the icon. - */ - label: string; + * @deprecated Use the `list` component instead. + */ + interface HTMLCalciteValueListElement extends Components.CalciteValueList, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteValueListElement, ev: CalciteValueListCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteValueListElement, ev: CalciteValueListCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLCalciteValueListElement: { + prototype: HTMLCalciteValueListElement; + new (): HTMLCalciteValueListElement; + }; + interface HTMLCalciteValueListItemElementEventMap { + "calciteListItemChange": { + item: HTMLCalciteValueListItemElement; + value: any; + selected: boolean; + shiftPressed: boolean; + }; + "calciteListItemRemove": void; + "calciteValueListItemDragHandleBlur": ListItemAndHandle; + } /** - * Provides additional metadata to the component. Primary use is for a filter on the parent list. - */ - metadata?: Record; + * @deprecated Use the `list` component instead. + */ + interface HTMLCalciteValueListItemElement extends Components.CalciteValueListItem, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteValueListItemElement, ev: CalciteValueListItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteValueListItemElement, ev: CalciteValueListItemCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + 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-chip-group": HTMLCalciteChipGroupElement; + "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-flow-item": HTMLCalciteFlowItemElement; + "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-number": HTMLCalciteInputNumberElement; + "calcite-input-text": HTMLCalciteInputTextElement; + "calcite-input-time-picker": HTMLCalciteInputTimePickerElement; + "calcite-input-time-zone": HTMLCalciteInputTimeZoneElement; + "calcite-label": HTMLCalciteLabelElement; + "calcite-link": HTMLCalciteLinkElement; + "calcite-list": HTMLCalciteListElement; + "calcite-list-item": HTMLCalciteListItemElement; + "calcite-list-item-group": HTMLCalciteListItemGroupElement; + "calcite-loader": HTMLCalciteLoaderElement; + "calcite-menu": HTMLCalciteMenuElement; + "calcite-menu-item": HTMLCalciteMenuItemElement; + "calcite-meter": HTMLCalciteMeterElement; + "calcite-modal": HTMLCalciteModalElement; + "calcite-navigation": HTMLCalciteNavigationElement; + "calcite-navigation-logo": HTMLCalciteNavigationLogoElement; + "calcite-navigation-user": HTMLCalciteNavigationUserElement; + "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-progress": HTMLCalciteProgressElement; + "calcite-radio-button": HTMLCalciteRadioButtonElement; + "calcite-radio-button-group": HTMLCalciteRadioButtonGroupElement; + "calcite-rating": HTMLCalciteRatingElement; + "calcite-scrim": HTMLCalciteScrimElement; + "calcite-segmented-control": HTMLCalciteSegmentedControlElement; + "calcite-segmented-control-item": HTMLCalciteSegmentedControlItemElement; + "calcite-select": HTMLCalciteSelectElement; + "calcite-sheet": HTMLCalciteSheetElement; + "calcite-shell": HTMLCalciteShellElement; + "calcite-shell-center-row": HTMLCalciteShellCenterRowElement; + "calcite-shell-panel": HTMLCalciteShellPanelElement; + "calcite-slider": HTMLCalciteSliderElement; + "calcite-sortable-list": HTMLCalciteSortableListElement; + "calcite-split-button": HTMLCalciteSplitButtonElement; + "calcite-stack": HTMLCalciteStackElement; + "calcite-stepper": HTMLCalciteStepperElement; + "calcite-stepper-item": HTMLCalciteStepperItemElement; + "calcite-switch": HTMLCalciteSwitchElement; + "calcite-tab": HTMLCalciteTabElement; + "calcite-tab-nav": HTMLCalciteTabNavElement; + "calcite-tab-title": HTMLCalciteTabTitleElement; + "calcite-table": HTMLCalciteTableElement; + "calcite-table-cell": HTMLCalciteTableCellElement; + "calcite-table-header": HTMLCalciteTableHeaderElement; + "calcite-table-row": HTMLCalciteTableRowElement; + "calcite-tabs": HTMLCalciteTabsElement; + "calcite-text-area": HTMLCalciteTextAreaElement; + "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-tree": HTMLCalciteTreeElement; + "calcite-tree-item": HTMLCalciteTreeItemElement; + "calcite-value-list": HTMLCalciteValueListElement; + "calcite-value-list-item": HTMLCalciteValueListItemElement; + } +} +declare namespace LocalJSX { + interface CalciteAccordion { + /** + * Specifies the appearance of the component. + */ + "appearance"?: Extract<"solid" | "transparent", Appearance>; + /** + * Specifies the placement of the icon in the header. + */ + "iconPosition"?: Position; + /** + * Specifies the type of the icon in the header. + */ + "iconType"?: "chevron" | "caret" | "plus-minus"; + "onCalciteInternalAccordionChange"?: (event: CalciteAccordionCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). + */ + "selectionMode"?: Extract< + "single" | "single-persist" | "multiple", + SelectionMode + >; + } + interface CalciteAccordionItem { + /** + * The containing `accordion` element. + */ + "accordionParent"?: HTMLCalciteAccordionElement; + /** + * Specifies a description for the component. + */ + "description"?: string; + /** + * When `true`, the component is expanded. + */ + "expanded"?: boolean; + /** + * Specifies heading text for the component. + */ + "heading"?: string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: FlipContext; + /** + * Specifies the placement of the icon in the header inherited from the `calcite-accordion`. + */ + "iconPosition"?: Position; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + /** + * Specifies the type of the icon in the header inherited from the `calcite-accordion`. + */ + "iconType"?: "chevron" | "caret" | "plus-minus"; + "onCalciteInternalAccordionItemClose"?: (event: CalciteAccordionItemCustomEvent) => void; + "onCalciteInternalAccordionItemSelect"?: (event: CalciteAccordionItemCustomEvent) => void; + /** + * Specifies the size of the component inherited from the `calcite-accordion`. + */ + "scale"?: Scale; + } + interface CalciteAction { + /** + * When `true`, the component is highlighted. + */ + "active"?: boolean; + /** + * Specifies the horizontal alignment of button elements with text content. + */ + "alignment"?: Alignment; + /** + * Specifies the appearance of the component. + */ + "appearance"?: Extract<"solid" | "transparent", Appearance>; + /** + * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. + */ + "compact"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies an icon to display. + */ + "icon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * When `true`, displays a visual indicator. + */ + "indicator"?: boolean; + /** + * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. + */ + "label"?: string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ActionMessages; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies text that accompanies the icon. + */ + "text": string; + /** + * Indicates whether the text is displayed. + */ + "textEnabled"?: boolean; + } + interface CalciteActionBar { + /** + * Specifies the accessible label for the last action-group. + */ + "actionsEndGroupLabel"?: string; + /** + * When `true`, the expand-toggling behavior is disabled. + */ + "expandDisabled"?: boolean; + /** + * When `true`, the component is expanded. + */ + "expanded"?: boolean; + /** + * The layout direction of the actions. + */ + "layout"?: Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ActionBarMessages; + /** + * Emits when the `expanded` property is toggled. + */ + "onCalciteActionBarToggle"?: (event: CalciteActionBarCustomEvent) => void; + /** + * Disables automatically overflowing `calcite-action`s that won't fit into menus. + */ + "overflowActionsDisabled"?: boolean; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position"?: Position; + /** + * Specifies the size of the expand `calcite-action`. + */ + "scale"?: Scale; + } + interface CalciteActionGroup { + /** + * Indicates number of columns. + */ + "columns"?: Columns; + /** + * When `true`, the component is expanded. + */ + "expanded"?: boolean; + /** + * Specifies the label of the component. Required for accessibility. + */ + "label"?: string; + /** + * Indicates the layout of the component. + * @deprecated Use the `layout` property on the component's parent instead. + */ + "layout"?: Layout; + /** + * When `true`, the `calcite-action-menu` is open. + */ + "menuOpen"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ActionGroupMessages; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Specifies the size of the `calcite-action-menu`. + */ + "scale"?: Scale; + } + interface CalciteActionMenu { + /** + * Specifies the appearance of the component. + */ + "appearance"?: Extract<"solid" | "transparent", Appearance>; + /** + * When `true`, the component is expanded. + */ + "expanded"?: boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: EffectivePlacement[]; + /** + * Specifies the text string for the component. + */ + "label": string; + /** + * Emits when the `open` property is toggled. + */ + "onCalciteActionMenuOpen"?: (event: CalciteActionMenuCustomEvent) => void; + /** + * When `true`, the component is open. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the component will be positioned relative to the `referenceElement`. + */ + "placement"?: LogicalPlacement; + /** + * Specifies the size of the component's trigger `calcite-action`. + */ + "scale"?: Scale; + } + interface CalciteActionPad { + /** + * Specifies the accessible label for the last action-group. + */ + "actionsEndGroupLabel"?: string; + /** + * When `true`, the expand-toggling behavior is disabled. + */ + "expandDisabled"?: boolean; + /** + * When `true`, the component is expanded. + */ + "expanded"?: boolean; + /** + * Indicates the layout of the component. + */ + "layout"?: Layout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ActionPadMessages; + /** + * Emits when the `expanded` property is toggled. + */ + "onCalciteActionPadToggle"?: (event: CalciteActionPadCustomEvent) => void; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position"?: Position; + /** + * Specifies the size of the expand `calcite-action`. + */ + "scale"?: Scale; + } + interface CalciteAlert { + /** + * When `true`, the component closes automatically (recommended for passive, non-blocking alerts). + */ + "autoClose"?: boolean; + /** + * Specifies the duration before the component automatically closes (only use with `autoClose`). + */ + "autoCloseDuration"?: AlertDuration; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon"?: string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the kind of the component (will apply to top border and icon). + */ + "kind"?: Extract< + "brand" | "danger" | "info" | "success" | "warning", + Kind + >; + /** + * Specifies an accessible name for the component. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: AlertMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteAlertBeforeClose"?: (event: CalciteAlertCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteAlertBeforeOpen"?: (event: CalciteAlertCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteAlertClose"?: (event: CalciteAlertCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteAlertOpen"?: (event: CalciteAlertCustomEvent) => void; + /** + * Fires when the component is added to DOM - used to receive initial queue. + */ + "onCalciteInternalAlertRegister"?: (event: CalciteAlertCustomEvent) => void; + /** + * Fires to sync queue when opened or closed. + */ + "onCalciteInternalAlertSync"?: (event: CalciteAlertCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * Specifies the placement of the component + */ + "placement"?: MenuPlacement; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "slottedInShell"?: boolean; + } + interface CalciteAvatar { + /** + * Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. + */ + "fullName"?: string; + /** + * Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label. + */ + "label"?: string; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the `src` to an image (remember to add a token if the user is private). + */ + "thumbnail"?: string; + /** + * Specifies the unique id of the user. + */ + "userId"?: string; + /** + * Specifies the username of the user. + */ + "username"?: string; + } + interface CalciteBlock { + /** + * When `true`, the component is collapsible. + */ + "collapsible"?: boolean; + /** + * A description for the component, which displays below the heading. + */ + "description"?: string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, displays a drag handle in the header. + */ + "dragHandle"?: boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: BlockMessages; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteBlockBeforeClose"?: (event: CalciteBlockCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteBlockBeforeOpen"?: (event: CalciteBlockCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteBlockClose"?: (event: CalciteBlockCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteBlockOpen"?: (event: CalciteBlockCustomEvent) => void; + /** + * Emits when the component's header is clicked. + * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead. + */ + "onCalciteBlockToggle"?: (event: CalciteBlockCustomEvent) => void; + /** + * When `true`, expands the component and its contents. + */ + "open"?: boolean; + /** + * Displays a status-related indicator icon. + */ + "status"?: Status; + } + interface CalciteBlockSection { + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: BlockSectionMessages; + /** + * Emits when the header has been clicked. + */ + "onCalciteBlockSectionToggle"?: (event: CalciteBlockSectionCustomEvent) => void; + /** + * When `true`, expands the component and its contents. + */ + "open"?: boolean; + /** + * Displays a status-related indicator icon. + */ + "status"?: Status; + /** + * The component header text. + */ + "text"?: string; + /** + * Specifies the component's toggle display - `"button"` (selectable header), or `"switch"` (toggle switch). + */ + "toggleDisplay"?: BlockSectionToggleDisplay; + } + interface CalciteButton { + /** + * Specifies the alignment of the component's elements. + */ + "alignment"?: ButtonAlignment; + /** + * Specifies the appearance style of the component. + */ + "appearance"?: Extract< + "outline" | "outline-fill" | "solid" | "transparent", + Appearance + >; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Specifies the URL of the linked resource, which can be set as an absolute or relative path. + */ + "href"?: string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + /** + * Specifies the kind of the component (will apply to border and background if applicable). + */ + "kind"?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * When `true`, a busy indicator is displayed and interaction is disabled. + */ + "loading"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ButtonMessages; + /** + * Specifies the name of the component on form submission. + */ + "name"?: string; + /** + * Defines the relationship between the `href` value and the current document. + * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) + */ + "rel"?: string; + /** + * When `true`, adds a round style to the component. + */ + "round"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies if the component is a child of a `calcite-split-button`. + */ + "splitChild"?: "primary" | "secondary" | false; + /** + * Specifies where to open the linked document defined in the `href` property. + * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) + */ + "target"?: string; + /** + * Specifies the default behavior of the button. + * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) + */ + "type"?: string; + /** + * Specifies the width of the component. + */ + "width"?: Width; + } + interface CalciteCard { + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: CardMessages; + /** + * Fires when `selectable` is `true` and the component is selected. + */ + "onCalciteCardSelect"?: (event: CalciteCardCustomEvent) => void; + /** + * When `true`, the component is selectable. + */ + "selectable"?: boolean; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * Sets the placement of the thumbnail defined in the `thumbnail` slot. + */ + "thumbnailPosition"?: LogicalFlowPosition; + } + interface CalciteCheckbox { + /** + * When `true`, the component is checked. + */ + "checked"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * The `id` attribute of the component. When omitted, a globally unique identifier is used. + */ + "guid"?: string; + /** + * The hovered state of the checkbox. + */ + "hovered"?: boolean; + /** + * When `true`, the component is initially indeterminate, which is independent from its `checked` value. The state is visual only, and can look different across browsers. + * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) + */ + "indeterminate"?: boolean; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Specifies the name of the component on form submission. + */ + "name"?: string; + /** + * Emits when the component's `checked` status changes. + */ + "onCalciteCheckboxChange"?: (event: CalciteCheckboxCustomEvent) => void; + /** + * Emits when the component is blurred. + */ + "onCalciteInternalCheckboxBlur"?: (event: CalciteCheckboxCustomEvent) => void; + /** + * Emits when the component is focused. + */ + "onCalciteInternalCheckboxFocus"?: (event: CalciteCheckboxCustomEvent) => void; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * The component's value. + */ + "value"?: any; + } + interface CalciteChip { + /** + * Specifies the appearance style of the component. + */ + "appearance"?: Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, a close button is added to the component. + */ + "closable"?: boolean; + /** + * When `true`, hides the component. + */ + "closed"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies an icon to display. + */ + "icon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit. This is set to `true` by a parent Chip Group component. + */ + "interactive"?: boolean; + /** + * Specifies the kind of the component (will apply to border and background if applicable). + */ + "kind"?: Extract<"brand" | "inverse" | "neutral", Kind>; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ChipMessages; + /** + * Fires when the component's close button is selected. + */ + "onCalciteChipClose"?: (event: CalciteChipCustomEvent) => void; + /** + * Fires when the selected state of the component changes. + */ + "onCalciteChipSelect"?: (event: CalciteChipCustomEvent) => void; + "onCalciteInternalChipKeyEvent"?: (event: CalciteChipCustomEvent) => void; + /** + * Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. + */ + "scale"?: Scale; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * This internal property, managed by a containing `calcite-chip-group`, is conditionally set based on the `selectionMode` of the parent + */ + "selectionMode"?: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; + /** + * The component's value. + */ + "value": any; + } + interface CalciteChipGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Emits when the component's selection changes. + */ + "onCalciteChipGroupSelect"?: (event: CalciteChipGroupCustomEvent) => void; + /** + * Specifies the size of the component. Child `calcite-chip`s inherit the component's value. + */ + "scale"?: Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteChipElement[]; + /** + * Specifies the selection mode of the component. + */ + "selectionMode"?: Extract< + "multiple" | "single" | "single-persist" | "none", + SelectionMode + >; + } + interface CalciteColorPicker { + /** + * When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. + */ + "allowEmpty"?: boolean; + /** + * When true, the component will allow updates to the color's alpha value. + */ + "alphaChannel"?: boolean; + /** + * When true, hides the RGB/HSV channel inputs + */ + "channelsDisabled"?: boolean; + /** + * Internal prop for advanced use-cases. + */ + "color"?: InternalColor | null; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The format of `value`. When `"auto"`, the format will be inferred from `value` when set. + * @default "auto" + */ + "format"?: Format; + /** + * When true, hides the hex input + */ + "hexDisabled"?: boolean; + /** + * When `true`, hides the RGB/HSV channel inputs. + * @deprecated use `channelsDisabled` instead + */ + "hideChannels"?: boolean; + /** + * When `true`, hides the hex input. + * @deprecated use `hexDisabled` instead + */ + "hideHex"?: boolean; + /** + * When `true`, hides the saved colors section. + * @deprecated use `savedDisabled` instead + */ + "hideSaved"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ColorPickerMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires when the color value has changed. + */ + "onCalciteColorPickerChange"?: (event: CalciteColorPickerCustomEvent) => void; + /** + * Fires as the color value changes. Similar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved. + */ + "onCalciteColorPickerInput"?: (event: CalciteColorPickerCustomEvent) => void; + /** + * When true, hides the saved colors section + */ + "savedDisabled"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the storage ID for colors. + */ + "storageId"?: string; + /** + * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. + * @default "#007ac2" + * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) + * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/main/src/components/color-picker/interfaces.ts#L10) + */ + "value"?: ColorValue | null; + } + interface CalciteColorPickerHexInput { + /** + * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. + */ + "allowEmpty"?: boolean; + /** + * When true, the component will allow updates to the color's alpha value. + */ + "alphaChannel"?: boolean; + /** + * Specifies accessible label for the input field. + * @deprecated use `messages` instead + */ + "hexLabel"?: string; + /** + * Messages are passed by parent component for accessible labels. + */ + "messages"?: ColorPickerMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Emitted when the hex value changes. + */ + "onCalciteColorPickerHexInputChange"?: (event: CalciteColorPickerHexInputCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * The hex value. + */ + "value"?: string; + } + interface CalciteColorPickerSwatch { + /** + * When `true`, the component is active. + */ + "active"?: boolean; + /** + * The color value. + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value + */ + "color"?: string | null; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + } + interface CalciteCombobox { + /** + * When `true`, allows entry of custom values, which are not in the original set of items. + */ + "allowCustomValues"?: boolean; + /** + * When `true`, the value-clearing will be disabled. + */ + "clearDisabled"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies the component's filtered items. + * @readonly + */ + "filteredItems"?: HTMLCalciteComboboxItemElement[]; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: EffectivePlacement[]; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. + */ + "maxItems"?: number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ComboboxMessages; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Fires when the component is requested to be closed, and before the closing transition begins. + */ + "onCalciteComboboxBeforeClose"?: (event: CalciteComboboxCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteComboboxBeforeOpen"?: (event: CalciteComboboxCustomEvent) => void; + /** + * Fires when the selected item(s) changes. + */ + "onCalciteComboboxChange"?: (event: CalciteComboboxCustomEvent) => void; + /** + * Fires when a selected item in the component is closed via its `calcite-chip`. + */ + "onCalciteComboboxChipClose"?: (event: CalciteComboboxCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteComboboxClose"?: (event: CalciteComboboxCustomEvent) => void; + /** + * Fires when text is added to filter the options list. + */ + "onCalciteComboboxFilterChange"?: (event: CalciteComboboxCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteComboboxOpen"?: (event: CalciteComboboxCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Specifies the placeholder text for the input. + */ + "placeholder"?: string; + /** + * Specifies the placeholder icon for the input. + */ + "placeholderIcon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "placeholderIconFlipRtl"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteComboboxItemElement[]; + /** + * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections). + */ + "selectionDisplay"?: SelectionDisplay; + /** + * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + */ + "selectionMode"?: Extract< + "single" | "single-persist" | "ancestors" | "multiple", + SelectionMode + >; + /** + * The component's value(s) from the selected `calcite-combobox-item`(s). + */ + "value"?: string | string[]; + } + interface CalciteComboboxItem { + /** + * When `true`, the component is active. + */ + "active"?: boolean; + /** + * Specifies the parent and grandparent items, which are set on `calcite-combobox`. + */ + "ancestors"?: ComboboxChildElement[]; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, omits the component from the `calcite-combobox` filtered search results. + */ + "filterDisabled"?: boolean; + /** + * The `id` attribute of the component. When omitted, a globally unique identifier is used. + */ + "guid"?: string; + /** + * Specifies an icon to display. + */ + "icon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Emits whenever the component is selected or unselected. + */ + "onCalciteComboboxItemChange"?: (event: CalciteComboboxItemCustomEvent) => void; + /** + * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. + */ + "scale"?: Scale; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + */ + "selectionMode"?: Extract< + "single" | "single-persist" | "ancestors" | "multiple", + SelectionMode + >; + /** + * The component's text. + */ + "textLabel": string; + /** + * The component's value. + */ + "value": any; + } + interface CalciteComboboxItemGroup { + /** + * When `true`, signifies that the group comes after another group without any children (items or sub-groups), otherwise indicates that the group comes after another group that has children. Used for styling. + */ + "afterEmptyGroup"?: boolean; + /** + * Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. + */ + "ancestors"?: ComboboxChildElement[]; + /** + * Specifies the title of the component. + */ + "label": string; + /** + * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`. + */ + "scale"?: Scale; + } + interface CalciteDatePicker { + /** + * Specifies the component's active date. + */ + "activeDate"?: Date; + /** + * When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. + */ + "activeRange"?: "start" | "end"; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * Specifies the latest allowed date (`"yyyy-mm-dd"`). + */ + "max"?: string; + /** + * Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). + */ + "maxAsDate"?: Date; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: DatePickerMessages; + /** + * Specifies the earliest allowed date (`"yyyy-mm-dd"`). + */ + "min"?: string; + /** + * Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). + */ + "minAsDate"?: Date; + /** + * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. + */ + "numberingSystem"?: NumberingSystem; + /** + * Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. + */ + "onCalciteDatePickerChange"?: (event: CalciteDatePickerCustomEvent) => void; + /** + * Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. + */ + "onCalciteDatePickerRangeChange"?: (event: CalciteDatePickerCustomEvent) => void; + /** + * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. + */ + "proximitySelectionDisabled"?: boolean; + /** + * When `true`, activates the component's range mode to allow a start and end date. + */ + "range"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: "s" | "m" | "l"; + /** + * Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). + */ + "value"?: string | string[]; + /** + * Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). + */ + "valueAsDate"?: Date | Date[]; + } + interface CalciteDatePickerDay { + /** + * When `true`, the component is active. + */ + "active"?: boolean; + /** + * Date is in the current month. + */ + "currentMonth"?: boolean; + /** + * The DateTimeFormat used to provide screen reader labels. + */ + "dateTimeFormat"?: Intl.DateTimeFormat; + /** + * Day of the month to be shown. + */ + "day": number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Date is the end of date range + */ + "endOfRange"?: boolean; + /** + * Date is currently highlighted as part of the range + */ + "highlighted"?: boolean; + /** + * Emitted when user selects day + */ + "onCalciteDaySelect"?: (event: CalciteDatePickerDayCustomEvent) => void; + /** + * Emitted when user hovers over a day + */ + "onCalciteInternalDayHover"?: (event: CalciteDatePickerDayCustomEvent) => void; + /** + * When `true`, activates the component's range mode to allow a start and end date. + */ + "range"?: boolean; + /** + * When `true`, highlight styling for edge dates is applied. + */ + "rangeEdge"?: "start" | "end" | undefined; + /** + * Date is being hovered and within the set range + */ + "rangeHover"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * Date is the start of date range + */ + "startOfRange"?: boolean; + /** + * The component's value. + */ + "value"?: Date; + } + interface CalciteDatePickerMonth { + /** + * Date currently active. + */ + "activeDate"?: Date; + /** + * The DateTimeFormat used to provide screen reader labels. + */ + "dateTimeFormat"?: Intl.DateTimeFormat; + /** + * End date currently active + */ + "endDate"?: Date; + /** + * The range of dates currently being hovered + */ + "hoverRange"?: HoverRange; + /** + * CLDR locale data for current locale + */ + "localeData"?: DateLocaleData; + /** + * Specifies the latest allowed date (`"yyyy-mm-dd"`). + */ + "max"?: Date; + /** + * Specifies the earliest allowed date (`"yyyy-mm-dd"`). + */ + "min"?: Date; + /** + * Active date for the user keyboard access. + */ + "onCalciteInternalDatePickerActiveDateChange"?: (event: CalciteDatePickerMonthCustomEvent) => void; + /** + * Event emitted when user hovers the date. + */ + "onCalciteInternalDatePickerHover"?: (event: CalciteDatePickerMonthCustomEvent) => void; + "onCalciteInternalDatePickerMouseOut"?: (event: CalciteDatePickerMonthCustomEvent) => void; + /** + * Event emitted when user selects the date. + */ + "onCalciteInternalDatePickerSelect"?: (event: CalciteDatePickerMonthCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "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; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * CLDR locale data for translated calendar info + */ + "localeData"?: DateLocaleData; + /** + * Specifies the latest allowed date (`"yyyy-mm-dd"`). + */ + "max"?: Date; + /** + * This property specifies accessible strings for the component's previous month button ,next month button & year input elements. Made into a prop for testing purposes only. + * @readonly + */ + "messages"?: DatePickerMessages; + /** + * Specifies the earliest allowed date (`"yyyy-mm-dd"`). + */ + "min"?: Date; + /** + * Changes to active date + */ + "onCalciteInternalDatePickerSelect"?: (event: CalciteDatePickerMonthHeaderCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Already selected date. + */ + "selectedDate"?: Date; + } + interface CalciteDropdown { + /** + * When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close. + */ + "closeOnSelectDisabled"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: EffectivePlacement[]; + /** + * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. + */ + "maxItems"?: number; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteDropdownBeforeClose"?: (event: CalciteDropdownCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteDropdownBeforeOpen"?: (event: CalciteDropdownCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteDropdownClose"?: (event: CalciteDropdownCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteDropdownOpen"?: (event: CalciteDropdownCustomEvent) => void; + /** + * Fires when a `calcite-dropdown-item`'s selection changes. + */ + "onCalciteDropdownSelect"?: (event: CalciteDropdownCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-start" + */ + "placement"?: MenuPlacement; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteDropdownItemElement[]; + /** + * Specifies the action to open the component from the container element. + */ + "type"?: "hover" | "click"; + /** + * Specifies the width of the component. + */ + "widthScale"?: Scale; + } + interface CalciteDropdownGroup { + /** + * Specifies and displays a group title. + */ + "groupTitle"?: string; + "onCalciteInternalDropdownItemChange"?: (event: CalciteDropdownGroupCustomEvent) => void; + /** + * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`. + */ + "scale"?: Scale; + /** + * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. + */ + "selectionMode"?: Extract<"none" | "single" | "multiple", SelectionMode>; + } + interface CalciteDropdownItem { + /** + * Specifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor. + */ + "href"?: string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Fires when the component is selected. + */ + "onCalciteDropdownItemSelect"?: (event: CalciteDropdownItemCustomEvent) => void; + "onCalciteInternalDropdownCloseRequest"?: (event: CalciteDropdownItemCustomEvent) => void; + "onCalciteInternalDropdownItemKeyEvent"?: (event: CalciteDropdownItemCustomEvent) => void; + "onCalciteInternalDropdownItemSelect"?: (event: CalciteDropdownItemCustomEvent) => void; + /** + * Specifies the relationship to the linked document defined in `href`. + */ + "rel"?: string; + /** + * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`. + */ + "scale"?: Scale; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection. + */ + "selectionMode"?: Extract<"none" | "single" | "multiple", SelectionMode>; + /** + * Specifies the frame or window to open the linked document. + */ + "target"?: string; + } + interface CalciteFab { + /** + * Specifies the appearance style of the component. + */ + "appearance"?: Extract<"solid" | "outline-fill", Appearance>; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies an icon to display. + * @default "plus" + */ + "icon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the kind of the component (will apply to border and background). + */ + "kind"?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies text to accompany the component's icon. + */ + "text"?: string; + /** + * When `true`, displays the `text` value in the component. + */ + "textEnabled"?: boolean; + } + interface CalciteFilter { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The component's resulting items after filtering. + * @readonly + */ + "filteredItems"?: object[]; + /** + * Defines the items to filter. The component uses the values 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 needed to conduct filtering. + */ + "items"?: object[]; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: FilterMessages; + /** + * This event fires when the filter text changes. + */ + "onCalciteFilterChange"?: (event: CalciteFilterCustomEvent) => void; + /** + * Specifies placeholder text for the input element. + */ + "placeholder"?: string; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * The component's value. + */ + "value"?: string; + } + interface CalciteFlow { + /** + * This property enables the component to consider other custom elements implementing flow-item's interface. + */ + "customItemSelectors"?: string; + } + interface CalciteFlowItem { + /** + * When provided, the method will be called before it is removed from its parent `calcite-flow`. + */ + "beforeBack"?: () => Promise; + /** + * When `true`, displays a close button in the trailing side of the component's header. + */ + "closable"?: boolean; + /** + * When `true`, the component will be hidden. + */ + "closed"?: boolean; + /** + * Specifies the direction of the collapse. + */ + "collapseDirection"?: "down" | "up"; + /** + * When `true`, hides the component's content area. + */ + "collapsed"?: boolean; + /** + * When `true`, the component is collapsible. + */ + "collapsible"?: boolean; + /** + * A description for the component. + */ + "description"?: string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The component header text. + */ + "heading"?: string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * When `true`, the action menu items in the `header-menu-actions` slot are open. + */ + "menuOpen"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: FlowItemMessages; + /** + * Fires when the back button is clicked. + */ + "onCalciteFlowItemBack"?: (event: CalciteFlowItemCustomEvent) => void; + /** + * Fires when the close button is clicked. + */ + "onCalciteFlowItemClose"?: (event: CalciteFlowItemCustomEvent) => void; + /** + * Fires when the content is scrolled. + */ + "onCalciteFlowItemScroll"?: (event: CalciteFlowItemCustomEvent) => void; + /** + * Fires when the collapse button is clicked. + */ + "onCalciteFlowItemToggle"?: (event: CalciteFlowItemCustomEvent) => void; + /** + * When `true`, displays a back button in the component's header. + */ + "showBackButton"?: boolean; + } + 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; + /** + * Value for the button title attribute + */ + "dragHandle"?: string; + "label"?: string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: HandleMessages; + /** + * Emitted when the handle is activated and the up or down arrow key is pressed. + */ + "onCalciteHandleNudge"?: (event: CalciteHandleCustomEvent) => void; + /** + * Emitted when the handle is activated or deactivated. + */ + "onCalciteInternalHandleChange"?: (event: CalciteHandleCustomEvent) => void; + "setPosition"?: number; + "setSize"?: number; + } + interface CalciteIcon { + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "flipRtl"?: boolean; + /** + * Displays a specific icon. + * @see [Icons](https://esri.github.io/calcite-ui-icons) + */ + "icon"?: string; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Accessible name for the component. It is recommended to set this value if your icon is semantic. + */ + "textLabel"?: string; + } + interface CalciteInlineEditable { + /** + * Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. + */ + "afterConfirm"?: () => Promise; + /** + * When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. + */ + "controls"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, inline editing is enabled on the component. + */ + "editingEnabled"?: boolean; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: InlineEditableMessages; + /** + * Emits when the component's "cancel editing" button is pressed. + */ + "onCalciteInlineEditableEditCancel"?: (event: CalciteInlineEditableCustomEvent) => void; + /** + * Emits when the component's "confirm edits" button is pressed. + */ + "onCalciteInlineEditableEditConfirm"?: (event: CalciteInlineEditableCustomEvent) => void; + "onCalciteInternalInlineEditableEnableEditingChange"?: (event: CalciteInlineEditableCustomEvent) => void; + /** + * Specifies the size of the 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 { + /** + * Specifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when `type` is "file". Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) + */ + "accept"?: string; + /** + * Specifies the text alignment of the component's value. + */ + "alignment"?: Position; + /** + * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) + */ + "autocomplete"?: string; + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus"?: boolean; + /** + * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type. + */ + "clearable"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled"?: boolean; + "editingEnabled"?: boolean; + /** + * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) + */ + "enterKeyHint"?: string; + /** + * When `type` is `"file"`, specifies the component's selected files. + * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files + */ + "files"?: FileList | undefined; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator"?: boolean; + /** + * When `true`, the component will not be visible. + * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) + */ + "hidden"?: boolean; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon"?: string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + */ + "inputMode"?: string; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * When `true`, uses locale formatting for numbers. + */ + "localeFormat"?: boolean; + /** + * Specifies the maximum value for type "number". + * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) + */ + "max"?: number; + /** + * Specifies the maximum length of text for the component's value. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) + */ + "maxLength"?: number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: InputMessages; + /** + * Specifies the minimum value for `type="number"`. + * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) + */ + "min"?: number; + /** + * Specifies the minimum length of text for the component's value. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) + */ + "minLength"?: number; + /** + * When `true`, the component can accept more than one value. This property only has an effect when `type` is "email" or "file". Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple) + */ + "multiple"?: boolean; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) + */ + "name"?: string; + /** + * Specifies the placement of the buttons for `type="number"`. + */ + "numberButtonType"?: InputPlacement; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires each time a new `value` is typed and committed. + */ + "onCalciteInputChange"?: (event: CalciteInputCustomEvent) => void; + /** + * Fires each time a new `value` is typed. + */ + "onCalciteInputInput"?: (event: CalciteInputCustomEvent) => void; + "onCalciteInternalInputBlur"?: (event: CalciteInputCustomEvent) => void; + "onCalciteInternalInputFocus"?: (event: CalciteInputCustomEvent) => void; + /** + * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) + */ + "pattern"?: string; + /** + * Specifies placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) + */ + "placeholder"?: string; + /** + * Adds text to the start of the component. + */ + "prefixText"?: string; + /** + * When `true`, the component's value can be read, but cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Specifies the granularity the component's `value` must adhere to. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) + */ + "step"?: number | "any"; + /** + * Adds text to the end of the component. + */ + "suffixText"?: string; + /** + * Specifies the component type. Note that the following `type`s 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"; + /** + * The component's value. + */ + "value"?: string; + } + interface CalciteInputDatePicker { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: EffectivePlacement[]; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * Defines the layout of the component. + */ + "layout"?: "horizontal" | "vertical"; + /** + * Specifies the latest allowed date ("yyyy-mm-dd"). + */ + "max"?: string; + /** + * Specifies the latest allowed date as a full date object. + */ + "maxAsDate"?: Date; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: InputDatePickerMessages; + /** + * Specifies the earliest allowed date ("yyyy-mm-dd"). + */ + "min"?: string; + /** + * Specifies the earliest allowed date as a full date object. + */ + "minAsDate"?: Date; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteInputDatePickerBeforeClose"?: (event: CalciteInputDatePickerCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteInputDatePickerBeforeOpen"?: (event: CalciteInputDatePickerCustomEvent) => void; + /** + * Fires when the component's value changes. + */ + "onCalciteInputDatePickerChange"?: (event: CalciteInputDatePickerCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteInputDatePickerClose"?: (event: CalciteInputDatePickerCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteInputDatePickerOpen"?: (event: CalciteInputDatePickerCustomEvent) => void; + /** + * When `true`, displays the `calcite-date-picker` component. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Specifies the placement of the `calcite-date-picker` relative to the component. + * @default "bottom-start" + */ + "placement"?: MenuPlacement; + /** + * When `true`, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range. + */ + "proximitySelectionDisabled"?: boolean; + /** + * When `true`, activates a range for the component. + */ + "range"?: boolean; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: "s" | "m" | "l"; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Selected date as a string in ISO format (YYYY-MM-DD) + */ + "value"?: string | string[]; + /** + * The component's value as a full date object. + */ + "valueAsDate"?: Date | Date[]; + } + interface CalciteInputMessage { + /** + * Specifies an icon to display. + */ + "icon"?: boolean | string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + } + interface CalciteInputNumber { + /** + * Specifies the text alignment of the component's value. + */ + "alignment"?: Position; + /** + * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) + */ + "autocomplete"?: string; + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus"?: boolean; + /** + * When `true`, a clear button is displayed when the component has a value. + */ + "clearable"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled"?: boolean; + "editingEnabled"?: boolean; + /** + * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) + */ + "enterKeyHint"?: string; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator"?: boolean; + /** + * When `true`, the component will not be visible. + * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) + */ + "hidden"?: boolean; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon"?: string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + */ + "inputMode"?: string; + /** + * When `true`, restricts the component to integer numbers only and disables exponential notation. + */ + "integer"?: boolean; + /** + * Accessible name for the component's button or hyperlink. + */ + "label"?: string; + /** + * When `true`, the component is in the loading state and `calcite-progress` is displayed. + */ + "loading"?: boolean; + /** + * Toggles locale formatting for numbers. + */ + "localeFormat"?: boolean; + /** + * Specifies the maximum value. + * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) + */ + "max"?: number; + /** + * Specifies the maximum length of text for the component's value. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) + */ + "maxLength"?: number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: InputNumberMessages; + /** + * Specifies the minimum value. + * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) + */ + "min"?: number; + /** + * Specifies the minimum length of text for the component's value. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) + */ + "minLength"?: number; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) + */ + "name"?: string; + /** + * Specifies the placement of the buttons. + */ + "numberButtonType"?: InputPlacement; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires each time a new value is typed and committed. + */ + "onCalciteInputNumberChange"?: (event: CalciteInputNumberCustomEvent) => void; + /** + * Fires each time a new value is typed. + */ + "onCalciteInputNumberInput"?: (event: CalciteInputNumberCustomEvent) => void; + "onCalciteInternalInputNumberBlur"?: (event: CalciteInputNumberCustomEvent) => void; + "onCalciteInternalInputNumberFocus"?: (event: CalciteInputNumberCustomEvent) => void; + /** + * Specifies placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) + */ + "placeholder"?: string; + /** + * Adds text to the start of the component. + */ + "prefixText"?: string; + /** + * When `true`, the component's value can be read, but cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Specifies the granularity that the component's value must adhere to. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) + */ + "step"?: number | "any"; + /** + * Adds text to the end of the component. + */ + "suffixText"?: string; + /** + * The component's value. + */ + "value"?: string; + } + interface CalciteInputText { + /** + * Specifies the text alignment of the component's value. + */ + "alignment"?: Position; + /** + * Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) + */ + "autocomplete"?: string; + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus"?: boolean; + /** + * When `true`, a clear button is displayed when the component has a value. + */ + "clearable"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled"?: boolean; + "editingEnabled"?: boolean; + /** + * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) + */ + "enterKeyHint"?: string; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * When `true`, the component will not be visible. + * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) + */ + "hidden"?: boolean; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon"?: string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) + */ + "inputMode"?: string; + /** + * Accessible name for the component's button or hyperlink. + */ + "label"?: string; + /** + * When `true`, the component is in the loading state and `calcite-progress` is displayed. + */ + "loading"?: boolean; + /** + * Specifies the maximum length of text for the component's value. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) + */ + "maxLength"?: number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: InputTextMessages; + /** + * Specifies the minimum length of text for the component's value. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) + */ + "minLength"?: number; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) + */ + "name"?: string; + /** + * Fires each time a new value is typed and committed. + */ + "onCalciteInputTextChange"?: (event: CalciteInputTextCustomEvent) => void; + /** + * Fires each time a new value is typed. + */ + "onCalciteInputTextInput"?: (event: CalciteInputTextCustomEvent) => void; + "onCalciteInternalInputTextBlur"?: (event: CalciteInputTextCustomEvent<{ element: HTMLInputElement; value: string }>) => void; + "onCalciteInternalInputTextFocus"?: (event: CalciteInputTextCustomEvent<{ + element: HTMLInputElement; + value: string; + }>) => void; + /** + * Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info. + * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) + */ + "pattern"?: string; + /** + * Specifies placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) + */ + "placeholder"?: string; + /** + * Adds text to the start of the component. + */ + "prefixText"?: string; + /** + * When `true`, the component's value can be read, but cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Adds text to the end of the component. + */ + "suffixText"?: string; + /** + * The component's value. + */ + "value"?: string; + } + interface CalciteInputTimePicker { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: InputTimePickerMessages; + /** + * Specifies the name of the component on form submission. + */ + "name"?: string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteInputTimePickerBeforeClose"?: (event: CalciteInputTimePickerCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteInputTimePickerBeforeOpen"?: (event: CalciteInputTimePickerCustomEvent) => void; + /** + * Fires when the time value is changed as a result of user input. + */ + "onCalciteInputTimePickerChange"?: (event: CalciteInputTimePickerCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteInputTimePickerClose"?: (event: CalciteInputTimePickerCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteInputTimePickerOpen"?: (event: CalciteInputTimePickerCustomEvent) => void; + /** + * When `true`, displays the `calcite-time-picker` component. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the popover will be positioned relative to the input. + */ + "placement"?: LogicalPlacement; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Specifies the granularity the component's `value` must adhere to (in seconds). + */ + "step"?: number; + /** + * The time value in ISO (24-hour) format. + */ + "value"?: string; + } + interface CalciteInputTimeZone { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Specifies the component's maximum number of options to display before displaying a scrollbar. + */ + "maxItems"?: number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: InputTimeZoneMessages; + /** + * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related + * @default "offset" + */ + "mode"?: TimeZoneMode; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + "onCalciteInputTimeZoneBeforeClose"?: (event: CalciteInputTimeZoneCustomEvent) => void; + "onCalciteInputTimeZoneBeforeOpen"?: (event: CalciteInputTimeZoneCustomEvent) => void; + "onCalciteInputTimeZoneChange"?: (event: CalciteInputTimeZoneCustomEvent) => void; + "onCalciteInputTimeZoneClose"?: (event: CalciteInputTimeZoneCustomEvent) => void; + "onCalciteInputTimeZoneOpen"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format (YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS.SSSZ) + * @see [Date.prototype.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) + */ + "referenceDate"?: Date | string; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. + * @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC. + */ + "value"?: string; + } + interface CalciteLabel { + /** + * Specifies the text alignment of the component. + */ + "alignment"?: Alignment; + /** + * Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. + */ + "for"?: string; + /** + * Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. + */ + "layout"?: "inline" | "inline-space-between" | "default"; + "onCalciteInternalLabelClick"?: (event: CalciteLabelCustomEvent<{ + sourceEvent: MouseEvent; + }>) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + } + interface CalciteLink { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download. + */ + "download"?: string | boolean; + /** + * Specifies the URL of the linked resource, which can be set as an absolute or relative path. + */ + "href"?: string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + /** + * Specifies the relationship to the linked document defined in `href`. + */ + "rel"?: string; + /** + * Specifies the frame or window to open the linked document. + */ + "target"?: string; + } /** - * When `true`, prevents the content of the component from user interaction. - */ - nonInteractive?: boolean; + * A general purpose list that enables users to construct list items that conform to Calcite styling. + */ + interface CalciteList { + /** + * When provided, the method will be called to determine whether the element can move from the list. + */ + "canPull"?: (detail: ListDragDetail) => boolean; + /** + * When provided, the method will be called to determine whether the element can be added from another list. + */ + "canPut"?: (detail: ListDragDetail) => boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, `calcite-list-item`s are sortable via a draggable button. + */ + "dragEnabled"?: boolean; + /** + * When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. + */ + "filterEnabled"?: boolean; + /** + * Placeholder text for the component's filter input field. + */ + "filterPlaceholder"?: string; + /** + * Text for the component's filter input field. + */ + "filterText"?: string; + /** + * The currently filtered `calcite-list-item` data. + * @readonly + */ + "filteredData"?: ItemData; + /** + * The currently filtered `calcite-list-item`s. + * @readonly + */ + "filteredItems"?: HTMLCalciteListItemElement[]; + /** + * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. + */ + "group"?: string; + /** + * Specifies an accessible name for the component. + */ + "label"?: string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Emitted when the default slot has changes in order to notify parent lists. + */ + "onCalciteInternalListDefaultSlotChange"?: (event: CalciteListCustomEvent) => void; + /** + * Emits when any of the list item selections have changed. + */ + "onCalciteListChange"?: (event: CalciteListCustomEvent) => void; + /** + * Emits when the component's filter has changed. + */ + "onCalciteListFilter"?: (event: CalciteListCustomEvent) => void; + /** + * Emitted when the order of the list has changed. + */ + "onCalciteListOrderChange"?: (event: CalciteListCustomEvent) => void; + /** + * One of the items within the list can be opened. + */ + "openable"?: boolean; + /** + * The currently selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteListItemElement[]; + /** + * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). + */ + "selectionAppearance"?: SelectionAppearance; + /** + * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + */ + "selectionMode"?: Extract< + "none" | "multiple" | "single" | "single-persist", + SelectionMode + >; + } + interface CalciteListItem { + /** + * Sets the item as focusable. Only one item should be focusable within a list. + */ + "active"?: boolean; + /** + * When `true`, a close button is added to the component. + */ + "closable"?: boolean; + /** + * When `true`, hides the component. + */ + "closed"?: boolean; + /** + * A description for the component. Displays below the label text. + */ + "description"?: string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, the component displays a draggable button. + */ + "dragHandle"?: boolean; + /** + * The label text of the component. Displays above the description text. + */ + "label"?: string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ListItemMessages; + /** + * Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. + */ + "metadata"?: Record; + "onCalciteInternalFocusPreviousItem"?: (event: CalciteListItemCustomEvent) => void; + "onCalciteInternalListItemActive"?: (event: CalciteListItemCustomEvent) => void; + "onCalciteInternalListItemChange"?: (event: CalciteListItemCustomEvent) => void; + "onCalciteInternalListItemSelect"?: (event: CalciteListItemCustomEvent) => void; + /** + * Fires when the close button is clicked. + */ + "onCalciteListItemClose"?: (event: CalciteListItemCustomEvent) => void; + /** + * Emits when the item's content is selected. + */ + "onCalciteListItemSelect"?: (event: CalciteListItemCustomEvent) => void; + /** + * When `true`, the item is open to show child components. + */ + "open"?: boolean; + /** + * When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. + */ + "selected"?: boolean; + /** + * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). + */ + "selectionAppearance"?: SelectionAppearance; + /** + * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + */ + "selectionMode"?: Extract< + "none" | "multiple" | "single" | "single-persist", + SelectionMode + >; + /** + * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility. + */ + "setPosition"?: number; + /** + * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility. + */ + "setSize"?: number; + /** + * The component's value. + */ + "value"?: any; + } + interface CalciteListItemGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The header text for all nested `calcite-list-item` rows. + */ + "heading"?: string; + /** + * Emitted when the default slot has changes in order to notify parent lists. + */ + "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; + } + interface CalciteLoader { + /** + * When `true`, displays smaller and appears to the left of the text. + */ + "inline"?: boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Text that displays under the component's indicator. + */ + "text"?: string; + /** + * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. + */ + "type"?: "indeterminate" | "determinate"; + /** + * The component's value. Valid only for `"determinate"` indicators. Percent complete of 100. + */ + "value"?: number; + } + interface CalciteMenu { + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the layout of the component. + */ + "layout"?: Layout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only. + */ + "messages"?: MenuMessages; + } + interface CalciteMenuItem { + /** + * When `true`, the component is highlighted. + */ + "active"?: boolean; + /** + * When `true`, the component displays a breadcrumb trail for use as a navigational aid. + */ + "breadcrumb"?: boolean; + /** + * Specifies the URL destination of the component, which can be set as an absolute or relative path. + */ + "href"?: string; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + "isTopLevelItem"?: boolean; + /** + * Accessible name for the component. + */ + "label": string; + "layout"?: Layout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only. + */ + "messages"?: MenuItemMessages; + "onCalciteInternalMenuItemKeyEvent"?: (event: CalciteMenuItemCustomEvent) => void; + /** + * Emits when the component is selected. + */ + "onCalciteMenuItemSelect"?: (event: CalciteMenuItemCustomEvent) => void; + /** + * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu. + */ + "open"?: boolean; + /** + * Defines the relationship between the `href` value and the current document. + * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) + */ + "rel"?: string; + /** + * Specifies where to open the linked document defined in the `href` property. + * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) + */ + "target"?: string; + /** + * Specifies the text to display. + */ + "text"?: string; + "topLevelMenuLayout"?: Layout; + } + interface CalciteMeter { + /** + * Specifies the appearance style of the component. + */ + "appearance"?: Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. + */ + "fillType"?: "single" | "range"; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator"?: boolean; + /** + * Specifies a high value. When `fillType` is `"range"`, displays a different color when above the specified threshold. + */ + "high"?: number; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies a low value. When `fillType` is `"range"`, displays a different color when above the specified threshold. + */ + "low"?: number; + /** + * Specifies the highest allowed value of the component. + */ + "max"?: number; + /** + * Specifies the lowest allowed value of the component. + */ + "min"?: number; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * When either `rangeLabels` is `true`, specifies the format of displayed labels. + */ + "rangeLabelType"?: MeterLabelType; + /** + * When `true`, displays the values of `high`, `low`, `min`, and `max`. + */ + "rangeLabels"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + */ + "unitLabel"?: string; + /** + * Specifies the current value of the component. + */ + "value"?: number; + /** + * When `true`, displays the current value. + */ + "valueLabel"?: boolean; + /** + * When either `valueLabel` is `true`, specifies the format of displayed label. + */ + "valueLabelType"?: MeterLabelType; + } + interface CalciteModal { + /** + * Passes a function to run before the component closes. + */ + "beforeClose"?: (el: HTMLCalciteModalElement) => Promise; + /** + * When `true`, disables the component's close button. + */ + "closeButtonDisabled"?: boolean; + /** + * When `true`, prevents the component from expanding to the entire screen on mobile devices. + */ + "docked"?: boolean; + /** + * When `true`, disables the default close on escape behavior. + */ + "escapeDisabled"?: boolean; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled"?: boolean; + /** + * Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). + */ + "fullscreen"?: boolean; + /** + * Specifies the kind of the component (will apply to top border). + */ + "kind"?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ModalMessages; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteModalBeforeClose"?: (event: CalciteModalCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteModalBeforeOpen"?: (event: CalciteModalCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteModalClose"?: (event: CalciteModalCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteModalOpen"?: (event: CalciteModalCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is. + */ + "opened"?: boolean; + /** + * When `true`, disables the closing of the component when clicked outside. + */ + "outsideCloseDisabled"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "slottedInShell"?: boolean; + /** + * Specifies the width of the component. + */ + "widthScale"?: Scale; + } + interface CalciteNavigation { + /** + * When `navigationAction` is `true`, specifies the label of the `calcite-action`. + */ + "label"?: string; + /** + * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change. + */ + "navigationAction"?: boolean; + /** + * When `navigationAction` is true, emits when the displayed action selection changes. + */ + "onCalciteNavigationActionSelect"?: (event: CalciteNavigationCustomEvent) => void; + } + interface CalciteNavigationLogo { + /** + * When true, the component is highlighted. + */ + "active"?: boolean; + /** + * A description for the component, which displays below the `heading`. + */ + "description"?: string; + /** + * Specifies heading text for the component, such as a product or organization name. + */ + "heading"?: string; + /** + * Specifies the URL destination of the component, which can be set as an absolute or relative path. + */ + "href"?: string; + /** + * Specifies an icon to display. + */ + "icon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. + */ + "label"?: string; + /** + * Defines the relationship between the `href` value and the current document. + * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) + */ + "rel"?: string; + /** + * Specifies where to open the linked document defined in the `href` property. + * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) + */ + "target"?: string; + /** + * Specifies the `src` to an image. + */ + "thumbnail"?: string; + } + interface CalciteNavigationUser { + /** + * When true, the component is highlighted. + */ + "active"?: boolean; + /** + * Specifies the full name of the user. + */ + "fullName"?: string; + /** + * Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. + */ + "label"?: string; + /** + * When `true`, hides the `fullName` and `username` contents. + */ + "textDisabled"?: boolean; + /** + * Specifies the `src` to an image (remember to add a token if the user is private). + */ + "thumbnail"?: string; + /** + * Specifies the unique id of the user. + */ + "userId"?: string; + /** + * Specifies the username of the user. + */ + "username"?: string; + } + interface CalciteNotice { + /** + * When `true`, a close button is added to the component. + */ + "closable"?: boolean; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon"?: string | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the kind of the component (will apply to top border and icon). + */ + "kind"?: Extract< + "brand" | "danger" | "info" | "success" | "warning", + Kind + >; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: NoticeMessages; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteNoticeBeforeClose"?: (event: CalciteNoticeCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteNoticeBeforeOpen"?: (event: CalciteNoticeCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteNoticeClose"?: (event: CalciteNoticeCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteNoticeOpen"?: (event: CalciteNoticeCustomEvent) => void; + /** + * When `true`, the component is visible. + */ + "open"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the width of the component. + */ + "width"?: Width; + } + interface CalciteOption { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Accessible name for the component. + */ + "label"?: string; + "onCalciteInternalOptionChange"?: (event: CalciteOptionCustomEvent) => void; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * The component's value. + */ + "value"?: any; + } + interface CalciteOptionGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Accessible name for the component. + */ + "label": string; + "onCalciteInternalOptionGroupChange"?: (event: CalciteOptionGroupCustomEvent) => void; + } + interface CalcitePagination { + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: PaginationMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Emits when the selected page changes. + */ + "onCalcitePaginationChange"?: (event: CalcitePaginationCustomEvent) => void; + /** + * Specifies the number of items per page. + */ + "pageSize"?: number; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the starting item number. + */ + "startItem"?: number; + /** + * Specifies the total number of items. + */ + "totalItems"?: number; + } + interface CalcitePanel { + /** + * When `true`, displays a close button in the trailing side of the header. + */ + "closable"?: boolean; + /** + * When `true`, the component will be hidden. + */ + "closed"?: boolean; + /** + * Specifies the direction of the collapse. + */ + "collapseDirection"?: "down" | "up"; + /** + * When `true`, hides the component's content area. + */ + "collapsed"?: boolean; + /** + * When `true`, the component is collapsible. + */ + "collapsible"?: boolean; + /** + * A description for the component. + */ + "description"?: string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The component header text. + */ + "heading"?: string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * When `true`, the action menu items in the `header-menu-actions` slot are open. + */ + "menuOpen"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: PanelMessages; + /** + * Fires when the close button is clicked. + */ + "onCalcitePanelClose"?: (event: CalcitePanelCustomEvent) => void; + /** + * Fires when the content is scrolled. + */ + "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent) => void; + /** + * Fires when the collapse button is clicked. + */ + "onCalcitePanelToggle"?: (event: CalcitePanelCustomEvent) => void; + } /** - * Fires when the component is selected or unselected. - */ - onCalciteListItemChange?: ( - event: CalciteValueListItemCustomEvent<{ - item: HTMLCalciteValueListItemElement; - value: any; - selected: boolean; - shiftPressed: boolean; - }> - ) => void; + * @deprecated Use the `list` component instead. + */ + interface CalcitePickList { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "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; + /** + * Text for the filter input field. + */ + "filterText"?: string; + /** + * The currently filtered data. + * @readonly + */ + "filteredData"?: ItemData1; + /** + * The currently filtered items. + * @readonly + */ + "filteredItems"?: HTMLCalcitePickListItemElement[]; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-pick-list-item`s at a time. When `false`, only a single `calcite-pick-list-item` can be selected at a time, and a new selection will deselect previous selections. + */ + "multiple"?: boolean; + /** + * Emits when any of the `calcite-pick-list-item` selections have changed. + */ + "onCalciteListChange"?: (event: CalcitePickListCustomEvent>) => void; + /** + * Emits when a filter has changed. + */ + "onCalciteListFilter"?: (event: CalcitePickListCustomEvent) => void; + /** + * When `true` and single selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard. + */ + "selectionFollowsFocus"?: boolean; + } /** - * Fires when the remove button is pressed. - */ - onCalciteListItemRemove?: (event: CalciteValueListItemCustomEvent) => void; - onCalciteValueListItemDragHandleBlur?: (event: CalciteValueListItemCustomEvent) => void; + * @deprecated Use the `list` component instead. + */ + interface CalcitePickListGroup { + /** + * Specifies the title for all nested `calcite-pick-list-item`s. + */ + "groupTitle"?: string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + } /** - * When `true`, adds an action to remove the component. - */ - removable?: boolean; + * @deprecated Use the `list` component instead. + */ + interface CalcitePickListItem { + /** + * A description for the component that displays below the label text. + */ + "description"?: string; + /** + * When `false`, the component cannot be deselected by user interaction. + */ + "deselectDisabled"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. + * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) + */ + "icon"?: ICON_TYPES | null; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Label and accessible name for the component. Appears next to the icon. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: PickListItemMessages; + /** + * Provides additional metadata to the component. Primary use is for a filter on the parent list. + */ + "metadata"?: Record; + "nonInteractive"?: boolean; + /** + * Emits when the component's label, description, value, or metadata properties are modified. + */ + "onCalciteInternalListItemPropsChange"?: (event: CalcitePickListItemCustomEvent) => void; + /** + * Emits when the component's value property is modified. + */ + "onCalciteInternalListItemValueChange"?: (event: CalcitePickListItemCustomEvent<{ + oldValue: any; + newValue: any; + }>) => void; + /** + * Fires when the component is selected or unselected. + */ + "onCalciteListItemChange"?: (event: CalcitePickListItemCustomEvent<{ + item: HTMLCalcitePickListItemElement; + value: any; + selected: boolean; + shiftPressed: boolean; + }>) => void; + /** + * Fires when the remove button is pressed. + */ + "onCalciteListItemRemove"?: (event: CalcitePickListItemCustomEvent) => void; + /** + * When `true`, displays a remove action that removes the item from the list. + */ + "removable"?: boolean; + /** + * When `true`, selects an item. Toggles when an item is checked/unchecked. + */ + "selected"?: boolean; + /** + * The component's value. + */ + "value": any; + } + interface CalcitePopover { + /** + * When `true`, clicking outside of the component automatically closes open `calcite-popover`s. + */ + "autoClose"?: boolean; + /** + * When `true`, display a close button within the component. + */ + "closable"?: boolean; + /** + * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. + */ + "flipDisabled"?: boolean; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: EffectivePlacement[]; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled"?: boolean; + /** + * The component header text. + */ + "heading"?: string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: PopoverMessages; + /** + * Offsets the position of the popover away from the `referenceElement`. + * @default 6 + */ + "offsetDistance"?: number; + /** + * Offsets the position of the component along the `referenceElement`. + */ + "offsetSkidding"?: number; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalcitePopoverBeforeClose"?: (event: CalcitePopoverCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalcitePopoverBeforeOpen"?: (event: CalcitePopoverCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalcitePopoverClose"?: (event: CalcitePopoverCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalcitePopoverOpen"?: (event: CalcitePopoverCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the component will be positioned relative to the `referenceElement`. + */ + "placement"?: LogicalPlacement; + /** + * When `true`, removes the caret pointer. + */ + "pointerDisabled"?: boolean; + /** + * The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used. + */ + "referenceElement": ReferenceElement | string; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to `true` to manage when the component is open. + */ + "triggerDisabled"?: boolean; + } + interface CalciteProgress { + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * When `true` and for `"indeterminate"` progress bars, reverses the animation direction. + */ + "reversed"?: boolean; + /** + * Text that displays under the component's indicator. + */ + "text"?: string; + /** + * Specifies the component type. Use `"indeterminate"` if finding actual progress value is impossible. + */ + "type"?: "indeterminate" | "determinate"; + /** + * When `type` is `"determinate"`, the component's progress value with a range of 0.0 - 1.0. + */ + "value"?: number; + } + interface CalciteRadioButton { + /** + * When `true`, the component is checked. + */ + "checked"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The focused state of the component. + */ + "focused"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * The `id` of the component. When omitted, a globally unique identifier is used. + */ + "guid"?: string; + /** + * When `true`, the component is not displayed and is not focusable or checkable. + */ + "hidden"?: boolean; + /** + * The hovered state of the component. + */ + "hovered"?: boolean; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Specifies the name of the component. Can be inherited from `calcite-radio-button-group`. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Fires when the radio button is blurred. + */ + "onCalciteInternalRadioButtonBlur"?: (event: CalciteRadioButtonCustomEvent) => void; + /** + * Fires when the checked property changes. This is an internal event used for styling purposes only. Use calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms. + */ + "onCalciteInternalRadioButtonCheckedChange"?: (event: CalciteRadioButtonCustomEvent) => void; + /** + * Fires when the radio button is focused. + */ + "onCalciteInternalRadioButtonFocus"?: (event: CalciteRadioButtonCustomEvent) => void; + /** + * 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: CalciteRadioButtonCustomEvent) => void; + /** + * When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component inherited from the `calcite-radio-button-group`. + */ + "scale"?: Scale; + /** + * The component's value. + */ + "value": any; + } + interface CalciteRadioButtonGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. + */ + "hidden"?: boolean; + /** + * Defines the layout of the component. + */ + "layout"?: Layout; + /** + * Specifies the name of the component on form submission. Must be unique to other component instances. + */ + "name": string; + /** + * Fires when the component has changed. + */ + "onCalciteRadioButtonGroupChange"?: (event: CalciteRadioButtonGroupCustomEvent) => void; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the component's selected item. + * @readonly + */ + "selectedItem"?: HTMLCalciteRadioButtonElement; + } + interface CalciteRating { + /** + * Specifies a cumulative average from previous ratings to display. + */ + "average"?: number; + /** + * Specifies the number of previous ratings to display. + */ + "count"?: number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: RatingMessages; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Fires when the component's value changes. + */ + "onCalciteRatingChange"?: (event: CalciteRatingCustomEvent) => void; + /** + * When `true`, the component's value can be read, but cannot be modified. + */ + "readOnly"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. + */ + "showChip"?: boolean; + /** + * The component's value. + */ + "value"?: number; + } + interface CalciteScrim { + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ScrimMessages; + } + interface CalciteSegmentedControl { + /** + * Specifies the appearance style of the component. + */ + "appearance"?: Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Defines the layout of the component. + */ + "layout"?: Extract<"horizontal" | "vertical", Layout>; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Fires when the `calcite-segmented-control-item` selection changes. + */ + "onCalciteSegmentedControlChange"?: (event: CalciteSegmentedControlCustomEvent) => void; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * The component's selected item `HTMLElement`. + * @readonly + */ + "selectedItem"?: HTMLCalciteSegmentedControlItemElement; + /** + * The component's `selectedItem` value. + */ + "value"?: string; + /** + * Specifies the width of the component. + */ + "width"?: Extract<"auto" | "full", Width>; + } + interface CalciteSegmentedControlItem { + /** + * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`. + */ + "appearance"?: Extract<"outline" | "outline-fill" | "solid", Appearance>; + /** + * When `true`, the component is checked. + */ + "checked"?: boolean; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + /** + * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. + */ + "layout"?: Layout; + /** + * Fires when the item has been selected. + */ + "onCalciteInternalSegmentedControlItemChange"?: (event: CalciteSegmentedControlItemCustomEvent) => void; + /** + * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`. + */ + "scale"?: Scale; + /** + * The component's value. + */ + "value"?: any | null; + } + interface CalciteSelect { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Fires when the `selectedOption` changes. + */ + "onCalciteSelectChange"?: (event: CalciteSelectCustomEvent) => void; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * The component's selected option `HTMLElement`. + * @readonly + */ + "selectedOption"?: HTMLCalciteOptionElement; + /** + * The component's `selectedOption` value. + */ + "value"?: string; + /** + * Specifies the width of the component. + */ + "width"?: Width; + } + interface CalciteSheet { + /** + * Passes a function to run before the component closes. + * @returns + */ + "beforeClose"?: (el: HTMLCalciteSheetElement) => Promise; + /** + * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content). + */ + "displayMode"?: DisplayMode; + /** + * When `true`, disables the default close on escape behavior. + */ + "escapeDisabled"?: boolean; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled"?: boolean; + /** + * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component. + */ + "heightScale"?: Scale; + /** + * Specifies the label of the component. + */ + "label": string; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteSheetBeforeClose"?: (event: CalciteSheetCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteSheetBeforeOpen"?: (event: CalciteSheetCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteSheetClose"?: (event: CalciteSheetCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteSheetOpen"?: (event: CalciteSheetCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is . + */ + "opened"?: boolean; + /** + * When `true`, disables the closing of the component when clicked outside. + */ + "outsideCloseDisabled"?: boolean; + /** + * Determines where the component will be positioned. + */ + "position"?: LogicalFlowPosition; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "slottedInShell"?: boolean; + /** + * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. + */ + "widthScale"?: Scale; + } + interface CalciteShell { + /** + * Positions the center content behind any `calcite-shell-panel`s. + */ + "contentBehind"?: boolean; + } + interface CalciteShellCenterRow { + /** + * When `true`, the content area displays like a floating panel. + */ + "detached"?: boolean; + /** + * Specifies the maximum height of the component. + */ + "heightScale"?: Scale; + /** + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "position"?: Position; + } + interface CalciteShellPanel { + /** + * When `true`, hides the component's content area. + */ + "collapsed"?: boolean; + /** + * When `true`, the content area displays like a floating panel. + * @deprecated use `displayMode` instead. + */ + "detached"?: boolean; + /** + * When `displayMode` is `float`, specifies the maximum height of the component. + * @deprecated use `heightScale` instead. + */ + "detachedHeightScale"?: Scale; + /** + * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content). + */ + "displayMode"?: DisplayMode1; + /** + * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. + */ + "heightScale"?: Scale; + /** + * The direction of the component. + */ + "layout"?: Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ShellPanelMessages; + /** + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "position"?: Position; + /** + * When `true` and `displayMode` is not `float`, the component's content area is resizable. + */ + "resizable"?: boolean; + /** + * When `layout` is `vertical`, specifies the width of the component. + */ + "widthScale"?: Scale; + } + interface CalciteSlider { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator"?: boolean; + /** + * When `true`, indicates a histogram is present. + */ + "hasHistogram"?: boolean; + /** + * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track. + * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5) + */ + "histogram"?: DataSeries; + /** + * A set of single color stops for a histogram, sorted by offset ascending. + */ + "histogramStops"?: ColorStop[]; + /** + * When `true`, displays label handles with their numeric value. + */ + "labelHandles"?: boolean; + /** + * When `true` and `ticks` is specified, displays label tick marks with their numeric value. + */ + "labelTicks"?: boolean; + /** + * The component's maximum selectable value. + */ + "max"?: number; + /** + * For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. + */ + "maxLabel"?: string; + /** + * For multiple selections, the component's upper value. + */ + "maxValue"?: number; + /** + * The component's minimum selectable value. + */ + "min"?: number; + /** + * Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. + */ + "minLabel"?: string; + /** + * For multiple selections, the component's lower value. + */ + "minValue"?: number; + /** + * When `true`, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. + */ + "mirrored"?: boolean; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires when the thumb is released on the component. **Note:** If you need to constantly listen to the drag event, use `calciteSliderInput` instead. + */ + "onCalciteSliderChange"?: (event: CalciteSliderCustomEvent) => void; + /** + * Fires on all updates to the component. **Note:** Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. + */ + "onCalciteSliderInput"?: (event: CalciteSliderCustomEvent) => void; + /** + * Specifies the interval to move with the page up, or page down keys. + */ + "pageStep"?: number; + /** + * When `true`, sets a finer point for handles. + */ + "precise"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + */ + "required"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * When `true`, enables snap selection in coordination with `step` via a mouse. + */ + "snap"?: boolean; + /** + * Specifies the interval to move with the up, or down keys. + */ + "step"?: number; + /** + * Displays tick marks on the number line at a specified interval. + */ + "ticks"?: number; + /** + * The component's value. + */ + "value"?: null | number | number[]; + } + interface CalciteSortableList { + /** + * When provided, the method will be called to determine whether the element can move from the list. + */ + "canPull"?: (detail: DragDetail) => boolean; + /** + * When provided, the method will be called to determine whether the element can be added from another list. + */ + "canPut"?: (detail: DragDetail) => boolean; + /** + * When true, disabled prevents interaction. This state shows items with lower opacity/grayed. + */ + "disabled"?: boolean; + /** + * Specifies which items inside the element should be draggable. + */ + "dragSelector"?: string; + /** + * The list's group identifier. To drag elements from one list into another, both lists must have the same group value. + */ + "group"?: string; + /** + * The selector for the handle elements. + */ + "handleSelector"?: string; + /** + * Indicates the horizontal or vertical orientation of the component. + */ + "layout"?: Layout; + /** + * When true, content is waiting to be loaded. This state shows a busy indicator. + */ + "loading"?: boolean; + /** + * Emitted when the order of the list has changed. + */ + "onCalciteListOrderChange"?: (event: CalciteSortableListCustomEvent) => void; + } + interface CalciteSplitButton { + /** + * When `true`, the component is active. + */ + "active"?: boolean; + /** + * Specifies the appearance style of the component. + */ + "appearance"?: Extract< + "outline" | "outline-fill" | "solid" | "transparent", + Appearance + >; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies the icon used for the dropdown menu. + */ + "dropdownIconType"?: DropdownIconType; + /** + * Accessible name for the dropdown menu. + */ + "dropdownLabel"?: string; + /** + * Specifies the kind of the component (will apply to border and background if applicable). + */ + "kind"?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; + /** + * When `true`, a busy indicator is displayed on the primary button. + */ + "loading"?: boolean; + /** + * Fires when the primary button is clicked. + */ + "onCalciteSplitButtonPrimaryClick"?: (event: CalciteSplitButtonCustomEvent) => void; + /** + * Fires when the dropdown menu is clicked. + */ + "onCalciteSplitButtonSecondaryClick"?: (event: CalciteSplitButtonCustomEvent) => void; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Specifies an icon to display at the end of the primary button. + */ + "primaryIconEnd"?: string; + /** + * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "primaryIconFlipRtl"?: FlipContext; + /** + * Specifies an icon to display at the start of the primary button. + */ + "primaryIconStart"?: string; + /** + * Accessible name for the primary button. + */ + "primaryLabel"?: string; + /** + * Text displayed in the primary button. + */ + "primaryText"?: string; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the width of the component. + */ + "width"?: Width; + } + interface CalciteStack { + /** + * When `true`, content interaction is prevented and displayed with lower opacity. + */ + "disabled"?: boolean; + } + interface CalciteStepper { + /** + * When `true`, displays a status icon in the `calcite-stepper-item` heading. + */ + "icon"?: boolean; + /** + * Defines the layout of the component. + */ + "layout"?: Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: StepperMessages; + /** + * When `true`, displays the step number in the `calcite-stepper-item` heading. + */ + "numbered"?: boolean; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires when the active `calcite-stepper-item` changes. + */ + "onCalciteInternalStepperItemChange"?: (event: CalciteStepperCustomEvent) => void; + /** + * Fires when the active `calcite-stepper-item` changes. + */ + "onCalciteStepperItemChange"?: (event: CalciteStepperCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the component's selected item. + * @readonly + */ + "selectedItem"?: HTMLCalciteStepperItemElement; + } + interface CalciteStepperItem { + /** + * When `true`, the step has been completed. + */ + "complete"?: boolean; + /** + * A description for the component. Displays below the header text. + */ + "description"?: string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, the component contains an error that requires resolution from the user. + */ + "error"?: boolean; + /** + * The component header text. + */ + "heading"?: string; + /** + * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. + */ + "icon"?: boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`. + */ + "layout"?: Extract<"horizontal" | "vertical", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: StepperItemMessages; + /** + * Specifies if the user is viewing one `stepper-item` at a time. Helps in determining if header region is tabbable. + */ + "multipleViewMode"?: boolean; + /** + * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`. + */ + "numbered"?: boolean; + "numberingSystem"?: NumberingSystem; + "onCalciteInternalStepperItemKeyEvent"?: (event: CalciteStepperItemCustomEvent) => void; + "onCalciteInternalStepperItemRegister"?: (event: CalciteStepperItemCustomEvent) => void; + "onCalciteInternalStepperItemSelect"?: (event: CalciteStepperItemCustomEvent) => void; + "onCalciteInternalUserRequestedStepperItemSelect"?: (event: CalciteStepperItemCustomEvent) => void; + /** + * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`. + */ + "scale"?: Scale; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + } + interface CalciteSwitch { + /** + * When `true`, the component is checked. + */ + "checked"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Fires when the `checked` value has changed. + */ + "onCalciteSwitchChange"?: (event: CalciteSwitchCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * The component's value. + */ + "value"?: any; + } + interface CalciteTab { + "onCalciteInternalTabRegister"?: (event: CalciteTabCustomEvent) => void; + /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + */ + "scale"?: Scale; + /** + * When `true`, the component's contents are selected. Only one tab can be selected within the `calcite-tabs` parent. + */ + "selected"?: boolean; + /** + * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab-title`. + */ + "tab"?: string; + } + interface CalciteTabNav { + "bordered"?: boolean; + "indicatorOffset"?: number; + "indicatorWidth"?: number; + "layout"?: TabLayout; + "onCalciteInternalTabChange"?: (event: CalciteTabNavCustomEvent) => void; + /** + * Emits when the selected `calcite-tab` changes. + */ + "onCalciteTabChange"?: (event: CalciteTabNavCustomEvent) => void; + /** + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. + */ + "position"?: TabPosition; + /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + */ + "scale"?: Scale; + /** + * Specifies the component's selected tab-title. + * @readonly + */ + "selectedTitle"?: HTMLCalciteTabTitleElement; + /** + * Specifies the name when saving selected `calcite-tab` data to `localStorage`. + */ + "storageId"?: string; + /** + * Specifies text to update multiple components to keep in sync if one changes. + */ + "syncId"?: string; + } + interface CalciteTabTitle { + "bordered"?: boolean; + /** + * When `true`, a close button is added to the component. + */ + "closable"?: boolean; + /** + * When `true`, does not display or position the component. + */ + "closed"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: string; + /** + * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + "layout"?: TabLayout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TabTitleMessages; + "onCalciteInternalTabIconChanged"?: (event: CalciteTabTitleCustomEvent) => void; + "onCalciteInternalTabTitleRegister"?: (event: CalciteTabTitleCustomEvent) => void; + /** + * Fires when a `calcite-tab` is selected (`event.details`). + * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/main/src/components/tab/interfaces.ts#L1) + */ + "onCalciteInternalTabsActivate"?: (event: CalciteTabTitleCustomEvent) => void; + /** + * Fires when `calcite-tab` is closed (`event.details`). + * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/main/src/components/tab/interfaces.ts) + */ + "onCalciteInternalTabsClose"?: (event: CalciteTabTitleCustomEvent) => void; + "onCalciteInternalTabsFocusFirst"?: (event: CalciteTabTitleCustomEvent) => void; + "onCalciteInternalTabsFocusLast"?: (event: CalciteTabTitleCustomEvent) => void; + "onCalciteInternalTabsFocusNext"?: (event: CalciteTabTitleCustomEvent) => void; + "onCalciteInternalTabsFocusPrevious"?: (event: CalciteTabTitleCustomEvent) => void; + /** + * Fires when a `calcite-tab` is selected. + */ + "onCalciteTabsActivate"?: (event: CalciteTabTitleCustomEvent) => void; + /** + * Fires when a `calcite-tab` is closed. + */ + "onCalciteTabsClose"?: (event: CalciteTabTitleCustomEvent) => void; + /** + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`. + */ + "position"?: TabPosition; + /** + * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`. + */ + "scale"?: Scale; + /** + * When `true`, the component and its respective `calcite-tab` contents are selected. Only one tab can be selected within the `calcite-tabs` parent. + */ + "selected"?: boolean; + /** + * Specifies a unique name for the component. When specified, use the same value on the `calcite-tab`. + */ + "tab"?: string; + } + interface CalciteTable { + /** + * When `true`, displays borders in the component. + */ + "bordered"?: boolean; + /** + * Specifies an accessible title for the component. + */ + "caption": string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator"?: boolean; + /** + * Specifies the layout of the component. + */ + "layout"?: TableLayout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TableMessages; + /** + * When `true`, displays the position of the row in numeric form. + */ + "numbered"?: boolean; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + "onCalciteInternalTableRowFocusChange"?: (event: CalciteTableCustomEvent) => void; + /** + * Emits when the component's page selection changes. + */ + "onCalciteTablePageChange"?: (event: CalciteTableCustomEvent) => void; + /** + * Emits when the component's selected rows change. + */ + "onCalciteTableSelect"?: (event: CalciteTableCustomEvent) => void; + /** + * Specifies the page size of the component. When `true`, renders `calcite-pagination` + */ + "pageSize"?: number; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteTableRowElement[]; + /** + * Specifies the selection mode of the component. + */ + "selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>; + /** + * When `true`, displays zebra styling in the component. + */ + "zebra"?: boolean; + } + interface CalciteTableCell { + /** + * Specifies the alignment of the component. + */ + "alignment"?: Alignment; + /** + * Specifies the number of columns the component should span. + */ + "colSpan"?: number; + /** + * When true, prevents user interaction. Notes: This prop should use the + */ + "disabled"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TableCellMessages; + "numberCell"?: boolean; + "parentRowIsSelected"?: boolean; + "parentRowPositionLocalized"?: string; + "parentRowType"?: RowType; + "positionInRow"?: number; + "readCellContentsToAT"?: boolean; + /** + * Specifies the number of rows the component should span. + */ + "rowSpan"?: number; + "scale"?: Scale; + "selectionCell"?: boolean; + } + interface CalciteTableHeader { + /** + * Specifies the alignment of the component. + */ + "alignment"?: Alignment; + "bodyRowCount"?: number; + /** + * Specifies the number of columns the component should span. + */ + "colSpan"?: number; + /** + * A description to display beneath heading content. + */ + "description"?: string; + /** + * A heading to display above description content. + */ + "heading"?: string; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TableHeaderMessages; + "numberCell"?: boolean; + "parentRowPosition"?: number; + "parentRowType"?: RowType; + "positionInRow"?: number; + /** + * Specifies the number of rows the component should span. + */ + "rowSpan"?: number; + "scale"?: Scale; + "selectedRowCount"?: number; + "selectedRowCountLocalized"?: string; + "selectionCell"?: boolean; + "selectionMode"?: SelectionMode; + } + interface CalciteTableRow { + "bodyRowCount"?: number; + "cellCount"?: number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + "numbered"?: boolean; + "onCalciteInternalTableRowFocusRequest"?: (event: CalciteTableRowCustomEvent) => void; + /** + * Fires when the selected state of the component changes. + */ + "onCalciteTableRowSelect"?: (event: CalciteTableRowCustomEvent) => void; + "positionAll"?: number; + "positionSection"?: number; + "positionSectionLocalized"?: string; + "readCellContentsToAT"?: boolean; + "rowType"?: RowType; + "scale"?: Scale; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + "selectedRowCount"?: number; + "selectedRowCountLocalized"?: string; + "selectionMode"?: Extract<"multiple" | "single" | "none", SelectionMode>; + } + interface CalciteTabs { + /** + * When `true`, the component will display with a folder style menu. + */ + "bordered"?: boolean; + /** + * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`). + */ + "layout"?: TabLayout; + /** + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. + */ + "position"?: TabPosition; + /** + * Specifies the size of the component, defaults to `m`. + */ + "scale"?: Scale; + } + interface CalciteTextArea { + /** + * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. + * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) + */ + "autofocus"?: boolean; + /** + * Specifies the component's number of columns. + * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols) + */ + "columns"?: number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) + */ + "disabled"?: boolean; + /** + * The ID of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. + */ + "form"?: string; + /** + * When `true`, number values are displayed with a group separator corresponding to the language and country format. + */ + "groupSeparator"?: boolean; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Specifies the maximum number of characters allowed. + * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength) + */ + "maxLength"?: number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TextAreaMessages; + /** + * Specifies the name of the component. + * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name) + */ + "name"?: string; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires each time a new `value` is typed and committed. + */ + "onCalciteTextAreaChange"?: (event: CalciteTextAreaCustomEvent) => void; + /** + * Fires each time a new `value` is typed. + */ + "onCalciteTextAreaInput"?: (event: CalciteTextAreaCustomEvent) => void; + /** + * Specifies the placeholder text for the component. + * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder) + */ + "placeholder"?: string; + /** + * When `true`, the component's `value` can be read, but cannot be modified. + * @readonly + * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) + */ + "readOnly"?: boolean; + /** + * When `true`, the component must have a value in order for the form to submit. + * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required + */ + "required"?: boolean; + /** + * Specifies if the component is resizable. + */ + "resize"?: "both" | "horizontal" | "vertical" | "none"; + /** + * Specifies the component's number of rows. + * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows) + */ + "rows"?: number; + /** + * Specifies the size of the component. + */ + "scale"?: "l" | "m" | "s"; + /** + * The component's value. + */ + "value"?: string; + /** + * Specifies the wrapping mechanism for the text. + * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap) + */ + "wrap"?: "soft" | "hard"; + } + interface CalciteTile { + /** + * When `true`, the component is active. + */ + "active"?: boolean; + /** + * A description for the component, which displays below the heading. + */ + "description"?: string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The component's embed mode. When `true`, renders without a border and padding for use by other components. + */ + "embed"?: boolean; + /** + * The focused state of the component. + */ + "focused"?: boolean; + /** + * The component header text, which displays between the icon and description. + */ + "heading"?: string; + /** + * When `true`, the component is not displayed and is not focusable. + */ + "hidden"?: boolean; + /** + * When embed is `"false"`, the URL for the component. + */ + "href"?: string; + /** + * Specifies an icon to display. + */ + "icon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + } + interface CalciteTileSelect { + /** + * When `true`, the component is checked. + */ + "checked"?: boolean; + /** + * A description for the component, which displays below the heading. + */ + "description"?: string; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * The component header text, which displays between the icon and description. + */ + "heading"?: string; + /** + * When `true`, the component is not displayed and is not focusable or checkable. + */ + "hidden"?: boolean; + /** + * Specifies an icon to display. + */ + "icon"?: string; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. + */ + "inputAlignment"?: Extract<"end" | "start", Alignment>; + /** + * When `true`, displays an interactive input based on the `type` property. + */ + "inputEnabled"?: boolean; + /** + * Specifies the name of the component on form submission. + */ + "name"?: any; + /** + * Emits a custom change event. For checkboxes it emits when checked or unchecked. For radios it only emits when checked. + */ + "onCalciteTileSelectChange"?: (event: CalciteTileSelectCustomEvent) => void; + /** + * The selection mode of the component. Use radio for single selection, and checkbox for multiple selections. + */ + "type"?: TileSelectType; + /** + * The component's value. + */ + "value"?: any; + /** + * Specifies the width of the component. + */ + "width"?: Extract<"auto" | "full", Width>; + } + interface CalciteTileSelectGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. + */ + "layout"?: TileSelectGroupLayout; + } + interface CalciteTimePicker { + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TimePickerMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + "onCalciteInternalTimePickerBlur"?: (event: CalciteTimePickerCustomEvent) => void; + "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent) => void; + "onCalciteInternalTimePickerFocus"?: (event: CalciteTimePickerCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the granularity the `value` must adhere to (in seconds). + */ + "step"?: number; + /** + * The component's value in UTC (always 24-hour format). + */ + "value"?: string; + } + interface CalciteTip { + /** + * When `true`, the close button is not present on the component. + */ + "closeDisabled"?: boolean; + /** + * When `true`, the component does not display. + */ + "closed"?: boolean; + /** + * The component header text. + */ + "heading"?: string; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TipMessages; + /** + * Emits when the component has been closed. + */ + "onCalciteTipDismiss"?: (event: CalciteTipCustomEvent) => void; + /** + * When `true`, the component is selected if it has a parent `calcite-tip-manager`. Only one tip can be selected within the `calcite-tip-manager` parent. + */ + "selected"?: boolean; + } + interface CalciteTipGroup { + /** + * The component header text for all nested `calcite-tip`s. + */ + "groupTitle"?: string; + } + interface CalciteTipManager { + /** + * When `true`, does not display or position the component. + */ + "closed"?: boolean; + /** + * Specifies the number at which section headings should start. + */ + "headingLevel"?: HeadingLevel; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: TipManagerMessages; + /** + * Emits when the component has been closed. + */ + "onCalciteTipManagerClose"?: (event: CalciteTipManagerCustomEvent) => void; + } + interface CalciteTooltip { + /** + * Closes the component when the `referenceElement` is clicked. + */ + "closeOnClick"?: boolean; + /** + * Accessible name for the component. + * @deprecated No longer necessary. Overrides the context of the component's description, which could confuse assistive technology users. + */ + "label"?: string; + /** + * Offset the position of the component away from the `referenceElement`. + * @default 6 + */ + "offsetDistance"?: number; + /** + * Offset the position of the component along the `referenceElement`. + */ + "offsetSkidding"?: number; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteTooltipBeforeClose"?: (event: CalciteTooltipCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteTooltipBeforeOpen"?: (event: CalciteTooltipCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteTooltipClose"?: (event: CalciteTooltipCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteTooltipOpen"?: (event: CalciteTooltipCustomEvent) => void; + /** + * When `true`, the component is open. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the component will be positioned relative to the `referenceElement`. + */ + "placement"?: LogicalPlacement; + /** + * The `referenceElement` to position the component according to its `"placement"` value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used. + */ + "referenceElement"?: ReferenceElement | string; + } + interface CalciteTree { + "child"?: boolean; + /** + * Displays indentation guide lines. + */ + "lines"?: boolean; + /** + * Fires when the user selects/deselects `calcite-tree-items`. + */ + "onCalciteTreeSelect"?: (event: CalciteTreeCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteTreeItemElement[]; + /** + * Specifies the selection mode, where `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections, `"children"` allows any number of selections from one parent from corresponding parent and child selections, `"multichildren"` allows any number of selections from corresponding parent and child selections, `"multiple"` allows any number of selections, `"none"` allows no selections, `"single"` allows one selection, and `"single-persist"` allows and requires one selection. + * @default "single" + */ + "selectionMode"?: SelectionMode; + } + interface CalciteTreeItem { + "depth"?: number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, the component is expanded. + */ + "expanded"?: boolean; + "hasChildren"?: boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: FlipContext; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: string; + /** + * In ancestor selection mode, show as indeterminate when only some children are selected. + */ + "indeterminate"?: boolean; + "lines"?: boolean; + "onCalciteInternalTreeItemSelect"?: (event: CalciteTreeItemCustomEvent) => void; + "parentExpanded"?: boolean; + "scale"?: Scale; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + "selectionMode"?: SelectionMode; + } /** - * When `true`, the component is selected. - */ - selected?: boolean; + * @deprecated Use the `list` component instead. + */ + interface CalciteValueList { + /** + * When provided, the method will be called to determine whether the element can move from the list. + */ + "canPull"?: (detail: DragDetail) => boolean; + /** + * When provided, the method will be called to determine whether the element can be added from another list. + */ + "canPut"?: (detail: DragDetail) => boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * When `true`, `calcite-value-list-item`s are sortable via a draggable button. + */ + "dragEnabled"?: boolean; + /** + * When `true`, an input appears at the top of the component that can be used by end users to filter list items. + */ + "filterEnabled"?: boolean; + /** + * Placeholder text for the filter's input field. + */ + "filterPlaceholder"?: string; + /** + * Text for the filter input field. + */ + "filterText"?: string; + /** + * The currently filtered data. + * @readonly + */ + "filteredData"?: ItemData1; + /** + * The currently filtered items. + * @readonly + */ + "filteredItems"?: HTMLCalciteValueListItemElement[]; + /** + * The component's group identifier. To drag elements from one list into another, both lists must have the same group value. + */ + "group"?: string; + /** + * When `true`, a busy indicator is displayed. + */ + "loading"?: boolean; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ValueListMessages; + /** + * Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections. + */ + "multiple"?: boolean; + /** + * Emits when any of the list item selections have changed. + */ + "onCalciteListChange"?: (event: CalciteValueListCustomEvent>) => void; + /** + * Emits when a filter has changed. + */ + "onCalciteListFilter"?: (event: CalciteValueListCustomEvent) => void; + /** + * Emits when the order of the list has changed. + */ + "onCalciteListOrderChange"?: (event: CalciteValueListCustomEvent) => void; + /** + * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. + */ + "selectionFollowsFocus"?: boolean; + } /** - * The component's value. - */ + * @deprecated Use the `list` component instead. + */ + interface CalciteValueListItem { + /** + * A description for the component that displays below the label text. + */ + "description"?: string; + "deselectDisabled"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + "handleActivated"?: boolean; + /** + * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. + * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) + */ + "icon"?: ICON_TYPES | null; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Label and accessible name for the component. Appears next to the icon. + */ + "label": string; + /** + * Provides additional metadata to the component. Primary use is for a filter on the parent list. + */ + "metadata"?: Record; + /** + * When `true`, prevents the content of the component from user interaction. + */ + "nonInteractive"?: boolean; + /** + * Fires when the component is selected or unselected. + */ + "onCalciteListItemChange"?: (event: CalciteValueListItemCustomEvent<{ + item: HTMLCalciteValueListItemElement; 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-chip-group": CalciteChipGroup; - "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-flow-item": CalciteFlowItem; - "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-number": CalciteInputNumber; - "calcite-input-text": CalciteInputText; - "calcite-input-time-picker": CalciteInputTimePicker; - "calcite-input-time-zone": CalciteInputTimeZone; - "calcite-label": CalciteLabel; - "calcite-link": CalciteLink; - "calcite-list": CalciteList; - "calcite-list-item": CalciteListItem; - "calcite-list-item-group": CalciteListItemGroup; - "calcite-loader": CalciteLoader; - "calcite-menu": CalciteMenu; - "calcite-menu-item": CalciteMenuItem; - "calcite-meter": CalciteMeter; - "calcite-modal": CalciteModal; - "calcite-navigation": CalciteNavigation; - "calcite-navigation-logo": CalciteNavigationLogo; - "calcite-navigation-user": CalciteNavigationUser; - "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-progress": CalciteProgress; - "calcite-radio-button": CalciteRadioButton; - "calcite-radio-button-group": CalciteRadioButtonGroup; - "calcite-rating": CalciteRating; - "calcite-scrim": CalciteScrim; - "calcite-segmented-control": CalciteSegmentedControl; - "calcite-segmented-control-item": CalciteSegmentedControlItem; - "calcite-select": CalciteSelect; - "calcite-sheet": CalciteSheet; - "calcite-shell": CalciteShell; - "calcite-shell-center-row": CalciteShellCenterRow; - "calcite-shell-panel": CalciteShellPanel; - "calcite-slider": CalciteSlider; - "calcite-sortable-list": CalciteSortableList; - "calcite-split-button": CalciteSplitButton; - "calcite-stack": CalciteStack; - "calcite-stepper": CalciteStepper; - "calcite-stepper-item": CalciteStepperItem; - "calcite-switch": CalciteSwitch; - "calcite-tab": CalciteTab; - "calcite-tab-nav": CalciteTabNav; - "calcite-tab-title": CalciteTabTitle; - "calcite-table": CalciteTable; - "calcite-table-cell": CalciteTableCell; - "calcite-table-header": CalciteTableHeader; - "calcite-table-row": CalciteTableRow; - "calcite-tabs": CalciteTabs; - "calcite-text-area": CalciteTextArea; - "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-tree": CalciteTree; - "calcite-tree-item": CalciteTreeItem; - "calcite-value-list": CalciteValueList; - "calcite-value-list-item": CalciteValueListItem; - } + selected: boolean; + shiftPressed: boolean; + }>) => void; + /** + * Fires when the remove button is pressed. + */ + "onCalciteListItemRemove"?: (event: CalciteValueListItemCustomEvent) => void; + "onCalciteValueListItemDragHandleBlur"?: (event: CalciteValueListItemCustomEvent) => void; + /** + * When `true`, adds an action to remove the component. + */ + "removable"?: boolean; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * The component's 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-chip-group": CalciteChipGroup; + "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-flow-item": CalciteFlowItem; + "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-number": CalciteInputNumber; + "calcite-input-text": CalciteInputText; + "calcite-input-time-picker": CalciteInputTimePicker; + "calcite-input-time-zone": CalciteInputTimeZone; + "calcite-label": CalciteLabel; + "calcite-link": CalciteLink; + "calcite-list": CalciteList; + "calcite-list-item": CalciteListItem; + "calcite-list-item-group": CalciteListItemGroup; + "calcite-loader": CalciteLoader; + "calcite-menu": CalciteMenu; + "calcite-menu-item": CalciteMenuItem; + "calcite-meter": CalciteMeter; + "calcite-modal": CalciteModal; + "calcite-navigation": CalciteNavigation; + "calcite-navigation-logo": CalciteNavigationLogo; + "calcite-navigation-user": CalciteNavigationUser; + "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-progress": CalciteProgress; + "calcite-radio-button": CalciteRadioButton; + "calcite-radio-button-group": CalciteRadioButtonGroup; + "calcite-rating": CalciteRating; + "calcite-scrim": CalciteScrim; + "calcite-segmented-control": CalciteSegmentedControl; + "calcite-segmented-control-item": CalciteSegmentedControlItem; + "calcite-select": CalciteSelect; + "calcite-sheet": CalciteSheet; + "calcite-shell": CalciteShell; + "calcite-shell-center-row": CalciteShellCenterRow; + "calcite-shell-panel": CalciteShellPanel; + "calcite-slider": CalciteSlider; + "calcite-sortable-list": CalciteSortableList; + "calcite-split-button": CalciteSplitButton; + "calcite-stack": CalciteStack; + "calcite-stepper": CalciteStepper; + "calcite-stepper-item": CalciteStepperItem; + "calcite-switch": CalciteSwitch; + "calcite-tab": CalciteTab; + "calcite-tab-nav": CalciteTabNav; + "calcite-tab-title": CalciteTabTitle; + "calcite-table": CalciteTable; + "calcite-table-cell": CalciteTableCell; + "calcite-table-header": CalciteTableHeader; + "calcite-table-row": CalciteTableRow; + "calcite-tabs": CalciteTabs; + "calcite-text-area": CalciteTextArea; + "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-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-chip-group": LocalJSX.CalciteChipGroup & 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-flow-item": LocalJSX.CalciteFlowItem & 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-number": LocalJSX.CalciteInputNumber & JSXBase.HTMLAttributes; - "calcite-input-text": LocalJSX.CalciteInputText & JSXBase.HTMLAttributes; - "calcite-input-time-picker": LocalJSX.CalciteInputTimePicker & - JSXBase.HTMLAttributes; - "calcite-input-time-zone": LocalJSX.CalciteInputTimeZone & - JSXBase.HTMLAttributes; - "calcite-label": LocalJSX.CalciteLabel & JSXBase.HTMLAttributes; - "calcite-link": LocalJSX.CalciteLink & JSXBase.HTMLAttributes; - /** - * A general purpose list that enables users to construct list items that conform to Calcite styling. - */ - "calcite-list": LocalJSX.CalciteList & JSXBase.HTMLAttributes; - "calcite-list-item": LocalJSX.CalciteListItem & JSXBase.HTMLAttributes; - "calcite-list-item-group": LocalJSX.CalciteListItemGroup & - JSXBase.HTMLAttributes; - "calcite-loader": LocalJSX.CalciteLoader & JSXBase.HTMLAttributes; - "calcite-menu": LocalJSX.CalciteMenu & JSXBase.HTMLAttributes; - "calcite-menu-item": LocalJSX.CalciteMenuItem & JSXBase.HTMLAttributes; - "calcite-meter": LocalJSX.CalciteMeter & JSXBase.HTMLAttributes; - "calcite-modal": LocalJSX.CalciteModal & JSXBase.HTMLAttributes; - "calcite-navigation": LocalJSX.CalciteNavigation & JSXBase.HTMLAttributes; - "calcite-navigation-logo": LocalJSX.CalciteNavigationLogo & - JSXBase.HTMLAttributes; - "calcite-navigation-user": LocalJSX.CalciteNavigationUser & - 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; - /** - * @deprecated Use the `list` component instead. - */ - "calcite-pick-list": LocalJSX.CalcitePickList & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `list` component instead. - */ - "calcite-pick-list-group": LocalJSX.CalcitePickListGroup & - JSXBase.HTMLAttributes; - /** - * @deprecated Use the `list` component instead. - */ - "calcite-pick-list-item": LocalJSX.CalcitePickListItem & JSXBase.HTMLAttributes; - "calcite-popover": LocalJSX.CalcitePopover & JSXBase.HTMLAttributes; - "calcite-progress": LocalJSX.CalciteProgress & JSXBase.HTMLAttributes; - "calcite-radio-button": LocalJSX.CalciteRadioButton & JSXBase.HTMLAttributes; - "calcite-radio-button-group": LocalJSX.CalciteRadioButtonGroup & - JSXBase.HTMLAttributes; - "calcite-rating": LocalJSX.CalciteRating & JSXBase.HTMLAttributes; - "calcite-scrim": LocalJSX.CalciteScrim & JSXBase.HTMLAttributes; - "calcite-segmented-control": LocalJSX.CalciteSegmentedControl & - JSXBase.HTMLAttributes; - "calcite-segmented-control-item": LocalJSX.CalciteSegmentedControlItem & - JSXBase.HTMLAttributes; - "calcite-select": LocalJSX.CalciteSelect & JSXBase.HTMLAttributes; - "calcite-sheet": LocalJSX.CalciteSheet & 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-stack": LocalJSX.CalciteStack & 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-table": LocalJSX.CalciteTable & JSXBase.HTMLAttributes; - "calcite-table-cell": LocalJSX.CalciteTableCell & JSXBase.HTMLAttributes; - "calcite-table-header": LocalJSX.CalciteTableHeader & JSXBase.HTMLAttributes; - "calcite-table-row": LocalJSX.CalciteTableRow & JSXBase.HTMLAttributes; - "calcite-tabs": LocalJSX.CalciteTabs & JSXBase.HTMLAttributes; - "calcite-text-area": LocalJSX.CalciteTextArea & 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-tree": LocalJSX.CalciteTree & JSXBase.HTMLAttributes; - "calcite-tree-item": LocalJSX.CalciteTreeItem & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `list` component instead. - */ - "calcite-value-list": LocalJSX.CalciteValueList & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `list` component instead. - */ - "calcite-value-list-item": LocalJSX.CalciteValueListItem & - JSXBase.HTMLAttributes; - } - } + 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-chip-group": LocalJSX.CalciteChipGroup & 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-flow-item": LocalJSX.CalciteFlowItem & 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-number": LocalJSX.CalciteInputNumber & JSXBase.HTMLAttributes; + "calcite-input-text": LocalJSX.CalciteInputText & JSXBase.HTMLAttributes; + "calcite-input-time-picker": LocalJSX.CalciteInputTimePicker & JSXBase.HTMLAttributes; + "calcite-input-time-zone": LocalJSX.CalciteInputTimeZone & JSXBase.HTMLAttributes; + "calcite-label": LocalJSX.CalciteLabel & JSXBase.HTMLAttributes; + "calcite-link": LocalJSX.CalciteLink & JSXBase.HTMLAttributes; + /** + * A general purpose list that enables users to construct list items that conform to Calcite styling. + */ + "calcite-list": LocalJSX.CalciteList & JSXBase.HTMLAttributes; + "calcite-list-item": LocalJSX.CalciteListItem & JSXBase.HTMLAttributes; + "calcite-list-item-group": LocalJSX.CalciteListItemGroup & JSXBase.HTMLAttributes; + "calcite-loader": LocalJSX.CalciteLoader & JSXBase.HTMLAttributes; + "calcite-menu": LocalJSX.CalciteMenu & JSXBase.HTMLAttributes; + "calcite-menu-item": LocalJSX.CalciteMenuItem & JSXBase.HTMLAttributes; + "calcite-meter": LocalJSX.CalciteMeter & JSXBase.HTMLAttributes; + "calcite-modal": LocalJSX.CalciteModal & JSXBase.HTMLAttributes; + "calcite-navigation": LocalJSX.CalciteNavigation & JSXBase.HTMLAttributes; + "calcite-navigation-logo": LocalJSX.CalciteNavigationLogo & JSXBase.HTMLAttributes; + "calcite-navigation-user": LocalJSX.CalciteNavigationUser & 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; + /** + * @deprecated Use the `list` component instead. + */ + "calcite-pick-list": LocalJSX.CalcitePickList & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `list` component instead. + */ + "calcite-pick-list-group": LocalJSX.CalcitePickListGroup & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `list` component instead. + */ + "calcite-pick-list-item": LocalJSX.CalcitePickListItem & JSXBase.HTMLAttributes; + "calcite-popover": LocalJSX.CalcitePopover & JSXBase.HTMLAttributes; + "calcite-progress": LocalJSX.CalciteProgress & JSXBase.HTMLAttributes; + "calcite-radio-button": LocalJSX.CalciteRadioButton & JSXBase.HTMLAttributes; + "calcite-radio-button-group": LocalJSX.CalciteRadioButtonGroup & JSXBase.HTMLAttributes; + "calcite-rating": LocalJSX.CalciteRating & JSXBase.HTMLAttributes; + "calcite-scrim": LocalJSX.CalciteScrim & JSXBase.HTMLAttributes; + "calcite-segmented-control": LocalJSX.CalciteSegmentedControl & JSXBase.HTMLAttributes; + "calcite-segmented-control-item": LocalJSX.CalciteSegmentedControlItem & JSXBase.HTMLAttributes; + "calcite-select": LocalJSX.CalciteSelect & JSXBase.HTMLAttributes; + "calcite-sheet": LocalJSX.CalciteSheet & 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-stack": LocalJSX.CalciteStack & 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-table": LocalJSX.CalciteTable & JSXBase.HTMLAttributes; + "calcite-table-cell": LocalJSX.CalciteTableCell & JSXBase.HTMLAttributes; + "calcite-table-header": LocalJSX.CalciteTableHeader & JSXBase.HTMLAttributes; + "calcite-table-row": LocalJSX.CalciteTableRow & JSXBase.HTMLAttributes; + "calcite-tabs": LocalJSX.CalciteTabs & JSXBase.HTMLAttributes; + "calcite-text-area": LocalJSX.CalciteTextArea & 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-tree": LocalJSX.CalciteTree & JSXBase.HTMLAttributes; + "calcite-tree-item": LocalJSX.CalciteTreeItem & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `list` component instead. + */ + "calcite-value-list": LocalJSX.CalciteValueList & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `list` component instead. + */ + "calcite-value-list-item": LocalJSX.CalciteValueListItem & JSXBase.HTMLAttributes; + } + } } diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index 7216be302c5..ee2a77c5afd 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -160,32 +160,26 @@ } :host([appearance="transparent"]) .button { - @apply bg-transparent - transition-shadow - duration-150 - ease-in-out; + @apply bg-transparent; } +:host([appearance="transparent"][active]) .button, :host([appearance="transparent"]) .button:hover, :host([appearance="transparent"]) .button:focus { - @apply bg-transparent; - box-shadow: 0 0 0 2px theme("borderColor.color.1") inset; + background-color: var(--calcite-button-transparent-hover); } -:host([active][appearance="transparent"]) .button, -:host([active][appearance="transparent"]) .button:hover, -:host([active][appearance="transparent"]) .button:focus { - @apply text-color-1 fill-color-1 bg-foreground-3; +:host([appearance="transparent"]) .button:active { + background-color: var(--calcite-button-transparent-press); } -:host([appearance="transparent"][loading]) .button, :host([appearance="transparent"][disabled]) .button { @apply bg-transparent; } -:host([loading]) .button, -:host([loading]) .button:hover, -:host([loading]) .button:focus { +:host([loading][appearance="solid"]) .button, +:host([loading][appearance="solid"]) .button:hover, +:host([loading][appearance="solid"]) .button:focus { @apply bg-foreground-1; .text-container { @apply opacity-disabled; diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss index c4c9c8185ba..17d760e8b98 100644 --- a/packages/calcite-components/src/components/alert/alert.scss +++ b/packages/calcite-components/src/components/alert/alert.scss @@ -18,9 +18,9 @@ $border-style: 1px solid var(--calcite-color-border-3); box-border fixed flex - flex-wrap items-center justify-center + min-w-min mx-auto my-0 opacity-0 @@ -64,20 +64,15 @@ $border-style: 1px solid var(--calcite-color-border-3); } } -.content { - @apply box-border flex flex-auto flex-col transition-default; - padding-block: var(--calcite-alert-spacing-token-small); - padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small); -} - .icon { - @apply flex flex-col items-center justify-start p-0; - margin-block-end: var(--calcite-alert-spacing-token-large); + @apply flex flex-col items-center justify-center p-0; + margin-block: auto; margin-inline-end: auto; + padding-inline-start: var(--calcite-alert-spacing-token-large); } .close { - @apply bg-transparent border-none cursor-pointer flex items-start justify-end outline-none self-start text-color-3; + @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3; -webkit-appearance: none; padding: var(--calcite-alert-spacing-token-large); @@ -97,19 +92,20 @@ $border-style: 1px solid var(--calcite-color-border-3); } .queue-count { - @apply text-color-2 - bg-foreground-1 - transition-default - invisible - flex + @apply bg-foreground-1 cursor-default + flex + font-medium + invisible items-center justify-around - self-stretch + min-w-min + opacity-0 overflow-hidden + self-stretch text-center - font-medium - opacity-0; + text-color-2 + transition-default; border-inline: 0 solid transparent; border-start-end-radius: 0; @@ -143,23 +139,14 @@ $border-style: 1px solid var(--calcite-color-border-3); } .text-container { - @apply flex flex-1 min-w-0 flex-col break-words; -} - -.content-container { - @apply flex flex-1; + @apply box-border flex flex-auto min-w-0 flex-col break-words; + padding-block: var(--calcite-alert-spacing-token-small); + padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small); } .footer { - @apply flex justify-end order-1 pt-px relative w-full; - block-size: var(--calcite-alert-footer-height); - - &:before { - content: ""; - @apply absolute top-0; - inset-inline: var(--calcite-alert-footer-divider-gap); - border-block-start: $border-style; - } + @apply flex justify-end pt-px relative self-stretch w-auto; + block-size: inherit; } // scale variables @@ -319,42 +306,5 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms; @apply absolute; } -@container responsive-container (min-width: #{$calcite-container-size-width-xs-max}) { - .content { - @apply flex-row; - } - - .close { - @apply items-center self-stretch; - } - - .icon { - @apply justify-center; - margin-inline-end: 0; - margin-block: 0; - padding-inline-end: var(--calcite-alert-spacing-token-large); - } -} - -@container responsive-container (min-width: #{$calcite-container-size-width-sm-max}) { - .close { - @apply self-stretch; - } - - .footer { - @apply self-stretch w-auto; - order: initial; - block-size: inherit; - - &:before { - content: none; - } - } - - .icon { - padding-inline: var(--calcite-alert-spacing-token-large) 0; - } -} - @include base-component(); @include calciteHydratedHidden(); diff --git a/packages/calcite-components/src/components/alert/alert.stories.ts b/packages/calcite-components/src/components/alert/alert.stories.ts index d5a640687d2..3ee99ae940f 100644 --- a/packages/calcite-components/src/components/alert/alert.stories.ts +++ b/packages/calcite-components/src/components/alert/alert.stories.ts @@ -1,11 +1,9 @@ import { select } from "@storybook/addon-knobs"; import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers"; -import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils"; +import { modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import readme from "./readme.md"; -const openAlertScreenshotDelay = 1000; - export default { title: "Components/Alert", parameters: { @@ -220,121 +218,3 @@ export const autoClosableRetainsCloseButton_TestOnly = (): string => html` Take action `; - -// we use individual stories since we can't display multiple open alerts at the same time - -const breakpointsStoryTemplate = html` - - -
title
-
message
- - - - -
title
-
message
- - - - -`; - -export const breakpointsXsmallScaleS_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "s" }); - -breakpointsXsmallScaleS_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsSmallScaleS_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "s" }); - -breakpointsSmallScaleS_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsMediumScaleS_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "s" }); - -breakpointsMediumScaleS_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsLargeScaleS_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "s" }); - -breakpointsLargeScaleS_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsXsmallScaleM_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "m" }); - -breakpointsXsmallScaleM_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsSmallScaleM_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "m" }); - -breakpointsSmallScaleM_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsMediumScaleM_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "m" }); - -breakpointsMediumScaleM_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsLargeScaleM_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "m" }); - -breakpointsLargeScaleM_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsXsmallScaleL_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "l" }); - -breakpointsXsmallScaleL_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsSmallScaleL_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "l" }); - -breakpointsSmallScaleL_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsMediumScaleL_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "l" }); - -breakpointsMediumScaleL_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; - -export const breakpointsLargeScaleL_TestOnly = (): string => - createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "l" }); - -breakpointsLargeScaleL_TestOnly.parameters = { - chromatic: { delay: openAlertScreenshotDelay }, -}; diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index c3f1c2fc45a..eee843b1cac 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -46,8 +46,6 @@ import { KindIcons } from "../resources"; import { AlertMessages } from "./assets/alert/t9n"; import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; -import { createObserver } from "../../utils/observers"; -import { breakpoints } from "../../utils/responsive"; /** * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned @@ -175,9 +173,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen if (open && !this.queued) { this.calciteInternalAlertRegister.emit(); } - if (this.transitionEl) { - this.resizeObserver?.observe(this.transitionEl); - } } async componentWillLoad(): Promise { @@ -190,7 +185,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen componentDidLoad(): void { setComponentLoaded(this); - this.resizeObserver?.observe(this.transitionEl); } disconnectedCallback(): void { @@ -204,7 +198,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen disconnectLocalized(this); disconnectMessages(this); this.slottedInShell = false; - this.resizeObserver?.disconnect(); } render(): VNode { @@ -214,12 +207,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen signDisplay: "always", }; - const { hasEndActions } = this; - const { open, autoClose, responsiveContainerWidth, label, placement, queued } = this; + const { open, autoClose, label, placement, queued } = this; const role = autoClose ? "alert" : "alertdialog"; - const widthBreakpoints = breakpoints.width; - const lessThanSmall = responsiveContainerWidth < widthBreakpoints.small; - const greaterOrEqualThanSmall = responsiveContainerWidth >= widthBreakpoints.small; const hidden = !open; const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind); const hasQueuedAlerts = this.queueLength > 1; @@ -243,23 +232,15 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530) ref={this.setTransitionEl} > -
- {effectiveIcon && greaterOrEqualThanSmall ? this.renderIcon(effectiveIcon) : null} -
- {effectiveIcon && lessThanSmall ? this.renderIcon(effectiveIcon) : null} -
- - - -
-
-
- {lessThanSmall ? this.renderCloseButton() : null} -