{ "timestamp": "2022-05-10T19:59:52", "compiler": { "name": "@stencil/core", "version": "2.15.1", "typescriptVersion": "4.5.4" }, "components": [ { "filePath": "./src/components/accordion/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": [ { "name": "slot", "text": "- A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however calcite-accordion-item`s can." } ], "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": [ { "name": "", "docs": "A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however calcite-accordion-item`s can." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/accordion-item/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": [ { "name": "slot", "text": "- A slot for adding custom content, including nested `calcite-accordion-item`s." } ], "usage": {}, "props": [ { "name": "active", "type": "boolean", "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "Indicates whether the item is active.", "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": [ { "name": "", "docs": "A slot for adding custom content, including nested `calcite-accordion-item`s." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-accordion-item": [ "calcite-icon" ] } }, { "filePath": "./src/components/action/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": [ { "name": "slot", "text": "- A slot for adding a `calcite-icon`." } ], "usage": { "Clear-appearance": "Renders a `calcite-action` that has a clear background.\n\n```html\n\n```\n", "With-text-displayed": "Renders a `calcite-action` that displays text along side an icon and a tooltip label.\n\n```html\n\n```\n", "Without-text-displayed": "Renders a `calcite-action` that displays only an icon and a tooltip label.\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": "Optionally specify the horizontal alignment of button elements with text content.", "docsTags": [], "values": [ { "value": "center", "type": "string" }, { "value": "end", "type": "string" }, { "value": "start", "type": "string" } ], "optional": true, "required": false }, { "name": "appearance", "type": "\"clear\" | \"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": "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": [ { "name": "default", "text": "\"Loading\"" } ], "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": "Sets focus on the component.", "docsTags": [] } ], "events": [ { "event": "calciteActionClick", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the action has been clicked.", "docsTags": [ { "name": "deprecated", "text": "use onClick instead." } ], "deprecation": "use onClick instead." } ], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding a `calcite-icon`." } ], "parts": [], "dependents": [ "calcite-action-bar", "calcite-action-group", "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-group": [ "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/action-bar/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": [ { "name": "slot", "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." } ], "usage": { "Basic": "Renders `calcite-action`s that stick to the top of the bar.\n\n```html\n\n \n \n\n```\n", "Bottom-actions": "The 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": "Renders with a tooltip on the expand action.\n\n```html\n\n Expand\n \n\n```\n", "With-grouping": "Renders 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" }, "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": [], "default": "false", "values": [ { "type": "boolean" } ], "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": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "Specifies the size of the expand action.", "docsTags": [], "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(focusId?: \"expand-toggle\") => Promise", "parameters": [], "docs": "Sets focus on the component.", "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" ], "dependencyGraph": { "calcite-action-bar": [ "calcite-action-group", "calcite-action" ], "calcite-action-group": [ "calcite-action-menu", "calcite-action" ], "calcite-action-menu": [ "calcite-action", "calcite-popover" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-popover": [ "calcite-action", "calcite-icon" ] } }, { "filePath": "./src/components/action-group/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": [ { "name": "slot", "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." } ], "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 }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "Specifies the size of the action-menu.", "docsTags": [], "values": [ { "value": "l", "type": "string" }, { "value": "m", "type": "string" }, { "value": "s", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--calcite-action-group-columns", "annotation": "prop", "docs": "sets number of grid-template-columns when layout is grid" } ], "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", "calcite-action" ], "dependencyGraph": { "calcite-action-group": [ "calcite-action-menu", "calcite-action" ], "calcite-action-menu": [ "calcite-action", "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/action-menu/action-menu.tsx", "encapsulation": "shadow", "tag": "calcite-action-menu", "readme": "# calcite-action-menu\n", "docs": "", "docsTags": [ { "name": "slot", "text": "- A slot for adding `calcite-action`s." }, { "name": "slot", "text": "trigger - A slot for adding a `calcite-action` to trigger opening the menu." }, { "name": "slot", "text": "tooltip - A slot for adding an tooltip for the menu." } ], "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": "ComputedPlacement[]", "mutable": false, "reflectToAttr": false, "docs": "Defines the available placements that can be used when a flip occurs.", "docsTags": [], "values": [ { "type": "ComputedPlacement[]" } ], "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": [ { "name": "see", "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)" } ], "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 menu trigger action.", "docsTags": [], "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": "Sets focus on the component.", "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." }, { "name": "trigger", "docs": "A slot for adding a `calcite-action` to trigger opening the menu." } ], "parts": [], "dependents": [ "calcite-action-group", "calcite-block", "calcite-panel" ], "dependencies": [ "calcite-action", "calcite-popover" ], "dependencyGraph": { "calcite-action-menu": [ "calcite-action", "calcite-popover" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-popover": [ "calcite-action", "calcite-icon" ], "calcite-action-group": [ "calcite-action-menu" ], "calcite-block": [ "calcite-action-menu" ], "calcite-panel": [ "calcite-action-menu" ] } }, { "filePath": "./src/components/action-pad/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": [ { "name": "slot", "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." } ], "usage": { "Basic": "Renders a basic action pad with `calcite-action`s.\n\n```html\n\n \n \n\n```\n", "Tooltip": "Renders an action pad with a tooltip on the expand action.\n\n```html\n\n \n\nExpand\n\n```\n", "With-grouping": "Renders 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" }, "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 }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "Specifies the size of the expand action.", "docsTags": [], "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(focusId?: \"expand-toggle\") => Promise", "parameters": [], "docs": "Sets focus on the component.", "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" ], "dependencyGraph": { "calcite-action-pad": [ "calcite-action-group", "calcite-action" ], "calcite-action-group": [ "calcite-action-menu", "calcite-action" ], "calcite-action-menu": [ "calcite-action", "calcite-popover" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-popover": [ "calcite-action", "calcite-icon" ] } }, { "filePath": "./src/components/alert/alert.tsx", "encapsulation": "shadow", "tag": "calcite-alert", "readme": "# calcite-alert\n", "docs": "", "docsTags": [ { "name": "slot", "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.)" } ], "usage": { "Basic": "A single instance of an alert. Multiple alerts will aggregate in a queue.\n\n```html\n\n
Title of alert
\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": [ { "name": "default", "text": "\"Close\"" } ], "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": "placement", "type": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"", "mutable": false, "attr": "placement", "reflectToAttr": false, "docs": "specify the placement of the alert", "docsTags": [], "default": "\"bottom\"", "values": [ { "value": "bottom", "type": "string" }, { "value": "bottom-end", "type": "string" }, { "value": "bottom-start", "type": "string" }, { "value": "top", "type": "string" }, { "value": "top-end", "type": "string" }, { "value": "top-start", "type": "string" } ], "optional": false, "required": false }, { "name": "scale", "type": "\"l\" | \"m\" | \"s\"", "mutable": false, "attr": "scale", "reflectToAttr": true, "docs": "specify the scale of the alert, 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": "Sets focus on the component.", "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": [ { "name": "--calcite-alert-width", "annotation": "prop", "docs": "the width of the alert" } ], "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/avatar/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": "The JSON sample user below is returned from a [search for users](https://developers.arcgis.com/rest/users-groups-and-items/user-search.htm). You can create an avatar for Ron by passing these properties directly to the avatar component.\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\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\n```html\n\n\n```\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/block/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": [ { "name": "slot", "text": "- A slot for adding content to the block." }, { "name": "slot", "text": "icon - A slot for adding a leading header icon." }, { "name": "slot", "text": "control - A slot for adding a single HTML input element in a header." }, { "name": "slot", "text": "header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown." } ], "usage": { "Always-open": "Renders a header and content that remains open - no collapsible option.\n\n```html\n\n
Father or Son?
\n\n```\n", "Basic": "Renders a basic, non-collapsible block.\n\n```html\n \n```\n", "Collapsible": "Renders a header with a clickable icon to toggle the block open and closed.\n\n```html\n\n \n\n```\n", "Header-with-control": "Renders a header and control with a slot for adding a single HTML element (in the header).\n\n```html\n\n \n\n```\n", "Header-with-icon": "Renders a header and icon with the icon.\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": true }, { "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": "Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.", "docsTags": [], "default": "TEXT.collapse", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlExpand", "type": "string", "mutable": false, "attr": "intl-expand", "reflectToAttr": false, "docs": "Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.", "docsTags": [], "default": "TEXT.expand", "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": [ { "name": "default", "text": "\"Loading\"" } ], "default": "TEXT.loading", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlOptions", "type": "string", "mutable": false, "attr": "intl-options", "reflectToAttr": false, "docs": "Text string used for the actions menu", "docsTags": [ { "name": "default", "text": "\"Options\"" } ], "default": "TEXT.options", "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": "header-menu-actions", "docs": "a slot for adding an overflow menu with actions inside a dropdown." }, { "name": "icon", "docs": "A slot for adding a leading header icon." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-scrim", "calcite-icon", "calcite-handle", "calcite-loader", "calcite-action-menu" ], "dependencyGraph": { "calcite-block": [ "calcite-scrim", "calcite-icon", "calcite-handle", "calcite-loader", "calcite-action-menu" ], "calcite-scrim": [ "calcite-loader" ], "calcite-handle": [ "calcite-icon" ], "calcite-action-menu": [ "calcite-action", "calcite-popover" ], "calcite-action": [ "calcite-loader", "calcite-icon" ], "calcite-popover": [ "calcite-action", "calcite-icon" ] } }, { "filePath": "./src/components/block-section/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": [ { "name": "slot", "text": "- A slot for adding content to the block section." } ], "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": [], "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/button/button.tsx", "encapsulation": "shadow", "tag": "calcite-button", "readme": "# calcite-button\n", "docs": "", "docsTags": [ { "name": "slot", "text": "- A slot for adding text." } ], "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": "Any 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/graph/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": "colorStops", "type": "ColorStop[]", "mutable": false, "reflectToAttr": false, "docs": "Array of values describing a single color stop ([offset, color, opacity])\nThese color stops should be sorted by offset value", "docsTags": [], "values": [ { "type": "ColorStop[]" } ], "optional": false, "required": false }, { "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": "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": "max", "type": "number", "mutable": false, "attr": "max", "reflectToAttr": false, "docs": "Highest point of the range", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": true }, { "name": "min", "type": "number", "mutable": false, "attr": "min", "reflectToAttr": false, "docs": "Lowest point of the range", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": true } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [ "calcite-slider" ], "dependencies": [], "dependencyGraph": { "calcite-slider": [ "calcite-graph" ] } }, { "filePath": "./src/components/handle/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": "Sets focus on the component.", "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/icon/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": [ { "name": "--calcite-ui-icon-color", "annotation": "prop", "docs": "the color of the icon. Defaults to 'currentColor'." } ], "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-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-tip-manager", "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-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-tip-manager": [ "calcite-icon" ], "calcite-tree-item": [ "calcite-icon" ], "calcite-value-list-item": [ "calcite-icon" ] } }, { "filePath": "./src/components/inline-editable/inline-editable.tsx", "encapsulation": "shadow", "tag": "calcite-inline-editable", "readme": "# calcite-inline-editable\n", "docs": "", "docsTags": [ { "name": "slot", "text": "- A slot for adding a `calcite-input`." } ], "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": [ { "name": "default", "text": "\"Cancel\"" } ], "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": [ { "name": "default", "text": "\"Save\"" } ], "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": [ { "name": "default", "text": "\"Click to edit\"" } ], "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": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "", "docsTags": [] } ], "events": [ { "event": "calciteInlineEditableEditCancel", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the cancel button gets clicked.", "docsTags": [] }, { "event": "calciteInlineEditableEditConfirm", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the check button gets clicked.", "docsTags": [] } ], "listeners": [ { "event": "calciteInputBlur", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding a `calcite-input`." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-button" ], "dependencyGraph": { "calcite-inline-editable": [ "calcite-button" ], "calcite-button": [ "calcite-loader", "calcite-icon" ] } }, { "filePath": "./src/components/input/input.tsx", "encapsulation": "shadow", "tag": "calcite-input", "readme": "# calcite-input\n", "docs": "", "docsTags": [ { "name": "slot", "text": "action - A slot for positioning a button next to an input" } ], "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(\"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": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "is the input disabled", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "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": "hidden", "type": "boolean", "mutable": false, "attr": "hidden", "reflectToAttr": false, "docs": "when true, the component will not be visible", "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": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "intlClear", "type": "string", "mutable": false, "attr": "intl-clear", "reflectToAttr": false, "docs": "A text label that will appear on the clear button for screen readers.", "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": [ { "name": "default", "text": "\"Loading\"" } ], "default": "COMMON_TEXT.loading", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "label", "type": "string", "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "Applies to the aria-label attribute on the button or hyperlink", "docsTags": [], "values": [ { "type": "string" } ], "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": [ { "name": "deprecated", "text": "use maxLength instead" } ], "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": false, "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": "readOnly", "type": "boolean", "mutable": false, "attr": "read-only", "reflectToAttr": false, "docs": "When true, a field cannot be modified.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "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": false, "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": [], "default": "\"\"", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "Sets focus on the component.", "docsTags": [] } ], "events": [ { "event": "calciteInputChange", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "This event fires each time a new value is typed and committed.", "docsTags": [] }, { "event": "calciteInputInput", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "This event fires each time a new value is typed.", "docsTags": [] } ], "listeners": [], "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-filter", "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-filter": [ "calcite-input" ], "calcite-input-date-picker": [ "calcite-input" ], "calcite-input-time-picker": [ "calcite-input" ] } }, { "filePath": "./src/components/input-date-picker/input-date-picker.tsx", "encapsulation": "shadow", "tag": "calcite-input-date-picker", "readme": "# calcite-input-date-picker\n", "docs": "", "docsTags": [], "usage": { "Basic": "```html\n
\n \n Date\n \n \n
\n```\n" }, "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": "disabled", "type": "boolean", "mutable": false, "attr": "disabled", "reflectToAttr": true, "docs": "When false, the component won't be interactive.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "end", "type": "string", "mutable": true, "attr": "end", "reflectToAttr": false, "docs": "Selected end date", "docsTags": [ { "name": "deprecated", "text": "use value instead" } ], "deprecation": "use value instead", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "endAsDate", "type": "Date", "mutable": true, "reflectToAttr": false, "docs": "Selected end date as full date object", "docsTags": [ { "name": "deprecated", "text": "use valueAsDate instead" } ], "deprecation": "use valueAsDate instead", "values": [ { "type": "Date" } ], "optional": true, "required": false }, { "name": "flipPlacements", "type": "ComputedPlacement[]", "mutable": false, "reflectToAttr": false, "docs": "Defines the available placements that can be used when a flip occurs.", "docsTags": [], "values": [ { "type": "ComputedPlacement[]" } ], "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": [ { "name": "default", "text": "\"Next month\"" } ], "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": [ { "name": "default", "text": "\"Previous month\"" } ], "default": "TEXT.prevMonth", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "intlYear", "type": "string", "mutable": false, "attr": "intl-year", "reflectToAttr": false, "docs": "Localized string for \"year\" (used for aria label)", "docsTags": [ { "name": "default", "text": "\"Year\"" } ], "default": "TEXT.year", "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": true, "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": true, "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": "name", "type": "string", "mutable": false, "attr": "name", "reflectToAttr": false, "docs": "The picker's name. Gets submitted with the form.", "docsTags": [], "values": [ { "type": "string" } ], "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": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"", "mutable": false, "attr": "placement", "reflectToAttr": true, "docs": "Determines where the date-picker component will be positioned relative to the input.", "docsTags": [ { "name": "default", "text": "\"bottom-leading\"" } ], "default": "defaultMenuPlacement", "values": [ { "value": "bottom", "type": "string" }, { "value": "bottom-end", "type": "string" }, { "value": "bottom-leading", "type": "string" }, { "value": "bottom-start", "type": "string" }, { "value": "bottom-trailing", "type": "string" }, { "value": "top", "type": "string" }, { "value": "top-end", "type": "string" }, { "value": "top-leading", "type": "string" }, { "value": "top-start", "type": "string" }, { "value": "top-trailing", "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": false, "required": false }, { "name": "range", "type": "boolean", "mutable": false, "attr": "range", "reflectToAttr": true, "docs": "Range mode activation", "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 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": true, "attr": "start", "reflectToAttr": false, "docs": "Selected start date", "docsTags": [ { "name": "deprecated", "text": "use value instead" } ], "deprecation": "use value instead", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "startAsDate", "type": "Date", "mutable": true, "reflectToAttr": false, "docs": "Selected start date as full date object", "docsTags": [ { "name": "deprecated", "text": "use valueAsDate instead" } ], "deprecation": "use valueAsDate instead", "values": [ { "type": "Date" } ], "optional": true, "required": false }, { "name": "value", "type": "string | string[]", "mutable": true, "attr": "value", "reflectToAttr": false, "docs": "Selected date", "docsTags": [], "values": [ { "type": "string" }, { "type": "string[]" } ], "optional": false, "required": false }, { "name": "valueAsDate", "type": "Date | Date[]", "mutable": true, "reflectToAttr": false, "docs": "Selected date as full date object", "docsTags": [], "values": [ { "type": "Date" }, { "type": "Date[]" } ], "optional": true, "required": false } ], "methods": [ { "name": "reposition", "returns": { "type": "Promise", "docs": "" }, "signature": "reposition() => Promise", "parameters": [], "docs": "Updates the position of the component.", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "Updates the position of the component.", "docsTags": [] } ], "events": [ { "event": "calciteDatePickerChange", "detail": "Date", "bubbles": true, "cancelable": true, "composed": true, "docs": "Trigger calcite date change when a user changes the date.", "docsTags": [ { "name": "deprecated", "text": "use `calciteInputDatePickerChange` instead." } ], "deprecation": "use `calciteInputDatePickerChange` instead." }, { "event": "calciteDatePickerRangeChange", "detail": "DateRangeChange", "bubbles": true, "cancelable": true, "composed": true, "docs": "Trigger calcite date change when a user changes the date range.", "docsTags": [ { "name": "see", "text": "[DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)" }, { "name": "deprecated", "text": "use `calciteInputDatePickerChange` instead." } ], "deprecation": "use `calciteInputDatePickerChange` instead." }, { "event": "calciteInputDatePickerChange", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "This event fires when the input date picker value changes.", "docsTags": [] } ], "listeners": [ { "event": "calciteDatePickerChange", "capture": false, "passive": false }, { "event": "calciteDatePickerRangeChange", "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/input-message/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": [ { "name": "slot", "text": "- A slot for adding text." } ], "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": "Indicates whether the message is displayed.", "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\"", "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": [ { "name": "deprecated", "text": "\"floating\" type is no longer supported" } ], "deprecation": "\"floating\" type is no longer supported", "values": [ { "value": "default", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--calcite-input-message-spacing-value", "annotation": "prop", "docs": "the top margin above the input-message." } ], "slots": [ { "name": "", "docs": "A slot for adding text." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-icon" ], "dependencyGraph": { "calcite-input-message": [ "calcite-icon" ] } }, { "filePath": "./src/components/input-time-picker/input-time-picker.tsx", "encapsulation": "shadow", "tag": "calcite-input-time-picker", "readme": "# calcite-input-time-picker\n", "docs": "", "docsTags": [], "usage": { "Basic": "```html\n\n```\n" }, "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": false, "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": 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": false, "required": false }, { "name": "placement", "type": "Placement | PlacementRtl | VariationRtl", "mutable": false, "attr": "placement", "reflectToAttr": true, "docs": "Determines where the popover will be positioned relative to the input.", "docsTags": [ { "name": "see", "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)" } ], "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": "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 (seconds) 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 in UTC (always 24-hour format)", "docsTags": [], "default": "null", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "reposition", "returns": { "type": "Promise", "docs": "" }, "signature": "reposition() => Promise", "parameters": [], "docs": "Updates the position of the component.", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "Sets focus on the component.", "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": "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/label/label.tsx", "encapsulation": "shadow", "tag": "calcite-label", "readme": "# calcite-label\n\nRenders a `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": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "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": "", "docs": "A slot for adding text and a hyperlink." }, { "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/tip-group/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": [ { "name": "slot", "text": "- A slot for adding `calcite-tip`s." } ], "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": [ { "name": "", "docs": "A slot for adding `calcite-tip`s." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/tip-manager/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": [ { "name": "slot", "text": "- A slot for adding `calcite-tip`s." } ], "usage": { "Basic": "Renders a tip manager using a group of tips as well as a single tip.\n\n```html\n\n \n \n \"This\n

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

\n

\n This is another slotted paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat.\n

\n A calcite-link\n \n \n \n \n \n\n```\n" }, "props": [ { "name": "closed", "type": "boolean", "mutable": true, "attr": "closed", "reflectToAttr": true, "docs": "Closed state of 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": "Selects the next tip to display", "docsTags": [] }, { "name": "previousTip", "returns": { "type": "Promise", "docs": "" }, "signature": "previousTip() => Promise", "parameters": [], "docs": "Selects the previous tip to display", "docsTags": [] } ], "events": [ { "event": "calciteTipManagerClose", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the `calcite-tip-manager` has been closed.", "docsTags": [] }, { "event": "calciteTipManagerToggle", "detail": "any", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emitted when the `calcite-tip-manager` has been toggled open or closed.", "docsTags": [ { "name": "deprecated", "text": "use calciteTipManagerClose instead." } ], "deprecation": "use calciteTipManagerClose instead." } ], "listeners": [], "styles": [ { "name": "--calcite-tip-manager-height", "annotation": "prop", "docs": "the maximum height of the tip-manager" }, { "name": "--calcite-tip-max-width", "annotation": "prop", "docs": "the maximum width of a slotted tip within tip-manager" } ], "slots": [ { "name": "", "docs": "A slot for adding `calcite-tip`s." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-action", "calcite-icon" ], "dependencyGraph": { "calcite-tip-manager": [ "calcite-action", "calcite-icon" ], "calcite-action": [ "calcite-loader", "calcite-icon" ] } }, { "filePath": "./src/components/tooltip/tooltip.tsx", "encapsulation": "shadow", "tag": "calcite-tooltip", "readme": "# calcite-tooltip\n", "docs": "", "docsTags": [ { "name": "slot", "text": "- A slot for adding text." } ], "usage": { "Basic": "```html\nThis is the message of the tooltip\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" }, "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 tooltip away from the reference element.", "docsTags": [ { "name": "default", "text": "6" } ], "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 tooltip 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": [ { "name": "see", "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)" } ], "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. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.", "docsTags": [], "values": [ { "type": "HTMLElement" }, { "type": "string" } ], "optional": false, "required": false } ], "methods": [ { "name": "reposition", "returns": { "type": "Promise", "docs": "" }, "signature": "reposition() => Promise", "parameters": [], "docs": "Updates the position of the component.", "docsTags": [] } ], "events": [], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding text." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/tooltip-manager/tooltip-manager.tsx", "encapsulation": "shadow", "tag": "calcite-tooltip-manager", "readme": "# calcite-tooltip-manager\n", "docs": "", "docsTags": [ { "name": "slot", "text": "- A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property." }, { "name": "deprecated", "text": "No longer required for tooltip usage." } ], "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": [ { "name": "default", "text": "`[data-calcite-tooltip-reference]`" } ], "default": "\"[data-calcite-tooltip-reference]\"", "values": [ { "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [ { "name": "", "docs": "A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {}, "deprecation": "No longer required for tooltip usage." }, { "filePath": "./src/components/tree/tree.tsx", "encapsulation": "shadow", "tag": "calcite-tree", "readme": "# calcite-tree\n", "docs": "", "docsTags": [ { "name": "slot", "text": "- A slot for calcite-tree-item elements." } ], "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": false, "attr": "input-enabled", "reflectToAttr": false, "docs": "Display input", "docsTags": [ { "name": "deprecated", "text": "Use \"ancestors\" selection-mode for checkbox input." } ], "default": "false", "deprecation": "Use \"ancestors\" selection-mode for checkbox input.", "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": "\"l\" | \"m\" | \"s\"", "mutable": true, "attr": "scale", "reflectToAttr": true, "docs": "Specify the scale of the tree.", "docsTags": [], "default": "\"m\"", "values": [ { "value": "l", "type": "string" }, { "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.", "docsTags": [ { "name": "default", "text": "\"single\"" }, { "name": "see", "text": "[TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)" } ], "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": "Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's \"detail\" property.", "docsTags": [ { "name": "see", "text": "[TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)" } ] } ], "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 }, { "event": "keydown", "capture": false, "passive": false } ], "styles": [], "slots": [ { "name": "", "docs": "A slot for calcite-tree-item elements." } ], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "./src/components/tree-item/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": [ { "name": "slot", "text": "- A slot for adding content to the item." }, { "name": "slot", "text": "children - A slot for adding nested calcite-tree elements." } ], "usage": {}, "props": [ { "name": "expanded", "type": "boolean", "mutable": true, "attr": "expanded", "reflectToAttr": true, "docs": "Expanded state of the item.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selected", "type": "boolean", "mutable": true, "attr": "selected", "reflectToAttr": true, "docs": "Selected state of the item.", "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": [ { "name": "", "docs": "A slot for adding content to the item." }, { "name": "children", "docs": "A slot for adding nested calcite-tree elements." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-icon", "calcite-checkbox" ], "dependencyGraph": { "calcite-tree-item": [ "calcite-icon", "calcite-checkbox" ] } }, { "filePath": "./src/components/value-list/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": [ { "name": "slot", "text": "- A slot for adding calcite-value-list-item elements. List items are displayed as a vertical list." }, { "name": "slot", "text": "menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting." } ], "usage": { "Basic": "Renders 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", "Drag-and-drop": "Renders a value list with drag and drop capability between the items.\n\n```html\n\n \n \n \n \n \n\n```\n", "Label-editing-and-single-select": "Renders 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, prevents user interaction. This state shows list items grayed out and with lower opacity.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "dragEnabled", "type": "boolean", "mutable": false, "attr": "drag-enabled", "reflectToAttr": true, "docs": "When true, list items are sortable via a draggable button.", "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 list items.", "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's 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": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple list items at a time.\nWhen false, only a single list item can be selected at a time,\nand selecting a new list item will deselect any other selected list 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 changes when navigating list 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": "Returns the currently selected items", "docsTags": [] }, { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus(focusId?: ListFocusId) => Promise", "parameters": [], "docs": "Sets focus on the component.", "docsTags": [] } ], "events": [ { "event": "calciteListChange", "detail": "Map", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emits when any of the list item selections have changed.", "docsTags": [] }, { "event": "calciteListOrderChange", "detail": "any[]", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emits when the order of the list has changed.", "docsTags": [] } ], "listeners": [ { "event": "focusout", "capture": false, "passive": false }, { "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-value-list-item elements. List items are displayed as a vertical list." }, { "name": "menu-actions", "docs": "A slot for adding a button and menu combination for performing actions, such as sorting." } ], "parts": [], "dependents": [], "dependencies": [ "calcite-filter", "calcite-scrim" ], "dependencyGraph": { "calcite-value-list": [ "calcite-filter", "calcite-scrim" ], "calcite-filter": [ "calcite-input" ], "calcite-input": [ "calcite-progress", "calcite-icon" ], "calcite-scrim": [ "calcite-loader" ] } }, { "filePath": "./src/components/value-list-item/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": [ { "name": "slot", "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." } ], "usage": {}, "props": [ { "name": "description", "type": "string", "mutable": false, "attr": "description", "reflectToAttr": true, "docs": "An optional description for the list item that displays 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 list item cannot be clicked and is visually muted.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "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, grip or null.", "docsTags": [ { "name": "see", "text": "[ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)" } ], "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 the list 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": "Provides additional metadata to a list item. Primary use is for a filter on the parent list.", "docsTags": [], "values": [ { "type": "{ [x: string]: unknown; }" } ], "optional": true, "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 }, { "name": "removable", "type": "boolean", "mutable": false, "attr": "removable", "reflectToAttr": true, "docs": "When true, adds an action to remove the list item.", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": false, "required": false }, { "name": "selected", "type": "boolean", "mutable": true, "attr": "selected", "reflectToAttr": true, "docs": "When true, preselects the list 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 list item's associated value.", "docsTags": [], "values": [ { "type": "any" } ], "optional": false, "required": true } ], "methods": [ { "name": "setFocus", "returns": { "type": "Promise", "docs": "" }, "signature": "setFocus() => Promise", "parameters": [], "docs": "Set focus on the component.", "docsTags": [] }, { "name": "toggleSelected", "returns": { "type": "Promise", "docs": "" }, "signature": "toggleSelected(coerce?: boolean) => Promise", "parameters": [], "docs": "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": "calciteListItemRemove", "detail": "void", "bubbles": true, "cancelable": true, "composed": true, "docs": "Emits when 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" ] } } ] }