@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1,657 lines (1,656 loc) • 540 kB
JSON
{
"timestamp": "2021-07-02T16:13:11",
"compiler": {
"name": "@stencil/core",
"version": "2.6.0",
"typescriptVersion": "4.2.3"
},
"components": [
{
"filePath": "./src/components/calcite-accordion/calcite-accordion.tsx",
"encapsulation": "shadow",
"tag": "calcite-accordion",
"readme": "# calcite-accordion\n\n`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (icon-position, scale, appearance), and selection functionality. Selection modes include \"multi\", \"single\", and \"single-persist\".\n",
"docs": "`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (icon-position, scale, appearance), and selection functionality. Selection modes include \"multi\", \"single\", and \"single-persist\".",
"docsTags": [],
"usage": {
"basic": "```html\n<calcite-accordion>\n <calcite-accordion-item item-title=\"Accordion Item\">Accordion Section Content </calcite-accordion-item>\n <calcite-accordion-item item-title=\"Accordion Item 2\" active>Accordion Section Content </calcite-accordion-item>\n <calcite-accordion-item item-title=\"Accordion Item 3\">Accordion Section Content </calcite-accordion-item>\n</calcite-accordion>\n```\n"
},
"props": [
{
"name": "appearance",
"type": "\"default\" | \"minimal\" | \"transparent\"",
"mutable": false,
"attr": "appearance",
"reflectToAttr": true,
"docs": "specify the appearance - default (containing border), or minimal (no containing border), defaults to default",
"docsTags": [],
"default": "\"default\"",
"values": [
{
"value": "default",
"type": "string"
},
{
"value": "minimal",
"type": "string"
},
{
"value": "transparent",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "iconPosition",
"type": "\"end\" | \"start\"",
"mutable": false,
"attr": "icon-position",
"reflectToAttr": true,
"docs": "specify the placement of the icon in the header, defaults to end",
"docsTags": [],
"default": "\"end\"",
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "iconType",
"type": "\"caret\" | \"chevron\" | \"plus-minus\"",
"mutable": false,
"attr": "icon-type",
"reflectToAttr": true,
"docs": "specify the type of the icon in the header, defaults to chevron",
"docsTags": [],
"default": "\"chevron\"",
"values": [
{
"value": "caret",
"type": "string"
},
{
"value": "chevron",
"type": "string"
},
{
"value": "plus-minus",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "scale",
"type": "\"l\" | \"m\" | \"s\"",
"mutable": false,
"attr": "scale",
"reflectToAttr": true,
"docs": "specify the scale of accordion, defaults to m",
"docsTags": [],
"default": "\"m\"",
"values": [
{
"value": "l",
"type": "string"
},
{
"value": "m",
"type": "string"
},
{
"value": "s",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "selectionMode",
"type": "\"multi\" | \"single\" | \"single-persist\"",
"mutable": false,
"attr": "selection-mode",
"reflectToAttr": true,
"docs": "specify the selection mode - multi (allow any number of open items), single (allow one open item),\nor single-persist (allow and require one open item), defaults to multi",
"docsTags": [],
"default": "\"multi\"",
"values": [
{
"value": "multi",
"type": "string"
},
{
"value": "single",
"type": "string"
},
{
"value": "single-persist",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [
{
"event": "calciteAccordionItemKeyEvent",
"capture": false,
"passive": false
},
{
"event": "calciteAccordionItemRegister",
"capture": false,
"passive": false
},
{
"event": "calciteAccordionItemSelect",
"capture": false,
"passive": false
}
],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
},
{
"filePath": "./src/components/calcite-accordion-item/calcite-accordion-item.tsx",
"encapsulation": "shadow",
"tag": "calcite-accordion-item",
"readme": "# calcite-accordion-item\n\nindividual `calcite-accordion` item\n",
"docs": "individual `calcite-accordion` item",
"docsTags": [],
"usage": {},
"props": [
{
"name": "active",
"type": "boolean",
"mutable": true,
"attr": "active",
"reflectToAttr": true,
"docs": "",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "icon",
"type": "string",
"mutable": false,
"attr": "icon",
"reflectToAttr": true,
"docs": "optionally pass an icon to display - accepts Calcite UI icon names",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "itemSubtitle",
"type": "string",
"mutable": false,
"attr": "item-subtitle",
"reflectToAttr": false,
"docs": "pass a title for the accordion item",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "itemTitle",
"type": "string",
"mutable": false,
"attr": "item-title",
"reflectToAttr": false,
"docs": "pass a title for the accordion item",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [
{
"event": "keydown",
"capture": false,
"passive": false
},
{
"event": "calciteAccordionChange",
"target": "body",
"capture": false,
"passive": false
}
],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"calcite-icon"
],
"dependencyGraph": {
"calcite-accordion-item": [
"calcite-icon"
]
}
},
{
"filePath": "./src/components/calcite-action/calcite-action.tsx",
"encapsulation": "shadow",
"tag": "calcite-action",
"readme": "# calcite-action\n\nThe `calcite-action` component lives in either a `calcite-action-bar` or `calcite-action-pad`. Actions look like an icon with a text description option of the component that will be revealed when the icon/ text is clicked or selected.\n",
"docs": "The `calcite-action` component lives in either a `calcite-action-bar` or `calcite-action-pad`. Actions look like an icon with a text description option of the component that will be revealed when the icon/ text is clicked or selected.",
"docsTags": [
{
"text": "- A slot for adding a `calcite-icon`.",
"name": "slot"
}
],
"usage": {
"basic": "#### Without text displayed\n\nRenders a `calcite-action` that displays only an icon and a tooltip label.\n\n```html\n<calcite-action label=\"Performs my custom action\" text=\"My Custom Action\" icon=\"plus\"></calcite-action>\n```\n\n#### With text displayed\n\nRenders a `calcite-action` that displays text along side an icon and a tooltip label.\n\n```html\n<calcite-action label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled icon=\"save\"></calcite-action>\n```\n\n#### Clear appearance\n\nRenders a `calcite-action` that has a clear background.\n\n```html\n<calcite-action appearance=\"clear\" text=\"Layers\" icon=\"layers\"></calcite-action>\n```\n"
},
"props": [
{
"name": "active",
"type": "boolean",
"mutable": false,
"attr": "active",
"reflectToAttr": true,
"docs": "Indicates whether the action is highlighted.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "alignment",
"type": "\"center\" | \"end\" | \"start\"",
"mutable": false,
"attr": "alignment",
"reflectToAttr": true,
"docs": "Indicates the alignment when text-enabled is false.",
"docsTags": [],
"values": [
{
"value": "center",
"type": "string"
},
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "appearance",
"type": "\"clear\" | \"outline\" | \"solid\"",
"mutable": false,
"attr": "appearance",
"reflectToAttr": true,
"docs": "Specify the appearance style of the action, defaults to solid.",
"docsTags": [],
"default": "\"solid\"",
"values": [
{
"value": "clear",
"type": "string"
},
{
"value": "outline",
"type": "string"
},
{
"value": "solid",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "compact",
"type": "boolean",
"mutable": false,
"attr": "compact",
"reflectToAttr": true,
"docs": "Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "disabled",
"type": "boolean",
"mutable": false,
"attr": "disabled",
"reflectToAttr": true,
"docs": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "icon",
"type": "string",
"mutable": false,
"attr": "icon",
"reflectToAttr": false,
"docs": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "indicator",
"type": "boolean",
"mutable": false,
"attr": "indicator",
"reflectToAttr": true,
"docs": "Indicates unread changes.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "intlLoading",
"type": "string",
"mutable": false,
"attr": "intl-loading",
"reflectToAttr": false,
"docs": "string to override English loading text",
"docsTags": [],
"default": "TEXT.loading",
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "label",
"type": "string",
"mutable": false,
"attr": "label",
"reflectToAttr": false,
"docs": "The label of the action. 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",
"mutable": false,
"attr": "loading",
"reflectToAttr": true,
"docs": "When true, content is waiting to be loaded. This state shows a busy indicator.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "scale",
"type": "\"l\" | \"m\" | \"s\"",
"mutable": false,
"attr": "scale",
"reflectToAttr": true,
"docs": "Specifies the size of the action.",
"docsTags": [],
"default": "\"m\"",
"values": [
{
"value": "l",
"type": "string"
},
{
"value": "m",
"type": "string"
},
{
"value": "s",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "text",
"type": "string",
"mutable": false,
"attr": "text",
"reflectToAttr": false,
"docs": "Text that accompanies the action icon.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": true
},
{
"name": "textEnabled",
"type": "boolean",
"mutable": false,
"attr": "text-enabled",
"reflectToAttr": true,
"docs": "Indicates whether the text is displayed.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"signature": "setFocus() => Promise<void>",
"parameters": [],
"docs": "",
"docsTags": []
}
],
"events": [
{
"event": "calciteActionClick",
"detail": "any",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Emitted when the action has been clicked.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [
{
"name": "",
"docs": "A slot for adding a `calcite-icon`."
}
],
"parts": [],
"dependents": [
"calcite-action-bar",
"calcite-action-menu",
"calcite-action-pad",
"calcite-panel",
"calcite-pick-list-item",
"calcite-popover",
"calcite-tip",
"calcite-tip-manager"
],
"dependencies": [
"calcite-loader",
"calcite-icon"
],
"dependencyGraph": {
"calcite-action": [
"calcite-loader",
"calcite-icon"
],
"calcite-action-bar": [
"calcite-action"
],
"calcite-action-menu": [
"calcite-action"
],
"calcite-action-pad": [
"calcite-action"
],
"calcite-panel": [
"calcite-action"
],
"calcite-pick-list-item": [
"calcite-action"
],
"calcite-popover": [
"calcite-action"
],
"calcite-tip": [
"calcite-action"
],
"calcite-tip-manager": [
"calcite-action"
]
}
},
{
"filePath": "./src/components/calcite-action-bar/calcite-action-bar.tsx",
"encapsulation": "shadow",
"tag": "calcite-action-bar",
"readme": "# calcite-action-bar\n\n## Description\n\nThe `calcite-action-bar` component is made up of multiple `calcite-action`s in the form of clickable icons. The action bar can be expanded to view actions with descriptive text or made smaller to view with just icons.\n",
"docs": "",
"docsTags": [
{
"text": "- A slot for adding `calcite-action`s that will appear at the top of the action bar.",
"name": "slot"
},
{
"text": "bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.",
"name": "slot"
},
{
"text": "expand-tooltip - Used to set the tooltip for the expand toggle.",
"name": "slot"
}
],
"usage": {
"basic": "#### Basic Action Bar (Top Actions)\n\nRenders `calcite-action`s that stick to the top of the bar.\n\n```html\n<calcite-action-bar>\n <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n</calcite-action-bar>\n```\n\n#### With grouping\n\nRenders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the bar.\n\n```html\n<calcite-action-bar>\n <calcite-action-group>\n <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n </calcite-action-group>\n\n <calcite-action-group>\n <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n <calcite-action text=\"Basemaps\" icon=\"layer-basemap\"></calcite-action>\n </calcite-action-group>\n</calcite-action-bar>\n```\n\n#### Bottom Actions\n\nThe bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.\n\n```html\n<calcite-action-bar>\n <calcite-action text=\"Information\" icon=\"information\"></calcite-action>\n <calcite-action text=\"Feedback\" slot=\"bottom-actions\" icon=\"mega-phone\"></calcite-action>\n</calcite-action-bar>\n```\n",
"tooltip": "### Tooltip on the expand action\n\n```html\n<calcite-action-bar id=\"action-bar-test\">\n <calcite-tooltip slot=\"expand-tooltip\">Expand</calcite-tooltip>\n <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n</calcite-action-bar>\n```\n"
},
"props": [
{
"name": "expandDisabled",
"type": "boolean",
"mutable": false,
"attr": "expand-disabled",
"reflectToAttr": true,
"docs": "When set to true, the expand-toggling behavior will be disabled.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "expanded",
"type": "boolean",
"mutable": true,
"attr": "expanded",
"reflectToAttr": true,
"docs": "Indicates whether widget is expanded.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "intlCollapse",
"type": "string",
"mutable": false,
"attr": "intl-collapse",
"reflectToAttr": false,
"docs": "Updates the label of the collapse icon when the component is expanded.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "intlExpand",
"type": "string",
"mutable": false,
"attr": "intl-expand",
"reflectToAttr": false,
"docs": "Updates the label of the expand icon when the component is not expanded.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "overflowActionsDisabled",
"type": "boolean",
"mutable": false,
"attr": "overflow-actions-disabled",
"reflectToAttr": false,
"docs": "Disables automatically overflowing actions that won't fit into menus.",
"docsTags": [],
"values": [
{
"type": "boolean"
}
],
"optional": true,
"required": false
},
{
"name": "position",
"type": "\"end\" | \"start\"",
"mutable": false,
"attr": "position",
"reflectToAttr": true,
"docs": "Arranges the component depending on the elements 'dir' property.",
"docsTags": [],
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"signature": "setFocus(focusId?: \"expand-toggle\") => Promise<void>",
"parameters": [],
"docs": "",
"docsTags": []
}
],
"events": [
{
"event": "calciteActionBarToggle",
"detail": "any",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Emitted when expanded has been toggled.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [
{
"name": "",
"docs": "A slot for adding `calcite-action`s that will appear at the top of the action bar."
},
{
"name": "bottom-actions",
"docs": "A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button."
},
{
"name": "expand-tooltip",
"docs": "Used to set the tooltip for the expand toggle."
}
],
"parts": [],
"dependents": [],
"dependencies": [
"calcite-action-group",
"calcite-action",
"calcite-tooltip-manager"
],
"dependencyGraph": {
"calcite-action-bar": [
"calcite-action-group",
"calcite-action",
"calcite-tooltip-manager"
],
"calcite-action-group": [
"calcite-action-menu"
],
"calcite-action-menu": [
"calcite-action",
"calcite-tooltip-manager",
"calcite-popover"
],
"calcite-action": [
"calcite-loader",
"calcite-icon"
],
"calcite-popover": [
"calcite-action",
"calcite-icon"
]
}
},
{
"filePath": "./src/components/calcite-action-group/calcite-action-group.tsx",
"encapsulation": "shadow",
"tag": "calcite-action-group",
"readme": "# calcite-action-group\n\nThe `calcite-action-group` is a wrapper for multiple `calcite-action`s and housed in `calcite-action-bar` and `calcite-action-pad`.\n",
"docs": "The `calcite-action-group` is a wrapper for multiple `calcite-action`s and housed in `calcite-action-bar` and `calcite-action-pad`.",
"docsTags": [
{
"text": "- A slot for adding a group of `calcite-action`s.",
"name": "slot"
},
{
"text": "menu-actions - a slot for adding an overflow menu with actions inside a dropdown.",
"name": "slot"
},
{
"text": "menu-tooltip - a slot for adding an tooltip for the menu.",
"name": "slot"
}
],
"usage": {},
"props": [
{
"name": "columns",
"type": "1 | 2 | 3 | 4 | 5 | 6",
"mutable": false,
"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",
"mutable": false,
"attr": "expanded",
"reflectToAttr": true,
"docs": "Indicates whether widget is expanded.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "intlMore",
"type": "string",
"mutable": false,
"attr": "intl-more",
"reflectToAttr": false,
"docs": "Text string for the actions menu.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "layout",
"type": "\"grid\" | \"horizontal\" | \"vertical\"",
"mutable": false,
"attr": "layout",
"reflectToAttr": true,
"docs": "Indicates the horizontal, vertical, or grid layout of the component.",
"docsTags": [],
"default": "\"vertical\"",
"values": [
{
"value": "grid",
"type": "string"
},
{
"value": "horizontal",
"type": "string"
},
{
"value": "vertical",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "menuOpen",
"type": "boolean",
"mutable": true,
"attr": "menu-open",
"reflectToAttr": true,
"docs": "Opens the action menu.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
}
],
"methods": [],
"events": [],
"listeners": [],
"styles": [],
"slots": [
{
"name": "",
"docs": "A slot for adding a group of `calcite-action`s."
},
{
"name": "menu-actions",
"docs": "a slot for adding an overflow menu with actions inside a dropdown."
},
{
"name": "menu-tooltip",
"docs": "a slot for adding an tooltip for the menu."
}
],
"parts": [],
"dependents": [
"calcite-action-bar",
"calcite-action-pad"
],
"dependencies": [
"calcite-action-menu"
],
"dependencyGraph": {
"calcite-action-group": [
"calcite-action-menu"
],
"calcite-action-menu": [
"calcite-action",
"calcite-tooltip-manager",
"calcite-popover"
],
"calcite-action": [
"calcite-loader",
"calcite-icon"
],
"calcite-popover": [
"calcite-action",
"calcite-icon"
],
"calcite-action-bar": [
"calcite-action-group"
],
"calcite-action-pad": [
"calcite-action-group"
]
}
},
{
"filePath": "./src/components/calcite-action-menu/calcite-action-menu.tsx",
"encapsulation": "shadow",
"tag": "calcite-action-menu",
"readme": "# calcite-action-menu\n",
"docs": "",
"docsTags": [
{
"text": "- A slot for adding `calcite-action`s.",
"name": "slot"
},
{
"text": "tooltip - a slot for adding an tooltip for the menu.",
"name": "slot"
}
],
"usage": {},
"props": [
{
"name": "expanded",
"type": "boolean",
"mutable": false,
"attr": "expanded",
"reflectToAttr": true,
"docs": "Indicates whether widget is expanded.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "flipPlacements",
"type": "Placement[]",
"mutable": false,
"reflectToAttr": false,
"docs": "Defines the available placements that can be used when a flip occurs.",
"docsTags": [],
"values": [
{
"type": "Placement[]"
}
],
"optional": true,
"required": false
},
{
"name": "label",
"type": "string",
"mutable": false,
"attr": "label",
"reflectToAttr": false,
"docs": "Text string for the actions menu.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": true
},
{
"name": "open",
"type": "boolean",
"mutable": true,
"attr": "open",
"reflectToAttr": true,
"docs": "Opens the action menu.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "overlayPositioning",
"type": "\"absolute\" | \"fixed\"",
"mutable": false,
"attr": "overlay-positioning",
"reflectToAttr": false,
"docs": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.",
"docsTags": [],
"default": "\"absolute\"",
"values": [
{
"value": "absolute",
"type": "string"
},
{
"value": "fixed",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "placement",
"type": "Placement | PlacementRtl | VariationRtl",
"mutable": false,
"attr": "placement",
"reflectToAttr": true,
"docs": "Determines where the component will be positioned relative to the referenceElement.",
"docsTags": [],
"default": "\"auto\"",
"values": [
{
"type": "Placement"
},
{
"type": "PlacementRtl"
},
{
"type": "VariationRtl"
}
],
"optional": false,
"required": false
},
{
"name": "scale",
"type": "\"l\" | \"m\" | \"s\"",
"mutable": false,
"attr": "scale",
"reflectToAttr": true,
"docs": "Specifies the size of the action.",
"docsTags": [],
"default": "\"m\"",
"values": [
{
"value": "l",
"type": "string"
},
{
"value": "m",
"type": "string"
},
{
"value": "s",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"signature": "setFocus() => Promise<void>",
"parameters": [],
"docs": "",
"docsTags": []
}
],
"events": [
{
"event": "calciteActionMenuOpenChange",
"detail": "any",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Emitted when the open property has changed.",
"docsTags": []
}
],
"listeners": [
{
"event": "click",
"target": "window",
"capture": false,
"passive": false
}
],
"styles": [],
"slots": [
{
"name": "",
"docs": "A slot for adding `calcite-action`s."
},
{
"name": "tooltip",
"docs": "a slot for adding an tooltip for the menu."
}
],
"parts": [],
"dependents": [
"calcite-action-group",
"calcite-panel"
],
"dependencies": [
"calcite-action",
"calcite-tooltip-manager",
"calcite-popover"
],
"dependencyGraph": {
"calcite-action-menu": [
"calcite-action",
"calcite-tooltip-manager",
"calcite-popover"
],
"calcite-action": [
"calcite-loader",
"calcite-icon"
],
"calcite-popover": [
"calcite-action",
"calcite-icon"
],
"calcite-action-group": [
"calcite-action-menu"
],
"calcite-panel": [
"calcite-action-menu"
]
}
},
{
"filePath": "./src/components/calcite-action-pad/calcite-action-pad.tsx",
"encapsulation": "shadow",
"tag": "calcite-action-pad",
"readme": "# calcite-action-pad\n\nThe `calcite-action-pad` component is made up of `calcite-action`s in the form of clickable icons. This does not have an expandable option and is a smaller and simpler component than `calcite-action-bar`.\n",
"docs": "The `calcite-action-pad` component is made up of `calcite-action`s in the form of clickable icons. This does not have an expandable option and is a smaller and simpler component than `calcite-action-bar`.",
"docsTags": [
{
"text": "- A slot for adding `calcite-action`s to the action pad.",
"name": "slot"
},
{
"text": "expand-tooltip - Used to set the tooltip for the expand toggle.",
"name": "slot"
}
],
"usage": {
"basic": "#### Basic Action Pad\n\nRenders a basic action pad with `calcite-action`s.\n\n```html\n<calcite-action-pad>\n <calcite-action text=\"Undo\" icon=\"undo\"></calcite-action>\n <calcite-action text=\"Redo\" icon=\"redo\"></calcite-action>\n</calcite-action-pad>\n```\n\n#### With Grouping\n\nRenders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the pad.\n\n```html\n<calcite-action-pad>\n <calcite-action-group>\n <calcite-action text=\"Home\" icon=\"home\"></calcite-action>\n <calcite-action text=\"Styles\" icon=\"add-in-edit\"></calcite-action>\n </calcite-action-group>\n\n <calcite-action text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n</calcite-action-pad>\n```\n",
"tooltip": "### Tooltip on the expand action\n\n```html\n<calcite-action-pad id=\"action-pad-test\">\n <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n</calcite-action-pad>\n<calcite-tooltip id=\"tooltip\">Expand</calcite-tooltip>\n<script>\n var actionPad = document.getElementById(\"action-pad-test\");\n var tooltip = document.getElementById(\"tooltip\");\n actionPad.tooltipExpand = tooltip;\n</script>\n```\n"
},
"props": [
{
"name": "expandDisabled",
"type": "boolean",
"mutable": false,
"attr": "expand-disabled",
"reflectToAttr": true,
"docs": "When set to true, the expand-toggling behavior will be disabled.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "expanded",
"type": "boolean",
"mutable": true,
"attr": "expanded",
"reflectToAttr": true,
"docs": "Indicates whether widget is expanded.",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "intlCollapse",
"type": "string",
"mutable": false,
"attr": "intl-collapse",
"reflectToAttr": false,
"docs": "Updates the label of the collapse icon when the component is expanded.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "intlExpand",
"type": "string",
"mutable": false,
"attr": "intl-expand",
"reflectToAttr": false,
"docs": "Updates the label of the expand icon when the component is not expanded.",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false
},
{
"name": "layout",
"type": "\"grid\" | \"horizontal\" | \"vertical\"",
"mutable": false,
"attr": "layout",
"reflectToAttr": true,
"docs": "Indicates the horizontal or vertical layout of the component.",
"docsTags": [],
"default": "\"vertical\"",
"values": [
{
"value": "grid",
"type": "string"
},
{
"value": "horizontal",
"type": "string"
},
{
"value": "vertical",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "position",
"type": "\"end\" | \"start\"",
"mutable": false,
"attr": "position",
"reflectToAttr": true,
"docs": "Arranges the component depending on the elements 'dir' property.",
"docsTags": [],
"values": [
{
"value": "end",
"type": "string"
},
{
"value": "start",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"signature": "setFocus(focusId?: \"expand-toggle\") => Promise<void>",
"parameters": [],
"docs": "",
"docsTags": []
}
],
"events": [
{
"event": "calciteActionPadToggle",
"detail": "any",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Emitted when expanded has been toggled.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [
{
"name": "",
"docs": "A slot for adding `calcite-action`s to the action pad."
},
{
"name": "expand-tooltip",
"docs": "Used to set the tooltip for the expand toggle."
}
],
"parts": [],
"dependents": [],
"dependencies": [
"calcite-action-group",
"calcite-action",
"calcite-tooltip-manager"
],
"dependencyGraph": {
"calcite-action-pad": [
"calcite-action-group",
"calcite-action",
"calcite-tooltip-manager"
],
"calcite-action-group": [
"calcite-action-menu"
],
"calcite-action-menu": [
"calcite-action",
"calcite-tooltip-manager",
"calcite-popover"
],
"calcite-action": [
"calcite-loader",
"calcite-icon"
],
"calcite-popover": [
"calcite-action",
"calcite-icon"
]
}
},
{
"filePath": "./src/components/calcite-alert/calcite-alert.tsx",
"encapsulation": "shadow",
"tag": "calcite-alert",
"readme": "# calcite-alert\n",
"docs": "",
"docsTags": [
{
"text": "title - Title of the alert (optional)",
"name": "slot"
},
{
"text": "message - Main text of the alert",
"name": "slot"
},
{
"text": "link - Optional action to take from the alert (undo, try again, link to page, etc.)",
"name": "slot"
}
],
"usage": {
"basic": "A single instance of an alert. Multiple alerts will aggregate in a queue.\n\n```html\n<calcite-alert>\n <div slot=\"title\">Title of alert #1</div>\n <div slot=\"message\">Message text of the alert</div>\n <a slot=\"link\" href=\"#\">Retry</a>\n</calcite-alert>\n<calcite-alert>\n <div slot=\"title\">Title of alert #2</div>\n <div slot=\"message\">Message text of the alert</div>\n <a slot=\"link\" href=\"#\">Retry</a>\n</calcite-alert>\n```\n"
},
"props": [
{
"name": "active",
"type": "boolean",
"mutable": true,
"attr": "active",
"reflectToAttr": true,
"docs": "Is the alert currently active or not",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "autoDismiss",
"type": "boolean",
"mutable": false,
"attr": "auto-dismiss",
"reflectToAttr": false,
"docs": "Close the alert automatically (recommended for passive, non-blocking alerts)",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": false,
"required": false
},
{
"name": "autoDismissDuration",
"type": "\"fast\" | \"medium\" | \"slow\"",
"mutable": false,
"attr": "auto-dismiss-duration",
"reflectToAttr": true,
"docs": "Duration of autoDismiss (only used with `autoDismiss`)",
"docsTags": [],
"default": "this.autoDismiss ? \"medium\" : null",
"values": [
{
"value": "fast",
"type": "string"
},
{
"value": "medium",
"type": "string"
},
{
"value": "slow",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "color",
"type": "\"blue\" | \"green\" | \"red\" | \"yellow\"",
"mutable": false,
"attr": "color",
"reflectToAttr": true,
"docs": "Color for the alert (will apply to top border and icon)",
"docsTags": [],
"default": "\"blue\"",
"values": [
{
"value": "blue",
"type": "string"
},
{
"value": "green",
"type": "string"
},
{
"value": "red",
"type": "string"
},
{
"value": "yellow",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "icon",
"type": "boolean | string",
"mutable": false,
"attr": "icon",
"reflectToAttr": true,
"docs": "when used as a boolean set to true, show a default recommended icon. You can\nalso pass a calcite-ui-icon name to this prop to display a requested icon",
"docsTags": [],
"values": [
{
"type": "boolean"
},
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "intlClose",
"type": "string",
"mutable": false,
"attr": "intl-close",
"reflectToAttr": false,
"docs": "string to override English close text",
"docsTags": [],
"default": "TEXT.intlClose",
"values": [
{
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "label",
"type": "string",
"mutable": false,
"attr": "label",
"reflectToAttr": false,
"docs": "Accessible name for the component",
"docsTags": [],
"values": [
{
"type": "string"
}
],
"optional": false,
"required": true
},
{
"name": "scale",
"type": "\"l\" | \"m\" | \"s\"",
"mutable": false,
"attr": "scale",
"reflectToAttr": true,
"docs": "specify the scale of the button, defaults to m",
"docsTags": [],
"default": "\"m\"",
"values": [
{
"value": "l",
"type": "string"
},
{
"value": "m",
"type": "string"
},
{
"value": "s",
"type": "string"
}
],
"optional": false,
"required": false
}
],
"methods": [
{
"name": "setFocus",
"returns": {
"type": "Promise<void>",
"docs": ""
},
"signature": "setFocus() => Promise<void>",
"parameters": [],
"docs": "focus either the slotted link or the close button",
"docsTags": []
}
],
"events": [
{
"event": "calciteAlertClose",
"detail": "any",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Fired when an alert is closed",
"docsTags": []
},
{
"event": "calciteAlertOpen",
"detail": "any",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": "Fired when an alert is opened",