@arcgis/core 5.1.0-next.64 → 5.1.0-next.66

package/widgets/Search/SearchViewModel.d.ts

@@ -256,7 +256,7 @@ export default class SearchViewModel extends SearchViewModelSuperclass {
    * String value used as a hint for input text when searching on multiple sources. See
    * the image below to view the location and style of this text.
    *
-   * ![search-allPlaceholder](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-allplaceholder.png)
+   * ![search-allPlaceholder](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-allplaceholder.avif)
    *
    * @default "Find address or place"
    */
@@ -358,7 +358,7 @@ export default class SearchViewModel extends SearchViewModelSuperclass {
   /**
    * Indicates whether location services are enabled.
    *
-   * ![locationEnabled](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-locationEnabled.png)
+   * ![locationEnabled](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-locationEnabled.avif)
    *
    * > [!WARNING]
    * >
@@ -455,11 +455,11 @@ export default class SearchViewModel extends SearchViewModelSuperclass {
    * Indicates whether to display the option to search all sources. When `true`, the "All" option
    * is displayed by default:
    *
-   * ![search-searchAllEnabled-true](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-true.png)
+   * ![search-searchAllEnabled-true](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-true.avif)
    *
    * When `false`, no option to search all sources at once is available:
    *
-   * ![search-searchAllEnabled-true-false](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-false.png)
+   * ![search-searchAllEnabled-true-false](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-false.avif)
    *
    * @default true
    */

package/widgets/Search.d.ts

@@ -216,7 +216,7 @@ export interface SearchEvents extends SearchViewModelEvents {
  * This behavior can be changed by using the [LocatorSearchSource.localSearchDisabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/Search/LocatorSearchSource/#localSearchDisabled)
  * property.
  *
- * ![search](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search.png)
+ * ![search](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search.avif)
  *
  * You can use the view's [DefaultUI](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/) to add widgets to the view's user interface via the
  * `ui` property on the view. See the example below.
@@ -278,7 +278,7 @@ export default class Search extends Widget {
    * String value used as a hint for input text when searching on multiple sources. See
    * the image below to view the location and style of this text in the context of the widget.
    *
-   * ![search-allPlaceholder](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-allplaceholder.png)
+   * ![search-allPlaceholder](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-allplaceholder.avif)
    *
    * @default "Find address or place"
    */
@@ -396,7 +396,7 @@ export default class Search extends Widget {
   /**
    * Enables location services within the widget.
    *
-   * ![locationEnabled](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-locationEnabled.png)
+   * ![locationEnabled](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-locationEnabled.avif)
    *
    * > [!WARNING]
    * >
@@ -477,11 +477,11 @@ export default class Search extends Widget {
    * Indicates whether to display the option to search all sources. When `true`, the "All" option
    * is displayed by default:
    *
-   * ![search-searchAllEnabled-true](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-true.png)
+   * ![search-searchAllEnabled-true](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-true.avif)
    *
    * When `false`, no option to search all sources at once is available:
    *
-   * ![search-searchAllEnabled-false](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-false.png)
+   * ![search-searchAllEnabled-false](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/search-enablesearchingall-false.avif)
    *
    * @default true
    */

package/widgets/ShadowCast.d.ts

@@ -66,7 +66,7 @@ export interface ShadowCastProperties extends WidgetProperties, Partial<Pick<Sha
  * shadows for more than a certain amount of time are displayed. In the image below, on May 1, 2021 the red areas receive
  * shadow for more than 4 hours within the time interval of 10AM to 4PM.
  *
- * [![threshold mode](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/shadow-cast/shadow-cast-threshold.png)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/)
+ * [![threshold mode](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/shadow-cast/shadow-cast-threshold.avif)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/)
  *
  * **Total shadow duration** mode displays the duration of the cumulative shadow using opacity: areas that don't
  * receive any shadow are fully transparent and areas that receive a maximum amount of shadow have a default opacity
@@ -74,13 +74,13 @@ export interface ShadowCastProperties extends WidgetProperties, Partial<Pick<Sha
  * amount of time that location is in shadow, rounded to 15 minute intervals. In this mode, the visualization
  * can display shadow cast in a continuous way or in 1 hour intervals.
  *
- * [![duration mode](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/shadow-cast/shadow-cast-duration.png)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/)
+ * [![duration mode](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/shadow-cast/shadow-cast-duration.avif)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/)
  *
  * **Discrete shadows** is a third visualization mode which displays individual shadows at a given time interval.
  * For example, setting the time range to 10AM-11AM and the visualization time interval to 30 minutes will display
  * shadows for 10AM, 10:30AM and 11:00AM.
  *
- * [![discrete mode](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/shadow-cast/shadow-cast-discrete.png)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/)
+ * [![discrete mode](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/shadow-cast/shadow-cast-discrete.avif)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/)
  *
  * The defaults for the time range and visualization settings can be changed using the
  * [ShadowCastViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/ShadowCast/ShadowCastViewModel/).

package/widgets/Sketch/SketchViewModel.d.ts

@@ -291,7 +291,7 @@ export interface SketchViewModelEvents {
  * For example, the sample [Filter SceneLayer with FeatureFilter](https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer-feature-masking/) demonstrates
  * an example of utilizing the SketchViewModel with a custom UI.
  *
- * [![layers-scenelayer-feature-masking](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-vm-custom.png)](https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer-feature-masking/)
+ * [![layers-scenelayer-feature-masking](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-vm-custom.avif)](https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer-feature-masking/)
  *
  * Additionally, users can pick and choose which draw tools are relevant to their applications. In this example, only the `point`, `polyline`, and `polygon` tools are used.
  *
@@ -308,10 +308,10 @@ export interface SketchViewModelEvents {
  *
  * Gesture | Action | Example |
  * ---------|---------|---------|
- * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/undo-line.gif" width="400px"> |
- * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/redo-line.gif" width="400px"> |
- * Ctrl | Toggle snapping dependent on the configuration in [snappingOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#snappingOptions). | <img alt="Ctrl key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/ctrl-key-polygon.gif" width="400px"> |
- * Tab | While drawing or updating features, activate the tooltips' input mode to enter values or apply constraints. Depends on [tooltipOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#tooltipOptions) configuration. | <img alt="Tab key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/tab-key-editing-constraints.gif" width="400px"> |
+ * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/undo-line.webm" width="400px"> |
+ * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/redo-line.webm" width="400px"> |
+ * Ctrl | Toggle snapping dependent on the configuration in [snappingOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#snappingOptions). | <img alt="Ctrl key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/ctrl-key-polygon.webm" width="400px"> |
+ * Tab | While drawing or updating features, activate the tooltips' input mode to enter values or apply constraints. Depends on [tooltipOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#tooltipOptions) configuration. | <img alt="Tab key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/tab-key-editing-constraints.webm" width="400px"> |
  *
  * #### Creating point graphics
  *
@@ -326,12 +326,12 @@ export interface SketchViewModelEvents {
  *
  * Gesture | Action | Example |
  * ---------|---------|---------|
- * Left-click | Adds a vertex at the pointer location. | <img alt="Left-click" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-line.gif" width="400px"> |
- * Left-drag | Adds a vertex for each pointer move in [hybrid](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#defaultCreateOptions) or [freehand](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#defaultCreateOptions) mode. | <img alt="Left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-drag-line.gif" width="400px"> |
- * F | Adds a vertex to the `polyline` or `polygon` graphic. Completes the `rectangle` or `circle` polygon graphic in [click](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#defaultCreateOptions) mode. | <img alt="F vertex add" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/f-key-line.gif" width="400px"> |
- * Enter | Completes the `polyline` or `polygon` graphic without the staged vertex. A `double-click` will complete the graphic at the current mouse cursor's position. | <img alt="Enter" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/enter-line.gif" width="400px"> |
- * Spacebar+Left-drag | Pan the view while creating a polyline or polygon graphic. | <img alt="Space left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/space-left-drag.gif" width="400px"> |
- * Left-click on the first vertex | Completes the polygon graphic sketch. | <img alt="Left-click first vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-vertex.gif" width="400px"> |
+ * Left-click | Adds a vertex at the pointer location. | <img alt="Left-click" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-line.webm" width="400px"> |
+ * Left-drag | Adds a vertex for each pointer move in [hybrid](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#defaultCreateOptions) or [freehand](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#defaultCreateOptions) mode. | <img alt="Left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-drag-line.webm" width="400px"> |
+ * F | Adds a vertex to the `polyline` or `polygon` graphic. Completes the `rectangle` or `circle` polygon graphic in [click](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#defaultCreateOptions) mode. | <img alt="F vertex add" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/f-key-line.webm" width="400px"> |
+ * Enter | Completes the `polyline` or `polygon` graphic without the staged vertex. A `double-click` will complete the graphic at the current mouse cursor's position. | <img alt="Enter" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/enter-line.webm" width="400px"> |
+ * Spacebar+Left-drag | Pan the view while creating a polyline or polygon graphic. | <img alt="Space left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/space-left-drag.webm" width="400px"> |
+ * Left-click on the first vertex | Completes the polygon graphic sketch. | <img alt="Left-click first vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-vertex.webm" width="400px"> |
  *
  * #### Creating polygon graphics with predefined shapes
  *
@@ -339,10 +339,10 @@ export interface SketchViewModelEvents {
  *
  * Gesture | Action | Example |
  * ------- | ------ |---------|
- * Left-click+Drag | Creates a `rectangle` graphic with dimensions based on the bounding box between initial click and cursor location. Creates a `circle` graphic with radius based on the distance between initial click and cursor location. | <img alt="Polygon Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/polygon-left-click-drag.gif" width="400px"> |
- * Shift+Left-click+Drag | Changes the shape from a `rectangle` to a `square` or from a `circle` to an `ellipse`. | <img alt="Shift Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-left-click-drag.gif" width="400px"> |
- * Alt+Left-click+Drag | Creates a `rectangle` graphic with a center at initial click, and dimensions based on the distance between the initial click to the cursor location. Creates a `circle` graphic with a radius based on the bounding box between the initial click and the cursor location. | <img alt="Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/alt-left-click-drag.gif" width="400px"> |
- * Shift+Alt+Left-click+Drag | Combines the behavior described above. | <img alt="Shift Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-alt-left-click-drag.gif" width="400px"> |
+ * Left-click+Drag | Creates a `rectangle` graphic with dimensions based on the bounding box between initial click and cursor location. Creates a `circle` graphic with radius based on the distance between initial click and cursor location. | <img alt="Polygon Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/polygon-left-click-drag.webm" width="400px"> |
+ * Shift+Left-click+Drag | Changes the shape from a `rectangle` to a `square` or from a `circle` to an `ellipse`. | <img alt="Shift Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-left-click-drag.webm" width="400px"> |
+ * Alt+Left-click+Drag | Creates a `rectangle` graphic with a center at initial click, and dimensions based on the distance between the initial click to the cursor location. Creates a `circle` graphic with a radius based on the bounding box between the initial click and the cursor location. | <img alt="Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/alt-left-click-drag.webm" width="400px"> |
+ * Shift+Alt+Left-click+Drag | Combines the behavior described above. | <img alt="Shift Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-alt-left-click-drag.webm" width="400px"> |
  *
  * <span id="update-graphics"></span>
  * #### Updating graphics
@@ -353,29 +353,29 @@ export interface SketchViewModelEvents {
  *
  * Gesture | Action | Example |
  * ---------|---------|----------|
- * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-mode.gif" width="400px"> |
- * Shift+Left-click graphics | Select multiple graphics to move, rotate or scale.| <img alt="Select graphics" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-graphics.gif" width="400px"> |
- * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-move.gif" width="400px"> |
- * Drag rotate handle | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-rotate.gif" width="400px"> |
- * Drag scale handle | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-scale.gif" width="400px"> |
- * Shift+Left-click+Drag scale handle | Scale the selected graphic at the center. | <img alt="Scale the graphic at the center" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/scale-shift-left-click-drag.gif" width="400px"> |
- * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-undo.gif" width="400px"> |
- * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-redo.gif" width="400px"> |
- * Left-click on view (not the graphic) | Complete the graphic update. | <img alt="Sketch update complete" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-complete.gif" width="400px"> |
- * Press `Delete` key | Remove the selected graphic(s) from the [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#layer). | <img alt="Sketch delete graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-graphic.gif" width="400px">
+ * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-mode.webm" width="400px"> |
+ * Shift+Left-click graphics | Select multiple graphics to move, rotate or scale.| <img alt="Select graphics" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-graphics.webm" width="400px"> |
+ * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-move.webm" width="400px"> |
+ * Drag rotate handle | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-rotate.webm" width="400px"> |
+ * Drag scale handle | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-scale.webm" width="400px"> |
+ * Shift+Left-click+Drag scale handle | Scale the selected graphic at the center. | <img alt="Scale the graphic at the center" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/scale-shift-left-click-drag.webm" width="400px"> |
+ * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-undo.webm" width="400px"> |
+ * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-redo.webm" width="400px"> |
+ * Left-click on view (not the graphic) | Complete the graphic update. | <img alt="Sketch update complete" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-complete.webm" width="400px"> |
+ * Press `Delete` key | Remove the selected graphic(s) from the [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#layer). | <img alt="Sketch delete graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-graphic.webm" width="400px">
  *
  * The following update operations can be performed on a single polyline or polygon graphic:
  *
  * Gesture | Action | Example |
  * ---------|---------|----------|
- * Left-click on a graphic | Select a graphic to move or reshape.| <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-reshape-mode.gif" width="400px"> |
- * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-drag.gif" width="400px"> |
- * Left-click on a ghost vertex| Add a new vertex. | <img alt="Add a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-add-vertices.gif" width="400px"> |
- * Left-click on a vertex| Select a vertex. | <img alt="Select a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertex.gif" width="400px"> |
- * Shift+Left-click on vertices | Select or unselect multiple vertices. | <img alt="Select vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertices.gif" width="400px"> |
- * Drag vertex | Move the selected vertex or vertices. | <img alt="Drag vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-dragvertices.gif" width="400px"> |
- * Right-click on a vertex | Delete a vertex. | <img alt="Delete a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertex.gif" width="400px"> |
- * Select multiple vertices and press `Backspace` or `Delete` key | Delete multiple vertices. | <img alt="Delete vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertices.gif" width="400px"> |
+ * Left-click on a graphic | Select a graphic to move or reshape.| <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-reshape-mode.webm" width="400px"> |
+ * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-drag.webm" width="400px"> |
+ * Left-click on a ghost vertex| Add a new vertex. | <img alt="Add a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-add-vertices.webm" width="400px"> |
+ * Left-click on a vertex| Select a vertex. | <img alt="Select a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertex.webm" width="400px"> |
+ * Shift+Left-click on vertices | Select or unselect multiple vertices. | <img alt="Select vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertices.webm" width="400px"> |
+ * Drag vertex | Move the selected vertex or vertices. | <img alt="Drag vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-dragvertices.webm" width="400px"> |
+ * Right-click on a vertex | Delete a vertex. | <img alt="Delete a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertex.webm" width="400px"> |
+ * Select multiple vertices and press `Backspace` or `Delete` key | Delete multiple vertices. | <img alt="Delete vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertices.webm" width="400px"> |
  *
  * <span id="point-transform-tool"></span>
  *
@@ -383,11 +383,11 @@ export interface SketchViewModelEvents {
  *
  * Gesture | Action | Example |
  * ---------|---------|----------|
- * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-point-3D.gif" width="400px"> |
- * Drag inner handle | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-move-point.gif" width="400px"> |
- * Drag height handle | Move the selected graphic vertically (on the z axis).| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-movez-point.gif" width="400px"> |
- * Drag outer handle sideways | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-rotate-point.gif" width="400px"> |
- * Drag outer handle inwards or outwards | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-scale-point.gif" width="400px"> |
+ * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-point-3D.webm" width="400px"> |
+ * Drag inner handle | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-move-point.webm" width="400px"> |
+ * Drag height handle | Move the selected graphic vertically (on the z axis).| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-movez-point.webm" width="400px"> |
+ * Drag outer handle sideways | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-rotate-point.webm" width="400px"> |
+ * Drag outer handle inwards or outwards | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-scale-point.webm" width="400px"> |
  *
  * </details>
  *
@@ -422,7 +422,7 @@ export interface SketchViewModelEvents {
  * In earlier versions, setting these properties would only override the graphic symbology after completing the draw operation. The [activeFillSymbol](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/SketchViewModel/#activeFillSymbol) property allowed users to override the default drawing symbol in order to match the final `polygonSymbol`.
  * This was needed for users to see what the final graphic symbol would look like while actively drawing. Setting the `pointSymbol`, `polylineSymbol`, and `polygonSymbol` now allows users to see what the final graphic symbol will look like while still actively drawing a graphic. The image below demonstrates the behavior when setting the `polygonSymbol`.
  *
- * ![active-fill-active-line](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/active-fill-active-line.gif)
+ * ![active-fill-active-line](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/active-fill-active-line.webm)
  *
  * The following is the code snippet used in the example above.
  *

package/widgets/Sketch.d.ts

@@ -177,12 +177,12 @@ export interface SketchProperties extends WidgetProperties, Partial<Pick<Sketch,
    *
    * The image below displays the default Sketch widget with selection, undo/redo, and settings menu tools.
    *
-   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/default-selection-sketch.png)
+   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/default-selection-sketch.avif)
    *
    * In comparison, this image shows how the widget displays with some of its tools not visible as
    * set in the example code snippet below.
    *
-   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/visible-elements-selection-sketch.png)
+   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/visible-elements-selection-sketch.avif)
    *
    * @example
    * // Setting the sketch's visible elements as below would result
@@ -214,10 +214,10 @@ export interface SketchEvents extends SketchViewModelEvents {}
  * and [Circle](https://developers.arcgis.com/javascript/latest/references/core/geometry/Circle/) geometries.
  *
  * Discover the Sketch widget in MapView with [this sample](https://developers.arcgis.com/javascript/latest/sample-code/sketch-geometries/):<br>
- * [![sketch-geometries](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-widget.gif)](https://developers.arcgis.com/javascript/latest/sample-code/sketch-geometries/)
+ * [![sketch-geometries](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-widget.webm)](https://developers.arcgis.com/javascript/latest/sample-code/sketch-geometries/)
  *
  * Discover the Sketch widget in SceneView with [this sample](https://developers.arcgis.com/javascript/latest/sample-code/sketch-3d/):<br>
- * [![sketch-geometries-3D](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-widget-3D.gif)](https://developers.arcgis.com/javascript/latest/sample-code/sketch-3d/)
+ * [![sketch-geometries-3D](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-widget-3D.webm)](https://developers.arcgis.com/javascript/latest/sample-code/sketch-3d/)
  *
  * Note that the update operations (such as rotate, move, and transform) and the creation of rectangles and circles happen in the map space.
  * This means that, for example, if a graphic is rotated in a Web Mercator view, its shape and segment lengths change.
@@ -235,10 +235,10 @@ export interface SketchEvents extends SketchViewModelEvents {}
  *
  * Gesture | Action | Example |
  * ---------|---------|---------|
- * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/undo-line.gif" width="400px"> |
- * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/redo-line.gif" width="400px"> |
- * Ctrl | Toggle snapping dependent on the configuration in [snappingOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#snappingOptions). | <img alt="Ctrl key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/ctrl-key-polygon.gif" width="400px"> |
- * Tab | While drawing or updating features, activate the tooltips' input mode to enter values or apply constraints. Depends on [tooltipOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#tooltipOptions) configuration. | <img alt="Tab key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/tab-key-editing-constraints.gif" width="400px"> |
+ * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/undo-line.webm" width="400px"> |
+ * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/redo-line.webm" width="400px"> |
+ * Ctrl | Toggle snapping dependent on the configuration in [snappingOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#snappingOptions). | <img alt="Ctrl key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/ctrl-key-polygon.webm" width="400px"> |
+ * Tab | While drawing or updating features, activate the tooltips' input mode to enter values or apply constraints. Depends on [tooltipOptions](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#tooltipOptions) configuration. | <img alt="Tab key" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/tab-key-editing-constraints.webm" width="400px"> |
  *
  * #### Creating point graphics
  *
@@ -253,12 +253,12 @@ export interface SketchEvents extends SketchViewModelEvents {}
  *
  * Gesture | Action | Example |
  * ---------|---------|---------|
- * Left-click | Adds a vertex at the pointer location.| <img alt="Left-click" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-line.gif" width="400px"> |
- * Left-drag | Adds a vertex for each pointer move in [hybrid](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#defaultCreateOptions) or [freehand](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#defaultCreateOptions) mode. | <img alt="Left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-drag-line.gif" width="400px"> |
- * F | Adds a vertex to the `polyline` or `polygon` graphic. Completes the `rectangle` or `circle` polygon graphic in [click](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#defaultCreateOptions) mode. | <img alt="F vertex add" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/f-key-line.gif" width="400px"> |
- * Enter | Completes the `polyline` or `polygon` graphic without the staged vertex. A `double-click` will complete the graphic at the current mouse cursor's postion. | <img alt="Enter" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/enter-line.gif" width="400px"> |
- * Spacebar+Left-drag | Pan the view while creating a polyline or polygon graphic. | <img alt="Space left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/space-left-drag.gif" width="400px"> |
- * Left-click on the first vertex | Completes the polygon graphic sketch. | <img alt="Left-click first vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-vertex.gif" width="400px"> |
+ * Left-click | Adds a vertex at the pointer location.| <img alt="Left-click" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-line.webm" width="400px"> |
+ * Left-drag | Adds a vertex for each pointer move in [hybrid](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#defaultCreateOptions) or [freehand](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#defaultCreateOptions) mode. | <img alt="Left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-drag-line.webm" width="400px"> |
+ * F | Adds a vertex to the `polyline` or `polygon` graphic. Completes the `rectangle` or `circle` polygon graphic in [click](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#defaultCreateOptions) mode. | <img alt="F vertex add" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/f-key-line.webm" width="400px"> |
+ * Enter | Completes the `polyline` or `polygon` graphic without the staged vertex. A `double-click` will complete the graphic at the current mouse cursor's postion. | <img alt="Enter" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/enter-line.webm" width="400px"> |
+ * Spacebar+Left-drag | Pan the view while creating a polyline or polygon graphic. | <img alt="Space left drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/space-left-drag.webm" width="400px"> |
+ * Left-click on the first vertex | Completes the polygon graphic sketch. | <img alt="Left-click first vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/left-click-vertex.webm" width="400px"> |
  *
  * #### Creating polygon graphics with predefined shapes
  *
@@ -266,10 +266,10 @@ export interface SketchEvents extends SketchViewModelEvents {}
  *
  * Gesture | Action | Example |
  * ------- | ------ |---------|
- * Left-click+Drag | Creates a `rectangle` graphic with dimensions based on the bounding box between initial click and cursor location. Creates a `circle` graphic with radius based on the distance between initial click and cursor location. | <img alt="Polygon Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/polygon-left-click-drag.gif" width="400px"> |
- * Shift+Left-click+Drag | Changes the shape from a `rectangle` to a `square` or from a `circle` to an `ellipse`. | <img alt="Shift Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-left-click-drag.gif" width="400px"> |
- * Alt+Left-click+Drag | Creates a `rectangle` graphic with a center at initial click, and dimensions based on the distance between the initial click to the cursor location. Creates a `circle` graphic with a radius based on the bounding box between the initial click and the cursor location. | <img alt="Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/alt-left-click-drag.gif" width="400px"> |
- * Shift+Alt+Left-click+Drag | Combines the behavior described above. | <img alt="Shift Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-alt-left-click-drag.gif" width="400px"> |
+ * Left-click+Drag | Creates a `rectangle` graphic with dimensions based on the bounding box between initial click and cursor location. Creates a `circle` graphic with radius based on the distance between initial click and cursor location. | <img alt="Polygon Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/polygon-left-click-drag.webm" width="400px"> |
+ * Shift+Left-click+Drag | Changes the shape from a `rectangle` to a `square` or from a `circle` to an `ellipse`. | <img alt="Shift Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-left-click-drag.webm" width="400px"> |
+ * Alt+Left-click+Drag | Creates a `rectangle` graphic with a center at initial click, and dimensions based on the distance between the initial click to the cursor location. Creates a `circle` graphic with a radius based on the bounding box between the initial click and the cursor location. | <img alt="Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/alt-left-click-drag.webm" width="400px"> |
+ * Shift+Alt+Left-click+Drag | Combines the behavior described above. | <img alt="Shift Alt Left-click drag" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/shift-alt-left-click-drag.webm" width="400px"> |
  *
  * <span id="update-graphics"></span>
  * #### Updating graphics
@@ -280,39 +280,39 @@ export interface SketchEvents extends SketchViewModelEvents {}
  *
  * Gesture | Action | Example |
  * ---------|---------|----------|
- * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-mode.gif" width="400px"> |
- * Shift+Left-click graphics | Select or deselect multiple graphics to move, rotate or scale.| <img alt="Select graphics" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-graphics.gif" width="400px"> |
- * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-move.gif" width="400px"> |
- * Drag rotate handle | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-rotate.gif" width="400px"> |
- * Drag scale handle | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-scale.gif" width="400px"> |
- * Shift+Left-click+Drag scale handle | Scale the selected graphic at the center. | <img alt="Scale the graphic at the center" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/scale-shift-left-click-drag.gif" width="400px"> |
- * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-undo.gif" width="400px"> |
- * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-redo.gif" width="400px"> |
- * Left-click on view (not the graphic) | Complete the graphic update. | <img alt="Sketch update complete" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-complete.gif" width="400px"> |
- * Press `Delete` key | Remove the selected graphic(s) from the [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#layer). | <img alt="Sketch delete graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-graphic.gif" width="400px">
+ * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-mode.webm" width="400px"> |
+ * Shift+Left-click graphics | Select or deselect multiple graphics to move, rotate or scale.| <img alt="Select graphics" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-graphics.webm" width="400px"> |
+ * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-box-move.webm" width="400px"> |
+ * Drag rotate handle | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-rotate.webm" width="400px"> |
+ * Drag scale handle | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-scale.webm" width="400px"> |
+ * Shift+Left-click+Drag scale handle | Scale the selected graphic at the center. | <img alt="Scale the graphic at the center" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/scale-shift-left-click-drag.webm" width="400px"> |
+ * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Undo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-undo.webm" width="400px"> |
+ * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual sketch operation, meaning you can redo/undo actions while creating or updating a graphic. | <img alt="Redo update" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-redo.webm" width="400px"> |
+ * Left-click on view (not the graphic) | Complete the graphic update. | <img alt="Sketch update complete" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-complete.webm" width="400px"> |
+ * Press `Delete` key | Remove the selected graphic(s) from the [layer](https://developers.arcgis.com/javascript/latest/references/core/widgets/Sketch/#layer). | <img alt="Sketch delete graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-graphic.webm" width="400px">
  *
  * The following update operations can be performed on a single polyline or polygon graphic:
  *
  * Gesture | Action | Example |
  * ---------|---------|----------|
- * Left-click on a graphic | Select a graphic to move or reshape.| <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-reshape-mode.gif" width="400px"> |
- * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-drag.gif" width="400px"> |
- * Left-click on a ghost vertex| Add a new vertex. | <img alt="Add a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-add-vertices.gif" width="400px"> |
- * Left-click on a vertex| Select a vertex. | <img alt="Select a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertex.gif" width="400px"> |
- * Shift+Left-click on vertices | Select or deselect multiple vertices. | <img alt="Select vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertices.gif" width="400px"> |
- * Drag vertex | Move the selected vertex or vertices. | <img alt="Drag vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-dragvertices.gif" width="400px"> |
- * Right-click on a vertex | Delete a vertex. | <img alt="Delete a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertex.gif" width="400px"> |
- * Select multiple vertices and press `Backspace` or `Delete` key | Delete multiple vertices. | <img alt="Delete vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertices.gif" width="400px"> |
+ * Left-click on a graphic | Select a graphic to move or reshape.| <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-reshape-mode.webm" width="400px"> |
+ * Drag graphic | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-drag.webm" width="400px"> |
+ * Left-click on a ghost vertex| Add a new vertex. | <img alt="Add a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-add-vertices.webm" width="400px"> |
+ * Left-click on a vertex| Select a vertex. | <img alt="Select a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertex.webm" width="400px"> |
+ * Shift+Left-click on vertices | Select or deselect multiple vertices. | <img alt="Select vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-selectvertices.webm" width="400px"> |
+ * Drag vertex | Move the selected vertex or vertices. | <img alt="Drag vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-dragvertices.webm" width="400px"> |
+ * Right-click on a vertex | Delete a vertex. | <img alt="Delete a vertex" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertex.webm" width="400px"> |
+ * Select multiple vertices and press `Backspace` or `Delete` key | Delete multiple vertices. | <img alt="Delete vertices" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-delete-vertices.webm" width="400px"> |
  *
  * The following update operations can be performed on a single graphic with point geometry in a [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/), if the graphic uses a [3D object symbol layer](https://developers.arcgis.com/javascript/latest/references/core/symbols/ObjectSymbol3DLayer/):
  *
  * Gesture | Action | Example |
  * ---------|---------|----------|
- * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-point-3D.gif" width="400px"> |
- * Drag inner handle | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-move-point.gif" width="400px"> |
- * Drag height handle | Move the selected graphic vertically (on the z axis).| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-movez-point.gif" width="400px"> |
- * Drag outer handle sideways | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-rotate-point.gif" width="400px"> |
- * Drag outer handle inwards or outwards | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-scale-point.gif" width="400px"> |
+ * Left-click on a graphic | Select a graphic to move, rotate or scale. | <img alt="Select a graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-update-point-3D.webm" width="400px"> |
+ * Drag inner handle | Move the selected graphic.| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-move-point.webm" width="400px"> |
+ * Drag height handle | Move the selected graphic vertically (on the z axis).| <img alt="Drag the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-movez-point.webm" width="400px"> |
+ * Drag outer handle sideways | Rotate the selected graphic.| <img alt="Rotate the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-rotate-point.webm" width="400px"> |
+ * Drag outer handle inwards or outwards | Scale the selected graphic.| <img alt="Scale the graphic" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sketch/sketch-transform-scale-point.webm" width="400px"> |
  *
  * ---------
  *
@@ -701,12 +701,12 @@ export default class Sketch extends Widget<SketchProperties> {
    *
    * The image below displays the default Sketch widget with selection, undo/redo, and settings menu tools.
    *
-   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/default-selection-sketch.png)
+   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/default-selection-sketch.avif)
    *
    * In comparison, this image shows how the widget displays with some of its tools not visible as
    * set in the example code snippet below.
    *
-   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/visible-elements-selection-sketch.png)
+   * ![sketch-selection-default](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/selection/visible-elements-selection-sketch.avif)
    *
    * @example
    * // Setting the sketch's visible elements as below would result

package/widgets/Slice.d.ts

@@ -78,7 +78,7 @@ export interface SliceProperties extends WidgetProperties, Partial<Pick<Slice, "
  * The Slice widget is a 3D analysis tool that can be used to reveal occluded content in a [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/). The slice widget can be applied to any layer type, making it possible
  * to see inside buildings or to explore geological surfaces.
  *
- * [![slice-widget](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/slice.gif)](https://developers.arcgis.com/javascript/latest/sample-code/building-scene-layer-slice/)
+ * [![slice-widget](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/slice.webm)](https://developers.arcgis.com/javascript/latest/sample-code/building-scene-layer-slice/)
  *
  * To use the widget, instantiate it and add it to the view:
  * ```js
@@ -103,7 +103,7 @@ export interface SliceProperties extends WidgetProperties, Partial<Pick<Slice, "
  * interior elements inside a [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/BuildingSceneLayer/), the windows or
  * furniture layers can be excluded from the slice widget.
  *
- * [![slice-widget-exclude](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/slice-exclude.png)](https://developers.arcgis.com/javascript/latest/sample-code/building-scene-layer-slice/)
+ * [![slice-widget-exclude](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/slice-exclude.avif)](https://developers.arcgis.com/javascript/latest/sample-code/building-scene-layer-slice/)
  *
  * While interactively creating a new slice, the Shift key can be held to force the slice to be applied vertically.
  *

package/widgets/Slider/SliderViewModel.d.ts

@@ -55,12 +55,12 @@ export default class SliderViewModel extends Accessor {
    * The image below demonstrates how slider input values resemble corresponding slider values by default
    * and won't match the formatting set in `labelFormatFunction`.
    *
-   * ![Slider without input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-no-input-formatter.png "Slider without input formatter")
+   * ![Slider without input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-no-input-formatter.avif "Slider without input formatter")
    *
    * If you want to format slider input values so they match thumb labels, you can pass the same function set in `labelFormatFunction` to
    * `inputFormatFunction` for consistent formatting.
    *
-   * ![Slider with input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-input-formatter.png "Slider with input formatter")
+   * ![Slider with input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-input-formatter.avif "Slider with input formatter")
    *
    * However, if an `inputFormatFunction` is specified, you must also write a corresponding
    * [inputParseFunction](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/SliderViewModel/#inputParseFunction) to parse user inputs to understandable slider values. In most cases, if

package/widgets/Slider.d.ts

@@ -215,7 +215,7 @@ export interface VisibleElements {
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![Slider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-labels.png "Slider with annotations")
+ * ![Slider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-labels.avif "Slider with annotations")
  *
  * At a minimum, the slider's [container](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/#container) or parent container must have a `width` set in CSS for it to render.
  *
@@ -345,12 +345,12 @@ export default class Slider extends Widget<SliderProperties> {
    * The image below demonstrates how slider input values resemble corresponding slider values by default
    * and won't match the formatting set in `labelFormatFunction`.
    *
-   * ![Slider without input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-no-input-formatter.png "Slider without input formatter")
+   * ![Slider without input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-no-input-formatter.avif "Slider without input formatter")
    *
    * If you want to format slider input values so they match thumb labels, you can pass the same function set in `labelFormatFunction` to
    * `inputFormatFunction` for consistent formatting.
    *
-   * ![Slider with input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-input-formatter.png "Slider with input formatter")
+   * ![Slider with input formatter](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-input-formatter.avif "Slider with input formatter")
    *
    * However, if an `inputFormatFunction` is specified, you must also write a corresponding
    * [inputParseFunction](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/#inputParseFunction) to parse user inputs to understandable slider values. In most cases, if
@@ -451,7 +451,7 @@ export default class Slider extends Widget<SliderProperties> {
    * when the user clicks a label. This allows the user to move the slider
    * thumb to precise values without sliding the thumbs.
    *
-   * ![Slider editable labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-edit-label.png "Slider with editable labels")
+   * ![Slider editable labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-edit-label.avif "Slider with editable labels")
    *
    * @default false
    * @example
@@ -471,28 +471,28 @@ export default class Slider extends Widget<SliderProperties> {
    *
    * **`horizontal`**
    *
-   * ![Slider horizontal not reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-horizontal-not-reversed.png "default horizontal slider")
+   * ![Slider horizontal not reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-horizontal-not-reversed.avif "default horizontal slider")
    *
    * **`horizontal-reversed`**
    *
    * When the slider is set to `horizontal-reversed`, the max value will render on the
    * left side and the min on the right.
    *
-   * ![Slider horizontal reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-horizontal-reversed.png "reversed horizontal slider")
+   * ![Slider horizontal reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-horizontal-reversed.avif "reversed horizontal slider")
    *
    * **`vertical`**
    *
    * When the slider is set to `vertical`, the max value will render on the
    * top of the track and the min on the bottom.
    *
-   * ![Slider vertical not reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-vertical-not-reversed.png "default vertical slider")
+   * ![Slider vertical not reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-vertical-not-reversed.avif "default vertical slider")
    *
    * **`vertical-reversed`**
    *
    * When the slider is set to `vertical-reversed`, the max value will render on the
    * bottom of the track and the min on the top.
    *
-   * ![Slider vertical reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-vertical-reversed.png "reversed vertical slider")
+   * ![Slider vertical reversed](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-vertical-reversed.avif "reversed vertical slider")
    *
    * @default "horizontal"
    * @example slider.layout = "vertical";
@@ -608,7 +608,7 @@ export default class Slider extends Widget<SliderProperties> {
    * when the user clicks a [min](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/#min) or [max](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/#max) label.
    * This allows the user to increase or decrease the data range of the slider.
    *
-   * ![Slider editable range labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-edit-range-label.png "Slider with editable range labels")
+   * ![Slider editable range labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-edit-range-label.avif "Slider with editable range labels")
    *
    * @default false
    * @example slider.rangeLabelInputsEnabled = false;