{ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", "name": "@arcgis/instant-apps-components", "version": "4.34.9", "description-markup": "markdown", "contributions": { "html": { "elements": [ { "name": "instant-apps-app-error", "description": "Error message UI\n--\n\n### Methods\n- `clearErrorMessage(): Promise` - clears the error message string from the live region\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [], "events": [], "js": { "properties": [], "events": [] } }, { "name": "instant-apps-app-guide", "description": "The `instant-apps-app-guide` is a component containing page(s) that describe features of a tool or Instant App.\n--\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "header", "description": "Show a header with the title of the current page", "default": "true", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "data", "description": "A collection of AppGuidePage objects that represent the content of the component", "type": "Array" }, { "name": "header", "description": "Show a header with the title of the current page", "type": "boolean" } ], "events": [] } }, { "name": "instant-apps-buffer", "description": "Instant Apps component that provides a compound UI for rendering Graphics of buffered input geometries.\n--\n\n### Methods\n- `clearBufferLayer(): Promise` - Removes all Graphics from the `bufferLayer`\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `setFocus(): Promise` - sets DOM focus on the first focusable element in the component", "attributes": [ { "name": "buffer-color", "description": "the buffer Graphic's fill color", "default": "[0, 0, 0, 0.25] - black, semitransparent", "value": { "type": "string" } }, { "name": "buffer-distance", "description": "The distance value of the rendered buffer(s). The value must be >= `bufferMinDistance` and <= `bufferMaxDistance`", "value": { "type": "number" } }, { "name": "buffer-input-step", "description": "The `step` value for the buffer distance `HTMLCalciteInputNumberElement`'s `step` property", "value": { "type": "number" } }, { "name": "buffer-max-distance", "description": "The maximum buffer distance value, must be >= `bufferMinDistance`.", "value": { "type": "number" } }, { "name": "buffer-min-distance", "description": "The minimum buffer distance value, must be >= `0` and <= `bufferMaxDistance`.", "value": { "type": "number" } }, { "name": "buffer-outline-color", "description": "the buffer Graphic's outline color", "value": { "type": "string" } }, { "name": "buffer-outline-width", "description": "the buffer Graphic's outline width", "default": "0.75", "value": { "type": "number" } }, { "name": "buffer-style", "description": "the buffer Graphic's fill style", "default": "\"solid\"", "value": { "type": [ "\"backward-diagonal\"", "\"cross\"", "\"diagonal-cross\"", "\"forward-diagonal\"", "\"horizontal\"", "\"none\"", "\"solid\"", "\"vertical\"" ] } }, { "name": "buffer-unit", "description": "the unit of the buffer distance, must be a valid `BufferDistanceUnit` type", "value": { "type": [ "\"feet\"", "\"kilometers\"", "\"meters\"", "\"miles\"", "\"us-feet\"", "\"yards\"" ] } }, { "name": "disabled", "description": "Whether the component's UI controls are in a disabled state and cannot be operated", "default": "false", "value": { "type": "boolean" } }, { "name": "geodesic-buffer-enabled", "description": "Are we rendering a [Geodesic buffer](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-operators-geodesicBufferOperator.html), not a [Planar buffer](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-operators-bufferOperator.html).", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "bufferColor", "description": "the buffer Graphic's fill color", "type": "ReadonlyArray | string | {\n r?: number | undefined;\n g?: number | undefined;\n b?: number | undefined;\n a?: number | undefined;\n}" }, { "name": "bufferDistance", "description": "The distance value of the rendered buffer(s). The value must be >= `bufferMinDistance` and <= `bufferMaxDistance`", "type": "number" }, { "name": "bufferGraphicSymbol", "type": "SimpleFillSymbol" }, { "name": "bufferInputStep", "description": "The `step` value for the buffer distance `HTMLCalciteInputNumberElement`'s `step` property", "type": "number" }, { "name": "bufferLayer", "description": "the layer in which buffer Graphics will be rendered in. Will be added to the `view` property", "type": "GraphicsLayer" }, { "name": "bufferMaxDistance", "description": "The maximum buffer distance value, must be >= `bufferMinDistance`.", "type": "number" }, { "name": "bufferMinDistance", "description": "The minimum buffer distance value, must be >= `0` and <= `bufferMaxDistance`.", "type": "number" }, { "name": "bufferOutlineColor", "description": "the buffer Graphic's outline color", "type": "ReadonlyArray | string | {\n r?: number | undefined;\n g?: number | undefined;\n b?: number | undefined;\n a?: number | undefined;\n}" }, { "name": "bufferOutlineWidth", "description": "the buffer Graphic's outline width", "type": "number" }, { "name": "bufferStyle", "description": "the buffer Graphic's fill style", "type": "\"backward-diagonal\" | \"cross\" | \"diagonal-cross\" | \"forward-diagonal\" | \"horizontal\" | \"none\" | \"solid\" | \"vertical\"" }, { "name": "bufferUnit", "description": "the unit of the buffer distance, must be a valid `BufferDistanceUnit` type", "type": "\"feet\" | \"kilometers\" | \"meters\" | \"miles\" | \"us-feet\" | \"yards\"" }, { "name": "disabled", "description": "Whether the component's UI controls are in a disabled state and cannot be operated", "type": "boolean" }, { "name": "geodesicBufferEnabled", "description": "Are we rendering a [Geodesic buffer](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-operators-geodesicBufferOperator.html), not a [Planar buffer](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-operators-bufferOperator.html).", "type": "boolean" }, { "name": "inputGraphics", "description": "an array with one or more `Graphic`s containing geometries to be buffered by the component", "type": "Array" }, { "name": "readyToBuffer", "type": "boolean" }, { "name": "view", "description": "a reference to the `inputGraphics` property's `MapView` or `SceneView`", "type": "MapView | SceneView" } ], "events": [] } }, { "name": "instant-apps-control-panel", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **components** - A slot for all the components this control panel manages.", "attributes": [], "slots": [ { "name": "components", "description": "A slot for all the components this control panel manages." } ], "events": [], "js": { "properties": [ { "name": "components", "description": "Determine which widgets or components to display in the control panel", "type": "Array" }, { "name": "view", "description": "A reference to the MapView or SceneView", "type": "MapView | SceneView" } ], "events": [] } }, { "name": "instant-apps-create", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--instant-apps-create-action-background** - Popup's trigger button's background color. \n- **--instant-apps-create-action-background-hover** - Popup's trigger button's background color on hover. \n- **--instant-apps-create-action-background-press** - Popup's trigger button's background color on press. \n- **--instant-apps-create-action-width** - Popup's trigger button's width. \n- **--instant-apps-create-action-height** - Popup's trigger button's height. \n- **--instant-apps-create-action-icon-color** - Popup's trigger button's icon color. \n- **--instant-apps-create-action-icon-hover-color** - Popup's trigger button's icon color when hovered over. \n- **--instant-apps-create-background** - Create's container background color. \n- **--instant-apps-create-text-color** - Create's container text color. \n- **--instant-apps-create-popover-width** - Create's popover container width. ", "attributes": [ { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "default": "\"inline\"", "value": { "type": [ "\"inline\"", "\"popover\"" ] } }, { "name": "popover-icon", "description": "Update popover button icon.", "default": "\"grid\"", "value": { "type": "string" } }, { "name": "popover-placement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "default": "\"auto\"", "value": { "type": [ "\"auto\"", "\"auto-end\"", "\"auto-start\"", "\"bottom\"", "\"bottom-end\"", "\"bottom-start\"", "\"leading\"", "\"leading-end\"", "\"leading-start\"", "\"left\"", "\"left-end\"", "\"left-start\"", "\"right\"", "\"right-end\"", "\"right-start\"", "\"top\"", "\"top-end\"", "\"top-start\"", "\"trailing\"", "\"trailing-end\"", "\"trailing-start\"" ] } }, { "name": "popover-positioning", "description": "Determines the type of positioning to use for the overlaid content. Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's position CSS property is `\"fixed\"`.", "default": "\"absolute\"", "value": { "type": [ "\"absolute\"", "\"fixed\"" ] } }, { "name": "show-header", "description": "Show header with title and subtitle", "default": "true", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "content", "description": "Content item to create with", "type": "PortalGroup | WebMap | WebScene" }, { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "type": "\"inline\" | \"popover\"" }, { "name": "options", "type": "Array" }, { "name": "popoverIcon", "description": "Update popover button icon.", "type": "string" }, { "name": "popoverPlacement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\"" }, { "name": "popoverPositioning", "description": "Determines the type of positioning to use for the overlaid content. Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's position CSS property is `\"fixed\"`.", "type": "\"absolute\" | \"fixed\"" }, { "name": "portal", "type": "Portal" }, { "name": "showHeader", "description": "Show header with title and subtitle", "type": "boolean" } ], "events": [] } }, { "name": "instant-apps-export", "description": "### Events\n- **afterExport** - Emits after export is complete.\n- **exportOutputUpdated** - Emits when the instant-apps-export's output prop is updated after the \"Export\" button is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--instant-apps-export-action-background** - Popup's trigger button's background color. \n- **--instant-apps-export-action-background-hover** - Popup's trigger button's background color on hover. \n- **--instant-apps-export-action-background-press** - Popup's trigger button's background color on press. \n- **--instant-apps-export-action-width** - Popup's trigger button's width. \n- **--instant-apps-export-action-height** - Popup's trigger button's height. \n- **--instant-apps-export-action-icon-color** - Popup's trigger button's icon color. \n- **--instant-apps-export-action-icon-hover-color** - Popup's trigger button's icon color when hovered over. \n- **--instant-apps-export-background** - Export's container background color. \n- **--instant-apps-export-text-color** - Export's container text color. \n- **--instant-apps-export-popover-width** - Export's popover container width. ", "attributes": [ { "name": "clone-extra-content", "description": "When `false`, the extra content will not be cloned for the export.", "default": "true", "value": { "type": "boolean" } }, { "name": "default-file-type", "description": "Default file type to export.", "value": { "type": [ "\"JPG\"", "\"PDF\"", "\"PNG\"" ] } }, { "name": "extra-content-label", "description": "Custom label for `extraContent` checkbox.", "value": { "type": "string" } }, { "name": "header-title", "description": "Export header name, updated in input.", "default": "\"\"", "value": { "type": "string" } }, { "name": "include-extra-content", "description": "When `true`, `extraContent` HTML element is included in the PDF.", "default": "true", "value": { "type": "boolean" } }, { "name": "include-file-format", "description": "When `true`, user has ability to select the file format to be PDF or an image.", "default": "true", "value": { "type": "boolean" } }, { "name": "include-legend", "description": "When `true`, legend is included in the export.", "default": "true", "value": { "type": "boolean" } }, { "name": "include-map", "description": "When `true`, map is included in the export.", "default": "true", "value": { "type": "boolean" } }, { "name": "include-popup", "description": "When `true`, popup is included in the export.", "default": "false", "value": { "type": "boolean" } }, { "name": "logo-alt-text", "description": "Alt text for logo in export's header.", "value": { "type": "string" } }, { "name": "logo-image", "description": "Image URL for logo in export's header.", "default": "\"\"", "value": { "type": "string" } }, { "name": "map-alt-text", "description": "Alt text for map img.", "default": "\"\"", "value": { "type": "string" } }, { "name": "mask-background", "description": "Adjust the mask background color for when users are setting the map area", "default": "\"rgba(255, 51, 0, 0.1)\"", "value": { "type": "string" } }, { "name": "mask-border", "description": "Adjust the mask border for when users are setting the map area", "default": "\"2px dashed rgb(255, 51, 0)\"", "value": { "type": "string" } }, { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "default": "\"popover\"", "value": { "type": [ "\"inline\"", "\"popover\"" ] } }, { "name": "popover-icon", "description": "Update popover button icon.", "default": "\"export\"", "value": { "type": "string" } }, { "name": "popover-placement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "default": "\"auto\"", "value": { "type": [ "\"auto\"", "\"auto-end\"", "\"auto-start\"", "\"bottom\"", "\"bottom-end\"", "\"bottom-start\"", "\"leading\"", "\"leading-end\"", "\"leading-start\"", "\"left\"", "\"left-end\"", "\"left-start\"", "\"right\"", "\"right-end\"", "\"right-start\"", "\"top\"", "\"top-end\"", "\"top-start\"", "\"trailing\"", "\"trailing-end\"", "\"trailing-start\"" ] } }, { "name": "popover-positioning", "description": "Determines the type of positioning to use for the overlaid content. Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's position CSS property is `\"fixed\"`.", "default": "\"absolute\"", "value": { "type": [ "\"absolute\"", "\"fixed\"" ] } }, { "name": "scale", "description": "Adjusts the scale of the action button.", "default": "\"m\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "show-extra-content-in-img", "description": "When `true` and `selectedFileType` if JPG or PNG, `extraContent` HTML element is shown to the right of the map.", "default": "false", "value": { "type": "boolean" } }, { "name": "show-header-title", "description": "Show header title input in export tool.", "default": "true", "value": { "type": "boolean" } }, { "name": "show-include-legend", "description": "Show include legend checkbox in export tool.", "default": "true", "value": { "type": "boolean" } }, { "name": "show-include-map", "description": "Show include map checkbox in export tool.", "default": "false", "value": { "type": "boolean" } }, { "name": "show-include-popup", "description": "Show popup checkbox in export tool.", "default": "true", "value": { "type": "boolean" } }, { "name": "show-scale-bar", "description": "Show scale bar widget in map if view has it.", "default": "false", "value": { "type": "boolean" } } ], "events": [ { "name": "afterExport", "type": "void", "description": "Emits after export is complete." }, { "name": "exportOutputUpdated", "type": "void", "description": "Emits when the instant-apps-export's output prop is updated after the \"Export\" button is clicked." } ], "js": { "properties": [ { "name": "allowedFileTypes", "description": "File types allowed for export.", "type": "Array<\"JPG\" | \"PDF\" | \"PNG\">" }, { "name": "beforeExport", "description": "Passes the initial function to run when the Export button is clicked.", "type": "() => Promise" }, { "name": "cloneExtraContent", "description": "When `false`, the extra content will not be cloned for the export.", "type": "boolean" }, { "name": "defaultFileType", "description": "Default file type to export.", "type": "\"JPG\" | \"PDF\" | \"PNG\"" }, { "name": "extraContent", "description": "Extra content that will be added below the view.", "type": "HTMLElement" }, { "name": "extraContentLabel", "description": "Custom label for `extraContent` checkbox.", "type": "string" }, { "name": "headerTitle", "description": "Export header name, updated in input.", "type": "string" }, { "name": "includeExtraContent", "description": "When `true`, `extraContent` HTML element is included in the PDF.", "type": "boolean" }, { "name": "includeFileFormat", "description": "When `true`, user has ability to select the file format to be PDF or an image.", "type": "boolean" }, { "name": "includeLegend", "description": "When `true`, legend is included in the export.", "type": "boolean" }, { "name": "includeMap", "description": "When `true`, map is included in the export.", "type": "boolean" }, { "name": "includePopup", "description": "When `true`, popup is included in the export.", "type": "boolean" }, { "name": "logoAltText", "description": "Alt text for logo in export's header.", "type": "string" }, { "name": "logoImage", "description": "Image URL for logo in export's header.", "type": "string" }, { "name": "mapAltText", "description": "Alt text for map img.", "type": "string" }, { "name": "maskBackground", "description": "Adjust the mask background color for when users are setting the map area", "type": "string" }, { "name": "maskBorder", "description": "Adjust the mask border for when users are setting the map area", "type": "string" }, { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "type": "\"inline\" | \"popover\"" }, { "name": "output", "description": "Output to use to set up export.", "type": "ExportOutput" }, { "name": "popoverIcon", "description": "Update popover button icon.", "type": "string" }, { "name": "popoverPlacement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\"" }, { "name": "popoverPositioning", "description": "Determines the type of positioning to use for the overlaid content. Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's position CSS property is `\"fixed\"`.", "type": "\"absolute\" | \"fixed\"" }, { "name": "scale", "description": "Adjusts the scale of the action button.", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "showExtraContentInImg", "description": "When `true` and `selectedFileType` if JPG or PNG, `extraContent` HTML element is shown to the right of the map.", "type": "boolean" }, { "name": "showHeaderTitle", "description": "Show header title input in export tool.", "type": "boolean" }, { "name": "showIncludeLegend", "description": "Show include legend checkbox in export tool.", "type": "boolean" }, { "name": "showIncludeMap", "description": "Show include map checkbox in export tool.", "type": "boolean" }, { "name": "showIncludePopup", "description": "Show popup checkbox in export tool.", "type": "boolean" }, { "name": "showScaleBar", "description": "Show scale bar widget in map if view has it.", "type": "boolean" }, { "name": "view", "description": "A reference to the MapView or SceneView.", "type": "MapView | SceneView" } ], "events": [ { "name": "afterExport", "type": "void", "description": "Emits after export is complete." }, { "name": "exportOutputUpdated", "type": "void", "description": "Emits when the instant-apps-export's output prop is updated after the \"Export\" button is clicked." } ] } }, { "name": "instant-apps-export-views", "description": "### Events\n- **exportOutputUpdated** - Emits when the instant-apps-export's output prop is updated after the \"Export\" button is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--instant-apps-export-action-background** - Popup's trigger button's background color. \n- **--instant-apps-export-action-background-hover** - Popup's trigger button's background color on hover. \n- **--instant-apps-export-action-background-press** - Popup's trigger button's background color on press. \n- **--instant-apps-export-action-width** - Popup's trigger button's width. \n- **--instant-apps-export-action-height** - Popup's trigger button's height. \n- **--instant-apps-export-action-icon-color** - Popup's trigger button's icon color. \n- **--instant-apps-export-action-icon-hover-color** - Popup's trigger button's icon color when hovered over. \n- **--instant-apps-export-background** - Export's container background color. \n- **--instant-apps-export-text-color** - Export's container text color. \n- **--instant-apps-export-popover-width** - Export's popover container width. ", "attributes": [ { "name": "include-header", "description": "When `true`, header is included in the export.", "default": "false", "value": { "type": "boolean" } }, { "name": "include-legend", "description": "When `true`, legend is included in the export.", "default": "true", "value": { "type": "boolean" } }, { "name": "include-map", "description": "When `true`, map is included in the export.", "default": "true", "value": { "type": "boolean" } }, { "name": "include-popup", "description": "When `true`, popup is included in the export.", "default": "false", "value": { "type": "boolean" } }, { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "default": "\"popover\"", "value": { "type": [ "\"inline\"", "\"popover\"" ] } }, { "name": "popover-icon", "description": "Update popover button icon.", "default": "\"export\"", "value": { "type": "string" } }, { "name": "popover-placement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "default": "\"auto\"", "value": { "type": [ "\"auto\"", "\"auto-end\"", "\"auto-start\"", "\"bottom\"", "\"bottom-end\"", "\"bottom-start\"", "\"leading\"", "\"leading-end\"", "\"leading-start\"", "\"left\"", "\"left-end\"", "\"left-start\"", "\"right\"", "\"right-end\"", "\"right-start\"", "\"top\"", "\"top-end\"", "\"top-start\"", "\"trailing\"", "\"trailing-end\"", "\"trailing-start\"" ] } }, { "name": "popover-positioning", "description": "Determines the type of positioning to use for the overlaid content. Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's position CSS property is `\"fixed\"`.", "default": "\"absolute\"", "value": { "type": [ "\"absolute\"", "\"fixed\"" ] } }, { "name": "scale", "description": "Adjusts the scale of the action button.", "default": "\"m\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "show-include-header", "description": "Show header checkbox in export tool.", "default": "true", "value": { "type": "boolean" } }, { "name": "show-include-legend", "description": "Show include legend checkbox in export tool.", "default": "true", "value": { "type": "boolean" } }, { "name": "show-include-map", "description": "Show include map checkbox in export tool.", "default": "false", "value": { "type": "boolean" } }, { "name": "show-include-popup", "description": "Show popup checkbox in export tool.", "default": "true", "value": { "type": "boolean" } }, { "name": "show-scale-bar", "description": "Show scale bar widget in map if view has it.", "default": "false", "value": { "type": "boolean" } } ], "events": [ { "name": "exportOutputUpdated", "type": "void", "description": "Emits when the instant-apps-export's output prop is updated after the \"Export\" button is clicked." } ], "js": { "properties": [ { "name": "beforeExport", "description": "Passes the initial function to run when the Export button is clicked.", "type": "() => Promise" }, { "name": "exportViews", "description": "A reference to an array of MapViews or SceneViews.", "type": "Array" }, { "name": "includeHeader", "description": "When `true`, header is included in the export.", "type": "boolean" }, { "name": "includeLegend", "description": "When `true`, legend is included in the export.", "type": "boolean" }, { "name": "includeMap", "description": "When `true`, map is included in the export.", "type": "boolean" }, { "name": "includePopup", "description": "When `true`, popup is included in the export.", "type": "boolean" }, { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "type": "\"inline\" | \"popover\"" }, { "name": "output", "description": "Output to use to set up export.", "type": "ExportOutput" }, { "name": "popoverIcon", "description": "Update popover button icon.", "type": "string" }, { "name": "popoverPlacement", "description": "Determines where the component will be positioned relative to the `referenceElement`.", "type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\"" }, { "name": "popoverPositioning", "description": "Determines the type of positioning to use for the overlaid content. Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `\"fixed\"` value should be used to escape an overflowing parent container, or when the reference element's position CSS property is `\"fixed\"`.", "type": "\"absolute\" | \"fixed\"" }, { "name": "scale", "description": "Adjusts the scale of the action button.", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "showIncludeHeader", "description": "Show header checkbox in export tool.", "type": "boolean" }, { "name": "showIncludeLegend", "description": "Show include legend checkbox in export tool.", "type": "boolean" }, { "name": "showIncludeMap", "description": "Show include map checkbox in export tool.", "type": "boolean" }, { "name": "showIncludePopup", "description": "Show popup checkbox in export tool.", "type": "boolean" }, { "name": "showScaleBar", "description": "Show scale bar widget in map if view has it.", "type": "boolean" } ], "events": [ { "name": "exportOutputUpdated", "type": "void", "description": "Emits when the instant-apps-export's output prop is updated after the \"Export\" button is clicked." } ] } }, { "name": "instant-apps-filter-list", "description": "### Events\n- **filterListReset** - Emits when the reset button is pushed.\n- **filterUpdate** - Emits when the filter is updated.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `forceReset(): Promise`\n- `getCurrentLayerExpressions(): Promise`\n- `getFilterInitState(): Promise`\n- `handleUpdatingT9nData(t9nLayerExpressions: LayerExpression[]): Promise`\n- `updateInitDefExpressions(filterInitState: FilterInitState): Promise`\n\n### Slots\n- **filter-header-content** - A slot for adding custom content to the header.\n- **filter-header-actions-end** - A slot for adding actions or content to the end side of the header.", "attributes": [ { "name": "auto-update-url", "description": "Auto update URL with filter params.", "default": "false", "value": { "type": "boolean" } }, { "name": "close-btn", "description": "Display close button in footer.", "default": "false", "value": { "type": "boolean" } }, { "name": "close-btn-text", "description": "Close button text.", "value": { "type": "string" } }, { "name": "combobox-overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content.", "default": "\"absolute\"", "value": { "type": [ "\"absolute\"", "\"fixed\"" ] } }, { "name": "extent-selector", "description": "Turn on the ability to filter by extent.", "default": "false", "value": { "type": "boolean" } }, { "name": "filter-count", "description": "Number of active filters", "default": "0", "value": { "type": "number" } }, { "name": "open-filters", "description": "When `true`, the layer filter block is expanded.", "default": "false", "value": { "type": "boolean" } }, { "name": "reset-btn", "description": "Display reset button.", "default": "true", "value": { "type": "boolean" } }, { "name": "reset-filters-on-disconnect", "description": "When false filters will not be reset when the component is disconnected from the DOM", "default": "true", "value": { "type": "boolean" } }, { "name": "zoom-btn", "description": "Display zoom button.", "default": "true", "value": { "type": "boolean" } } ], "slots": [ { "name": "filter-header-content", "description": "A slot for adding custom content to the header." }, { "name": "filter-header-actions-end", "description": "A slot for adding actions or content to the end side of the header." } ], "events": [ { "name": "filterListReset", "type": "void", "description": "Emits when the reset button is pushed." }, { "name": "filterUpdate", "type": "void", "description": "Emits when the filter is updated." } ], "js": { "properties": [ { "name": "autoUpdateUrl", "description": "Auto update URL with filter params.", "type": "boolean" }, { "name": "closeBtn", "description": "Display close button in footer.", "type": "boolean" }, { "name": "closeBtnOnClick", "description": "Close button onClick function.", "type": "((() => void))" }, { "name": "closeBtnText", "description": "Close button text.", "type": "string" }, { "name": "comboboxOverlayPositioning", "description": "Determines the type of positioning to use for the overlaid content.", "type": "\"absolute\" | \"fixed\"" }, { "name": "extentSelector", "description": "Turn on the ability to filter by extent.", "type": "boolean" }, { "name": "extentSelectorConfig", "description": "Limits filtering options based on the view's extent geometry.", "type": "ExtentSelector" }, { "name": "filterCount", "description": "Number of active filters", "type": "number" }, { "name": "layerExpressions", "description": "Use this to create filters that update a layer's definitionExpression.", "type": "Array" }, { "name": "openFilters", "description": "When `true`, the layer filter block is expanded.", "type": "boolean" }, { "name": "resetBtn", "description": "Display reset button.", "type": "boolean" }, { "name": "resetFiltersOnDisconnect", "description": "When false filters will not be reset when the component is disconnected from the DOM", "type": "boolean" }, { "name": "urlParams", "description": "URL params set by using filters.", "type": "URLSearchParams" }, { "name": "view", "description": "A reference to the MapView or SceneView.", "type": "MapView | SceneView" }, { "name": "zoomBtn", "description": "Display zoom button.", "type": "boolean" } ], "events": [ { "name": "filterListReset", "type": "void", "description": "Emits when the reset button is pushed." }, { "name": "filterUpdate", "type": "void", "description": "Emits when the filter is updated." } ] } }, { "name": "instant-apps-header", "description": "### Events\n- **infoIsOpenChanged** - Fires when the info button is clicked.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `toggleInfo(): Promise`\n\n### Slots\n- **actions-end** - Used to slot an action at the end of the header i.e. `calcite-action`, `instant-apps-social-share`\n\n### CSS Properties\n- **--instant-apps-header-height** - Height for header. Default: auto; \n- **--instant-apps-header-min-height** - Minimum height for header. Default: 50px; \n- **--instant-apps-header-title-text-link-decoration** - Text decoration for hyperlinks for `titleTextLink`. Default value is 'underline'. \n- **--instant-apps-header-height--logo-scale--s** - Header height when logo scale is set to 's'. Default value is 55px. \n- **--instant-apps-header-logo-width--logo-scale--s** - Logo width when logo scale is set to 's'. Default value: 35px. \n- **--instant-apps-header-logo-height--logo-scale--s** - Logo height when logo scale is set to 's'. Default value: 35px. \n- **--instant-apps-header-height--logo-scale--m** - Header height when logo scale is set to 'm'. Default value is 70px. \n- **--instant-apps-header-logo-width--logo-scale--m** - Logo width when logo scale is set to 'm'. Default value: 50px. \n- **--instant-apps-header-logo-height--logo-scale--m** - Logo height when logo scale is set to 'm'. Default value: 50px. \n- **--instant-apps-header-height--logo-scale--l** - Header height when logo scale is set to 'l'. Default value is 80px. \n- **--instant-apps-header-logo-width--logo-scale--l** - Logo width when logo scale is set to 'l'. Default value: 60px. \n- **--instant-apps-header-logo-height--logo-scale--l** - Logo height when logo scale is set to 'l'. Default value: 60px. \n- **--instant-apps-header-actions-end-height** - Height for actions-end-container. Default: auto; ", "attributes": [ { "name": "background-color", "description": "Background color to display in header - accepts a hexadecimal value i.e. `#000000`.", "value": { "type": "string" } }, { "name": "custom-header-css", "description": "CSS styles to be used in conjunction with `custom-header-html`.", "value": { "type": "string" } }, { "name": "custom-header-html", "description": "HTML code for custom headers.", "value": { "type": "string" } }, { "name": "font-family", "description": "Font family to use for text", "default": "\"var(--calcite-sans-family);\"", "value": { "type": "string" } }, { "name": "header-alignment", "description": "Change alignment of header.", "default": "\"left\"", "value": { "type": [ "\"center\"", "\"left\"", "\"right\"" ] } }, { "name": "info-button", "description": "Display info button at the end of the title.", "default": "false", "value": { "type": "boolean" } }, { "name": "info-is-open", "description": "Keeps track of the info 'open' state", "default": "false", "value": { "type": "boolean" } }, { "name": "info-title-text", "description": "Hover text for info button tooltip", "value": { "type": "string" } }, { "name": "logo-image", "description": "Image URL for logo. Displays at the start of the header.", "value": { "type": "string" } }, { "name": "logo-image-alt-text", "description": "Alternate text for header logo.", "value": { "type": "string" } }, { "name": "logo-link", "description": "Logo URL to link out to another page.", "value": { "type": "string" } }, { "name": "logo-scale", "description": "Adjusts scale of logo image.", "default": "\"m\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "mobile-width-breakpoint", "description": "Mobile breakpoint value in pixels(px).", "value": { "type": "number" } }, { "name": "text-color", "description": "Text color to display in header - accepts a hexadecimal value i.e. `#FFFFFF`.", "value": { "type": "string" } }, { "name": "title-text", "description": "Main text to display in header.", "default": "\"\"", "value": { "type": "string" } }, { "name": "title-text-link", "description": "Url to link out to from title text", "value": { "type": "string" } } ], "slots": [ { "name": "actions-end", "description": "Used to slot an action at the end of the header i.e. `calcite-action`, `instant-apps-social-share`" } ], "events": [ { "name": "infoIsOpenChanged", "type": "boolean", "description": "Fires when the info button is clicked." } ], "js": { "properties": [ { "name": "backgroundColor", "description": "Background color to display in header - accepts a hexadecimal value i.e. `#000000`.", "type": "string" }, { "name": "customHeaderCss", "description": "CSS styles to be used in conjunction with `custom-header-html`.", "type": "string" }, { "name": "customHeaderHtml", "description": "HTML code for custom headers.", "type": "string" }, { "name": "fontFamily", "description": "Font family to use for text", "type": "string" }, { "name": "headerAlignment", "description": "Change alignment of header.", "type": "\"center\" | \"left\" | \"right\"" }, { "name": "infoButton", "description": "Display info button at the end of the title.", "type": "boolean" }, { "name": "infoIsOpen", "description": "Keeps track of the info 'open' state", "type": "boolean" }, { "name": "infoTitleText", "description": "Hover text for info button tooltip", "type": "string" }, { "name": "logoImage", "description": "Image URL for logo. Displays at the start of the header.", "type": "string" }, { "name": "logoImageAltText", "description": "Alternate text for header logo.", "type": "string" }, { "name": "logoLink", "description": "Logo URL to link out to another page.", "type": "string" }, { "name": "logoScale", "description": "Adjusts scale of logo image.", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "mobileWidthBreakpoint", "description": "Mobile breakpoint value in pixels(px).", "type": "number" }, { "name": "textColor", "description": "Text color to display in header - accepts a hexadecimal value i.e. `#FFFFFF`.", "type": "string" }, { "name": "titleText", "description": "Main text to display in header.", "type": "string" }, { "name": "titleTextLink", "description": "Url to link out to from title text", "type": "string" } ], "events": [ { "name": "infoIsOpenChanged", "type": "boolean", "description": "Fires when the info button is clicked." } ] } }, { "name": "instant-apps-interactive-legend", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "compact", "default": "false", "value": { "type": "boolean" } }, { "name": "feature-count", "description": "Display the individual counts for categories and total counts for layers in the legend", "default": "false", "value": { "type": "boolean" } }, { "name": "zoom-to", "description": "Displays ‘Zoom to’ button, updates the extent of the view based on the results from the legend", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "compact", "type": "boolean" }, { "name": "featureCount", "description": "Display the individual counts for categories and total counts for layers in the legend", "type": "boolean" }, { "name": "filterMode", "description": "Use effects to differentiate between features that are included and excluded from legend filter results", "type": "FilterMode" }, { "name": "view", "description": "Reference to Map View", "type": "MapView" }, { "name": "zoomTo", "description": "Displays ‘Zoom to’ button, updates the extent of the view based on the results from the legend", "type": "boolean" } ], "events": [] } }, { "name": "instant-apps-interactive-legend-classic", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "feature-count", "description": "Display individual counts and total counts for legend infos.", "default": "false", "value": { "type": "boolean" } }, { "name": "zoom-to", "description": "Displays 'Zoom To' button - updates the extent of the view based on the selected legend infos.", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "featureCount", "description": "Display individual counts and total counts for legend infos.", "type": "boolean" }, { "name": "filterMode", "description": "Filter mode to use when filtering features.", "type": "FilterMode" }, { "name": "legendvm", "description": "Legend View model from the 4.x ArcGIS API for JavaScript", "type": "LegendViewModel" }, { "name": "messages", "type": "{\n [x: string]: string;\n}" }, { "name": "zoomTo", "description": "Displays 'Zoom To' button - updates the extent of the view based on the selected legend infos.", "type": "boolean" } ], "events": [] } }, { "name": "instant-apps-interactive-legend-count", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "category-id", "default": "\"\"", "value": { "type": "string" } }, { "name": "info-index", "value": { "type": "number" } }, { "name": "selected", "default": "false", "value": { "type": "boolean" } }, { "name": "show-total", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "categoryId", "type": "string" }, { "name": "infoIndex", "type": "number" }, { "name": "legendElement", "type": "ColorRampElement | HeatmapRampElement | OpacityRampElement | PieChartRampElement | RelationshipRampElement | SizeRampElement | StretchRampElement | SymbolTableElement | UnivariateColorSizeRampElement" }, { "name": "legendvm", "type": "LegendViewModel" }, { "name": "selected", "type": "boolean" }, { "name": "showTotal", "type": "boolean" } ], "events": [] } }, { "name": "instant-apps-interactive-legend-group-legend-element", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "feature-count", "default": "false", "value": { "type": "boolean" } }, { "name": "is-child", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "featureCount", "type": "boolean" }, { "name": "isChild", "type": "boolean" }, { "name": "legendvm", "type": "LegendViewModel" } ], "events": [] } }, { "name": "instant-apps-interactive-legend-group-legend-element-caption", "description": "### Events\n- **groupLayerCaptionElementExpandUpdated**\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "expanded", "default": "true", "value": { "type": "boolean" } }, { "name": "feature-count", "default": "false", "value": { "type": "boolean" } }, { "name": "is-child", "default": "false", "value": { "type": "boolean" } } ], "events": [ { "name": "groupLayerCaptionElementExpandUpdated", "type": "boolean" } ], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "expanded", "type": "boolean" }, { "name": "featureCount", "type": "boolean" }, { "name": "isChild", "type": "boolean" }, { "name": "legendvm", "type": "LegendViewModel" } ], "events": [ { "name": "groupLayerCaptionElementExpandUpdated", "type": "boolean" } ] } }, { "name": "instant-apps-interactive-legend-layer-element", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "feature-count", "default": "false", "value": { "type": "boolean" } }, { "name": "is-child", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "featureCount", "type": "boolean" }, { "name": "isChild", "type": "boolean" }, { "name": "legendvm", "type": "LegendViewModel" } ], "events": [] } }, { "name": "instant-apps-interactive-legend-layer-element-caption", "description": "### Events\n- **layerCaptionElementExpandUpdated**\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "expanded", "default": "true", "value": { "type": "boolean" } }, { "name": "feature-count", "default": "false", "value": { "type": "boolean" } }, { "name": "is-child", "default": "false", "value": { "type": "boolean" } } ], "events": [ { "name": "layerCaptionElementExpandUpdated", "type": "boolean" } ], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "expanded", "type": "boolean" }, { "name": "featureCount", "type": "boolean" }, { "name": "isChild", "type": "boolean" }, { "name": "legendvm", "type": "LegendViewModel" } ], "events": [ { "name": "layerCaptionElementExpandUpdated", "type": "boolean" } ] } }, { "name": "instant-apps-interactive-legend-legend-element", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "is-child", "default": "false", "value": { "type": "boolean" } }, { "name": "is-color-ramp", "default": "false", "value": { "type": "boolean" } }, { "name": "is-interactive", "default": "false", "value": { "type": "boolean" } }, { "name": "is-relationship-ramp", "default": "false", "value": { "type": "boolean" } }, { "name": "is-size-ramp", "default": "false", "value": { "type": "boolean" } }, { "name": "legend-element-index", "value": { "type": "number" } }, { "name": "title-text", "default": "\"\"", "value": { "type": "string" } }, { "name": "zoom-to", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "isChild", "type": "boolean" }, { "name": "isColorRamp", "type": "boolean" }, { "name": "isInteractive", "type": "boolean" }, { "name": "isRelationshipRamp", "type": "boolean" }, { "name": "isSizeRamp", "type": "boolean" }, { "name": "legendElement", "type": "ColorRampElement | HeatmapRampElement | OpacityRampElement | PieChartRampElement | RelationshipRampElement | SizeRampElement | StretchRampElement | SymbolTableElement | UnivariateColorSizeRampElement" }, { "name": "legendElementIndex", "type": "number" }, { "name": "legendvm", "type": "LegendViewModel" }, { "name": "titleText", "type": "string" }, { "name": "zoomTo", "type": "boolean" } ], "events": [] } }, { "name": "instant-apps-interactive-legend-legend-element-caption", "description": "### Events\n- **legendLayerExpandUpdated**\n- **showAllSelected**\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "expanded", "default": "true", "value": { "type": "boolean" } }, { "name": "is-interactive", "default": "false", "value": { "type": "boolean" } }, { "name": "legend-element-index", "value": { "type": "number" } }, { "name": "title-text", "value": { "type": "string" } }, { "name": "zoom-to", "default": "false", "value": { "type": "boolean" } } ], "events": [ { "name": "legendLayerExpandUpdated", "type": "void" }, { "name": "showAllSelected", "type": "void" } ], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "expanded", "type": "boolean" }, { "name": "isInteractive", "type": "boolean" }, { "name": "layer", "type": "FeatureLayer" }, { "name": "legendElement", "type": "ColorRampElement | HeatmapRampElement | OpacityRampElement | PieChartRampElement | RelationshipRampElement | SizeRampElement | StretchRampElement | SymbolTableElement | UnivariateColorSizeRampElement" }, { "name": "legendElementIndex", "type": "number" }, { "name": "legendvm", "type": "LegendViewModel" }, { "name": "titleText", "type": "string" }, { "name": "zoomTo", "type": "boolean" } ], "events": [ { "name": "legendLayerExpandUpdated", "type": "void" }, { "name": "showAllSelected", "type": "void" } ] } }, { "name": "instant-apps-interactive-legend-relationship", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [], "events": [], "js": { "properties": [ { "name": "activeLayerInfo", "type": "ActiveLayerInfo" }, { "name": "filterMode", "type": "FilterMode" }, { "name": "legendElement", "type": "RelationshipRampElement" } ], "events": [] } }, { "name": "instant-apps-keyboard-shortcuts", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [], "events": [], "js": { "properties": [ { "name": "view", "description": "A reference to the MapView or SceneView", "type": "MapView | SceneView" } ], "events": [] } }, { "name": "instant-apps-landing-page", "description": "### Events\n- **landingPageClose** - Emits when the landing page is closed.\n- **landingPageOpen** - Emits when the landing page is opened.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--instant-apps-landing-page-background-color** - Brand color of landing page that affects the background (if a backgound image is not set) and entry button colors \n- **--instant-apps-landing-page-text-color** - Text color of landing page. \n- **--instant-apps-landing-page-entry-button-color** - Brand color of the entry button. \n- **--instant-apps-landing-page-title-text-font-size** - Font size of title text. \n- **--instant-apps-landing-page-subtitle-text-font-size** - Font size of subtitle text. \n- **--instant-apps-landing-page-description-text-font-size** - Font size of description text. \n- **--instant-apps-landing-page-icon-image-scale--s** - Icon image width when scale is set to 's'. Default value is 100px. \n- **--instant-apps-landing-page-icon-image-scale--m** - Icon image width when scale is set to 'm'. Default value is 250px. \n- **--instant-apps-landing-page-icon-image-scale--l** - Icon image width when scale is set to 'l'. Default value is 500px. \n- **--instant-apps-landing-page-entry-button-margin** - Option to provide spacing in case a secondary action is added to the landing page. ", "attributes": [ { "name": "background-image-src", "description": "Displays a background image via URL", "value": { "type": "string" } }, { "name": "description-text", "description": "Description text.", "value": { "type": "string" } }, { "name": "disable-transition", "description": "Controls whether to enable/disable the transition animation the occurs when dismissing the landing page.", "default": "true", "value": { "type": "boolean" } }, { "name": "enable-sign-in", "description": "Add sign in functionality. Requires portal and oauthappid props.", "default": "false", "value": { "type": "boolean" } }, { "name": "entry-button-scale", "description": "Scale of the entry button.", "default": "\"l\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "entry-button-text", "description": "Button text which closes/dismisses the landing page.", "value": { "type": "string" } }, { "name": "font-family", "description": "Font family to use for text", "default": "\"var(--calcite-sans-family);\"", "value": { "type": "string" } }, { "name": "icon-image", "description": "Image/graphic that is positioned near the text content.", "value": { "type": "string" } }, { "name": "icon-image-alt-text", "description": "Alternate text for `iconImage`.", "value": { "type": "string" } }, { "name": "icon-image-scale", "description": "Scale of icon image/graphic.", "default": "\"m\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "oauthappid", "description": "The registered application id, used to setup sign in capabilities.", "value": { "type": "string" } }, { "name": "open", "description": "Controls the open/close state of the landing page.", "default": "true", "value": { "type": "boolean" } }, { "name": "subtitle-text", "description": "Subtitle text.", "value": { "type": "string" } }, { "name": "title-text", "description": "Title text.", "value": { "type": "string" } } ], "events": [ { "name": "landingPageClose", "type": "void", "description": "Emits when the landing page is closed." }, { "name": "landingPageOpen", "type": "void", "description": "Emits when the landing page is opened." } ], "js": { "properties": [ { "name": "alignment", "description": "Controls the positioning of the text and image content. This accepts an array containing two values. Possible values for HorizontalAlignment: 'left', 'right', 'center'. Possible values for VeritcalAlignment: 'top', 'middle', 'bottom'.", "type": "AlignmentPositions" }, { "name": "backgroundImageSrc", "description": "Displays a background image via URL", "type": "string" }, { "name": "descriptionText", "description": "Description text.", "type": "string" }, { "name": "disableTransition", "description": "Controls whether to enable/disable the transition animation the occurs when dismissing the landing page.", "type": "boolean" }, { "name": "enableSignIn", "description": "Add sign in functionality. Requires portal and oauthappid props.", "type": "boolean" }, { "name": "entryButtonScale", "description": "Scale of the entry button.", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "entryButtonText", "description": "Button text which closes/dismisses the landing page.", "type": "string" }, { "name": "fontFamily", "description": "Font family to use for text", "type": "string" }, { "name": "iconImage", "description": "Image/graphic that is positioned near the text content.", "type": "string" }, { "name": "iconImageAltText", "description": "Alternate text for `iconImage`.", "type": "string" }, { "name": "iconImageScale", "description": "Scale of icon image/graphic.", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "oauthappid", "description": "The registered application id, used to setup sign in capabilities.", "type": "string" }, { "name": "open", "description": "Controls the open/close state of the landing page.", "type": "boolean" }, { "name": "portal", "description": "The apps Portal, used to setup sign in capabilities.", "type": "IPortal" }, { "name": "subtitleText", "description": "Subtitle text.", "type": "string" }, { "name": "titleText", "description": "Title text.", "type": "string" } ], "events": [ { "name": "landingPageClose", "type": "void", "description": "Emits when the landing page is closed." }, { "name": "landingPageOpen", "type": "void", "description": "Emits when the landing page is opened." } ] } }, { "name": "instant-apps-language-switcher", "description": "### Events\n- **selectedLanguageUpdated** - Fires when a language is selected from the dropdown. This event will emit an object containing the information on the selected language and a flat object of unique identifiers and their associated values.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `refresh(): Promise` - Refreshes the component by fetching the latest translation data from the portal item resource.", "attributes": [ { "name": "calcite-dropdown-overlay-positioning", "description": "Determines the type of positioning to use for the overlaid content. Using \"absolute\" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. \"fixed\" should be used to escape an overflowing parent container, or when the reference element's position CSS property is \"fixed\".", "default": "\"absolute\"", "value": { "type": [ "\"absolute\"", "\"fixed\"" ] } }, { "name": "default-locale", "description": "Defines the default language of the language switcher dropdown. Set internally if not defined.", "value": { "type": "string" } }, { "name": "icon", "description": "Icon to display.", "default": "\"language\"", "value": { "type": "string" } }, { "name": "selected-language", "description": "The currently selected language.", "value": { "type": "string" } } ], "events": [ { "name": "selectedLanguageUpdated", "type": "{\n locale: string;\n data?: Record | null | undefined;\n}", "description": "Fires when a language is selected from the dropdown. This event will emit an object containing the information on the selected language and a flat object of unique identifiers and their associated values." } ], "js": { "properties": [ { "name": "calciteDropdownOverlayPositioning", "description": "Determines the type of positioning to use for the overlaid content. Using \"absolute\" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. \"fixed\" should be used to escape an overflowing parent container, or when the reference element's position CSS property is \"fixed\".", "type": "\"absolute\" | \"fixed\"" }, { "name": "defaultLocale", "description": "Defines the default language of the language switcher dropdown. Set internally if not defined.", "type": "string" }, { "name": "icon", "description": "Icon to display.", "type": "string" }, { "name": "locales", "description": "Data used to populate language switcher dropdown.", "type": "Array<{\n locale: string;\n data?: Record | undefined;\n webmap?: string | undefined;\n}>" }, { "name": "portalItem", "description": "Instant App portal item - used to fetch it's associated portal item resource. The portal item resource will contain the user defined translated strings.", "type": "PortalItem" }, { "name": "selectedLanguage", "description": "The currently selected language.", "type": "string" }, { "name": "view", "description": "Reference to map view to switch web maps if present in locales.", "type": "MapView | SceneView" } ], "events": [ { "name": "selectedLanguageUpdated", "type": "{\n locale: string;\n data?: Record | null | undefined;\n}", "description": "Fires when a language is selected from the dropdown. This event will emit an object containing the information on the selected language and a flat object of unique identifiers and their associated values." } ] } }, { "name": "instant-apps-language-translator", "description": "### Events\n- **translatorDataUpdated** - Fires when a translation input's value has changed.\n\n### Methods\n- `batchWriteToPortalItemResource(data: PortalItemResourceT9n): Promise` - Batch write data to associated portal item resource.\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `getPortalItemResource(): Promise<__esri.PortalItemResource | null>` - Gets portal item resource containing the translation data.\n- `getTranslationData(): Promise` - Gets translation data for all languages and fields.\n- `setTranslationData(data: PortalItemResourceT9n): Promise` - Updates translation data for all languages and fields.\n\n### Slots\n- **primary-custom-action** - A slot for adding a primary action.\n- **secondary-custom-action** - A slot for adding a secondary action.\n- **translation-custom-action** - A slot for adding a custom action in the translation header section of the UI.", "attributes": [ { "name": "open", "description": "Controls the open/close state of the dialog.", "default": "false", "value": { "type": "boolean" } } ], "slots": [ { "name": "primary-custom-action", "description": "A slot for adding a primary action." }, { "name": "secondary-custom-action", "description": "A slot for adding a secondary action." }, { "name": "translation-custom-action", "description": "A slot for adding a custom action in the translation header section of the UI." } ], "events": [ { "name": "translatorDataUpdated", "type": "void", "description": "Fires when a translation input's value has changed." } ], "js": { "properties": [ { "name": "appSettings", "description": "Object used to render each `instant-apps-translator-item`, containing either a `calcite-input` or rich text editor (handles HTML formatting); and, the languages to translate within the dropdown.", "type": "AppSettings" }, { "name": "locales", "description": "Specified languages that the user-defined strings will be translated in.", "type": "Array" }, { "name": "open", "description": "Controls the open/close state of the dialog.", "type": "boolean" }, { "name": "portalItem", "description": "Instant App portal item - used to fetch it's associated portal item resource. The portal item resource will contain the user-defined translated strings.", "type": "PortalItem" }, { "name": "translatedLocaleInputOnChangeCallback", "description": "Function that is called when the value in a translated locale's input has changed. This function will have 4 arguments - fieldName, value, locale, and resource - and will return a promise. The callback function can be used to construct the data of key-value pairs that will be written to the portal item resource.", "type": "(fieldName: string, value: string, locale: string, resource: PortalItemResource) => Promise" }, { "name": "userLocaleInputOnChangeCallback", "description": "Function to be called when the value in a user locale input has changed. This function will have 2 arguments - fieldName and value - and will return a promise.", "type": "(fieldName: string, value: string) => Promise" } ], "events": [ { "name": "translatorDataUpdated", "type": "void", "description": "Fires when a translation input's value has changed." } ] } }, { "name": "instant-apps-ckeditor-wrapper", "description": "### Events\n- **dataChanged**\n- **isFocused**\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "value", "value": { "type": "string" } } ], "events": [ { "name": "dataChanged", "type": "string" }, { "name": "isFocused", "type": "void" } ], "js": { "properties": [ { "name": "config", "type": "EditorConfig" }, { "name": "editorInstance", "description": "Instance of text editor", "type": "IClassicEditor" }, { "name": "value", "type": "string" } ], "events": [ { "name": "dataChanged", "type": "string" }, { "name": "isFocused", "type": "void" } ] } }, { "name": "instant-apps-language-translator-content", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [], "events": [], "js": { "properties": [], "events": [] } }, { "name": "instant-apps-language-translator-item", "description": "TODO: [MIGRATION] This component had a `@Component()` decorator with a \"scoped\" prop. It needs to be migrated manually. Reason: Lit only has shadow root and light dom styling, not scoped.\n--\n\n### Events\n- **translatorItemDataUpdated** - Fires when a translation input's value has changed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "field-name", "value": { "type": "string" } } ], "events": [ { "name": "translatorItemDataUpdated", "type": "void", "description": "Fires when a translation input's value has changed." } ], "js": { "properties": [ { "name": "fieldName", "type": "string" }, { "name": "setting", "type": "LocaleSettingData" }, { "name": "translatedLanguageLabels", "type": "{\n [x: string]: string;\n}" }, { "name": "translatedLocaleInputOnChangeCallback", "type": "(fieldName: string, value: string, locale: string, resource: PortalItemResource) => Promise" }, { "name": "userLocaleInputOnChangeCallback", "type": "(fieldName: string, value: string) => Promise" } ], "events": [ { "name": "translatorItemDataUpdated", "type": "void", "description": "Fires when a translation input's value has changed." } ] } }, { "name": "instant-apps-language-translator-search", "description": "TODO: [MIGRATION] This component had a `@Component()` decorator with a \"scoped\" prop. It needs to be migrated manually. Reason: Lit only has shadow root and light dom styling, not scoped.\n--\n\n### Events\n- **suggestionSelected**\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "t9n-placeholder", "value": { "type": "string" } } ], "events": [ { "name": "suggestionSelected", "type": "string" } ], "js": { "properties": [ { "name": "t9nPlaceholder", "type": "string" } ], "events": [ { "name": "suggestionSelected", "type": "string" } ] } }, { "name": "instant-apps-measurement", "description": "### Events\n- **measureActive** - Emits when there is an active measure tool\nto allow app devs to disable other tools/popups when\ntools are active .\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "active-tool-type", "description": "Determine the tool that will be open on load", "value": { "type": [ "\"area\"", "\"clear\"", "\"distance\"", "\"point\"" ] } }, { "name": "area-unit", "description": "Choose which unit will be used for the area tool by default", "value": { "type": [ "\"acres\"", "\"ares\"", "\"hectares\"", "\"square-centimeters\"", "\"square-decimeters\"", "\"square-feet\"", "\"square-inches\"", "\"square-kilometers\"", "\"square-meters\"", "\"square-miles\"", "\"square-millimeters\"", "\"square-nautical-miles\"", "\"square-us-feet\"", "\"square-yards\"" ] } }, { "name": "closable", "description": "When true the measure widget is closable", "default": "false", "value": { "type": "boolean" } }, { "name": "coordinate-format", "description": "Choose which formats to include as options while converting coordinates", "value": { "type": "string" } }, { "name": "linear-unit", "description": "Choose which unit will be used for the distance tool by default", "value": { "type": [ "\"centimeters\"", "\"decimeters\"", "\"feet\"", "\"inches\"", "\"kilometers\"", "\"meters\"", "\"miles\"", "\"millimeters\"", "\"nautical-miles\"", "\"us-feet\"", "\"yards\"" ] } } ], "events": [ { "name": "measureActive", "type": "boolean", "description": "Emits when there is an active measure tool\nto allow app devs to disable other tools/popups when\ntools are active ." } ], "js": { "properties": [ { "name": "activeToolType", "description": "Determine the tool that will be open on load", "type": "\"area\" | \"clear\" | \"distance\" | \"point\"" }, { "name": "areaUnit", "description": "Choose which unit will be used for the area tool by default", "type": "\"acres\" | \"ares\" | \"hectares\" | \"square-centimeters\" | \"square-decimeters\" | \"square-feet\" | \"square-inches\" | \"square-kilometers\" | \"square-meters\" | \"square-miles\" | \"square-millimeters\" | \"square-nautical-miles\" | \"square-us-feet\" | \"square-yards\"" }, { "name": "closable", "description": "When true the measure widget is closable", "type": "boolean" }, { "name": "coordinateFormat", "description": "Choose which formats to include as options while converting coordinates", "type": "string" }, { "name": "linearUnit", "description": "Choose which unit will be used for the distance tool by default", "type": "\"centimeters\" | \"decimeters\" | \"feet\" | \"inches\" | \"kilometers\" | \"meters\" | \"miles\" | \"millimeters\" | \"nautical-miles\" | \"us-feet\" | \"yards\"" }, { "name": "view", "description": "A reference to the MapView or SceneView", "type": "MapView | SceneView" } ], "events": [ { "name": "measureActive", "type": "boolean", "description": "Emits when there is an active measure tool\nto allow app devs to disable other tools/popups when\ntools are active ." } ] } }, { "name": "instant-apps-measurement-tool", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "active-tool", "value": { "type": [ "\"area\"", "\"clear\"", "\"distance\"", "\"point\"" ] } } ], "events": [], "js": { "properties": [ { "name": "activeTool", "type": "\"area\" | \"clear\" | \"distance\" | \"point\"" }, { "name": "measureConfiguration", "type": "IMeasureConfiguration" }, { "name": "view", "type": "MapView | SceneView" } ], "events": [] } }, { "name": "instant-apps-popover", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "content", "default": "\"\"", "value": { "type": "string" } }, { "name": "disable-action", "default": "false", "value": { "type": "boolean" } }, { "name": "img-alt", "value": { "type": "string" } }, { "name": "img-src", "value": { "type": "string" } }, { "name": "index", "value": { "type": "number" } }, { "name": "media-src", "value": { "type": "string" } }, { "name": "pagination", "default": "false", "value": { "type": "boolean" } }, { "name": "placement", "default": "\"trailing-start\"", "value": { "type": [ "\"auto\"", "\"auto-end\"", "\"auto-start\"", "\"bottom\"", "\"bottom-end\"", "\"bottom-start\"", "\"leading\"", "\"leading-end\"", "\"leading-start\"", "\"left\"", "\"left-end\"", "\"left-start\"", "\"right\"", "\"right-end\"", "\"right-start\"", "\"top\"", "\"top-end\"", "\"top-start\"", "\"trailing\"", "\"trailing-end\"", "\"trailing-start\"" ] } }, { "name": "popover-title", "default": "\"\"", "value": { "type": "string" } }, { "name": "ref-id", "value": { "type": "string" } }, { "name": "reference-element", "value": { "type": "string" } }, { "name": "subtitle", "default": "\"\"", "value": { "type": "string" } } ], "events": [], "js": { "properties": [ { "name": "content", "type": "string" }, { "name": "disableAction", "type": "boolean" }, { "name": "imgAlt", "type": "string" }, { "name": "imgSrc", "type": "string" }, { "name": "index", "type": "number" }, { "name": "mediaSrc", "type": "string" }, { "name": "messageOverrides", "description": "Overwrite localized strings for this component", "type": "Record" }, { "name": "pagination", "type": "boolean" }, { "name": "parent", "description": "The parent that manages this popover and its siblings.", "type": "InstantAppsPopovers" }, { "name": "placement", "type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\"" }, { "name": "popoverAction", "type": "(event: MouseEvent) => void" }, { "name": "popoverTitle", "type": "string" }, { "name": "referenceElement", "type": "HTMLElement | string" }, { "name": "refId", "type": "string" }, { "name": "subtitle", "type": "string" } ], "events": [] } }, { "name": "instant-apps-popovers", "description": "### Methods\n- `beginTour(): Promise`\n- `close(key: string): Promise`\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n- `done(): Promise`\n- `endTour(): Promise`\n- `next(): Promise`\n- `open(key: string): Promise`\n- `previous(): Promise`\n\n### Slots\n- **popovers** - A slot to contain all of the ``s that this element manages.", "attributes": [ { "name": "current-id", "value": { "type": "string" } }, { "name": "in-tour", "default": "false", "value": { "type": "boolean" } } ], "slots": [ { "name": "popovers", "description": "A slot to contain all of the ``s that this element manages." } ], "events": [], "js": { "properties": [ { "name": "beforeOpen", "type": "() => Promise" }, { "name": "currentId", "type": "string" }, { "name": "instantAppsPopovers", "type": "Map" }, { "name": "inTour", "type": "boolean" } ], "events": [] } }, { "name": "instant-apps-scoreboard", "description": "### Events\n- **scoreboardItemsUpdated** - Emits when scoreboard item values have been calculated and updated.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--instant-apps-scoreboard-background-color** - Background color of scoreboard. \n- **--instant-apps-scoreboard-text-color** - Text color of scoreboard. \n- **--instant-apps-scoreboard-mobile-position-bottom** - Scoreboard's bottom position (px) of absolutely positioned element on mobile. ", "attributes": [ { "name": "auto-dock-enabled", "description": "Controls the behavior to auto dock the scoreboard to the bottom in smaller parent containers/mobile devices.", "default": "true", "value": { "type": "boolean" } }, { "name": "item-limit", "description": "Number of scoreboard items that can be viewed at a time. Minimum: 2, Maximum : 6.", "default": "6", "value": { "type": "number" } }, { "name": "query-type", "description": "Determines whether to query against feature layer service or feature layer view. Default: 'layerView'", "default": "\"layerView\"", "value": { "type": [ "\"layer\"", "\"layerView\"" ] } } ], "events": [ { "name": "scoreboardItemsUpdated", "type": "Array", "description": "Emits when scoreboard item values have been calculated and updated." } ], "js": { "properties": [ { "name": "autoDockEnabled", "description": "Controls the behavior to auto dock the scoreboard to the bottom in smaller parent containers/mobile devices.", "type": "boolean" }, { "name": "geometry", "description": "Optional geometry in which the statistics will be calculated. To re-calculate the scoreboard's statistics based on the current view extent, set this property to `null`.", "type": "Geometry" }, { "name": "itemLimit", "description": "Number of scoreboard items that can be viewed at a time. Minimum: 2, Maximum : 6.", "type": "number" }, { "name": "items", "description": "Data on layers, field attribute info, operations, for each scoreboard item", "type": "Array" }, { "name": "mode", "description": "Mode of scoreboard i.e. 'floating' or 'pinned'.", "type": "Scoreboard.Floating | Scoreboard.Pinned" }, { "name": "position", "description": "Position of scoreboard i.e. 'bottom', 'left', or 'right'.", "type": "Scoreboard.Bottom | Scoreboard.Left | Scoreboard.Right" }, { "name": "queryType", "description": "Determines whether to query against feature layer service or feature layer view. Default: 'layerView'", "type": "\"layer\" | \"layerView\"" }, { "name": "view", "description": "MapView or SceneView to reference extent, viewpoint, and layers in map to perform calculations.", "type": "MapView | SceneView" } ], "events": [ { "name": "scoreboardItemsUpdated", "type": "Array", "description": "Emits when scoreboard item values have been calculated and updated." } ] } }, { "name": "instant-apps-sign-in", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **sign-in-popover-top** - A slot for adding an element to the top of the sign in popover.\n\n### CSS Properties\n- **--instant-apps-sign-in-indicator-color** - Color of the indicator that shows in a signed in user's avatar. ", "attributes": [ { "name": "landing-page", "description": "Set to `true` if app has landing page", "default": "false", "value": { "type": "boolean" } }, { "name": "oauthappid", "description": "The registered application id, used to setup sign in capabilities.", "value": { "type": "string" } }, { "name": "open-in-popup", "description": "Set to true to show the OAuth sign-in page in a popup window.", "default": "false", "value": { "type": "boolean" } }, { "name": "show-indicator", "description": "Show blue dot indicator on user avatar.", "default": "true", "value": { "type": "boolean" } }, { "name": "type", "description": "Pick the look of the sign in/out component. `navigation` will put sign out in calcite-navigation-user.\n`avatar` will put sign out in calcite-avatar. `landingPage` is used for instant-apps-landing-page.", "default": "\"navigation\"", "value": { "type": [ "\"avatar\"", "\"landingPage\"", "\"navigation\"" ] } } ], "slots": [ { "name": "sign-in-popover-top", "description": "A slot for adding an element to the top of the sign in popover." } ], "events": [], "js": { "properties": [ { "name": "closeLandingPage", "type": "((() => void))" }, { "name": "landingPage", "description": "Set to `true` if app has landing page", "type": "boolean" }, { "name": "oauthappid", "description": "The registered application id, used to setup sign in capabilities.", "type": "string" }, { "name": "openInPopup", "description": "Set to true to show the OAuth sign-in page in a popup window.", "type": "boolean" }, { "name": "portal", "description": "The apps Portal, used to setup sign in capabilities.", "type": "IPortal" }, { "name": "showIndicator", "description": "Show blue dot indicator on user avatar.", "type": "boolean" }, { "name": "signInPopoverItems", "description": "Add items to the sign in popover.", "type": "(Array<{\n label: string;\n onClick: (event: MouseEvent) => unknown;\n}>)" }, { "name": "type", "description": "Pick the look of the sign in/out component. `navigation` will put sign out in calcite-navigation-user.\n`avatar` will put sign out in calcite-avatar. `landingPage` is used for instant-apps-landing-page.", "type": "\"avatar\" | \"landingPage\" | \"navigation\"" } ], "events": [] } }, { "name": "instant-apps-social-share", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--instant-apps-social-share-action-width** - Width of action button \n- **--instant-apps-social-share-width--s** - Width of component when scale is set to `s` \n- **--instant-apps-social-share-width--m** - Width of component when scale is set to `m` \n- **--instant-apps-social-share-width--l** - Width of component when scale is set to `l` \n- **--instant-apps-social-share-width-horizontal--s** - Width of component when `share-icons-layout` is set to `horizontal` and scale is set to 's' \n- **--instant-apps-social-share-width-horizontal--m** - Width of component when `share-icons-layout` is set to `horizontal` and scale is set to 'm' \n- **--instant-apps-social-share-width-horizontal--l** - Width of component when `share-icons-layout` is set to `horizontal` and scale is set to 'l' ", "attributes": [ { "name": "auto-update-share-url", "description": "Auto update share URL.", "default": "true", "value": { "type": "boolean" } }, { "name": "display-tip-text", "description": "Show/hide the tip text below the share options.", "default": "true", "value": { "type": "boolean" } }, { "name": "embed", "description": "Show/hide the embed UI.", "default": "false", "value": { "type": "boolean" } }, { "name": "flip-rtl", "description": "When true, the icon will be flipped when the element direction is right-to-left (\"rtl\").", "default": "false", "value": { "type": "boolean" } }, { "name": "iframe-inner-text", "description": "Text to nest in embed iframe code.", "default": "\"\"", "value": { "type": "string" } }, { "name": "inline-success-popover-placement", "description": "Configures the placement of the success message popover for the 'Copy Link' button.\nSee options here: https://github.com/Esri/calcite-components/blob/v1.0.0-beta.83/src/utils/popper.ts#L34", "default": "\"trailing\"", "value": { "type": [ "\"auto\"", "\"auto-end\"", "\"auto-start\"", "\"bottom\"", "\"bottom-end\"", "\"bottom-start\"", "\"leading\"", "\"leading-end\"", "\"leading-start\"", "\"left\"", "\"left-end\"", "\"left-start\"", "\"right\"", "\"right-end\"", "\"right-start\"", "\"top\"", "\"top-end\"", "\"top-start\"", "\"trailing\"", "\"trailing-end\"", "\"trailing-start\"" ] } }, { "name": "is-native-share-enabled", "description": "Determines if the native share API (e.g., drawer menu on mobile) is enabled and available.", "default": "false", "value": { "type": "boolean" } }, { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "default": "\"popover\"", "value": { "type": [ "\"inline\"", "\"popover\"" ] } }, { "name": "popover-button-icon-scale", "description": "Adjusts the scale of the popover button icon.", "default": "\"m\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "popover-positioning", "description": "Adjusts the overlay-positioning of the popover.", "default": "\"absolute\"", "value": { "type": [ "\"absolute\"", "\"fixed\"" ] } }, { "name": "remove-popover-offset", "description": "Remove the pointer and set the vertical offset to 0 for the popover.", "default": "false", "value": { "type": "boolean" } }, { "name": "scale", "description": "Adjusts the scale of the component.", "default": "\"m\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "share-button-color", "default": "\"neutral\"", "value": { "type": [ "\"inverse\"", "\"neutral\"" ] } }, { "name": "share-button-scale", "description": "Adjust scale of popover button", "default": "\"m\"", "value": { "type": [ "\"l\"", "\"m\"", "\"s\"" ] } }, { "name": "share-button-type", "description": "Renders tool in popover mode with a trigger button or action", "default": "\"button\"", "value": { "type": [ "\"action\"", "\"button\"" ] } }, { "name": "share-icons-layout", "description": "Display the share icons in a vertical or horizontal layout.", "default": "\"vertical\"", "value": { "type": [ "\"horizontal\"", "\"vertical\"" ] } }, { "name": "share-text", "default": "\"\"", "value": { "type": "string" } }, { "name": "share-url", "description": "Generated share URL. Use this property to append custom URL parameters if needed.", "value": { "type": "string" } }, { "name": "shorten-share-url", "description": "Shortens generated URL.", "default": "true", "value": { "type": "boolean" } }, { "name": "social-media", "description": "Show/hide social media icons.", "default": "true", "value": { "type": "boolean" } }, { "name": "success-message", "description": "Provides an alternate to the success.url message \"App URL copied to clipboard.\"", "default": "\"\"", "value": { "type": "string" } }, { "name": "use-native-share", "description": "Use the device's native share API (e.g., drawer menu on mobile) if available.", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "autoUpdateShareUrl", "description": "Auto update share URL.", "type": "boolean" }, { "name": "defaultUrlParams", "description": "Configure the default URL parameters that are appended to the generated share URL.", "type": "{\n center?: boolean | undefined;\n level?: boolean | undefined;\n viewpoint?: boolean | undefined;\n selectedFeature?: boolean | undefined;\n hiddenLayers?: boolean | undefined;\n}" }, { "name": "displayTipText", "description": "Show/hide the tip text below the share options.", "type": "boolean" }, { "name": "embed", "description": "Show/hide the embed UI.", "type": "boolean" }, { "name": "flipRtl", "description": "When true, the icon will be flipped when the element direction is right-to-left (\"rtl\").", "type": "boolean" }, { "name": "iframeInnerText", "description": "Text to nest in embed iframe code.", "type": "string" }, { "name": "inlineSuccessPopoverPlacement", "description": "Configures the placement of the success message popover for the 'Copy Link' button.\nSee options here: https://github.com/Esri/calcite-components/blob/v1.0.0-beta.83/src/utils/popper.ts#L34", "type": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\"" }, { "name": "isNativeShareEnabled", "description": "Determines if the native share API (e.g., drawer menu on mobile) is enabled and available.", "type": "boolean" }, { "name": "mode", "description": "Renders tool as a popover with a trigger button, or inline to place in a custom container.", "type": "\"inline\" | \"popover\"" }, { "name": "popoverButtonIconScale", "description": "Adjusts the scale of the popover button icon.", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "popoverPositioning", "description": "Adjusts the overlay-positioning of the popover.", "type": "\"absolute\" | \"fixed\"" }, { "name": "removePopoverOffset", "description": "Remove the pointer and set the vertical offset to 0 for the popover.", "type": "boolean" }, { "name": "scale", "description": "Adjusts the scale of the component.", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "shareButtonColor", "type": "\"inverse\" | \"neutral\"" }, { "name": "shareButtonScale", "description": "Adjust scale of popover button", "type": "\"l\" | \"m\" | \"s\"" }, { "name": "shareButtonType", "description": "Renders tool in popover mode with a trigger button or action", "type": "\"action\" | \"button\"" }, { "name": "shareIconsLayout", "description": "Display the share icons in a vertical or horizontal layout.", "type": "\"horizontal\" | \"vertical\"" }, { "name": "shareText", "type": "string" }, { "name": "shareUrl", "description": "Generated share URL. Use this property to append custom URL parameters if needed.", "type": "string" }, { "name": "shortenShareUrl", "description": "Shortens generated URL.", "type": "boolean" }, { "name": "socialMedia", "description": "Show/hide social media icons.", "type": "boolean" }, { "name": "successMessage", "description": "Provides an alternate to the success.url message \"App URL copied to clipboard.\"", "type": "string" }, { "name": "useNativeShare", "description": "Use the device's native share API (e.g., drawer menu on mobile) if available.", "type": "boolean" }, { "name": "view", "description": "MapView or SceneView to reference when URL parameter values are generated, i.e. center, level, viewpoint, etc.", "type": "MapView | SceneView" } ], "events": [] } }, { "name": "instant-apps-splash", "description": "### Events\n- **splashClose** - Emits when the splash modal is closed.\n\n### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.\n\n### CSS Properties\n- **--instant-apps-splash-content-max-height** - Set the max height of the content area . \n- **--instant-apps-splash-back-content-display** - Controls the display property of the back content area. ", "attributes": [ { "name": "close-behavior", "description": "Determines how the splash screen is dismissed.\n'permanent-dismissal' displays a \"Don't show this again\" checkbox,\n'dismissal' opens the splash on every visit, and\n'confirmation' requires the confirmation checkbox to be checked for the splash to be dismissible.", "default": "\"permanent-dismissal\"", "value": { "type": [ "\"confirmation\"", "\"dismissal\"", "\"permanent-dismissal\"" ] } }, { "name": "close-button-disabled", "description": "When `true`, disables the component's close button.", "default": "false", "value": { "type": "boolean" } }, { "name": "confirmation-text", "description": "Confirmation text for checkbox.", "default": "\"\"", "value": { "type": "string" } }, { "name": "content", "description": "Content of splash screen.", "default": "\"\"", "value": { "type": "string" } }, { "name": "local-storage-key", "description": "Local storage key used to determine whether or not user has opted into \"Don't show this again\" checkbox.", "value": { "type": "string" } }, { "name": "open", "description": "Controls the 'open' state of the modal element.", "default": "true", "value": { "type": "boolean" } }, { "name": "outside-close-disabled", "description": "When `true`, disables the closing of the component when clicked outside.", "default": "false", "value": { "type": "boolean" } }, { "name": "primary-button-text", "description": "Primary button text.", "default": "\"\"", "value": { "type": "string" } }, { "name": "secondary-button", "description": "When `true`, enables a secondary button at the component's footer.", "default": "false", "value": { "type": "boolean" } }, { "name": "secondary-button-icon", "description": "Secondary button icon.", "value": { "type": "string" } }, { "name": "secondary-button-text", "description": "Secondary button text.", "value": { "type": "string" } }, { "name": "title-text", "description": "Title of splash screen.", "default": "\"\"", "value": { "type": "string" } } ], "events": [ { "name": "splashClose", "type": "void", "description": "Emits when the splash modal is closed." } ], "js": { "properties": [ { "name": "closeBehavior", "description": "Determines how the splash screen is dismissed.\n'permanent-dismissal' displays a \"Don't show this again\" checkbox,\n'dismissal' opens the splash on every visit, and\n'confirmation' requires the confirmation checkbox to be checked for the splash to be dismissible.", "type": "\"confirmation\" | \"dismissal\" | \"permanent-dismissal\"" }, { "name": "closeButtonDisabled", "description": "When `true`, disables the component's close button.", "type": "boolean" }, { "name": "confirmationText", "description": "Confirmation text for checkbox.", "type": "string" }, { "name": "content", "description": "Content of splash screen.", "type": "string" }, { "name": "isConfirmed", "description": "If the dismiss type is 'confirmation', this read-only property determines whether the splash component is dismissible.", "type": "boolean" }, { "name": "localStorageKey", "description": "Local storage key used to determine whether or not user has opted into \"Don't show this again\" checkbox.", "type": "string" }, { "name": "open", "description": "Controls the 'open' state of the modal element.", "type": "boolean" }, { "name": "outsideCloseDisabled", "description": "When `true`, disables the closing of the component when clicked outside.", "type": "boolean" }, { "name": "primaryButtonText", "description": "Primary button text.", "type": "string" }, { "name": "secondaryButton", "description": "When `true`, enables a secondary button at the component's footer.", "type": "boolean" }, { "name": "secondaryButtonCallback", "description": "Callback function when secondary button is clicked.", "type": "((() => Promise))" }, { "name": "secondaryButtonIcon", "description": "Secondary button icon.", "type": "string" }, { "name": "secondaryButtonText", "description": "Secondary button text.", "type": "string" }, { "name": "titleText", "description": "Title of splash screen.", "type": "string" } ], "events": [ { "name": "splashClose", "type": "void", "description": "Emits when the splash modal is closed." } ] } }, { "name": "instant-apps-time-filter", "description": "### Methods\n- `componentOnReady(): Promise` - Create a promise that resolves once component is fully loaded.", "attributes": [ { "name": "auto-play", "default": "false", "value": { "type": "boolean" } } ], "events": [], "js": { "properties": [ { "name": "autoPlay", "type": "boolean" }, { "name": "filterMode", "type": "FilterMode" }, { "name": "timeInfoConfigItems", "type": "Array<{\n type?: string | undefined;\n id?: string | undefined;\n increments: string;\n max: string;\n min: string;\n rangeEnd: Date;\n rangeStart: Date;\n timeIntervalValue?: number | undefined;\n}>" }, { "name": "timeSliderConfig", "type": "widgetsTimeSliderProperties" }, { "name": "view", "type": "MapView | SceneView" } ], "events": [] } } ] }, "css": { "properties": [ { "name": "--instant-apps-create-action-background", "description": "Popup's trigger button's background color." }, { "name": "--instant-apps-create-action-background-hover", "description": "Popup's trigger button's background color on hover." }, { "name": "--instant-apps-create-action-background-press", "description": "Popup's trigger button's background color on press." }, { "name": "--instant-apps-create-action-width", "description": "Popup's trigger button's width." }, { "name": "--instant-apps-create-action-height", "description": "Popup's trigger button's height." }, { "name": "--instant-apps-create-action-icon-color", "description": "Popup's trigger button's icon color." }, { "name": "--instant-apps-create-action-icon-hover-color", "description": "Popup's trigger button's icon color when hovered over." }, { "name": "--instant-apps-create-background", "description": "Create's container background color." }, { "name": "--instant-apps-create-text-color", "description": "Create's container text color." }, { "name": "--instant-apps-create-popover-width", "description": "Create's popover container width." }, { "name": "--instant-apps-export-action-background", "description": "Popup's trigger button's background color." }, { "name": "--instant-apps-export-action-background-hover", "description": "Popup's trigger button's background color on hover." }, { "name": "--instant-apps-export-action-background-press", "description": "Popup's trigger button's background color on press." }, { "name": "--instant-apps-export-action-width", "description": "Popup's trigger button's width." }, { "name": "--instant-apps-export-action-height", "description": "Popup's trigger button's height." }, { "name": "--instant-apps-export-action-icon-color", "description": "Popup's trigger button's icon color." }, { "name": "--instant-apps-export-action-icon-hover-color", "description": "Popup's trigger button's icon color when hovered over." }, { "name": "--instant-apps-export-background", "description": "Export's container background color." }, { "name": "--instant-apps-export-text-color", "description": "Export's container text color." }, { "name": "--instant-apps-export-popover-width", "description": "Export's popover container width." }, { "name": "--instant-apps-export-action-background", "description": "Popup's trigger button's background color." }, { "name": "--instant-apps-export-action-background-hover", "description": "Popup's trigger button's background color on hover." }, { "name": "--instant-apps-export-action-background-press", "description": "Popup's trigger button's background color on press." }, { "name": "--instant-apps-export-action-width", "description": "Popup's trigger button's width." }, { "name": "--instant-apps-export-action-height", "description": "Popup's trigger button's height." }, { "name": "--instant-apps-export-action-icon-color", "description": "Popup's trigger button's icon color." }, { "name": "--instant-apps-export-action-icon-hover-color", "description": "Popup's trigger button's icon color when hovered over." }, { "name": "--instant-apps-export-background", "description": "Export's container background color." }, { "name": "--instant-apps-export-text-color", "description": "Export's container text color." }, { "name": "--instant-apps-export-popover-width", "description": "Export's popover container width." }, { "name": "--instant-apps-header-height", "description": "Height for header. Default: auto;" }, { "name": "--instant-apps-header-min-height", "description": "Minimum height for header. Default: 50px;" }, { "name": "--instant-apps-header-title-text-link-decoration", "description": "Text decoration for hyperlinks for `titleTextLink`. Default value is 'underline'." }, { "name": "--instant-apps-header-height--logo-scale--s", "description": "Header height when logo scale is set to 's'. Default value is 55px." }, { "name": "--instant-apps-header-logo-width--logo-scale--s", "description": "Logo width when logo scale is set to 's'. Default value: 35px." }, { "name": "--instant-apps-header-logo-height--logo-scale--s", "description": "Logo height when logo scale is set to 's'. Default value: 35px." }, { "name": "--instant-apps-header-height--logo-scale--m", "description": "Header height when logo scale is set to 'm'. Default value is 70px." }, { "name": "--instant-apps-header-logo-width--logo-scale--m", "description": "Logo width when logo scale is set to 'm'. Default value: 50px." }, { "name": "--instant-apps-header-logo-height--logo-scale--m", "description": "Logo height when logo scale is set to 'm'. Default value: 50px." }, { "name": "--instant-apps-header-height--logo-scale--l", "description": "Header height when logo scale is set to 'l'. Default value is 80px." }, { "name": "--instant-apps-header-logo-width--logo-scale--l", "description": "Logo width when logo scale is set to 'l'. Default value: 60px." }, { "name": "--instant-apps-header-logo-height--logo-scale--l", "description": "Logo height when logo scale is set to 'l'. Default value: 60px." }, { "name": "--instant-apps-header-actions-end-height", "description": "Height for actions-end-container. Default: auto;" }, { "name": "--instant-apps-landing-page-background-color", "description": "Brand color of landing page that affects the background (if a backgound image is not set) and entry button colors" }, { "name": "--instant-apps-landing-page-text-color", "description": "Text color of landing page." }, { "name": "--instant-apps-landing-page-entry-button-color", "description": "Brand color of the entry button." }, { "name": "--instant-apps-landing-page-title-text-font-size", "description": "Font size of title text." }, { "name": "--instant-apps-landing-page-subtitle-text-font-size", "description": "Font size of subtitle text." }, { "name": "--instant-apps-landing-page-description-text-font-size", "description": "Font size of description text." }, { "name": "--instant-apps-landing-page-icon-image-scale--s", "description": "Icon image width when scale is set to 's'. Default value is 100px." }, { "name": "--instant-apps-landing-page-icon-image-scale--m", "description": "Icon image width when scale is set to 'm'. Default value is 250px." }, { "name": "--instant-apps-landing-page-icon-image-scale--l", "description": "Icon image width when scale is set to 'l'. Default value is 500px." }, { "name": "--instant-apps-landing-page-entry-button-margin", "description": "Option to provide spacing in case a secondary action is added to the landing page." }, { "name": "--instant-apps-scoreboard-background-color", "description": "Background color of scoreboard." }, { "name": "--instant-apps-scoreboard-text-color", "description": "Text color of scoreboard." }, { "name": "--instant-apps-scoreboard-mobile-position-bottom", "description": "Scoreboard's bottom position (px) of absolutely positioned element on mobile." }, { "name": "--instant-apps-sign-in-indicator-color", "description": "Color of the indicator that shows in a signed in user's avatar." }, { "name": "--instant-apps-social-share-action-width", "description": "Width of action button" }, { "name": "--instant-apps-social-share-width--s", "description": "Width of component when scale is set to `s`" }, { "name": "--instant-apps-social-share-width--m", "description": "Width of component when scale is set to `m`" }, { "name": "--instant-apps-social-share-width--l", "description": "Width of component when scale is set to `l`" }, { "name": "--instant-apps-social-share-width-horizontal--s", "description": "Width of component when `share-icons-layout` is set to `horizontal` and scale is set to 's'" }, { "name": "--instant-apps-social-share-width-horizontal--m", "description": "Width of component when `share-icons-layout` is set to `horizontal` and scale is set to 'm'" }, { "name": "--instant-apps-social-share-width-horizontal--l", "description": "Width of component when `share-icons-layout` is set to `horizontal` and scale is set to 'l'" }, { "name": "--instant-apps-splash-content-max-height", "description": "Set the max height of the content area ." }, { "name": "--instant-apps-splash-back-content-display", "description": "Controls the display property of the back content area." } ], "pseudo-elements": [] } } }