{ "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\n Accordion Section Content \n Accordion Section Content \n Accordion Section Content \n\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\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\n```\n\n#### Clear appearance\n\nRenders a `calcite-action` that has a clear background.\n\n```html\n\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", "docs": "" }, "signature": "setFocus() => Promise", "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\n \n \n\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\n \n \n \n \n\n \n \n \n \n\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\n \n \n\n```\n", "tooltip": "### Tooltip on the expand action\n\n```html\n\n Expand\n \n\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", "docs": "" }, "signature": "setFocus(focusId?: \"expand-toggle\") => Promise", "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", "docs": "" }, "signature": "setFocus() => Promise", "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\n \n \n\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\n \n \n \n \n\n \n\n```\n", "tooltip": "### Tooltip on the expand action\n\n```html\n\n \n\nExpand\n\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", "docs": "" }, "signature": "setFocus(focusId?: \"expand-toggle\") => Promise", "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\n
Title of alert #1
\n
Message text of the alert
\n Retry\n\n\n
Title of alert #2
\n
Message text of the alert
\n Retry\n\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", "docs": "" }, "signature": "setFocus() => Promise", "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", "docsTags": [] } ], "listeners": [ { "event": "calciteAlertSync", "target": "window", "capture": false, "passive": false }, { "event": "calciteAlertRegister", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "link", "docs": "Optional action to take from the alert (undo, try again, link to page, etc.)" }, { "name": "message", "docs": "Main text of the alert" }, { "name": "title", "docs": "Title of the alert (optional)" } ], "parts": [], "dependents": [], "dependencies": [ "calcite-icon", "calcite-chip" ], "dependencyGraph": { "calcite-alert": [ "calcite-icon", "calcite-chip" ], "calcite-chip": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-avatar/calcite-avatar.tsx", "encapsulation": "shadow", "tag": "calcite-avatar", "readme": "# calcite-avatar\n\nThe avatar component provides a unique (but consistent) visual for a user. It's built\nto work with users returned from the ArcGIS REST API.\n", "docs": "The avatar component provides a unique (but consistent) visual for a user. It's built\nto work with users returned from the ArcGIS REST API.", "docsTags": [], "usage": { "basic": "Take the following sample user returned from a [search for users](https://developers.arcgis.com/rest/users-groups-and-items/user-search.htm):\n\n```json\n{\n \"username\": \"ron_swanson_pawnee\",\n \"id\": \"a81470986eaeee1833b74b7d8abcd5b2\",\n \"fullName\": \"Ron Swanson\",\n \"firstName\": \"Ron\",\n \"lastName\": \"Swanson\",\n \"thumbnail\": \"mySelf.jpg\",\n ...\n}\n```\n\nYou can create an avatar for Ron by passing these properties directly to the avatar component, like so:\n\n```html\n\n```\n\nWhen no thumbnail is provided, the avatar component will construct a useful placeholder, leveraging the user's information to construct a unique background-color with initials.\n\n**Note:** if your user is private, remember to append a token to the end of the thumbnail using the form `thumbnail.jpg?token=YOUR_LOGGED_IN_USER_TOKEN`.\n" }, "props": [ { "name": "fullName", "type": "string", "mutable": false, "attr": "full-name", "reflectToAttr": false, "docs": "full name of the user", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the avatar, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "thumbnail", "type": "string", "mutable": false, "attr": "thumbnail", "reflectToAttr": false, "docs": "src to an image (remember to add a token if the user is private)", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "userId", "type": "string", "mutable": false, "attr": "user-id", "reflectToAttr": false, "docs": "unique id for user", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "username", "type": "string", "mutable": false, "attr": "username", "reflectToAttr": false, "docs": "user name", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-avatar": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-block/calcite-block.tsx", "encapsulation": "shadow", "tag": "calcite-block", "readme": "# calcite-block\n\nThe `calcite-block` component is intended for displaying a heading and content. Content can also include stacked, collapsible `calcite-block-section`s typically housed in a panel.\n", "docs": "The `calcite-block` component is intended for displaying a heading and content. Content can also include stacked, collapsible `calcite-block-section`s typically housed in a panel.", "docsTags": [ { "text": "icon - A slot for adding a trailing header icon.", "name": "slot" }, { "text": "control - A slot for adding a single HTML input element in a header.", "name": "slot" }, { "text": "- A slot for adding content to the block.", "name": "slot" } ], "usage": { "basic": "#### Default (non-collapsible)\n\n```html\n \n```\n\n#### Header with control\n\nRenders a header and control with a slot for adding a single HTML element (in the header).\n\n```html\n\n
\n\n```\n\n#### Header with Icon\n\nRenders a header and icon with the icon.\n\n```html\n\n
🤯
\n\n```\n\n#### Header with content (always open)\n\nRenders a header and content that remains open - no collapsible option.\n\n```html\n\n
Father or Son?
\n\n```\n\n#### Header with content (collapsible)\n\nRenders a header with a clickable icon to toggle the block open and closed.\n\n```html\n\n \n\n```\n" }, "props": [ { "name": "collapsible", "type": "boolean", "mutable": false, "attr": "collapsible", "reflectToAttr": false, "docs": "When true, this block will be collapsible.", "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": "dragHandle", "type": "boolean", "mutable": false, "attr": "drag-handle", "reflectToAttr": true, "docs": "When true, displays a drag handle in the header.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "heading", "type": "string", "mutable": false, "attr": "heading", "reflectToAttr": false, "docs": "Block heading.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "required": false }, { "name": "intlCollapse", "type": "string", "mutable": false, "attr": "intl-collapse", "reflectToAttr": false, "docs": "Tooltip used for the toggle when expanded.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlExpand", "type": "string", "mutable": false, "attr": "intl-expand", "reflectToAttr": false, "docs": "Tooltip used for the toggle when collapsed.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "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": "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": "open", "type": "boolean", "mutable": true, "attr": "open", "reflectToAttr": true, "docs": "When true, the block's content will be displayed.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "status", "type": "\"idle\" | \"invalid\" | \"valid\"", "mutable": false, "attr": "status", "reflectToAttr": true, "docs": "Block status. Updates or adds icon to show related icon and color.", "docsTags": [], "values": [ { "value": "idle", "type": "string" }, { "value": "invalid", "type": "string" }, { "value": "valid", "type": "string" } ], "optional": true, "required": false }, { "name": "summary", "type": "string", "mutable": false, "attr": "summary", "reflectToAttr": false, "docs": "Block summary.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "calciteBlockToggle", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the header has been clicked.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding content to the block." }, { "name": "control", "docs": "A slot for adding a single HTML input element in a header." }, { "name": "icon", "docs": "A slot for adding a trailing header icon." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-scrim", "calcite-icon", "calcite-handle", "calcite-loader" ], "dependencyGraph": { "calcite-block": [ "calcite-scrim", "calcite-icon", "calcite-handle", "calcite-loader" ], "calcite-scrim": [ "calcite-loader" ], "calcite-handle": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-block-section/calcite-block-section.tsx", "encapsulation": "shadow", "tag": "calcite-block-section", "readme": "# calcite-block-section\n\nThe `calcite-block-section` component is a child element of `calcite-block`. Sections can have their own header and content and can be toggled open or closed.\n", "docs": "The `calcite-block-section` component is a child element of `calcite-block`. Sections can have their own header and content and can be toggled open or closed.", "docsTags": [ { "text": "- A slot for adding content to the block section.", "name": "slot" } ], "usage": {}, "props": [ { "name": "intlCollapse", "type": "string", "mutable": false, "attr": "intl-collapse", "reflectToAttr": false, "docs": "Tooltip used for the toggle when expanded.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlExpand", "type": "string", "mutable": false, "attr": "intl-expand", "reflectToAttr": false, "docs": "Tooltip used for the toggle when collapsed.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "open", "type": "boolean", "mutable": true, "attr": "open", "reflectToAttr": true, "docs": "When true, the block's section content will be displayed.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "status", "type": "\"idle\" | \"invalid\" | \"valid\"", "mutable": false, "attr": "status", "reflectToAttr": true, "docs": "BlockSection status. Adds indicator to show valid or invalid status.", "docsTags": [], "values": [ { "value": "idle", "type": "string" }, { "value": "invalid", "type": "string" }, { "value": "valid", "type": "string" } ], "optional": true, "required": false }, { "name": "text", "type": "string", "mutable": false, "attr": "text", "reflectToAttr": false, "docs": "Text displayed in the button.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "toggleDisplay", "type": "\"button\" | \"switch\"", "mutable": false, "attr": "toggle-display", "reflectToAttr": true, "docs": "This property determines the look of the section toggle.\nIf the value is \"switch\", a toggle-switch will be displayed.\nIf the value is \"button\", a clickable header is displayed.", "docsTags": [ { "text": "revisit doc", "name": "todo" } ], "default": "\"button\"", "values": [ { "value": "button", "type": "string" }, { "value": "switch", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "calciteBlockSectionToggle", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the header has been clicked.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding content to the block section." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-icon", "calcite-switch" ], "dependencyGraph": { "calcite-block-section": [ "calcite-icon", "calcite-switch" ] } }, { "filePath": "./src/components/calcite-button/calcite-button.tsx", "encapsulation": "shadow", "tag": "calcite-button", "readme": "# calcite-button\n", "docs": "", "docsTags": [], "usage": { "basic": "```html\nGo!\n```\n", "focusing": "You can programmatically focus a `calcite-button` with the `setFocus()` method:\n\n```html\n
Focus!
\n```\n", "internals": "#### Passing attributes to internal components\n\nAny additional attributes set on `` are passed to the internal `` or `\n \n \n \n \n\n```\n" }, "props": [], "methods": [ { "name": "back", "returns": { "type": "Promise", "docs": "" }, "signature": "back() => Promise", "parameters": [], "docs": "Removes the currently active `calcite-panel`.", "docsTags": [] } ], "events": [], "listeners": [ { "event": "calcitePanelBackClick", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding `calcite-panel`s to the flow." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-graph/calcite-graph.tsx", "encapsulation": "shadow", "tag": "calcite-graph", "readme": "# calcite-graph\n\nThe graph component is used to show small, lightweight graphs in places where a full interactive chart is not needed. This includes sparklines, histograms, and small trend plots.\n", "docs": "The graph component is used to show small, lightweight graphs in places where a full interactive chart is not needed. This includes sparklines, histograms, and small trend plots.", "docsTags": [], "usage": {}, "props": [ { "name": "data", "type": "Point[]", "mutable": false, "reflectToAttr": false, "docs": "Array of tuples describing a single data point ([x, y])\nThese data points should be sorted by x-axis value", "docsTags": [], "default": "[]", "values": [ { "type": "Point[]" } ], "optional": false, "required": false }, { "name": "height", "type": "number", "mutable": false, "attr": "height", "reflectToAttr": false, "docs": "Width of graph in pixels", "docsTags": [], "default": "100", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "highlightMax", "type": "number", "mutable": false, "attr": "highlight-max", "reflectToAttr": false, "docs": "End of highlight color if highlighting range", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "highlightMin", "type": "number", "mutable": false, "attr": "highlight-min", "reflectToAttr": false, "docs": "Start of highlight color if highlighting range", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "width", "type": "number", "mutable": false, "attr": "width", "reflectToAttr": false, "docs": "Width of graph in pixels", "docsTags": [], "default": "300", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-slider" ], "dependencies": [], "dependencyGraph": { "calcite-slider": [ "calcite-graph" ] } }, { "filePath": "./src/components/calcite-handle/calcite-handle.tsx", "encapsulation": "shadow", "tag": "calcite-handle", "readme": "# calcite-handle\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "textTitle", "type": "string", "mutable": false, "attr": "text-title", "reflectToAttr": true, "docs": "Value for the button title attribute", "docsTags": [], "default": "\"handle\"", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteHandleNudge", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the the handle is activated and the up or down arrow key is pressed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-block" ], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-handle": [ "calcite-icon" ], "calcite-block": [ "calcite-handle" ] } }, { "filePath": "./src/components/calcite-icon/calcite-icon.tsx", "encapsulation": "shadow", "tag": "calcite-icon", "readme": "# calcite-icon\n", "docs": "", "docsTags": [], "usage": { "custom-icon-color": "To use a custom color for the icon fill, you can add a class to the `calcite-icon` component with the desired color.\n\n```html\n\n```\n\n```css\n.my-icon-color-class {\n color: #007ac2;\n}\n```\n" }, "props": [ { "name": "flipRtl", "type": "boolean", "mutable": false, "attr": "flip-rtl", "reflectToAttr": true, "docs": "When true, the icon will be flipped when the element direction is 'rtl'.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "icon", "type": "string", "mutable": false, "attr": "icon", "reflectToAttr": true, "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": [], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "Icon scale.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "textLabel", "type": "string", "mutable": false, "attr": "text-label", "reflectToAttr": false, "docs": "The icon label.\n\nIt is recommended to set this value if your icon is semantic.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-accordion-item", "calcite-action", "calcite-alert", "calcite-avatar", "calcite-block", "calcite-block-section", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker-month-header", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-input", "calcite-input-date-picker", "calcite-input-message", "calcite-link", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-pick-list-item", "calcite-popover", "calcite-radio-group-item", "calcite-rating", "calcite-select", "calcite-stepper-item", "calcite-tab-title", "calcite-tile", "calcite-time-picker", "calcite-tree-item", "calcite-value-list-item" ], "dependencies": [], "dependencyGraph": { "calcite-accordion-item": [ "calcite-icon" ], "calcite-action": [ "calcite-icon" ], "calcite-alert": [ "calcite-icon" ], "calcite-avatar": [ "calcite-icon" ], "calcite-block": [ "calcite-icon" ], "calcite-block-section": [ "calcite-icon" ], "calcite-button": [ "calcite-icon" ], "calcite-chip": [ "calcite-icon" ], "calcite-combobox": [ "calcite-icon" ], "calcite-combobox-item": [ "calcite-icon" ], "calcite-date-picker-month-header": [ "calcite-icon" ], "calcite-dropdown-item": [ "calcite-icon" ], "calcite-filter": [ "calcite-icon" ], "calcite-handle": [ "calcite-icon" ], "calcite-input": [ "calcite-icon" ], "calcite-input-date-picker": [ "calcite-icon" ], "calcite-input-message": [ "calcite-icon" ], "calcite-link": [ "calcite-icon" ], "calcite-modal": [ "calcite-icon" ], "calcite-notice": [ "calcite-icon" ], "calcite-pagination": [ "calcite-icon" ], "calcite-pick-list-item": [ "calcite-icon" ], "calcite-popover": [ "calcite-icon" ], "calcite-radio-group-item": [ "calcite-icon" ], "calcite-rating": [ "calcite-icon" ], "calcite-select": [ "calcite-icon" ], "calcite-stepper-item": [ "calcite-icon" ], "calcite-tab-title": [ "calcite-icon" ], "calcite-tile": [ "calcite-icon" ], "calcite-time-picker": [ "calcite-icon" ], "calcite-tree-item": [ "calcite-icon" ], "calcite-value-list-item": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-inline-editable/calcite-inline-editable.tsx", "encapsulation": "scoped", "tag": "calcite-inline-editable", "readme": "# calcite-inline-editable\n", "docs": "", "docsTags": [ { "text": "- slot for rendering a ``", "name": "slot" } ], "usage": { "basic": "There is no need to set a theme or scale on the `` component, as it inherits these values from the wrapped ``, or the closest parent component where these props are set.\n\n```html\n\n \n\n```\n", "with-label": "```html\n\n My great label\n \n \n \n\n```\n", "with-save-and-cancel-controls": "```html\n\n \n\n```\n" }, "props": [ { "name": "afterConfirm", "type": "() => Promise", "mutable": false, "reflectToAttr": false, "docs": "when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically.", "docsTags": [], "values": [ { "type": "() => Promise" } ], "optional": true, "required": false }, { "name": "controls", "type": "boolean", "mutable": false, "attr": "controls", "reflectToAttr": true, "docs": "specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "specify whether editing can be enabled", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "editingEnabled", "type": "boolean", "mutable": true, "attr": "editing-enabled", "reflectToAttr": true, "docs": "specify whether the wrapped input element is editable, defaults to false", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "intlCancelEditing", "type": "string", "mutable": false, "attr": "intl-cancel-editing", "reflectToAttr": true, "docs": "specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`", "docsTags": [], "default": "TEXT.intlCancelEditing", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlConfirmChanges", "type": "string", "mutable": false, "attr": "intl-confirm-changes", "reflectToAttr": true, "docs": "specify text to be user for the confirm changes button's aria-label, defaults to `Save`", "docsTags": [], "default": "TEXT.intlConfirmChanges", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlEnableEditing", "type": "string", "mutable": false, "attr": "intl-enable-editing", "reflectToAttr": true, "docs": "specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`", "docsTags": [], "default": "TEXT.intlEnablingEditing", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "loading", "type": "boolean", "mutable": true, "attr": "loading", "reflectToAttr": true, "docs": "specify whether the confirm button should display a loading state, defaults to false", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale", "docsTags": [], "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "calciteInputBlur", "capture": false, "passive": false }, { "event": "click", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "slot for rendering a ``" } ], "parts": [], "dependents": [], "dependencies": [ "calcite-button" ], "dependencyGraph": { "calcite-inline-editable": [ "calcite-button" ], "calcite-button": [ "calcite-loader", "calcite-icon" ] } }, { "filePath": "./src/components/calcite-input/calcite-input.tsx", "encapsulation": "scoped", "tag": "calcite-input", "readme": "# calcite-input\n", "docs": "", "docsTags": [ { "text": "action - A slot for positioning a button next to an input", "name": "slot" } ], "usage": { "basic": "```html\n\n```\n", "clearable": "```html\n\n Clearable item\n \n\n```\n", "native-events": "You can also listen for native events emitted from ``.\n\nYou must use `focusin`/`focusout` instead of `focus`/`blur` because these events bubble up from the rendered child element rendered inside of ``\n\nAll events return an element and a value:\n\n```js\ninput.addEventListener(\"change\", logChange);\ninput.addEventListener(\"focusin\", logFocus);\ninput.addEventListener(\"focusout\", logBlur);\n\nfunction logChange() {\n console.log(event.target.element);\n console.log(event.target.value);\n}\n```\n", "with-label": "Using a wrapping `calcite-label` component lets consumers set the status attribute once and have it propagate to child `calcite-input` and `calcite-input-message` elements\n\n```html\n\n Invalid input\n \n Something doesn't look right \n\n```\n", "with-message": "```html\n\n My great label\n \n \n Here's something you should know about this input\n \n\n```\n" }, "props": [ { "name": "alignment", "type": "\"end\" | \"start\"", "mutable": false, "attr": "alignment", "reflectToAttr": true, "docs": "specify the alignment of the value of the input", "docsTags": [], "default": "\"start\"", "values": [ { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": false, "required": false }, { "name": "autofocus", "type": "boolean", "mutable": false, "attr": "autofocus", "reflectToAttr": false, "docs": "should the input autofocus", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "clearable", "type": "boolean", "mutable": false, "attr": "clearable", "reflectToAttr": true, "docs": "optionally display a clear button that displays when field has a value\nshows by default for search, time, date\nwill not display for type=\"textarea\"", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "is the input disabled", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "groupSeparator", "type": "boolean", "mutable": false, "attr": "group-separator", "reflectToAttr": false, "docs": "for number values, displays the locale's group separator", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "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 for certain\ninput types (tel, password, email, date, time, search). You can also pass a\ncalcite-ui-icon name to this prop to display a requested icon for any input type", "docsTags": [], "values": [ { "type": "boolean" }, { "type": "string" } ], "optional": false, "required": false }, { "name": "iconFlipRtl", "type": "boolean", "mutable": false, "attr": "icon-flip-rtl", "reflectToAttr": true, "docs": "flip the icon in rtl", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "loading", "type": "boolean", "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "specify if the input is in loading state", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "locale", "type": "string", "mutable": false, "attr": "locale", "reflectToAttr": false, "docs": "BCP 47 language tag for desired language and country format", "docsTags": [], "default": "document.documentElement.lang || \"en\"", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "max", "type": "number", "mutable": false, "attr": "max", "reflectToAttr": true, "docs": "input max", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "maxLength", "type": "number", "mutable": false, "attr": "max-length", "reflectToAttr": true, "docs": "Maximum length of the input value", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "maxlength", "type": "number", "mutable": false, "attr": "maxlength", "reflectToAttr": true, "docs": "Maximum length of text input.", "docsTags": [ { "text": "use maxLength instead", "name": "deprecated" } ], "deprecation": "use maxLength instead", "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "min", "type": "number", "mutable": false, "attr": "min", "reflectToAttr": true, "docs": "input min", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "minLength", "type": "number", "mutable": false, "attr": "min-length", "reflectToAttr": true, "docs": "Minimum length of the text input", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "The name of the input", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "numberButtonType", "type": "\"horizontal\" | \"none\" | \"vertical\"", "mutable": false, "attr": "number-button-type", "reflectToAttr": true, "docs": "specify the placement of the number buttons", "docsTags": [], "default": "\"vertical\"", "values": [ { "value": "horizontal", "type": "string" }, { "value": "none", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": true, "required": false }, { "name": "placeholder", "type": "string", "mutable": false, "attr": "placeholder", "reflectToAttr": false, "docs": "explicitly whitelist placeholder attribute", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "prefixText", "type": "string", "mutable": false, "attr": "prefix-text", "reflectToAttr": false, "docs": "optionally add prefix", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": false, "docs": "is the input required", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the input, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "status", "type": "\"idle\" | \"invalid\" | \"valid\"", "mutable": true, "attr": "status", "reflectToAttr": true, "docs": "specify the status of the input field, determines message and icons", "docsTags": [], "default": "\"idle\"", "values": [ { "value": "idle", "type": "string" }, { "value": "invalid", "type": "string" }, { "value": "valid", "type": "string" } ], "optional": false, "required": false }, { "name": "step", "type": "\"any\" | number", "mutable": true, "attr": "step", "reflectToAttr": true, "docs": "input step", "docsTags": [], "values": [ { "value": "any", "type": "string" }, { "type": "number" } ], "optional": true, "required": false }, { "name": "suffixText", "type": "string", "mutable": false, "attr": "suffix-text", "reflectToAttr": false, "docs": "optionally add suffix *", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "type", "type": "\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\" | \"week\"", "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "specify the input type\n\nNote that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`", "docsTags": [], "default": "\"text\"", "values": [ { "value": "color", "type": "string" }, { "value": "date", "type": "string" }, { "value": "datetime-local", "type": "string" }, { "value": "email", "type": "string" }, { "value": "file", "type": "string" }, { "value": "image", "type": "string" }, { "value": "month", "type": "string" }, { "value": "number", "type": "string" }, { "value": "password", "type": "string" }, { "value": "search", "type": "string" }, { "value": "tel", "type": "string" }, { "value": "text", "type": "string" }, { "value": "textarea", "type": "string" }, { "value": "time", "type": "string" }, { "value": "url", "type": "string" }, { "value": "week", "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "string", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "input value", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "focus the rendered child element", "docsTags": [] } ], "events": [ { "event": "calciteInputInput", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "This event fires each time a new value is typed.", "docsTags": [] } ], "listeners": [ { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "action", "docs": "A slot for positioning a button next to an input" } ], "parts": [], "dependents": [ "calcite-color-picker", "calcite-color-picker-hex-input", "calcite-input-date-picker", "calcite-input-time-picker" ], "dependencies": [ "calcite-progress", "calcite-icon" ], "dependencyGraph": { "calcite-input": [ "calcite-progress", "calcite-icon" ], "calcite-color-picker": [ "calcite-input" ], "calcite-color-picker-hex-input": [ "calcite-input" ], "calcite-input-date-picker": [ "calcite-input" ], "calcite-input-time-picker": [ "calcite-input" ] } }, { "filePath": "./src/components/calcite-input-date-picker/calcite-input-date-picker.tsx", "encapsulation": "shadow", "tag": "calcite-input-date-picker", "readme": "# calcite-input-date-picker\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "Expand or collapse when calendar does not have input", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "end", "type": "string", "mutable": false, "attr": "end", "reflectToAttr": false, "docs": "Selected end date", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "endAsDate", "type": "Date", "mutable": true, "reflectToAttr": false, "docs": "Selected end date as full date object", "docsTags": [], "values": [ { "type": "Date" } ], "optional": true, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "required": false }, { "name": "intlNextMonth", "type": "string", "mutable": false, "attr": "intl-next-month", "reflectToAttr": false, "docs": "Localized string for \"next month\" (used for aria label)", "docsTags": [], "default": "TEXT.nextMonth", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlPrevMonth", "type": "string", "mutable": false, "attr": "intl-prev-month", "reflectToAttr": false, "docs": "Localized string for \"previous month\" (used for aria label)", "docsTags": [], "default": "TEXT.prevMonth", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "mutable": false, "attr": "layout", "reflectToAttr": true, "docs": "Layout", "docsTags": [], "default": "\"horizontal\"", "values": [ { "value": "horizontal", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": false, "required": false }, { "name": "locale", "type": "string", "mutable": false, "attr": "locale", "reflectToAttr": false, "docs": "BCP 47 language tag for desired language and country format", "docsTags": [], "default": "document.documentElement.lang || \"en\"", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "max", "type": "string", "mutable": false, "attr": "max", "reflectToAttr": false, "docs": "Latest allowed date (\"yyyy-mm-dd\")", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "maxAsDate", "type": "Date", "mutable": true, "reflectToAttr": false, "docs": "Latest allowed date as full date object", "docsTags": [], "values": [ { "type": "Date" } ], "optional": true, "required": false }, { "name": "min", "type": "string", "mutable": false, "attr": "min", "reflectToAttr": false, "docs": "Earliest allowed date (\"yyyy-mm-dd\")", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "minAsDate", "type": "Date", "mutable": true, "reflectToAttr": false, "docs": "Earliest allowed date as full date object", "docsTags": [], "values": [ { "type": "Date" } ], "optional": true, "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": "proximitySelectionDisabled", "type": "boolean", "mutable": false, "attr": "proximity-selection-disabled", "reflectToAttr": false, "docs": "Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "range", "type": "boolean", "mutable": false, "attr": "range", "reflectToAttr": true, "docs": "Range mode activation", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the date picker", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "start", "type": "string", "mutable": false, "attr": "start", "reflectToAttr": false, "docs": "Selected start date", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "startAsDate", "type": "Date", "mutable": true, "reflectToAttr": false, "docs": "Selected start date as full date object", "docsTags": [], "values": [ { "type": "Date" } ], "optional": true, "required": false }, { "name": "value", "type": "string", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "Selected date", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "valueAsDate", "type": "Date", "mutable": true, "reflectToAttr": false, "docs": "Selected date as full date object", "docsTags": [], "values": [ { "type": "Date" } ], "optional": true, "required": false } ], "methods": [ { "name": "reposition", "returns": { "type": "Promise", "docs": "" }, "signature": "reposition() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteDatePickerChange", "detail": "Date", "bubbles": true, "cancelable": true, "composed": true, "docs": "Trigger calcite date change when a user changes the date.", "docsTags": [] }, { "event": "calciteDatePickerRangeChange", "detail": "DateRangeChange", "bubbles": true, "cancelable": true, "composed": true, "docs": "Trigger calcite date change when a user changes the date range.", "docsTags": [] } ], "listeners": [ { "event": "focusin", "target": "window", "capture": false, "passive": false }, { "event": "calciteDaySelect", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-input", "calcite-date-picker", "calcite-icon" ], "dependencyGraph": { "calcite-input-date-picker": [ "calcite-input", "calcite-date-picker", "calcite-icon" ], "calcite-input": [ "calcite-progress", "calcite-icon" ], "calcite-date-picker": [ "calcite-date-picker-month-header", "calcite-date-picker-month" ], "calcite-date-picker-month-header": [ "calcite-icon" ], "calcite-date-picker-month": [ "calcite-date-picker-day" ] } }, { "filePath": "./src/components/calcite-input-message/calcite-input-message.tsx", "encapsulation": "shadow", "tag": "calcite-input-message", "readme": "# calcite-input-message\n\nDisplays a contextual message to a user. Allows the passing of content, links, etc.\n", "docs": "Displays a contextual message to a user. Allows the passing of content, links, etc.", "docsTags": [], "usage": { "basic": "```html\n\n My great label\n \n That's not going to work out.\n Learn more\n\n```\n" }, "props": [ { "name": "active", "type": "boolean", "mutable": false, "attr": "active", "reflectToAttr": true, "docs": "", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "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 icon based on status. You can\nalso pass a calcite-ui-icon name to this prop to display a custom icon", "docsTags": [], "values": [ { "type": "boolean" }, { "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the input, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "status", "type": "\"idle\" | \"invalid\" | \"valid\"", "mutable": true, "attr": "status", "reflectToAttr": true, "docs": "specify the status of the input field, determines message and icons", "docsTags": [], "default": "\"idle\"", "values": [ { "value": "idle", "type": "string" }, { "value": "invalid", "type": "string" }, { "value": "valid", "type": "string" } ], "optional": false, "required": false }, { "name": "type", "type": "\"default\" | \"floating\"", "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input)", "docsTags": [], "default": "\"default\"", "values": [ { "value": "default", "type": "string" }, { "value": "floating", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-input-message": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-input-time-picker/calcite-input-time-picker.tsx", "encapsulation": "shadow", "tag": "calcite-input-time-picker", "readme": "# calcite-input-time-picker\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "The active state of the time input", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "The disabled state of the time input", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "hourDisplayFormat", "type": "\"12\" | \"24\"", "mutable": false, "attr": "hour-display-format", "reflectToAttr": false, "docs": "Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)", "docsTags": [], "default": "\"12\"", "values": [ { "value": "12", "type": "string" }, { "value": "24", "type": "string" } ], "optional": false, "required": false }, { "name": "intlHour", "type": "string", "mutable": false, "attr": "intl-hour", "reflectToAttr": false, "docs": "aria-label for the hour input", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlHourDown", "type": "string", "mutable": false, "attr": "intl-hour-down", "reflectToAttr": false, "docs": "aria-label for the hour down button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlHourUp", "type": "string", "mutable": false, "attr": "intl-hour-up", "reflectToAttr": false, "docs": "aria-label for the hour up button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlMeridiem", "type": "string", "mutable": false, "attr": "intl-meridiem", "reflectToAttr": false, "docs": "aria-label for the meridiem (am/pm) input", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlMeridiemDown", "type": "string", "mutable": false, "attr": "intl-meridiem-down", "reflectToAttr": false, "docs": "aria-label for the meridiem (am/pm) down button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlMeridiemUp", "type": "string", "mutable": false, "attr": "intl-meridiem-up", "reflectToAttr": false, "docs": "aria-label for the meridiem (am/pm) up button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlMinute", "type": "string", "mutable": false, "attr": "intl-minute", "reflectToAttr": false, "docs": "aria-label for the minute input", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlMinuteDown", "type": "string", "mutable": false, "attr": "intl-minute-down", "reflectToAttr": false, "docs": "aria-label for the minute down button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlMinuteUp", "type": "string", "mutable": false, "attr": "intl-minute-up", "reflectToAttr": false, "docs": "aria-label for the minute up button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlSecond", "type": "string", "mutable": false, "attr": "intl-second", "reflectToAttr": false, "docs": "aria-label for the second input", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlSecondDown", "type": "string", "mutable": false, "attr": "intl-second-down", "reflectToAttr": false, "docs": "aria-label for the second down button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlSecondUp", "type": "string", "mutable": false, "attr": "intl-second-up", "reflectToAttr": false, "docs": "aria-label for the second up button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The name of the time input", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale (size) of the time input", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "step", "type": "number", "mutable": false, "attr": "step", "reflectToAttr": false, "docs": "number that specifies the granularity that the value must adhere to", "docsTags": [], "default": "60", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "value", "type": "string", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "The selected time", "docsTags": [], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteInputTimePickerChange", "detail": "string", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fires when the time value is changed as a result of user input.", "docsTags": [] } ], "listeners": [ { "event": "click", "capture": false, "passive": false }, { "event": "keyup", "capture": false, "passive": false }, { "event": "calciteTimePickerBlur", "capture": false, "passive": false }, { "event": "calciteTimePickerChange", "capture": false, "passive": false }, { "event": "calciteTimePickerFocus", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-input", "calcite-popover", "calcite-time-picker" ], "dependencyGraph": { "calcite-input-time-picker": [ "calcite-input", "calcite-popover", "calcite-time-picker" ], "calcite-input": [ "calcite-progress", "calcite-icon" ], "calcite-popover": [ "calcite-action", "calcite-icon" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-time-picker": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-label/calcite-label.tsx", "encapsulation": "scoped", "tag": "calcite-label", "readme": "# calcite-label\n\nRenders a `
\n

Non interactive

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n", "basic": "```html\n\n \n \n \n
Start content
\n
End content
\n \n \n \n \n \n\n```\n" }, "props": [], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding `calcite-list-item` elements." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-list-item/calcite-list-item.tsx", "encapsulation": "shadow", "tag": "calcite-list-item", "readme": "# calcite-list-item\n\nA general purpose list that enables users to construct list items that conform to Calcite styling.\n\nIf you are looking for a list that handles more advanced usage like selection, see the documentation for 'calcite-pick-list' or 'calcite-value-list'.\n", "docs": "A general purpose list that enables users to construct list items that conform to Calcite styling.\n\nIf you are looking for a list that handles more advanced usage like selection, see the documentation for 'calcite-pick-list' or 'calcite-value-list'.", "docsTags": [ { "text": "actions-start - A slot for adding actionable `calcite-action` elements before the content of the list item.", "name": "slot" }, { "text": "content-start - A slot for adding non-actionable elements before the label and description of the list item.", "name": "slot" }, { "text": "content-end - A slot for adding non-actionable elements after the label and description of the list item.", "name": "slot" }, { "text": "actions-end - A slot for adding actionable `calcite-action` elements after the content of the list item.", "name": "slot" } ], "usage": {}, "props": [ { "name": "description", "type": "string", "mutable": false, "attr": "description", "reflectToAttr": false, "docs": "An optional description for this item. This will appear below the label text.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When true, disabled prevents interaction.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "", "docsTags": [ { "text": "The label of the list item.", "name": "todo" } ], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "nonInteractive", "type": "boolean", "mutable": false, "attr": "non-interactive", "reflectToAttr": true, "docs": "When true, prevents the content of the list item from user interaction.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [ { "name": "actions-end", "docs": "A slot for adding actionable `calcite-action` elements after the content of the list item." }, { "name": "actions-start", "docs": "A slot for adding actionable `calcite-action` elements before the content of the list item." }, { "name": "content-end", "docs": "A slot for adding non-actionable elements after the label and description of the list item." }, { "name": "content-start", "docs": "A slot for adding non-actionable elements before the label and description of the list item." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-loader/calcite-loader.tsx", "encapsulation": "shadow", "tag": "calcite-loader", "readme": "# calcite-loader\n\nThe `calcite-loader` component can act as a determinate or indeterminate loading indicator.\n", "docs": "The `calcite-loader` component can act as a determinate or indeterminate loading indicator.", "docsTags": [], "usage": { "basic": "You can use the `active` attribute to toggle visibility:\n\n```html\n\n```\n", "compact": "For instances when you don't have room for the full loader, you can use the smaller `inline` version of the loader. The inline version is meant to sit to the left of text:\n\n```html\n

Inline loader

\n```\n", "determinate": "If you can calculate your progress, it's best to use the determinate version of the loader. Update the `value` of the element when progress is made:\n\n```html\n\n```\n\nThe above will display a progress bar along the perimeter of the loader showing 32% complete.\n" }, "props": [ { "name": "active", "type": "boolean", "mutable": false, "attr": "active", "reflectToAttr": true, "docs": "Show the loader", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "inline", "type": "boolean", "mutable": false, "attr": "inline", "reflectToAttr": true, "docs": "Inline loaders are smaller and will appear to the left of the text", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "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": "noPadding", "type": "boolean", "mutable": false, "attr": "no-padding", "reflectToAttr": false, "docs": "Turn off spacing around the loader", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "Speficy the scale of the loader. Defaults to \"m\"", "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 which should appear under the loading indicator (optional)", "docsTags": [], "default": "\"\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "type", "type": "\"determinate\" | \"indeterminate\"", "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "Use indeterminate if finding actual progress value is impossible", "docsTags": [], "values": [ { "value": "determinate", "type": "string" }, { "value": "indeterminate", "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "number", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "Percent complete of 100, only valid for determinate indicators", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-action", "calcite-block", "calcite-button", "calcite-card", "calcite-scrim" ], "dependencies": [], "dependencyGraph": { "calcite-action": [ "calcite-loader" ], "calcite-block": [ "calcite-loader" ], "calcite-button": [ "calcite-loader" ], "calcite-card": [ "calcite-loader" ], "calcite-scrim": [ "calcite-loader" ] } }, { "filePath": "./src/components/calcite-modal/calcite-modal.tsx", "encapsulation": "shadow", "tag": "calcite-modal", "readme": "# calcite-modal\n\n`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.\n", "docs": "`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.", "docsTags": [], "usage": { "basic": "Customize the modal by passing your content into multiple named slots: `header` (title-area of the modal), `content` (main body of the modal), and up to three modal actions: primary, secondary, and back.\n\n```html\n\n

Title of the modal

\n
The actual content of the modal
\n \n Back\n \n Cancel \n Save \n\n```\n\nNotice above we've used the `aria-labelledby` attribute, relating it to the title of the modal. In order to ensure good accessibility, it's recommended that you use either an `aria-label` or `aria-labelledby` attribute so screen readers can infer what the subject matter of your modal is.\n", "open": "To open a modal, add the `active` prop:\n\n```html\n\n```\n\nOnce the opening animation is complete, the `calciteModalOpen` event will be fired.\n\nTo close the modal, simply remove the attribute. This will run your before close method (if provided, see below) and fire the `calciteModalClose` event after the animation and teardown is complete.\n", "reacting-before-close": "If you'd like to perform some actions prior to closing (ie. warning users they will lose their changes) you can pass a function to the `beforeClose` property. This method will be called prior to close and should return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise):\n\n```js\nfunction beforeClose() {\n return new Promise((resolve) => {\n // do something async\n resolve(); // this will trigger the close animation\n });\n}\n\nconst modal = document.getElementById(\"my-modal\");\nmodal.beforeClose = beforeClose;\n```\n" }, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "Add the active attribute to open the modal", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "backgroundColor", "type": "\"grey\" | \"white\"", "mutable": false, "attr": "background-color", "reflectToAttr": true, "docs": "Background color of modal content", "docsTags": [], "default": "\"white\"", "values": [ { "value": "grey", "type": "string" }, { "value": "white", "type": "string" } ], "optional": false, "required": false }, { "name": "beforeClose", "type": "(el: HTMLElement) => Promise", "mutable": false, "reflectToAttr": false, "docs": "Optionally pass a function to run before close", "docsTags": [], "default": "() => Promise.resolve()", "values": [ { "type": "(el: HTMLElement) => Promise" } ], "optional": false, "required": false }, { "name": "color", "type": "\"blue\" | \"red\"", "mutable": false, "attr": "color", "reflectToAttr": true, "docs": "Adds a color bar at the top for visual impact,\nUse color to add importance to destructive/workflow dialogs.", "docsTags": [], "values": [ { "value": "blue", "type": "string" }, { "value": "red", "type": "string" } ], "optional": true, "required": false }, { "name": "disableCloseButton", "type": "boolean", "mutable": false, "attr": "disable-close-button", "reflectToAttr": false, "docs": "Disables the display a close button within the Modal", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "disableEscape", "type": "boolean", "mutable": false, "attr": "disable-escape", "reflectToAttr": false, "docs": "Flag to disable the default close on escape behavior", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "disableOutsideClose", "type": "boolean", "mutable": false, "attr": "disable-outside-close", "reflectToAttr": false, "docs": "Disables the closing of the Modal when clicked outside.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "docked", "type": "boolean", "mutable": false, "attr": "docked", "reflectToAttr": true, "docs": "Prevent the modal from taking up the entire screen on mobile", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "firstFocus", "type": "HTMLElement", "mutable": false, "reflectToAttr": false, "docs": "Specify an element to focus when the modal is first opened", "docsTags": [], "values": [ { "type": "HTMLElement" } ], "optional": true, "required": false }, { "name": "fullscreen", "type": "boolean", "mutable": false, "attr": "fullscreen", "reflectToAttr": true, "docs": "Set the modal to always be fullscreen (overrides width)", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "intlClose", "type": "string", "mutable": false, "attr": "intl-close", "reflectToAttr": false, "docs": "Aria label for the close button", "docsTags": [], "default": "\"Close\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "noPadding", "type": "boolean", "mutable": false, "attr": "no-padding", "reflectToAttr": false, "docs": "Turn off spacing around the content area slot", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of modal, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "width", "type": "\"l\" | \"m\" | \"s\" | number", "mutable": false, "attr": "width", "reflectToAttr": true, "docs": "Set the width of the modal. Can use stock sizes or pass a number (in pixels)", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" }, { "type": "number" } ], "optional": false, "required": false } ], "methods": [ { "name": "focusElement", "returns": { "type": "Promise", "docs": "" }, "signature": "focusElement(el?: HTMLElement) => Promise", "parameters": [], "docs": "Focus first interactive element", "docsTags": [ { "name": "deprecated", "text": "use `setFocus` instead." } ], "deprecation": "use `setFocus` instead." }, { "name": "scrollContent", "returns": { "type": "Promise", "docs": "" }, "signature": "scrollContent(top?: number, left?: number) => Promise", "parameters": [], "docs": "Set the scroll top of the modal content", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus(focusId?: \"close-button\") => Promise", "parameters": [], "docs": "Sets focus on the component.\n\nBy default, will try to focus on any focusable content. If there is none, it will focus on the close button.\nIf you want to focus on the close button, you can use the `close-button` focus ID.", "docsTags": [] } ], "events": [ { "event": "calciteModalClose", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fired when the modal begins the close animation", "docsTags": [] }, { "event": "calciteModalOpen", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fired when the modal begins the open animation", "docsTags": [] } ], "listeners": [ { "event": "keyup", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-scrim", "calcite-icon" ], "dependencyGraph": { "calcite-modal": [ "calcite-scrim", "calcite-icon" ], "calcite-scrim": [ "calcite-loader" ] } }, { "filePath": "./src/components/calcite-notice/calcite-notice.tsx", "encapsulation": "shadow", "tag": "calcite-notice", "readme": "# calcite-notice\n", "docs": "", "docsTags": [ { "text": "title - Title of the notice (optional)", "name": "slot" }, { "text": "message - Main text of the notice", "name": "slot" }, { "text": "link - Optional action to take from the notice (undo, try again, link to page, etc.)", "name": "slot" }, { "text": "actions-end - Allows adding a `calcite-action` at the end of the notice. It is recommended to use 2 or less actions.", "name": "slot" } ], "usage": { "basic": "You can programmatically focus the close button of a `dismissible` `calcite-notice` with the `setFocus()` method:\n\n```html\n
Focus!
\n```\n" }, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "Is the notice currently active or not", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "color", "type": "\"blue\" | \"green\" | \"red\" | \"yellow\"", "mutable": false, "attr": "color", "reflectToAttr": true, "docs": "Color for the notice (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": "dismissible", "type": "boolean", "mutable": false, "attr": "dismissible", "reflectToAttr": true, "docs": "Optionally show a button the user can click to dismiss the notice", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "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 for the close button.", "docsTags": [], "default": "TEXT.close", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the notice, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "width", "type": "\"auto\" | \"full\" | \"half\"", "mutable": false, "attr": "width", "reflectToAttr": true, "docs": "specify the width of the notice, defaults to auto", "docsTags": [], "default": "\"auto\"", "values": [ { "value": "auto", "type": "string" }, { "value": "full", "type": "string" }, { "value": "half", "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "focus the close button, if present and requested", "docsTags": [] } ], "events": [ { "event": "calciteNoticeClose", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fired when an notice is closed", "docsTags": [] }, { "event": "calciteNoticeOpen", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fired when an Notice is opened", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "actions-end", "docs": "Allows adding a `calcite-action` at the end of the notice. It is recommended to use 2 or less actions." }, { "name": "link", "docs": "Optional action to take from the notice (undo, try again, link to page, etc.)" }, { "name": "message", "docs": "Main text of the notice" }, { "name": "title", "docs": "Title of the notice (optional)" } ], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-notice": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-option/calcite-option.tsx", "encapsulation": "shadow", "tag": "calcite-option", "readme": "# calcite-option\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When true, it prevents the option from being selected.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "label", "type": "string", "mutable": true, "attr": "label", "reflectToAttr": false, "docs": "The option label.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "selected", "type": "boolean", "mutable": false, "attr": "selected", "reflectToAttr": true, "docs": "When true, this option is selected. Otherwise, false.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "The value associated with this option.", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-option-group/calcite-option-group.tsx", "encapsulation": "shadow", "tag": "calcite-option-group", "readme": "# calcite-option-group\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When true, it prevents selection from any of its associated options.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "The group label. This property is required.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-pagination/calcite-pagination.tsx", "encapsulation": "shadow", "tag": "calcite-pagination", "readme": "# calcite-pagination\n\n`calcite-pagination` allows users to select a page from a paginated API.\n", "docs": "`calcite-pagination` allows users to select a page from a paginated API.", "docsTags": [], "usage": { "basic": "The component is meant to interface with responses from ArcGIS REST services, so the props share names with [response properties](https://developers.arcgis.com/rest/users-groups-and-items/search.htm) from various search endpoints.\n\nFor example, after querying the search API, you'll get back a response similar to the following:\n\n```JSON\n{\n \"total\": 2021,\n \"start\": 1,\n \"num\": 100,\n \"results\": []\n}\n```\n\nThese can be passed straight to the `calcite-pagination` component:\n\n```html\n\n```\n" }, "props": [ { "name": "num", "type": "number", "mutable": false, "attr": "num", "reflectToAttr": false, "docs": "number of items per page", "docsTags": [], "default": "20", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale of the pagination", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "start", "type": "number", "mutable": true, "attr": "start", "reflectToAttr": false, "docs": "index of item that should begin the page", "docsTags": [], "default": "1", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "textLabelNext", "type": "string", "mutable": false, "attr": "text-label-next", "reflectToAttr": false, "docs": "title of the next button", "docsTags": [], "default": "TEXT.nextLabel", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "textLabelPrevious", "type": "string", "mutable": false, "attr": "text-label-previous", "reflectToAttr": false, "docs": "title of the previous button", "docsTags": [], "default": "TEXT.previousLabel", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "total", "type": "number", "mutable": false, "attr": "total", "reflectToAttr": false, "docs": "total number of items", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [ { "name": "nextPage", "returns": { "type": "Promise", "docs": "" }, "signature": "nextPage() => Promise", "parameters": [], "docs": "Go to the next page of results", "docsTags": [] }, { "name": "previousPage", "returns": { "type": "Promise", "docs": "" }, "signature": "previousPage() => Promise", "parameters": [], "docs": "Go to the previous page of results", "docsTags": [] } ], "events": [ { "event": "calcitePaginationChange", "detail": "CalcitePaginationDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted whenever the selected page changes.", "docsTags": [] }, { "event": "calcitePaginationUpdate", "detail": "CalcitePaginationDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted whenever the selected page changes.", "docsTags": [ { "text": "use calcitePaginationChange instead", "name": "deprecated" } ], "deprecation": "use calcitePaginationChange instead" } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-pagination": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-panel/calcite-panel.tsx", "encapsulation": "shadow", "tag": "calcite-panel", "readme": "# calcite-panel\n\nThe `calcite-panel` component is a container for a header, content and optional footer. The header will have centered content as well as optional leading and trailing content. The panel can also be setup to be dismissible which allows it to be closed by a user.\n", "docs": "The `calcite-panel` component is a container for a header, content and optional footer. The header will have centered content as well as optional leading and trailing content. The panel can also be setup to be dismissible which allows it to be closed by a user.", "docsTags": [ { "text": "header-actions-start - a slot for adding actions or content to the start side of the panel header.", "name": "slot" }, { "text": "header-actions-end - a slot for adding actions or content to the end side of the panel header.", "name": "slot" }, { "text": "header-content - a slot for adding custom content to the header.", "name": "slot" }, { "text": "header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.", "name": "slot" }, { "text": "fab - a slot for adding a `calcite-fab` (floating action button) to perform an action.", "name": "slot" }, { "text": "footer-actions - a slot for adding buttons to the footer.", "name": "slot" }, { "text": "footer - a slot for adding custom content to the footer.", "name": "slot" } ], "usage": { "basic": "#### Basic\n\nRenders a basic panel with a header.\n\n```html\n\n
Header!
\n

Slotted content!

\n\n```\n\n#### With footer\n\nRenders a panel with a header and a footer.\n\n```html\n\n
Header!
\n

I have a footer.

\n
Footer!
\n\n```\n\n#### Header with actions\n\nRenders a panel with leading and trailing `calcite-action`s.\n\n```html\n\n \n
Header!
\n \n

Actions are in the top left and right.

\n\n```\n\n#### Dismissible panel\n\nRenders a panel that is dismissible with a click of the \"x\".\n\n```html\n\n
Dismissible Header
\n

Click the X and I go away!

\n\n```\n" }, "props": [ { "name": "beforeBack", "type": "() => Promise", "mutable": false, "reflectToAttr": false, "docs": "When provided, this method will be called before it is removed from the parent flow.", "docsTags": [], "values": [ { "type": "() => Promise" } ], "optional": true, "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": "dismissed", "type": "boolean", "mutable": true, "attr": "dismissed", "reflectToAttr": true, "docs": "Hides the panel.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "dismissible", "type": "boolean", "mutable": false, "attr": "dismissible", "reflectToAttr": true, "docs": "Displays a close button in the trailing side of the header.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "heading", "type": "string", "mutable": false, "attr": "heading", "reflectToAttr": false, "docs": "Heading text.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "required": false }, { "name": "heightScale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "height-scale", "reflectToAttr": true, "docs": "Specifies the maxiumum height of the panel.", "docsTags": [], "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "intlBack", "type": "string", "mutable": false, "attr": "intl-back", "reflectToAttr": false, "docs": "'Back' text string.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlClose", "type": "string", "mutable": false, "attr": "intl-close", "reflectToAttr": false, "docs": "'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlOptions", "type": "string", "mutable": false, "attr": "intl-options", "reflectToAttr": false, "docs": "'Options' text string for the actions menu.", "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": "menuOpen", "type": "boolean", "mutable": false, "attr": "menu-open", "reflectToAttr": true, "docs": "Opens the action menu.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "showBackButton", "type": "boolean", "mutable": false, "attr": "show-back-button", "reflectToAttr": true, "docs": "Shows a back button in the header.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "summary", "type": "string", "mutable": false, "attr": "summary", "reflectToAttr": false, "docs": "Summary text. A description displayed underneath the heading.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "widthScale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "width-scale", "reflectToAttr": true, "docs": "This sets width of the panel.", "docsTags": [], "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus(focusId?: \"dismiss-button\" | \"back-button\") => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calcitePanelBackClick", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the back button has been clicked.", "docsTags": [] }, { "event": "calcitePanelDismissedChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the close button has been clicked.", "docsTags": [] }, { "event": "calcitePanelScroll", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the content has been scrolled.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "fab", "docs": "a slot for adding a `calcite-fab` (floating action button) to perform an action." }, { "name": "footer", "docs": "a slot for adding custom content to the footer." }, { "name": "footer-actions", "docs": "a slot for adding buttons to the footer." }, { "name": "header-actions-end", "docs": "a slot for adding actions or content to the end side of the panel header." }, { "name": "header-actions-start", "docs": "a slot for adding actions or content to the start side of the panel header." }, { "name": "header-content", "docs": "a slot for adding custom content to the header." }, { "name": "header-menu-actions", "docs": "a slot for adding an overflow menu with actions inside a dropdown." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-action", "calcite-action-menu", "calcite-scrim" ], "dependencyGraph": { "calcite-panel": [ "calcite-action", "calcite-action-menu", "calcite-scrim" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-action-menu": [ "calcite-action", "calcite-tooltip-manager", "calcite-popover" ], "calcite-popover": [ "calcite-action", "calcite-icon" ], "calcite-scrim": [ "calcite-loader" ] } }, { "filePath": "./src/components/calcite-pick-list/calcite-pick-list.tsx", "encapsulation": "shadow", "tag": "calcite-pick-list", "readme": "# calcite-pick-list\n\n`calcite-pick-list` lives in a panel and contains `calcite-pick-list-item`s. Each item is able to be be selected via radio button or checkboxes (which have a multiselect and shift-click capability). There is also an option for a filter at the top of the list for searching.\n", "docs": "`calcite-pick-list` lives in a panel and contains `calcite-pick-list-item`s. Each item is able to be be selected via radio button or checkboxes (which have a multiselect and shift-click capability). There is also an option for a filter at the top of the list for searching.", "docsTags": [ { "text": "- A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.", "name": "slot" }, { "text": "menu-actions - A slot for adding a button + menu combo for performing actions like sorting.", "name": "slot" } ], "usage": { "basic": "Renders a basic pick list with radio buttons on the left and actions on the right side.\n\n```html\n\n \n \n \n \n \n \n \n \n \n\n```\n\n#### Multi-select & filter-enabled\n\nRenders a pick list with a sticky filter and checkboxes for multiple selection of items.\n\n```html\n\n \n \n \n \n \n \n \n \n \n\n```\n\n#### Sub groups\n\nRenders groups of pick list items that are visually separated.\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n" }, "props": [ { "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": "filterEnabled", "type": "boolean", "mutable": false, "attr": "filter-enabled", "reflectToAttr": true, "docs": "When true, an input appears at the top of the list that can be used by end users to filter items in the list.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "filterPlaceholder", "type": "string", "mutable": false, "attr": "filter-placeholder", "reflectToAttr": true, "docs": "Placeholder text for the filter input field.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "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": "multiple", "type": "boolean", "mutable": false, "attr": "multiple", "reflectToAttr": true, "docs": "Multiple works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selectionFollowsFocus", "type": "boolean", "mutable": false, "attr": "selection-follows-focus", "reflectToAttr": false, "docs": "When true and single-selection is enabled, the selection will change when navigating items via the keyboard.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [ { "name": "getSelectedItems", "returns": { "type": "Promise>", "docs": "" }, "signature": "getSelectedItems() => Promise>", "parameters": [], "docs": "", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus(focusId?: ListFocusId) => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteListChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when any of the item selections have changed.", "docsTags": [] } ], "listeners": [ { "event": "calciteListItemRemove", "capture": false, "passive": false }, { "event": "calciteListItemChange", "capture": false, "passive": false }, { "event": "calciteListItemPropsChange", "capture": false, "passive": false }, { "event": "calciteListItemValueChange", "capture": false, "passive": false }, { "event": "focusout", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list." }, { "name": "menu-actions", "docs": "A slot for adding a button + menu combo for performing actions like sorting." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-filter", "calcite-scrim" ], "dependencyGraph": { "calcite-pick-list": [ "calcite-filter", "calcite-scrim" ], "calcite-filter": [ "calcite-scrim", "calcite-icon" ], "calcite-scrim": [ "calcite-loader" ] } }, { "filePath": "./src/components/calcite-pick-list-group/calcite-pick-list-group.tsx", "encapsulation": "shadow", "tag": "calcite-pick-list-group", "readme": "# calcite-pick-list-group\n\n`calcite-pick-list-group` is a wrapper for multiple `calcite-pick-list-item`s and lives in `calcite-pick-list`.\n", "docs": "`calcite-pick-list-group` is a wrapper for multiple `calcite-pick-list-item`s and lives in `calcite-pick-list`.", "docsTags": [ { "text": "- A slot for adding `calcite-pick-list-item` elements.", "name": "slot" } ], "usage": {}, "props": [ { "name": "groupTitle", "type": "string", "mutable": false, "attr": "group-title", "reflectToAttr": true, "docs": "The title used for all nested `calcite-pick-list` rows.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding `calcite-pick-list-item` elements." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-pick-list-item/calcite-pick-list-item.tsx", "encapsulation": "shadow", "tag": "calcite-pick-list-item", "readme": "# calcite-pick-list-item\n\n`calcite-pick-list-item`s are cards contained in a `calcite-pick-list`. They each can have a label and description, an icon, and be set to compact. The developer can disable or preselect each list item and give it a value.\n", "docs": "`calcite-pick-list-item`s are cards contained in a `calcite-pick-list`. They each can have a label and description, an icon, and be set to compact. The developer can disable or preselect each list item and give it a value.", "docsTags": [ { "text": "actions-end - a slot for adding actions or content to the end side of the item.", "name": "slot" }, { "text": "actions-start - a slot for adding actions or content to the start side of the item.", "name": "slot" } ], "usage": {}, "props": [ { "name": "description", "type": "string", "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "An optional description for this item. This will appear below the label text.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disableDeselect", "type": "boolean", "mutable": false, "attr": "disable-deselect", "reflectToAttr": false, "docs": "When false, the item cannot be deselected by user interaction.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When true, the item cannot be clicked and is visually muted.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "icon", "type": "ICON_TYPES.circle | ICON_TYPES.grip | ICON_TYPES.square", "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.", "docsTags": [], "default": "null", "values": [ { "type": "ICON_TYPES.circle" }, { "type": "ICON_TYPES.grip" }, { "type": "ICON_TYPES.square" } ], "optional": true, "required": false }, { "name": "intlRemove", "type": "string", "mutable": false, "attr": "intl-remove", "reflectToAttr": true, "docs": "The text for the remove item buttons. Only applicable if removable is true.", "docsTags": [], "default": "TEXT.remove", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "The main label for this item. This will appear next to the icon.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "metadata", "type": "{ [x: string]: unknown; }", "mutable": false, "reflectToAttr": false, "docs": "Used to provide additional metadata to an item, primarily used when the parent list has a filter.", "docsTags": [], "values": [ { "type": "{ [x: string]: unknown; }" } ], "optional": true, "required": false }, { "name": "removable", "type": "boolean", "mutable": false, "attr": "removable", "reflectToAttr": true, "docs": "Set this to true to display a remove action that removes the item from the list.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "selected", "type": "boolean", "mutable": true, "attr": "selected", "reflectToAttr": true, "docs": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "The item's associated value.", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": true } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "toggleSelected", "returns": { "type": "Promise", "docs": "" }, "signature": "toggleSelected(coerce?: boolean) => Promise", "parameters": [], "docs": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.", "docsTags": [] } ], "events": [ { "event": "calciteListItemChange", "detail": "{ item: HTMLCalcitePickListItemElement; value: any; selected: boolean; shiftPressed: boolean; }", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted whenever the item is selected or unselected.", "docsTags": [] }, { "event": "calciteListItemRemove", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted whenever the remove button is pressed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "actions-end", "docs": "a slot for adding actions or content to the end side of the item." }, { "name": "actions-start", "docs": "a slot for adding actions or content to the start side of the item." } ], "parts": [], "dependents": [ "calcite-value-list-item" ], "dependencies": [ "calcite-icon", "calcite-action" ], "dependencyGraph": { "calcite-pick-list-item": [ "calcite-icon", "calcite-action" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-value-list-item": [ "calcite-pick-list-item" ] } }, { "filePath": "./src/components/calcite-popover/calcite-popover.tsx", "encapsulation": "shadow", "tag": "calcite-popover", "readme": "# calcite-popover\n", "docs": "", "docsTags": [ { "text": "image - A slot for adding an image. The image will appear above the other slot content.", "name": "slot" } ], "usage": { "manager": "```html\nHello! I am some popover content!\n\nClickable popover\n```\n" }, "props": [ { "name": "closeButton", "type": "boolean", "mutable": false, "attr": "close-button", "reflectToAttr": true, "docs": "Display a close button within the Popover.", "docsTags": [ { "text": "use dismissible instead.", "name": "deprecated" } ], "default": "false", "deprecation": "use dismissible instead.", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disableFlip", "type": "boolean", "mutable": false, "attr": "disable-flip", "reflectToAttr": true, "docs": "Prevents flipping the popover's placement when it starts to overlap its reference element.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disablePointer", "type": "boolean", "mutable": false, "attr": "disable-pointer", "reflectToAttr": true, "docs": "Removes the caret pointer.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "dismissible", "type": "boolean", "mutable": false, "attr": "dismissible", "reflectToAttr": true, "docs": "Display a close button within the Popover.", "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": "heading", "type": "string", "mutable": false, "attr": "heading", "reflectToAttr": false, "docs": "Heading text.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "required": false }, { "name": "intlClose", "type": "string", "mutable": false, "attr": "intl-close", "reflectToAttr": false, "docs": "Text for close button.", "docsTags": [], "default": "TEXT.close", "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": "offsetDistance", "type": "number", "mutable": false, "attr": "offset-distance", "reflectToAttr": true, "docs": "Offset the position of the popover away from the reference element.", "docsTags": [], "default": "defaultOffsetDistance", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "offsetSkidding", "type": "number", "mutable": false, "attr": "offset-skidding", "reflectToAttr": true, "docs": "Offset the position of the popover along the reference element.", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "open", "type": "boolean", "mutable": true, "attr": "open", "reflectToAttr": true, "docs": "Display and position the component.", "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": "referenceElement", "type": "HTMLElement | string", "mutable": false, "attr": "reference-element", "reflectToAttr": false, "docs": "Reference HTMLElement used to position this component according to the placement property.", "docsTags": [], "values": [ { "type": "HTMLElement" }, { "type": "string" } ], "optional": false, "required": true } ], "methods": [ { "name": "reposition", "returns": { "type": "Promise", "docs": "" }, "signature": "reposition() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus(focusId?: \"close-button\") => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "toggle", "returns": { "type": "Promise", "docs": "" }, "signature": "toggle(value?: boolean) => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calcitePopoverClose", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fired when the popover is closed", "docsTags": [] }, { "event": "calcitePopoverOpen", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fired when the popover is opened", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "image", "docs": "A slot for adding an image. The image will appear above the other slot content." } ], "parts": [], "dependents": [ "calcite-action-menu", "calcite-input-time-picker" ], "dependencies": [ "calcite-action", "calcite-icon" ], "dependencyGraph": { "calcite-popover": [ "calcite-action", "calcite-icon" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-action-menu": [ "calcite-popover" ], "calcite-input-time-picker": [ "calcite-popover" ] } }, { "filePath": "./src/components/calcite-popover-manager/calcite-popover-manager.tsx", "encapsulation": "shadow", "tag": "calcite-popover-manager", "readme": "# calcite-popover-manager\n", "docs": "", "docsTags": [ { "text": "- A slot for adding elements that reference a 'calcite-popover' by the 'selector' property.", "name": "slot" } ], "usage": {}, "props": [ { "name": "autoClose", "type": "boolean", "mutable": false, "attr": "auto-close", "reflectToAttr": true, "docs": "Automatically closes any currently open popovers when clicking outside of a popover.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "selector", "type": "string", "mutable": false, "attr": "selector", "reflectToAttr": false, "docs": "CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.", "docsTags": [], "default": "`[${POPOVER_REFERENCE}]`", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "click", "target": "window", "capture": true, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding elements that reference a 'calcite-popover' by the 'selector' property." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-progress/calcite-progress.tsx", "encapsulation": "shadow", "tag": "calcite-progress", "readme": "# calcite-progress\n\nThe `calcite-progress` component is used to show progress on some async task to the user.\n\n## TODO\n", "docs": "The `calcite-progress` component is used to show progress on some async task to the user.", "docsTags": [], "usage": { "basic": "```html\n\n```\n" }, "props": [ { "name": "reversed", "type": "boolean", "mutable": false, "attr": "reversed", "reflectToAttr": false, "docs": "For indeterminate progress bars, reverse the animation direction", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "text", "type": "string", "mutable": false, "attr": "text", "reflectToAttr": false, "docs": "Text label for the progress indicator", "docsTags": [], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "type", "type": "\"determinate\" | \"indeterminate\"", "mutable": false, "attr": "type", "reflectToAttr": false, "docs": "Use indeterminate if finding actual progress value is impossible", "docsTags": [], "default": "\"determinate\"", "values": [ { "value": "determinate", "type": "string" }, { "value": "indeterminate", "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "number", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "Fraction completed, in the range of 0 - 1.0", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-input" ], "dependencies": [], "dependencyGraph": { "calcite-input": [ "calcite-progress" ] } }, { "filePath": "./src/components/calcite-radio/calcite-radio.tsx", "encapsulation": "shadow", "tag": "calcite-radio", "readme": "# calcite-radio\n\nRenders small, medium and large radio circles. This is an internal component used by `calcite-radio-button`.\n", "docs": "Renders small, medium and large radio circles. This is an internal component used by `calcite-radio-button`.", "docsTags": [], "usage": {}, "props": [ { "name": "checked", "type": "boolean", "mutable": false, "attr": "checked", "reflectToAttr": true, "docs": "The checked state of the radio.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "The disabled state of the radio.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "focused", "type": "boolean", "mutable": false, "attr": "focused", "reflectToAttr": true, "docs": "The focused state of the radio.", "docsTags": [ { "name": "private" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "hidden", "type": "boolean", "mutable": false, "attr": "hidden", "reflectToAttr": true, "docs": "The radio's hidden status.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "hovered", "type": "boolean", "mutable": false, "attr": "hovered", "reflectToAttr": true, "docs": "The hovered state of the radio.", "docsTags": [ { "name": "private" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale (size) of the radio.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-radio-button" ], "dependencies": [], "dependencyGraph": { "calcite-radio-button": [ "calcite-radio" ] } }, { "filePath": "./src/components/calcite-radio-button/calcite-radio-button.tsx", "encapsulation": "scoped", "tag": "calcite-radio-button", "readme": "# calcite-radio-button\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "checked", "type": "boolean", "mutable": true, "attr": "checked", "reflectToAttr": true, "docs": "The checked state of the radio button.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "The disabled state of the radio button.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "focused", "type": "boolean", "mutable": true, "attr": "focused", "reflectToAttr": true, "docs": "The focused state of the radio button.", "docsTags": [ { "name": "private" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "guid", "type": "string", "mutable": true, "attr": "guid", "reflectToAttr": true, "docs": "The id attribute of the radio button. When omitted, a globally unique identifier is used.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "hidden", "type": "boolean", "mutable": false, "attr": "hidden", "reflectToAttr": true, "docs": "The radio button's hidden status. When a radio button is hidden it is not focusable or checkable.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "hovered", "type": "boolean", "mutable": true, "attr": "hovered", "reflectToAttr": true, "docs": "The hovered state of the radio button.", "docsTags": [ { "name": "private" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "The name of the radio button. name is passed as a property automatically from calcite-radio-button-group.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": true, "docs": "Requires that a value is selected for the radio button group before the parent form will submit.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale (size) of the radio button. scale is passed as a property automatically from calcite-radio-button-group.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "The value of the radio button.", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": true } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteRadioButtonChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fires only when the radio button is checked. This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group.", "docsTags": [] } ], "listeners": [ { "event": "click", "capture": false, "passive": false }, { "event": "mouseenter", "capture": false, "passive": true }, { "event": "mouseleave", "capture": false, "passive": true } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-radio" ], "dependencyGraph": { "calcite-radio-button": [ "calcite-radio" ] } }, { "filePath": "./src/components/calcite-radio-button-group/calcite-radio-button-group.tsx", "encapsulation": "shadow", "tag": "calcite-radio-button-group", "readme": "# calcite-radio-button-group\n", "docs": "", "docsTags": [], "usage": { "basic": "Renders the radio button group with default horizontal layout\n\n```html\n\n \n \n Maps\n \n \n \n Layers\n \n \n \n Data\n \n \n \n Geography\n \n\n```\n", "disabled-checked": "Renders all radio button inputs disabled, first one checked\n\n```html\n\n \n \n A\n \n \n \n B\n \n \n \n C\n \n\n```\n", "with-vertical-layout": "```html\n\n \n \n Maps\n \n \n \n Layers\n \n \n \n Data\n \n \n \n Geography\n \n\n```\n" }, "props": [ { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "The disabled state of the radio button group.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "hidden", "type": "boolean", "mutable": false, "attr": "hidden", "reflectToAttr": true, "docs": "The radio button group's hidden status. When a radio button group is hidden none of its options are focusable or checkable.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "layout", "type": "\"grid\" | \"horizontal\" | \"vertical\"", "mutable": false, "attr": "layout", "reflectToAttr": true, "docs": "The layout direction of the radio buttons in a group.", "docsTags": [], "default": "\"horizontal\"", "values": [ { "value": "grid", "type": "string" }, { "value": "horizontal", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "The name of the radio button group. name must be unique to other radio button group instances.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true }, { "name": "required", "type": "boolean", "mutable": false, "attr": "required", "reflectToAttr": true, "docs": "Requires that a value is selected for the radio button group before the parent form will submit.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale (size) of the radio button group.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "calciteRadioButtonGroupChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "", "docsTags": [ { "text": "doc", "name": "todo" } ] } ], "listeners": [ { "event": "calciteRadioButtonChange", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-radio-group/calcite-radio-group.tsx", "encapsulation": "shadow", "tag": "calcite-radio-group", "readme": "# calcite-radio-group\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "appearance", "type": "\"outline\" | \"solid\"", "mutable": false, "attr": "appearance", "reflectToAttr": true, "docs": "specify the appearance style of the radio group, defaults to solid.", "docsTags": [], "default": "\"solid\"", "values": [ { "value": "outline", "type": "string" }, { "value": "solid", "type": "string" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "is the radio group disabled", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "layout", "type": "\"grid\" | \"horizontal\" | \"vertical\"", "mutable": false, "attr": "layout", "reflectToAttr": true, "docs": "specify the layout of the radio group, defaults to horizontal", "docsTags": [], "default": "\"horizontal\"", "values": [ { "value": "grid", "type": "string" }, { "value": "horizontal", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The group's name. Gets submitted with the form.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale of the radio group", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "selectedItem", "type": "HTMLCalciteRadioGroupItemElement", "mutable": true, "reflectToAttr": false, "docs": "The group's selected item.", "docsTags": [], "values": [ { "type": "HTMLCalciteRadioGroupItemElement" } ], "optional": false, "required": false }, { "name": "width", "type": "\"auto\" | \"full\"", "mutable": false, "attr": "width", "reflectToAttr": true, "docs": "specify the width of the group, defaults to auto", "docsTags": [], "default": "\"auto\"", "values": [ { "value": "auto", "type": "string" }, { "value": "full", "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "Focuses the selected item. If there is no selection, it focuses the first item.", "docsTags": [] } ], "events": [ { "event": "calciteRadioGroupChange", "detail": "string", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fired when the selected option changes, event detail is the new value", "docsTags": [] } ], "listeners": [ { "event": "calciteLabelFocus", "target": "window", "capture": false, "passive": false }, { "event": "click", "capture": false, "passive": false }, { "event": "calciteRadioGroupItemChange", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-radio-group-item/calcite-radio-group-item.tsx", "encapsulation": "shadow", "tag": "calcite-radio-group-item", "readme": "# calcite-radio-group-item\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "checked", "type": "boolean", "mutable": true, "attr": "checked", "reflectToAttr": true, "docs": "Indicates whether the control is checked.", "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": "iconFlipRtl", "type": "boolean", "mutable": false, "attr": "icon-flip-rtl", "reflectToAttr": true, "docs": "flip the icon in rtl", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "iconPosition", "type": "\"end\" | \"start\"", "mutable": false, "attr": "icon-position", "reflectToAttr": true, "docs": "optionally used with icon, select where to position the icon", "docsTags": [], "default": "\"start\"", "values": [ { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "value", "type": "any", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "The control's value.", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-radio-group-item": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-rating/calcite-rating.tsx", "encapsulation": "shadow", "tag": "calcite-rating", "readme": "# calcite-rating\n\n## Labeling for a11y\n\n```\n\n```\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "average", "type": "number", "mutable": false, "attr": "average", "reflectToAttr": true, "docs": "optionally pass a cumulative average rating to display", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "count", "type": "number", "mutable": false, "attr": "count", "reflectToAttr": true, "docs": "optionally pass a number of previous ratings to display", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "is the rating component in a selectable mode", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "intlRating", "type": "string", "mutable": false, "attr": "intl-rating", "reflectToAttr": false, "docs": "Localized string for \"Rating\" (used for aria label)", "docsTags": [], "default": "TEXT.rating", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlStars", "type": "string", "mutable": false, "attr": "intl-stars", "reflectToAttr": false, "docs": "Localized string for labelling each star, `${num}` in the string will be replaced by the number", "docsTags": [], "default": "TEXT.stars", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "readOnly", "type": "boolean", "mutable": false, "attr": "read-only", "reflectToAttr": true, "docs": "is the rating component in a selectable mode", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the component, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "showChip", "type": "boolean", "mutable": false, "attr": "show-chip", "reflectToAttr": true, "docs": "Show average and count data summary chip (if available)", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "number", "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "the value of the rating component", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteRatingChange", "detail": "{ value: number; }", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fires when the rating value has changed.", "docsTags": [] } ], "listeners": [ { "event": "calciteLabelFocus", "target": "window", "capture": false, "passive": false }, { "event": "blur", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon", "calcite-chip" ], "dependencyGraph": { "calcite-rating": [ "calcite-icon", "calcite-chip" ], "calcite-chip": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-scrim/calcite-scrim.tsx", "encapsulation": "shadow", "tag": "calcite-scrim", "readme": "# calcite-scrim\n", "docs": "", "docsTags": [], "usage": { "basic": "### Simple panel example\n\n```html\n
\n \n

I'm a panel that is not loading.

\n

This content can have any zIndex and it will not be placed above

\n

.

\n

.

\n

.

\n

.

\n \n
\n```\n\n### Loading scrim panel\n\n```html\n
\n \n

I'm a panel that is not loading.

\n

I have a loading spinner over my content.

\n

.

\n

.

\n

.

\n

.

\n \n
\n```\n" }, "props": [ { "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": "loading", "type": "boolean", "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "Determines if the component will have the loader overlay.\nOtherwise, will render opaque disabled state.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-block", "calcite-filter", "calcite-modal", "calcite-panel", "calcite-pick-list", "calcite-value-list" ], "dependencies": [ "calcite-loader" ], "dependencyGraph": { "calcite-scrim": [ "calcite-loader" ], "calcite-block": [ "calcite-scrim" ], "calcite-filter": [ "calcite-scrim" ], "calcite-modal": [ "calcite-scrim" ], "calcite-panel": [ "calcite-scrim" ], "calcite-pick-list": [ "calcite-scrim" ], "calcite-value-list": [ "calcite-scrim" ] } }, { "filePath": "./src/components/calcite-select/calcite-select.tsx", "encapsulation": "shadow", "tag": "calcite-select", "readme": "# calcite-select\n\nThis component represents a menu of options.\n", "docs": "This component represents a menu of options.", "docsTags": [], "usage": { "basic": "#### Default\n\n```html\n\n high\n medium\n low\n\n```\n\n#### Specifying underlying value\n\n```html\n\n 😃\n 😶\n 😭\n\n```\n\n#### Specifying different value than option content\n\n```html\n\n 1\n 2\n 3\n\n```\n\n#### Grouped\n\n```html\n\n \n a\n b\n c\n \n \n 1\n 2\n 3\n \n\n```\n\n### Side by side (container is flex-box)\n\n```html\n
\n \n ☕️\n 🍵\n 🍻\n \n \n 🌮\n 🍔\n 🌯\n \n
\n```\n\n### Disabling items and/or groups\n\n```html\n\n \n a\n b\n c\n d (disabled)\n \n \n 1 (disabled)\n 2\n 2\n \n \n You-Know-Who\n Tom Marvolo Riddle\n He-Who-Must-Not-Be-Named\n Voldemort\n \n\n```\n" }, "props": [ { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When true, it prevents the option from being selected.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "The component's label. This is required for accessibility purposes.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The component scale.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "selectedOption", "type": "HTMLCalciteOptionElement", "mutable": true, "reflectToAttr": false, "docs": "The currently selected option.", "docsTags": [ { "name": "readonly" } ], "values": [ { "type": "HTMLCalciteOptionElement" } ], "optional": false, "required": false }, { "name": "width", "type": "\"auto\" | \"full\" | \"half\"", "mutable": false, "attr": "width", "reflectToAttr": true, "docs": "The component width.", "docsTags": [], "default": "\"auto\"", "values": [ { "value": "auto", "type": "string" }, { "value": "full", "type": "string" }, { "value": "half", "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteSelectChange", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "This event will fire whenever the selected option changes.", "docsTags": [] } ], "listeners": [ { "event": "calciteOptionChange", "capture": false, "passive": false }, { "event": "calciteOptionGroupChange", "capture": false, "passive": false }, { "event": "calciteLabelFocus", "target": "window", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-select": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-shell/calcite-shell.tsx", "encapsulation": "shadow", "tag": "calcite-shell", "readme": "# calcite-shell\n\nThe `calcite-shell` component is used for application layout management. It is a container for the view as well as other calcite components like `calcite-shell-panel` and `calcite-tip-manager`.\n\n_note: calcite-shell supports tablet as the smallest screen size_\n", "docs": "The `calcite-shell` component is used for application layout management. It is a container for the view as well as other calcite components like `calcite-shell-panel` and `calcite-tip-manager`.\n\n_note: calcite-shell supports tablet as the smallest screen size_", "docsTags": [ { "text": "header - A slot for adding header content. This content will be positioned at the top of the shell.", "name": "slot" }, { "text": "footer - A slot for adding footer content. This content will be positioned at the bottom of the shell.", "name": "slot" }, { "text": "primary-panel - A slot for adding the leading `calcite-shell-panel`.", "name": "slot" }, { "text": "contextual-panel - A slot for adding the trailing `calcite-shell-panel`.", "name": "slot" }, { "text": "bottom-panel - A slot for adding a bottom floating panel such as a chart or `calcite-tip-manager`.", "name": "slot" }, { "text": "- A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)", "name": "slot" } ], "usage": { "advanced": "#### Advanced\n\nRenders a shell with leading and trailing floating panels, action bar/pad, block, flow, tip manager, footer.\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Cool thing.

\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Footer
\n\n```\n", "basic": "#### Basic\n\nRenders a basic shell with a header and a footer.\n\n```html\n\n
\n
\n

Shell Header: My App

\n
\n
\n

Shell Content

\n \n
Footer
\n\n```\n\n#### With panels\n\nRenders a shell with a header and panels on the left and right sides of the app.\n\n```html\n\n \n Leading panel! (on the left side, since this is a LTR app)\n \n Trailing panel! (right side) \n \n Center Row! (center bottom)\n \n
\n
\n

Shell Header: My App

\n
\n
\n

Shell Content

\n \n\n```\n\n#### Panel with action bar\n\nRenders a single panel with actions in an action bar.\n\n```html\n\n \n \"placeholder\"\n \n \n \n \n \n \n\n```\n" }, "props": [ { "name": "contentBehind", "type": "boolean", "mutable": false, "attr": "content-behind", "reflectToAttr": true, "docs": "Positions the center content behind any calcite-shell-panels.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)" }, { "name": "bottom-panel", "docs": "A slot for adding a bottom floating panel such as a chart or `calcite-tip-manager`." }, { "name": "contextual-panel", "docs": "A slot for adding the trailing `calcite-shell-panel`." }, { "name": "footer", "docs": "A slot for adding footer content. This content will be positioned at the bottom of the shell." }, { "name": "header", "docs": "A slot for adding header content. This content will be positioned at the top of the shell." }, { "name": "primary-panel", "docs": "A slot for adding the leading `calcite-shell-panel`." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-shell-center-row/calcite-shell-center-row.tsx", "encapsulation": "shadow", "tag": "calcite-shell-center-row", "readme": "# calcite-shell-center-row\n", "docs": "", "docsTags": [ { "text": "action-bar - A slot for adding a `calcite-action-bar` to the panel.", "name": "slot" }, { "text": "- A slot for adding content to the shell panel.", "name": "slot" } ], "usage": {}, "props": [ { "name": "detached", "type": "boolean", "mutable": false, "attr": "detached", "reflectToAttr": true, "docs": "This property makes the content area appear like a \"floating\" panel.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "heightScale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "height-scale", "reflectToAttr": true, "docs": "Specifies the maxiumum height of the row.", "docsTags": [], "default": "\"s\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "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": [], "default": "\"end\"", "values": [ { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding content to the shell panel." }, { "name": "action-bar", "docs": "A slot for adding a `calcite-action-bar` to the panel." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-shell-panel/calcite-shell-panel.tsx", "encapsulation": "shadow", "tag": "calcite-shell-panel", "readme": "# calcite-shell-panel\n\nThe `calcite-shell-panel` is a child component of `calcite-shell` used as a container to display other components like `calcite-block` and `calcite-flow`.\n", "docs": "The `calcite-shell-panel` is a child component of `calcite-shell` used as a container to display other components like `calcite-block` and `calcite-flow`.", "docsTags": [ { "text": "action-bar - A slot for adding a `calcite-action-bar` to the panel.", "name": "slot" }, { "text": "- A slot for adding content to the shell panel.", "name": "slot" } ], "usage": { "basic": "#### Basic\n\nRenders a basic shell panel with text content.\n\n```html\n\n

Primary Content

\n\n```\n\n#### With action bar\n\nRenders a panel with an action bar.\n\n```html\n\n \n \n \n \n \n\n```\n\n#### With a CalcitePanel.\n\n```html\n\n \n \n \n \n \n ... \n\n```\n\n#### With a CalciteFlow.\n\n```html\n\n \n \n \n \n \n \n ... \n ... \n \n\n```\n\n#### With a custom element wrapping a CalcitePanel.\n\nAdd `calcite-match-height` to a wrapping element to ensure proper height, scrolling, and sticky behavior (header, footer, fab). Note that multiple levels of nesting is not supported.\n\n```html\n\n \n \n \n \n \n \n ... \n \n\n```\n" }, "props": [ { "name": "collapsed", "type": "boolean", "mutable": false, "attr": "collapsed", "reflectToAttr": true, "docs": "Hide the content panel.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "detached", "type": "boolean", "mutable": false, "attr": "detached", "reflectToAttr": true, "docs": "This property makes the content area appear like a \"floating\" panel.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "detachedHeightScale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "detached-height-scale", "reflectToAttr": true, "docs": "Specifies the maxiumum height of the contents when detached.", "docsTags": [], "default": "\"l\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "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 }, { "name": "widthScale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "width-scale", "reflectToAttr": true, "docs": "This sets width of the content area.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "calciteShellPanelToggle", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when collapse has been toggled.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding content to the shell panel." }, { "name": "action-bar", "docs": "A slot for adding a `calcite-action-bar` to the panel." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-slider/calcite-slider.tsx", "encapsulation": "shadow", "tag": "calcite-slider", "readme": "# calcite-slider\n\nRange selection component for selecting single or multiple numeric values inside a given range.\n", "docs": "Range selection component for selecting single or multiple numeric values inside a given range.", "docsTags": [], "usage": { "basic": "```html\n\n```\n", "two-handles": "If you'd like to allow an upper and lower value selection (two handles), you can set `min-value` and `max-value` rather than `value`. Note: these are mutually exclusive.\n\n```html\n\n```\n" }, "props": [ { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "Disable and gray out the slider", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "hasHistogram", "type": "boolean", "mutable": true, "attr": "has-histogram", "reflectToAttr": true, "docs": "Indicates if a histogram is present", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "histogram", "type": "Point[]", "mutable": false, "reflectToAttr": false, "docs": "Display a histogram above the slider", "docsTags": [], "values": [ { "type": "Point[]" } ], "optional": true, "required": false }, { "name": "labelHandles", "type": "boolean", "mutable": false, "attr": "label-handles", "reflectToAttr": true, "docs": "Label handles with their numeric value", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "labelTicks", "type": "boolean", "mutable": false, "attr": "label-ticks", "reflectToAttr": true, "docs": "Label tick marks with their numeric value.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "max", "type": "number", "mutable": false, "attr": "max", "reflectToAttr": true, "docs": "Maximum selectable value", "docsTags": [], "default": "100", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "maxLabel", "type": "string", "mutable": false, "attr": "max-label", "reflectToAttr": false, "docs": "Label for second handle if needed (ex. \"Temperature, upper bound\")", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "maxValue", "type": "number", "mutable": true, "attr": "max-value", "reflectToAttr": false, "docs": "Currently selected upper number (if multi-select)", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "min", "type": "number", "mutable": false, "attr": "min", "reflectToAttr": true, "docs": "Minimum selectable value", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "minLabel", "type": "string", "mutable": false, "attr": "min-label", "reflectToAttr": false, "docs": "Label for first (or only) handle (ex. \"Temperature, lower bound\")", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "minValue", "type": "number", "mutable": true, "attr": "min-value", "reflectToAttr": false, "docs": "Currently selected lower number (if multi-select)", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "pageStep", "type": "number", "mutable": false, "attr": "page-step", "reflectToAttr": false, "docs": "Interval to move on page up/page down keys", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "precise", "type": "boolean", "mutable": false, "attr": "precise", "reflectToAttr": false, "docs": "Use finer point for handles", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "snap", "type": "boolean", "mutable": false, "attr": "snap", "reflectToAttr": false, "docs": "When true, enables snap selection along the step interval", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "step", "type": "number", "mutable": false, "attr": "step", "reflectToAttr": false, "docs": "Interval to move on up/down keys", "docsTags": [], "default": "1", "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "ticks", "type": "number", "mutable": false, "attr": "ticks", "reflectToAttr": false, "docs": "Show tick marks on the number line at provided interval", "docsTags": [], "values": [ { "type": "number" } ], "optional": true, "required": false }, { "name": "value", "type": "number", "mutable": true, "attr": "value", "reflectToAttr": true, "docs": "Currently selected number (if single select)", "docsTags": [], "default": "null", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteSliderChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread.", "docsTags": [] }, { "event": "calciteSliderUpdate", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread.", "docsTags": [ { "text": "use calciteSliderChange instead", "name": "deprecated" } ], "deprecation": "use calciteSliderChange instead" } ], "listeners": [ { "event": "calciteLabelFocus", "target": "window", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false }, { "event": "mousedown", "capture": false, "passive": true }, { "event": "click", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-graph" ], "dependencyGraph": { "calcite-slider": [ "calcite-graph" ] } }, { "filePath": "./src/components/calcite-sortable-list/calcite-sortable-list.tsx", "encapsulation": "shadow", "tag": "calcite-sortable-list", "readme": "# calcite-sortable-list\n", "docs": "", "docsTags": [ { "text": "- A slot for adding sortable items", "name": "slot" } ], "usage": {}, "props": [ { "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": "dragSelector", "type": "string", "mutable": false, "attr": "drag-selector", "reflectToAttr": false, "docs": "Specifies which items inside the element should be draggable.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "group", "type": "string", "mutable": false, "attr": "group", "reflectToAttr": false, "docs": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "handleSelector", "type": "string", "mutable": false, "attr": "handle-selector", "reflectToAttr": false, "docs": "The selector for the handle elements.", "docsTags": [], "default": "\"calcite-handle\"", "values": [ { "type": "string" } ], "optional": false, "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 } ], "methods": [], "events": [ { "event": "calciteListOrderChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the order of the list has changed.", "docsTags": [] } ], "listeners": [ { "event": "calciteHandleNudge", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding sortable items" } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-split-button/calcite-split-button.tsx", "encapsulation": "shadow", "tag": "calcite-split-button", "readme": "# calcite-split-button\n\nThe calcite-split-button control is one that combines a button with a dropdown menu in order to provide a primary action along with one or more related secondary options / actions. It's useful for grouping related actions or options for users, while elevating a commonly-used or default action for easier access. Its inner content populates the control's dropdown menu, and is thus expected to be valid `calcite-dropdown` content.\n", "docs": "The calcite-split-button control is one that combines a button with a dropdown menu in order to provide a primary action along with one or more related secondary options / actions. It's useful for grouping related actions or options for users, while elevating a commonly-used or default action for easier access. Its inner content populates the control's dropdown menu, and is thus expected to be valid `calcite-dropdown` content.", "docsTags": [], "usage": { "basic": "```html\n\n \n Option 2\n Option 3\n Option 4\n \n\n```\n" }, "props": [ { "name": "appearance", "type": "\"clear\" | \"outline\" | \"solid\" | \"transparent\"", "mutable": false, "attr": "appearance", "reflectToAttr": true, "docs": "specify the appearance style of the button, defaults to solid.", "docsTags": [], "default": "\"solid\"", "values": [ { "value": "clear", "type": "string" }, { "value": "outline", "type": "string" }, { "value": "solid", "type": "string" }, { "value": "transparent", "type": "string" } ], "optional": false, "required": false }, { "name": "color", "type": "\"blue\" | \"inverse\" | \"neutral\" | \"red\"", "mutable": false, "attr": "color", "reflectToAttr": true, "docs": "specify the color of the control, defaults to blue", "docsTags": [], "default": "\"blue\"", "values": [ { "value": "blue", "type": "string" }, { "value": "inverse", "type": "string" }, { "value": "neutral", "type": "string" }, { "value": "red", "type": "string" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "is the control disabled", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "dropdownIconType", "type": "\"caret\" | \"chevron\" | \"ellipsis\" | \"overflow\"", "mutable": false, "attr": "dropdown-icon-type", "reflectToAttr": true, "docs": "specify the icon used for the dropdown menu, defaults to chevron", "docsTags": [], "default": "\"chevron\"", "values": [ { "value": "caret", "type": "string" }, { "value": "chevron", "type": "string" }, { "value": "ellipsis", "type": "string" }, { "value": "overflow", "type": "string" } ], "optional": false, "required": false }, { "name": "dropdownLabel", "type": "string", "mutable": false, "attr": "dropdown-label", "reflectToAttr": true, "docs": "aria label for overflow button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "loading", "type": "boolean", "mutable": false, "attr": "loading", "reflectToAttr": true, "docs": "optionally add a calcite-loader component to the control,\ndisabling interaction. with the primary button", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "primaryIconEnd", "type": "string", "mutable": false, "attr": "primary-icon-end", "reflectToAttr": true, "docs": "optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "primaryIconFlipRtl", "type": "\"both\" | \"end\" | \"start\"", "mutable": false, "attr": "primary-icon-flip-rtl", "reflectToAttr": true, "docs": "flip the primary icon(s) in rtl", "docsTags": [], "values": [ { "value": "both", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "primaryIconStart", "type": "string", "mutable": false, "attr": "primary-icon-start", "reflectToAttr": true, "docs": "optionally pass an icon to display at the start of the primary button - accepts Calcite UI icon names", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "primaryLabel", "type": "string", "mutable": false, "attr": "primary-label", "reflectToAttr": true, "docs": "optionally pass an aria-label for the primary button", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "primaryText", "type": "string", "mutable": false, "attr": "primary-text", "reflectToAttr": true, "docs": "text for primary action button", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the control, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "width", "type": "\"auto\" | \"full\" | \"half\"", "mutable": false, "attr": "width", "reflectToAttr": true, "docs": "specify the width of the button, defaults to auto", "docsTags": [], "default": "\"auto\"", "values": [ { "value": "auto", "type": "string" }, { "value": "full", "type": "string" }, { "value": "half", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "calciteSplitButtonPrimaryClick", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "fired when the primary button is clicked", "docsTags": [] }, { "event": "calciteSplitButtonSecondaryClick", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "fired when the secondary button is clicked", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-button", "calcite-dropdown" ], "dependencyGraph": { "calcite-split-button": [ "calcite-button", "calcite-dropdown" ], "calcite-button": [ "calcite-loader", "calcite-icon" ] } }, { "filePath": "./src/components/calcite-stepper/calcite-stepper.tsx", "encapsulation": "shadow", "tag": "calcite-stepper", "readme": "# calcite-stepper\n\nCalcite stepper can be used to present a stepper workflow to a user. It has configurable display options for layout (horizontal or vertical), and the ability to automatically render status icons, and step numbers.\n", "docs": "Calcite stepper can be used to present a stepper workflow to a user. It has configurable display options for layout (horizontal or vertical), and the ability to automatically render status icons, and step numbers.", "docsTags": [], "usage": { "basic": "```html\n\n \n Step 1 Content Goes Here\n \n Step 2 Content Goes Here \n \n Step 3 Content Goes Here\n \n \n Step 4 Content Goes Here\n \n\n```\n" }, "props": [ { "name": "icon", "type": "boolean", "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "optionally display a status icon next to the step title", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "layout", "type": "\"grid\" | \"horizontal\" | \"vertical\"", "mutable": false, "attr": "layout", "reflectToAttr": true, "docs": "specify the layout of stepper, defaults to horizontal", "docsTags": [], "default": "\"horizontal\"", "values": [ { "value": "grid", "type": "string" }, { "value": "horizontal", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": false, "required": false }, { "name": "numbered", "type": "boolean", "mutable": false, "attr": "numbered", "reflectToAttr": true, "docs": "optionally display the number next to the step title", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of stepper, 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": "endStep", "returns": { "type": "Promise", "docs": "" }, "signature": "endStep() => Promise", "parameters": [], "docs": "set the last step as active", "docsTags": [] }, { "name": "goToStep", "returns": { "type": "Promise", "docs": "" }, "signature": "goToStep(num: number) => Promise", "parameters": [], "docs": "set the requested step as active", "docsTags": [] }, { "name": "nextStep", "returns": { "type": "Promise", "docs": "" }, "signature": "nextStep() => Promise", "parameters": [], "docs": "set the next step as active", "docsTags": [] }, { "name": "prevStep", "returns": { "type": "Promise", "docs": "" }, "signature": "prevStep() => Promise", "parameters": [], "docs": "set the previous step as active", "docsTags": [] }, { "name": "startStep", "returns": { "type": "Promise", "docs": "" }, "signature": "startStep() => Promise", "parameters": [], "docs": "set the first step as active", "docsTags": [] } ], "events": [], "listeners": [ { "event": "calciteStepperItemKeyEvent", "capture": false, "passive": false }, { "event": "calciteStepperItemRegister", "capture": false, "passive": false }, { "event": "calciteStepperItemSelect", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-stepper-item/calcite-stepper-item.tsx", "encapsulation": "shadow", "tag": "calcite-stepper-item", "readme": "# calcite-stepper-item\n\nindividual `calcite-stepper-item` item\n", "docs": "individual `calcite-stepper-item` item", "docsTags": [], "usage": {}, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "is the step active", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "complete", "type": "boolean", "mutable": false, "attr": "complete", "reflectToAttr": true, "docs": "has the step been completed", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": false, "docs": "is the step disabled and not navigable to by a user", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "error", "type": "boolean", "mutable": false, "attr": "error", "reflectToAttr": false, "docs": "does the step contain an error that needs to be resolved by the user", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "itemSubtitle", "type": "string", "mutable": false, "attr": "item-subtitle", "reflectToAttr": false, "docs": "pass a title for the stepper 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 stepper item", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "keydown", "capture": false, "passive": false }, { "event": "calciteStepperItemChange", "target": "body", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-stepper-item": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-switch/calcite-switch.tsx", "encapsulation": "shadow", "tag": "calcite-switch", "readme": "# calcite-switch\n\n`calcite-switch` is used to toggle a value on or off.\n", "docs": "`calcite-switch` is used to toggle a value on or off.", "docsTags": [], "usage": { "basic": "```html\n\n```\n" }, "props": [ { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "True if the switch is disabled", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "The name of the switch input", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale of the switch", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "switched", "type": "boolean", "mutable": true, "attr": "switched", "reflectToAttr": true, "docs": "True if the switch is initially on", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": true, "docs": "The value of the switch input", "docsTags": [], "values": [ { "type": "any" } ], "optional": true, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteSwitchChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fires when the switched value has changed.", "docsTags": [] } ], "listeners": [ { "event": "calciteLabelFocus", "target": "window", "capture": false, "passive": false }, { "event": "click", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-block-section" ], "dependencies": [], "dependencyGraph": { "calcite-block-section": [ "calcite-switch" ] } }, { "filePath": "./src/components/calcite-tab/calcite-tab.tsx", "encapsulation": "shadow", "tag": "calcite-tab", "readme": "# calcite-tab\n", "docs": "", "docsTags": [], "usage": { "basic": "`calcite-tab` wraps the content you would like to appear when that tab is selected:\n\n```html\nMy stuff!\n```\n" }, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "Show this tab", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "tab", "type": "string", "mutable": false, "attr": "tab", "reflectToAttr": true, "docs": "Optionally include a unique name for this tab,\nbe sure to also set this name on the associated title.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "getTabIndex", "returns": { "type": "Promise", "docs": "" }, "signature": "getTabIndex() => Promise", "parameters": [], "docs": "Return the index of this tab within the tab array", "docsTags": [] } ], "events": [], "listeners": [ { "event": "calciteTabChange", "target": "body", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-color-picker" ], "dependencies": [], "dependencyGraph": { "calcite-color-picker": [ "calcite-tab" ] } }, { "filePath": "./src/components/calcite-tab-nav/calcite-tab-nav.tsx", "encapsulation": "shadow", "tag": "calcite-tab-nav", "readme": "# calcite-tab-nav\n\nThe tab-nav groups several [calcite-tab-title](../calcite-tab-title) components and builds out the navigation. You can optionally use attibutes on the tab-nav to configure client side storage of the selected tab.\n", "docs": "The tab-nav groups several [calcite-tab-title](../calcite-tab-title) components and builds out the navigation. You can optionally use attibutes on the tab-nav to configure client side storage of the selected tab.", "docsTags": [], "usage": { "basic": "When tab-nav is the only parent, tab-title can inherit its `scale` and `position` from tab-nav:\n\n```html\n\n Layers\n Maps\n Data\n\n```\n" }, "props": [ { "name": "storageId", "type": "string", "mutable": false, "attr": "storage-id", "reflectToAttr": false, "docs": "Name to use when saving selected tab data to localStorage", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "syncId", "type": "string", "mutable": false, "attr": "sync-id", "reflectToAttr": false, "docs": "Pass the same string to multiple tab navs to keep them all in sync if one changes", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "calciteTabChange", "detail": "TabChangeEventDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the active tab changes", "docsTags": [] } ], "listeners": [ { "event": "resize", "target": "window", "capture": false, "passive": true }, { "event": "calciteTabsFocusPrevious", "capture": false, "passive": false }, { "event": "calciteTabsFocusNext", "capture": false, "passive": false }, { "event": "calciteTabsActivate", "capture": false, "passive": false }, { "event": "calciteTabTitleRegister", "capture": false, "passive": false }, { "event": "calciteTabChange", "target": "body", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-color-picker" ], "dependencies": [], "dependencyGraph": { "calcite-color-picker": [ "calcite-tab-nav" ] } }, { "filePath": "./src/components/calcite-tab-title/calcite-tab-title.tsx", "encapsulation": "shadow", "tag": "calcite-tab-title", "readme": "# calcite-tab-title\n\nThe tab-title is the link that switches between panes in [calcite-tabs](../calcite-tabs).\n", "docs": "The tab-title is the link that switches between panes in [calcite-tabs](../calcite-tabs).", "docsTags": [], "usage": {}, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "Show this tab title as selected", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "Disable this tab title", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "iconEnd", "type": "string", "mutable": false, "attr": "icon-end", "reflectToAttr": true, "docs": "optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "iconFlipRtl", "type": "\"both\" | \"end\" | \"start\"", "mutable": false, "attr": "icon-flip-rtl", "reflectToAttr": true, "docs": "flip the icon(s) in rtl", "docsTags": [], "values": [ { "value": "both", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "iconStart", "type": "string", "mutable": false, "attr": "icon-start", "reflectToAttr": true, "docs": "optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "tab", "type": "string", "mutable": false, "attr": "tab", "reflectToAttr": true, "docs": "Optionally include a unique name for the tab title,\nbe sure to also set this name on the associated tab.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "getTabIndex", "returns": { "type": "Promise", "docs": "" }, "signature": "getTabIndex() => Promise", "parameters": [], "docs": "Return the index of this title within the nav", "docsTags": [] } ], "events": [ { "event": "calciteTabsActivate", "detail": "TabChangeEventDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Fires when a specific tab is activated. `event.details`: [TabChangeEventDetail](../../interfaces/TabChange.ts)", "docsTags": [] } ], "listeners": [ { "event": "calciteTabChange", "target": "body", "capture": false, "passive": false }, { "event": "click", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-color-picker" ], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-tab-title": [ "calcite-icon" ], "calcite-color-picker": [ "calcite-tab-title" ] } }, { "filePath": "./src/components/calcite-tabs/calcite-tabs.tsx", "encapsulation": "shadow", "tag": "calcite-tabs", "readme": "# calcite-tabs\n", "docs": "", "docsTags": [], "usage": { "basic": "`calcite-tabs` uses several sub-components ([calcite-tab-nav](../calcite-tab-nav), [calcite-tab](../calcite-tab), [calcite-tab-title](../calcite-tab-title)) to create a tabbed interface with optional client side storage. Place your content inside of the `` element:\n\n```html\n\n \n Tab 1 Title\n Tab 2 Title\n \n\n Tab 1 Content\n Tab 2 Content\n\n```\n", "bordered": "```html\n\n \n Tab 1 Title\n Tab 2 Title\n Tab 3 Title\n Tab 4 Title\n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n Tab 4 Content\n\n```\n" }, "props": [ { "name": "bordered", "type": "boolean", "mutable": true, "attr": "bordered", "reflectToAttr": true, "docs": "Optionally enable tabs to appear like a folder-style menu when its layout is \"inline\"", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "layout", "type": "\"center\" | \"inline\"", "mutable": false, "attr": "layout", "reflectToAttr": true, "docs": "Align tab titles to the edge or fully justify them across the tab nav (\"center\")", "docsTags": [], "default": "\"inline\"", "values": [ { "value": "center", "type": "string" }, { "value": "inline", "type": "string" } ], "optional": false, "required": false }, { "name": "position", "type": "\"above\" | \"below\"", "mutable": false, "attr": "position", "reflectToAttr": true, "docs": "Display the tabs above (default) or below the tab content", "docsTags": [], "default": "\"above\"", "values": [ { "value": "above", "type": "string" }, { "value": "below", "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "Specify the scale of the tabs component, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "calciteTabTitleRegister", "capture": false, "passive": false }, { "event": "calciteTabTitleUnregister", "target": "body", "capture": false, "passive": false }, { "event": "calciteTabRegister", "capture": false, "passive": false }, { "event": "calciteTabUnregister", "target": "body", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-color-picker" ], "dependencies": [], "dependencyGraph": { "calcite-color-picker": [ "calcite-tabs" ] } }, { "filePath": "./src/components/calcite-tile/calcite-tile.tsx", "encapsulation": "shadow", "tag": "calcite-tile", "readme": "# calcite-tile\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "active", "type": "boolean", "mutable": false, "attr": "active", "reflectToAttr": true, "docs": "The active state of the tile.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "description", "type": "string", "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "The description text that appears beneath the heading of the tile.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When true, prevents interaction.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "embed", "type": "boolean", "mutable": false, "attr": "embed", "reflectToAttr": true, "docs": "The embed mode of the tile. When true, renders without a border and padding for use by other components.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "focused", "type": "boolean", "mutable": false, "attr": "focused", "reflectToAttr": true, "docs": "The focused state of the tile.", "docsTags": [ { "name": "private" } ], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "heading", "type": "string", "mutable": false, "attr": "heading", "reflectToAttr": true, "docs": "The heading text that appears between the icon and description of the tile.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "hidden", "type": "boolean", "mutable": false, "attr": "hidden", "reflectToAttr": true, "docs": "The hidden state of the tile.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "href", "type": "string", "mutable": false, "attr": "href", "reflectToAttr": true, "docs": "The (optional) url for the tile. (Only applies when embed is set to false)", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "icon", "type": "string", "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "The icon that appears at the top of the tile.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-tile-select" ], "dependencies": [ "calcite-icon", "calcite-link" ], "dependencyGraph": { "calcite-tile": [ "calcite-icon", "calcite-link" ], "calcite-link": [ "calcite-icon" ], "calcite-tile-select": [ "calcite-tile" ] } }, { "filePath": "./src/components/calcite-tile-select/calcite-tile-select.tsx", "encapsulation": "shadow", "tag": "calcite-tile-select", "readme": "# calcite-tile-select\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "checked", "type": "boolean", "mutable": true, "attr": "checked", "reflectToAttr": true, "docs": "The checked state of the tile select.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "description", "type": "string", "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "The description text that appears beneath the heading of the tile.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "The disabled state of the tile select.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "heading", "type": "string", "mutable": false, "attr": "heading", "reflectToAttr": true, "docs": "The heading text that appears between the icon and description of the tile.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "hidden", "type": "boolean", "mutable": false, "attr": "hidden", "reflectToAttr": true, "docs": "The hidden state of the tile select.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "icon", "type": "string", "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "The icon that appears at the top of the tile.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "inputAlignment", "type": "\"end\" | \"start\"", "mutable": false, "attr": "input-alignment", "reflectToAttr": true, "docs": "The side of the tile that the radio or checkbox appears on when inputEnabled is true.", "docsTags": [], "default": "\"start\"", "values": [ { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": false, "required": false }, { "name": "inputEnabled", "type": "boolean", "mutable": false, "attr": "input-enabled", "reflectToAttr": true, "docs": "Display an interactive radio or checkbox.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": true, "docs": "The name of the tile select. This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.", "docsTags": [], "default": "\"\"", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "type", "type": "\"checkbox\" | \"radio\"", "mutable": false, "attr": "type", "reflectToAttr": true, "docs": "The selection mode of the tile select: radio (single) or checkbox (multiple).", "docsTags": [], "default": "\"radio\"", "values": [ { "value": "checkbox", "type": "string" }, { "value": "radio", "type": "string" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "The value of the tile select. This value will appear in form submissions when this tile select is checked.", "docsTags": [], "values": [ { "type": "any" } ], "optional": true, "required": false }, { "name": "width", "type": "\"auto\" | \"full\"", "mutable": false, "attr": "width", "reflectToAttr": true, "docs": "specify the width of the tile, defaults to auto", "docsTags": [], "default": "\"auto\"", "values": [ { "value": "auto", "type": "string" }, { "value": "full", "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [], "listeners": [ { "event": "calciteCheckboxChange", "capture": false, "passive": false }, { "event": "calciteCheckboxFocusedChange", "capture": false, "passive": false }, { "event": "calciteRadioButtonCheckedChange", "capture": false, "passive": false }, { "event": "calciteRadioButtonFocusedChange", "capture": false, "passive": false }, { "event": "click", "capture": false, "passive": false }, { "event": "mouseenter", "capture": false, "passive": true }, { "event": "mouseleave", "capture": false, "passive": true } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-tile" ], "dependencyGraph": { "calcite-tile-select": [ "calcite-tile" ], "calcite-tile": [ "calcite-icon", "calcite-link" ], "calcite-link": [ "calcite-icon" ] } }, { "filePath": "./src/components/calcite-tile-select-group/calcite-tile-select-group.tsx", "encapsulation": "shadow", "tag": "calcite-tile-select-group", "readme": "# calcite-tile-select-group\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "layout", "type": "\"horizontal\" | \"vertical\"", "mutable": false, "attr": "layout", "reflectToAttr": true, "docs": "Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts", "docsTags": [], "default": "\"horizontal\"", "values": [ { "value": "horizontal", "type": "string" }, { "value": "vertical", "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-time-picker/calcite-time-picker.tsx", "encapsulation": "shadow", "tag": "calcite-time-picker", "readme": "# calcite-time-picker\n", "docs": "", "docsTags": [], "usage": {}, "props": [ { "name": "hour", "type": "string", "mutable": true, "attr": "hour", "reflectToAttr": false, "docs": "The hour value (24-hour format)", "docsTags": [], "default": "null", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "hourDisplayFormat", "type": "\"12\" | \"24\"", "mutable": false, "attr": "hour-display-format", "reflectToAttr": true, "docs": "Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)", "docsTags": [], "default": "\"12\"", "values": [ { "value": "12", "type": "string" }, { "value": "24", "type": "string" } ], "optional": false, "required": false }, { "name": "intlHour", "type": "string", "mutable": false, "attr": "intl-hour", "reflectToAttr": false, "docs": "aria-label for the hour input", "docsTags": [], "default": "TEXT.hour", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlHourDown", "type": "string", "mutable": false, "attr": "intl-hour-down", "reflectToAttr": false, "docs": "aria-label for the hour down button", "docsTags": [], "default": "TEXT.hourDown", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlHourUp", "type": "string", "mutable": false, "attr": "intl-hour-up", "reflectToAttr": false, "docs": "aria-label for the hour up button", "docsTags": [], "default": "TEXT.hourUp", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlMeridiem", "type": "string", "mutable": false, "attr": "intl-meridiem", "reflectToAttr": false, "docs": "aria-label for the meridiem (am/pm) input", "docsTags": [], "default": "TEXT.meridiem", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlMeridiemDown", "type": "string", "mutable": false, "attr": "intl-meridiem-down", "reflectToAttr": false, "docs": "aria-label for the meridiem (am/pm) down button", "docsTags": [], "default": "TEXT.meridiemDown", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlMeridiemUp", "type": "string", "mutable": false, "attr": "intl-meridiem-up", "reflectToAttr": false, "docs": "aria-label for the meridiem (am/pm) up button", "docsTags": [], "default": "TEXT.meridiemUp", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlMinute", "type": "string", "mutable": false, "attr": "intl-minute", "reflectToAttr": false, "docs": "aria-label for the minute input", "docsTags": [], "default": "TEXT.minute", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlMinuteDown", "type": "string", "mutable": false, "attr": "intl-minute-down", "reflectToAttr": false, "docs": "aria-label for the minute down button", "docsTags": [], "default": "TEXT.minuteDown", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlMinuteUp", "type": "string", "mutable": false, "attr": "intl-minute-up", "reflectToAttr": false, "docs": "aria-label for the minute up button", "docsTags": [], "default": "TEXT.minuteUp", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlSecond", "type": "string", "mutable": false, "attr": "intl-second", "reflectToAttr": false, "docs": "aria-label for the second input", "docsTags": [], "default": "TEXT.second", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlSecondDown", "type": "string", "mutable": false, "attr": "intl-second-down", "reflectToAttr": false, "docs": "aria-label for the second down button", "docsTags": [], "default": "TEXT.secondDown", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "intlSecondUp", "type": "string", "mutable": false, "attr": "intl-second-up", "reflectToAttr": false, "docs": "aria-label for the second up button", "docsTags": [], "default": "TEXT.secondUp", "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "minute", "type": "string", "mutable": true, "attr": "minute", "reflectToAttr": false, "docs": "The minute value", "docsTags": [], "default": "null", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "The scale (size) of the time picker", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "second", "type": "string", "mutable": true, "attr": "second", "reflectToAttr": false, "docs": "The second value", "docsTags": [], "default": "null", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "step", "type": "number", "mutable": false, "attr": "step", "reflectToAttr": true, "docs": "number that specifies the granularity that the value must adhere to", "docsTags": [], "default": "60", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus(target: TimeFocusId) => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [], "listeners": [ { "event": "blur", "capture": false, "passive": false }, { "event": "focus", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-input-time-picker" ], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-time-picker": [ "calcite-icon" ], "calcite-input-time-picker": [ "calcite-time-picker" ] } }, { "filePath": "./src/components/calcite-tip/calcite-tip.tsx", "encapsulation": "shadow", "tag": "calcite-tip", "readme": "# calcite-tip\n\nThe `calcite-tip` component can comprise of an image, text and hyperlink to give helpful hints to a user about using the platform.\n", "docs": "The `calcite-tip` component can comprise of an image, text and hyperlink to give helpful hints to a user about using the platform.", "docsTags": [ { "text": "thumbnail - A slot for adding an HTML image element to the tip.", "name": "slot" } ], "usage": { "basic": "#### Basic\n\nRenders a non-dismissible tip with a heading, thumbnail, info and a link.\n\n```html\n\n \"This\n

Normal tip with a landscape or square image and a small amount of text in the \"info\" slot.

\n Put a link hurr!\n\n```\n" }, "props": [ { "name": "dismissed", "type": "boolean", "mutable": true, "attr": "dismissed", "reflectToAttr": true, "docs": "No longer displays the tip.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "heading", "type": "string", "mutable": false, "attr": "heading", "reflectToAttr": false, "docs": "The heading of the tip.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "required": false }, { "name": "intlClose", "type": "string", "mutable": false, "attr": "intl-close", "reflectToAttr": false, "docs": "Alternate text for closing the tip.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "nonDismissible", "type": "boolean", "mutable": false, "attr": "non-dismissible", "reflectToAttr": true, "docs": "Indicates whether the tip can be dismissed.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selected", "type": "boolean", "mutable": false, "attr": "selected", "reflectToAttr": true, "docs": "The selected state of the tip if it is being used inside a `calcite-tip-manager`.", "docsTags": [], "values": [ { "type": "boolean" } ], "optional": true, "required": false } ], "methods": [], "events": [ { "event": "calciteTipDismiss", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the component has been dismissed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "thumbnail", "docs": "A slot for adding an HTML image element to the tip." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-action" ], "dependencyGraph": { "calcite-tip": [ "calcite-action" ], "calcite-action": [ "calcite-loader", "calcite-icon" ] } }, { "filePath": "./src/components/calcite-tip-group/calcite-tip-group.tsx", "encapsulation": "shadow", "tag": "calcite-tip-group", "readme": "# calcite-tip-group\n\n`calcite-tip-group` is a wrapper for multiple `calcite-tip`s and is housed in `calcite-tip-manager`.\n", "docs": "`calcite-tip-group` is a wrapper for multiple `calcite-tip`s and is housed in `calcite-tip-manager`.", "docsTags": [], "usage": {}, "props": [ { "name": "groupTitle", "type": "string", "mutable": false, "attr": "group-title", "reflectToAttr": false, "docs": "The title used for all nested tips.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-tip-manager/calcite-tip-manager.tsx", "encapsulation": "shadow", "tag": "calcite-tip-manager", "readme": "# calcite-tip-manager\n\nThe `calcite-tip-manager` component contains multiple `calcite-tip`s that a user can view through via interactive arrows to go back and forth through the tips in the deck.\n", "docs": "The `calcite-tip-manager` component contains multiple `calcite-tip`s that a user can view through via interactive arrows to go back and forth through the tips in the deck.", "docsTags": [ { "text": "- A slot for adding `calcite-tip`s.", "name": "slot" } ], "usage": { "basic": "#### Basic\n\nRenders a tip manager using a group of tips as well as a single tip.\n\n```html\n\n \n \n

\n Usually depicted as pure white, Pegasus is the offspring of the Olympian god Poseidon. He was foaled by the\n Gorgon Medusa upon her death, when the hero Perseus decapitated her.\n

\n Magical flying horsey\n \n \n

\n The creature resided in the twisting maze of the labyrinth where it was offfered a regular sacrifice of youths\n and maidens to satisfy its cannibalistic hunger.\n

\n Bull headed man\n \n \n \n

\n Dangerous creatures who lured nearby sailors with their enchanting music and singing voices to shipwreck on the\n rocky coast of their island.\n

\n Sexy bird lady\n \n\n```\n" }, "props": [ { "name": "closed", "type": "boolean", "mutable": true, "attr": "closed", "reflectToAttr": true, "docs": "Alternate text for closing the `calcite-tip-manager`.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "headingLevel", "type": "1 | 2 | 3 | 4 | 5 | 6", "mutable": false, "attr": "heading-level", "reflectToAttr": false, "docs": "Number at which section headings should start for this component.", "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": false, "required": false }, { "name": "intlClose", "type": "string", "mutable": false, "attr": "intl-close", "reflectToAttr": false, "docs": "Alternate text for closing the tip.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlDefaultTitle", "type": "string", "mutable": false, "attr": "intl-default-title", "reflectToAttr": false, "docs": "The default group title for the `calcite-tip-manager`.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlNext", "type": "string", "mutable": false, "attr": "intl-next", "reflectToAttr": false, "docs": "Alternate text for navigating to the next tip.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlPaginationLabel", "type": "string", "mutable": false, "attr": "intl-pagination-label", "reflectToAttr": false, "docs": "Label that appears on hover of pagination icon.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlPrevious", "type": "string", "mutable": false, "attr": "intl-previous", "reflectToAttr": false, "docs": "Alternate text for navigating to the previous tip.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "nextTip", "returns": { "type": "Promise", "docs": "" }, "signature": "nextTip() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "previousTip", "returns": { "type": "Promise", "docs": "" }, "signature": "previousTip() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteTipManagerToggle", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the `calcite-tip-manager` has been toggled open or closed.", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding `calcite-tip`s." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-action" ], "dependencyGraph": { "calcite-tip-manager": [ "calcite-action" ], "calcite-action": [ "calcite-loader", "calcite-icon" ] } }, { "filePath": "./src/components/calcite-tooltip/calcite-tooltip.tsx", "encapsulation": "shadow", "tag": "calcite-tooltip", "readme": "# calcite-tooltip\n", "docs": "", "docsTags": [], "usage": { "basic": "```html\nThis is the message of the tooltip\n\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua.\n

\n\n```\n" }, "props": [ { "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": "offsetDistance", "type": "number", "mutable": false, "attr": "offset-distance", "reflectToAttr": true, "docs": "Offset the position of the popover away from the reference element.", "docsTags": [], "default": "defaultOffsetDistance", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "offsetSkidding", "type": "number", "mutable": false, "attr": "offset-skidding", "reflectToAttr": true, "docs": "Offset the position of the popover along the reference element.", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "open", "type": "boolean", "mutable": false, "attr": "open", "reflectToAttr": true, "docs": "Display and position the component.", "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": "referenceElement", "type": "HTMLElement | string", "mutable": false, "attr": "reference-element", "reflectToAttr": false, "docs": "Reference HTMLElement used to position this component.", "docsTags": [], "values": [ { "type": "HTMLElement" }, { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "reposition", "returns": { "type": "Promise", "docs": "" }, "signature": "reposition() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-tooltip-manager/calcite-tooltip-manager.tsx", "encapsulation": "shadow", "tag": "calcite-tooltip-manager", "readme": "# calcite-tooltip-manager\n", "docs": "", "docsTags": [ { "text": "- A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.", "name": "slot" } ], "usage": {}, "props": [ { "name": "selector", "type": "string", "mutable": false, "attr": "selector", "reflectToAttr": false, "docs": "CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip.", "docsTags": [], "default": "`[${TOOLTIP_REFERENCE}]`", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "keyup", "target": "document", "capture": false, "passive": false }, { "event": "mouseover", "capture": true, "passive": true }, { "event": "mouseout", "capture": true, "passive": true }, { "event": "click", "capture": true, "passive": false }, { "event": "focus", "capture": true, "passive": false }, { "event": "blur", "capture": true, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property." } ], "parts": [], "dependents": [ "calcite-action-bar", "calcite-action-menu", "calcite-action-pad" ], "dependencies": [], "dependencyGraph": { "calcite-action-bar": [ "calcite-tooltip-manager" ], "calcite-action-menu": [ "calcite-tooltip-manager" ], "calcite-action-pad": [ "calcite-tooltip-manager" ] } }, { "filePath": "./src/components/calcite-tree/calcite-tree.tsx", "encapsulation": "shadow", "tag": "calcite-tree", "readme": "# calcite-tree\n", "docs": "", "docsTags": [], "usage": { "basic": "`` can be used as a sidebar navigation tree with optional lines and different selection modes.\n\n```html\n\n \n Child 1\n \n \n Grandchild 1\n \n \n Grandchild 2\n \n \n \n\n```\n" }, "props": [ { "name": "inputEnabled", "type": "boolean", "mutable": true, "attr": "input-enabled", "reflectToAttr": false, "docs": "Display input", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "lines", "type": "boolean", "mutable": true, "attr": "lines", "reflectToAttr": true, "docs": "Display indentation guide lines", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"m\" | \"s\"", "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "Specify the scale of the tree, defaults to m", "docsTags": [], "default": "\"m\"", "values": [ { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false }, { "name": "selectionMode", "type": "TreeSelectionMode.Ancestors | TreeSelectionMode.Children | TreeSelectionMode.Multi | TreeSelectionMode.MultiChildren | TreeSelectionMode.Single", "mutable": true, "attr": "selection-mode", "reflectToAttr": true, "docs": "Customize how tree selection works (single, multi, children, multi-children)", "docsTags": [], "default": "TreeSelectionMode.Single", "values": [ { "type": "TreeSelectionMode.Ancestors" }, { "type": "TreeSelectionMode.Children" }, { "type": "TreeSelectionMode.Multi" }, { "type": "TreeSelectionMode.MultiChildren" }, { "type": "TreeSelectionMode.Single" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "calciteTreeSelect", "detail": "TreeSelectDetail", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property.", "docsTags": [] } ], "listeners": [ { "event": "focus", "capture": false, "passive": false }, { "event": "focusin", "capture": false, "passive": false }, { "event": "focusout", "capture": false, "passive": false }, { "event": "calciteTreeItemSelect", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/calcite-tree-item/calcite-tree-item.tsx", "encapsulation": "shadow", "tag": "calcite-tree-item", "readme": "# calcite-tree-item\n\n`` is used to represent a single item in a ``.\n", "docs": "`` is used to represent a single item in a ``.", "docsTags": [], "usage": {}, "props": [ { "name": "expanded", "type": "boolean", "mutable": true, "attr": "expanded", "reflectToAttr": true, "docs": "True if the item is in an expanded state", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selected", "type": "boolean", "mutable": true, "attr": "selected", "reflectToAttr": true, "docs": "Is the item currently selected", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "click", "capture": false, "passive": false }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [ "calcite-icon", "calcite-checkbox" ], "dependencyGraph": { "calcite-tree-item": [ "calcite-icon", "calcite-checkbox" ] } }, { "filePath": "./src/components/calcite-value-list/calcite-value-list.tsx", "encapsulation": "shadow", "tag": "calcite-value-list", "readme": "# calcite-value-list\n\n`calcite-value-list` is housed in a panel and contains `calcite-value-list-item`s. The value list has options for drag and drop, label editing, and single or multi-select of items which can be done through shift+click.\n", "docs": "`calcite-value-list` is housed in a panel and contains `calcite-value-list-item`s. The value list has options for drag and drop, label editing, and single or multi-select of items which can be done through shift+click.", "docsTags": [ { "text": "- A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.", "name": "slot" }, { "text": "menu-actions - A slot for adding a button + menu combo for performing actions like sorting.", "name": "slot" } ], "usage": { "basic": "#### Basic\n\nRenders a value list with multiple items able to be selected and a filter.\n\n```html\n\n \n \n \n \n \n \n \n \n \n\n```\n\n#### Drag and drop\n\nRenders a value list with drag and drop capability between the items.\n\n```html\n\n \n \n \n \n \n\n```\n\n#### Label editing and single select\n\nRenders a value list with label editing and single select.\n\n```html\n\n \n \n \n \n \n \n\n```\n" }, "props": [ { "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": "dragEnabled", "type": "boolean", "mutable": false, "attr": "drag-enabled", "reflectToAttr": true, "docs": "When true, the items will be sortable via drag and drop.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "filterEnabled", "type": "boolean", "mutable": false, "attr": "filter-enabled", "reflectToAttr": true, "docs": "When true, an input appears at the top of the list that can be used by end users to filter items in the list.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "filterPlaceholder", "type": "string", "mutable": false, "attr": "filter-placeholder", "reflectToAttr": true, "docs": "Placeholder text for the filter input field.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": false }, { "name": "group", "type": "string", "mutable": false, "attr": "group", "reflectToAttr": false, "docs": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.", "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": "multiple", "type": "boolean", "mutable": false, "attr": "multiple", "reflectToAttr": true, "docs": "Multiple Works similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple items at a time.\nWhen false, only a single item can be selected at a time\nand selecting a new item will deselect any other selected items.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selectionFollowsFocus", "type": "boolean", "mutable": false, "attr": "selection-follows-focus", "reflectToAttr": false, "docs": "When true and single-selection is enabled, the selection will change when navigating items via the keyboard.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false } ], "methods": [ { "name": "getSelectedItems", "returns": { "type": "Promise>", "docs": "" }, "signature": "getSelectedItems() => Promise>", "parameters": [], "docs": "", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus(focusId?: ListFocusId) => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteListChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when any of the item selections have changed.", "docsTags": [] }, { "event": "calciteListOrderChange", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the order of the list has changed.", "docsTags": [] } ], "listeners": [ { "event": "calciteListItemRemove", "capture": false, "passive": false }, { "event": "calciteListItemChange", "capture": false, "passive": false }, { "event": "calciteListItemPropsChange", "capture": false, "passive": false }, { "event": "calciteListItemValueChange", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list." }, { "name": "menu-actions", "docs": "A slot for adding a button + menu combo for performing actions like sorting." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-filter", "calcite-scrim" ], "dependencyGraph": { "calcite-value-list": [ "calcite-filter", "calcite-scrim" ], "calcite-filter": [ "calcite-scrim", "calcite-icon" ], "calcite-scrim": [ "calcite-loader" ] } }, { "filePath": "./src/components/calcite-value-list-item/calcite-value-list-item.tsx", "encapsulation": "shadow", "tag": "calcite-value-list-item", "readme": "# calcite-value-list-item\n\n`calcite-value-list-item`s are cards contained in a `calcite-value-list`. They each can have a label and description, an icon and can have their label's be editable (inherited from `calcite-value-list`). The developer can disable or preselect each list item and give it a value.\n", "docs": "`calcite-value-list-item`s are cards contained in a `calcite-value-list`. They each can have a label and description, an icon and can have their label's be editable (inherited from `calcite-value-list`). The developer can disable or preselect each list item and give it a value.", "docsTags": [ { "text": "actions-end - A slot for adding actions or content to the end side of the item.", "name": "slot" }, { "text": "actions-start - A slot for adding actions or content to the start side of the item.", "name": "slot" } ], "usage": {}, "props": [ { "name": "description", "type": "string", "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "An optional description for this item. Will appear below the label text.", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When true, the item cannot be clicked and is visually muted", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "icon", "type": "ICON_TYPES.circle | ICON_TYPES.grip | ICON_TYPES.square", "mutable": false, "attr": "icon", "reflectToAttr": true, "docs": "Determines the icon SVG symbol that will be shown. Options are circle, square, grid or null.", "docsTags": [], "default": "null", "values": [ { "type": "ICON_TYPES.circle" }, { "type": "ICON_TYPES.grip" }, { "type": "ICON_TYPES.square" } ], "optional": true, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": true, "docs": "The main label for this item. Appears next to the icon.", "docsTags": [], "values": [ { "type": "string" } ], "optional": false, "required": true }, { "name": "metadata", "type": "{ [x: string]: unknown; }", "mutable": false, "reflectToAttr": false, "docs": "Used to provide additional metadata to an item, primarily used when the parent list has a filter.", "docsTags": [], "values": [ { "type": "{ [x: string]: unknown; }" } ], "optional": true, "required": false }, { "name": "removable", "type": "boolean", "mutable": false, "attr": "removable", "reflectToAttr": true, "docs": "Set this to true to display a remove action that removes the item from the list.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selected", "type": "boolean", "mutable": true, "attr": "selected", "reflectToAttr": true, "docs": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "value", "type": "any", "mutable": false, "attr": "value", "reflectToAttr": false, "docs": "The item's associated value.", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": true } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] }, { "name": "toggleSelected", "returns": { "type": "Promise", "docs": "" }, "signature": "toggleSelected(coerce?: boolean) => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteListItemRemove", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted whenever the remove button is pressed.", "docsTags": [] } ], "listeners": [ { "event": "calciteListItemChange", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "actions-end", "docs": "A slot for adding actions or content to the end side of the item." }, { "name": "actions-start", "docs": "A slot for adding actions or content to the start side of the item." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-icon", "calcite-pick-list-item" ], "dependencyGraph": { "calcite-value-list-item": [ "calcite-icon", "calcite-pick-list-item" ], "calcite-pick-list-item": [ "calcite-icon", "calcite-action" ], "calcite-action": [ "calcite-loader", "calcite-icon" ] } } ] }