@esri/solutions-components 0.10.5 → 0.10.7

package/dist/esm/instant-apps-time-filter.entry.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h as h$2, H as Host, F as Fragment, g as getElement } from './index-e3f04fa1.js';
+import { r as registerInstance, h as h$2, H as Host, g as getElement } from './index-e3f04fa1.js';
 import { c as createStore } from './index-1dc14abf.js';
 import { l as loadModules } from './loadModules-03ba7abe.js';
 import { g as getMessages } from './locale-adb5ff0b.js';
@@ -19,6 +19,8 @@ const { state, onChange } = createStore({
     timeInfoItems: [],
     selectedTimeInfoItem: null,
     loading: true,
+    timeSliderConfig: {},
+    autoPlay: false,
 });
 
 /*
@@ -237,8 +239,8 @@ class InstantAppsTimeFilterViewModel {
                 'esri/core/Handles',
                 'esri/core/reactiveUtils',
                 'esri/widgets/TimeSlider',
-                'esri/TimeExtent',
-                'esri/TimeInterval',
+                'esri/time/TimeExtent',
+                'esri/time/TimeInterval',
                 'esri/layers/support/FeatureFilter',
                 'esri/layers/support/FeatureEffect',
             ]);
@@ -253,8 +255,11 @@ class InstantAppsTimeFilterViewModel {
         catch (_a) { }
     }
     async init(timeSliderRef) {
+        var _a, _b;
         if (timeSliderRef)
             timeSliderRef.innerHTML = '';
+        if (((_b = (_a = state === null || state === void 0 ? void 0 : state.timeSlider) === null || _a === void 0 ? void 0 : _a.viewModel) === null || _b === void 0 ? void 0 : _b.state) === 'playing')
+            state.timeSlider.stop();
         const { view, timeInfoConfigItems } = state;
         if (!view)
             return;
@@ -266,7 +271,7 @@ class InstantAppsTimeFilterViewModel {
             this.setupFilterModeWatcher();
             return Promise.resolve();
         }
-        catch (_a) { }
+        catch (_c) { }
     }
     destroy() {
         var _a, _b;
@@ -311,6 +316,8 @@ class InstantAppsTimeFilterViewModel {
         state.selectedTimeInfoItem = initialTimeInfoItem;
         const config = this.getTimeSliderConfig(timeSliderRef);
         state.timeSlider = new TimeSlider(config);
+        if (state.autoPlay)
+            state.timeSlider.play();
         if (((_b = state.view) === null || _b === void 0 ? void 0 : _b.type) === '2d')
             this.initialize2DView();
     }
@@ -325,23 +332,16 @@ class InstantAppsTimeFilterViewModel {
         var _a;
         const [{ timeExtent, rangeStart, rangeEnd, unit }] = state.timeInfoItems;
         const { TimeExtent, TimeInterval } = this;
-        return {
-            container: timeSliderRef,
-            fullTimeExtent: timeExtent,
-            timeExtent: new TimeExtent({
+        const config = Object.assign({ container: timeSliderRef, fullTimeExtent: timeExtent, timeExtent: new TimeExtent({
                 start: rangeStart,
                 end: rangeEnd,
-            }),
-            mode: 'time-window',
-            loop: true,
-            stops: {
+            }), mode: 'time-window', stops: {
                 interval: new TimeInterval({
                     unit,
                     value: 1,
                 }),
-            },
-            view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null,
-        };
+            }, view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null }, state.timeSliderConfig);
+        return config;
     }
     initialize2DView() {
         state.timeInfoItems.forEach(timeInfoItem => this.applyTimeExtent(timeInfoItem.layerView, new this.TimeExtent({ start: timeInfoItem.rangeStart, end: timeInfoItem.rangeEnd })));
@@ -448,6 +448,8 @@ const InstantAppsTimeFilter = class {
         this.timeInfoConfigItems = [];
         this.filterMode = undefined;
         this.view = undefined;
+        this.timeSliderConfig = undefined;
+        this.autoPlay = false;
     }
     async updateTimeInfoConfigItems() {
         state.timeInfoConfigItems = this.timeInfoConfigItems;
@@ -456,10 +458,28 @@ const InstantAppsTimeFilter = class {
     async updateFilterMode() {
         state.filterMode = this.filterMode;
     }
+    async updateTimeSliderConfig() {
+        state.timeSliderConfig = this.timeSliderConfig;
+        await viewModel.init(this.timeSliderRef);
+    }
+    async updateAutoPlay() {
+        state.autoPlay = this.autoPlay;
+        if (state.timeSlider) {
+            if (state.autoPlay) {
+                state.timeSlider.play();
+            }
+            else {
+                state.timeSlider.stop();
+            }
+        }
+    }
     async componentWillLoad() {
         try {
             state.view = this.view;
             state.timeInfoConfigItems = this.timeInfoConfigItems;
+            state.autoPlay = !!this.autoPlay;
+            if (this.timeSliderConfig)
+                state.timeSliderConfig = this.timeSliderConfig;
             if (this.filterMode)
                 state.filterMode = this.filterMode;
             await getMessages(this);
@@ -480,17 +500,14 @@ const InstantAppsTimeFilter = class {
         viewModel.destroy();
     }
     render() {
-        return h$2(Host, { key: 'bf0887f83b19239ce1b81efad5c356c7edc05ba1' }, this._renderBase());
+        return h$2(Host, { key: '38a0569dba42d51846760bf75df36ee1c88d71b1' }, this._renderBase());
     }
     _renderBase() {
-        return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this._renderMain()));
-    }
-    _renderMain() {
-        return (h$2(Fragment, null, this.view.type === '2d' && this._renderTopEl(), h$2("div", { ref: (ref) => (this.timeSliderRef = ref) })));
+        return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this.view.type === '2d' && this._renderTopEl(), h$2("div", { key: "time-slider", ref: (ref) => (this.timeSliderRef = ref) })));
     }
     _renderLoader() {
         var _a, _b;
-        return (state.loading && (h$2(Fragment, null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
+        return (state.loading && (h$2("div", null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
     }
     _renderTopEl() {
         const moreThanOneTimeLayer = this.timeInfoConfigItems.length > 1;
@@ -520,7 +537,9 @@ const InstantAppsTimeFilter = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "timeInfoConfigItems": ["updateTimeInfoConfigItems"],
-        "filterMode": ["updateFilterMode"]
+        "filterMode": ["updateFilterMode"],
+        "timeSliderConfig": ["updateTimeSliderConfig"],
+        "autoPlay": ["updateAutoPlay"]
     }; }
 };
 InstantAppsTimeFilter.style = InstantAppsTimeFilterStyle0;