@esri/solutions-components 0.10.5 → 0.10.7

package/dist/cjs/instant-apps-control-panel.cjs.entry.js

@@ -72,9 +72,10 @@ const InstantAppsControlPanel = class {
         };
     }
     _getExpand(component) {
+        var _a;
         const { view } = this;
         const { content } = component;
-        const expanded = false;
+        const expanded = (_a = component === null || component === void 0 ? void 0 : component.expanded) !== null && _a !== void 0 ? _a : false;
         return new this.Expand({ content, view, expanded, mode: MODE, group: GROUP });
     }
     _getComponentsNode() {

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

@@ -23,6 +23,8 @@ const { state, onChange } = index.createStore({
     timeInfoItems: [],
     selectedTimeInfoItem: null,
     loading: true,
+    timeSliderConfig: {},
+    autoPlay: false,
 });
 
 /*
@@ -241,8 +243,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',
             ]);
@@ -257,8 +259,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;
@@ -270,7 +275,7 @@ class InstantAppsTimeFilterViewModel {
             this.setupFilterModeWatcher();
             return Promise.resolve();
         }
-        catch (_a) { }
+        catch (_c) { }
     }
     destroy() {
         var _a, _b;
@@ -315,6 +320,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();
     }
@@ -329,23 +336,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 })));
@@ -452,6 +452,8 @@ const InstantAppsTimeFilter = class {
         this.timeInfoConfigItems = [];
         this.filterMode = undefined;
         this.view = undefined;
+        this.timeSliderConfig = undefined;
+        this.autoPlay = false;
     }
     async updateTimeInfoConfigItems() {
         state.timeInfoConfigItems = this.timeInfoConfigItems;
@@ -460,10 +462,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 locale.getMessages(this);
@@ -484,17 +504,14 @@ const InstantAppsTimeFilter = class {
         viewModel.destroy();
     }
     render() {
-        return index$1.h(index$1.Host, { key: 'bf0887f83b19239ce1b81efad5c356c7edc05ba1' }, this._renderBase());
+        return index$1.h(index$1.Host, { key: '38a0569dba42d51846760bf75df36ee1c88d71b1' }, this._renderBase());
     }
     _renderBase() {
-        return (index$1.h("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this._renderMain()));
-    }
-    _renderMain() {
-        return (index$1.h(index$1.Fragment, null, this.view.type === '2d' && this._renderTopEl(), index$1.h("div", { ref: (ref) => (this.timeSliderRef = ref) })));
+        return (index$1.h("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this.view.type === '2d' && this._renderTopEl(), index$1.h("div", { key: "time-slider", ref: (ref) => (this.timeSliderRef = ref) })));
     }
     _renderLoader() {
         var _a, _b;
-        return (state.loading && (index$1.h(index$1.Fragment, null, index$1.h("div", { class: CSS.background }), index$1.h("div", { class: CSS.loadingContainer }, index$1.h("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 && (index$1.h("div", null, index$1.h("div", { class: CSS.background }), index$1.h("div", { class: CSS.loadingContainer }, index$1.h("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;
@@ -524,7 +541,9 @@ const InstantAppsTimeFilter = class {
     get el() { return index$1.getElement(this); }
     static get watchers() { return {
         "timeInfoConfigItems": ["updateTimeInfoConfigItems"],
-        "filterMode": ["updateFilterMode"]
+        "filterMode": ["updateFilterMode"],
+        "timeSliderConfig": ["updateTimeSliderConfig"],
+        "autoPlay": ["updateAutoPlay"]
     }; }
 };
 InstantAppsTimeFilter.style = InstantAppsTimeFilterStyle0;