UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1,607 lines • 1.42 MB
{ "timestamp": "2025-05-29T19:06:26", "compiler": { "name": "@arcgis/lumina-compiler", "version": "4.33.0-next.124", "typescriptVersion": "5.8.3" }, "components": [ { "filePath": "src/components/accordion/accordion.tsx", "tag": "calcite-accordion", "overview": "", "readme": "", "usage": {}, "docs": "", "docsTags": [ { "name": "superclass", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ], "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, "props": [ { "name": "appearance", "type": "\"solid\" | \"transparent\"", "complexType": { "original": "\"solid\" | \"transparent\"", "resolved": "\"solid\" | \"transparent\"", "references": {} }, "mutable": true, "attr": "appearance", "reflectToAttr": true, "docs": "Specifies the appearance of the component.", "docsTags": [], "default": "\"solid\"", "values": [ { "value": "solid", "type": "string" }, { "value": "transparent", "type": "string" } ], "optional": true, "required": false }, { "name": "iconPosition", "type": "\"end\" | \"start\"", "complexType": { "original": "\"end\" | \"start\"", "resolved": "\"end\" | \"start\"", "references": {} }, "mutable": true, "attr": "icon-position", "reflectToAttr": true, "docs": "Specifies the placement of the icon in the header.", "docsTags": [], "default": "\"end\"", "values": [ { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "iconType", "type": "\"caret\" | \"chevron\" | \"plus-minus\"", "complexType": { "original": "\"caret\" | \"chevron\" | \"plus-minus\"", "resolved": "\"caret\" | \"chevron\" | \"plus-minus\"", "references": {} }, "mutable": true, "attr": "icon-type", "reflectToAttr": true, "docs": "Specifies the type of the icon in the header.", "docsTags": [], "default": "\"chevron\"", "values": [ { "value": "caret", "type": "string" }, { "value": "chevron", "type": "string" }, { "value": "plus-minus", "type": "string" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "complexType": { "original": "\"l\" | \"m\" | \"s\"", "resolved": "\"l\" | \"m\" | \"s\"", "references": {} }, "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "Specifies the size of the component.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": true, "required": false }, { "name": "selectionMode", "type": "\"multiple\" | \"single\" | \"single-persist\"", "complexType": { "original": "\"multiple\" | \"single\" | \"single-persist\"", "resolved": "\"multiple\" | \"single\" | \"single-persist\"", "references": {} }, "mutable": true, "attr": "selection-mode", "reflectToAttr": true, "docs": "Specifies the selection mode of the component, where:\n\n`\"multiple\"` allows any number of selections,\n\n`\"single\"` allows only one selection, and\n\n`\"single-persist\"` allows one selection and prevents de-selection.", "docsTags": [], "default": "\"multiple\"", "values": [ { "value": "multiple", "type": "string" }, { "value": "single", "type": "string" }, { "value": "single-persist", "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "componentOnReady", "returns": { "type": "Promise<void>", "docs": "" }, "complexType": { "signature": "(): Promise<void>", "parameters": [], "return": "Promise<void>", "references": { "Promise": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "signature": "componentOnReady(): Promise<void>", "parameters": [], "docs": "Create a promise that resolves once component is fully loaded.", "docsTags": [ { "name": "example", "text": "const accordion = document.createElement(\"calcite-accordion\");\ndocument.body.append(accordion);\naccordion.componentOnReady().then(() => {\n console.log(\"calcite-accordion is ready to go!\");\n});" }, { "name": "inheritedFrom", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ] } ], "events": [], "styles": [ { "name": "--calcite-accordion-border-color", "annotation": "prop", "docs": "Specifies the component's border color." }, { "name": "--calcite-accordion-background-color", "annotation": "prop", "docs": "Specifies the component's background color." }, { "name": "--calcite-accordion-text-color", "annotation": "prop", "docs": "Specifies the component's text color." }, { "name": "--calcite-accordion-text-color-hover", "annotation": "prop", "docs": "Specifies the component's main text color on hover." }, { "name": "--calcite-accordion-text-color-press", "annotation": "prop", "docs": "Specifies the component's main text color when pressed." } ], "slots": [ { "name": "", "docs": "A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can." } ], "parts": [], "listeners": [] }, { "filePath": "src/components/accordion-item/accordion-item.tsx", "tag": "calcite-accordion-item", "overview": "", "readme": "", "usage": {}, "docs": "", "docsTags": [ { "name": "superclass", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ], "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, "props": [ { "name": "description", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "description", "reflectToAttr": false, "docs": "Specifies a description for the component.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "expanded", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "expanded", "reflectToAttr": true, "docs": "When `true`, the component is expanded.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "heading", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "heading", "reflectToAttr": false, "docs": "Specifies heading text for the component.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "iconEnd", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "icon-end", "reflectToAttr": true, "docs": "Specifies an icon to display at the end of the component.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "iconFlipRtl", "type": "\"both\" | \"end\" | \"start\"", "complexType": { "original": "\"both\" | \"end\" | \"start\"", "resolved": "\"both\" | \"end\" | \"start\"", "references": {} }, "mutable": true, "attr": "icon-flip-rtl", "reflectToAttr": true, "docs": "Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`).", "docsTags": [], "values": [ { "value": "both", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "iconStart", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "icon-start", "reflectToAttr": true, "docs": "Specifies an icon to display at the start of the component.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "componentOnReady", "returns": { "type": "Promise<void>", "docs": "" }, "complexType": { "signature": "(): Promise<void>", "parameters": [], "return": "Promise<void>", "references": { "Promise": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "signature": "componentOnReady(): Promise<void>", "parameters": [], "docs": "Create a promise that resolves once component is fully loaded.", "docsTags": [ { "name": "example", "text": "const accordionItem = document.createElement(\"calcite-accordion-item\");\ndocument.body.append(accordionItem);\naccordionItem.componentOnReady().then(() => {\n console.log(\"calcite-accordion-item is ready to go!\");\n});" }, { "name": "inheritedFrom", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ] }, { "name": "setFocus", "returns": { "type": "Promise<void>", "docs": "" }, "complexType": { "signature": "(): Promise<void>", "parameters": [], "return": "Promise<void>", "references": { "Promise": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "signature": "setFocus(): Promise<void>", "parameters": [], "docs": "Sets focus on the component.", "docsTags": [] } ], "events": [], "styles": [ { "name": "--calcite-accordion-border-color", "annotation": "prop", "docs": "Specifies the component's border color." }, { "name": "--calcite-accordion-background-color", "annotation": "prop", "docs": "Specifies the component's background color." }, { "name": "--calcite-accordion-text-color", "annotation": "prop", "docs": "Specifies the component's text color." }, { "name": "--calcite-accordion-text-color-hover", "annotation": "prop", "docs": "Specifies the component's main text color on hover." }, { "name": "--calcite-accordion-text-color-press", "annotation": "prop", "docs": "Specifies the component's main text color when pressed." }, { "name": "--calcite-accordion-item-background-color", "annotation": "prop", "docs": "[Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color." }, { "name": "--calcite-accordion-item-border-color", "annotation": "prop", "docs": "[Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color." }, { "name": "--calcite-accordion-item-content-space", "annotation": "prop", "docs": "Specifies the component's padding." }, { "name": "--calcite-accordion-item-end-icon-color", "annotation": "prop", "docs": "Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color." }, { "name": "--calcite-accordion-item-expand-icon-color", "annotation": "prop", "docs": "Specifies the component's expand icon color." }, { "name": "--calcite-accordion-item-header-background-color", "annotation": "prop", "docs": "Specifies the component's `heading` background color." }, { "name": "--calcite-accordion-item-header-background-color-hover", "annotation": "prop", "docs": "Specifies the component's `heading` background color when hovered." }, { "name": "--calcite-accordion-item-header-background-color-press", "annotation": "prop", "docs": "Specifies the component's `heading` background color when pressed." }, { "name": "--calcite-accordion-item-heading-text-color", "annotation": "prop", "docs": "Specifies the component's `heading` text color." }, { "name": "--calcite-accordion-item-icon-color", "annotation": "prop", "docs": "[Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color." }, { "name": "--calcite-accordion-item-start-icon-color", "annotation": "prop", "docs": "Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color." }, { "name": "--calcite-accordion-item-text-color", "annotation": "prop", "docs": "[Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color." }, { "name": "--calcite-accordion-item-text-color-hover", "annotation": "prop", "docs": "[Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover." }, { "name": "--calcite-accordion-item-text-color-press", "annotation": "prop", "docs": "[Deprecated] Use `--calcite-accordion-text-color-press`. Specifies the component's text color on press." } ], "slots": [ { "name": "", "docs": "A slot for adding custom content, including nested `calcite-accordion-item`s." }, { "name": "actions-end", "docs": "A slot for adding `calcite-action`s or content to the end side of the component's header." }, { "name": "actions-start", "docs": "A slot for adding `calcite-action`s or content to the start side of the component's header." } ], "parts": [], "listeners": [] }, { "filePath": "src/components/action/action.tsx", "tag": "calcite-action", "overview": "", "readme": "", "usage": {}, "docs": "", "docsTags": [ { "name": "superclass", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ], "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, "props": [ { "name": "active", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "When `true`, the component is highlighted.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "alignment", "type": "\"center\" | \"end\" | \"start\"", "complexType": { "original": "\"center\" | \"end\" | \"start\"", "resolved": "\"center\" | \"end\" | \"start\"", "references": {} }, "mutable": true, "attr": "alignment", "reflectToAttr": true, "docs": "Specifies the horizontal alignment of button elements with text content.", "docsTags": [], "values": [ { "value": "center", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "appearance", "type": "\"solid\" | \"transparent\"", "complexType": { "original": "\"solid\" | \"transparent\"", "resolved": "\"solid\" | \"transparent\"", "references": {} }, "mutable": true, "attr": "appearance", "reflectToAttr": true, "docs": "Specifies the appearance of the component.", "docsTags": [], "default": "\"solid\"", "values": [ { "value": "solid", "type": "string" }, { "value": "transparent", "type": "string" } ], "optional": true, "required": false }, { "name": "compact", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "compact", "reflectToAttr": true, "docs": "When `true`, the side padding of the component is reduced.", "docsTags": [], "default": "false", "deprecation": "No longer necessary.", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "disabled", "reflectToAttr": true, "docs": "When `true`, interaction is prevented and the component is displayed with lower opacity.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "icon", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "icon", "reflectToAttr": true, "docs": "Specifies an icon to display.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "iconFlipRtl", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "icon-flip-rtl", "reflectToAttr": true, "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "indicator", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "indicator", "reflectToAttr": true, "docs": "When `true`, displays a visual indicator.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "label", "reflectToAttr": false, "docs": "Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "loading", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "loading", "reflectToAttr": true, "docs": "When `true`, a busy indicator is displayed.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "messageOverrides", "type": "{\n loading?: string;\n indicator?: string;\n indicatorLabel?: string;\n}", "complexType": { "original": "{\n loading?: string;\n indicator?: string;\n indicatorLabel?: string;\n}", "resolved": "{\n loading?: string;\n indicator?: string;\n indicatorLabel?: string;\n}", "references": {} }, "mutable": true, "reflectToAttr": false, "docs": "Use this property to override individual strings used by the component.", "docsTags": [], "values": [], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "complexType": { "original": "\"l\" | \"m\" | \"s\"", "resolved": "\"l\" | \"m\" | \"s\"", "references": {} }, "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "Specifies the size of the component.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": true, "required": false }, { "name": "text", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "text", "reflectToAttr": false, "docs": "Specifies text that accompanies the icon.", "docsTags": [ { "name": "required" } ], "values": [ { "type": "string" } ], "optional": false, "required": true }, { "name": "textEnabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "text-enabled", "reflectToAttr": true, "docs": "Indicates whether the text is displayed.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false } ], "methods": [ { "name": "componentOnReady", "returns": { "type": "Promise<void>", "docs": "" }, "complexType": { "signature": "(): Promise<void>", "parameters": [], "return": "Promise<void>", "references": { "Promise": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "signature": "componentOnReady(): Promise<void>", "parameters": [], "docs": "Create a promise that resolves once component is fully loaded.", "docsTags": [ { "name": "example", "text": "const action = document.createElement(\"calcite-action\");\ndocument.body.append(action);\naction.componentOnReady().then(() => {\n console.log(\"calcite-action is ready to go!\");\n});" }, { "name": "inheritedFrom", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ] }, { "name": "setFocus", "returns": { "type": "Promise<void>", "docs": "" }, "complexType": { "signature": "(): Promise<void>", "parameters": [], "return": "Promise<void>", "references": { "Promise": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "signature": "setFocus(): Promise<void>", "parameters": [], "docs": "Sets focus on the component.", "docsTags": [] } ], "events": [], "styles": [ { "name": "--calcite-action-background-color-hover", "annotation": "prop", "docs": "Specifies the component's background color when hovered or focused." }, { "name": "--calcite-action-background-color-press", "annotation": "prop", "docs": "Specifies the component's background color when active." }, { "name": "--calcite-action-background-color-pressed", "annotation": "prop", "docs": "[Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active." }, { "name": "--calcite-action-background-color", "annotation": "prop", "docs": "Specifies the component's background color." }, { "name": "--calcite-action-corner-radius-end-end", "annotation": "prop", "docs": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end." }, { "name": "--calcite-action-corner-radius-end-start", "annotation": "prop", "docs": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start." }, { "name": "--calcite-action-corner-radius-start-end", "annotation": "prop", "docs": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end." }, { "name": "--calcite-action-corner-radius-start-start", "annotation": "prop", "docs": "[Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start." }, { "name": "--calcite-action-corner-radius", "annotation": "prop", "docs": "Specifies the component's corner radius." }, { "name": "--calcite-action-indicator-color", "annotation": "prop", "docs": "Specifies the component's indicator color." }, { "name": "--calcite-action-text-color-press", "annotation": "prop", "docs": "Specifies the component's text color when pressed or hovered." }, { "name": "--calcite-action-text-color-pressed", "annotation": "prop", "docs": "[Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered." }, { "name": "--calcite-action-text-color", "annotation": "prop", "docs": "Specifies the component's text color." } ], "slots": [ { "name": "", "docs": "A slot for adding a `calcite-icon`." }, { "name": "tooltip", "docs": "[Deprecated] Use the `calcite-tooltip` component instead." } ], "parts": [], "listeners": [] }, { "filePath": "src/components/action-bar/action-bar.tsx", "tag": "calcite-action-bar", "overview": "", "readme": "", "usage": {}, "docs": "", "docsTags": [ { "name": "superclass", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ], "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, "props": [ { "name": "actionsEndGroupLabel", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "actions-end-group-label", "reflectToAttr": false, "docs": "Specifies the accessible label for the last `calcite-action-group`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "expandDisabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "expand-disabled", "reflectToAttr": true, "docs": "When `true`, the expand-toggling behavior is disabled.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "expanded", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "expanded", "reflectToAttr": true, "docs": "When `true`, the component is expanded.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "floating", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "floating", "reflectToAttr": true, "docs": "When `true`, the component is in a floating state.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "layout", "type": "\"grid\" | \"horizontal\" | \"vertical\"", "complexType": { "original": "\"grid\" | \"horizontal\" | \"vertical\"", "resolved": "\"grid\" | \"horizontal\" | \"vertical\"", "references": {} }, "mutable": true, "attr": "layout", "reflectToAttr": true, "docs": "Specifies the layout direction of the actions.", "docsTags": [], "default": "\"vertical\"", "values": [ { "value": "grid", "type": "string" }, { "value": "horizontal", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": true, "required": false }, { "name": "messageOverrides", "type": "{\n expand?: string;\n collapse?: string;\n expandLabel?: string;\n collapseLabel?: string;\n}", "complexType": { "original": "{\n expand?: string;\n collapse?: string;\n expandLabel?: string;\n collapseLabel?: string;\n}", "resolved": "{\n expand?: string;\n collapse?: string;\n expandLabel?: string;\n collapseLabel?: string;\n}", "references": {} }, "mutable": true, "reflectToAttr": false, "docs": "Use this property to override individual strings used by the component.", "docsTags": [], "values": [], "optional": true, "required": false }, { "name": "overflowActionsDisabled", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "overflow-actions-disabled", "reflectToAttr": true, "docs": "Disables automatically overflowing `calcite-action`s that won't fit into menus.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "overlayPositioning", "type": "\"absolute\" | \"fixed\"", "complexType": { "original": "\"absolute\" | \"fixed\"", "resolved": "\"absolute\" | \"fixed\"", "references": {} }, "mutable": true, "attr": "overlay-positioning", "reflectToAttr": true, "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.", "docsTags": [], "default": "\"absolute\"", "values": [ { "value": "absolute", "type": "string" }, { "value": "fixed", "type": "string" } ], "optional": true, "required": false }, { "name": "position", "type": "\"end\" | \"start\"", "complexType": { "original": "\"end\" | \"start\"", "resolved": "\"end\" | \"start\"", "references": {} }, "mutable": true, "attr": "position", "reflectToAttr": true, "docs": "Arranges the component depending on the element's `dir` property.", "docsTags": [], "values": [ { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "complexType": { "original": "\"l\" | \"m\" | \"s\"", "resolved": "\"l\" | \"m\" | \"s\"", "references": {} }, "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "Specifies the size of the expand `calcite-action`.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "componentOnReady", "returns": { "type": "Promise<void>", "docs": "" }, "complexType": { "signature": "(): Promise<void>", "parameters": [], "return": "Promise<void>", "references": { "Promise": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "signature": "componentOnReady(): Promise<void>", "parameters": [], "docs": "Create a promise that resolves once component is fully loaded.", "docsTags": [ { "name": "example", "text": "const actionBar = document.createElement(\"calcite-action-bar\");\ndocument.body.append(actionBar);\nactionBar.componentOnReady().then(() => {\n console.log(\"calcite-action-bar is ready to go!\");\n});" }, { "name": "inheritedFrom", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ] }, { "name": "setFocus", "returns": { "type": "Promise<void>", "docs": "" }, "complexType": { "signature": "(): Promise<void>", "parameters": [], "return": "Promise<void>", "references": { "Promise": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "signature": "setFocus(): Promise<void>", "parameters": [], "docs": "Sets focus on the component's first focusable element.", "docsTags": [] } ], "events": [ { "event": "calciteActionBarToggle", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": false, "composed": true, "docs": "Fires when the `expanded` property is toggled.", "docsTags": [] } ], "styles": [ { "name": "--calcite-action-bar-background-color", "annotation": "prop", "docs": "Specifies the component's background color." }, { "name": "--calcite-action-bar-corner-radius", "annotation": "prop", "docs": "Specifies the component's border radius when `floating` is `true`." }, { "name": "--calcite-action-bar-expanded-max-width", "annotation": "prop", "docs": "When `layout` is `\"vertical\"`, specifies the component's maximum width." }, { "name": "--calcite-action-bar-items-space", "annotation": "prop", "docs": "Specifies the space between slotted components in the component." }, { "name": "--calcite-action-bar-shadow", "annotation": "prop", "docs": "Specifies the component's shadow when `floating` is `true`." } ], "slots": [ { "name": "", "docs": "A slot for adding `calcite-action`s that will appear at the top of the component." }, { "name": "bottom-actions", "docs": "[Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button." }, { "name": "actions-end", "docs": "A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button." }, { "name": "expand-tooltip", "docs": "A slot to set the `calcite-tooltip` for the expand toggle." } ], "parts": [], "listeners": [] }, { "filePath": "src/components/action-group/action-group.tsx", "tag": "calcite-action-group", "overview": "", "readme": "", "usage": {}, "docs": "", "docsTags": [ { "name": "superclass", "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}" } ], "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, "props": [ { "name": "columns", "type": "1 | 2 | 3 | 4 | 5 | 6", "complexType": { "original": "1 | 2 | 3 | 4 | 5 | 6", "resolved": "1 | 2 | 3 | 4 | 5 | 6", "references": {} }, "mutable": true, "attr": "columns", "reflectToAttr": true, "docs": "Indicates number of columns.", "docsTags": [], "values": [ { "value": "1", "type": "number" }, { "value": "2", "type": "number" }, { "value": "3", "type": "number" }, { "value": "4", "type": "number" }, { "value": "5", "type": "number" }, { "value": "6", "type": "number" } ], "optional": true, "required": false }, { "name": "expanded", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "expanded", "reflectToAttr": true, "docs": "When `true`, the component is expanded.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": true, "attr": "label", "reflectToAttr": false, "docs": "Accessible name for the component.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "layout", "type": "\"grid\" | \"horizontal\" | \"vertical\"", "complexType": { "original": "\"grid\" | \"horizontal\" | \"vertical\"", "resolved": "\"grid\" | \"horizontal\" | \"vertical\"", "references": {} }, "mutable": true, "attr": "layout", "reflectToAttr": true, "docs": "Indicates the layout of the component.", "docsTags": [ { "name": "internal" } ], "default": "\"vertical\"", "values": [ { "value": "grid", "type": "string" }, { "value": "horizontal", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": true, "required": false }, { "name": "menuFlipPlacements", "type": "Array<\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"leading-start\" | \"leading\" | \"leading-end\" | \"trailing-end\" | \"trailing\" | \"trailing-start\">", "complexType": { "original": "Array<\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"leading-start\" | \"leading\" | \"leading-end\" | \"trailing-end\" | \"trailing\" | \"trailing-start\">", "resolved": "Array<\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"leading-start\" | \"leading\" | \"leading-end\" | \"trailing-end\" | \"trailing\" | \"trailing-start\">", "references": { "Array": { "location": "import", "path": "typescript/lib/lib.es5.d.ts", "id": "notImplemented" } } }, "mutable": true, "reflectToAttr": false, "docs": "Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.", "docsTags": [], "values": [], "optional": true, "required": false }, { "name": "menuOpen", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "menu-open", "reflectToAttr": true, "docs": "When `true`, the `calcit