@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1,607 lines • 1.42 MB
JSON
{
"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