From b9b684dd8f036b82d880656fbafdc8fba103fa8a Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 30 Apr 2024 16:11:14 -0700 Subject: [PATCH 01/62] set up demo for testing component sequential closing behavior --- .../calcite-components/src/demos/sheet.html | 122 +++++++++++++++++- .../src/utils/focusTrapComponent.ts | 2 +- 2 files changed, 122 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 2a8d9c0a543..222ee4d232c 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -37,7 +37,7 @@ -

Sheet

+ + + + + + width-scale + + s + m + l + + + + Open Modal from Sheet + + + + +
+

This is an example modal that opens from a Sheet.

+
+ Open Another Modal + + + +
+

+ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, + a dropdown, a popover and a tooltip. +

+ + + + + + + + + + + Scale S + + List + Grid + + + +
+

Example Popover.

+
+ + Example Popover + Example Tooltip + auto +
+ + + Open Sheet + + diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 8d8e8a734c1..1f0a4e12178 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -59,7 +59,7 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec const focusTrapOptions: FocusTrapOptions = { clickOutsideDeactivates: true, - escapeDeactivates: false, + escapeDeactivates: true, fallbackFocus: focusTrapNode, setReturnFocus: (el) => { focusElement(el as FocusableElement); From 281619e762f6d2bd847d2bb7c31d5925a4033409 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 30 Apr 2024 16:33:03 -0700 Subject: [PATCH 02/62] WIP --- .../src/components/modal/modal.tsx | 19 ++++--------------- .../src/components/sheet/sheet.tsx | 19 ++++--------------- .../src/utils/focusTrapComponent.ts | 14 ++++++++++++-- 3 files changed, 20 insertions(+), 32 deletions(-) diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 592a8afae72..49ffc69606e 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -5,7 +5,6 @@ import { EventEmitter, h, Host, - Listen, Method, Prop, State, @@ -393,20 +392,6 @@ export class Modal @State() defaultMessages: ModalMessages; - //-------------------------------------------------------------------------- - // - // Event Listeners - // - //-------------------------------------------------------------------------- - - @Listen("keydown", { target: "window" }) - handleEscape(event: KeyboardEvent): void { - if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) { - this.open = false; - event.preventDefault(); - } - } - //-------------------------------------------------------------------------- // // Events @@ -498,6 +483,10 @@ export class Modal deactivateFocusTrap(this); } + onFocusTrapDeactivate(): void { + this.open = false; + } + @Watch("open") toggleModal(value: boolean): void { if (this.ignoreOpenChange) { diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index 62f4d35b308..bf1d7760003 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -5,7 +5,6 @@ import { EventEmitter, h, Host, - Listen, Method, Prop, VNode, @@ -218,20 +217,6 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo this.handleMutationObserver(), ); - //-------------------------------------------------------------------------- - // - // Event Listeners - // - //-------------------------------------------------------------------------- - - @Listen("keydown", { target: "window" }) - handleEscape(event: KeyboardEvent): void { - if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) { - this.open = false; - event.preventDefault(); - } - } - //-------------------------------------------------------------------------- // // Events @@ -298,6 +283,10 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo deactivateFocusTrap(this); } + onFocusTrapDeactivate(): void { + this.open = false; + } + private setTransitionEl = (el: HTMLDivElement): void => { this.transitionEl = el; this.contentId = ensureId(el); diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 1f0a4e12178..7948511911a 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -11,6 +11,10 @@ export interface FocusTrapComponent { */ el: HTMLElement; + escapeDisabled?: boolean; + + outsideCloseDisabled?: boolean; + /** * When `true`, prevents focus trapping. */ @@ -27,6 +31,8 @@ export interface FocusTrapComponent { * This should be implemented for components that allow user content and/or have conditionally-rendered focusable elements within the trap. */ updateFocusTrapElements?: () => Promise; + + onFocusTrapDeactivate?(): void; } export type FocusTrap = _FocusTrap; @@ -58,9 +64,13 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec } const focusTrapOptions: FocusTrapOptions = { - clickOutsideDeactivates: true, - escapeDeactivates: true, + clickOutsideDeactivates: !component.outsideCloseDisabled ?? true, + escapeDeactivates: !component.escapeDisabled ?? true, fallbackFocus: focusTrapNode, + onDeactivate: () => { + component.onFocusTrapDeactivate(); + console.log("focus trap deactivated"); + }, setReturnFocus: (el) => { focusElement(el as FocusableElement); return false; From 2ad2c8e6a359bfce8cca50e67159c34a4271e21b Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 1 May 2024 12:41:01 -0700 Subject: [PATCH 03/62] WIP --- .../calcite-components/src/demos/sheet.html | 34 ++++--------------- 1 file changed, 6 insertions(+), 28 deletions(-) diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 222ee4d232c..1b412d97b3f 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -144,7 +144,7 @@ - Open Modal from Sheet + Open Modal from Sheet @@ -158,7 +158,7 @@ scale="s" kind="neutral" appearance="outline" - onClick="openAnotherModal('another-modal')" + onClick="openComponent('another-modal')" >Open Another Modal @@ -215,34 +215,12 @@ - Open Sheet + Open Sheet From c95e3aaacb39b7b532d0fc2fadfde86298782b55 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 1 May 2024 13:17:02 -0700 Subject: [PATCH 04/62] WIP --- .../components/input-date-picker/input-date-picker.tsx | 8 ++++---- packages/calcite-components/src/demos/sheet.html | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index f75b9f47964..ff93d6ff0b6 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -853,6 +853,10 @@ export class InputDatePicker this.datePickerEl.reset(); } + onFocusTrapDeactivate(): void { + this.open = false; + } + setStartInput = (el: HTMLCalciteInputElement): void => { this.startInput = el; }; @@ -932,10 +936,6 @@ export class InputDatePicker this.open = true; this.focusOnOpen = true; event.preventDefault(); - } else if (key === "Escape") { - this.open = false; - event.preventDefault(); - this.restoreInputFocus(); } }; diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 1b412d97b3f..4fa12ea77d9 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -169,7 +169,7 @@ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a dropdown, a popover and a tooltip.

- + Date: Wed, 1 May 2024 14:28:47 -0700 Subject: [PATCH 05/62] WIP --- .../components/input-time-picker/input-time-picker.tsx | 9 +++++---- packages/calcite-components/src/demos/sheet.html | 9 ++++++++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 268aa0c39e8..88c3cce69d0 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -551,6 +551,11 @@ export class InputTimePicker this.calciteInputTimePickerClose.emit(); } + onFocusTrapDeactivate(): void { + this.open = false; + this.calciteInputEl.setFocus(); + } + private delocalizeTimeString(value: string): string { // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug) dayjs.locale(this.effectiveLocale.toLowerCase()); @@ -716,10 +721,6 @@ export class InputTimePicker this.open = true; this.focusOnOpen = true; event.preventDefault(); - } else if (key === "Escape" && this.open) { - this.open = false; - event.preventDefault(); - this.calciteInputEl.setFocus(); } }; diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 4fa12ea77d9..0a6b957653c 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -169,7 +169,14 @@ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a dropdown, a popover and a tooltip.

- + + Input Date Picker + + + + Input Time Picker + + Date: Wed, 1 May 2024 15:01:03 -0700 Subject: [PATCH 06/62] add docs --- .../src/components/input-date-picker/input-date-picker.tsx | 1 + .../src/components/input-time-picker/input-time-picker.tsx | 1 + packages/calcite-components/src/components/modal/modal.tsx | 1 + .../calcite-components/src/components/popover/popover.tsx | 5 +++++ packages/calcite-components/src/components/sheet/sheet.tsx | 1 + packages/calcite-components/src/utils/focusTrapComponent.ts | 2 ++ 6 files changed, 11 insertions(+) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index ff93d6ff0b6..640f62b8356 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -853,6 +853,7 @@ export class InputDatePicker this.datePickerEl.reset(); } + /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; } diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 88c3cce69d0..4c63ccf4f59 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -551,6 +551,7 @@ export class InputTimePicker this.calciteInputTimePickerClose.emit(); } + /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; this.calciteInputEl.setFocus(); diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 49ffc69606e..280097561c0 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -483,6 +483,7 @@ export class Modal deactivateFocusTrap(this); } + /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; } diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index aeb55416ef2..ba15de43319 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -513,6 +513,11 @@ export class Popover deactivateFocusTrap(this); } + /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ + onFocusTrapDeactivate(): void { + this.open = false; + } + storeArrowEl = (el: SVGElement): void => { this.arrowEl = el; this.reposition(true); diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index bf1d7760003..5bd2e338b08 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -283,6 +283,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo deactivateFocusTrap(this); } + /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; } diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 7948511911a..d9941a7a93e 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -11,8 +11,10 @@ export interface FocusTrapComponent { */ el: HTMLElement; + /** When `true`, disables the default close on escape behavior. */ escapeDisabled?: boolean; + /** When `true`, disables the closing of the component when clicked outside. */ outsideCloseDisabled?: boolean; /** From 1187a3ad0a59908dc0cba1a5f929c0e8a438374b Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 1 May 2024 16:56:13 -0700 Subject: [PATCH 07/62] simplified HTML for Demo and e2e test to reflect the demo workflow --- .../src/components/sheet/sheet.e2e.ts | 142 +++++++++++++++++- .../calcite-components/src/demos/sheet.html | 36 +---- 2 files changed, 148 insertions(+), 30 deletions(-) diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts index 5bab2cbaefb..6b84d6e7d96 100644 --- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts +++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts @@ -1,4 +1,4 @@ -import { newE2EPage } from "@stencil/core/testing"; +import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { focusable, renders, hidden, defaults, accessible } from "../../tests/commonTests"; import { GlobalTestProps, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; @@ -541,4 +541,144 @@ describe("calcite-sheet properties", () => { expect(closeSpy).toHaveReceivedEventTimes(1); }); }); + + const componentStack = html` + + + + Open Modal from Sheet + + + + +
+

This is an example modal that opens from a Sheet.

+
+ Open Another Modal + + + +
+

+ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a + dropdown, a popover and a tooltip. +

+ + Input Date Picker + + + + Input Time Picker + + + + + + + + + + + + Scale S + + List + Grid + + + +
+

Example Popover.

+
+ + Example Popover + Example Tooltip + auto +
+ + Open Sheet + `; + + it("closes a stack of open components sequentially in visual order", async () => { + const page = await newE2EPage(); + await page.setContent(componentStack); + await skipAnimations(page); + + async function openAndCheckVisibility(page: E2EPage, element: E2EElement) { + element.setProperty("open", true); + await page.waitForChanges(); + expect(await element.isVisible()).toBe(true); + } + + const sheet = await page.find("calcite-sheet"); + await openAndCheckVisibility(page, sheet); + + const firstModal = await page.find("#example-modal"); + await openAndCheckVisibility(page, firstModal); + + const secondModal = await page.find("#another-modal"); + await openAndCheckVisibility(page, secondModal); + + async function testInputPicker(page: E2EPage, pickerSelector: string, modal: E2EElement) { + const inputPicker = await page.find(pickerSelector); + inputPicker.click(); + await page.waitForChanges(); + expect(await inputPicker.getProperty("open")).toBe(true); + + await page.keyboard.press("Escape"); + await page.waitForChanges(); + expect(await inputPicker.getProperty("open")).toBe(false); + + await page.keyboard.press("Escape"); + await page.waitForChanges(); + expect(await modal.isVisible()).toBe(false); + + modal.setProperty("open", true); + await page.waitForChanges(); + } + + await testInputPicker(page, "calcite-input-date-picker", secondModal); + await testInputPicker(page, "calcite-input-time-picker", secondModal); + + secondModal.setProperty("open", true); + await page.waitForChanges(); + + const popoverButton = await page.find("#popover-button"); + popoverButton.click(); + await page.waitForChanges(); + const popover = await page.find("calcite-popover"); + expect(await popover.getProperty("open")).toBe(true); + + await page.keyboard.press("Escape"); + await page.waitForChanges(); + expect(await popover.getProperty("open")).toBe(false); + + async function pressEscapeAndCheckVisibility(page: E2EPage, element: E2EElement, expectedVisibility: boolean) { + page.keyboard.press("Escape"); + await page.waitForChanges(); + expect(await element.isVisible()).toBe(expectedVisibility); + } + + await pressEscapeAndCheckVisibility(page, secondModal, false); + await pressEscapeAndCheckVisibility(page, firstModal, false); + await pressEscapeAndCheckVisibility(page, sheet, false); + }); }); diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 0a6b957653c..673a9bc181b 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -126,44 +126,23 @@ }); --> - - - - width-scale - - s - m - l - - - + + + Open Modal from Sheet - +

This is an example modal that opens from a Sheet.

- Open Another Modal - +

This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, @@ -171,7 +150,7 @@

Input Date Picker - + Input Time Picker @@ -182,7 +161,6 @@ placeholder="placeholder" max-items="8" selection-mode="ancestors" - scale="m" style="width: 200px" id="combobox" > From fadbb0de34f1f5f4cd9eae8861857acf90b23201 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 2 May 2024 10:20:13 -0700 Subject: [PATCH 08/62] cleanup --- .../input-date-picker/input-date-picker.tsx | 1 - .../input-time-picker/input-time-picker.tsx | 2 - .../src/components/modal/modal.tsx | 1 - .../src/components/popover/popover.tsx | 1 - .../src/components/sheet/sheet.tsx | 1 - .../calcite-components/src/demos/sheet.html | 85 +------------------ .../src/utils/focusTrapComponent.ts | 8 +- 7 files changed, 5 insertions(+), 94 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index 640f62b8356..ff93d6ff0b6 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -853,7 +853,6 @@ export class InputDatePicker this.datePickerEl.reset(); } - /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; } diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 4c63ccf4f59..565663622cb 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -551,10 +551,8 @@ export class InputTimePicker this.calciteInputTimePickerClose.emit(); } - /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; - this.calciteInputEl.setFocus(); } private delocalizeTimeString(value: string): string { diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 280097561c0..49ffc69606e 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -483,7 +483,6 @@ export class Modal deactivateFocusTrap(this); } - /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; } diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index ba15de43319..eafd4ee13fc 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -513,7 +513,6 @@ export class Popover deactivateFocusTrap(this); } - /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; } diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index 5bd2e338b08..bf1d7760003 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -283,7 +283,6 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo deactivateFocusTrap(this); } - /** Leverage the `focus-trap` builtin stack to handle closing a sequence of open components, instead of components handling own `escape`. */ onFocusTrapDeactivate(): void { this.open = false; } diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 673a9bc181b..2a8d9c0a543 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -37,7 +37,7 @@ - - - - - - Open Modal from Sheet - - - - -
-

This is an example modal that opens from a Sheet.

-
- Open Another Modal - - - -
-

- This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, - a dropdown, a popover and a tooltip. -

- - Input Date Picker - - - - Input Time Picker - - - - - - - - - - - - Scale S - - List - Grid - - - -
-

Example Popover.

-
- - Example Popover - Example Tooltip - auto -
- - - Open Sheet - - diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index d9941a7a93e..2108dba1790 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -34,6 +34,9 @@ export interface FocusTrapComponent { */ updateFocusTrapElements?: () => Promise; + /** + * Method that gets called when the focus trap is deactivated. + */ onFocusTrapDeactivate?(): void; } @@ -69,10 +72,7 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec clickOutsideDeactivates: !component.outsideCloseDisabled ?? true, escapeDeactivates: !component.escapeDisabled ?? true, fallbackFocus: focusTrapNode, - onDeactivate: () => { - component.onFocusTrapDeactivate(); - console.log("focus trap deactivated"); - }, + onDeactivate: () => component.onFocusTrapDeactivate(), setReturnFocus: (el) => { focusElement(el as FocusableElement); return false; From 0622da14f416a12d5eaf53b30abdc5934a35c26d Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 2 May 2024 13:28:44 -0700 Subject: [PATCH 09/62] stacked focus-trap components test --- .../src/components/components.e2e.ts | 129 ++++++++++++++++ .../src/components/sheet/sheet.e2e.ts | 142 +----------------- .../calcite-components/src/demos/sheet.html | 86 ++++++++++- .../src/utils/focusTrapComponent.ts | 2 +- 4 files changed, 216 insertions(+), 143 deletions(-) create mode 100644 packages/calcite-components/src/components/components.e2e.ts diff --git a/packages/calcite-components/src/components/components.e2e.ts b/packages/calcite-components/src/components/components.e2e.ts new file mode 100644 index 00000000000..3261601e3ef --- /dev/null +++ b/packages/calcite-components/src/components/components.e2e.ts @@ -0,0 +1,129 @@ +import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; +import { html } from "../../support/formatting"; +import { skipAnimations } from "../tests/utils"; + +describe("stacked focus-trap components", () => { + const componentStack = html` + + + + Open Modal from Sheet + + + + +
+

This is an example modal that opens from a Sheet.

+
+ Open Another Modal + + + +
+

+ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a + dropdown, a popover and a tooltip. +

+ + + + + + + + + + Scale S + + List + Grid + + + +
+

Example Popover.

+ + Input Date Picker + + + + Input Time Picker + + +
+ + Example Popover + Example Tooltip + auto +
+ + Open Sheet + `; + + it("closes a stack of open components sequentially in visual order", async () => { + const page = await newE2EPage(); + await page.setContent(componentStack); + await skipAnimations(page); + + async function testStackEscapeSequence(page: E2EPage, pickerType: string) { + async function openAndCheckVisibility(element: E2EElement) { + element.setProperty("open", true); + await page.waitForChanges(); + expect(await element.isVisible()).toBe(true); + } + + const sheet = await page.find("calcite-sheet"); + await openAndCheckVisibility(sheet); + + const firstModal = await page.find("#example-modal"); + await openAndCheckVisibility(firstModal); + + const secondModal = await page.find("#another-modal"); + await openAndCheckVisibility(secondModal); + + const popover = await page.find("calcite-popover"); + await openAndCheckVisibility(popover); + + const inputPicker = await page.find(pickerType); + inputPicker.click(); + await page.waitForChanges(); + expect(await inputPicker.getProperty("open")).toBe(true); + + async function testEscapeAndCheckOpenState(elements: E2EElement[]) { + for (let i = 0; i < elements.length; i++) { + await page.keyboard.press("Escape"); + await page.waitForChanges(); + expect(await elements[i].getProperty("open")).toBe(false); + + for (let j = 0; j < elements.length; j++) { + const expectedOpenState = j > i; + expect(await elements[j].getProperty("open")).toBe(expectedOpenState); + } + } + } + + await testEscapeAndCheckOpenState([inputPicker, popover, secondModal, firstModal, sheet]); + } + + await testStackEscapeSequence(page, "calcite-input-date-picker"); + await testStackEscapeSequence(page, "calcite-input-time-picker"); + }); +}); diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts index 6b84d6e7d96..5bab2cbaefb 100644 --- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts +++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts @@ -1,4 +1,4 @@ -import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; +import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { focusable, renders, hidden, defaults, accessible } from "../../tests/commonTests"; import { GlobalTestProps, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; @@ -541,144 +541,4 @@ describe("calcite-sheet properties", () => { expect(closeSpy).toHaveReceivedEventTimes(1); }); }); - - const componentStack = html` - - - - Open Modal from Sheet - - - - -
-

This is an example modal that opens from a Sheet.

-
- Open Another Modal - - - -
-

- This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a - dropdown, a popover and a tooltip. -

- - Input Date Picker - - - - Input Time Picker - - - - - - - - - - - - Scale S - - List - Grid - - - -
-

Example Popover.

-
- - Example Popover - Example Tooltip - auto -
- - Open Sheet - `; - - it("closes a stack of open components sequentially in visual order", async () => { - const page = await newE2EPage(); - await page.setContent(componentStack); - await skipAnimations(page); - - async function openAndCheckVisibility(page: E2EPage, element: E2EElement) { - element.setProperty("open", true); - await page.waitForChanges(); - expect(await element.isVisible()).toBe(true); - } - - const sheet = await page.find("calcite-sheet"); - await openAndCheckVisibility(page, sheet); - - const firstModal = await page.find("#example-modal"); - await openAndCheckVisibility(page, firstModal); - - const secondModal = await page.find("#another-modal"); - await openAndCheckVisibility(page, secondModal); - - async function testInputPicker(page: E2EPage, pickerSelector: string, modal: E2EElement) { - const inputPicker = await page.find(pickerSelector); - inputPicker.click(); - await page.waitForChanges(); - expect(await inputPicker.getProperty("open")).toBe(true); - - await page.keyboard.press("Escape"); - await page.waitForChanges(); - expect(await inputPicker.getProperty("open")).toBe(false); - - await page.keyboard.press("Escape"); - await page.waitForChanges(); - expect(await modal.isVisible()).toBe(false); - - modal.setProperty("open", true); - await page.waitForChanges(); - } - - await testInputPicker(page, "calcite-input-date-picker", secondModal); - await testInputPicker(page, "calcite-input-time-picker", secondModal); - - secondModal.setProperty("open", true); - await page.waitForChanges(); - - const popoverButton = await page.find("#popover-button"); - popoverButton.click(); - await page.waitForChanges(); - const popover = await page.find("calcite-popover"); - expect(await popover.getProperty("open")).toBe(true); - - await page.keyboard.press("Escape"); - await page.waitForChanges(); - expect(await popover.getProperty("open")).toBe(false); - - async function pressEscapeAndCheckVisibility(page: E2EPage, element: E2EElement, expectedVisibility: boolean) { - page.keyboard.press("Escape"); - await page.waitForChanges(); - expect(await element.isVisible()).toBe(expectedVisibility); - } - - await pressEscapeAndCheckVisibility(page, secondModal, false); - await pressEscapeAndCheckVisibility(page, firstModal, false); - await pressEscapeAndCheckVisibility(page, sheet, false); - }); }); diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 2a8d9c0a543..8b66f382c59 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -37,7 +37,7 @@ -

Sheet

+ + + + + + Open Modal from Sheet + + + + +
+

This is an example modal that opens from a Sheet.

+
+ Open Another Modal + + + +
+

+ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, + a dropdown, a popover and a tooltip. +

+ + + + + + + + + + + Scale S + + List + Grid + + + +
+

Example Popover.

+ + Input Date Picker + + + + Input Time Picker + + +
+ + Example Popover + Example Tooltip + auto +
+ + + Open Sheet + + diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 2108dba1790..137235c9d76 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -35,7 +35,7 @@ export interface FocusTrapComponent { updateFocusTrapElements?: () => Promise; /** - * Method that gets called when the focus trap is deactivated. + * Method that will be called before returning focus to the node that had focus prior to activation upon deactivation. */ onFocusTrapDeactivate?(): void; } From 00e576b91ac9abf545f117e1728d19a5a75cab73 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 8 May 2024 11:27:04 -0700 Subject: [PATCH 10/62] relocate test for closing of stacked focus-trap components to globalStyles --- .../src/components/components.e2e.ts | 129 ----------------- .../calcite-components/src/demos/sheet.html | 86 +----------- .../src/tests/globalStyles.e2e.ts | 130 +++++++++++++++++- 3 files changed, 130 insertions(+), 215 deletions(-) delete mode 100644 packages/calcite-components/src/components/components.e2e.ts diff --git a/packages/calcite-components/src/components/components.e2e.ts b/packages/calcite-components/src/components/components.e2e.ts deleted file mode 100644 index 3261601e3ef..00000000000 --- a/packages/calcite-components/src/components/components.e2e.ts +++ /dev/null @@ -1,129 +0,0 @@ -import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; -import { html } from "../../support/formatting"; -import { skipAnimations } from "../tests/utils"; - -describe("stacked focus-trap components", () => { - const componentStack = html` - - - - Open Modal from Sheet - - - - -
-

This is an example modal that opens from a Sheet.

-
- Open Another Modal - - - -
-

- This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a - dropdown, a popover and a tooltip. -

- - - - - - - - - - Scale S - - List - Grid - - - -
-

Example Popover.

- - Input Date Picker - - - - Input Time Picker - - -
- - Example Popover - Example Tooltip - auto -
- - Open Sheet - `; - - it("closes a stack of open components sequentially in visual order", async () => { - const page = await newE2EPage(); - await page.setContent(componentStack); - await skipAnimations(page); - - async function testStackEscapeSequence(page: E2EPage, pickerType: string) { - async function openAndCheckVisibility(element: E2EElement) { - element.setProperty("open", true); - await page.waitForChanges(); - expect(await element.isVisible()).toBe(true); - } - - const sheet = await page.find("calcite-sheet"); - await openAndCheckVisibility(sheet); - - const firstModal = await page.find("#example-modal"); - await openAndCheckVisibility(firstModal); - - const secondModal = await page.find("#another-modal"); - await openAndCheckVisibility(secondModal); - - const popover = await page.find("calcite-popover"); - await openAndCheckVisibility(popover); - - const inputPicker = await page.find(pickerType); - inputPicker.click(); - await page.waitForChanges(); - expect(await inputPicker.getProperty("open")).toBe(true); - - async function testEscapeAndCheckOpenState(elements: E2EElement[]) { - for (let i = 0; i < elements.length; i++) { - await page.keyboard.press("Escape"); - await page.waitForChanges(); - expect(await elements[i].getProperty("open")).toBe(false); - - for (let j = 0; j < elements.length; j++) { - const expectedOpenState = j > i; - expect(await elements[j].getProperty("open")).toBe(expectedOpenState); - } - } - } - - await testEscapeAndCheckOpenState([inputPicker, popover, secondModal, firstModal, sheet]); - } - - await testStackEscapeSequence(page, "calcite-input-date-picker"); - await testStackEscapeSequence(page, "calcite-input-time-picker"); - }); -}); diff --git a/packages/calcite-components/src/demos/sheet.html b/packages/calcite-components/src/demos/sheet.html index 8b66f382c59..2a8d9c0a543 100644 --- a/packages/calcite-components/src/demos/sheet.html +++ b/packages/calcite-components/src/demos/sheet.html @@ -37,7 +37,7 @@ - - - - - - Open Modal from Sheet - - - - -
-

This is an example modal that opens from a Sheet.

-
- Open Another Modal - - - -
-

- This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, - a dropdown, a popover and a tooltip. -

- - - - - - - - - - - Scale S - - List - Grid - - - -
-

Example Popover.

- - Input Date Picker - - - - Input Time Picker - - -
- - Example Popover - Example Tooltip - auto -
- - - Open Sheet - - diff --git a/packages/calcite-components/src/tests/globalStyles.e2e.ts b/packages/calcite-components/src/tests/globalStyles.e2e.ts index 35341d3c847..867f57c6411 100644 --- a/packages/calcite-components/src/tests/globalStyles.e2e.ts +++ b/packages/calcite-components/src/tests/globalStyles.e2e.ts @@ -1,5 +1,7 @@ -import { newE2EPage } from "@stencil/core/testing"; +import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; import { html } from "../../support/formatting"; +import { skipAnimations } from "../tests/utils"; + describe("global styles", () => { describe("animation", () => { const snippet = ` @@ -92,4 +94,130 @@ describe("global styles", () => { }); expect(eleTransitionDuration).toEqual("0.15s"); }); + + describe("stacked focus-trap components", () => { + const componentStack = html` + + + + Open Modal from Sheet + + + + +
+

This is an example modal that opens from a Sheet.

+
+ Open Another Modal + + + +
+

+ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a + dropdown, a popover and a tooltip. +

+ + + + + + + + + + Scale S + + List + Grid + + + +
+

Example Popover.

+ + Input Date Picker + + + + Input Time Picker + + +
+ + Example Popover + Example Tooltip + auto +
+ + Open Sheet + `; + + it("closes a stack of open components sequentially in visual order", async () => { + const page = await newE2EPage(); + await page.setContent(componentStack); + await skipAnimations(page); + + async function testStackEscapeSequence(page: E2EPage, pickerType: string) { + async function openAndCheckVisibility(element: E2EElement) { + element.setProperty("open", true); + await page.waitForChanges(); + expect(await element.isVisible()).toBe(true); + } + + const sheet = await page.find("calcite-sheet"); + await openAndCheckVisibility(sheet); + + const firstModal = await page.find("#example-modal"); + await openAndCheckVisibility(firstModal); + + const secondModal = await page.find("#another-modal"); + await openAndCheckVisibility(secondModal); + + const popover = await page.find("calcite-popover"); + await openAndCheckVisibility(popover); + + const inputPicker = await page.find(pickerType); + inputPicker.click(); + await page.waitForChanges(); + expect(await inputPicker.getProperty("open")).toBe(true); + + async function testEscapeAndCheckOpenState(elements: E2EElement[]) { + for (let i = 0; i < elements.length; i++) { + await page.keyboard.press("Escape"); + await page.waitForChanges(); + expect(await elements[i].getProperty("open")).toBe(false); + + for (let j = 0; j < elements.length; j++) { + const expectedOpenState = j > i; + expect(await elements[j].getProperty("open")).toBe(expectedOpenState); + } + } + } + + await testEscapeAndCheckOpenState([inputPicker, popover, secondModal, firstModal, sheet]); + } + + await testStackEscapeSequence(page, "calcite-input-date-picker"); + await testStackEscapeSequence(page, "calcite-input-time-picker"); + }); + }); }); From 55fbb0726d0f951ab968ea5a9745c770a35d2e63 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 8 May 2024 12:44:50 -0700 Subject: [PATCH 11/62] fix failing tests --- packages/calcite-components/src/utils/focusTrapComponent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 137235c9d76..8b40898fe23 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -72,7 +72,7 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec clickOutsideDeactivates: !component.outsideCloseDisabled ?? true, escapeDeactivates: !component.escapeDisabled ?? true, fallbackFocus: focusTrapNode, - onDeactivate: () => component.onFocusTrapDeactivate(), + onDeactivate: () => component.onFocusTrapDeactivate?.(), setReturnFocus: (el) => { focusElement(el as FocusableElement); return false; From 0af108e3cfcc07693d411b1a9cc825a3de8771a9 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 20 Jun 2024 10:57:09 -0700 Subject: [PATCH 12/62] add wait for events open/close to input-date-picker for additional check --- .../input-date-picker.e2e.ts | 49 +++++++++++++++++-- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index f26060794a8..1ccfde3e9dc 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -13,7 +13,7 @@ import { } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS as MONTH_HEADER_CSS } from "../date-picker-month-header/resources"; -import { getFocusedElementProp, skipAnimations } from "../../tests/utils"; +import { getFocusedElementProp, GlobalTestProps, skipAnimations } from "../../tests/utils"; import { CSS } from "./resources"; const animationDurationInMs = 200; @@ -344,23 +344,40 @@ describe("calcite-input-date-picker", () => { await skipAnimations(page); await page.waitForChanges(); inputDatePicker = await page.find("calcite-input-date-picker"); + type InputDatePickerEventOrderWindow = GlobalTestProps<{ events: string[] }>; + + await page.$eval("calcite-input-date-picker", (sheet: HTMLCalciteInputDatePickerElement) => { + const receivedEvents: string[] = []; + (window as InputDatePickerEventOrderWindow).events = receivedEvents; + + ["calciteInputDatePickerOpen", "calciteInputDatePickerClose"].forEach((eventType) => { + sheet.addEventListener(eventType, (event) => receivedEvents.push(event.type)); + }); + }); }); it("toggles the date picker when clicked", async () => { + const openSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerOpen"); + const closeSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerClose"); + let calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); expect(await calendar.isVisible()).toBe(false); await inputDatePicker.click(); + await page.waitForChanges(); - calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); + expect(openSpy).toHaveReceivedEventTimes(1); + calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); expect(await calendar.isVisible()).toBe(true); await inputDatePicker.click(); + await page.waitForChanges(); - calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); + expect(closeSpy).toHaveReceivedEventTimes(1); + calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); expect(await calendar.isVisible()).toBe(false); }); @@ -404,6 +421,8 @@ describe("calcite-input-date-picker", () => { } it("toggles the date picker when clicked", async () => { + const openSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerOpen"); + const closeSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerClose"); const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -428,11 +447,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInput.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(1); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInput.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(1); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -441,11 +462,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInputToggle.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(2); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInputToggle.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(2); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -454,11 +477,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInput.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(3); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInput.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(3); expect(await isCalendarVisible(calendar, "end")).toBe(false); @@ -467,11 +492,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInputToggle.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(4); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInputToggle.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(4); expect(await isCalendarVisible(calendar, "end")).toBe(false); @@ -480,11 +507,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInput.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(5); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInputToggle.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(5); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -493,11 +522,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInputToggle.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(6); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInput.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(6); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -506,11 +537,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInput.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(7); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInputToggle.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(7); expect(await isCalendarVisible(calendar, "end")).toBe(false); @@ -519,11 +552,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInputToggle.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(8); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInput.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(8); expect(await isCalendarVisible(calendar, "end")).toBe(false); @@ -532,11 +567,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInput.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(9); expect(await isCalendarVisible(calendar, "start")).toBe(true); await endInputToggle.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(9); expect(await isCalendarVisible(calendar, "end")).toBe(true); @@ -545,11 +582,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInputToggle.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(10); expect(await isCalendarVisible(calendar, "start")).toBe(true); await endInput.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(10); expect(await isCalendarVisible(calendar, "end")).toBe(true); @@ -562,11 +601,13 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInput.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(11); expect(await isCalendarVisible(calendar, "end")).toBe(true); await startInputToggle.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(11); expect(await isCalendarVisible(calendar, "start")).toBe(true); @@ -575,12 +616,14 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInputToggle.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(12); expect(await isCalendarVisible(calendar, "end")).toBe(true); await resetFocus(page); await startInput.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(12); expect(await isCalendarVisible(calendar, "start")).toBe(true); }); From 47cf21d37b3ae9581f5060886c17c4f7b78d266b Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 20 Jun 2024 11:25:44 -0700 Subject: [PATCH 13/62] add wait for events open/close to input-time-picker for additional check --- .../input-time-picker.e2e.ts | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts index fbabd7beb20..8179589933e 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts @@ -12,7 +12,7 @@ import { renders, t9n, } from "../../tests/commonTests"; -import { getFocusedElementProp, skipAnimations, waitForAnimationFrame } from "../../tests/utils"; +import { getFocusedElementProp, GlobalTestProps, skipAnimations, waitForAnimationFrame } from "../../tests/utils"; import { html } from "../../../support/formatting"; import { openClose } from "../../tests/commonTests"; @@ -860,6 +860,21 @@ describe("calcite-input-time-picker", () => { const popover = await page.find("calcite-input-time-picker >>> calcite-popover"); const stopgapDelayUntilOpenCloseEventsAreImplemented = 500; + type InputTimePickerEventOrderWindow = GlobalTestProps<{ events: string[] }>; + + await page.$eval("calcite-input-time-picker", (sheet: HTMLCalciteInputTimePickerElement) => { + const receivedEvents: string[] = []; + (window as InputTimePickerEventOrderWindow).events = receivedEvents; + + ["calciteInputTimePickerOpen", "calciteInputTimePickerClose"].forEach((eventType) => { + sheet.addEventListener(eventType, (event) => receivedEvents.push(event.type)); + }); + }); + + const inputTimePicker = await page.find("calcite-input-time-picker"); + const openSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerOpen"); + const closeSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerClose"); + await page.keyboard.press("Tab"); expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-TIME-PICKER"); @@ -875,6 +890,7 @@ describe("calcite-input-time-picker", () => { await page.keyboard.press("ArrowDown"); await page.waitForChanges(); await page.waitForTimeout(stopgapDelayUntilOpenCloseEventsAreImplemented); + expect(openSpy).toHaveReceivedEventTimes(1); expect(await popover.isVisible()).toBe(true); expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-TIME-PICKER"); @@ -890,6 +906,7 @@ describe("calcite-input-time-picker", () => { await page.keyboard.press("Escape"); await page.waitForChanges(); await page.waitForTimeout(stopgapDelayUntilOpenCloseEventsAreImplemented); + expect(closeSpy).toHaveReceivedEventTimes(1); expect(await popover.isVisible()).toBe(false); expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-TIME-PICKER"); @@ -923,17 +940,21 @@ describe("calcite-input-time-picker", () => { it("toggles the time picker when clicked", async () => { let popover = await page.find("calcite-input-time-picker >>> calcite-popover"); + const openSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerOpen"); + const closeSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerClose"); expect(await popover.isVisible()).toBe(false); await inputTimePicker.click(); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(true); await inputTimePicker.click(); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(false); @@ -941,6 +962,8 @@ describe("calcite-input-time-picker", () => { it("toggles the time picker when using arrow down/escape key", async () => { let popover = await page.find("calcite-input-time-picker >>> calcite-popover"); + const openSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerOpen"); + const closeSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerClose"); expect(await popover.isVisible()).toBe(false); @@ -948,12 +971,14 @@ describe("calcite-input-time-picker", () => { await page.waitForChanges(); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); + expect(openSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(true); await page.keyboard.press("Escape"); await page.waitForChanges(); + expect(closeSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(false); From 8ca1dc56bd941c0b3dfe5a52b3254a584196a46d Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 30 Jul 2024 14:32:53 -0700 Subject: [PATCH 14/62] docs --- .../calcite-components/src/components.d.ts | 105 +----------------- 1 file changed, 2 insertions(+), 103 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 1db6e346670..346aed4f24b 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -10,192 +10,92 @@ import { RequestedItem } from "./components/accordion/interfaces"; import { IconName } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; import { ActionMessages } from "./components/action/assets/action/t9n"; -import { ActionMessages } from "./components/action/assets/action/t9n"; -import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { FlipPlacement, 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 { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; -import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -import { BlockMessages } from "./components/block/assets/block/t9n"; import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; -import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { AlertDuration, Sync } from "./components/alert/interfaces"; -import { ButtonMessages } from "./components/button/assets/button/t9n"; -import { CardMessages } from "./components/card/assets/card/t9n"; import { NumberingSystem } from "./utils/locale"; -import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { AlertMessages } from "./components/alert/assets/alert/t9n"; -import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { HeadingLevel } from "./components/functional/Heading"; import { BlockMessages } from "./components/block/assets/block/t9n"; -import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { ButtonMessages } from "./components/button/assets/button/t9n"; import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; -import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { MutableValidityState } from "./utils/form"; -import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ChipMessages } from "./components/chip/assets/chip/t9n"; -import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; -import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { Format } from "./components/color-picker/utils"; -import { InputMessages } from "./components/input/assets/input/t9n"; -import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; 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 { ListMessages } from "./components/list/assets/list/t9n"; import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; -import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -import { MenuMessages } from "./components/menu/assets/menu/t9n"; -import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; -import { ModalMessages } from "./components/modal/assets/modal/t9n"; -import { NoticeMessages } from "./components/notice/assets/notice/t9n"; -import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { OverlayPositioning as OverlayPositioning1 } from "./components"; -import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -import { PopoverMessages } from "./components/popover/assets/popover/t9n"; -import { RatingMessages } from "./components/rating/assets/rating/t9n"; -import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; -import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; import { FilterMessages } from "./components/filter/assets/filter/t9n"; -import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; -import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; -import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { HandleMessages } from "./components/handle/assets/handle/t9n"; -import { TableMessages } from "./components/table/assets/table/t9n"; -import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; -import { TipMessages } from "./components/tip/assets/tip/t9n"; -import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { InputPlacement } from "./components/input/interfaces"; -import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { InputMessages } from "./components/input/assets/input/t9n"; import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -export { ActionMessages } from "./components/action/assets/action/t9n"; import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; -export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; -export { AlertMessages } from "./components/alert/assets/alert/t9n"; import { ItemData } from "./components/list-item/interfaces"; -export { BlockMessages } from "./components/block/assets/block/t9n"; import { ListMessages } from "./components/list/assets/list/t9n"; -export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { SelectionAppearance } from "./components/list/resources"; -export { ButtonMessages } from "./components/button/assets/button/t9n"; -export { CardMessages } from "./components/card/assets/card/t9n"; import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MenuMessages } from "./components/menu/assets/menu/t9n"; -export { ChipMessages } from "./components/chip/assets/chip/t9n"; import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; -export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { ModalMessages } from "./components/modal/assets/modal/t9n"; import { NoticeMessages } from "./components/notice/assets/notice/t9n"; -export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; -export { FilterMessages } from "./components/filter/assets/filter/t9n"; import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { PopoverMessages } from "./components/popover/assets/popover/t9n"; -export { HandleMessages } from "./components/handle/assets/handle/t9n"; import { RatingMessages } from "./components/rating/assets/rating/t9n"; -export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; -export { InputMessages } from "./components/input/assets/input/t9n"; -export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; -export { ListMessages } from "./components/list/assets/list/t9n"; import { DragDetail } from "./utils/sortableComponent"; -export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -export { MenuMessages } from "./components/menu/assets/menu/t9n"; -export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { ModalMessages } from "./components/modal/assets/modal/t9n"; -export { NoticeMessages } from "./components/notice/assets/notice/t9n"; -export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -export { PanelMessages } from "./components/panel/assets/panel/t9n"; import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -export { PopoverMessages } from "./components/popover/assets/popover/t9n"; -export { RatingMessages } from "./components/rating/assets/rating/t9n"; -export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; -export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; -export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { TableMessages } from "./components/table/assets/table/t9n"; import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -export { TableMessages } from "./components/table/assets/table/t9n"; -export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; -export { TipMessages } from "./components/tip/assets/tip/t9n"; -export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { TipMessages } from "./components/tip/assets/tip/t9n"; import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; @@ -1879,8 +1779,7 @@ export namespace Components { "placement": MenuPlacement; /** * Updates the position of the component. - * @param delayed If true, the repositioning is delayed. - * @returns void + * @param delayed */ "reposition": (delayed?: boolean) => Promise; /** @@ -4166,7 +4065,7 @@ export namespace Components { "referenceElement": ReferenceElement | string; /** * Updates the position of the component. - * @param delayed If true, delay the repositioning. + * @param delayed */ "reposition": (delayed?: boolean) => Promise; /** From 5861f8210bb9f07fde65b613243df8a2be5121a7 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 2 Aug 2024 11:52:18 -0700 Subject: [PATCH 15/62] fix timing issues with modal and sheet --- .../src/components/modal/modal.e2e.ts | 27 ++++++++++++------- .../src/components/sheet/sheet.e2e.ts | 5 ++++ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index a57d1ba3939..c2e55254999 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -153,7 +153,7 @@ describe("calcite-modal", () => { const mockCallBack = jest.fn(); await page.exposeFunction("beforeClose", mockCallBack); await page.setContent(` - + `); const modal = await page.find("calcite-modal"); await page.$eval( @@ -163,13 +163,15 @@ describe("calcite-modal", () => { window as GlobalTestProps<{ beforeClose: HTMLCalciteModalElement["beforeClose"] }> ).beforeClose), ); + await skipAnimations(page); await page.waitForChanges(); + modal.setProperty("open", true); await page.waitForChanges(); expect(await modal.getProperty("opened")).toBe(true); + await page.keyboard.press("Escape"); await page.waitForChanges(); - await page.waitForChanges(); expect(mockCallBack).toHaveBeenCalledTimes(1); expect(await modal.getProperty("opened")).toBe(false); }); @@ -395,35 +397,42 @@ describe("calcite-modal", () => { it("closes and allows re-opening when Escape key is pressed", async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent(``); await skipAnimations(page); const modal = await page.find("calcite-modal"); - await modal.setProperty("open", true); + + modal.setProperty("open", true); await page.waitForChanges(); expect(await modal.isVisible()).toBe(true); + await page.keyboard.press("Escape"); await page.waitForChanges(); expect(await modal.isVisible()).toBe(false); expect(await modal.getProperty("open")).toBe(false); - await modal.setProperty("open", true); + + modal.setProperty("open", true); + await page.waitForChanges(); await page.waitForChanges(); expect(await modal.isVisible()).toBe(true); }); it("closes when Escape key is pressed and modal is open on page load", async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent(``); + await skipAnimations(page); const modal = await page.find("calcite-modal"); await page.waitForChanges(); - expect(modal).toHaveAttribute("open"); + await page.waitForEvent("calciteModalOpen"); expect(modal).toHaveAttribute("open"); await page.keyboard.press("Escape"); + + await page.waitForEvent("calciteModalClose"); await page.waitForChanges(); expect(modal).not.toHaveAttribute("open"); - expect(modal).not.toHaveAttribute("open"); + await modal.setProperty("open", true); await page.waitForChanges(); - expect(modal).toHaveAttribute("open"); + await page.waitForChanges(); expect(modal).toHaveAttribute("open"); }); diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts index d37aab9f41b..4f875728c4c 100644 --- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts +++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts @@ -181,11 +181,16 @@ describe("calcite-sheet properties", () => { window as GlobalTestProps<{ beforeClose: HTMLCalciteSheetElement["beforeClose"] }> ).beforeClose), ); + await skipAnimations(page); await page.waitForChanges(); + await page.waitForEvent("calciteSheetOpen"); expect(await sheet.getProperty("opened")).toBe(true); + await page.keyboard.press("Escape"); await page.waitForChanges(); await page.waitForChanges(); + await page.waitForTimeout(500); + expect(mockCallBack).toHaveBeenCalledTimes(1); expect(await sheet.getProperty("opened")).toBe(false); }); From 95af390b02968d89d2995f3c392708040cee573a Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 2 Aug 2024 15:02:04 -0700 Subject: [PATCH 16/62] remove focus-trapping logic and let popover handle it --- .../input-time-picker/input-time-picker.tsx | 36 ------------------- 1 file changed, 36 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index c00ce7abb27..0ecd5f5c498 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -53,7 +53,6 @@ import { } from "../../utils/locale"; import { activateFocusTrap, - connectFocusTrap, deactivateFocusTrap, FocusTrapComponent, } from "../../utils/focusTrapComponent"; @@ -689,27 +688,6 @@ export class InputTimePicker return timeString; } - private popoverCloseHandler = () => { - deactivateFocusTrap(this, { - onDeactivate: () => { - this.calciteInputEl.setFocus(); - this.focusOnOpen = false; - }, - }); - this.open = false; - }; - - private popoverOpenHandler = () => { - activateFocusTrap(this, { - onActivate: () => { - if (this.focusOnOpen) { - this.calciteTimePickerEl.setFocus(); - this.focusOnOpen = false; - } - }, - }); - }; - keyDownHandler = (event: KeyboardEvent): void => { const { defaultPrevented, key } = event; @@ -872,17 +850,6 @@ export class InputTimePicker this.transitionEl = el; }; - private setCalciteTimePickerEl = (el: HTMLCalciteTimePickerElement): void => { - this.calciteTimePickerEl = el; - connectFocusTrap(this, { - focusTrapEl: el, - focusTrapOptions: { - initialFocus: false, - setReturnFocus: false, - }, - }); - }; - private setInputValue = (newInputValue: string): void => { if (!this.calciteInputEl) { return; @@ -1046,8 +1013,6 @@ export class InputTimePicker id={dialogId} label={messages.chooseTime} lang={this.effectiveLocale} - onCalcitePopoverClose={this.popoverCloseHandler} - onCalcitePopoverOpen={this.popoverOpenHandler} open={this.open} overlayPositioning={this.overlayPositioning} placement={this.placement} @@ -1060,7 +1025,6 @@ export class InputTimePicker messageOverrides={this.messageOverrides} numberingSystem={this.numberingSystem} onCalciteInternalTimePickerChange={this.timePickerChangeHandler} - ref={this.setCalciteTimePickerEl} scale={this.scale} step={this.step} tabIndex={this.open ? undefined : -1} From 69dbd5a463205ce8cc1dceda9c2881d6ee6eda73 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 2 Aug 2024 15:15:48 -0700 Subject: [PATCH 17/62] WIP --- .../src/components/input-time-picker/input-time-picker.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 0ecd5f5c498..136b25b7880 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -381,8 +381,6 @@ export class InputTimePicker private calciteTimePickerEl: HTMLCalciteTimePickerElement; - private focusOnOpen = false; - focusTrap: FocusTrap; private dialogId = `time-picker-dialog--${guid()}`; @@ -724,7 +722,6 @@ export class InputTimePicker } } else if (key === "ArrowDown") { this.open = true; - this.focusOnOpen = true; event.preventDefault(); } }; From ba39a7f3a0dc5949b0c868ab9786d9f2efb74653 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 2 Aug 2024 16:33:26 -0700 Subject: [PATCH 18/62] WIP --- .../src/components/input-time-picker/input-time-picker.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 136b25b7880..b2fbd171767 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -842,6 +842,10 @@ export class InputTimePicker this.popoverEl = el; }; + private setCalciteTimePickerEl = (el: HTMLCalciteTimePickerElement): void => { + this.calciteTimePickerEl = el; + }; + private setInputAndTransitionEl = (el: HTMLCalciteInputElement): void => { this.calciteInputEl = el; this.transitionEl = el; @@ -1022,6 +1026,7 @@ export class InputTimePicker messageOverrides={this.messageOverrides} numberingSystem={this.numberingSystem} onCalciteInternalTimePickerChange={this.timePickerChangeHandler} + ref={this.setCalciteTimePickerEl} scale={this.scale} step={this.step} tabIndex={this.open ? undefined : -1} From 3e4b38eead18459e419bf88a909254772ce5834b Mon Sep 17 00:00:00 2001 From: eliza Date: Sat, 3 Aug 2024 21:00:26 -0700 Subject: [PATCH 19/62] enable focus trap in input-time-picker and fix failing tests --- .../input-time-picker/input-time-picker.e2e.ts | 12 ++++++------ .../input-time-picker/input-time-picker.tsx | 8 +++++++- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts index 319ae4af726..92bb0a9059a 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts @@ -874,8 +874,8 @@ describe("calcite-input-time-picker", () => { }); const inputTimePicker = await page.find("calcite-input-time-picker"); - const openSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerOpen"); - const closeSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerClose"); + const openSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerOpen"); + const closeSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerClose"); await page.keyboard.press("Tab"); expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-TIME-PICKER"); @@ -942,8 +942,8 @@ describe("calcite-input-time-picker", () => { it("toggles the time picker when clicked", async () => { let popover = await page.find("calcite-input-time-picker >>> calcite-popover"); - const openSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerOpen"); - const closeSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerClose"); + const openSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerOpen"); + const closeSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerClose"); expect(await popover.isVisible()).toBe(false); @@ -964,8 +964,8 @@ describe("calcite-input-time-picker", () => { it("toggles the time picker when using arrow down/escape key", async () => { let popover = await page.find("calcite-input-time-picker >>> calcite-popover"); - const openSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerOpen"); - const closeSpy = await inputTimePicker.spyOnEvent("calciteInputDatePickerClose"); + const openSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerOpen"); + const closeSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerClose"); expect(await popover.isVisible()).toBe(false); diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index b2fbd171767..0484450203e 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -5,6 +5,7 @@ import { EventEmitter, h, Host, + Listen, Method, Prop, State, @@ -444,6 +445,11 @@ export class InputTimePicker /** Fires when the component is open and animation is complete. */ @Event({ cancelable: false }) calciteInputTimePickerOpen: EventEmitter; + @Listen("calcitePopoverClose") + calcitePopoverCloseHandler(): void { + this.open = false; + } + //-------------------------------------------------------------------------- // // Event Listeners @@ -1010,7 +1016,7 @@ export class InputTimePicker {!this.readOnly && this.renderToggleIcon(this.open)}
Date: Wed, 7 Aug 2024 23:03:09 -0700 Subject: [PATCH 20/62] Helper to manage focusTrap by determining if a click event occurred outside of the component. --- .../src/utils/focusTrapComponent.ts | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 461ba1391c2..75295554f15 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -14,8 +14,10 @@ export interface FocusTrapComponent { /** When `true`, disables the default close on escape behavior. */ escapeDisabled?: boolean; - /** When `true`, disables the closing of the component when clicked outside. */ - outsideCloseDisabled?: boolean; + /** + * When `true`, indicates the click has happened outside of the component and can therefore deactivate focusTrap. + */ + clickOutsideDeactivates?: (event: MouseEvent) => boolean; /** * When `true`, prevents focus trapping. @@ -69,7 +71,7 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec } const focusTrapOptions: FocusTrapOptions = { - clickOutsideDeactivates: !component.outsideCloseDisabled ?? true, + clickOutsideDeactivates: component.clickOutsideDeactivates ?? true, escapeDeactivates: !component.escapeDisabled ?? true, fallbackFocus: focusTrapNode, onDeactivate: () => component.onFocusTrapDeactivate?.(), @@ -131,3 +133,17 @@ export function deactivateFocusTrap( export function updateFocusTrapElements(component: FocusTrapComponent): void { component.focusTrap?.updateContainerElements(component.el); } + +/** + * Helper to manage focusTrap by determining if a click event occurred outside of the component. When `true`, the focus trap will deactivate. + * + * @param {FocusTrapComponent} component The FocusTrap component. + * @param [options] The FocusTrap activate options. + * @param event + */ +export function clickOutsideDeactivates(event: MouseEvent): boolean { + const path = event.composedPath(); + const isClickInside = path.some((el: EventTarget) => this.contains(el as Node)); + // If the click is inside the component, do not deactivate the focus trap + return !isClickInside; +} From 7418a25dce501639497dfbd17400b675aa81ff89 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 8 Aug 2024 13:58:24 -0700 Subject: [PATCH 21/62] WIP --- .../input-date-picker/input-date-picker.tsx | 5 +++++ .../src/utils/focusTrapComponent.ts | 16 +--------------- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index 8f8cb2f7674..d49727e6861 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -833,10 +833,12 @@ export class InputDatePicker } onBeforeOpen(): void { + console.log("onBeforeOpen"); this.calciteInputDatePickerBeforeOpen.emit(); } onOpen(): void { + console.log("onOpen"); activateFocusTrap(this, { onActivate: () => { if (this.focusOnOpen) { @@ -849,10 +851,12 @@ export class InputDatePicker } onBeforeClose(): void { + console.log("onBeforeClose"); this.calciteInputDatePickerBeforeClose.emit(); } onClose(): void { + console.log("onClose"); this.calciteInputDatePickerClose.emit(); deactivateFocusTrap(this); this.restoreInputFocus(); @@ -978,6 +982,7 @@ export class InputDatePicker connectFocusTrap(this, { focusTrapEl: el, focusTrapOptions: { + clickOutsideDeactivates: () => !event.composedPath().includes(el), initialFocus: false, setReturnFocus: false, }, diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 75295554f15..a5151bc8223 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -17,7 +17,7 @@ export interface FocusTrapComponent { /** * When `true`, indicates the click has happened outside of the component and can therefore deactivate focusTrap. */ - clickOutsideDeactivates?: (event: MouseEvent) => boolean; + clickOutsideDeactivates?: boolean | ((event: MouseEvent) => boolean); /** * When `true`, prevents focus trapping. @@ -133,17 +133,3 @@ export function deactivateFocusTrap( export function updateFocusTrapElements(component: FocusTrapComponent): void { component.focusTrap?.updateContainerElements(component.el); } - -/** - * Helper to manage focusTrap by determining if a click event occurred outside of the component. When `true`, the focus trap will deactivate. - * - * @param {FocusTrapComponent} component The FocusTrap component. - * @param [options] The FocusTrap activate options. - * @param event - */ -export function clickOutsideDeactivates(event: MouseEvent): boolean { - const path = event.composedPath(); - const isClickInside = path.some((el: EventTarget) => this.contains(el as Node)); - // If the click is inside the component, do not deactivate the focus trap - return !isClickInside; -} From a9dd5c0b9f1bf3a42e1d9cd59fef44f037fae3d4 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 8 Aug 2024 14:38:37 -0700 Subject: [PATCH 22/62] WIP --- .../src/components/input-date-picker/input-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index d49727e6861..e42cf8588e5 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -982,7 +982,7 @@ export class InputDatePicker connectFocusTrap(this, { focusTrapEl: el, focusTrapOptions: { - clickOutsideDeactivates: () => !event.composedPath().includes(el), + clickOutsideDeactivates: () => !event.composedPath().includes(this.el), initialFocus: false, setReturnFocus: false, }, From 58622a48db27e9f121b15bad6e58057cea42d610 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 9 Aug 2024 10:29:52 -0700 Subject: [PATCH 23/62] WIP test --- .../input-date-picker/input-date-picker.tsx | 24 +++++++++++++++++-- .../src/demos/input-date-picker.html | 6 ++--- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index e42cf8588e5..ac5b29b41bb 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -553,7 +553,7 @@ export class InputDatePicker }; return ( - + {this.localeData && (
@@ -954,6 +954,26 @@ export class InputDatePicker } }; + keyUpHandler = (event: KeyboardEvent): void => { + const { key, shiftKey } = event; + + if (key === "ArrowDown") { + console.log("Focused Element:", document.activeElement); + const focusedElement = this.el.shadowRoot?.activeElement; + console.log("Focused Element Tag Name:", focusedElement?.tagName); + } else if (key === "Tab" && shiftKey) { + console.log("Shift + Tab pressed"); + console.log("Focused Element:", document.activeElement); + const focusedElementShiftTab = this.el.shadowRoot?.activeElement; + console.log("Focused Element Tag Name:", focusedElementShiftTab?.tagName); + } else if (key === "Tab") { + console.log("Tab pressed"); + console.log("Focused Element:", document.activeElement); + const focusedElementTab = this.el.shadowRoot?.activeElement; + console.log("Focused Element Tag Name:", focusedElementTab?.tagName); + } + }; + startInputFocus = (): void => { this.focusedInput = "start"; }; @@ -980,7 +1000,7 @@ export class InputDatePicker setDatePickerRef = (el: HTMLCalciteDatePickerElement): void => { this.datePickerEl = el; connectFocusTrap(this, { - focusTrapEl: el, + focusTrapEl: this.el, focusTrapOptions: { clickOutsideDeactivates: () => !event.composedPath().includes(this.el), initialFocus: false, diff --git a/packages/calcite-components/src/demos/input-date-picker.html b/packages/calcite-components/src/demos/input-date-picker.html index 6f85b24b257..ca00672129f 100644 --- a/packages/calcite-components/src/demos/input-date-picker.html +++ b/packages/calcite-components/src/demos/input-date-picker.html @@ -53,10 +53,8 @@
Standard
- - Input Date Picker Label - - + +
next sibling
From 0376e14874fa9fe5c31d36e4ce05fb3975f63547 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 9 Aug 2024 11:18:56 -0700 Subject: [PATCH 24/62] add focus trap to dialog --- .../src/components/dialog/dialog.e2e.ts | 6 +++--- .../src/components/dialog/dialog.tsx | 19 ++++--------------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 8e83bdcd82e..9c3d34a3c9e 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -598,18 +598,18 @@ describe("calcite-dialog", () => { const dialog = await page.find("calcite-dialog"); await page.waitForChanges(); + await page.waitForChanges(); expect(dialog).toHaveAttribute("open"); - expect(dialog).toHaveAttribute("open"); + await page.waitForChanges(); await page.keyboard.press("Escape"); await page.waitForChanges(); - expect(dialog).not.toHaveAttribute("open"); + await page.waitForChanges(); expect(dialog).not.toHaveAttribute("open"); dialog.setProperty("open", true); await page.waitForChanges(); expect(dialog).toHaveAttribute("open"); - expect(dialog).toHaveAttribute("open"); }); it("closes and allows re-opening when Close button is clicked", async () => { diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index dc889ec53f4..53e46c20b04 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -5,7 +5,6 @@ import { EventEmitter, h, Host, - Listen, Method, Prop, State, @@ -312,20 +311,6 @@ export class Dialog this.handleMutationObserver(), ); - //-------------------------------------------------------------------------- - // - // Event Listeners - // - //-------------------------------------------------------------------------- - - @Listen("keydown", { target: "window" }) - handleEscape(event: KeyboardEvent): void { - if (this.open && event.key === "Escape" && !event.defaultPrevented) { - this.open = false; - event.preventDefault(); - } - } - //-------------------------------------------------------------------------- // // Events @@ -416,6 +401,10 @@ export class Dialog deactivateFocusTrap(this); } + onFocusTrapDeactivate(): void { + this.open = false; + } + @Watch("open") toggleDialog(value: boolean): void { if (this.ignoreOpenChange) { From f11fb0f1581d14687212d3dda93157ca7d817b8a Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 9 Aug 2024 11:36:19 -0700 Subject: [PATCH 25/62] WIP --- packages/calcite-components/src/components/dialog/dialog.e2e.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 9c3d34a3c9e..e6dcb061da6 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -328,7 +328,9 @@ describe("calcite-dialog", () => { dialog.setProperty("open", true); await page.waitForChanges(); + await page.waitForChanges(); expect(await page.find(`calcite-dialog >>> .${CSS.containerOpen}`)).toBeDefined(); + await page.waitForChanges(); await page.keyboard.press("Escape"); await page.waitForChanges(); From 31764b258277db12a8e39b48febd2bca997d774e Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 9 Aug 2024 13:18:15 -0700 Subject: [PATCH 26/62] WIP --- .../calcite-components/src/components/modal/modal.e2e.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index c2e55254999..c67992a3437 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -420,13 +420,16 @@ describe("calcite-modal", () => { const page = await newE2EPage(); await page.setContent(``); await skipAnimations(page); + const modal = await page.find("calcite-modal"); await page.waitForChanges(); await page.waitForEvent("calciteModalOpen"); + await page.waitForChanges(); expect(modal).toHaveAttribute("open"); - await page.keyboard.press("Escape"); + await page.waitForChanges(); + await page.waitForChanges(); - await page.waitForEvent("calciteModalClose"); + await page.keyboard.press("Escape"); await page.waitForChanges(); expect(modal).not.toHaveAttribute("open"); From a7cebb67c796cdd17f4089460487ff2618a6afa1 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 9 Aug 2024 16:05:28 -0700 Subject: [PATCH 27/62] WIP should not toggle popovers with triggerDisabled --- .../src/components/popover/popover.e2e.ts | 13 ++----------- .../src/components/popover/popover.tsx | 18 +++++++++++++++++- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts index f8887c601ec..7ccad41d750 100644 --- a/packages/calcite-components/src/components/popover/popover.e2e.ts +++ b/packages/calcite-components/src/components/popover/popover.e2e.ts @@ -524,33 +524,24 @@ describe("calcite-popover", () => { ); const popover = await page.find("calcite-popover"); - expect(await popover.getProperty("open")).toBe(true); const ref = await page.find("#ref"); - await ref.click(); - await page.waitForChanges(); - expect(await popover.getProperty("open")).toBe(true); + await page.waitForChanges(); const outsideNode = await page.find("#outsideNode"); - await outsideNode.click(); - await page.waitForChanges(); - + await page.waitForChanges(); expect(await popover.getProperty("open")).toBe(true); popover.setProperty("triggerDisabled", false); - await page.waitForChanges(); - await ref.click(); - await page.waitForChanges(); - expect(await popover.getProperty("open")).toBe(false); }); diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index 77e9d394880..19b16c26181 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -292,7 +292,23 @@ export class Popover this.setFilteredPlacements(); connectLocalized(this); connectMessages(this); - connectFocusTrap(this); + connectFocusTrap(this, { + focusTrapEl: this.el, + focusTrapOptions: { + clickOutsideDeactivates: (event: MouseEvent) => { + const isClickOutside = !event.composedPath().includes(this.el); + const isReferenceElementInPath = + this.referenceElement instanceof EventTarget && + event.composedPath().includes(this.referenceElement); + + if (this.triggerDisabled && isReferenceElementInPath) { + return false; + } + + return isClickOutside; + }, + }, + }); // we set up the ref element in the next frame to ensure PopoverManager // event handlers are invoked after connect (mainly for `components` output target) From 327aa381ecadee7dd418a1b3c8821d94a39e29b7 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 20 Aug 2024 12:13:39 -0700 Subject: [PATCH 28/62] WIP popover --- .../src/components/popover/popover.e2e.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts index 7ccad41d750..4f9f0fcf3e1 100644 --- a/packages/calcite-components/src/components/popover/popover.e2e.ts +++ b/packages/calcite-components/src/components/popover/popover.e2e.ts @@ -10,6 +10,7 @@ import { renders, t9n, } from "../../tests/commonTests"; +import { skipAnimations } from "../../tests/utils"; import { CSS } from "./resources"; describe("calcite-popover", () => { @@ -522,6 +523,7 @@ describe("calcite-popover", () => { Hello World
Button
`, ); + await skipAnimations(page); const popover = await page.find("calcite-popover"); expect(await popover.getProperty("open")).toBe(true); @@ -535,7 +537,6 @@ describe("calcite-popover", () => { const outsideNode = await page.find("#outsideNode"); await outsideNode.click(); await page.waitForChanges(); - await page.waitForChanges(); expect(await popover.getProperty("open")).toBe(true); popover.setProperty("triggerDisabled", false); @@ -620,8 +621,7 @@ describe("calcite-popover", () => {
referenceElement
`, ); - - await page.waitForChanges(); + await skipAnimations(page); const popover = await page.find(`calcite-popover`); const ref = await page.find("#ref"); From 785fed5ae9dbcb193756299771bff4e514614fb0 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 20 Aug 2024 14:52:46 -0700 Subject: [PATCH 29/62] WIP popover --- .../src/components/dialog/dialog.tsx | 1 + .../input-time-picker/input-time-picker.tsx | 2 ++ .../src/components/popover/popover.tsx | 13 +++---------- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 7373fa35b6c..7b4f1c9622d 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -5,6 +5,7 @@ import { EventEmitter, h, Host, + Listen, Method, Prop, State, diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 8190fcfa921..cc970859cc9 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -378,6 +378,8 @@ export class InputTimePicker private calciteTimePickerEl: HTMLCalciteTimePickerElement; + private focusOnOpen: false; + focusTrap: FocusTrap; private dialogId = `time-picker-dialog--${guid()}`; diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index 19b16c26181..bf6d0119565 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -295,17 +295,10 @@ export class Popover connectFocusTrap(this, { focusTrapEl: this.el, focusTrapOptions: { + allowOutsideClick: true, clickOutsideDeactivates: (event: MouseEvent) => { - const isClickOutside = !event.composedPath().includes(this.el); - const isReferenceElementInPath = - this.referenceElement instanceof EventTarget && - event.composedPath().includes(this.referenceElement); - - if (this.triggerDisabled && isReferenceElementInPath) { - return false; - } - - return isClickOutside; + const outsideClick = !event.composedPath().includes(this.el); + return this.autoClose && outsideClick; }, }, }); From 84f881eb07a7a74ec0d57c9c5a41c11bf96f8141 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 20 Aug 2024 17:12:45 -0700 Subject: [PATCH 30/62] WIP popover --- .../src/components/popover/popover.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index bf6d0119565..677f287e03b 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -297,8 +297,15 @@ export class Popover focusTrapOptions: { allowOutsideClick: true, clickOutsideDeactivates: (event: MouseEvent) => { + const isReferenceElementInPath = + this.referenceElement instanceof EventTarget && + event.composedPath().includes(this.referenceElement); + const outsideClick = !event.composedPath().includes(this.el); - return this.autoClose && outsideClick; + return ( + (this.autoClose && outsideClick && this.triggerDisabled) || + (this.autoClose && outsideClick && isReferenceElementInPath) + ); }, }, }); From 84c20d82d813984ba5b1b543fa8680ca12d9b7b8 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 21 Aug 2024 14:13:04 -0700 Subject: [PATCH 31/62] WIP input-date-picker --- .../input-date-picker/input-date-picker.tsx | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index 3da78151530..dac9d8c2ebf 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -554,7 +554,7 @@ export class InputDatePicker }; return ( - + {this.localeData && (
@@ -977,26 +977,6 @@ export class InputDatePicker } }; - keyUpHandler = (event: KeyboardEvent): void => { - const { key, shiftKey } = event; - - if (key === "ArrowDown") { - console.log("Focused Element:", document.activeElement); - const focusedElement = this.el.shadowRoot?.activeElement; - console.log("Focused Element Tag Name:", focusedElement?.tagName); - } else if (key === "Tab" && shiftKey) { - console.log("Shift + Tab pressed"); - console.log("Focused Element:", document.activeElement); - const focusedElementShiftTab = this.el.shadowRoot?.activeElement; - console.log("Focused Element Tag Name:", focusedElementShiftTab?.tagName); - } else if (key === "Tab") { - console.log("Tab pressed"); - console.log("Focused Element:", document.activeElement); - const focusedElementTab = this.el.shadowRoot?.activeElement; - console.log("Focused Element Tag Name:", focusedElementTab?.tagName); - } - }; - startInputFocus = (): void => { this.focusedInput = "start"; }; @@ -1023,9 +1003,10 @@ export class InputDatePicker setDatePickerRef = (el: HTMLCalciteDatePickerElement): void => { this.datePickerEl = el; connectFocusTrap(this, { - focusTrapEl: this.el, + focusTrapEl: el, focusTrapOptions: { - clickOutsideDeactivates: () => !event.composedPath().includes(this.el), + allowOutsideClick: true, + clickOutsideDeactivates: false, initialFocus: false, setReturnFocus: false, }, From c3e5da47e69aecbcdaa751092a90d75a8579703a Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 21 Aug 2024 16:41:10 -0700 Subject: [PATCH 32/62] test cleanup --- .../components/input-date-picker/input-date-picker.e2e.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index 78c64208018..a95ea7651e5 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -576,13 +576,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInput.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(9); expect(await isCalendarVisible(calendar, "start")).toBe(true); await endInputToggle.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(9); expect(await isCalendarVisible(calendar, "end")).toBe(true); @@ -591,13 +589,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInputToggle.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(10); expect(await isCalendarVisible(calendar, "start")).toBe(true); await endInput.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(10); expect(await isCalendarVisible(calendar, "end")).toBe(true); @@ -610,13 +606,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInput.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(11); expect(await isCalendarVisible(calendar, "end")).toBe(true); await startInputToggle.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(11); expect(await isCalendarVisible(calendar, "start")).toBe(true); @@ -625,14 +619,12 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInputToggle.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(12); expect(await isCalendarVisible(calendar, "end")).toBe(true); await resetFocus(page); await startInput.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(12); expect(await isCalendarVisible(calendar, "start")).toBe(true); }); From ef5ad2abd545beafab589525370d712d607cd18f Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 21 Aug 2024 16:52:17 -0700 Subject: [PATCH 33/62] cleanup --- .../src/components/input-date-picker/input-date-picker.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index dac9d8c2ebf..b46bf86f3a7 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -856,12 +856,10 @@ export class InputDatePicker } onBeforeOpen(): void { - console.log("onBeforeOpen"); this.calciteInputDatePickerBeforeOpen.emit(); } onOpen(): void { - console.log("onOpen"); activateFocusTrap(this, { onActivate: () => { if (this.focusOnOpen) { @@ -874,12 +872,10 @@ export class InputDatePicker } onBeforeClose(): void { - console.log("onBeforeClose"); this.calciteInputDatePickerBeforeClose.emit(); } onClose(): void { - console.log("onClose"); this.calciteInputDatePickerClose.emit(); deactivateFocusTrap(this); this.restoreInputFocus(); From f7dd170dcd6e10d133db2be59bdf0d150dc80a92 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 23 Aug 2024 15:42:16 -0700 Subject: [PATCH 34/62] WIP --- .../input-date-picker/input-date-picker.e2e.ts | 12 +----------- .../input-time-picker/input-time-picker.e2e.ts | 13 +------------ 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index a95ea7651e5..5b5029d5d3c 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -14,7 +14,7 @@ import { } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS as MONTH_HEADER_CSS } from "../date-picker-month-header/resources"; -import { getFocusedElementProp, GlobalTestProps, skipAnimations } from "../../tests/utils"; +import { getFocusedElementProp, skipAnimations } from "../../tests/utils"; import { CSS } from "./resources"; const animationDurationInMs = 200; @@ -353,16 +353,6 @@ describe("calcite-input-date-picker", () => { await skipAnimations(page); await page.waitForChanges(); inputDatePicker = await page.find("calcite-input-date-picker"); - type InputDatePickerEventOrderWindow = GlobalTestProps<{ events: string[] }>; - - await page.$eval("calcite-input-date-picker", (sheet: HTMLCalciteInputDatePickerElement) => { - const receivedEvents: string[] = []; - (window as InputDatePickerEventOrderWindow).events = receivedEvents; - - ["calciteInputDatePickerOpen", "calciteInputDatePickerClose"].forEach((eventType) => { - sheet.addEventListener(eventType, (event) => receivedEvents.push(event.type)); - }); - }); }); it("toggles the date picker when clicked", async () => { diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts index c1eebeba8a1..fff3cf8d2ab 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts @@ -12,7 +12,7 @@ import { renders, t9n, } from "../../tests/commonTests"; -import { getFocusedElementProp, GlobalTestProps, skipAnimations, waitForAnimationFrame } from "../../tests/utils"; +import { getFocusedElementProp, skipAnimations, waitForAnimationFrame } from "../../tests/utils"; import { html } from "../../../support/formatting"; import { openClose } from "../../tests/commonTests"; @@ -866,17 +866,6 @@ describe("calcite-input-time-picker", () => { await skipAnimations(page); const popover = await page.find("calcite-input-time-picker >>> calcite-popover"); - type InputTimePickerEventOrderWindow = GlobalTestProps<{ events: string[] }>; - - await page.$eval("calcite-input-time-picker", (sheet: HTMLCalciteInputTimePickerElement) => { - const receivedEvents: string[] = []; - (window as InputTimePickerEventOrderWindow).events = receivedEvents; - - ["calciteInputTimePickerOpen", "calciteInputTimePickerClose"].forEach((eventType) => { - sheet.addEventListener(eventType, (event) => receivedEvents.push(event.type)); - }); - }); - await page.keyboard.press("Tab"); expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-TIME-PICKER"); From a4932755e440902f1ce9e1c641477379a1466a6c Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 23 Aug 2024 16:28:16 -0700 Subject: [PATCH 35/62] WIP --- .../components/input-time-picker/input-time-picker.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index cc970859cc9..54803b53ff1 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -378,8 +378,6 @@ export class InputTimePicker private calciteTimePickerEl: HTMLCalciteTimePickerElement; - private focusOnOpen: false; - focusTrap: FocusTrap; private dialogId = `time-picker-dialog--${guid()}`; @@ -567,10 +565,7 @@ export class InputTimePicker activateFocusTrap(this, { onActivate: () => { - if (this.focusOnOpen) { - this.calciteTimePickerEl.setFocus(); - this.focusOnOpen = false; - } + this.calciteTimePickerEl.setFocus(); }, }); }; @@ -587,7 +582,6 @@ export class InputTimePicker deactivateFocusTrap(this, { onDeactivate: () => { this.calciteInputEl.setFocus(); - this.focusOnOpen = false; }, }); this.open = false; From 6d3ed518a1a27b8e0f25a7d832feba06b1b8e3cf Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 23 Aug 2024 16:41:36 -0700 Subject: [PATCH 36/62] WIP --- packages/calcite-components/src/demos/input-date-picker.html | 5 ++++- packages/calcite-components/src/utils/focusTrapComponent.ts | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/demos/input-date-picker.html b/packages/calcite-components/src/demos/input-date-picker.html index ca00672129f..ceeea33cb3c 100644 --- a/packages/calcite-components/src/demos/input-date-picker.html +++ b/packages/calcite-components/src/demos/input-date-picker.html @@ -53,7 +53,10 @@
Standard
- + + Input Date Picker Label + +
next sibling
diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index a5151bc8223..f385e29509e 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -72,7 +72,7 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec const focusTrapOptions: FocusTrapOptions = { clickOutsideDeactivates: component.clickOutsideDeactivates ?? true, - escapeDeactivates: !component.escapeDisabled ?? true, + escapeDeactivates: !component.escapeDisabled, fallbackFocus: focusTrapNode, onDeactivate: () => component.onFocusTrapDeactivate?.(), setReturnFocus: (el) => { From d8d04126a05a57a0f4199adba0887d6306bcd94b Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 23 Aug 2024 16:57:45 -0700 Subject: [PATCH 37/62] WIP --- .../src/components/popover/popover.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index 677f287e03b..845d9604377 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -297,14 +297,16 @@ export class Popover focusTrapOptions: { allowOutsideClick: true, clickOutsideDeactivates: (event: MouseEvent) => { + const path = event.composedPath(); const isReferenceElementInPath = - this.referenceElement instanceof EventTarget && - event.composedPath().includes(this.referenceElement); + this.referenceElement instanceof EventTarget && path.includes(this.referenceElement); + + const outsideClick = !path.includes(this.el); + const shouldCloseOnOutsideClick = this.autoClose && outsideClick; - const outsideClick = !event.composedPath().includes(this.el); return ( - (this.autoClose && outsideClick && this.triggerDisabled) || - (this.autoClose && outsideClick && isReferenceElementInPath) + (shouldCloseOnOutsideClick && this.triggerDisabled) || + (shouldCloseOnOutsideClick && isReferenceElementInPath) ); }, }, From 9f18ccc24411d483657d81e4333a910372e69bdd Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 23 Aug 2024 17:16:32 -0700 Subject: [PATCH 38/62] WIP --- .../src/components/modal/modal.tsx | 15 +++++++++++++++ .../src/components/sheet/sheet.tsx | 15 +++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 039f1e23394..c87896c6e0b 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -5,6 +5,7 @@ import { EventEmitter, h, Host, + Listen, Method, Prop, State, @@ -397,6 +398,20 @@ export class Modal @State() defaultMessages: ModalMessages; + //-------------------------------------------------------------------------- + // + // Event Listeners + // + //-------------------------------------------------------------------------- + + @Listen("keydown", { target: "window" }) + handleEscape(event: KeyboardEvent): void { + if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) { + this.open = false; + event.preventDefault(); + } + } + //-------------------------------------------------------------------------- // // Events diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index 286bbaa6844..0c065f675a3 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -5,6 +5,7 @@ import { EventEmitter, h, Host, + Listen, Method, Prop, VNode, @@ -217,6 +218,20 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo this.handleMutationObserver(), ); + //-------------------------------------------------------------------------- + // + // Event Listeners + // + //-------------------------------------------------------------------------- + + @Listen("keydown", { target: "window" }) + handleEscape(event: KeyboardEvent): void { + if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) { + this.open = false; + event.preventDefault(); + } + } + //-------------------------------------------------------------------------- // // Events From 1e67bf8d3c6bd48eabc8144796a866a0bafb8f17 Mon Sep 17 00:00:00 2001 From: eliza Date: Sat, 24 Aug 2024 18:14:18 -0700 Subject: [PATCH 39/62] Utilities for implementing FocusTrapComponent are no longer necessary for input-time-picker --- .../input-time-picker/input-time-picker.tsx | 31 ------------------- 1 file changed, 31 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 54803b53ff1..87e93e3a3ff 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -12,7 +12,6 @@ import { VNode, Watch, } from "@stencil/core"; -import { FocusTrap } from "focus-trap"; import dayjs from "dayjs/esm"; import customParseFormat from "dayjs/esm/plugin/customParseFormat"; import localeData from "dayjs/esm/plugin/localeData"; @@ -52,11 +51,6 @@ import { numberStringFormatter, SupportedLocale, } from "../../utils/locale"; -import { - activateFocusTrap, - deactivateFocusTrap, - FocusTrapComponent, -} from "../../utils/focusTrapComponent"; import { formatTimePart, formatTimeString, @@ -162,7 +156,6 @@ interface DayjsTimeParts { export class InputTimePicker implements FloatingUIComponent, - FocusTrapComponent, FormComponent, InteractiveComponent, LabelableComponent, @@ -198,15 +191,6 @@ export class InputTimePicker */ @Prop({ reflect: true }) focusTrapDisabled = false; - @Watch("focusTrapDisabled") - handleFocusTrapDisabled(focusTrapDisabled: boolean): void { - if (!this.open) { - return; - } - - focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this); - } - /** * The `id` of the form that will be associated with the component. * @@ -378,8 +362,6 @@ export class InputTimePicker private calciteTimePickerEl: HTMLCalciteTimePickerElement; - focusTrap: FocusTrap; - private dialogId = `time-picker-dialog--${guid()}`; private localeConfig: ILocale; @@ -562,12 +544,6 @@ export class InputTimePicker private popoverOpenHandler = (event: CustomEvent): void => { event.stopPropagation(); this.calciteInputTimePickerOpen.emit(); - - activateFocusTrap(this, { - onActivate: () => { - this.calciteTimePickerEl.setFocus(); - }, - }); }; private popoverBeforeCloseHandler = (event: CustomEvent): void => { @@ -578,12 +554,6 @@ export class InputTimePicker private popoverCloseHandler = (event: CustomEvent): void => { event.stopPropagation(); this.calciteInputTimePickerClose.emit(); - - deactivateFocusTrap(this, { - onDeactivate: () => { - this.calciteInputEl.setFocus(); - }, - }); this.open = false; }; @@ -984,7 +954,6 @@ export class InputTimePicker disconnectLabel(this); disconnectForm(this); disconnectLocalized(this); - deactivateFocusTrap(this); disconnectMessages(this); } From 3e94a4d94fd4bf2233371264d4f79fefd9c10199 Mon Sep 17 00:00:00 2001 From: eliza Date: Sat, 24 Aug 2024 18:37:03 -0700 Subject: [PATCH 40/62] WIP --- .../components/input-date-picker/input-date-picker.e2e.ts | 8 -------- .../calcite-components/src/components/sheet/sheet.e2e.ts | 2 -- 2 files changed, 10 deletions(-) diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index 5b5029d5d3c..0133e0c64cd 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -356,25 +356,17 @@ describe("calcite-input-date-picker", () => { }); it("toggles the date picker when clicked", async () => { - const openSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerOpen"); - const closeSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerClose"); - let calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); - expect(await calendar.isVisible()).toBe(false); await inputDatePicker.click(); - await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(1); calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); expect(await calendar.isVisible()).toBe(true); await inputDatePicker.click(); - await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(1); calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); expect(await calendar.isVisible()).toBe(false); diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts index 2bbfbf60322..dcd492599b7 100644 --- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts +++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts @@ -198,8 +198,6 @@ describe("calcite-sheet properties", () => { await page.keyboard.press("Escape"); await page.waitForChanges(); - await page.waitForChanges(); - await page.waitForTimeout(500); expect(mockCallBack).toHaveBeenCalledTimes(1); expect(await sheet.getProperty("opened")).toBe(false); From 16c7f1a1f7ff35d0bb78265344974fee8f68c356 Mon Sep 17 00:00:00 2001 From: eliza Date: Sat, 24 Aug 2024 18:56:05 -0700 Subject: [PATCH 41/62] WIP --- .../calcite-components/src/components/dialog/dialog.e2e.ts | 6 +----- .../calcite-components/src/components/modal/modal.e2e.ts | 6 ------ .../calcite-components/src/components/sheet/sheet.e2e.ts | 1 - 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 341b4af679c..760da84924a 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -391,13 +391,11 @@ describe("calcite-dialog", () => { dialog.setProperty("open", true); await page.waitForChanges(); - await page.waitForChanges(); expect(await page.find(`calcite-dialog >>> .${CSS.containerOpen}`)).toBeDefined(); - await page.waitForChanges(); await page.keyboard.press("Escape"); await page.waitForChanges(); - await page.waitForChanges(); + expect(mockCallBack).toHaveBeenCalledTimes(2); expect(await page.find(`calcite-dialog >>> .${CSS.containerOpen}`)).toBeNull(); }); @@ -663,13 +661,11 @@ describe("calcite-dialog", () => { const dialog = await page.find("calcite-dialog"); await page.waitForChanges(); - await page.waitForChanges(); expect(dialog).toHaveAttribute("open"); await page.waitForChanges(); await page.keyboard.press("Escape"); await page.waitForChanges(); - await page.waitForChanges(); expect(dialog).not.toHaveAttribute("open"); dialog.setProperty("open", true); diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index ca6ccc126bf..cebac5ab371 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -413,7 +413,6 @@ describe("calcite-modal", () => { modal.setProperty("open", true); await page.waitForChanges(); - await page.waitForChanges(); expect(await modal.isVisible()).toBe(true); }); @@ -424,11 +423,7 @@ describe("calcite-modal", () => { const modal = await page.find("calcite-modal"); await page.waitForChanges(); - await page.waitForEvent("calciteModalOpen"); - await page.waitForChanges(); expect(modal).toHaveAttribute("open"); - await page.waitForChanges(); - await page.waitForChanges(); await page.keyboard.press("Escape"); await page.waitForChanges(); @@ -436,7 +431,6 @@ describe("calcite-modal", () => { await modal.setProperty("open", true); await page.waitForChanges(); - await page.waitForChanges(); expect(modal).toHaveAttribute("open"); }); diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts index dcd492599b7..5ea1ec4c264 100644 --- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts +++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts @@ -192,7 +192,6 @@ describe("calcite-sheet properties", () => { ).beforeClose), ); await skipAnimations(page); - await page.waitForChanges(); await page.waitForEvent("calciteSheetOpen"); expect(await sheet.getProperty("opened")).toBe(true); From 5d5b90b4bc80a1cd61d7db1aee714d7c3953c00d Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 26 Aug 2024 08:40:52 -0700 Subject: [PATCH 42/62] WIP --- .../src/components/input-time-picker/input-time-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 87e93e3a3ff..99bf9aea920 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -994,7 +994,7 @@ export class InputTimePicker {!this.readOnly && this.renderToggleIcon(this.open)}
Date: Sun, 1 Sep 2024 09:24:22 -0700 Subject: [PATCH 43/62] make clickOutsideDeactivates depend on outsideCloseDisabled value --- .../calcite-components/src/components/dialog/dialog.tsx | 6 +++++- packages/calcite-components/src/components/modal/modal.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 6e0d1dc5541..4f3e01f4ffa 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -212,7 +212,11 @@ export class Dialog this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); connectLocalized(this); connectMessages(this); - connectFocusTrap(this); + connectFocusTrap(this, { + focusTrapOptions: { + clickOutsideDeactivates: !this.outsideCloseDisabled, + }, + }); } disconnectedCallback(): void { diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index c87896c6e0b..6be4297b241 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -199,7 +199,11 @@ export class Modal connectConditionalSlotComponent(this); connectLocalized(this); connectMessages(this); - connectFocusTrap(this); + connectFocusTrap(this, { + focusTrapOptions: { + clickOutsideDeactivates: !this.outsideCloseDisabled, + }, + }); } disconnectedCallback(): void { From 829d93bb21fd96192dffa87c2f7d1f677b135be0 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 6 Sep 2024 10:50:52 -0700 Subject: [PATCH 44/62] remove clickOutsideDeactivates option from focus-trap since scrim handles the closing --- packages/calcite-components/src/components/dialog/dialog.tsx | 2 +- packages/calcite-components/src/components/modal/modal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 8aa33f73148..2947b9f6735 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -233,7 +233,7 @@ export class Dialog connectMessages(this); connectFocusTrap(this, { focusTrapOptions: { - clickOutsideDeactivates: !this.outsideCloseDisabled, + clickOutsideDeactivates: false, }, }); connectFocusTrap(this); diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index 7615ff8009c..49fb0a787b0 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -200,7 +200,7 @@ export class Modal connectMessages(this); connectFocusTrap(this, { focusTrapOptions: { - clickOutsideDeactivates: !this.outsideCloseDisabled, + clickOutsideDeactivates: false, }, }); } From 76a4cf72b9e33f6e3dc6dba02bd0a9273d5ab3f4 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 24 Sep 2024 13:57:43 -0700 Subject: [PATCH 45/62] cleanup --- .../calcite-components/src/components.d.ts | 31362 +++++++--------- .../src/tests/globalStyles.e2e.ts | 2 +- 2 files changed, 14188 insertions(+), 17176 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index dfb0beae075..68d4f03e98e 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -5,33 +5,12 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { - Alignment, - Appearance, - CollapseDirection, - FlipContext, - IconType, - Kind, - Layout, - LogicalFlowPosition, - Position, - Scale, - SelectionAppearance as SelectionAppearance1, - SelectionMode, - Status, - Width, -} from "./components/interfaces"; +import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; import { ActionMessages } from "./components/action/assets/action/t9n"; -import { - FlipPlacement, - LogicalPlacement, - MenuPlacement, - OverlayPositioning, - ReferenceElement, -} from "./utils/floating-ui"; +import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; @@ -101,12 +80,7 @@ import { DisplayMode } from "./components/sheet/interfaces"; 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 { - StepperItemChangeEventDetail, - StepperItemEventDetail, - StepperItemKeyEventDetail, - StepperLayout, -} from "./components/stepper/interfaces"; +import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; @@ -114,13 +88,7 @@ import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; -import { - RowType, - TableInteractionMode, - TableLayout, - TableRowFocusEvent, - TableSelectionDisplay, -} from "./components/table/interfaces"; +import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; import { TableMessages } from "./components/table/assets/table/t9n"; import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; @@ -132,33 +100,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, - CollapseDirection, - FlipContext, - IconType, - Kind, - Layout, - LogicalFlowPosition, - Position, - Scale, - SelectionAppearance as SelectionAppearance1, - SelectionMode, - Status, - Width, -} from "./components/interfaces"; +export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; export { ActionMessages } from "./components/action/assets/action/t9n"; -export { - FlipPlacement, - LogicalPlacement, - MenuPlacement, - OverlayPositioning, - ReferenceElement, -} from "./utils/floating-ui"; +export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; @@ -228,12 +175,7 @@ export { DisplayMode } from "./components/sheet/interfaces"; 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 { - StepperItemChangeEventDetail, - StepperItemEventDetail, - StepperItemKeyEventDetail, - StepperLayout, -} from "./components/stepper/interfaces"; +export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; @@ -241,13 +183,7 @@ export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; -export { - RowType, - TableInteractionMode, - TableLayout, - TableRowFocusEvent, - TableSelectionDisplay, -} from "./components/table/interfaces"; +export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; export { TableMessages } from "./components/table/assets/table/t9n"; export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; @@ -260,17152 +196,14228 @@ 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: Extract<"start" | "end", Position>; - /** - * Specifies the type of the icon in the header. - */ - iconType: Extract<"chevron" | "caret" | "plus-minus", IconType>; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. - */ - 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: IconNameOrString; - /** - * 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: Extract<"start" | "end", Position>; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart: IconNameOrString; - /** - * Specifies the type of the icon in the header inherited from the `calcite-accordion`. - */ - iconType: Extract<"chevron" | "caret" | "plus-minus", IconType>; - /** - * Specifies the size of the component inherited from the `calcite-accordion`. - */ - scale: Scale; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - 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. - * @deprecated No longer necessary. - */ - compact: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies an icon to display. - */ - icon: IconNameOrString; - /** - * 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 `calcite-action-group`. - */ - actionsEndGroupLabel: string; - /** - * When `true`, the expand-toggling behavior is disabled. - */ - expandDisabled: boolean; - /** - * When `true`, the component is expanded. - */ - expanded: boolean; - /** - * Specifies 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; - /** - * 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; - /** - * Arranges the component depending on the element's `dir` property. - */ - position: Extract<"start" | "end", 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; - /** - * Accessible name for the component. - */ - label: string; - /** - * Indicates the layout of the component. - * @deprecated Use the `layout` property on the component's parent instead. - */ - layout: Extract<"horizontal" | "vertical" | "grid", 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; - /** - * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements: FlipPlacement[]; - /** - * 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 `calcite-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: Extract<"horizontal" | "vertical" | "grid", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; + interface CalciteAccordion { + /** + * Specifies the appearance of the component. + */ + "appearance": Extract<"solid" | "transparent", Appearance>; + /** + * Specifies the placement of the icon in the header. + */ + "iconPosition": Extract<"start" | "end", Position>; + /** + * Specifies the type of the icon in the header. + */ + "iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. + */ + "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": IconNameOrString; + /** + * 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": Extract<"start" | "end", Position>; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart": IconNameOrString; + /** + * Specifies the type of the icon in the header inherited from the `calcite-accordion`. + */ + "iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>; + /** + * Specifies the size of the component inherited from the `calcite-accordion`. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + 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. + * @deprecated No longer necessary. + */ + "compact": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies an icon to display. + */ + "icon": IconNameOrString; + /** + * 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 `calcite-action-group`. + */ + "actionsEndGroupLabel": string; + /** + * When `true`, the expand-toggling behavior is disabled. + */ + "expandDisabled": boolean; + /** + * When `true`, the component is expanded. + */ + "expanded": boolean; + /** + * Specifies 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; + /** + * 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; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position": Extract<"start" | "end", 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; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Indicates the layout of the component. + * @deprecated Use the `layout` property on the component's parent instead. + */ + "layout": Extract<"horizontal" | "vertical" | "grid", 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; + /** + * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements": FlipPlacement[]; + /** + * 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 `calcite-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": Extract<"horizontal" | "vertical" | "grid", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ActionPadMessages; + /** + * 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; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position": Extract<"start" | "end", Position>; + /** + * Specifies the size of the expand `calcite-action`. + */ + "scale": Scale; + /** + * Sets focus on the component's first focusable element. + */ + "setFocus": () => Promise; + } + interface CalciteAlert { + /** + * This internal property, managed by the AlertManager, is used to inform the component if it is the active open Alert. + */ + "active": boolean; + /** + * 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; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded": boolean; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon": IconNameOrString | 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, which 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; + /** + * This internal property, managed by the AlertManager, is used to inform the component of how many alerts are currently open. + */ + "openAlertCount": number; + /** + * Specifies the placement of the component. + */ + "placement": MenuPlacement; + /** + * Specifies the ordering priority of the component when opened. + */ + "queue": AlertQueue; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component's "close" button, the first focusable item. + * @returns + */ + "setFocus": () => Promise; + } + 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "headingLevel": HeadingLevel; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * 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; + /** + * 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; + /** + * Sets focus on the component's first tabbable element. + */ + "setFocus": () => Promise; + /** + * Displays a status-related indicator icon. + * @deprecated Use `icon-start` instead. + */ + "status": Status; + } + interface CalciteBlockSection { + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * 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. + * @deprecated Use `icon-start` instead. + */ + "status": Status; + /** + * The component header text. + */ + "text": string; + /** + * Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a 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; + /** + * 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; + /** + * 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": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * Specifies the kind of the component, which will apply to the 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 component. + * @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`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Accessible name for the component. + */ + "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": CardMessages; + /** + * When `true`, the component is selectable. + * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead. + */ + "selectable": boolean; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * This internal property, managed by a containing `calcite-card-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; + /** + * Sets the placement of the thumbnail defined in the `thumbnail` slot. + */ + "thumbnailPosition": LogicalFlowPosition; + } + interface CalciteCardGroup { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems": HTMLCalciteCardElement[]; + /** + * 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 CalciteCarousel { + /** + * Specifies how and if the "previous" and "next" arrows are displayed. + */ + "arrowType": ArrowType; + /** + * When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. + */ + "autoplay": AutoplayType; + /** + * When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. + */ + "autoplayDuration": number; + /** + * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items. + */ + "controlOverlay": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * 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": CarouselMessages; + /** + * Made into a prop for testing purposes only + */ + "paused": boolean; + /** + * Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. + */ + "play": () => Promise; + /** + * The component's selected `calcite-carousel-item`. + * @readonly + */ + "selectedItem": HTMLCalciteCarouselItemElement; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. + */ + "stop": () => Promise; + } + interface CalciteCarouselItem { + /** + * Accessible name for the component. + */ + "label": string; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + } + 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. 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; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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": IconNameOrString; + /** + * 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, which 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; + "parentChipGroup": HTMLCalciteChipGroupElement; + /** + * 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, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. + */ + "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`. + * @deprecated Use `clearable` instead + */ + "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; + /** + * 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`. + */ + "clearable": 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/dev/src/components/color-picker/interfaces.ts#L10) + */ + "value": ColorValue | null; + } + interface CalciteColorPickerHexInput { + /** + * 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; + /** + * 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; + /** + * Text for the component's filter input field. + */ + "filterText": string; + /** + * Specifies the component's filtered items. + * @readonly + */ + "filteredItems": HTMLCalciteComboboxItemElement[]; + /** + * Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available. + */ + "flipPlacements": FlipPlacement[]; + /** + * 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": IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "placeholderIconFlipRtl": boolean; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. + */ + "readOnly": 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, where: `"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, and `"single"` displays one `calcite-chip` with the total number of selections. + */ + "selectionDisplay": SelectionDisplay; + /** + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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[]; + /** + * A description for the component, which displays below the label. + */ + "description": string; + /** + * 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; + /** + * Pattern for highlighting filter text matches. + */ + "filterTextMatchPattern": RegExp; + /** + * The `id` attribute of the component. When omitted, a globally unique identifier is used. + */ + "guid": string; + /** + * The component's text. + */ + "heading": string; + /** + * Specifies an icon to display. + */ + "icon": IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * The component's label. + */ + "label": any; + /** + * Provides additional metadata to the component used in filtering. + */ + "metadata": Record; + /** + * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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 short heading. When provided, the short heading will be displayed in the component's selection. It is recommended to use 5 characters or fewer. + */ + "shortHeading": string; + /** + * The component's text. + * @deprecated Use `heading` instead. + */ + "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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Date is the start of date range. + */ + "startOfRange": boolean; + /** + * The component's value. + */ + "value": Date; + } + interface CalciteDatePickerMonth { + /** + * The currently active Date. + */ + "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 { + /** + * The focused date is indicated and will become the selected date if the 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 CalciteDialog { + /** + * Passes a function to run before the component closes. + */ + "beforeClose": () => Promise; + /** + * When `true`, disables the component's close button. + */ + "closeDisabled": boolean; + /** + * A description for the component. + */ + "description": string; + /** + * When `true`, the component is draggable. + */ + "dragEnabled": boolean; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded": boolean; + /** + * When `true`, disables the default close on escape behavior. By default, an open dialog can be dismissed by pressing the Esc key. + * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility) + */ + "escapeDisabled": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "headingLevel": HeadingLevel; + /** + * Specifies the kind of the component, which will style the top border. + */ + "kind": Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; + /** + * 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": DialogMessages; + /** + * When `true`, displays a scrim blocking interaction underneath the component. + */ + "modal": boolean; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * When `true`, disables the closing of the component when clicked outside. + */ + "outsideCloseDisabled": 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 dialog. + */ + "placement": DialogPlacement; + /** + * When `true`, the component is resizable. + */ + "resizable": boolean; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * 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 "close" button (the first focusable item). + * @returns - A promise that is resolved when the operation has completed. + */ + "setFocus": () => Promise; + /** + * 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 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; + /** + * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements": FlipPlacement[]; + /** + * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. + */ + "selectionMode": Extract<"none" | "single" | "multiple", SelectionMode>; + } + interface CalciteDropdownItem { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * 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": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Specifies the kind of the component, which 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; + /** + * Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched. + */ + "filterProps": string[]; + /** + * 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; + /** + * Passes a function to run before the component closes. + */ + "beforeClose": () => 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": CollapseDirection; + /** + * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * 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 component. + */ + "scale": Scale; + /** + * 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 { + /** + * When `true`, disables unselecting the component when blurred. + */ + "blurUnselectDisabled": boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": 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. + * @readonly + */ + "messages": HandleMessages; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + /** + * 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": IconNameOrString; + /** + * 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": Extract<"start" | "end", Alignment>; + /** + * 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; + /** + * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 + * @ignore + */ + "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; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon": IconNameOrString | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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"; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * The component's value. + */ + "value": string; + } + interface CalciteInputDatePicker { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements": FlipPlacement[]; + /** + * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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 If true, the repositioning is delayed. + * @returns void + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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": IconNameOrString | boolean; + /** + * 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": Extract<"start" | "end", Alignment>; + /** + * 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; + /** + * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 + * @ignore + */ + "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; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon": IconNameOrString | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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) + * @deprecated This property has no effect on the component. + */ + "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) + * @deprecated This property has no effect on the component. + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * The component's value. + */ + "value": string; + } + interface CalciteInputText { + /** + * Specifies the text alignment of the component's value. + */ + "alignment": Extract<"start" | "end", Alignment>; + /** + * 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; + /** + * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 + * @ignore + */ + "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; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon": IconNameOrString | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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; + /** + * Specifies the maximum value. + * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max) + */ + "max": 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 minimum value. + * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min) + */ + "min": string; + /** + * 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 If true, delay the repositioning. + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * The time value in ISO (24-hour) format. + */ + "value": string; + } + interface CalciteInputTimeZone { + /** + * When `true`, an empty value (`null`) will be allowed as a `value`. When `false`, an offset or name value is enforced, and clearing the input or blurring will restore the last valid `value`. + */ + "clearable": 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; + /** + * 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 that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. + * @default "offset" + */ + "mode": TimeZoneMode; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name": string; + /** + * Specifies how the offset will be displayed, where `"user"` uses `UTC` or `GMT` depending on the user's locale, `"gmt"` always uses `GMT`, and `"utc"` always uses `UTC`. This only applies to the `offset` mode. + * @default "user" + */ + "offsetStyle": OffsetStyle; + /** + * 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; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. + */ + "readOnly": boolean; + /** + * 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; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * 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; + } /** - * Made into a prop for testing purposes only - */ - messages: ActionPadMessages; + * 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; + /** + * Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). + */ + "filterProps": 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; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only + */ + "messages": ListMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem": NumberingSystem; + /** + * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. + */ + "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; + /** + * Sets the item to display a border. + */ + "bordered": 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 item is not draggable. + */ + "dragDisabled": boolean; + /** + * When `true`, the component displays a draggable button. + */ + "dragHandle": boolean; + /** + * When `true`, the component's drag handle is selected. + */ + "dragSelected": boolean; + /** + * Hides the component when filtered. + */ + "filterHidden": 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; + /** + * Hides the component when filtered. + */ + "filterHidden": boolean; + /** + * The header text for all nested `calcite-list-item` rows. + */ + "heading": string; + } + interface CalciteLoader { + /** + * Indicates whether the component is in a loading state. + */ + "complete": boolean; + /** + * 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. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress. + */ + "type": "indeterminate" | "determinate" | "determinate-value"; + /** + * 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": IconNameOrString; + /** + * 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": IconNameOrString; + "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": MeterFillType; + /** + * 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 `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 `rangeLabelType` 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 `valueLabel` is `true`, specifies the format of displayed label. + */ + "valueLabelType": MeterLabelType; + } /** - * 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; + * @deprecated Use the `calcite-dialog` component instead. + */ + 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; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded": 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 `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. + */ + "fullscreen": boolean; + /** + * Specifies the kind of the component, which 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; + /** + * 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 `navigationAction` 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 heading level of the component's heading for proper document structure, without affecting visual styling. + */ + "headingLevel": HeadingLevel; + /** + * 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": IconNameOrString; + /** + * 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": IconNameOrString | 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, which 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 { + /** + * Set a specified page as active. + * @param page + */ + "goTo": (page: number | "start" | "end") => Promise; + /** + * 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 { + /** + * Passes a function to run before the component closes. + */ + "beforeClose": () => Promise; + /** + * 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": CollapseDirection; + /** + * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * 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 component. + */ + "scale": Scale; + /** + * 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; + } /** - * Arranges the component depending on the element's `dir` property. - */ - position: Extract<"start" | "end", Position>; + * @deprecated Use the `calcite-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 component's filtered data. + * @readonly + */ + "filteredData": ItemData1; + /** + * The component's filtered items. + * @readonly + */ + "filteredItems": HTMLCalcitePickListItemElement[]; + /** + * Returns the component's selected `calcite-pick-list-item`s. + */ + "getSelectedItems": () => Promise>; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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 the size of the expand `calcite-action`. - */ - scale: Scale; + * @deprecated Use the `calcite-list` component instead. + */ + interface CalcitePickListGroup { + /** + * Specifies the title for all nested `calcite-pick-list-item`s. + */ + "groupTitle": string; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "headingLevel": HeadingLevel; + } /** - * Sets focus on the component's first focusable element. - */ - setFocus: () => Promise; - } - interface CalciteAlert { + * @deprecated Use the `calcite-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/dev/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`, displays a close button within the component. + */ + "closable": boolean; + /** + * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. + */ + "flipDisabled": boolean; + /** + * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements": FlipPlacement[]; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled": boolean; + /** + * The component header text. + */ + "heading": string; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * 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; + /** + * Defines the layout of the component. + */ + "layout": Extract<"horizontal" | "vertical" | "grid", 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; + /** + * Specifies the status of the validation message. + */ + "status": Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + } + 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; + /** + * Specifies the status of the validation message. + */ + "status": Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. + */ + "layout": Extract<"horizontal" | "vertical" | "grid", 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; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded": boolean; + /** + * 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; + /** + * 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": Extract<"start" | "end", 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-content` or `float`, specifies the maximum height of the component. + * @deprecated Use `heightScale` instead. + */ + "detachedHeightScale": Scale; + /** + * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. + */ + "displayMode": DisplayMode1; + /** + * When `layout` is `horizontal`, 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": Extract<"start" | "end", Position>; + /** + * When `true` and `displayMode` is not `float-content` or `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; + /** + * Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. + */ + "fillPlacement": "start" | "none" | "end"; + /** + * 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/dev/src/components/graph/interfaces.ts#L5) + */ + "histogram": DataSeries; + /** + * A set of single color stops for a histogram, sorted by offset ascending. + */ + "histogramStops": ColorStop[]; + /** + * When specified, allows users to customize handle labels. + */ + "labelFormatter": ( + value: number, + type: "value" | "min" | "max" | "tick", + defaultFormatter: (value: number) => string, + ) => string | undefined; + /** + * 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": Extract<"horizontal" | "vertical" | "grid", 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 component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements": FlipPlacement[]; + /** + * Specifies the kind of the component, which 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; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement": MenuPlacement; + /** + * Specifies an icon to display at the end of the primary button. + */ + "primaryIconEnd": IconNameOrString; + /** + * 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": IconNameOrString; + /** + * 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": StepperLayout; + /** + * 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": StepperLayout; + /** + * 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; + "layout": TabLayout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only. + */ + "messages": TabNavMessages; + /** + * 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 `calcite-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 { + /** + * This activates a tab in order for it and its associated tab-title be selected. + * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events + */ + "activateTab": (userTriggered?: boolean) => Promise; + "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": IconNameOrString; + /** + * 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": IconNameOrString; + "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; + /** + * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. + */ + "interactionMode": TableInteractionMode; + /** + * 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 display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed. + */ + "selectionDisplay": TableSelectionDisplay; + /** + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. + */ + "selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>; + /** + * When `true`, displays striped styling in the component. + */ + "striped": boolean; + /** + * When `true`, displays striped styling in the component. + * @deprecated Use the `striped` property instead. + */ + "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; + "interactionMode": TableInteractionMode; + "lastCell": 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; + "parentRowAlignment": Alignment; + "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; + "interactionMode": TableInteractionMode; + "lastCell": boolean; + /** + * 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; + "parentRowAlignment": Alignment; + "parentRowIsSelected": boolean; + "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 { + /** + * Specifies the alignment of the component. + */ + "alignment": Alignment; + "bodyRowCount": number; + "cellCount": number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + "interactionMode": TableInteractionMode; + "lastVisibleRow": 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`. + */ + "position": TabPosition; + /** + * Specifies the size of the component. + */ + "scale": Scale; + } + interface CalciteTextArea { + /** + * 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 minimum number of characters allowed. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength) + */ + "minLength": number; + /** + * 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; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status": Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon": IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage": string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity": MutableValidityState; + /** + * 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. + * @deprecated + */ + "active": boolean; + /** + * Specifies the alignment of the Tile's content. + */ + "alignment": Exclude; + /** + * 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. + * @deprecated No longer necessary. + */ + "embed": boolean; + /** + * The component header text, which displays between the icon and description. + */ + "heading": string; + /** + * When embed is `"false"`, the URL for the component. + */ + "href": string; + /** + * Specifies an icon to display. + */ + "icon": IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl": boolean; + /** + * When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit. This is set to `true` by a parent Tile Group component. + */ + "interactive": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. + */ + "layout": Extract; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. + */ + "selected": boolean; + /** + * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). This property is set by the parent tile-group. + */ + "selectionAppearance": SelectionAppearance1; + /** + * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). This property is set by the parent tile-group. + */ + "selectionMode": Extract< + "multiple" | "none" | "single" | "single-persist", + SelectionMode + >; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + } + interface CalciteTileGroup { + /** + * Specifies the alignment of each `calcite-tile`'s content. + */ + "alignment": Exclude; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. + */ + "layout": Extract; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems": HTMLCalciteTileElement[]; + /** + * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). + */ + "selectionAppearance": SelectionAppearance1; + /** + * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). + */ + "selectionMode": Extract< + "multiple" | "none" | "single" | "single-persist", + SelectionMode + >; + } /** - * This internal property, managed by the AlertManager, is used to inform the component if it is the active open Alert. - */ - active: boolean; + * @deprecated Use the `calcite-tile` component instead. + */ + 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; + /** + * Specifies an icon to display. + */ + "icon": IconNameOrString; + /** + * 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; + /** + * Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. + */ + "type": TileSelectType; + /** + * The component's value. + */ + "value": any; + /** + * Specifies the width of the component. + */ + "width": Extract<"auto" | "full", Width>; + } /** - * When `true`, the component closes automatically. Recommended for passive, non-blocking alerts. - */ - autoClose: boolean; + * @deprecated Use the `calcite-tile-group` component instead. + */ + 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; + } /** - * Specifies the duration before the component automatically closes - only use with `autoClose`. - */ - autoCloseDuration: AlertDuration; + * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. + */ + 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + } /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. */ - embedded: boolean; + interface CalciteTipGroup { + /** + * The component header text for all nested `calcite-tip`s. + */ + "groupTitle": string; + } /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon: IconNameOrString | boolean; + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. + */ + interface CalciteTipManager { + /** + * When `true`, does not display or position the component. + */ + "closed": boolean; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * When `true`, 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 of the component, 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": IconNameOrString; + /** + * In ancestor selection mode, show as indeterminate when only some children are selected. + */ + "indeterminate": boolean; + /** + * Accessible name for the component. + */ + "label": string; + "lines": boolean; + "parentExpanded": boolean; + "scale": Scale; + /** + * When `true`, the component is selected. + */ + "selected": boolean; + "selectionMode": SelectionMode; + } /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; + * @deprecated Use the `calcite-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 component's 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 kind of the component, which 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; - /** - * This internal property, managed by the AlertManager, is used to inform the component of how many alerts are currently open. - */ - openAlertCount: number; - /** - * Specifies the placement of the component. - */ - placement: MenuPlacement; - /** - * Specifies the ordering priority of the component when opened. - */ - queue: AlertQueue; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Sets focus on the component's "close" button, the first focusable item. - * @returns - */ - setFocus: () => Promise; - } - 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - headingLevel: HeadingLevel; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * 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; - /** - * 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; - /** - * Sets focus on the component's first tabbable element. - */ - setFocus: () => Promise; - /** - * Displays a status-related indicator icon. - * @deprecated Use `icon-start` instead. - */ - status: Status; - } - interface CalciteBlockSection { - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * 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. - * @deprecated Use `icon-start` instead. - */ - status: Status; - /** - * The component header text. - */ - text: string; - /** - * Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a 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; - /** - * 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; - /** - * 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: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * Specifies the kind of the component, which will apply to the 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 component. - * @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`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Accessible name for the component. - */ - 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: CardMessages; - /** - * When `true`, the component is selectable. - * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead. - */ - selectable: boolean; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * This internal property, managed by a containing `calcite-card-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; - /** - * Sets the placement of the thumbnail defined in the `thumbnail` slot. - */ - thumbnailPosition: LogicalFlowPosition; - } - interface CalciteCardGroup { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems: HTMLCalciteCardElement[]; - /** - * 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 CalciteCarousel { - /** - * Specifies how and if the "previous" and "next" arrows are displayed. - */ - arrowType: ArrowType; - /** - * When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. - */ - autoplay: AutoplayType; - /** - * When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. - */ - autoplayDuration: number; - /** - * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items. - */ - controlOverlay: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * 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: CarouselMessages; - /** - * Made into a prop for testing purposes only - */ - paused: boolean; - /** - * Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. - */ - play: () => Promise; - /** - * The component's selected `calcite-carousel-item`. - * @readonly - */ - selectedItem: HTMLCalciteCarouselItemElement; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. - */ - stop: () => Promise; - } - interface CalciteCarouselItem { - /** - * Accessible name for the component. - */ - label: string; - /** - * When `true`, the component is selected. - */ - selected: boolean; - } - 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. 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; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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: IconNameOrString; - /** - * 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, which 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; - parentChipGroup: HTMLCalciteChipGroupElement; - /** - * 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, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. - */ - 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`. - * @deprecated Use `clearable` instead - */ - 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; - /** - * 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`. - */ - clearable: 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/dev/src/components/color-picker/interfaces.ts#L10) - */ - value: ColorValue | null; - } - interface CalciteColorPickerHexInput { - /** - * 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; - /** - * 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; - /** - * Text for the component's filter input field. - */ - filterText: string; - /** - * Specifies the component's filtered items. - * @readonly - */ - filteredItems: HTMLCalciteComboboxItemElement[]; - /** - * Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available. - */ - flipPlacements: FlipPlacement[]; - /** - * 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: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - placeholderIconFlipRtl: boolean; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. - */ - readOnly: 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, where: `"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, and `"single"` displays one `calcite-chip` with the total number of selections. - */ - selectionDisplay: SelectionDisplay; - /** - * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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[]; - /** - * A description for the component, which displays below the label. - */ - description: string; - /** - * 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; - /** - * Pattern for highlighting filter text matches. - */ - filterTextMatchPattern: RegExp; - /** - * The `id` attribute of the component. When omitted, a globally unique identifier is used. - */ - guid: string; - /** - * The component's text. - */ - heading: string; - /** - * Specifies an icon to display. - */ - icon: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * The component's label. - */ - label: any; - /** - * Provides additional metadata to the component used in filtering. - */ - metadata: Record; - /** - * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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 short heading. When provided, the short heading will be displayed in the component's selection. It is recommended to use 5 characters or fewer. - */ - shortHeading: string; - /** - * The component's text. - * @deprecated Use `heading` instead. - */ - 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - /** - * Date is the start of date range. - */ - startOfRange: boolean; - /** - * The component's value. - */ - value: Date; - } - interface CalciteDatePickerMonth { - /** - * The currently active Date. - */ - 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 { - /** - * The focused date is indicated and will become the selected date if the 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 CalciteDialog { - /** - * Passes a function to run before the component closes. - */ - beforeClose: () => Promise; - /** - * When `true`, disables the component's close button. - */ - closeDisabled: boolean; - /** - * A description for the component. - */ - description: string; - /** - * When `true`, the component is draggable. - */ - dragEnabled: boolean; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - embedded: boolean; - /** - * When `true`, disables the default close on escape behavior. By default, an open dialog can be dismissed by pressing the Esc key. - * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility) - */ - escapeDisabled: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - headingLevel: HeadingLevel; - /** - * Specifies the kind of the component, which will style the top border. - */ - kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; - /** - * 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: DialogMessages; - /** - * When `true`, displays a scrim blocking interaction underneath the component. - */ - modal: boolean; - /** - * When `true`, displays and positions the component. - */ - open: boolean; - /** - * When `true`, disables the closing of the component when clicked outside. - */ - outsideCloseDisabled: 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 dialog. - */ - placement: DialogPlacement; - /** - * When `true`, the component is resizable. - */ - resizable: boolean; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * 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 "close" button (the first focusable item). - * @returns - A promise that is resolved when the operation has completed. - */ - setFocus: () => Promise; - /** - * 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 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; - /** - * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements: FlipPlacement[]; - /** - * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. - */ - selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>; - } - interface CalciteDropdownItem { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * 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: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Specifies the kind of the component, which 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; - /** - * Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched. - */ - filterProps: string[]; - /** - * 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; - /** - * Passes a function to run before the component closes. - */ - beforeClose: () => 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: CollapseDirection; - /** - * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * 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 component. - */ - scale: Scale; - /** - * 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 { - /** - * When `true`, disables unselecting the component when blurred. - */ - blurUnselectDisabled: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: 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. - * @readonly - */ - messages: HandleMessages; - /** - * When `true`, the component is selected. - */ - selected: boolean; - /** - * 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: IconNameOrString; - /** - * 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: Extract<"start" | "end", Alignment>; - /** - * 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; - /** - * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 - * @ignore - */ - 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; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon: IconNameOrString | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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"; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * The component's value. - */ - value: string; - } - interface CalciteInputDatePicker { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements: FlipPlacement[]; - /** - * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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 If true, the repositioning is delayed. - * @returns void - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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: IconNameOrString | boolean; - /** - * 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: Extract<"start" | "end", Alignment>; - /** - * 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; - /** - * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 - * @ignore - */ - 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; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon: IconNameOrString | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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) - * @deprecated This property has no effect on the component. - */ - 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) - * @deprecated This property has no effect on the component. - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * The component's value. - */ - value: string; - } - interface CalciteInputText { - /** - * Specifies the text alignment of the component's value. - */ - alignment: Extract<"start" | "end", Alignment>; - /** - * 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; - /** - * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 - * @ignore - */ - 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; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon: IconNameOrString | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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; - /** - * Specifies the maximum value. - * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max) - */ - max: 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 minimum value. - * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min) - */ - min: string; - /** - * 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 If true, delay the repositioning. - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * The time value in ISO (24-hour) format. - */ - value: string; - } - interface CalciteInputTimeZone { - /** - * When `true`, an empty value (`null`) will be allowed as a `value`. When `false`, an offset or name value is enforced, and clearing the input or blurring will restore the last valid `value`. - */ - clearable: 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; - /** - * 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 that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. - * @default "offset" - */ - mode: TimeZoneMode; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name: string; - /** - * Specifies how the offset will be displayed, where `"user"` uses `UTC` or `GMT` depending on the user's locale, `"gmt"` always uses `GMT`, and `"utc"` always uses `UTC`. This only applies to the `offset` mode. - * @default "user" - */ - offsetStyle: OffsetStyle; - /** - * 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; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. - */ - readOnly: boolean; - /** - * 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; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * 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; - /** - * Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). - */ - filterProps: 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; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only - */ - messages: ListMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem: NumberingSystem; - /** - * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. - */ - 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; - /** - * Sets the item to display a border. - */ - bordered: 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 item is not draggable. - */ - dragDisabled: boolean; - /** - * When `true`, the component displays a draggable button. - */ - dragHandle: boolean; - /** - * When `true`, the component's drag handle is selected. - */ - dragSelected: boolean; - /** - * Hides the component when filtered. - */ - filterHidden: 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; - /** - * Hides the component when filtered. - */ - filterHidden: boolean; - /** - * The header text for all nested `calcite-list-item` rows. - */ - heading: string; - } - interface CalciteLoader { - /** - * Indicates whether the component is in a loading state. - */ - complete: boolean; - /** - * 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. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress. - */ - type: "indeterminate" | "determinate" | "determinate-value"; - /** - * 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: IconNameOrString; - /** - * 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: IconNameOrString; - 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: MeterFillType; - /** - * 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 `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 `rangeLabelType` 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 `valueLabel` is `true`, specifies the format of displayed label. - */ - valueLabelType: MeterLabelType; - } - /** - * @deprecated Use the `calcite-dialog` component instead. - */ - 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; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - embedded: 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 `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. - */ - fullscreen: boolean; - /** - * Specifies the kind of the component, which 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; - /** - * 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 `navigationAction` 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 heading level of the component's heading for proper document structure, without affecting visual styling. - */ - headingLevel: HeadingLevel; - /** - * 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: IconNameOrString; - /** - * 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: IconNameOrString | 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, which 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 { - /** - * Set a specified page as active. - * @param page - */ - goTo: (page: number | "start" | "end") => Promise; - /** - * 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 { - /** - * Passes a function to run before the component closes. - */ - beforeClose: () => Promise; - /** - * 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: CollapseDirection; - /** - * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * 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 component. - */ - scale: Scale; - /** - * 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 `calcite-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 component's filtered data. - * @readonly - */ - filteredData: ItemData1; - /** - * The component's filtered items. - * @readonly - */ - filteredItems: HTMLCalcitePickListItemElement[]; - /** - * Returns the component's selected `calcite-pick-list-item`s. - */ - getSelectedItems: () => Promise>; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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 `calcite-list` component instead. - */ - interface CalcitePickListGroup { - /** - * Specifies the title for all nested `calcite-pick-list-item`s. - */ - groupTitle: string; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - headingLevel: HeadingLevel; - } - /** - * @deprecated Use the `calcite-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/dev/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`, displays a close button within the component. - */ - closable: boolean; - /** - * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. - */ - flipDisabled: boolean; - /** - * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements: FlipPlacement[]; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled: boolean; - /** - * The component header text. - */ - heading: string; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * 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; - /** - * Defines the layout of the component. - */ - layout: Extract<"horizontal" | "vertical" | "grid", 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; - /** - * Specifies the status of the validation message. - */ - status: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - } - 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; - /** - * Specifies the status of the validation message. - */ - status: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. - */ - layout: Extract<"horizontal" | "vertical" | "grid", 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; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - embedded: boolean; - /** - * 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; - /** - * 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: Extract<"start" | "end", 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-content` or `float`, specifies the maximum height of the component. - * @deprecated Use `heightScale` instead. - */ - detachedHeightScale: Scale; - /** - * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. - */ - displayMode: DisplayMode1; - /** - * When `layout` is `horizontal`, 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: Extract<"start" | "end", Position>; - /** - * When `true` and `displayMode` is not `float-content` or `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; - /** - * Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. - */ - fillPlacement: "start" | "none" | "end"; - /** - * 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/dev/src/components/graph/interfaces.ts#L5) - */ - histogram: DataSeries; - /** - * A set of single color stops for a histogram, sorted by offset ascending. - */ - histogramStops: ColorStop[]; - /** - * When specified, allows users to customize handle labels. - */ - labelFormatter: ( - value: number, - type: "value" | "min" | "max" | "tick", - defaultFormatter: (value: number) => string, - ) => string | undefined; - /** - * 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: Extract<"horizontal" | "vertical" | "grid", 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 component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements: FlipPlacement[]; - /** - * Specifies the kind of the component, which 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; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-end" - */ - placement: MenuPlacement; - /** - * Specifies an icon to display at the end of the primary button. - */ - primaryIconEnd: IconNameOrString; - /** - * 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: IconNameOrString; - /** - * 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: StepperLayout; - /** - * 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: StepperLayout; - /** - * 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; - layout: TabLayout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides: Partial; - /** - * Made into a prop for testing purposes only. - */ - messages: TabNavMessages; - /** - * 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 `calcite-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 { - /** - * This activates a tab in order for it and its associated tab-title be selected. - * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events - */ - activateTab: (userTriggered?: boolean) => Promise; - 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: IconNameOrString; - /** - * 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: IconNameOrString; - 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; - /** - * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. - */ - interactionMode: TableInteractionMode; - /** - * 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 display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed. - */ - selectionDisplay: TableSelectionDisplay; - /** - * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. - */ - selectionMode: Extract<"none" | "multiple" | "single", SelectionMode>; - /** - * When `true`, displays striped styling in the component. - */ - striped: boolean; - /** - * When `true`, displays striped styling in the component. - * @deprecated Use the `striped` property instead. - */ - 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; - interactionMode: TableInteractionMode; - lastCell: 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; - parentRowAlignment: Alignment; - 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; - interactionMode: TableInteractionMode; - lastCell: boolean; - /** - * 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; - parentRowAlignment: Alignment; - parentRowIsSelected: boolean; - 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 { - /** - * Specifies the alignment of the component. - */ - alignment: Alignment; - bodyRowCount: number; - cellCount: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - interactionMode: TableInteractionMode; - lastVisibleRow: 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`. - */ - position: TabPosition; - /** - * Specifies the size of the component. - */ - scale: Scale; - } - interface CalciteTextArea { - /** - * 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 minimum number of characters allowed. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength) - */ - minLength: number; - /** - * 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; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity: MutableValidityState; - /** - * 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. - * @deprecated - */ - active: boolean; - /** - * Specifies the alignment of the Tile's content. - */ - alignment: Exclude; - /** - * 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. - * @deprecated No longer necessary. - */ - embed: boolean; - /** - * The component header text, which displays between the icon and description. - */ - heading: string; - /** - * When embed is `"false"`, the URL for the component. - */ - href: string; - /** - * Specifies an icon to display. - */ - icon: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl: boolean; - /** - * When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit. This is set to `true` by a parent Tile Group component. - */ - interactive: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. - */ - layout: Extract; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. - */ - selected: boolean; - /** - * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). This property is set by the parent tile-group. - */ - selectionAppearance: SelectionAppearance1; - /** - * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). This property is set by the parent tile-group. - */ - selectionMode: Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode>; - /** - * Sets focus on the component. - */ - setFocus: () => Promise; - } - interface CalciteTileGroup { - /** - * Specifies the alignment of each `calcite-tile`'s content. - */ - alignment: Exclude; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. - */ - layout: Extract; - /** - * Specifies the size of the component. - */ - scale: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems: HTMLCalciteTileElement[]; - /** - * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). - */ - selectionAppearance: SelectionAppearance1; - /** - * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). - */ - selectionMode: Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode>; - } - /** - * @deprecated Use the `calcite-tile` component instead. - */ - 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; - /** - * Specifies an icon to display. - */ - icon: IconNameOrString; - /** - * 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; - /** - * Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. - */ - type: TileSelectType; - /** - * The component's value. - */ - value: any; - /** - * Specifies the width of the component. - */ - width: Extract<"auto" | "full", Width>; - } - /** - * @deprecated Use the `calcite-tile-group` component instead. - */ - 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; - } - /** - * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. - */ - 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - } - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - interface CalciteTipGroup { - /** - * The component header text for all nested `calcite-tip`s. - */ - groupTitle: string; - } - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - interface CalciteTipManager { - /** - * When `true`, does not display or position the component. - */ - closed: boolean; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * When `true`, 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 of the component, 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: IconNameOrString; - /** - * In ancestor selection mode, show as indeterminate when only some children are selected. - */ - indeterminate: boolean; - /** - * Accessible name for the component. - */ - label: string; - lines: boolean; - parentExpanded: boolean; - scale: Scale; - /** - * When `true`, the component is selected. - */ - selected: boolean; - selectionMode: SelectionMode; - } - /** - * @deprecated Use the `calcite-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 component's 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 `calcite-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/dev/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 CalciteCardGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteCardGroupElement; -} -export interface CalciteCarouselCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteCarouselElement; -} -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 CalciteDialogCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteDialogElement; -} -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 CalciteShellPanelCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteShellPanelElement; -} -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 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 CalciteTileCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTileElement; -} -export interface CalciteTileGroupCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteTileGroupElement; -} -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; - } - 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; - calciteInternalCardKeyEvent: KeyboardEvent; - } - 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 HTMLCalciteCardGroupElementEventMap { - calciteCardGroupSelect: void; - } - interface HTMLCalciteCardGroupElement extends Components.CalciteCardGroup, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteCardGroupElement, - ev: CalciteCardGroupCustomEvent, - ) => 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: HTMLCalciteCardGroupElement, - ev: CalciteCardGroupCustomEvent, - ) => 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 HTMLCalciteCardGroupElement: { - prototype: HTMLCalciteCardGroupElement; - new (): HTMLCalciteCardGroupElement; - }; - interface HTMLCalciteCarouselElementEventMap { - calciteCarouselChange: void; - calciteCarouselPlay: void; - calciteCarouselStop: void; - calciteCarouselPause: void; - calciteCarouselResume: void; - } - interface HTMLCalciteCarouselElement extends Components.CalciteCarousel, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteCarouselElement, - ev: CalciteCarouselCustomEvent, - ) => 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: HTMLCalciteCarouselElement, - ev: CalciteCarouselCustomEvent, - ) => 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 HTMLCalciteCarouselElement: { - prototype: HTMLCalciteCarouselElement; - new (): HTMLCalciteCarouselElement; - }; - interface HTMLCalciteCarouselItemElement extends Components.CalciteCarouselItem, HTMLStencilElement {} - var HTMLCalciteCarouselItemElement: { - prototype: HTMLCalciteCarouselItemElement; - new (): HTMLCalciteCarouselItemElement; - }; - 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; - calciteInternalChipSelect: void; - calciteInternalSyncSelectedChips: void; - } - 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; - calciteInternalComboboxItemChange: 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 HTMLCalciteDialogElementEventMap { - calciteDialogBeforeClose: void; - calciteDialogClose: void; - calciteDialogBeforeOpen: void; - calciteDialogOpen: void; - calciteDialogScroll: void; - } - interface HTMLCalciteDialogElement extends Components.CalciteDialog, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteDialogElement, - ev: CalciteDialogCustomEvent, - ) => 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: HTMLCalciteDialogElement, - ev: CalciteDialogCustomEvent, - ) => 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 HTMLCalciteDialogElement: { - prototype: HTMLCalciteDialogElement; - new (): HTMLCalciteDialogElement; - }; - 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 { - calciteHandleChange: void; - calciteHandleNudge: HandleNudge; - calciteInternalAssistiveTextChange: 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; - calciteListDragEnd: ListDragDetail; - calciteListDragStart: ListDragDetail; - 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; - calciteListItemDragHandleChange: void; - calciteListItemToggle: void; - calciteInternalListItemSelect: void; - calciteInternalListItemSelectMultiple: { - selectMultiple: boolean; - }; - calciteInternalListItemActive: void; - calciteInternalFocusPreviousItem: void; - calciteInternalListItemChange: void; - calciteInternalListItemToggle: 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; - } - /** - * @deprecated Use the `calcite-dialog` component instead. - */ - 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 `calcite-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 `calcite-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 `calcite-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 HTMLCalciteShellPanelElementEventMap { - calciteInternalShellPanelResizeStart: void; - calciteInternalShellPanelResizeEnd: void; - } - interface HTMLCalciteShellPanelElement extends Components.CalciteShellPanel, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteShellPanelElement, - ev: CalciteShellPanelCustomEvent, - ) => 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: HTMLCalciteShellPanelElement, - ev: CalciteShellPanelCustomEvent, - ) => 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 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 { - calciteStepperChange: void; - 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; - calciteInternalStepperItemRegister: StepperItemEventDetail; - calciteStepperItemSelect: void; - } - 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 HTMLCalciteTabElement extends Components.CalciteTab, HTMLStencilElement {} - var HTMLCalciteTabElement: { - prototype: HTMLCalciteTabElement; - new (): HTMLCalciteTabElement; - }; - interface HTMLCalciteTabNavElementEventMap { - calciteTabChange: void; - calciteInternalTabNavSlotChange: Element[]; - 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 HTMLCalciteTileElementEventMap { - calciteInternalTileKeyEvent: KeyboardEvent; - calciteTileSelect: void; - } - interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement { - addEventListener( - type: K, - listener: (this: HTMLCalciteTileElement, ev: CalciteTileCustomEvent) => 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: HTMLCalciteTileElement, ev: CalciteTileCustomEvent) => 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 HTMLCalciteTileElement: { - prototype: HTMLCalciteTileElement; - new (): HTMLCalciteTileElement; - }; - interface HTMLCalciteTileGroupElementEventMap { - calciteTileGroupSelect: void; - } - interface HTMLCalciteTileGroupElement extends Components.CalciteTileGroup, HTMLStencilElement { - addEventListener( - type: K, - listener: ( - this: HTMLCalciteTileGroupElement, - ev: CalciteTileGroupCustomEvent, - ) => 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: HTMLCalciteTileGroupElement, - ev: CalciteTileGroupCustomEvent, - ) => 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 HTMLCalciteTileGroupElement: { - prototype: HTMLCalciteTileGroupElement; - new (): HTMLCalciteTileGroupElement; - }; - interface HTMLCalciteTileSelectElementEventMap { - calciteTileSelectChange: void; - } - /** - * @deprecated Use the `calcite-tile` component instead. - */ - 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; - }; - /** - * @deprecated Use the `calcite-tile-group` component instead. - */ - interface HTMLCalciteTileSelectGroupElement extends Components.CalciteTileSelectGroup, HTMLStencilElement {} - var HTMLCalciteTileSelectGroupElement: { - prototype: HTMLCalciteTileSelectGroupElement; - new (): HTMLCalciteTileSelectGroupElement; - }; - interface HTMLCalciteTimePickerElementEventMap { - calciteInternalTimePickerChange: string; - } - 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; - } - /** - * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. - */ - 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; - }; - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - interface HTMLCalciteTipGroupElement extends Components.CalciteTipGroup, HTMLStencilElement {} - var HTMLCalciteTipGroupElement: { - prototype: HTMLCalciteTipGroupElement; - new (): HTMLCalciteTipGroupElement; - }; - interface HTMLCalciteTipManagerElementEventMap { - calciteTipManagerClose: void; - } - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - 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 `calcite-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 `calcite-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-card-group": HTMLCalciteCardGroupElement; - "calcite-carousel": HTMLCalciteCarouselElement; - "calcite-carousel-item": HTMLCalciteCarouselItemElement; - "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-dialog": HTMLCalciteDialogElement; - "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-group": HTMLCalciteTileGroupElement; - "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?: Extract<"start" | "end", Position>; - /** - * Specifies the type of the icon in the header. - */ - iconType?: Extract<"chevron" | "caret" | "plus-minus", IconType>; - onCalciteInternalAccordionChange?: (event: CalciteAccordionCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. - */ - 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?: IconNameOrString; - /** - * 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?: Extract<"start" | "end", Position>; - /** - * Specifies an icon to display at the start of the component. - */ - iconStart?: IconNameOrString; - /** - * Specifies the type of the icon in the header inherited from the `calcite-accordion`. - */ - iconType?: Extract<"chevron" | "caret" | "plus-minus", IconType>; - 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. - * @deprecated No longer necessary. - */ - compact?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies an icon to display. - */ - icon?: IconNameOrString; - /** - * 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 `calcite-action-group`. - */ - actionsEndGroupLabel?: string; - /** - * When `true`, the expand-toggling behavior is disabled. - */ - expandDisabled?: boolean; - /** - * When `true`, the component is expanded. - */ - expanded?: boolean; - /** - * Specifies 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; - /** - * Fires when the `expanded` property is toggled. - */ - onCalciteActionBarToggle?: (event: CalciteActionBarCustomEvent) => void; - /** - * Disables automatically overflowing `calcite-action`s that won't fit into menus. - */ - overflowActionsDisabled?: 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; - /** - * Arranges the component depending on the element's `dir` property. - */ - position?: Extract<"start" | "end", 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; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Indicates the layout of the component. - * @deprecated Use the `layout` property on the component's parent instead. - */ - layout?: Extract<"horizontal" | "vertical" | "grid", 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; - /** - * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements?: FlipPlacement[]; - /** - * Specifies the text string for the component. - */ - label: string; - /** - * Fires 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 `calcite-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?: Extract<"horizontal" | "vertical" | "grid", Layout>; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ActionPadMessages; - /** - * Fires when the `expanded` property is toggled. - */ - onCalciteActionPadToggle?: (event: CalciteActionPadCustomEvent) => 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; - /** - * Arranges the component depending on the element's `dir` property. - */ - position?: Extract<"start" | "end", Position>; - /** - * Specifies the size of the expand `calcite-action`. - */ - scale?: Scale; - } - interface CalciteAlert { - /** - * This internal property, managed by the AlertManager, is used to inform the component if it is the active open Alert. - */ - active?: boolean; - /** - * 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; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - embedded?: boolean; - /** - * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon?: IconNameOrString | 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, which 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; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * This internal property, managed by the AlertManager, is used to inform the component of how many alerts are currently open. - */ - openAlertCount?: number; - /** - * Specifies the placement of the component. - */ - placement?: MenuPlacement; - /** - * Specifies the ordering priority of the component when opened. - */ - queue?: AlertQueue; - /** - * Specifies the size of the component. - */ - scale?: Scale; - } - 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - headingLevel?: HeadingLevel; - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * 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; - /** - * Fires when the component's header is clicked. - * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead. - */ - onCalciteBlockToggle?: (event: CalciteBlockCustomEvent) => void; - /** - * When `true`, expands the component and its contents. - */ - 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; - /** - * Displays a status-related indicator icon. - * @deprecated Use `icon-start` instead. - */ - status?: Status; - } - interface CalciteBlockSection { - /** - * Specifies an icon to display at the end of the component. - */ - iconEnd?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: BlockSectionMessages; - /** - * Fires 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. - * @deprecated Use `icon-start` instead. - */ - status?: Status; - /** - * The component header text. - */ - text?: string; - /** - * Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a 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; - /** - * 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; - /** - * 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?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * Specifies the kind of the component, which will apply to the 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 component. - * @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`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Accessible name for the component. - */ - 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?: CardMessages; - /** - * Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. - */ - onCalciteCardSelect?: (event: CalciteCardCustomEvent) => void; - onCalciteInternalCardKeyEvent?: (event: CalciteCardCustomEvent) => void; - /** - * When `true`, the component is selectable. - * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead. - */ - selectable?: boolean; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - /** - * This internal property, managed by a containing `calcite-card-group`, is conditionally set based on the `selectionMode` of the parent - */ - selectionMode?: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; - /** - * Sets the placement of the thumbnail defined in the `thumbnail` slot. - */ - thumbnailPosition?: LogicalFlowPosition; - } - interface CalciteCardGroup { - /** - * 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 and the `selectionMode` is not `none`. - */ - onCalciteCardGroupSelect?: (event: CalciteCardGroupCustomEvent) => void; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteCardElement[]; - /** - * Specifies the selection mode of the component. - */ - selectionMode?: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; - } - interface CalciteCarousel { - /** - * Specifies how and if the "previous" and "next" arrows are displayed. - */ - arrowType?: ArrowType; - /** - * When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. - */ - autoplay?: AutoplayType; - /** - * When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. - */ - autoplayDuration?: number; - /** - * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items. - */ - controlOverlay?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * 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?: CarouselMessages; - /** - * Fires when the selected `calcite-carousel-item` changes. - */ - onCalciteCarouselChange?: (event: CalciteCarouselCustomEvent) => void; - /** - * Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content - */ - onCalciteCarouselPause?: (event: CalciteCarouselCustomEvent) => void; - /** - * Fires when the carousel autoplay is invoked by the user. - */ - onCalciteCarouselPlay?: (event: CalciteCarouselCustomEvent) => void; - /** - * Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content - */ - onCalciteCarouselResume?: (event: CalciteCarouselCustomEvent) => void; - /** - * Fires when the carousel autoplay state is stopped by a user. - */ - onCalciteCarouselStop?: (event: CalciteCarouselCustomEvent) => void; - /** - * Made into a prop for testing purposes only - */ - paused?: boolean; - /** - * The component's selected `calcite-carousel-item`. - * @readonly - */ - selectedItem?: HTMLCalciteCarouselItemElement; - } - interface CalciteCarouselItem { - /** - * Accessible name for the component. - */ - label: string; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - } - 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. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Fires when the component's `checked` status changes. - */ - onCalciteCheckboxChange?: (event: CalciteCheckboxCustomEvent) => void; - /** - * Fires when the component is blurred. - */ - onCalciteInternalCheckboxBlur?: (event: CalciteCheckboxCustomEvent) => void; - /** - * Fires 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; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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?: IconNameOrString; - /** - * 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, which 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; - onCalciteInternalChipSelect?: (event: CalciteChipCustomEvent) => void; - onCalciteInternalSyncSelectedChips?: (event: CalciteChipCustomEvent) => void; - parentChipGroup?: HTMLCalciteChipGroupElement; - /** - * 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; - /** - * Fires 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, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. - */ - 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`. - * @deprecated Use `clearable` instead - */ - 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; - /** - * 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`. - */ - clearable?: 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/dev/src/components/color-picker/interfaces.ts#L10) - */ - value?: ColorValue | null; - } - interface CalciteColorPickerHexInput { - /** - * 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; - /** - * 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; - /** - * Text for the component's filter input field. - */ - filterText?: string; - /** - * Specifies the component's filtered items. - * @readonly - */ - filteredItems?: HTMLCalciteComboboxItemElement[]; - /** - * Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available. - */ - flipPlacements?: FlipPlacement[]; - /** - * 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?: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - placeholderIconFlipRtl?: boolean; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value 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; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteComboboxItemElement[]; - /** - * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: `"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, and `"single"` displays one `calcite-chip` with the total number of selections. - */ - selectionDisplay?: SelectionDisplay; - /** - * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. - */ - selectionMode?: Extract<"single" | "single-persist" | "ancestors" | "multiple", SelectionMode>; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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[]; - /** - * A description for the component, which displays below the label. - */ - description?: string; - /** - * 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; - /** - * Pattern for highlighting filter text matches. - */ - filterTextMatchPattern?: RegExp; - /** - * The `id` attribute of the component. When omitted, a globally unique identifier is used. - */ - guid?: string; - /** - * The component's text. - */ - heading?: string; - /** - * Specifies an icon to display. - */ - icon?: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * The component's label. - */ - label?: any; - /** - * Provides additional metadata to the component used in filtering. - */ - metadata?: Record; - /** - * Fires whenever the component is selected or unselected. - */ - onCalciteComboboxItemChange?: (event: CalciteComboboxItemCustomEvent) => void; - /** - * Fires whenever a property the parent combobox needs to know about is changed. - */ - onCalciteInternalComboboxItemChange?: (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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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 short heading. When provided, the short heading will be displayed in the component's selection. It is recommended to use 5 characters or fewer. - */ - shortHeading?: string; - /** - * The component's text. - * @deprecated Use `heading` instead. - */ - 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. - */ - onCalciteDatePickerChange?: (event: CalciteDatePickerCustomEvent) => void; - /** - * Fires 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; - /** - * Fires when user selects day. - */ - onCalciteDaySelect?: (event: CalciteDatePickerDayCustomEvent) => void; - /** - * Fires 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 { - /** - * The currently active Date. - */ - 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; - /** - * Fires when user hovers the date. - */ - onCalciteInternalDatePickerHover?: (event: CalciteDatePickerMonthCustomEvent) => void; - onCalciteInternalDatePickerMouseOut?: (event: CalciteDatePickerMonthCustomEvent) => void; - /** - * Fires 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 { - /** - * The focused date is indicated and will become the selected date if the 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; - /** - * Fires to active date - */ - onCalciteInternalDatePickerSelect?: (event: CalciteDatePickerMonthHeaderCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Already selected date. - */ - selectedDate?: Date; - } - interface CalciteDialog { - /** - * Passes a function to run before the component closes. - */ - beforeClose?: () => Promise; - /** - * When `true`, disables the component's close button. - */ - closeDisabled?: boolean; - /** - * A description for the component. - */ - description?: string; - /** - * When `true`, the component is draggable. - */ - dragEnabled?: boolean; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - embedded?: boolean; - /** - * When `true`, disables the default close on escape behavior. By default, an open dialog can be dismissed by pressing the Esc key. - * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility) - */ - escapeDisabled?: boolean; - /** - * The component header text. - */ - heading?: string; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - headingLevel?: HeadingLevel; - /** - * Specifies the kind of the component, which will style the top border. - */ - kind?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; - /** - * 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?: DialogMessages; - /** - * When `true`, displays a scrim blocking interaction underneath the component. - */ - modal?: boolean; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteDialogBeforeClose?: (event: CalciteDialogCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteDialogBeforeOpen?: (event: CalciteDialogCustomEvent) => void; - /** - * Fires when the component is closed and animation is complete. - */ - onCalciteDialogClose?: (event: CalciteDialogCustomEvent) => void; - /** - * Fires when the component is open and animation is complete. - */ - onCalciteDialogOpen?: (event: CalciteDialogCustomEvent) => void; - /** - * Fires when the content is scrolled. - */ - onCalciteDialogScroll?: (event: CalciteDialogCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - open?: boolean; - /** - * When `true`, disables the closing of the component when clicked outside. - */ - outsideCloseDisabled?: 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 dialog. - */ - placement?: DialogPlacement; - /** - * When `true`, the component is resizable. - */ - resizable?: boolean; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the width of the component. - */ - widthScale?: Scale; - } - 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; - /** - * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements?: FlipPlacement[]; - /** - * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. - */ - selectionMode?: Extract<"none" | "single" | "multiple", SelectionMode>; - } - interface CalciteDropdownItem { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * 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?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Specifies the kind of the component, which 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; - /** - * Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched. - */ - filterProps?: string[]; - /** - * 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; - /** - * 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; - /** - * Passes a function to run before the component closes. - */ - beforeClose?: () => 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?: CollapseDirection; - /** - * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * 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 component. - */ - scale?: Scale; - /** - * 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 { - /** - * When `true`, disables unselecting the component when blurred. - */ - blurUnselectDisabled?: boolean; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: 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. - * @readonly - */ - messages?: HandleMessages; - /** - * Fires whenever the component is selected or unselected. - */ - onCalciteHandleChange?: (event: CalciteHandleCustomEvent) => void; - /** - * Fires when the handle is selected and the up or down arrow key is pressed. - */ - onCalciteHandleNudge?: (event: CalciteHandleCustomEvent) => void; - /** - * Fires when the assistive text has changed. - */ - onCalciteInternalAssistiveTextChange?: (event: CalciteHandleCustomEvent) => void; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - 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?: IconNameOrString; - /** - * 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?: Extract<"start" | "end", Alignment>; - /** - * 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; - /** - * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 - * @ignore - */ - 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; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. - */ - icon?: IconNameOrString | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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"; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * The component's value. - */ - value?: string; - } - interface CalciteInputDatePicker { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements?: FlipPlacement[]; - /** - * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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?: IconNameOrString | boolean; - /** - * 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?: Extract<"start" | "end", Alignment>; - /** - * 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; - /** - * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 - * @ignore - */ - 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; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon?: IconNameOrString | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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) - * @deprecated This property has no effect on the component. - */ - 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) - * @deprecated This property has no effect on the component. - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * The component's value. - */ - value?: string; - } - interface CalciteInputText { - /** - * Specifies the text alignment of the component's value. - */ - alignment?: Extract<"start" | "end", Alignment>; - /** - * 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; - /** - * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 - * @ignore - */ - 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; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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; - /** - * Specifies an icon to display. - * @futureBreaking Remove boolean type as it is not supported. - */ - icon?: IconNameOrString | boolean; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 - * @futureBreaking kebab-cased attribute will not be supported in a future release - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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; - /** - * Specifies the maximum value. - * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max) - */ - max?: 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 minimum value. - * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min) - */ - min?: string; - /** - * 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 component's `value` is changes. - */ - 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; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * The time value in ISO (24-hour) format. - */ - value?: string; - } - interface CalciteInputTimeZone { - /** - * When `true`, an empty value (`null`) will be allowed as a `value`. When `false`, an offset or name value is enforced, and clearing the input or blurring will restore the last valid `value`. - */ - clearable?: 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; - /** - * 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 that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. - * @default "offset" - */ - mode?: TimeZoneMode; - /** - * Specifies the name of the component. Required to pass the component's `value` on form submission. - */ - name?: string; - /** - * Specifies how the offset will be displayed, where `"user"` uses `UTC` or `GMT` depending on the user's locale, `"gmt"` always uses `GMT`, and `"utc"` always uses `UTC`. This only applies to the `offset` mode. - * @default "user" - */ - offsetStyle?: OffsetStyle; - /** - * Fires when the component is requested to be closed and before the closing transition begins. - */ - onCalciteInputTimeZoneBeforeClose?: (event: CalciteInputTimeZoneCustomEvent) => void; - /** - * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. - */ - onCalciteInputTimeZoneBeforeOpen?: (event: CalciteInputTimeZoneCustomEvent) => void; - /** - * Fires when the component's `value` changes. - */ - onCalciteInputTimeZoneChange?: (event: CalciteInputTimeZoneCustomEvent) => void; - /** - * Fires after the component is closed and animation is complete. - */ - onCalciteInputTimeZoneClose?: (event: CalciteInputTimeZoneCustomEvent) => void; - /** - * Fires after the component is opened and animation is complete. - */ - 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; - /** - * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. - */ - readOnly?: boolean; - /** - * 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; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * 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; - /** - * Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). - */ - filterProps?: 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; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only - */ - messages?: ListMessages; - /** - * Specifies the Unicode numeral system used by the component for localization. - */ - numberingSystem?: NumberingSystem; - /** - * Fires when the default slot has changes in order to notify parent lists. - */ - onCalciteInternalListDefaultSlotChange?: (event: CalciteListCustomEvent) => void; - /** - * Fires when the component's selected items have changed. - */ - onCalciteListChange?: (event: CalciteListCustomEvent) => void; - /** - * Fires when the component's dragging has ended. - */ - onCalciteListDragEnd?: (event: CalciteListCustomEvent) => void; - /** - * Fires when the component's dragging has started. - */ - onCalciteListDragStart?: (event: CalciteListCustomEvent) => void; - /** - * Fires when the component's filter has changed. - */ - onCalciteListFilter?: (event: CalciteListCustomEvent) => void; - /** - * Fires when the component's item order changes. - */ - 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. - */ - 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; - /** - * Sets the item to display a border. - */ - bordered?: 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 item is not draggable. - */ - dragDisabled?: boolean; - /** - * When `true`, the component displays a draggable button. - */ - dragHandle?: boolean; - /** - * When `true`, the component's drag handle is selected. - */ - dragSelected?: boolean; - /** - * Hides the component when filtered. - */ - filterHidden?: 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; - onCalciteInternalListItemSelectMultiple?: ( - event: CalciteListItemCustomEvent<{ - selectMultiple: boolean; - }>, - ) => void; - onCalciteInternalListItemToggle?: (event: CalciteListItemCustomEvent) => void; - /** - * Fires when the close button is clicked. - */ - onCalciteListItemClose?: (event: CalciteListItemCustomEvent) => void; - /** - * Fires when the drag handle is selected. - */ - onCalciteListItemDragHandleChange?: (event: CalciteListItemCustomEvent) => void; - /** - * Fires when the component is selected. - */ - onCalciteListItemSelect?: (event: CalciteListItemCustomEvent) => void; - /** - * Fires when the open button is clicked. - */ - onCalciteListItemToggle?: (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; - /** - * Hides the component when filtered. - */ - filterHidden?: boolean; - /** - * The header text for all nested `calcite-list-item` rows. - */ - heading?: string; - /** - * Fires when changes occur in the default slot, notifying parent lists of the changes. - */ - onCalciteInternalListItemGroupDefaultSlotChange?: (event: CalciteListItemGroupCustomEvent) => void; - } - interface CalciteLoader { - /** - * Indicates whether the component is in a loading state. - */ - complete?: boolean; - /** - * 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. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress. - */ - type?: "indeterminate" | "determinate" | "determinate-value"; - /** - * 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?: IconNameOrString; - /** - * 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?: IconNameOrString; - 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?: MeterFillType; - /** - * 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 `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 `rangeLabelType` 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 `valueLabel` is `true`, specifies the format of displayed label. - */ - valueLabelType?: MeterLabelType; - } - /** - * @deprecated Use the `calcite-dialog` component instead. - */ - 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; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - embedded?: 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 `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. - */ - fullscreen?: boolean; - /** - * Specifies the kind of the component, which 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; - /** - * 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 heading level of the component's heading for proper document structure, without affecting visual styling. - */ - headingLevel?: HeadingLevel; - /** - * 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?: IconNameOrString; - /** - * 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?: IconNameOrString | 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, which 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 { - /** - * Passes a function to run before the component closes. - */ - beforeClose?: () => Promise; - /** - * 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?: CollapseDirection; - /** - * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * 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 component. - */ - scale?: Scale; - } - /** - * @deprecated Use the `calcite-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 component's filtered data. - * @readonly - */ - filteredData?: ItemData1; - /** - * The component's filtered items. - * @readonly - */ - filteredItems?: HTMLCalcitePickListItemElement[]; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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 `calcite-list` component instead. - */ - interface CalcitePickListGroup { - /** - * Specifies the title for all nested `calcite-pick-list-item`s. - */ - groupTitle?: string; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - headingLevel?: HeadingLevel; - } - /** - * @deprecated Use the `calcite-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/dev/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`, displays a close button within the component. - */ - closable?: boolean; - /** - * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. - */ - flipDisabled?: boolean; - /** - * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements?: FlipPlacement[]; - /** - * When `true`, prevents focus trapping. - */ - focusTrapDisabled?: boolean; - /** - * The component header text. - */ - heading?: string; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * 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; - /** - * Defines the layout of the component. - */ - layout?: Extract<"horizontal" | "vertical" | "grid", 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; - /** - * Specifies the status of the validation message. - */ - status?: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - } - 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; - /** - * Specifies the status of the validation message. - */ - status?: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. - */ - layout?: Extract<"horizontal" | "vertical" | "grid", 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; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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; - /** - * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed - */ - embedded?: boolean; - /** - * 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; - /** - * 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?: Extract<"start" | "end", 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-content` or `float`, specifies the maximum height of the component. - * @deprecated Use `heightScale` instead. - */ - detachedHeightScale?: Scale; - /** - * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. - */ - displayMode?: DisplayMode1; - /** - * When `layout` is `horizontal`, 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; - onCalciteInternalShellPanelResizeEnd?: (event: CalciteShellPanelCustomEvent) => void; - onCalciteInternalShellPanelResizeStart?: (event: CalciteShellPanelCustomEvent) => void; - /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - position?: Extract<"start" | "end", Position>; - /** - * When `true` and `displayMode` is not `float-content` or `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; - /** - * Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. - */ - fillPlacement?: "start" | "none" | "end"; - /** - * 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/dev/src/components/graph/interfaces.ts#L5) - */ - histogram?: DataSeries; - /** - * A set of single color stops for a histogram, sorted by offset ascending. - */ - histogramStops?: ColorStop[]; - /** - * When specified, allows users to customize handle labels. - */ - labelFormatter?: ( - value: number, - type: "value" | "min" | "max" | "tick", - defaultFormatter: (value: number) => string, - ) => string | undefined; - /** - * 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: To constantly listen to the drag event, use `calciteSliderInput` instead. - */ - onCalciteSliderChange?: (event: CalciteSliderCustomEvent) => void; - /** - * Fires on all updates to the component. Note: Fires frequently during drag. To perform 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?: Extract<"horizontal" | "vertical" | "grid", 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 component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. - */ - flipPlacements?: FlipPlacement[]; - /** - * Specifies the kind of the component, which 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; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-end" - */ - placement?: MenuPlacement; - /** - * Specifies an icon to display at the end of the primary button. - */ - primaryIconEnd?: IconNameOrString; - /** - * 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?: IconNameOrString; - /** - * 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?: StepperLayout; - /** - * 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. - */ - onCalciteStepperChange?: (event: CalciteStepperCustomEvent) => void; - /** - * Fires when the active `calcite-stepper-item` changes. - * @deprecated use `calciteStepperChange` instead or `calciteStepperItemChange` on items instead. - */ - 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?: StepperLayout; - /** - * 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; - /** - * Fires when the active `calcite-stepper-item` changes. - */ - onCalciteStepperItemSelect?: (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 { - /** - * 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; - layout?: TabLayout; - /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; - /** - * Made into a prop for testing purposes only. - */ - messages?: TabNavMessages; - onCalciteInternalTabChange?: (event: CalciteTabNavCustomEvent) => void; - onCalciteInternalTabNavSlotChange?: (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 `calcite-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?: IconNameOrString; - /** - * 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?: IconNameOrString; - 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/dev/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/dev/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; - /** - * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. - */ - interactionMode?: TableInteractionMode; - /** - * 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 display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed. - */ - selectionDisplay?: TableSelectionDisplay; - /** - * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. - */ - selectionMode?: Extract<"none" | "multiple" | "single", SelectionMode>; - /** - * When `true`, displays striped styling in the component. - */ - striped?: boolean; - /** - * When `true`, displays striped styling in the component. - * @deprecated Use the `striped` property instead. - */ - 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; - interactionMode?: TableInteractionMode; - lastCell?: 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; - parentRowAlignment?: Alignment; - 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; - interactionMode?: TableInteractionMode; - lastCell?: boolean; - /** - * 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; - parentRowAlignment?: Alignment; - parentRowIsSelected?: boolean; - 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 { - /** - * Specifies the alignment of the component. - */ - alignment?: Alignment; - bodyRowCount?: number; - cellCount?: number; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - interactionMode?: TableInteractionMode; - lastVisibleRow?: 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`. - */ - position?: TabPosition; - /** - * Specifies the size of the component. - */ - scale?: Scale; - } - interface CalciteTextArea { - /** - * 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 minimum number of characters allowed. - * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength) - */ - minLength?: number; - /** - * 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"; - /** - * Specifies the status of the input field, which determines message and icons. - */ - status?: Status; - /** - * Specifies the validation icon to display under the component. - */ - validationIcon?: IconNameOrString | boolean; - /** - * Specifies the validation message to display under the component. - */ - validationMessage?: string; - /** - * The current validation state of the component. - * @readonly - * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) - */ - validity?: MutableValidityState; - /** - * 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. - * @deprecated - */ - active?: boolean; - /** - * Specifies the alignment of the Tile's content. - */ - alignment?: Exclude; - /** - * 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. - * @deprecated No longer necessary. - */ - embed?: boolean; - /** - * The component header text, which displays between the icon and description. - */ - heading?: string; - /** - * When embed is `"false"`, the URL for the component. - */ - href?: string; - /** - * Specifies an icon to display. - */ - icon?: IconNameOrString; - /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; - /** - * When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit. This is set to `true` by a parent Tile Group component. - */ - interactive?: boolean; - /** - * Accessible name for the component. - */ - label?: string; - /** - * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. - */ - layout?: Extract; - onCalciteInternalTileKeyEvent?: (event: CalciteTileCustomEvent) => void; - /** - * Fires when the selected state of the component changes. - */ - onCalciteTileSelect?: (event: CalciteTileCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. - */ - selected?: boolean; - /** - * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). This property is set by the parent tile-group. - */ - selectionAppearance?: SelectionAppearance1; - /** - * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). This property is set by the parent tile-group. - */ - selectionMode?: Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode>; - } - interface CalciteTileGroup { - /** - * Specifies the alignment of each `calcite-tile`'s content. - */ - alignment?: Exclude; - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - /** - * Accessible name for the component. - */ - label: string; - /** - * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. - */ - layout?: Extract; - /** - * Fires when the component's selection changes. - */ - onCalciteTileGroupSelect?: (event: CalciteTileGroupCustomEvent) => void; - /** - * Specifies the size of the component. - */ - scale?: Scale; - /** - * Specifies the component's selected items. - * @readonly - */ - selectedItems?: HTMLCalciteTileElement[]; - /** - * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). - */ - selectionAppearance?: SelectionAppearance1; - /** - * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). - */ - selectionMode?: Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode>; - } - /** - * @deprecated Use the `calcite-tile` component instead. - */ - 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; - /** - * Specifies an icon to display. - */ - icon?: IconNameOrString; - /** - * 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; - /** - * Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. - */ - type?: TileSelectType; - /** - * The component's value. - */ - value?: any; - /** - * Specifies the width of the component. - */ - width?: Extract<"auto" | "full", Width>; - } - /** - * @deprecated Use the `calcite-tile-group` component instead. - */ - 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; - onCalciteInternalTimePickerChange?: (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; - } - /** - * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. - */ - 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - } - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - interface CalciteTipGroup { - /** - * The component header text for all nested `calcite-tip`s. - */ - groupTitle?: string; - } - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - interface CalciteTipManager { - /** - * When `true`, does not display or position the component. - */ - closed?: boolean; - /** - * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. - */ - 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; - /** - * When `true`, 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 of the component, 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?: IconNameOrString; - /** - * In ancestor selection mode, show as indeterminate when only some children are selected. - */ - indeterminate?: boolean; - /** - * Accessible name for the component. - */ - label?: string; - lines?: boolean; - onCalciteInternalTreeItemSelect?: (event: CalciteTreeItemCustomEvent) => void; - parentExpanded?: boolean; - scale?: Scale; - /** - * When `true`, the component is selected. - */ - selected?: boolean; - selectionMode?: SelectionMode; - } - /** - * @deprecated Use the `calcite-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; + * @deprecated Use the `calcite-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/dev/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 CalciteCardGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteCardGroupElement; +} +export interface CalciteCarouselCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteCarouselElement; +} +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 CalciteDialogCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteDialogElement; +} +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 CalciteShellPanelCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteShellPanelElement; +} +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 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 CalciteTileCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTileElement; +} +export interface CalciteTileGroupCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteTileGroupElement; +} +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; + } + 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; + "calciteInternalCardKeyEvent": KeyboardEvent; + } + 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 HTMLCalciteCardGroupElementEventMap { + "calciteCardGroupSelect": void; + } + interface HTMLCalciteCardGroupElement extends Components.CalciteCardGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent) => 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: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent) => 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 HTMLCalciteCardGroupElement: { + prototype: HTMLCalciteCardGroupElement; + new (): HTMLCalciteCardGroupElement; + }; + interface HTMLCalciteCarouselElementEventMap { + "calciteCarouselChange": void; + "calciteCarouselPlay": void; + "calciteCarouselStop": void; + "calciteCarouselPause": void; + "calciteCarouselResume": void; + } + interface HTMLCalciteCarouselElement extends Components.CalciteCarousel, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteCarouselElement, ev: CalciteCarouselCustomEvent) => 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: HTMLCalciteCarouselElement, ev: CalciteCarouselCustomEvent) => 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 HTMLCalciteCarouselElement: { + prototype: HTMLCalciteCarouselElement; + new (): HTMLCalciteCarouselElement; + }; + interface HTMLCalciteCarouselItemElement extends Components.CalciteCarouselItem, HTMLStencilElement { + } + var HTMLCalciteCarouselItemElement: { + prototype: HTMLCalciteCarouselItemElement; + new (): HTMLCalciteCarouselItemElement; + }; + 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; + "calciteInternalChipSelect": void; + "calciteInternalSyncSelectedChips": void; + } + 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; + "calciteInternalComboboxItemChange": 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 HTMLCalciteDialogElementEventMap { + "calciteDialogBeforeClose": void; + "calciteDialogClose": void; + "calciteDialogBeforeOpen": void; + "calciteDialogOpen": void; + "calciteDialogScroll": void; + } + interface HTMLCalciteDialogElement extends Components.CalciteDialog, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteDialogElement, ev: CalciteDialogCustomEvent) => 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: HTMLCalciteDialogElement, ev: CalciteDialogCustomEvent) => 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 HTMLCalciteDialogElement: { + prototype: HTMLCalciteDialogElement; + new (): HTMLCalciteDialogElement; + }; + 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 { + "calciteHandleChange": void; + "calciteHandleNudge": HandleNudge; + "calciteInternalAssistiveTextChange": 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; + "calciteListDragEnd": ListDragDetail; + "calciteListDragStart": ListDragDetail; + "calciteListFilter": void; + "calciteListOrderChange": ListDragDetail; + "calciteInternalListDefaultSlotChange": void; + } /** - * Text for the filter input field. - */ - filterText?: string; + * 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; + "calciteListItemDragHandleChange": void; + "calciteListItemToggle": void; + "calciteInternalListItemSelect": void; + "calciteInternalListItemSelectMultiple": { + selectMultiple: boolean; + }; + "calciteInternalListItemActive": void; + "calciteInternalFocusPreviousItem": void; + "calciteInternalListItemChange": void; + "calciteInternalListItemToggle": 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; + } /** - * The currently filtered data. - * @readonly - */ - filteredData?: ItemData1; + * @deprecated Use the `calcite-dialog` component instead. + */ + 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; + } /** - * The currently filtered items. - * @readonly - */ - filteredItems?: HTMLCalciteValueListItemElement[]; + * @deprecated Use the `calcite-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; + }; /** - * The component's group identifier. To drag elements from one list into another, both lists must have the same group value. + * @deprecated Use the `calcite-list` component instead. */ - group?: string; + 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`, a busy indicator is displayed. - */ - loading?: boolean; + * @deprecated Use the `calcite-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 HTMLCalciteShellPanelElementEventMap { + "calciteInternalShellPanelResizeStart": void; + "calciteInternalShellPanelResizeEnd": void; + } + interface HTMLCalciteShellPanelElement extends Components.CalciteShellPanel, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteShellPanelElement, ev: CalciteShellPanelCustomEvent) => 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: HTMLCalciteShellPanelElement, ev: CalciteShellPanelCustomEvent) => 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 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 { + "calciteStepperChange": void; + "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; + "calciteInternalStepperItemRegister": StepperItemEventDetail; + "calciteStepperItemSelect": void; + } + 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 HTMLCalciteTabElement extends Components.CalciteTab, HTMLStencilElement { + } + var HTMLCalciteTabElement: { + prototype: HTMLCalciteTabElement; + new (): HTMLCalciteTabElement; + }; + interface HTMLCalciteTabNavElementEventMap { + "calciteTabChange": void; + "calciteInternalTabNavSlotChange": Element[]; + "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 HTMLCalciteTileElementEventMap { + "calciteInternalTileKeyEvent": KeyboardEvent; + "calciteTileSelect": void; + } + interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTileElement, ev: CalciteTileCustomEvent) => 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: HTMLCalciteTileElement, ev: CalciteTileCustomEvent) => 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 HTMLCalciteTileElement: { + prototype: HTMLCalciteTileElement; + new (): HTMLCalciteTileElement; + }; + interface HTMLCalciteTileGroupElementEventMap { + "calciteTileGroupSelect": void; + } + interface HTMLCalciteTileGroupElement extends Components.CalciteTileGroup, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteTileGroupElement, ev: CalciteTileGroupCustomEvent) => 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: HTMLCalciteTileGroupElement, ev: CalciteTileGroupCustomEvent) => 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 HTMLCalciteTileGroupElement: { + prototype: HTMLCalciteTileGroupElement; + new (): HTMLCalciteTileGroupElement; + }; + interface HTMLCalciteTileSelectElementEventMap { + "calciteTileSelectChange": void; + } /** - * Use this property to override individual strings used by the component. - */ - messageOverrides?: Partial; + * @deprecated Use the `calcite-tile` component instead. + */ + 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; + }; /** - * Made into a prop for testing purposes only + * @deprecated Use the `calcite-tile-group` component instead. */ - messages?: ValueListMessages; + interface HTMLCalciteTileSelectGroupElement extends Components.CalciteTileSelectGroup, HTMLStencilElement { + } + var HTMLCalciteTileSelectGroupElement: { + prototype: HTMLCalciteTileSelectGroupElement; + new (): HTMLCalciteTileSelectGroupElement; + }; + interface HTMLCalciteTimePickerElementEventMap { + "calciteInternalTimePickerChange": string; + } + 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; + } /** - * 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; + * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. + */ + 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; + }; /** - * Emits when any of the list item selections have changed. + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. */ - onCalciteListChange?: (event: CalciteValueListCustomEvent>) => void; + interface HTMLCalciteTipGroupElement extends Components.CalciteTipGroup, HTMLStencilElement { + } + var HTMLCalciteTipGroupElement: { + prototype: HTMLCalciteTipGroupElement; + new (): HTMLCalciteTipGroupElement; + }; + interface HTMLCalciteTipManagerElementEventMap { + "calciteTipManagerClose": void; + } /** - * Emits when a filter has changed. - */ - onCalciteListFilter?: (event: CalciteValueListCustomEvent) => void; + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. + */ + 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; + } /** - * Emits when the order of the list has changed. - */ - onCalciteListOrderChange?: (event: CalciteValueListCustomEvent) => void; + * @deprecated Use the `calcite-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; + } /** - * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard. - */ - selectionFollowsFocus?: boolean; - } - /** - * @deprecated Use the `calcite-list` component instead. - */ - interface CalciteValueListItem { + * @deprecated Use the `calcite-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-card-group": HTMLCalciteCardGroupElement; + "calcite-carousel": HTMLCalciteCarouselElement; + "calcite-carousel-item": HTMLCalciteCarouselItemElement; + "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-dialog": HTMLCalciteDialogElement; + "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-group": HTMLCalciteTileGroupElement; + "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"?: Extract<"start" | "end", Position>; + /** + * Specifies the type of the icon in the header. + */ + "iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>; + "onCalciteInternalAccordionChange"?: (event: CalciteAccordionCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. + */ + "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"?: IconNameOrString; + /** + * 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"?: Extract<"start" | "end", Position>; + /** + * Specifies an icon to display at the start of the component. + */ + "iconStart"?: IconNameOrString; + /** + * Specifies the type of the icon in the header inherited from the `calcite-accordion`. + */ + "iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>; + "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. + * @deprecated No longer necessary. + */ + "compact"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies an icon to display. + */ + "icon"?: IconNameOrString; + /** + * 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 `calcite-action-group`. + */ + "actionsEndGroupLabel"?: string; + /** + * When `true`, the expand-toggling behavior is disabled. + */ + "expandDisabled"?: boolean; + /** + * When `true`, the component is expanded. + */ + "expanded"?: boolean; + /** + * Specifies 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; + /** + * Fires when the `expanded` property is toggled. + */ + "onCalciteActionBarToggle"?: (event: CalciteActionBarCustomEvent) => void; + /** + * Disables automatically overflowing `calcite-action`s that won't fit into menus. + */ + "overflowActionsDisabled"?: 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; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position"?: Extract<"start" | "end", 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; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Indicates the layout of the component. + * @deprecated Use the `layout` property on the component's parent instead. + */ + "layout"?: Extract<"horizontal" | "vertical" | "grid", 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; + /** + * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements"?: FlipPlacement[]; + /** + * Specifies the text string for the component. + */ + "label": string; + /** + * Fires 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 `calcite-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"?: Extract<"horizontal" | "vertical" | "grid", Layout>; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ActionPadMessages; + /** + * Fires when the `expanded` property is toggled. + */ + "onCalciteActionPadToggle"?: (event: CalciteActionPadCustomEvent) => 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; + /** + * Arranges the component depending on the element's `dir` property. + */ + "position"?: Extract<"start" | "end", Position>; + /** + * Specifies the size of the expand `calcite-action`. + */ + "scale"?: Scale; + } + interface CalciteAlert { + /** + * This internal property, managed by the AlertManager, is used to inform the component if it is the active open Alert. + */ + "active"?: boolean; + /** + * 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; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded"?: boolean; + /** + * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon"?: IconNameOrString | 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, which 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; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * This internal property, managed by the AlertManager, is used to inform the component of how many alerts are currently open. + */ + "openAlertCount"?: number; + /** + * Specifies the placement of the component. + */ + "placement"?: MenuPlacement; + /** + * Specifies the ordering priority of the component when opened. + */ + "queue"?: AlertQueue; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + } + 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "headingLevel"?: HeadingLevel; + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * 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; + /** + * Fires when the component's header is clicked. + * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead. + */ + "onCalciteBlockToggle"?: (event: CalciteBlockCustomEvent) => void; + /** + * When `true`, expands the component and its contents. + */ + "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; + /** + * Displays a status-related indicator icon. + * @deprecated Use `icon-start` instead. + */ + "status"?: Status; + } + interface CalciteBlockSection { + /** + * Specifies an icon to display at the end of the component. + */ + "iconEnd"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: BlockSectionMessages; + /** + * Fires 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. + * @deprecated Use `icon-start` instead. + */ + "status"?: Status; + /** + * The component header text. + */ + "text"?: string; + /** + * Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a 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; + /** + * 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; + /** + * 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"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * Specifies the kind of the component, which will apply to the 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 component. + * @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`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Accessible name for the component. + */ + "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"?: CardMessages; + /** + * Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. + */ + "onCalciteCardSelect"?: (event: CalciteCardCustomEvent) => void; + "onCalciteInternalCardKeyEvent"?: (event: CalciteCardCustomEvent) => void; + /** + * When `true`, the component is selectable. + * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead. + */ + "selectable"?: boolean; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + /** + * This internal property, managed by a containing `calcite-card-group`, is conditionally set based on the `selectionMode` of the parent + */ + "selectionMode"?: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>; + /** + * Sets the placement of the thumbnail defined in the `thumbnail` slot. + */ + "thumbnailPosition"?: LogicalFlowPosition; + } + interface CalciteCardGroup { + /** + * 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 and the `selectionMode` is not `none`. + */ + "onCalciteCardGroupSelect"?: (event: CalciteCardGroupCustomEvent) => void; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteCardElement[]; + /** + * Specifies the selection mode of the component. + */ + "selectionMode"?: Extract< + "multiple" | "single" | "single-persist" | "none", + SelectionMode + >; + } + interface CalciteCarousel { + /** + * Specifies how and if the "previous" and "next" arrows are displayed. + */ + "arrowType"?: ArrowType; + /** + * When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. + */ + "autoplay"?: AutoplayType; + /** + * When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. + */ + "autoplayDuration"?: number; + /** + * Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items. + */ + "controlOverlay"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * 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"?: CarouselMessages; + /** + * Fires when the selected `calcite-carousel-item` changes. + */ + "onCalciteCarouselChange"?: (event: CalciteCarouselCustomEvent) => void; + /** + * Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content + */ + "onCalciteCarouselPause"?: (event: CalciteCarouselCustomEvent) => void; + /** + * Fires when the carousel autoplay is invoked by the user. + */ + "onCalciteCarouselPlay"?: (event: CalciteCarouselCustomEvent) => void; + /** + * Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content + */ + "onCalciteCarouselResume"?: (event: CalciteCarouselCustomEvent) => void; + /** + * Fires when the carousel autoplay state is stopped by a user. + */ + "onCalciteCarouselStop"?: (event: CalciteCarouselCustomEvent) => void; + /** + * Made into a prop for testing purposes only + */ + "paused"?: boolean; + /** + * The component's selected `calcite-carousel-item`. + * @readonly + */ + "selectedItem"?: HTMLCalciteCarouselItemElement; + } + interface CalciteCarouselItem { + /** + * Accessible name for the component. + */ + "label": string; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + } + 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. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Fires when the component's `checked` status changes. + */ + "onCalciteCheckboxChange"?: (event: CalciteCheckboxCustomEvent) => void; + /** + * Fires when the component is blurred. + */ + "onCalciteInternalCheckboxBlur"?: (event: CalciteCheckboxCustomEvent) => void; + /** + * Fires 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; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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"?: IconNameOrString; + /** + * 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, which 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; + "onCalciteInternalChipSelect"?: (event: CalciteChipCustomEvent) => void; + "onCalciteInternalSyncSelectedChips"?: (event: CalciteChipCustomEvent) => void; + "parentChipGroup"?: HTMLCalciteChipGroupElement; + /** + * 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; + /** + * Fires 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, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. + */ + "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`. + * @deprecated Use `clearable` instead + */ + "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; + /** + * 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`. + */ + "clearable"?: 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/dev/src/components/color-picker/interfaces.ts#L10) + */ + "value"?: ColorValue | null; + } + interface CalciteColorPickerHexInput { + /** + * 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; + /** + * 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; + /** + * Text for the component's filter input field. + */ + "filterText"?: string; + /** + * Specifies the component's filtered items. + * @readonly + */ + "filteredItems"?: HTMLCalciteComboboxItemElement[]; + /** + * Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available. + */ + "flipPlacements"?: FlipPlacement[]; + /** + * 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"?: IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "placeholderIconFlipRtl"?: boolean; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value 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; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteComboboxItemElement[]; + /** + * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where: `"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, and `"single"` displays one `calcite-chip` with the total number of selections. + */ + "selectionDisplay"?: SelectionDisplay; + /** + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. + */ + "selectionMode"?: Extract< + "single" | "single-persist" | "ancestors" | "multiple", + SelectionMode + >; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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[]; + /** + * A description for the component, which displays below the label. + */ + "description"?: string; + /** + * 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; + /** + * Pattern for highlighting filter text matches. + */ + "filterTextMatchPattern"?: RegExp; + /** + * The `id` attribute of the component. When omitted, a globally unique identifier is used. + */ + "guid"?: string; + /** + * The component's text. + */ + "heading"?: string; + /** + * Specifies an icon to display. + */ + "icon"?: IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * The component's label. + */ + "label"?: any; + /** + * Provides additional metadata to the component used in filtering. + */ + "metadata"?: Record; + /** + * Fires whenever the component is selected or unselected. + */ + "onCalciteComboboxItemChange"?: (event: CalciteComboboxItemCustomEvent) => void; + /** + * Fires whenever a property the parent combobox needs to know about is changed. + */ + "onCalciteInternalComboboxItemChange"?: (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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, 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 short heading. When provided, the short heading will be displayed in the component's selection. It is recommended to use 5 characters or fewer. + */ + "shortHeading"?: string; + /** + * The component's text. + * @deprecated Use `heading` instead. + */ + "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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. + */ + "onCalciteDatePickerChange"?: (event: CalciteDatePickerCustomEvent) => void; + /** + * Fires 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; + /** + * Fires when user selects day. + */ + "onCalciteDaySelect"?: (event: CalciteDatePickerDayCustomEvent) => void; + /** + * Fires 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 { + /** + * The currently active Date. + */ + "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; + /** + * Fires when user hovers the date. + */ + "onCalciteInternalDatePickerHover"?: (event: CalciteDatePickerMonthCustomEvent) => void; + "onCalciteInternalDatePickerMouseOut"?: (event: CalciteDatePickerMonthCustomEvent) => void; + /** + * Fires 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 { + /** + * The focused date is indicated and will become the selected date if the 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; + /** + * Fires to active date + */ + "onCalciteInternalDatePickerSelect"?: (event: CalciteDatePickerMonthHeaderCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Already selected date. + */ + "selectedDate"?: Date; + } + interface CalciteDialog { + /** + * Passes a function to run before the component closes. + */ + "beforeClose"?: () => Promise; + /** + * When `true`, disables the component's close button. + */ + "closeDisabled"?: boolean; + /** + * A description for the component. + */ + "description"?: string; + /** + * When `true`, the component is draggable. + */ + "dragEnabled"?: boolean; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded"?: boolean; + /** + * When `true`, disables the default close on escape behavior. By default, an open dialog can be dismissed by pressing the Esc key. + * @see [Dialog Accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility) + */ + "escapeDisabled"?: boolean; + /** + * The component header text. + */ + "heading"?: string; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "headingLevel"?: HeadingLevel; + /** + * Specifies the kind of the component, which will style the top border. + */ + "kind"?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; + /** + * 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"?: DialogMessages; + /** + * When `true`, displays a scrim blocking interaction underneath the component. + */ + "modal"?: boolean; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteDialogBeforeClose"?: (event: CalciteDialogCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteDialogBeforeOpen"?: (event: CalciteDialogCustomEvent) => void; + /** + * Fires when the component is closed and animation is complete. + */ + "onCalciteDialogClose"?: (event: CalciteDialogCustomEvent) => void; + /** + * Fires when the component is open and animation is complete. + */ + "onCalciteDialogOpen"?: (event: CalciteDialogCustomEvent) => void; + /** + * Fires when the content is scrolled. + */ + "onCalciteDialogScroll"?: (event: CalciteDialogCustomEvent) => void; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * When `true`, disables the closing of the component when clicked outside. + */ + "outsideCloseDisabled"?: 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 dialog. + */ + "placement"?: DialogPlacement; + /** + * When `true`, the component is resizable. + */ + "resizable"?: boolean; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the width of the component. + */ + "widthScale"?: Scale; + } + 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; + /** + * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements"?: FlipPlacement[]; + /** + * 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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. + */ + "selectionMode"?: Extract<"none" | "single" | "multiple", SelectionMode>; + } + interface CalciteDropdownItem { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * 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"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Specifies the kind of the component, which 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; + /** + * Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched. + */ + "filterProps"?: string[]; + /** + * 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; + /** + * 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; + /** + * Passes a function to run before the component closes. + */ + "beforeClose"?: () => 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"?: CollapseDirection; + /** + * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * 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 component. + */ + "scale"?: Scale; + /** + * 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 { + /** + * When `true`, disables unselecting the component when blurred. + */ + "blurUnselectDisabled"?: boolean; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: 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. + * @readonly + */ + "messages"?: HandleMessages; + /** + * Fires whenever the component is selected or unselected. + */ + "onCalciteHandleChange"?: (event: CalciteHandleCustomEvent) => void; + /** + * Fires when the handle is selected and the up or down arrow key is pressed. + */ + "onCalciteHandleNudge"?: (event: CalciteHandleCustomEvent) => void; + /** + * Fires when the assistive text has changed. + */ + "onCalciteInternalAssistiveTextChange"?: (event: CalciteHandleCustomEvent) => void; + /** + * When `true`, the component is selected. + */ + "selected"?: boolean; + "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"?: IconNameOrString; + /** + * 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"?: Extract<"start" | "end", Alignment>; + /** + * 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; + /** + * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 + * @ignore + */ + "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; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. + */ + "icon"?: IconNameOrString | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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"; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * The component's value. + */ + "value"?: string; + } + interface CalciteInputDatePicker { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements"?: FlipPlacement[]; + /** + * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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"?: IconNameOrString | boolean; + /** + * 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"?: Extract<"start" | "end", Alignment>; + /** + * 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; + /** + * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 + * @ignore + */ + "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; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon"?: IconNameOrString | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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) + * @deprecated This property has no effect on the component. + */ + "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) + * @deprecated This property has no effect on the component. + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * The component's value. + */ + "value"?: string; + } + interface CalciteInputText { + /** + * Specifies the text alignment of the component's value. + */ + "alignment"?: Extract<"start" | "end", Alignment>; + /** + * 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; + /** + * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726 + * @ignore + */ + "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; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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; + /** + * Specifies an icon to display. + * @futureBreaking Remove boolean type as it is not supported. + */ + "icon"?: IconNameOrString | boolean; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 + * @futureBreaking kebab-cased attribute will not be supported in a future release + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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; + /** + * Specifies the maximum value. + * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max) + */ + "max"?: 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 minimum value. + * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min) + */ + "min"?: string; + /** + * 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 component's `value` is changes. + */ + "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; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * The time value in ISO (24-hour) format. + */ + "value"?: string; + } + interface CalciteInputTimeZone { + /** + * When `true`, an empty value (`null`) will be allowed as a `value`. When `false`, an offset or name value is enforced, and clearing the input or blurring will restore the last valid `value`. + */ + "clearable"?: 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; + /** + * 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 that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. + * @default "offset" + */ + "mode"?: TimeZoneMode; + /** + * Specifies the name of the component. Required to pass the component's `value` on form submission. + */ + "name"?: string; + /** + * Specifies how the offset will be displayed, where `"user"` uses `UTC` or `GMT` depending on the user's locale, `"gmt"` always uses `GMT`, and `"utc"` always uses `UTC`. This only applies to the `offset` mode. + * @default "user" + */ + "offsetStyle"?: OffsetStyle; + /** + * Fires when the component is requested to be closed and before the closing transition begins. + */ + "onCalciteInputTimeZoneBeforeClose"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires when the component is added to the DOM but not rendered, and before the opening transition begins. + */ + "onCalciteInputTimeZoneBeforeOpen"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires when the component's `value` changes. + */ + "onCalciteInputTimeZoneChange"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires after the component is closed and animation is complete. + */ + "onCalciteInputTimeZoneClose"?: (event: CalciteInputTimeZoneCustomEvent) => void; + /** + * Fires after the component is opened and animation is complete. + */ + "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; + /** + * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. + */ + "readOnly"?: boolean; + /** + * 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; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * 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 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 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; + /** + * Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). + */ + "filterProps"?: 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; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only + */ + "messages"?: ListMessages; + /** + * Specifies the Unicode numeral system used by the component for localization. + */ + "numberingSystem"?: NumberingSystem; + /** + * Fires when the default slot has changes in order to notify parent lists. + */ + "onCalciteInternalListDefaultSlotChange"?: (event: CalciteListCustomEvent) => void; + /** + * Fires when the component's selected items have changed. + */ + "onCalciteListChange"?: (event: CalciteListCustomEvent) => void; + /** + * Fires when the component's dragging has ended. + */ + "onCalciteListDragEnd"?: (event: CalciteListCustomEvent) => void; + /** + * Fires when the component's dragging has started. + */ + "onCalciteListDragStart"?: (event: CalciteListCustomEvent) => void; + /** + * Fires when the component's filter has changed. + */ + "onCalciteListFilter"?: (event: CalciteListCustomEvent) => void; + /** + * Fires when the component's item order changes. + */ + "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 of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. + */ + "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; + /** + * Sets the item to display a border. + */ + "bordered"?: 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 item is not draggable. + */ + "dragDisabled"?: boolean; + /** + * When `true`, the component displays a draggable button. + */ + "dragHandle"?: boolean; + /** + * When `true`, the component's drag handle is selected. + */ + "dragSelected"?: boolean; + /** + * Hides the component when filtered. + */ + "filterHidden"?: 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; + "onCalciteInternalListItemSelectMultiple"?: (event: CalciteListItemCustomEvent<{ + selectMultiple: boolean; + }>) => void; + "onCalciteInternalListItemToggle"?: (event: CalciteListItemCustomEvent) => void; + /** + * Fires when the close button is clicked. + */ + "onCalciteListItemClose"?: (event: CalciteListItemCustomEvent) => void; + /** + * Fires when the drag handle is selected. + */ + "onCalciteListItemDragHandleChange"?: (event: CalciteListItemCustomEvent) => void; + /** + * Fires when the component is selected. + */ + "onCalciteListItemSelect"?: (event: CalciteListItemCustomEvent) => void; + /** + * Fires when the open button is clicked. + */ + "onCalciteListItemToggle"?: (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; + /** + * Hides the component when filtered. + */ + "filterHidden"?: boolean; + /** + * The header text for all nested `calcite-list-item` rows. + */ + "heading"?: string; + /** + * Fires when changes occur in the default slot, notifying parent lists of the changes. + */ + "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; + } + interface CalciteLoader { + /** + * Indicates whether the component is in a loading state. + */ + "complete"?: boolean; + /** + * 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. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress. + */ + "type"?: "indeterminate" | "determinate" | "determinate-value"; + /** + * 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"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + "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"?: MeterFillType; + /** + * 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 `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 `rangeLabelType` 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 `valueLabel` is `true`, specifies the format of displayed label. + */ + "valueLabelType"?: MeterLabelType; + } /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - disabled?: boolean; - handleActivated?: boolean; + * @deprecated Use the `calcite-dialog` component instead. + */ + 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; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded"?: 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 `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. + */ + "fullscreen"?: boolean; + /** + * Specifies the kind of the component, which 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; + /** + * 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 heading level of the component's heading for proper document structure, without affecting visual styling. + */ + "headingLevel"?: HeadingLevel; + /** + * 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"?: IconNameOrString; + /** + * 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"?: IconNameOrString | 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, which 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 { + /** + * Passes a function to run before the component closes. + */ + "beforeClose"?: () => Promise; + /** + * 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"?: CollapseDirection; + /** + * 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * 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 component. + */ + "scale"?: Scale; + } /** - * 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/dev/src/components/pick-list/resources.ts#L5) - */ - icon?: ICON_TYPES | null; + * @deprecated Use the `calcite-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 component's filtered data. + * @readonly + */ + "filteredData"?: ItemData1; + /** + * The component's filtered items. + * @readonly + */ + "filteredItems"?: HTMLCalcitePickListItemElement[]; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + } /** - * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). - */ - iconFlipRtl?: boolean; + * @deprecated Use the `calcite-list` component instead. + */ + interface CalcitePickListGroup { + /** + * Specifies the title for all nested `calcite-pick-list-item`s. + */ + "groupTitle"?: string; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "headingLevel"?: HeadingLevel; + } /** - * Label and accessible name for the component. Appears next to the icon. - */ - label: string; + * @deprecated Use the `calcite-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/dev/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`, displays a close button within the component. + */ + "closable"?: boolean; + /** + * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`. + */ + "flipDisabled"?: boolean; + /** + * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements"?: FlipPlacement[]; + /** + * When `true`, prevents focus trapping. + */ + "focusTrapDisabled"?: boolean; + /** + * The component header text. + */ + "heading"?: string; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * 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; + /** + * Defines the layout of the component. + */ + "layout"?: Extract<"horizontal" | "vertical" | "grid", 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; + /** + * Specifies the status of the validation message. + */ + "status"?: Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + } + 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; + /** + * Specifies the status of the validation message. + */ + "status"?: Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`. + */ + "layout"?: Extract<"horizontal" | "vertical" | "grid", 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; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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; + /** + * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed + */ + "embedded"?: boolean; + /** + * 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; + /** + * 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"?: Extract<"start" | "end", 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-content` or `float`, specifies the maximum height of the component. + * @deprecated Use `heightScale` instead. + */ + "detachedHeightScale"?: Scale; + /** + * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. + */ + "displayMode"?: DisplayMode1; + /** + * When `layout` is `horizontal`, 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; + "onCalciteInternalShellPanelResizeEnd"?: (event: CalciteShellPanelCustomEvent) => void; + "onCalciteInternalShellPanelResizeStart"?: (event: CalciteShellPanelCustomEvent) => void; + /** + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "position"?: Extract<"start" | "end", Position>; + /** + * When `true` and `displayMode` is not `float-content` or `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; + /** + * Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. + */ + "fillPlacement"?: "start" | "none" | "end"; + /** + * 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/dev/src/components/graph/interfaces.ts#L5) + */ + "histogram"?: DataSeries; + /** + * A set of single color stops for a histogram, sorted by offset ascending. + */ + "histogramStops"?: ColorStop[]; + /** + * When specified, allows users to customize handle labels. + */ + "labelFormatter"?: ( + value: number, + type: "value" | "min" | "max" | "tick", + defaultFormatter: (value: number) => string, + ) => string | undefined; + /** + * 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: To constantly listen to the drag event, use `calciteSliderInput` instead. + */ + "onCalciteSliderChange"?: (event: CalciteSliderCustomEvent) => void; + /** + * Fires on all updates to the component. Note: Fires frequently during drag. To perform 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"?: Extract<"horizontal" | "vertical" | "grid", 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 component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements"?: FlipPlacement[]; + /** + * Specifies the kind of the component, which 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; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement"?: MenuPlacement; + /** + * Specifies an icon to display at the end of the primary button. + */ + "primaryIconEnd"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + /** + * 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"?: StepperLayout; + /** + * 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. + */ + "onCalciteStepperChange"?: (event: CalciteStepperCustomEvent) => void; + /** + * Fires when the active `calcite-stepper-item` changes. + * @deprecated use `calciteStepperChange` instead or `calciteStepperItemChange` on items instead. + */ + "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"?: StepperLayout; + /** + * 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; + /** + * Fires when the active `calcite-stepper-item` changes. + */ + "onCalciteStepperItemSelect"?: (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 { + /** + * 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; + "layout"?: TabLayout; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only. + */ + "messages"?: TabNavMessages; + "onCalciteInternalTabChange"?: (event: CalciteTabNavCustomEvent) => void; + "onCalciteInternalTabNavSlotChange"?: (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 `calcite-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"?: IconNameOrString; + /** + * 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"?: IconNameOrString; + "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/dev/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/dev/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; + /** + * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s. When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable. + */ + "interactionMode"?: TableInteractionMode; + /** + * 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 display of the selection interface when `selection-mode` is not `"none"`. When `"none"`, content slotted the `selection-actions` slot will not be displayed. + */ + "selectionDisplay"?: TableSelectionDisplay; + /** + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. + */ + "selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>; + /** + * When `true`, displays striped styling in the component. + */ + "striped"?: boolean; + /** + * When `true`, displays striped styling in the component. + * @deprecated Use the `striped` property instead. + */ + "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; + "interactionMode"?: TableInteractionMode; + "lastCell"?: 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; + "parentRowAlignment"?: Alignment; + "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; + "interactionMode"?: TableInteractionMode; + "lastCell"?: boolean; + /** + * 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; + "parentRowAlignment"?: Alignment; + "parentRowIsSelected"?: boolean; + "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 { + /** + * Specifies the alignment of the component. + */ + "alignment"?: Alignment; + "bodyRowCount"?: number; + "cellCount"?: number; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + "interactionMode"?: TableInteractionMode; + "lastVisibleRow"?: 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`. + */ + "position"?: TabPosition; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + } + interface CalciteTextArea { + /** + * 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 minimum number of characters allowed. + * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength) + */ + "minLength"?: number; + /** + * 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"; + /** + * Specifies the status of the input field, which determines message and icons. + */ + "status"?: Status; + /** + * Specifies the validation icon to display under the component. + */ + "validationIcon"?: IconNameOrString | boolean; + /** + * Specifies the validation message to display under the component. + */ + "validationMessage"?: string; + /** + * The current validation state of the component. + * @readonly + * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) + */ + "validity"?: MutableValidityState; + /** + * 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. + * @deprecated + */ + "active"?: boolean; + /** + * Specifies the alignment of the Tile's content. + */ + "alignment"?: Exclude; + /** + * 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. + * @deprecated No longer necessary. + */ + "embed"?: boolean; + /** + * The component header text, which displays between the icon and description. + */ + "heading"?: string; + /** + * When embed is `"false"`, the URL for the component. + */ + "href"?: string; + /** + * Specifies an icon to display. + */ + "icon"?: IconNameOrString; + /** + * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "iconFlipRtl"?: boolean; + /** + * When true, enables the tile to be focused, and allows the `calciteTileSelect` to emit. This is set to `true` by a parent Tile Group component. + */ + "interactive"?: boolean; + /** + * Accessible name for the component. + */ + "label"?: string; + /** + * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. + */ + "layout"?: Extract; + "onCalciteInternalTileKeyEvent"?: (event: CalciteTileCustomEvent) => void; + /** + * Fires when the selected state of the component changes. + */ + "onCalciteTileSelect"?: (event: CalciteTileCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * When `true` and the parent's `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. + */ + "selected"?: boolean; + /** + * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). This property is set by the parent tile-group. + */ + "selectionAppearance"?: SelectionAppearance1; + /** + * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). This property is set by the parent tile-group. + */ + "selectionMode"?: Extract< + "multiple" | "none" | "single" | "single-persist", + SelectionMode + >; + } + interface CalciteTileGroup { + /** + * Specifies the alignment of each `calcite-tile`'s content. + */ + "alignment"?: Exclude; + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Accessible name for the component. + */ + "label": string; + /** + * Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. + */ + "layout"?: Extract; + /** + * Fires when the component's selection changes. + */ + "onCalciteTileGroupSelect"?: (event: CalciteTileGroupCustomEvent) => void; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the component's selected items. + * @readonly + */ + "selectedItems"?: HTMLCalciteTileElement[]; + /** + * Specifies the selection appearance, where: - `"icon"` (displays a checkmark or dot), or - `"border"` (displays a border). + */ + "selectionAppearance"?: SelectionAppearance1; + /** + * Specifies the selection mode, where: - `"multiple"` (allows any number of selected items), - `"single"` (allows only one selected item), - `"single-persist"` (allows only one selected item and prevents de-selection), - `"none"` (allows no selected items). + */ + "selectionMode"?: Extract< + "multiple" | "none" | "single" | "single-persist", + SelectionMode + >; + } /** - * Provides additional metadata to the component. Primary use is for a filter on the parent list. - */ - metadata?: Record; + * @deprecated Use the `calcite-tile` component instead. + */ + 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; + /** + * Specifies an icon to display. + */ + "icon"?: IconNameOrString; + /** + * 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; + /** + * Specifies the selection mode of the component, where: `"radio"` is for single selection, and `"checkbox"` is for multiple selections. + */ + "type"?: TileSelectType; + /** + * The component's value. + */ + "value"?: any; + /** + * Specifies the width of the component. + */ + "width"?: Extract<"auto" | "full", Width>; + } /** - * When `true`, prevents the content of the component from user interaction. - */ - nonInteractive?: boolean; + * @deprecated Use the `calcite-tile-group` component instead. + */ + 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; + "onCalciteInternalTimePickerChange"?: (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; + } /** - * Fires when the component is selected or unselected. - */ - onCalciteListItemChange?: ( - event: CalciteValueListItemCustomEvent<{ - item: HTMLCalciteValueListItemElement; - value: any; - selected: boolean; - shiftPressed: boolean; - }>, - ) => void; + * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. + */ + 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 heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + } /** - * Fires when the remove button is pressed. + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. */ - onCalciteListItemRemove?: (event: CalciteValueListItemCustomEvent) => void; - onCalciteValueListItemDragHandleBlur?: (event: CalciteValueListItemCustomEvent) => void; + interface CalciteTipGroup { + /** + * The component header text for all nested `calcite-tip`s. + */ + "groupTitle"?: string; + } /** - * When `true`, adds an action to remove the component. - */ - removable?: boolean; + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. + */ + interface CalciteTipManager { + /** + * When `true`, does not display or position the component. + */ + "closed"?: boolean; + /** + * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. + */ + "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; + /** + * When `true`, 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 of the component, 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"?: IconNameOrString; + /** + * In ancestor selection mode, show as indeterminate when only some children are selected. + */ + "indeterminate"?: boolean; + /** + * Accessible name for the component. + */ + "label"?: string; + "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 `calcite-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 `calcite-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/dev/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-card-group": CalciteCardGroup; - "calcite-carousel": CalciteCarousel; - "calcite-carousel-item": CalciteCarouselItem; - "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-dialog": CalciteDialog; - "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-group": CalciteTileGroup; - "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-card-group": CalciteCardGroup; + "calcite-carousel": CalciteCarousel; + "calcite-carousel-item": CalciteCarouselItem; + "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-dialog": CalciteDialog; + "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-group": CalciteTileGroup; + "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-card-group": LocalJSX.CalciteCardGroup & JSXBase.HTMLAttributes; - "calcite-carousel": LocalJSX.CalciteCarousel & JSXBase.HTMLAttributes; - "calcite-carousel-item": LocalJSX.CalciteCarouselItem & 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-dialog": LocalJSX.CalciteDialog & 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; - /** - * @deprecated Use the `calcite-dialog` component instead. - */ - "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 `calcite-list` component instead. - */ - "calcite-pick-list": LocalJSX.CalcitePickList & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-list` component instead. - */ - "calcite-pick-list-group": LocalJSX.CalcitePickListGroup & - JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-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-group": LocalJSX.CalciteTileGroup & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-tile` component instead. - */ - "calcite-tile-select": LocalJSX.CalciteTileSelect & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-tile-group` component instead. - */ - "calcite-tile-select-group": LocalJSX.CalciteTileSelectGroup & - JSXBase.HTMLAttributes; - "calcite-time-picker": LocalJSX.CalciteTimePicker & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. - */ - "calcite-tip": LocalJSX.CalciteTip & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - "calcite-tip-group": LocalJSX.CalciteTipGroup & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. - */ - "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 `calcite-list` component instead. - */ - "calcite-value-list": LocalJSX.CalciteValueList & JSXBase.HTMLAttributes; - /** - * @deprecated Use the `calcite-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-card-group": LocalJSX.CalciteCardGroup & JSXBase.HTMLAttributes; + "calcite-carousel": LocalJSX.CalciteCarousel & JSXBase.HTMLAttributes; + "calcite-carousel-item": LocalJSX.CalciteCarouselItem & 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-dialog": LocalJSX.CalciteDialog & 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; + /** + * @deprecated Use the `calcite-dialog` component instead. + */ + "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 `calcite-list` component instead. + */ + "calcite-pick-list": LocalJSX.CalcitePickList & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-list` component instead. + */ + "calcite-pick-list-group": LocalJSX.CalcitePickListGroup & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-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-group": LocalJSX.CalciteTileGroup & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-tile` component instead. + */ + "calcite-tile-select": LocalJSX.CalciteTileSelect & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-tile-group` component instead. + */ + "calcite-tile-select-group": LocalJSX.CalciteTileSelectGroup & JSXBase.HTMLAttributes; + "calcite-time-picker": LocalJSX.CalciteTimePicker & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead. + */ + "calcite-tip": LocalJSX.CalciteTip & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. + */ + "calcite-tip-group": LocalJSX.CalciteTipGroup & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead. + */ + "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 `calcite-list` component instead. + */ + "calcite-value-list": LocalJSX.CalciteValueList & JSXBase.HTMLAttributes; + /** + * @deprecated Use the `calcite-list` component instead. + */ + "calcite-value-list-item": LocalJSX.CalciteValueListItem & JSXBase.HTMLAttributes; + } + } } diff --git a/packages/calcite-components/src/tests/globalStyles.e2e.ts b/packages/calcite-components/src/tests/globalStyles.e2e.ts index 867f57c6411..c282895b3df 100644 --- a/packages/calcite-components/src/tests/globalStyles.e2e.ts +++ b/packages/calcite-components/src/tests/globalStyles.e2e.ts @@ -216,8 +216,8 @@ describe("global styles", () => { await testEscapeAndCheckOpenState([inputPicker, popover, secondModal, firstModal, sheet]); } - await testStackEscapeSequence(page, "calcite-input-date-picker"); await testStackEscapeSequence(page, "calcite-input-time-picker"); + await testStackEscapeSequence(page, "calcite-input-date-picker"); }); }); }); From f720d10ad0a65b401afb03f50251510ec1695ffa Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Sep 2024 08:33:34 -0700 Subject: [PATCH 46/62] change logic to handle ignoring an Escape key press in focus-trap --- .../src/components/dialog/dialog.tsx | 21 ++++++------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 712f4af1c39..5d72b36f50f 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -5,7 +5,6 @@ import { EventEmitter, h, Host, - Listen, Method, Prop, State, @@ -234,6 +233,12 @@ export class Dialog connectFocusTrap(this, { focusTrapOptions: { clickOutsideDeactivates: false, + escapeDeactivates: (event) => { + if (!this.escapeDisabled && !event.defaultPrevented) { + event.preventDefault(); + return true; + } + }, }, }); connectFocusTrap(this); @@ -384,20 +389,6 @@ export class Dialog this.handleMutationObserver(), ); - //-------------------------------------------------------------------------- - // - // Event Listeners - // - //-------------------------------------------------------------------------- - - @Listen("keydown", { target: "window" }) - handleEscape(event: KeyboardEvent): void { - if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) { - this.open = false; - event.preventDefault(); - } - } - //-------------------------------------------------------------------------- // // Events From 6bf5a5fc531db43d9bb4f94d9cc98157226b08bb Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Sep 2024 09:18:51 -0700 Subject: [PATCH 47/62] change logic to handle ignoring an Escape key press in focus-trap on dialog, modal, sheet --- .../src/components/dialog/dialog.tsx | 7 ++--- .../src/components/modal/modal.tsx | 22 +++++---------- .../src/components/sheet/sheet.tsx | 27 ++++++++----------- 3 files changed, 22 insertions(+), 34 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 5d72b36f50f..5ac1c74d98f 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -234,10 +234,11 @@ export class Dialog focusTrapOptions: { clickOutsideDeactivates: false, escapeDeactivates: (event) => { - if (!this.escapeDisabled && !event.defaultPrevented) { - event.preventDefault(); - return true; + if (event.defaultPrevented || this.escapeDisabled) { + return false; } + event.preventDefault(); + return true; }, }, }); diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index b71350f2a6f..bd71de97f06 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -5,7 +5,6 @@ import { EventEmitter, h, Host, - Listen, Method, Prop, State, @@ -201,6 +200,13 @@ export class Modal connectFocusTrap(this, { focusTrapOptions: { clickOutsideDeactivates: false, + escapeDeactivates: (event) => { + if (event.defaultPrevented || this.escapeDisabled) { + return false; + } + event.preventDefault(); + return true; + }, }, }); } @@ -399,20 +405,6 @@ export class Modal @State() defaultMessages: ModalMessages; - //-------------------------------------------------------------------------- - // - // Event Listeners - // - //-------------------------------------------------------------------------- - - @Listen("keydown", { target: "window" }) - handleEscape(event: KeyboardEvent): void { - if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) { - this.open = false; - event.preventDefault(); - } - } - //-------------------------------------------------------------------------- // // Events diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index 0c065f675a3..b8842b60226 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -5,7 +5,6 @@ import { EventEmitter, h, Host, - Listen, Method, Prop, VNode, @@ -152,7 +151,17 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo connectedCallback(): void { this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); - connectFocusTrap(this); + connectFocusTrap(this, { + focusTrapOptions: { + escapeDeactivates: (event) => { + if (event.defaultPrevented || this.escapeDisabled) { + return false; + } + event.preventDefault(); + return true; + }, + }, + }); } disconnectedCallback(): void { @@ -218,20 +227,6 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo this.handleMutationObserver(), ); - //-------------------------------------------------------------------------- - // - // Event Listeners - // - //-------------------------------------------------------------------------- - - @Listen("keydown", { target: "window" }) - handleEscape(event: KeyboardEvent): void { - if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) { - this.open = false; - event.preventDefault(); - } - } - //-------------------------------------------------------------------------- // // Events From 7f110b6bbe9273cd44dff0f66a17b53e110186f9 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Sep 2024 12:08:57 -0700 Subject: [PATCH 48/62] adjust test timing to accomodate changes --- .../calcite-components/src/components.d.ts | 96 +++++++++---------- .../src/components/dialog/dialog.e2e.ts | 10 +- 2 files changed, 56 insertions(+), 50 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 8751465866a..45c00f705de 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -393,10 +393,6 @@ export namespace Components { * When `true`, the component is expanded. */ "expanded": boolean; - /** - * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements": FlipPlacement[]; /** * Accessible name for the component. */ @@ -406,10 +402,18 @@ export namespace Components { * @deprecated Use the `layout` property on the component's parent instead. */ "layout": Extract<"horizontal" | "vertical" | "grid", Layout>; + /** + * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. + */ + "menuFlipPlacements": FlipPlacement[]; /** * When `true`, the `calcite-action-menu` is open. */ "menuOpen": boolean; + /** + * Determines where the action menu will be positioned. + */ + "menuPlacement": LogicalPlacement; /** * Use this property to override individual strings used by the component. */ @@ -422,10 +426,6 @@ export namespace Components { * 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 action menu will be positioned. - */ - "placement": LogicalPlacement; /** * Specifies the size of the `calcite-action-menu`. */ @@ -632,10 +632,6 @@ export namespace Components { * When `true`, displays a drag handle in the header. */ "dragHandle": boolean; - /** - * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements": FlipPlacement[]; /** * The component header text. */ @@ -660,6 +656,14 @@ export namespace Components { * When `true`, a busy indicator is displayed. */ "loading": boolean; + /** + * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. + */ + "menuFlipPlacements": FlipPlacement[]; + /** + * Determines where the action menu will be positioned. + */ + "menuPlacement": LogicalPlacement; /** * Use this property to override individual strings used by the component. */ @@ -676,10 +680,6 @@ export namespace Components { * 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 action menu will be positioned. - */ - "placement": LogicalPlacement; /** * Sets focus on the component's first tabbable element. */ @@ -3880,10 +3880,6 @@ export namespace Components { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled": boolean; - /** - * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements": FlipPlacement[]; /** * The component header text. */ @@ -3896,10 +3892,18 @@ export namespace Components { * When `true`, a busy indicator is displayed. */ "loading": boolean; + /** + * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. + */ + "menuFlipPlacements": FlipPlacement[]; /** * When `true`, the action menu items in the `header-menu-actions` slot are open. */ "menuOpen": boolean; + /** + * Determines where the action menu will be positioned. + */ + "menuPlacement": LogicalPlacement; /** * Use this property to override individual strings used by the component. */ @@ -3912,10 +3916,6 @@ export namespace Components { * 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 action menu will be positioned. - */ - "placement": LogicalPlacement; /** * Specifies the size of the component. */ @@ -8349,10 +8349,6 @@ declare namespace LocalJSX { * When `true`, the component is expanded. */ "expanded"?: boolean; - /** - * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements"?: FlipPlacement[]; /** * Accessible name for the component. */ @@ -8362,10 +8358,18 @@ declare namespace LocalJSX { * @deprecated Use the `layout` property on the component's parent instead. */ "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>; + /** + * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. + */ + "menuFlipPlacements"?: FlipPlacement[]; /** * When `true`, the `calcite-action-menu` is open. */ "menuOpen"?: boolean; + /** + * Determines where the action menu will be positioned. + */ + "menuPlacement"?: LogicalPlacement; /** * Use this property to override individual strings used by the component. */ @@ -8378,10 +8382,6 @@ declare namespace LocalJSX { * 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 action menu will be positioned. - */ - "placement"?: LogicalPlacement; /** * Specifies the size of the `calcite-action-menu`. */ @@ -8595,10 +8595,6 @@ declare namespace LocalJSX { * When `true`, displays a drag handle in the header. */ "dragHandle"?: boolean; - /** - * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements"?: FlipPlacement[]; /** * The component header text. */ @@ -8623,6 +8619,14 @@ declare namespace LocalJSX { * When `true`, a busy indicator is displayed. */ "loading"?: boolean; + /** + * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. + */ + "menuFlipPlacements"?: FlipPlacement[]; + /** + * Determines where the action menu will be positioned. + */ + "menuPlacement"?: LogicalPlacement; /** * Use this property to override individual strings used by the component. */ @@ -8660,10 +8664,6 @@ declare namespace LocalJSX { * 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 action menu will be positioned. - */ - "placement"?: LogicalPlacement; /** * Displays a status-related indicator icon. * @deprecated Use `icon-start` instead. @@ -12032,10 +12032,6 @@ declare namespace LocalJSX { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled"?: boolean; - /** - * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements"?: FlipPlacement[]; /** * The component header text. */ @@ -12048,10 +12044,18 @@ declare namespace LocalJSX { * When `true`, a busy indicator is displayed. */ "loading"?: boolean; + /** + * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. + */ + "menuFlipPlacements"?: FlipPlacement[]; /** * When `true`, the action menu items in the `header-menu-actions` slot are open. */ "menuOpen"?: boolean; + /** + * Determines where the action menu will be positioned. + */ + "menuPlacement"?: LogicalPlacement; /** * Use this property to override individual strings used by the component. */ @@ -12076,10 +12080,6 @@ declare namespace LocalJSX { * 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 action menu will be positioned. - */ - "placement"?: LogicalPlacement; /** * Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index cf7316eb526..587a3701425 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -214,6 +214,8 @@ describe("calcite-dialog", () => { accessible(`Hello world!`); }); + const delayInMilliseconds = 300; + it("should set internal panel properties", async () => { const page = await newE2EPage(); await page.exposeFunction("beforeClose", () => Promise.reject()); @@ -430,6 +432,7 @@ describe("calcite-dialog", () => { await page.setContent(` `); + await skipAnimations(page); const dialog = await page.find("calcite-dialog"); await page.$eval( @@ -697,6 +700,7 @@ describe("calcite-dialog", () => { dialog.setProperty("open", true); await page.waitForChanges(); + await page.waitForTimeout(delayInMilliseconds); expect(await dialog.isVisible()).toBe(true); await page.keyboard.press("Escape"); @@ -711,12 +715,12 @@ describe("calcite-dialog", () => { it("closes when Escape key is pressed and dialog is open on page load", async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent(``); const dialog = await page.find("calcite-dialog"); await page.waitForChanges(); expect(dialog).toHaveAttribute("open"); - await page.waitForChanges(); + await page.waitForTimeout(delayInMilliseconds); await page.keyboard.press("Escape"); await page.waitForChanges(); @@ -733,9 +737,11 @@ describe("calcite-dialog", () => { await skipAnimations(page); const dialog = await page.find("calcite-dialog"); const container = await page.find(`calcite-dialog >>> .${CSS.container}`); + await page.waitForChanges(); dialog.setProperty("open", true); await page.waitForChanges(); + await page.waitForTimeout(delayInMilliseconds); expect(await container.isVisible()).toBe(true); const closeButton = await page.find(`calcite-dialog >>> calcite-panel >>> #${PanelIDS.close}`); From 0b582b86fee94826500bba9781a2667818a1ab98 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Sep 2024 13:11:44 -0700 Subject: [PATCH 49/62] adjust timing on modal tests --- .../calcite-components/src/components/modal/modal.e2e.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index 516a67f8086..c876231d6a8 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -391,6 +391,8 @@ describe("calcite-modal", () => { expect(modal).toEqualAttribute("aria-modal", "true"); }); + const delayInMilliseconds = 300; + it("closes and allows re-opening when Escape key is pressed", async () => { const page = await newE2EPage(); await page.setContent(``); @@ -408,6 +410,7 @@ describe("calcite-modal", () => { modal.setProperty("open", true); await page.waitForChanges(); + await page.waitForTimeout(delayInMilliseconds); expect(await modal.isVisible()).toBe(true); }); @@ -418,10 +421,12 @@ describe("calcite-modal", () => { const modal = await page.find("calcite-modal"); await page.waitForChanges(); + await page.waitForTimeout(delayInMilliseconds); expect(modal).toHaveAttribute("open"); await page.keyboard.press("Escape"); await page.waitForChanges(); + await page.waitForTimeout(delayInMilliseconds); expect(modal).not.toHaveAttribute("open"); await modal.setProperty("open", true); From 7afdb6467ebabd763b1028aa52218d3f14ce7bd7 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Sep 2024 14:54:42 -0700 Subject: [PATCH 50/62] remove closable from panel so it doesn't prevent shell from closing --- packages/calcite-components/src/tests/globalStyles.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/tests/globalStyles.e2e.ts b/packages/calcite-components/src/tests/globalStyles.e2e.ts index c282895b3df..6549aacb599 100644 --- a/packages/calcite-components/src/tests/globalStyles.e2e.ts +++ b/packages/calcite-components/src/tests/globalStyles.e2e.ts @@ -98,7 +98,7 @@ describe("global styles", () => { describe("stacked focus-trap components", () => { const componentStack = html` - + Open Modal from Sheet From d8f34c586ad2ef3580e95a79dda67155e0a034da Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Sep 2024 15:55:00 -0700 Subject: [PATCH 51/62] this.effectiveReferenceElement --- packages/calcite-components/src/components/popover/popover.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index d35ac183fca..fa73a9523b9 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -300,7 +300,8 @@ export class Popover clickOutsideDeactivates: (event: MouseEvent) => { const path = event.composedPath(); const isReferenceElementInPath = - this.referenceElement instanceof EventTarget && path.includes(this.referenceElement); + this.effectiveReferenceElement instanceof EventTarget && + path.includes(this.effectiveReferenceElement); const outsideClick = !path.includes(this.el); const shouldCloseOnOutsideClick = this.autoClose && outsideClick; From 87f4f56bfe7ea0f1e3fca23610cdcd9a0214ada9 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 26 Sep 2024 18:06:44 -0700 Subject: [PATCH 52/62] cleanup --- packages/calcite-components/src/components/modal/modal.e2e.ts | 4 ++-- packages/calcite-components/src/demos/input-date-picker.html | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index c876231d6a8..498d76bff58 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -1,7 +1,7 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; -import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils"; +import { GlobalTestProps, isElementFocused, skipAnimations, waitForAnimationFrame } from "../../tests/utils"; import { CSS, SLOTS } from "./resources"; describe("calcite-modal", () => { @@ -426,7 +426,7 @@ describe("calcite-modal", () => { await page.keyboard.press("Escape"); await page.waitForChanges(); - await page.waitForTimeout(delayInMilliseconds); + await waitForAnimationFrame(); expect(modal).not.toHaveAttribute("open"); await modal.setProperty("open", true); diff --git a/packages/calcite-components/src/demos/input-date-picker.html b/packages/calcite-components/src/demos/input-date-picker.html index ceeea33cb3c..6f85b24b257 100644 --- a/packages/calcite-components/src/demos/input-date-picker.html +++ b/packages/calcite-components/src/demos/input-date-picker.html @@ -57,7 +57,6 @@ Input Date Picker Label -
next sibling
From b645dea92fda33778c916935313858ca73faa263 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 30 Sep 2024 09:54:02 -0700 Subject: [PATCH 53/62] remove redundant connectFocusTrap(this); --- packages/calcite-components/src/components/dialog/dialog.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 5ac1c74d98f..2783e5f4fdd 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -242,7 +242,6 @@ export class Dialog }, }, }); - connectFocusTrap(this); this.setupInteractions(); } From 353ec39c5fdd38adfdd49aedca65501843ff3897 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 1 Oct 2024 15:21:26 -0700 Subject: [PATCH 54/62] sub waiting for timeout to waiting for event --- .../src/components/dialog/dialog.e2e.ts | 11 ++++++----- .../src/components/modal/modal.e2e.ts | 8 ++++---- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 587a3701425..456eda76160 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -214,8 +214,6 @@ describe("calcite-dialog", () => { accessible(`Hello world!`); }); - const delayInMilliseconds = 300; - it("should set internal panel properties", async () => { const page = await newE2EPage(); await page.exposeFunction("beforeClose", () => Promise.reject()); @@ -694,13 +692,14 @@ describe("calcite-dialog", () => { const page = await newE2EPage(); await page.setContent(``); await skipAnimations(page); + const openedEvent = page.waitForEvent("calciteDialogOpen"); const dialog = await page.find("calcite-dialog"); const container = await page.find(`calcite-dialog >>> .${CSS.container}`); dialog.setProperty("open", true); await page.waitForChanges(); - await page.waitForTimeout(delayInMilliseconds); + await openedEvent; expect(await dialog.isVisible()).toBe(true); await page.keyboard.press("Escape"); @@ -716,11 +715,12 @@ describe("calcite-dialog", () => { it("closes when Escape key is pressed and dialog is open on page load", async () => { const page = await newE2EPage(); await page.setContent(``); + const openedEvent = page.waitForEvent("calciteDialogOpen"); const dialog = await page.find("calcite-dialog"); await page.waitForChanges(); expect(dialog).toHaveAttribute("open"); - await page.waitForTimeout(delayInMilliseconds); + await openedEvent; await page.keyboard.press("Escape"); await page.waitForChanges(); @@ -737,11 +737,12 @@ describe("calcite-dialog", () => { await skipAnimations(page); const dialog = await page.find("calcite-dialog"); const container = await page.find(`calcite-dialog >>> .${CSS.container}`); + const openedEvent = page.waitForEvent("calciteDialogOpen"); await page.waitForChanges(); dialog.setProperty("open", true); await page.waitForChanges(); - await page.waitForTimeout(delayInMilliseconds); + await openedEvent; expect(await container.isVisible()).toBe(true); const closeButton = await page.find(`calcite-dialog >>> calcite-panel >>> #${PanelIDS.close}`); diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts index 498d76bff58..f8588596b53 100644 --- a/packages/calcite-components/src/components/modal/modal.e2e.ts +++ b/packages/calcite-components/src/components/modal/modal.e2e.ts @@ -391,13 +391,12 @@ describe("calcite-modal", () => { expect(modal).toEqualAttribute("aria-modal", "true"); }); - const delayInMilliseconds = 300; - it("closes and allows re-opening when Escape key is pressed", async () => { const page = await newE2EPage(); await page.setContent(``); await skipAnimations(page); const modal = await page.find("calcite-modal"); + const openedEvent = page.waitForEvent("calciteModalOpen"); modal.setProperty("open", true); await page.waitForChanges(); @@ -410,7 +409,7 @@ describe("calcite-modal", () => { modal.setProperty("open", true); await page.waitForChanges(); - await page.waitForTimeout(delayInMilliseconds); + await openedEvent; expect(await modal.isVisible()).toBe(true); }); @@ -418,10 +417,11 @@ describe("calcite-modal", () => { const page = await newE2EPage(); await page.setContent(``); await skipAnimations(page); + const openedEvent = page.waitForEvent("calciteModalOpen"); const modal = await page.find("calcite-modal"); await page.waitForChanges(); - await page.waitForTimeout(delayInMilliseconds); + await openedEvent; expect(modal).toHaveAttribute("open"); await page.keyboard.press("Escape"); From 79ddd20e31167bd224530775fbb459a656253471 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 1 Oct 2024 15:28:29 -0700 Subject: [PATCH 55/62] seperate stackedFocusTrap.e2e.ts --- .../src/tests/globalStyles.e2e.ts | 129 +----------------- .../src/tests/stackedFocusTrap.e2e.ts | 129 ++++++++++++++++++ 2 files changed, 130 insertions(+), 128 deletions(-) create mode 100644 packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts diff --git a/packages/calcite-components/src/tests/globalStyles.e2e.ts b/packages/calcite-components/src/tests/globalStyles.e2e.ts index 6549aacb599..19fedeed2cc 100644 --- a/packages/calcite-components/src/tests/globalStyles.e2e.ts +++ b/packages/calcite-components/src/tests/globalStyles.e2e.ts @@ -1,6 +1,5 @@ -import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; +import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../support/formatting"; -import { skipAnimations } from "../tests/utils"; describe("global styles", () => { describe("animation", () => { @@ -94,130 +93,4 @@ describe("global styles", () => { }); expect(eleTransitionDuration).toEqual("0.15s"); }); - - describe("stacked focus-trap components", () => { - const componentStack = html` - - - - Open Modal from Sheet - - - - -
-

This is an example modal that opens from a Sheet.

-
- Open Another Modal - - - -
-

- This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a - dropdown, a popover and a tooltip. -

- - - - - - - - - - Scale S - - List - Grid - - - -
-

Example Popover.

- - Input Date Picker - - - - Input Time Picker - - -
- - Example Popover - Example Tooltip - auto -
- - Open Sheet - `; - - it("closes a stack of open components sequentially in visual order", async () => { - const page = await newE2EPage(); - await page.setContent(componentStack); - await skipAnimations(page); - - async function testStackEscapeSequence(page: E2EPage, pickerType: string) { - async function openAndCheckVisibility(element: E2EElement) { - element.setProperty("open", true); - await page.waitForChanges(); - expect(await element.isVisible()).toBe(true); - } - - const sheet = await page.find("calcite-sheet"); - await openAndCheckVisibility(sheet); - - const firstModal = await page.find("#example-modal"); - await openAndCheckVisibility(firstModal); - - const secondModal = await page.find("#another-modal"); - await openAndCheckVisibility(secondModal); - - const popover = await page.find("calcite-popover"); - await openAndCheckVisibility(popover); - - const inputPicker = await page.find(pickerType); - inputPicker.click(); - await page.waitForChanges(); - expect(await inputPicker.getProperty("open")).toBe(true); - - async function testEscapeAndCheckOpenState(elements: E2EElement[]) { - for (let i = 0; i < elements.length; i++) { - await page.keyboard.press("Escape"); - await page.waitForChanges(); - expect(await elements[i].getProperty("open")).toBe(false); - - for (let j = 0; j < elements.length; j++) { - const expectedOpenState = j > i; - expect(await elements[j].getProperty("open")).toBe(expectedOpenState); - } - } - } - - await testEscapeAndCheckOpenState([inputPicker, popover, secondModal, firstModal, sheet]); - } - - await testStackEscapeSequence(page, "calcite-input-time-picker"); - await testStackEscapeSequence(page, "calcite-input-date-picker"); - }); - }); }); diff --git a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts new file mode 100644 index 00000000000..5c27eab3db5 --- /dev/null +++ b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts @@ -0,0 +1,129 @@ +import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; +import { html } from "../../support/formatting"; +import { skipAnimations } from "../tests/utils"; + +describe("stacked focus-trap components", () => { + const componentStack = html` + + + + Open Modal from Sheet + + + + +
+

This is an example modal that opens from a Sheet.

+
+ Open Another Modal + + + +
+

+ This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a + dropdown, a popover and a tooltip. +

+ + + + + + + + + + Scale S + + List + Grid + + + +
+

Example Popover.

+ + Input Date Picker + + + + Input Time Picker + + +
+ + Example Popover + Example Tooltip + auto +
+ + Open Sheet + `; + + it("closes a stack of open components sequentially in visual order", async () => { + const page = await newE2EPage(); + await page.setContent(componentStack); + await skipAnimations(page); + + async function testStackEscapeSequence(page: E2EPage, pickerType: string) { + async function openAndCheckVisibility(element: E2EElement) { + element.setProperty("open", true); + await page.waitForChanges(); + expect(await element.isVisible()).toBe(true); + } + + const sheet = await page.find("calcite-sheet"); + await openAndCheckVisibility(sheet); + + const firstModal = await page.find("#example-modal"); + await openAndCheckVisibility(firstModal); + + const secondModal = await page.find("#another-modal"); + await openAndCheckVisibility(secondModal); + + const popover = await page.find("calcite-popover"); + await openAndCheckVisibility(popover); + + const inputPicker = await page.find(pickerType); + inputPicker.click(); + await page.waitForChanges(); + expect(await inputPicker.getProperty("open")).toBe(true); + + async function testEscapeAndCheckOpenState(elements: E2EElement[]) { + for (let i = 0; i < elements.length; i++) { + await page.keyboard.press("Escape"); + await page.waitForChanges(); + expect(await elements[i].getProperty("open")).toBe(false); + + for (let j = 0; j < elements.length; j++) { + const expectedOpenState = j > i; + expect(await elements[j].getProperty("open")).toBe(expectedOpenState); + } + } + } + + await testEscapeAndCheckOpenState([inputPicker, popover, secondModal, firstModal, sheet]); + } + + await testStackEscapeSequence(page, "calcite-input-time-picker"); + await testStackEscapeSequence(page, "calcite-input-date-picker"); + }); +}); From 337342b2be7393293ea2c241a330f4a14d9a616a Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 1 Oct 2024 15:41:19 -0700 Subject: [PATCH 56/62] cleanup stackedFocusTrap test --- .../src/tests/stackedFocusTrap.e2e.ts | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts index 5c27eab3db5..8e4c5303346 100644 --- a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts +++ b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts @@ -7,7 +7,7 @@ describe("stacked focus-trap components", () => { - Open Modal from Sheet + Open Modal from Sheet @@ -15,9 +15,7 @@ describe("stacked focus-trap components", () => {

This is an example modal that opens from a Sheet.

- Open Another Modal + Open Another Modal @@ -91,23 +89,19 @@ describe("stacked focus-trap components", () => { } const sheet = await page.find("calcite-sheet"); - await openAndCheckVisibility(sheet); - const firstModal = await page.find("#example-modal"); - await openAndCheckVisibility(firstModal); - const secondModal = await page.find("#another-modal"); - await openAndCheckVisibility(secondModal); - const popover = await page.find("calcite-popover"); + const inputPicker = await page.find(pickerType); + + await openAndCheckVisibility(sheet); + await openAndCheckVisibility(firstModal); + await openAndCheckVisibility(secondModal); await openAndCheckVisibility(popover); - const inputPicker = await page.find(pickerType); - inputPicker.click(); - await page.waitForChanges(); - expect(await inputPicker.getProperty("open")).toBe(true); + await inputPicker.click(); - async function testEscapeAndCheckOpenState(elements: E2EElement[]) { + async function testEscapeAndAssertOpenState(elements: E2EElement[]): Promise { for (let i = 0; i < elements.length; i++) { await page.keyboard.press("Escape"); await page.waitForChanges(); @@ -120,7 +114,7 @@ describe("stacked focus-trap components", () => { } } - await testEscapeAndCheckOpenState([inputPicker, popover, secondModal, firstModal, sheet]); + await testEscapeAndAssertOpenState([inputPicker, popover, secondModal, firstModal, sheet]); } await testStackEscapeSequence(page, "calcite-input-time-picker"); From 212f6bc330b1e2c78949b2737704b68f2f358616 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 1 Oct 2024 16:04:12 -0700 Subject: [PATCH 57/62] clean up test --- .../src/tests/stackedFocusTrap.e2e.ts | 51 +++++++------------ 1 file changed, 17 insertions(+), 34 deletions(-) diff --git a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts index 8e4c5303346..cdadc1e4584 100644 --- a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts +++ b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts @@ -4,10 +4,10 @@ import { skipAnimations } from "../tests/utils"; describe("stacked focus-trap components", () => { const componentStack = html` - + - - Open Modal from Sheet + + Open Modal from Sheet @@ -15,23 +15,16 @@ describe("stacked focus-trap components", () => {

This is an example modal that opens from a Sheet.

- Open Another Modal + Open Another Modal -
+

This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a dropdown, a popover and a tooltip.

- + @@ -39,28 +32,19 @@ describe("stacked focus-trap components", () => { - - Scale S + + Dropdown - List - Grid + List + Grid - -
-

Example Popover.

+ +
+

Example Popover.

Input Date Picker - + Input Time Picker @@ -68,12 +52,11 @@ describe("stacked focus-trap components", () => {
- Example Popover - Example Tooltip - auto + Example Popover + Example Tooltip + auto
- Open Sheet `; it("closes a stack of open components sequentially in visual order", async () => { From 0f8c4e21ef41e0b11c17cea30dd00785acbb4397 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 1 Oct 2024 17:38:34 -0700 Subject: [PATCH 58/62] assert on focus component --- .../src/tests/stackedFocusTrap.e2e.ts | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts index cdadc1e4584..21f222077ab 100644 --- a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts +++ b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts @@ -4,7 +4,7 @@ import { skipAnimations } from "../tests/utils"; describe("stacked focus-trap components", () => { const componentStack = html` - + Open Modal from Sheet @@ -24,7 +24,7 @@ describe("stacked focus-trap components", () => { This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a dropdown, a popover and a tooltip.

- + @@ -39,7 +39,7 @@ describe("stacked focus-trap components", () => { Grid - +

Example Popover.

@@ -48,12 +48,14 @@ describe("stacked focus-trap components", () => { Input Time Picker - +
Example Popover - Example Tooltip auto
@@ -71,10 +73,10 @@ describe("stacked focus-trap components", () => { expect(await element.isVisible()).toBe(true); } - const sheet = await page.find("calcite-sheet"); + const sheet = await page.find("#sheet"); const firstModal = await page.find("#example-modal"); const secondModal = await page.find("#another-modal"); - const popover = await page.find("calcite-popover"); + const popover = await page.find("#popover"); const inputPicker = await page.find(pickerType); await openAndCheckVisibility(sheet); @@ -84,15 +86,19 @@ describe("stacked focus-trap components", () => { await inputPicker.click(); - async function testEscapeAndAssertOpenState(elements: E2EElement[]): Promise { - for (let i = 0; i < elements.length; i++) { + async function testEscapeAndAssertOpenState(focusTrapOrderElements: E2EElement[]): Promise { + for (let i = 0; i < focusTrapOrderElements.length; i++) { + const activeElementId = await page.evaluate(() => document.activeElement?.id); + console.log("activeElementId", activeElementId); + expect(activeElementId).toBe(focusTrapOrderElements[i].id || document.body); + await page.keyboard.press("Escape"); await page.waitForChanges(); - expect(await elements[i].getProperty("open")).toBe(false); + expect(await focusTrapOrderElements[i].getProperty("open")).toBe(false); - for (let j = 0; j < elements.length; j++) { + for (let j = 0; j < focusTrapOrderElements.length; j++) { const expectedOpenState = j > i; - expect(await elements[j].getProperty("open")).toBe(expectedOpenState); + expect(await focusTrapOrderElements[j].getProperty("open")).toBe(expectedOpenState); } } } From fd53ff4cf1be5dfbcd5aedfca89f9dc43f9bf095 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 2 Oct 2024 13:53:48 -0700 Subject: [PATCH 59/62] remove redundant components from modal, add dialog, account for focusRetainingComponents when checking for activeElement --- .../src/tests/stackedFocusTrap.e2e.ts | 55 ++++++++++++------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts index 21f222077ab..c9ecfeb0bbc 100644 --- a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts +++ b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts @@ -11,6 +11,11 @@ describe("stacked focus-trap components", () => { + +

The small dialog is perfect for short confirmation dialogs or very compact interfaces with few elements.

+ Back + +

This is an example modal that opens from a Sheet.

@@ -21,24 +26,9 @@ describe("stacked focus-trap components", () => {

- This is an example of a another modal that opens from a modal. This modal an input date picker, a combobox, a - dropdown, a popover and a tooltip. + This is an example of a another modal that opens from a modal. This modal an input date picker, a popover and + a tooltip.

- - - - - - - - - - Dropdown - - List - Grid - -

Example Popover.

@@ -74,12 +64,14 @@ describe("stacked focus-trap components", () => { } const sheet = await page.find("#sheet"); + const dialog = await page.find("#dialog"); const firstModal = await page.find("#example-modal"); const secondModal = await page.find("#another-modal"); const popover = await page.find("#popover"); const inputPicker = await page.find(pickerType); await openAndCheckVisibility(sheet); + await openAndCheckVisibility(dialog); await openAndCheckVisibility(firstModal); await openAndCheckVisibility(secondModal); await openAndCheckVisibility(popover); @@ -87,13 +79,36 @@ describe("stacked focus-trap components", () => { await inputPicker.click(); async function testEscapeAndAssertOpenState(focusTrapOrderElements: E2EElement[]): Promise { + function strToCamelCase(str: string): string { + return str + .split("-") + .map((word, index) => + index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(), + ) + .join(""); + } for (let i = 0; i < focusTrapOrderElements.length; i++) { + const elTagNameCamelCased = strToCamelCase(focusTrapOrderElements[i].tagName); + const closeEvent = page.waitForEvent(`${elTagNameCamelCased}Close`); + const activeElementId = await page.evaluate(() => document.activeElement?.id); - console.log("activeElementId", activeElementId); - expect(activeElementId).toBe(focusTrapOrderElements[i].id || document.body); + + // floating-ui components that close and keep focus + const focusRetainingComponentIDs = ["input-time-picker", "input-date-picker"]; + + if (activeElementId && focusRetainingComponentIDs.includes(activeElementId)) { + await page.keyboard.press("Tab"); + } + + const activeElementIdAfterTab = await page.evaluate(() => document.activeElement?.id); + console.log("activeElementIdAfterTab", activeElementIdAfterTab); + + expect(activeElementIdAfterTab).toBe(focusTrapOrderElements[i].id || document.body.id); await page.keyboard.press("Escape"); await page.waitForChanges(); + await closeEvent; + expect(await focusTrapOrderElements[i].getProperty("open")).toBe(false); for (let j = 0; j < focusTrapOrderElements.length; j++) { @@ -103,7 +118,7 @@ describe("stacked focus-trap components", () => { } } - await testEscapeAndAssertOpenState([inputPicker, popover, secondModal, firstModal, sheet]); + await testEscapeAndAssertOpenState([inputPicker, popover, secondModal, firstModal, dialog, sheet]); } await testStackEscapeSequence(page, "calcite-input-time-picker"); From ee5d656ae618c9edf369d3a1d55e87e00c178c58 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 2 Oct 2024 17:47:29 -0700 Subject: [PATCH 60/62] add camelCase util and target sheet-button id instead of sheet as it is not itself focusable --- .../src/tests/stackedFocusTrap.e2e.ts | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts index c9ecfeb0bbc..b260018498d 100644 --- a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts +++ b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts @@ -1,4 +1,5 @@ import { E2EElement, newE2EPage, E2EPage } from "@stencil/core/testing"; +import { camelCase } from "change-case"; import { html } from "../../support/formatting"; import { skipAnimations } from "../tests/utils"; @@ -7,7 +8,7 @@ describe("stacked focus-trap components", () => { - Open Modal from Sheet + Open Modal from Sheet @@ -79,31 +80,25 @@ describe("stacked focus-trap components", () => { await inputPicker.click(); async function testEscapeAndAssertOpenState(focusTrapOrderElements: E2EElement[]): Promise { - function strToCamelCase(str: string): string { - return str - .split("-") - .map((word, index) => - index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(), - ) - .join(""); - } for (let i = 0; i < focusTrapOrderElements.length; i++) { - const elTagNameCamelCased = strToCamelCase(focusTrapOrderElements[i].tagName); + const elTagNameCamelCased = camelCase(focusTrapOrderElements[i].tagName); const closeEvent = page.waitForEvent(`${elTagNameCamelCased}Close`); const activeElementId = await page.evaluate(() => document.activeElement?.id); - // floating-ui components that close and keep focus const focusRetainingComponentIDs = ["input-time-picker", "input-date-picker"]; - if (activeElementId && focusRetainingComponentIDs.includes(activeElementId)) { await page.keyboard.press("Tab"); } + await page.waitForChanges(); const activeElementIdAfterTab = await page.evaluate(() => document.activeElement?.id); - console.log("activeElementIdAfterTab", activeElementIdAfterTab); - expect(activeElementIdAfterTab).toBe(focusTrapOrderElements[i].id || document.body.id); + const expectedElementId = + focusTrapOrderElements[i].id === "sheet" + ? "sheet-button" + : focusTrapOrderElements[i].id || document.body.id; + expect(activeElementIdAfterTab).toBe(expectedElementId); await page.keyboard.press("Escape"); await page.waitForChanges(); From 7e3dda876e5a0dfd79011df4d82e95b7b50eed45 Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 2 Oct 2024 18:15:40 -0700 Subject: [PATCH 61/62] tab out of focus-retaining input components to assert on focus returning to popover --- .../src/tests/stackedFocusTrap.e2e.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts index b260018498d..449bec45735 100644 --- a/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts +++ b/packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts @@ -86,9 +86,14 @@ describe("stacked focus-trap components", () => { const activeElementId = await page.evaluate(() => document.activeElement?.id); - const focusRetainingComponentIDs = ["input-time-picker", "input-date-picker"]; - if (activeElementId && focusRetainingComponentIDs.includes(activeElementId)) { - await page.keyboard.press("Tab"); + // 'input-time-picker', 'input-date-picker' retain focus after pressing esc + if (activeElementId) { + if (activeElementId === "input-time-picker") { + await page.keyboard.press("Tab"); + } else if (activeElementId === "input-date-picker") { + await page.keyboard.down("Shift"); + await page.keyboard.press("Tab"); + } } await page.waitForChanges(); From 06e68fff9d1c3b8d0921e227448389e2a600cdfc Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 2 Oct 2024 22:21:15 -0700 Subject: [PATCH 62/62] add comments to focusTrap options and cleanu up tests --- .../src/components/dialog/dialog.tsx | 1 + .../input-date-picker/input-date-picker.e2e.ts | 18 ------------------ .../input-date-picker/input-date-picker.tsx | 1 + .../input-time-picker/input-time-picker.e2e.ts | 8 -------- .../src/components/modal/modal.tsx | 1 + .../src/components/popover/popover.tsx | 5 +---- 6 files changed, 4 insertions(+), 30 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 2783e5f4fdd..a9692756cdc 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -232,6 +232,7 @@ export class Dialog connectMessages(this); connectFocusTrap(this, { focusTrapOptions: { + // Scrim has it's own close handler, allow it to take over. clickOutsideDeactivates: false, escapeDeactivates: (event) => { if (event.defaultPrevented || this.escapeDisabled) { diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index 5797299572e..ffbfa40fe76 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -428,8 +428,6 @@ describe("calcite-input-date-picker", () => { } it("toggles the date picker when clicked", async () => { - const openSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerOpen"); - const closeSpy = await inputDatePicker.spyOnEvent("calciteInputDatePickerClose"); const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -454,13 +452,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInput.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(1); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInput.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(1); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -469,13 +465,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInputToggle.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(2); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInputToggle.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(2); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -484,13 +478,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInput.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(3); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInput.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(3); expect(await isCalendarVisible(calendar, "end")).toBe(false); @@ -499,13 +491,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInputToggle.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(4); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInputToggle.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(4); expect(await isCalendarVisible(calendar, "end")).toBe(false); @@ -514,13 +504,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInput.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(5); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInputToggle.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(5); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -529,13 +517,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await startInputToggle.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(6); expect(await isCalendarVisible(calendar, "start")).toBe(true); await startInput.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(6); expect(await isCalendarVisible(calendar, "start")).toBe(false); @@ -544,13 +530,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInput.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(7); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInputToggle.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(7); expect(await isCalendarVisible(calendar, "end")).toBe(false); @@ -559,13 +543,11 @@ describe("calcite-input-date-picker", () => { await resetFocus(page); await endInputToggle.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(8); expect(await isCalendarVisible(calendar, "end")).toBe(true); await endInput.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(8); expect(await isCalendarVisible(calendar, "end")).toBe(false); diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx index f953e8e78cb..416f2f43b01 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx @@ -999,6 +999,7 @@ export class InputDatePicker focusTrapEl: el, focusTrapOptions: { allowOutsideClick: true, + // Allow outside click and let the popover manager take care of closing the popover. clickOutsideDeactivates: false, initialFocus: false, setReturnFocus: false, diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts index 9c29cb02435..eb9056db1ba 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts @@ -933,21 +933,17 @@ describe("calcite-input-time-picker", () => { it("toggles the time picker when clicked", async () => { let popover = await page.find("calcite-input-time-picker >>> calcite-popover"); - const openSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerOpen"); - const closeSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerClose"); expect(await popover.isVisible()).toBe(false); await inputTimePicker.click(); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(true); await inputTimePicker.click(); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(false); @@ -955,8 +951,6 @@ describe("calcite-input-time-picker", () => { it("toggles the time picker when using arrow down/escape key", async () => { let popover = await page.find("calcite-input-time-picker >>> calcite-popover"); - const openSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerOpen"); - const closeSpy = await inputTimePicker.spyOnEvent("calciteInputTimePickerClose"); expect(await popover.isVisible()).toBe(false); @@ -964,14 +958,12 @@ describe("calcite-input-time-picker", () => { await page.waitForChanges(); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); - expect(openSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(true); await page.keyboard.press("Escape"); await page.waitForChanges(); - expect(closeSpy).toHaveReceivedEventTimes(1); popover = await page.find("calcite-input-time-picker >>> calcite-popover"); expect(await popover.isVisible()).toBe(false); diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx index bd71de97f06..7022201edaf 100644 --- a/packages/calcite-components/src/components/modal/modal.tsx +++ b/packages/calcite-components/src/components/modal/modal.tsx @@ -199,6 +199,7 @@ export class Modal connectMessages(this); connectFocusTrap(this, { focusTrapOptions: { + // Scrim has it's own close handler, allow it to take over. clickOutsideDeactivates: false, escapeDeactivates: (event) => { if (event.defaultPrevented || this.escapeDisabled) { diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx index fa73a9523b9..bcca9db9605 100644 --- a/packages/calcite-components/src/components/popover/popover.tsx +++ b/packages/calcite-components/src/components/popover/popover.tsx @@ -306,10 +306,7 @@ export class Popover const outsideClick = !path.includes(this.el); const shouldCloseOnOutsideClick = this.autoClose && outsideClick; - return ( - (shouldCloseOnOutsideClick && this.triggerDisabled) || - (shouldCloseOnOutsideClick && isReferenceElementInPath) - ); + return shouldCloseOnOutsideClick && (this.triggerDisabled || isReferenceElementInPath); }, }, });