@arcgis/core 5.1.0-next.63 → 5.1.0-next.65

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;

package/widgets/Swipe/SwipeViewModel.d.ts

@@ -38,7 +38,7 @@ export default class SwipeViewModel extends Accessor {
    *
    * | horizontal | vertical |
    * |------------|----------|
-   * |[![widgets-swipe-horizontal](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-horizontal.png)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/) |[![widgets-swipe-vertical](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-vertical.png)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/)|
+   * |[![widgets-swipe-horizontal](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-horizontal.avif)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/) |[![widgets-swipe-vertical](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-vertical.avif)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/)|
    *
    * @default "horizontal"
    */

package/widgets/Swipe.d.ts

@@ -63,7 +63,7 @@ export interface SwipeProperties extends WidgetProperties, Partial<Pick<Swipe, "
  * is not set, then the Swipe widget will overlay the existing map. The [visibleElements](https://developers.arcgis.com/javascript/latest/references/core/widgets/Swipe/#visibleElements)
  * separate the leading and trailing layers, as shown in the image below.
  *
- * [![Swipe widget demonstration of leading and trailing layers and visible elements](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/swipe.png)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/)
+ * [![Swipe widget demonstration of leading and trailing layers and visible elements](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/swipe.avif)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/)
  *
  * > [!WARNING]
  * >
@@ -96,7 +96,7 @@ export default class Swipe extends Widget {
    *
    * | horizontal | vertical |
    * |------------|----------|
-   * |[![widgets-swipe-horizontal](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-horizontal.png)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/) |[![widgets-swipe-vertical](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-vertical.png)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/)|
+   * |[![widgets-swipe-horizontal](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-horizontal.avif)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/) |[![widgets-swipe-vertical](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-swipe-vertical.avif)](https://developers.arcgis.com/javascript/latest/sample-code/swipe/)|
    *
    * @default "horizontal"
    */

package/widgets/TableList/ListItemPanel.d.ts

@@ -147,7 +147,7 @@ export default class ListItemPanel extends ListItemPanelSuperclass {
    * The URL or data URI of an image used to represent the panel.
    * This property will be used as a background image for the node.
    * If neither `image` nor `icon` are specified, a default icon
-   * ![default icon](https://developers.arcgis.com/javascript/latest/assets/images/guide/whats-new/41/default-action.png) will display.
+   * ![default icon](https://developers.arcgis.com/javascript/latest/assets/images/guide/whats-new/41/default-action.avif) will display.
    */
   accessor image: string | null | undefined;
   /** The panel's parent ListItem that represents a table in the map. */

package/widgets/TableList.d.ts

@@ -84,7 +84,7 @@ export interface TableListEvents extends TableListViewModelEvents {}
  * >
  * > The TableList widget is not supported with [web scenes](https://developers.arcgis.com/javascript/latest/references/core/WebScene/).
  *
- * ![tablelist widget](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/tablelist-widget.png)
+ * ![tablelist widget](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/tablelist-widget.avif)
  *
  * @deprecated since version 5.0. Use the [Table List component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/) instead. For information on widget deprecation, read about [Esri's move to web components](https://developers.arcgis.com/javascript/latest/components-transition-plan/).
  * @since 4.17

package/widgets/TimeSlider/TimeSliderViewModel.d.ts

@@ -1,5 +1,5 @@
+import type WebDocument2D from "../../WebDocument2D.js";
 import type WebScene from "../../WebScene.js";
-import type WebMap from "../../WebMap.js";
 import type Collection from "../../core/Collection.js";
 import type TimeExtent from "../../time/TimeExtent.js";
 import type { EventedAccessor } from "../../core/Evented.js";
@@ -11,7 +11,7 @@ import type { TimeExtentProperties } from "../../time/TimeExtent.js";
 export interface TimeSliderViewModelProperties extends Partial<Pick<TimeSliderViewModel, "loop" | "mode" | "playRate" | "stops" | "view">> {
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the widget. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the widget. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -20,7 +20,7 @@ export interface TimeSliderViewModelProperties extends Partial<Pick<TimeSliderVi
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
    *
    * @since 4.21
    * @example
@@ -202,7 +202,7 @@ export default class TimeSliderViewModel extends EventedAccessor {
   constructor(properties?: TimeSliderViewModelProperties);
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the widget. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the widget. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -211,7 +211,7 @@ export default class TimeSliderViewModel extends EventedAccessor {
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
    *
    * @since 4.21
    * @example
@@ -337,10 +337,10 @@ export default class TimeSliderViewModel extends EventedAccessor {
    *
    * Possible Values       | Description   | Example |
    * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.png"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.png"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.png"> |
-   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.png"> |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
+   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
+   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
    *
    * @default "time-window"
    * @example
@@ -625,5 +625,5 @@ export default class TimeSliderViewModel extends EventedAccessor {
    * timeSlider.updateWebDocument(webmap);
    * webmap.save();
    */
-  updateWebDocument(document: WebMap | WebScene): void;
+  updateWebDocument(document: WebDocument2D | WebScene): void;
 }

package/widgets/TimeSlider/TimeSliderViewModel.js

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import{__decorate as t}from"tslib";import e from"../../core/Collection.js";import{EventedAccessor as i}from"../../core/Evented.js";import n from"../../core/Logger.js";import{after as s,isAbortError as r}from"../../core/promiseUtils.js";import{watch as o,initial as l,syncAndInitial as a,whenOnce as m}from"../../core/reactiveUtils.js";import{offsetDate as u}from"../../core/timeUtils.js";import{property as p,cast as h,subclass as d}from"../../core/accessorSupport/decorators.js";import{ensureType as c}from"../../core/accessorSupport/ensureType.js";import f from"../../time/TimeExtent.js";import w from"../../time/TimeInterval.js";import g from"../../webdoc/Widgets.js";import v from"../../webdoc/widgets/TimeSlider.js";const T=1e4;function x(t){return!!t&&"count"in t}function E(t){return!!t&&"interval"in t}function y(t){return!!t&&"dates"in t}let _=class extends i{constructor(t){super(t),this._animationController=null,this._isViewTimeExtentInitialized=!1,this._timerId=null,this.actions=new e,this.fullTimeExtent=null,this.loop=!1,this.mode="time-window",this.stops={count:10},this.timeExtent=null,this.view=null}initialize(){this.addHandles([o(()=>this.effectiveStops,()=>{this.timeExtent??=this._getDefaultTimeExtent()},l),o(()=>this.view,(t,e)=>{this._unregisterWidget(e),this._registerWidget(t)},a),o(()=>this.timeExtent,t=>{if(!this.view)return;const e=this.view.timeExtent;(t&&!t.isAllTime||e&&!e.isAllTime)&&(t&&e&&t.equals(e)||(this.view.timeExtent=t))},l),o(()=>this.view?.timeExtent,t=>{this._isViewTimeExtentInitialized?(t&&!t.isAllTime||this.timeExtent&&!this.timeExtent.isAllTime)&&(t&&this.timeExtent&&t.equals(this.timeExtent)||(this.timeExtent=t)):this._isViewTimeExtentInitialized=!0})])}destroy(){null!=this._timerId&&(clearInterval(this._timerId),this._timerId=null),this._unregisterWidget(this.view),this.view=null,this._animationController?.abort(),this._animationController=null}get effectiveStops(){const{fullTimeExtent:t,stops:e}=this;if(y(e)){const{dates:i}=e;if(!i?.length)return null;const n=i.sort((t,e)=>t.getTime()-e.getTime());if(!t)return n;const{start:s,end:r}=t;if(!s||!r)return n;return n.filter(t=>!(t.getTime()<s.getTime()||t.getTime()>r.getTime()))}if(x(e)){const i=e.timeExtent??t;return this._divideTimeExtentByCount(i,e.count)}if(E(e)){const i=e.timeExtent??t;return this._divideTimeExtentByInterval(i,e.interval)}return[]}get isPreCommonEra(){return(this.fullTimeExtent?.start?.getFullYear()??0)<0}set playRate(t){t<=0||t>36e5||("playing"===this.state&&this._startAnimation(),this._set("playRate",t))}get state(){return this.fullTimeExtent?this._animationController?"playing":"ready":"disabled"}castStops(t){if(!t)return null;if(E(t)){if("unknown"===t.interval.unit)return n.getLogger(this).warn('A stop interval with an "unknown" time units is not supported. The default stop definition will be used.'),{count:10};t.interval=c(w,t.interval)}return(E(t)||x(t))&&(t.timeExtent=c(f,t.timeExtent)),t}get timeExtentValues(){const{mode:t,timeExtent:e}=this;if(!e||e.isAllTime||e.isEmpty)return null;const{start:i,end:n}=e;switch(t){case"cumulative-from-end":case"instant":return i?[i.getTime()]:null;case"cumulative-from-start":return n?[n.getTime()]:null;case"time-window":return i&&n?[i.getTime(),n.getTime()]:null}}next(){this._step({forward:!0,allowRestart:!1})}play(){this._startAnimation()}previous(){this._step({forward:!1,allowRestart:!1})}stop(){this._stopAnimation()}triggerAction(t){this.emit("trigger-action",{action:t})}updateWebDocument(t){const e=new v({currentTimeExtent:this.timeExtent,fullTimeExtent:this.fullTimeExtent,loop:this.loop,numStops:x(this.stops)?this.stops.count:null,numThumbs:"time-window"===this.mode?2:1,stopDelay:this.playRate,stopInterval:E(this.stops)?this.stops.interval:null,stops:y(this.stops)?this.stops.dates:null});t.widgets?t.widgets.timeSlider=e:t.widgets=new g({timeSlider:e})}valuesToTimeExtent(t){if(!t)return null;const e=t.sort((t,e)=>t-e).map(t=>new Date(t)),i=e.length>0?e[0]:null,n=e.length>1?e[1]:null;switch(this.mode){case"time-window":return new f({start:i,end:n});case"instant":return new f({start:i,end:i});case"cumulative-from-start":return new f({start:null,end:i});case"cumulative-from-end":return new f({start:i,end:null});default:return f.allTime}}async _animate(){try{const t=this.view,e=this._animationController?.signal;await Promise.all([s(this.playRate,null,e),t&&m(()=>!t.updating,e)])}catch(t){return r(t)||n.getLogger(this).error(t),void(this._animationController=null)}this._step({forward:!0,allowRestart:!1}),this._animationController&&this._animate()}_divideTimeExtentByCount(t,e=10){if(!t||!e)return[];const{start:i,end:n}=t;if(!i||!n)return[];if(e>T)return this._divideTimeExtentByCount(t);const s=[],r=i.getTime(),o=n.getTime()-r;for(let l=0;l<=e;l++)s.push(new Date(r+l/e*o));return s}_divideTimeExtentByInterval(t,e,i=T){if(!t||!e)return[];const{start:n,end:s}=t;if(!n||!s)return[];const r=s.getTime()-n.getTime(),o=e.toMilliseconds();if(o<=0||r/o>i)return this._divideTimeExtentByCount(t);const l=[],{value:a,unit:m}=e;let p=n;for(;p.getTime()<=s.getTime();)l.push(new Date(p)),p=u(p,a,m);return l}_getDefaultTimeExtent(){const{effectiveStops:t,mode:e}=this;if(!t||!e)return null;switch(e){case"time-window":return t.length>1?new f({start:t[0],end:t[1]}):null;case"cumulative-from-start":return t.length>0?new f({start:null,end:t[0]}):null;case"cumulative-from-end":return t.length>0?new f({start:t[0],end:null}):null;case"instant":return t.length>0?new f({start:t[0],end:t[0]}):null;default:return null}}_registerWidget(t){if(t){t.persistableViewModels.includes(this)||t.persistableViewModels.add(this)}}_startAnimation(){this._stopAnimation(),this._animationController=new AbortController,this._step({forward:!0,allowRestart:!0}),this._animate()}_step(t){const{forward:e,allowRestart:i}=t,{effectiveStops:n}=this;if(!this.timeExtentValues||!n)return;const s=n.map(t=>t.getTime()),r=this.timeExtentValues.map(t=>{const e=s.indexOf(t);if(-1!==e)return e;const i=s.reduce((e,i)=>Math.abs(i-t)<Math.abs(e-t)?i:e);return s.indexOf(i)}),o=r.map(t=>t+(e?1:-1)),l=o.some(t=>t<0||t>s.length-1),{loop:a,state:m}=this;if(l)if(a||i){const t=Math.min(...r),i=Math.max(...r),n=(e?r.map(e=>e-t):r.map(t=>t+(s.length-1-i))).map(t=>s[t]);this.timeExtent=this.valuesToTimeExtent(n)}else"playing"===m&&this.stop();else{const t=o.map(t=>s[t]);this.timeExtent=this.valuesToTimeExtent(t)}}_stopAnimation(){null!=this._animationController&&(this._animationController.abort(),this._animationController=null)}_unregisterWidget(t){null!=t&&t.persistableViewModels.remove(this)}};t([p()],_.prototype,"_animationController",void 0),t([p({type:e})],_.prototype,"actions",void 0),t([p({readOnly:!0})],_.prototype,"effectiveStops",null),t([p({type:f})],_.prototype,"fullTimeExtent",void 0),t([p()],_.prototype,"isPreCommonEra",null),t([p({nonNullable:!0})],_.prototype,"loop",void 0),t([p({nonNullable:!0})],_.prototype,"mode",void 0),t([p({nonNullable:!0,value:1e3})],_.prototype,"playRate",null),t([p({readOnly:!0})],_.prototype,"state",null),t([p()],_.prototype,"stops",void 0),t([h("stops")],_.prototype,"castStops",null),t([p({type:f})],_.prototype,"timeExtent",void 0),t([p({readOnly:!0})],_.prototype,"timeExtentValues",null),t([p()],_.prototype,"view",void 0),t([p()],_.prototype,"next",null),t([p()],_.prototype,"play",null),t([p()],_.prototype,"previous",null),t([p()],_.prototype,"stop",null),t([p()],_.prototype,"updateWebDocument",null),_=t([d("esri.widgets.TimeSlider.TimeSliderViewModel")],_);const C=_;export{C as default};
+import{__decorate as t}from"tslib";import e from"../../core/Collection.js";import{EventedAccessor as i}from"../../core/Evented.js";import n from"../../core/Logger.js";import{after as s,isAbortError as r}from"../../core/promiseUtils.js";import{watch as o,initial as l,syncAndInitial as a,whenOnce as m}from"../../core/reactiveUtils.js";import{offsetDate as u}from"../../core/timeUtils.js";import{property as p,cast as h,subclass as d}from"../../core/accessorSupport/decorators.js";import{ensureType as c}from"../../core/accessorSupport/ensureType.js";import f from"../../time/TimeExtent.js";import g from"../../time/TimeInterval.js";import w from"../../webdoc/Widgets.js";import v from"../../webdoc/widgets/TimeSlider.js";const T=1e4;function x(t){return!!t&&"count"in t}function E(t){return!!t&&"interval"in t}function y(t){return!!t&&"dates"in t}let _=class extends i{constructor(t){super(t),this._animationController=null,this._isViewTimeExtentInitialized=!1,this._timerId=null,this.actions=new e,this.fullTimeExtent=null,this.loop=!1,this.mode="time-window",this.stops={count:10},this.timeExtent=null,this.view=null}initialize(){this.addHandles([o(()=>this.effectiveStops,()=>{this.timeExtent??=this._getDefaultTimeExtent()},l),o(()=>this.view,(t,e)=>{this._unregisterWidget(e),this._registerWidget(t)},a),o(()=>this.timeExtent,t=>{if(!this.view)return;const e=this.view.timeExtent;(t&&!t.isAllTime||e&&!e.isAllTime)&&(t&&e&&t.equals(e)||(this.view.timeExtent=t))},l),o(()=>this.view?.timeExtent,t=>{this._isViewTimeExtentInitialized?(t&&!t.isAllTime||this.timeExtent&&!this.timeExtent.isAllTime)&&(t&&this.timeExtent&&t.equals(this.timeExtent)||(this.timeExtent=t)):this._isViewTimeExtentInitialized=!0})])}destroy(){null!=this._timerId&&(clearInterval(this._timerId),this._timerId=null),this._unregisterWidget(this.view),this.view=null,this._animationController?.abort(),this._animationController=null}get effectiveStops(){const{fullTimeExtent:t,stops:e}=this;if(y(e)){const{dates:i}=e;if(!i?.length)return null;const n=i.sort((t,e)=>t.getTime()-e.getTime());if(!t)return n;const{start:s,end:r}=t;if(!s||!r)return n;return n.filter(t=>!(t.getTime()<s.getTime()||t.getTime()>r.getTime()))}if(x(e)){const i=e.timeExtent??t;return this._divideTimeExtentByCount(i,e.count)}if(E(e)){const i=e.timeExtent??t;return this._divideTimeExtentByInterval(i,e.interval)}return[]}get isPreCommonEra(){return(this.fullTimeExtent?.start?.getFullYear()??0)<0}set playRate(t){t<=0||t>36e5||("playing"===this.state&&this._startAnimation(),this._set("playRate",t))}get state(){return this.fullTimeExtent?this._animationController?"playing":"ready":"disabled"}castStops(t){if(!t)return null;if(E(t)){if("unknown"===t.interval.unit)return n.getLogger(this).warn('A stop interval with an "unknown" time units is not supported. The default stop definition will be used.'),{count:10};t.interval=c(g,t.interval)}return(E(t)||x(t))&&(t.timeExtent=c(f,t.timeExtent)),t}get timeExtentValues(){const{mode:t,timeExtent:e}=this;if(!e||e.isAllTime||e.isEmpty)return null;const{start:i,end:n}=e;switch(t){case"cumulative-from-end":case"instant":return i?[i.getTime()]:null;case"cumulative-from-start":return n?[n.getTime()]:null;case"time-window":return i&&n?[i.getTime(),n.getTime()]:null}}next(){this._step({forward:!0,allowRestart:!1})}play(){this._startAnimation()}previous(){this._step({forward:!1,allowRestart:!1})}stop(){this._stopAnimation()}triggerAction(t){this.emit("trigger-action",{action:t})}updateWebDocument(t){const e=new v({currentTimeExtent:this.timeExtent,fullTimeExtent:this.fullTimeExtent,loop:this.loop,numStops:x(this.stops)?this.stops.count:null,numThumbs:"time-window"===this.mode?2:1,stopDelay:this.playRate,stopInterval:E(this.stops)?this.stops.interval:null,stops:y(this.stops)?this.stops.dates:null});t.widgets??=new w,t.widgets.timeSlider=e}valuesToTimeExtent(t){if(!t)return null;const e=t.sort((t,e)=>t-e).map(t=>new Date(t)),i=e.length>0?e[0]:null,n=e.length>1?e[1]:null;switch(this.mode){case"time-window":return new f({start:i,end:n});case"instant":return new f({start:i,end:i});case"cumulative-from-start":return new f({start:null,end:i});case"cumulative-from-end":return new f({start:i,end:null});default:return f.allTime}}async _animate(){try{const t=this.view,e=this._animationController?.signal;await Promise.all([s(this.playRate,null,e),t&&m(()=>!t.updating,e)])}catch(t){return r(t)||n.getLogger(this).error(t),void(this._animationController=null)}this._step({forward:!0,allowRestart:!1}),this._animationController&&this._animate()}_divideTimeExtentByCount(t,e=10){if(!t||!e)return[];const{start:i,end:n}=t;if(!i||!n)return[];if(e>T)return this._divideTimeExtentByCount(t);const s=[],r=i.getTime(),o=n.getTime()-r;for(let l=0;l<=e;l++)s.push(new Date(r+l/e*o));return s}_divideTimeExtentByInterval(t,e,i=T){if(!t||!e)return[];const{start:n,end:s}=t;if(!n||!s)return[];const r=s.getTime()-n.getTime(),o=e.toMilliseconds();if(o<=0||r/o>i)return this._divideTimeExtentByCount(t);const l=[],{value:a,unit:m}=e;let p=n;for(;p.getTime()<=s.getTime();)l.push(new Date(p)),p=u(p,a,m);return l}_getDefaultTimeExtent(){const{effectiveStops:t,mode:e}=this;if(!t||!e)return null;switch(e){case"time-window":return t.length>1?new f({start:t[0],end:t[1]}):null;case"cumulative-from-start":return t.length>0?new f({start:null,end:t[0]}):null;case"cumulative-from-end":return t.length>0?new f({start:t[0],end:null}):null;case"instant":return t.length>0?new f({start:t[0],end:t[0]}):null;default:return null}}_registerWidget(t){t?.registerComponent(this)}_startAnimation(){this._stopAnimation(),this._animationController=new AbortController,this._step({forward:!0,allowRestart:!0}),this._animate()}_step(t){const{forward:e,allowRestart:i}=t,{effectiveStops:n}=this;if(!this.timeExtentValues||!n)return;const s=n.map(t=>t.getTime()),r=this.timeExtentValues.map(t=>{const e=s.indexOf(t);if(-1!==e)return e;const i=s.reduce((e,i)=>Math.abs(i-t)<Math.abs(e-t)?i:e);return s.indexOf(i)}),o=r.map(t=>t+(e?1:-1)),l=o.some(t=>t<0||t>s.length-1),{loop:a,state:m}=this;if(l)if(a||i){const t=Math.min(...r),i=Math.max(...r),n=(e?r.map(e=>e-t):r.map(t=>t+(s.length-1-i))).map(t=>s[t]);this.timeExtent=this.valuesToTimeExtent(n)}else"playing"===m&&this.stop();else{const t=o.map(t=>s[t]);this.timeExtent=this.valuesToTimeExtent(t)}}_stopAnimation(){null!=this._animationController&&(this._animationController.abort(),this._animationController=null)}_unregisterWidget(t){t?.unregisterComponent(this)}};t([p()],_.prototype,"_animationController",void 0),t([p({type:e})],_.prototype,"actions",void 0),t([p({readOnly:!0})],_.prototype,"effectiveStops",null),t([p({type:f})],_.prototype,"fullTimeExtent",void 0),t([p()],_.prototype,"isPreCommonEra",null),t([p({nonNullable:!0})],_.prototype,"loop",void 0),t([p({nonNullable:!0})],_.prototype,"mode",void 0),t([p({nonNullable:!0,value:1e3})],_.prototype,"playRate",null),t([p({readOnly:!0})],_.prototype,"state",null),t([p()],_.prototype,"stops",void 0),t([h("stops")],_.prototype,"castStops",null),t([p({type:f})],_.prototype,"timeExtent",void 0),t([p({readOnly:!0})],_.prototype,"timeExtentValues",null),t([p()],_.prototype,"view",void 0),t([p()],_.prototype,"next",null),t([p()],_.prototype,"play",null),t([p()],_.prototype,"previous",null),t([p()],_.prototype,"stop",null),t([p()],_.prototype,"updateWebDocument",null),_=t([d("esri.widgets.TimeSlider.TimeSliderViewModel")],_);const C=_;export{C as default};

package/widgets/TimeSlider/types.d.ts

@@ -144,7 +144,7 @@ export type Stops = StopsByDates | StopsByInterval | StopsByCount;
 /**
  * Definition of an action that can be assigned to the [TimeSliderViewModel.actions](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#actions) property on the
  * [TimeSlider.actions](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#actions) or the [TimeSliderViewModel.actions](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/TimeSliderViewModel/#actions). It is displayed in a menu when
- * the user clicks the ellipsis button ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) on the [TimeSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/) widget.
+ * the user clicks the ellipsis button ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) on the [TimeSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/) widget.
  *
  * @since 5.0
  */

package/widgets/TimeSlider.d.ts

@@ -1,5 +1,5 @@
+import type WebDocument2D from "../WebDocument2D.js";
 import type WebScene from "../WebScene.js";
-import type WebMap from "../WebMap.js";
 import type Collection from "../core/Collection.js";
 import type TimeExtent from "../time/TimeExtent.js";
 import type Widget from "./Widget.js";
@@ -17,7 +17,7 @@ import type { WidgetProperties } from "./Widget.js";
 export interface TimeSliderProperties extends WidgetProperties, Partial<Pick<TimeSlider, "disabled" | "labelFormatFunction" | "layout" | "loop" | "mode" | "playRate" | "stops" | "tickConfigs" | "timeVisible" | "view">> {
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the widget. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the widget. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -26,7 +26,7 @@ export interface TimeSliderProperties extends WidgetProperties, Partial<Pick<Tim
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
    *
    * @since 4.21
    * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
@@ -242,10 +242,10 @@ export interface TimeSliderEvents extends TimeSliderViewModelEvents {}
  * or a specific time interval (e.g. days). The [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property defines the
  * current location of the thumbs.
  *
- * [![widgets-timeSlider](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-timeSlider.png)](https://developers.arcgis.com/javascript/latest/sample-code/timeslider/)
+ * [![widgets-timeSlider](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-timeSlider.avif)](https://developers.arcgis.com/javascript/latest/sample-code/timeslider/)
  *
  * If the time slider widget settings are invalid, the current time segment and thumbs will be drawn in a red color with a message indicating the issue.
- * [![widgets-timeSlider-invalid](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-invalid.png)](https://developers.arcgis.com/javascript/latest/sample-code/timeslider/)
+ * [![widgets-timeSlider-invalid](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-invalid.avif)](https://developers.arcgis.com/javascript/latest/sample-code/timeslider/)
  *
  * ### Configuring your time aware data
  *
@@ -438,7 +438,7 @@ export default class TimeSlider extends Widget {
   constructor(properties?: TimeSliderProperties);
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the widget. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the widget. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -447,7 +447,7 @@ export default class TimeSlider extends Widget {
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
    *
    * @since 4.21
    * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
@@ -572,7 +572,7 @@ export default class TimeSlider extends Widget {
    * The image below demonstrates how the date format, color, size, and font family of the label can be customized.
    * The code for this specific configuration is shown in the following example.
    *
-   * ![timeslider-custom-labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider-custom-labels.png)
+   * ![timeslider-custom-labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider-custom-labels.avif)
    *
    * @since 4.17
    * @example
@@ -660,10 +660,10 @@ export default class TimeSlider extends Widget {
    *
    * Possible Values       | Description   | Example |
    * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.png"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.png"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.png"> |
-   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.png"> |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
+   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
+   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
    *
    * @default "time-window"
    * @see [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent)
@@ -1028,5 +1028,5 @@ export default class TimeSlider extends Widget {
    * timeSlider.updateWebDocument(webmap);
    * webmap.save();
    */
-  updateWebDocument(document: WebMap | WebScene): void;
+  updateWebDocument(document: WebDocument2D | WebScene): void;
 }

package/widgets/Track.d.ts

@@ -66,12 +66,12 @@ export interface TrackEvents extends TrackViewModelEvents {}
  * to the user's location when clicked. The view rotates based on device heading.
  * While tracking, the default button looks like the following:
  *
- * ![track-button](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-track.png)
+ * ![track-button](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-track.avif)
  *
  * The default heading symbol will display when speed is greater than zero and the browser
  * provides heading information:
  *
- * ![heading-indicator](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-track-heading.png)
+ * ![heading-indicator](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-track-heading.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.

package/widgets/UtilityNetworkAssociations.d.ts

@@ -62,13 +62,13 @@ export interface UtilityNetworkAssociationsProperties extends WidgetProperties,
  * streamline their workflow, enhance data integrity, and enable effective network analysis and visualization within utility network applications.
  *
  * Here is an example of [autoRefreshAssociations](https://developers.arcgis.com/javascript/latest/references/core/widgets/UtilityNetworkAssociations/#autoRefreshAssociations) set to `false`.
- * ![UtilityNetworkAssociations-autoRefresh-false](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/UtilityNetworkAssociations/autoRefreshAssociationsIsFalse.png)
+ * ![UtilityNetworkAssociations-autoRefresh-false](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/UtilityNetworkAssociations/autoRefreshAssociationsIsFalse.avif)
  *
  * By clicking the refresh button the associations will appear.
- * ![UtilityNetworkAssociations-autoRefresh-false-manual-refresh](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/UtilityNetworkAssociations/autoRefreshAssociationsIsFalseWasRefreshed.png)
+ * ![UtilityNetworkAssociations-autoRefresh-false-manual-refresh](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/UtilityNetworkAssociations/autoRefreshAssociationsIsFalseWasRefreshed.avif)
  *
  * Here is an example of [autoRefreshAssociations](https://developers.arcgis.com/javascript/latest/references/core/widgets/UtilityNetworkAssociations/#autoRefreshAssociations) set to `true`.
- * ![UtilityNetworkAssociations-autoRefresh-true](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/UtilityNetworkAssociations/autoRefreshAssociationsIsTrue.png)
+ * ![UtilityNetworkAssociations-autoRefresh-true](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/UtilityNetworkAssociations/autoRefreshAssociationsIsTrue.avif)
  *
  * > [!CAUTION]
  * >

package/widgets/UtilityNetworkTrace.d.ts

@@ -73,19 +73,19 @@ export interface UtilityNetworkTraceEvents extends UtilityNetworkTraceViewModelE
  * The UtilityNetworkTrace widget provides a way to run traces in a Utility Network based on connectivity or traversability from set input flags.
  * Input flags (starting points and barriers) can be set by clicking the view. Alternatively, the widget allows setting input flags programmatically on creation, or at runtime, by setting the [flags](https://developers.arcgis.com/javascript/latest/references/core/widgets/UtilityNetworkTrace/#flags) property.
  * The widget can execute one or multiple traces concurrently by selecting them from the trace types dropdown. Trace types can be preset in the widget programmatically on creation, or at runtime, by setting the [selectedTraces](https://developers.arcgis.com/javascript/latest/references/core/widgets/UtilityNetworkTrace/#selectedTraces) property.
- * ![tracetypes_flags](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/tracetypes_flags.png)
+ * ![tracetypes_flags](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/tracetypes_flags.avif)
  *
  * The trace results are returned as a selection or as graphics, or both (if aggregated geometry is set as a [Result Type](https://pro.arcgis.com/en/pro-app/latest/help/data/utility-network/configure-a-trace.htm#ESRI_SECTION2_A4D0D10A7C904C278F61ACDEBFCEDDA5)).
- * ![result_select](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/result_select.png)
+ * ![result_select](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/result_select.avif)
  *
  * The resulting selection of features can be visualized in a list organized by asset groups and asset types if the [showSelectionAttributes](https://developers.arcgis.com/javascript/latest/references/core/widgets/UtilityNetworkTrace/#showSelectionAttributes) property is `true`.
  *
- * ![results_panels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/results_panels.png)
+ * ![results_panels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/results_panels.avif)
  * In the image above, the left image displays a list of trace results filtered by asset group. The center image displays a list of asset types for the asset group "Service Point". The right image displays a list of features for the asset type "Single Phase Low Voltage Meter".
  *
  * Nonspatial data can be included as trace starting points and barriers. Additionally, users can examine nonspatial data within the trace results.
  *
- * ![nonspatial_add](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/nonspatial_add.gif)
+ * ![nonspatial_add](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-trace/nonspatial_add.webm)
  * > [!WARNING]
  * >
  * > **Notes**

package/widgets/UtilityNetworkValidateTopology.d.ts

@@ -43,7 +43,7 @@ export type UtilityNetworkValidateTopologyExtentOption = "current" | "entire";
  * minimizing the amount of code required for such operations.
  *
  * The following image demonstrates an example of validating a network topology using the widget after an edit results in a dirty area feature.
- * ![un-validate-topology-editor](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-validate-topology/un-validate-topology-editor-rn.gif)
+ * ![un-validate-topology-editor](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/utility-network-validate-topology/un-validate-topology-editor-rn.webm)
  * > [!CAUTION]
  * >
  * > **Notes**

package/widgets/ValuePicker.d.ts

@@ -112,7 +112,7 @@ export interface ValuePickerEvents extends ValuePickerViewModelEvents {}
  * necessarily require data. In the example below, the ValuePicker is added to the view's
  * `ui` property without any assigned data.
  *
- * ![option-nodata](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-nodata.png)
+ * ![option-nodata](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-nodata.avif)
  *
  * ```js
  * const valuePicker = new ValuePicker();
@@ -135,7 +135,7 @@ export interface ValuePickerEvents extends ValuePickerViewModelEvents {}
  * Consider using the [label component](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/ValuePickerLabel/) to step through a fixed list of predefined values like land use zones.
  * In the following snippet a ValuePicker is added to the View UI containing three coded land use zones.
  *
- * ![option-labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-labels.png)
+ * ![option-labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-labels.avif)
  *
  * ```js
  * const labelComponent = {
@@ -176,7 +176,7 @@ export interface ValuePickerEvents extends ValuePickerViewModelEvents {}
  * initialized with starting value of "hybrid". Since "hybrid" is the first item in the collection only the _next_
  * button will be enabled.
  *
- * ![option-collection](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-collection.png)
+ * ![option-collection](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-collection.avif)
  *
  * ```js
  * const valuePicker = new ValuePicker({
@@ -205,7 +205,7 @@ export interface ValuePickerEvents extends ValuePickerViewModelEvents {}
  * Consider using the  [combobox component](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/ValuePickerCombobox/) when a searchable
  * dropdown list is required. In the following snippet the ValuePicker widget is added to the View UI containing three coded land use zones.
  *
- * <img src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-combobox.png" height="300 !important" width="200 !important">
+ * <img src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-combobox.avif" height="300 !important" width="200 !important">
  *
  * ```js
  * const valuePicker = new ValuePicker({
@@ -240,7 +240,7 @@ export interface ValuePickerEvents extends ValuePickerViewModelEvents {}
  * for users that need to select a value within a fixed numeric range. For example, the snippet below presents a
  * ValuePicker with a slider for picking a layer's opacity. The starting value is 50%.
  *
- * ![option-slider](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-slider.png)
+ * ![option-slider](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/valuepicker/option-slider.avif)
  *
  * ```js
  * const valuePicker = new ValuePicker({

package/widgets/VideoPlayer.d.ts

@@ -52,7 +52,7 @@ export interface VideoPlayerProperties extends WidgetProperties, Partial<Pick<Vi
  * > Not supported in 3D [SceneViews](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/).
  * > Not supported on macOS and iOS devices.
  *
- * ![VideoLayer and VideoPlayer](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/video-player.png)
+ * ![VideoLayer and VideoPlayer](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/video-player.avif)
  *
  * @deprecated since version 4.33. Use the [Video Player component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-video-player/) instead. For information on widget deprecation, read about [Esri's move to web components](https://developers.arcgis.com/javascript/latest/components-transition-plan/).
  * @since 4.30

package/widgets/smartMapping/ClassedColorSlider.d.ts

@@ -34,7 +34,7 @@ export interface ClassedColorSliderProperties extends SmartMappingSliderBaseProp
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![ClassedColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/classedcolorslider-labels.png "ClassedColorSlider with annotations")
+ * ![ClassedColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/classedcolorslider-labels.avif "ClassedColorSlider with annotations")
  *
  * The [fromRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/#fromRendererResult) method can be used to conveniently create this slider
  * from the result of the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/#createClassBreaksRenderer)

package/widgets/smartMapping/ClassedSizeSlider.d.ts

@@ -54,7 +54,7 @@ export interface ClassedSizeSliderStyle {
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![ClassedSizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/classedsizeslider-labels.png "ClassedSizeSlider with annotations")
+ * ![ClassedSizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/classedsizeslider-labels.avif "ClassedSizeSlider with annotations")
  *
  * The [fromRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedSizeSlider/#fromRendererResult) method can be used to conveniently create this slider
  * from the result of the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/size/#createClassBreaksRenderer)

package/widgets/smartMapping/ColorSizeSlider.d.ts

@@ -42,7 +42,7 @@ export type VisualVariable = ColorVariable | SizeVariable;
  * far apart from one another; the feature furthest from the [Camera](https://developers.arcgis.com/javascript/latest/references/core/Camera/) will appear smaller than
  * the feature closer to the camera. The color variable can help the user understand that both features have similar values.
  *
- * ![ColorSizeSlider with perspective](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorsizeslider-perspective.png "ColorSizeSlider with perspective")
+ * ![ColorSizeSlider with perspective](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorsizeslider-perspective.avif "ColorSizeSlider with perspective")
  *
  * At a minimum you must set the [min](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#min), [max](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#max), and [stops](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#stops) properties
  * of the widget. The stops are used to render a color gradient on the track of the slider.
@@ -50,7 +50,7 @@ export type VisualVariable = ColorVariable | SizeVariable;
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![ColorSizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorsizeslider-labels.png "ColorSizeSlider with annotations")
+ * ![ColorSizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorsizeslider-labels.avif "ColorSizeSlider with annotations")
  *
  * The [fromRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSizeSlider/#fromRendererResult) method can be used to conveniently create this slider
  * from the result of the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/univariateColorSize/#createContinuousRenderer)

package/widgets/smartMapping/ColorSlider.d.ts

@@ -33,7 +33,7 @@ export interface ColorSliderProperties extends SmartMappingSliderBaseProperties,
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![ColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorslider-2-labels.png "ColorSlider with annotations")
+ * ![ColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/colorslider-2-labels.avif "ColorSlider with annotations")
  *
  * The [fromRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ColorSlider/#fromRendererResult) method can be used to conveniently create this slider
  * from the result of the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/#createContinuousRenderer)

package/widgets/smartMapping/HeatmapSlider.d.ts

@@ -30,7 +30,7 @@ export interface HeatmapSliderProperties extends SmartMappingSliderBasePropertie
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![HeatmapSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/heatmapslider-labels.png "HeatmapSlider with annotations")
+ * ![HeatmapSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/heatmapslider-labels.avif "HeatmapSlider with annotations")
  *
  * The [fromHeatmapRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/HeatmapSlider/#fromHeatmapRendererResult) method can be used to conveniently create this slider
  * from the result of the [createRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/heatmap/#createRenderer)

package/widgets/smartMapping/OpacitySlider.d.ts

@@ -46,7 +46,7 @@ export interface OpacitySliderStyle {
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![OpacitySlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/opacityslider-labels.png "OpacitySlider with annotations")
+ * ![OpacitySlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/opacityslider-labels.avif "OpacitySlider with annotations")
  *
  * The [fromVisualVariableResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/OpacitySlider/#fromVisualVariableResult) method can be used to conveniently create this slider
  * from the result of the [createVisualVariable()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/opacity/#createVisualVariable)

package/widgets/smartMapping/SizeSlider.d.ts

@@ -56,7 +56,7 @@ export type SizeSliderSizeStop = SizeStop;
  * <span id="image-annotations"></span>
  * See the image below for a summary of the configurable options available on this slider.
  *
- * ![SizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/sizeslider-labels.png "SizeSlider with annotations")
+ * ![SizeSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/sizeslider-labels.avif "SizeSlider with annotations")
  *
  * The [fromRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/SizeSlider/#fromRendererResult) method can be used to conveniently create this slider
  * from the result of the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/size/#createContinuousRenderer)